Merge branch 'master' into pr-1053

.gitignore

@@ -8,9 +8,9 @@ bower_components/
 node_modules/
 npm-debug.log
 src/bld
+demo/
 
 ### docusaurus
 .docusaurus
 /build
-/demo
 /docs

CHANGELOG.md

@@ -7,6 +7,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Notes]
 
+## [3.10.0] - 2022-??-??
+
+### Added
+
+- Add name (`objectName`) to all core objects [\#1019](https://github.com/gitbrent/PptxGenJS/pull/1019) ([mvecsernyes](https://github.com/mvecsernyes))
+
+### Fixed
+
+- Radar chart line colors [\#539](https://github.com/gitbrent/PptxGenJS/issues/539) ([pablodicosta](https://github.com/pablodicosta))
+- Adding charts and media together is causing a pptx error, and repair is needed. [\#1020](https://github.com/gitbrent/PptxGenJS/issues/1020) ([mvecsernyes](https://github.com/mvecsernyes))
+- Adding hyperlink to table cell doesn't work [\#1049](https://github.com/gitbrent/PptxGenJS/issues/1049) ([tbowmo](https://github.com/tbowmo))
+- Underline doesn't work in table after update to v3.9.0 [\#1052](https://github.com/gitbrent/PptxGenJS/issues/1052) ([hhq365](https://github.com/hhq365))
+- `ImageProps.sizing` props `w`, `h`, `x`, `y` s/b typed `Coord` [\#1065](https://github.com/gitbrent/PptxGenJS/issues/1065) ([Naveencheekoti17](https://github.com/BistroStu))
+- `ImageProps.sizing` are type Coord [\#1066](https://github.com/gitbrent/PptxGenJS/pull/1066) ([BistroStu](https://github.com/BistroStu))
+
 ## [3.9.0] - 2021-12-11
 
 ### Added

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2015-2020 Brent Ely
+Copyright (c) 2015-2022 Brent Ely
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -45,7 +45,7 @@ This library creates Open Office XML (OOXML) Presentations which are compatible
 **Works Everywhere**
 
 - Every modern desktop and mobile browser is supported
-- Integrates with Node, Angular, React and Electron
+- Integrates with Node, Angular, React, and Electron
 - Compatible with PowerPoint, Keynote, and more
 
 **Full Featured**
@@ -58,7 +58,7 @@ This library creates Open Office XML (OOXML) Presentations which are compatible
 
 - The absolute easiest PowerPoint library to use
 - Learn as you code will full typescript definitions included
-- Tons of demo code comes included (over 70 slides of features)
+- Tons of demo code comes included (over 75 slides of features)
 
 **Export Your Way**
 

bower.json

@@ -5,7 +5,7 @@
     "dist/pptxgen.js"
   ],
   "dependencies": {
-    "jszip": "^3.4.0"
+    "jszip": "^3.7.1"
   },
   "authors": [
     "Brent Ely <https://github.com/gitbrent>"
@@ -37,6 +37,8 @@
     "**/.*",
     "node_modules",
     "bower_components",
+	"demo",
+	"docs",
     "test",
     "tests"
   ]

demos/browser/index.html

@@ -5,8 +5,8 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<meta name="author" content="https://github.com/gitbrent">
 	<meta name="website" content="https://github.com/gitbrent/PptxGenJS/">
-	<meta name="version" content="3.9.0">
-	<meta name="updated" content="2021-12-12">
+	<meta name="version" content="3.10.0-beta">
+	<meta name="updated" content="2022-01-30">
 	<link rel="icon" href="images/favicon-32x32.png" sizes="32x32" type="image/png">
 	<link rel="icon" href="images/favicon-16x16.png" sizes="16x16" type="image/png">
 	<link rel="icon" href="images/favicon.png">
@@ -27,9 +27,9 @@
 	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
 		crossorigin="anonymous"></script>
 
+	<!-- RELEASE (CDN)
 	<script src="https://cdn.jsdelivr.net/gh/gitbrent/pptxgenjs@latest/dist/pptxgen.bundle.js"></script>
 	<script src="https://cdn.jsdelivr.net/gh/gitbrent/pptxgenjs@latest/demos/modules/demos.mjs" type="module"></script>
-	<!-- RELEASE (CDN)
 	-->
 	<!--
 	TODO: [only used during `-beta` dev cycles; update to below on release]
@@ -42,9 +42,9 @@
 	<script src="../modules/demos.mjs" type="module"></script>
 	-->
 	<!-- LOCAL TESTING: bundle
+	-->
 	<script src="./js/pptxgen.bundle.js"></script>
 	<script src="../modules/demos.mjs" type="module"></script>
-	-->
 
 	<script type="module">
 		import { buildDataTable, doAppStart, execGenSlidesFunc, runAllDemos, table2slides1, table2slides2, table2slidesDemoForTab } from './js/browser.js';

demos/modules/demo_chart.mjs

@@ -3,11 +3,22 @@
  * AUTH: Brent Ely (https://github.com/gitbrent/)
  * DESC: Common test/demo slides for all library features
  * DEPS: Used by various demos (./demos/browser, ./demos/node, etc.)
- * VER.: 3.9.0
- * BLD.: 20211127
+ * VER.: 3.10.0
+ * BLD.: 20220224
  */
 
-import { IMAGE_PATHS, BASE_TABLE_OPTS, BASE_TEXT_OPTS_L, BASE_TEXT_OPTS_R, COLOR_RED, COLOR_AMB, COLOR_GRN, COLOR_UNK, TESTMODE } from "./enums.mjs";
+import {
+	IMAGE_PATHS,
+	BASE_TABLE_OPTS,
+	BASE_TEXT_OPTS_L,
+	BASE_TEXT_OPTS_R,
+	COLOR_RED,
+	COLOR_AMB,
+	COLOR_GRN,
+	COLOR_UNK,
+	TESTMODE,
+	COLOR_BLU,
+} from "./enums.mjs";
 
 const LETTERS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
 const MONS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
@@ -110,6 +121,7 @@ function genSlide01(pptx) {
 		y: 0.6,
 		w: 6.0,
 		h: 3.0,
+		objectName: "bar chart (top L)",
 		altText: "this is the alt text content",
 
 		barDir: "bar",
@@ -139,6 +151,7 @@ function genSlide01(pptx) {
 		y: 0.6,
 		w: 6.0,
 		h: 3.0,
+		objectName: "bar chart (top R)",
 		barDir: "col",
 
 		catAxisLabelColor: "0000CC",
@@ -1393,88 +1406,154 @@ function genSlide16(pptx) {
 	slide.addNotes("API Docs: https://gitbrent.github.io/PptxGenJS/docs/api-charts.html");
 	slide.addTable([[{ text: "Chart Examples: Radar Chart", options: BASE_TEXT_OPTS_L }, BASE_TEXT_OPTS_R]], BASE_TABLE_OPTS);
 
-	let arrDataRegions = [
+	const arrDataRegions = [
 		{
 			name: "Region 1",
-			labels: ["May", "June", "July", "August", "September"],
-			values: [26, 53, 100, 75, 41],
+			labels: ["Jun", "Jul", "Aug", "Sep"],
+			values: [20, 18, 15, 10],
 		},
 	];
-	let arrDataHighVals = [
+	const arrDataStudents = [
 		{
-			name: "California",
-			labels: ["Apartment", "Townhome", "Duplex", "House", "Big House"],
-			values: [2000, 2800, 3200, 4000, 5000],
+			name: "Student 1",
+			labels: ["Logic", "Coding", "Results", "Comments", "Runtime"],
+			values: [3, 1, 3, 3, 4],
 		},
 		{
-			name: "Texas",
-			labels: ["Apartment", "Townhome", "Duplex", "House", "Big House"],
-			values: [1400, 2000, 2500, 3000, 3800],
+			name: "Student 2",
+			labels: ["Logic", "Coding", "Results", "Comments", "Runtime"],
+			values: [1, 2, 2, 3, 2],
+		},
+		{
+			name: "Student 3",
+			labels: ["Logic", "Coding", "Results", "Comments", "Runtime"],
+			values: [2, 3, 3, 4, 3],
 		},
 	];
 
-	// TOP-LEFT: Standard
-	let optsChartRadar1 = { x: 0.5, y: 0.6, w: 6.0, h: 3.0, radarStyle: "standard", lineDataSymbol: "none", fill: "F1F1F1" };
-	slide.addChart(pptx.charts.RADAR, arrDataRegions, optsChartRadar1);
-
-	// TOP-RIGHT: Marker
-	let optsChartRadar2 = {
-		x: 7.0,
-		y: 0.6,
-		w: 6.0,
-		h: 3.0,
-		radarStyle: "marker",
-		catAxisLabelColor: "0000CC",
-		catAxisLabelFontFace: "Courier",
-		catAxisLabelFontSize: 12,
-	};
-	slide.addChart(pptx.charts.RADAR, arrDataRegions, optsChartRadar2);
-
-	// BTM-LEFT: Filled - TITLE and LEGEND
-	slide.addText(".", { x: 0.5, y: 3.8, w: 6.0, h: 3.5, fill: { color: "F1F1F1" }, color: "F1F1F1" });
-	let optsChartRadar3 = {
-		x: 0.5,
-		y: 3.8,
-		w: 6.0,
-		h: 3.5,
-		radarStyle: "filled",
-		catAxisLabelColor: "CC0000",
-		catAxisLabelFontFace: "Helvetica Neue",
-		catAxisLabelFontSize: 14,
-
-		showTitle: true,
-		titleColor: "33CF22",
-		titleFontFace: "Helvetica Neue",
-		titleFontSize: 16,
-		title: "Sales by Region",
+	// TOP-ROW
+	{
+		// TOP-L: `{ radar:'normal' }`
+		slide.addText("....", { x: 0.5, y: 0.6, w: 4.0, h: 3.0, fill: { color: "F9F9F9" }, color: "F9F9F9" });
+		let optsChartRadar1 = {
+			x: 0.5,
+			y: 0.6,
+			w: 4.0,
+			h: 3.0,
+			radarStyle: "standard",
+			//
+			showTitle: true,
+			titleColor: "7F7F7F",
+			titleFontFace: "Segoe UI",
+			titleFontSize: 12,
+			title: "radarStyle: 'standard'",
+			//
+			lineDataSymbol: "none",
+		};
+		slide.addChart(pptx.charts.RADAR, arrDataRegions, optsChartRadar1);
 
-		showLegend: true,
-	};
-	slide.addChart(pptx.charts.RADAR, arrDataHighVals, optsChartRadar3);
+		// TOP-C: `{ radar:'marker' }` Cat Axis options
+		slide.addText("....", { x: 4.65, y: 0.6, w: 4.0, h: 3.0, fill: { color: "F9F9F9" }, color: "F9F9F9" });
+		let optsChartRadar2 = {
+			x: 4.65,
+			y: 0.6,
+			w: 4.0,
+			h: 3.0,
+			radarStyle: "marker",
+			//
+			showTitle: true,
+			titleColor: "7F7F7F",
+			titleFontFace: "Segoe UI",
+			titleFontSize: 12,
+			title: "radarStyle: 'marker'",
+		};
+		slide.addChart(pptx.charts.RADAR, arrDataRegions, optsChartRadar2);
 
-	// BTM-RIGHT: TITLE and LEGEND
-	slide.addText(".", { x: 7.0, y: 3.8, w: 6.0, h: 3.5, fill: { color: "F1F1F1" }, color: "F1F1F1" });
-	let optsChartRadar4 = {
-		x: 7.0,
-		y: 3.8,
-		w: 6.0,
-		h: 3.5,
-		radarStyle: "filled",
-		chartColors: ["0088CC", "99FFCC"],
+		// TOP-R: `{ radar:'marker' }` Cat Axis options
+		slide.addText("....", { x: 8.8, y: 0.6, w: 4.0, h: 3.0, fill: { color: "F9F9F9" }, color: "F9F9F9" });
+		let optsChartRadar3 = {
+			x: 8.8,
+			y: 0.6,
+			w: 4.0,
+			h: 3.0,
+			radarStyle: "filled",
+			//
+			showTitle: true,
+			titleColor: "7F7F7F",
+			titleFontFace: "Segoe UI",
+			titleFontSize: 12,
+			title: "radarStyle: 'filled'",
+		};
+		slide.addChart(pptx.charts.RADAR, arrDataRegions, optsChartRadar3);
+	}
 
-		catAxisLabelColor: "0000CC",
-		catAxisLabelFontFace: "Times",
-		catAxisLabelFontSize: 11,
-		catAxisLineShow: false,
+	// BTM-ROW
+	{
+		// BTM-L: marker/line options
+		slide.addText(".", { x: 0.5, y: 3.8, w: 6.0, h: 3.5, fill: { color: "F1F1F1" }, color: "F1F1F1" });
+		let optsChartRadar10 = {
+			x: 0.5,
+			y: 3.8,
+			w: 6.0,
+			h: 3.5,
+			radarStyle: "marker",
+			catAxisLabelColor: COLOR_BLU,
+			catAxisLabelFontFace: "Courier",
+			catAxisLabelFontSize: 11,
+			//
+			chartColors: [COLOR_RED, COLOR_AMB, COLOR_GRN], // marker & line color
+			lineDataSymbol: "diamond", // marker type ('circle' | 'dash' | 'diamond' | 'dot' | 'none' | 'square' | 'triangle')
+			lineDataSymbolLineColor: COLOR_BLU, // marker border color (hex)
+			lineDataSymbolLineSize: 2, // marker border size (points)
+			lineDataSymbolSize: 12, // marker size (2-72)
+			lineSize: 3, // line size
+			valAxisLineColor: "D9D9D9", // val axis is the main, center N-S, W-E lines
+			valAxisLineSize: 2, // val axis lines size
+			//
+			showLegend: true,
+			legendPos: "l",
+			//
+			showTitle: true,
+			title: "Line/Marker Options",
+			titleColor: "7F7F7F",
+			titleFontFace: "Helvetica Neue",
+			titleFontSize: 12,
+		};
+		slide.addChart(pptx.charts.RADAR, arrDataStudents, optsChartRadar10);
 
-		showLegend: true,
-		legendPos: "t",
-		legendColor: "FF0000",
-		showTitle: true,
-		titleColor: "FF0000",
-		title: "Red Title and Legend",
-	};
-	slide.addChart(pptx.charts.RADAR, arrDataHighVals, optsChartRadar4);
+		// BTM-R: Filled/Axis Options
+		slide.addText(".", { x: 6.83, y: 3.8, w: 6.0, h: 3.5, fill: { color: "F1F1F1" }, color: "F1F1F1" });
+		let optsChartRadar11 = {
+			x: 6.83,
+			y: 3.8,
+			w: 6.0,
+			h: 3.5,
+			radarStyle: "filled",
+			//
+			chartColors: [COLOR_RED, COLOR_AMB, COLOR_GRN], // marker & line color
+			chartColorsOpacity: 25,
+			catAxisLabelColor: "404040",
+			catAxisLabelFontFace: "Segoe UI",
+			catAxisLabelFontSize: 10,
+			catAxisLineShow: false,
+			//
+			lineDataSymbolSize: 2, // marker size (2-72)
+			lineSize: 1, // line size
+			valAxisLabelFontFace: "Segoe UI",
+			valAxisLabelFontSize: 10,
+			//
+			showLegend: true,
+			legendPos: "r",
+			legendColor: "404040",
+			//
+			titleColor: "404040",
+			titleFontFace: "Helvetica Neue",
+			titleFontSize: 12,
+			showTitle: true,
+			title: "Filled/Axis Options",
+		};
+		slide.addChart(pptx.charts.RADAR, arrDataStudents, optsChartRadar11);
+	}
 }
 
 // SLIDE 17: Multi-Type Charts

demos/modules/demo_image.mjs

@@ -39,7 +39,7 @@ function genSlide01(pptx) {
 
 	// TOP: 1
 	slide.addText("Type: Animated GIF", { x: 0.5, y: 0.6, w: 2.5, h: 0.4, color: "0088CC" });
-	slide.addImage({ x: 1.0, y: 1.1, w: 1.5, h: 1.5, path: IMAGE_PATHS.gifAnimTrippy.path });
+	slide.addImage({ x: 1.0, y: 1.1, w: 1.5, h: 1.5, path: IMAGE_PATHS.gifAnimTrippy.path, objectName: "animated gif" });
 	slide.addText("(legacy PPT only animates in slide show)", {
 		x: 0.5,
 		y: 2.7,