@visactor/vrender-core 0.21.0-alpha.4 → 0.21.0-beta.0

package/dist/index.es.js

@@ -3055,7 +3055,7 @@ const DefaultConnectAttribute = {
 const DefaultDebugAttribute = {
     _debug_bounds: false
 };
-const DefaultAttribute = Object.assign(Object.assign(Object.assign({ strokeSeg: null, renderable: true, pickable: true, shadowGraphic: undefined, childrenPickable: true, fillPickable: true, strokePickable: true, visible: true, zIndex: 0, layout: null, boundsPadding: 0, fillStrokeOrder: 0, renderStyle: 'default', pickMode: 'accurate', customPickShape: null, boundsMode: 'accurate', keepDirIn3d: true, shadowRootIdx: 1, globalZIndex: 1, globalCompositeOperation: '', overflow: 'hidden', shadowPickMode: 'graphic' }, DefaultDebugAttribute), DefaultStyle), DefaultTransform);
+const DefaultAttribute = Object.assign(Object.assign(Object.assign({ strokeSeg: null, renderable: true, pickable: true, shadowGraphic: undefined, childrenPickable: true, fillPickable: true, strokePickable: true, visible: true, zIndex: 0, layout: null, boundsPadding: 0, fillStrokeOrder: 0, renderStyle: 'default', pickMode: 'accurate', customPickShape: null, boundsMode: 'accurate', keepDirIn3d: true, shadowRootIdx: 1, globalZIndex: 1, globalCompositeOperation: '', overflow: 'hidden', shadowPickMode: 'graphic', keepStrokeScale: false }, DefaultDebugAttribute), DefaultStyle), DefaultTransform);
 function addAttributeToPrototype(obj, c, keys) {
     keys.forEach(key => {
         c.prototype[key] = obj[key];
@@ -6841,7 +6841,7 @@ class TimeOutTickHandler {
     }
 }
 
-class DefaultTicker {
+class DefaultTicker extends EventEmitter {
     set mode(m) {
         if (this._mode === m) {
             return;
@@ -6853,18 +6853,19 @@ class DefaultTicker {
         return this._mode;
     }
     constructor(timelines = []) {
+        super();
         this.handleTick = (handler, params) => {
             const { once = false } = params !== null && params !== void 0 ? params : {};
             if (this.ifCanStop()) {
                 this.stop();
                 return;
             }
-            this._handlerTick(handler);
+            this._handlerTick();
             if (!once) {
                 handler.tick(this.interval, this.handleTick);
             }
         };
-        this._handlerTick = (handler) => {
+        this._handlerTick = () => {
             const tickerHandler = this.tickerHandler;
             const time = tickerHandler.getTime();
             let delta = 0;
@@ -6879,6 +6880,7 @@ class DefaultTicker {
             this.timelines.forEach(t => {
                 t.tick(delta);
             });
+            this.emit('afterTick');
         };
         this.init();
         this.lastFrameTime = -1;
@@ -7018,6 +7020,11 @@ class DefaultTicker {
         this.setupTickHandler();
         this.lastFrameTime = -1;
     }
+    trySyncTickStatus() {
+        if (this.status === STATUS$1.RUNNING) {
+            this._handlerTick();
+        }
+    }
 }
 
 class ManualTickHandler {
@@ -8838,6 +8845,11 @@ class TagPointsUpdate extends ACustomAnimate {
                     this.clipRange =
                         this.toPoints[lastMatchedIndex][this.clipRangeByDimension] /
                             this.toPoints[this.toPoints.length - 1][this.clipRangeByDimension];
+                    if (this.clipRange === 1) {
+                        this.shrinkClipRange =
+                            this.toPoints[lastMatchedIndex][this.clipRangeByDimension] /
+                                this.fromPoints[this.fromPoints.length - 1][this.clipRangeByDimension];
+                    }
                     if (!isValidNumber(this.clipRange)) {
                         this.clipRange = 0;
                     }
@@ -8877,6 +8889,12 @@ class TagPointsUpdate extends ACustomAnimate {
             return newPoint;
         });
     }
+    onFirstRun() {
+        const lastClipRange = this.target.attribute.clipRange;
+        if (isValidNumber(lastClipRange * this.clipRange)) {
+            this.clipRange *= lastClipRange;
+        }
+    }
     onUpdate(end, ratio, out) {
         this.points = this.points.map((point, index) => {
             const newPoint = pointInterpolation(this.interpolatePoints[index][0], this.interpolatePoints[index][1], ratio);
@@ -8884,6 +8902,17 @@ class TagPointsUpdate extends ACustomAnimate {
             return newPoint;
         });
         if (this.clipRange) {
+            if (this.shrinkClipRange) {
+                if (!end) {
+                    out.points = this.fromPoints;
+                    out.clipRange = this.clipRange - (this.clipRange - this.shrinkClipRange) * ratio;
+                }
+                else {
+                    out.points = this.toPoints;
+                    out.clipRange = 1;
+                }
+                return;
+            }
             out.clipRange = this.clipRange + (1 - this.clipRange) * ratio;
         }
         if (this.segmentsCache && this.to.segments) {
@@ -10810,10 +10839,10 @@ class ResourceLoader {
     static GetFile(url, type) {
         let data = ResourceLoader.cache.get(url);
         if (data) {
-            if (data.loadState === 'fail') {
+            if (data.loadState === 'init' || data.loadState === 'fail') {
                 return Promise.reject();
             }
-            else if (data.loadState === 'init' || data.loadState === 'loading') {
+            else if (data.loadState === 'loading') {
                 return data.dataPromise.then(data => data.data);
             }
             return Promise.resolve(data.data);
@@ -15409,14 +15438,14 @@ class DefaultArcRenderContribution {
         if (!(doOuterBorder || doInnerBorder)) {
             return;
         }
-        const { innerPadding = arcAttribute.innerPadding, outerPadding = arcAttribute.outerPadding, startAngle = arcAttribute.startAngle, endAngle = arcAttribute.endAngle, opacity = arcAttribute.opacity, x: originX = arcAttribute.x, y: originY = arcAttribute.y, scaleX = arcAttribute.scaleX, scaleY = arcAttribute.scaleY } = arc.attribute;
+        const { innerPadding = arcAttribute.innerPadding, outerPadding = arcAttribute.outerPadding, startAngle = arcAttribute.startAngle, endAngle = arcAttribute.endAngle, opacity = arcAttribute.opacity, x: originX = arcAttribute.x, y: originY = arcAttribute.y, scaleX = arcAttribute.scaleX, scaleY = arcAttribute.scaleY, keepStrokeScale = arcAttribute.keepStrokeScale } = arc.attribute;
         let { innerRadius = arcAttribute.innerRadius, outerRadius = arcAttribute.outerRadius } = arc.attribute;
         outerRadius += outerPadding;
         innerRadius -= innerPadding;
         const renderBorder = (borderStyle, key) => {
             const doStroke = !!(borderStyle && borderStyle.stroke);
             const { distance = arcAttribute[key].distance } = borderStyle;
-            const d = getScaledStroke(context, distance, context.dpr);
+            const d = keepStrokeScale ? distance : getScaledStroke(context, distance, context.dpr);
             const deltaAngle = distance / outerRadius;
             const sign = key === 'outerBorder' ? 1 : -1;
             arc.setAttributes({
@@ -15461,11 +15490,11 @@ class DefaultCircleRenderContribution {
         if (!(doOuterBorder || doInnerBorder)) {
             return;
         }
-        const { radius = circleAttribute.radius, startAngle = circleAttribute.startAngle, endAngle = circleAttribute.endAngle, opacity = circleAttribute.opacity, x: originX = circleAttribute.x, y: originY = circleAttribute.y, scaleX = circleAttribute.scaleX, scaleY = circleAttribute.scaleY } = circle.attribute;
+        const { radius = circleAttribute.radius, startAngle = circleAttribute.startAngle, endAngle = circleAttribute.endAngle, opacity = circleAttribute.opacity, x: originX = circleAttribute.x, y: originY = circleAttribute.y, scaleX = circleAttribute.scaleX, scaleY = circleAttribute.scaleY, keepStrokeScale = circleAttribute.keepStrokeScale } = circle.attribute;
         const renderBorder = (borderStyle, key) => {
             const doStroke = !!(borderStyle && borderStyle.stroke);
             const { distance = circleAttribute[key].distance } = borderStyle;
-            const d = getScaledStroke(context, distance, context.dpr);
+            const d = keepStrokeScale ? distance : getScaledStroke(context, distance, context.dpr);
             const sign = key === 'outerBorder' ? 1 : -1;
             context.beginPath();
             context.arc(x, y, radius + sign * d, startAngle, endAngle);
@@ -15650,7 +15679,7 @@ class DefaultRectRenderContribution {
         if (!(doOuterBorder || doInnerBorder)) {
             return;
         }
-        const { cornerRadius = rectAttribute.cornerRadius, opacity = rectAttribute.opacity, x: originX = rectAttribute.x, y: originY = rectAttribute.y, scaleX = rectAttribute.scaleX, scaleY = rectAttribute.scaleY, x1, y1 } = rect.attribute;
+        const { cornerRadius = rectAttribute.cornerRadius, opacity = rectAttribute.opacity, x: originX = rectAttribute.x, y: originY = rectAttribute.y, scaleX = rectAttribute.scaleX, scaleY = rectAttribute.scaleY, x1, y1, keepStrokeScale = rectAttribute.keepStrokeScale } = rect.attribute;
         let { width, height } = rect.attribute;
         width = (width !== null && width !== void 0 ? width : x1 - x) || 0;
         height = (height !== null && height !== void 0 ? height : y1 - y) || 0;
@@ -15658,7 +15687,7 @@ class DefaultRectRenderContribution {
             const doStroke = !!(borderStyle && borderStyle.stroke);
             const sign = key === 'outerBorder' ? -1 : 1;
             const { distance = rectAttribute[key].distance } = borderStyle;
-            const d = getScaledStroke(context, distance, context.dpr);
+            const d = keepStrokeScale ? distance : getScaledStroke(context, distance, context.dpr);
             const nextX = x + sign * d;
             const nextY = y + sign * d;
             const dw = d * 2;
@@ -15874,13 +15903,8 @@ class DefaultImageRenderContribution extends DefaultRectRenderContribution {
         this.useStyle = true;
         this.order = 0;
     }
-    drawShape(image, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb) {
-        if (image.isGifImage && image.renderFrame && image.playing) {
-            image.renderFrame(context, x, y);
-        }
-        else {
-            return super.drawShape(image, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb);
-        }
+    drawShape(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb) {
+        return super.drawShape(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb);
     }
 }
 const defaultImageRenderContribution = new DefaultImageRenderContribution();
@@ -15903,11 +15927,11 @@ class DefaultSymbolRenderContribution {
         if (!(doOuterBorder || doInnerBorder)) {
             return;
         }
-        const { size = symbolAttribute.size, opacity = symbolAttribute.opacity, x: originX = symbolAttribute.x, y: originY = symbolAttribute.y, scaleX = symbolAttribute.scaleX, scaleY = symbolAttribute.scaleY } = symbol.attribute;
+        const { size = symbolAttribute.size, opacity = symbolAttribute.opacity, x: originX = symbolAttribute.x, y: originY = symbolAttribute.y, scaleX = symbolAttribute.scaleX, scaleY = symbolAttribute.scaleY, keepStrokeScale = symbolAttribute.keepStrokeScale } = symbol.attribute;
         const renderBorder = (borderStyle, key) => {
             const doStroke = !!(borderStyle && borderStyle.stroke);
             const { distance = symbolAttribute[key].distance } = borderStyle;
-            const d = getScaledStroke(context, distance, context.dpr);
+            const d = keepStrokeScale ? distance : getScaledStroke(context, distance, context.dpr);
             const sign = key === 'outerBorder' ? 1 : -1;
             context.beginPath();
             if (parsedPath.drawOffset(context, size, x, y, sign * d) === false) {
@@ -18455,18 +18479,16 @@ let DefaultCanvasImageRender = class DefaultCanvasImageRender extends BaseRender
     }
     draw(image, renderService, drawContext) {
         const { image: url } = image.attribute;
-        if (!image.isGifImage) {
-            if (!url || !image.resources) {
-                return;
-            }
-            const res = image.resources.get(url);
-            if (res.state === 'loading' && isString(url)) {
-                ResourceLoader.improveImageLoading(url);
-                return;
-            }
-            else if (res.state !== 'success') {
-                return;
-            }
+        if (!url || !image.resources) {
+            return;
+        }
+        const res = image.resources.get(url);
+        if (res.state === 'loading' && isString(url)) {
+            ResourceLoader.improveImageLoading(url);
+            return;
+        }
+        else if (res.state !== 'success') {
+            return;
         }
         const { context } = renderService.drawParams;
         if (!context) {
@@ -19876,6 +19898,9 @@ class BaseSymbol {
             bounds.y2 = size[1] / 2;
         }
     }
+    parseSize(size) {
+        return isNumber(size) ? size : Math.min(size[0], size[1]);
+    }
 }
 
 function circle(ctx, r, x, y, z) {
@@ -19894,15 +19919,15 @@ class CircleSymbol extends BaseSymbol {
         this.pathStr = 'M0.5,0A0.5,0.5,0,1,1,-0.5,0A0.5,0.5,0,1,1,0.5,0';
     }
     draw(ctx, size, x, y, z) {
-        const r = size / 2;
+        const r = this.parseSize(size) / 2;
         return circle(ctx, r, x, y, z);
     }
     drawOffset(ctx, size, x, y, offset, z) {
-        const r = size / 2 + offset;
+        const r = this.parseSize(size) / 2 + offset;
         return circle(ctx, r, x, y, z);
     }
     drawToSvgPath(size, x, y, z) {
-        const r = size / 2;
+        const r = this.parseSize(size) / 2;
         return `M ${x - r}, ${y} a ${r},${r} 0 1,0 ${r * 2},0 a ${r},${r} 0 1,0 -${r * 2},0`;
     }
 }
@@ -19947,11 +19972,11 @@ class CrossSymbol extends BaseSymbol {
         this.pathStr = 'M-0.5,-0.2L-0.5,0.2L-0.2,0.2L-0.2,0.5L0.2,0.5L0.2,0.2L0.5,0.2L0.5,-0.2L0.2,-0.2L0.2,-0.5L-0.2,-0.5L-0.2,-0.2Z';
     }
     draw(ctx, size, x, y, z) {
-        const r = size / 6;
+        const r = this.parseSize(size) / 6;
         return cross(ctx, r, x, y, z);
     }
     drawOffset(ctx, size, x, y, offset, z) {
-        const r = size / 6;
+        const r = this.parseSize(size) / 6;
         return crossOffset(ctx, r, x, y, offset, z);
     }
 }
@@ -19972,15 +19997,15 @@ class DiamondSymbol extends BaseSymbol {
         this.pathStr = 'M-0.5,0L0,-0.5L0.5,0L0,0.5Z';
     }
     draw(ctx, size, x, y, z) {
-        const r = size / 2;
+        const r = this.parseSize(size) / 2;
         return diamond(ctx, r, x, y, z);
     }
     drawFitDir(ctx, size, x, y, z) {
-        const r = size / 2;
+        const r = this.parseSize(size) / 2;
         return diamond(ctx, r, x, y, z);
     }
     drawOffset(ctx, size, x, y, offset, z) {
-        const r = size / 2 + offset;
+        const r = this.parseSize(size) / 2 + offset;
         return diamond(ctx, r, x, y, z);
     }
 }
@@ -19998,11 +20023,11 @@ class SquareSymbol extends BaseSymbol {
         this.pathStr = 'M-0.5,-0.5h1v1h-1Z';
     }
     draw(ctx, size, x, y) {
-        const r = size / 2;
+        const r = this.parseSize(size) / 2;
         return square(ctx, r, x, y);
     }
     drawOffset(ctx, size, x, y, offset) {
-        const r = size / 2 + offset;
+        const r = this.parseSize(size) / 2 + offset;
         return square(ctx, r, x, y);
     }
 }
@@ -20022,11 +20047,11 @@ class TriangleUpSymbol extends BaseSymbol {
         this.pathStr = 'M0.5,0.5 L-0.5,0.5 L0,-0.5 Z';
     }
     draw(ctx, size, x, y) {
-        const r = size / 2;
+        const r = this.parseSize(size) / 2;
         return trianglUpOffset(ctx, r, x, y);
     }
     drawOffset(ctx, size, x, y, offset) {
-        const r = size / 2;
+        const r = this.parseSize(size) / 2;
         return trianglUpOffset(ctx, r, x, y, offset);
     }
 }
@@ -20065,11 +20090,11 @@ class StarSymbol extends BaseSymbol {
         this.pathStr = 'M0 -1L0.22451398828979266 -0.3090169943749474L0.9510565162951535 -0.30901699437494745L0.3632712640026804 0.1180339887498948L0.5877852522924732 0.8090169943749473L8.326672684688674e-17 0.3819660112501051L-0.587785252292473 0.8090169943749476L-0.3632712640026804 0.11803398874989487L-0.9510565162951536 -0.30901699437494723L-0.22451398828979274 -0.30901699437494734Z';
     }
     draw(ctx, size, transX, transY) {
-        const r = size / 2;
+        const r = this.parseSize(size) / 2;
         return star(ctx, r, transX, transY);
     }
     drawOffset(ctx, size, transX, transY, offset) {
-        const r = size / 2 + offset;
+        const r = this.parseSize(size) / 2 + offset;
         return star(ctx, r, transX, transY);
     }
 }
@@ -20098,11 +20123,11 @@ class ArrowSymbol extends BaseSymbol {
         this.pathStr = 'M-0.07142857142857142,0.5L0.07142857142857142,0.5L0.07142857142857142,-0.0625L0.2,-0.0625L0,-0.5L-0.2,-0.0625L-0.07142857142857142,-0.0625Z';
     }
     draw(ctx, size, transX, transY) {
-        const r = size / 2;
+        const r = this.parseSize(size) / 2;
         return arrow(ctx, r, transX, transY);
     }
     drawOffset(ctx, size, transX, transY, offset) {
-        const r = size / 2 + offset;
+        const r = this.parseSize(size) / 2 + offset;
         return arrow(ctx, r, transX, transY);
     }
 }
@@ -20123,11 +20148,11 @@ class WedgeSymbol extends BaseSymbol {
         this.pathStr = 'M0,-0.5773502691896257L-0.125,0.28867513459481287L0.125,0.28867513459481287Z';
     }
     draw(ctx, size, transX, transY) {
-        const r = size / 2;
+        const r = this.parseSize(size) / 2;
         return wedge(ctx, r, transX, transY);
     }
     drawOffset(ctx, size, transX, transY, offset) {
-        const r = size / 2 + offset;
+        const r = this.parseSize(size) / 2 + offset;
         return wedge(ctx, r, transX, transY);
     }
 }
@@ -20145,11 +20170,11 @@ class StrokeSymbol extends BaseSymbol {
         this.pathStr = '';
     }
     draw(ctx, size, transX, transY) {
-        const r = size / 2;
+        const r = this.parseSize(size) / 2;
         return stroke(ctx, r, transX, transY);
     }
     drawOffset(ctx, size, transX, transY, offset) {
-        const r = size / 2 + offset;
+        const r = this.parseSize(size) / 2 + offset;
         return stroke(ctx, r, transX, transY);
     }
 }
@@ -20184,11 +20209,11 @@ class WyeSymbol extends BaseSymbol {
         this.pathStr = 'M0.25 0.14433756729740646L0.25 0.6443375672974064L-0.25 0.6443375672974064L-0.25 0.14433756729740643L-0.6830127018922193 -0.10566243270259357L-0.4330127018922193 -0.5386751345948129L0 -0.28867513459481287L0.4330127018922193 -0.5386751345948129L0.6830127018922193 -0.10566243270259357Z';
     }
     draw(ctx, size, transX, transY) {
-        const r = size / 2;
+        const r = this.parseSize(size) / 2;
         return wye(ctx, r, transX, transY);
     }
     drawOffset(ctx, size, transX, transY, offset) {
-        const r = size / 2 + offset;
+        const r = this.parseSize(size) / 2 + offset;
         return wye(ctx, r, transX, transY);
     }
 }
@@ -20208,11 +20233,11 @@ class TriangleLeftSymbol extends BaseSymbol {
         this.pathStr = 'M-0.5,0 L0.5,0.5 L0.5,-0.5 Z';
     }
     draw(ctx, size, x, y) {
-        const r = size / 2;
+        const r = this.parseSize(size) / 2;
         return trianglLeftOffset(ctx, r, x, y, 0);
     }
     drawOffset(ctx, size, x, y, offset) {
-        const r = size / 2;
+        const r = this.parseSize(size) / 2;
         return trianglLeftOffset(ctx, r, x, y, offset);
     }
 }
@@ -20232,11 +20257,11 @@ class TriangleRightSymbol extends BaseSymbol {
         this.pathStr = 'M-0.5,0.5 L0.5,0 L-0.5,-0.5 Z';
     }
     draw(ctx, size, x, y) {
-        const r = size / 2;
+        const r = this.parseSize(size) / 2;
         return trianglRightOffset(ctx, r, x, y);
     }
     drawOffset(ctx, size, x, y, offset) {
-        const r = size / 2;
+        const r = this.parseSize(size) / 2;
         return trianglRightOffset(ctx, r, x, y, offset);
     }
 }
@@ -20256,11 +20281,11 @@ class TriangleDownSymbol extends BaseSymbol {
         this.pathStr = 'M-0.5,-0.5 L0.5,-0.5 L0,0.5 Z';
     }
     draw(ctx, size, x, y) {
-        const r = size / 2;
+        const r = this.parseSize(size) / 2;
         return trianglDownOffset(ctx, r, x, y);
     }
     drawOffset(ctx, size, x, y, offset) {
-        const r = size / 2;
+        const r = this.parseSize(size) / 2;
         return trianglDownOffset(ctx, r, x, y, offset);
     }
 }
@@ -20282,11 +20307,11 @@ class ThinTriangleSymbol extends BaseSymbol {
         this.pathStr = 'M0,-0.5773502691896257L-0.5,0.28867513459481287L0.5,0.28867513459481287Z';
     }
     draw(ctx, size, x, y) {
-        const r = size / 2 / sqrt3;
+        const r = this.parseSize(size) / 2 / sqrt3;
         return thinTriangle(ctx, r, x, y);
     }
     drawOffset(ctx, size, x, y, offset) {
-        const r = size / 2 / sqrt3 + offset;
+        const r = this.parseSize(size) / 2 / sqrt3 + offset;
         return thinTriangle(ctx, r, x, y);
     }
 }
@@ -20306,11 +20331,11 @@ class Arrow2LeftSymbol extends BaseSymbol {
         this.pathStr = 'M 0.25 -0.5 L -0.25 0 l 0.25 0.5';
     }
     draw(ctx, size, transX, transY) {
-        const r = size / 4;
+        const r = this.parseSize(size) / 4;
         return arrow2Left(ctx, r, transX, transY);
     }
     drawOffset(ctx, size, transX, transY, offset) {
-        const r = size / 4 + offset;
+        const r = this.parseSize(size) / 4 + offset;
         return arrow2Left(ctx, r, transX, transY);
     }
 }
@@ -20330,11 +20355,11 @@ class Arrow2RightSymbol extends BaseSymbol {
         this.pathStr = 'M -0.25 -0.5 l 0.25 0 l -0.25 0.5';
     }
     draw(ctx, size, transX, transY) {
-        const r = size / 4;
+        const r = this.parseSize(size) / 4;
         return arrow2Right(ctx, r, transX, transY);
     }
     drawOffset(ctx, size, transX, transY, offset) {
-        const r = size / 4 + offset;
+        const r = this.parseSize(size) / 4 + offset;
         return arrow2Right(ctx, r, transX, transY);
     }
 }
@@ -20354,11 +20379,11 @@ class Arrow2UpSymbol extends BaseSymbol {
         this.pathStr = 'M -0.5 0.25 L 0 -0.25 l 0.5 0.25';
     }
     draw(ctx, size, transX, transY) {
-        const r = size / 4;
+        const r = this.parseSize(size) / 4;
         return arrow2Up(ctx, r, transX, transY);
     }
     drawOffset(ctx, size, transX, transY, offset) {
-        const r = size / 4 + offset;
+        const r = this.parseSize(size) / 4 + offset;
         return arrow2Up(ctx, r, transX, transY);
     }
 }
@@ -20378,11 +20403,11 @@ class Arrow2DownSymbol extends BaseSymbol {
         this.pathStr = 'M -0.5 -0.25 L 0 0.25 l 0.5 -0.25';
     }
     draw(ctx, size, transX, transY) {
-        const r = size / 4;
+        const r = this.parseSize(size) / 4;
         return arrow2Down(ctx, r, transX, transY);
     }
     drawOffset(ctx, size, transX, transY, offset) {
-        const r = size / 4 + offset;
+        const r = this.parseSize(size) / 4 + offset;
         return arrow2Down(ctx, r, transX, transY);
     }
 }
@@ -20400,15 +20425,15 @@ class LineVSymbol extends BaseSymbol {
         this.pathStr = 'M0,-0.5L0,0.5';
     }
     draw(ctx, size, x, y, z) {
-        const r = size / 2;
+        const r = this.parseSize(size) / 2;
         return lineV(ctx, r, x, y);
     }
     drawOffset(ctx, size, x, y, offset, z) {
-        const r = size / 2 + offset;
+        const r = this.parseSize(size) / 2 + offset;
         return lineV(ctx, r, x, y);
     }
     drawToSvgPath(size, x, y, z) {
-        const r = size / 2;
+        const r = this.parseSize(size) / 2;
         return `M ${x}, ${y - r} L ${x},${y + r}`;
     }
 }
@@ -20426,15 +20451,15 @@ class LineHSymbol extends BaseSymbol {
         this.pathStr = 'M-0.5,0L0.5,0';
     }
     draw(ctx, size, x, y, z) {
-        const r = size / 2;
+        const r = this.parseSize(size) / 2;
         return lineH(ctx, r, x, y);
     }
     drawOffset(ctx, size, x, y, offset, z) {
-        const r = size / 2 + offset;
+        const r = this.parseSize(size) / 2 + offset;
         return lineH(ctx, r, x, y);
     }
     drawToSvgPath(size, x, y, z) {
-        const r = size / 2;
+        const r = this.parseSize(size) / 2;
         return `M ${x - r}, ${y} L ${x + r},${y}`;
     }
 }
@@ -20454,15 +20479,15 @@ class CloseSymbol extends BaseSymbol {
         this.pathStr = 'M-0.5,-0.5L0.5,0.5,M0.5,-0.5L-0.5,0.5';
     }
     draw(ctx, size, x, y, z) {
-        const r = size / 2;
+        const r = this.parseSize(size) / 2;
         return close(ctx, r, x, y);
     }
     drawOffset(ctx, size, x, y, offset, z) {
-        const r = size / 2 + offset;
+        const r = this.parseSize(size) / 2 + offset;
         return close(ctx, r, x, y);
     }
     drawToSvgPath(size, x, y, z) {
-        const r = size / 2;
+        const r = this.parseSize(size) / 2;
         return `M ${x - r}, ${y - r} L ${x + r},${y + r} M ${x + r}, ${y - r} L ${x - r},${y + r}`;
     }
 }
@@ -20513,6 +20538,7 @@ class CustomSymbolClass {
         this.isSvg = isSvg;
     }
     drawOffset(ctx, size, x, y, offset, z, cb) {
+        size = this.parseSize(size);
         if (this.isSvg) {
             if (!this.svgCache) {
                 return false;
@@ -20528,9 +20554,14 @@ class CustomSymbolClass {
         return false;
     }
     draw(ctx, size, x, y, z, cb) {
+        size = this.parseSize(size);
         return this.drawOffset(ctx, size, x, y, 0, z, cb);
     }
+    parseSize(size) {
+        return isNumber(size) ? size : Math.min(size[0], size[1]);
+    }
     bounds(size, bounds) {
+        size = this.parseSize(size);
         if (this.isSvg) {
             if (!this.svgCache) {
                 return;
@@ -21550,7 +21581,8 @@ class Paragraph {
             left = 0;
             baseline = 0;
         }
-        if (this.character.stroke) {
+        const { lineWidth = 1 } = this.character;
+        if (this.character.stroke && lineWidth) {
             applyStrokeStyle(ctx, this.character);
             ctx.strokeText(text, left, baseline);
         }
@@ -24707,6 +24739,7 @@ class Stage extends Group {
     constructor(params = {}) {
         var _a;
         super({});
+        this.tickedBeforeRender = true;
         this._onVisibleChange = (visible) => {
             if (this._skipRender < 0) {
                 return;
@@ -24733,6 +24766,15 @@ class Stage extends Group {
             this._afterRender && this._afterRender(stage);
             this._afterNextRenderCbs && this._afterNextRenderCbs.forEach(cb => cb(stage));
             this._afterNextRenderCbs = null;
+            this.tickedBeforeRender = false;
+        };
+        this.afterTickCb = () => {
+            var _a;
+            this.tickedBeforeRender = true;
+            if (((_a = this.params.optimize) === null || _a === void 0 ? void 0 : _a.tickRenderMode) === 'performance') ;
+            else {
+                this.state !== 'rendering' && this.render();
+            }
         };
         this.params = params;
         this.theme = new Theme();
@@ -24800,6 +24842,7 @@ class Stage extends Group {
         if (params.background && isString(this._background) && this._background.includes('/')) {
             this.setAttributes({ background: this._background });
         }
+        this.ticker.on('afterTick', this.afterTickCb);
     }
     pauseRender(sr = -1) {
         this._skipRender = sr;
@@ -25113,6 +25156,9 @@ class Stage extends Group {
         this.timeline.resume();
         const state = this.state;
         this.state = 'rendering';
+        if (!this.tickedBeforeRender) {
+            this.ticker.trySyncTickStatus();
+        }
         this.layerService.prepareStageLayer(this);
         if (!this._skipRender) {
             this.lastRenderparams = params;
@@ -25310,6 +25356,7 @@ class Stage extends Group {
         }
         this.window.release();
         this.ticker.remTimeline(this.timeline);
+        this.ticker.removeListener('afterTick', this.afterTickCb);
         this.renderService.renderTreeRoots = [];
     }
     setStage(stage) {

package/es/animate/Ticker/default-ticker.d.ts

@@ -1,7 +1,8 @@
+import { EventEmitter } from '@visactor/vutils';
 import type { ITickHandler, ITimeline, ITicker } from '../../interface';
 import type { TickerMode } from './type';
 import { STATUS } from './type';
-export declare class DefaultTicker implements ITicker {
+export declare class DefaultTicker extends EventEmitter implements ITicker {
     protected interval: number;
     protected tickerHandler: ITickHandler;
     protected _mode: TickerMode;
@@ -32,5 +33,6 @@ export declare class DefaultTicker implements ITicker {
     protected handleTick: (handler: ITickHandler, params?: {
         once?: boolean;
     }) => void;
-    protected _handlerTick: (handler: ITickHandler) => void;
+    protected _handlerTick: () => void;
+    trySyncTickStatus(): void;
 }