@visactor/vrender-components 0.14.1 → 0.14.2

package/dist/index.js

@@ -207,13 +207,8 @@
             this._reset();
             const { direction = 'horizontal', width, height, range, limitRange = [0, 1], railStyle, sliderStyle, padding = 2 } = this.attribute;
             const group = this.createOrUpdateChild('scrollbar-container', {}, 'group');
-            const rail = group.createOrUpdateChild('scrollbar-rail', {
-                x: 0,
-                y: 0,
-                width,
-                height,
-                ...railStyle
-            }, 'rect');
+            const rail = group.createOrUpdateChild('scrollbar-rail', Object.assign({ x: 0, y: 0, width,
+                height }, railStyle), 'rect');
             this._rail = rail;
             const sliderRenderBounds = this._getSliderRenderBounds();
             const sliderPos = this._getSliderPos(vutils.clampRange(range, limitRange[0], limitRange[1]));
@@ -236,13 +231,7 @@
                     height: sliderSize
                 };
             }
-            const slider = group.createOrUpdateChild('slider', {
-                ...sliderAttribute,
-                cornerRadius: this._getDefaultSliderCornerRadius(),
-                ...sliderStyle,
-                boundsPadding: vutils.normalizePadding(padding),
-                pickMode: 'imprecise'
-            }, 'rect');
+            const slider = group.createOrUpdateChild('slider', Object.assign(Object.assign(Object.assign(Object.assign({}, sliderAttribute), { cornerRadius: this._getDefaultSliderCornerRadius() }), sliderStyle), { boundsPadding: vutils.normalizePadding(padding), pickMode: 'imprecise' }), 'rect');
             this._slider = slider;
             this._container = group;
             const containerAABBBounds = this._container.AABBBounds;
@@ -321,6 +310,63 @@
         scrollRange: [0, 1]
     };
 
