@vvfx/svg2ir 0.0.1-beta.0 → 0.0.1-beta.11
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/README.md +62 -33
- package/dist/common/types.d.ts +6 -2
- package/dist/convert.d.ts +2 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1226 -37
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1226 -38
- package/dist/index.mjs.map +1 -1
- package/dist/node.js +1228 -39
- package/dist/node.js.map +1 -1
- package/dist/node.mjs +1228 -40
- package/dist/node.mjs.map +1 -1
- package/dist/parse-svg/build-element-tree-path.d.ts +2 -0
- package/dist/svg-rasterizer/prepare-snapshot.d.ts +9 -0
- package/dist/svg-rasterizer/rasterize-svg.d.ts +11 -0
- package/dist/svg2ir/assemble.d.ts +3 -1
- package/dist/svg2ir/convert.d.ts +3 -1
- package/dist/svg2ir/converter/layers/conversion-session.d.ts +2 -0
- package/dist/svg2ir/converter/text/font-metrics.d.ts +2 -0
- package/dist/svg2layers-adapter/assemble.d.ts +15 -2
- package/dist/svg2layers-adapter/baking/build-baked-layers.d.ts +13 -0
- package/dist/svg2layers-adapter/baking/normalize-layer-blending.d.ts +10 -0
- package/dist/svg2layers-adapter/baking/plan-graphic-baking.d.ts +18 -0
- package/dist/svg2layers-adapter/baking/resolve-baking-warnings.d.ts +4 -0
- package/dist/svg2layers-adapter/convert.d.ts +2 -2
- package/dist/svg2layers-adapter/converter/image/inspect-mask.d.ts +3 -0
- package/dist/svg2layers-adapter/converter/layers/build-layers.d.ts +1 -1
- package/dist/svg2layers-adapter/strip-layer-animation.d.ts +5 -0
- package/package.json +1 -1
package/dist/node.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Description: SVG to Animation IR and Galacean Effects conversion engine
|
|
4
4
|
* Author: Ant Group CO., Ltd.
|
|
5
5
|
* Contributors: 鳞息
|
|
6
|
-
* Version: v0.0.1-beta.
|
|
6
|
+
* Version: v0.0.1-beta.11
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
9
|
'use strict';
|
|
@@ -81,11 +81,10 @@ function readInlineStyleProperty(style, propertyName) {
|
|
|
81
81
|
|
|
82
82
|
var ParseableSVG = /*#__PURE__*/ function() {
|
|
83
83
|
function ParseableSVG(svgStr, _options) {
|
|
84
|
-
var
|
|
85
|
-
|
|
86
|
-
|
|
84
|
+
var _SVG;
|
|
85
|
+
// svg.js parses a fragment; remove only the prolog and let the DOM handle nested markup.
|
|
86
|
+
var content = svgStr.replace(/^\uFEFF/, '').replace(/^(?:\s|<\?xml\b[\s\S]*?\?>|<!DOCTYPE\b[^>]*>|<!--[\s\S]*?-->)+/i, '');
|
|
87
87
|
// svg.js SVG(string) 的 d.ts 标为 Element,但对完整 <svg> 文档运行时返回根 SVG 文档实例。
|
|
88
|
-
var content = typeof svgStr === 'string' ? (_ref = (_svgStr_match = svgStr.match(RegExp("<svg\\s+.*?>.*?<\\/svg>", "s"))) == null ? void 0 : _svgStr_match[0]) != null ? _ref : svgStr : svgStr;
|
|
89
88
|
// svg.js 对非 SVG 字符串(如 'not svg')解析返 null。兜底空 svg:让 svg2ir 上层
|
|
90
89
|
// hasSVGRootElement 检查(非 svg 抛 INVALID_SVG)生效,而非在构造期抛错。
|
|
91
90
|
this.svg = (_SVG = svg_js.SVG(content)) != null ? _SVG : svg_js.SVG('<svg xmlns="http://www.w3.org/2000/svg"/>');
|
|
@@ -227,10 +226,10 @@ var editableSVGModule = /*#__PURE__*/Object.freeze({
|
|
|
227
226
|
default: ParseableSVG
|
|
228
227
|
});
|
|
229
228
|
|
|
230
|
-
var window = svgdom.createSVGWindow();
|
|
229
|
+
var window$1 = svgdom.createSVGWindow();
|
|
231
230
|
// svgdom 的 window 是最小 DOM stub(非完整 Window),运行时被 svg.js registerWindow 接受;
|
|
232
231
|
// d.ts 标 Window 类型过严,svgdom 的 window 是最小 DOM stub,这里断言对齐运行时用法。
|
|
233
|
-
svg_js.registerWindow(window, window.document);
|
|
232
|
+
svg_js.registerWindow(window$1, window$1.document);
|
|
234
233
|
|
|
235
234
|
var editableSVGNodeModule = /*#__PURE__*/Object.freeze({
|
|
236
235
|
__proto__: null,
|
|
@@ -1727,7 +1726,7 @@ function parseHexColor(raw) {
|
|
|
1727
1726
|
return null;
|
|
1728
1727
|
}
|
|
1729
1728
|
var hex = match[1];
|
|
1730
|
-
var expanded = hex.length <= 4 ?
|
|
1729
|
+
var expanded = hex.length <= 4 ? Array.from(hex).map(function(char) {
|
|
1731
1730
|
return "" + char + char;
|
|
1732
1731
|
}).join('') : hex;
|
|
1733
1732
|
var r = parseInt(expanded.slice(0, 2), 16) / 255;
|
|
@@ -2828,7 +2827,24 @@ function parseSMILTag(tag, root, beginCache, comparisonDuration, valueParser, un
|
|
|
2828
2827
|
return maxEnd;
|
|
2829
2828
|
}
|
|
2830
2829
|
|
|
2831
|
-
/**
|
|
2830
|
+
/** Structural source identity, independent of optional or duplicate SVG IDs. */ function buildElementTreePath(element) {
|
|
2831
|
+
var indices = [];
|
|
2832
|
+
var current = element;
|
|
2833
|
+
while(isElementNode(current.parentNode)){
|
|
2834
|
+
var parent = current.parentNode;
|
|
2835
|
+
indices.unshift(Array.from(parent.children).indexOf(current));
|
|
2836
|
+
current = parent;
|
|
2837
|
+
}
|
|
2838
|
+
return indices.join('/');
|
|
2839
|
+
}
|
|
2840
|
+
function isElementNode(node) {
|
|
2841
|
+
return (node == null ? void 0 : node.nodeType) === 1;
|
|
2842
|
+
}
|
|
2843
|
+
|
|
2844
|
+
/** SVG 转换诊断码;用于报告烘焙、降级和不支持的特性。 */ var SVG2IR_WARNING_CODES = {
|
|
2845
|
+
/** 图形或图形组已栅格化,矢量编辑能力变化通过 warning 报告。 */ LAYERS_GRAPHIC_BAKED: 'svg2ge_layers_graphic_baked',
|
|
2846
|
+
LAYERS_BLEND_MODE_DOWNGRADED: 'svg2ge_layers_blend_mode_downgraded',
|
|
2847
|
+
LAYERS_ANIMATION_STRIPPED: 'svg2ge_layers_animation_stripped',
|
|
2832
2848
|
LAYERS_UNSUPPORTED_TYPE: 'svg2ge_layers_unsupported_type',
|
|
2833
2849
|
LAYERS_UNSUPPORTED_FEATURE: 'svg2ge_layers_unsupported_feature',
|
|
2834
2850
|
LAYERS_INVALID_DATA: 'svg2ge_layers_invalid_data',
|
|
@@ -6318,8 +6334,9 @@ function readVec3(channel) {
|
|
|
6318
6334
|
node
|
|
6319
6335
|
], Array.from(node.querySelectorAll('*')));
|
|
6320
6336
|
var hasUnsupportedRule = ruleNodes.some(function(candidate) {
|
|
6337
|
+
var _ref, _ref1;
|
|
6321
6338
|
var _candidate_getAttribute, _candidate_getAttribute1;
|
|
6322
|
-
return ((_candidate_getAttribute = candidate.getAttribute('clip-rule')) == null ? void 0 : _candidate_getAttribute.trim()) !== '' || ((_candidate_getAttribute1 = candidate.getAttribute('fill-rule')) == null ? void 0 : _candidate_getAttribute1.trim()) !== '';
|
|
6339
|
+
return ((_ref = (_candidate_getAttribute = candidate.getAttribute('clip-rule')) == null ? void 0 : _candidate_getAttribute.trim()) != null ? _ref : '') !== '' || ((_ref1 = (_candidate_getAttribute1 = candidate.getAttribute('fill-rule')) == null ? void 0 : _candidate_getAttribute1.trim()) != null ? _ref1 : '') !== '';
|
|
6323
6340
|
});
|
|
6324
6341
|
if (hasUnsupportedRule) {
|
|
6325
6342
|
warn(SVG2IR_WARNING_CODES.CLIP_RULE_DROPPED, "" + tag + " 内显式 clip-rule/fill-rule 未映射,IR 只保留 mask 几何,不保留该规则。");
|
|
@@ -7160,8 +7177,10 @@ function createSVGConversionSession(es, options) {
|
|
|
7160
7177
|
};
|
|
7161
7178
|
var appendLayer = function appendLayer(layer, element, applyElementClip) {
|
|
7162
7179
|
if (applyElementClip === void 0) applyElementClip = true;
|
|
7180
|
+
var _options_layerSourceCollector;
|
|
7163
7181
|
var clippedLayer = applyElementClip ? applyClipMask(es, element, layer, clipMasks) : layer;
|
|
7164
7182
|
layers.push(withGroupParent(clippedLayer, element));
|
|
7183
|
+
(_options_layerSourceCollector = options.layerSourceCollector) == null ? void 0 : _options_layerSourceCollector.set(layer.id, buildElementTreePath(element.node));
|
|
7165
7184
|
};
|
|
7166
7185
|
var appendAsset = function appendAsset(asset) {
|
|
7167
7186
|
if (registeredAssetIds.has(asset.id)) {
|
|
@@ -10569,7 +10588,7 @@ function mapFontWeight(raw, fontFamily) {
|
|
|
10569
10588
|
seen.set(Math.round(w * 100), ch);
|
|
10570
10589
|
}
|
|
10571
10590
|
}
|
|
10572
|
-
return
|
|
10591
|
+
return Array.from(seen.entries()).map(function(param) {
|
|
10573
10592
|
var k = param[0], ch = param[1];
|
|
10574
10593
|
return {
|
|
10575
10594
|
ch: ch,
|
|
@@ -10619,6 +10638,9 @@ function mapFontWeight(raw, fontFamily) {
|
|
|
10619
10638
|
// latin / digit / 标点:典型比例字体 sans-serif 大写字母约 0.65em,数字稍窄。
|
|
10620
10639
|
return /[0-9]/.test(ch) ? 0.55 : 0.62;
|
|
10621
10640
|
}
|
|
10641
|
+
/** 去除单个字体族名的 CSS 字符串引号。 */ function normalizeFontFamilyName(fontFamily) {
|
|
10642
|
+
return fontFamily.trim().replace(/^(['"])(.*)\1$/, '$2');
|
|
10643
|
+
}
|
|
10622
10644
|
/** 构造与 Effects Runtime getFontDesc 一致的 CSS font 简写字符串,用于 Canvas measureText。 */ function buildCanvasFontDesc(fontSize, fontFamily, fontWeight, fontStyle) {
|
|
10623
10645
|
var weightStr = String(fontWeight);
|
|
10624
10646
|
var genericFamilies = [
|
|
@@ -10627,7 +10649,8 @@ function mapFontWeight(raw, fontFamily) {
|
|
|
10627
10649
|
'monospace',
|
|
10628
10650
|
'courier'
|
|
10629
10651
|
];
|
|
10630
|
-
var
|
|
10652
|
+
var family = normalizeFontFamilyName(fontFamily);
|
|
10653
|
+
var familyName = genericFamilies.includes(family) ? family : '"' + family + '"';
|
|
10631
10654
|
var desc = fontSize + "px " + familyName;
|
|
10632
10655
|
if (weightStr !== 'normal' && weightStr !== '') {
|
|
10633
10656
|
desc = weightStr + " " + desc;
|
|
@@ -10638,13 +10661,13 @@ function mapFontWeight(raw, fontFamily) {
|
|
|
10638
10661
|
return desc;
|
|
10639
10662
|
}
|
|
10640
10663
|
/** 文本宽度估算。优先使用调用方提供的 Canvas measureText,否则使用字符级启发式系数。 */ function estimateTextWidth(content, fontSize, letterSpacing, measureText, fontFamily, fontWeight, fontStyle) {
|
|
10641
|
-
var
|
|
10664
|
+
var chars = Array.from(content);
|
|
10665
|
+
var len = chars.length;
|
|
10642
10666
|
if (measureText != null && fontFamily !== '') {
|
|
10643
10667
|
var fontDesc = buildCanvasFontDesc(fontSize, fontFamily, fontWeight, fontStyle);
|
|
10644
10668
|
var width = measureText(fontDesc, content).width;
|
|
10645
10669
|
return width + letterSpacing * Math.max(len - 1, 0);
|
|
10646
10670
|
}
|
|
10647
|
-
var chars = [].concat(content);
|
|
10648
10671
|
var width1 = chars.reduce(function(s, ch) {
|
|
10649
10672
|
return s + charWidthCoef(ch) * fontSize;
|
|
10650
10673
|
}, 0);
|
|
@@ -12241,7 +12264,16 @@ function createSVGElementConverterRegistry(session) {
|
|
|
12241
12264
|
}
|
|
12242
12265
|
|
|
12243
12266
|
function buildSVGLayers(es, options) {
|
|
12244
|
-
var
|
|
12267
|
+
var currentPath;
|
|
12268
|
+
var warningSourceCollector = options.warningSourceCollector;
|
|
12269
|
+
var session = createSVGConversionSession(es, warningSourceCollector == null ? options : _extends({}, options, {
|
|
12270
|
+
emit: function emit(warning) {
|
|
12271
|
+
if (currentPath != null) {
|
|
12272
|
+
warningSourceCollector.set(warning, currentPath);
|
|
12273
|
+
}
|
|
12274
|
+
options.emit(warning);
|
|
12275
|
+
}
|
|
12276
|
+
}));
|
|
12245
12277
|
var converters = createSVGElementConverterRegistry(session);
|
|
12246
12278
|
for(var _iterator = _create_for_of_iterator_helper_loose(session.all), _step; !(_step = _iterator()).done;){
|
|
12247
12279
|
var element = _step.value;
|
|
@@ -12249,6 +12281,9 @@ function buildSVGLayers(es, options) {
|
|
|
12249
12281
|
var _element_node_tagName, _element_node;
|
|
12250
12282
|
var tag = (_ref = (_element_node = element.node) == null ? void 0 : (_element_node_tagName = _element_node.tagName) == null ? void 0 : _element_node_tagName.toLowerCase()) != null ? _ref : '';
|
|
12251
12283
|
var selector = describeElement(element);
|
|
12284
|
+
if (warningSourceCollector != null) {
|
|
12285
|
+
currentPath = buildElementTreePath(element.node);
|
|
12286
|
+
}
|
|
12252
12287
|
if (isInInactiveSwitchBranch(element)) {
|
|
12253
12288
|
continue;
|
|
12254
12289
|
}
|
|
@@ -12314,6 +12349,8 @@ function parseSVGToIRScene(svgString, options) {
|
|
|
12314
12349
|
value: scannedSmilDuration
|
|
12315
12350
|
};
|
|
12316
12351
|
var layerBuildOptions = {
|
|
12352
|
+
layerSourceCollector: options == null ? void 0 : options.layerSourceCollector,
|
|
12353
|
+
warningSourceCollector: options == null ? void 0 : options.warningSourceCollector,
|
|
12317
12354
|
frameRate: frameRate,
|
|
12318
12355
|
durationSeconds: effectiveDuration,
|
|
12319
12356
|
emit: emit,
|
|
@@ -12493,6 +12530,8 @@ function parseSVGToIRWithPreservedData(source, options, collectors) {
|
|
|
12493
12530
|
var svgString = readSVGString(source);
|
|
12494
12531
|
var irScene = parseSVGToIRScene(svgString, _extends({}, options, {
|
|
12495
12532
|
onWarning: emitWarning,
|
|
12533
|
+
layerSourceCollector: collectors == null ? void 0 : collectors.layerSourceCollector,
|
|
12534
|
+
warningSourceCollector: collectors == null ? void 0 : collectors.warningSourceCollector,
|
|
12496
12535
|
textDataCollector: collectors == null ? void 0 : collectors.textDataByLayerId,
|
|
12497
12536
|
paintAnimationsCollector: collectors == null ? void 0 : collectors.paintAnimationsByLayerId,
|
|
12498
12537
|
shapeAnimationCollector: collectors == null ? void 0 : collectors.shapeAnimationsByLayerId
|
|
@@ -12668,7 +12707,8 @@ function collectLayerWarning(warnings, options, code, message, selector) {
|
|
|
12668
12707
|
});
|
|
12669
12708
|
warnings.push(warning);
|
|
12670
12709
|
options.onWarning == null ? void 0 : options.onWarning.call(options, warning);
|
|
12671
|
-
|
|
12710
|
+
var advisory = code === SVG2IR_WARNING_CODES.LAYERS_TEXT_BOUNDS_ESTIMATED || code === SVG2IR_WARNING_CODES.LAYERS_GRAPHIC_BAKED;
|
|
12711
|
+
if (options.strict === true && !advisory) {
|
|
12672
12712
|
throw new SVGConverterError(SVG_CONVERTER_ERROR_CODES.LAYERS_CONVERSION_FAILED, warning.message, {
|
|
12673
12713
|
stage: 'layers',
|
|
12674
12714
|
sourceId: selector,
|
|
@@ -12993,9 +13033,12 @@ function buildTextRunLayout(runs, family, spacing, content, size, conversionOpti
|
|
|
12993
13033
|
// 分段文字使用统一参考字号度量字宽和字体边界,再按片段字号缩放。
|
|
12994
13034
|
var measurementSize = segmented ? 10 : run.fontSize;
|
|
12995
13035
|
var scale = run.fontSize / measurementSize;
|
|
12996
|
-
var
|
|
13036
|
+
var weight = run.bold ? 'bold' : 'normal';
|
|
13037
|
+
var style = run.italic ? 'italic' : 'normal';
|
|
13038
|
+
var font = buildCanvasFontDesc(measurementSize, family, weight, style);
|
|
12997
13039
|
var metrics = conversionOptions.measureText == null ? void 0 : conversionOptions.measureText.call(conversionOptions, font, segmented ? 'x' : run.text);
|
|
12998
|
-
var
|
|
13040
|
+
var characters = Array.from(run.text);
|
|
13041
|
+
var chunks = segmented ? characters : [
|
|
12999
13042
|
run.text
|
|
13000
13043
|
];
|
|
13001
13044
|
var advance = 0;
|
|
@@ -13004,12 +13047,13 @@ function buildTextRunLayout(runs, family, spacing, content, size, conversionOpti
|
|
|
13004
13047
|
var width = segmented ? conversionOptions.measureText == null ? void 0 : conversionOptions.measureText.call(conversionOptions, font, chunk).width : metrics == null ? void 0 : metrics.width;
|
|
13005
13048
|
var valid = width != null && Number.isFinite(width) && width >= 0;
|
|
13006
13049
|
estimated || (estimated = !valid);
|
|
13007
|
-
advance += valid ? width :
|
|
13050
|
+
advance += valid ? width : estimateTextWidth(chunk, measurementSize, 0, undefined, family, weight, style);
|
|
13008
13051
|
}
|
|
13009
|
-
var characterCount =
|
|
13052
|
+
var characterCount = characters.length;
|
|
13010
13053
|
var width1 = advance * scale + Math.max(0, characterCount - 1) * spacing;
|
|
13011
|
-
var
|
|
13012
|
-
var
|
|
13054
|
+
var fallback = resolveFontMetrics(undefined, family, weight, style, run.fontSize);
|
|
13055
|
+
var ascent = (metrics == null ? void 0 : metrics.fontBoundingBoxAscent) == null ? fallback.asc : metrics.fontBoundingBoxAscent * scale;
|
|
13056
|
+
var descent = (metrics == null ? void 0 : metrics.fontBoundingBoxDescent) == null ? fallback.desc : metrics.fontBoundingBoxDescent * scale;
|
|
13013
13057
|
estimated || (estimated = (metrics == null ? void 0 : metrics.fontBoundingBoxAscent) == null || metrics.fontBoundingBoxDescent == null);
|
|
13014
13058
|
if (!Number.isFinite(width1) || width1 < 0 || !Number.isFinite(ascent) || !Number.isFinite(descent)) {
|
|
13015
13059
|
throwInvalidLayerData('Text measurement returned invalid metrics.');
|
|
@@ -13156,6 +13200,7 @@ function convertIRTextLayer(layer, state, session, id) {
|
|
|
13156
13200
|
content: part.run.text,
|
|
13157
13201
|
bbox: mapPointsToBBox(polygon),
|
|
13158
13202
|
polygon: polygon,
|
|
13203
|
+
// Keep the authored font-family string, quotes included; consumers resolve families themselves.
|
|
13159
13204
|
font_family: font.family,
|
|
13160
13205
|
font_size: roundPixel(part.run.fontSize * scaleY),
|
|
13161
13206
|
color: part.run.color,
|
|
@@ -13200,6 +13245,41 @@ function createLayerConverterRegistry(session) {
|
|
|
13200
13245
|
]);
|
|
13201
13246
|
}
|
|
13202
13247
|
|
|
13248
|
+
/** 完全覆盖图片的直边矩形 mask 不改变可见内容。 */ function maskCoversImage(mask, bounds) {
|
|
13249
|
+
var _Math, _Math1, _Math2, _Math3;
|
|
13250
|
+
var path = mask.path;
|
|
13251
|
+
var epsilon = 1e-6;
|
|
13252
|
+
if (mask.mode === 'subtract' || mask.inverted === true || !path.closed || path.points.length !== 4) {
|
|
13253
|
+
return false;
|
|
13254
|
+
}
|
|
13255
|
+
if (path.inTangents.length !== 4 || path.outTangents.length !== 4 || [].concat(path.inTangents, path.outTangents).some(function(tangent) {
|
|
13256
|
+
return tangent.x !== 0 || tangent.y !== 0;
|
|
13257
|
+
})) {
|
|
13258
|
+
return false;
|
|
13259
|
+
}
|
|
13260
|
+
var straightEdges = path.points.every(function(point, index) {
|
|
13261
|
+
var next = path.points[(index + 1) % 4];
|
|
13262
|
+
var opposite = path.points[(index + 2) % 4];
|
|
13263
|
+
var dx = Math.abs(next.x - point.x);
|
|
13264
|
+
var dy = Math.abs(next.y - point.y);
|
|
13265
|
+
return Number.isFinite(point.x) && Number.isFinite(point.y) && Math.abs(opposite.x - point.x) > epsilon && Math.abs(opposite.y - point.y) > epsilon && (dx <= epsilon && dy > epsilon || dy <= epsilon && dx > epsilon);
|
|
13266
|
+
});
|
|
13267
|
+
if (!straightEdges) {
|
|
13268
|
+
return false;
|
|
13269
|
+
}
|
|
13270
|
+
var xs = path.points.map(function(point) {
|
|
13271
|
+
return point.x;
|
|
13272
|
+
});
|
|
13273
|
+
var ys = path.points.map(function(point) {
|
|
13274
|
+
return point.y;
|
|
13275
|
+
});
|
|
13276
|
+
var left = (_Math = Math).min.apply(_Math, [].concat(xs));
|
|
13277
|
+
var right = (_Math1 = Math).max.apply(_Math1, [].concat(xs));
|
|
13278
|
+
var top = (_Math2 = Math).min.apply(_Math2, [].concat(ys));
|
|
13279
|
+
var bottom = (_Math3 = Math).max.apply(_Math3, [].concat(ys));
|
|
13280
|
+
return bounds.width > 0 && bounds.height > 0 && left <= bounds.x + epsilon && right >= bounds.x + bounds.width - epsilon && top <= bounds.y + epsilon && bottom >= bounds.y + bounds.height - epsilon;
|
|
13281
|
+
}
|
|
13282
|
+
|
|
13203
13283
|
function resolveIRVisualState(layer, session) {
|
|
13204
13284
|
if (!layer.visible) {
|
|
13205
13285
|
return undefined;
|
|
@@ -13208,19 +13288,20 @@ function resolveIRVisualState(layer, session) {
|
|
|
13208
13288
|
if (!state.visible || state.opacity <= 0) {
|
|
13209
13289
|
return undefined;
|
|
13210
13290
|
}
|
|
13211
|
-
|
|
13291
|
+
var unsupportedMask = layer.mask != null && (layer.type !== 'image' || !maskCoversImage(layer.mask, layer.localBounds));
|
|
13292
|
+
if (unsupportedMask || layer.matte != null) {
|
|
13212
13293
|
throwUnsupportedLayerFeature('Mask or clipping is not supported by the flat layer protocol.');
|
|
13213
13294
|
}
|
|
13214
13295
|
if (Math.abs(state.opacity - 1) > 1e-6) {
|
|
13215
13296
|
throwUnsupportedLayerFeature('Layer opacity cannot be expressed by the target protocol.');
|
|
13216
13297
|
}
|
|
13217
13298
|
if (layer.blendMode != null && layer.blendMode !== animationIr.IRBlendMode.Normal) {
|
|
13218
|
-
|
|
13299
|
+
collectLayerWarning(session.warnings, session.options, SVG2IR_WARNING_CODES.LAYERS_BLEND_MODE_DOWNGRADED, 'Blend mode "' + String(layer.blendMode) + '" was downgraded to "normal"; the layer is retained.', layer.id);
|
|
13219
13300
|
}
|
|
13220
13301
|
return state;
|
|
13221
13302
|
}
|
|
13222
13303
|
|
|
13223
|
-
function buildIRStaticLayers(session) {
|
|
13304
|
+
function buildIRStaticLayers(session, sourceIds) {
|
|
13224
13305
|
var composition = session.composition, maskSourceIds = session.maskSourceIds, options = session.options, warnings = session.warnings;
|
|
13225
13306
|
var registry = createLayerConverterRegistry(session);
|
|
13226
13307
|
var result = [];
|
|
@@ -13245,6 +13326,7 @@ function buildIRStaticLayers(session) {
|
|
|
13245
13326
|
var converted = converter.convert(layer, state, converter.layerType + "_" + String(index).padStart(4, '0'));
|
|
13246
13327
|
if (converted != null) {
|
|
13247
13328
|
result.push(converted);
|
|
13329
|
+
sourceIds == null ? void 0 : sourceIds.set(converted, layer.id);
|
|
13248
13330
|
layerCounts.set(converter.layerType, index);
|
|
13249
13331
|
}
|
|
13250
13332
|
} catch (error) {
|
|
@@ -13257,9 +13339,9 @@ function buildIRStaticLayers(session) {
|
|
|
13257
13339
|
return result;
|
|
13258
13340
|
}
|
|
13259
13341
|
|
|
13260
|
-
function assembleSVGStaticLayers(scene, options, warnings, preservedData) {
|
|
13342
|
+
function assembleSVGStaticLayers(scene, options, warnings, preservedData, sourceIds) {
|
|
13261
13343
|
var session = buildLayerConversionSession(scene, options, warnings, preservedData);
|
|
13262
|
-
var data = buildIRStaticLayers(session);
|
|
13344
|
+
var data = buildIRStaticLayers(session, sourceIds);
|
|
13263
13345
|
var composition = session.composition;
|
|
13264
13346
|
if (composition.backgroundColor != null) {
|
|
13265
13347
|
collectLayerWarning(warnings, options, SVG2IR_WARNING_CODES.LAYERS_UNSUPPORTED_TYPE, 'Composition background color is not an image or text layer.');
|
|
@@ -13272,6 +13354,1034 @@ function assembleSVGStaticLayers(scene, options, warnings, preservedData) {
|
|
|
13272
13354
|
data: data
|
|
13273
13355
|
};
|
|
13274
13356
|
}
|
|
13357
|
+
/** Replace baked sources, combine native and raster layers in painter order, then report final diagnostics. */ function assembleSVGLayers(input) {
|
|
13358
|
+
var _warnings, _ordered;
|
|
13359
|
+
var scene = input.scene, options = input.options, preservedData = input.preservedData, layerSources = input.layerSources, warningSources = input.warningSources, baking = input.baking;
|
|
13360
|
+
var warnings = input.warnings.filter(function(warning) {
|
|
13361
|
+
return !baking.resolvesWarning(warning, warningSources.get(warning));
|
|
13362
|
+
});
|
|
13363
|
+
var composition = adapter.getIRSceneEntryComposition(scene);
|
|
13364
|
+
var nativeScene = _extends({}, scene, {
|
|
13365
|
+
compositions: scene.compositions.map(function(candidate) {
|
|
13366
|
+
return candidate === composition ? _extends({}, candidate, {
|
|
13367
|
+
layers: candidate.layers.filter(function(layer) {
|
|
13368
|
+
return !baking.replacesSource(layerSources.get(layer.id));
|
|
13369
|
+
})
|
|
13370
|
+
}) : candidate;
|
|
13371
|
+
})
|
|
13372
|
+
});
|
|
13373
|
+
var sourceIds = new Map();
|
|
13374
|
+
(_warnings = warnings).push.apply(_warnings, [].concat(baking.warnings));
|
|
13375
|
+
var native = assembleSVGStaticLayers(nativeScene, _extends({}, options, {
|
|
13376
|
+
strict: false,
|
|
13377
|
+
onWarning: undefined
|
|
13378
|
+
}), warnings, preservedData, sourceIds);
|
|
13379
|
+
var ordered = native.data.map(function(layer) {
|
|
13380
|
+
var _layerSources_get, _sourceIds_get;
|
|
13381
|
+
return {
|
|
13382
|
+
path: (_layerSources_get = layerSources.get((_sourceIds_get = sourceIds.get(layer)) != null ? _sourceIds_get : '')) != null ? _layerSources_get : '',
|
|
13383
|
+
layer: layer
|
|
13384
|
+
};
|
|
13385
|
+
});
|
|
13386
|
+
(_ordered = ordered).push.apply(_ordered, [].concat(baking.layers));
|
|
13387
|
+
ordered.sort(function(left, right) {
|
|
13388
|
+
return comparePaths(left.path, right.path);
|
|
13389
|
+
});
|
|
13390
|
+
var counts = {
|
|
13391
|
+
image: 0,
|
|
13392
|
+
text: 0
|
|
13393
|
+
};
|
|
13394
|
+
var data = ordered.map(function(param) {
|
|
13395
|
+
var layer = param.layer;
|
|
13396
|
+
return _extends({}, layer, {
|
|
13397
|
+
id: layer.type + "_" + String(++counts[layer.type]).padStart(4, '0')
|
|
13398
|
+
});
|
|
13399
|
+
});
|
|
13400
|
+
for(var _iterator = _create_for_of_iterator_helper_loose(warnings), _step; !(_step = _iterator()).done;){
|
|
13401
|
+
var warning = _step.value;
|
|
13402
|
+
options.onWarning == null ? void 0 : options.onWarning.call(options, warning);
|
|
13403
|
+
if (options.strict === true) {
|
|
13404
|
+
var message = warning.message.replace(/^\[svg2ge:layers\] /, '');
|
|
13405
|
+
collectLayerWarning([], _extends({}, options, {
|
|
13406
|
+
onWarning: undefined
|
|
13407
|
+
}), warning.code, message, warning.elementSelector);
|
|
13408
|
+
}
|
|
13409
|
+
}
|
|
13410
|
+
return {
|
|
13411
|
+
size: native.size,
|
|
13412
|
+
data: data,
|
|
13413
|
+
warnings: warnings
|
|
13414
|
+
};
|
|
13415
|
+
}
|
|
13416
|
+
function comparePaths(left, right) {
|
|
13417
|
+
var a = left.split('/').map(Number);
|
|
13418
|
+
var b = right.split('/').map(Number);
|
|
13419
|
+
for(var index = 0; index < Math.min(a.length, b.length); index++){
|
|
13420
|
+
if (a[index] !== b[index]) {
|
|
13421
|
+
return a[index] - b[index];
|
|
13422
|
+
}
|
|
13423
|
+
}
|
|
13424
|
+
return a.length - b.length;
|
|
13425
|
+
}
|
|
13426
|
+
|
|
13427
|
+
var animatedElements = new Set([
|
|
13428
|
+
'animate',
|
|
13429
|
+
'animatetransform',
|
|
13430
|
+
'animatemotion',
|
|
13431
|
+
'set'
|
|
13432
|
+
]);
|
|
13433
|
+
var declarations$1 = new Set([
|
|
13434
|
+
'defs',
|
|
13435
|
+
'style',
|
|
13436
|
+
'title',
|
|
13437
|
+
'desc',
|
|
13438
|
+
'metadata',
|
|
13439
|
+
'symbol',
|
|
13440
|
+
'clippath',
|
|
13441
|
+
'mask',
|
|
13442
|
+
'filter',
|
|
13443
|
+
'lineargradient',
|
|
13444
|
+
'radialgradient',
|
|
13445
|
+
'pattern',
|
|
13446
|
+
'marker'
|
|
13447
|
+
]);
|
|
13448
|
+
/** Preserve selector context until styles are frozen, then isolate the requested paint subtree. */ function prepareSVGSnapshot(source, path, size, inspect) {
|
|
13449
|
+
var parsed = new DOMParser().parseFromString(source, 'image/svg+xml');
|
|
13450
|
+
if (parsed.querySelector('parsererror') != null) {
|
|
13451
|
+
throw new Error('Invalid SVG document.');
|
|
13452
|
+
}
|
|
13453
|
+
var root = parsed.documentElement;
|
|
13454
|
+
var elements = [].concat([
|
|
13455
|
+
root
|
|
13456
|
+
], Array.from(root.querySelectorAll('*')));
|
|
13457
|
+
var selected = elements.find(function(element) {
|
|
13458
|
+
return buildElementTreePath(element) === path;
|
|
13459
|
+
});
|
|
13460
|
+
if (selected == null) {
|
|
13461
|
+
throw new Error('The graphic source element could not be located.');
|
|
13462
|
+
}
|
|
13463
|
+
if (root.querySelector('script, foreignObject') != null) {
|
|
13464
|
+
throw new Error('Scripts and foreignObject are outside static graphic baking support.');
|
|
13465
|
+
}
|
|
13466
|
+
if (Array.from(root.querySelectorAll('style')).some(function(element) {
|
|
13467
|
+
var _element_textContent;
|
|
13468
|
+
return /@import|@font-face/i.test((_element_textContent = element.textContent) != null ? _element_textContent : '');
|
|
13469
|
+
})) {
|
|
13470
|
+
throw new Error('External stylesheets and fonts require explicit resource preparation.');
|
|
13471
|
+
}
|
|
13472
|
+
for(var _iterator = _create_for_of_iterator_helper_loose(elements), _step; !(_step = _iterator()).done;){
|
|
13473
|
+
var element = _step.value;
|
|
13474
|
+
for(var _iterator1 = _create_for_of_iterator_helper_loose(Array.from(element.attributes)), _step1; !(_step1 = _iterator1()).done;){
|
|
13475
|
+
var attribute = _step1.value;
|
|
13476
|
+
if (/^on/i.test(attribute.name)) {
|
|
13477
|
+
element.removeAttributeNode(attribute);
|
|
13478
|
+
}
|
|
13479
|
+
}
|
|
13480
|
+
}
|
|
13481
|
+
var frame = document.createElement('iframe');
|
|
13482
|
+
frame.setAttribute('sandbox', 'allow-same-origin');
|
|
13483
|
+
frame.style.cssText = "position:fixed;left:-100000px;top:0;width:" + size[0] + "px;height:" + size[1] + "px;border:0;";
|
|
13484
|
+
document.body.appendChild(frame);
|
|
13485
|
+
try {
|
|
13486
|
+
var _loop = function() {
|
|
13487
|
+
var element = _step3.value;
|
|
13488
|
+
var _element_getAttribute;
|
|
13489
|
+
var computed = frameWindow.getComputedStyle(element);
|
|
13490
|
+
var inside = target.contains(element);
|
|
13491
|
+
var ancestor = element !== target && element.contains(target);
|
|
13492
|
+
if ((inside || ancestor) && (computed.animationName !== 'none' || hasAnimationChildren(element))) {
|
|
13493
|
+
throw new Error('Animated graphics require an explicit sampling policy.');
|
|
13494
|
+
}
|
|
13495
|
+
// Freezing inherited defaults on a definition changes <use> instance inheritance.
|
|
13496
|
+
// Freeze only authored declarations, after matching selectors in the intact source tree.
|
|
13497
|
+
var authored = frameDocument.createElement('div').style;
|
|
13498
|
+
authored.cssText = (_element_getAttribute = element.getAttribute('style')) != null ? _element_getAttribute : '';
|
|
13499
|
+
var names = new Set(Array.from(authored));
|
|
13500
|
+
for(var _iterator = _create_for_of_iterator_helper_loose(styleRules), _step; !(_step = _iterator()).done;){
|
|
13501
|
+
var rule = _step.value;
|
|
13502
|
+
if (element.matches(rule.selectorText)) {
|
|
13503
|
+
for(var _iterator1 = _create_for_of_iterator_helper_loose(Array.from(rule.style)), _step1; !(_step1 = _iterator1()).done;){
|
|
13504
|
+
var name = _step1.value;
|
|
13505
|
+
names.add(name);
|
|
13506
|
+
}
|
|
13507
|
+
}
|
|
13508
|
+
}
|
|
13509
|
+
var properties = Array.from(names, function(name) {
|
|
13510
|
+
var value = computed.getPropertyValue(name);
|
|
13511
|
+
value = value.replace(/url\(["']?([^)'"\s]+)["']?\)/g, function(_match, url) {
|
|
13512
|
+
return 'url("' + normalizeReference(url) + '")';
|
|
13513
|
+
});
|
|
13514
|
+
return name + ":" + value + " !important;";
|
|
13515
|
+
});
|
|
13516
|
+
var isTemplate = templateRoots.some(function(template) {
|
|
13517
|
+
return template.contains(element);
|
|
13518
|
+
});
|
|
13519
|
+
frozenStyles.push(isTemplate ? null : properties.join(''));
|
|
13520
|
+
};
|
|
13521
|
+
var frameDocument = frame.contentDocument;
|
|
13522
|
+
var frameWindow = frame.contentWindow;
|
|
13523
|
+
if (frameDocument == null || frameWindow == null) {
|
|
13524
|
+
throw new Error('Unable to create isolated SVG context.');
|
|
13525
|
+
}
|
|
13526
|
+
frameDocument.body.style.cssText = 'margin:0;';
|
|
13527
|
+
var mounted = frameDocument.importNode(root, true);
|
|
13528
|
+
mounted.setAttribute('width', String(size[0]));
|
|
13529
|
+
mounted.setAttribute('height', String(size[1]));
|
|
13530
|
+
frameDocument.body.appendChild(mounted);
|
|
13531
|
+
var mountedElements = [].concat([
|
|
13532
|
+
mounted
|
|
13533
|
+
], Array.from(mounted.querySelectorAll('*')));
|
|
13534
|
+
var selectedIndex = elements.indexOf(selected);
|
|
13535
|
+
var target = mountedElements[selectedIndex];
|
|
13536
|
+
var normalizeReference = function normalizeReference(url) {
|
|
13537
|
+
if (url.startsWith('#')) {
|
|
13538
|
+
return url;
|
|
13539
|
+
}
|
|
13540
|
+
var hash = url.indexOf('#');
|
|
13541
|
+
if (hash >= 0 && url.slice(0, hash) === frameDocument.baseURI.split('#')[0]) {
|
|
13542
|
+
return url.slice(hash);
|
|
13543
|
+
}
|
|
13544
|
+
throw new Error('External paint resources require explicit resource preparation.');
|
|
13545
|
+
};
|
|
13546
|
+
var frozenStyles = [];
|
|
13547
|
+
var templateRoots = Array.from(mounted.querySelectorAll('use')).flatMap(function(element) {
|
|
13548
|
+
var _ref, _element_getAttribute;
|
|
13549
|
+
var href = (_ref = (_element_getAttribute = element.getAttribute('href')) != null ? _element_getAttribute : element.getAttribute('xlink:href')) != null ? _ref : '';
|
|
13550
|
+
var template = href.startsWith('#') ? mountedElements.find(function(candidate) {
|
|
13551
|
+
return candidate.id === href.slice(1);
|
|
13552
|
+
}) : null;
|
|
13553
|
+
return template == null ? [] : [
|
|
13554
|
+
template
|
|
13555
|
+
];
|
|
13556
|
+
});
|
|
13557
|
+
var styleRules = [];
|
|
13558
|
+
var collectRules = function collectRules1(rules) {
|
|
13559
|
+
for(var _iterator = _create_for_of_iterator_helper_loose(Array.from(rules)), _step; !(_step = _iterator()).done;){
|
|
13560
|
+
var rule = _step.value;
|
|
13561
|
+
if (isStyleRule$2(rule)) {
|
|
13562
|
+
styleRules.push(rule);
|
|
13563
|
+
} else if (hasNestedRules$1(rule)) {
|
|
13564
|
+
if (isMediaRule(rule) && !frameWindow.matchMedia(rule.conditionText).matches) {
|
|
13565
|
+
continue;
|
|
13566
|
+
}
|
|
13567
|
+
collectRules(rule.cssRules);
|
|
13568
|
+
}
|
|
13569
|
+
}
|
|
13570
|
+
};
|
|
13571
|
+
for(var _iterator2 = _create_for_of_iterator_helper_loose(Array.from(frameDocument.styleSheets)), _step2; !(_step2 = _iterator2()).done;){
|
|
13572
|
+
var sheet = _step2.value;
|
|
13573
|
+
collectRules(sheet.cssRules);
|
|
13574
|
+
}
|
|
13575
|
+
for(var _iterator3 = _create_for_of_iterator_helper_loose(mountedElements), _step3; !(_step3 = _iterator3()).done;)_loop();
|
|
13576
|
+
for(var index = 0; index < mountedElements.length; index++){
|
|
13577
|
+
var style = frozenStyles[index];
|
|
13578
|
+
if (style != null) {
|
|
13579
|
+
mountedElements[index].setAttribute('style', style);
|
|
13580
|
+
}
|
|
13581
|
+
}
|
|
13582
|
+
var byId = new Map(mountedElements.filter(function(element) {
|
|
13583
|
+
return element.id !== '';
|
|
13584
|
+
}).map(function(element) {
|
|
13585
|
+
return [
|
|
13586
|
+
element.id,
|
|
13587
|
+
element
|
|
13588
|
+
];
|
|
13589
|
+
}));
|
|
13590
|
+
var seen = new Set();
|
|
13591
|
+
var checkDependencies = function checkDependencies1(element) {
|
|
13592
|
+
if (seen.has(element)) {
|
|
13593
|
+
return;
|
|
13594
|
+
}
|
|
13595
|
+
seen.add(element);
|
|
13596
|
+
for(var _iterator = _create_for_of_iterator_helper_loose(Array.from(element.attributes)), _step; !(_step = _iterator()).done;){
|
|
13597
|
+
var attribute = _step.value;
|
|
13598
|
+
if (attribute.localName === 'href' && element.tagName.toLowerCase() === 'a') {
|
|
13599
|
+
continue;
|
|
13600
|
+
}
|
|
13601
|
+
if (attribute.localName === 'href' && !attribute.value.startsWith('#') && !([
|
|
13602
|
+
'image',
|
|
13603
|
+
'feimage'
|
|
13604
|
+
].includes(element.tagName.toLowerCase()) && /^data:image\//i.test(attribute.value))) {
|
|
13605
|
+
throw new Error('External SVG references require explicit resource preparation.');
|
|
13606
|
+
}
|
|
13607
|
+
var normalized = attribute.value.replace(/url\(\s*["']?([^)'"\s]+)["']?\s*\)/g, function(_match, url) {
|
|
13608
|
+
return 'url("' + normalizeReference(url) + '")';
|
|
13609
|
+
});
|
|
13610
|
+
var ids = Array.from(normalized.matchAll(/url\(["']?#([^)'"\s]+)["']?\)/g), function(match) {
|
|
13611
|
+
return match[1];
|
|
13612
|
+
});
|
|
13613
|
+
if (normalized !== attribute.value) {
|
|
13614
|
+
element.setAttribute(attribute.name, normalized);
|
|
13615
|
+
}
|
|
13616
|
+
if (attribute.localName === 'href' && attribute.value.startsWith('#')) {
|
|
13617
|
+
ids.push(attribute.value.slice(1));
|
|
13618
|
+
}
|
|
13619
|
+
for(var _iterator1 = _create_for_of_iterator_helper_loose(ids), _step1; !(_step1 = _iterator1()).done;){
|
|
13620
|
+
var id = _step1.value;
|
|
13621
|
+
var dependency = byId.get(id);
|
|
13622
|
+
if (dependency == null) {
|
|
13623
|
+
throw new Error("Missing SVG reference: #" + id + ".");
|
|
13624
|
+
}
|
|
13625
|
+
checkDependencies(dependency);
|
|
13626
|
+
}
|
|
13627
|
+
}
|
|
13628
|
+
for(var _iterator2 = _create_for_of_iterator_helper_loose(Array.from(element.children)), _step2; !(_step2 = _iterator2()).done;){
|
|
13629
|
+
var child = _step2.value;
|
|
13630
|
+
if (!declarations$1.has(child.tagName.toLowerCase())) {
|
|
13631
|
+
checkDependencies(child);
|
|
13632
|
+
}
|
|
13633
|
+
}
|
|
13634
|
+
};
|
|
13635
|
+
checkDependencies(target);
|
|
13636
|
+
for(var _iterator4 = _create_for_of_iterator_helper_loose(seen), _step4; !(_step4 = _iterator4()).done;){
|
|
13637
|
+
var dependency = _step4.value;
|
|
13638
|
+
if (frameWindow.getComputedStyle(dependency).animationName !== 'none' || hasAnimationChildren(dependency)) {
|
|
13639
|
+
throw new Error('Animated graphics require an explicit sampling policy.');
|
|
13640
|
+
}
|
|
13641
|
+
}
|
|
13642
|
+
inspect == null ? void 0 : inspect({
|
|
13643
|
+
root: mounted,
|
|
13644
|
+
target: target,
|
|
13645
|
+
elements: mountedElements,
|
|
13646
|
+
dependencies: seen,
|
|
13647
|
+
readStyle: function readStyle(element) {
|
|
13648
|
+
return frameWindow.getComputedStyle(element);
|
|
13649
|
+
}
|
|
13650
|
+
});
|
|
13651
|
+
var isolate = function isolate1(element) {
|
|
13652
|
+
for(var _iterator = _create_for_of_iterator_helper_loose(Array.from(element.children)), _step; !(_step = _iterator()).done;){
|
|
13653
|
+
var child = _step.value;
|
|
13654
|
+
var tag = child.tagName.toLowerCase();
|
|
13655
|
+
if (declarations$1.has(tag) || child === target || target.contains(child)) {
|
|
13656
|
+
continue;
|
|
13657
|
+
}
|
|
13658
|
+
if (child.contains(target)) {
|
|
13659
|
+
isolate(child);
|
|
13660
|
+
} else {
|
|
13661
|
+
var definitions = frameDocument.createElementNS('http://www.w3.org/2000/svg', 'defs');
|
|
13662
|
+
child.replaceWith(definitions);
|
|
13663
|
+
definitions.appendChild(child);
|
|
13664
|
+
}
|
|
13665
|
+
}
|
|
13666
|
+
};
|
|
13667
|
+
if (target !== mounted) {
|
|
13668
|
+
isolate(mounted);
|
|
13669
|
+
}
|
|
13670
|
+
return new XMLSerializer().serializeToString(mounted);
|
|
13671
|
+
} finally{
|
|
13672
|
+
frame.remove();
|
|
13673
|
+
}
|
|
13674
|
+
}
|
|
13675
|
+
/** Only animations attached to this element reject its own bake scope, not unrelated subtrees. */ function hasAnimationChildren(element) {
|
|
13676
|
+
return Array.from(element.children).some(function(child) {
|
|
13677
|
+
return animatedElements.has(child.tagName.toLowerCase());
|
|
13678
|
+
});
|
|
13679
|
+
}
|
|
13680
|
+
function isStyleRule$2(rule) {
|
|
13681
|
+
return rule.type === 1;
|
|
13682
|
+
}
|
|
13683
|
+
function hasNestedRules$1(rule) {
|
|
13684
|
+
return 'cssRules' in rule;
|
|
13685
|
+
}
|
|
13686
|
+
function isMediaRule(rule) {
|
|
13687
|
+
return rule.type === 4;
|
|
13688
|
+
}
|
|
13689
|
+
|
|
13690
|
+
/** Render an SVG subtree as a cropped PNG, or return null if it has no visible pixels. */ function rasterizeSVG(source, path, size, scale, inspect) {
|
|
13691
|
+
if (scale === void 0) scale = 2;
|
|
13692
|
+
return _async_to_generator(function() {
|
|
13693
|
+
var snapshot, canvas;
|
|
13694
|
+
return _ts_generator(this, function(_state) {
|
|
13695
|
+
switch(_state.label){
|
|
13696
|
+
case 0:
|
|
13697
|
+
if (!Number.isFinite(scale) || scale <= 0) {
|
|
13698
|
+
throw new RangeError('rasterScale must be finite and positive.');
|
|
13699
|
+
}
|
|
13700
|
+
if (Math.ceil(size[0] * scale) * Math.ceil(size[1] * scale) > 16777216) {
|
|
13701
|
+
throw new RangeError('SVG rasterization exceeds the 16 megapixel working limit; reduce rasterScale.');
|
|
13702
|
+
}
|
|
13703
|
+
snapshot = prepareSVGSnapshot(source, path, size, inspect);
|
|
13704
|
+
return [
|
|
13705
|
+
4,
|
|
13706
|
+
renderSVG(snapshot, size, scale)
|
|
13707
|
+
];
|
|
13708
|
+
case 1:
|
|
13709
|
+
canvas = _state.sent();
|
|
13710
|
+
return [
|
|
13711
|
+
2,
|
|
13712
|
+
cropRasterImage(canvas, scale)
|
|
13713
|
+
];
|
|
13714
|
+
}
|
|
13715
|
+
});
|
|
13716
|
+
})();
|
|
13717
|
+
}
|
|
13718
|
+
/** No DOM access at module initialization: the Node entry also imports this module. */ function canRasterizeSVG() {
|
|
13719
|
+
return typeof window !== 'undefined' && typeof document !== 'undefined' && typeof window.HTMLCanvasElement === 'function' && typeof window.Image === 'function' && typeof window.getComputedStyle === 'function';
|
|
13720
|
+
}
|
|
13721
|
+
function renderSVG(svg, size, scale) {
|
|
13722
|
+
return _async_to_generator(function() {
|
|
13723
|
+
var canvas, context, image, url;
|
|
13724
|
+
return _ts_generator(this, function(_state) {
|
|
13725
|
+
switch(_state.label){
|
|
13726
|
+
case 0:
|
|
13727
|
+
canvas = document.createElement('canvas');
|
|
13728
|
+
canvas.width = Math.ceil(size[0] * scale);
|
|
13729
|
+
canvas.height = Math.ceil(size[1] * scale);
|
|
13730
|
+
context = canvas.getContext('2d');
|
|
13731
|
+
if (context == null) {
|
|
13732
|
+
throw new Error('A 2D canvas context is required for SVG rasterization.');
|
|
13733
|
+
}
|
|
13734
|
+
image = new Image();
|
|
13735
|
+
url = URL.createObjectURL(new Blob([
|
|
13736
|
+
svg
|
|
13737
|
+
], {
|
|
13738
|
+
type: 'image/svg+xml'
|
|
13739
|
+
}));
|
|
13740
|
+
_state.label = 1;
|
|
13741
|
+
case 1:
|
|
13742
|
+
_state.trys.push([
|
|
13743
|
+
1,
|
|
13744
|
+
,
|
|
13745
|
+
3,
|
|
13746
|
+
4
|
|
13747
|
+
]);
|
|
13748
|
+
return [
|
|
13749
|
+
4,
|
|
13750
|
+
new Promise(function(resolve, reject) {
|
|
13751
|
+
image.onload = function() {
|
|
13752
|
+
return resolve();
|
|
13753
|
+
};
|
|
13754
|
+
image.onerror = function() {
|
|
13755
|
+
return reject(new Error('The prepared SVG could not be decoded.'));
|
|
13756
|
+
};
|
|
13757
|
+
image.src = url;
|
|
13758
|
+
})
|
|
13759
|
+
];
|
|
13760
|
+
case 2:
|
|
13761
|
+
_state.sent();
|
|
13762
|
+
context.drawImage(image, 0, 0, canvas.width, canvas.height);
|
|
13763
|
+
return [
|
|
13764
|
+
2,
|
|
13765
|
+
canvas
|
|
13766
|
+
];
|
|
13767
|
+
case 3:
|
|
13768
|
+
URL.revokeObjectURL(url);
|
|
13769
|
+
return [
|
|
13770
|
+
7
|
|
13771
|
+
];
|
|
13772
|
+
case 4:
|
|
13773
|
+
return [
|
|
13774
|
+
2
|
|
13775
|
+
];
|
|
13776
|
+
}
|
|
13777
|
+
});
|
|
13778
|
+
})();
|
|
13779
|
+
}
|
|
13780
|
+
/** Trim transparent pixels after rendering, retaining strokes, blur and filter extents. */ function cropRasterImage(canvas, scale) {
|
|
13781
|
+
var context = canvas.getContext('2d');
|
|
13782
|
+
if (context == null) {
|
|
13783
|
+
throw new Error('A 2D canvas context is required for SVG rasterization.');
|
|
13784
|
+
}
|
|
13785
|
+
var data = context.getImageData(0, 0, canvas.width, canvas.height).data;
|
|
13786
|
+
var left = canvas.width;
|
|
13787
|
+
var top = canvas.height;
|
|
13788
|
+
var right = 0;
|
|
13789
|
+
var bottom = 0;
|
|
13790
|
+
for(var y = 0; y < canvas.height; y++){
|
|
13791
|
+
for(var x = 0; x < canvas.width; x++){
|
|
13792
|
+
if (data[(y * canvas.width + x) * 4 + 3] === 0) {
|
|
13793
|
+
continue;
|
|
13794
|
+
}
|
|
13795
|
+
left = Math.min(left, x);
|
|
13796
|
+
top = Math.min(top, y);
|
|
13797
|
+
right = Math.max(right, x + 1);
|
|
13798
|
+
bottom = Math.max(bottom, y + 1);
|
|
13799
|
+
}
|
|
13800
|
+
}
|
|
13801
|
+
if (right <= left || bottom <= top) {
|
|
13802
|
+
return null;
|
|
13803
|
+
}
|
|
13804
|
+
var cropped = document.createElement('canvas');
|
|
13805
|
+
cropped.width = right - left;
|
|
13806
|
+
cropped.height = bottom - top;
|
|
13807
|
+
var croppedContext = cropped.getContext('2d');
|
|
13808
|
+
if (croppedContext == null) {
|
|
13809
|
+
throw new Error('A 2D canvas context is required for SVG rasterization.');
|
|
13810
|
+
}
|
|
13811
|
+
croppedContext.drawImage(canvas, left, top, cropped.width, cropped.height, 0, 0, cropped.width, cropped.height);
|
|
13812
|
+
return {
|
|
13813
|
+
url: cropped.toDataURL('image/png'),
|
|
13814
|
+
bbox: [
|
|
13815
|
+
left / scale,
|
|
13816
|
+
top / scale,
|
|
13817
|
+
right / scale,
|
|
13818
|
+
bottom / scale
|
|
13819
|
+
]
|
|
13820
|
+
};
|
|
13821
|
+
}
|
|
13822
|
+
|
|
13823
|
+
var normalValues = new Set([
|
|
13824
|
+
'normal',
|
|
13825
|
+
'initial',
|
|
13826
|
+
'inherit',
|
|
13827
|
+
'unset',
|
|
13828
|
+
'revert',
|
|
13829
|
+
'revert-layer'
|
|
13830
|
+
]);
|
|
13831
|
+
/** Replace non-normal mix-blend-mode declarations with normal and report each downgrade. */ function normalizeLayerBlending(source) {
|
|
13832
|
+
var _loop = function() {
|
|
13833
|
+
var element = _step.value;
|
|
13834
|
+
var _element_getAttribute;
|
|
13835
|
+
var _readPresentationAttribute;
|
|
13836
|
+
var tag = element.tagName.toLowerCase();
|
|
13837
|
+
var id = (_element_getAttribute = element.getAttribute('id')) != null ? _element_getAttribute : '';
|
|
13838
|
+
var selector = id === '' ? tag : tag + "#" + id;
|
|
13839
|
+
var mode = (_readPresentationAttribute = readPresentationAttribute(element, 'mix-blend-mode')) == null ? void 0 : _readPresentationAttribute.replace(/\/\*[\s\S]*?\*\//g, '').trim();
|
|
13840
|
+
if (mode != null && !normalValues.has(mode.toLowerCase())) {
|
|
13841
|
+
downgrades.push({
|
|
13842
|
+
mode: mode,
|
|
13843
|
+
selector: selector
|
|
13844
|
+
});
|
|
13845
|
+
}
|
|
13846
|
+
var style = element.getAttribute('style');
|
|
13847
|
+
if (style != null) {
|
|
13848
|
+
var normalized = normalizeBlendDeclarations(style);
|
|
13849
|
+
if (normalized !== style) {
|
|
13850
|
+
element.setAttribute('style', normalized);
|
|
13851
|
+
changed = true;
|
|
13852
|
+
}
|
|
13853
|
+
}
|
|
13854
|
+
var attribute = element.getAttribute('mix-blend-mode');
|
|
13855
|
+
if (attribute != null && !normalValues.has(attribute.trim().toLowerCase())) {
|
|
13856
|
+
element.setAttribute('mix-blend-mode', 'normal');
|
|
13857
|
+
changed = true;
|
|
13858
|
+
}
|
|
13859
|
+
if (tag === 'style') {
|
|
13860
|
+
var _element_textContent;
|
|
13861
|
+
var text = (_element_textContent = element.textContent) != null ? _element_textContent : '';
|
|
13862
|
+
var normalized1 = normalizeBlendDeclarations(text, function(value) {
|
|
13863
|
+
return downgrades.push({
|
|
13864
|
+
mode: value,
|
|
13865
|
+
selector: selector
|
|
13866
|
+
});
|
|
13867
|
+
});
|
|
13868
|
+
if (normalized1 !== text) {
|
|
13869
|
+
element.textContent = normalized1;
|
|
13870
|
+
changed = true;
|
|
13871
|
+
}
|
|
13872
|
+
}
|
|
13873
|
+
};
|
|
13874
|
+
var svg = svg_js.SVG(source);
|
|
13875
|
+
var downgrades = [];
|
|
13876
|
+
var changed = false;
|
|
13877
|
+
for(var _iterator = _create_for_of_iterator_helper_loose([].concat([
|
|
13878
|
+
svg.node
|
|
13879
|
+
], Array.from(svg.node.querySelectorAll('*')))), _step; !(_step = _iterator()).done;)_loop();
|
|
13880
|
+
return {
|
|
13881
|
+
source: changed ? svg.svg() : source,
|
|
13882
|
+
downgrades: downgrades
|
|
13883
|
+
};
|
|
13884
|
+
}
|
|
13885
|
+
/** Match declaration boundaries without changing strings, comments or function arguments. */ function normalizeBlendDeclarations(source, onDowngrade) {
|
|
13886
|
+
var replacements = [];
|
|
13887
|
+
var start = 0;
|
|
13888
|
+
var colon = -1;
|
|
13889
|
+
var parentheses = 0;
|
|
13890
|
+
var quote;
|
|
13891
|
+
var comment = false;
|
|
13892
|
+
var finish = function finish(end) {
|
|
13893
|
+
if (colon < start) {
|
|
13894
|
+
return;
|
|
13895
|
+
}
|
|
13896
|
+
var name = source.slice(start, colon).replace(/\/\*[\s\S]*?\*\//g, '').trim().toLowerCase();
|
|
13897
|
+
if (name !== 'mix-blend-mode') {
|
|
13898
|
+
return;
|
|
13899
|
+
}
|
|
13900
|
+
var value = source.slice(colon + 1, end).replace(/\/\*[\s\S]*?\*\//g, '').trim();
|
|
13901
|
+
var mode = value.replace(/\s*!important\s*$/i, '').trim();
|
|
13902
|
+
if (mode === '' || normalValues.has(mode.toLowerCase())) {
|
|
13903
|
+
return;
|
|
13904
|
+
}
|
|
13905
|
+
onDowngrade == null ? void 0 : onDowngrade(mode);
|
|
13906
|
+
replacements.push({
|
|
13907
|
+
start: colon + 1,
|
|
13908
|
+
end: end,
|
|
13909
|
+
value: /!important\s*$/i.test(value) ? ' normal !important' : ' normal'
|
|
13910
|
+
});
|
|
13911
|
+
};
|
|
13912
|
+
for(var index = 0; index < source.length; index++){
|
|
13913
|
+
var character = source[index];
|
|
13914
|
+
var next = source[index + 1];
|
|
13915
|
+
if (comment) {
|
|
13916
|
+
if (character === '*' && next === '/') {
|
|
13917
|
+
comment = false;
|
|
13918
|
+
index++;
|
|
13919
|
+
}
|
|
13920
|
+
continue;
|
|
13921
|
+
}
|
|
13922
|
+
if (quote != null) {
|
|
13923
|
+
if (character === '\\') {
|
|
13924
|
+
index++;
|
|
13925
|
+
} else if (character === quote) {
|
|
13926
|
+
quote = undefined;
|
|
13927
|
+
}
|
|
13928
|
+
continue;
|
|
13929
|
+
}
|
|
13930
|
+
if (character === '/' && next === '*') {
|
|
13931
|
+
comment = true;
|
|
13932
|
+
index++;
|
|
13933
|
+
continue;
|
|
13934
|
+
}
|
|
13935
|
+
if (character === '"' || character === "'") {
|
|
13936
|
+
quote = character;
|
|
13937
|
+
continue;
|
|
13938
|
+
}
|
|
13939
|
+
if (character === '(') {
|
|
13940
|
+
parentheses++;
|
|
13941
|
+
continue;
|
|
13942
|
+
}
|
|
13943
|
+
if (character === ')') {
|
|
13944
|
+
parentheses = Math.max(0, parentheses - 1);
|
|
13945
|
+
continue;
|
|
13946
|
+
}
|
|
13947
|
+
if (parentheses > 0) {
|
|
13948
|
+
continue;
|
|
13949
|
+
}
|
|
13950
|
+
if (character === ':' && colon < start) {
|
|
13951
|
+
colon = index;
|
|
13952
|
+
}
|
|
13953
|
+
if (character === ';' || character === '}' || character === '{') {
|
|
13954
|
+
if (character !== '{') {
|
|
13955
|
+
finish(index);
|
|
13956
|
+
}
|
|
13957
|
+
start = index + 1;
|
|
13958
|
+
colon = -1;
|
|
13959
|
+
}
|
|
13960
|
+
}
|
|
13961
|
+
finish(source.length);
|
|
13962
|
+
var result = '';
|
|
13963
|
+
var cursor = 0;
|
|
13964
|
+
for(var _iterator = _create_for_of_iterator_helper_loose(replacements), _step; !(_step = _iterator()).done;){
|
|
13965
|
+
var replacement = _step.value;
|
|
13966
|
+
result += source.slice(cursor, replacement.start) + replacement.value;
|
|
13967
|
+
cursor = replacement.end;
|
|
13968
|
+
}
|
|
13969
|
+
return result + source.slice(cursor);
|
|
13970
|
+
}
|
|
13971
|
+
|
|
13972
|
+
var declarations = new Set([
|
|
13973
|
+
'defs',
|
|
13974
|
+
'style',
|
|
13975
|
+
'title',
|
|
13976
|
+
'desc',
|
|
13977
|
+
'metadata',
|
|
13978
|
+
'symbol',
|
|
13979
|
+
'clippath',
|
|
13980
|
+
'mask',
|
|
13981
|
+
'filter',
|
|
13982
|
+
'lineargradient',
|
|
13983
|
+
'radialgradient',
|
|
13984
|
+
'pattern',
|
|
13985
|
+
'marker'
|
|
13986
|
+
]);
|
|
13987
|
+
var graphics = new Set([
|
|
13988
|
+
'path',
|
|
13989
|
+
'rect',
|
|
13990
|
+
'circle',
|
|
13991
|
+
'ellipse',
|
|
13992
|
+
'line',
|
|
13993
|
+
'polyline',
|
|
13994
|
+
'polygon',
|
|
13995
|
+
'use'
|
|
13996
|
+
]);
|
|
13997
|
+
var containers = new Set([
|
|
13998
|
+
'svg',
|
|
13999
|
+
'g',
|
|
14000
|
+
'a',
|
|
14001
|
+
'switch'
|
|
14002
|
+
]);
|
|
14003
|
+
var groupEffects = [
|
|
14004
|
+
'opacity',
|
|
14005
|
+
'filter',
|
|
14006
|
+
'mask',
|
|
14007
|
+
'clip-path'
|
|
14008
|
+
];
|
|
14009
|
+
var native = new Set([
|
|
14010
|
+
'text',
|
|
14011
|
+
'image',
|
|
14012
|
+
'foreignobject'
|
|
14013
|
+
]);
|
|
14014
|
+
/** Select graphic-only subtrees; keep native text and images as separate layers. */ function planGraphicBaking(source) {
|
|
14015
|
+
var root = svg_js.SVG(source).node;
|
|
14016
|
+
var scopes = [];
|
|
14017
|
+
var warnings = [];
|
|
14018
|
+
var effectRules = collectGroupEffectRules(root);
|
|
14019
|
+
var byId = new Map(Array.from(root.querySelectorAll('[id]')).map(function(element) {
|
|
14020
|
+
var _element_getAttribute;
|
|
14021
|
+
return [
|
|
14022
|
+
(_element_getAttribute = element.getAttribute('id')) != null ? _element_getAttribute : '',
|
|
14023
|
+
element
|
|
14024
|
+
];
|
|
14025
|
+
}));
|
|
14026
|
+
var tagOf = function tagOf(element) {
|
|
14027
|
+
return element.tagName.toLowerCase();
|
|
14028
|
+
};
|
|
14029
|
+
var selectorOf = function selectorOf(element) {
|
|
14030
|
+
var _element_getAttribute;
|
|
14031
|
+
var id = (_element_getAttribute = element.getAttribute('id')) != null ? _element_getAttribute : '';
|
|
14032
|
+
return "" + tagOf(element) + (id === '' ? '' : "#" + id);
|
|
14033
|
+
};
|
|
14034
|
+
var references = function references(element) {
|
|
14035
|
+
var ids = Array.from(element.attributes).flatMap(function(attribute) {
|
|
14036
|
+
var values = Array.from(attribute.value.matchAll(/url\(\s*['"]?#([^)'"\s]+)['"]?\s*\)/g), function(match) {
|
|
14037
|
+
return match[1];
|
|
14038
|
+
});
|
|
14039
|
+
if (attribute.localName === 'href' && attribute.value.startsWith('#')) {
|
|
14040
|
+
values.push(attribute.value.slice(1));
|
|
14041
|
+
}
|
|
14042
|
+
return values;
|
|
14043
|
+
});
|
|
14044
|
+
return ids.flatMap(function(id) {
|
|
14045
|
+
var target = byId.get(id);
|
|
14046
|
+
return target == null ? [] : [
|
|
14047
|
+
target
|
|
14048
|
+
];
|
|
14049
|
+
});
|
|
14050
|
+
};
|
|
14051
|
+
var containsNative = function containsNative1(element, seen) {
|
|
14052
|
+
if (seen === void 0) seen = new Set();
|
|
14053
|
+
if (seen.has(element)) {
|
|
14054
|
+
return false;
|
|
14055
|
+
}
|
|
14056
|
+
seen.add(element);
|
|
14057
|
+
if (native.has(tagOf(element))) {
|
|
14058
|
+
return true;
|
|
14059
|
+
}
|
|
14060
|
+
return Array.from(element.children).some(function(child) {
|
|
14061
|
+
return !declarations.has(tagOf(child)) && containsNative(child, seen);
|
|
14062
|
+
}) || references(element).some(function(target) {
|
|
14063
|
+
return containsNative(target, seen);
|
|
14064
|
+
});
|
|
14065
|
+
};
|
|
14066
|
+
var hasGraphics = function hasGraphics1(element) {
|
|
14067
|
+
return graphics.has(tagOf(element)) || Array.from(element.children).some(function(child) {
|
|
14068
|
+
return !declarations.has(tagOf(child)) && hasGraphics(child);
|
|
14069
|
+
});
|
|
14070
|
+
};
|
|
14071
|
+
var hasGroupEffect = function hasGroupEffect(element) {
|
|
14072
|
+
var _element_getAttribute;
|
|
14073
|
+
var style = (_element_getAttribute = element.getAttribute('style')) != null ? _element_getAttribute : '';
|
|
14074
|
+
return effectRules.some(function(rule) {
|
|
14075
|
+
return element.matches(rule.selectorText);
|
|
14076
|
+
}) || hasGraphicGroupEffect(function(name) {
|
|
14077
|
+
var _element_getAttribute;
|
|
14078
|
+
var _exec_, _exec;
|
|
14079
|
+
return (_element_getAttribute = element.getAttribute(name)) != null ? _element_getAttribute : (_exec = new RegExp("(?:^|;)\\s*" + name + "\\s*:\\s*([^;]+)").exec(style)) == null ? void 0 : (_exec_ = _exec[1]) == null ? void 0 : _exec_.trim();
|
|
14080
|
+
});
|
|
14081
|
+
};
|
|
14082
|
+
var visit = function visit1(element) {
|
|
14083
|
+
var _element_getAttribute, _ref;
|
|
14084
|
+
var _exec_, _exec;
|
|
14085
|
+
var tag = tagOf(element);
|
|
14086
|
+
var style = (_element_getAttribute = element.getAttribute('style')) != null ? _element_getAttribute : '';
|
|
14087
|
+
var display = (_ref = (_exec = /(?:^|;)\s*display\s*:\s*([^;]+)/.exec(style)) == null ? void 0 : (_exec_ = _exec[1]) == null ? void 0 : _exec_.trim()) != null ? _ref : element.getAttribute('display');
|
|
14088
|
+
if (display === 'none') {
|
|
14089
|
+
return;
|
|
14090
|
+
}
|
|
14091
|
+
if (declarations.has(tag) || native.has(tag)) {
|
|
14092
|
+
return;
|
|
14093
|
+
}
|
|
14094
|
+
if (!containers.has(tag) && !graphics.has(tag)) {
|
|
14095
|
+
return;
|
|
14096
|
+
}
|
|
14097
|
+
if (!hasGraphics(element)) {
|
|
14098
|
+
return;
|
|
14099
|
+
}
|
|
14100
|
+
if ((graphics.has(tag) || tag === 'switch') && !containsNative(element)) {
|
|
14101
|
+
scopes.push({
|
|
14102
|
+
path: buildElementTreePath(element),
|
|
14103
|
+
selector: selectorOf(element),
|
|
14104
|
+
isGroup: containers.has(tag)
|
|
14105
|
+
});
|
|
14106
|
+
return;
|
|
14107
|
+
}
|
|
14108
|
+
if (hasGroupEffect(element) && !containsNative(element)) {
|
|
14109
|
+
scopes.push({
|
|
14110
|
+
path: buildElementTreePath(element),
|
|
14111
|
+
selector: selectorOf(element),
|
|
14112
|
+
isGroup: containers.has(tag)
|
|
14113
|
+
});
|
|
14114
|
+
return;
|
|
14115
|
+
}
|
|
14116
|
+
if (hasGroupEffect(element)) {
|
|
14117
|
+
warnings.push({
|
|
14118
|
+
message: 'A compositing group contains native text or images; its graphics cannot be baked separately.',
|
|
14119
|
+
selector: selectorOf(element)
|
|
14120
|
+
});
|
|
14121
|
+
return;
|
|
14122
|
+
}
|
|
14123
|
+
for(var _iterator = _create_for_of_iterator_helper_loose(Array.from(element.children)), _step; !(_step = _iterator()).done;){
|
|
14124
|
+
var child = _step.value;
|
|
14125
|
+
visit(child);
|
|
14126
|
+
}
|
|
14127
|
+
};
|
|
14128
|
+
visit(root);
|
|
14129
|
+
return {
|
|
14130
|
+
scopes: scopes,
|
|
14131
|
+
warnings: warnings
|
|
14132
|
+
};
|
|
14133
|
+
}
|
|
14134
|
+
function collectGroupEffectRules(root) {
|
|
14135
|
+
var result = [];
|
|
14136
|
+
if (typeof CSSStyleSheet !== 'function') {
|
|
14137
|
+
return result;
|
|
14138
|
+
}
|
|
14139
|
+
var visit = function visit1(rules) {
|
|
14140
|
+
var _loop = function() {
|
|
14141
|
+
var rule = _step.value;
|
|
14142
|
+
if (isStyleRule$1(rule)) {
|
|
14143
|
+
var affectsGroup = hasGraphicGroupEffect(function(name) {
|
|
14144
|
+
var value = rule.style.getPropertyValue(name).trim();
|
|
14145
|
+
return value === '' || value === 'initial' || value === 'unset' ? undefined : value;
|
|
14146
|
+
});
|
|
14147
|
+
if (affectsGroup) {
|
|
14148
|
+
result.push(rule);
|
|
14149
|
+
}
|
|
14150
|
+
} else if (hasNestedRules(rule)) {
|
|
14151
|
+
visit(rule.cssRules);
|
|
14152
|
+
}
|
|
14153
|
+
};
|
|
14154
|
+
for(var _iterator = _create_for_of_iterator_helper_loose(Array.from(rules)), _step; !(_step = _iterator()).done;)_loop();
|
|
14155
|
+
};
|
|
14156
|
+
for(var _iterator = _create_for_of_iterator_helper_loose(Array.from(root.querySelectorAll('style'))), _step; !(_step = _iterator()).done;){
|
|
14157
|
+
var style = _step.value;
|
|
14158
|
+
var _style_textContent;
|
|
14159
|
+
var sheet = new CSSStyleSheet();
|
|
14160
|
+
sheet.replaceSync((_style_textContent = style.textContent) != null ? _style_textContent : '');
|
|
14161
|
+
visit(sheet.cssRules);
|
|
14162
|
+
}
|
|
14163
|
+
return result;
|
|
14164
|
+
}
|
|
14165
|
+
/** Reject text/image dependencies and effects that cannot be rendered independently. */ function validateGraphicSnapshot(context) {
|
|
14166
|
+
var _loop = function() {
|
|
14167
|
+
var element = _step1.value;
|
|
14168
|
+
var computed = readStyle(element);
|
|
14169
|
+
var ancestor = element !== target && element.contains(target);
|
|
14170
|
+
var groupEffect = ancestor && hasGraphicGroupEffect(function(name) {
|
|
14171
|
+
return name === 'mask' ? computed.maskImage : computed.getPropertyValue(name);
|
|
14172
|
+
});
|
|
14173
|
+
if (ancestor && (groupEffect || computed.mixBlendMode !== 'normal')) {
|
|
14174
|
+
throw new Error('A mixed group effect cannot be applied independently to its graphics.');
|
|
14175
|
+
}
|
|
14176
|
+
if (target.contains(element) && target !== root && computed.mixBlendMode !== 'normal') {
|
|
14177
|
+
throw new Error('Blend modes that depend on an external backdrop cannot be baked independently.');
|
|
14178
|
+
}
|
|
14179
|
+
};
|
|
14180
|
+
var root = context.root, target = context.target, elements = context.elements, dependencies = context.dependencies, readStyle = context.readStyle;
|
|
14181
|
+
for(var _iterator = _create_for_of_iterator_helper_loose(dependencies), _step; !(_step = _iterator()).done;){
|
|
14182
|
+
var element = _step.value;
|
|
14183
|
+
if ([
|
|
14184
|
+
'text',
|
|
14185
|
+
'image',
|
|
14186
|
+
'foreignobject'
|
|
14187
|
+
].includes(element.tagName.toLowerCase())) {
|
|
14188
|
+
throw new Error('Graphic dependencies contain native text or images; they must remain editable.');
|
|
14189
|
+
}
|
|
14190
|
+
}
|
|
14191
|
+
for(var _iterator1 = _create_for_of_iterator_helper_loose(elements), _step1; !(_step1 = _iterator1()).done;)_loop();
|
|
14192
|
+
}
|
|
14193
|
+
function isStyleRule$1(rule) {
|
|
14194
|
+
return rule.type === 1;
|
|
14195
|
+
}
|
|
14196
|
+
function hasNestedRules(rule) {
|
|
14197
|
+
return 'cssRules' in rule;
|
|
14198
|
+
}
|
|
14199
|
+
function hasGraphicGroupEffect(readValue) {
|
|
14200
|
+
return groupEffects.some(function(name) {
|
|
14201
|
+
var value = readValue(name);
|
|
14202
|
+
return value != null && value !== 'none' && value !== 'normal' && value !== '1';
|
|
14203
|
+
});
|
|
14204
|
+
}
|
|
14205
|
+
|
|
14206
|
+
/** Mask and clipPath definitions do not produce visible layers. */ function collectNonRenderingDeclarationPaths(source) {
|
|
14207
|
+
var root = svg_js.SVG(source).node;
|
|
14208
|
+
var elements = Array.from(root.querySelectorAll('*')).filter(function(element) {
|
|
14209
|
+
var tag = element.tagName.toLowerCase();
|
|
14210
|
+
return tag === 'mask' || tag === 'clippath';
|
|
14211
|
+
});
|
|
14212
|
+
return new Set(elements.map(buildElementTreePath));
|
|
14213
|
+
}
|
|
14214
|
+
/** A stylesheet diagnostic is resolved only when every element it can affect was baked. */ function collectBakedStylesheetPaths(source, isBaked) {
|
|
14215
|
+
var resolved = new Set();
|
|
14216
|
+
if (typeof DOMParser === 'undefined' || typeof CSSStyleSheet !== 'function') {
|
|
14217
|
+
return resolved;
|
|
14218
|
+
}
|
|
14219
|
+
var root = new DOMParser().parseFromString(source, 'image/svg+xml').documentElement;
|
|
14220
|
+
var allUsesBaked = Array.from(root.querySelectorAll('use')).every(function(element) {
|
|
14221
|
+
return isBaked(buildElementTreePath(element));
|
|
14222
|
+
});
|
|
14223
|
+
var isHandled = function isHandled(element) {
|
|
14224
|
+
if (isBaked(buildElementTreePath(element))) {
|
|
14225
|
+
return true;
|
|
14226
|
+
}
|
|
14227
|
+
if (element.closest('defs, symbol, marker, pattern, clipPath, mask, filter') != null) {
|
|
14228
|
+
return allUsesBaked;
|
|
14229
|
+
}
|
|
14230
|
+
return false;
|
|
14231
|
+
};
|
|
14232
|
+
for(var _iterator = _create_for_of_iterator_helper_loose(Array.from(root.querySelectorAll('style'))), _step; !(_step = _iterator()).done;){
|
|
14233
|
+
var style = _step.value;
|
|
14234
|
+
var _style_textContent;
|
|
14235
|
+
var sheet = new CSSStyleSheet();
|
|
14236
|
+
sheet.replaceSync((_style_textContent = style.textContent) != null ? _style_textContent : '');
|
|
14237
|
+
var rules = Array.from(sheet.cssRules);
|
|
14238
|
+
var handled = rules.every(function(rule) {
|
|
14239
|
+
if (!isStyleRule(rule)) {
|
|
14240
|
+
return false;
|
|
14241
|
+
}
|
|
14242
|
+
if (Array.from(rule.style).every(function(name) {
|
|
14243
|
+
return name === 'mix-blend-mode';
|
|
14244
|
+
})) {
|
|
14245
|
+
return true;
|
|
14246
|
+
}
|
|
14247
|
+
var matched = [].concat([
|
|
14248
|
+
root
|
|
14249
|
+
], Array.from(root.querySelectorAll('*'))).filter(function(element) {
|
|
14250
|
+
return element.matches(rule.selectorText);
|
|
14251
|
+
});
|
|
14252
|
+
return matched.every(isHandled);
|
|
14253
|
+
});
|
|
14254
|
+
if (handled) {
|
|
14255
|
+
resolved.add(buildElementTreePath(style));
|
|
14256
|
+
}
|
|
14257
|
+
}
|
|
14258
|
+
return resolved;
|
|
14259
|
+
}
|
|
14260
|
+
function isStyleRule(rule) {
|
|
14261
|
+
return rule.type === 1;
|
|
14262
|
+
}
|
|
14263
|
+
|
|
14264
|
+
/** Rasterize graphics and track the source layers and warnings they replace. */ function buildBakedLayers(source, size, options, rasterScale) {
|
|
14265
|
+
return _async_to_generator(function() {
|
|
14266
|
+
var deferredOptions, bakedPaths, baked, bakingWarnings, blending, plan, _iterator, _step, downgrade, _iterator1, _step1, warning, _iterator2, _step2, scope, image, message, _image_bbox, left, top, right, bottom, width, height, error, reason, replacesSource, handledStyles, declarations;
|
|
14267
|
+
return _ts_generator(this, function(_state) {
|
|
14268
|
+
switch(_state.label){
|
|
14269
|
+
case 0:
|
|
14270
|
+
deferredOptions = _extends({}, options, {
|
|
14271
|
+
strict: false,
|
|
14272
|
+
onWarning: undefined
|
|
14273
|
+
});
|
|
14274
|
+
bakedPaths = [];
|
|
14275
|
+
baked = [];
|
|
14276
|
+
bakingWarnings = [];
|
|
14277
|
+
blending = normalizeLayerBlending(source);
|
|
14278
|
+
plan = planGraphicBaking(blending.source);
|
|
14279
|
+
for(_iterator = _create_for_of_iterator_helper_loose(blending.downgrades); !(_step = _iterator()).done;){
|
|
14280
|
+
downgrade = _step.value;
|
|
14281
|
+
collectLayerWarning(bakingWarnings, deferredOptions, SVG2IR_WARNING_CODES.LAYERS_BLEND_MODE_DOWNGRADED, 'mix-blend-mode "' + downgrade.mode + '" was downgraded to "normal"; the layer is retained.', downgrade.selector);
|
|
14282
|
+
}
|
|
14283
|
+
for(_iterator1 = _create_for_of_iterator_helper_loose(plan.warnings); !(_step1 = _iterator1()).done;){
|
|
14284
|
+
warning = _step1.value;
|
|
14285
|
+
collectLayerWarning(bakingWarnings, deferredOptions, SVG2IR_WARNING_CODES.LAYERS_UNSUPPORTED_FEATURE, warning.message, warning.selector);
|
|
14286
|
+
}
|
|
14287
|
+
_iterator2 = _create_for_of_iterator_helper_loose(plan.scopes);
|
|
14288
|
+
_state.label = 1;
|
|
14289
|
+
case 1:
|
|
14290
|
+
if (!!(_step2 = _iterator2()).done) return [
|
|
14291
|
+
3,
|
|
14292
|
+
6
|
|
14293
|
+
];
|
|
14294
|
+
scope = _step2.value;
|
|
14295
|
+
_state.label = 2;
|
|
14296
|
+
case 2:
|
|
14297
|
+
_state.trys.push([
|
|
14298
|
+
2,
|
|
14299
|
+
4,
|
|
14300
|
+
,
|
|
14301
|
+
5
|
|
14302
|
+
]);
|
|
14303
|
+
if (!canRasterizeSVG()) {
|
|
14304
|
+
throw new Error('Graphic baking requires a browser with SVG and Canvas support.');
|
|
14305
|
+
}
|
|
14306
|
+
return [
|
|
14307
|
+
4,
|
|
14308
|
+
rasterizeSVG(blending.source, scope.path, size, rasterScale, validateGraphicSnapshot)
|
|
14309
|
+
];
|
|
14310
|
+
case 3:
|
|
14311
|
+
image = _state.sent();
|
|
14312
|
+
bakedPaths.push(scope.path);
|
|
14313
|
+
message = image == null ? 'Graphic rasterization produced no visible pixels; no image layer was emitted.' : scope.isGroup ? 'Graphic group baked into a single PNG; child graphics and paint/effect parameters are no longer editable.' : 'Graphic baked into a PNG; vector geometry and paint/effect parameters are no longer editable.';
|
|
14314
|
+
collectLayerWarning(bakingWarnings, deferredOptions, SVG2IR_WARNING_CODES.LAYERS_GRAPHIC_BAKED, message, scope.selector);
|
|
14315
|
+
if (image == null) {
|
|
14316
|
+
return [
|
|
14317
|
+
3,
|
|
14318
|
+
5
|
|
14319
|
+
];
|
|
14320
|
+
}
|
|
14321
|
+
_image_bbox = image.bbox, left = _image_bbox[0], top = _image_bbox[1], right = _image_bbox[2], bottom = _image_bbox[3];
|
|
14322
|
+
width = right - left;
|
|
14323
|
+
height = bottom - top;
|
|
14324
|
+
baked.push({
|
|
14325
|
+
path: scope.path,
|
|
14326
|
+
layer: {
|
|
14327
|
+
id: '',
|
|
14328
|
+
type: 'image',
|
|
14329
|
+
role: 'content',
|
|
14330
|
+
bbox: image.bbox,
|
|
14331
|
+
size: [
|
|
14332
|
+
width,
|
|
14333
|
+
height
|
|
14334
|
+
],
|
|
14335
|
+
rotation: [
|
|
14336
|
+
0,
|
|
14337
|
+
0,
|
|
14338
|
+
0
|
|
14339
|
+
],
|
|
14340
|
+
url: image.url,
|
|
14341
|
+
width: width,
|
|
14342
|
+
height: height
|
|
14343
|
+
}
|
|
14344
|
+
});
|
|
14345
|
+
return [
|
|
14346
|
+
3,
|
|
14347
|
+
5
|
|
14348
|
+
];
|
|
14349
|
+
case 4:
|
|
14350
|
+
error = _state.sent();
|
|
14351
|
+
reason = _instanceof(error, Error) ? error.message : String(error);
|
|
14352
|
+
collectLayerWarning(bakingWarnings, deferredOptions, SVG2IR_WARNING_CODES.LAYERS_UNSUPPORTED_FEATURE, "Graphic baking failed: " + reason, scope.selector);
|
|
14353
|
+
return [
|
|
14354
|
+
3,
|
|
14355
|
+
5
|
|
14356
|
+
];
|
|
14357
|
+
case 5:
|
|
14358
|
+
return [
|
|
14359
|
+
3,
|
|
14360
|
+
1
|
|
14361
|
+
];
|
|
14362
|
+
case 6:
|
|
14363
|
+
replacesSource = function replacesSource(path) {
|
|
14364
|
+
return path != null && bakedPaths.some(function(scope) {
|
|
14365
|
+
return scope === '' || path === scope || path.startsWith("" + scope + "/");
|
|
14366
|
+
});
|
|
14367
|
+
};
|
|
14368
|
+
handledStyles = collectBakedStylesheetPaths(blending.source, replacesSource);
|
|
14369
|
+
declarations = collectNonRenderingDeclarationPaths(source);
|
|
14370
|
+
return [
|
|
14371
|
+
2,
|
|
14372
|
+
{
|
|
14373
|
+
layers: baked,
|
|
14374
|
+
warnings: bakingWarnings,
|
|
14375
|
+
replacesSource: replacesSource,
|
|
14376
|
+
resolvesWarning: function resolvesWarning(warning, path) {
|
|
14377
|
+
return replacesSource(path) || warning.code === SVG2IR_WARNING_CODES.ELEMENT_DROPPED && path != null && (handledStyles.has(path) || declarations.has(path));
|
|
14378
|
+
}
|
|
14379
|
+
}
|
|
14380
|
+
];
|
|
14381
|
+
}
|
|
14382
|
+
});
|
|
14383
|
+
})();
|
|
14384
|
+
}
|
|
13275
14385
|
|
|
13276
14386
|
function encodeBase64(data) {
|
|
13277
14387
|
var chunks = [];
|
|
@@ -13460,26 +14570,103 @@ function fetchImageResource(url) {
|
|
|
13460
14570
|
}).apply(this, arguments);
|
|
13461
14571
|
}
|
|
13462
14572
|
|
|
13463
|
-
|
|
14573
|
+
var animatedTags = new Set([
|
|
14574
|
+
'animate',
|
|
14575
|
+
'animatetransform',
|
|
14576
|
+
'animatemotion',
|
|
14577
|
+
'set'
|
|
14578
|
+
]);
|
|
14579
|
+
/** Static layers cannot sample animation; drop SMIL nodes so elements keep their authored state. */ function stripLayerAnimation(source) {
|
|
14580
|
+
var svg = svg_js.SVG(source);
|
|
14581
|
+
if ((svg == null ? void 0 : svg.node) == null) {
|
|
14582
|
+
return {
|
|
14583
|
+
source: source,
|
|
14584
|
+
removed: 0
|
|
14585
|
+
};
|
|
14586
|
+
}
|
|
14587
|
+
var elements = Array.from(svg.node.querySelectorAll('*')).filter(function(element) {
|
|
14588
|
+
return animatedTags.has(element.tagName.toLowerCase());
|
|
14589
|
+
});
|
|
14590
|
+
if (elements.length === 0) {
|
|
14591
|
+
return {
|
|
14592
|
+
source: source,
|
|
14593
|
+
removed: 0
|
|
14594
|
+
};
|
|
14595
|
+
}
|
|
14596
|
+
for(var _iterator = _create_for_of_iterator_helper_loose(elements), _step; !(_step = _iterator()).done;){
|
|
14597
|
+
var element = _step.value;
|
|
14598
|
+
element.remove();
|
|
14599
|
+
}
|
|
14600
|
+
return {
|
|
14601
|
+
source: svg.svg(),
|
|
14602
|
+
removed: elements.length
|
|
14603
|
+
};
|
|
14604
|
+
}
|
|
14605
|
+
|
|
14606
|
+
function convertSVGToLayers(source, options, loadImage, preservedData, rasterScale) {
|
|
14607
|
+
if (rasterScale === void 0) rasterScale = 2;
|
|
13464
14608
|
return _async_to_generator(function() {
|
|
13465
|
-
var
|
|
14609
|
+
var layerSources, warningSources, collected, stripped, staticSource, parsed, composition, baking, assembled, _tmp, _tmp1;
|
|
13466
14610
|
return _ts_generator(this, function(_state) {
|
|
13467
14611
|
switch(_state.label){
|
|
13468
14612
|
case 0:
|
|
13469
|
-
|
|
13470
|
-
|
|
13471
|
-
|
|
13472
|
-
|
|
13473
|
-
|
|
14613
|
+
layerSources = new Map();
|
|
14614
|
+
warningSources = new Map();
|
|
14615
|
+
collected = {
|
|
14616
|
+
textDataByLayerId: new Map(),
|
|
14617
|
+
paintAnimationsByLayerId: new Map(),
|
|
14618
|
+
shapeAnimationsByLayerId: new Map()
|
|
13474
14619
|
};
|
|
14620
|
+
stripped = stripLayerAnimation(source);
|
|
14621
|
+
staticSource = stripped.source;
|
|
14622
|
+
// Preserve original layer IDs while gathering the source identities required by baking and assembly.
|
|
14623
|
+
parsed = parseSVGToIRWithPreservedData(staticSource, _extends({}, options, {
|
|
14624
|
+
strict: false,
|
|
14625
|
+
onWarning: undefined
|
|
14626
|
+
}), _extends({}, collected, {
|
|
14627
|
+
layerSourceCollector: layerSources,
|
|
14628
|
+
warningSourceCollector: warningSources
|
|
14629
|
+
}));
|
|
14630
|
+
if (stripped.removed > 0) {
|
|
14631
|
+
collectLayerWarning(parsed.warnings, _extends({}, options, {
|
|
14632
|
+
strict: false,
|
|
14633
|
+
onWarning: undefined
|
|
14634
|
+
}), SVG2IR_WARNING_CODES.LAYERS_ANIMATION_STRIPPED, "" + stripped.removed + " animated element(s) were removed; static layers output does not sample animation.");
|
|
14635
|
+
}
|
|
14636
|
+
composition = parsed.ir.compositions[0];
|
|
13475
14637
|
return [
|
|
13476
14638
|
4,
|
|
13477
|
-
|
|
14639
|
+
buildBakedLayers(staticSource, [
|
|
14640
|
+
composition.width,
|
|
14641
|
+
composition.height
|
|
14642
|
+
], options, rasterScale)
|
|
13478
14643
|
];
|
|
13479
14644
|
case 1:
|
|
14645
|
+
baking = _state.sent();
|
|
14646
|
+
assembled = assembleSVGLayers({
|
|
14647
|
+
scene: parsed.ir,
|
|
14648
|
+
options: options,
|
|
14649
|
+
warnings: parsed.warnings,
|
|
14650
|
+
preservedData: preservedData != null ? preservedData : collected,
|
|
14651
|
+
layerSources: layerSources,
|
|
14652
|
+
warningSources: warningSources,
|
|
14653
|
+
baking: baking
|
|
14654
|
+
});
|
|
14655
|
+
_tmp = [
|
|
14656
|
+
{},
|
|
14657
|
+
assembled
|
|
14658
|
+
];
|
|
14659
|
+
_tmp1 = {};
|
|
14660
|
+
return [
|
|
14661
|
+
4,
|
|
14662
|
+
inlineImageResources(assembled.data, loadImage)
|
|
14663
|
+
];
|
|
14664
|
+
case 2:
|
|
13480
14665
|
return [
|
|
13481
14666
|
2,
|
|
13482
|
-
(
|
|
14667
|
+
_extends.apply(void 0, _tmp.concat([
|
|
14668
|
+
(_tmp1.data = _state.sent(), _tmp1)
|
|
14669
|
+
]))
|
|
13483
14670
|
];
|
|
13484
14671
|
}
|
|
13485
14672
|
});
|
|
@@ -16009,11 +17196,12 @@ function convertSVG(source, options, preservedData) {
|
|
|
16009
17196
|
throw new TypeError('[svg2ir] outputFormat must be ge or layers.');
|
|
16010
17197
|
}
|
|
16011
17198
|
if ((options == null ? void 0 : options.outputFormat) === 'layers') {
|
|
16012
|
-
options.outputFormat; var loadImage = options.loadImage, parserOptions = _object_without_properties_loose(options, [
|
|
17199
|
+
options.outputFormat; var loadImage = options.loadImage, rasterScale = options.rasterScale, parserOptions = _object_without_properties_loose(options, [
|
|
16013
17200
|
"outputFormat",
|
|
16014
|
-
"loadImage"
|
|
17201
|
+
"loadImage",
|
|
17202
|
+
"rasterScale"
|
|
16015
17203
|
]);
|
|
16016
|
-
return convertSVGToLayers(source, parserOptions, loadImage, preservedData);
|
|
17204
|
+
return convertSVGToLayers(source, parserOptions, loadImage, preservedData, rasterScale);
|
|
16017
17205
|
}
|
|
16018
17206
|
var _ref1 = options != null ? options : {}; _ref1.outputFormat; var geOptions = _object_without_properties_loose(_ref1, [
|
|
16019
17207
|
"outputFormat"
|
|
@@ -16026,5 +17214,6 @@ setEditableSVGConstructor(resolveEditableSVGConstructor(editableSVGNodeModule));
|
|
|
16026
17214
|
exports.convertSVG = convertSVG;
|
|
16027
17215
|
exports.convertSVGToGE = convertSVGToGE;
|
|
16028
17216
|
exports.convertSVGToIR = convertSVGToIR;
|
|
17217
|
+
exports.inferNumericWeightFromFamily = inferNumericWeightFromFamily;
|
|
16029
17218
|
exports.splitSVG = splitSVG;
|
|
16030
17219
|
//# sourceMappingURL=node.js.map
|