added connected lines for shapes

demos/modules/demo_shape.mjs

@@ -96,6 +96,7 @@ function genSlide01(pptx) {
 	});
 
 	slide.addShape(pptx.shapes.RIGHT_TRIANGLE, {
+		sId: 20,
 		x: 0.4,
 		y: 4.3,
 		w: 6.0,
@@ -105,6 +106,7 @@ function genSlide01(pptx) {
 		shapeName: "First Right Triangle",
 	});
 	slide.addShape(pptx.shapes.RIGHT_TRIANGLE, {
+		sId: 21,
 		x: 7.0,
 		y: 4.3,
 		w: 6.0,
@@ -113,6 +115,22 @@ function genSlide01(pptx) {
 		line: { color: pptx.colors.ACCENT1, width: 2 },
 		flipH: true,
 	});
+
+	slide.addShape(pptx.shapes.LINE, {
+		x: 3108960,
+		y: 5303520,
+		w: 6035040,
+		h: 0,
+		line: {
+			width: 2, color: "000000",
+			sourceId: 20,
+			targetId: 21,
+			sourceAnchorPos: 5, // on rectangel pptx.anchor.TOP , pptx.anchor.BOTTOM , pptx.anchor.LEFT or pptx.anchor.RIGHT
+			targetAnchorPos: 5 // could be used instead
+		}
+	});
+
+
 }
 
 /**
@@ -251,6 +269,7 @@ function genSlide02(pptx) {
 	slide.addText("RIGHT-TRIANGLE", {
 		shape: pptx.shapes.RIGHT_TRIANGLE,
 		align: "center",
+		sId: 20,
 		x: 0.4,
 		y: 4.3,
 		w: 6,
@@ -261,6 +280,7 @@ function genSlide02(pptx) {
 	slide.addText("HYPERLINK-SHAPE", {
 		shape: pptx.shapes.RIGHT_TRIANGLE,
 		align: "center",
+		sId: 21,
 		x: 7.0,
 		y: 4.3,
 		w: 6,
@@ -270,4 +290,18 @@ function genSlide02(pptx) {
 		flipH: true,
 		hyperlink: { url: "https://github.com/gitbrent/pptxgenjs", tooltip: "Visit Homepage" },
 	});
+	slide.addShape(pptx.shapes.LINE, {
+		x: 3108960,
+		y: 5303520,
+		w: 6035040,
+		h: 0,
+		line: {
+			width: 2, color: "000000",
+			sourceId: 20,
+			targetId: 21,
+			sourceAnchorPos: 5, // on rectangel pptx.anchor.TOP , pptx.anchor.BOTTOM , pptx.anchor.LEFT or pptx.anchor.RIGHT
+			targetAnchorPos: 5 // could be used instead
+		}
+	});
+	slide.addText("Connected lines do not support text", {x:4.5,y:6})
 }

src/core-enums.ts

@@ -321,6 +321,13 @@ export enum AlignV {
 	'bottom' = 'bottom',
 }
 
+export enum ANCHOR{
+	"TOP" = 0,
+	"LEFT" = 1,
+	"BOTTOM" = 2,
+	"RIGHT" = 3
+}
+
 export enum SHAPE_TYPE {
 	ACTION_BUTTON_BACK_OR_PREVIOUS = 'actionButtonBackPrevious',
 	ACTION_BUTTON_BEGINNING = 'actionButtonBeginning',

src/core-interfaces.ts

@@ -16,6 +16,12 @@ import { CHART_NAME, PLACEHOLDER_TYPE, SHAPE_NAME, SLIDE_OBJECT_TYPES, TEXT_HALI
  * @example '75%' // coordinate as percentage of slide size
  */
 export type Coord = number | string
+
+export type IDCoord = {
+	id:number
+	posistion: PositionProps
+}
+
 export type PositionProps = {
 	/**
 	 * Horizontal position
@@ -238,6 +244,32 @@ export interface ShapeLineProps extends ShapeFillProps {
 	 * @deprecated v3.3.0 - use `width`
 	 */
 	size?: number
+	/**
+	 * Set line shape to be connector
+	 * @default false
+	 */
+	isConnector?: boolean
+	/**
+	 * connected source shape id
+	 */
+	sourceId?: number
+	/**
+	 * connected target shape id
+	 */
+	targetId?: number
+	/**
+	 * source shape connection position (dependent on available connection points on a shape)
+	 */
+	sourceAnchorPos?: number
+	/**
+	 * target shape connection position (dependent on available connection points on a shape)
+	 */
+	targetAnchorPos?: number
+	/**
+	 * adjustments to the curve
+	 */
+	 curveadjust?: number[]
+
 }
 // used by: chart, slide, table, text
 export interface TextBaseProps {
@@ -263,80 +295,80 @@ export interface TextBaseProps {
 	 * @default false
 	 */
 	bullet?:
-		| boolean
-		| {
-				/**
-				 * Bullet type
-				 * @default bullet
-				 */
-				type?: 'bullet' | 'number'
-				/**
-				 * Bullet character code (unicode)
-				 * @since v3.3.0
-				 * @example '25BA' // 'BLACK RIGHT-POINTING POINTER' (U+25BA)
-				 */
-				characterCode?: string
-				/**
-				 * Indentation (space between bullet and text) (points)
-				 * @since v3.3.0
-				 * @default 27 // DEF_BULLET_MARGIN
-				 * @example 10 // Indents text 10 points from bullet
-				 */
-				indent?: number
-				/**
-				 * Number type
-				 * @since v3.3.0
-				 * @example 'romanLcParenR' // roman numerals lower-case with paranthesis right
-				 */
-				numberType?:
-					| 'alphaLcParenBoth'
-					| 'alphaLcParenR'
-					| 'alphaLcPeriod'
-					| 'alphaUcParenBoth'
-					| 'alphaUcParenR'
-					| 'alphaUcPeriod'
-					| 'arabicParenBoth'
-					| 'arabicParenR'
-					| 'arabicPeriod'
-					| 'arabicPlain'
-					| 'romanLcParenBoth'
-					| 'romanLcParenR'
-					| 'romanLcPeriod'
-					| 'romanUcParenBoth'
-					| 'romanUcParenR'
-					| 'romanUcPeriod'
-				/**
-				 * Number bullets start at
-				 * @since v3.3.0
-				 * @default 1
-				 * @example 10 // numbered bullets start with 10
-				 */
-				numberStartAt?: number
+	| boolean
+	| {
+		/**
+		 * Bullet type
+		 * @default bullet
+		 */
+		type?: 'bullet' | 'number'
+		/**
+		 * Bullet character code (unicode)
+		 * @since v3.3.0
+		 * @example '25BA' // 'BLACK RIGHT-POINTING POINTER' (U+25BA)
+		 */
+		characterCode?: string
+		/**
+		 * Indentation (space between bullet and text) (points)
+		 * @since v3.3.0
+		 * @default 27 // DEF_BULLET_MARGIN
+		 * @example 10 // Indents text 10 points from bullet
+		 */
+		indent?: number
+		/**
+		 * Number type
+		 * @since v3.3.0
+		 * @example 'romanLcParenR' // roman numerals lower-case with paranthesis right
+		 */
+		numberType?:
+		| 'alphaLcParenBoth'
+		| 'alphaLcParenR'
+		| 'alphaLcPeriod'
+		| 'alphaUcParenBoth'
+		| 'alphaUcParenR'
+		| 'alphaUcPeriod'
+		| 'arabicParenBoth'
+		| 'arabicParenR'
+		| 'arabicPeriod'
+		| 'arabicPlain'
+		| 'romanLcParenBoth'
+		| 'romanLcParenR'
+		| 'romanLcPeriod'
+		| 'romanUcParenBoth'
+		| 'romanUcParenR'
+		| 'romanUcPeriod'
+		/**
+		 * Number bullets start at
+		 * @since v3.3.0
+		 * @default 1
+		 * @example 10 // numbered bullets start with 10
+		 */
+		numberStartAt?: number
 
-				// DEPRECATED
+		// DEPRECATED
 
-				/**
-				 * Bullet code (unicode)
-				 * @deprecated v3.3.0 - use `characterCode`
-				 */
-				code?: string
-				/**
-				 * Margin between bullet and text
-				 * @since v3.2.1
-				 * @deplrecated v3.3.0 - use `indent`
-				 */
-				marginPt?: number
-				/**
-				 * Number to start with (only applies to type:number)
-				 * @deprecated v3.3.0 - use `numberStartAt`
-				 */
-				startAt?: number
-				/**
-				 * Number type
-				 * @deprecated v3.3.0 - use `numberType`
-				 */
-				style?: string
-		  }
+		/**
+		 * Bullet code (unicode)
+		 * @deprecated v3.3.0 - use `characterCode`
+		 */
+		code?: string
+		/**
+		 * Margin between bullet and text
+		 * @since v3.2.1
+		 * @deplrecated v3.3.0 - use `indent`
+		 */
+		marginPt?: number
+		/**
+		 * Number to start with (only applies to type:number)
+		 * @deprecated v3.3.0 - use `numberStartAt`
+		 */
+		startAt?: number
+		/**
+		 * Number type
+		 * @deprecated v3.3.0 - use `numberType`
+		 */
+		style?: string
+	}
 	/**
 	 * Text color
 	 * - `HexColor` or `ThemeColor`
@@ -390,23 +422,23 @@ export interface TextBaseProps {
 	 */
 	underline?: {
 		style?:
-			| 'dash'
-			| 'dashHeavy'
-			| 'dashLong'
-			| 'dashLongHeavy'
-			| 'dbl'
-			| 'dotDash'
-			| 'dotDashHeave'
-			| 'dotDotDash'
-			| 'dotDotDashHeavy'
-			| 'dotted'
-			| 'dottedHeavy'
-			| 'heavy'
-			| 'none'
-			| 'sng'
-			| 'wavy'
-			| 'wavyDbl'
-			| 'wavyHeavy'
+		| 'dash'
+		| 'dashHeavy'
+		| 'dashLong'
+		| 'dashLongHeavy'
+		| 'dbl'
+		| 'dotDash'
+		| 'dotDashHeave'
+		| 'dotDotDash'
+		| 'dotDotDashHeavy'
+		| 'dotted'
+		| 'dottedHeavy'
+		| 'heavy'
+		| 'none'
+		| 'sng'
+		| 'wavy'
+		| 'wavyDbl'
+		| 'wavyHeavy'
 		color?: Color
 	}
 	/**
@@ -632,6 +664,10 @@ export interface ShapeProps extends PositionProps {
 	 * @depreacted v3.3.0
 	 */
 	lineTail?: 'arrow' | 'diamond' | 'none' | 'oval' | 'stealth' | 'triangle'
+	/**
+     * id of shape
+     */
+	sId?: number
 }
 
 // tables =========================================================================================
@@ -1335,20 +1371,20 @@ export interface IChartPropsTitle extends TextBaseProps {
 }
 export interface IChartOpts
 	extends IChartPropsAxisCat,
-		IChartPropsAxisSer,
-		IChartPropsAxisVal,
-		IChartPropsBase,
-		IChartPropsChartBar,
-		IChartPropsChartDoughnut,
-		IChartPropsChartLine,
-		IChartPropsChartPie,
-		IChartPropsChartRadar,
-		IChartPropsDataLabel,
-		IChartPropsDataTable,
-		IChartPropsLegend,
-		IChartPropsTitle,
-		OptsChartGridLine,
-		PositionProps {
+	IChartPropsAxisSer,
+	IChartPropsAxisVal,
+	IChartPropsBase,
+	IChartPropsChartBar,
+	IChartPropsChartDoughnut,
+	IChartPropsChartLine,
+	IChartPropsChartPie,
+	IChartPropsChartRadar,
+	IChartPropsDataLabel,
+	IChartPropsDataTable,
+	IChartPropsLegend,
+	IChartPropsTitle,
+	OptsChartGridLine,
+	PositionProps {
 	/**
 	 * Alt Text value ("How would you describe this object and its contents to someone who is blind?")
 	 * - PowerPoint: [right-click on a chart] > "Edit Alt Text..."
@@ -1487,15 +1523,15 @@ export interface SlideMasterProps {
 		| { rect: {} }
 		| { text: TextProps }
 		| {
-				placeholder: {
-					options: PlaceholderProps
-					/**
-					 * Text to be shown in placeholder (shown until user focuses textbox or adds text)
-					 * - Leave blank to have powerpoint show default phrase (ex: "Click to add title")
-					 */
-					text?: string
-				}
-		  }
+			placeholder: {
+				options: PlaceholderProps
+				/**
+				 * Text to be shown in placeholder (shown until user focuses textbox or adds text)
+				 * - Leave blank to have powerpoint show default phrase (ex: "Click to add title")
+				 */
+				text?: string
+			}
+		}
 	)[]
 	slideNumber?: SlideNumberProps