@visactor/vrender-core 0.16.17 → 0.16.18

package/dist/index.js

@@ -4297,9 +4297,10 @@
         verticalMode: 0,
         whiteSpace: 'no-wrap',
         heightLimit: Infinity,
-        lineClamp: Infinity
+        lineClamp: Infinity,
+        suffixPosition: 'end'
     };
-    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 DefaultStyle = Object.assign(Object.assign(Object.assign({ opacity: 1, background: null, texture: null, textureColor: 'black', textureSize: 10, texturePadding: 2, backgroundMode: 'no-repeat', blur: 0, cursor: null, html: null }, DefaultFillStyle), DefaultStrokeStyle), DefaultLayout);
     const DefaultConnectAttribute = {
         connectedType: 'none',
         connectedStyle: {},
@@ -4325,7 +4326,7 @@
     const DefaultGlyphAttribute = Object.assign(Object.assign({}, DefaultAttribute), { path: '', width: 0, height: 0, cornerRadius: 0, clip: false });
     const DefaultLineAttribute = Object.assign(Object.assign(Object.assign({}, DefaultAttribute), DefaultConnectAttribute), { points: [], segments: [], curveType: 'linear', clipRange: 1, clipRangeByDimension: 'default', closePath: false });
     const DefaultPathAttribute = Object.assign(Object.assign({}, DefaultAttribute), { path: new CustomPath2D(), customPath: () => {
-            console.warn('空函数');
+            vutils.Logger.getInstance().warn('空函数');
         } });
     const DefaultPolygonAttribute = Object.assign(Object.assign({}, DefaultAttribute), { points: [], cornerRadius: 0, closePath: true });
     const DefaultRectAttribute = Object.assign(Object.assign({}, DefaultAttribute), { width: 0, height: 0, strokeBoundsBuffer: 0, cornerRadius: 0 });
@@ -4566,7 +4567,7 @@
                 }
             }
             if (verticalList[i] && verticalList[i].text.length > 1) {
-                const clipedData = this._clipText(verticalList[i].text, options, width - length, 0, verticalList[i].text.length - 1);
+                const clipedData = this._clipText(verticalList[i].text, options, width - length, 0, verticalList[i].text.length - 1, 'end', false);
                 if (wordBreak && clipedData.str !== verticalList[i].text) {
                     let text = '';
                     let length = 0;
@@ -4604,7 +4605,7 @@
             if (length > width) {
                 return { str: '', width: 0 };
             }
-            const data = this._clipText(text, options, width, 0, text.length - 1);
+            const data = this._clipText(text, options, width, 0, text.length - 1, 'end', false);
             if (wordBreak && data.str !== text) {
                 const index = testLetter(text, data.str.length);
                 if (index !== data.str.length) {
@@ -4614,7 +4615,23 @@
             }
             return data;
         }
-        _clipText(text, options, width, leftIdx, rightIdx) {
+        _clipText(text, options, width, leftIdx, rightIdx, position, suffix) {
+            let data;
+            if (position === 'end') {
+                data = this._clipTextEnd(text, options, width, leftIdx, rightIdx);
+                suffix && (data.result = data.str + suffix);
+            }
+            else if (position === 'start') {
+                data = this._clipTextStart(text, options, width, leftIdx, rightIdx);
+                suffix && (data.result = suffix + data.str);
+            }
+            else if (position === 'middle') {
+                const d = this._clipTextMiddle(text, options, width, '', '', 0, 0, 1);
+                data = { str: 'none', width: d.width, result: d.left + suffix + d.right };
+            }
+            return data;
+        }
+        _clipTextEnd(text, options, width, leftIdx, rightIdx) {
             const middleIdx = Math.floor((leftIdx + rightIdx) / 2);
             const subText = text.substring(0, middleIdx + 1);
             const strWidth = this.measureTextWidth(subText, options);
@@ -4628,7 +4645,7 @@
                 if (length <= width) {
                     return { str, width: length };
                 }
-                return this._clipText(text, options, width, leftIdx, middleIdx);
+                return this._clipTextEnd(text, options, width, leftIdx, middleIdx);
             }
             else if (strWidth < width) {
                 if (middleIdx >= text.length - 1) {
@@ -4639,11 +4656,53 @@
                 if (length >= width) {
                     return { str: subText, width: strWidth };
                 }
-                return this._clipText(text, options, width, middleIdx, rightIdx);
+                return this._clipTextEnd(text, options, width, middleIdx, rightIdx);
+            }
+            return { str: subText, width: strWidth };
+        }
+        _clipTextStart(text, options, width, leftIdx, rightIdx) {
+            const middleIdx = Math.ceil((leftIdx + rightIdx) / 2);
+            const subText = text.substring(middleIdx - 1, text.length - 1);
+            const strWidth = this.measureTextWidth(subText, options);
+            let length;
+            if (strWidth > width) {
+                if (subText.length <= 1) {
+                    return { str: '', width: 0 };
+                }
+                const str = text.substring(middleIdx, text.length - 1);
+                length = this.measureTextWidth(str, options);
+                if (length <= width) {
+                    return { str, width: length };
+                }
+                return this._clipTextStart(text, options, width, middleIdx, text.length - 1);
+            }
+            else if (strWidth < width) {
+                if (middleIdx <= 0) {
+                    return { str: text, width: this.measureTextWidth(text, options) };
+                }
+                const str = text.substring(middleIdx - 2, text.length - 1);
+                length = this.measureTextWidth(str, options);
+                if (length >= width) {
+                    return { str: subText, width: strWidth };
+                }
+                return this._clipTextStart(text, options, width, leftIdx, middleIdx);
             }
             return { str: subText, width: strWidth };
         }
-        clipTextWithSuffixVertical(verticalList, options, width, suffix, wordBreak) {
+        _clipTextMiddle(text, options, width, left, right, leftW, rightW, buffer) {
+            const subLeftText = text.substring(0, buffer);
+            const strLeftWidth = this.measureTextWidth(subLeftText, options);
+            if (strLeftWidth + rightW > width) {
+                return { left, right, width: leftW + rightW };
+            }
+            const subRightText = text.substring(text.length - buffer, text.length);
+            const strRightWidth = this.measureTextWidth(subRightText, options);
+            if (strLeftWidth + strRightWidth > width) {
+                return { left: subLeftText, right, width: strLeftWidth + rightW };
+            }
+            return this._clipTextMiddle(text, options, width, subLeftText, subRightText, strLeftWidth, strRightWidth, buffer + 1);
+        }
+        clipTextWithSuffixVertical(verticalList, options, width, suffix, wordBreak, suffixPosition) {
             if (suffix === '') {
                 return this.clipTextVertical(verticalList, options, width, wordBreak);
             }
@@ -4660,16 +4719,51 @@
                 return output;
             }
             width -= suffixWidth;
-            const out = this.clipTextVertical(verticalList, options, width, wordBreak);
+            let out;
+            if (suffixPosition === 'start') {
+                const nextVerticalList = this.revertVerticalList(verticalList);
+                out = this.clipTextVertical(nextVerticalList, options, width, wordBreak);
+                const v = this.revertVerticalList(out.verticalList);
+                v.unshift({
+                    text: suffix,
+                    direction: 1,
+                    width: suffixWidth
+                });
+                out.verticalList = v;
+            }
+            else if (suffixPosition === 'middle') {
+                const leftOut = this.clipTextVertical(verticalList, options, width / 2, wordBreak);
+                const nextVerticalList = this.revertVerticalList(verticalList);
+                const rightOut = this.clipTextVertical(nextVerticalList, options, width / 2, wordBreak);
+                leftOut.verticalList.push({
+                    text: suffix,
+                    direction: 1,
+                    width: suffixWidth
+                });
+                this.revertVerticalList(rightOut.verticalList).forEach(v => leftOut.verticalList.push(v));
+                out = {
+                    verticalList: leftOut.verticalList,
+                    width: leftOut.width + rightOut.width
+                };
+            }
+            else {
+                out = this.clipTextVertical(verticalList, options, width, wordBreak);
+                out.verticalList.push({
+                    text: suffix,
+                    direction: 1,
+                    width: suffixWidth
+                });
+            }
             out.width += suffixWidth;
-            out.verticalList.push({
-                text: suffix,
-                direction: 1,
-                width: suffixWidth
-            });
             return out;
         }
-        clipTextWithSuffix(text, options, width, suffix, wordBreak) {
+        revertVerticalList(verticalList) {
+            return verticalList.reverse().map(l => {
+                const t = l.text.split('').reverse().join('');
+                return Object.assign(Object.assign({}, l), { text: t });
+            });
+        }
+        clipTextWithSuffix(text, options, width, suffix, wordBreak, position) {
             if (suffix === '') {
                 return this.clipText(text, options, width, wordBreak);
             }
@@ -4685,7 +4779,7 @@
                 return { str: '', width: 0 };
             }
             width -= suffixWidth;
-            const data = this._clipText(text, options, width, 0, text.length - 1);
+            const data = this._clipText(text, options, width, 0, text.length - 1, position, suffix);
             if (wordBreak && data.str !== text) {
                 const index = testLetter(text, data.str.length);
                 if (index !== data.str.length) {
@@ -4693,7 +4787,7 @@
                     data.width = this.measureTextWidth(data.str, options);
                 }
             }
-            data.str += suffix;
+            data.str = data.result;
             data.width += suffixWidth;
             return data;
         }
@@ -5701,7 +5795,7 @@
                     }
                     else {
                         this.combinedTheme = this._defaultTheme;
-                        console.warn('未知错误，走到不应该走的区域里');
+                        vutils.Logger.getInstance().warn('未知错误，走到不应该走的区域里');
                     }
                     this.dirty = false;
                 }
@@ -6005,7 +6099,7 @@
         }
         insertInto(newNode, idx) {
             if (!this._ignoreWarn && this._nodeList) {
-                console.warn('insertIntoKeepIdx和insertInto混用可能会存在错误');
+                vutils.Logger.getInstance().warn('insertIntoKeepIdx和insertInto混用可能会存在错误');
             }
             if (idx >= this.childrenCount) {
                 return this.appendChild(newNode);
@@ -6412,10 +6506,22 @@
             this.eventPhase = FederatedEvent.prototype.NONE;
             this.propagationStopped = false;
             this.propagationImmediatelyStopped = false;
-            this.layer = new vutils.Point();
-            this.page = new vutils.Point();
-            this.canvas = new vutils.Point();
-            this.viewport = new vutils.Point();
+            this.layer = {
+                x: 0,
+                y: 0
+            };
+            this.page = {
+                x: 0,
+                y: 0
+            };
+            this.canvas = {
+                x: 0,
+                y: 0
+            };
+            this.viewport = {
+                x: 0,
+                y: 0
+            };
             this.NONE = 0;
             this.CAPTURING_PHASE = 1;
             this.AT_TARGET = 2;
@@ -6457,11 +6563,26 @@
     class FederatedMouseEvent extends FederatedEvent {
         constructor() {
             super(...arguments);
-            this.client = new vutils.Point();
-            this.movement = new vutils.Point();
-            this.offset = new vutils.Point();
-            this.global = new vutils.Point();
-            this.screen = new vutils.Point();
+            this.client = {
+                x: 0,
+                y: 0
+            };
+            this.movement = {
+                x: 0,
+                y: 0
+            };
+            this.offset = {
+                x: 0,
+                y: 0
+            };
+            this.global = {
+                x: 0,
+                y: 0
+            };
+            this.screen = {
+                x: 0,
+                y: 0
+            };
         }
         get clientX() {
             return this.client.x;
@@ -6591,7 +6712,7 @@
             this.eventPool = new Map();
             this.onPointerDown = (from, target) => {
                 if (!(from instanceof FederatedPointerEvent)) {
-                    console.warn('EventManager cannot map a non-pointer event as a pointer event');
+                    vutils.Logger.getInstance().warn('EventManager cannot map a non-pointer event as a pointer event');
                     return;
                 }
                 const e = this.createPointerEvent(from, from.type, target);
@@ -6610,7 +6731,7 @@
             this.onPointerMove = (from, target) => {
                 var _a, _b;
                 if (!(from instanceof FederatedPointerEvent)) {
-                    console.warn('EventManager cannot map a non-pointer event as a pointer event');
+                    vutils.Logger.getInstance().warn('EventManager cannot map a non-pointer event as a pointer event');
                     return;
                 }
                 const e = this.createPointerEvent(from, from.type, target);
@@ -6684,7 +6805,7 @@
             this.onPointerOver = (from, target) => {
                 var _a, _b;
                 if (!(from instanceof FederatedPointerEvent)) {
-                    console.warn('EventManager cannot map a non-pointer event as a pointer event');
+                    vutils.Logger.getInstance().warn('EventManager cannot map a non-pointer event as a pointer event');
                     return;
                 }
                 const trackingData = this.trackingData(from.pointerId);
@@ -6713,7 +6834,7 @@
             };
             this.onPointerOut = (from, target) => {
                 if (!(from instanceof FederatedPointerEvent)) {
-                    console.warn('EventManager cannot map a non-pointer event as a pointer event');
+                    vutils.Logger.getInstance().warn('EventManager cannot map a non-pointer event as a pointer event');
                     return;
                 }
                 const trackingData = this.trackingData(from.pointerId);
@@ -6744,7 +6865,7 @@
             this.onPointerUp = (from, target) => {
                 var _a;
                 if (!(from instanceof FederatedPointerEvent)) {
-                    console.warn('EventManager cannot map a non-pointer event as a pointer event');
+                    vutils.Logger.getInstance().warn('EventManager cannot map a non-pointer event as a pointer event');
                     return;
                 }
                 const now = clock.now();
@@ -6815,7 +6936,7 @@
             };
             this.onPointerUpOutside = (from, target) => {
                 if (!(from instanceof FederatedPointerEvent)) {
-                    console.warn('EventManager cannot map a non-pointer event as a pointer event');
+                    vutils.Logger.getInstance().warn('EventManager cannot map a non-pointer event as a pointer event');
                     return;
                 }
                 const trackingData = this.trackingData(from.pointerId);
@@ -6840,7 +6961,7 @@
             };
             this.onWheel = (from, target) => {
                 if (!(from instanceof FederatedWheelEvent)) {
-                    console.warn('EventManager cannot map a non-wheel event as a wheel event');
+                    vutils.Logger.getInstance().warn('EventManager cannot map a non-wheel event as a wheel event');
                     return;
                 }
                 const wheelEvent = this.createWheelEvent(from, target);
@@ -6904,7 +7025,7 @@
                 }
             }
             else {
-                console.warn(`[EventManager]: Event mapping not defined for ${e.type}`);
+                vutils.Logger.getInstance().warn(`[EventManager]: Event mapping not defined for ${e.type}`);
             }
         }
         propagate(e, type) {
@@ -7038,16 +7159,13 @@
             to.altKey = from.altKey;
             to.button = from.button;
             to.buttons = from.buttons;
-            to.client.copyFrom(from.client);
             to.ctrlKey = from.ctrlKey;
             to.shiftKey = from.shiftKey;
             to.metaKey = from.metaKey;
-            to.movement.copyFrom(from.movement);
-            to.canvas.copyFrom(from.canvas);
-            to.screen.copyFrom(from.screen);
-            to.global.copyFrom(from.global);
-            to.offset.copyFrom(from.offset);
-            to.viewport.copyFrom(from.viewport);
+            ['client', 'movement', 'canvas', 'screen', 'global', 'offset', 'viewport'].forEach(key => {
+                to[key].x = from[key].x;
+                to[key].y = from[key].y;
+            });
         }
         copyData(from, to) {
             to.isTrusted = from.isTrusted;
@@ -7057,8 +7175,10 @@
             to.detail = from.detail;
             to.view = from.view;
             to.which = from.which;
-            to.layer.copyFrom(from.layer);
-            to.page.copyFrom(from.page);
+            to.layer.x = from.layer.x;
+            to.layer.y = from.layer.y;
+            to.page.x = from.page.x;
+            to.page.y = from.page.y;
             to.pickParams = from.pickParams;
         }
         trackingData(id) {
@@ -7499,8 +7619,10 @@
             const { x: canvasX, y: canvasY } = this.mapToCanvasPoint(nativeEvent);
             event.canvas.x = canvasX;
             event.canvas.y = canvasY;
-            event.global.copyFrom(event.canvas);
-            event.offset.copyFrom(event.canvas);
+            event.global.x = canvasX;
+            event.global.y = canvasY;
+            event.offset.x = canvasX;
+            event.offset.y = canvasY;
             const { x: viewX, y: viewY } = this.mapToViewportPoint(event);
             event.viewport.x = viewX;
             event.viewport.y = viewY;
@@ -7525,8 +7647,10 @@
             const { x: canvasX, y: canvasY } = this.mapToCanvasPoint(nativeEvent);
             event.canvas.x = canvasX;
             event.canvas.y = canvasY;
-            event.global.copyFrom(event.canvas);
-            event.offset.copyFrom(event.canvas);
+            event.global.x = canvasX;
+            event.global.y = canvasY;
+            event.offset.x = canvasX;
+            event.offset.y = canvasY;
             const { x: viewX, y: viewY } = this.mapToViewportPoint(event);
             event.viewport.x = viewX;
             event.viewport.y = viewY;
@@ -7742,7 +7866,7 @@
                     handler = new ManualTickHandler();
                     break;
                 default:
-                    console.warn('非法的计时器模式');
+                    vutils.Logger.getInstance().warn('非法的计时器模式');
                     handler = new RAFTickHandler();
                     break;
             }
@@ -8743,7 +8867,7 @@
                 }
                 lastStep = lastStep.prev;
             }
-            console.warn('未知错误，step中找不到属性');
+            vutils.Logger.getInstance().warn('未知错误，step中找不到属性');
             return step.props[name];
         }
         updateTarget(step, ratio, end) {
@@ -9257,6 +9381,28 @@
             return {};
         }
         onStart() {
+            if (!this.target) {
+                return;
+            }
+            if (this.target.type === 'rect') {
+                this.onStartRect();
+            }
+            else if (this.target.type === 'line') {
+                this.onStartLineOrArea('line');
+            }
+            else if (this.target.type === 'area') {
+                this.onStartLineOrArea('area');
+            }
+        }
+        onStartLineOrArea(type) {
+            var _a;
+            const root = this.target.attachShadow();
+            const line = application.graphicService.creator[type](Object.assign({}, (_a = this.params) === null || _a === void 0 ? void 0 : _a.attribute));
+            this[type] = line;
+            line.pathProxy = new CustomPath2D();
+            root.add(line);
+        }
+        onStartRect() {
             var _a;
             const root = this.target.attachShadow();
             const height = this.target.AABBBounds.height();
@@ -9271,6 +9417,14 @@
             this.target.detachShadow();
         }
         onUpdate(end, ratio, out) {
+            if (this.rect) {
+                return this.onUpdateRect(end, ratio, out);
+            }
+            else if (this.line || this.area) {
+                return this.onUpdateLineOrArea(end, ratio, out);
+            }
+        }
+        onUpdateRect(end, ratio, out) {
             var _a, _b, _c, _d, _e, _f;
             const parentWidth = (_a = this.target.attribute.width) !== null && _a !== void 0 ? _a : 250;
             const streamLength = (_c = (_b = this.params) === null || _b === void 0 ? void 0 : _b.streamLength) !== null && _c !== void 0 ? _c : parentWidth;
@@ -9291,6 +9445,130 @@
                 }
             });
         }
