@visactor/vchart-extension 1.13.5-alpha.10 → 1.13.5-alpha.12

package/build/index.js

@@ -391,11 +391,20 @@
         },
         pageSize: 5,
         scrollSize: 1,
-        animation: {
-            type: 'both',
-            interval: 4000,
-            duration: 2000,
+        animationAppear: {
+            enable: true,
+            type: 'grow',
+            duration: 1000,
             easing: 'linear'
+        },
+        animationUpdate: {
+            enable: true,
+            type: 'grow',
+            duration: 1000,
+            easing: 'linear'
+        },
+        animationNormal: {
+            interval: 1000
         }
     };
 
@@ -465,7 +474,8 @@
             super(...arguments);
             this.formatMap = {};
             this.paginateDataArr = (spec) => {
-                const { data: arr, scrollSize = 1, pageSize = 5 } = spec;
+                const { scrollSize = 1, pageSize = 5 } = spec;
+                const arr = this.originalData;
                 const result = {};
                 let pageOrder = 0;
                 for (let i = 0; i < arr.length; i += scrollSize) {
@@ -492,6 +502,7 @@
                 spec.data.forEach((datum, index) => (datum[ORDER_KEY] = index + 1 < 10 ? `0${index + 1}` : index + 1));
                 const pagerData = this.paginateDataArr(spec).result;
                 const orderCount = this.paginateDataArr(spec).orderCount;
+                this.orderCount = orderCount;
                 const supplyCount = spec.pageSize - pagerData[`page${orderCount}`].length;
                 pagerData[`page${orderCount}`].push(...Array.from({ length: supplyCount }, _ => {
                     return {
@@ -505,8 +516,8 @@
                         data: [
                             {
                                 id: 'datas',
-                                values: pagerData[order].map((d, i) => {
-                                    return Object.assign(Object.assign({}, d), { [DATA_KEY]: order + '_' + i + '_' + new Date().getTime() });
+                                values: pagerData[order].map(d => {
+                                    return Object.assign(Object.assign({}, d), { [DATA_KEY]: d[spec.yField] });
                                 })
                             },
                             {
@@ -520,48 +531,11 @@
                         ]
                     });
                 });
-                if (result.length === 1) {
-                    result.push({
-                        data: [
-                            {
-                                id: 'datas',
-                                values: pagerData['page1'].map((d, i) => {
-                                    return Object.assign(Object.assign({}, d), { [DATA_KEY]: 'page2' + '_' + i + '_' + new Date().getTime() });
-                                })
-                            },
-                            {
-                                id: 'order',
-                                values: [
-                                    {
-                                        order: 'page2'
-                                    }
-                                ]
-                            }
-                        ]
-                    });
-                }
                 return result;
             };
         }
-        isSpecValid(spec) {
-            var _a, _b, _c, _d;
-            const { xField, yField, data } = spec;
-            if (!xField || !yField) {
-                (_b = (_a = this._option).onError) === null || _b === void 0 ? void 0 : _b.call(_a, 'Missing Required Config: `xField`, `yField` ');
-                return false;
-            }
-            if (!data || data.length === 0) {
-                (_d = (_c = this._option).onError) === null || _d === void 0 ? void 0 : _d.call(_c, 'Data is required');
-                return false;
-            }
-            return true;
-        }
         transformSpec(spec) {
-            var _a;
             super.transformSpec(spec);
-            if (!this.isSpecValid(spec)) {
-                return;
-            }
             this.normalizeSpec(spec);
             this.upgradeTextMeasure(spec);
             this.upgradeFormatMap(spec);
@@ -578,7 +552,6 @@
                 this.generateValueLabel(spec)
             ];
             this.transformPaddingSpec(spec);
-            (_a = spec.customTransformSpec) === null || _a === void 0 ? void 0 : _a.call(spec, spec);
             super.transformSpec(spec);
         }
         normalizeSpec(spec) {
@@ -615,8 +588,9 @@
         processData(spec) {
             var _a;
             if (!((_a = spec.data[0]) === null || _a === void 0 ? void 0 : _a.values)) {
-                this.dataSpecs = this.processRankingData(spec);
                 this.originalData = spec.data;
+                this.originalSpec = vutils.cloneDeep(spec);
+                this.dataSpecs = this.processRankingData(spec);
                 spec.data = this.dataSpecs[0].data;
             }
         }
@@ -633,7 +607,7 @@
                     barWidth: (_b = (_a = spec.bar) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : 10,
                     bar: Object.assign(Object.assign({}, spec.bar), { style: Object.assign(Object.assign({}, (_c = spec.bar) === null || _c === void 0 ? void 0 : _c.style), { x1: 0, visible: (datum) => {
                                 var _a, _b;
-                                if (datum[SUPPLY_DATA_KEY]) {
+                                if (datum[SUPPLY_DATA_KEY] || datum[spec.xField] === null) {
                                     return false;
                                 }
                                 return (_b = (_a = spec.bar) === null || _a === void 0 ? void 0 : _a.style) !== null && _b !== void 0 ? _b : true;
@@ -642,13 +616,15 @@
             ];
         }
         transformAnimationSpec(spec) {
-            const totalDuration = spec.animation.duration;
-            if (spec.animation) {
-                spec.player = Object.assign(Object.assign({}, spec.player), { specs: this.dataSpecs, auto: true, visible: false, interval: spec.animation.interval + spec.animation.duration / 2, loop: true });
-                spec.animationExit = this.getAnimationExit(spec, totalDuration);
-                spec.animationAppear = this.getAnimationEnter(spec, 'rect', totalDuration);
-                spec.animationEnter = this.getAnimationEnter(spec, 'rect', totalDuration);
+            var _a, _b, _c;
+            if (spec.animationUpdate.enable && this.orderCount > 1) {
+                spec.player = Object.assign({ specs: this.dataSpecs, auto: true, visible: false, interval: ((_b = (_a = spec.animationNormal) === null || _a === void 0 ? void 0 : _a.interval) !== null && _b !== void 0 ? _b : 1000) + ((_c = spec.animationUpdate.duration) !== null && _c !== void 0 ? _c : 1000) / 2, loop: true }, spec.player);
+                spec.animationExit = this.getAnimationExit(this.originalSpec);
+                spec.animationEnter = this.getAnimationEnter(this.originalSpec);
+                spec.animationUpdate = this.getAnimationUpdate(this.originalSpec);
             }
+            spec.animationNormal = this.originalSpec.animationNormal;
+            spec.animationAppear = this.getAnimationAppear(this.originalSpec, 'rect');
         }
         transformAxesSpec(spec) {
             const { min, max } = computeDataRange(this.originalData, spec.xField);
@@ -657,7 +633,8 @@
                     orient: 'left',
                     type: 'band',
                     visible: false,
-                    inverse: true
+                    inverse: true,
+                    paddingOuter: 0.5
                 },
                 {
                     orient: 'bottom',
@@ -671,7 +648,6 @@
         }
         generateBarBackground(spec) {
             var _a;
-            const totalDuration = spec.animation.duration;
             return {
                 type: spec.barBackground.type,
                 dataId: 'data',
@@ -689,15 +665,15 @@
                         }
                         return spec.barBackground.style.visible;
                     } }),
-                animation: Boolean(spec.animation),
-                animationEnter: this.getAnimationEnter(spec, 'barBack', totalDuration),
-                animationExit: this.getAnimationExit(spec, totalDuration),
-                animationAppear: this.getAnimationEnter(spec, 'barBack', totalDuration)
+                animation: true,
+                animationEnter: this.getAnimationEnter(this.originalSpec),
+                animationExit: this.getAnimationExit(this.originalSpec),
+                animationAppear: this.getAnimationAppear(this.originalSpec, 'barBack'),
+                animationUpdate: this.getAnimationUpdate(this.originalSpec)
             };
         }
         generateDecorateHaloIcons(spec) {
             var _a;
-            const totalDuration = spec.animation.duration;
             return (_a = spec.decorateHaloIcons) === null || _a === void 0 ? void 0 : _a.map((decorateHaloIcon) => {
                 return {
                     type: 'symbol',
@@ -718,15 +694,15 @@
                             }
                             return decorateHaloIcon.style.visible;
                         } }),
-                    animation: Boolean(spec.animation),
-                    animationEnter: this.getAnimationEnter(spec, 'symbol', totalDuration),
-                    animationExit: this.getAnimationExit(spec, totalDuration),
-                    animationAppear: this.getAnimationEnter(spec, 'symbol', totalDuration)
+                    animation: true,
+                    animationEnter: this.getAnimationEnter(this.originalSpec),
+                    animationExit: this.getAnimationExit(this.originalSpec),
+                    animationAppear: this.getAnimationAppear(this.originalSpec, 'symbol'),
+                    animationUpdate: this.getAnimationUpdate(this.originalSpec)
                 };
             });
         }
         generateRankingIcon(spec) {
-            const totalDuration = spec.animation.duration;
             return {
                 type: 'symbol',
                 dataId: 'data',
@@ -760,15 +736,15 @@
                         }
                         return spec.rankingIcon.style.visible;
                     } }),