+    function _typeof(obj) {
+      "@babel/helpers - typeof";
+
+      return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+        return typeof obj;
+      } : function (obj) {
+        return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+      }, _typeof(obj);
+    }
+
+    function __rest(s, e) {
+      var t = {};
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+      if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+        if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+      }
+      return t;
+    }
+    function __decorate(decorators, target, key, desc) {
+      var c = arguments.length,
+        r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+        d;
+      if ((typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+      return c > 3 && r && Object.defineProperty(target, key, r), r;
+    }
+    function __awaiter(thisArg, _arguments, P, generator) {
+      function adopt(value) {
+        return value instanceof P ? value : new P(function (resolve) {
+          resolve(value);
+        });
+      }
+      return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) {
+          try {
+            step(generator.next(value));
+          } catch (e) {
+            reject(e);
+          }
+        }
+        function rejected(value) {
+          try {
+            step(generator["throw"](value));
+          } catch (e) {
+            reject(e);
+          }
+        }
+        function step(result) {
+          result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+        }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+      });
+    }
+    typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+      var e = new Error(message);
+      return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+    };
+
     function traverseGroup(group, cb) {
         group.forEachChildren(node => {
             const stopped = cb(node);
@@ -509,15 +555,10 @@
     };
 
     const initTextMeasure = (textSpec, option, useNaiveCanvas) => {
-        return new vutils.TextMeasure({
-            defaultFontParams: {
+        return new vutils.TextMeasure(Object.assign({ defaultFontParams: {
                 fontFamily: DEFAULT_TEXT_FONT_FAMILY,
                 fontSize: DEFAULT_TEXT_FONT_SIZE
-            },
-            getTextBounds: useNaiveCanvas ? undefined : vrender.getTextBounds,
-            specialCharSet: '-/: .,@%\'"~' + vutils.TextMeasure.ALPHABET_CHAR_SET + vutils.TextMeasure.ALPHABET_CHAR_SET.toUpperCase(),
-            ...(option !== null && option !== void 0 ? option : {})
-        }, textSpec);
+            }, getTextBounds: useNaiveCanvas ? undefined : vrender.getTextBounds, specialCharSet: '-/: .,@%\'"~' + vutils.TextMeasure.ALPHABET_CHAR_SET + vutils.TextMeasure.ALPHABET_CHAR_SET.toUpperCase() }, (option !== null && option !== void 0 ? option : {})), textSpec);
     };
     function measureTextSize(text, textSpec) {
         var _a, _b;
@@ -553,19 +594,11 @@
             let tagHeight = parsedPadding[0] + parsedPadding[2];
             let textX = 0;
             let symbolPlaceWidth = 0;
-            const { visible: shapeVisible, ...shapeStyle } = shape;
+            const { visible: shapeVisible } = shape, shapeStyle = __rest(shape, ["visible"]);
             if (vutils.isBoolean(shapeVisible)) {
                 const size = (shapeStyle === null || shapeStyle === void 0 ? void 0 : shapeStyle.size) || 10;
                 const maxSize = vutils.isNumber(size) ? size : Math.max(size[0], size[1]);
-                symbol = group.createOrUpdateChild('tag-shape', {
-                    symbolType: 'circle',
-                    size,
-                    strokeBoundsBuffer: 0,
-                    ...shapeStyle,
-                    visible: shapeVisible,
-                    x: maxSize / 2,
-                    y: maxSize / 2
-                }, 'symbol');
+                symbol = group.createOrUpdateChild('tag-shape', Object.assign(Object.assign({ symbolType: 'circle', size, strokeBoundsBuffer: 0 }, shapeStyle), { visible: shapeVisible, x: maxSize / 2, y: maxSize / 2 }), 'symbol');
                 if (!vutils.isEmpty(state === null || state === void 0 ? void 0 : state.shape)) {
                     symbol.states = state.shape;
                 }
@@ -575,14 +608,7 @@
             }
             tagWidth += symbolPlaceWidth;
             textX += symbolPlaceWidth;
-            const textAttrs = {
-                text,
-                visible: vutils.isValid(text) && visible !== false,
-                lineHeight: textStyle === null || textStyle === void 0 ? void 0 : textStyle.fontSize,
-                ...textStyle,
-                x: textX,
-                y: 0
-            };
+            const textAttrs = Object.assign(Object.assign({ text, visible: vutils.isValid(text) && visible !== false, lineHeight: textStyle === null || textStyle === void 0 ? void 0 : textStyle.fontSize }, textStyle), { x: textX, y: 0 });
             if (vutils.isNil(textAttrs.lineHeight)) {
                 textAttrs.lineHeight = textAttrs.fontSize;
             }
@@ -645,16 +671,10 @@
                     symbol.setAttribute('y', textHeight / 2);
                 }
             }
-            const { visible: bgVisible, ...backgroundStyle } = panel;
+            const { visible: bgVisible } = panel, backgroundStyle = __rest(panel, ["visible"]);
             if (visible && vutils.isBoolean(bgVisible)) {
-                const bgRect = this.createOrUpdateChild('tag-panel', {
-                    ...backgroundStyle,
-                    visible: bgVisible && !!text,
-                    x,
-                    y,
-                    width: tagWidth,
-                    height: tagHeight
-                }, 'rect');
+                const bgRect = this.createOrUpdateChild('tag-panel', Object.assign(Object.assign({}, backgroundStyle), { visible: bgVisible && !!text, x,
+                    y, width: tagWidth, height: tagHeight }), 'rect');
                 if (!vutils.isEmpty(state === null || state === void 0 ? void 0 : state.panel)) {
                     bgRect.states = state.panel;
                 }
@@ -689,16 +709,7 @@
             const group = this.createOrUpdateChild('poptip-content', { x: 0, y: 0, zIndex: 1 }, 'group');
             const maxLineWidth = maxWidth - parsedPadding[1] - parsedPadding[3];
             const titleVisible = vutils.isValid(title) && visible !== false;
-            const titleAttrs = {
-                text: title,
-                visible: titleVisible,
-                ...titleStyle,
-                x: parsedPadding[3],
-                y: parsedPadding[0],
-                maxLineWidth,
-                textAlign: 'left',
-                textBaseline: 'top'
-            };
+            const titleAttrs = Object.assign(Object.assign({ text: title, visible: titleVisible }, titleStyle), { x: parsedPadding[3], y: parsedPadding[0], maxLineWidth, textAlign: 'left', textBaseline: 'top' });
             const titleShape = group.createOrUpdateChild('poptip-title', titleAttrs, 'text');
             if (!vutils.isEmpty(state === null || state === void 0 ? void 0 : state.title)) {
                 titleShape.states = state.title;
@@ -711,16 +722,7 @@
                 height = 0;
             }
             const contentVisible = vutils.isValid(content) && visible !== false;
-            const contentAttrs = {
-                text: content,
-                visible: contentVisible,
-                ...contentStyle,
-                x: parsedPadding[3],
-                y: parsedPadding[0] + height,
-                maxLineWidth,
-                textAlign: 'left',
-                textBaseline: 'top'
-            };
+            const contentAttrs = Object.assign(Object.assign({ text: content, visible: contentVisible }, contentStyle), { x: parsedPadding[3], y: parsedPadding[0] + height, maxLineWidth, textAlign: 'left', textBaseline: 'top' });
             const contentShape = group.createOrUpdateChild('poptip-content', contentAttrs, 'text');
             if (!vutils.isEmpty(state === null || state === void 0 ? void 0 : state.content)) {
                 contentShape.states = state.content;
@@ -739,7 +741,7 @@
                 popTipWidth = minWidth;
             }
             const poptipHeight = parsedPadding[0] + parsedPadding[2] + height;
-            const { visible: bgVisible, ...backgroundStyle } = panel;
+            const { visible: bgVisible } = panel, backgroundStyle = __rest(panel, ["visible"]);
             const symbolSize = (_a = backgroundStyle.size) !== null && _a !== void 0 ? _a : 12;
             const spaceSize = vutils.isArray(symbolSize)
                 ? [symbolSize[0] + ((_b = backgroundStyle.space) !== null && _b !== void 0 ? _b : 0), symbolSize[1] + ((_c = backgroundStyle.space) !== null && _c !== void 0 ? _c : 0)]
@@ -756,33 +758,11 @@
                 const { angle, offset, rectOffset } = this.getAngleAndOffset(p, popTipWidth, poptipHeight, vutils.isArray(spaceSize) ? spaceSize : [spaceSize, spaceSize - lineWidth]);
                 if (vutils.isBoolean(bgVisible)) {
                     const offsetX = (vutils.isArray(symbolSize) ? symbolSize[0] : symbolSize) / 4;
-                    const bgSymbol = group.createOrUpdateChild('poptip-symbol-panel', {
-                        ...backgroundStyle,
-                        visible: bgVisible && (contentVisible || titleVisible),
-                        x: offsetX,
-                        y: 0,
-                        strokeBoundsBuffer: -1,
-                        boundsPadding: -2,
-                        anchor: [0, 0],
-                        symbolType: 'arrow2Left',
-                        angle: angle,
-                        dx: offset[0],
-                        dy: offset[1],
-                        size: symbolSize,
-                        zIndex: -9
-                    }, 'symbol');
+                    const bgSymbol = group.createOrUpdateChild('poptip-symbol-panel', Object.assign(Object.assign({}, backgroundStyle), { visible: bgVisible && (contentVisible || titleVisible), x: offsetX, y: 0, strokeBoundsBuffer: -1, boundsPadding: -2, anchor: [0, 0], symbolType: 'arrow2Left', angle: angle, dx: offset[0], dy: offset[1], size: symbolSize, zIndex: -9 }), 'symbol');
                     if (!vutils.isEmpty(state === null || state === void 0 ? void 0 : state.panel)) {
                         bgSymbol.states = state.panel;
                     }
-                    const bgRect = group.createOrUpdateChild('poptip-rect-panel', {
-                        ...backgroundStyle,
-                        visible: bgVisible && (contentVisible || titleVisible),
-                        x: 0,
-                        y: 0,
-                        width: popTipWidth,
-                        height: poptipHeight,
-                        zIndex: -8
-                    }, 'rect');
+                    const bgRect = group.createOrUpdateChild('poptip-rect-panel', Object.assign(Object.assign({}, backgroundStyle), { visible: bgVisible && (contentVisible || titleVisible), x: 0, y: 0, width: popTipWidth, height: poptipHeight, zIndex: -8 }), 'rect');
                     if (!vutils.isEmpty(state === null || state === void 0 ? void 0 : state.panel)) {
                         bgRect.states = state.panel;
                     }
@@ -877,16 +857,6 @@
     var PARAM_TYPES = "inversify:paramtypes";
     var DESIGN_PARAM_TYPES = "design:paramtypes";
 
-    function _typeof(obj) {
-      "@babel/helpers - typeof";
-
-      return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-        return typeof obj;
-      } : function (obj) {
-        return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-      }, _typeof(obj);
-    }
-
     var idCounter = 0;
     function id() {
       return idCounter++;
@@ -913,18 +883,6 @@
       };
     }
 
-    function __decorate(decorators, target, key, desc) {
-      var c = arguments.length,
-        r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
-        d;
-      if ((typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-      return c > 3 && r && Object.defineProperty(target, key, r), r;
-    }
-    typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-      var e = new Error(message);
-      return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-    };
-
     const DEFAULT_THEME = {
         visible: true,
         position: 'auto',
@@ -973,14 +931,7 @@
                     poptip.content = (_a = poptip.content) !== null && _a !== void 0 ? _a : graphic.attribute.text;
                 }
                 const matrix = graphic.globalTransMatrix;
-                this.poptipComponent.setAttributes({
-                    visibleAll: true,
-                    pickable: false,
-                    childrenPickable: false,
-                    ...poptip,
-                    x: matrix.e,
-                    y: matrix.f
-                });
+                this.poptipComponent.setAttributes(Object.assign(Object.assign({ visibleAll: true, pickable: false, childrenPickable: false }, poptip), { x: matrix.e, y: matrix.f }));
                 drawContext.stage.tryInitInteractiveLayer();
                 const interactiveLayer = drawContext.stage.getLayer('_builtin_interactive');
                 if (interactiveLayer) {
@@ -1137,10 +1088,7 @@
         }
         renderCrosshair(container) {
             const { start, end, lineStyle } = this.attribute;
-            const line = container.createOrUpdateChild('crosshair-line', {
-                points: [start, end],
-                ...lineStyle
-            }, 'line');
+            const line = container.createOrUpdateChild('crosshair-line', Object.assign({ points: [start, end] }, lineStyle), 'line');
             return line;
         }
         setLocation(region) {
@@ -1165,13 +1113,7 @@
         }
         renderCrosshair(container) {
             const { start, end, rectStyle } = this.attribute;
-            const rect = container.createOrUpdateChild('crosshair-rect', {
-                x: start.x,
-                y: start.y,
-                width: end.x - start.x,
-                height: end.y - start.y,
-                ...rectStyle
-            }, 'rect');
+            const rect = container.createOrUpdateChild('crosshair-rect', Object.assign({ x: start.x, y: start.y, width: end.x - start.x, height: end.y - start.y }, rectStyle), 'rect');
             return rect;
         }
         setLocation(region) {
@@ -1195,12 +1137,7 @@
         }
         renderCrosshair(container) {
             const { center, radius, lineStyle } = this.attribute;
-            const circle = container.createOrUpdateChild('crosshair-circle', {
-                ...center,
-                outerRadius: radius,
-                ...this.attribute,
-                ...lineStyle
-            }, 'arc');
+            const circle = container.createOrUpdateChild('crosshair-circle', Object.assign(Object.assign(Object.assign(Object.assign({}, center), { outerRadius: radius }), this.attribute), lineStyle), 'arc');
             return circle;
         }
         setLocation(point) {
@@ -1224,14 +1161,9 @@
         renderCrosshair(container) {
             const { center, radius, innerRadius = 0, sectorStyle } = this.attribute;
             const { startAngle, endAngle } = this.attribute;
-            const circle = container.createOrUpdateChild('crosshair-sector', {
-                ...center,
-                outerRadius: radius,
-                innerRadius,
+            const circle = container.createOrUpdateChild('crosshair-sector', Object.assign(Object.assign(Object.assign({}, center), { outerRadius: radius, innerRadius,
                 startAngle,
-                endAngle,
-                ...sectorStyle
-            }, 'arc');
+                endAngle }), sectorStyle), 'arc');
             return circle;
         }
         setLocation(point) {
@@ -1274,10 +1206,7 @@
                     path += 'Z';
                 }
             }
-            const polygon = container.createOrUpdateChild('crosshair-polygon', {
-                path,
-                ...lineStyle
-            }, 'path');
+            const polygon = container.createOrUpdateChild('crosshair-polygon', Object.assign({ path }, lineStyle), 'path');
             return polygon;
         }
         setLocation(point) {
@@ -1758,11 +1687,7 @@
             for (let i = 0; i < data.length; i++) {
                 const textData = data[i];
                 const baseMark = this._idToGraphic.get(textData.id);
-                const labelAttribute = {
-                    fill: baseMark.attribute.fill,
-                    ...textStyle,
-                    ...textData
-                };
+                const labelAttribute = Object.assign(Object.assign({ fill: baseMark.attribute.fill }, textStyle), textData);
                 const text = this._createLabelText(labelAttribute);
                 const textBounds = this.getGraphicBounds(text);
                 textBoundsArray.push(textBounds);
@@ -1920,7 +1845,7 @@
             const prevTextMap = this._graphicToText || new Map();
             const texts = [];
             labels.forEach((text, index) => {
-                var _a, _b, _c, _d, _e, _f, _g, _h;
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
                 const labelLine = ((_a = text.attribute) === null || _a === void 0 ? void 0 : _a.labelLinePath)
                     ? vrender.createPath({
                         visible: (_c = (_b = text.attribute) === null || _b === void 0 ? void 0 : _b.visible) !== null && _c !== void 0 ? _c : true,
@@ -1933,7 +1858,7 @@
                 const state = (prevTextMap === null || prevTextMap === void 0 ? void 0 : prevTextMap.get(relatedGraphic)) ? 'update' : 'enter';
                 if (state === 'enter') {
                     texts.push(text);
-                    currentTextMap.set(relatedGraphic, text);
+                    currentTextMap.set(relatedGraphic, labelLine ? { text, labelLine } : { text });
                     if (!disableAnimation && relatedGraphic) {
                         const { from, to } = getAnimationAttributes(text.attribute, 'fadeIn');
                         this.add(text);
@@ -1960,11 +1885,17 @@
                     }
                 }
                 if (state === 'update') {
-                    const prevText = prevTextMap.get(relatedGraphic);
+                    const prevLabel = prevTextMap.get(relatedGraphic);
                     prevTextMap.delete(relatedGraphic);
-                    currentTextMap.set(relatedGraphic, prevText);
+                    currentTextMap.set(relatedGraphic, prevLabel);
                     if (!disableAnimation) {
+                        const prevText = prevLabel.text;
                         prevText.animate().to(text.attribute, duration, easing);
+                        if (prevLabel.labelLine) {
+                            prevLabel.labelLine
+                                .animate()
+                                .to(vutils.merge({}, prevLabel.labelLine.attribute, { path: (_j = text.attribute) === null || _j === void 0 ? void 0 : _j.labelLinePath }), duration, easing);
+                        }
                         if (animationConfig.increaseEffect !== false &&
                             prevText.attribute.text !== text.attribute.text &&
                             vutils.isValidNumber(Number(prevText.attribute.text) * Number(text.attribute.text))) {
@@ -1974,17 +1905,27 @@
                         }
                     }
                     else {
-                        prevText.setAttributes(text.attribute);
+                        prevLabel.text.setAttributes(text.attribute);
+                        if (prevLabel === null || prevLabel === void 0 ? void 0 : prevLabel.labelLine) {
+                            prevLabel.labelLine.setAttributes({ path: (_k = text.attribute) === null || _k === void 0 ? void 0 : _k.labelLinePath });
+                        }
                     }
                 }
             });
             prevTextMap.forEach(label => {
+                var _a;
                 if (disableAnimation) {
-                    this.removeChild(label);
+                    this.removeChild(label.text);
+                    if (label === null || label === void 0 ? void 0 : label.labelLine) {
+                        this.removeChild(label.labelLine);
+                    }
                 }
                 else {
-                    label === null || label === void 0 ? void 0 : label.animate().to(getAnimationAttributes(label.attribute, 'fadeOut').to, duration, easing).onEnd(() => {
-                        this.removeChild(label);
+                    (_a = label.text) === null || _a === void 0 ? void 0 : _a.animate().to(getAnimationAttributes(label.text.attribute, 'fadeOut').to, duration, easing).onEnd(() => {
+                        this.removeChild(label.text);
+                        if (label === null || label === void 0 ? void 0 : label.labelLine) {
+                            this.removeChild(label.labelLine);
+                        }
                     });
                 }
             });
@@ -3210,11 +3151,7 @@
                     const { center } = this.attribute;
                     path = getArcPath(center, points, false, !!closed);
                 }
-                const shape = vrender.createPath({
-                    path,
-                    z: depth,
-                    ...(vutils.isFunction(style) ? vutils.merge({}, Grid.defaultAttributes.style, style(item, index)) : style)
-                });
+                const shape = vrender.createPath(Object.assign({ path, z: depth }, (vutils.isFunction(style) ? vutils.merge({}, Grid.defaultAttributes.style, style(item, index)) : style)));
                 shape.name = `${this.name}-line`;
                 shape.id = this._getNodeId(`path-${id}`);
                 this.add(shape);
@@ -3231,14 +3168,7 @@
                     const path = getLinePath(nextPoints, !!closed);
                     const deltaX = vutils.abs(nextPoints[0].x - nextPoints[1].x);
                     const deltaY = vutils.abs(nextPoints[0].y - nextPoints[1].y);
-                    const shape = vrender.createPath({
-                        path,
-                        z: 0,
-                        alpha: deltaX > deltaY ? ((points[1].x - points[0].x > 0 ? -1 : 1) * vutils.pi) / 2 : 0,
-                        beta: deltaX < deltaY ? -vutils.pi / 2 : 0,
-                        anchor3d: deltaX > deltaY ? [nextPoints[0].x, 0] : [0, nextPoints[0].y],
-                        ...(vutils.isFunction(style) ? vutils.merge({}, Grid.defaultAttributes.style, style(item, index)) : style)
-                    });
+                    const shape = vrender.createPath(Object.assign({ path, z: 0, alpha: deltaX > deltaY ? ((points[1].x - points[0].x > 0 ? -1 : 1) * vutils.pi) / 2 : 0, beta: deltaX < deltaY ? -vutils.pi / 2 : 0, anchor3d: deltaX > deltaY ? [nextPoints[0].x, 0] : [0, nextPoints[0].y] }, (vutils.isFunction(style) ? vutils.merge({}, Grid.defaultAttributes.style, style(item, index)) : style)));
                     shape.name = `${this.name}-line`;
                     shape.id = this._getNodeId(`path-${id}`);
                     this.add(shape);
@@ -3322,11 +3252,7 @@
                 };
                 pointsAfterClip = [...pointsAfterClip.slice(0, pointsAfterClip.length - 1), pointsEnd];
             }
-            const line = vrender.createLine({
-                points: pointsAfterClip,
-                fill: false,
-                ...lineStyle
-            });
+            const line = vrender.createLine(Object.assign({ points: pointsAfterClip, fill: false }, lineStyle));
             line.name = 'line';
             line.id = this._getNodeId('line');
             if (!vutils.isEmpty(state === null || state === void 0 ? void 0 : state.line)) {
@@ -3361,14 +3287,7 @@
                     };
                     rotate = endAngle + Math.PI / 2;
                 }
-                symbol = vrender.createSymbol({
-                    ...position,
-                    symbolType: symbolType,
-                    size,
-                    angle: autoRotate ? rotate + refAngle : 0,
-                    strokeBoundsBuffer: 0,
-                    ...style
-                });
+                symbol = vrender.createSymbol(Object.assign(Object.assign(Object.assign({}, position), { symbolType: symbolType, size, angle: autoRotate ? rotate + refAngle : 0, strokeBoundsBuffer: 0 }), style));
                 symbol.name = `${dim}-symbol`;
                 symbol.id = this._getNodeId(`${dim}-symbol`);
                 if (!vutils.isEmpty(state === null || state === void 0 ? void 0 : state.symbol)) {
@@ -3660,9 +3579,7 @@
             container.add(tickLineGroup);
             tickLineItems.forEach((item, index) => {
                 var _a;
-                const line = vrender.createLine({
-                    ...this._getTickLineAttribute('tick', item, index, tickLineItems)
-                });
+                const line = vrender.createLine(Object.assign({}, this._getTickLineAttribute('tick', item, index, tickLineItems)));
                 line.name = exports.AXIS_ELEMENT_NAME.tick;
                 line.id = this._getNodeId(item.id);
                 if (vutils.isEmpty((_a = this.attribute.tick) === null || _a === void 0 ? void 0 : _a.state)) {
@@ -3686,9 +3603,7 @@
                 const subTickLineItems = this.getSubTickLineItems();
                 if (subTickLineItems.length) {
                     subTickLineItems.forEach((item, index) => {
-                        const line = vrender.createLine({
-                            ...this._getTickLineAttribute('subTick', item, index, tickLineItems)
-                        });
+                        const line = vrender.createLine(Object.assign({}, this._getTickLineAttribute('subTick', item, index, tickLineItems)));
                         line.name = exports.AXIS_ELEMENT_NAME.subTick;
                         line.id = this._getNodeId(`${index}`);
                         if (vutils.isEmpty(subTick.state)) {
@@ -3762,9 +3677,7 @@
         }
         renderTitle(container) {
             const titleAttributes = this.getTitleAttribute();
-            const axisTitle = new Tag({
-                ...titleAttributes
-            });
+            const axisTitle = new Tag(Object.assign({}, titleAttributes));
             axisTitle.name = exports.AXIS_ELEMENT_NAME.title;
             axisTitle.id = this._getNodeId('title');
             container.add(axisTitle);
@@ -3894,17 +3807,13 @@
                     : style(tickItem.value, index, tickItem, tickItems))
                 : style;
             const { start, end, anchor, alpha, beta } = tickItem;
-            return {
-                points: [start, end],
-                anchor,
+            return Object.assign({ points: [start, end], anchor,
                 alpha,
-                beta,
-                ...style
-            };
+                beta }, style);
         }
         _getLabelAttribute(tickDatum, index, tickData, layer) {
             var _a, _b, _c, _d, _e, _f;
-            const { space = 4, inside = false, formatMethod, ...tagAttributes } = this.attribute.label;
+            const _g = this.attribute.label, { space = 4, inside = false, formatMethod } = _g, tagAttributes = __rest(_g, ["space", "inside", "formatMethod"]);
             let offset = space;
             let tickLength = 0;
             if (((_a = this.attribute.tick) === null || _a === void 0 ? void 0 : _a.visible) && ((_b = this.attribute.tick) === null || _b === void 0 ? void 0 : _b.inside) === inside) {
@@ -3942,32 +3851,19 @@
                     layer
                 });
             }
-            return {
-                ...point,
-                text,
-                lineHeight: textStyle === null || textStyle === void 0 ? void 0 : textStyle.fontSize,
-                ...textStyle
-            };
+            return Object.assign(Object.assign(Object.assign({}, point), { text, lineHeight: textStyle === null || textStyle === void 0 ? void 0 : textStyle.fontSize }), textStyle);
         }
         _transformItems(items) {
             const data = [];
             items.forEach((item) => {
                 var _a;
-                data.push({
-                    ...item,
-                    point: this.getTickCoord(item.value),
-                    id: (_a = item.id) !== null && _a !== void 0 ? _a : item.label
-                });
+                data.push(Object.assign(Object.assign({}, item), { point: this.getTickCoord(item.value), id: (_a = item.id) !== null && _a !== void 0 ? _a : item.label }));
             });
             return data;
         }
         _renderGridByType(type, container) {
             const gridAttrs = this.getGridAttribute(type);
-            const gridGroup = new Grid({
-                pickable: false,
-                ...gridAttrs,
-                zIndex: 0
-            });
+            const gridGroup = new Grid(Object.assign(Object.assign({ pickable: false }, gridAttrs), { zIndex: 0 }));
             gridGroup.name = type === 'subGrid' ? `${exports.AXIS_ELEMENT_NAME.grid}-sub` : `${exports.AXIS_ELEMENT_NAME.grid}`;
             gridGroup.id = this._getNodeId(type);
             container.add(gridGroup);
@@ -4294,13 +4190,7 @@
             if (panel && panel.visible) {
                 const axisContainer = this.axisContainer;
                 const axisContainerBounds = axisContainer.AABBBounds;
-                const bgRect = vrender.createRect({
-                    x: axisContainerBounds.x1,
-                    y: axisContainerBounds.y1,
-                    width: axisContainerBounds.width(),
-                    height: axisContainerBounds.height(),
-                    ...panel.style
-                });
+                const bgRect = vrender.createRect(Object.assign({ x: axisContainerBounds.x1, y: axisContainerBounds.y1, width: axisContainerBounds.width(), height: axisContainerBounds.height() }, panel.style));
                 bgRect.name = exports.AXIS_ELEMENT_NAME.background;
                 bgRect.id = this._getNodeId('background');
                 bgRect.states = vutils.merge({}, DEFAULT_STATES$1, (_a = panel.state) !== null && _a !== void 0 ? _a : {});
@@ -4309,14 +4199,9 @@
         }
         renderLine(container) {
             const { start, end, line } = this.attribute;
-            const { startSymbol, endSymbol, style, breakRange, breakShape, breakShapeStyle, state, ...restLineAttrs } = line;
-            const lineAttrs = {
-                points: [start, end],
-                startSymbol,
-                endSymbol,
-                lineStyle: style,
-                ...restLineAttrs
-            };
+            const _a = line, { startSymbol, endSymbol, style, breakRange, breakShape, breakShapeStyle, state } = _a, restLineAttrs = __rest(_a, ["startSymbol", "endSymbol", "style", "breakRange", "breakShape", "breakShapeStyle", "state"]);
+            const lineAttrs = Object.assign({ points: [start, end], startSymbol,
+                endSymbol, lineStyle: style }, restLineAttrs);
             if (!vutils.isEmpty(state)) {
                 lineAttrs.state = {
                     line: vutils.merge({}, DEFAULT_STATES$1, state),
@@ -4352,7 +4237,7 @@
         }
         getTitleAttribute() {
             var _a, _b, _c, _d, _e, _f, _g, _h;
-            const { position = 'middle', space = 4, textStyle = {}, autoRotate = true, shape, background, state, ...restAttrs } = this.attribute.title;
+            const _j = this.attribute.title, { position = 'middle', space = 4, textStyle = {}, autoRotate = true, shape, background, state } = _j, restAttrs = __rest(_j, ["position", "space", "textStyle", "autoRotate", "shape", "background", "state"]);
             let percent = 0.5;
             if (position === 'start') {
                 percent = 0;
@@ -4464,35 +4349,21 @@
                 textAlign = this.getTextAlign(vector);
                 textBaseline = this.getTextBaseline(vector, false);
             }
-            const attrs = {
-                ...titlePoint,
-                ...restAttrs,
-                textStyle: {
-                    textAlign,
-                    textBaseline,
-                    ...textStyle
-                },
-                state: {
+            const attrs = Object.assign(Object.assign(Object.assign({}, titlePoint), restAttrs), { textStyle: Object.assign({ textAlign,
+                    textBaseline }, textStyle), state: {
                     text: vutils.merge({}, DEFAULT_STATES$1, state === null || state === void 0 ? void 0 : state.text),
                     shape: vutils.merge({}, DEFAULT_STATES$1, state === null || state === void 0 ? void 0 : state.shape),
                     panel: vutils.merge({}, DEFAULT_STATES$1, state === null || state === void 0 ? void 0 : state.background)
-                }
-            };
+                } });
             attrs.angle = angle;
             if (shape && shape.visible) {
-                attrs.shape = {
-                    visible: true,
-                    ...shape.style
-                };
+                attrs.shape = Object.assign({ visible: true }, shape.style);
                 if (shape.space) {
                     attrs.space = shape.space;
                 }
             }
             if (background && background.visible) {
-                attrs.panel = {
-                    visible: true,
-                    ...background.style
-                };
+                attrs.panel = Object.assign({ visible: true }, background.style);
             }
             return attrs;
         }
@@ -4588,10 +4459,7 @@
                     items = subGridItems;
                 }
             }
-            return {
-                ...gridAttribute,
-                items
-            };
+            return Object.assign(Object.assign({}, gridAttribute), { items });
         }
         getTextBaseline(vector, inside) {
             let base = 'middle';
@@ -4744,14 +4612,8 @@
                 arcRadius = innerRadius;
                 arcInnerRadius = 0;
             }
-            const arcAttrs = {
-                ...center,
-                startAngle,
-                endAngle,
-                radius: arcRadius,
-                innerRadius: arcInnerRadius,
-                ...line === null || line === void 0 ? void 0 : line.style
-            };
+            const arcAttrs = Object.assign(Object.assign(Object.assign({}, center), { startAngle,
+                endAngle, radius: arcRadius, innerRadius: arcInnerRadius }), line === null || line === void 0 ? void 0 : line.style);
             const axisLine = vrender.createCircle(arcAttrs);
             axisLine.name = exports.AXIS_ELEMENT_NAME.line;
             axisLine.id = this._getNodeId('line');
@@ -4785,7 +4647,7 @@
         getTitleAttribute() {
             var _a, _b, _c, _d, _e, _f, _g, _h;
             const { center, radius, innerRadius = 0 } = this.attribute;
-            const { space = 4, textStyle = {}, shape, background, state, ...restAttrs } = this.attribute.title;
+            const _j = this.attribute.title, { space = 4, textStyle = {}, shape, background, state } = _j, restAttrs = __rest(_j, ["space", "textStyle", "shape", "background", "state"]);
             let titlePoint = center;
             let labelHeight = 0;
             if (((_a = this.attribute.label) === null || _a === void 0 ? void 0 : _a.visible) && ((_b = this.attribute.label) === null || _b === void 0 ? void 0 : _b.inside) === false) {
@@ -4818,36 +4680,21 @@
                     y: center.y + offset
                 };
             }
-            const attrs = {
-                ...titlePoint,
-                ...restAttrs,
-                textStyle: {
-                    textBaseline,
-                    textAlign: 'center',
-                    ...textStyle
-                },
-                state: {
+            const attrs = Object.assign(Object.assign(Object.assign({}, titlePoint), restAttrs), { textStyle: Object.assign({ textBaseline, textAlign: 'center' }, textStyle), state: {
                     text: vutils.merge({}, DEFAULT_STATES$1, state === null || state === void 0 ? void 0 : state.text),
                     shape: vutils.merge({}, DEFAULT_STATES$1, state === null || state === void 0 ? void 0 : state.shape),
                     panel: vutils.merge({}, DEFAULT_STATES$1, state === null || state === void 0 ? void 0 : state.background)
-                }
-            };
+                } });
             const { angle } = restAttrs;
             attrs.angle = angle;
             if (shape && shape.visible) {
-                attrs.shape = {
-                    visible: true,
-                    ...shape.style
-                };
+                attrs.shape = Object.assign({ visible: true }, shape.style);
                 if (shape.space) {
                     attrs.space = shape.space;
                 }
             }
             if (background && background.visible) {
-                attrs.panel = {
-                    visible: true,
-                    ...background.style
-                };
+                attrs.panel = Object.assign({ visible: true }, background.style);
             }
             return attrs;
         }
@@ -4964,11 +4811,8 @@
                     items = subGridItems;
                 }
             }
-            return {
-                ...gridAttribute,
-                items,
-                center
-            };
+            return Object.assign(Object.assign({}, gridAttribute), { items,
+                center });
         }
         getTextBaseline(vector) {
             let base = 'middle';
@@ -5027,12 +4871,7 @@
                             this._newElementAttrMap[el.id] = {
                                 state: 'update',
                                 node: el,
-                                attrs: {
-                                    ...newProps,
-                                    opacity: (_a = newProps.opacity) !== null && _a !== void 0 ? _a : 1,
-                                    fillOpacity: (_b = newProps.fillOpacity) !== null && _b !== void 0 ? _b : 1,
-                                    strokeOpacity: (_c = newProps.strokeOpacity) !== null && _c !== void 0 ? _c : 1
-                                }
+                                attrs: Object.assign(Object.assign({}, newProps), { opacity: (_a = newProps.opacity) !== null && _a !== void 0 ? _a : 1, fillOpacity: (_b = newProps.fillOpacity) !== null && _b !== void 0 ? _b : 1, strokeOpacity: (_c = newProps.strokeOpacity) !== null && _c !== void 0 ? _c : 1 })
                             };
                             el.setAttributes(oldEl.attribute);
                         }
@@ -5485,30 +5324,18 @@
             const { dragMaskStyle } = this.attribute;
             const { position, width, height } = this.getLayoutAttrFromConfig();
             if (this._isHorizontal) {
-                this._dragMask = this._container.createOrUpdateChild('dragMask', {
-                    x: vutils.clamp(this.dragMaskSize() < 0 ? this._activeCache.lastPos.x : this._activeCache.startPos.x, position.x, position.x + width),
-                    y: position.y,
-                    width: (this._activeState && this._activeTag === DataZoomActiveTag.background && Math.abs(this.dragMaskSize())) ||
-                        0,
-                    height,
-                    ...dragMaskStyle
-                }, 'rect');
+                this._dragMask = this._container.createOrUpdateChild('dragMask', Object.assign({ x: vutils.clamp(this.dragMaskSize() < 0 ? this._activeCache.lastPos.x : this._activeCache.startPos.x, position.x, position.x + width), y: position.y, width: (this._activeState && this._activeTag === DataZoomActiveTag.background && Math.abs(this.dragMaskSize())) ||
+                        0, height }, dragMaskStyle), 'rect');
             }
             else {
-                this._dragMask = this._container.createOrUpdateChild('dragMask', {
-                    x: position.x,
-                    y: vutils.clamp(this.dragMaskSize() < 0 ? this._activeCache.lastPos.y : this._activeCache.startPos.y, position.y, position.y + height),
-                    width,
-                    height: (this._activeState && this._activeTag === DataZoomActiveTag.background && Math.abs(this.dragMaskSize())) ||
-                        0,
-                    ...dragMaskStyle
-                }, 'rect');
+                this._dragMask = this._container.createOrUpdateChild('dragMask', Object.assign({ x: position.x, y: vutils.clamp(this.dragMaskSize() < 0 ? this._activeCache.lastPos.y : this._activeCache.startPos.y, position.y, position.y + height), width, height: (this._activeState && this._activeTag === DataZoomActiveTag.background && Math.abs(this.dragMaskSize())) ||
+                        0 }, dragMaskStyle), 'rect');
             }
         }
         renderText() {
             const { startTextStyle, endTextStyle } = this.attribute;
-            const { formatMethod: startTextFormat, ...restStartStyle } = startTextStyle;
-            const { formatMethod: endTextFormat, ...restEndTextStyle } = endTextStyle;
+            const { formatMethod: startTextFormat } = startTextStyle, restStartStyle = __rest(startTextStyle, ["formatMethod"]);
+            const { formatMethod: endTextFormat } = endTextStyle, restEndTextStyle = __rest(endTextStyle, ["formatMethod"]);
             const { start, end } = this.state;
             this._startValue = this._statePointToData(start);
             this._endValue = this._statePointToData(end);
@@ -5633,127 +5460,37 @@
             const { position, width, height } = this.getLayoutAttrFromConfig();
             const group = this.createOrUpdateChild('dataZoom-container', {}, 'group');
             this._container = group;
-            this._background = group.createOrUpdateChild('background', {
-                x: position.x,
-                y: position.y,
-                width,
-                height,
-                cursor: brushSelect ? 'crosshair' : 'auto',
-                ...backgroundStyle
-            }, 'rect');
+            this._background = group.createOrUpdateChild('background', Object.assign({ x: position.x, y: position.y, width,
+                height, cursor: brushSelect ? 'crosshair' : 'auto' }, backgroundStyle), 'rect');
             ((_a = backgroundChartStyle === null || backgroundChartStyle === void 0 ? void 0 : backgroundChartStyle.line) === null || _a === void 0 ? void 0 : _a.visible) && this.setPreviewAttributes('line', group);
             ((_b = backgroundChartStyle === null || backgroundChartStyle === void 0 ? void 0 : backgroundChartStyle.area) === null || _b === void 0 ? void 0 : _b.visible) && this.setPreviewAttributes('area', group);
             brushSelect && this.renderDragMask();
             if (this._isHorizontal) {
-                this._selectedBackground = group.createOrUpdateChild('selectedBackground', {
-                    x: position.x + start * width,
-                    y: position.y,
-                    width: (end - start) * width,
-                    height: height,
-                    cursor: brushSelect ? 'crosshair' : 'move',
-                    ...selectedBackgroundStyle
-                }, 'rect');
+                this._selectedBackground = group.createOrUpdateChild('selectedBackground', Object.assign({ x: position.x + start * width, y: position.y, width: (end - start) * width, height: height, cursor: brushSelect ? 'crosshair' : 'move' }, selectedBackgroundStyle), 'rect');
             }
             else {
-                this._selectedBackground = group.createOrUpdateChild('selectedBackground', {
-                    x: position.x,
-                    y: position.y + start * height,
-                    width,
-                    height: (end - start) * height,
-                    cursor: brushSelect ? 'crosshair' : 'move',
-                    ...selectedBackgroundStyle
-                }, 'rect');
+                this._selectedBackground = group.createOrUpdateChild('selectedBackground', Object.assign({ x: position.x, y: position.y + start * height, width, height: (end - start) * height, cursor: brushSelect ? 'crosshair' : 'move' }, selectedBackgroundStyle), 'rect');
             }
             ((_c = selectedBackgroundChartStyle === null || selectedBackgroundChartStyle === void 0 ? void 0 : selectedBackgroundChartStyle.line) === null || _c === void 0 ? void 0 : _c.visible) && this.setSelectedPreviewAttributes('line', group);
             ((_d = selectedBackgroundChartStyle === null || selectedBackgroundChartStyle === void 0 ? void 0 : selectedBackgroundChartStyle.area) === null || _d === void 0 ? void 0 : _d.visible) && this.setSelectedPreviewAttributes('area', group);
             this.renderText();
             if (this._isHorizontal) {
-                this._startHandler = group.createOrUpdateChild('startHandler', {
-                    x: position.x + start * width,
-                    y: position.y + height / 2,
-                    size: height,
-                    angle: 0,
-                    symbolType: (_e = startHandlerStyle === null || startHandlerStyle === void 0 ? void 0 : startHandlerStyle.symbolType) !== null && _e !== void 0 ? _e : 'square',
-                    cursor: 'ew-resize',
-                    strokeBoundsBuffer: 0,
-                    boundsPadding: 2,
-                    pickMode: 'imprecise',
-                    ...startHandlerStyle
-                }, 'symbol');
-                this._endHandler = group.createOrUpdateChild('endHandler', {
-                    x: position.x + end * width,
-                    y: position.y + height / 2,
-                    size: height,
-                    angle: 0,
-                    symbolType: (_f = endHandlerStyle === null || endHandlerStyle === void 0 ? void 0 : endHandlerStyle.symbolType) !== null && _f !== void 0 ? _f : 'square',
-                    cursor: 'ew-resize',
-                    strokeBoundsBuffer: 0,
-                    boundsPadding: 2,
-                    pickMode: 'imprecise',
-                    ...endHandlerStyle
-                }, 'symbol');
+                this._startHandler = group.createOrUpdateChild('startHandler', Object.assign({ x: position.x + start * width, y: position.y + height / 2, size: height, angle: 0, symbolType: (_e = startHandlerStyle === null || startHandlerStyle === void 0 ? void 0 : startHandlerStyle.symbolType) !== null && _e !== void 0 ? _e : 'square', cursor: 'ew-resize', strokeBoundsBuffer: 0, boundsPadding: 2, pickMode: 'imprecise' }, startHandlerStyle), 'symbol');
+                this._endHandler = group.createOrUpdateChild('endHandler', Object.assign({ x: position.x + end * width, y: position.y + height / 2, size: height, angle: 0, symbolType: (_f = endHandlerStyle === null || endHandlerStyle === void 0 ? void 0 : endHandlerStyle.symbolType) !== null && _f !== void 0 ? _f : 'square', cursor: 'ew-resize', strokeBoundsBuffer: 0, boundsPadding: 2, pickMode: 'imprecise' }, endHandlerStyle), 'symbol');
                 if (middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.visible) {
-                    this._middleHandlerRect = group.createOrUpdateChild('middleHandlerRect', {
-                        x: position.x + start * width,
-                        y: position.y - (((_g = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.background) === null || _g === void 0 ? void 0 : _g.size) || 10),
-                        width: (end - start) * width,
-                        height: ((_h = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.background) === null || _h === void 0 ? void 0 : _h.size) || 10,
-                        ...(_j = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.background) === null || _j === void 0 ? void 0 : _j.style
-                    }, 'rect');
-                    this._middleHandlerSymbol = group.createOrUpdateChild('middleHandlerSymbol', {
-                        x: position.x + ((start + end) / 2) * width,
-                        y: position.y - (((_k = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.background) === null || _k === void 0 ? void 0 : _k.size) || 10) / 2,
-                        strokeBoundsBuffer: 0,
-                        angle: 0,
-                        symbolType: (_m = (_l = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.icon) === null || _l === void 0 ? void 0 : _l.symbolType) !== null && _m !== void 0 ? _m : 'square',
-                        ...middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.icon
-                    }, 'symbol');
+                    this._middleHandlerRect = group.createOrUpdateChild('middleHandlerRect', Object.assign({ x: position.x + start * width, y: position.y - (((_g = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.background) === null || _g === void 0 ? void 0 : _g.size) || 10), width: (end - start) * width, height: ((_h = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.background) === null || _h === void 0 ? void 0 : _h.size) || 10 }, (_j = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.background) === null || _j === void 0 ? void 0 : _j.style), 'rect');
+                    this._middleHandlerSymbol = group.createOrUpdateChild('middleHandlerSymbol', Object.assign({ x: position.x + ((start + end) / 2) * width, y: position.y - (((_k = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.background) === null || _k === void 0 ? void 0 : _k.size) || 10) / 2, strokeBoundsBuffer: 0, angle: 0, symbolType: (_m = (_l = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.icon) === null || _l === void 0 ? void 0 : _l.symbolType) !== null && _m !== void 0 ? _m : 'square' }, middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.icon), 'symbol');
                 }
             }
             else {
-                this._startHandler = group.createOrUpdateChild('startHandler', {
-                    x: position.x + width / 2,
-                    y: position.y + start * height,
-                    size: width,
-                    angle: 90 * (Math.PI / 180),
-                    symbolType: (_o = startHandlerStyle === null || startHandlerStyle === void 0 ? void 0 : startHandlerStyle.symbolType) !== null && _o !== void 0 ? _o : 'square',
-                    cursor: 'ns-resize',
-                    boundsPadding: 2,
-                    pickMode: 'imprecise',
-                    strokeBoundsBuffer: 0,
-                    ...startHandlerStyle
-                }, 'symbol');
+                this._startHandler = group.createOrUpdateChild('startHandler', Object.assign({ x: position.x + width / 2, y: position.y + start * height, size: width, angle: 90 * (Math.PI / 180), symbolType: (_o = startHandlerStyle === null || startHandlerStyle === void 0 ? void 0 : startHandlerStyle.symbolType) !== null && _o !== void 0 ? _o : 'square', cursor: 'ns-resize', boundsPadding: 2, pickMode: 'imprecise', strokeBoundsBuffer: 0 }, startHandlerStyle), 'symbol');
                 if (middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.visible) {
-                    this._middleHandlerRect = group.createOrUpdateChild('middleHandlerRect', {
-                        x: orient === 'left' ? position.x - (((_p = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.background) === null || _p === void 0 ? void 0 : _p.size) || 10) : position.x + width,
-                        y: position.y + start * height,
-                        width: ((_q = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.background) === null || _q === void 0 ? void 0 : _q.size) || 10,
-                        height: (end - start) * height,
-                        ...(_r = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.background) === null || _r === void 0 ? void 0 : _r.style
-                    }, 'rect');
-                    this._middleHandlerSymbol = group.createOrUpdateChild('middleHandlerSymbol', {
-                        x: orient === 'left'
+                    this._middleHandlerRect = group.createOrUpdateChild('middleHandlerRect', Object.assign({ x: orient === 'left' ? position.x - (((_p = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.background) === null || _p === void 0 ? void 0 : _p.size) || 10) : position.x + width, y: position.y + start * height, width: ((_q = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.background) === null || _q === void 0 ? void 0 : _q.size) || 10, height: (end - start) * height }, (_r = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.background) === null || _r === void 0 ? void 0 : _r.style), 'rect');
+                    this._middleHandlerSymbol = group.createOrUpdateChild('middleHandlerSymbol', Object.assign({ x: orient === 'left'
                             ? position.x - (((_s = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.background) === null || _s === void 0 ? void 0 : _s.size) || 10) / 2
-                            : position.x + width + (((_t = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.background) === null || _t === void 0 ? void 0 : _t.size) || 10) / 2,
-                        y: position.y + ((start + end) / 2) * height,
-                        angle: 90 * (Math.PI / 180),
-                        symbolType: (_v = (_u = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.icon) === null || _u === void 0 ? void 0 : _u.symbolType) !== null && _v !== void 0 ? _v : 'square',
-                        strokeBoundsBuffer: 0,
-                        ...middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.icon
-                    }, 'symbol');
-                }
-                this._endHandler = group.createOrUpdateChild('endHandler', {
-                    x: position.x + width / 2,
-                    y: position.y + end * height,
-                    size: width,
-                    angle: 90 * (Math.PI / 180),
-                    symbolType: (_w = endHandlerStyle === null || endHandlerStyle === void 0 ? void 0 : endHandlerStyle.symbolType) !== null && _w !== void 0 ? _w : 'square',
-                    cursor: 'ns-resize',
-                    boundsPadding: 2,
-                    pickMode: 'imprecise',
-                    strokeBoundsBuffer: 0,
-                    ...endHandlerStyle
-                }, 'symbol');
+                            : position.x + width + (((_t = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.background) === null || _t === void 0 ? void 0 : _t.size) || 10) / 2, y: position.y + ((start + end) / 2) * height, angle: 90 * (Math.PI / 180), symbolType: (_v = (_u = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.icon) === null || _u === void 0 ? void 0 : _u.symbolType) !== null && _v !== void 0 ? _v : 'square', strokeBoundsBuffer: 0 }, middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.icon), 'symbol');
+                }
+                this._endHandler = group.createOrUpdateChild('endHandler', Object.assign({ x: position.x + width / 2, y: position.y + end * height, size: width, angle: 90 * (Math.PI / 180), symbolType: (_w = endHandlerStyle === null || endHandlerStyle === void 0 ? void 0 : endHandlerStyle.symbolType) !== null && _w !== void 0 ? _w : 'square', cursor: 'ns-resize', boundsPadding: 2, pickMode: 'imprecise', strokeBoundsBuffer: 0 }, endHandlerStyle), 'symbol');
             }
         }
         computeBasePoints() {
@@ -5848,19 +5585,9 @@
             }
             const { backgroundChartStyle } = this.attribute;
             type === 'line' &&
-                this._previewLine.setAttributes({
-                    points: this.getPreviewLinePoints(),
-                    curveType: 'basis',
-                    pickable: false,
-                    ...backgroundChartStyle === null || backgroundChartStyle === void 0 ? void 0 : backgroundChartStyle.line
-                });
+                this._previewLine.setAttributes(Object.assign({ points: this.getPreviewLinePoints(), curveType: 'basis', pickable: false }, backgroundChartStyle === null || backgroundChartStyle === void 0 ? void 0 : backgroundChartStyle.line));
             type === 'area' &&
-                this._previewArea.setAttributes({
-                    points: this.getPreviewAreaPoints(),
-                    curveType: 'basis',
-                    pickable: false,
-                    ...backgroundChartStyle === null || backgroundChartStyle === void 0 ? void 0 : backgroundChartStyle.area
-                });
+                this._previewArea.setAttributes(Object.assign({ points: this.getPreviewAreaPoints(), curveType: 'basis', pickable: false }, backgroundChartStyle === null || backgroundChartStyle === void 0 ? void 0 : backgroundChartStyle.area));
         }
         setSelectedPreviewAttributes(type, group) {
             if (!this._selectedPreviewGroupClip) {
@@ -5892,19 +5619,9 @@
                 pickable: false
             });
             type === 'line' &&
