Skip to content

Commit

Permalink
Fixes for addShape and Fix for Issue #75
Browse files Browse the repository at this point in the history
  • Loading branch information
GitBrent authored and GitBrent committed Apr 30, 2017
1 parent ce1bd2d commit a4e6fa6
Show file tree
Hide file tree
Showing 4 changed files with 81 additions and 50 deletions.
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@

**Implemented Enhancements:**
- Add ability to create charts [\#51](https://github.com/gitbrent/PptxGenJS/issues/51) ([alagarrk](https://github.com/alagarrk))
- Shape line Diagonal [\#75](https://github.com/gitbrent/PptxGenJS/issues/75) ([vanekar](https://github.com/vanekar))
- Add hyperlink to Image [\#77](https://github.com/gitbrent/PptxGenJS/issues/77) ([plopez7](https://github.com/plopez7))



Expand Down
6 changes: 5 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -694,12 +694,16 @@ pptx.setLayout('LAYOUT_WIDE');

var slide = pptx.addNewSlide();

// Misc Shapes
// LINE
slide.addShape(pptx.shapes.LINE, { x:4.15, y:4.40, w:5, h:0, line:'FF0000', line_size:1 });
slide.addShape(pptx.shapes.LINE, { x:4.15, y:4.80, w:5, h:0, line:'FF0000', line_size:2, line_head:'triangle' });
slide.addShape(pptx.shapes.LINE, { x:4.15, y:5.20, w:5, h:0, line:'FF0000', line_size:3, line_tail:'triangle' });
slide.addShape(pptx.shapes.LINE, { x:4.15, y:5.60, w:5, h:0, line:'FF0000', line_size:4, line_head:'triangle', line_tail:'triangle' });
// DIAGONAL LINE
slide.addShape(pptx.shapes.LINE, { x:0, y:0, w:5.0, h:0, line:'FF0000', rotate:45 });
// RECTANGLE
slide.addShape(pptx.shapes.RECTANGLE, { x:0.50, y:0.75, w:5, h:3, fill:'FF0000' });
// OVAL
slide.addShape(pptx.shapes.OVAL, { x:4.15, y:0.75, w:5, h:2, fill:{ type:'solid', color:'0088CC', alpha:25 } });

// Adding text to Shapes:
Expand Down
102 changes: 62 additions & 40 deletions dist/pptxgen.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ if ( NODEJS ) {
var PptxGenJS = function(){
// CONSTANTS
var APP_VER = "1.5.0";
var APP_REL = "20170429";
var APP_REL = "20170430";
//
var LAYOUTS = {
'LAYOUT_4x3' : { name: 'screen4x3', width: 9144000, height: 6858000 },
Expand Down Expand Up @@ -129,7 +129,7 @@ var PptxGenJS = function(){
this.charts = CHART_TYPES;

// D: Fall back to base shapes if shapes file was not linked
if ( typeof gObjPptxShapes === 'undefined' ) gObjPptxShapes = BASE_SHAPES;
gObjPptxShapes = ( gObjPptxShapes || this.shapes );

/* ===============================================================================================
|
Expand Down Expand Up @@ -1482,7 +1482,15 @@ var PptxGenJS = function(){
// B: Start paragraph if this is the first text obj, or if current textObj is about to be bulleted or aligned
if ( idx == 0 ) {
// ISSUE#69: Adding bodyProps more than once inside <p:txBody> causes "corrupt presentation" errors in PPT 2007, PPT 2010.
strSlideXml += genXmlBodyProperties(textObj.options) + '<a:lstStyle/>';
strSlideXml += genXmlBodyProperties(textObj.options);
// NOTE: Shape type 'LINE' has different text align needs (a lstStyle.lvl1pPr between bodyPr and p)
// FIXME: LINE align doesnt work (code diff is substantial!)
if ( textObj.options.h == 0 && textObj.options.line && textObj.options.align ) {
strSlideXml += '<a:lstStyle><a:lvl1pPr algn="l"/></a:lstStyle>';
}
else {
strSlideXml += '<a:lstStyle/>';
}
strSlideXml += '<a:p>' + paragraphPropXml;
}
else if ( idx > 0 && (typeof textObj.options.bullet !== 'undefined' || typeof textObj.options.align !== 'undefined') ) {
Expand Down Expand Up @@ -1871,26 +1879,24 @@ var PptxGenJS = function(){
// STEP 5: Loop over all Slide.data objects and add them to this slide ===============================
$.each(inSlide.data, function(idx,slideObj){
var x = 0, y = 0, cx = (EMU*10), cy = 0;
//var moreStyles = '', moreStylesAttr = '', outStyles = '', styleData = '',
var locationAttr = '';
var shapeType = null;
var locationAttr = '', shapeType = null;

// A: Set option vars
if ( slideObj.options ) {
if ( slideObj.options.w || slideObj.options.w == 0 ) slideObj.options.cx = slideObj.options.w;
if ( slideObj.options.h || slideObj.options.h == 0 ) slideObj.options.cy = slideObj.options.h;
//
if ( slideObj.options.x || slideObj.options.x == 0 ) x = getSmartParseNumber( slideObj.options.x , 'X' );
if ( slideObj.options.y || slideObj.options.y == 0 ) y = getSmartParseNumber( slideObj.options.y , 'Y' );
if ( slideObj.options.cx || slideObj.options.cx == 0 ) cx = getSmartParseNumber( slideObj.options.cx, 'X' );
if ( slideObj.options.cy || slideObj.options.cy == 0 ) cy = getSmartParseNumber( slideObj.options.cy, 'Y' );
//
if ( slideObj.options.shape ) shapeType = getShapeInfo( slideObj.options.shape );
//
if ( slideObj.options.flipH ) locationAttr += ' flipH="1"';
if ( slideObj.options.flipV ) locationAttr += ' flipV="1"';
if ( slideObj.options.rotate ) locationAttr += ' rot="' + ( (slideObj.options.rotate > 360 ? (slideObj.options.rotate - 360) : slideObj.options.rotate) * 60000 ) + '"';
}
slideObj.options = slideObj.options || {};

if ( slideObj.options.w || slideObj.options.w == 0 ) slideObj.options.cx = slideObj.options.w;
if ( slideObj.options.h || slideObj.options.h == 0 ) slideObj.options.cy = slideObj.options.h;
//
if ( slideObj.options.x || slideObj.options.x == 0 ) x = getSmartParseNumber( slideObj.options.x , 'X' );
if ( slideObj.options.y || slideObj.options.y == 0 ) y = getSmartParseNumber( slideObj.options.y , 'Y' );
if ( slideObj.options.cx || slideObj.options.cx == 0 ) cx = getSmartParseNumber( slideObj.options.cx, 'X' );
if ( slideObj.options.cy || slideObj.options.cy == 0 ) cy = getSmartParseNumber( slideObj.options.cy, 'Y' );
//
if ( slideObj.options.shape ) shapeType = getShapeInfo( slideObj.options.shape );
//
if ( slideObj.options.flipH ) locationAttr += ' flipH="1"';
if ( slideObj.options.flipV ) locationAttr += ' flipV="1"';
if ( slideObj.options.rotate ) locationAttr += ' rot="' + ( (slideObj.options.rotate > 360 ? (slideObj.options.rotate - 360) : slideObj.options.rotate) * 60000 ) + '"';

// B: Add OBJECT to current Slide ----------------------------
switch ( slideObj.type ) {
Expand Down Expand Up @@ -2155,21 +2161,16 @@ var PptxGenJS = function(){
strSlideXml += '<a:ext cx="' + cx + '" cy="' + cy + '"/></a:xfrm>';
strSlideXml += '<a:prstGeom prst="' + shapeType.name + '"><a:avLst/></a:prstGeom>';

if ( slideObj.options ) {
( slideObj.options.fill ) ? strSlideXml += genXmlColorSelection(slideObj.options.fill) : strSlideXml += '<a:noFill/>';

if ( slideObj.options.line ) {
var lineAttr = '';
if ( slideObj.options.line_size ) lineAttr += ' w="' + (slideObj.options.line_size * ONEPT) + '"';
strSlideXml += '<a:ln' + lineAttr + '>';
strSlideXml += genXmlColorSelection( slideObj.options.line );
if ( slideObj.options.line_head ) strSlideXml += '<a:headEnd type="' + slideObj.options.line_head + '"/>';
if ( slideObj.options.line_tail ) strSlideXml += '<a:tailEnd type="' + slideObj.options.line_tail + '"/>';
strSlideXml += '</a:ln>';
}
}
else {
strSlideXml += '<a:noFill/>';
// Option: FILL
strSlideXml += ( slideObj.options.fill ? genXmlColorSelection(slideObj.options.fill) : '<a:noFill/>' );

// Shape Type: LINE: line color
if ( slideObj.options.line ) {
strSlideXml += '<a:ln'+ ( slideObj.options.line_size ? ' w="'+ (slideObj.options.line_size*ONEPT) +'"' : '') +'>';
strSlideXml += genXmlColorSelection( slideObj.options.line );
if ( slideObj.options.line_head ) strSlideXml += '<a:headEnd type="' + slideObj.options.line_head + '"/>';
if ( slideObj.options.line_tail ) strSlideXml += '<a:tailEnd type="' + slideObj.options.line_tail + '"/>';
strSlideXml += '</a:ln>';
}

// EFFECTS > SHADOW: REF: @see http://officeopenxml.com/drwSp-effects.php
Expand Down Expand Up @@ -3016,14 +3017,29 @@ var PptxGenJS = function(){
}

slideObj.addShape = function( shape, opt ) {
var options = ( typeof opt === 'object' ? opt : {} );

if ( !shape || typeof shape !== 'object' ) {
console.log("ERROR: Missing/Invalid shape parameter! Example: `addShape(pptx.shapes.LINE, {x:1, y:1, w:1, h:1});` ");
return;
}

// STEP 1: Grab Slide object count
slideObjNum = gObjPptx.slides[slideNum].data.length;

// STEP 2: Set props
gObjPptx.slides[slideNum].data[slideObjNum] = {};
gObjPptx.slides[slideNum].data[slideObjNum].type = 'text';
gObjPptx.slides[slideNum].data[slideObjNum].options = (typeof opt === 'object') ? opt : {};
gObjPptx.slides[slideNum].data[slideObjNum].options.shape = shape;
gObjPptx.slides[slideNum].data[slideObjNum].options = options;

// STEP 3: Set option defaults
options.shape = shape;
options.x = ( options.x || (options.x == 0 ? 0 : 1) );
options.y = ( options.y || (options.y == 0 ? 0 : 1) );
options.w = ( options.w || 1.0 );
options.h = ( options.h || (shape.name == 'line' ? 0 : 1.0) );
options.line = ( options.line || (shape.name == 'line' ? '333333' : null) );
options.line_size = ( options.line_size || (shape.name == 'line' ? 1 : null) );

// LAST: Return
return this;
Expand Down Expand Up @@ -3204,7 +3220,12 @@ var PptxGenJS = function(){
gObjPptx.slides[slideNum].data[slideObjNum].type = 'text';
gObjPptx.slides[slideNum].data[slideObjNum].text = text;

// STEP 4: Set options
gObjPptx.slides[slideNum].data[slideObjNum].options = opt;
if ( opt.shape && opt.shape.name == 'line' ) {
opt.line = (opt.line || '333333' );
opt.line_size = (opt.line_size || 1 );
}
gObjPptx.slides[slideNum].data[slideObjNum].options.bodyProp = {};
gObjPptx.slides[slideNum].data[slideObjNum].options.bodyProp.autoFit = (opt.autoFit || false); // If true, shape will collapse to text size (Fit To Shape)
gObjPptx.slides[slideNum].data[slideObjNum].options.bodyProp.anchor = (opt.valign || 'ctr'); // VALS: [t,ctr,b]
Expand All @@ -3215,7 +3236,7 @@ var PptxGenJS = function(){
gObjPptx.slides[slideNum].data[slideObjNum].options.bodyProp.bIns = inch2Emu(opt.inset);
}

// STEP 4: Create hyperlink rels
// STEP 5: Create hyperlink rels
createHyperlinkRels(text, gObjPptx.slides[slideNum].rels);

// LAST: Return
Expand Down Expand Up @@ -3288,7 +3309,8 @@ var PptxGenJS = function(){

// Add Slide Numbers
if ( typeof inMaster.isNumbered !== 'undefined' ) slideObj.hasSlideNumber(inMaster.isNumbered); // DEPRECATED
if ( inMaster.slideNumber ) slideObj.slideNumber(inMaster.slideNumber);
// TODO: ^^^ fixme - i think we cant set a BOOL - isn this an object now???
if ( inMaster.slideNumber && typeof inMaster.slideNumber === 'object' ) slideObj.slideNumber(inMaster.slideNumber);
}

// LAST: Return this Slide
Expand Down
21 changes: 12 additions & 9 deletions examples/pptxgenjs-demo.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* NAME: pptxgenjs-demo.js
* AUTH: Brent Ely (https://github.com/gitbrent/)
* DATE: Apr 28, 2017
* DATE: Apr 29, 2017
* DESC: Common test/demo slides for all library features
* DEPS: Loaded by `pptxgenjs-demo.js` and `nodejs-demo.js`
*/
Expand Down Expand Up @@ -39,8 +39,8 @@ var gStrLorumIpsum = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. P
var gArrNamesF = ['Markiplier','Jack','Brian','Paul','Ev','Ann','Michelle','Jenny','Lara','Kathryn'];
var gArrNamesL = ['Johnson','Septiceye','Lapston','Lewis','Clark','Griswold','Hart','Cube','Malloy','Capri'];
var gStrHello = 'BONJOUR - CIAO - GUTEN TAG - HELLO - HOLA - NAMASTE - OLÀ - ZDRAS-TVUY-TE - こんにちは - 你好';
var colors = ['FF0000','AB00CD','00FF00','00AA00','003300','330033','990099','33FFFF','AA33CC','336699'];
var fonts = ['Arial','Courier New','Times','Verdana'];
//var colors = ['FF0000','AB00CD','00FF00','00AA00','003300','330033','990099','33FFFF','AA33CC','336699'];
//var fonts = ['Arial','Courier New','Times','Verdana'];
//
var gOptsTitle = { color:'9F9F9F', marginPt:3, border:[0,0,{pt:'1',color:'CFCFCF'},0] };
var optsSubTitle = { x:0.5, y:0.7, cx:4, cy:0.3, font_size:18, font_face:'Arial', color:'0088CC', fill:'FFFFFF' };
Expand Down Expand Up @@ -1071,6 +1071,7 @@ function genSlides_Shape(pptx) {
slide.addShape(pptx.shapes.LINE, { x:4.2, y:4.8, w:5.0, h:0.0, line:'FF0000', line_size:2, line_head:'triangle' });
slide.addShape(pptx.shapes.LINE, { x:4.2, y:5.2, w:5.0, h:0.0, line:'FF0000', line_size:3, line_tail:'triangle' });
slide.addShape(pptx.shapes.LINE, { x:4.2, y:5.6, w:5.0, h:0.0, line:'FF0000', line_size:4, line_head:'triangle', line_tail:'triangle' });
slide.addShape(pptx.shapes.LINE, { x:5.7, y:2.7, w:2.5, rotate:(360-45) }); // DIAGONAL Line // TEST: (missing `h`, `line`, `line_size`)
//
slide.addShape(pptx.shapes.RIGHT_TRIANGLE, { x:0.4, y:4.3, w:6.0, h:3.0, fill:'0088CC', line:'000000', line_size:3 });
slide.addShape(pptx.shapes.RIGHT_TRIANGLE, { x:7.0, y:4.3, w:6.0, h:3.0, fill:'0088CC', line:'000000', flipH:true });
Expand All @@ -1086,12 +1087,14 @@ function genSlides_Shape(pptx) {
slide.addText('OVAL (rotate:90, alpha:50)', { shape:pptx.shapes.OVAL, x:7.7, y:1.4, w:3.0, h:1.5, fill:{ type:'solid', color:'FF00CC', alpha:50 }, rotate:90, align:'c', font_size:14 });
slide.addText('ROUNDED-RECTANGLE', { shape:pptx.shapes.ROUNDED_RECTANGLE, x:10 , y:2.5, w:3.0, h:1.5, fill:'00FF00', align:'c', font_size:14 });
//
slide.addText('LINE', { shape:pptx.shapes.LINE, align:'c', x:4.15, y:4.40, w:5, h:0, line:'FF0000', line_size:1 });
slide.addText('LINE', { shape:pptx.shapes.LINE, align:'l', x:4.15, y:4.80, w:5, h:0, line:'FF0000', line_size:2, line_head:'triangle' });
slide.addText('LINE', { shape:pptx.shapes.LINE, align:'r', x:4.15, y:5.20, w:5, h:0, line:'FF0000', line_size:3, line_tail:'triangle' });
slide.addText('LINE', { shape:pptx.shapes.LINE, align:'c', x:4.15, y:5.60, w:5, h:0, line:'FF0000', line_size:4, line_head:'triangle', line_tail:'triangle' });
slide.addText('RIGHT-TRIANGLE', { shape:pptx.shapes.RIGHT_TRIANGLE, align:'c', x:0.40, y:4.30, w:6, h:3, fill:'0088CC', line:'000000', line_size:3 });
slide.addText('RIGHT-TRIANGLE', { shape:pptx.shapes.RIGHT_TRIANGLE, align:'c', x:7.00, y:4.30, w:6, h:3, fill:'0088CC', line:'000000', flipH:true });
slide.addText('LINE size=1', { shape:pptx.shapes.LINE, align:'c', x:4.15, y:4.40, w:5, h:0, line:'FF0000', line_size:1 });
slide.addText('LINE size=2', { shape:pptx.shapes.LINE, align:'l', x:4.15, y:4.80, w:5, h:0, line:'FF0000', line_size:2, line_tail:'triangle' });
slide.addText('LINE size=3', { shape:pptx.shapes.LINE, align:'r', x:4.15, y:5.20, w:5, h:0, line:'FF0000', line_size:3, line_head:'triangle' });
slide.addText('LINE size=4', { shape:pptx.shapes.LINE, align:'c', x:4.15, y:5.60, w:5, h:0, line:'FF0000', line_size:4, line_head:'triangle', line_tail:'triangle' });
slide.addText('DIAGONAL', { shape:pptx.shapes.LINE, valign:'b', x:5.65, y:2.70, w:2.5, line_size:2, rotate:(360-45) }); // TEST: (missing `h` and `line`)
//
slide.addText('RIGHT-TRIANGLE', { shape:pptx.shapes.RIGHT_TRIANGLE, align:'c', x:0.4, y:4.3, w:6, h:3, fill:'0088CC', line:'000000', line_size:3 });
slide.addText('RIGHT-TRIANGLE', { shape:pptx.shapes.RIGHT_TRIANGLE, align:'c', x:7.0, y:4.3, w:6, h:3, fill:'0088CC', line:'000000', flipH:true });
}

function genSlides_Text(pptx) {
Expand Down

0 comments on commit a4e6fa6

Please sign in to comment.