+        onUpdateLineOrArea(end, ratio, out) {
+            const target = this.line || this.area;
+            if (!target) {
+                return;
+            }
+            const customPath = target.pathProxy;
+            const targetLine = this.target;
+            if (targetLine.cache || targetLine.cacheArea) {
+                this._onUpdateLineOrAreaWithCache(customPath, targetLine, end, ratio, out);
+            }
+            else {
+                this._onUpdateLineWithoutCache(customPath, targetLine, end, ratio, out);
+            }
+            const targetAttrs = targetLine.attribute;
+            target.setAttributes(Object.assign({ stroke: targetAttrs.stroke }, target.attribute));
+            target.addUpdateBoundTag();
+        }
+        _onUpdateLineOrAreaWithCache(customPath, g, end, ratio, out) {
+            customPath.clear();
+            if (g.type === 'line') {
+                let cache = g.cache;
+                if (!Array.isArray(cache)) {
+                    cache = [cache];
+                }
+                const totalLen = cache.reduce((l, c) => l + c.getLength(), 0);
+                const curves = [];
+                cache.forEach((c) => {
+                    c.curves.forEach((ci) => curves.push(ci));
+                });
+                return this._updateCurves(customPath, curves, totalLen, ratio);
+            }
+            else if (g.type === 'area') {
+                const cache = g.cacheArea;
+                const totalLen = cache.top.curves.reduce((a, b) => a + b.getLength(), 0);
+                return this._updateCurves(customPath, cache.top.curves, totalLen, ratio);
+            }
+        }
+        _updateCurves(customPath, curves, totalLen, ratio) {
+            var _a, _b;
+            const startLen = totalLen * ratio;
+            const endLen = Math.min((_b = startLen + ((_a = this.params) === null || _a === void 0 ? void 0 : _a.streamLength)) !== null && _b !== void 0 ? _b : 10, totalLen);
+            let lastLen = 0;
+            let start = false;
+            for (let i = 0; i < curves.length; i++) {
+                const curveItem = curves[i];
+                const len = curveItem.getLength();
+                const startPercent = 1 - (lastLen + len - startLen) / len;
+                let endPercent = 1 - (lastLen + len - endLen) / len;
+                let curveForStart;
+                if (lastLen < startLen && lastLen + len > startLen) {
+                    start = true;
+                    if (curveItem.p2 && curveItem.p3) {
+                        const [_, curve2] = divideCubic(curveItem, startPercent);
+                        customPath.moveTo(curve2.p0.x, curve2.p0.y);
+                        curveForStart = curve2;
+                    }
+                    else {
+                        const p = curveItem.getPointAt(startPercent);
+                        customPath.moveTo(p.x, p.y);
+                    }
+                }
+                if (lastLen < endLen && lastLen + len > endLen) {
+                    if (curveItem.p2 && curveItem.p3) {
+                        if (curveForStart) {
+                            endPercent = (endLen - startLen) / curveForStart.getLength();
+                        }
+                        const [curve1] = divideCubic(curveForStart || curveItem, endPercent);
+                        customPath.bezierCurveTo(curve1.p1.x, curve1.p1.y, curve1.p2.x, curve1.p2.y, curve1.p3.x, curve1.p3.y);
+                    }
+                    else {
+                        const p = curveItem.getPointAt(endPercent);
+                        customPath.lineTo(p.x, p.y);
+                    }
+                    break;
+                }
+                else if (start) {
+                    if (curveItem.p2 && curveItem.p3) {
+                        const curve = curveForStart || curveItem;
+                        customPath.bezierCurveTo(curve.p1.x, curve.p1.y, curve.p2.x, curve.p2.y, curve.p3.x, curve.p3.y);
+                    }
+                    else {
+                        customPath.lineTo(curveItem.p1.x, curveItem.p1.y);
+                    }
+                }
+                lastLen += len;
+            }
+        }
+        _onUpdateLineWithoutCache(customPath, line, end, ratio, out) {
+            var _a, _b;
+            const { points, curveType } = line.attribute;
+            if (!points || points.length < 2 || curveType !== 'linear') {
+                return;
+            }
+            let totalLen = 0;
+            for (let i = 1; i < points.length; i++) {
+                totalLen += vutils.PointService.distancePP(points[i], points[i - 1]);
+            }
+            const startLen = totalLen * ratio;
+            const endLen = Math.min((_b = startLen + ((_a = this.params) === null || _a === void 0 ? void 0 : _a.streamLength)) !== null && _b !== void 0 ? _b : 10, totalLen);
+            const nextPoints = [];
+            let lastLen = 0;
+            for (let i = 1; i < points.length; i++) {
+                const len = vutils.PointService.distancePP(points[i], points[i - 1]);
+                if (lastLen < startLen && lastLen + len > startLen) {
+                    nextPoints.push(vutils.PointService.pointAtPP(points[i - 1], points[i], 1 - (lastLen + len - startLen) / len));
+                }
+                if (lastLen < endLen && lastLen + len > endLen) {
+                    nextPoints.push(vutils.PointService.pointAtPP(points[i - 1], points[i], 1 - (lastLen + len - endLen) / len));
+                    break;
+                }
+                else if (nextPoints.length) {
+                    nextPoints.push(points[i]);
+                }
+                lastLen += len;
+            }
+            if (!nextPoints.length || nextPoints.length < 2) {
+                return;
+            }
+            customPath.clear();
+            customPath.moveTo(nextPoints[0].x, nextPoints[0].y);
+            for (let i = 1; i < nextPoints.length; i++) {
+                customPath.lineTo(nextPoints[i].x, nextPoints[i].y);
+            }
+        }
     }
     class Meteor extends ACustomAnimate {
         get lastPos() {
@@ -12202,6 +12480,10 @@
                     }
                     const nextStepVal = nextProps[key];
                     const lastStepVal = (_a = (lastProps && lastProps[key])) !== null && _a !== void 0 ? _a : subAnimate.getLastPropByName(key, step);
+                    if (nextStepVal == null || lastStepVal == null) {
+                        nextAttributes[key] = nextStepVal;
+                        return;
+                    }
                     let match;
                     match =
                         animate.interpolateFunc && animate.interpolateFunc(key, ratio, lastStepVal, nextStepVal, nextAttributes);
@@ -14213,12 +14495,12 @@
             }
             return bbox;
         }