-                this._selectedPreviewLine.setAttributes({
-                    points: this.getPreviewLinePoints(),
-                    curveType: 'basis',
-                    pickable: false,
-                    ...selectedBackgroundChartStyle === null || selectedBackgroundChartStyle === void 0 ? void 0 : selectedBackgroundChartStyle.line
-                });
+                this._selectedPreviewLine.setAttributes(Object.assign({ points: this.getPreviewLinePoints(), curveType: 'basis', pickable: false }, selectedBackgroundChartStyle === null || selectedBackgroundChartStyle === void 0 ? void 0 : selectedBackgroundChartStyle.line));
             type === 'area' &&
-                this._selectedPreviewArea.setAttributes({
-                    points: this.getPreviewAreaPoints(),
-                    curveType: 'basis',
-                    pickable: false,
-                    ...selectedBackgroundChartStyle === null || selectedBackgroundChartStyle === void 0 ? void 0 : selectedBackgroundChartStyle.area
-                });
+                this._selectedPreviewArea.setAttributes(Object.assign({ points: this.getPreviewAreaPoints(), curveType: 'basis', pickable: false }, selectedBackgroundChartStyle === null || selectedBackgroundChartStyle === void 0 ? void 0 : selectedBackgroundChartStyle.area));
         }
         maybeAddLabel(container, attributes, name) {
             let labelShape = this.find(node => node.name === name, true);
@@ -6288,10 +6005,7 @@
             }
             this._label.setAttributes({
                 angle: label.autoRotate && labelAngle + ((_e = label === null || label === void 0 ? void 0 : label.refAngle) !== null && _e !== void 0 ? _e : 0),
-                textStyle: {
-                    ...DEFAULT_MARK_LINE_TEXT_STYLE_MAP[labelPosition],
-                    ...label.textStyle
-                }
+                textStyle: Object.assign(Object.assign({}, DEFAULT_MARK_LINE_TEXT_STYLE_MAP[labelPosition]), label.textStyle)
             });
         }
         initMarker(container) {
@@ -6305,9 +6019,7 @@
             line.name = 'mark-line-line';
             this._line = line;
             container.add(line);
-            const markLabel = new Tag({
-                ...label
-            });
+            const markLabel = new Tag(Object.assign({}, label));
             markLabel.name = 'mark-line-label';
             this._label = markLabel;
             container.add(markLabel);
@@ -6322,9 +6034,7 @@
                 endSymbol,
                 lineStyle
             });
