@visactor/vstory 0.0.23-alpha.10 → 0.0.23-alpha.12

package/dist/index.js

@@ -1327,7 +1327,7 @@
   var DefaultGlobal$1 = /*#__PURE__*/function () {
     function DefaultGlobal(contributions) {
       _classCallCheck(this, DefaultGlobal);
-      this.contributions = contributions, this.id = Generator$1.GenAutoIncrementId(), this.hooks = {
+      this.contributions = contributions, this._isImageAnonymous = !0, this.id = Generator$1.GenAutoIncrementId(), this.hooks = {
         onSetEnv: new SyncHook$1(["lastEnv", "env", "global"])
       }, this.measureTextMethod = "native", this.optimizeVisible = !1;
     }
@@ -1336,6 +1336,14 @@
       get: function get() {
         return this._env;
       }
+    }, {
+      key: "isImageAnonymous",
+      get: function get() {
+        return this._isImageAnonymous;
+      },
+      set: function set(isImageAnonymous) {
+        this._isImageAnonymous = isImageAnonymous;
+      }
     }, {
       key: "devicePixelRatio",
       get: function get() {
@@ -6455,7 +6463,7 @@
           default:
             if (this._t <= 0) this.context.lineTo(this._x, y, !1 !== this._lastDefined && !1 !== p.defined, this.lastPoint), this.context.lineTo(x, y, !1 !== this._lastDefined && !1 !== p.defined, p);else {
               var x1 = this._x * (1 - this._t) + x * this._t;
-              this.context.lineTo(x1, this._y, !1 !== this._lastDefined && !1 !== p.defined, this.lastPoint), this.context.lineTo(x1, y, !1 !== this._lastDefined && !1 !== p.defined, p);
+              .5 === this._t ? this.context.lineTo(x1, this._y, !1 !== this._lastDefined, this.lastPoint) : this.context.lineTo(x1, this._y, !1 !== this._lastDefined && !1 !== p.defined, this.lastPoint), this.context.lineTo(x1, y, !1 !== this._lastDefined && !1 !== p.defined, p);
             }
         }
         this._lastDefined = p.defined, this._x = x, this._y = y, this.lastPoint = p;
@@ -7423,6 +7431,7 @@
   var DefaultRichTextAttribute$1 = Object.assign(Object.assign(Object.assign({}, DefaultAttribute$1), DefaultTextStyle$1), {
     editable: !1,
     editOptions: null,
+    ascentDescentMode: "actual",
     width: 300,
     height: 300,
     ellipsis: !0,
@@ -7891,14 +7900,17 @@
     return i + 1;
   }
   function measureTextCanvas$1(text, character) {
+    var mode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "actual";
     var measurement = application$1.graphicUtil.textMeasure.measureText(text, character),
       result = {
         ascent: 0,
         height: 0,
         descent: 0,
         width: 0
-      };
-    return "number" != typeof measurement.fontBoundingBoxAscent || "number" != typeof measurement.fontBoundingBoxDescent ? (result.width = measurement.width, result.height = character.fontSize || 0, result.ascent = result.height, result.descent = 0) : (result.width = measurement.width, result.height = Math.floor(measurement.fontBoundingBoxAscent + measurement.fontBoundingBoxDescent), result.ascent = Math.floor(measurement.fontBoundingBoxAscent), result.descent = result.height - result.ascent), result;
+      },
+      ascent = "actual" === mode ? measurement.actualBoundingBoxAscent : measurement.fontBoundingBoxAscent,
+      descent = "actual" === mode ? measurement.actualBoundingBoxDescent : measurement.fontBoundingBoxDescent;
+    return "number" != typeof ascent || "number" != typeof descent ? (result.width = Math.floor(measurement.width), result.height = character.fontSize || 0, result.ascent = result.height, result.descent = 0) : (result.width = Math.floor(measurement.width), result.height = Math.floor(ascent + descent), result.ascent = Math.floor(ascent), result.descent = result.height - result.ascent), result;
   }
 
   var __decorate$2o = undefined && undefined.__decorate || function (decorators, target, key, desc) {
@@ -8886,7 +8898,7 @@
     });
   }
   var globalThemeObj$1 = newThemeObj$1();
-  var Theme$1 = /*#__PURE__*/function () {
+  var Theme$2 = /*#__PURE__*/function () {
     function Theme() {
       _classCallCheck(this, Theme);
       this.initTheme(), this.dirty = !1;
@@ -8964,7 +8976,7 @@
       }
     }]);
   }();
-  var globalTheme$1 = new Theme$1();
+  var globalTheme$1 = new Theme$2();
   function getTheme$2(graphic, theme) {
     return graphic.glyphHost ? getTheme$2(graphic.glyphHost) : theme ? (graphic.isContainer, theme) : getThemeFromGroup$1(graphic) || graphic.attachedThemeGraphic && getTheme$2(graphic.attachedThemeGraphic) || globalTheme$1.getTheme();
   }
@@ -10957,7 +10969,7 @@
       var timeline = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultTimeline$1;
       var slience = arguments.length > 2 ? arguments[2] : undefined;
       _classCallCheck(this, Animate);
-      this.id = id, this.timeline = timeline, this.status = AnimateStatus$1.INITIAL, this.tailAnimate = new SubAnimate$1(this), this.subAnimates = [this.tailAnimate], this.timeScale = 1, this.rawPosition = -1, this._startTime = 0, this._duringTime = 0, this.timeline.addAnimate(this), this.slience = slience;
+      this.id = id, this.timeline = timeline || defaultTimeline$1, this.status = AnimateStatus$1.INITIAL, this.tailAnimate = new SubAnimate$1(this), this.subAnimates = [this.tailAnimate], this.timeScale = 1, this.rawPosition = -1, this._startTime = 0, this._duringTime = 0, this.timeline.addAnimate(this), this.slience = slience;
     }
     return _createClass(Animate, [{
       key: "setTimeline",
@@ -11581,7 +11593,8 @@
     }, {
       key: "onUpdate",
       value: function onUpdate(end, ratio, out) {
-        !1 !== this.valid && (out.text = end ? this.toNumber : (this.fromNumber + (this.toNumber - this.fromNumber) * ratio).toFixed(this.decimalLength));
+        var _a;
+        !1 !== this.valid && (out.text = end ? null === (_a = this.to) || void 0 === _a ? void 0 : _a.text : (this.fromNumber + (this.toNumber - this.fromNumber) * ratio).toFixed(this.decimalLength));
       }
     }]);
   }(ACustomAnimate$1);
@@ -12248,7 +12261,7 @@
       key: "GetFile",
       value: function GetFile(url, type) {
         var data = ResourceLoader.cache.get(url);
-        return data ? "init" === data.loadState || "fail" === data.loadState ? Promise.reject() : "loading" === data.loadState ? data.dataPromise.then(function (data) {
+        return data ? "fail" === data.loadState ? Promise.reject() : "init" === data.loadState || "loading" === data.loadState ? data.dataPromise.then(function (data) {
           return data.data;
         }) : Promise.resolve(data.data) : (data = {
           type: type,
@@ -13613,12 +13626,12 @@
     }, {
       key: "setTheme",
       value: function setTheme(t) {
-        return this.theme || (this.theme = new Theme$1()), this.theme.setTheme(t, this);
+        return this.theme || (this.theme = new Theme$2()), this.theme.setTheme(t, this);
       }
     }, {
       key: "createTheme",
       value: function createTheme() {
-        this.theme || (this.theme = new Theme$1());
+        this.theme || (this.theme = new Theme$2());
       }
     }, {
       key: "visibleAll",
@@ -13658,7 +13671,7 @@
         application$1.graphicService.beforeUpdateAABBBounds(this, this.stage, !0, this._AABBBounds);
         var selfChange = this.shouldSelfChangeUpdateAABBBounds(),
           bounds = this.doUpdateAABBBounds();
-        return this.addUpdateLayoutTag(), application$1.graphicService.afterUpdateAABBBounds(this, this.stage, this._AABBBounds, this, selfChange), bounds;
+        return this.addUpdateLayoutTag(), application$1.graphicService.afterUpdateAABBBounds(this, this.stage, this._AABBBounds, this, selfChange), "empty" === this.attribute.boundsMode && bounds.clear(), bounds;
       }
     }, {
       key: "doUpdateLocalMatrix",
@@ -13873,7 +13886,7 @@
         width: _this.viewWidth,
         height: _this.viewHeight,
         zIndex: null !== (_a = params.zIndex) && void 0 !== _a ? _a : 0
-      }), _this.layer = _assertThisInitialized(_this), _this.subLayers = new Map(), _this.theme = new Theme$1(), _this.background = "rgba(0, 0, 0, 0)", _this.afterDrawCbs = [];
+      }), _this.layer = _assertThisInitialized(_this), _this.subLayers = new Map(), _this.theme = new Theme$2(), _this.background = "rgba(0, 0, 0, 0)", _this.afterDrawCbs = [];
       return _this;
     }
     _inherits(Layer, _Group);
