@visactor/vchart-extension 2.1.0-alpha.9 → 2.1.1

package/build/index.js

@@ -4167,7 +4167,9 @@
     }
 
     const svgSourceMap = new Map();
+    const SVG_VIEWPORT_RECT_KEY = '_vchartViewportRect';
     let svgDataSet;
+    const numberReg = /-?(?:\d+\.?\d*|\.\d+)(?:e[-+]?\d+)?/gi;
     function initSVGDataSet() {
         if (svgDataSet) {
             return;
@@ -4175,6 +4177,28 @@
         svgDataSet = new vchart.DataSet();
         vchart.registerDataSetInstanceParser(svgDataSet, 'svg', vchart.svgParser);
     }
+    function parseEnableBackgroundViewport(source) {
+        var _a, _b, _c, _d;
+        const svgStartTag = (_a = source.match(/<svg\b[\s\S]*?>/i)) === null || _a === void 0 ? void 0 : _a[0];
+        const enableBackground = (_b = svgStartTag === null || svgStartTag === void 0 ? void 0 : svgStartTag.match(/\benable-background\s*=\s*(['"])(.*?)\1/i)) === null || _b === void 0 ? void 0 : _b[2];
+        if (!enableBackground || !/^\s*new\b/i.test(enableBackground)) {
+            return null;
+        }
+        const values = (_d = (_c = enableBackground.match(numberReg)) === null || _c === void 0 ? void 0 : _c.map(Number)) !== null && _d !== void 0 ? _d : [];
+        const [x, y, width, height] = values;
+        if (!Number.isFinite(x) ||
+            !Number.isFinite(y) ||
+            !Number.isFinite(width) ||
+            !Number.isFinite(height) ||
+            width <= 0 ||
+            height <= 0) {
+            return null;
+        }
+        return { x, y, width, height };
+    }
+    function hasValidSize(parsedSvg) {
+        return (Number.isFinite(parsedSvg.width) && Number.isFinite(parsedSvg.height) && parsedSvg.width > 0 && parsedSvg.height > 0);
+    }
     function registerSVGSource(key, source) {
         if (svgSourceMap.has(key)) {
             vchart.warn(`svg source key of '${key}' already exists, will be overwritten.`);
@@ -4184,6 +4208,11 @@
         dataView.parse(source, {
             type: 'svg'
         });
+        const parsedSvg = dataView.latestData;
+        const viewportRect = parseEnableBackgroundViewport(source);
+        if (parsedSvg && viewportRect && !parsedSvg.viewBoxRect && !hasValidSize(parsedSvg)) {
+            parsedSvg[SVG_VIEWPORT_RECT_KEY] = viewportRect;
+        }
         svgSourceMap.set(key, dataView);
     }
     function unregisterSVGSource(key) {
@@ -4595,19 +4624,18 @@
             }, vchart.STATE_VALUE_ENUM.STATE_NORMAL, vchart.AttributeLevel.Series);
         }
         initMarkStyle() {
-            const { root, viewBoxRect } = this._parsedSvgResult;
+            const { root } = this._parsedSvgResult;
+            const svgViewportRect = this._getSvgViewportRect();
             const elements = this._mapViewData.getDataView().latestData;
             if (root) {
                 this.setMarkStyle(this._pictogramMark, graphicAttributeTransform.group(root.attributes), 'normal', vchart.AttributeLevel.Built_In);
-                if (root.transform) {
-                    this.setMarkStyle(this._pictogramMark, {
-                        postMatrix: () => root.transform
-                    }, 'normal', vchart.AttributeLevel.Built_In);
-                }
-                if (viewBoxRect) {
+                this.setMarkStyle(this._pictogramMark, {
+                    postMatrix: () => this._getFittedSvgRootMatrix()
+                }, 'normal', vchart.AttributeLevel.Built_In);
+                if (svgViewportRect) {
                     this._pictogramMark.setMarkConfig({
                         clip: true,
-                        clipPath: [vchart.createRect(Object.assign(Object.assign({}, viewBoxRect), { fill: true }))]
+                        clipPath: [vchart.createRect(Object.assign(Object.assign({}, svgViewportRect), { fill: true }))]
                     });
                 }
             }
@@ -4694,6 +4722,71 @@
         getPictogramRootGraphic() {
             return this._pictogramMark.getProduct();
         }
+        _getSvgRootMatrix() {
+            var _a, _b;
+            const transform = (_b = (_a = this._parsedSvgResult) === null || _a === void 0 ? void 0 : _a.root) === null || _b === void 0 ? void 0 : _b.transform;
+            return transform
+                ? new vchart.Matrix(transform.a, transform.b, transform.c, transform.d, transform.e, transform.f)
+                : new vchart.Matrix();
+        }
+        _getSvgViewportRect() {
+            var _a, _b, _c, _d;
+            const viewBoxRect = (_a = this._parsedSvgResult) === null || _a === void 0 ? void 0 : _a.viewBoxRect;
+            if (viewBoxRect) {
+                return viewBoxRect;
+            }
+            const { width, height } = (_b = this._parsedSvgResult) !== null && _b !== void 0 ? _b : {};
+            if (Number.isFinite(width) && Number.isFinite(height) && width > 0 && height > 0) {
+                return {
+                    x: 0,
+                    y: 0,
+                    width,
+                    height
+                };
+            }
+            return (_d = (_c = this._parsedSvgResult) === null || _c === void 0 ? void 0 : _c[SVG_VIEWPORT_RECT_KEY]) !== null && _d !== void 0 ? _d : null;
+        }
+        _getSvgRootBounds(rootMatrix) {
+            const viewBoxRect = this._getSvgViewportRect();
+            if (!viewBoxRect) {
+                return null;
+            }
+            const bounds = new vchart.Bounds().setValue(viewBoxRect.x, viewBoxRect.y, viewBoxRect.x + viewBoxRect.width, viewBoxRect.y + viewBoxRect.height);
+            bounds.transformWithMatrix(rootMatrix);
+            return bounds;
+        }
+        _appendMatrixScale(matrix, scale, center) {
+            const nextMatrix = new vchart.Matrix();
+            nextMatrix.translate(center.x, center.y);
+            nextMatrix.scale(scale, scale);
+            nextMatrix.translate(-center.x, -center.y);
+            nextMatrix.multiply(matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f);
+            return nextMatrix;
+        }
+        _appendMatrixTranslate(matrix, dx, dy) {
+            const nextMatrix = new vchart.Matrix();
+            nextMatrix.translate(dx, dy);
+            nextMatrix.multiply(matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f);
+            return nextMatrix;
+        }
+        _getFittedSvgRootMatrix() {
+            const rootMatrix = this._getSvgRootMatrix();
+            const bounds = this._getSvgRootBounds(rootMatrix);
+            if (!bounds) {
+                return rootMatrix;
+            }
+            const width = bounds.width();
+            const height = bounds.height();
+            if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) {
+                return rootMatrix;
+            }
+            const { width: regionWidth, height: regionHeight } = this.getLayoutRect();
+            const rootCenterX = (bounds.x1 + bounds.x2) / 2;
+            const rootCenterY = (bounds.y1 + bounds.y2) / 2;
+            const scale = Math.min(regionWidth / width, regionHeight / height);
+            const scaledMatrix = this._appendMatrixScale(rootMatrix, scale, { x: rootCenterX, y: rootCenterY });
+            return this._appendMatrixTranslate(scaledMatrix, regionWidth / 2 - rootCenterX, regionHeight / 2 - rootCenterY);
+        }
         initData() {
             var _a, _b;
             super.initData();
@@ -4747,29 +4840,15 @@
             (_a = this._mapViewData) === null || _a === void 0 ? void 0 : _a.getDataView().reRunAllTransform();
         }
         updateSVGSize() {
-            const { width: regionWidth, height: regionHeight } = this.getLayoutRect();
-            const regionCenterX = regionWidth / 2;
-            const regionCenterY = regionHeight / 2;
             const root = this.getPictogramRootGraphic();
             if (root) {
-                const bounds = root.AABBBounds;
-                const { x1, x2, y1, y2 } = root.AABBBounds;
-                const width = bounds.width();
-                const height = bounds.height();
-                const rootCenterX = (x1 + x2) / 2;
-                const rootCenterY = (y1 + y2) / 2;
-                const scaleX = regionWidth / width;
-                const scaleY = regionHeight / height;
-                const scale = Math.min(scaleX, scaleY);
-                root.scale(scale, scale, { x: rootCenterX, y: rootCenterY });
-                root.translate(regionCenterX - rootCenterX, regionCenterY - rootCenterY);
+                root.setAttributes({ postMatrix: this._getFittedSvgRootMatrix() });
             }
         }
         initEvent() {
             var _a;
             super.initEvent();
             (_a = this._mapViewData.getDataView()) === null || _a === void 0 ? void 0 : _a.target.addListener('change', this.mapViewDataUpdate.bind(this));
-            this.event.on(vchart.ChartEvent.afterMarkLayoutEnd, this.updateSVGSize.bind(this));
         }
         handleZoom(e) {
             const { scale, scaleCenter } = e;
@@ -7627,10 +7706,15 @@
         };
     }
     function appendScatterRegressionLineConfig(chartSpec, spec) {
-        var _a, _b;
+        var _a;
         if (!spec) {
+            const seriesSpecs = Array.isArray(chartSpec.series)
+                ? chartSpec.series
+                : chartSpec.series
+                    ? [chartSpec.series]
+                    : [];
             spec =
-                (_a = vchart.get(chartSpec, REGRESSION_LINE)) !== null && _a !== void 0 ? _a : vchart.get((_b = chartSpec.series) === null || _b === void 0 ? void 0 : _b.find(s => s.type === vchart.SeriesTypeEnum.scatter), REGRESSION_LINE);
+                (_a = vchart.get(chartSpec, REGRESSION_LINE)) !== null && _a !== void 0 ? _a : vchart.get(seriesSpecs.find((s) => s.type === vchart.SeriesTypeEnum.scatter), REGRESSION_LINE);
         }
         const specs = vchart.array(spec);
         specs.forEach((s) => {
@@ -7706,10 +7790,15 @@
         };
     }
     function appendBarRegressionLineConfig(chartSpec, spec) {
-        var _a, _b;
+        var _a;
         if (!spec) {
+            const seriesSpecs = Array.isArray(chartSpec.series)
+                ? chartSpec.series
+                : chartSpec.series
+                    ? [chartSpec.series]
+                    : [];
             spec =
-                (_a = vchart.get(chartSpec, REGRESSION_LINE)) !== null && _a !== void 0 ? _a : vchart.get((_b = chartSpec.series) === null || _b === void 0 ? void 0 : _b.find(s => s.type === vchart.SeriesTypeEnum.bar), REGRESSION_LINE);
+                (_a = vchart.get(chartSpec, REGRESSION_LINE)) !== null && _a !== void 0 ? _a : vchart.get(seriesSpecs.find((s) => s.type === vchart.SeriesTypeEnum.bar), REGRESSION_LINE);
         }
         const specs = vchart.array(spec);
         specs.forEach((s) => {
@@ -7796,10 +7885,15 @@
         };
     }
     function appendHistogramRegressionLineConfig(chartSpec, spec) {
-        var _a, _b;
+        var _a;
         if (!spec) {
+            const seriesSpecs = Array.isArray(chartSpec.series)
+                ? chartSpec.series
+                : chartSpec.series
+                    ? [chartSpec.series]
+                    : [];
             spec =
-                (_a = vchart.get(chartSpec, REGRESSION_LINE)) !== null && _a !== void 0 ? _a : vchart.get((_b = chartSpec.series) === null || _b === void 0 ? void 0 : _b.find(s => s.type === vchart.SeriesTypeEnum.bar), REGRESSION_LINE);
+                (_a = vchart.get(chartSpec, REGRESSION_LINE)) !== null && _a !== void 0 ? _a : vchart.get(seriesSpecs.find((s) => s.type === vchart.SeriesTypeEnum.bar), REGRESSION_LINE);
         }
         const specs = vchart.array(spec);
         specs.forEach((s) => {
@@ -7956,6 +8050,7 @@
     exports.RankingList = RankingList;
     exports.RegressionLine = RegressionLine;
     exports.SERIES_BREAK = SERIES_BREAK;
+    exports.SVG_VIEWPORT_RECT_KEY = SVG_VIEWPORT_RECT_KEY;
     exports.SequenceScatterKDE = SequenceScatterKDE;
     exports.SequenceScatterLink = SequenceScatterLink;
     exports.SequenceScatterPixel = SequenceScatterPixel;