-            (_b = this._label) === null || _b === void 0 ? void 0 : _b.setAttributes({
-                ...label
-            });
+            (_b = this._label) === null || _b === void 0 ? void 0 : _b.setAttributes(Object.assign({}, label));
             this.setLabelPos();
         }
     }
@@ -6369,49 +6079,31 @@
             const { label } = this.attribute;
             const labelPosition = (_a = label === null || label === void 0 ? void 0 : label.position) !== null && _a !== void 0 ? _a : 'middle';
             if (labelPosition.includes('left') || labelPosition.includes('Left')) {
-                (_b = this._label) === null || _b === void 0 ? void 0 : _b.setAttributes({
-                    ...this.getLeftPos()
-                });
+                (_b = this._label) === null || _b === void 0 ? void 0 : _b.setAttributes(Object.assign({}, this.getLeftPos()));
             }
             else if (labelPosition.includes('right') || labelPosition.includes('Right')) {
-                (_c = this._label) === null || _c === void 0 ? void 0 : _c.setAttributes({
-                    ...this.getRightPos()
-                });
+                (_c = this._label) === null || _c === void 0 ? void 0 : _c.setAttributes(Object.assign({}, this.getRightPos()));
             }
             else if (labelPosition.includes('top') || labelPosition.includes('Top')) {
-                (_d = this._label) === null || _d === void 0 ? void 0 : _d.setAttributes({
-                    ...this.getTopPos()
-                });
+                (_d = this._label) === null || _d === void 0 ? void 0 : _d.setAttributes(Object.assign({}, this.getTopPos()));
             }
             else if (labelPosition.includes('bottom') || labelPosition.includes('Bottom')) {
-                (_e = this._label) === null || _e === void 0 ? void 0 : _e.setAttributes({
-                    ...this.getBottomPos()
-                });
+                (_e = this._label) === null || _e === void 0 ? void 0 : _e.setAttributes(Object.assign({}, this.getBottomPos()));
             }
             else {
-                (_f = this._label) === null || _f === void 0 ? void 0 : _f.setAttributes({
-                    ...this.getMiddlePos()
-                });
+                (_f = this._label) === null || _f === void 0 ? void 0 : _f.setAttributes(Object.assign({}, this.getMiddlePos()));
             }
             (_g = this._label) === null || _g === void 0 ? void 0 : _g.setAttributes({
-                textStyle: {
-                    ...DEFAULT_MARK_AREA_TEXT_STYLE_MAP[labelPosition],
-                    ...label.textStyle
-                }
+                textStyle: Object.assign(Object.assign({}, DEFAULT_MARK_AREA_TEXT_STYLE_MAP[labelPosition]), label.textStyle)
             });
         }
         initMarker(container) {
             const { points, label, areaStyle } = this.attribute;
-            const area = vrender.createPolygon({
-                points: points,
-                ...areaStyle
-            });
+            const area = vrender.createPolygon(Object.assign({ points: points }, areaStyle));
             area.name = 'mark-area-area';
             this._area = area;
             container.add(area);
-            const markLabel = new Tag({
-                ...label
-            });
+            const markLabel = new Tag(Object.assign({}, label));
             markLabel.name = 'mark-area-label';
             this._label = markLabel;
             container.add(markLabel);
@@ -6420,13 +6112,8 @@
         updateMarker() {
             var _a, _b;
             const { points, label, areaStyle } = this.attribute;
-            (_a = this._area) === null || _a === void 0 ? void 0 : _a.setAttributes({
-                points: points,
-                ...areaStyle
-            });
-            (_b = this._label) === null || _b === void 0 ? void 0 : _b.setAttributes({
-                ...label
-            });
+            (_a = this._area) === null || _a === void 0 ? void 0 : _a.setAttributes(Object.assign({ points: points }, areaStyle));
+            (_b = this._label) === null || _b === void 0 ? void 0 : _b.setAttributes(Object.assign({}, label));
             this.setLabelPos();
         }
     }