-        GetLayout(str, width, height, textAlign, textBaseline, lineHeight, suffix, wordBreak, miniApp) {
+        GetLayout(str, width, height, textAlign, textBaseline, lineHeight, suffix, wordBreak, suffixPosition) {
             const linesLayout = [];
             const bboxWH = [width, height];
             const bboxOffset = [0, 0];
             while (str.length > 0) {
-                const { str: clipText } = this.textMeasure.clipTextWithSuffix(str, this.textOptions, width, suffix, wordBreak);
+                const { str: clipText } = this.textMeasure.clipTextWithSuffix(str, this.textOptions, width, suffix, wordBreak, suffixPosition);
                 linesLayout.push({
                     str: clipText,
                     width: this.textMeasure.measureTextWidth(clipText, this.textOptions)
@@ -14247,7 +14529,7 @@
             };
             return this.layoutWithBBox(bbox, linesLayout, textAlign, textBaseline, lineHeight);
         }
-        GetLayoutByLines(lines, textAlign, textBaseline, lineHeight, suffix = '', wordBreak, lineWidth) {
+        GetLayoutByLines(lines, textAlign, textBaseline, lineHeight, suffix = '', wordBreak, lineWidth, suffixPosition = 'end') {
             lines = lines.map(l => l.toString());
             const linesLayout = [];
             const bboxWH = [0, 0];
@@ -14256,7 +14538,7 @@
                 for (let i = 0, len = lines.length; i < len; i++) {
                     width = Math.min(this.textMeasure.measureTextWidth(lines[i], this.textOptions), lineWidth);
                     linesLayout.push({
-                        str: this.textMeasure.clipTextWithSuffix(lines[i], this.textOptions, width, suffix, wordBreak).str,
+                        str: this.textMeasure.clipTextWithSuffix(lines[i], this.textOptions, width, suffix, wordBreak, suffixPosition).str,
                         width
                     });
                 }
@@ -14542,7 +14824,7 @@
             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, whiteSpace = textTheme.whiteSpace } = 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, ignoreBuf = textTheme.ignoreBuf, whiteSpace = textTheme.whiteSpace, suffixPosition = textTheme.suffixPosition } = attribute;
             if (whiteSpace === 'normal') {
                 return this.updateWrapAABBBounds(text);
             }
@@ -14562,7 +14844,7 @@
             if (Number.isFinite(maxLineWidth)) {
                 if (ellipsis) {
                     const strEllipsis = (ellipsis === true ? textTheme.ellipsis : ellipsis);
-                    const data = textMeasure.clipTextWithSuffix(text.toString(), { fontSize, fontWeight, fontFamily }, maxLineWidth, strEllipsis, false);
+                    const data = textMeasure.clipTextWithSuffix(text.toString(), { fontSize, fontWeight, fontFamily }, maxLineWidth, strEllipsis, false, suffixPosition);
                     str = data.str;
                     width = data.width;
                 }
@@ -14606,7 +14888,7 @@
             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, 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, suffixPosition = textTheme.suffixPosition } = 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) {
@@ -14630,7 +14912,7 @@
             if (Number.isFinite(maxLineWidth)) {
                 if (ellipsis) {
                     const strEllipsis = (ellipsis === true ? textTheme.ellipsis : ellipsis);
-                    const data = textMeasure.clipTextWithSuffixVertical(verticalList[0], { fontSize, fontWeight, fontFamily }, maxLineWidth, strEllipsis, false);
+                    const data = textMeasure.clipTextWithSuffixVertical(verticalList[0], { fontSize, fontWeight, fontFamily }, maxLineWidth, strEllipsis, false, suffixPosition);
                     verticalList = [data.verticalList];
                     width = data.width;
                 }
@@ -14667,7 +14949,7 @@
             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, ellipsis = textTheme.ellipsis, maxLineWidth, stroke = textTheme.stroke, lineWidth = textTheme.lineWidth, whiteSpace = textTheme.whiteSpace } = attribute;
+            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, suffixPosition = textTheme.suffixPosition } = 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);
@@ -14682,7 +14964,7 @@
             }
             const textMeasure = application.graphicUtil.textMeasure;
             const layoutObj = new CanvasTextLayout(fontFamily, { fontSize, fontWeight, fontFamily }, textMeasure);