-                animation: Boolean(spec.animation),
-                animationEnter: this.getAnimationEnter(spec, 'text', totalDuration),
-                animationExit: this.getAnimationExit(spec, totalDuration),
-                animationAppear: this.getAnimationEnter(spec, 'text', totalDuration)
+                animation: true,
+                animationEnter: this.getAnimationEnter(this.originalSpec),
+                animationExit: this.getAnimationExit(this.originalSpec),
+                animationAppear: this.getAnimationAppear(this.originalSpec, 'text'),
+                animationUpdate: this.getAnimationUpdate(this.originalSpec)
             };
         }
         generateNameLabel(spec) {
             var _a;
-            const totalDuration = spec.animation.duration;
             return {
                 type: 'text',
                 dataId: 'data',
@@ -794,15 +770,15 @@
                         }
                         return spec.nameLabel.style.visible;
                     } }),
-                animation: Boolean(spec.animation),
-                animationEnter: this.getAnimationEnter(spec, 'text', totalDuration),
-                animationExit: this.getAnimationExit(spec, totalDuration),
-                animationAppear: this.getAnimationEnter(spec, 'text', totalDuration)
+                animation: true,
+                animationEnter: this.getAnimationEnter(this.originalSpec),
+                animationExit: this.getAnimationExit(this.originalSpec),
+                animationAppear: this.getAnimationAppear(this.originalSpec, 'text'),
+                animationUpdate: this.getAnimationUpdate(this.originalSpec)
             };
         }
         generateOrderLabel(spec) {
             var _a;
-            const totalDuration = spec.animation.duration;
             return {
                 type: 'text',
                 dataId: 'data',
@@ -829,28 +805,24 @@
                         }
                         return spec.orderLabel.style.visible;
                     } }),