@@ -6445,13 +6132,7 @@
             const itemOffsetX = refX * Math.cos(itemAngle) + refY * Math.cos(itemAngle - Math.PI / 2);
             const itemOffsetY = refX * Math.sin(itemAngle) + refY * Math.sin(itemAngle - Math.PI / 2);
             if (itemType === 'text') {
-                item === null || item === void 0 ? void 0 : item.setAttributes({
-                    ...textStyle,
-                    textStyle: {
-                        ...DEFAULT_MARK_POINT_TEXT_STYLE_MAP[(itemContent === null || itemContent === void 0 ? void 0 : itemContent.position) || 'end'],
-                        ...textStyle === null || textStyle === void 0 ? void 0 : textStyle.textStyle
-                    }
-                });
+                item === null || item === void 0 ? void 0 : item.setAttributes(Object.assign(Object.assign({}, textStyle), { textStyle: Object.assign(Object.assign({}, DEFAULT_MARK_POINT_TEXT_STYLE_MAP[(itemContent === null || itemContent === void 0 ? void 0 : itemContent.position) || 'end']), textStyle === null || textStyle === void 0 ? void 0 : textStyle.textStyle) }));
             }
             else if (itemType === 'richText') {
                 item === null || item === void 0 ? void 0 : item.setAttributes({
@@ -6497,27 +6178,16 @@
             const { type = 'text', symbolStyle, richTextStyle, imageStyle, renderCustomCallback } = itemContent;
             let item;
             if (type === 'symbol') {
-                item = vrender.createSymbol({
-                    ...itemPosition,
-                    ...symbolStyle
-                });
+                item = vrender.createSymbol(Object.assign(Object.assign({}, itemPosition), symbolStyle));
             }
             else if (type === 'text') {
-                item = new Tag({
-                    ...itemPosition
-                });
+                item = new Tag(Object.assign({}, itemPosition));
             }
             else if (type === 'richText') {
-                item = vrender.createRichText({
-                    ...itemPosition,
-                    ...richTextStyle
-                });
+                item = vrender.createRichText(Object.assign(Object.assign({}, itemPosition), richTextStyle));
             }
             else if (type === 'image') {
-                item = vrender.createImage({
-                    ...itemPosition,
-                    ...imageStyle
-                });
+                item = vrender.createImage(Object.assign(Object.assign({}, itemPosition), imageStyle));
             }
             else if (type === 'custom' && renderCustomCallback) {
                 item = renderCustomCallback();
@@ -6594,8 +6264,7 @@
             var _a;
             const { lineStyle } = itemLine;
             const { startPointOffsetX, startPointOffsetY, endPointOffsetX, endPointOffsetY } = this.getDecorativeLineAttr(itemLine, itemPosition);
-            (_a = this._decorativeLine) === null || _a === void 0 ? void 0 : _a.setAttributes({
-                points: [
+            (_a = this._decorativeLine) === null || _a === void 0 ? void 0 : _a.setAttributes(Object.assign(Object.assign({ points: [
                     {
                         x: itemPosition.x + startPointOffsetX,
                         y: itemPosition.y + startPointOffsetY
@@ -6604,10 +6273,7 @@
                         x: itemPosition.x + endPointOffsetX,
                         y: itemPosition.y + endPointOffsetY
                     }
-                ],
-                ...lineStyle,
-                visible
-            });
+                ] }, lineStyle), { visible }));
         }
         initMarker(container) {
             var _a;
@@ -6754,46 +6420,18 @@
             if (!nextShape) {
                 nextShape = isHorizontal ? 'triangleRight' : 'triangleDown';
             }
-            const preHandler = vrender.createSymbol({
-                strokeBoundsBuffer: 0,
-                pickMode: 'imprecise',
-                ...handlerStyle,
-                x: 0,
-                y: 0,
-                symbolType: preShape,
-                size: handlerSize
-            });
+            const preHandler = vrender.createSymbol(Object.assign(Object.assign({ strokeBoundsBuffer: 0, pickMode: 'imprecise' }, handlerStyle), { x: 0, y: 0, symbolType: preShape, size: handlerSize }));
             preHandler.states = handlerState;
             preHandler.name = 'preHandler';
             this.preHandler = preHandler;
             container.add(preHandler);
-            const { width: maxTextWidth, height: maxTextHeight } = measureTextSize(`${total}/${total}`, {
-                textAlign: 'center',
-                textBaseline: 'middle',
-                ...textStyle
-            });
+            const { width: maxTextWidth, height: maxTextHeight } = measureTextSize(`${total}/${total}`, Object.assign({ textAlign: 'center', textBaseline: 'middle' }, textStyle));
             const handlerSizeX = vutils.isNumber(handlerSize) ? handlerSize : handlerSize[0];
             const handlerSizeY = vutils.isNumber(handlerSize) ? handlerSize : handlerSize[1];
-            const text = vrender.createText({
-                x: isHorizontal ? handlerSizeX / 2 + handlerSpace + maxTextWidth / 2 : 0,
-                y: isHorizontal ? 0 : handlerSizeY / 2 + handlerSpace + maxTextHeight / 2,
-                text: `${defaultCurrent}/${total}`,
-                textAlign: 'center',
-                textBaseline: 'middle',
-                lineHeight: textStyle === null || textStyle === void 0 ? void 0 : textStyle.fontSize,
-                ...textStyle
-            });
+            const text = vrender.createText(Object.assign({ x: isHorizontal ? handlerSizeX / 2 + handlerSpace + maxTextWidth / 2 : 0, y: isHorizontal ? 0 : handlerSizeY / 2 + handlerSpace + maxTextHeight / 2, text: `${defaultCurrent}/${total}`, textAlign: 'center', textBaseline: 'middle', lineHeight: textStyle === null || textStyle === void 0 ? void 0 : textStyle.fontSize }, textStyle));
             this.text = text;
             container.add(text);
-            const nextHandler = vrender.createSymbol({
-                strokeBoundsBuffer: 0,
-                pickMode: 'imprecise',
-                ...handlerStyle,
-                x: isHorizontal ? handlerSizeX + handlerSpace * 2 + maxTextWidth : 0,
-                y: isHorizontal ? 0 : handlerSizeY + handlerSpace * 2 + maxTextHeight,
-                symbolType: nextShape,
-                size: handlerSize
-            });
+            const nextHandler = vrender.createSymbol(Object.assign(Object.assign({ strokeBoundsBuffer: 0, pickMode: 'imprecise' }, handlerStyle), { x: isHorizontal ? handlerSizeX + handlerSpace * 2 + maxTextWidth : 0, y: isHorizontal ? 0 : handlerSizeY + handlerSpace * 2 + maxTextHeight, symbolType: nextShape, size: handlerSize }));
             nextHandler.name = 'nextHandler';
             nextHandler.states = handlerState;
             this.nextHandler = nextHandler;
@@ -6920,19 +6558,13 @@
                 maxWidth
             };
             if (shape && shape.visible) {
-                tagAttrs.shape = {
-                    visible: true,
-                    ...shape.style
-                };
+                tagAttrs.shape = Object.assign({ visible: true }, shape.style);
                 if (vutils.isValid(shape.space)) {
                     tagAttrs.space = shape.space;
                 }
             }
             if (background && background.visible) {
-                tagAttrs.panel = {
-                    visible: true,
-                    ...background.style
-                };
+                tagAttrs.panel = Object.assign({ visible: true }, background.style);
             }
             const titleTag = new Tag(tagAttrs);
             titleTag.name = exports.LEGEND_ELEMENT_NAME.title;
@@ -7230,11 +6862,7 @@
                 this._appendDataToShape(itemGroup, exports.LEGEND_ELEMENT_NAME.item, item, itemGroup);
             }
             else {
-                itemGroup = vrender.createGroup({
-                    x: 0,
-                    y: 0,
-                    ...background === null || background === void 0 ? void 0 : background.style
-                });
+                itemGroup = vrender.createGroup(Object.assign({ x: 0, y: 0 }, background === null || background === void 0 ? void 0 : background.style));
                 this._appendDataToShape(itemGroup, exports.LEGEND_ELEMENT_NAME.item, item, itemGroup, background === null || background === void 0 ? void 0 : background.state);
             }
             itemGroup.addState(isSelected ? exports.LegendStateValue.selected : exports.LegendStateValue.unSelected);
@@ -7247,14 +6875,7 @@
             let focusStartX = 0;
             const shapeSize = vutils.get(shapeAttr, 'style.size', DEFAULT_SHAPE_SIZE);
             const shapeSpace = vutils.get(shapeAttr, 'space', DEFAULT_SHAPE_SPACE);
-            const itemShape = vrender.createSymbol({
-                x: 0,
-                y: 0,
-                symbolType: 'circle',
-                strokeBoundsBuffer: 0,
-                ...shape,
-                ...shapeAttr.style
-            });
+            const itemShape = vrender.createSymbol(Object.assign(Object.assign({ x: 0, y: 0, symbolType: 'circle', strokeBoundsBuffer: 0 }, shape), shapeAttr.style));
             Object.keys(shapeAttr.state || {}).forEach(key => {
                 const color = shapeAttr.state[key].fill ||
                     shapeAttr.state[key].stroke;
@@ -7272,27 +6893,11 @@
             let focusSpace = 0;
             if (focus) {
                 const focusSize = vutils.get(focusIconStyle, 'size', DEFAULT_SHAPE_SIZE);
-                focusShape = vrender.createSymbol({
-                    x: 0,
-                    y: -focusSize / 2 - 1,
-                    strokeBoundsBuffer: 0,
-                    ...focusIconStyle,
-                    visible: false,
-                    pickMode: 'imprecise',
-                    boundsPadding: parsedPadding
-                });
+                focusShape = vrender.createSymbol(Object.assign(Object.assign({ x: 0, y: -focusSize / 2 - 1, strokeBoundsBuffer: 0 }, focusIconStyle), { visible: false, pickMode: 'imprecise', boundsPadding: parsedPadding }));
                 this._appendDataToShape(focusShape, exports.LEGEND_ELEMENT_NAME.focus, item, itemGroup);
                 focusSpace = focusSize;
             }
-            const labelShape = vrender.createText({
-                x: shapeSize / 2 + shapeSpace,
-                y: 0,
-                textAlign: 'start',
-                textBaseline: 'middle',
-                lineHeight: (labelAttr === null || labelAttr === void 0 ? void 0 : labelAttr.style).fontSize,
-                ...labelAttr === null || labelAttr === void 0 ? void 0 : labelAttr.style,
-                text: labelAttr.formatMethod ? labelAttr.formatMethod(label, item, index) : label
-            });
+            const labelShape = vrender.createText(Object.assign(Object.assign({ x: shapeSize / 2 + shapeSpace, y: 0, textAlign: 'start', textBaseline: 'middle', lineHeight: (labelAttr === null || labelAttr === void 0 ? void 0 : labelAttr.style).fontSize }, labelAttr === null || labelAttr === void 0 ? void 0 : labelAttr.style), { text: labelAttr.formatMethod ? labelAttr.formatMethod(label, item, index) : label }));
             this._appendDataToShape(labelShape, exports.LEGEND_ELEMENT_NAME.itemLabel, item, itemGroup, labelAttr === null || labelAttr === void 0 ? void 0 : labelAttr.state);
             labelShape.addState(isSelected ? exports.LegendStateValue.selected : exports.LegendStateValue.unSelected);
             innerGroup.add(labelShape);
@@ -7300,15 +6905,7 @@
             focusStartX += shapeSize / 2 + shapeSpace + labelShape.AABBBounds.width() + labelSpace;
             if (vutils.isValid(value)) {
                 const valueSpace = vutils.get(valueAttr, 'space', focus ? DEFAULT_VALUE_SPACE : 0);
-                const valueShape = vrender.createText({
-                    x: focusStartX + labelSpace,
-                    y: 0,
-                    textAlign: 'start',
-                    textBaseline: 'middle',
-                    lineHeight: (valueAttr === null || valueAttr === void 0 ? void 0 : valueAttr.style).fontSize,
-                    ...valueAttr === null || valueAttr === void 0 ? void 0 : valueAttr.style,
-                    text: valueAttr.formatMethod ? valueAttr.formatMethod(value, item, index) : value
-                });
+                const valueShape = vrender.createText(Object.assign(Object.assign({ x: focusStartX + labelSpace, y: 0, textAlign: 'start', textBaseline: 'middle', lineHeight: (valueAttr === null || valueAttr === void 0 ? void 0 : valueAttr.style).fontSize }, valueAttr === null || valueAttr === void 0 ? void 0 : valueAttr.style), { text: valueAttr.formatMethod ? valueAttr.formatMethod(value, item, index) : value }));
                 this._appendDataToShape(valueShape, exports.LEGEND_ELEMENT_NAME.itemValue, item, itemGroup, valueAttr === null || valueAttr === void 0 ? void 0 : valueAttr.state);
                 valueShape.addState(isSelected ? exports.LegendStateValue.selected : exports.LegendStateValue.unSelected);
                 if (this._itemWidthByUser) {
@@ -7355,7 +6952,7 @@
             const { maxWidth, maxHeight, maxCol = 1, maxRow = 2, item = {}, pager = {} } = this.attribute;
             const { spaceCol = DEFAULT_ITEM_SPACE_COL, spaceRow = DEFAULT_ITEM_SPACE_ROW } = item;
             const itemsContainer = this._itemsContainer;
-            const { animation = true, animationDuration = 450, animationEasing = 'quadIn', space: pagerSpace = DEFAULT_PAGER_SPACE, ...pageStyle } = pager;
+            const { animation = true, animationDuration = 450, animationEasing = 'quadIn', space: pagerSpace = DEFAULT_PAGER_SPACE } = pager, pageStyle = __rest(pager, ["animation", "animationDuration", "animationEasing", "space"]);
             let pagerComp;
             let pageHeight = 0;
             let pageWidth = 0;
@@ -7363,16 +6960,12 @@
             let startY = 0;
             let pages = 1;
             if (isHorizontal) {
-                pagerComp = new Pager({
-                    layout: maxRow === 1 ? 'horizontal' : 'vertical',
-                    total: 99,
-                    ...vutils.merge({
-                        handler: {
-                            preShape: 'triangleUp',
-                            nextShape: 'triangleDown'
-                        }
-                    }, pageStyle)
-                });
+                pagerComp = new Pager(Object.assign({ layout: maxRow === 1 ? 'horizontal' : 'vertical', total: 99 }, vutils.merge({
+                    handler: {
+                        preShape: 'triangleUp',
+                        nextShape: 'triangleDown'
+                    }
+                }, pageStyle)));
                 this._pager = pagerComp;
                 this._innerView.add(pagerComp);
                 pageHeight = (maxRow - 1) * spaceRow + this._itemHeight * maxRow;
@@ -7403,11 +6996,7 @@
                 });
             }
             else {
-                pagerComp = new Pager({
-                    layout: 'horizontal',
-                    total: 99,
-                    ...pageStyle
-                });
+                pagerComp = new Pager(Object.assign({ layout: 'horizontal', total: 99 }, pageStyle));
                 this._pager = pagerComp;
                 this._innerView.add(pagerComp);
                 pageWidth = this._itemMaxWidth * maxCol + (maxCol - 1) * spaceCol;
@@ -7883,15 +7472,7 @@
             let startLen = 0;
             let startTextShape;
             if (startText && startText.visible) {
-                startTextShape = vrender.createText({
-                    x: isHorizontal ? 0 : railWidth / 2,
-                    y: isHorizontal ? railHeight / 2 : 0,
-                    textAlign: isHorizontal ? 'start' : 'center',
-                    textBaseline: isHorizontal ? 'middle' : 'top',
-                    text: startText.text,
-                    lineHeight: (_a = startText.style) === null || _a === void 0 ? void 0 : _a.fontSize,
-                    ...startText.style
-                });
+                startTextShape = vrender.createText(Object.assign({ x: isHorizontal ? 0 : railWidth / 2, y: isHorizontal ? railHeight / 2 : 0, textAlign: isHorizontal ? 'start' : 'center', textBaseline: isHorizontal ? 'middle' : 'top', text: startText.text, lineHeight: (_a = startText.style) === null || _a === void 0 ? void 0 : _a.fontSize }, startText.style));
                 startTextShape.name = exports.SLIDER_ELEMENT_NAME.startText;
                 innerView.add(startTextShape);
                 const space = vutils.isValid(startText.space) ? startText.space : 0;
@@ -7914,15 +7495,7 @@
             let endTextShape;
             if (endText && endText.visible) {
                 const space = vutils.isValid(endText.space) ? endText.space : 0;
-                endTextShape = vrender.createText({
-                    x: isHorizontal ? startLen + space : railWidth / 2,
-                    y: isHorizontal ? railHeight / 2 : startLen + space,
-                    textAlign: isHorizontal ? 'start' : 'center',
-                    textBaseline: isHorizontal ? 'middle' : 'top',
-                    text: endText.text,
-                    lineHeight: (_b = endText.style) === null || _b === void 0 ? void 0 : _b.fontSize,
-                    ...endText.style
-                });
+                endTextShape = vrender.createText(Object.assign({ x: isHorizontal ? startLen + space : railWidth / 2, y: isHorizontal ? railHeight / 2 : startLen + space, textAlign: isHorizontal ? 'start' : 'center', textBaseline: isHorizontal ? 'middle' : 'top', text: endText.text, lineHeight: (_b = endText.style) === null || _b === void 0 ? void 0 : _b.fontSize }, endText.style));
                 endTextShape.name = exports.SLIDER_ELEMENT_NAME.endText;
                 innerView.add(endTextShape);
             }
@@ -7938,14 +7511,7 @@
             if (slidable !== false) {
                 cursor = 'pointer';
             }
-            const railShape = vrender.createRect({
-                x: 0,
-                y: 0,
-                width: railWidth,
-                height: railHeight,
-                cursor,
-                ...railStyle
-            });
+            const railShape = vrender.createRect(Object.assign({ x: 0, y: 0, width: railWidth, height: railHeight, cursor }, railStyle));
             railShape.name = exports.SLIDER_ELEMENT_NAME.rail;
             container.add(railShape);
             this._rail = railShape;
@@ -7962,14 +7528,7 @@
             const railLen = isHorizontal ? railWidth : railHeight;
             const [startValue, endValue] = convertValueToRange(value);
             const handlerStart = ((startValue - min) / (max - min)) * railLen;
-            const startHandler = this._renderHandler({
-                x: isHorizontal ? handlerStart : railWidth / 2,
-                y: isHorizontal ? railHeight / 2 : handlerStart,
-                size: handlerSize,
-                strokeBoundsBuffer: 0,
-                cursor: slidable === false ? 'default' : getDefaultCursor(isHorizontal),
-                ...handlerStyle
-            });
+            const startHandler = this._renderHandler(Object.assign({ x: isHorizontal ? handlerStart : railWidth / 2, y: isHorizontal ? railHeight / 2 : handlerStart, size: handlerSize, strokeBoundsBuffer: 0, cursor: slidable === false ? 'default' : getDefaultCursor(isHorizontal) }, handlerStyle));
             startHandler.name = exports.SLIDER_ELEMENT_NAME.startHandler;
             this._startHandler = startHandler;
             container.add(startHandler);
@@ -7982,14 +7541,7 @@
             }
             if (range) {
                 const handlerEnd = ((endValue - min) / (max - min)) * railLen;
-                const endHandler = this._renderHandler({
-                    x: isHorizontal ? handlerEnd : railWidth / 2,
-                    y: isHorizontal ? railHeight / 2 : handlerEnd,
-                    size: handlerSize,
-                    strokeBoundsBuffer: 0,
-                    cursor: slidable === false ? 'default' : getDefaultCursor(isHorizontal),
-                    ...handlerStyle
-                });
+                const endHandler = this._renderHandler(Object.assign({ x: isHorizontal ? handlerEnd : railWidth / 2, y: isHorizontal ? railHeight / 2 : handlerEnd, size: handlerSize, strokeBoundsBuffer: 0, cursor: slidable === false ? 'default' : getDefaultCursor(isHorizontal) }, handlerStyle));
                 endHandler.name = exports.SLIDER_ELEMENT_NAME.endHandler;
                 this._endHandler = endHandler;
                 container.add(endHandler);
@@ -8040,14 +7592,7 @@
                 cursor = getDefaultCursor(isHorizontal);
             }
             const trackWidth = ((endValue - startValue) / (max - min)) * railLen;
-            const track = vrender.createRect({
-                x: isHorizontal ? ((startValue - min) / (max - min)) * railLen : 0,
-                y: isHorizontal ? 0 : ((startValue - min) / (max - min)) * railLen,
-                width: isHorizontal ? trackWidth : railWidth,
-                height: isHorizontal ? railHeight : trackWidth,
-                cursor,
-                ...trackStyle
-            });
+            const track = vrender.createRect(Object.assign({ x: isHorizontal ? ((startValue - min) / (max - min)) * railLen : 0, y: isHorizontal ? 0 : ((startValue - min) / (max - min)) * railLen, width: isHorizontal ? trackWidth : railWidth, height: isHorizontal ? railHeight : trackWidth, cursor }, trackStyle));
             track.name = exports.SLIDER_ELEMENT_NAME.track;
             this._track = track;
             trackContainer.add(track);
@@ -8064,12 +7609,7 @@
             const railLen = isHorizontal ? railWidth : railHeight;
             const handlerStart = ((value - min) / (max - min)) * railLen;
             const textSpace = (_a = handlerText.space) !== null && _a !== void 0 ? _a : 4;
-            const textStyle = {
-                text: (handlerText === null || handlerText === void 0 ? void 0 : handlerText.formatter) ? handlerText.formatter(value) : value.toFixed((_b = handlerText === null || handlerText === void 0 ? void 0 : handlerText.precision) !== null && _b !== void 0 ? _b : 0),
-                lineHeight: (_c = handlerText.style) === null || _c === void 0 ? void 0 : _c.lineHeight,
-                cursor: slidable === false ? 'default' : getDefaultCursor(isHorizontal),
-                ...handlerText.style
-            };
+            const textStyle = Object.assign({ text: (handlerText === null || handlerText === void 0 ? void 0 : handlerText.formatter) ? handlerText.formatter(value) : value.toFixed((_b = handlerText === null || handlerText === void 0 ? void 0 : handlerText.precision) !== null && _b !== void 0 ? _b : 0), lineHeight: (_c = handlerText.style) === null || _c === void 0 ? void 0 : _c.lineHeight, cursor: slidable === false ? 'default' : getDefaultCursor(isHorizontal) }, handlerText.style);
             if (isHorizontal) {
                 if (align === 'top') {
                     textStyle.textBaseline = 'bottom';
@@ -8337,10 +7877,7 @@
                 handlerSize,
                 handlerStyle,
                 railStyle,
-                trackStyle: {
-                    fill: this._color,
-                    ...trackStyle
-                },
+                trackStyle: Object.assign({ fill: this._color }, trackStyle),
                 startText,
                 endText,
                 handlerText,
@@ -8419,10 +7956,7 @@
                     offset: 1,
                     color: endColor
                 });
-                track.setAttribute('fill', {
-                    ...this._color,
-                    stops: newStops
-                });
+                track.setAttribute('fill', Object.assign(Object.assign({}, this._color), { stops: newStops }));
             }
         }
     }
@@ -8530,10 +8064,7 @@
                 railHeight,
                 showHandler,
                 handlerSize,
-                handlerStyle: {
-                    symbolType: getSizeHandlerPath(align),
-                    ...handlerStyle
-                },
+                handlerStyle: Object.assign({ symbolType: getSizeHandlerPath(align) }, handlerStyle),
                 railStyle,
                 trackStyle,
                 startText,
@@ -8565,13 +8096,7 @@
                     slider.setAttribute('x', backgroundHeight);
                 }
             }