-            const layoutData = layoutObj.GetLayoutByLines(text, textAlign, textBaseline, lineHeight, ellipsis === true ? textTheme.ellipsis : ellipsis || undefined, false, maxLineWidth);
+            const layoutData = layoutObj.GetLayoutByLines(text, textAlign, textBaseline, lineHeight, ellipsis === true ? textTheme.ellipsis : ellipsis || undefined, false, maxLineWidth, suffixPosition);
             const { bbox } = layoutData;
             this.cache.layoutData = layoutData;
             this.clearUpdateShapeTag();
@@ -14700,7 +14982,7 @@
             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, 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, suffixPosition = textTheme.suffixPosition } = 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) {
@@ -14730,7 +15012,7 @@
                 if (Number.isFinite(maxLineWidth)) {
                     if (ellipsis) {
                         const strEllipsis = (ellipsis === true ? textTheme.ellipsis : ellipsis);
-                        const data = textMeasure.clipTextWithSuffixVertical(verticalData, { fontSize, fontWeight, fontFamily }, maxLineWidth, strEllipsis, false);
+                        const data = textMeasure.clipTextWithSuffixVertical(verticalData, { fontSize, fontWeight, fontFamily }, maxLineWidth, strEllipsis, false, suffixPosition);
                         verticalLists[i] = data.verticalList;
                         width = data.width;
                     }
@@ -15844,6 +16126,9 @@
             return super.isValid() && this._isValid();
         }
         _isValid() {
+            if (this.pathProxy) {
+                return true;
+            }
             const { points, segments } = this.attribute;
             if (segments) {
                 if (segments.length === 0) {
@@ -17475,6 +17760,9 @@
             return super.isValid() && this._isValid();
         }
         _isValid() {
+            if (this.pathProxy) {
+                return true;
+            }
             const { points, segments } = this.attribute;
             if (segments) {
                 if (segments.length === 0) {
@@ -19088,8 +19376,9 @@
                 tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2);
             }
             if (shadowBlur) {
-                const shadowBlurHalfWidth = shadowBlur / Math.abs(scaleX + scaleY);
-                boundStroke(tb1, shadowBlurHalfWidth, miter, strokeBoundsBuffer);
+                const { shadowOffsetX = theme.shadowOffsetX, shadowOffsetY = theme.shadowOffsetY } = attribute;
+                const shadowBlurWidth = (shadowBlur / Math.abs(scaleX + scaleY)) * 2 + Math.max(shadowOffsetX, shadowOffsetY);
+                boundStroke(tb1, shadowBlurWidth, miter, strokeBoundsBuffer + 1);
                 aabbBounds.union(tb1);
             }
             this.combindShadowAABBBounds(aabbBounds, graphic);
@@ -21742,7 +22031,7 @@
             this.order = 0;
         }
         drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, options) {
-            const { background } = graphic.attribute;
+            const { background, backgroundMode = graphicAttribute.backgroundMode } = graphic.attribute;
             if (!background) {
                 return;
             }
@@ -21761,7 +22050,7 @@
                 context.clip();
                 const b = graphic.AABBBounds;
                 context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute);
-                context.drawImage(res.data, b.x1, b.y1, b.width(), b.height());
+                this.doDrawImage(context, res.data, b, backgroundMode);
                 context.restore();
                 if (!graphic.transMatrix.onlyTranslate()) {
                     context.setTransformForCurrent();
@@ -21775,6 +22064,18 @@
                 context.highPerformanceRestore();
             }
         }
+        doDrawImage(context, data, b, backgroundMode) {
+            if (backgroundMode === 'no-repeat') {
+                context.drawImage(data, b.x1, b.y1, b.width(), b.height());
+            }
+            else {
+                const pattern = context.createPattern(data, backgroundMode);
+                context.fillStyle = pattern;
+                context.translate(b.x1, b.y1);
+                context.fillRect(0, 0, b.width(), b.height());
+                context.translate(-b.x1, -b.y1);
+            }
+        }
     };
     exports.DefaultBaseBackgroundRenderContribution = __decorate([
         injectable()
@@ -22134,7 +22435,7 @@
             this.time = exports.BaseRenderContributionTime.beforeFillStroke;
         }
         drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb) {
-            const { background } = graphic.attribute;
+            const { background, backgroundMode = graphicAttribute.backgroundMode } = graphic.attribute;
             if (!background) {
                 return;
             }
@@ -22146,7 +22447,7 @@
                 context.highPerformanceSave();
                 context.setTransformFromMatrix(graphic.parent.globalTransMatrix, true);
                 const b = graphic.AABBBounds;
-                context.drawImage(res.data, b.x1, b.y1, b.width(), b.height());
+                this.doDrawImage(context, res.data, b, backgroundMode);
                 context.highPerformanceRestore();
                 context.setTransformForCurrent();
             }
