Add shadow options to image properties

README.md

@@ -277,3 +277,12 @@ If you find this library useful, please consider sponsoring us through a [donati
 Copyright © 2015-present [Brent Ely](https://github.com/gitbrent/PptxGenJS)
 
 [MIT](https://github.com/gitbrent/PptxGenJS/blob/master/LICENSE)
+
+---
+
+# How to run your branch locally
+
+- Make sure you are using the correct node version (Check .nvmrc file)
+- Run the command `npm run ship` to bundle your changes
+- On your terminal, `cd` into `demos` folder then run `node browser_server.mjs`
+- Open [http://localhost:8000/browser/index.html](http://localhost:8000/browser/index.html) on your browser and test your changes in the sandbox

src/core-interfaces.ts

@@ -132,7 +132,7 @@ export interface HyperlinkProps {
 	 */
 	tooltip?: string
 }
-// used by: chart, text
+// used by: chart, text, image
 export interface ShadowProps {
 	/**
 	 * shadow type
@@ -543,6 +543,17 @@ export interface ImageProps extends PositionProps, DataOrPathProps, ObjectNamePr
 	 * @example 25 // 25% transparent
 	 */
 	transparency?: number
+
+	/** 
+	 * Shadow Props
+	 * @example { type: 'outer',
+	 *            opacity: 0.5,
+	 *            blur: 20, 
+	 *            color: '000000',
+	 *            offset: 20, 
+	 *            angle: 270 }
+	 */
+	 shadow?: ShadowProps
 }
 /**
  * Add media (audio/video) to slide

src/gen-objects.ts

@@ -46,7 +46,7 @@ import {
 } from './core-interfaces'
 import { getSlidesForTableRows } from './gen-tables'
 import { encodeXmlEntities, getExtension, getNewRelId, getSmartParseNumber, inch2Emu, valToPts } from './gen-utils'
-import { correctShadowOptions } from './gen-xml'
+import { correctShadowOptions } from './gen-utils'
 
 /** counter for included charts (used for index in their filenames) */
 let _chartCounter: number = 0
@@ -298,8 +298,8 @@ export function addChartDefinition(target: PresSlide, type: CHART_NAME | IChartM
 	options.chartColors = Array.isArray(options.chartColors)
 		? options.chartColors
 		: options._type === CHART_TYPE.PIE || options._type === CHART_TYPE.DOUGHNUT
-		? PIECHART_COLORS
-		: BARCHART_COLORS
+			? PIECHART_COLORS
+			: BARCHART_COLORS
 	options.chartColorsOpacity = options.chartColorsOpacity && !isNaN(options.chartColorsOpacity) ? options.chartColorsOpacity : null
 	// DEPRECATED: v3.11.0 - use `plotArea.border` vvv
 	options.border = options.border && typeof options.border === 'object' ? options.border : null
@@ -443,6 +443,7 @@ export function addImageDefinition(target: PresSlide, opt: ImageProps) {
 		flipH: opt.flipH || false,
 		transparency: opt.transparency || 0,
 		objectName: objectName,
+		shadow: correctShadowOptions(opt.shadow)
 	}
 
 	// STEP 4: Add this image to this Slide Rels (rId/rels count spans all slides! Count all images to get next rId)
@@ -1095,7 +1096,7 @@ export function addTextDefinition(target: PresSlide, text: TextProps[], opts: Te
  */
 export function addPlaceholdersToSlideLayouts(slide: PresSlide) {
 	// Add all placeholders on this Slide that dont already exist
-	;(slide._slideLayout._slideObjects || []).forEach(slideLayoutObj => {
+	; (slide._slideLayout._slideObjects || []).forEach(slideLayoutObj => {
 		if (slideLayoutObj._type === SLIDE_OBJECT_TYPES.placeholder) {
 			// A: Search for this placeholder on Slide before we add
 			// NOTE: Check to ensure a placeholder does not already exist on the Slide

src/gen-utils.ts

@@ -3,7 +3,7 @@
  */
 
 import { EMU, REGEX_HEX_COLOR, DEF_FONT_COLOR, ONEPT, SchemeColor, SCHEME_COLORS } from './core-enums'
-import { IChartOpts, PresLayout, TextGlowProps, PresSlide, ShapeFillProps, Color, ShapeLineProps, Coord, Gradient, GradientStops } from './core-interfaces'
+import { IChartOpts, PresLayout, TextGlowProps, PresSlide, ShapeFillProps, Color, ShapeLineProps, Coord, Gradient, GradientStops, ShadowProps } from './core-interfaces'
 
 /**
  * Translates any type of `x`/`y`/`w`/`h` prop to EMU
@@ -252,9 +252,9 @@ function createLinearGradient(angle = 0): string {
 function isGradient(gradient?: Gradient): boolean {
 	return Boolean(
 		gradient?.stops &&
-			typeof gradient.stops === 'object' &&
-			Object.keys(gradient.stops).length > 0 &&
-			Object.keys(gradient.stops).every(stop => Number.isFinite(Number(stop)))
+		typeof gradient.stops === 'object' &&
+		Object.keys(gradient.stops).length > 0 &&
+		Object.keys(gradient.stops).every(stop => Number.isFinite(Number(stop)))
 	)
 }
 
@@ -315,3 +315,55 @@ export function getExtension(path: string, defaultExtn = 'png'): string {
 	if (matches) return matches[1]
 	return defaultExtn
 }
+
+/**
+ * Checks shadow options passed by user and performs corrections if needed.
+ * @param {ShadowProps} ShadowProps - shadow options
+ */
+export function correctShadowOptions(ShadowProps: ShadowProps): ShadowProps | undefined {
+	if (!ShadowProps || typeof ShadowProps !== 'object') {
+		//console.warn("`shadow` options must be an object. Ex: `{shadow: {type:'none'}}`")
+		return
+	}
+
+	// OPT: `type`
+	if (ShadowProps.type !== 'outer' && ShadowProps.type !== 'inner' && ShadowProps.type !== 'none') {
+		console.warn('Warning: shadow.type options are `outer`, `inner` or `none`.')
+		ShadowProps.type = 'outer'
+	}
+
+	// OPT: `angle`
+	if (ShadowProps.angle) {
+		// A: REALITY-CHECK
+		if (isNaN(Number(ShadowProps.angle)) || ShadowProps.angle < 0 || ShadowProps.angle > 359) {
+			console.warn('Warning: shadow.angle can only be 0-359')
+			ShadowProps.angle = 270
+		}
+
+		// B: ROBUST: Cast any type of valid arg to int: '12', 12.3, etc. -> 12
+		ShadowProps.angle = Math.round(Number(ShadowProps.angle))
+	}
+
+	// OPT: `opacity`
+	if (ShadowProps.opacity) {
+		// A: REALITY-CHECK
+		if (isNaN(Number(ShadowProps.opacity)) || ShadowProps.opacity < 0 || ShadowProps.opacity > 1) {
+			console.warn('Warning: shadow.opacity can only be 0-1')
+			ShadowProps.opacity = 0.75
+		}
+
+		// B: ROBUST: Cast any type of valid arg to int: '12', 12.3, etc. -> 12
+		ShadowProps.opacity = Number(ShadowProps.opacity)
+	}
+
+	// OPT: `color`
+	if (ShadowProps.color) {
+		// INCORRECT FORMAT
+		if (ShadowProps.color.startsWith('#')) {
+			console.warn('Warning: shadow.color should have no hash character, e.g. "000000"')
+			ShadowProps.color = ShadowProps.color.replace('#', '')
+		}
+	}
+
+	return ShadowProps
+}

src/gen-xml.ts

@@ -622,6 +622,25 @@ function slideObjectToXml(slide: PresSlide | SlideLayout): string {
 				strSlideXml += '  <a:ext cx="' + width + '" cy="' + height + '"/>'
 				strSlideXml += ' </a:xfrm>'
 				strSlideXml += ' <a:prstGeom prst="' + (rounding ? 'ellipse' : 'rect') + '"><a:avLst/></a:prstGeom>'
+				// UGH: COPY-PASTA FROM SHAPE
+				// EFFECTS > SHADOW: REF: @see http://officeopenxml.com/drwSp-effects.php
+				if (slideItemObj.options.shadow) {
+					slideItemObj.options.shadow.type = slideItemObj.options.shadow.type || 'outer'
+					slideItemObj.options.shadow.blur = valToPts(slideItemObj.options.shadow.blur || 8)
+					slideItemObj.options.shadow.offset = valToPts(slideItemObj.options.shadow.offset || 4)
+					slideItemObj.options.shadow.angle = Math.round((slideItemObj.options.shadow.angle || 270) * 60000)
+					slideItemObj.options.shadow.opacity = Math.round((slideItemObj.options.shadow.opacity || 0.75) * 100000)
+					slideItemObj.options.shadow.color = slideItemObj.options.shadow.color || DEF_TEXT_SHADOW.color
+
+					strSlideXml += '<a:effectLst>'
+					strSlideXml += '<a:' + slideItemObj.options.shadow.type + 'Shdw sx="100000" sy="100000" kx="0" ky="0" '
+					strSlideXml += ' algn="bl" rotWithShape="0" blurRad="' + slideItemObj.options.shadow.blur + '" '
+					strSlideXml += ' dist="' + slideItemObj.options.shadow.offset + '" dir="' + slideItemObj.options.shadow.angle + '">'
+					strSlideXml += '<a:srgbClr val="' + slideItemObj.options.shadow.color + '">'
+					strSlideXml += '<a:alpha val="' + slideItemObj.options.shadow.opacity + '"/></a:srgbClr>'
+					strSlideXml += '</a:outerShdw>'
+					strSlideXml += '</a:effectLst>'
+				}				
 				strSlideXml += '</p:spPr>'
 				strSlideXml += '</p:pic>'
 				break
@@ -1926,44 +1945,3 @@ export function makeXmlTableStyles(): string {
 export function makeXmlViewProps(): string {
 	return `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>${CRLF}<p:viewPr xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships" xmlns:p="http://schemas.openxmlformats.org/presentationml/2006/main"><p:normalViewPr horzBarState="maximized"><p:restoredLeft sz="15611"/><p:restoredTop sz="94610"/></p:normalViewPr><p:slideViewPr><p:cSldViewPr snapToGrid="0" snapToObjects="1"><p:cViewPr varScale="1"><p:scale><a:sx n="136" d="100"/><a:sy n="136" d="100"/></p:scale><p:origin x="216" y="312"/></p:cViewPr><p:guideLst/></p:cSldViewPr></p:slideViewPr><p:notesTextViewPr><p:cViewPr><p:scale><a:sx n="1" d="1"/><a:sy n="1" d="1"/></p:scale><p:origin x="0" y="0"/></p:cViewPr></p:notesTextViewPr><p:gridSpacing cx="76200" cy="76200"/></p:viewPr>`
 }
-
-/**
- * Checks shadow options passed by user and performs corrections if needed.
- * @param {ShadowProps} ShadowProps - shadow options
- */
-export function correctShadowOptions(ShadowProps: ShadowProps) {
-	if (!ShadowProps || typeof ShadowProps !== 'object') {
-		//console.warn("`shadow` options must be an object. Ex: `{shadow: {type:'none'}}`")
-		return
-	}
-
-	// OPT: `type`
-	if (ShadowProps.type !== 'outer' && ShadowProps.type !== 'inner' && ShadowProps.type !== 'none') {
-		console.warn('Warning: shadow.type options are `outer`, `inner` or `none`.')
-		ShadowProps.type = 'outer'
-	}
-
-	// OPT: `angle`
-	if (ShadowProps.angle) {
-		// A: REALITY-CHECK
-		if (isNaN(Number(ShadowProps.angle)) || ShadowProps.angle < 0 || ShadowProps.angle > 359) {
-			console.warn('Warning: shadow.angle can only be 0-359')
-			ShadowProps.angle = 270
-		}
-
-		// B: ROBUST: Cast any type of valid arg to int: '12', 12.3, etc. -> 12
-		ShadowProps.angle = Math.round(Number(ShadowProps.angle))
-	}
-
-	// OPT: `opacity`
-	if (ShadowProps.opacity) {
-		// A: REALITY-CHECK
-		if (isNaN(Number(ShadowProps.opacity)) || ShadowProps.opacity < 0 || ShadowProps.opacity > 1) {
-			console.warn('Warning: shadow.opacity can only be 0-1')
-			ShadowProps.opacity = 0.75
-		}
-
-		// B: ROBUST: Cast any type of valid arg to int: '12', 12.3, etc. -> 12
-		ShadowProps.opacity = Number(ShadowProps.opacity)
-	}
-}