-            const background = vrender.createPath({
-                x: 0,
-                y: start,
-                path,
-                ...sizeBackground,
-                zIndex: 0
-            });
+            const background = vrender.createPath(Object.assign(Object.assign({ x: 0, y: start, path }, sizeBackground), { zIndex: 0 }));
             mainContainer.add(background);
             const titleSpace = this._title
                 ? this._title.AABBBounds.height() + vutils.get(this.attribute, 'title.space', DEFAULT_TITLE_SPACE)
@@ -8633,16 +8158,7 @@
                     this._mainTitle = group.createOrUpdateChild('mainTitle', attr, 'richtext');
                 }
                 else if (vutils.isValid(text)) {
-                    this._mainTitle = group.createOrUpdateChild('mainTitle', {
-                        text: [text],
-                        ...textStyle,
-                        maxLineWidth: (_k = textStyle === null || textStyle === void 0 ? void 0 : textStyle.maxLineWidth) !== null && _k !== void 0 ? _k : width,
-                        heightLimit: textStyle === null || textStyle === void 0 ? void 0 : textStyle.heightLimit,
-                        lineClamp: textStyle === null || textStyle === void 0 ? void 0 : textStyle.lineClamp,
-                        ellipsis: (_l = textStyle === null || textStyle === void 0 ? void 0 : textStyle.ellipsis) !== null && _l !== void 0 ? _l : true,
-                        x: 0,
-                        y: 0
-                    }, 'wrapText');
+                    this._mainTitle = group.createOrUpdateChild('mainTitle', Object.assign(Object.assign({ text: [text] }, textStyle), { maxLineWidth: (_k = textStyle === null || textStyle === void 0 ? void 0 : textStyle.maxLineWidth) !== null && _k !== void 0 ? _k : width, heightLimit: textStyle === null || textStyle === void 0 ? void 0 : textStyle.heightLimit, lineClamp: textStyle === null || textStyle === void 0 ? void 0 : textStyle.lineClamp, ellipsis: (_l = textStyle === null || textStyle === void 0 ? void 0 : textStyle.ellipsis) !== null && _l !== void 0 ? _l : true, x: 0, y: 0 }), 'wrapText');
                 }
             }
             const maintextHeight = this._mainTitle ? (_m = this._mainTitle) === null || _m === void 0 ? void 0 : _m.AABBBounds.height() : 0;
