@antv/infographic 0.2.11 → 0.2.12
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/infographic.min.js +1 -1
- package/dist/infographic.min.js.map +1 -1
- package/esm/designs/components/Btn.js +15 -4
- package/esm/designs/components/BtnsGroup.js +1 -1
- package/esm/designs/components/Illus.js +15 -3
- package/esm/designs/components/ItemDesc.js +17 -11
- package/esm/designs/components/ItemIcon.js +17 -18
- package/esm/designs/components/ItemLabel.js +17 -11
- package/esm/designs/components/ItemValue.js +17 -12
- package/esm/designs/components/ItemsGroup.js +1 -1
- package/esm/designs/components/ShapesGroup.js +1 -1
- package/esm/designs/components/Title.js +2 -2
- package/esm/designs/decorations/simple-arrow.js +14 -2
- package/esm/designs/decorations/triangle.js +14 -2
- package/esm/designs/defs/DropShadow.js +13 -2
- package/esm/designs/defs/LinearGradient.js +1 -1
- package/esm/designs/items/BadgeCard.js +2 -2
- package/esm/designs/items/CandyCardLite.js +1 -1
- package/esm/designs/items/CapsuleItem.js +3 -3
- package/esm/designs/items/CircleNode.js +1 -1
- package/esm/designs/items/CircularProgress.js +3 -2
- package/esm/designs/items/CompactCard.js +1 -1
- package/esm/designs/items/DoneList.js +1 -1
- package/esm/designs/items/HorizontalIconArrow.js +2 -2
- package/esm/designs/items/HorizontalIconLine.js +2 -2
- package/esm/designs/items/IconBadge.js +4 -3
- package/esm/designs/items/IndexedCard.js +1 -1
- package/esm/designs/items/LCornerCard.js +1 -1
- package/esm/designs/items/LetterCard.js +4 -3
- package/esm/designs/items/LinedText.js +6 -5
- package/esm/designs/items/PillBadge.js +2 -2
- package/esm/designs/items/PlainText.js +4 -4
- package/esm/designs/items/ProgressCard.js +4 -4
- package/esm/designs/items/QuarterCircular.js +1 -1
- package/esm/designs/items/QuarterSimpleCard.js +1 -1
- package/esm/designs/items/RibbonCard.js +2 -2
- package/esm/designs/items/RoundedRectNode.js +2 -2
- package/esm/designs/items/SimpleCircleNode.js +1 -1
- package/esm/designs/items/SimpleHorizontalArrow.js +2 -2
- package/esm/designs/items/SimpleIllusItem.js +1 -1
- package/esm/designs/items/SimpleItem.js +3 -3
- package/esm/designs/items/SimpleVerticalArrow.js +2 -2
- package/esm/designs/items/UnderlineText.js +1 -1
- package/esm/designs/items/VerticalIconArrow.js +2 -2
- package/esm/designs/layouts/Align.js +22 -15
- package/esm/designs/layouts/Flex.js +23 -16
- package/esm/designs/structures/chart-bar.js +7 -5
- package/esm/designs/structures/chart-column.js +3 -2
- package/esm/designs/structures/chart-line.js +7 -5
- package/esm/designs/structures/chart-pie.js +4 -3
- package/esm/designs/structures/chart-wordcloud.js +5 -14
- package/esm/designs/structures/compare-binary-horizontal/dividers/pros-cons-arrow.js +1 -1
- package/esm/designs/structures/compare-binary-horizontal/dividers/pros-cons-fold.js +1 -1
- package/esm/designs/structures/compare-binary-horizontal/dividers/types.js +2 -1
- package/esm/designs/structures/compare-hierarchy-left-right.js +6 -5
- package/esm/designs/structures/compare-hierarchy-row.js +3 -2
- package/esm/designs/structures/compare-quadrant.js +2 -3
- package/esm/designs/structures/hierarchy-mindmap.js +19 -19
- package/esm/designs/structures/hierarchy-structure.js +1 -1
- package/esm/designs/structures/hierarchy-tree.js +15 -24
- package/esm/designs/structures/list-sector.js +5 -6
- package/esm/designs/structures/list-zigzag.js +2 -1
- package/esm/designs/structures/relation-dagre-flow.js +30 -35
- package/esm/designs/structures/relation-network.js +2 -2
- package/esm/designs/structures/sequence-funnel.js +1 -1
- package/esm/designs/structures/sequence-mountain.js +4 -4
- package/esm/designs/structures/sequence-pyramid.js +1 -1
- package/esm/designs/structures/sequence-zigzag-steps.js +2 -1
- package/esm/designs/utils/color.js +8 -4
- package/esm/designs/utils/item.js +3 -2
- package/esm/editor/commands/Batch.js +21 -8
- package/esm/editor/commands/UpdateElement.js +25 -22
- package/esm/editor/commands/UpdateOptions.js +23 -10
- package/esm/editor/commands/UpdateText.js +24 -11
- package/esm/editor/interactions/brush-select.js +27 -13
- package/esm/editor/interactions/click-select.js +13 -3
- package/esm/editor/interactions/dblclick-edit-text.js +36 -20
- package/esm/editor/interactions/drag-element.js +23 -9
- package/esm/editor/interactions/hotkey-history.js +17 -7
- package/esm/editor/interactions/select-highlight.js +5 -9
- package/esm/editor/interactions/zoom-wheel.js +2 -1
- package/esm/editor/managers/command.js +45 -27
- package/esm/editor/managers/interaction.js +46 -33
- package/esm/editor/managers/state.js +1 -1
- package/esm/editor/plugins/edit-bar/components/color-picker.js +9 -6
- package/esm/editor/plugins/edit-bar/components/popover.js +15 -12
- package/esm/editor/plugins/edit-bar/components/select.js +10 -8
- package/esm/editor/plugins/edit-bar/edit-bar.js +7 -25
- package/esm/editor/plugins/edit-bar/edit-items/align-elements.js +5 -3
- package/esm/editor/plugins/edit-bar/edit-items/font-align.js +1 -1
- package/esm/editor/plugins/edit-bar/edit-items/font-color.js +2 -2
- package/esm/editor/plugins/edit-bar/edit-items/icon-color.js +2 -2
- package/esm/editor/plugins/resize-element.js +6 -4
- package/esm/editor/utils/click-handler.js +6 -3
- package/esm/editor/utils/coordinate.js +2 -1
- package/esm/editor/utils/element.js +2 -1
- package/esm/editor/utils/event.js +2 -1
- package/esm/editor/utils/extension.js +1 -1
- package/esm/editor/utils/hotkey.js +2 -1
- package/esm/exporter/font.js +106 -90
- package/esm/exporter/png.js +49 -37
- package/esm/exporter/svg.js +55 -38
- package/esm/jsx/components/Ellipse.js +5 -4
- package/esm/jsx/components/Path.js +2 -4
- package/esm/jsx/components/Polygon.js +15 -6
- package/esm/jsx/components/Text.js +21 -41
- package/esm/jsx/renderer.js +15 -7
- package/esm/jsx/utils/bounds.js +18 -16
- package/esm/jsx/utils/children.js +2 -1
- package/esm/jsx/utils/clone.js +13 -2
- package/esm/jsx/utils/element.js +2 -1
- package/esm/options/parser.js +45 -46
- package/esm/renderer/composites/background.js +3 -2
- package/esm/renderer/composites/icon.js +14 -19
- package/esm/renderer/composites/illus.js +17 -22
- package/esm/renderer/composites/shape.js +4 -2
- package/esm/renderer/composites/svg.js +2 -1
- package/esm/renderer/composites/text.js +5 -3
- package/esm/renderer/fonts/loader.js +4 -3
- package/esm/renderer/fonts/registry.js +1 -1
- package/esm/renderer/palettes/utils.js +3 -2
- package/esm/renderer/renderer.js +7 -5
- package/esm/renderer/stylize/gradient.js +3 -2
- package/esm/renderer/stylize/pattern.js +15 -8
- package/esm/renderer/stylize/rough.js +1 -1
- package/esm/resource/load-tracker.js +22 -10
- package/esm/resource/loader.js +80 -67
- package/esm/resource/loaders/image.js +71 -59
- package/esm/resource/loaders/remote.js +26 -15
- package/esm/resource/loaders/search.js +38 -25
- package/esm/resource/utils/parser.js +2 -1
- package/esm/runtime/Infographic.js +26 -13
- package/esm/runtime/utils.js +5 -8
- package/esm/ssr/renderer.js +42 -35
- package/esm/syntax/index.js +19 -6
- package/esm/syntax/mapper.js +2 -2
- package/esm/templates/built-in.js +96 -200
- package/esm/templates/hierarchy-mindmap.js +1 -5
- package/esm/templates/hierarchy-tree.js +1 -5
- package/esm/templates/relation-dagre-flow.js +4 -28
- package/esm/themes/generator.js +8 -14
- package/esm/utils/fetch.js +48 -35
- package/esm/utils/icon.js +1 -4
- package/esm/utils/is-browser.js +2 -2
- package/esm/utils/measure-text.js +2 -1
- package/esm/utils/padding.js +1 -1
- package/esm/utils/recognizer.js +2 -1
- package/esm/utils/text.js +14 -3
- package/esm/version.d.ts +1 -1
- package/esm/version.js +1 -1
- package/lib/designs/components/Btn.js +15 -4
- package/lib/designs/components/BtnsGroup.js +1 -1
- package/lib/designs/components/Illus.js +15 -3
- package/lib/designs/components/ItemDesc.js +17 -11
- package/lib/designs/components/ItemIcon.js +17 -18
- package/lib/designs/components/ItemLabel.js +17 -11
- package/lib/designs/components/ItemValue.js +17 -12
- package/lib/designs/components/ItemsGroup.js +1 -1
- package/lib/designs/components/ShapesGroup.js +1 -1
- package/lib/designs/components/Title.js +2 -2
- package/lib/designs/decorations/simple-arrow.js +14 -2
- package/lib/designs/decorations/triangle.js +14 -2
- package/lib/designs/defs/DropShadow.js +13 -2
- package/lib/designs/defs/LinearGradient.js +1 -1
- package/lib/designs/items/BadgeCard.js +2 -2
- package/lib/designs/items/CandyCardLite.js +1 -1
- package/lib/designs/items/CapsuleItem.js +3 -3
- package/lib/designs/items/CircleNode.js +1 -1
- package/lib/designs/items/CircularProgress.js +3 -2
- package/lib/designs/items/CompactCard.js +1 -1
- package/lib/designs/items/DoneList.js +1 -1
- package/lib/designs/items/HorizontalIconArrow.js +2 -2
- package/lib/designs/items/HorizontalIconLine.js +2 -2
- package/lib/designs/items/IconBadge.js +4 -3
- package/lib/designs/items/IndexedCard.js +1 -1
- package/lib/designs/items/LCornerCard.js +1 -1
- package/lib/designs/items/LetterCard.js +4 -3
- package/lib/designs/items/LinedText.js +6 -5
- package/lib/designs/items/PillBadge.js +2 -2
- package/lib/designs/items/PlainText.js +4 -4
- package/lib/designs/items/ProgressCard.js +4 -4
- package/lib/designs/items/QuarterCircular.js +1 -1
- package/lib/designs/items/QuarterSimpleCard.js +1 -1
- package/lib/designs/items/RibbonCard.js +2 -2
- package/lib/designs/items/RoundedRectNode.js +2 -2
- package/lib/designs/items/SimpleCircleNode.js +1 -1
- package/lib/designs/items/SimpleHorizontalArrow.js +2 -2
- package/lib/designs/items/SimpleIllusItem.js +1 -1
- package/lib/designs/items/SimpleItem.js +3 -3
- package/lib/designs/items/SimpleVerticalArrow.js +2 -2
- package/lib/designs/items/UnderlineText.js +1 -1
- package/lib/designs/items/VerticalIconArrow.js +2 -2
- package/lib/designs/layouts/Align.js +22 -15
- package/lib/designs/layouts/Flex.js +23 -16
- package/lib/designs/structures/chart-bar.js +7 -5
- package/lib/designs/structures/chart-column.js +3 -2
- package/lib/designs/structures/chart-line.js +7 -5
- package/lib/designs/structures/chart-pie.js +4 -3
- package/lib/designs/structures/chart-wordcloud.js +5 -14
- package/lib/designs/structures/compare-binary-horizontal/dividers/pros-cons-arrow.js +1 -1
- package/lib/designs/structures/compare-binary-horizontal/dividers/pros-cons-fold.js +1 -1
- package/lib/designs/structures/compare-binary-horizontal/dividers/types.js +2 -1
- package/lib/designs/structures/compare-hierarchy-left-right.js +6 -5
- package/lib/designs/structures/compare-hierarchy-row.js +3 -2
- package/lib/designs/structures/compare-quadrant.js +2 -3
- package/lib/designs/structures/hierarchy-mindmap.js +19 -19
- package/lib/designs/structures/hierarchy-structure.js +1 -1
- package/lib/designs/structures/hierarchy-tree.js +15 -24
- package/lib/designs/structures/list-sector.js +5 -6
- package/lib/designs/structures/list-zigzag.js +2 -1
- package/lib/designs/structures/relation-dagre-flow.js +30 -35
- package/lib/designs/structures/relation-network.js +2 -2
- package/lib/designs/structures/sequence-funnel.js +1 -1
- package/lib/designs/structures/sequence-mountain.js +4 -4
- package/lib/designs/structures/sequence-pyramid.js +1 -1
- package/lib/designs/structures/sequence-zigzag-steps.js +2 -1
- package/lib/designs/utils/color.js +8 -4
- package/lib/designs/utils/item.js +3 -2
- package/lib/editor/commands/Batch.js +21 -8
- package/lib/editor/commands/UpdateElement.js +25 -22
- package/lib/editor/commands/UpdateOptions.js +23 -10
- package/lib/editor/commands/UpdateText.js +24 -11
- package/lib/editor/interactions/brush-select.js +27 -13
- package/lib/editor/interactions/click-select.js +13 -3
- package/lib/editor/interactions/dblclick-edit-text.js +36 -20
- package/lib/editor/interactions/drag-element.js +23 -9
- package/lib/editor/interactions/hotkey-history.js +17 -7
- package/lib/editor/interactions/select-highlight.js +5 -9
- package/lib/editor/interactions/zoom-wheel.js +2 -1
- package/lib/editor/managers/command.js +43 -25
- package/lib/editor/managers/interaction.js +46 -33
- package/lib/editor/managers/state.js +1 -1
- package/lib/editor/plugins/edit-bar/components/color-picker.js +9 -6
- package/lib/editor/plugins/edit-bar/components/popover.js +15 -12
- package/lib/editor/plugins/edit-bar/components/select.js +10 -8
- package/lib/editor/plugins/edit-bar/edit-bar.js +7 -25
- package/lib/editor/plugins/edit-bar/edit-items/align-elements.js +5 -3
- package/lib/editor/plugins/edit-bar/edit-items/font-align.js +1 -1
- package/lib/editor/plugins/edit-bar/edit-items/font-color.js +2 -2
- package/lib/editor/plugins/edit-bar/edit-items/icon-color.js +2 -2
- package/lib/editor/plugins/resize-element.js +6 -4
- package/lib/editor/utils/click-handler.js +6 -3
- package/lib/editor/utils/coordinate.js +2 -1
- package/lib/editor/utils/element.js +2 -1
- package/lib/editor/utils/event.js +2 -1
- package/lib/editor/utils/extension.js +1 -1
- package/lib/editor/utils/hotkey.js +2 -1
- package/lib/exporter/font.js +106 -90
- package/lib/exporter/png.js +49 -37
- package/lib/exporter/svg.js +55 -38
- package/lib/jsx/components/Ellipse.js +5 -4
- package/lib/jsx/components/Path.js +2 -4
- package/lib/jsx/components/Polygon.js +15 -6
- package/lib/jsx/components/Text.js +21 -41
- package/lib/jsx/renderer.js +15 -7
- package/lib/jsx/utils/bounds.js +18 -16
- package/lib/jsx/utils/children.js +2 -1
- package/lib/jsx/utils/clone.js +13 -2
- package/lib/jsx/utils/element.js +2 -1
- package/lib/options/parser.js +45 -46
- package/lib/renderer/composites/background.js +3 -2
- package/lib/renderer/composites/icon.js +14 -19
- package/lib/renderer/composites/illus.js +17 -22
- package/lib/renderer/composites/shape.js +4 -2
- package/lib/renderer/composites/svg.js +2 -1
- package/lib/renderer/composites/text.js +5 -3
- package/lib/renderer/fonts/loader.js +4 -3
- package/lib/renderer/fonts/registry.js +1 -1
- package/lib/renderer/palettes/utils.js +3 -2
- package/lib/renderer/renderer.js +7 -5
- package/lib/renderer/stylize/gradient.js +3 -2
- package/lib/renderer/stylize/pattern.js +15 -8
- package/lib/renderer/stylize/rough.js +1 -1
- package/lib/resource/load-tracker.js +22 -10
- package/lib/resource/loader.js +80 -67
- package/lib/resource/loaders/image.js +71 -59
- package/lib/resource/loaders/remote.js +26 -15
- package/lib/resource/loaders/search.js +38 -25
- package/lib/resource/utils/parser.js +2 -1
- package/lib/runtime/Infographic.js +26 -13
- package/lib/runtime/utils.js +5 -8
- package/lib/ssr/renderer.js +42 -35
- package/lib/syntax/index.js +19 -6
- package/lib/syntax/mapper.js +2 -2
- package/lib/templates/built-in.js +96 -200
- package/lib/templates/hierarchy-mindmap.js +1 -5
- package/lib/templates/hierarchy-tree.js +1 -5
- package/lib/templates/relation-dagre-flow.js +4 -28
- package/lib/themes/generator.js +8 -14
- package/lib/utils/fetch.js +48 -35
- package/lib/utils/icon.js +1 -4
- package/lib/utils/is-browser.js +2 -2
- package/lib/utils/measure-text.js +2 -1
- package/lib/utils/padding.js +1 -1
- package/lib/utils/recognizer.js +2 -1
- package/lib/utils/text.js +14 -3
- package/lib/version.d.ts +1 -1
- package/lib/version.js +1 -1
- package/package.json +1 -1
- package/src/version.ts +1 -1
|
@@ -6,7 +6,7 @@ class Extension {
|
|
|
6
6
|
this.extensions = new Map();
|
|
7
7
|
}
|
|
8
8
|
register(name, extension, options) {
|
|
9
|
-
if (!options
|
|
9
|
+
if (!(options === null || options === void 0 ? void 0 : options.override) && this.extensions.has(name)) {
|
|
10
10
|
throw new Error(`Extension "${name}" already registered`);
|
|
11
11
|
}
|
|
12
12
|
this.extensions.set(name, extension);
|
|
@@ -38,10 +38,11 @@ const normalizeCombo = (combo) => {
|
|
|
38
38
|
return comboObj;
|
|
39
39
|
};
|
|
40
40
|
const matchCombo = (event, combo) => {
|
|
41
|
+
var _a;
|
|
41
42
|
const key = event.key.toLowerCase();
|
|
42
43
|
if (key !== combo.key)
|
|
43
44
|
return false;
|
|
44
|
-
const wantsMod = combo.mod
|
|
45
|
+
const wantsMod = (_a = combo.mod) !== null && _a !== void 0 ? _a : false;
|
|
45
46
|
const hasMeta = event.metaKey;
|
|
46
47
|
const hasCtrl = event.ctrlKey;
|
|
47
48
|
const hasMod = hasMeta || hasCtrl;
|
package/lib/exporter/font.js
CHANGED
|
@@ -1,4 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
3
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
4
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
5
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
6
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
7
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
8
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
9
|
+
});
|
|
10
|
+
};
|
|
2
11
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
12
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
13
|
};
|
|
@@ -8,51 +17,53 @@ exports.getActualLoadedFontFace = getActualLoadedFontFace;
|
|
|
8
17
|
const postcss_1 = __importDefault(require("postcss"));
|
|
9
18
|
const renderer_1 = require("../renderer");
|
|
10
19
|
const utils_1 = require("../utils");
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
const parsedFontsFaces = [];
|
|
17
|
-
// 2. 对每个使用到的字体,解析 CSS + 结合 document.fonts 的实际加载子集
|
|
18
|
-
await Promise.all(Array.from(usedFonts).map(async (fontFamily) => {
|
|
19
|
-
const loadedFonts = getActualLoadedFontFace(fontFamily);
|
|
20
|
-
if (!loadedFonts.length)
|
|
21
|
-
return;
|
|
22
|
-
const cssFontFaces = await parseFontFamily(fontFamily);
|
|
23
|
-
if (!cssFontFaces.length)
|
|
20
|
+
function embedFonts(svg_1) {
|
|
21
|
+
return __awaiter(this, arguments, void 0, function* (svg, embedResources = true) {
|
|
22
|
+
// 1. 收集使用到的 font-family
|
|
23
|
+
const usedFonts = collectUsedFonts(svg);
|
|
24
|
+
if (usedFonts.size === 0)
|
|
24
25
|
return;
|
|
25
|
-
const
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
const
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
const
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
fontFace.src
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
26
|
+
const parsedFontsFaces = [];
|
|
27
|
+
// 2. 对每个使用到的字体,解析 CSS + 结合 document.fonts 的实际加载子集
|
|
28
|
+
yield Promise.all(Array.from(usedFonts).map((fontFamily) => __awaiter(this, void 0, void 0, function* () {
|
|
29
|
+
const loadedFonts = getActualLoadedFontFace(fontFamily);
|
|
30
|
+
if (!loadedFonts.length)
|
|
31
|
+
return;
|
|
32
|
+
const cssFontFaces = yield parseFontFamily(fontFamily);
|
|
33
|
+
if (!cssFontFaces.length)
|
|
34
|
+
return;
|
|
35
|
+
const processed = yield Promise.all(cssFontFaces.map((rawFace) => __awaiter(this, void 0, void 0, function* () {
|
|
36
|
+
const fontFace = normalizeFontFace(rawFace);
|
|
37
|
+
const unicodeRange = fontFace['unicode-range'].replace(/\s/g, '');
|
|
38
|
+
const subset = loadedFonts.find((font) => font.unicodeRange &&
|
|
39
|
+
font.unicodeRange.replace(/\s/g, '') === unicodeRange);
|
|
40
|
+
// 如果找不到对应子集,就不处理这个 font-face
|
|
41
|
+
if (!subset)
|
|
42
|
+
return null;
|
|
43
|
+
const baseURL = (0, renderer_1.getWoff2BaseURL)(fontFace['font-family'], (0, utils_1.normalizeFontWeightName)(fontFace['font-weight']));
|
|
44
|
+
if (!baseURL)
|
|
45
|
+
return null;
|
|
46
|
+
// 更宽松地从 src 中提取 .woff2 URL 片段
|
|
47
|
+
const urlMatch = fontFace.src.match(/url\(["']?(.*?\.woff2)[^"']*["']?\)/);
|
|
48
|
+
if (!(urlMatch === null || urlMatch === void 0 ? void 0 : urlMatch[1]))
|
|
49
|
+
return null;
|
|
50
|
+
const woff2URL = (0, utils_1.join)(baseURL, urlMatch[1]);
|
|
51
|
+
if (embedResources) {
|
|
52
|
+
const woff2DataUrl = yield loadWoff2(woff2URL);
|
|
53
|
+
fontFace.src = `url(${woff2DataUrl}) format('woff2')`;
|
|
54
|
+
}
|
|
55
|
+
else {
|
|
56
|
+
fontFace.src = `url(${woff2URL}) format('woff2')`;
|
|
57
|
+
}
|
|
58
|
+
return fontFace;
|
|
59
|
+
})));
|
|
60
|
+
parsedFontsFaces.push(...(processed.filter(Boolean) || []));
|
|
61
|
+
})));
|
|
62
|
+
// 3. 创建 <style>@font-face...</style> 并插入 SVG
|
|
63
|
+
if (parsedFontsFaces.length > 0) {
|
|
64
|
+
insertFontStyle(svg, parsedFontsFaces);
|
|
65
|
+
}
|
|
66
|
+
});
|
|
56
67
|
}
|
|
57
68
|
/**
|
|
58
69
|
* 收集 SVG 中用到的 font-family
|
|
@@ -78,33 +89,35 @@ function collectUsedFonts(svg) {
|
|
|
78
89
|
/**
|
|
79
90
|
* 解析给定 font-family 对应的 CSS @font-face
|
|
80
91
|
*/
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
if (!cssText)
|
|
92
|
-
return;
|
|
93
|
-
try {
|
|
94
|
-
const root = postcss_1.default.parse(cssText);
|
|
95
|
-
root.walkAtRules('font-face', (rule) => {
|
|
96
|
-
const fontFace = {};
|
|
97
|
-
rule.walkDecls((decl) => {
|
|
98
|
-
fontFace[decl.prop] = decl.value;
|
|
99
|
-
});
|
|
100
|
-
fontFaces.push(fontFace);
|
|
92
|
+
function parseFontFamily(fontFamily) {
|
|
93
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
94
|
+
const urls = (0, renderer_1.getFontURLs)(fontFamily);
|
|
95
|
+
const fontFaces = [];
|
|
96
|
+
yield Promise.allSettled(urls.map((url) => __awaiter(this, void 0, void 0, function* () {
|
|
97
|
+
const cssText = yield (0, utils_1.fetchWithCache)(url)
|
|
98
|
+
.then((res) => res.text())
|
|
99
|
+
.catch(() => {
|
|
100
|
+
console.error(`Failed to fetch font CSS: ${url}`);
|
|
101
|
+
return null;
|
|
101
102
|
});
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
103
|
+
if (!cssText)
|
|
104
|
+
return;
|
|
105
|
+
try {
|
|
106
|
+
const root = postcss_1.default.parse(cssText);
|
|
107
|
+
root.walkAtRules('font-face', (rule) => {
|
|
108
|
+
const fontFace = {};
|
|
109
|
+
rule.walkDecls((decl) => {
|
|
110
|
+
fontFace[decl.prop] = decl.value;
|
|
111
|
+
});
|
|
112
|
+
fontFaces.push(fontFace);
|
|
113
|
+
});
|
|
114
|
+
}
|
|
115
|
+
catch (error) {
|
|
116
|
+
console.error(`Failed to parse CSS: ${url}`, error);
|
|
117
|
+
}
|
|
118
|
+
})));
|
|
119
|
+
return fontFaces;
|
|
120
|
+
});
|
|
108
121
|
}
|
|
109
122
|
/**
|
|
110
123
|
* 从 document.fonts 中获取给定 family 且已加载的 FontFace
|
|
@@ -124,13 +137,14 @@ function getActualLoadedFontFace(fontFamily) {
|
|
|
124
137
|
* 将不完整的 FontFaceAttributes 补全为完整结构,给后续逻辑使用
|
|
125
138
|
*/
|
|
126
139
|
function normalizeFontFace(face) {
|
|
140
|
+
var _a, _b, _c, _d, _e, _f;
|
|
127
141
|
return {
|
|
128
|
-
'font-family': face['font-family']
|
|
129
|
-
src: face.src
|
|
130
|
-
'font-style': face['font-style']
|
|
131
|
-
'font-display': face['font-display']
|
|
132
|
-
'font-weight': face['font-weight']
|
|
133
|
-
'unicode-range': face['unicode-range']
|
|
142
|
+
'font-family': (_a = face['font-family']) !== null && _a !== void 0 ? _a : '',
|
|
143
|
+
src: (_b = face.src) !== null && _b !== void 0 ? _b : '',
|
|
144
|
+
'font-style': (_c = face['font-style']) !== null && _c !== void 0 ? _c : 'normal',
|
|
145
|
+
'font-display': (_d = face['font-display']) !== null && _d !== void 0 ? _d : 'swap',
|
|
146
|
+
'font-weight': (_e = face['font-weight']) !== null && _e !== void 0 ? _e : '400',
|
|
147
|
+
'unicode-range': (_f = face['unicode-range']) !== null && _f !== void 0 ? _f : 'U+0-FFFF',
|
|
134
148
|
};
|
|
135
149
|
}
|
|
136
150
|
/**
|
|
@@ -180,19 +194,21 @@ function insertFontStyle(svg, fontFaces) {
|
|
|
180
194
|
/**
|
|
181
195
|
* 加载 woff2 并转为 DataURL
|
|
182
196
|
*/
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
const
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
197
|
+
function loadWoff2(url) {
|
|
198
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
199
|
+
const response = yield (0, utils_1.fetchWithCache)(url);
|
|
200
|
+
if (!response.ok) {
|
|
201
|
+
throw new Error(`Failed to load font: ${url}`);
|
|
202
|
+
}
|
|
203
|
+
const blob = yield response.blob();
|
|
204
|
+
const dataUrl = yield new Promise((resolve, reject) => {
|
|
205
|
+
const reader = new FileReader();
|
|
206
|
+
reader.onloadend = () => {
|
|
207
|
+
resolve(reader.result);
|
|
208
|
+
};
|
|
209
|
+
reader.onerror = reject;
|
|
210
|
+
reader.readAsDataURL(blob);
|
|
211
|
+
});
|
|
212
|
+
return dataUrl;
|
|
196
213
|
});
|
|
197
|
-
return dataUrl;
|
|
198
214
|
}
|
package/lib/exporter/png.js
CHANGED
|
@@ -1,45 +1,57 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
3
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
4
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
5
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
6
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
7
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
8
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
9
|
+
});
|
|
10
|
+
};
|
|
2
11
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
12
|
exports.exportToPNGString = exportToPNGString;
|
|
4
13
|
const utils_1 = require("../utils");
|
|
5
14
|
const svg_1 = require("./svg");
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
15
|
+
function exportToPNGString(svg_2) {
|
|
16
|
+
return __awaiter(this, arguments, void 0, function* (svg, options = {}) {
|
|
17
|
+
var _a;
|
|
18
|
+
const { dpr = (_a = globalThis.devicePixelRatio) !== null && _a !== void 0 ? _a : 2 } = options;
|
|
19
|
+
const node = yield (0, svg_1.exportToSVG)(svg);
|
|
20
|
+
const { width, height } = (0, utils_1.getViewBox)(node);
|
|
21
|
+
return new Promise((resolve, reject) => {
|
|
22
|
+
try {
|
|
23
|
+
const canvas = document.createElement('canvas');
|
|
24
|
+
canvas.width = width * dpr;
|
|
25
|
+
canvas.height = height * dpr;
|
|
26
|
+
const ctx = canvas.getContext('2d');
|
|
27
|
+
if (!ctx) {
|
|
28
|
+
reject(new Error('Failed to get canvas context'));
|
|
29
|
+
return;
|
|
30
|
+
}
|
|
31
|
+
// 应用 DPR 缩放
|
|
32
|
+
ctx.scale(dpr, dpr);
|
|
33
|
+
ctx.imageSmoothingEnabled = true;
|
|
34
|
+
ctx.imageSmoothingQuality = 'high';
|
|
35
|
+
node.setAttribute('width', String(width));
|
|
36
|
+
node.setAttribute('height', String(height));
|
|
37
|
+
const updatedSvgData = new XMLSerializer().serializeToString(node);
|
|
38
|
+
const svgURL = 'data:image/svg+xml;charset=utf-8,' +
|
|
39
|
+
encodeURIComponent(updatedSvgData);
|
|
40
|
+
const img = new Image();
|
|
41
|
+
img.onload = function () {
|
|
42
|
+
ctx.clearRect(0, 0, width, height);
|
|
43
|
+
ctx.drawImage(img, 0, 0, width, height);
|
|
44
|
+
const pngURL = canvas.toDataURL('image/png');
|
|
45
|
+
resolve(pngURL);
|
|
46
|
+
};
|
|
47
|
+
img.onerror = function (error) {
|
|
48
|
+
reject(new Error('Image load failed: ' + error));
|
|
49
|
+
};
|
|
50
|
+
img.src = svgURL;
|
|
51
|
+
}
|
|
52
|
+
catch (error) {
|
|
53
|
+
reject(error);
|
|
19
54
|
}
|
|
20
|
-
|
|
21
|
-
ctx.scale(dpr, dpr);
|
|
22
|
-
ctx.imageSmoothingEnabled = true;
|
|
23
|
-
ctx.imageSmoothingQuality = 'high';
|
|
24
|
-
node.setAttribute('width', String(width));
|
|
25
|
-
node.setAttribute('height', String(height));
|
|
26
|
-
const updatedSvgData = new XMLSerializer().serializeToString(node);
|
|
27
|
-
const svgURL = 'data:image/svg+xml;charset=utf-8,' +
|
|
28
|
-
encodeURIComponent(updatedSvgData);
|
|
29
|
-
const img = new Image();
|
|
30
|
-
img.onload = function () {
|
|
31
|
-
ctx.clearRect(0, 0, width, height);
|
|
32
|
-
ctx.drawImage(img, 0, 0, width, height);
|
|
33
|
-
const pngURL = canvas.toDataURL('image/png');
|
|
34
|
-
resolve(pngURL);
|
|
35
|
-
};
|
|
36
|
-
img.onerror = function (error) {
|
|
37
|
-
reject(new Error('Image load failed: ' + error));
|
|
38
|
-
};
|
|
39
|
-
img.src = svgURL;
|
|
40
|
-
}
|
|
41
|
-
catch (error) {
|
|
42
|
-
reject(error);
|
|
43
|
-
}
|
|
55
|
+
});
|
|
44
56
|
});
|
|
45
57
|
}
|
package/lib/exporter/svg.js
CHANGED
|
@@ -1,43 +1,58 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
3
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
4
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
5
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
6
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
7
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
8
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
9
|
+
});
|
|
10
|
+
};
|
|
2
11
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
12
|
exports.exportToSVGString = exportToSVGString;
|
|
4
13
|
exports.exportToSVG = exportToSVG;
|
|
5
14
|
const utils_1 = require("../utils");
|
|
6
15
|
const font_1 = require("./font");
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
const { embedResources = true, removeIds = false } = options;
|
|
14
|
-
const clonedSVG = svg.cloneNode(true);
|
|
15
|
-
const { width, height } = (0, utils_1.getViewBox)(svg);
|
|
16
|
-
(0, utils_1.setAttributes)(clonedSVG, { width, height });
|
|
17
|
-
if (removeIds) {
|
|
18
|
-
inlineUseElements(clonedSVG);
|
|
19
|
-
inlineDefsReferences(clonedSVG);
|
|
20
|
-
}
|
|
21
|
-
else {
|
|
22
|
-
await embedIcons(clonedSVG);
|
|
23
|
-
}
|
|
24
|
-
await (0, font_1.embedFonts)(clonedSVG, embedResources);
|
|
25
|
-
cleanSVG(clonedSVG);
|
|
26
|
-
return clonedSVG;
|
|
16
|
+
function exportToSVGString(svg_1) {
|
|
17
|
+
return __awaiter(this, arguments, void 0, function* (svg, options = {}) {
|
|
18
|
+
const node = yield exportToSVG(svg, options);
|
|
19
|
+
const str = new XMLSerializer().serializeToString(node);
|
|
20
|
+
return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(str);
|
|
21
|
+
});
|
|
27
22
|
}
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
const
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
const symbolElement = document.querySelector(href);
|
|
38
|
-
if (symbolElement)
|
|
39
|
-
defs.appendChild(symbolElement.cloneNode(true));
|
|
23
|
+
function exportToSVG(svg_1) {
|
|
24
|
+
return __awaiter(this, arguments, void 0, function* (svg, options = {}) {
|
|
25
|
+
const { embedResources = true, removeIds = false } = options;
|
|
26
|
+
const clonedSVG = svg.cloneNode(true);
|
|
27
|
+
const { width, height } = (0, utils_1.getViewBox)(svg);
|
|
28
|
+
(0, utils_1.setAttributes)(clonedSVG, { width, height });
|
|
29
|
+
if (removeIds) {
|
|
30
|
+
inlineUseElements(clonedSVG);
|
|
31
|
+
inlineDefsReferences(clonedSVG);
|
|
40
32
|
}
|
|
33
|
+
else {
|
|
34
|
+
yield embedIcons(clonedSVG);
|
|
35
|
+
}
|
|
36
|
+
yield (0, font_1.embedFonts)(clonedSVG, embedResources);
|
|
37
|
+
cleanSVG(clonedSVG);
|
|
38
|
+
return clonedSVG;
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
function embedIcons(svg) {
|
|
42
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
43
|
+
const icons = svg.querySelectorAll('use');
|
|
44
|
+
const defs = getDefs(svg);
|
|
45
|
+
icons.forEach((icon) => {
|
|
46
|
+
const href = icon.getAttribute('href');
|
|
47
|
+
if (!href)
|
|
48
|
+
return;
|
|
49
|
+
const existsSymbol = svg.querySelector(href);
|
|
50
|
+
if (!existsSymbol) {
|
|
51
|
+
const symbolElement = document.querySelector(href);
|
|
52
|
+
if (symbolElement)
|
|
53
|
+
defs.appendChild(symbolElement.cloneNode(true));
|
|
54
|
+
}
|
|
55
|
+
});
|
|
41
56
|
});
|
|
42
57
|
}
|
|
43
58
|
const iconRole = 'icon-defs';
|
|
@@ -68,7 +83,8 @@ function inlineUseElements(svg) {
|
|
|
68
83
|
});
|
|
69
84
|
}
|
|
70
85
|
function getUseHref(use) {
|
|
71
|
-
|
|
86
|
+
var _a;
|
|
87
|
+
return (_a = use.getAttribute('href')) !== null && _a !== void 0 ? _a : use.getAttribute('xlink:href');
|
|
72
88
|
}
|
|
73
89
|
function resolveUseTarget(svg, href) {
|
|
74
90
|
const localTarget = svg.querySelector(href);
|
|
@@ -116,10 +132,11 @@ function materializeElement(use, source) {
|
|
|
116
132
|
return wrapper;
|
|
117
133
|
}
|
|
118
134
|
function buildUseTransform(use) {
|
|
135
|
+
var _a;
|
|
119
136
|
const x = use.getAttribute('x');
|
|
120
137
|
const y = use.getAttribute('y');
|
|
121
|
-
const translate = x || y ? `translate(${x
|
|
122
|
-
const transform = use.getAttribute('transform')
|
|
138
|
+
const translate = x || y ? `translate(${x !== null && x !== void 0 ? x : 0} ${y !== null && y !== void 0 ? y : 0})` : '';
|
|
139
|
+
const transform = (_a = use.getAttribute('transform')) !== null && _a !== void 0 ? _a : '';
|
|
123
140
|
if (translate && transform)
|
|
124
141
|
return `${translate} ${transform}`;
|
|
125
142
|
return translate || transform || null;
|
|
@@ -273,13 +290,13 @@ function cleanSVG(svg) {
|
|
|
273
290
|
}
|
|
274
291
|
function removeBtnGroup(svg) {
|
|
275
292
|
const btnGroup = (0, utils_1.getElementByRole)(svg, "btns-group" /* ElementTypeEnum.BtnsGroup */);
|
|
276
|
-
btnGroup
|
|
293
|
+
btnGroup === null || btnGroup === void 0 ? void 0 : btnGroup.remove();
|
|
277
294
|
const btnIconDefs = (0, utils_1.getElementByRole)(svg, 'btn-icon-defs');
|
|
278
|
-
btnIconDefs
|
|
295
|
+
btnIconDefs === null || btnIconDefs === void 0 ? void 0 : btnIconDefs.remove();
|
|
279
296
|
}
|
|
280
297
|
function removeTransientContainer(svg) {
|
|
281
298
|
const transientContainer = svg.querySelector('[data-element-type=transient-container]');
|
|
282
|
-
transientContainer
|
|
299
|
+
transientContainer === null || transientContainer === void 0 ? void 0 : transientContainer.remove();
|
|
283
300
|
}
|
|
284
301
|
function removeUselessAttrs(svg) {
|
|
285
302
|
const groups = svg.querySelectorAll('g');
|
|
@@ -2,11 +2,12 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.Ellipse = Ellipse;
|
|
4
4
|
function Ellipse(props) {
|
|
5
|
+
var _a, _b, _c, _d;
|
|
5
6
|
const { x = 0, y = 0, width = 0, height = 0 } = props;
|
|
6
|
-
props.cx
|
|
7
|
-
props.cy
|
|
8
|
-
props.rx
|
|
9
|
-
props.ry
|
|
7
|
+
(_a = props.cx) !== null && _a !== void 0 ? _a : (props.cx = x + width / 2);
|
|
8
|
+
(_b = props.cy) !== null && _b !== void 0 ? _b : (props.cy = y + height / 2);
|
|
9
|
+
(_c = props.rx) !== null && _c !== void 0 ? _c : (props.rx = width / 2);
|
|
10
|
+
(_d = props.ry) !== null && _d !== void 0 ? _d : (props.ry = height / 2);
|
|
10
11
|
const node = {
|
|
11
12
|
type: 'ellipse',
|
|
12
13
|
props,
|
|
@@ -3,11 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.Path = Path;
|
|
4
4
|
function Path(props) {
|
|
5
5
|
const { x, y } = props;
|
|
6
|
-
const finalProps = {
|
|
7
|
-
...props,
|
|
8
|
-
};
|
|
6
|
+
const finalProps = Object.assign({}, props);
|
|
9
7
|
if (x !== undefined || y !== undefined) {
|
|
10
|
-
finalProps.transform = `translate(${x
|
|
8
|
+
finalProps.transform = `translate(${x !== null && x !== void 0 ? x : 0}, ${y !== null && y !== void 0 ? y : 0})`;
|
|
11
9
|
}
|
|
12
10
|
const node = {
|
|
13
11
|
type: 'path',
|
|
@@ -1,16 +1,25 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
3
|
+
var t = {};
|
|
4
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
5
|
+
t[p] = s[p];
|
|
6
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
7
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
8
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
9
|
+
t[p[i]] = s[p[i]];
|
|
10
|
+
}
|
|
11
|
+
return t;
|
|
12
|
+
};
|
|
2
13
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
14
|
exports.Polygon = Polygon;
|
|
4
|
-
function Polygon(
|
|
15
|
+
function Polygon(_a) {
|
|
16
|
+
var { points = [] } = _a, props = __rest(_a, ["points"]);
|
|
5
17
|
const { x, y } = props;
|
|
6
18
|
const pointsStr = points.map(({ x, y }) => `${x},${y}`).join(' ');
|
|
7
|
-
const finalProps = {
|
|
8
|
-
...props,
|
|
9
|
-
points: pointsStr,
|
|
10
|
-
};
|
|
19
|
+
const finalProps = Object.assign(Object.assign({}, props), { points: pointsStr });
|
|
11
20
|
if (x !== undefined || y !== undefined) {
|
|
12
21
|
finalProps.transform =
|
|
13
|
-
`translate(${x
|
|
22
|
+
`translate(${x !== null && x !== void 0 ? x : 0}, ${y !== null && y !== void 0 ? y : 0})` + (finalProps.transform || '');
|
|
14
23
|
}
|
|
15
24
|
const node = {
|
|
16
25
|
type: 'polygon',
|
|
@@ -1,9 +1,20 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
3
|
+
var t = {};
|
|
4
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
5
|
+
t[p] = s[p];
|
|
6
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
7
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
8
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
9
|
+
t[p[i]] = s[p[i]];
|
|
10
|
+
}
|
|
11
|
+
return t;
|
|
12
|
+
};
|
|
2
13
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
14
|
exports.Text = Text;
|
|
4
15
|
const utils_1 = require("../../utils");
|
|
5
16
|
function Text(props) {
|
|
6
|
-
const { id, x = 0, y = 0, width: w, height: h, alignHorizontal = 'left', alignVertical = 'top', children, fontSize = 14, fontFamily, fontStyle, fontWeight, textDecoration, letterSpacing, wordSpacing, opacity, fill = 'black', lineHeight, wordWrap, backgroundColor = 'none', backgroundOpacity = 1, backgroundRadius = 0,
|
|
17
|
+
const { id, x = 0, y = 0, width: w, height: h, alignHorizontal = 'left', alignVertical = 'top', children, fontSize = 14, fontFamily, fontStyle, fontWeight, textDecoration, letterSpacing, wordSpacing, opacity, fill = 'black', lineHeight, wordWrap, backgroundColor = 'none', backgroundOpacity = 1, backgroundRadius = 0 } = props, restProps = __rest(props, ["id", "x", "y", "width", "height", "alignHorizontal", "alignVertical", "children", "fontSize", "fontFamily", "fontStyle", "fontWeight", "textDecoration", "letterSpacing", "wordSpacing", "opacity", "fill", "lineHeight", "wordWrap", "backgroundColor", "backgroundOpacity", "backgroundRadius"]);
|
|
7
18
|
let width = w;
|
|
8
19
|
let height = h;
|
|
9
20
|
let textX = 0;
|
|
@@ -30,12 +41,8 @@ function Text(props) {
|
|
|
30
41
|
? height
|
|
31
42
|
: 0;
|
|
32
43
|
}
|
|
33
|
-
const dataAttrs = Object.entries({
|
|
34
|
-
|
|
35
|
-
height,
|
|
36
|
-
...(lineHeight !== undefined && { 'line-height': lineHeight }),
|
|
37
|
-
...(wordWrap !== undefined && { 'data-word-wrap': wordWrap }),
|
|
38
|
-
}).reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {});
|
|
44
|
+
const dataAttrs = Object.entries(Object.assign(Object.assign({ width,
|
|
45
|
+
height }, (lineHeight !== undefined && { 'line-height': lineHeight })), (wordWrap !== undefined && { 'data-word-wrap': wordWrap }))).reduce((acc, [key, value]) => (Object.assign(Object.assign({}, acc), { [key]: value })), {});
|
|
39
46
|
const textAnchor = alignHorizontal === 'center'
|
|
40
47
|
? 'middle'
|
|
41
48
|
: alignHorizontal === 'right'
|
|
@@ -46,37 +53,13 @@ function Text(props) {
|
|
|
46
53
|
: alignVertical === 'bottom'
|
|
47
54
|
? 'baseline'
|
|
48
55
|
: 'hanging';
|
|
49
|
-
const textProps = {
|
|
50
|
-
'data-
|
|
51
|
-
width,
|
|
52
|
-
height,
|
|
53
|
-
x: textX,
|
|
54
|
-
y: textY,
|
|
55
|
-
'data-x': 0,
|
|
56
|
-
'data-y': 0,
|
|
57
|
-
fill,
|
|
56
|
+
const textProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ 'data-element-type': 'text', width,
|
|
57
|
+
height, x: textX, y: textY, 'data-x': 0, 'data-y': 0, fill,
|
|
58
58
|
fontSize,
|
|
59
59
|
textAnchor,
|
|
60
|
-
dominantBaseline,
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
children,
|
|
64
|
-
...dataAttrs,
|
|
65
|
-
...restProps,
|
|
66
|
-
...(fontFamily && { fontFamily }),
|
|
67
|
-
...(fontStyle && { fontStyle }),
|
|
68
|
-
...(fontWeight && { fontWeight }),
|
|
69
|
-
...(textDecoration && textDecoration !== 'none' && { textDecoration }),
|
|
70
|
-
...(letterSpacing && { letterSpacing }),
|
|
71
|
-
...(wordSpacing && { wordSpacing }),
|
|
72
|
-
...(opacity !== undefined && opacity !== 1 && { opacity }),
|
|
73
|
-
};
|
|
74
|
-
const containerProps = {
|
|
75
|
-
...(x !== 0 || y !== 0 ? { x, y, transform: `translate(${x}, ${y})` } : {}),
|
|
76
|
-
width,
|
|
77
|
-
height,
|
|
78
|
-
...(id && { id }),
|
|
79
|
-
};
|
|
60
|
+
dominantBaseline, 'data-horizontal-align': alignHorizontal.toUpperCase(), 'data-vertical-align': alignVertical.toUpperCase(), children }, dataAttrs), restProps), (fontFamily && { fontFamily })), (fontStyle && { fontStyle })), (fontWeight && { fontWeight })), (textDecoration && textDecoration !== 'none' && { textDecoration })), (letterSpacing && { letterSpacing })), (wordSpacing && { wordSpacing })), (opacity !== undefined && opacity !== 1 && { opacity }));
|
|
61
|
+
const containerProps = Object.assign(Object.assign(Object.assign({}, (x !== 0 || y !== 0 ? { x, y, transform: `translate(${x}, ${y})` } : {})), { width,
|
|
62
|
+
height }), (id && { id }));
|
|
80
63
|
const hasBackground = backgroundColor && backgroundColor !== 'none';
|
|
81
64
|
const rectProps = hasBackground
|
|
82
65
|
? {
|
|
@@ -93,12 +76,9 @@ function Text(props) {
|
|
|
93
76
|
: undefined;
|
|
94
77
|
return {
|
|
95
78
|
type: 'g',
|
|
96
|
-
props: {
|
|
97
|
-
...containerProps,
|
|
98
|
-
children: [
|
|
79
|
+
props: Object.assign(Object.assign({}, containerProps), { children: [
|
|
99
80
|
...(rectProps ? [{ type: 'rect', props: rectProps }] : []),
|
|
100
81
|
{ type: 'text', props: textProps },
|
|
101
|
-
],
|
|
102
|
-
},
|
|
82
|
+
] }),
|
|
103
83
|
};
|
|
104
84
|
}
|