@@ -22168,7 +22469,7 @@
             this.time = exports.BaseRenderContributionTime.beforeFillStroke;
         }
         drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb) {
-            const { background, width, height } = graphic.attribute;
+            const { background, backgroundMode = graphicAttribute.backgroundMode } = graphic.attribute;
             if (!background) {
                 return;
             }
@@ -22219,7 +22520,7 @@
                     context.translate(scrollX, scrollY);
                 }
                 const b = graphic.AABBBounds;
-                context.drawImage(res.data, b.x1, b.y1, b.width(), b.height());
+                this.doDrawImage(context, res.data, b, backgroundMode);
                 context.restore();
                 if (!graphic.transMatrix.onlyTranslate()) {
                     context.setTransformForCurrent();
@@ -23666,6 +23967,13 @@
                 dirtyBounds.x2 = Math.ceil(b.x2);
                 dirtyBounds.y2 = Math.ceil(b.y2);
             }
+            const d = context.dpr % 1;
+            if (d || d !== 0.5) {
+                dirtyBounds.x1 = Math.floor(dirtyBounds.x1 * context.dpr) / context.dpr;
+                dirtyBounds.y1 = Math.floor(dirtyBounds.y1 * context.dpr) / context.dpr;
+                dirtyBounds.x2 = Math.ceil(dirtyBounds.x2 * context.dpr) / context.dpr;
+                dirtyBounds.y2 = Math.ceil(dirtyBounds.y2 * context.dpr) / context.dpr;
+            }
             this.backupDirtyBounds.copy(dirtyBounds);
             context.inuse = true;
             context.clearMatrix();
@@ -23861,7 +24169,7 @@
             }
         }
         selectRenderByType(type) {
-            console.warn('未知错误，不应该走到这里');
+            vutils.Logger.getInstance().warn('未知错误，不应该走到这里');
             return null;
         }
         selectRenderByNumberType(type) {