@@ -8663,16 +8179,7 @@
                     this._subTitle = group.createOrUpdateChild('subTitle', attr, 'richtext');
                 }
                 else if (vutils.isValid(subtext)) {
-                    this._subTitle = group.createOrUpdateChild('subTitle', {
-                        text: [subtext],
-                        ...subtextStyle,
-                        maxLineWidth: (_y = subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.maxLineWidth) !== null && _y !== void 0 ? _y : width,
-                        heightLimit: subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.heightLimit,
-                        lineClamp: subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.lineClamp,
-                        ellipsis: (_z = subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.ellipsis) !== null && _z !== void 0 ? _z : true,
-                        x: 0,
-                        y: maintextHeight
-                    }, 'wrapText');
+                    this._subTitle = group.createOrUpdateChild('subTitle', Object.assign(Object.assign({ text: [subtext] }, subtextStyle), { maxLineWidth: (_y = subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.maxLineWidth) !== null && _y !== void 0 ? _y : width, heightLimit: subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.heightLimit, lineClamp: subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.lineClamp, ellipsis: (_z = subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.ellipsis) !== null && _z !== void 0 ? _z : true, x: 0, y: maintextHeight }), 'wrapText');
                 }
             }
             const subtextHeight = this._subTitle ? (_0 = this._subTitle) === null || _0 === void 0 ? void 0 : _0.AABBBounds.height() : 0;
@@ -8839,13 +8346,7 @@
             if (vutils.isValid(title)) {
                 if (title.visible !== false) {
                     const titleStyle = vutils.merge({}, vutils.get(DEFAULT_INDICATOR_THEME, 'title.style'), title.style);
-                    this._title = group.createOrUpdateChild('indicator-title', {
-                        ...titleStyle,
-                        lineHeight: vutils.isValid(titleStyle.lineHeight) ? titleStyle.lineHeight : titleStyle.fontSize,
-                        visible: title.visible,
-                        x: 0,
-                        y: 0
-                    }, 'text');
+                    this._title = group.createOrUpdateChild('indicator-title', Object.assign(Object.assign({}, titleStyle), { lineHeight: vutils.isValid(titleStyle.lineHeight) ? titleStyle.lineHeight : titleStyle.fontSize, visible: title.visible, x: 0, y: 0 }), 'text');
                     if (title.autoFit && vutils.isValidNumber(limit)) {
                         this._setAutoFit(limit, this._title, title);
                     }
@@ -8868,13 +8369,7 @@
                 contents.forEach((contentItem, i) => {
                     if (contentItem.visible !== false) {
                         const contentStyle = vutils.merge({}, vutils.get(DEFAULT_INDICATOR_THEME, 'content.style'), contentItem.style);
-                        const contentComponent = group.createOrUpdateChild('indicator-content-' + i, {
-                            ...contentStyle,
-                            lineHeight: vutils.isValid(contentStyle.lineHeight) ? contentStyle.lineHeight : contentStyle.fontSize,
-                            visible: contentItem.visible,
-                            x: 0,
-                            y: titleHeight + titleSpace + lastContentHeight
-                        }, 'text');
+                        const contentComponent = group.createOrUpdateChild('indicator-content-' + i, Object.assign(Object.assign({}, contentStyle), { lineHeight: vutils.isValid(contentStyle.lineHeight) ? contentStyle.lineHeight : contentStyle.fontSize, visible: contentItem.visible, x: 0, y: titleHeight + titleSpace + lastContentHeight }), 'text');
                         if (contentItem.autoFit && vutils.isValidNumber(limit)) {
                             this._setAutoFit(limit, contentComponent, contentItem);
                         }
@@ -9081,30 +8576,16 @@
             this._isPaused = true;
             this.updateAttributes = () => {
                 this._startAttr = {
-                    style: {
-                        symbolType: iconPlay,
-                        ...Controller.defaultControllerAttr,
-                        ...this.attribute.start.style
-                    }
+                    style: Object.assign(Object.assign({ symbolType: iconPlay }, Controller.defaultControllerAttr), this.attribute.start.style)
                 };
                 this._pauseAttr = {
-                    style: {
-                        symbolType: iconPause,
-                        ...Controller.defaultControllerAttr,
-                        ...this.attribute.pause.style
-                    }
+                    style: Object.assign(Object.assign({ symbolType: iconPause }, Controller.defaultControllerAttr), this.attribute.pause.style)
                 };
                 this._forwardAttr = {
-                    style: {
-                        ...Controller.defaultControllerAttr,
-                        ...this.attribute.forward.style
-                    }
+                    style: Object.assign(Object.assign({}, Controller.defaultControllerAttr), this.attribute.forward.style)
                 };
                 this._backwardAttr = {
-                    style: {
-                        ...Controller.defaultControllerAttr,
-                        ...this.attribute.backward.style
-                    }
+                    style: Object.assign(Object.assign({}, Controller.defaultControllerAttr), this.attribute.backward.style)
                 };
                 this.updateLayout();
             };
@@ -9122,25 +8603,19 @@
             };
             this._initPlay = () => {
                 if (vutils.isNil(this._playController)) {
-                    this._playController = new PlayerIcon({
-                        ...this._startAttr.style
-                    });
+                    this._playController = new PlayerIcon(Object.assign({}, this._startAttr.style));
                     this.add(this._playController);
                 }
             };
             this._initBackward = () => {
                 if (vutils.isNil(this._backwardController)) {
-                    this._backwardController = new PlayerIcon({
-                        ...this._backwardAttr.style
-                    });
+                    this._backwardController = new PlayerIcon(Object.assign({}, this._backwardAttr.style));
                     this.add(this._backwardController);
                 }
             };
             this._initForward = () => {
                 if (vutils.isNil(this._forwardController)) {
-                    this._forwardController = new PlayerIcon({
-                        ...this._forwardAttr.style
-                    });
+                    this._forwardController = new PlayerIcon(Object.assign({}, this._forwardAttr.style));
                     this.add(this._forwardController);
                 }
             };
@@ -9171,16 +8646,10 @@
             };
             this.renderPlay = () => {
                 if (this._isPaused) {
-                    this._playController.setAttributes({
-                        symbolType: this._playController.getComputedAttribute('symbolType'),
-                        ...this._startAttr.style
-                    });
+                    this._playController.setAttributes(Object.assign({ symbolType: this._playController.getComputedAttribute('symbolType') }, this._startAttr.style));
                 }
                 else {
-                    this._playController.setAttributes({
-                        symbolType: this._playController.getComputedAttribute('symbolType'),
-                        ...this._pauseAttr.style
-                    });
+                    this._playController.setAttributes(Object.assign({ symbolType: this._playController.getComputedAttribute('symbolType') }, this._pauseAttr.style));
                 }
             };
             this.renderBackward = () => {
@@ -9379,63 +8848,31 @@
                 if (isHorizontal(this._orient)) {
                     attrs.layout = 'horizontal';
                     attrs.start = {
-                        style: {
-                            ...attrs.start.style,
-                            x: this._layoutInfo.start.x,
-                            y: this._layoutInfo.start.y
-                        }
+                        style: Object.assign(Object.assign({}, attrs.start.style), { x: this._layoutInfo.start.x, y: this._layoutInfo.start.y })
                     };
                     attrs.pause = {
-                        style: {
-                            ...attrs.pause.style,
-                            x: this._layoutInfo.start.x,
-                            y: this._layoutInfo.start.y
-                        }
+                        style: Object.assign(Object.assign({}, attrs.pause.style), { x: this._layoutInfo.start.x, y: this._layoutInfo.start.y })
                     };
                     attrs.backward = {
-                        style: {
-                            ...attrs.backward.style,
-                            x: this._layoutInfo.backward.x,
-                            y: this._layoutInfo.backward.y
-                        }
+                        style: Object.assign(Object.assign({}, attrs.backward.style), { x: this._layoutInfo.backward.x, y: this._layoutInfo.backward.y })
                     };
                     attrs.forward = {
-                        style: {
-                            ...attrs.forward.style,
-                            x: this._layoutInfo.forward.x,
-                            y: this._layoutInfo.forward.y
-                        }
+                        style: Object.assign(Object.assign({}, attrs.forward.style), { x: this._layoutInfo.forward.x, y: this._layoutInfo.forward.y })
                     };
                 }
                 else {
                     attrs.layout = 'vertical';
                     attrs.start = {
-                        style: {
-                            ...attrs.start.style,
-                            x: this._layoutInfo.start.x,
-                            y: this._layoutInfo.start.y
-                        }
+                        style: Object.assign(Object.assign({}, attrs.start.style), { x: this._layoutInfo.start.x, y: this._layoutInfo.start.y })
                     };
                     attrs.pause = {
-                        style: {
-                            ...attrs.pause.style,
-                            x: this._layoutInfo.start.x,
-                            y: this._layoutInfo.start.y
-                        }
+                        style: Object.assign(Object.assign({}, attrs.pause.style), { x: this._layoutInfo.start.x, y: this._layoutInfo.start.y })
                     };
                     attrs.backward = {
-                        style: {
-                            ...attrs.backward.style,
-                            x: this._layoutInfo.backward.x,
-                            y: this._layoutInfo.backward.y
-                        }
+                        style: Object.assign(Object.assign({}, attrs.backward.style), { x: this._layoutInfo.backward.x, y: this._layoutInfo.backward.y })
                     };
                     attrs.forward = {
-                        style: {
-                            ...attrs.forward.style,
-                            x: this._layoutInfo.forward.x,
-                            y: this._layoutInfo.forward.y
-                        }
+                        style: Object.assign(Object.assign({}, attrs.forward.style), { x: this._layoutInfo.forward.x, y: this._layoutInfo.forward.y })
                     };
                 }
                 return attrs;
@@ -9457,13 +8894,13 @@
             this._data = this.attribute.data;
             this._minIndex = 0;
             this._maxIndex = this._data.length - 1;
-            this._railStyle = { ...(_b = (_a = this.attribute) === null || _a === void 0 ? void 0 : _a.slider) === null || _b === void 0 ? void 0 : _b.railStyle };
-            this._trackStyle = { ...(_d = (_c = this.attribute) === null || _c === void 0 ? void 0 : _c.slider) === null || _d === void 0 ? void 0 : _d.trackStyle };
-            this._handlerStyle = { ...(_f = (_e = this.attribute) === null || _e === void 0 ? void 0 : _e.slider) === null || _f === void 0 ? void 0 : _f.handlerStyle };
-            this._start = { ...(_h = (_g = this.attribute) === null || _g === void 0 ? void 0 : _g.controller) === null || _h === void 0 ? void 0 : _h.start };
-            this._pause = { ...(_k = (_j = this.attribute) === null || _j === void 0 ? void 0 : _j.controller) === null || _k === void 0 ? void 0 : _k.pause };
-            this._forward = { ...(_m = (_l = this.attribute) === null || _l === void 0 ? void 0 : _l.controller) === null || _m === void 0 ? void 0 : _m.forward };
-            this._backward = { ...(_p = (_o = this.attribute) === null || _o === void 0 ? void 0 : _o.controller) === null || _p === void 0 ? void 0 : _p.backward };
+            this._railStyle = Object.assign({}, (_b = (_a = this.attribute) === null || _a === void 0 ? void 0 : _a.slider) === null || _b === void 0 ? void 0 : _b.railStyle);
+            this._trackStyle = Object.assign({}, (_d = (_c = this.attribute) === null || _c === void 0 ? void 0 : _c.slider) === null || _d === void 0 ? void 0 : _d.trackStyle);
+            this._handlerStyle = Object.assign({}, (_f = (_e = this.attribute) === null || _e === void 0 ? void 0 : _e.slider) === null || _f === void 0 ? void 0 : _f.handlerStyle);
+            this._start = Object.assign({}, (_h = (_g = this.attribute) === null || _g === void 0 ? void 0 : _g.controller) === null || _h === void 0 ? void 0 : _h.start);
+            this._pause = Object.assign({}, (_k = (_j = this.attribute) === null || _j === void 0 ? void 0 : _j.controller) === null || _k === void 0 ? void 0 : _k.pause);
+            this._forward = Object.assign({}, (_m = (_l = this.attribute) === null || _l === void 0 ? void 0 : _l.controller) === null || _m === void 0 ? void 0 : _m.forward);
+            this._backward = Object.assign({}, (_p = (_o = this.attribute) === null || _o === void 0 ? void 0 : _o.controller) === null || _p === void 0 ? void 0 : _p.backward);
         }
         _initLayoutInfo() {
             var _a, _b, _c;
@@ -9481,33 +8918,18 @@
             const startPx = startControllers.reduce((px, controller) => {
                 const { key, space, style: { size } } = controller;
                 const maxSize = vutils.isNumber(size) ? size : vutils.max(size[0], size[1]);
-                this._layoutInfo[key] = {
-                    ...this._layoutInfo[key],
-                    size: maxSize,
-                    x: isHorizontal(this._orient) ? px + space : (this._size.width - maxSize) / 2,
-                    y: isHorizontal(this._orient) ? (this._size.height - maxSize) / 2 : px + space
-                };
+                this._layoutInfo[key] = Object.assign(Object.assign({}, this._layoutInfo[key]), { size: maxSize, x: isHorizontal(this._orient) ? px + space : (this._size.width - maxSize) / 2, y: isHorizontal(this._orient) ? (this._size.height - maxSize) / 2 : px + space });
                 return px + space + maxSize;
             }, 0);
-            this._layoutInfo.slider = {
-                ...this._layoutInfo.slider,
-                size: railPx,
-                x: isHorizontal(this._orient)
+            this._layoutInfo.slider = Object.assign(Object.assign({}, this._layoutInfo.slider), { size: railPx, x: isHorizontal(this._orient)
                     ? startPx + this.attribute.slider.space
-                    : (this._size.width - railSectionLength) / 2,
-                y: isHorizontal(this._orient)
+                    : (this._size.width - railSectionLength) / 2, y: isHorizontal(this._orient)
                     ? (this._size.height - railSectionLength) / 2
-                    : startPx + this.attribute.slider.space
-            };
+                    : startPx + this.attribute.slider.space });
             endControllers.reduce((px, controller) => {
                 const { key, space, style: { size } } = controller;
                 const maxSize = vutils.isNumber(size) ? size : vutils.max(size[0], size[1]);
-                this._layoutInfo[key] = {
-                    ...this._layoutInfo[key],
-                    size: maxSize,
-                    x: isHorizontal(this._orient) ? px + space : (this._size.width - maxSize) / 2,
-                    y: isHorizontal(this._orient) ? (this._size.height - maxSize) / 2 : px + space
-                };
+                this._layoutInfo[key] = Object.assign(Object.assign({}, this._layoutInfo[key]), { size: maxSize, x: isHorizontal(this._orient) ? px + space : (this._size.width - maxSize) / 2, y: isHorizontal(this._orient) ? (this._size.height - maxSize) / 2 : px + space });
                 return px + space + maxSize;
             }, startPx + sliderPx);
         }
@@ -9556,10 +8978,10 @@
             handlerStyle: {}
         },
         controller: {
-            start: { ...defaultControllerAttributes, key: 'start', position: 'start', space: 0 },
-            pause: { ...defaultControllerAttributes, key: 'pause', position: 'start' },
-            forward: { ...defaultControllerAttributes, key: 'forward', position: 'end' },
-            backward: { ...defaultControllerAttributes, key: 'backward', position: 'start' }
+            start: Object.assign(Object.assign({}, defaultControllerAttributes), { key: 'start', position: 'start', space: 0 }),
+            pause: Object.assign(Object.assign({}, defaultControllerAttributes), { key: 'pause', position: 'start' }),
+            forward: Object.assign(Object.assign({}, defaultControllerAttributes), { key: 'forward', position: 'end' }),
+            backward: Object.assign(Object.assign({}, defaultControllerAttributes), { key: 'backward', position: 'start' })
         }
     };
 
@@ -9776,7 +9198,7 @@
                     }
                 }
             };