@@ -16567,7 +16580,7 @@
     }, {
       key: "drawWithClipRange",
       value: function drawWithClipRange(ctx, size, x, y, clipRange, z, cb) {
-        return this.isSvg ? !!this.svgCache && (this.svgCache.forEach(function (item) {
+        return size = this.parseSize(size), this.isSvg ? !!this.svgCache && (this.svgCache.forEach(function (item) {
           item.path.drawWithClipRange(ctx, size, x, y, clipRange), cb && cb(item.path, item.attribute);
         }), !1) : (this.path.drawWithClipRange(ctx, size, x, y, clipRange), !1);
       }
@@ -16807,7 +16820,7 @@
           connectedType = attribute.connectedType,
           b = aabbBounds;
         return points.forEach(function (p) {
-          !1 === p.defined && "zero" !== connectedType && "connect" !== connectedType || b.add(p.x, p.y);
+          !1 === p.defined && "connect" !== connectedType || b.add(p.x, p.y);
         }), b;
       }
     }, {
@@ -16819,7 +16832,7 @@
           b = aabbBounds;
         return segments.forEach(function (s) {
           s.points.forEach(function (p) {
-            !1 === p.defined && "zero" !== connectedType && "connect" !== connectedType || b.add(p.x, p.y);
+            !1 === p.defined && "connect" !== connectedType || b.add(p.x, p.y);
           });
         }), b;
       }
@@ -17360,12 +17373,12 @@
     };
   }
   var Paragraph$1 = /*#__PURE__*/function () {
-    function Paragraph(text, newLine, character) {
+    function Paragraph(text, newLine, character, ascentDescentMode) {
       _classCallCheck(this, Paragraph);
-      this.fontSize = character.fontSize || 16, this.textBaseline = character.textBaseline || "alphabetic";
+      this.fontSize = character.fontSize || 16, this.textBaseline = character.textBaseline || "alphabetic", this.ascentDescentMode = ascentDescentMode;
       var lineHeight = calculateLineHeight$1(character.lineHeight, this.fontSize);
       this.lineHeight = "number" == typeof lineHeight ? lineHeight > this.fontSize ? lineHeight : this.fontSize : Math.floor(1.2 * this.fontSize), this.height = this.lineHeight;
-      var _measureTextCanvas = measureTextCanvas$1(text, character),
+      var _measureTextCanvas = measureTextCanvas$1(text, character, this.ascentDescentMode),
         ascent = _measureTextCanvas.ascent,
         height = _measureTextCanvas.height,
         descent = _measureTextCanvas.descent,
@@ -17378,7 +17391,7 @@
     return _createClass(Paragraph, [{
       key: "updateWidth",
       value: function updateWidth() {
-        var _measureTextCanvas2 = measureTextCanvas$1(this.text, this.character),
+        var _measureTextCanvas2 = measureTextCanvas$1(this.text, this.character, this.ascentDescentMode),
           width = _measureTextCanvas2.width;
         this.width = width, "vertical" === this.direction && (this.widthOrigin = this.width, this.width = this.heightOrigin, this.height = this.widthOrigin);
       }
@@ -17396,7 +17409,7 @@
           if ("add" === this.ellipsis) text += this.ellipsisStr, "right" !== textAlign && "end" !== textAlign || (left -= this.ellipsisWidth);else if ("replace" === this.ellipsis) {
             var index = getStrByWithCanvas$1(text, ("vertical" === direction ? this.height : this.width) - this.ellipsisWidth + this.ellipsisOtherParagraphWidth, this.character, text.length - 1);
             if (text = text.slice(0, index), text += this.ellipsisStr, "right" === textAlign || "end" === textAlign) {
-              var _measureTextCanvas3 = measureTextCanvas$1(this.text.slice(index), this.character),
+              var _measureTextCanvas3 = measureTextCanvas$1(this.text.slice(index), this.character, this.ascentDescentMode),
                 width = _measureTextCanvas3.width;
               "vertical" === direction || (left -= this.ellipsisWidth - width);
             }
@@ -17429,7 +17442,7 @@
           if ("add" === this.ellipsis) text += this.ellipsisStr, "right" !== textAlign && "end" !== textAlign || (left -= this.ellipsisWidth);else if ("replace" === this.ellipsis) {
             var index = getStrByWithCanvas$1(text, ("vertical" === direction ? this.height : this.width) - this.ellipsisWidth + this.ellipsisOtherParagraphWidth, this.character, text.length - 1);
             if (text = text.slice(0, index), text += this.ellipsisStr, "right" === textAlign || "end" === textAlign) {
-              var _measureTextCanvas4 = measureTextCanvas$1(this.text.slice(index), this.character),
+              var _measureTextCanvas4 = measureTextCanvas$1(this.text.slice(index), this.character, this.ascentDescentMode),
                 width = _measureTextCanvas4.width;
               "vertical" === direction || (left -= this.ellipsisWidth - width);
             }
@@ -17449,21 +17462,21 @@
           if (this.character.underline) {
             var _top = 1 + baseline,
               lrtb = getFixedLRTB(left, left + (this.widthOrigin || this.width), _top, _top + (this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1));
-            ctx.fillRect(lrtb.left, lrtb.top, lrtb.right - lrtb.left, lrtb.bottom - lrtb.top);
+            ctx.fillRect(lrtb.left, 1 + baseline, lrtb.right - lrtb.left, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1);
           }
           if (this.character.lineThrough) {
             var _top2 = 1 + baseline - this.ascent / 2,
               _lrtb = getFixedLRTB(left, left + (this.widthOrigin || this.width), _top2, _top2 + (this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1));
-            ctx.fillRect(_lrtb.left, _lrtb.top, _lrtb.right - _lrtb.left, _lrtb.bottom - _lrtb.top);
+            ctx.fillRect(_lrtb.left, 1 + baseline - this.ascent / 2, _lrtb.right - _lrtb.left, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1);
           }
         } else if ("underline" === this.character.textDecoration) {
           var _top3 = 1 + baseline,
             _lrtb2 = getFixedLRTB(left, left + (this.widthOrigin || this.width), _top3, _top3 + (this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1));
-          ctx.fillRect(_lrtb2.left, _lrtb2.top, _lrtb2.right - _lrtb2.left, _lrtb2.bottom - _lrtb2.top);
+          ctx.fillRect(_lrtb2.left, 1 + baseline, _lrtb2.right - _lrtb2.left, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1);
         } else if ("line-through" === this.character.textDecoration) {
           var _top4 = 1 + baseline - this.ascent / 2,
             _lrtb3 = getFixedLRTB(left, left + (this.widthOrigin || this.width), _top4, _top4 + (this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1));
-          ctx.fillRect(_lrtb3.left, _lrtb3.top, _lrtb3.right - _lrtb3.left, _lrtb3.bottom - _lrtb3.top);
+          ctx.fillRect(_lrtb3.left, 1 + baseline - this.ascent / 2, _lrtb3.right - _lrtb3.left, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1);
         }
         "vertical" === direction && ctx.restore();
       }
@@ -17477,7 +17490,7 @@
         if ("replace" === this.ellipsis) {
           var index = getStrByWithCanvas$1(text, width - this.ellipsisWidth + this.ellipsisOtherParagraphWidth, this.character, text.length - 1);
           text = text.slice(0, index), text += this.ellipsisStr;
-          var _measureTextCanvas5 = measureTextCanvas$1(this.text.slice(index), this.character),
+          var _measureTextCanvas5 = measureTextCanvas$1(this.text.slice(index), this.character, this.ascentDescentMode),
             measureWidth = _measureTextCanvas5.width;
           return width + this.ellipsisWidth - measureWidth;
         }
@@ -17488,7 +17501,7 @@
   function seperateParagraph$1(paragraph, index) {
     var text1 = paragraph.text.slice(0, index),
       text2 = paragraph.text.slice(index);
-    return [new Paragraph$1(text1, paragraph.newLine, paragraph.character), new Paragraph$1(text2, !0, paragraph.character)];
+    return [new Paragraph$1(text1, paragraph.newLine, paragraph.character, paragraph.ascentDescentMode), new Paragraph$1(text2, !0, paragraph.character, paragraph.ascentDescentMode)];
   }
 
   var IMAGE_UPDATE_TAG_KEY$1 = ["width", "height", "image"].concat(_toConsumableArray(GRAPHIC_UPDATE_TAG_KEY$1));
@@ -17739,7 +17752,7 @@
             }
             var ellipsis = !0 === drawEllipsis ? "..." : drawEllipsis || "";
             _paragraph.ellipsisStr = ellipsis;
-            var _measureTextCanvas = measureTextCanvas$1(ellipsis, _paragraph.character),
+            var _measureTextCanvas = measureTextCanvas$1(ellipsis, _paragraph.character, _paragraph.ascentDescentMode),
               width = _measureTextCanvas.width,
               ellipsisWidth = width || 0;
             if (ellipsisWidth <= this.blankWidth + otherParagraphWidth) {
@@ -17777,7 +17790,7 @@
         for (var i = this.paragraphs.length - 1; i >= 0; i--) {
           var paragraph = this.paragraphs[i];
           if (paragraph instanceof RichTextIcon$1) break;
-          var _measureTextCanvas2 = measureTextCanvas$1(ellipsis, paragraph.character),
+          var _measureTextCanvas2 = measureTextCanvas$1(ellipsis, paragraph.character, paragraph.ascentDescentMode),
             _width = _measureTextCanvas2.width,
             ellipsisWidth = _width || 0;
           if (ellipsisWidth <= this.blankWidth + otherParagraphWidth) {
@@ -18079,7 +18092,8 @@
           layoutDirection = _this$attribute2.layoutDirection,
           singleLine = _this$attribute2.singleLine,
           disableAutoWrapLine = _this$attribute2.disableAutoWrapLine,
-          editable = _this$attribute2.editable;
+          editable = _this$attribute2.editable,
+          ascentDescentMode = _this$attribute2.ascentDescentMode;
         var _this$attribute$textC = this.attribute.textConfig,
           _tc = _this$attribute$textC === void 0 ? [] : _this$attribute$textC;
         editable && _tc.length > 0 && !RichText.AllSingleCharacter(_tc) && (_tc = RichText.TransformTextConfig2SingleCharacter(_tc), this.attribute.textConfig = _tc);
@@ -18100,8 +18114,8 @@
           var richTextConfig = this.combinedStyleToCharacter(textConfig[i]);
           if (isNumber$4(richTextConfig.text) && (richTextConfig.text = "".concat(richTextConfig.text)), richTextConfig.text && richTextConfig.text.includes("\n")) {
             var textParts = richTextConfig.text.split("\n");
-            for (var j = 0; j < textParts.length; j++) paragraphs.push(new Paragraph$1(textParts[j], 0 !== j, richTextConfig));
-          } else richTextConfig.text && paragraphs.push(new Paragraph$1(richTextConfig.text, !1, richTextConfig));
+            for (var j = 0; j < textParts.length; j++) paragraphs.push(new Paragraph$1(textParts[j], 0 !== j, richTextConfig, ascentDescentMode));
+          } else richTextConfig.text && paragraphs.push(new Paragraph$1(richTextConfig.text, !1, richTextConfig, ascentDescentMode));
         }
         var maxWidthFinite = "number" == typeof maxWidth && Number.isFinite(maxWidth) && maxWidth > 0,
           maxHeightFinite = "number" == typeof maxHeight && Number.isFinite(maxHeight) && maxHeight > 0,
@@ -19905,8 +19919,8 @@
     _inherits(DefaultImageRenderContribution, _DefaultRectRenderCon);
     return _createClass(DefaultImageRenderContribution, [{
       key: "drawShape",
-      value: function drawShape(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb) {
-        return _superPropGet(DefaultImageRenderContribution, "drawShape", this, 3)([rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb]);
+      value: function drawShape(image, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb) {
+        return _superPropGet(DefaultImageRenderContribution, "drawShape", this, 3)([image, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb]);
       }
     }]);
   }(DefaultRectRenderContribution$1);
@@ -20434,7 +20448,7 @@
     }, {
       key: "drawSegmentItem",
       value: function drawSegmentItem(context, cache, fill, stroke, fillOpacity, strokeOpacity, attribute, defaultAttribute, clipRange, clipRangeByDimension, offsetX, offsetY, line, fillCb, strokeCb) {
-        var _a, _b, _c, _d, _e;
+        var _a;
         if (!cache) return;
         context.beginPath();
         var z = null !== (_a = this.z) && void 0 !== _a ? _a : 0;
@@ -20449,27 +20463,7 @@
           originX = _attribute$x === void 0 ? 0 : _attribute$x,
           _attribute$x2 = attribute.x,
           originY = _attribute$x2 === void 0 ? 0 : _attribute$x2;
-        !1 !== fill && (fillCb ? fillCb(context, attribute, defaultAttribute) : fillOpacity && (context.setCommonStyle(line, attribute, originX - offsetX, originY - offsetY, defaultAttribute), context.fill())), !1 !== stroke && (strokeCb ? strokeCb(context, attribute, defaultAttribute) : strokeOpacity && (context.setStrokeStyle(line, attribute, originX - offsetX, originY - offsetY, defaultAttribute), context.stroke()));
-        var connectedType = attribute.connectedType,
-          connectedX = attribute.connectedX,
-          connectedY = attribute.connectedY,
-          connectedStyle = attribute.connectedStyle;
-        if (isArray$3(defaultAttribute) ? (connectedType = null !== (_b = null != connectedType ? connectedType : defaultAttribute[0].connectedType) && void 0 !== _b ? _b : defaultAttribute[1].connectedType, connectedX = null !== (_c = null != connectedX ? connectedX : defaultAttribute[0].connectedX) && void 0 !== _c ? _c : defaultAttribute[1].connectedX, connectedY = null !== (_d = null != connectedY ? connectedY : defaultAttribute[0].connectedY) && void 0 !== _d ? _d : defaultAttribute[1].connectedY, connectedStyle = null !== (_e = null != connectedStyle ? connectedStyle : defaultAttribute[0].connectedStyle) && void 0 !== _e ? _e : defaultAttribute[1].connectedStyle) : (connectedType = null != connectedType ? connectedType : defaultAttribute.connectedType, connectedX = null != connectedX ? connectedX : defaultAttribute.connectedX, connectedY = null != connectedY ? connectedY : defaultAttribute.connectedY, connectedStyle = null != connectedStyle ? connectedStyle : defaultAttribute.connectedStyle), "connect" !== connectedType && "zero" !== connectedType && (connectedType = "none"), "none" !== connectedType) {
-          context.beginPath(), drawSegments$1(context.camera ? context : context.nativeContext, cache, clipRange, clipRangeByDimension, {
-            offsetX: offsetX,
-            offsetY: offsetY,
-            offsetZ: z,
-            drawConnect: !0,
-            mode: connectedType,
-            zeroX: connectedX,
-            zeroY: connectedY
-          });
-          var da = [];
-          isArray$3(defaultAttribute) ? defaultAttribute.forEach(function (i) {
-            return da.push(i);
-          }) : da.push(defaultAttribute), da.push(attribute), !1 !== fill && (fillCb ? fillCb(context, attribute, defaultAttribute) : fillOpacity && (context.setCommonStyle(line, connectedStyle, originX - offsetX, originY - offsetY, da), context.fill())), !1 !== stroke && (strokeCb ? strokeCb(context, attribute, defaultAttribute) : strokeOpacity && (context.setStrokeStyle(line, connectedStyle, originX - offsetX, originY - offsetY, da), context.stroke()));
-        }
-        return !1;
+        return !1 !== fill && (fillCb ? fillCb(context, attribute, defaultAttribute) : fillOpacity && (context.setCommonStyle(line, attribute, originX - offsetX, originY - offsetY, defaultAttribute), context.fill())), !1 !== stroke && (strokeCb ? strokeCb(context, attribute, defaultAttribute) : strokeOpacity && (context.setStrokeStyle(line, attribute, originX - offsetX, originY - offsetY, defaultAttribute), context.stroke())), !1;
       }
     }, {
       key: "drawLinearLineHighPerformance",
@@ -20510,7 +20504,9 @@
           points = _line$attribute2.points,
           closePath = _line$attribute2.closePath,
           _line$attribute2$curv = _line$attribute2.curveTension,
-          curveTension = _line$attribute2$curv === void 0 ? lineAttribute.curveTension : _line$attribute2$curv;
+          curveTension = _line$attribute2$curv === void 0 ? lineAttribute.curveTension : _line$attribute2$curv,
+          _line$attribute2$conn = _line$attribute2.connectedType,
+          connectedType = _line$attribute2$conn === void 0 ? lineAttribute.connectedType : _line$attribute2$conn;
         if (!this.valid(line, lineAttribute, fillCb, strokeCb)) return;
         var _line$attribute$curve = line.attribute.curveType,
           curveType = _line$attribute$curve === void 0 ? lineAttribute.curveType : _line$attribute$curve;
@@ -20523,6 +20519,11 @@
         if (1 === clipRange && !segments && !points.some(function (p) {
           return !1 === p.defined;
         }) && "linear" === curveType) return this.drawLinearLineHighPerformance(line, context, !!fill, !!stroke, fillOpacity, strokeOpacity, x, y, lineAttribute, drawContext, params, fillCb, strokeCb);
+        function parsePoint(points, connectedType) {
+          return "none" === connectedType ? points : points.filter(function (p) {
+            return !1 !== p.defined;
+          });
+        }
         if (line.shouldUpdateShape()) {
           var _line$attribute4 = line.attribute,
             _points2 = _line$attribute4.points,
@@ -20543,7 +20544,7 @@
                 y: lastSeg.endY,
                 defined: lastSeg.curves[lastSeg.curves.length - 1].defined
               } : index > 1 && (startPoint.x = lastSeg.endX, startPoint.y = lastSeg.endY, startPoint.defined = lastSeg.curves[lastSeg.curves.length - 1].defined);
-              var data = calcLineCache$1(seg.points, curveType, {
+              var data = calcLineCache$1(parsePoint(seg.points, connectedType), curveType, {
                 startPoint: startPoint,
                 curveTension: curveTension
               });
@@ -20564,7 +20565,7 @@
             }
           } else {
             if (!_points2 || !_points2.length) return line.cache = null, void line.clearUpdateShapeTag();
-            line.cache = calcLineCache$1(_points, curveType, {
+            line.cache = calcLineCache$1(parsePoint(_points, connectedType), curveType, {
               curveTension: curveTension
             });
           }
@@ -20601,12 +20602,6 @@
 
   function drawAreaSegments$1(path, segPath, percent, params) {
     var _a;
-    var _ref = params || {},
-      _ref$drawConnect = _ref.drawConnect,
-      drawConnect = _ref$drawConnect === void 0 ? !1 : _ref$drawConnect,
-      _ref$mode = _ref.mode,
-      mode = _ref$mode === void 0 ? "none" : _ref$mode;
-    if (drawConnect && "none" === mode) return;
     var top = segPath.top,
       bottom = segPath.bottom;
     if (top.curves.length !== bottom.curves.length) return;
@@ -20614,36 +20609,15 @@
       var _topList = [],
         _bottomList = [];
       var _lastDefined = !0;
-      if (drawConnect) {
-        var lastCurve,
-          _lastBottomCurve,
-          _defined = !0;
-        var n = top.curves.length;
-        top.curves.forEach(function (curve, i) {
-          var bototmCurve = bottom.curves[n - i - 1];
-          var currentTopCurve = curve,
-            currentBottomCurve = bototmCurve;
-          if (curve.originP1 === curve.originP2) return lastCurve = curve, void (_lastBottomCurve = bototmCurve);
-          if (lastCurve && lastCurve.originP1 === lastCurve.originP2 && (currentTopCurve = lastCurve, currentBottomCurve = _lastBottomCurve), curve.defined) _defined || (_topList.push(currentTopCurve), _bottomList.push(currentBottomCurve), drawAreaConnectBlock$1(path, _topList, _bottomList, params), _topList.length = 0, _bottomList.length = 0, _defined = !_defined);else {
-            var originP1 = curve.originP1,
-              originP2 = curve.originP2;
-            var validTopCurve, validBottomCurve;
-            originP1 && !1 !== originP1.defined ? (validTopCurve = currentTopCurve, validBottomCurve = currentBottomCurve) : originP1 && !1 !== originP2.defined && (validTopCurve = curve, validBottomCurve = bototmCurve), _defined ? (_defined = !_defined, _topList.push(validTopCurve || curve), _bottomList.push(validBottomCurve || bototmCurve)) : validTopCurve && (_defined = !_defined, _topList.push(validTopCurve || curve), _bottomList.push(validBottomCurve || bototmCurve), drawAreaConnectBlock$1(path, _topList, _bottomList, params), _topList.length = 0, _bottomList.length = 0);
-          }
-          lastCurve = curve;
-        }), drawAreaConnectBlock$1(path, _topList, _bottomList, params);
-      } else {
-        for (var i = 0, _n = top.curves.length; i < _n; i++) {
-          var topCurve = top.curves[i];
-          _lastDefined !== topCurve.defined ? (_lastDefined ? (drawAreaBlock$1(path, _topList, _bottomList, params), _topList.length = 0, _bottomList.length = 0) : (_topList.push(topCurve), _bottomList.push(bottom.curves[_n - i - 1])), _lastDefined = !_lastDefined) : _lastDefined && (_topList.push(topCurve), _bottomList.push(bottom.curves[_n - i - 1]));
-        }
-        drawAreaBlock$1(path, _topList, _bottomList, params);
+      for (var i = 0, n = top.curves.length; i < n; i++) {
+        var topCurve = top.curves[i];
+        _lastDefined !== topCurve.defined ? (_lastDefined ? (drawAreaBlock$1(path, _topList, _bottomList, params), _topList.length = 0, _bottomList.length = 0) : (_topList.push(topCurve), _bottomList.push(bottom.curves[n - i - 1])), _lastDefined = !_lastDefined) : _lastDefined && (_topList.push(topCurve), _bottomList.push(bottom.curves[n - i - 1]));
       }
-      return;
+      return void drawAreaBlock$1(path, _topList, _bottomList, params);
     }
     if (percent <= 0) return;
-    var _ref2 = params || {},
-      direction = _ref2.direction;
+    var _ref = params || {},
+      direction = _ref.direction;
     var topCurves = top.curves,
       endP = null !== (_a = topCurves[topCurves.length - 1].p3) && void 0 !== _a ? _a : topCurves[topCurves.length - 1].p1,
       xTotalLength = abs$2(endP.x - topCurves[0].p0.x),
@@ -20654,61 +20628,26 @@
       lastDefined = !0;
     var topList = [],
       bottomList = [];
-    var lastTopCurve,
-      lastBottomCurve,
-      defined0 = !0;
-    for (var _i = 0, _n2 = top.curves.length; _i < _n2; _i++) {
+    for (var _i = 0, _n = top.curves.length; _i < _n; _i++) {
       var _topCurve = top.curves[_i],
         curCurveLength = _topCurve.getLength(direction),
         _percent = (totalDrawLength - drawedLengthUntilLast) / curCurveLength;
       if (_percent < 0) break;
-      if (drawedLengthUntilLast += curCurveLength, drawConnect) {
-        var bototmCurve = bottom.curves[_n2 - _i - 1];
-        var currentTopCurve = _topCurve,
-          currentBottomCurve = bototmCurve;
-        if (_topCurve.originP1 === _topCurve.originP2) {
-          lastTopCurve = _topCurve, lastBottomCurve = bototmCurve;
-          continue;
-        }
-        if (lastTopCurve && lastTopCurve.originP1 === lastTopCurve.originP2 && (currentTopCurve = lastTopCurve, currentBottomCurve = lastBottomCurve), _topCurve.defined) defined0 || (topList.push(currentTopCurve), bottomList.push(currentBottomCurve), drawAreaConnectBlock$1(path, topList, bottomList, params), topList.length = 0, bottomList.length = 0, defined0 = !defined0);else {
-          var originP1 = _topCurve.originP1,
-            originP2 = _topCurve.originP2;
-          var validTopCurve = void 0,
-            validBottomCurve = void 0;
-          originP1 && !1 !== originP1.defined ? (validTopCurve = currentTopCurve, validBottomCurve = currentBottomCurve) : originP1 && !1 !== originP2.defined && (validTopCurve = _topCurve, validBottomCurve = bototmCurve), defined0 ? (defined0 = !defined0, topList.push(validTopCurve || _topCurve), bottomList.push(validBottomCurve || bototmCurve)) : validTopCurve && (defined0 = !defined0, topList.push(validTopCurve || _topCurve), bottomList.push(validBottomCurve || bototmCurve), drawAreaConnectBlock$1(path, topList, bottomList, params), topList.length = 0, bottomList.length = 0);
-        }
-        lastTopCurve = _topCurve;
-      } else {
-        var tc = null,
-          bc = null;
-        lastDefined !== _topCurve.defined ? (lastDefined ? (drawAreaBlock$1(path, topList, bottomList, params), topList.length = 0, bottomList.length = 0) : (tc = _topCurve, bc = bottom.curves[_n2 - _i - 1]), lastDefined = !lastDefined) : lastDefined && (tc = _topCurve, bc = bottom.curves[_n2 - _i - 1]), tc && bc && (_percent < 1 && (tc = tc.p2 && tc.p3 ? divideCubic$1(tc, _percent)[0] : divideLinear$1(tc, _percent)[0], bc = bc.p2 && bc.p3 ? divideCubic$1(bc, 1 - _percent)[1] : divideLinear$1(bc, 1 - _percent)[1]), tc.defined = lastDefined, bc.defined = lastDefined, topList.push(tc), bottomList.push(bc)), tc = null, bc = null;
-      }
+      drawedLengthUntilLast += curCurveLength;
+      var tc = null,
+        bc = null;
+      lastDefined !== _topCurve.defined ? (lastDefined ? (drawAreaBlock$1(path, topList, bottomList, params), topList.length = 0, bottomList.length = 0) : (tc = _topCurve, bc = bottom.curves[_n - _i - 1]), lastDefined = !lastDefined) : lastDefined && (tc = _topCurve, bc = bottom.curves[_n - _i - 1]), tc && bc && (_percent < 1 && (tc = tc.p2 && tc.p3 ? divideCubic$1(tc, _percent)[0] : divideLinear$1(tc, _percent)[0], bc = bc.p2 && bc.p3 ? divideCubic$1(bc, 1 - _percent)[1] : divideLinear$1(bc, 1 - _percent)[1]), tc.defined = lastDefined, bc.defined = lastDefined, topList.push(tc), bottomList.push(bc)), tc = null, bc = null;
     }
-    drawConnect ? drawAreaConnectBlock$1(path, topList, bottomList, params) : drawAreaBlock$1(path, topList, bottomList, params);
-  }
-  function drawAreaConnectBlock$1(path, topList, bottomList, params) {
-    if (topList.length < 2) return;
-    var _ref3 = params || {},
-      _ref3$offsetX = _ref3.offsetX,
-      offsetX = _ref3$offsetX === void 0 ? 0 : _ref3$offsetX,
-      _ref3$offsetY = _ref3.offsetY,
-      offsetY = _ref3$offsetY === void 0 ? 0 : _ref3$offsetY,
-      _ref3$offsetZ = _ref3.offsetZ,
-      offsetZ = _ref3$offsetZ === void 0 ? 0 : _ref3$offsetZ;
-      _ref3.mode;
-    var curve = topList[0];
-    path.moveTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ), curve = topList[topList.length - 1];
-    var end = curve.p3 || curve.p1;
-    path.lineTo(end.x + offsetX, end.y + offsetY, offsetZ), curve = bottomList[bottomList.length - 1], path.lineTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ), curve = bottomList[0], end = curve.p3 || curve.p1, path.lineTo(end.x + offsetX, end.y + offsetY, offsetZ), path.closePath();
+    drawAreaBlock$1(path, topList, bottomList, params);
   }
   function drawAreaBlock$1(path, topList, bottomList, params) {
-    var _ref4 = params || {},
-      _ref4$offsetX = _ref4.offsetX,
-      offsetX = _ref4$offsetX === void 0 ? 0 : _ref4$offsetX,
-      _ref4$offsetY = _ref4.offsetY,
-      offsetY = _ref4$offsetY === void 0 ? 0 : _ref4$offsetY,
-      _ref4$offsetZ = _ref4.offsetZ,
-      offsetZ = _ref4$offsetZ === void 0 ? 0 : _ref4$offsetZ;
+    var _ref2 = params || {},
+      _ref2$offsetX = _ref2.offsetX,
+      offsetX = _ref2$offsetX === void 0 ? 0 : _ref2$offsetX,
+      _ref2$offsetY = _ref2.offsetY,
+      offsetY = _ref2$offsetY === void 0 ? 0 : _ref2$offsetY,
+      _ref2$offsetZ = _ref2.offsetZ,
+      offsetZ = _ref2$offsetZ === void 0 ? 0 : _ref2$offsetZ;
     var needMoveTo = !0;
     topList.forEach(function (curve) {
       curve.defined ? (needMoveTo && path.moveTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ), drawSegItem$1(path, curve, 1, params), needMoveTo = !1) : needMoveTo = !0;
@@ -20816,6 +20755,8 @@
           strokeOpacity = _area$attribute2$stro2 === void 0 ? areaAttribute.strokeOpacity : _area$attribute2$stro2,
           _area$attribute2$curv = _area$attribute2.curveTension,
           curveTension = _area$attribute2$curv === void 0 ? areaAttribute.curveTension : _area$attribute2$curv,
+          _area$attribute2$conn = _area$attribute2.connectedType,
+          connectedType = _area$attribute2$conn === void 0 ? areaAttribute.connectedType : _area$attribute2$conn,
           data = this.valid(area, areaAttribute, fillCb, strokeCb);
         if (!data) return;
         var doFill = data.doFill,
@@ -20828,6 +20769,11 @@
           segments = _area$attribute3.segments;
         var _area$attribute$curve = area.attribute.curveType,
           curveType = _area$attribute$curve === void 0 ? areaAttribute.curveType : _area$attribute$curve;
+        function parsePoint(points, connectedType) {
+          return "connect" !== connectedType ? points : points.filter(function (p) {
+            return !1 !== p.defined;
+          });
+        }
         if (closePath && "linear" === curveType && (curveType = "linearClosed"), 1 === clipRange && !segments && !points.some(function (p) {
           return !1 === p.defined;
         }) && "linear" === curveType) return this.drawLinearAreaHighPerformance(area, context, !!fill, doStroke, fillOpacity, strokeOpacity, x, y, areaAttribute, drawContext, params, fillCb, strokeCb);
@@ -20843,7 +20789,7 @@
                 x: lastTopSeg.endX,
                 y: lastTopSeg.endY
               } : index > 1 && (startPoint.x = lastTopSeg.endX, startPoint.y = lastTopSeg.endY);
-              var data = calcLineCache$1(seg.points, curveType, {
+              var data = calcLineCache$1(parsePoint(seg.points, connectedType), curveType, {
                 startPoint: startPoint,
                 curveTension: curveTension
               });
@@ -20868,7 +20814,7 @@
                   y: null !== (_d = endPoint.y1) && void 0 !== _d ? _d : endPoint.y
                 });
               }
-              bottomPoints.length > 1 && (lastBottomSeg = calcLineCache$1(bottomPoints, "stepBefore" === curveType ? "stepAfter" : "stepAfter" === curveType ? "stepBefore" : curveType, {
+              bottomPoints.length > 1 && (lastBottomSeg = calcLineCache$1(parsePoint(bottomPoints, connectedType), "stepBefore" === curveType ? "stepAfter" : "stepAfter" === curveType ? "stepBefore" : curveType, {
                 curveTension: curveTension
               }), bottomCaches.unshift(lastBottomSeg));
             }
@@ -20881,11 +20827,11 @@
           } else {
             if (!points || !points.length) return area.cacheArea = null, void area.clearUpdateShapeTag();
             {
-              var topPoints = points,
+              var topPoints = parsePoint(points, connectedType),
                 _bottomPoints = [];
-              for (var _i5 = points.length - 1; _i5 >= 0; _i5--) _bottomPoints.push({
-                x: null !== (_e = points[_i5].x1) && void 0 !== _e ? _e : points[_i5].x,
-                y: null !== (_f = points[_i5].y1) && void 0 !== _f ? _f : points[_i5].y
+              for (var _i5 = topPoints.length - 1; _i5 >= 0; _i5--) _bottomPoints.push({
+                x: null !== (_e = topPoints[_i5].x1) && void 0 !== _e ? _e : topPoints[_i5].x,
+                y: null !== (_f = topPoints[_i5].y1) && void 0 !== _f ? _f : topPoints[_i5].y
               });
               var topCache = calcLineCache$1(topPoints, curveType, {
                   curveTension: curveTension
@@ -20935,22 +20881,12 @@
     }, {
       key: "drawSegmentItem",
       value: function drawSegmentItem(context, cache, fill, fillOpacity, stroke, strokeOpacity, attribute, defaultAttribute, clipRange, offsetX, offsetY, offsetZ, area, drawContext, fillCb, strokeCb) {
-        var ret = !1;
-        return ret = ret || this._drawSegmentItem(context, cache, fill, fillOpacity, stroke, strokeOpacity, attribute, defaultAttribute, clipRange, offsetX, offsetY, offsetZ, area, drawContext, !1, fillCb, strokeCb), ret = ret || this._drawSegmentItem(context, cache, fill, fillOpacity, stroke, strokeOpacity, attribute, defaultAttribute, clipRange, offsetX, offsetY, offsetZ, area, drawContext, !0, fillCb, strokeCb), ret;
+        return this._drawSegmentItem(context, cache, fill, fillOpacity, stroke, strokeOpacity, attribute, defaultAttribute, clipRange, offsetX, offsetY, offsetZ, area, drawContext, fillCb, strokeCb);
       }
     }, {
       key: "_drawSegmentItem",
-      value: function _drawSegmentItem(context, cache, fill, fillOpacity, stroke, strokeOpacity, attribute, defaultAttribute, clipRange, offsetX, offsetY, offsetZ, area, drawContext, connect, fillCb, strokeCb) {
-        var _a, _b, _c, _d;
+      value: function _drawSegmentItem(context, cache, fill, fillOpacity, stroke, strokeOpacity, attribute, defaultAttribute, clipRange, offsetX, offsetY, offsetZ, area, drawContext, fillCb, strokeCb) {
         if (!(cache && cache.top && cache.bottom && cache.top.curves && cache.top.curves.length && cache.bottom.curves && cache.bottom.curves.length)) return;
-        var connectedType = attribute.connectedType,
-          connectedX = attribute.connectedX,
-          connectedY = attribute.connectedY,
-          connectedStyle = attribute.connectedStyle;
-        var da = [];
-        if (connect && (isArray$3(defaultAttribute) ? (connectedType = null !== (_a = null != connectedType ? connectedType : defaultAttribute[0].connectedType) && void 0 !== _a ? _a : defaultAttribute[1].connectedType, connectedX = null !== (_b = null != connectedX ? connectedX : defaultAttribute[0].connectedX) && void 0 !== _b ? _b : defaultAttribute[1].connectedX, connectedY = null !== (_c = null != connectedY ? connectedY : defaultAttribute[0].connectedY) && void 0 !== _c ? _c : defaultAttribute[1].connectedY, connectedStyle = null !== (_d = null != connectedStyle ? connectedStyle : defaultAttribute[0].connectedStyle) && void 0 !== _d ? _d : defaultAttribute[1].connectedStyle) : (connectedType = null != connectedType ? connectedType : defaultAttribute.connectedType, connectedX = null != connectedX ? connectedX : defaultAttribute.connectedX, connectedY = null != connectedY ? connectedY : defaultAttribute.connectedY, connectedStyle = null != connectedStyle ? connectedStyle : defaultAttribute.connectedStyle), "connect" !== connectedType && "zero" !== connectedType && (connectedType = "none"), isArray$3(defaultAttribute) ? defaultAttribute.forEach(function (i) {
-          return da.push(i);
-        }) : da.push(defaultAttribute), da.push(attribute)), connect && "none" === connectedType) return !1;
         context.beginPath();
         var _area$attribute4 = area.attribute,
           points = _area$attribute4.points,
@@ -20968,11 +20904,7 @@
           offsetX: offsetX,
           offsetY: offsetY,
           offsetZ: offsetZ,
-          direction: direction,
-          drawConnect: connect,
-          mode: connectedType,
-          zeroX: connectedX,
-          zeroY: connectedY
+          direction: direction
         }), this.beforeRenderStep(area, context, offsetX, offsetY, !!fillOpacity, !1, fill, !1, defaultAttribute, drawContext, fillCb, null, {
           attribute: attribute
         }), context.setShadowBlendStyle && context.setShadowBlendStyle(area, attribute, defaultAttribute);
@@ -20980,7 +20912,7 @@
           originX = _attribute$x === void 0 ? 0 : _attribute$x,
           _attribute$x2 = attribute.x,
           originY = _attribute$x2 === void 0 ? 0 : _attribute$x2;
-        return !1 !== fill && (fillCb ? fillCb(context, attribute, defaultAttribute) : fillOpacity && (context.setCommonStyle(area, connect ? connectedStyle : attribute, originX - offsetX, originY - offsetY, connect ? da : defaultAttribute), context.fill())), this.afterRenderStep(area, context, offsetX, offsetY, !!fillOpacity, !1, fill, !1, defaultAttribute, drawContext, fillCb, null, {
+        return !1 !== fill && (fillCb ? fillCb(context, attribute, defaultAttribute) : fillOpacity && (context.setCommonStyle(area, attribute, originX - offsetX, originY - offsetY, defaultAttribute), context.fill())), this.afterRenderStep(area, context, offsetX, offsetY, !!fillOpacity, !1, fill, !1, defaultAttribute, drawContext, fillCb, null, {
           attribute: attribute
         }), function () {
           if (!1 !== stroke) if (strokeCb) strokeCb(context, attribute, defaultAttribute);else {
@@ -20989,12 +20921,8 @@
             isArray$3(_stroke2) && (_stroke2[0] || _stroke2[2]) && !1 === _stroke2[1] && (context.beginPath(), drawSegments$1(context.camera ? context : context.nativeContext, _stroke2[0] ? cache.top : cache.bottom, clipRange, direction === Direction$4.ROW ? "x" : "y", {
               offsetX: offsetX,
               offsetY: offsetY,
-              offsetZ: offsetZ,
-              drawConnect: connect,
-              mode: connectedType,
-              zeroX: connectedX,
-              zeroY: connectedY
-            })), context.setStrokeStyle(area, connect ? connectedStyle : attribute, originX - offsetX, originY - offsetY, connect ? da : defaultAttribute), context.stroke();
+              offsetZ: offsetZ
+            })), context.setStrokeStyle(area, attribute, originX - offsetX, originY - offsetY, defaultAttribute), context.stroke();
           }
         }(), !1;
       }
@@ -22732,7 +22660,7 @@
         var _this3 = this;
         if (drawContext["break"] || !1 === group.attribute.visibleAll) return;
         if (group.incremental && (null == drawContext.startAtId || drawContext.startAtId === group._uid)) return drawContext["break"] = !0, void this._increaseRender(group, drawContext);
-        if (this.useDirtyBounds && !isRectIntersect$1(group.AABBBounds, this.dirtyBounds, !1)) return;
+        if (this.useDirtyBounds && !isRectIntersect$1(group.AABBBounds, this.dirtyBounds, !1) && "empty" !== group.attribute.boundsMode) return;
         var tempBounds,
           nextM = parentMatrix;
         if (this.useDirtyBounds) {
@@ -23642,7 +23570,7 @@
       }, _this.afterTickCb = function () {
         var _a;
         _this.tickedBeforeRender = !0, "performance" === (null === (_a = _this.params.optimize) || void 0 === _a ? void 0 : _a.tickRenderMode) || "rendering" !== _this.state && _this.render();
-      }, _this.params = params, _this.theme = new Theme$1(), _this.hooks = {
+      }, _this.params = params, _this.theme = new Theme$2(), _this.hooks = {
         beforeRender: new SyncHook$1(["stage"]),
         afterRender: new SyncHook$1(["stage"])
       }, _this.global = application$1.global, !_this.global.env && isBrowserEnv$1() && _this.global.setEnv("browser"), _this.window = container$1.get(VWindow$1), _this.renderService = container$1.get(RenderService$1), _this.pluginService = container$1.get(PluginService$1), _this.layerService = container$1.get(LayerService$1), _this.pluginService.active(_assertThisInitialized(_this), params), _this.window.create({
@@ -25027,13 +24955,17 @@
           textConfig = _this$currRt$attribut === void 0 ? [] : _this$currRt$attribut;
         if (_this.composingConfigIdx = _this.cursorIndex < 0 ? 0 : findConfigIndexByCursorIdx(textConfig, _this.cursorIndex), _this.cursorIndex < 0) {
           var config = textConfig[0];
-          textConfig.unshift(Object.assign(Object.assign(Object.assign({}, getDefaultCharacterConfig(_this.currRt.attribute)), config), {
+          textConfig.unshift(Object.assign(Object.assign(Object.assign({
+            fill: "black"
+          }, getDefaultCharacterConfig(_this.currRt.attribute)), config), {
             text: ""
           }));
         } else {
           var configIdx = _this.composingConfigIdx,
             lastConfig = textConfig[configIdx] || textConfig[configIdx - 1];
-          textConfig.splice(configIdx, 0, Object.assign(Object.assign({}, lastConfig), {
+          textConfig.splice(configIdx, 0, Object.assign(Object.assign({
+            fill: "black"
+          }, lastConfig), {
             text: ""
           }));
         }
@@ -25436,18 +25368,16 @@
           placeholderColor = _editOptions$placehol === void 0 ? "rgba(0, 0, 0, 0.6)" : _editOptions$placehol,
           placeholderFontFamily = editOptions.placeholderFontFamily,
           placeholderFontSize = editOptions.placeholderFontSize,
-          shadow = this.currRt.shadowRoot || this.currRt.attachShadow();
-        this.shadowPlaceHolder = createRichText$1(Object.assign(Object.assign({}, this.currRt.attribute), {
+          shadow = this.getShadow(this.currRt),
+          textConfigItem = Object.assign(Object.assign({}, getDefaultCharacterConfig(this.currRt.attribute)), {
+            text: placeholder
+          });
+        placeholderColor && (textConfigItem.fill = placeholderColor), placeholderFontFamily && (textConfigItem.fontFamily = placeholderFontFamily), placeholderFontSize && (textConfigItem.fontSize = placeholderFontSize), this.shadowPlaceHolder = createRichText$1(Object.assign(Object.assign({}, this.currRt.attribute), {
           x: 0,
           y: 0,
           angle: 0,
           _debug_bounds: !1,
-          textConfig: [{
-            text: placeholder,
-            fill: placeholderColor,
-            fontFamily: placeholderFontFamily,
-            fontSize: placeholderFontSize
-          }]
+          textConfig: [textConfigItem]
         })), shadow.add(this.shadowPlaceHolder);
       }
     }, {
@@ -25473,10 +25403,9 @@
           fill: !1,
           stroke: boundsStrokeWhenInput,
           lineWidth: 1,
-          boundsMode: "empty",
           zIndex: -1
         });
-        (this.currRt.shadowRoot || this.currRt.attachShadow()).add(this.shadowBounds), this.offsetLineBgAndShadowBounds();
+        this.getShadow(this.currRt).add(this.shadowBounds), this.offsetLineBgAndShadowBounds();
       }
     }, {
       key: "trySyncPlaceholderToTextConfig",
@@ -25502,11 +25431,14 @@
     }, {
       key: "onFocus",
       value: function onFocus(e, data) {
-        this.deFocus(!1), this.focusing = !0;
+        var _this3 = this;
+        this.updateCbs && this.updateCbs.forEach(function (cb) {
+          return cb("beforeOnfocus", _this3);
+        }), this.deFocus(!1), this.focusing = !0;
         var target = e.target;
         if (!target || "richtext" !== target.type) return;
         this.currRt = target, RichTextEditPlugin.tryUpdateRichtext(target);
-        var shadowRoot = target.shadowRoot || target.attachShadow(),
+        var shadowRoot = this.getShadow(target),
           cache = target.getFrameCache();
         if (cache) {
           if (this.computeGlobalDelta(cache), shadowRoot.setAttributes({
@@ -25519,16 +25451,14 @@
               x: 0,
               y: 0,
               lineWidth: 1,
-              stroke: "black",
-              boundsMode: "empty"
+              stroke: "black"
             });
             this.addAnimateToLine(line), this.editLine = line, this.ticker.start(!0);
             var g = createGroup$1({
               x: 0,
               y: 0,
               width: 0,
-              height: 0,
-              boundsMode: "empty"
+              height: 0
             });
             this.editBg = g, shadowRoot.add(this.editLine), shadowRoot.add(this.editBg);
           }
@@ -25581,7 +25511,13 @@
     }, {
       key: "deFocus",
       value: function deFocus() {
+        var _this4 = this;
         var trulyDeFocus = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !1;
+        this.updateCbs && this.updateCbs.forEach(function (cb) {
+          return cb("beforeDefocus", _this4, {
+            trulyDeFocus: trulyDeFocus
+          });
+        });
         var target = this.currRt;
         if (!target) return;
         trulyDeFocus && (this.trySyncPlaceholderToTextConfig(), target.detachShadow());
@@ -25645,7 +25581,7 @@
       value: function _tryShowSelection(currCursorData, cache) {
         var _ref2,
           _ref3,
-          _this3 = this;
+          _this5 = this;
         var startCursorPos = this.startCursorPos,
           endCursorPos = {
             x: currCursorData.x,
@@ -25712,7 +25648,7 @@
           }
         }
         this.setCursorAndTextArea(currCursorData.x, currCursorData.y1, currCursorData.y2, this.currRt), this.triggerRender(), this.updateCbs.forEach(function (cb) {
-          return cb("selection", _this3);
+          return cb("selection", _this5);
         });
       }
     }, {
@@ -25722,6 +25658,14 @@
           fill: "transparent"
         }));
       }
+    }, {
+      key: "getShadow",
+      value: function getShadow(rt) {
+        var sr = rt.shadowRoot || rt.attachShadow();
+        return sr.setAttributes({
+          boundsMode: "empty"
+        }), sr;
+      }
     }, {
       key: "getLineByPoint",
       value: function getLineByPoint(cache, p1) {
@@ -28749,7 +28693,7 @@
   function createImageElement$1(src) {
     var isSvg = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
     var img = document.createElement("img");
-    if (img.crossOrigin = "anonymous", isSvg) {
+    if (application$1.global.isImageAnonymous && (img.crossOrigin = "anonymous"), isSvg) {
       var data = new Blob([src], {
         type: "image/svg+xml"
       });
@@ -30496,6 +30440,599 @@
     loadPyramid3dPick || (loadPyramid3dPick = !0, bind(CanvasPyramid3dPicker).to(DefaultCanvasPyramid3dPicker).inSingletonScope(), bind(CanvasPickerContribution$1).toService(CanvasPyramid3dPicker));
   });
 
+  var lib$2 = {};
+
+  var gif = {};
+
+  var lib$1 = {};
+
+  Object.defineProperty(lib$1, "__esModule", {
+    value: true
+  });
+  lib$1.loop = lib$1.conditional = lib$1.parse = void 0;
+  var parse$4 = function parse(stream, schema) {
+    var result = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    var parent = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : result;
+    if (Array.isArray(schema)) {
+      schema.forEach(function (partSchema) {
+        return parse(stream, partSchema, result, parent);
+      });
+    } else if (typeof schema === 'function') {
+      schema(stream, result, parent, parse);
+    } else {
+      var key = Object.keys(schema)[0];
+      if (Array.isArray(schema[key])) {
+        parent[key] = {};
+        parse(stream, schema[key], result, parent[key]);
+      } else {
+        parent[key] = schema[key](stream, result, parent, parse);
+      }
+    }
+    return result;
+  };
+  lib$1.parse = parse$4;
+  var conditional = function conditional(schema, conditionFunc) {
+    return function (stream, result, parent, parse) {
+      if (conditionFunc(stream, result, parent)) {
+        parse(stream, schema, result, parent);
+      }
+    };
+  };
+  lib$1.conditional = conditional;
+  var loop = function loop(schema, continueFunc) {
+    return function (stream, result, parent, parse) {
+      var arr = [];
+      var lastStreamPos = stream.pos;
+      while (continueFunc(stream, result, parent)) {
+        var newParent = {};
+        parse(stream, schema, result, newParent); // cases when whole file is parsed but no termination is there and stream position is not getting updated as well
+        // it falls into infinite recursion, null check to avoid the same
+
+        if (stream.pos === lastStreamPos) {
+          break;
+        }
+        lastStreamPos = stream.pos;
+        arr.push(newParent);
+      }
+      return arr;
+    };
+  };
+  lib$1.loop = loop;
+
+  var uint8 = {};
+
+  Object.defineProperty(uint8, "__esModule", {
+    value: true
+  });
+  uint8.readBits = uint8.readArray = uint8.readUnsigned = uint8.readString = uint8.peekBytes = uint8.readBytes = uint8.peekByte = uint8.readByte = uint8.buildStream = void 0;
+
+  // Default stream and parsers for Uint8TypedArray data type
+  var buildStream = function buildStream(uint8Data) {
+    return {
+      data: uint8Data,
+      pos: 0
+    };
+  };
+  uint8.buildStream = buildStream;
+  var readByte = function readByte() {
+    return function (stream) {
+      return stream.data[stream.pos++];
+    };
+  };
+  uint8.readByte = readByte;
+  var peekByte = function peekByte() {
+    var offset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    return function (stream) {
+      return stream.data[stream.pos + offset];
+    };
+  };
+  uint8.peekByte = peekByte;
+  var readBytes = function readBytes(length) {
+    return function (stream) {
+      return stream.data.subarray(stream.pos, stream.pos += length);
+    };
+  };
+  uint8.readBytes = readBytes;
+  var peekBytes = function peekBytes(length) {
+    return function (stream) {
+      return stream.data.subarray(stream.pos, stream.pos + length);
+    };
+  };
+  uint8.peekBytes = peekBytes;
+  var readString = function readString(length) {
+    return function (stream) {
+      return Array.from(readBytes(length)(stream)).map(function (value) {
+        return String.fromCharCode(value);
+      }).join('');
+    };
+  };
+  uint8.readString = readString;
+  var readUnsigned = function readUnsigned(littleEndian) {
+    return function (stream) {
+      var bytes = readBytes(2)(stream);
+      return littleEndian ? (bytes[1] << 8) + bytes[0] : (bytes[0] << 8) + bytes[1];
+    };
+  };
+  uint8.readUnsigned = readUnsigned;
+  var readArray = function readArray(byteSize, totalOrFunc) {
+    return function (stream, result, parent) {
+      var total = typeof totalOrFunc === 'function' ? totalOrFunc(stream, result, parent) : totalOrFunc;
+      var parser = readBytes(byteSize);
+      var arr = new Array(total);
+      for (var i = 0; i < total; i++) {
+        arr[i] = parser(stream);
+      }
+      return arr;
+    };
+  };
+  uint8.readArray = readArray;
+  var subBitsTotal = function subBitsTotal(bits, startIndex, length) {
+    var result = 0;
+    for (var i = 0; i < length; i++) {
+      result += bits[startIndex + i] && Math.pow(2, length - i - 1);
+    }
+    return result;
+  };
+  var readBits = function readBits(schema) {
+    return function (stream) {
+      var _byte = readByte()(stream); // convert the byte to bit array
+
+      var bits = new Array(8);
+      for (var i = 0; i < 8; i++) {
+        bits[7 - i] = !!(_byte & 1 << i);
+      } // convert the bit array to values based on the schema
+
+      return Object.keys(schema).reduce(function (res, key) {
+        var def = schema[key];
+        if (def.length) {
+          res[key] = subBitsTotal(bits, def.index, def.length);
+        } else {
+          res[key] = bits[def.index];
+        }
+        return res;
+      }, {});
+    };
+  };
+  uint8.readBits = readBits;
+
+  (function (exports) {
+
+    Object.defineProperty(exports, "__esModule", {
+      value: true
+    });
+    exports["default"] = void 0;
+    var _ = lib$1;
+    var _uint = uint8;
+
+    // a set of 0x00 terminated subblocks
+    var subBlocksSchema = {
+      blocks: function blocks(stream) {
+        var terminator = 0x00;
+        var chunks = [];
+        var streamSize = stream.data.length;
+        var total = 0;
+        for (var size = (0, _uint.readByte)()(stream); size !== terminator; size = (0, _uint.readByte)()(stream)) {
+          // size becomes undefined for some case when file is corrupted and  terminator is not proper 
+          // null check to avoid recursion
+          if (!size) break; // catch corrupted files with no terminator
+
+          if (stream.pos + size >= streamSize) {
+            var availableSize = streamSize - stream.pos;
+            chunks.push((0, _uint.readBytes)(availableSize)(stream));
+            total += availableSize;
+            break;
+          }
+          chunks.push((0, _uint.readBytes)(size)(stream));
+          total += size;
+        }
+        var result = new Uint8Array(total);
+        var offset = 0;
+        for (var i = 0; i < chunks.length; i++) {
+          result.set(chunks[i], offset);
+          offset += chunks[i].length;
+        }
+        return result;
+      }
+    }; // global control extension
+
+    var gceSchema = (0, _.conditional)({
+      gce: [{
+        codes: (0, _uint.readBytes)(2)
+      }, {
+        byteSize: (0, _uint.readByte)()
+      }, {
+        extras: (0, _uint.readBits)({
+          future: {
+            index: 0,
+            length: 3
+          },
+          disposal: {
+            index: 3,
+            length: 3
+          },
+          userInput: {
+            index: 6
+          },
+          transparentColorGiven: {
+            index: 7
+          }
+        })
+      }, {
+        delay: (0, _uint.readUnsigned)(true)
+      }, {
+        transparentColorIndex: (0, _uint.readByte)()
+      }, {
+        terminator: (0, _uint.readByte)()
+      }]
+    }, function (stream) {
+      var codes = (0, _uint.peekBytes)(2)(stream);
+      return codes[0] === 0x21 && codes[1] === 0xf9;
+    }); // image pipeline block
+
+    var imageSchema = (0, _.conditional)({
+      image: [{
+        code: (0, _uint.readByte)()
+      }, {
+        descriptor: [{
+          left: (0, _uint.readUnsigned)(true)
+        }, {
+          top: (0, _uint.readUnsigned)(true)
+        }, {
+          width: (0, _uint.readUnsigned)(true)
+        }, {
+          height: (0, _uint.readUnsigned)(true)
+        }, {
+          lct: (0, _uint.readBits)({
+            exists: {
+              index: 0
+            },
+            interlaced: {
+              index: 1
+            },
+            sort: {
+              index: 2
+            },
+            future: {
+              index: 3,
+              length: 2
+            },
+            size: {
+              index: 5,
+              length: 3
+            }
+          })
+        }]
+      }, (0, _.conditional)({
+        lct: (0, _uint.readArray)(3, function (stream, result, parent) {
+          return Math.pow(2, parent.descriptor.lct.size + 1);
+        })
+      }, function (stream, result, parent) {
+        return parent.descriptor.lct.exists;
+      }), {
+        data: [{
+          minCodeSize: (0, _uint.readByte)()
+        }, subBlocksSchema]
+      }]
+    }, function (stream) {
+      return (0, _uint.peekByte)()(stream) === 0x2c;
+    }); // plain text block
+
+    var textSchema = (0, _.conditional)({
+      text: [{
+        codes: (0, _uint.readBytes)(2)
+      }, {
+        blockSize: (0, _uint.readByte)()
+      }, {
+        preData: function preData(stream, result, parent) {
+          return (0, _uint.readBytes)(parent.text.blockSize)(stream);
+        }
+      }, subBlocksSchema]
+    }, function (stream) {
+      var codes = (0, _uint.peekBytes)(2)(stream);
+      return codes[0] === 0x21 && codes[1] === 0x01;
+    }); // application block
+
+    var applicationSchema = (0, _.conditional)({
+      application: [{
+        codes: (0, _uint.readBytes)(2)
+      }, {
+        blockSize: (0, _uint.readByte)()
+      }, {
+        id: function id(stream, result, parent) {
+          return (0, _uint.readString)(parent.blockSize)(stream);
+        }
+      }, subBlocksSchema]
+    }, function (stream) {
+      var codes = (0, _uint.peekBytes)(2)(stream);
+      return codes[0] === 0x21 && codes[1] === 0xff;
+    }); // comment block
+
+    var commentSchema = (0, _.conditional)({
+      comment: [{
+        codes: (0, _uint.readBytes)(2)
+      }, subBlocksSchema]
+    }, function (stream) {
+      var codes = (0, _uint.peekBytes)(2)(stream);
+      return codes[0] === 0x21 && codes[1] === 0xfe;
+    });
+    var schema = [{
+      header: [{
+        signature: (0, _uint.readString)(3)
+      }, {
+        version: (0, _uint.readString)(3)
+      }]
+    }, {
+      lsd: [{
+        width: (0, _uint.readUnsigned)(true)
+      }, {
+        height: (0, _uint.readUnsigned)(true)
+      }, {
+        gct: (0, _uint.readBits)({
+          exists: {
+            index: 0
+          },
+          resolution: {
+            index: 1,
+            length: 3
+          },
+          sort: {
+            index: 4
+          },
+          size: {
+            index: 5,
+            length: 3
+          }
+        })
+      }, {
+        backgroundColorIndex: (0, _uint.readByte)()
+      }, {
+        pixelAspectRatio: (0, _uint.readByte)()
+      }]
+    }, (0, _.conditional)({
+      gct: (0, _uint.readArray)(3, function (stream, result) {
+        return Math.pow(2, result.lsd.gct.size + 1);
+      })
+    }, function (stream, result) {
+      return result.lsd.gct.exists;
+    }),
+    // content frames
+    {
+      frames: (0, _.loop)([gceSchema, applicationSchema, commentSchema, imageSchema, textSchema], function (stream) {
+        var nextCode = (0, _uint.peekByte)()(stream); // rather than check for a terminator, we should check for the existence
+        // of an ext or image block to avoid infinite loops
+        //var terminator = 0x3B;
+        //return nextCode !== terminator;
+
+        return nextCode === 0x21 || nextCode === 0x2c;
+      })
+    }];
+    var _default = schema;
+    exports["default"] = _default;
+  })(gif);
+
+  var deinterlace$1 = {};
+
+  Object.defineProperty(deinterlace$1, "__esModule", {
+    value: true
+  });
+  deinterlace$1.deinterlace = void 0;
+
+  /**
+   * Deinterlace function from https://github.com/shachaf/jsgif
+   */
+  var deinterlace = function deinterlace(pixels, width) {
+    var newPixels = new Array(pixels.length);
+    var rows = pixels.length / width;
+    var cpRow = function cpRow(toRow, fromRow) {
+      var fromPixels = pixels.slice(fromRow * width, (fromRow + 1) * width);
+      newPixels.splice.apply(newPixels, [toRow * width, width].concat(fromPixels));
+    }; // See appendix E.
+
+    var offsets = [0, 4, 2, 1];
+    var steps = [8, 8, 4, 2];
+    var fromRow = 0;
+    for (var pass = 0; pass < 4; pass++) {
+      for (var toRow = offsets[pass]; toRow < rows; toRow += steps[pass]) {
+        cpRow(toRow, fromRow);
+        fromRow++;
+      }
+    }
+    return newPixels;
+  };
+  deinterlace$1.deinterlace = deinterlace;
+
+  var lzw$1 = {};
+
+  Object.defineProperty(lzw$1, "__esModule", {
+    value: true
+  });
+  lzw$1.lzw = void 0;
+
+  /**
+   * javascript port of java LZW decompression
+   * Original java author url: https://gist.github.com/devunwired/4479231
+   */
+  var lzw = function lzw(minCodeSize, data, pixelCount) {
+    var MAX_STACK_SIZE = 4096;
+    var nullCode = -1;
+    var npix = pixelCount;
+    var available, clear, code_mask, code_size, end_of_information, in_code, old_code, bits, code, i, datum, data_size, first, top, bi, pi;
+    var dstPixels = new Array(pixelCount);
+    var prefix = new Array(MAX_STACK_SIZE);
+    var suffix = new Array(MAX_STACK_SIZE);
+    var pixelStack = new Array(MAX_STACK_SIZE + 1); // Initialize GIF data stream decoder.
+
+    data_size = minCodeSize;
+    clear = 1 << data_size;
+    end_of_information = clear + 1;
+    available = clear + 2;
+    old_code = nullCode;
+    code_size = data_size + 1;
+    code_mask = (1 << code_size) - 1;
+    for (code = 0; code < clear; code++) {
+      prefix[code] = 0;
+      suffix[code] = code;
+    } // Decode GIF pixel stream.
+
+    var datum, bits, first, top, pi, bi;
+    datum = bits = first = top = pi = bi = 0;
+    for (i = 0; i < npix;) {
+      if (top === 0) {
+        if (bits < code_size) {
+          // get the next byte
+          datum += data[bi] << bits;
+          bits += 8;
+          bi++;
+          continue;
+        } // Get the next code.
+
+        code = datum & code_mask;
+        datum >>= code_size;
+        bits -= code_size; // Interpret the code
+
+        if (code > available || code == end_of_information) {
+          break;
+        }
+        if (code == clear) {
+          // Reset decoder.
+          code_size = data_size + 1;
+          code_mask = (1 << code_size) - 1;
+          available = clear + 2;
+          old_code = nullCode;
+          continue;
+        }
+        if (old_code == nullCode) {
+          pixelStack[top++] = suffix[code];
+          old_code = code;
+          first = code;
+          continue;
+        }
+        in_code = code;
+        if (code == available) {
+          pixelStack[top++] = first;
+          code = old_code;
+        }
+        while (code > clear) {
+          pixelStack[top++] = suffix[code];
+          code = prefix[code];
+        }
+        first = suffix[code] & 0xff;
+        pixelStack[top++] = first; // add a new string to the table, but only if space is available
+        // if not, just continue with current table until a clear code is found
+        // (deferred clear code implementation as per GIF spec)
+
+        if (available < MAX_STACK_SIZE) {
+          prefix[available] = old_code;
+          suffix[available] = first;
+          available++;
+          if ((available & code_mask) === 0 && available < MAX_STACK_SIZE) {
+            code_size++;
+            code_mask += available;
+          }
+        }
+        old_code = in_code;
+      } // Pop a pixel off the pixel stack.
+
+      top--;
+      dstPixels[pi++] = pixelStack[top];
+      i++;
+    }
+    for (i = pi; i < npix; i++) {
+      dstPixels[i] = 0; // clear missing pixels
+    }
+    return dstPixels;
+  };
+  lzw$1.lzw = lzw;
+
+  Object.defineProperty(lib$2, "__esModule", {
+    value: true
+  });
+  var decompressFrames_1 = lib$2.decompressFrames = lib$2.decompressFrame = parseGIF_1 = lib$2.parseGIF = void 0;
+  var _gif = _interopRequireDefault(gif);
+  var _jsBinarySchemaParser = lib$1;
+  var _uint = uint8;
+  var _deinterlace = deinterlace$1;
+  var _lzw = lzw$1;
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      "default": obj
+    };
+  }
+  var parseGIF = function parseGIF(arrayBuffer) {
+    var byteData = new Uint8Array(arrayBuffer);
+    return (0, _jsBinarySchemaParser.parse)((0, _uint.buildStream)(byteData), _gif["default"]);
+  };
+  var parseGIF_1 = lib$2.parseGIF = parseGIF;
+  var generatePatch = function generatePatch(image) {
+    var totalPixels = image.pixels.length;
+    var patchData = new Uint8ClampedArray(totalPixels * 4);
+    for (var i = 0; i < totalPixels; i++) {
+      var pos = i * 4;
+      var colorIndex = image.pixels[i];
+      var color = image.colorTable[colorIndex] || [0, 0, 0];
+      patchData[pos] = color[0];
+      patchData[pos + 1] = color[1];
+      patchData[pos + 2] = color[2];
+      patchData[pos + 3] = colorIndex !== image.transparentIndex ? 255 : 0;
+    }
+    return patchData;
+  };
+  var decompressFrame = function decompressFrame(frame, gct, buildImagePatch) {
+    if (!frame.image) {
+      console.warn('gif frame does not have associated image.');
+      return;
+    }
+    var image = frame.image; // get the number of pixels
+
+    var totalPixels = image.descriptor.width * image.descriptor.height; // do lzw decompression
+
+    var pixels = (0, _lzw.lzw)(image.data.minCodeSize, image.data.blocks, totalPixels); // deal with interlacing if necessary
+
+    if (image.descriptor.lct.interlaced) {
+      pixels = (0, _deinterlace.deinterlace)(pixels, image.descriptor.width);
+    }
+    var resultImage = {
+      pixels: pixels,
+      dims: {
+        top: frame.image.descriptor.top,
+        left: frame.image.descriptor.left,
+        width: frame.image.descriptor.width,
+        height: frame.image.descriptor.height
+      }
+    }; // color table
+
+    if (image.descriptor.lct && image.descriptor.lct.exists) {
+      resultImage.colorTable = image.lct;
+    } else {
+      resultImage.colorTable = gct;
+    } // add per frame relevant gce information
+
+    if (frame.gce) {
+      resultImage.delay = (frame.gce.delay || 10) * 10; // convert to ms
+
+      resultImage.disposalType = frame.gce.extras.disposal; // transparency
+
+      if (frame.gce.extras.transparentColorGiven) {
+        resultImage.transparentIndex = frame.gce.transparentColorIndex;
+      }
+    } // create canvas usable imagedata if desired
+
+    if (buildImagePatch) {
+      resultImage.patch = generatePatch(resultImage);
+    }
+    return resultImage;
+  };
+  lib$2.decompressFrame = decompressFrame;
+  var decompressFrames = function decompressFrames(parsedGif, buildImagePatches) {
+    return parsedGif.frames.filter(function (f) {
+      return f.image;
+    }).map(function (f) {
+      return decompressFrame(f, parsedGif.gct, buildImagePatches);
+    });
+  };
+  decompressFrames_1 = lib$2.decompressFrames = decompressFrames;
+
+  Generator$1.GenAutoIncrementId();
   var LOTTIE_NUMBER_TYPE = Generator$1.GenAutoIncrementId();
 
   var lottie = {exports: {}};
@@ -36777,11 +37314,18 @@
         height = _this$getScale.height;
       this._container && this._initCanvasByContainer(width, height, dpr, background), params.canvas && this._initCanvasByCanvas(canvas, null != width ? width : 500, null != height ? height : 500, dpr, background), this._stage.defaultLayer.setAttributes({
         background: layerBackground
-      }), layerViewBox && this._stage.defaultLayer.setAttributes({
-        x: layerViewBox.x1,
-        y: layerViewBox.y1,
-        width: layerViewBox.x2 - layerViewBox.x1,
-        height: layerViewBox.y2 - layerViewBox.y1,
+      });
+      var viewBox = layerViewBox || {
+        x1: 0,
+        y1: 0,
+        x2: width,
+        y2: height
+      };
+      this._stage.defaultLayer.setAttributes({
+        x: viewBox.x1,
+        y: viewBox.y1,
+        width: (viewBox.x2 - viewBox.x1) / scaleX,
+        height: (viewBox.y2 - viewBox.y1) / scaleY,
         clip: !0
       }), this._stage.defaultLayer.scale(scaleX, scaleY);
     }
@@ -36861,8 +37405,31 @@
       }
     }, {
       key: "resize",
-      value: function resize(w, h) {
+      value: function resize(w, h, scale) {
         this._stage.resize(w, h, !0);
+        var scaleX = 1,
+          scaleY = 1;
+        scale && (scaleX = scale.scaleX, scaleY = scale.scaleY), this._stage.forEachChildren(function (layer) {
+          layer.setAttributes({
+            x: 0,
+            y: 0,
+            width: w / scaleX,
+            height: h / scaleY,
+            scaleX: scaleX,
+            scaleY: scaleY
+          });
+        });
+      }
+    }, {
+      key: "setLayerViewBox",
+      value: function setLayerViewBox(viewBox) {
+        this._stage.defaultLayer.setAttributes({
+          x: viewBox.x1,
+          y: viewBox.y1,
+          width: viewBox.x2 - viewBox.x1,
+          height: viewBox.y2 - viewBox.y1,
+          clip: !0
+        });
       }
     }, {
       key: "getEventDetail",
@@ -37530,7 +38097,9 @@
       var _this = this;
       var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
       _classCallCheck(this, Player);
-      this.handlerTick = function (delta) {
+      this._lastFrameTime = -1, this.handlerTick = function (delta) {
+        var time = Date.now();
+        void 0 === delta && (delta = _this._lastFrameTime >= 0 ? time - _this._lastFrameTime : 0), _this._lastFrameTime = time;
         var totalTime = _this._scheduler.getTotalTime();
         var currTime = _this._currTime;
         if (_this._loop > 0) if (totalTime <= 0) currTime = 0;else if (currTime + delta > totalTime) for (currTime += delta; currTime > totalTime;) currTime -= totalTime;
@@ -40060,10 +40629,10 @@
     }
     return results;
   };
-  var lib$2 = _simplifyGeometry;
+  var lib = _simplifyGeometry;
 
   (function (module) {
-    var simplify = lib$2;
+    var simplify = lib;
     module.exports = function (geojson, tolerance, dontClone) {
       if (!dontClone) geojson = JSON.parse(JSON.stringify(geojson)); // clone obj
       if (geojson.features) return simplifyFeatureCollection(geojson, tolerance);else if (geojson.type && geojson.type === 'Feature') return simplifyFeature(geojson, tolerance);else return new Error('FeatureCollection or individual Feature required');
@@ -48400,7 +48969,12 @@
           customLayoutFunc = _this$attribute.customLayoutFunc,
           customOverlapFunc = _this$attribute.customOverlapFunc;
         var data = this.attribute.data;
-        isFunction$3(dataFilter) && (data = dataFilter(data));
+        if (isFunction$3(dataFilter) && (data = dataFilter(data)), data && data.length) {
+          var seenIds = new Set();
+          data = data.filter(function (d) {
+            return !seenIds.has(d.id) && seenIds.add(d.id);
+          });
+        }
         var labels = this._initText(data);
         labels = isFunction$3(customLayoutFunc) ? customLayoutFunc(data, labels, this.getRelatedGraphic.bind(this), this._isCollectionBase ? function (d) {
           return _this2._idToPoint.get(d.id);
@@ -52334,23 +52908,12 @@
           x1 = _this$_area$AABBBound.x1,
           x2 = _this$_area$AABBBound.x2,
           y1 = _this$_area$AABBBound.y1,
-          y2 = _this$_area$AABBBound.y2;
-        return position.includes("left") || position.includes("Left") ? {
-          x: x1,
-          y: (y1 + y2) / 2
-        } : position.includes("right") || position.includes("Right") ? {
-          x: x2,
-          y: (y1 + y2) / 2
-        } : position.includes("top") || position.includes("Top") ? {
-          x: (x1 + x2) / 2,
-          y: y1
-        } : position.includes("bottom") || position.includes("Bottom") ? {
-          x: (x1 + x2) / 2,
-          y: y2
-        } : {
-          x: (x1 + x2) / 2,
-          y: (y1 + y2) / 2
-        };
+          y2 = _this$_area$AABBBound.y2,
+          result = {
+            x: (x1 + x2) / 2,
+            y: (y1 + y2) / 2
+          };
+        return (position.includes("left") || position.includes("Left")) && (result.x = x1), (position.includes("right") || position.includes("Right")) && (result.x = x2), (position.includes("top") || position.includes("Top")) && (result.y = y1), (position.includes("bottom") || position.includes("Bottom")) && (result.y = y2), result;
       }
     }, {
       key: "setLabelPos",
@@ -55325,7 +55888,7 @@
     return _createClass(Title, [{
       key: "render",
       value: function render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
         var _this$attribute = this.attribute,
           textType = _this$attribute.textType,
           text = _this$attribute.text,
@@ -55350,10 +55913,10 @@
             x: parsedPadding[3],
             y: parsedPadding[0],
             zIndex: 1
-          }, "group");
+          }, "group"),
+          fixedMainTitleHeight = null !== (_a = textStyle.height) && void 0 !== _a ? _a : height;
         if (!1 !== this.attribute.visible && !1 !== textStyle.visible) {
           var mainTitleWidth = textStyle.width,
-            mainTitleHeight = textStyle.height,
             mainTitleMaxHeight = textStyle.maxHeight,
             mainTitleMaxWidth = textStyle.maxWidth,
             _textStyle$x = textStyle.x,
@@ -55370,8 +55933,8 @@
             var attr = Object.assign({
               x: x,
               y: y,
-              width: null !== (_a = null != mainTitleWidth ? mainTitleWidth : width) && void 0 !== _a ? _a : 0,
-              height: null !== (_b = null != mainTitleHeight ? mainTitleHeight : height) && void 0 !== _b ? _b : 0,
+              width: null !== (_b = null != mainTitleWidth ? mainTitleWidth : width) && void 0 !== _b ? _b : 0,
+              height: null != fixedMainTitleHeight ? fixedMainTitleHeight : 0,
               ellipsis: null == ellipsis || ellipsis,
               wordBreak: null != wordBreak ? wordBreak : "break-word",
               maxHeight: null != mainTitleMaxHeight ? mainTitleMaxHeight : maxHeight,
@@ -55387,7 +55950,7 @@
               x: x,
               y: y,
               width: null !== (_d = null != mainTitleWidth ? mainTitleWidth : width) && void 0 !== _d ? _d : 0,
-              height: null !== (_e = null != mainTitleHeight ? mainTitleHeight : height) && void 0 !== _e ? _e : 0,
+              height: null != fixedMainTitleHeight ? fixedMainTitleHeight : 0,
               ellipsis: ellipsis,
               wordBreak: wordBreak,
               maxHeight: null != mainTitleMaxHeight ? mainTitleMaxHeight : maxHeight,
@@ -55399,16 +55962,16 @@
             text: isArray$3(text) ? text : [text],
             whiteSpace: "normal"
           }, textStyle), {
-            maxLineWidth: null !== (_g = null !== (_f = textStyle.maxLineWidth) && void 0 !== _f ? _f : mainTitleWidth) && void 0 !== _g ? _g : width,
-            heightLimit: null != mainTitleHeight ? mainTitleHeight : maxHeight,
+            maxLineWidth: null !== (_f = null !== (_e = textStyle.maxLineWidth) && void 0 !== _e ? _e : mainTitleWidth) && void 0 !== _f ? _f : width,
+            heightLimit: null !== (_g = textStyle.height) && void 0 !== _g ? _g : maxHeight,
             lineClamp: lineClamp,
             ellipsis: ellipsis,
             x: x,
             y: y
           }), "text"));
         }
-        var maintextHeight = this._mainTitle ? this._mainTitle.AABBBounds.height() : 0,
-          maintextWidth = this._mainTitle ? this._mainTitle.AABBBounds.width() : 0;
+        var mainTextBoundsHeight = this._mainTitle ? this._mainTitle.AABBBounds.height() : 0,
+          mainTextBoundsWidth = this._mainTitle ? this._mainTitle.AABBBounds.width() : 0;
         if (!1 !== this.attribute.visible && !1 !== subtextStyle.visible) {
           var subTitleWidth = subtextStyle.width,
             subTitleHeight = subtextStyle.height,
@@ -55423,7 +55986,7 @@
             _subtextStyle$wordBre = subtextStyle.wordBreak,
             _wordBreak = _subtextStyle$wordBre === void 0 ? "break-word" : _subtextStyle$wordBre,
             _lineClamp = subtextStyle.lineClamp,
-            maxSubTextHeight = Math.max(Number.MIN_VALUE, maxHeight - maintextHeight);
+            maxSubTextHeight = Math.max(Number.MIN_VALUE, maxHeight - mainTextBoundsHeight);
           if ("rich" === subtextType || isValid$3(subtextStyle.character)) {
             var _attr2 = Object.assign({
               x: _x,
@@ -55462,37 +56025,33 @@
             lineClamp: _lineClamp,
             ellipsis: _ellipsis,
             x: 0,
-            y: maintextHeight
+            y: mainTextBoundsHeight
           }), "text"));
         }
-        var subtextHeight = this._subTitle ? this._subTitle.AABBBounds.height() : 0,
-          subtextWidth = this._subTitle ? this._subTitle.AABBBounds.width() : 0;
-        var titleWidth = Math.max(maintextWidth, subtextWidth),
-          titleHeight = maintextHeight + (null !== (_q = subtextStyle.height) && void 0 !== _q ? _q : subtextHeight);
-        if (isValid$3(width) && (titleWidth = width), isValid$3(height) && (titleHeight = height), isValid$3(minWidth) && titleWidth < minWidth && (titleWidth = minWidth), isValid$3(maxWidth) && titleWidth > maxWidth && (titleWidth = maxWidth), isValid$3(minHeight) && titleHeight < minHeight && (titleHeight = minHeight), isValid$3(maxHeight) && titleHeight > maxHeight && (titleHeight = maxHeight), group.attribute.width = titleWidth, group.attribute.height = titleHeight, group.attribute.boundsPadding = parsedPadding, this._mainTitle) {
+        var subTextBoundsHeight = this._subTitle ? this._subTitle.AABBBounds.height() : 0,
+          subTextBoundsWidth = this._subTitle ? this._subTitle.AABBBounds.width() : 0;
+        var totalWidth = Math.max(mainTextBoundsWidth, subTextBoundsWidth),
+          totalHeight = mainTextBoundsHeight + (null !== (_q = subtextStyle.height) && void 0 !== _q ? _q : subTextBoundsHeight);
+        if (isValid$3(width) && (totalWidth = width), isValid$3(height) && (totalHeight = height), isValid$3(minWidth) && totalWidth < minWidth && (totalWidth = minWidth), isValid$3(maxWidth) && totalWidth > maxWidth && (totalWidth = maxWidth), isValid$3(minHeight) && totalHeight < minHeight && (totalHeight = minHeight), isValid$3(maxHeight) && totalHeight > maxHeight && (totalHeight = maxHeight), group.attribute.width = totalWidth, group.attribute.height = totalHeight, group.attribute.boundsPadding = parsedPadding, this._mainTitle) {
           if (isValid$3(align) || isValid$3(textStyle.align)) {
             var mainTitleAlign = textStyle.align ? textStyle.align : align,
-              _mainTitleWidth = null !== (_r = textStyle.width) && void 0 !== _r ? _r : maintextWidth;
-            "left" === mainTitleAlign ? (this._mainTitle.setAttribute("x", 0), this._mainTitle.setAttribute("textAlign", "left")) : "center" === mainTitleAlign ? (this._mainTitle.setAttribute("x", _mainTitleWidth / 2), this._mainTitle.setAttribute("textAlign", "center")) : "right" === mainTitleAlign && (this._mainTitle.setAttribute("x", _mainTitleWidth), this._mainTitle.setAttribute("textAlign", "right"));
-          }
-          if (isValid$3(verticalAlign) || isValid$3(textStyle.verticalAlign)) {
-            var mainTitleVerticalAlign = textStyle.verticalAlign ? textStyle.verticalAlign : verticalAlign,
-              _mainTitleHeight = textStyle.height ? textStyle.height : titleHeight;
-            "top" === mainTitleVerticalAlign ? (this._mainTitle.setAttribute("y", 0), this._mainTitle.setAttribute("textBaseline", "top")) : "middle" === mainTitleVerticalAlign ? (this._mainTitle.setAttribute("y", _mainTitleHeight / 2), this._mainTitle.setAttribute("textBaseline", "middle")) : "bottom" === mainTitleVerticalAlign && (this._mainTitle.setAttribute("y", _mainTitleHeight), this._mainTitle.setAttribute("textBaseline", "bottom"));
+              _mainTitleWidth = null !== (_r = textStyle.width) && void 0 !== _r ? _r : totalWidth;
+            "center" === mainTitleAlign ? (this._mainTitle.setAttribute("x", _mainTitleWidth / 2), this._mainTitle.setAttribute("textAlign", "center")) : "right" === mainTitleAlign ? (this._mainTitle.setAttribute("x", _mainTitleWidth), this._mainTitle.setAttribute("textAlign", "right")) : (this._mainTitle.setAttribute("x", 0), this._mainTitle.setAttribute("textAlign", "left"));
           }
+          var mainTitleVerticalAlign = textStyle.verticalAlign ? textStyle.verticalAlign : verticalAlign,
+            mainTitleHeight = null != fixedMainTitleHeight ? fixedMainTitleHeight : this._mainTitle.AABBBounds.empty() ? 0 : this._mainTitle.AABBBounds.height();
+          "middle" === mainTitleVerticalAlign ? (this._mainTitle.setAttribute("y", mainTitleHeight / 2), this._mainTitle.setAttribute("textBaseline", "middle")) : "bottom" === mainTitleVerticalAlign ? (this._mainTitle.setAttribute("y", mainTitleHeight), this._mainTitle.setAttribute("textBaseline", "bottom")) : (this._mainTitle.setAttribute("y", 0), this._mainTitle.setAttribute("textBaseline", "top"));
         }
         if (this._subTitle) {
           if (isValid$3(align) || isValid$3(subtextStyle.align)) {
             var subTitleAlign = subtextStyle.align ? subtextStyle.align : align,
-              _subTitleWidth = null !== (_s = subtextStyle.width) && void 0 !== _s ? _s : subtextWidth;
-            "left" === subTitleAlign ? (this._subTitle.setAttribute("x", 0), this._subTitle.setAttribute("textAlign", "left")) : "center" === subTitleAlign ? (this._subTitle.setAttribute("x", _subTitleWidth / 2), this._subTitle.setAttribute("textAlign", "center")) : "right" === subTitleAlign && (this._subTitle.setAttribute("x", _subTitleWidth), this._subTitle.setAttribute("textAlign", "right"));
-          }
-          if (isValid$3(verticalAlign) || isValid$3(textStyle.verticalAlign)) {
-            var subTitleVerticalAlign = subtextStyle.verticalAlign ? subtextStyle.verticalAlign : verticalAlign,
-              subTitleYStart = maintextHeight,
-              _subTitleHeight = null !== (_t = subtextStyle.height) && void 0 !== _t ? _t : 0;
-            "top" === subTitleVerticalAlign ? (this._subTitle.setAttribute("y", subTitleYStart), this._subTitle.setAttribute("textBaseline", "top")) : "middle" === subTitleVerticalAlign ? (this._subTitle.setAttribute("y", subTitleYStart + _subTitleHeight / 2), this._subTitle.setAttribute("textBaseline", "middle")) : "bottom" === subTitleVerticalAlign && (this._subTitle.setAttribute("y", subTitleYStart + _subTitleHeight), this._subTitle.setAttribute("textBaseline", "bottom"));
+              _subTitleWidth = null !== (_t = null !== (_s = subtextStyle.width) && void 0 !== _s ? _s : textStyle.width) && void 0 !== _t ? _t : totalWidth;
+            "center" === subTitleAlign ? (this._subTitle.setAttribute("x", _subTitleWidth / 2), this._subTitle.setAttribute("textAlign", "center")) : "right" === subTitleAlign ? (this._subTitle.setAttribute("x", _subTitleWidth), this._subTitle.setAttribute("textAlign", "right")) : (this._subTitle.setAttribute("x", 0), this._subTitle.setAttribute("textAlign", "left"));
           }
+          var subTitleVerticalAlign = subtextStyle.verticalAlign ? subtextStyle.verticalAlign : verticalAlign,
+            subTitleYStart = this._mainTitle ? isValid$3(fixedMainTitleHeight) ? this._mainTitle.AABBBounds.y1 + Math.max(this._mainTitle.AABBBounds.empty() ? 0 : this._mainTitle.AABBBounds.height(), fixedMainTitleHeight) : this._mainTitle.AABBBounds.y2 : 0,
+            _subTitleHeight = null !== (_v = null !== (_u = subtextStyle.height) && void 0 !== _u ? _u : height) && void 0 !== _v ? _v : this._subTitle.AABBBounds.empty() ? 0 : this._subTitle.AABBBounds.height();
+          "middle" === subTitleVerticalAlign ? (this._subTitle.setAttribute("y", subTitleYStart + _subTitleHeight / 2), this._subTitle.setAttribute("textBaseline", "middle")) : "bottom" === subTitleVerticalAlign ? (this._subTitle.setAttribute("y", subTitleYStart + _subTitleHeight), this._subTitle.setAttribute("textBaseline", "bottom")) : (this._subTitle.setAttribute("y", subTitleYStart), this._subTitle.setAttribute("textBaseline", "top"));
         }
       }
     }]);
@@ -119103,7 +119662,7 @@
   });
   var application = new Application();
 
-  var parse$4 = function () {
+  var parse$3 = function () {
     var tokens = {
       linearGradient: /^(linear\-gradient)/i,
       radialGradient: /^(radial\-gradient)/i,
@@ -119265,7 +119824,7 @@
       key: "Parse",
       value: function Parse(c) {
         if (GradientParser.IsGradientStr(c)) try {
-          var datum = parse$4(c)[0];
+          var datum = parse$3(c)[0];
           if (datum) {
             if ("linear" === datum.type) return GradientParser.ParseLinear(datum);
             if ("radial" === datum.type) return GradientParser.ParseRadial(datum);
@@ -120507,7 +121066,7 @@
     });
   }
   var globalThemeObj = newThemeObj();
-  var Theme = /*#__PURE__*/function () {
+  var Theme$1 = /*#__PURE__*/function () {
     function Theme() {
       _classCallCheck(this, Theme);
       this.initTheme(), this.dirty = !1;
@@ -120585,7 +121144,7 @@
       }
     }]);
   }();
-  var globalTheme = new Theme();
+  var globalTheme = new Theme$1();
   function getTheme(graphic, theme) {
     return graphic.glyphHost ? getTheme(graphic.glyphHost) : theme ? (graphic.isContainer, theme) : getThemeFromGroup(graphic) || graphic.attachedThemeGraphic && getTheme(graphic.attachedThemeGraphic) || globalTheme.getTheme();
   }
@@ -124565,12 +125124,12 @@
     }, {
       key: "setTheme",
       value: function setTheme(t) {
-        return this.theme || (this.theme = new Theme()), this.theme.setTheme(t, this);
+        return this.theme || (this.theme = new Theme$1()), this.theme.setTheme(t, this);
       }
     }, {
       key: "createTheme",
       value: function createTheme() {
-        this.theme || (this.theme = new Theme());
+        this.theme || (this.theme = new Theme$1());
       }
     }, {
       key: "visibleAll",
@@ -124825,7 +125384,7 @@
         width: _this.viewWidth,
         height: _this.viewHeight,
         zIndex: null !== (_a = params.zIndex) && void 0 !== _a ? _a : 0
-      }), _this.layer = _assertThisInitialized(_this), _this.subLayers = new Map(), _this.theme = new Theme(), _this.background = "rgba(0, 0, 0, 0)", _this.afterDrawCbs = [];
+      }), _this.layer = _assertThisInitialized(_this), _this.subLayers = new Map(), _this.theme = new Theme$1(), _this.background = "rgba(0, 0, 0, 0)", _this.afterDrawCbs = [];
       return _this;
     }
     _inherits(Layer, _Group);
@@ -133736,7 +134295,7 @@
       }, _this.afterTickCb = function () {
         var _a;
         _this.tickedBeforeRender = !0, "performance" === (null === (_a = _this.params.optimize) || void 0 === _a ? void 0 : _a.tickRenderMode) || "rendering" !== _this.state && _this.render();
-      }, _this.params = params, _this.theme = new Theme(), _this.hooks = {
+      }, _this.params = params, _this.theme = new Theme$1(), _this.hooks = {
         beforeRender: new SyncHook(["stage"]),
         afterRender: new SyncHook(["stage"])
       }, _this.global = application.global, !_this.global.env && isBrowserEnv() && _this.global.setEnv("browser"), _this.window = container.get(VWindow), _this.renderService = container.get(RenderService), _this.pluginService = container.get(PluginService), _this.layerService = container.get(LayerService), _this.pluginService.active(_assertThisInitialized(_this), params), _this.window.create({
@@ -149065,14 +149624,14 @@
     fantasy: 1,
     monospace: 1
   };
-  var parse$2 = cssfontparser.exports = function (str, existing, dpi) {
+  var parse$1 = cssfontparser.exports = function (str, existing, dpi) {
     var cacheKey = str + '-' + (existing || 'null') + '@' + dpi;
     dpi = dpi || 96.0;
     if (typeof cache[cacheKey] !== 'undefined') {
       return cache[cacheKey];
     }
     if (existing) {
-      existing = parse$2(existing, null, dpi);
+      existing = parse$1(existing, null, dpi);
     }
     if (str === 'inherit') {
       return existing;
@@ -149157,10 +149716,10 @@
   };
   cssfontparser.exports.generics = generics;
   var cssfontparserExports = cssfontparser.exports;
-  var parse$3 = /*@__PURE__*/getDefaultExportFromCjs(cssfontparserExports);
+  var parse$2 = /*@__PURE__*/getDefaultExportFromCjs(cssfontparserExports);
 
   function parseFont(font) {
-    return parse$3(font);
+    return parse$2(font);
   }
 
   function getQuadProps(paddingOrigin) {
@@ -149335,7 +149894,7 @@
     for (; stack.length > 1;) stack.push(buildBinaryExpNode(stack));
     return stack[0];
   }
-  function parse$1(calcStr) {
+  function parse(calcStr) {
     return lex(tokenize(calcStr), calcStr);
   }
   function calcNode(node, context) {
@@ -149365,7 +149924,7 @@
     throw new Error("calc error.");
   }
   function toPxInternal(value, context) {
-    return calcNode(parse$1(value), context);
+    return calcNode(parse(value), context);
   }
   function toPx(value, context) {
     return "string" == typeof value ? toPxInternal(value.trim(), context) : value - 0;
@@ -149615,598 +150174,6 @@
     return !1;
   }
 
-  var lib$1 = {};
-
-  var gif = {};
-
-  var lib = {};
-
-  Object.defineProperty(lib, "__esModule", {
-    value: true
-  });
-  lib.loop = lib.conditional = lib.parse = void 0;
-  var parse = function parse(stream, schema) {
-    var result = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-    var parent = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : result;
-    if (Array.isArray(schema)) {
-      schema.forEach(function (partSchema) {
-        return parse(stream, partSchema, result, parent);
-      });
-    } else if (typeof schema === 'function') {
-      schema(stream, result, parent, parse);
-    } else {
-      var key = Object.keys(schema)[0];
-      if (Array.isArray(schema[key])) {
-        parent[key] = {};
-        parse(stream, schema[key], result, parent[key]);
-      } else {
-        parent[key] = schema[key](stream, result, parent, parse);
-      }
-    }
-    return result;
-  };
-  lib.parse = parse;
-  var conditional = function conditional(schema, conditionFunc) {
-    return function (stream, result, parent, parse) {
-      if (conditionFunc(stream, result, parent)) {
-        parse(stream, schema, result, parent);
-      }
-    };
-  };
-  lib.conditional = conditional;
-  var loop = function loop(schema, continueFunc) {
-    return function (stream, result, parent, parse) {
-      var arr = [];
-      var lastStreamPos = stream.pos;
-      while (continueFunc(stream, result, parent)) {
-        var newParent = {};
-        parse(stream, schema, result, newParent); // cases when whole file is parsed but no termination is there and stream position is not getting updated as well
-        // it falls into infinite recursion, null check to avoid the same
-
-        if (stream.pos === lastStreamPos) {
-          break;
-        }
-        lastStreamPos = stream.pos;
-        arr.push(newParent);
-      }
-      return arr;
-    };
-  };
-  lib.loop = loop;
-
-  var uint8 = {};
-
-  Object.defineProperty(uint8, "__esModule", {
-    value: true
-  });
-  uint8.readBits = uint8.readArray = uint8.readUnsigned = uint8.readString = uint8.peekBytes = uint8.readBytes = uint8.peekByte = uint8.readByte = uint8.buildStream = void 0;
-
-  // Default stream and parsers for Uint8TypedArray data type
-  var buildStream = function buildStream(uint8Data) {
-    return {
-      data: uint8Data,
-      pos: 0
-    };
-  };
-  uint8.buildStream = buildStream;
-  var readByte = function readByte() {
-    return function (stream) {
-      return stream.data[stream.pos++];
-    };
-  };
-  uint8.readByte = readByte;
-  var peekByte = function peekByte() {
-    var offset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-    return function (stream) {
-      return stream.data[stream.pos + offset];
-    };
-  };
-  uint8.peekByte = peekByte;
-  var readBytes = function readBytes(length) {
-    return function (stream) {
-      return stream.data.subarray(stream.pos, stream.pos += length);
-    };
-  };
-  uint8.readBytes = readBytes;
-  var peekBytes = function peekBytes(length) {
-    return function (stream) {
-      return stream.data.subarray(stream.pos, stream.pos + length);
-    };
-  };
-  uint8.peekBytes = peekBytes;
-  var readString = function readString(length) {
-    return function (stream) {
-      return Array.from(readBytes(length)(stream)).map(function (value) {
-        return String.fromCharCode(value);
-      }).join('');
-    };
-  };
-  uint8.readString = readString;
-  var readUnsigned = function readUnsigned(littleEndian) {
-    return function (stream) {
-      var bytes = readBytes(2)(stream);
-      return littleEndian ? (bytes[1] << 8) + bytes[0] : (bytes[0] << 8) + bytes[1];
-    };
-  };
-  uint8.readUnsigned = readUnsigned;
-  var readArray = function readArray(byteSize, totalOrFunc) {
-    return function (stream, result, parent) {
-      var total = typeof totalOrFunc === 'function' ? totalOrFunc(stream, result, parent) : totalOrFunc;
-      var parser = readBytes(byteSize);
-      var arr = new Array(total);
-      for (var i = 0; i < total; i++) {
-        arr[i] = parser(stream);
-      }
-      return arr;
-    };
-  };
-  uint8.readArray = readArray;
-  var subBitsTotal = function subBitsTotal(bits, startIndex, length) {
-    var result = 0;
-    for (var i = 0; i < length; i++) {
-      result += bits[startIndex + i] && Math.pow(2, length - i - 1);
-    }
-    return result;
-  };
-  var readBits = function readBits(schema) {
-    return function (stream) {
-      var _byte = readByte()(stream); // convert the byte to bit array
-
-      var bits = new Array(8);
-      for (var i = 0; i < 8; i++) {
-        bits[7 - i] = !!(_byte & 1 << i);
-      } // convert the bit array to values based on the schema
-
-      return Object.keys(schema).reduce(function (res, key) {
-        var def = schema[key];
-        if (def.length) {
-          res[key] = subBitsTotal(bits, def.index, def.length);
-        } else {
-          res[key] = bits[def.index];
-        }
-        return res;
-      }, {});
-    };
-  };
-  uint8.readBits = readBits;
-
-  (function (exports) {
-
-    Object.defineProperty(exports, "__esModule", {
-      value: true
-    });
-    exports["default"] = void 0;
-    var _ = lib;
-    var _uint = uint8;
-
-    // a set of 0x00 terminated subblocks
-    var subBlocksSchema = {
-      blocks: function blocks(stream) {
-        var terminator = 0x00;
-        var chunks = [];
-        var streamSize = stream.data.length;
-        var total = 0;
-        for (var size = (0, _uint.readByte)()(stream); size !== terminator; size = (0, _uint.readByte)()(stream)) {
-          // size becomes undefined for some case when file is corrupted and  terminator is not proper 
-          // null check to avoid recursion
-          if (!size) break; // catch corrupted files with no terminator
-
-          if (stream.pos + size >= streamSize) {
-            var availableSize = streamSize - stream.pos;
-            chunks.push((0, _uint.readBytes)(availableSize)(stream));
-            total += availableSize;
-            break;
-          }
-          chunks.push((0, _uint.readBytes)(size)(stream));
-          total += size;
-        }
-        var result = new Uint8Array(total);
-        var offset = 0;
-        for (var i = 0; i < chunks.length; i++) {
-          result.set(chunks[i], offset);
-          offset += chunks[i].length;
-        }
-        return result;
-      }
-    }; // global control extension
-
-    var gceSchema = (0, _.conditional)({
-      gce: [{
-        codes: (0, _uint.readBytes)(2)
-      }, {
-        byteSize: (0, _uint.readByte)()
-      }, {
-        extras: (0, _uint.readBits)({
-          future: {
-            index: 0,
-            length: 3
-          },
-          disposal: {
-            index: 3,
-            length: 3
-          },
-          userInput: {
-            index: 6
-          },
-          transparentColorGiven: {
-            index: 7
-          }
-        })
-      }, {
-        delay: (0, _uint.readUnsigned)(true)
-      }, {
-        transparentColorIndex: (0, _uint.readByte)()
-      }, {
-        terminator: (0, _uint.readByte)()
-      }]
-    }, function (stream) {
-      var codes = (0, _uint.peekBytes)(2)(stream);
-      return codes[0] === 0x21 && codes[1] === 0xf9;
-    }); // image pipeline block
-
-    var imageSchema = (0, _.conditional)({
-      image: [{
-        code: (0, _uint.readByte)()
-      }, {
-        descriptor: [{
-          left: (0, _uint.readUnsigned)(true)
-        }, {
-          top: (0, _uint.readUnsigned)(true)
-        }, {
-          width: (0, _uint.readUnsigned)(true)
-        }, {
-          height: (0, _uint.readUnsigned)(true)
-        }, {
-          lct: (0, _uint.readBits)({
-            exists: {
-              index: 0
-            },
-            interlaced: {
-              index: 1
-            },
-            sort: {
-              index: 2
-            },
-            future: {
-              index: 3,
-              length: 2
-            },
-            size: {
-              index: 5,
-              length: 3
-            }
-          })
-        }]
-      }, (0, _.conditional)({
-        lct: (0, _uint.readArray)(3, function (stream, result, parent) {
-          return Math.pow(2, parent.descriptor.lct.size + 1);
-        })
-      }, function (stream, result, parent) {
-        return parent.descriptor.lct.exists;
-      }), {
-        data: [{
-          minCodeSize: (0, _uint.readByte)()
-        }, subBlocksSchema]
-      }]
-    }, function (stream) {
-      return (0, _uint.peekByte)()(stream) === 0x2c;
-    }); // plain text block
-
-    var textSchema = (0, _.conditional)({
-      text: [{
-        codes: (0, _uint.readBytes)(2)
-      }, {
-        blockSize: (0, _uint.readByte)()
-      }, {
-        preData: function preData(stream, result, parent) {
-          return (0, _uint.readBytes)(parent.text.blockSize)(stream);
-        }
-      }, subBlocksSchema]
-    }, function (stream) {
-      var codes = (0, _uint.peekBytes)(2)(stream);
-      return codes[0] === 0x21 && codes[1] === 0x01;
-    }); // application block
-
-    var applicationSchema = (0, _.conditional)({
-      application: [{
-        codes: (0, _uint.readBytes)(2)
-      }, {
-        blockSize: (0, _uint.readByte)()
-      }, {
-        id: function id(stream, result, parent) {
-          return (0, _uint.readString)(parent.blockSize)(stream);
-        }
-      }, subBlocksSchema]
-    }, function (stream) {
-      var codes = (0, _uint.peekBytes)(2)(stream);
-      return codes[0] === 0x21 && codes[1] === 0xff;
-    }); // comment block
-
-    var commentSchema = (0, _.conditional)({
-      comment: [{
-        codes: (0, _uint.readBytes)(2)
-      }, subBlocksSchema]
-    }, function (stream) {
-      var codes = (0, _uint.peekBytes)(2)(stream);
-      return codes[0] === 0x21 && codes[1] === 0xfe;
-    });
-    var schema = [{
-      header: [{
-        signature: (0, _uint.readString)(3)
-      }, {
-        version: (0, _uint.readString)(3)
-      }]
-    }, {
-      lsd: [{
-        width: (0, _uint.readUnsigned)(true)
-      }, {
-        height: (0, _uint.readUnsigned)(true)
-      }, {
-        gct: (0, _uint.readBits)({
-          exists: {
-            index: 0
-          },
-          resolution: {
-            index: 1,
-            length: 3
-          },
-          sort: {
-            index: 4
-          },
-          size: {
-            index: 5,
-            length: 3
-          }
-        })
-      }, {
-        backgroundColorIndex: (0, _uint.readByte)()
-      }, {
-        pixelAspectRatio: (0, _uint.readByte)()
-      }]
-    }, (0, _.conditional)({
-      gct: (0, _uint.readArray)(3, function (stream, result) {
-        return Math.pow(2, result.lsd.gct.size + 1);
-      })
-    }, function (stream, result) {
-      return result.lsd.gct.exists;
-    }),
-    // content frames
-    {
-      frames: (0, _.loop)([gceSchema, applicationSchema, commentSchema, imageSchema, textSchema], function (stream) {
-        var nextCode = (0, _uint.peekByte)()(stream); // rather than check for a terminator, we should check for the existence
-        // of an ext or image block to avoid infinite loops
-        //var terminator = 0x3B;
-        //return nextCode !== terminator;
-
-        return nextCode === 0x21 || nextCode === 0x2c;
-      })
-    }];
-    var _default = schema;
-    exports["default"] = _default;
-  })(gif);
-
-  var deinterlace$1 = {};
-
-  Object.defineProperty(deinterlace$1, "__esModule", {
-    value: true
-  });
-  deinterlace$1.deinterlace = void 0;
-
-  /**
-   * Deinterlace function from https://github.com/shachaf/jsgif
-   */
-  var deinterlace = function deinterlace(pixels, width) {
-    var newPixels = new Array(pixels.length);
-    var rows = pixels.length / width;
-    var cpRow = function cpRow(toRow, fromRow) {
-      var fromPixels = pixels.slice(fromRow * width, (fromRow + 1) * width);
-      newPixels.splice.apply(newPixels, [toRow * width, width].concat(fromPixels));
-    }; // See appendix E.
-
-    var offsets = [0, 4, 2, 1];
-    var steps = [8, 8, 4, 2];
-    var fromRow = 0;
-    for (var pass = 0; pass < 4; pass++) {
-      for (var toRow = offsets[pass]; toRow < rows; toRow += steps[pass]) {
-        cpRow(toRow, fromRow);
-        fromRow++;
-      }
-    }
-    return newPixels;
-  };
-  deinterlace$1.deinterlace = deinterlace;
-
-  var lzw$1 = {};
-
-  Object.defineProperty(lzw$1, "__esModule", {
-    value: true
-  });
-  lzw$1.lzw = void 0;
-
-  /**
-   * javascript port of java LZW decompression
-   * Original java author url: https://gist.github.com/devunwired/4479231
-   */
-  var lzw = function lzw(minCodeSize, data, pixelCount) {
-    var MAX_STACK_SIZE = 4096;
-    var nullCode = -1;
-    var npix = pixelCount;
-    var available, clear, code_mask, code_size, end_of_information, in_code, old_code, bits, code, i, datum, data_size, first, top, bi, pi;
-    var dstPixels = new Array(pixelCount);
-    var prefix = new Array(MAX_STACK_SIZE);
-    var suffix = new Array(MAX_STACK_SIZE);
-    var pixelStack = new Array(MAX_STACK_SIZE + 1); // Initialize GIF data stream decoder.
-
-    data_size = minCodeSize;
-    clear = 1 << data_size;
-    end_of_information = clear + 1;
-    available = clear + 2;
-    old_code = nullCode;
-    code_size = data_size + 1;
-    code_mask = (1 << code_size) - 1;
-    for (code = 0; code < clear; code++) {
-      prefix[code] = 0;
-      suffix[code] = code;
-    } // Decode GIF pixel stream.
-
-    var datum, bits, first, top, pi, bi;
-    datum = bits = first = top = pi = bi = 0;
-    for (i = 0; i < npix;) {
-      if (top === 0) {
-        if (bits < code_size) {
-          // get the next byte
-          datum += data[bi] << bits;
-          bits += 8;
-          bi++;
-          continue;
-        } // Get the next code.
-
-        code = datum & code_mask;
-        datum >>= code_size;
-        bits -= code_size; // Interpret the code
-
-        if (code > available || code == end_of_information) {
-          break;
-        }
-        if (code == clear) {
-          // Reset decoder.
-          code_size = data_size + 1;
-          code_mask = (1 << code_size) - 1;
-          available = clear + 2;
-          old_code = nullCode;
-          continue;
-        }
-        if (old_code == nullCode) {
-          pixelStack[top++] = suffix[code];
-          old_code = code;
-          first = code;
-          continue;
-        }
-        in_code = code;
-        if (code == available) {
-          pixelStack[top++] = first;
-          code = old_code;
-        }
-        while (code > clear) {
-          pixelStack[top++] = suffix[code];
-          code = prefix[code];
-        }
-        first = suffix[code] & 0xff;
-        pixelStack[top++] = first; // add a new string to the table, but only if space is available
-        // if not, just continue with current table until a clear code is found
-        // (deferred clear code implementation as per GIF spec)
-
-        if (available < MAX_STACK_SIZE) {
-          prefix[available] = old_code;
-          suffix[available] = first;
-          available++;
-          if ((available & code_mask) === 0 && available < MAX_STACK_SIZE) {
-            code_size++;
-            code_mask += available;
-          }
-        }
-        old_code = in_code;
-      } // Pop a pixel off the pixel stack.
-
-      top--;
-      dstPixels[pi++] = pixelStack[top];
-      i++;
-    }
-    for (i = pi; i < npix; i++) {
-      dstPixels[i] = 0; // clear missing pixels
-    }
-    return dstPixels;
-  };
-  lzw$1.lzw = lzw;
-
-  Object.defineProperty(lib$1, "__esModule", {
-    value: true
-  });
-  var decompressFrames_1 = lib$1.decompressFrames = lib$1.decompressFrame = parseGIF_1 = lib$1.parseGIF = void 0;
-  var _gif = _interopRequireDefault(gif);
-  var _jsBinarySchemaParser = lib;
-  var _uint = uint8;
-  var _deinterlace = deinterlace$1;
-  var _lzw = lzw$1;
-  function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-      "default": obj
-    };
-  }
-  var parseGIF = function parseGIF(arrayBuffer) {
-    var byteData = new Uint8Array(arrayBuffer);
-    return (0, _jsBinarySchemaParser.parse)((0, _uint.buildStream)(byteData), _gif["default"]);
-  };
-  var parseGIF_1 = lib$1.parseGIF = parseGIF;
-  var generatePatch = function generatePatch(image) {
-    var totalPixels = image.pixels.length;
-    var patchData = new Uint8ClampedArray(totalPixels * 4);
-    for (var i = 0; i < totalPixels; i++) {
-      var pos = i * 4;
-      var colorIndex = image.pixels[i];
-      var color = image.colorTable[colorIndex] || [0, 0, 0];
-      patchData[pos] = color[0];
-      patchData[pos + 1] = color[1];
-      patchData[pos + 2] = color[2];
-      patchData[pos + 3] = colorIndex !== image.transparentIndex ? 255 : 0;
-    }
-    return patchData;
-  };
-  var decompressFrame = function decompressFrame(frame, gct, buildImagePatch) {
-    if (!frame.image) {
-      console.warn('gif frame does not have associated image.');
-      return;
-    }
-    var image = frame.image; // get the number of pixels
-
-    var totalPixels = image.descriptor.width * image.descriptor.height; // do lzw decompression
-
-    var pixels = (0, _lzw.lzw)(image.data.minCodeSize, image.data.blocks, totalPixels); // deal with interlacing if necessary
-
-    if (image.descriptor.lct.interlaced) {
-      pixels = (0, _deinterlace.deinterlace)(pixels, image.descriptor.width);
-    }
-    var resultImage = {
-      pixels: pixels,
-      dims: {
-        top: frame.image.descriptor.top,
-        left: frame.image.descriptor.left,
-        width: frame.image.descriptor.width,
-        height: frame.image.descriptor.height
-      }
-    }; // color table
-
-    if (image.descriptor.lct && image.descriptor.lct.exists) {
-      resultImage.colorTable = image.lct;
-    } else {
-      resultImage.colorTable = gct;
-    } // add per frame relevant gce information
-
-    if (frame.gce) {
-      resultImage.delay = (frame.gce.delay || 10) * 10; // convert to ms
-
-      resultImage.disposalType = frame.gce.extras.disposal; // transparency
-
-      if (frame.gce.extras.transparentColorGiven) {
-        resultImage.transparentIndex = frame.gce.transparentColorIndex;
-      }
-    } // create canvas usable imagedata if desired
-
-    if (buildImagePatch) {
-      resultImage.patch = generatePatch(resultImage);
-    }
-    return resultImage;
-  };
-  lib$1.decompressFrame = decompressFrame;
-  var decompressFrames = function decompressFrames(parsedGif, buildImagePatches) {
-    return parsedGif.frames.filter(function (f) {
-      return f.image;
-    }).map(function (f) {
-      return decompressFrame(f, parsedGif.gct, buildImagePatches);
-    });
-  };
-  decompressFrames_1 = lib$1.decompressFrames = decompressFrames;
-
   var Icon$1 = /*#__PURE__*/function (_Image) {
     function Icon(params) {
       var _this;
@@ -193069,6 +193036,7 @@
     registerLabelItemVisibilityAction();
   }
 
+  var SHAPE_SELECT_COLOR$1 = "#3073F2";
   var PickEventType = {
     pointerup: !0,
     click: !0,
@@ -193199,11 +193167,66 @@
     }]);
   }(EventEmitter);
 
+  var SHAPE_HOVER_COLOR = "#3073F2";
+  var SHAPE_SELECT_COLOR = "#3073F2";
+  var DRAG_ANCHOR_COLOR = "#fea53e";
+  var MinSize = 20;
+
+  var Theme = /*#__PURE__*/function () {
+    function Theme() {
+      _classCallCheck(this, Theme);
+      this.layoutTransformerControl = {
+        resizeBorder: {
+          stroke: SHAPE_SELECT_COLOR$1,
+          lineWidth: 1
+        },
+        cornerRect: {
+          fill: "white",
+          stroke: SHAPE_SELECT_COLOR$1,
+          lineWidth: 1,
+          width: 8,
+          height: 8,
+          cornerRadius: 2
+        },
+        rotateCircle: {
+          fill: "white",
+          stroke: SHAPE_SELECT_COLOR$1,
+          radius: 10
+        },
+        rotatePath: {
+          fill: "#000000",
+          size: 10,
+          angle: Math.PI,
+          symbolType: "M95.403.22c0 46.312-33.237 85.002-77.109 93.484v25.663l-69.76-40 69.76-40v23.494C45.47 54.991 65.403 29.897 65.403.219c0-35.962-29.258-65.22-65.22-65.22s-65.22 29.258-65.22 65.22c0 9.686 2.068 19.001 6.148 27.688l-27.154 12.754C-92.011 27.954-95.037 14.348-95.037.22-95.036-52.284-52.32-95 .184-95S95.403-52.284 95.403.22z"
+        },
+        handlerLine: {
+          stroke: SHAPE_SELECT_COLOR$1,
+          lineWidth: 1,
+          size: 24
+        },
+        shapeCircle: {
+          fill: "white",
+          lineWidth: 1,
+          radius: 4,
+          stroke: DRAG_ANCHOR_COLOR,
+          startAngle: 0,
+          endAngle: 2 * Math.PI
+        }
+      };
+    }
+    return _createClass(Theme, [{
+      key: "setLayoutTransformerControlTheme",
+      value: function setLayoutTransformerControlTheme(theme) {
+        merge$1(this.layoutTransformerControl, theme);
+      }
+    }]);
+  }();
+
   var Edit = /*#__PURE__*/function (_EventEmitter) {
     function Edit(story) {
       var _this;
       _classCallCheck(this, Edit);
-      _this = _callSuper(this, Edit), _this.story = story, _this._selectionMap = {}, _this._editGlobalState = {
+      _this = _callSuper(this, Edit), _this.story = story, _this.theme = new Theme(), _this._selectionMap = {}, _this._editGlobalState = {
         seriesMarkMode: SeriesMarkMode.all
       }, _this.onStoryEvent = function (event, type) {
         var _a;
@@ -193349,11 +193372,6 @@
   }(EventEmitter);
   Edit.selectionConstructorMap = {};
 
-  var SHAPE_HOVER_COLOR = "#3073F2";
-  var SHAPE_SELECT_COLOR = "#3073F2";
-  var DRAG_ANCHOR_COLOR = "#fea53e";
-  var MinSize = 20;
-
   var DragComponent = /*#__PURE__*/function () {
     function DragComponent(stage) {
       var _this = this;
@@ -193473,7 +193491,7 @@
       var _a, _b;
       _this = _callSuper(this, TransformController, [merge$1({
         shadowRootIdx: 1
-      }, TransformController.defaultAttributes, attributes)]), _this.type = "transformController", _this.name = "transformController", _this.isDragging = !1, _this.dragStartAngle = 0, _this._snapThreshold = 6, _this._actualSnapBounds = null, _this.minSize = {
+      }, TransformController.defaultAttributes, editSelection.edit.theme.layoutTransformerControl, attributes)]), _this.type = "transformController", _this.name = "transformController", _this.isDragging = !1, _this.dragStartAngle = 0, _this._snapThreshold = 6, _this._actualSnapBounds = null, _this.minSize = {
         width: MinSize,
         height: MinSize
       }, _this.proportionalScaling = !1, _this._setCursor = null, _this._dragElement = function (moveX, moveY) {
@@ -193812,14 +193830,19 @@
           cornerRect = _this$attribute.cornerRect,
           rotateCircle = _this$attribute.rotateCircle,
           rotatePath = _this$attribute.rotatePath,
-          handlerLine = _this$attribute.handlerLine,
+          _handlerLine = _this$attribute.handlerLine,
           shapeCircle = _this$attribute.shapeCircle,
           _this$attribute$enabl = _this$attribute.enabledAnchors,
           enabledAnchors = _this$attribute$enabl === void 0 ? ["top", "bottom", "left-top", "left-bottom", "right", "left", "right-top", "right-bottom"] : _this$attribute$enabl,
           _this$attribute$shape = _this$attribute.shapePoints,
           shapePoints = _this$attribute$shape === void 0 ? [] : _this$attribute$shape,
-          isShapePointAbsolute = _this$attribute.isShapePointAbsolute,
-          root = this.editBorder.shadowRoot;
+          isShapePointAbsolute = _this$attribute.isShapePointAbsolute;
+        var scaleX = 1,
+          scaleY = 1;
+        this.layer && (scaleX = this.layer.attribute.scaleX ? 1 / this.layer.attribute.scaleX : scaleX, scaleY = this.layer.attribute.scaleY ? 1 / this.layer.attribute.scaleY : scaleY);
+        var handlerLine = cloneDeep(_handlerLine);
+        handlerLine.size *= (scaleX + scaleY) / 2;
+        var root = this.editBorder.shadowRoot;
         if (!root || 1 === this.count) return;
         var parsedPadding = normalizePadding$1(padding),
           _this$rect$attribute2 = this.rect.attribute,
@@ -193864,27 +193887,30 @@
             x: 0,
             y: -handlerLine.size
           }]
-        }, handlerLine), "line"), root.createOrUpdateChild("rotate-all", Object.assign({
+        }, handlerLine), "line"), root.createOrUpdateChild("rotate-all", Object.assign(Object.assign({
           x: minX + width / 2,
           y: minY - handlerLine.size - rotateCircle.radius,
           cursor: "grab"
-        }, rotateCircle), "circle"), root.createOrUpdateChild("path-rotate", Object.assign({
+        }, rotateCircle), {
+          radius: rotateCircle.radius * (scaleX + scaleY) / 2
+        }), "circle"), root.createOrUpdateChild("path-rotate", Object.assign(Object.assign({
           pickable: !1,
-          x: minX + width / 2 + rotatePath.size / 2,
-          y: minY - handlerLine.size + rotatePath.size / 2 - rotateCircle.radius,
-          scaleX: rotatePath.size / 200,
-          scaleY: rotatePath.size / 200,
-          cursor: "grab",
-          dx: .5,
-          dy: -.5
-        }, rotatePath), "path")), this._editorConfig.resize && enabledAnchors.forEach(function (anchor) {
+          x: minX + width / 2,
+          y: minY - handlerLine.size - rotateCircle.radius,
+          cursor: "grab"
+        }, rotatePath), {
+          size: rotatePath.size * (scaleX + scaleY) / 2
+        }), "symbol")), this._editorConfig.resize && enabledAnchors.forEach(function (anchor) {
           if (!cornerAnchors.includes(anchor)) return;
           var item = anchorPositionMap[anchor],
             cursor = anchorCursorMap[anchor];
           root.createOrUpdateChild("scale-".concat(anchor), Object.assign({
             x: minX + item[0] * width - cornerRect.width / 2,
             y: minY + item[1] * height - cornerRect.height / 2,
-            cursor: cursor
+            cursor: cursor,
+            scaleX: scaleX,
+            scaleY: scaleY,
+            scaleCenter: ["50%", "50%"]
           }, cornerRect), "rect");
         }), this._editorConfig.reshape) {
           var shapePointsChildren = root.children.filter(function (child) {
@@ -194155,7 +194181,7 @@
       fill: "#000000",
       size: 12,
       angle: Math.PI,
-      path: "M202.403,95.22c0,46.312-33.237,85.002-77.109,93.484v25.663l-69.76-40l69.76-40v23.494 c27.176-7.87,47.109-32.964,47.109-62.642c0-35.962-29.258-65.22-65.22-65.22s-65.22,29.258-65.22,65.22 c0,9.686,2.068,19.001,6.148,27.688l-27.154,12.754c-5.968-12.707-8.994-26.313-8.994-40.441C11.964,42.716,54.68,0,107.184,0 S202.403,42.716,202.403,95.22z"
+      symbolType: "M95.403.22c0 46.312-33.237 85.002-77.109 93.484v25.663l-69.76-40 69.76-40v23.494C45.47 54.991 65.403 29.897 65.403.219c0-35.962-29.258-65.22-65.22-65.22s-65.22 29.258-65.22 65.22c0 9.686 2.068 19.001 6.148 27.688l-27.154 12.754C-92.011 27.954-95.037 14.348-95.037.22-95.036-52.284-52.32-95 .184-95S95.403-52.284 95.403.22z"
     },
     handlerLine: {
       stroke: SHAPE_SELECT_COLOR,
@@ -194255,7 +194281,7 @@
     }, {
       key: "startEdit",
       value: function startEdit(actionInfo) {
-        var emitEvent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
+        var emitEvent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
         this.isEditing || (this.isEditing = !0, this._actionInfo = actionInfo, actionInfo && actionInfo.character && (this._activeCharacter = actionInfo.character), this.activeLayoutController(), emitEvent && this.edit.emitStartEdit({
           type: this.type,
           actionInfo: actionInfo,