@file-viewer/pptx 2.1.13 → 2.1.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chart.js +105 -0
- package/dist/styles.d.ts +1 -1
- package/dist/styles.js +3 -2
- package/dist/viewer.js +2 -1
- package/dist/worker/pptx.worker.js +7 -7
- package/dist/worker.js +39 -1
- package/package.json +2 -1
package/dist/chart.js
CHANGED
|
@@ -37,6 +37,110 @@ const restoreNumericBullets = (root) => {
|
|
|
37
37
|
}
|
|
38
38
|
}
|
|
39
39
|
};
|
|
40
|
+
const TEXT_FIT_MIN_SCALE = 0.7;
|
|
41
|
+
const TEXT_FIT_MAX_PASSES = 8;
|
|
42
|
+
const TEXT_FIT_TOLERANCE = 1;
|
|
43
|
+
const getFitDataKey = (property) => `pptxFit${property.charAt(0).toUpperCase()}${property.slice(1)}`;
|
|
44
|
+
const readOriginalPx = (element, property, computed = getComputedStyle(element)) => {
|
|
45
|
+
const key = getFitDataKey(property);
|
|
46
|
+
const existing = Number(element.dataset[key]);
|
|
47
|
+
if (Number.isFinite(existing) && existing > 0) {
|
|
48
|
+
return existing;
|
|
49
|
+
}
|
|
50
|
+
const value = parseFloat(computed[property]);
|
|
51
|
+
if (!Number.isFinite(value) || value <= 0) {
|
|
52
|
+
return undefined;
|
|
53
|
+
}
|
|
54
|
+
element.dataset[key] = String(value);
|
|
55
|
+
return value;
|
|
56
|
+
};
|
|
57
|
+
const setScaledPx = (element, property, scale, computed = getComputedStyle(element)) => {
|
|
58
|
+
const original = readOriginalPx(element, property, computed);
|
|
59
|
+
if (original === undefined) {
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
62
|
+
element.style[property] = `${original * scale}px`;
|
|
63
|
+
};
|
|
64
|
+
const collectTextFitElements = (block) => {
|
|
65
|
+
const elements = new Set();
|
|
66
|
+
block.querySelectorAll('.text-block, .numeric-bullet-style').forEach(element => {
|
|
67
|
+
elements.add(element);
|
|
68
|
+
});
|
|
69
|
+
block.querySelectorAll('.slide-prgrph').forEach(paragraph => {
|
|
70
|
+
Array.from(paragraph.children).forEach(child => {
|
|
71
|
+
if (!(child instanceof HTMLElement) || child.querySelector('.text-block')) {
|
|
72
|
+
return;
|
|
73
|
+
}
|
|
74
|
+
const computed = getComputedStyle(child);
|
|
75
|
+
const fontSize = parseFloat(computed.fontSize);
|
|
76
|
+
if (Number.isFinite(fontSize) && fontSize > 0) {
|
|
77
|
+
elements.add(child);
|
|
78
|
+
}
|
|
79
|
+
});
|
|
80
|
+
});
|
|
81
|
+
return elements;
|
|
82
|
+
};
|
|
83
|
+
const applyTextFitScale = (block, scale) => {
|
|
84
|
+
block.dataset.pptxTextFitScale = String(scale);
|
|
85
|
+
for (const element of collectTextFitElements(block)) {
|
|
86
|
+
const computed = getComputedStyle(element);
|
|
87
|
+
setScaledPx(element, 'fontSize', scale, computed);
|
|
88
|
+
setScaledPx(element, 'lineHeight', scale, computed);
|
|
89
|
+
setScaledPx(element, 'paddingLeft', scale, computed);
|
|
90
|
+
setScaledPx(element, 'paddingRight', scale, computed);
|
|
91
|
+
}
|
|
92
|
+
block.querySelectorAll('.slide-prgrph').forEach(paragraph => {
|
|
93
|
+
const computed = getComputedStyle(paragraph);
|
|
94
|
+
setScaledPx(paragraph, 'lineHeight', scale, computed);
|
|
95
|
+
setScaledPx(paragraph, 'marginTop', scale, computed);
|
|
96
|
+
setScaledPx(paragraph, 'marginBottom', scale, computed);
|
|
97
|
+
setScaledPx(paragraph, 'paddingTop', scale, computed);
|
|
98
|
+
setScaledPx(paragraph, 'paddingBottom', scale, computed);
|
|
99
|
+
});
|
|
100
|
+
block.querySelectorAll('.slide-prgrph > *').forEach(child => {
|
|
101
|
+
const computed = getComputedStyle(child);
|
|
102
|
+
setScaledPx(child, 'marginLeft', scale, computed);
|
|
103
|
+
setScaledPx(child, 'marginRight', scale, computed);
|
|
104
|
+
setScaledPx(child, 'paddingLeft', scale, computed);
|
|
105
|
+
setScaledPx(child, 'paddingRight', scale, computed);
|
|
106
|
+
});
|
|
107
|
+
};
|
|
108
|
+
const hasTextOverflow = (block) => block.scrollHeight > block.clientHeight + TEXT_FIT_TOLERANCE ||
|
|
109
|
+
block.scrollWidth > block.clientWidth + TEXT_FIT_TOLERANCE;
|
|
110
|
+
const fitOverflowingTextBlock = (block) => {
|
|
111
|
+
if (!block.querySelector('.text-block') || block.clientWidth <= 0 || block.clientHeight <= 0) {
|
|
112
|
+
return;
|
|
113
|
+
}
|
|
114
|
+
let scale = Number(block.dataset.pptxTextFitScale) || 1;
|
|
115
|
+
if (!hasTextOverflow(block)) {
|
|
116
|
+
return;
|
|
117
|
+
}
|
|
118
|
+
for (let pass = 0; pass < TEXT_FIT_MAX_PASSES && hasTextOverflow(block); pass += 1) {
|
|
119
|
+
const heightRatio = block.scrollHeight > 0
|
|
120
|
+
? Math.min(1, block.clientHeight / block.scrollHeight)
|
|
121
|
+
: 1;
|
|
122
|
+
const widthRatio = block.scrollWidth > 0
|
|
123
|
+
? Math.min(1, block.clientWidth / block.scrollWidth)
|
|
124
|
+
: 1;
|
|
125
|
+
const ratio = Math.min(heightRatio, widthRatio, 0.98);
|
|
126
|
+
const nextScale = Math.max(TEXT_FIT_MIN_SCALE, scale * Math.max(ratio, 0.95));
|
|
127
|
+
if (nextScale >= scale - 0.002) {
|
|
128
|
+
scale = Math.max(TEXT_FIT_MIN_SCALE, scale * 0.97);
|
|
129
|
+
}
|
|
130
|
+
else {
|
|
131
|
+
scale = nextScale;
|
|
132
|
+
}
|
|
133
|
+
applyTextFitScale(block, scale);
|
|
134
|
+
if (scale <= TEXT_FIT_MIN_SCALE && hasTextOverflow(block)) {
|
|
135
|
+
break;
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
};
|
|
139
|
+
const fitOverflowingTextBlocks = (root) => {
|
|
140
|
+
root
|
|
141
|
+
.querySelectorAll('.slide div.content, .slide div.content-rtl')
|
|
142
|
+
.forEach(fitOverflowingTextBlock);
|
|
143
|
+
};
|
|
40
144
|
const renderChart = async (message) => {
|
|
41
145
|
var _a;
|
|
42
146
|
const payload = message.data;
|
|
@@ -150,6 +254,7 @@ const renderChart = async (message) => {
|
|
|
150
254
|
};
|
|
151
255
|
export const renderPptxPostProcessing = async (charts, root) => {
|
|
152
256
|
restoreNumericBullets(root);
|
|
257
|
+
fitOverflowingTextBlocks(root);
|
|
153
258
|
const queue = asChartQueue(charts);
|
|
154
259
|
if (!queue.length) {
|
|
155
260
|
return;
|
package/dist/styles.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const pptxViewerCss = "\n.flyfish-pptx-scale-box{box-sizing:border-box;max-width:100%;margin:0 auto;min-width:0}\n.flyfish-pptx-content{position:
|
|
1
|
+
export declare const pptxViewerCss = "\n.flyfish-pptx-scale-box{position:relative;box-sizing:border-box;max-width:100%;margin:0 auto;min-width:0}\n.flyfish-pptx-content{position:absolute;top:0;left:0;box-sizing:border-box;max-width:none;min-width:0;transform-origin:top left;will-change:transform}\n.flyfish-pptx-content[data-render-state=\"loading\"]{opacity:.82}\n.flyfish-pptx-content .slide{background:#fff;box-shadow:0 18px 36px rgba(18,35,52,.12)}\n.flyfish-pptx-thumbnail{display:block;box-sizing:border-box;width:min(960px,100%);height:auto;margin:0 auto 28px;border-radius:12px;background:#fff;box-shadow:0 18px 36px rgba(18,35,52,.14)}\n\n.slide{position:relative;border:0;border-radius:0;overflow:hidden;margin-bottom:50px;margin-left:auto;margin-right:auto;z-index:100}\n.slide div.block{position:absolute;top:0;left:0;width:100%;line-height:1}\n.slide div.content{display:flex;flex-direction:column}\n.slide div.diagram-content{display:flex;flex-direction:column}\n.slide div.content-rtl{display:flex;flex-direction:column;direction:rtl}\n.slide .pregraph-rtl{direction:rtl}\n.slide .pregraph-ltr{direction:ltr}\n.slide .pregraph-inherit{direction:inherit}\n.slide .slide-prgrph{width:100%}\n.slide .line-break-br::before{content:\"\\A\";white-space:pre}\n.slide div.v-up{justify-content:flex-start}\n.slide div.v-mid{justify-content:center}\n.slide div.v-down{justify-content:flex-end}\n.slide div.h-left{justify-content:flex-start;align-items:flex-start;text-align:left}\n.slide div.h-left-rtl{justify-content:flex-end;align-items:flex-end;text-align:left}\n.slide div.h-mid{justify-content:center;align-items:center;text-align:center}\n.slide div.h-right{justify-content:flex-end;align-items:flex-end;text-align:right}\n.slide div.h-right-rtl{justify-content:flex-start;align-items:flex-start;text-align:right}\n.slide div.h-just,.slide div.h-dist{text-align:justify}\n.slide div.up-left{justify-content:flex-start;align-items:flex-start;text-align:left}\n.slide div.up-center{justify-content:flex-start;align-items:center}\n.slide div.up-right{justify-content:flex-start;align-items:flex-end}\n.slide div.center-left{justify-content:center;align-items:flex-start;text-align:left}\n.slide div.center-center{justify-content:center;align-items:center}\n.slide div.center-right{justify-content:center;align-items:flex-end}\n.slide div.down-left{justify-content:flex-end;align-items:flex-start;text-align:left}\n.slide div.down-center{justify-content:flex-end;align-items:center}\n.slide div.down-right{justify-content:flex-end;align-items:flex-end}\n.slide li.slide{margin:10px 0;font-size:18px}\n.slide table{position:absolute}\n.slide svg.drawing{position:absolute;overflow:visible}\n\n.flyfish-pptx-content > .slide:last-of-type{margin-bottom:0}\n";
|
|
2
2
|
export declare const ensurePptxViewerStyles: (documentRef: Document) => void;
|
package/dist/styles.js
CHANGED
|
@@ -32,12 +32,13 @@ const legacyPptxCss = `
|
|
|
32
32
|
.slide svg.drawing{position:absolute;overflow:visible}
|
|
33
33
|
`;
|
|
34
34
|
export const pptxViewerCss = `
|
|
35
|
-
.flyfish-pptx-scale-box{box-sizing:border-box;max-width:100%;margin:0 auto;min-width:0}
|
|
36
|
-
.flyfish-pptx-content{position:
|
|
35
|
+
.flyfish-pptx-scale-box{position:relative;box-sizing:border-box;max-width:100%;margin:0 auto;min-width:0}
|
|
36
|
+
.flyfish-pptx-content{position:absolute;top:0;left:0;box-sizing:border-box;max-width:none;min-width:0;transform-origin:top left;will-change:transform}
|
|
37
37
|
.flyfish-pptx-content[data-render-state="loading"]{opacity:.82}
|
|
38
38
|
.flyfish-pptx-content .slide{background:#fff;box-shadow:0 18px 36px rgba(18,35,52,.12)}
|
|
39
39
|
.flyfish-pptx-thumbnail{display:block;box-sizing:border-box;width:min(960px,100%);height:auto;margin:0 auto 28px;border-radius:12px;background:#fff;box-shadow:0 18px 36px rgba(18,35,52,.14)}
|
|
40
40
|
${legacyPptxCss}
|
|
41
|
+
.flyfish-pptx-content > .slide:last-of-type{margin-bottom:0}
|
|
41
42
|
`;
|
|
42
43
|
const PPTX_STYLE_ID = 'flyfish-pptx-native-style';
|
|
43
44
|
export const ensurePptxViewerStyles = (documentRef) => {
|
package/dist/viewer.js
CHANGED
|
@@ -224,6 +224,7 @@ export class PptxViewer {
|
|
|
224
224
|
this.content.style.width = `${slideWidth}px`;
|
|
225
225
|
this.content.style.transform = `scale(${effectiveScale})`;
|
|
226
226
|
this.scaleBox.style.width = `${Math.ceil(slideWidth * effectiveScale)}px`;
|
|
227
|
-
this.scaleBox.style.
|
|
227
|
+
this.scaleBox.style.height = `${Math.ceil(this.content.scrollHeight * effectiveScale)}px`;
|
|
228
|
+
this.scaleBox.style.minHeight = '';
|
|
228
229
|
}
|
|
229
230
|
}
|