-            this.play = async () => {
+            this.play = () => __awaiter(this, void 0, void 0, function* () {
                 if (this._isPlaying) {
                     return;
                 }
@@ -9788,7 +9210,7 @@
                 this._startTime = Date.now() - this._elapsed;
                 this.dispatchCustomEvent(exports.PlayerEventEnum.OnPlay);
                 this._rafId = vrender.vglobal.getRequestAnimationFrame()(this._play.bind(this));
-            };
+            });
             this._play = () => {
                 this._elapsed = Date.now() - this._startTime;
                 const value = this._getSliderValue();
@@ -10126,12 +9548,7 @@
         }
         _addBrushMask() {
             const { brushStyle } = this.attribute;
-            const brushMask = vrender.createPolygon({
-                points: vutils.cloneDeep(this._cacheDrawPoints),
-                cursor: 'move',
-                pickable: false,
-                ...brushStyle
-            });
+            const brushMask = vrender.createPolygon(Object.assign({ points: vutils.cloneDeep(this._cacheDrawPoints), cursor: 'move', pickable: false }, brushStyle));
             brushMask.name = `brush-${Date.now()}`;
             this._operatingMask = brushMask;
             this._container.add(brushMask);
@@ -10184,10 +9601,7 @@
             textAlign: textAlign,
             textBaseline: textBaseline,
             singleLine: false,
-            textConfig: vutils.array(text).map(text => ({
-                ...attr,
-                text
-            }))
+            textConfig: vutils.array(text).map(text => (Object.assign(Object.assign({}, attr), { text })))
         };
     };
 
@@ -10288,27 +9702,17 @@
                 Tooltip.calculateTooltipPosition(this.attribute);
             }
             const padding = vutils.normalizePadding(this.attribute.padding);
-            this._tooltipPanel = this.createOrUpdateChild(TOOLTIP_BACKGROUND_NAME, {
-                visible: true,
-                ...panel
-            }, 'rect');
+            this._tooltipPanel = this.createOrUpdateChild(TOOLTIP_BACKGROUND_NAME, Object.assign({ visible: true }, panel), 'rect');
             this._tooltipTitleContainer = this.createOrUpdateChild(TOOLTIP_TITLE_NAME, { visible: true, x: padding[3], y: padding[0] }, 'group');
             const titleAttr = Tooltip.getTitleAttr(this.attribute);
             this._tooltipTitleSymbol = this._tooltipTitleContainer.createOrUpdateChild(`${TOOLTIP_TITLE_NAME}-${TOOLTIP_SHAPE_NAME_SUFFIX}`, vutils.merge({ symbolType: 'circle' }, titleAttr.shape, {
                 visible: isVisible(titleAttr) && isVisible(titleAttr.shape)
             }), 'symbol');
             if (titleAttr.value.multiLine) {
-                this._tooltipTitle = this._tooltipTitleContainer.createOrUpdateChild(`${TOOLTIP_TITLE_NAME}-${TOOLTIP_VALUE_NAME_SUFFIX}`, {
-                    visible: isVisible(titleAttr) && isVisible(titleAttr.value),
-                    ...getRichTextAttribute(titleAttr.value)
-                }, 'richtext');
+                this._tooltipTitle = this._tooltipTitleContainer.createOrUpdateChild(`${TOOLTIP_TITLE_NAME}-${TOOLTIP_VALUE_NAME_SUFFIX}`, Object.assign({ visible: isVisible(titleAttr) && isVisible(titleAttr.value) }, getRichTextAttribute(titleAttr.value)), 'richtext');
             }
             else {
-                this._tooltipTitle = this._tooltipTitleContainer.createOrUpdateChild(`${TOOLTIP_TITLE_NAME}-${TOOLTIP_VALUE_NAME_SUFFIX}`, {
-                    text: '',
-                    visible: isVisible(titleAttr) && isVisible(titleAttr.value),
-                    ...titleAttr.value
-                }, 'text');
+                this._tooltipTitle = this._tooltipTitleContainer.createOrUpdateChild(`${TOOLTIP_TITLE_NAME}-${TOOLTIP_VALUE_NAME_SUFFIX}`, Object.assign({ text: '', visible: isVisible(titleAttr) && isVisible(titleAttr.value) }, titleAttr.value), 'text');
             }
             const titlePaddingLeft = isVisible(titleAttr.shape) ? titleAttr.shape.size + titleAttr.shape.spacing : 0;
             const { textAlign, textBaseline } = titleAttr.value;
@@ -10348,13 +9752,8 @@
                     const itemGroup = this._tooltipContent.createOrUpdateChild(itemGroupName, { visible: true, x: 0, y: lastYPos }, 'group');
                     let x = 0;
                     if (isVisible(itemAttr.shape)) {
-                        itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_SHAPE_NAME_SUFFIX}`, {
-                            visible: true,
-                            x: itemAttr.shape.size / 2,
-                            y: itemAttr.shape.size / 2 +
-                                (((_a = itemAttr.key.lineHeight) !== null && _a !== void 0 ? _a : itemAttr.key.fontSize) - itemAttr.shape.size) / 2,
-                            ...itemAttr.shape
-                        }, 'symbol');
+                        itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_SHAPE_NAME_SUFFIX}`, Object.assign({ visible: true, x: itemAttr.shape.size / 2, y: itemAttr.shape.size / 2 +
+                                (((_a = itemAttr.key.lineHeight) !== null && _a !== void 0 ? _a : itemAttr.key.fontSize) - itemAttr.shape.size) / 2 }, itemAttr.shape), 'symbol');
                     }
                     if (hasContentShape) {
                         x += itemAttr.shape.size + itemAttr.shape.spacing;
@@ -10362,18 +9761,10 @@
                     if (isVisible(itemAttr.key)) {
                         let element;
                         if (itemAttr.key.multiLine) {
-                            element = itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_KEY_NAME_SUFFIX}`, {
-                                visible: true,
-                                ...getRichTextAttribute(itemAttr.key),
-                                textBaseline: 'top'
-                            }, 'richtext');
+                            element = itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_KEY_NAME_SUFFIX}`, Object.assign(Object.assign({ visible: true }, getRichTextAttribute(itemAttr.key)), { textBaseline: 'top' }), 'richtext');
                         }
                         else {
-                            element = itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_KEY_NAME_SUFFIX}`, {
-                                visible: true,
-                                ...itemAttr.key,
-                                textBaseline: 'top'
-                            }, 'text');
+                            element = itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_KEY_NAME_SUFFIX}`, Object.assign(Object.assign({ visible: true }, itemAttr.key), { textBaseline: 'top' }), 'text');
                         }
                         const { textAlign } = itemAttr.key;
                         if (textAlign === 'center') {
@@ -10391,18 +9782,10 @@
                     if (isVisible(itemAttr.value)) {
                         let element;
                         if (itemAttr.value.multiLine) {
-                            element = itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_VALUE_NAME_SUFFIX}`, {
-                                visible: true,
-                                ...getRichTextAttribute(itemAttr.value),
-                                textBaseline: 'top'
-                            }, 'richtext');
+                            element = itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_VALUE_NAME_SUFFIX}`, Object.assign(Object.assign({ visible: true }, getRichTextAttribute(itemAttr.value)), { textBaseline: 'top' }), 'richtext');
                         }
                         else {
-                            element = itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_VALUE_NAME_SUFFIX}`, {
-                                visible: true,
-                                ...itemAttr.value,
-                                textBaseline: 'top'
-                            }, 'text');
+                            element = itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_VALUE_NAME_SUFFIX}`, Object.assign(Object.assign({ visible: true }, itemAttr.value), { textBaseline: 'top' }), 'text');
                         }
                         let textAlign = 'right';
                         if (vutils.isValid(itemAttr.value.textAlign)) {
@@ -10581,7 +9964,7 @@
     }
     Tooltip.defaultAttributes = defaultAttributes;
 
-    const version = "0.14.1";
+    const version = "0.14.2";
 
     exports.AbstractComponent = AbstractComponent;
     exports.ArcInfo = ArcInfo;