-                animation: Boolean(spec.animation),
-                animationEnter: this.getAnimationEnter(spec, 'text', totalDuration),
-                animationExit: this.getAnimationExit(spec, totalDuration),
-                animationAppear: this.getAnimationEnter(spec, 'text', totalDuration)
+                animation: true,
+                animationEnter: this.getAnimationEnter(this.originalSpec),
+                animationExit: this.getAnimationExit(this.originalSpec),
+                animationAppear: this.getAnimationAppear(this.originalSpec, 'text'),
+                animationUpdate: this.getAnimationUpdate(this.originalSpec)
             };
         }
         generateValueLabel(spec) {
-            const totalDuration = spec.animation.duration;
+            var _a;
             return {
                 type: 'text',
                 dataId: 'data',
                 visible: true,
                 dataKey: DATA_KEY,
-                state: {
-                    blur: {
-                        opacity: 0.2
-                    }
-                },
+                state: (_a = spec.valueLabel) === null || _a === void 0 ? void 0 : _a.state,
                 style: Object.assign(Object.assign({ text: (datum) => this.formatDatum(spec.xField, datum), x: (datum, ctx) => {
                         if (spec.labelLayout === 'bothEnd') {
                             return (ctx.getRegion().getLayoutRect().width +
-                                this.getMaxDataLabelLens(spec, spec.xField, this.nameLabelTextMeasure) +
                                 VALUE_LABEL_PADDING_LEFT);
                         }
                         else {
@@ -867,10 +839,11 @@
                         }
                         return spec.valueLabel.style.visible;
                     } }),
-                animation: Boolean(spec.animation),
-                animationEnter: this.getAnimationEnter(spec, 'text', totalDuration),
-                animationExit: this.getAnimationExit(spec, totalDuration),
-                animationAppear: this.getAnimationEnter(spec, 'text', totalDuration)
+                animation: true,
+                animationEnter: this.getAnimationEnter(this.originalSpec),
+                animationExit: this.getAnimationExit(this.originalSpec),
+                animationAppear: this.getAnimationAppear(this.originalSpec, 'text'),
+                animationUpdate: this.getAnimationUpdate(this.originalSpec)
             };
         }
         transformPaddingSpec(spec) {
@@ -888,7 +861,7 @@
                         CHART_PADDING_LEFT
                     : CHART_PADDING_LEFT + maxHaloIconSize / 2, right: spec.labelLayout === 'bothEnd'
                     ? VALUE_LABEL_PADDING_LEFT +
-                        this.getMaxDataLabelLens(spec, spec.yField, this.valueLabelTextMeasure) +
+                        this.getMaxDataLabelLens(spec, spec.xField, this.valueLabelTextMeasure) +
                         CHART_PADDING_RIGHT
                     : CHART_PADDING_RIGHT + 10, top: 0, bottom: 0 }, spec.padding);
         }
