From b621ead12d583d1ce64009f2856b550aeba9e586 Mon Sep 17 00:00:00 2001 From: MikeMeerschaert Date: Wed, 3 May 2023 09:50:22 -0700 Subject: [PATCH] BREAKING CHANGES *changed all margins to accept inches instead of points for text *Changed processing order of margin array to be TRBL so it's consistent with table margins *Updated demos so they supply margins in inches --- demos/modules/demo_image.mjs | 14 +++++++------- demos/modules/demo_text.mjs | 16 ++++++++-------- demos/modules/enums.mjs | 12 ++++++------ src/gen-objects.ts | 15 ++++++++++++++- src/gen-xml.ts | 14 -------------- 5 files changed, 35 insertions(+), 36 deletions(-) diff --git a/demos/modules/demo_image.mjs b/demos/modules/demo_image.mjs index 43e5533d7..3a53720a7 100644 --- a/demos/modules/demo_image.mjs +++ b/demos/modules/demo_image.mjs @@ -46,7 +46,7 @@ function genSlide01(pptx) { y: 0.6, w: 2.75, h: 2.5, - margin: 4, + margin: 0.057, fill: { color: BKGD_LTGRAY }, fontSize: 12, fontFace: "Segoe UI", @@ -72,7 +72,7 @@ function genSlide01(pptx) { y: 0.6, w: 2.75, h: 2.5, - margin: 4, + margin: 0.057, fill: { color: BKGD_LTGRAY }, fontSize: 12, fontFace: "Segoe UI", @@ -88,7 +88,7 @@ function genSlide01(pptx) { y: 0.6, w: 2.75, h: 2.5, - margin: 4, + margin: 0.057, fill: { color: BKGD_LTGRAY }, fontSize: 12, fontFace: "Segoe UI", @@ -104,7 +104,7 @@ function genSlide01(pptx) { y: 0.6, w: 2.75, h: 2.5, - margin: 4, + margin: 0.057, fill: { color: BKGD_LTGRAY }, fontSize: 12, fontFace: "Segoe UI", @@ -130,7 +130,7 @@ function genSlide01(pptx) { y: 3.5, w: 3.5, h: 3.5, - margin: 4, + margin: 0.057, fill: { color: BKGD_LTGRAY }, fontSize: 12, fontFace: "Segoe UI", @@ -147,7 +147,7 @@ function genSlide01(pptx) { y: 3.5, w: 3.5, h: 3.5, - margin: 4, + margin: 0.057, fill: { color: BKGD_LTGRAY }, fontSize: 12, fontFace: "Segoe UI", @@ -163,7 +163,7 @@ function genSlide01(pptx) { y: 3.5, w: 3.5, h: 3.5, - margin: 4, + margin: 0.057, fill: { color: BKGD_LTGRAY }, fontSize: 12, fontFace: "Segoe UI", diff --git a/demos/modules/demo_text.mjs b/demos/modules/demo_text.mjs index 6f292055d..0649777c0 100644 --- a/demos/modules/demo_text.mjs +++ b/demos/modules/demo_text.mjs @@ -49,7 +49,7 @@ function genSlide01(pptx) { { text: "(left/top)", options: { fontSize: 12, breakLine: true } }, { text: "Textbox", options: { bold: true } }, ], - { x: 10, y: 0.75, w: 3.0, h: 1.0, color: "FFFFFF", fill: { color: "00B050" }, valign: "top", align: "left", margin: 15 } + { x: 10, y: 0.75, w: 3.0, h: 1.0, color: "FFFFFF", fill: { color: "00B050" }, valign: "top", align: "left", margin: 0.214 } ); slide.addText( [ @@ -162,7 +162,7 @@ function genSlide02(pptx) { { text: "highlighted", options: { fontSize: 36, fontFace: "Arial", color: pptx.colors.ACCENT5, align: "right", highlight: "FFFF00" } }, { text: " text!", options: { fontSize: 36, fontFace: "Arial", color: pptx.colors.ACCENT5, align: "right" } }, ], - { x: 0.5, y: 1.0, w: 5.75, h: 6.0, margin: 5, fill: { color: pptx.colors.TEXT1 } } + { x: 0.5, y: 1.0, w: 5.75, h: 6.0, margin: 0.071, fill: { color: pptx.colors.TEXT1 } } ); // RIGHT COLUMN ------------------------------------------------------------ @@ -208,7 +208,7 @@ function genSlide02(pptx) { y: 6.0, w: 5.75, h: 1, - margin: [0, 0, 0, 10], + margin: [0, 0, 0, 0.143], fill: { color: "F1F1F1" }, }); } @@ -340,14 +340,14 @@ function genSlide04(pptx) { slide.addText("Hyperlinks:", { x: 0.5, y: 0.6, w: "90%", h: 0.3, margin: 0.123, color: pptx.colors.ACCENT1 }); slide.addText( [{ text: "Link with Tooltip", options: { hyperlink: { url: "https://github.com/gitbrent/pptxgenjs", tooltip: "Visit Homepage" } } }], - { x: 0.5, y: 1.0, w: 2.5, h: 0.6, margin: 10, fill: { color: "F1F1F1" }, fontSize: 14, align: "center" } + { x: 0.5, y: 1.0, w: 2.5, h: 0.6, margin: 0.143, fill: { color: "F1F1F1" }, fontSize: 14, align: "center" } ); slide.addText([{ text: "Link without Tooltip", options: { hyperlink: { url: "https://github.com/gitbrent" } } }], { x: 3.78, y: 1.0, w: 2.5, h: 0.6, - margin: 10, + margin: 0.143, fill: { color: "F1F1F1" }, fontSize: 14, align: "center", @@ -357,7 +357,7 @@ function genSlide04(pptx) { y: 1.0, w: 2.5, h: 0.6, - margin: 10, + margin: 0.143, fill: { color: "F1F1F1" }, fontSize: 14, align: "center", @@ -367,7 +367,7 @@ function genSlide04(pptx) { y: 1.0, w: 2.5, h: 0.6, - margin: 10, + margin: 0.143, fill: { color: "E2F0D9" }, fontSize: 14, align: "center", @@ -456,7 +456,7 @@ function genSlide05(pptx) { text: "- the textboxes above have their shrink & resize props set already, just add a space or resize them to trigger shrink and resize behavior", }, ], - { x: 0.5, y: 6.0, w: 12, h: 1.1, margin: 10, fontSize: 12, color: "393939", fill: { color: "fffccc" } } + { x: 0.5, y: 6.0, w: 12, h: 1.1, margin: 0.143, fontSize: 12, color: "393939", fill: { color: "fffccc" } } ); } diff --git a/demos/modules/enums.mjs b/demos/modules/enums.mjs index d46d8696a..69aba4e33 100644 --- a/demos/modules/enums.mjs +++ b/demos/modules/enums.mjs @@ -21,19 +21,19 @@ export const BASE_TABLE_OPTS = { x: 0.5, y: 0.13, colW: [9, 3.33] }; // LAYOUT_W // STYLES export const BKGD_LTGRAY = "F1F1F1"; export const COLOR_BLUE = "0088CC"; -export const CODE_STYLE = { fill: { color: BKGD_LTGRAY }, margin: 6, fontSize: 10, color: '696969' }; -export const TITLE_STYLE = { fill: { color: BKGD_LTGRAY }, margin: 4, fontSize: 18, fontFace: "Segoe UI", color: COLOR_BLUE, valign: "top", align: "center" }; +export const CODE_STYLE = { fill: { color: BKGD_LTGRAY }, margin: 0.086, fontSize: 10, color: '696969' }; +export const TITLE_STYLE = { fill: { color: BKGD_LTGRAY }, margin: 0.057, fontSize: 18, fontFace: "Segoe UI", color: COLOR_BLUE, valign: "top", align: "center" }; // OPTIONS -export const BASE_TEXT_OPTS_L = { color: "9F9F9F", margin: 3, border: [null, null, { pt: "1", color: "CFCFCF" }, null] }; +export const BASE_TEXT_OPTS_L = { color: "9F9F9F", margin: 0.043, border: [null, null, { pt: "1", color: "CFCFCF" }, null] }; export const BASE_TEXT_OPTS_R = { text: "PptxGenJS", - options: { color: "9F9F9F", margin: 3, border: [0, 0, { pt: "1", color: "CFCFCF" }, 0], align: "right" }, + options: { color: "9F9F9F", margin: 0.043, border: [0, 0, { pt: "1", color: "CFCFCF" }, 0], align: "right" }, }; -export const FOOTER_TEXT_OPTS = { x: 0.0, y: 7.16, w: "100%", h: 0.3, margin: 3, color: "9F9F9F", align: "center", fontSize: 10 }; +export const FOOTER_TEXT_OPTS = { x: 0.0, y: 7.16, w: "100%", h: 0.3, margin: 0.043, color: "9F9F9F", align: "center", fontSize: 10 }; export const BASE_CODE_OPTS = { color: "9F9F9F", - margin: 3, + margin: 0.043, border: { pt: "1", color: "CFCFCF" }, fill: { color: "F1F1F1" }, fontFace: "Courier", diff --git a/src/gen-objects.ts b/src/gen-objects.ts index 2380a51e8..aa74eb474 100644 --- a/src/gen-objects.ts +++ b/src/gen-objects.ts @@ -1070,7 +1070,20 @@ export function addTextDefinition (target: PresSlide, text: TextProps[], opts: T itemOpts._bodyProp.bIns = inch2Emu(itemOpts.inset) } - // F: Transform @deprecated props + // F: Margin + if (itemOpts.margin && Array.isArray(itemOpts.margin)) { + itemOpts._bodyProp.tIns = inch2Emu(itemOpts.margin[0] || 0) + itemOpts._bodyProp.rIns = inch2Emu(itemOpts.margin[1] || 0) + itemOpts._bodyProp.bIns = inch2Emu(itemOpts.margin[2] || 0) + itemOpts._bodyProp.lIns = inch2Emu(itemOpts.margin[3] || 0) + } else if (typeof itemOpts.margin === 'number') { + itemOpts._bodyProp.lIns = inch2Emu(itemOpts.margin) + itemOpts._bodyProp.rIns = inch2Emu(itemOpts.margin) + itemOpts._bodyProp.bIns = inch2Emu(itemOpts.margin) + itemOpts._bodyProp.tIns = inch2Emu(itemOpts.margin) + } + + // G: Transform @deprecated props if (typeof itemOpts.underline === 'boolean' && itemOpts.underline === true) itemOpts.underline = { style: 'sng' } } diff --git a/src/gen-xml.ts b/src/gen-xml.ts index e1f0aea13..42339dac3 100644 --- a/src/gen-xml.ts +++ b/src/gen-xml.ts @@ -389,20 +389,6 @@ function slideObjectToXml (slide: PresSlide | SlideLayout): string { // Lines can have zero cy, but text should not if (!slideItemObj.options.line && cy === 0) cy = EMU * 0.3 - // Margin/Padding/Inset for textboxes - if (!slideItemObj.options._bodyProp) slideItemObj.options._bodyProp = {} - if (slideItemObj.options.margin && Array.isArray(slideItemObj.options.margin)) { - slideItemObj.options._bodyProp.lIns = valToPts(slideItemObj.options.margin[0] || 0) - slideItemObj.options._bodyProp.rIns = valToPts(slideItemObj.options.margin[1] || 0) - slideItemObj.options._bodyProp.bIns = valToPts(slideItemObj.options.margin[2] || 0) - slideItemObj.options._bodyProp.tIns = valToPts(slideItemObj.options.margin[3] || 0) - } else if (typeof slideItemObj.options.margin === 'number') { - slideItemObj.options._bodyProp.lIns = valToPts(slideItemObj.options.margin) - slideItemObj.options._bodyProp.rIns = valToPts(slideItemObj.options.margin) - slideItemObj.options._bodyProp.bIns = valToPts(slideItemObj.options.margin) - slideItemObj.options._bodyProp.tIns = valToPts(slideItemObj.options.margin) - } - // A: Start SHAPE ======================================================= strSlideXml += ''