@visactor/vrender-core 0.16.14-alpha.6 → 0.16.14

package/dist/index.js

@@ -4294,7 +4294,10 @@
         direction: 'horizontal',
         wordBreak: 'break-all',
         ignoreBuf: false,
-        verticalMode: 0
+        verticalMode: 0,
+        whiteSpace: 'no-wrap',
+        heightLimit: Infinity,
+        lineClamp: Infinity
     };
     const DefaultStyle = Object.assign(Object.assign(Object.assign({ opacity: 1, background: null, texture: null, textureColor: 'black', textureSize: 10, texturePadding: 2, backgroundMode: 0, blur: 0, cursor: null, html: null }, DefaultFillStyle), DefaultStrokeStyle), DefaultLayout);
     const DefaultConnectAttribute = {
@@ -9013,6 +9016,13 @@
     }
     RafBasedSTO.TimeOut = 1000 / 60;
     const rafBasedSto = new RafBasedSTO();
+    const calculateLineHeight = (lineHeight, fontSize) => {
+        if (vutils.isString(lineHeight) && lineHeight[lineHeight.length - 1] === '%') {
+            const scale = Number.parseFloat(lineHeight.substring(0, lineHeight.length - 1)) / 100;
+            return fontSize * scale;
+        }
+        return lineHeight;
+    };
 
     class IncreaseCount extends ACustomAnimate {
         constructor(from, to, duration, easing, params) {
@@ -14314,6 +14324,8 @@
     const TEXT_UPDATE_TAG_KEY = [
         'text',
         'maxLineWidth',
+        'heightLimit',
+        'lineClamp',
         'fontSize',
         'fontFamily',
         'fontWeight',
@@ -14398,6 +14410,113 @@
             this.clearUpdateBoundTag();
             return bounds;
         }
+        updateWrapAABBBounds(text) {
+            var _a, _b, _c, _d;
+            const textTheme = getTheme(this).text;
+            const { fontFamily = textTheme.fontFamily, textAlign = textTheme.textAlign, textBaseline = textTheme.textBaseline, fontSize = textTheme.fontSize, ellipsis = textTheme.ellipsis, maxLineWidth, stroke = textTheme.stroke, lineWidth = textTheme.lineWidth, wordBreak = textTheme.wordBreak, fontWeight = textTheme.fontWeight, ignoreBuf = textTheme.ignoreBuf, heightLimit = 0, lineClamp } = this.attribute;
+            const lineHeight = (_a = calculateLineHeight(this.attribute.lineHeight, this.attribute.fontSize || textTheme.fontSize)) !== null && _a !== void 0 ? _a : (this.attribute.fontSize || textTheme.fontSize);
+            const buf = ignoreBuf ? 0 : 2;
+            if (!this.shouldUpdateShape() && ((_b = this.cache) === null || _b === void 0 ? void 0 : _b.layoutData)) {
+                const bbox = this.cache.layoutData.bbox;
+                this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height);
+                if (stroke) {
+                    this._AABBBounds.expand(lineWidth / 2);
+                }
+                return this._AABBBounds;
+            }
+            const textMeasure = application.graphicUtil.textMeasure;
+            const layoutObj = new CanvasTextLayout(fontFamily, { fontSize, fontWeight, fontFamily }, textMeasure);
+            const lines = vutils.isArray(text) ? text.map(l => l.toString()) : [text.toString()];
+            const linesLayout = [];
+            const bboxWH = [0, 0];
+            let lineCountLimit = Infinity;
+            if (heightLimit > 0) {
+                lineCountLimit = Math.max(Math.floor(heightLimit / lineHeight), 1);
+            }
+            if (lineClamp) {
+                lineCountLimit = Math.min(lineCountLimit, lineClamp);
+            }
+            if (typeof maxLineWidth === 'number' && maxLineWidth !== Infinity) {
+                if (maxLineWidth > 0) {
+                    for (let i = 0; i < lines.length; i++) {
+                        const str = lines[i];
+                        let needCut = true;
+                        if (i === lineCountLimit - 1) {
+                            const clip = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, false);
+                            linesLayout.push({
+                                str: clip.str,
+                                width: clip.width
+                            });
+                            break;
+                        }
+                        const clip = layoutObj.textMeasure.clipText(str, layoutObj.textOptions, maxLineWidth, wordBreak === 'break-word');
+                        if (str !== '' && clip.str === '') {
+                            if (ellipsis) {
+                                const clipEllipsis = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, false);
+                                clip.str = (_c = clipEllipsis.str) !== null && _c !== void 0 ? _c : '';
+                                clip.width = (_d = clipEllipsis.width) !== null && _d !== void 0 ? _d : 0;
+                            }
+                            else {
+                                clip.str = '';
+                                clip.width = 0;
+                            }
+                            needCut = false;
+                        }
+                        linesLayout.push({
+                            str: clip.str,
+                            width: clip.width
+                        });
+                        if (clip.str.length === str.length) ;
+                        else if (needCut) {
+                            const newStr = str.substring(clip.str.length);
+                            lines.splice(i + 1, 0, newStr);
+                        }
+                    }
+                }
+                let maxWidth = 0;
+                linesLayout.forEach(layout => {
+                    maxWidth = Math.max(maxWidth, layout.width);
+                });
+                bboxWH[0] = maxWidth;
+            }
+            else {
+                let lineWidth = 0;
+                let width;
+                let text;
+                for (let i = 0, len = lines.length; i < len; i++) {
+                    if (i === lineCountLimit - 1) {
+                        const clip = layoutObj.textMeasure.clipTextWithSuffix(lines[i], layoutObj.textOptions, maxLineWidth, ellipsis, false);
+                        linesLayout.push({
+                            str: clip.str,
+                            width: clip.width
+                        });
+                        lineWidth = Math.max(lineWidth, clip.width);
+                        break;
+                    }
+                    text = lines[i];
+                    width = layoutObj.textMeasure.measureTextWidth(text, layoutObj.textOptions, wordBreak === 'break-word');
+                    lineWidth = Math.max(lineWidth, width);
+                    linesLayout.push({ str: text, width });
+                }
+                bboxWH[0] = lineWidth;
+            }
+            bboxWH[1] = linesLayout.length * (lineHeight + buf);
+            const bbox = {
+                xOffset: 0,
+                yOffset: 0,
+                width: bboxWH[0],
+                height: bboxWH[1]
+            };
+            layoutObj.LayoutBBox(bbox, textAlign, textBaseline);
+            const layoutData = layoutObj.layoutWithBBox(bbox, linesLayout, textAlign, textBaseline, lineHeight);
+            this.cache.layoutData = layoutData;
+            this.clearUpdateShapeTag();
+            this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height);
+            if (stroke) {
+                this._AABBBounds.expand(lineWidth / 2);
+            }
+            return this._AABBBounds;
+        }
         updateSingallineAABBBounds(text) {
             const textTheme = getTheme(this).text;
             const { direction = textTheme.direction } = this.attribute;
@@ -14419,9 +14538,13 @@
             let width;
             let str;
             const attribute = this.attribute;
-            const { maxLineWidth = textTheme.maxLineWidth, ellipsis = textTheme.ellipsis, textAlign = textTheme.textAlign, textBaseline = textTheme.textBaseline, fontFamily = textTheme.fontFamily, fontSize = textTheme.fontSize, fontWeight = textTheme.fontWeight, stroke = textTheme.stroke, lineWidth = textTheme.lineWidth, wordBreak = textTheme.wordBreak, ignoreBuf = textTheme.ignoreBuf } = attribute;
+            const { maxLineWidth = textTheme.maxLineWidth, ellipsis = textTheme.ellipsis, textAlign = textTheme.textAlign, textBaseline = textTheme.textBaseline, fontFamily = textTheme.fontFamily, fontSize = textTheme.fontSize, fontWeight = textTheme.fontWeight, stroke = textTheme.stroke, lineWidth = textTheme.lineWidth, wordBreak = textTheme.wordBreak, ignoreBuf = textTheme.ignoreBuf, whiteSpace = textTheme.whiteSpace } = attribute;
+            if (whiteSpace === 'normal') {
+                return this.updateWrapAABBBounds(text);
+            }
             const buf = ignoreBuf ? 0 : Math.max(2, fontSize * 0.075);
-            const { lineHeight = (_a = attribute.lineHeight) !== null && _a !== void 0 ? _a : (attribute.fontSize || textTheme.fontSize) + buf } = attribute;
+            const textFontSize = attribute.fontSize || textTheme.fontSize;
+            const lineHeight = (_a = calculateLineHeight(attribute.lineHeight, textFontSize)) !== null && _a !== void 0 ? _a : textFontSize + buf;
             if (!this.shouldUpdateShape() && this.cache) {
                 width = (_b = this.cache.clipedWidth) !== null && _b !== void 0 ? _b : 0;
                 const dx = textDrawOffsetX(textAlign, width);
@@ -14479,7 +14602,8 @@
             const attribute = this.attribute;
             const { ignoreBuf = textTheme.ignoreBuf } = attribute;
             const buf = ignoreBuf ? 0 : 2;
-            const { maxLineWidth = textTheme.maxLineWidth, ellipsis = textTheme.ellipsis, fontSize = textTheme.fontSize, fontWeight = textTheme.fontWeight, fontFamily = textTheme.fontFamily, stroke = textTheme.stroke, lineHeight = (_a = attribute.lineHeight) !== null && _a !== void 0 ? _a : (attribute.fontSize || textTheme.fontSize) + buf, lineWidth = textTheme.lineWidth, verticalMode = textTheme.verticalMode } = attribute;
+            const { maxLineWidth = textTheme.maxLineWidth, ellipsis = textTheme.ellipsis, fontSize = textTheme.fontSize, fontWeight = textTheme.fontWeight, fontFamily = textTheme.fontFamily, stroke = textTheme.stroke, lineWidth = textTheme.lineWidth, verticalMode = textTheme.verticalMode } = attribute;
+            const lineHeight = (_a = calculateLineHeight(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) !== null && _a !== void 0 ? _a : (attribute.fontSize || textTheme.fontSize) + buf;
             let { textAlign = textTheme.textAlign, textBaseline = textTheme.textBaseline } = attribute;
             if (!verticalMode) {
                 const t = textAlign;
@@ -14536,11 +14660,15 @@
             return this._AABBBounds;
         }
         updateHorizontalMultilineAABBBounds(text) {
-            var _a;
+            var _a, _b;
             const textTheme = getTheme(this).text;
             const attribute = this.attribute;
-            const { fontFamily = textTheme.fontFamily, textAlign = textTheme.textAlign, textBaseline = textTheme.textBaseline, fontSize = textTheme.fontSize, fontWeight = textTheme.fontWeight, lineHeight = attribute.lineHeight || attribute.fontSize || textTheme.fontSize, ellipsis = textTheme.ellipsis, maxLineWidth, stroke = textTheme.stroke, lineWidth = textTheme.lineWidth, wordBreak = textTheme.wordBreak } = attribute;
-            if (!this.shouldUpdateShape() && ((_a = this.cache) === null || _a === void 0 ? void 0 : _a.layoutData)) {
+            const { fontFamily = textTheme.fontFamily, textAlign = textTheme.textAlign, textBaseline = textTheme.textBaseline, fontSize = textTheme.fontSize, fontWeight = textTheme.fontWeight, ellipsis = textTheme.ellipsis, maxLineWidth, stroke = textTheme.stroke, lineWidth = textTheme.lineWidth, whiteSpace = textTheme.whiteSpace } = attribute;
+            const lineHeight = (_a = calculateLineHeight(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) !== null && _a !== void 0 ? _a : (attribute.fontSize || textTheme.fontSize);
+            if (whiteSpace === 'normal') {
+                return this.updateWrapAABBBounds(text);
+            }
+            if (!this.shouldUpdateShape() && ((_b = this.cache) === null || _b === void 0 ? void 0 : _b.layoutData)) {
                 const bbox = this.cache.layoutData.bbox;
                 this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height);
                 if (stroke) {
@@ -14568,7 +14696,8 @@
             const attribute = this.attribute;
             const { ignoreBuf = textTheme.ignoreBuf } = attribute;
             const buf = ignoreBuf ? 0 : 2;
-            const { maxLineWidth = textTheme.maxLineWidth, ellipsis = textTheme.ellipsis, fontFamily = textTheme.fontFamily, fontSize = textTheme.fontSize, fontWeight = textTheme.fontWeight, stroke = textTheme.stroke, lineHeight = (_a = attribute.lineHeight) !== null && _a !== void 0 ? _a : (attribute.fontSize || textTheme.fontSize) + buf, lineWidth = textTheme.lineWidth, verticalMode = textTheme.verticalMode } = attribute;
+            const { maxLineWidth = textTheme.maxLineWidth, ellipsis = textTheme.ellipsis, fontFamily = textTheme.fontFamily, fontSize = textTheme.fontSize, fontWeight = textTheme.fontWeight, stroke = textTheme.stroke, lineWidth = textTheme.lineWidth, verticalMode = textTheme.verticalMode } = attribute;
+            const lineHeight = (_a = calculateLineHeight(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) !== null && _a !== void 0 ? _a : (attribute.fontSize || textTheme.fontSize) + buf;
             let { textAlign = textTheme.textAlign, textBaseline = textTheme.textBaseline } = attribute;
             if (!verticalMode) {
                 const t = textAlign;
@@ -14675,11 +14804,12 @@
             return text != null && text !== '';
         }
         updateMultilineAABBBounds(text) {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             const textTheme = getTheme(this).text;
-            const { fontFamily = textTheme.fontFamily, textAlign = textTheme.textAlign, textBaseline = textTheme.textBaseline, fontSize = textTheme.fontSize, lineHeight = this.attribute.lineHeight || this.attribute.fontSize || textTheme.fontSize, ellipsis = textTheme.ellipsis, maxLineWidth, stroke = textTheme.stroke, lineWidth = textTheme.lineWidth, wordBreak = textTheme.wordBreak, fontWeight = textTheme.fontWeight, ignoreBuf = textTheme.ignoreBuf, heightLimit = 0, lineClamp } = this.attribute;
+            const { fontFamily = textTheme.fontFamily, textAlign = textTheme.textAlign, textBaseline = textTheme.textBaseline, fontSize = textTheme.fontSize, ellipsis = textTheme.ellipsis, maxLineWidth, stroke = textTheme.stroke, lineWidth = textTheme.lineWidth, wordBreak = textTheme.wordBreak, fontWeight = textTheme.fontWeight, ignoreBuf = textTheme.ignoreBuf, heightLimit = 0, lineClamp } = this.attribute;
+            const lineHeight = (_a = calculateLineHeight(this.attribute.lineHeight, this.attribute.fontSize || textTheme.fontSize)) !== null && _a !== void 0 ? _a : (this.attribute.fontSize || textTheme.fontSize);
             const buf = ignoreBuf ? 0 : 2;
-            if (!this.shouldUpdateShape() && ((_a = this.cache) === null || _a === void 0 ? void 0 : _a.layoutData)) {
+            if (!this.shouldUpdateShape() && ((_b = this.cache) === null || _b === void 0 ? void 0 : _b.layoutData)) {
                 const bbox = this.cache.layoutData.bbox;
                 this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height);
                 if (stroke) {
@@ -14716,8 +14846,8 @@
                         if (str !== '' && clip.str === '') {
                             if (ellipsis) {
                                 const clipEllipsis = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, false);
-                                clip.str = (_b = clipEllipsis.str) !== null && _b !== void 0 ? _b : '';
-                                clip.width = (_c = clipEllipsis.width) !== null && _c !== void 0 ? _c : 0;
+                                clip.str = (_c = clipEllipsis.str) !== null && _c !== void 0 ? _c : '';
+                                clip.width = (_d = clipEllipsis.width) !== null && _d !== void 0 ? _d : 0;
                             }
                             else {
                                 clip.str = '';
@@ -15559,6 +15689,13 @@
     builtinSymbols.forEach(symbol => {
         builtinSymbolsMap[symbol.type] = symbol;
     });
+    const builtInSymbolStrMap = {
+        arrowLeft: 'M 0.25 -0.5 L -0.25 0 l 0.5 0.5',
+        arrowRight: 'M -0.25 -0.5 l 0.5 0.5 l -0.5 0.5',
+        rect: 'M -0.5,0.25 L 0.5,0.25 L 0.5,-0.25,L -0.5,-0.25 Z',
+        rectRound: 'M 0.3 -0.5 C 0.41 -0.5 0.5 -0.41 0.5 -0.3 C 0.5 -0.3 0.5 0.3 0.5 0.3 C 0.5 0.41 0.41 0.5 0.3 0.5 C 0.3 0.5 -0.3 0.5 -0.3 0.5 C -0.41 0.5 -0.5 0.41 -0.5 0.3 C -0.5 0.3 -0.5 -0.3 -0.5 -0.3 C -0.5 -0.41 -0.41 -0.5 -0.3 -0.5 C -0.3 -0.5 0.3 -0.5 0.3 -0.5 Z',
+        roundLine: 'M 1.2392 -0.258 L -1.3432 -0.258 C -1.4784 -0.258 -1.588 -0.1436 -1.588 -0.002 c 0 0.1416 0.1096 0.256 0.2448 0.256 l 2.5824 0 c 0.1352 0 0.2448 -0.1144 0.2448 -0.256 C 1.484 -0.1436 1.3744 -0.258 1.2392 -0.258 z'
+    };
 
     const SYMBOL_UPDATE_TAG_KEY = ['symbolType', 'size', ...GRAPHIC_UPDATE_TAG_KEY];
     let Symbol$1 = class Symbol extends Graphic {
@@ -15583,7 +15720,7 @@
         }
         doUpdateParsedPath() {
             const symbolTheme = getTheme(this).symbol;
-            const { symbolType = symbolTheme.symbolType } = this.attribute;
+            let { symbolType = symbolTheme.symbolType } = this.attribute;
             let path = builtinSymbolsMap[symbolType];
             if (path) {
                 this._parsedPath = path;
@@ -15594,6 +15731,8 @@
                 this._parsedPath = path;
                 return path;
             }
+            const _symbolType = builtInSymbolStrMap[symbolType];
+            symbolType = _symbolType || symbolType;
             const valid = isSvg(symbolType);
             if (valid === true) {
                 const parser = new XMLParser();
@@ -16343,8 +16482,9 @@
         constructor(text, newLine, character) {
             this.fontSize = character.fontSize || 16;
             this.textBaseline = character.textBaseline || 'alphabetic';
-            if (typeof character.lineHeight === 'number') {
-                this.lineHeight = character.lineHeight > this.fontSize ? character.lineHeight : this.fontSize;
+            const lineHeight = calculateLineHeight(character.lineHeight, this.fontSize);
+            if (typeof lineHeight === 'number') {
+                this.lineHeight = lineHeight > this.fontSize ? lineHeight : this.fontSize;
             }
             else {
                 this.lineHeight = Math.floor(1.2 * this.fontSize);
@@ -20861,7 +21001,7 @@
                 textAlign = (_a = text.getBaselineMapAlign()[textBaseline]) !== null && _a !== void 0 ? _a : 'left';
                 textBaseline = (_b = text.getAlignMapBaseline()[t]) !== null && _b !== void 0 ? _b : 'top';
             }
-            const lineHeight = (_c = text.attribute.lineHeight) !== null && _c !== void 0 ? _c : fontSize;
+            const lineHeight = (_c = calculateLineHeight(text.attribute.lineHeight, fontSize)) !== null && _c !== void 0 ? _c : fontSize;
             const data = this.valid(text, textAttribute, fillCb, strokeCb);
             if (!data) {
                 return;
@@ -26124,6 +26264,19 @@
                 this.setAttributes({ background: this._background });
             }
         }
+        preventRender(prevent) {
+            if (prevent) {
+                this._skipRender = -Infinity;
+            }
+            else {
+                if (this.params && this.params.optimize && this.params.optimize.skipRenderWithOutRange !== false) {
+                    this._skipRender = this.window.isVisible() ? 0 : 1;
+                }
+                else {
+                    this._skipRender = 0;
+                }
+            }
+        }
         optmize(params) {
             this.optmizeRender(params === null || params === void 0 ? void 0 : params.skipRenderWithOutRange);
         }
@@ -26131,8 +26284,11 @@
             if (!skipRenderWithOutRange) {
                 return;
             }
-            this._skipRender = this.window.isVisible() ? 0 : 1;
+            this._skipRender = this._skipRender < 0 ? this._skipRender : this.window.isVisible() ? 0 : 1;
             this.window.onVisibleChange(visible => {
+                if (this._skipRender < 0) {
+                    return;
+                }
                 if (visible) {
                     if (this.dirtyBounds) {
                         this.dirtyBounds.setValue(0, 0, this._viewBox.width(), this._viewBox.height());
@@ -27497,9 +27653,11 @@
     exports.bindContributionProvider = bindContributionProvider;
     exports.bindContributionProviderNoSingletonScope = bindContributionProviderNoSingletonScope;
     exports.boundStroke = boundStroke;
+    exports.builtInSymbolStrMap = builtInSymbolStrMap;
     exports.builtinSymbols = builtinSymbols;
     exports.builtinSymbolsMap = builtinSymbolsMap;
     exports.calcLineCache = calcLineCache$1;
+    exports.calculateLineHeight = calculateLineHeight;
     exports.centroidOfSubpath = centroidOfSubpath;
     exports.circleBounds = circleBounds;
     exports.clock = clock;