@@ -908,50 +881,62 @@
         getLabelWidth(padding, width) {
             return width + padding;
         }
-        getAnimationExit(spec, duration) {
-            if (spec.animation.type === 'grow') {
-                return {};
+        getAnimationExit(spec) {
+            var _a, _b, _c, _d, _e;
+            if (((_a = spec.animationUpdate) === null || _a === void 0 ? void 0 : _a.enable) === false) {
+                return false;
             }
             return {
                 type: 'moveOut',
                 options: {
                     direction: 'y',
                     orient: 'negative',
-                    point: (datum, element, opt) => {
+                    point: (datum, element) => {
                         const channelAttr = element.getGraphicAttribute('y');
-                        const barSpace = (spec.height / spec.pageSize - spec.bar.height) / 2;
-                        return { y: channelAttr - opt.height + barSpace };
+                        const barSpace = spec.height / (spec.pageSize + 1);
+                        return { y: channelAttr - barSpace * Math.min(spec.scrollSize, spec.pageSize) };
                     }
                 },
-                duration: spec.animation.type === 'both' ? duration / 2 : duration,
-                easing: spec.animation.easing
+                duration: (_c = (_b = spec.animationUpdate) === null || _b === void 0 ? void 0 : _b.duration) !== null && _c !== void 0 ? _c : 1000,
+                easing: (_e = (_d = spec.animationUpdate) === null || _d === void 0 ? void 0 : _d.easing) !== null && _e !== void 0 ? _e : 'linear'
             };
         }
-        getAnimationEnter(spec, markType, totalDuration) {
-            const { animation } = spec;
-            const { type: animationType, easing } = animation;
-            const scrollDuration = animationType === 'both' ? totalDuration / 2 : totalDuration;
-            const growDuration = animationType === 'grow' ? totalDuration : totalDuration / 2;
-            const result = [];
-            if (animationType === 'scroll' || animationType === 'both') {
-                result.push({
-                    type: 'moveIn',
-                    options: {
-                        direction: 'y',
-                        orient: 'negative',
-                        excludeChannels: ['y'],
-                        point: (datum, element, opt) => {
-                            const channelAttr = element.getGraphicAttribute('y');
-                            const barSpace = (spec.height / spec.pageSize - spec.bar.height) / 2;
-                            return { y: channelAttr + opt.height - barSpace };
-                        }
-                    },
-                    duration: scrollDuration,
-                    easing
-                });
+        getAnimationEnter(spec) {
+            var _a, _b, _c, _d, _e;
+            if (((_a = spec.animationUpdate) === null || _a === void 0 ? void 0 : _a.enable) === false) {
+                return false;
             }
-            if ((animationType === 'grow' || animationType === 'both') && markType !== 'text' && markType !== 'barBack') {
-                result.push({
+            return {
+                type: 'moveIn',
+                options: {
+                    direction: 'y',
+                    orient: 'negative',
+                    excludeChannels: ['y'],
+                    point: (datum, element) => {
+                        const channelAttr = element.getGraphicAttribute('y');
+                        return { y: channelAttr + (spec.height / (spec.pageSize + 1)) * Math.min(spec.scrollSize, spec.pageSize) };
+                    }
+                },
+                duration: (_c = (_b = spec.animationUpdate) === null || _b === void 0 ? void 0 : _b.duration) !== null && _c !== void 0 ? _c : 1000,
+                easing: (_e = (_d = spec.animationUpdate) === null || _d === void 0 ? void 0 : _d.easing) !== null && _e !== void 0 ? _e : 'linear'
+            };
+        }
+        getAnimationAppear(spec, markType) {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+            if (((_a = spec.animationAppear) === null || _a === void 0 ? void 0 : _a.enable) === false) {
+                return false;
+            }
+            if (markType === 'rect') {
+                return {
+                    type: 'growWidthIn',
+                    oneByOne: false,
+                    duration: (_c = (_b = spec.animationAppear) === null || _b === void 0 ? void 0 : _b.duration) !== null && _c !== void 0 ? _c : 1000,
+                    easing: (_e = (_d = spec.animationAppear) === null || _d === void 0 ? void 0 : _d.easing) !== null && _e !== void 0 ? _e : 'linear',
+                    options: {}
+                };
+            }
+            else if (markType === 'symbol') {
+                return {
                     channel: {
                         x: {
                             from: 0,
@@ -960,12 +945,32 @@
                             }
                         }
                     },
-                    duration: growDuration,
-                    delay: animationType === 'both' ? scrollDuration : 0,
-                    easing
-                });
+                    duration: (_g = (_f = spec.animationAppear) === null || _f === void 0 ? void 0 : _f.duration) !== null && _g !== void 0 ? _g : 1000,
+                    easing: (_j = (_h = spec.animationAppear) === null || _h === void 0 ? void 0 : _h.easing) !== null && _j !== void 0 ? _j : 'linear'
+                };
             }
-            return result;
+            else {
+                return {
+                    channel: {
+                        opacity: {
+                            from: 0,
+                            to: 1
+                        }
+                    },
+                    duration: (_l = (_k = spec.animationAppear) === null || _k === void 0 ? void 0 : _k.duration) !== null && _l !== void 0 ? _l : 1000,
+                    easing: (_o = (_m = spec.animationAppear) === null || _m === void 0 ? void 0 : _m.easing) !== null && _o !== void 0 ? _o : 'linear'
+                };
+            }
+        }
+        getAnimationUpdate(spec) {
+            var _a, _b, _c, _d;
+            if (spec.animationUpdate.enable === false) {
+                return false;
+            }
+            return {
+                duration: (_b = (_a = spec.animationUpdate) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 1000,
+                easing: (_d = (_c = spec.animationUpdate) === null || _c === void 0 ? void 0 : _c.easing) !== null && _d !== void 0 ? _d : 'linear'
+            };
         }
     }
 
@@ -988,7 +993,7 @@
                 (_b = (_a = this._option).onError) === null || _b === void 0 ? void 0 : _b.call(_a, 'Missing Required Config: `xField`, `yField` ');
                 return false;
             }
-            if (!data || data.length === 0) {
+            if (!data) {
                 (_d = (_c = this._option).onError) === null || _d === void 0 ? void 0 : _d.call(_c, 'Data is required');
                 return false;
             }
@@ -2904,7 +2909,7 @@
           default:
             if (this._t <= 0) this.context.lineTo(this._x, y, !1 !== this._lastDefined && !1 !== p.defined, this.lastPoint), this.context.lineTo(x, y, !1 !== this._lastDefined && !1 !== p.defined, p);else {
               const x1 = this._x * (1 - this._t) + x * this._t;
-              this.context.lineTo(x1, this._y, !1 !== this._lastDefined && !1 !== p.defined, this.lastPoint), this.context.lineTo(x1, y, !1 !== this._lastDefined && !1 !== p.defined, p);
+              .5 === this._t ? this.context.lineTo(x1, this._y, !1 !== this._lastDefined, this.lastPoint) : this.context.lineTo(x1, this._y, !1 !== this._lastDefined && !1 !== p.defined, this.lastPoint), this.context.lineTo(x1, y, !1 !== this._lastDefined && !1 !== p.defined, p);
             }
         }
         this._lastDefined = p.defined, this._x = x, this._y = y, this.lastPoint = p;
@@ -4494,7 +4499,7 @@
         let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Generator.GenAutoIncrementId();
         let timeline = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultTimeline;
         let slience = arguments.length > 2 ? arguments[2] : undefined;
-        this.id = id, this.timeline = timeline, this.status = AnimateStatus.INITIAL, this.tailAnimate = new SubAnimate(this), this.subAnimates = [this.tailAnimate], this.timeScale = 1, this.rawPosition = -1, this._startTime = 0, this._duringTime = 0, this.timeline.addAnimate(this), this.slience = slience;
+        this.id = id, this.timeline = timeline || defaultTimeline, this.status = AnimateStatus.INITIAL, this.tailAnimate = new SubAnimate(this), this.subAnimates = [this.tailAnimate], this.timeScale = 1, this.rawPosition = -1, this._startTime = 0, this._duringTime = 0, this.timeline.addAnimate(this), this.slience = slience;
       }
       setTimeline(timeline) {
         timeline !== this.timeline && (this.timeline.removeAnimate(this, !1), timeline.addAnimate(this));
@@ -5028,7 +5033,7 @@
       }
       static GetFile(url, type) {
         let data = ResourceLoader.cache.get(url);
-        return data ? "init" === data.loadState || "fail" === data.loadState ? Promise.reject() : "loading" === data.loadState ? data.dataPromise.then(data => data.data) : Promise.resolve(data.data) : (data = {
+        return data ? "fail" === data.loadState ? Promise.reject() : "init" === data.loadState || "loading" === data.loadState ? data.dataPromise.then(data => data.data) : Promise.resolve(data.data) : (data = {
           type: type,
           loadState: "init"
         }, ResourceLoader.cache.set(url, data), "arrayBuffer" === type ? data.dataPromise = application.global.loadArrayBuffer(url) : "blob" === type ? data.dataPromise = application.global.loadBlob(url) : "json" === type && (data.dataPromise = application.global.loadJson(url)), data.dataPromise.then(data => data.data));
@@ -7120,7 +7125,7 @@
         this._draw(line, lineAttribute, !1, drawContext, params);
       }
       drawSegmentItem(context, cache, fill, stroke, fillOpacity, strokeOpacity, attribute, defaultAttribute, clipRange, clipRangeByDimension, offsetX, offsetY, line, fillCb, strokeCb) {
-        var _a, _b, _c, _d, _e;
+        var _a;
         if (!cache) return;
         context.beginPath();
         const z = null !== (_a = this.z) && void 0 !== _a ? _a : 0;
@@ -7133,27 +7138,7 @@
           x: originX = 0,
           x: originY = 0
         } = attribute;
-        !1 !== fill && (fillCb ? fillCb(context, attribute, defaultAttribute) : fillOpacity && (context.setCommonStyle(line, attribute, originX - offsetX, originY - offsetY, defaultAttribute), context.fill())), !1 !== stroke && (strokeCb ? strokeCb(context, attribute, defaultAttribute) : strokeOpacity && (context.setStrokeStyle(line, attribute, originX - offsetX, originY - offsetY, defaultAttribute), context.stroke()));
-        let {
-          connectedType: connectedType,
-          connectedX: connectedX,
-          connectedY: connectedY,
-          connectedStyle: connectedStyle
-        } = attribute;
-        if (vutils.isArray(defaultAttribute) ? (connectedType = null !== (_b = null != connectedType ? connectedType : defaultAttribute[0].connectedType) && void 0 !== _b ? _b : defaultAttribute[1].connectedType, connectedX = null !== (_c = null != connectedX ? connectedX : defaultAttribute[0].connectedX) && void 0 !== _c ? _c : defaultAttribute[1].connectedX, connectedY = null !== (_d = null != connectedY ? connectedY : defaultAttribute[0].connectedY) && void 0 !== _d ? _d : defaultAttribute[1].connectedY, connectedStyle = null !== (_e = null != connectedStyle ? connectedStyle : defaultAttribute[0].connectedStyle) && void 0 !== _e ? _e : defaultAttribute[1].connectedStyle) : (connectedType = null != connectedType ? connectedType : defaultAttribute.connectedType, connectedX = null != connectedX ? connectedX : defaultAttribute.connectedX, connectedY = null != connectedY ? connectedY : defaultAttribute.connectedY, connectedStyle = null != connectedStyle ? connectedStyle : defaultAttribute.connectedStyle), "connect" !== connectedType && "zero" !== connectedType && (connectedType = "none"), "none" !== connectedType) {
-          context.beginPath(), drawSegments(context.camera ? context : context.nativeContext, cache, clipRange, clipRangeByDimension, {
-            offsetX: offsetX,
-            offsetY: offsetY,
-            offsetZ: z,
-            drawConnect: !0,
-            mode: connectedType,
-            zeroX: connectedX,
-            zeroY: connectedY
-          });
-          const da = [];
-          vutils.isArray(defaultAttribute) ? defaultAttribute.forEach(i => da.push(i)) : da.push(defaultAttribute), da.push(attribute), !1 !== fill && (fillCb ? fillCb(context, attribute, defaultAttribute) : fillOpacity && (context.setCommonStyle(line, connectedStyle, originX - offsetX, originY - offsetY, da), context.fill())), !1 !== stroke && (strokeCb ? strokeCb(context, attribute, defaultAttribute) : strokeOpacity && (context.setStrokeStyle(line, connectedStyle, originX - offsetX, originY - offsetY, da), context.stroke()));
-        }
-        return !1;
+        return !1 !== fill && (fillCb ? fillCb(context, attribute, defaultAttribute) : fillOpacity && (context.setCommonStyle(line, attribute, originX - offsetX, originY - offsetY, defaultAttribute), context.fill())), !1 !== stroke && (strokeCb ? strokeCb(context, attribute, defaultAttribute) : strokeOpacity && (context.setStrokeStyle(line, attribute, originX - offsetX, originY - offsetY, defaultAttribute), context.stroke())), !1;
       }
       drawLinearLineHighPerformance(line, context, fill, stroke, fillOpacity, strokeOpacity, offsetX, offsetY, lineAttribute, drawContext, params, fillCb, strokeCb) {
         var _a;
@@ -7185,7 +7170,8 @@
             segments: segments,
             points: points,
             closePath: closePath,
-            curveTension = lineAttribute.curveTension
+            curveTension = lineAttribute.curveTension,
+            connectedType = lineAttribute.connectedType
           } = line.attribute;
         if (!this.valid(line, lineAttribute, fillCb, strokeCb)) return;
         let {
@@ -7197,6 +7183,9 @@
           clipRangeByDimension = lineAttribute.clipRangeByDimension
         } = line.attribute;
         if (1 === clipRange && !segments && !points.some(p => !1 === p.defined) && "linear" === curveType) return this.drawLinearLineHighPerformance(line, context, !!fill, !!stroke, fillOpacity, strokeOpacity, x, y, lineAttribute, drawContext, params, fillCb, strokeCb);
+        function parsePoint(points, connectedType) {
+          return "none" === connectedType ? points : points.filter(p => !1 !== p.defined);
+        }
         if (line.shouldUpdateShape()) {
           const {
               points: points,
@@ -7218,7 +7207,7 @@
                 y: lastSeg.endY,
                 defined: lastSeg.curves[lastSeg.curves.length - 1].defined
               } : index > 1 && (startPoint.x = lastSeg.endX, startPoint.y = lastSeg.endY, startPoint.defined = lastSeg.curves[lastSeg.curves.length - 1].defined);
-              const data = calcLineCache(seg.points, curveType, {
+              const data = calcLineCache(parsePoint(seg.points, connectedType), curveType, {
                 startPoint: startPoint,
                 curveTension: curveTension
               });
@@ -7237,7 +7226,7 @@
             }
           } else {
             if (!points || !points.length) return line.cache = null, void line.clearUpdateShapeTag();
-            line.cache = calcLineCache(_points, curveType, {
+            line.cache = calcLineCache(parsePoint(_points, connectedType), curveType, {
               curveTension: curveTension
             });
           }
@@ -8657,7 +8646,7 @@
           } = attribute,
           b = aabbBounds;
         return points.forEach(p => {
-          !1 === p.defined && "zero" !== connectedType && "connect" !== connectedType || b.add(p.x, p.y);
+          !1 === p.defined && "connect" !== connectedType || b.add(p.x, p.y);
         }), b;
       }
       updateLineAABBBoundsBySegments(attribute, lineTheme, aabbBounds, graphic) {
@@ -8668,7 +8657,7 @@
           b = aabbBounds;
         return segments.forEach(s => {
           s.points.forEach(p => {
-            !1 === p.defined && "zero" !== connectedType && "connect" !== connectedType || b.add(p.x, p.y);
+            !1 === p.defined && "connect" !== connectedType || b.add(p.x, p.y);
           });
         }), b;
       }
@@ -9048,10 +9037,17 @@
           this.render(), this.bindEvents();
         });
       }
-      setAttribute(key, value, forceUpdateTag) {
+      setAttribute(key, value, forceUpdateTag, context) {
+        const params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate({
+          [key]: value
+        }, this.attribute, key, context);
+        if (params) return this._setAttributes(params, forceUpdateTag);
         vutils.isPlainObject(this.attribute[key]) && vutils.isPlainObject(value) && !vutils.isFunction(this.attribute[key]) && !vutils.isFunction(value) ? vutils.merge(this.attribute[key], value) : this.attribute[key] = value, GROUP_ATTRIBUTES.includes(key) || this.render(), this.valid = this.isValid(), this.updateShapeAndBoundsTagSetted() || !forceUpdateTag && !this.needUpdateTag(key) ? this.addUpdateBoundTag() : this.addUpdateShapeAndBoundsTag(), this.addUpdatePositionTag(), this.onAttributeUpdate();
       }
-      setAttributes(params, forceUpdateTag) {
+      setAttributes(params, forceUpdateTag, context) {
+        return params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params, this._setAttributes(params, forceUpdateTag);
+      }
+      _setAttributes(params, forceUpdateTag) {
         const keys = Object.keys(params);
         this._mergeAttributes(params, keys), keys.every(key => GROUP_ATTRIBUTES.includes(key)) || this.render(), this.valid = this.isValid(), this.updateShapeAndBoundsTagSetted() || !forceUpdateTag && !this.needUpdateTags(keys) ? this.addUpdateBoundTag() : this.addUpdateShapeAndBoundsTag(), this.addUpdatePositionTag(), this.onAttributeUpdate();
       }