@visactor/vrender-components 0.21.0-alpha.11 → 0.21.0-alpha.13

package/dist/index.es.js

@@ -592,6 +592,12 @@ let DefaultGlobal = class {
   get env() {
     return this._env;
   }
+  get isImageAnonymous() {
+    return this._isImageAnonymous;
+  }
+  set isImageAnonymous(isImageAnonymous) {
+    this._isImageAnonymous = isImageAnonymous;
+  }
   get devicePixelRatio() {
     return this._env || this.setEnv("browser"), this.envContribution.getDevicePixelRatio();
   }
@@ -626,7 +632,7 @@ let DefaultGlobal = class {
     this._env || this.setEnv("browser"), this.envContribution.applyStyles = support;
   }
   constructor(contributions) {
-    this.contributions = contributions, this.id = Generator.GenAutoIncrementId(), this.hooks = {
+    this.contributions = contributions, this._isImageAnonymous = !0, this.id = Generator.GenAutoIncrementId(), this.hooks = {
       onSetEnv: new SyncHook(["lastEnv", "env", "global"])
     }, this.measureTextMethod = "native", this.optimizeVisible = !1;
   }
@@ -745,11 +751,6 @@ let DefaultGlobal = class {
 };
 DefaultGlobal = __decorate$P([injectable(), __param$z(0, inject(ContributionProvider)), __param$z(0, named(EnvContribution)), __metadata$E("design:paramtypes", [Object])], DefaultGlobal);
 
-var MeasureModeEnum;
-!function (MeasureModeEnum) {
-  MeasureModeEnum[MeasureModeEnum.estimate = 0] = "estimate", MeasureModeEnum[MeasureModeEnum.actualBounding = 1] = "actualBounding", MeasureModeEnum[MeasureModeEnum.fontBounding = 2] = "fontBounding";
-}(MeasureModeEnum || (MeasureModeEnum = {}));
-
 const circleThreshold = tau - 1e-8;
 class BoundsContext {
   constructor(bounds) {
@@ -2014,7 +2015,6 @@ const DefaultStrokeStyle = Object.assign({
 const DefaultTextStyle = {
   text: "",
   maxLineWidth: 1 / 0,
-  maxWidth: 1 / 0,
   textAlign: "left",
   textBaseline: "alphabetic",
   fontSize: 16,
@@ -2038,9 +2038,7 @@ const DefaultTextStyle = {
   suffixPosition: "end",
   underlineDash: [],
   underlineOffset: 0,
-  disableAutoClipedPoptip: void 0,
-  measureMode: MeasureModeEnum.fontBounding,
-  keepCenterInLine: !1
+  disableAutoClipedPoptip: void 0
 };
 const DefaultPickStyle = {
   pickStrokeBuffer: 0
@@ -2094,8 +2092,7 @@ const DefaultAttribute = Object.assign(Object.assign(Object.assign({
   globalZIndex: 1,
   globalCompositeOperation: "",
   overflow: "hidden",
-  shadowPickMode: "graphic",
-  keepStrokeScale: !1
+  shadowPickMode: "graphic"
 }, DefaultDebugAttribute), DefaultStyle), DefaultTransform);
 const DefaultArcAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
   startAngle: 0,
@@ -2362,32 +2359,10 @@ let ATextMeasure = class {
   configure(service, env) {
     this.canvas = service.canvas, this.context = service.context, service.bindTextMeasure(this);
   }
-  _measureTextWithoutAlignBaseline(text, options, compatible) {
+  measureTextWidth(text, options) {
+    if (!this.context) return this.estimate(text, options).width;
     this.context.setTextStyleWithoutAlignBaseline(options);
-    const metrics = this.context.measureText(text);
-    return compatible ? this.compatibleMetrics(metrics, options) : metrics;
-  }
-  _measureTextWithAlignBaseline(text, options, compatible) {
-    this.context.setTextStyle(options);
-    const metrics = this.context.measureText(text);
-    return compatible ? this.compatibleMetrics(metrics, options) : metrics;
-  }
-  compatibleMetrics(metrics, options) {
-    if (null == metrics.actualBoundingBoxAscent || null == metrics.actualBoundingBoxDescent || null == metrics.fontBoundingBoxAscent || null == metrics.fontBoundingBoxDescent) {
-      const {
-        ascent: ascent,
-        descent: descent
-      } = this.measureTextBoundADscentEstimate(options);
-      metrics.actualBoundingBoxAscent = ascent, metrics.actualBoundingBoxDescent = descent, metrics.fontBoundingBoxAscent = ascent, metrics.fontBoundingBoxDescent = descent;
-    }
-    if (null == metrics.actualBoundingBoxLeft || null == metrics.actualBoundingBoxRight) {
-      const {
-        left: left,
-        right: right
-      } = this.measureTextBoundLeftRightEstimate(options);
-      metrics.actualBoundingBoxLeft = left, metrics.actualBoundingBoxRight = right;
-    }
-    return metrics;
+    return this.context.measureText(text).width;
   }
   estimate(text, _ref) {
     let {
@@ -2401,97 +2376,19 @@ let ATextMeasure = class {
       height: fontSize
     };
   }
-  measureTextWidth(text, options, textMeasure) {
-    return this.context ? (textMeasure = null != textMeasure ? textMeasure : this._measureTextWithoutAlignBaseline(text, options)).width : this.estimate(text, options).width;
-  }
-  measureTextBoundsWidth(text, options, textMeasure) {
-    return this.context ? (textMeasure = null != textMeasure ? textMeasure : this._measureTextWithoutAlignBaseline(text, options)).width : this.estimate(text, options).width;
-  }
-  measureTextBoundsLeftRight(text, options, textMeasure) {
-    return this.context ? {
-      left: (textMeasure = null != textMeasure ? textMeasure : this._measureTextWithAlignBaseline(text, options, !0)).actualBoundingBoxLeft,
-      right: textMeasure.actualBoundingBoxRight
-    } : this.measureTextBoundLeftRightEstimate(options);
-  }
-  measureTextPixelHeight(text, options, textMeasure) {
+  measureTextPixelHeight(text, options) {
     var _a;
-    return this.context ? (textMeasure = null != textMeasure ? textMeasure : this._measureTextWithoutAlignBaseline(text, options, !0), Math.abs(textMeasure.actualBoundingBoxAscent - textMeasure.actualBoundingBoxDescent)) : null !== (_a = options.fontSize) && void 0 !== _a ? _a : DefaultTextStyle.fontSize;
-  }
-  measureTextPixelADscent(text, options, textMeasure) {
-    return this.context ? {
-      ascent: (textMeasure = null != textMeasure ? textMeasure : this._measureTextWithAlignBaseline(text, options, !0)).actualBoundingBoxAscent,
-      descent: textMeasure.actualBoundingBoxDescent
-    } : this.measureTextBoundADscentEstimate(options);
-  }
-  measureTextBoundHieght(text, options, textMeasure) {
-    var _a;
-    return this.context ? (textMeasure = null != textMeasure ? textMeasure : this._measureTextWithoutAlignBaseline(text, options, !0), Math.abs(textMeasure.fontBoundingBoxAscent - textMeasure.fontBoundingBoxDescent)) : null !== (_a = options.fontSize) && void 0 !== _a ? _a : DefaultTextStyle.fontSize;
-  }
-  measureTextBoundADscent(text, options, textMeasure) {
-    return this.context ? {
-      ascent: (textMeasure = null != textMeasure ? textMeasure : this._measureTextWithAlignBaseline(text, options, !0)).fontBoundingBoxAscent,
-      descent: textMeasure.fontBoundingBoxDescent
-    } : this.measureTextBoundADscentEstimate(options);
-  }
-  measureTextBoundADscentEstimate(options) {
-    var _a;
-    const fontSize = null !== (_a = options.fontSize) && void 0 !== _a ? _a : DefaultTextStyle.fontSize;
-    return {
-      ascent: .79 * fontSize,
-      descent: .21 * fontSize
-    };
+    if (!this.context) return null !== (_a = options.fontSize) && void 0 !== _a ? _a : DefaultTextStyle.fontSize;
+    this.context.setTextStyleWithoutAlignBaseline(options);
+    const textMeasure = this.context.measureText(text);
+    return Math.abs(textMeasure.actualBoundingBoxAscent - textMeasure.actualBoundingBoxDescent);
   }
-  measureTextBoundLeftRightEstimate(options) {
+  measureTextBoundHieght(text, options) {
     var _a;
-    const fontSize = null !== (_a = options.fontSize) && void 0 !== _a ? _a : DefaultTextStyle.fontSize,
-      {
-        textAlign: textAlign
-      } = options;
-    return "center" === textAlign ? {
-      left: fontSize / 2,
-      right: fontSize / 2
-    } : "right" === textAlign || "end" === textAlign ? {
-      left: fontSize,
-      right: 0
-    } : {
-      left: 0,
-      right: fontSize
-    };
-  }
-  measureTextPixelADscentAndWidth(text, options, mode) {
-    if (!this.context) return Object.assign(Object.assign({}, this.measureTextBoundADscentEstimate(options)), {
-      width: this.estimate(text, options).width
-    });
-    const out = this._measureTextWithoutAlignBaseline(text, options, !0);
-    if (mode === MeasureModeEnum.actualBounding) return {
-      ascent: out.actualBoundingBoxAscent,
-      descent: out.actualBoundingBoxDescent,
-      width: out.width
-    };
-    if (mode === MeasureModeEnum.estimate) return Object.assign(Object.assign({}, this.measureTextBoundADscentEstimate(options)), {
-      width: out.width
-    });
-    if (mode === MeasureModeEnum.fontBounding) {
-      let ascent = out.fontBoundingBoxAscent,
-        descent = out.fontBoundingBoxDescent;
-      if (out.actualBoundingBoxDescent && descent < out.actualBoundingBoxDescent) {
-        const delta = out.actualBoundingBoxDescent - descent;
-        descent += delta, ascent -= delta;
-      } else if (out.actualBoundingBoxAscent && ascent < out.actualBoundingBoxAscent) {
-        const delta = out.actualBoundingBoxAscent - ascent;
-        ascent += delta, descent -= delta;
-      }
-      return {
-        ascent: ascent,
-        descent: descent,
-        width: out.width
-      };
-    }
-    return {
-      ascent: out.actualBoundingBoxAscent,
-      descent: out.actualBoundingBoxDescent,
-      width: out.width
-    };
+    if (!this.context) return null !== (_a = options.fontSize) && void 0 !== _a ? _a : DefaultTextStyle.fontSize;
+    this.context.setTextStyleWithoutAlignBaseline(options);
+    const textMeasure = this.context.measureText(text);
+    return Math.abs(textMeasure.fontBoundingBoxAscent - textMeasure.fontBoundingBoxDescent);
   }
   measureText(text, options) {
     return this.context ? (this.context.setTextStyleWithoutAlignBaseline(options), this.context.measureText(text)) : this.estimate(text, options);
@@ -4481,7 +4378,7 @@ class ResourceLoader {
   }
   static GetFile(url, type) {
     let data = ResourceLoader.cache.get(url);
-    return data ? "init" === data.loadState || "fail" === data.loadState ? Promise.reject() : "loading" === data.loadState ? data.dataPromise.then(data => data.data) : Promise.resolve(data.data) : (data = {
+    return data ? "fail" === data.loadState ? Promise.reject() : "init" === data.loadState || "loading" === data.loadState ? data.dataPromise.then(data => data.data) : Promise.resolve(data.data) : (data = {
       type: type,
       loadState: "init"
     }, ResourceLoader.cache.set(url, data), "arrayBuffer" === type ? data.dataPromise = application.global.loadArrayBuffer(url) : "blob" === type ? data.dataPromise = application.global.loadBlob(url) : "json" === type && (data.dataPromise = application.global.loadJson(url)), data.dataPromise.then(data => data.data));
@@ -6145,6 +6042,9 @@ const SymbolRenderContribution = Symbol.for("SymbolRenderContribution");
 const TextRenderContribution = Symbol.for("TextRenderContribution");
 const InteractiveSubRenderContribution = Symbol.for("InteractiveSubRenderContribution");
 
+function textDrawOffsetY(baseline, h) {
+  return "top" === baseline ? Math.ceil(.79 * h) : "middle" === baseline ? Math.round(.3 * h) : "bottom" === baseline ? Math.round(-.21 * h) : 0;
+}
 function textDrawOffsetX(textAlign, width) {
   return "end" === textAlign || "right" === textAlign ? -width : "center" === textAlign ? -width / 2 : 0;
 }
@@ -6623,7 +6523,7 @@ class BaseRender {
   }
 }
 
-const parse = function () {
+const parse$1 = function () {
   const tokens = {
     linearGradient: /^(linear\-gradient)/i,
     radialGradient: /^(radial\-gradient)/i,
@@ -6776,7 +6676,7 @@ class GradientParser {
   }
   static Parse(c) {
     if (GradientParser.IsGradientStr(c)) try {
-      const datum = parse(c)[0];
+      const datum = parse$1(c)[0];
       if (datum) {
         if ("linear" === datum.type) return GradientParser.ParseLinear(datum);
         if ("radial" === datum.type) return GradientParser.ParseRadial(datum);
@@ -7133,8 +7033,7 @@ class DefaultArcRenderContribution {
       x: originX = arcAttribute.x,
       y: originY = arcAttribute.y,
       scaleX = arcAttribute.scaleX,
-      scaleY = arcAttribute.scaleY,
-      keepStrokeScale = arcAttribute.keepStrokeScale
+      scaleY = arcAttribute.scaleY
     } = arc.attribute;
     let {
       innerRadius = arcAttribute.innerRadius,
@@ -7146,7 +7045,7 @@ class DefaultArcRenderContribution {
         {
           distance = arcAttribute[key].distance
         } = borderStyle,
-        d = keepStrokeScale ? distance : getScaledStroke(context, distance, context.dpr),
+        d = getScaledStroke(context, distance, context.dpr),
         deltaAngle = distance / outerRadius,
         sign = "outerBorder" === key ? 1 : -1;
       if (arc.setAttributes({
@@ -7191,15 +7090,14 @@ class DefaultCircleRenderContribution {
         x: originX = circleAttribute.x,
         y: originY = circleAttribute.y,
         scaleX = circleAttribute.scaleX,
-        scaleY = circleAttribute.scaleY,
-        keepStrokeScale = circleAttribute.keepStrokeScale
+        scaleY = circleAttribute.scaleY
       } = circle.attribute,
       renderBorder = (borderStyle, key) => {
         const doStroke = !(!borderStyle || !borderStyle.stroke),
           {
             distance = circleAttribute[key].distance
           } = borderStyle,
-          d = keepStrokeScale ? distance : getScaledStroke(context, distance, context.dpr),
+          d = getScaledStroke(context, distance, context.dpr),
           sign = "outerBorder" === key ? 1 : -1;
         if (context.beginPath(), context.arc(x, y, radius + sign * d, startAngle, endAngle), context.closePath(), context.setShadowBlendStyle && context.setShadowBlendStyle(circle, circle.attribute, circleAttribute), strokeCb) strokeCb(context, borderStyle, circleAttribute[key]);else if (doStroke) {
           const lastOpacity = circleAttribute[key].opacity;
@@ -7318,8 +7216,7 @@ class DefaultRectRenderContribution {
       scaleX = rectAttribute.scaleX,
       scaleY = rectAttribute.scaleY,
       x1: x1,
-      y1: y1,
-      keepStrokeScale = rectAttribute.keepStrokeScale
+      y1: y1
     } = rect.attribute;
     let {
       width: width,
@@ -7332,7 +7229,7 @@ class DefaultRectRenderContribution {
         {
           distance = rectAttribute[key].distance
         } = borderStyle,
-        d = keepStrokeScale ? distance : getScaledStroke(context, distance, context.dpr),
+        d = getScaledStroke(context, distance, context.dpr),
         nextX = x + sign * d,
         nextY = y + sign * d,
         dw = 2 * d;
@@ -7462,8 +7359,9 @@ class DefaultImageRenderContribution extends DefaultRectRenderContribution {
   constructor() {
     super(...arguments), this.time = BaseRenderContributionTime.afterFillStroke, this.useStyle = !0, this.order = 0;
   }
-  drawShape(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb) {
-    return super.drawShape(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb);
+  drawShape(image, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb) {
+    if (!(image.isGifImage && image.renderFrame && image.playing)) return super.drawShape(image, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb);
+    image.renderFrame(context, x, y);
   }
 }
 const defaultImageRenderContribution = new DefaultImageRenderContribution();
@@ -7489,15 +7387,14 @@ class DefaultSymbolRenderContribution {
         x: originX = symbolAttribute.x,
         y: originY = symbolAttribute.y,
         scaleX = symbolAttribute.scaleX,
-        scaleY = symbolAttribute.scaleY,
-        keepStrokeScale = symbolAttribute.keepStrokeScale
+        scaleY = symbolAttribute.scaleY
       } = symbol.attribute,
       renderBorder = (borderStyle, key) => {
         const doStroke = !(!borderStyle || !borderStyle.stroke),
           {
             distance = symbolAttribute[key].distance
           } = borderStyle,
-          d = keepStrokeScale ? distance : getScaledStroke(context, distance, context.dpr),
+          d = getScaledStroke(context, distance, context.dpr),
           sign = "outerBorder" === key ? 1 : -1;
         if (context.beginPath(), !1 === parsedPath.drawOffset(context, size, x, y, sign * d) && context.closePath(), context.setShadowBlendStyle && context.setShadowBlendStyle(symbol, symbol.attribute, symbolAttribute), strokeCb) strokeCb(context, borderStyle, symbolAttribute[key]);else if (doStroke) {
           const lastOpacity = symbolAttribute[key].opacity;
@@ -8773,8 +8670,16 @@ let DefaultCanvasTextRender = class extends BaseRender {
         verticalMode = textAttribute.verticalMode,
         x: originX = textAttribute.x,
         y: originY = textAttribute.y
-      } = text.attribute,
-      lineHeight = null !== (_a = calculateLineHeight(text.attribute.lineHeight, fontSize)) && void 0 !== _a ? _a : fontSize,
+      } = text.attribute;
+    let {
+      textAlign = textAttribute.textAlign,
+      textBaseline = textAttribute.textBaseline
+    } = text.attribute;
+    if (!verticalMode && "vertical" === direction) {
+      const t = textAlign;
+      textAlign = null !== (_a = text.getBaselineMapAlign()[textBaseline]) && void 0 !== _a ? _a : "left", textBaseline = null !== (_b = text.getAlignMapBaseline()[t]) && void 0 !== _b ? _b : "top";
+    }
+    const lineHeight = null !== (_c = calculateLineHeight(text.attribute.lineHeight, fontSize)) && void 0 !== _c ? _c : fontSize,
       data = this.valid(text, textAttribute, fillCb, strokeCb);
     if (!data) return;
     const {
@@ -8794,60 +8699,79 @@ let DefaultCanvasTextRender = class extends BaseRender {
         const matrix = matrixAllocate.allocate(1, 0, 0, 1, 0, 0);
         matrix.rotateByCenter(Math.PI / 2, _x, _y), context.transformFromMatrix(matrix, !0), matrixAllocate.free(matrix);
       }
-      doStroke && (strokeCb ? strokeCb(context, text.attribute, textAttribute) : sVisible && (context.setStrokeStyle(text, text.attribute, originX - x, originY - y, textAttribute), context.strokeText(t, _x, _y, z))), doFill && (fillCb ? fillCb(context, text.attribute, textAttribute) : fVisible && (context.setCommonStyle(text, text.attribute, originX - x, originY - y, textAttribute), context.fillText(t, _x, _y, z))), direction && (context.highPerformanceRestore(), context.setTransformForCurrent());
+      doStroke && (strokeCb ? strokeCb(context, text.attribute, textAttribute) : sVisible && (context.setStrokeStyle(text, text.attribute, originX - x, originY - y, textAttribute), context.strokeText(t, _x, _y, z))), doFill && (fillCb ? fillCb(context, text.attribute, textAttribute) : fVisible && (context.setCommonStyle(text, text.attribute, originX - x, originY - y, textAttribute), context.fillText(t, _x, _y, z), this.drawUnderLine(underline, lineThrough, text, _x, _y, z, textAttribute, context))), direction && (context.highPerformanceRestore(), context.setTransformForCurrent());
     };
-    if (context.setTextStyleWithoutAlignBaseline(text.attribute, textAttribute, z), "horizontal" === direction) {
-      const {
-        multilineLayout: multilineLayout
-      } = text;
-      if (!multilineLayout) return void context.highPerformanceRestore();
-      const {
-        xOffset: xOffset,
-        yOffset: yOffset
-      } = multilineLayout.bbox;
-      doStroke && (strokeCb ? strokeCb(context, text.attribute, textAttribute) : sVisible && (context.setStrokeStyle(text, text.attribute, originX - x, originY - y, textAttribute), multilineLayout.lines.forEach(line => {
-        context.strokeText(line.str, (line.leftOffset || 0) + xOffset + x, (line.topOffset || 0) + yOffset + y, z);
-      }))), doFill && (fillCb ? fillCb(context, text.attribute, textAttribute) : fVisible && (context.setCommonStyle(text, text.attribute, originX - x, originY - y, textAttribute), multilineLayout.lines.forEach(line => {
-        context.fillText(line.str, (line.leftOffset || 0) + xOffset + x, (line.topOffset || 0) + yOffset + y, z), this.drawUnderLine(underline, lineThrough, text, (line.leftOffset || 0) + xOffset + x, (line.topOffset || 0) + yOffset + y, line.descent, (line.descent - line.ascent) / 2, z, textAttribute, context, {
-          width: line.width
+    if (text.isMultiLine) {
+      if (context.setTextStyleWithoutAlignBaseline(text.attribute, textAttribute, z), "horizontal" === direction) {
+        const {
+          multilineLayout: multilineLayout
+        } = text;
+        if (!multilineLayout) return void context.highPerformanceRestore();
+        const {
+          xOffset: xOffset,
+          yOffset: yOffset
+        } = multilineLayout.bbox;
+        doStroke && (strokeCb ? strokeCb(context, text.attribute, textAttribute) : sVisible && (context.setStrokeStyle(text, text.attribute, originX - x, originY - y, textAttribute), multilineLayout.lines.forEach(line => {
+          context.strokeText(line.str, (line.leftOffset || 0) + xOffset + x, (line.topOffset || 0) + yOffset + y, z);
+        }))), doFill && (fillCb ? fillCb(context, text.attribute, textAttribute) : fVisible && (context.setCommonStyle(text, text.attribute, originX - x, originY - y, textAttribute), multilineLayout.lines.forEach(line => {
+          context.fillText(line.str, (line.leftOffset || 0) + xOffset + x, (line.topOffset || 0) + yOffset + y, z), this.drawUnderLine(underline, lineThrough, text, (line.leftOffset || 0) + xOffset + x, (line.topOffset || 0) + yOffset + y - textDrawOffsetY("bottom", fontSize) - .05 * fontSize, z, textAttribute, context, {
+            width: line.width
+          });
+        })));
+      } else {
+        text.tryUpdateAABBBounds();
+        const cache = text.cache,
+          {
+            verticalList: verticalList
+          } = cache;
+        context.textAlign = "left", context.textBaseline = "top";
+        const totalHeight = lineHeight * verticalList.length;
+        let totalW = 0;
+        verticalList.forEach(verticalData => {
+          const _w = verticalData.reduce((a, b) => a + (b.width || 0), 0);
+          totalW = max(_w, totalW);
+        });
+        let offsetY = 0,
+          offsetX = 0;
+        "bottom" === textBaseline ? offsetX = -totalHeight : "middle" === textBaseline && (offsetX = -totalHeight / 2), "center" === textAlign ? offsetY -= totalW / 2 : "right" === textAlign && (offsetY -= totalW), verticalList.forEach((verticalData, i) => {
+          const currentW = verticalData.reduce((a, b) => a + (b.width || 0), 0),
+            dw = totalW - currentW;
+          let currentOffsetY = offsetY;
+          "center" === textAlign ? currentOffsetY += dw / 2 : "right" === textAlign && (currentOffsetY += dw), verticalData.forEach(item => {
+            const {
+              text: text,
+              width: width,
+              direction: direction
+            } = item;
+            drawText(text, totalHeight - (i + 1) * lineHeight + offsetX, currentOffsetY, direction), currentOffsetY += width;
+          });
         });
-      })));
-    } else {
-      let {
-        textAlign = textAttribute.textAlign,
-        textBaseline = textAttribute.textBaseline
-      } = text.attribute;
-      if (!verticalMode) {
-        const t = textAlign;
-        textAlign = null !== (_b = text.getBaselineMapAlign()[textBaseline]) && void 0 !== _b ? _b : "left", textBaseline = null !== (_c = text.getAlignMapBaseline()[t]) && void 0 !== _c ? _c : "top";
       }
+    } else if ("horizontal" === direction) {
+      context.setTextStyle(text.attribute, textAttribute, z);
+      const t = text.clipedText;
+      let dy = 0;
+      lineHeight !== fontSize && ("top" === textBaseline ? dy = (lineHeight - fontSize) / 2 : "middle" === textBaseline || "bottom" === textBaseline && (dy = -(lineHeight - fontSize) / 2)), drawText(t, 0, dy, 0);
+    } else {
       text.tryUpdateAABBBounds();
-      const cache = text.cache,
-        {
+      const cache = text.cache;
+      if (cache) {
+        context.setTextStyleWithoutAlignBaseline(text.attribute, textAttribute, z);
+        const {
           verticalList: verticalList
         } = cache;
-      context.textAlign = "left", context.textBaseline = "top";
-      const totalHeight = lineHeight * verticalList.length;
-      let totalW = 0;
-      verticalList.forEach(verticalData => {
-        const _w = verticalData.reduce((a, b) => a + (b.width || 0), 0);
-        totalW = max(_w, totalW);
-      });
-      let offsetY = 0,
-        offsetX = 0;
-      "bottom" === textBaseline ? offsetX = -totalHeight : "middle" === textBaseline && (offsetX = -totalHeight / 2), "center" === textAlign ? offsetY -= totalW / 2 : "right" === textAlign && (offsetY -= totalW), verticalList.forEach((verticalData, i) => {
-        const currentW = verticalData.reduce((a, b) => a + (b.width || 0), 0),
-          dw = totalW - currentW;
-        let currentOffsetY = offsetY;
-        "center" === textAlign ? currentOffsetY += dw / 2 : "right" === textAlign && (currentOffsetY += dw), verticalData.forEach(item => {
+        let offsetY = 0;
+        const totalW = verticalList[0].reduce((a, b) => a + (b.width || 0), 0);
+        let offsetX = 0;
+        "bottom" === textBaseline ? offsetX = -lineHeight : "middle" === textBaseline && (offsetX = -lineHeight / 2), "center" === textAlign ? offsetY -= totalW / 2 : "right" === textAlign && (offsetY -= totalW), context.textAlign = "left", context.textBaseline = "top", verticalList[0].forEach(item => {
           const {
             text: text,
             width: width,
             direction: direction
           } = item;
-          drawText(text, totalHeight - (i + 1) * lineHeight + offsetX, currentOffsetY, direction), currentOffsetY += width;
+          drawText(text, offsetX, offsetY, direction), offsetY += width;
         });
-      });
+      }
     }
     transform3dMatrixToContextMatrix && this.restoreTransformUseContext2d(text, textAttribute, z, context), this.afterRenderStep(text, context, x, y, doFill, doStroke, fVisible, sVisible, textAttribute, drawContext, fillCb, strokeCb);
   }
@@ -8859,10 +8783,12 @@ let DefaultCanvasTextRender = class extends BaseRender {
       computed3dMatrix = !keepDirIn3d;
     this._draw(text, textAttribute, computed3dMatrix, drawContext, params);
   }
-  drawUnderLine(underline, lineThrough, text, anchorX, anchorY, offsetUnderLineY, offsetThroughLineY, z, textAttribute, context, multiOption) {
+  drawUnderLine(underline, lineThrough, text, x, y, z, textAttribute, context, multiOption) {
     if (lineThrough + underline <= 0) return;
     const {
         textAlign = textAttribute.textAlign,
+        textBaseline = textAttribute.textBaseline,
+        fontSize = textAttribute.fontSize,
         fill = textAttribute.fill,
         opacity = textAttribute.opacity,
         underlineOffset = textAttribute.underlineOffset,
@@ -8872,21 +8798,23 @@ let DefaultCanvasTextRender = class extends BaseRender {
       isMulti = !isNil(multiOption),
       w = isMulti ? multiOption.width : text.clipedWidth,
       offsetX = isMulti ? 0 : textDrawOffsetX(textAlign, w),
+      offsetY = textLayoutOffsetY(isMulti ? "alphabetic" : textBaseline, fontSize, fontSize),
       attribute = {
         lineWidth: 0,
         stroke: fill,
         opacity: opacity,
         strokeOpacity: fillOpacity
       };
+    let deltaY = isMulti ? -3 : 0;
     if (underline) {
-      attribute.lineWidth = underline, context.setStrokeStyle(text, attribute, anchorX, anchorY, textAttribute), underlineDash && context.setLineDash(underlineDash), context.beginPath();
-      const dy = anchorY + offsetUnderLineY + underlineOffset;
-      context.moveTo(anchorX + offsetX, dy, z), context.lineTo(anchorX + offsetX + w, dy, z), context.stroke();
+      attribute.lineWidth = underline, context.setStrokeStyle(text, attribute, x, y, textAttribute), underlineDash && context.setLineDash(underlineDash), context.beginPath();
+      const dy = y + offsetY + fontSize + underlineOffset + deltaY;
+      context.moveTo(x + offsetX, dy, z), context.lineTo(x + offsetX + w, dy, z), context.stroke();
     }
-    if (lineThrough) {
-      attribute.lineWidth = lineThrough, context.setStrokeStyle(text, attribute, anchorX, anchorY, textAttribute), context.beginPath();
-      const dy = anchorY + offsetThroughLineY;
-      context.moveTo(anchorX + offsetX, dy, z), context.lineTo(anchorX + offsetX + w, dy, z), context.stroke();
+    if (isMulti && (deltaY = -1), lineThrough) {
+      attribute.lineWidth = lineThrough, context.setStrokeStyle(text, attribute, x, y, textAttribute), context.beginPath();
+      const dy = y + offsetY + fontSize / 2 + deltaY;
+      context.moveTo(x + offsetX, dy, z), context.lineTo(x + offsetX + w, dy, z), context.stroke();
     }
   }
 };
@@ -9171,10 +9099,12 @@ let DefaultCanvasImageRender = class extends BaseRender {
     const {
       image: url
     } = image.attribute;
-    if (!url || !image.resources) return;
-    const res = image.resources.get(url);
-    if ("loading" === res.state && isString(url)) return void ResourceLoader.improveImageLoading(url);
-    if ("success" !== res.state) return;
+    if (!image.isGifImage) {
+      if (!url || !image.resources) return;
+      const res = image.resources.get(url);
+      if ("loading" === res.state && isString(url)) return void ResourceLoader.improveImageLoading(url);
+      if ("success" !== res.state) return;
+    }
     const {
       context: context
     } = renderService.drawParams;
@@ -9551,63 +9481,58 @@ class CanvasTextLayout {
   constructor(fontFamily, options, textMeasure) {
     this.fontFamily = fontFamily, this.textOptions = options, this.textMeasure = textMeasure;
   }
-  LayoutBBox(bbox, textAlign, textBaseline, linesLayout) {
+  LayoutBBox(bbox, textAlign, textBaseline) {
     if ("left" === textAlign || "start" === textAlign) bbox.xOffset = 0;else if ("center" === textAlign) bbox.xOffset = bbox.width / -2;else {
       if ("right" !== textAlign && "end" !== textAlign) throw new Error("非法的textAlign");
       bbox.xOffset = -bbox.width;
     }
-    if ("top" === textBaseline) bbox.yOffset = 0;else if ("middle" === textBaseline) bbox.yOffset = bbox.height / -2;else if ("alphabetic" === textBaseline) {
-      let percent = .79;
-      if (1 === linesLayout.length) {
-        const lineInfo = linesLayout[0];
-        percent = lineInfo.ascent / (lineInfo.ascent + lineInfo.descent);
-      }
-      bbox.yOffset = bbox.height * -percent;
-    } else bbox.yOffset = -bbox.height;
-    return bbox;
+    return bbox.yOffset = "top" === textBaseline ? 0 : "middle" === textBaseline ? bbox.height / -2 : "alphabetic" === textBaseline ? -.79 * bbox.height : -bbox.height, bbox;
+  }
+  GetLayout(str, width, height, textAlign, textBaseline, lineHeight, suffix, wordBreak, suffixPosition) {
+    const linesLayout = [],
+      bboxWH = [width, height],
+      bboxOffset = [0, 0];
+    for (; str.length > 0;) {
+      const {
+        str: clipText
+      } = this.textMeasure.clipTextWithSuffix(str, this.textOptions, width, suffix, wordBreak, suffixPosition);
+      linesLayout.push({
+        str: clipText,
+        width: this.textMeasure.measureTextWidth(clipText, this.textOptions)
+      }), str = str.substring(clipText.length);
+    }
+    "left" === textAlign || "start" === textAlign || ("center" === textAlign ? bboxOffset[0] = bboxWH[0] / -2 : "right" !== textAlign && "end" !== textAlign || (bboxOffset[0] = -bboxWH[0])), "top" === textBaseline || ("middle" === textBaseline ? bboxOffset[1] = bboxWH[1] / -2 : "bottom" === textBaseline && (bboxOffset[1] = -bboxWH[1]));
+    const bbox = {
+      xOffset: bboxOffset[0],
+      yOffset: bboxOffset[1],
+      width: bboxWH[0],
+      height: bboxWH[1]
+    };
+    return this.layoutWithBBox(bbox, linesLayout, textAlign, textBaseline, lineHeight);
   }
   GetLayoutByLines(lines, textAlign, textBaseline, lineHeight) {
     let suffix = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : "";
     let wordBreak = arguments.length > 5 ? arguments[5] : undefined;
-    let params = arguments.length > 6 ? arguments[6] : undefined;
-    const {
-      lineWidth: lineWidth,
-      suffixPosition = "end",
-      measureMode = MeasureModeEnum.actualBounding,
-      keepCenterInLine = !1
-    } = null != params ? params : {};
+    let lineWidth = arguments.length > 6 ? arguments[6] : undefined;
+    let suffixPosition = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : "end";
     lines = lines.map(l => l.toString());
     const linesLayout = [],
       bboxWH = [0, 0];
     if ("number" == typeof lineWidth && lineWidth !== 1 / 0) {
       let width;
-      for (let i = 0, len = lines.length; i < len; i++) {
-        const metrics = this.textMeasure.measureTextPixelADscentAndWidth(lines[i], this.textOptions, measureMode);
-        width = Math.min(metrics.width, lineWidth), linesLayout.push({
-          str: metrics.width <= lineWidth ? lines[i].toString() : this.textMeasure.clipTextWithSuffix(lines[i], this.textOptions, width, suffix, wordBreak, suffixPosition).str,
-          width: width,
-          ascent: metrics.ascent,
-          descent: metrics.descent,
-          keepCenterInLine: keepCenterInLine
-        });
-      }
+      for (let i = 0, len = lines.length; i < len; i++) width = Math.min(this.textMeasure.measureTextWidth(lines[i], this.textOptions), lineWidth), linesLayout.push({
+        str: this.textMeasure.clipTextWithSuffix(lines[i], this.textOptions, width, suffix, wordBreak, suffixPosition).str,
+        width: width
+      });
       bboxWH[0] = lineWidth;
     } else {
-      let width,
-        text,
-        _lineWidth = 0;
-      for (let i = 0, len = lines.length; i < len; i++) {
-        text = lines[i];
-        const metrics = this.textMeasure.measureTextPixelADscentAndWidth(lines[i], this.textOptions, measureMode);
-        width = metrics.width, _lineWidth = Math.max(_lineWidth, width), linesLayout.push({
-          str: text,
-          width: width,
-          ascent: metrics.ascent,
-          descent: metrics.descent,
-          keepCenterInLine: keepCenterInLine
-        });
-      }
-      bboxWH[0] = _lineWidth;
+      let width, text;
+      lineWidth = 0;
+      for (let i = 0, len = lines.length; i < len; i++) text = lines[i], width = this.textMeasure.measureTextWidth(text, this.textOptions), lineWidth = Math.max(lineWidth, width), linesLayout.push({
+        str: text,
+        width: width
+      });
+      bboxWH[0] = lineWidth;
     }
     bboxWH[1] = linesLayout.length * lineHeight, bboxWH[0] = linesLayout.reduce((a, b) => Math.max(a, b.width), 0);
     const bbox = {
@@ -9616,7 +9541,7 @@ class CanvasTextLayout {
       width: bboxWH[0],
       height: bboxWH[1]
     };
-    return this.LayoutBBox(bbox, textAlign, textBaseline, linesLayout), this.layoutWithBBox(bbox, linesLayout, textAlign, textBaseline, lineHeight);
+    return this.LayoutBBox(bbox, textAlign, textBaseline), this.layoutWithBBox(bbox, linesLayout, textAlign, textBaseline, lineHeight);
   }
   layoutWithBBox(bbox, lines, textAlign, textBaseline, lineHeight) {
     const origin = [0, 0],
@@ -9635,16 +9560,11 @@ class CanvasTextLayout {
     };
   }
   lineOffset(bbox, line, textAlign, textBaseline, lineHeight, origin) {
-    if ("left" === textAlign || "start" === textAlign ? line.leftOffset = 0 : "center" === textAlign ? line.leftOffset = (bbox.width - line.width) / 2 : "right" !== textAlign && "end" !== textAlign || (line.leftOffset = bbox.width - line.width), line.topOffset = lineHeight / 2 + (line.ascent - line.descent) / 2 + origin[1], !line.keepCenterInLine) {
-      const buf = 0,
-        actualHeightWithBuf = line.ascent + line.descent + buf;
-      actualHeightWithBuf < lineHeight - buf && ("bottom" === textBaseline ? line.topOffset += (lineHeight - actualHeightWithBuf) / 2 : "top" === textBaseline && (line.topOffset -= (lineHeight - actualHeightWithBuf) / 2));
-    }
-    return origin[1] += lineHeight, line;
+    return "left" === textAlign || "start" === textAlign ? line.leftOffset = 0 : "center" === textAlign ? line.leftOffset = (bbox.width - line.width) / 2 : "right" !== textAlign && "end" !== textAlign || (line.leftOffset = bbox.width - line.width), line.topOffset = (lineHeight - this.textOptions.fontSize) / 2 + .79 * this.textOptions.fontSize + origin[1], origin[1] += lineHeight, line;
   }
 }
 
-const TEXT_UPDATE_TAG_KEY = ["text", "maxLineWidth", "maxWidth", "textAlign", "textBaseline", "heightLimit", "lineClamp", "fontSize", "fontFamily", "fontWeight", "ellipsis", "lineHeight", "direction", "wordBreak", "heightLimit", "lineClamp", ...GRAPHIC_UPDATE_TAG_KEY];
+const TEXT_UPDATE_TAG_KEY = ["text", "maxLineWidth", "textAlign", "textBaseline", "heightLimit", "lineClamp", "fontSize", "fontFamily", "fontWeight", "ellipsis", "lineHeight", "direction", "wordBreak", "heightLimit", "lineClamp", ...GRAPHIC_UPDATE_TAG_KEY];
 class Text extends Graphic {
   get font() {
     const textTheme = this.getGraphicTheme();
@@ -9653,22 +9573,26 @@ class Text extends Graphic {
   get clipedText() {
     var _a;
     const attribute = this.attribute,
-      textTheme = this.getGraphicTheme(),
-      maxWidth = this.getMaxWidth(textTheme);
-    return Number.isFinite(maxWidth) ? (this.tryUpdateAABBBounds(), this.cache.clipedText) : (null !== (_a = attribute.text) && void 0 !== _a ? _a : textTheme.text).toString();
+      textTheme = this.getGraphicTheme();
+    if (!this.isSimplify()) return;
+    const {
+      maxLineWidth = textTheme.maxLineWidth
+    } = attribute;
+    return Number.isFinite(maxLineWidth) ? (this.tryUpdateAABBBounds(), this.cache.clipedText) : (null !== (_a = attribute.text) && void 0 !== _a ? _a : textTheme.text).toString();
   }
   get clipedWidth() {
-    return this.tryUpdateAABBBounds(), this.cache.clipedWidth;
+    if (this.isSimplify()) return this.tryUpdateAABBBounds(), this.cache.clipedWidth;
   }
   get cliped() {
     var _a, _b;
     const textTheme = this.getGraphicTheme(),
       attribute = this.attribute,
-      maxWidth = this.getMaxWidth(textTheme);
-    if (!Number.isFinite(maxWidth)) return !1;
-    const {
-      text: text
-    } = this.attribute;
+      {
+        maxLineWidth = textTheme.maxLineWidth,
+        text: text,
+        whiteSpace = textTheme.whiteSpace
+      } = attribute;
+    if (!Number.isFinite(maxLineWidth)) return !1;
     if (this.tryUpdateAABBBounds(), null === (_b = null === (_a = this.cache) || void 0 === _a ? void 0 : _a.layoutData) || void 0 === _b ? void 0 : _b.lines) {
       let mergedText = "";
       this.cache.layoutData.lines.forEach(item => {
@@ -9679,7 +9603,10 @@ class Text extends Graphic {
     return "vertical" === attribute.direction && this.cache.verticalList && this.cache.verticalList[0] ? this.cache.verticalList[0].map(item => item.text).join("") !== attribute.text.toString() : null != this.clipedText && this.clipedText !== attribute.text.toString();
   }
   get multilineLayout() {
-    return this.tryUpdateAABBBounds(), this.cache.layoutData;
+    if (this.isMultiLine) return this.tryUpdateAABBBounds(), this.cache.layoutData;
+  }
+  isSimplify() {
+    return !this.isMultiLine && "vertical" !== this.attribute.direction;
   }
   get isMultiLine() {
     return Array.isArray(this.attribute.text) || "normal" === this.attribute.whiteSpace;
@@ -9752,74 +9679,8 @@ class Text extends Graphic {
     }
     return application.graphicService.combindShadowAABBBounds(aabbBounds, this), null == attribute.forceBoundsHeight && null == attribute.forceBoundsWidth || application.graphicService.updateHTMLTextAABBBounds(attribute, textTheme, aabbBounds), transformBoundsWithMatrix(aabbBounds, aabbBounds, this.transMatrix), aabbBounds;
   }
-  updateSingallineAABBBounds(text) {
-    this.updateMultilineAABBBounds([text]);
-    const layoutData = this.cache.layoutData;
-    if (layoutData) {
-      const line = layoutData.lines[0];
-      this.cache.clipedText = line.str, this.cache.clipedWidth = line.width;
-    }
-    return this._AABBBounds;
-  }
-  updateMultilineAABBBounds(text) {
-    const textTheme = this.getGraphicTheme(),
-      {
-        direction = textTheme.direction,
-        underlineOffset = textTheme.underlineOffset
-      } = this.attribute,
-      b = "horizontal" === direction ? this.updateHorizontalMultilineAABBBounds(text) : this.updateVerticalMultilineAABBBounds(text);
-    return "horizontal" === direction && underlineOffset && this._AABBBounds.add(this._AABBBounds.x1, this._AABBBounds.y2 + underlineOffset), b;
-  }
-  guessLineHeightBuf(fontSize) {
-    return fontSize ? .1 * fontSize : 0;
-  }
-  updateHorizontalMultilineAABBBounds(text) {
-    var _a;
-    const textTheme = this.getGraphicTheme(),
-      attribute = this.attribute,
-      {
-        fontFamily = textTheme.fontFamily,
-        textAlign = textTheme.textAlign,
-        textBaseline = textTheme.textBaseline,
-        fontSize = textTheme.fontSize,
-        fontWeight = textTheme.fontWeight,
-        ellipsis = textTheme.ellipsis,
-        maxLineWidth: maxLineWidth,
-        stroke = textTheme.stroke,
-        wrap = textTheme.wrap,
-        measureMode = textTheme.measureMode,
-        lineWidth = textTheme.lineWidth,
-        whiteSpace = textTheme.whiteSpace,
-        suffixPosition = textTheme.suffixPosition,
-        ignoreBuf = textTheme.ignoreBuf,
-        keepCenterInLine = textTheme.keepCenterInLine
-      } = attribute,
-      buf = ignoreBuf ? 0 : this.guessLineHeightBuf(fontSize),
-      lineHeight = this.getLineHeight(attribute, textTheme) + buf;
-    if ("normal" === whiteSpace || wrap) return this.updateWrapAABBBounds(text);
-    if (!this.shouldUpdateShape() && (null === (_a = this.cache) || void 0 === _a ? void 0 : _a.layoutData)) {
-      const bbox = this.cache.layoutData.bbox;
-      return this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
-    }
-    const textMeasure = application.graphicUtil.textMeasure,
-      layoutData = new CanvasTextLayout(fontFamily, {
-        fontSize: fontSize,
-        fontWeight: fontWeight,
-        fontFamily: fontFamily,
-        lineHeight: lineHeight
-      }, textMeasure).GetLayoutByLines(text, textAlign, textBaseline, lineHeight, !0 === ellipsis ? textTheme.ellipsis : ellipsis || void 0, !1, {
-        lineWidth: maxLineWidth,
-        suffixPosition: suffixPosition,
-        measureMode: measureMode,
-        keepCenterInLine: keepCenterInLine
-      }),
-      {
-        bbox: bbox
-      } = layoutData;
-    return this.cache.layoutData = layoutData, this.clearUpdateShapeTag(), this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
-  }
   updateWrapAABBBounds(text) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const textTheme = this.getGraphicTheme(),
       {
         fontFamily = textTheme.fontFamily,
@@ -9833,26 +9694,22 @@ class Text extends Graphic {
         wordBreak = textTheme.wordBreak,
         fontWeight = textTheme.fontWeight,
         ignoreBuf = textTheme.ignoreBuf,
-        measureMode = textTheme.measureMode,
         suffixPosition = textTheme.suffixPosition,
         heightLimit = 0,
-        lineClamp: lineClamp,
-        keepCenterInLine = textTheme.keepCenterInLine
+        lineClamp: lineClamp
       } = this.attribute,
-      buf = ignoreBuf ? 0 : this.guessLineHeightBuf(fontSize),
-      lineHeight = this.getLineHeight(this.attribute, textTheme) + buf;
-    if (!this.shouldUpdateShape() && (null === (_a = this.cache) || void 0 === _a ? void 0 : _a.layoutData)) {
+      lineHeight = null !== (_a = calculateLineHeight(this.attribute.lineHeight, this.attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : this.attribute.fontSize || textTheme.fontSize,
+      buf = ignoreBuf ? 0 : 2;
+    if (!this.shouldUpdateShape() && (null === (_b = this.cache) || void 0 === _b ? void 0 : _b.layoutData)) {
       const bbox = this.cache.layoutData.bbox;
       return this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
     }
     const textMeasure = application.graphicUtil.textMeasure,
-      textOptions = {
+      layoutObj = new CanvasTextLayout(fontFamily, {
         fontSize: fontSize,
         fontWeight: fontWeight,
-        fontFamily: fontFamily,
-        lineHeight: lineHeight
-      },
-      layoutObj = new CanvasTextLayout(fontFamily, textOptions, textMeasure),
+        fontFamily: fontFamily
+      }, textMeasure),
       lines = isArray(text) ? text.map(l => l.toString()) : [text.toString()],
       linesLayout = [],
       bboxWH = [0, 0];
@@ -9862,37 +9719,29 @@ class Text extends Graphic {
         const str = lines[i];
         let needCut = !0;
         if (i === lineCountLimit - 1) {
-          const clip = textMeasure.clipTextWithSuffix(str, textOptions, maxLineWidth, ellipsis, !1, suffixPosition, i !== lines.length - 1),
-            matrics = textMeasure.measureTextPixelADscentAndWidth(clip.str, textOptions, measureMode);
+          const clip = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, !1, suffixPosition, i !== lines.length - 1);
           linesLayout.push({
             str: clip.str,
-            width: clip.width,
-            ascent: matrics.ascent,
-            descent: matrics.descent,
-            keepCenterInLine: keepCenterInLine
+            width: clip.width
           });
           break;
         }
-        const clip = textMeasure.clipText(str, textOptions, maxLineWidth, "break-all" !== wordBreak, "keep-all" === wordBreak);
+        const clip = layoutObj.textMeasure.clipText(str, layoutObj.textOptions, maxLineWidth, "break-all" !== wordBreak, "keep-all" === wordBreak);
         if ("" !== str && "" === clip.str || clip.wordBreaked) {
           if (ellipsis) {
-            const clipEllipsis = textMeasure.clipTextWithSuffix(str, textOptions, maxLineWidth, ellipsis, !1, suffixPosition);
-            clip.str = null !== (_b = clipEllipsis.str) && void 0 !== _b ? _b : "", clip.width = null !== (_c = clipEllipsis.width) && void 0 !== _c ? _c : 0;
+            const clipEllipsis = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, !1, suffixPosition);
+            clip.str = null !== (_c = clipEllipsis.str) && void 0 !== _c ? _c : "", clip.width = null !== (_d = clipEllipsis.width) && void 0 !== _d ? _d : 0;
           } else clip.str = "", clip.width = 0;
           needCut = !1;
         }
-        const matrics = textMeasure.measureTextPixelADscentAndWidth(clip.str, textOptions, measureMode);
         linesLayout.push({
           str: clip.str,
-          width: clip.width,
-          ascent: matrics.ascent,
-          descent: matrics.descent,
-          keepCenterInLine: keepCenterInLine
+          width: clip.width
         });
         let cutLength = clip.str.length;
         if (!clip.wordBreaked || "" !== str && "" === clip.str || (needCut = !0, cutLength = clip.wordBreaked), clip.str.length === str.length) ;else if (needCut) {
-          const newStr = str.substring(cutLength);
-          lines.splice(i + 1, 0, newStr);
+          let newStr = str.substring(cutLength);
+          "keep-all" === wordBreak && (newStr = newStr.replace(/^\s+/g, "")), lines.splice(i + 1, 0, newStr);
         }
       }
       let maxWidth = 0;
@@ -9905,46 +9754,235 @@ class Text extends Graphic {
         lineWidth = 0;
       for (let i = 0, len = lines.length; i < len; i++) {
         if (i === lineCountLimit - 1) {
-          const clip = textMeasure.clipTextWithSuffix(lines[i], textOptions, maxLineWidth, ellipsis, !1, suffixPosition),
-            matrics = textMeasure.measureTextPixelADscentAndWidth(clip.str, textOptions, measureMode);
+          const clip = layoutObj.textMeasure.clipTextWithSuffix(lines[i], layoutObj.textOptions, maxLineWidth, ellipsis, !1, suffixPosition);
           linesLayout.push({
             str: clip.str,
-            width: clip.width,
-            ascent: matrics.ascent,
-            descent: matrics.descent,
-            keepCenterInLine: keepCenterInLine
+            width: clip.width
           }), lineWidth = Math.max(lineWidth, clip.width);
           break;
         }
-        text = lines[i], width = textMeasure.measureTextWidth(text, textOptions), lineWidth = Math.max(lineWidth, width);
-        const matrics = textMeasure.measureTextPixelADscentAndWidth(text, textOptions, measureMode);
-        linesLayout.push({
+        text = lines[i], width = layoutObj.textMeasure.measureTextWidth(text, layoutObj.textOptions, "break-word" === wordBreak), lineWidth = Math.max(lineWidth, width), linesLayout.push({
           str: text,
-          width: width,
-          ascent: matrics.ascent,
-          descent: matrics.descent,
-          keepCenterInLine: keepCenterInLine
+          width: width
         });
       }
       bboxWH[0] = lineWidth;
     }
-    bboxWH[1] = linesLayout.length * lineHeight;
+    bboxWH[1] = linesLayout.length * (lineHeight + buf);
     const bbox = {
       xOffset: 0,
       yOffset: 0,
       width: bboxWH[0],
       height: bboxWH[1]
     };
-    layoutObj.LayoutBBox(bbox, textAlign, textBaseline, linesLayout);
+    layoutObj.LayoutBBox(bbox, textAlign, textBaseline);
     const layoutData = layoutObj.layoutWithBBox(bbox, linesLayout, textAlign, textBaseline, lineHeight);
     return this.cache.layoutData = layoutData, this.clearUpdateShapeTag(), this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
   }
-  updateVerticalMultilineAABBBounds(text) {
+  updateSingallineAABBBounds(text) {
+    const textTheme = this.getGraphicTheme(),
+      {
+        direction = textTheme.direction,
+        underlineOffset = textTheme.underlineOffset
+      } = this.attribute,
+      b = "horizontal" === direction ? this.updateHorizontalSinglelineAABBBounds(text) : this.updateVerticalSinglelineAABBBounds(text);
+    return "horizontal" === direction && underlineOffset && this._AABBBounds.add(this._AABBBounds.x1, this._AABBBounds.y2 + underlineOffset), b;
+  }
+  updateMultilineAABBBounds(text) {
+    const textTheme = this.getGraphicTheme(),
+      {
+        direction = textTheme.direction,
+        underlineOffset = textTheme.underlineOffset
+      } = this.attribute,
+      b = "horizontal" === direction ? this.updateHorizontalMultilineAABBBounds(text) : this.updateVerticalMultilineAABBBounds(text);
+    return "horizontal" === direction && underlineOffset && this._AABBBounds.add(this._AABBBounds.x1, this._AABBBounds.y2 + underlineOffset), b;
+  }
+  updateHorizontalSinglelineAABBBounds(text) {
     var _a, _b;
+    const textTheme = this.getGraphicTheme(),
+      {
+        wrap = textTheme.wrap
+      } = this.attribute;
+    if (wrap) return this.updateWrapAABBBounds([text]);
+    const textMeasure = application.graphicUtil.textMeasure;
+    let width, str;
+    const attribute = this.attribute,
+      {
+        maxLineWidth = textTheme.maxLineWidth,
+        ellipsis = textTheme.ellipsis,
+        textAlign = textTheme.textAlign,
+        textBaseline = textTheme.textBaseline,
+        fontFamily = textTheme.fontFamily,
+        fontSize = textTheme.fontSize,
+        fontWeight = textTheme.fontWeight,
+        stroke = textTheme.stroke,
+        lineWidth = textTheme.lineWidth,
+        ignoreBuf = textTheme.ignoreBuf,
+        whiteSpace = textTheme.whiteSpace,
+        suffixPosition = textTheme.suffixPosition
+      } = attribute;
+    if ("normal" === whiteSpace) return this.updateWrapAABBBounds(text);
+    const buf = ignoreBuf ? 0 : Math.max(2, .075 * fontSize),
+      textFontSize = attribute.fontSize || textTheme.fontSize,
+      lineHeight = null !== (_a = calculateLineHeight(attribute.lineHeight, textFontSize)) && void 0 !== _a ? _a : textFontSize + buf;
+    if (!this.shouldUpdateShape() && this.cache) {
+      width = null !== (_b = this.cache.clipedWidth) && void 0 !== _b ? _b : 0;
+      const dx = textDrawOffsetX(textAlign, width),
+        dy = textLayoutOffsetY(textBaseline, lineHeight, fontSize);
+      return this._AABBBounds.set(dx, dy, dx + width, dy + lineHeight), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
+    }
+    if (Number.isFinite(maxLineWidth)) {
+      if (ellipsis) {
+        const strEllipsis = !0 === ellipsis ? textTheme.ellipsis : ellipsis,
+          data = textMeasure.clipTextWithSuffix(text.toString(), {
+            fontSize: fontSize,
+            fontWeight: fontWeight,
+            fontFamily: fontFamily
+          }, maxLineWidth, strEllipsis, !1, suffixPosition);
+        str = data.str, width = data.width;
+      } else {
+        const data = textMeasure.clipText(text.toString(), {
+          fontSize: fontSize,
+          fontWeight: fontWeight,
+          fontFamily: fontFamily
+        }, maxLineWidth, !1);
+        str = data.str, width = data.width;
+      }
+      this.cache.clipedText = str, this.cache.clipedWidth = width;
+    } else width = textMeasure.measureTextWidth(text.toString(), {
+      fontSize: fontSize,
+      fontWeight: fontWeight,
+      fontFamily: fontFamily
+    }), this.cache.clipedText = text.toString(), this.cache.clipedWidth = width;
+    this.clearUpdateShapeTag();
+    const dx = textDrawOffsetX(textAlign, width);
+    let lh = lineHeight;
+    application.global && application.global.isSafari() && (lh += .2 * fontSize);
+    const dy = textLayoutOffsetY(textBaseline, lh, fontSize, buf);
+    return this._AABBBounds.set(dx, dy, dx + width, dy + lh), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
+  }
+  getBaselineMapAlign() {
+    return Text.baselineMapAlign;
+  }
+  getAlignMapBaseline() {
+    return Text.alignMapBaseline;
+  }
+  updateVerticalSinglelineAABBBounds(text) {
+    var _a, _b, _c;
     const textTheme = this.getGraphicTheme(),
       textMeasure = application.graphicUtil.textMeasure;
     let width;
     const attribute = this.attribute,
+      {
+        ignoreBuf = textTheme.ignoreBuf
+      } = attribute,
+      buf = ignoreBuf ? 0 : 2,
+      {
+        maxLineWidth = textTheme.maxLineWidth,
+        ellipsis = textTheme.ellipsis,
+        fontSize = textTheme.fontSize,
+        fontWeight = textTheme.fontWeight,
+        fontFamily = textTheme.fontFamily,
+        stroke = textTheme.stroke,
+        lineWidth = textTheme.lineWidth,
+        verticalMode = textTheme.verticalMode,
+        suffixPosition = textTheme.suffixPosition
+      } = attribute,
+      lineHeight = null !== (_a = calculateLineHeight(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : (attribute.fontSize || textTheme.fontSize) + buf;
+    let {
+      textAlign = textTheme.textAlign,
+      textBaseline = textTheme.textBaseline
+    } = attribute;
+    if (!verticalMode) {
+      const t = textAlign;
+      textAlign = null !== (_b = Text.baselineMapAlign[textBaseline]) && void 0 !== _b ? _b : "left", textBaseline = null !== (_c = Text.alignMapBaseline[t]) && void 0 !== _c ? _c : "top";
+    }
+    if (!this.shouldUpdateShape() && this.cache) {
+      width = this.cache.clipedWidth;
+      const dx = textDrawOffsetX(textAlign, width),
+        dy = textLayoutOffsetY(textBaseline, lineHeight, fontSize);
+      return this._AABBBounds.set(dy, dx, dy + lineHeight, dx + width), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
+    }
+    let verticalList = [verticalLayout(text.toString())];
+    if (Number.isFinite(maxLineWidth)) {
+      if (ellipsis) {
+        const strEllipsis = !0 === ellipsis ? textTheme.ellipsis : ellipsis,
+          data = textMeasure.clipTextWithSuffixVertical(verticalList[0], {
+            fontSize: fontSize,
+            fontWeight: fontWeight,
+            fontFamily: fontFamily
+          }, maxLineWidth, strEllipsis, !1, suffixPosition);
+        verticalList = [data.verticalList], width = data.width;
+      } else {
+        const data = textMeasure.clipTextVertical(verticalList[0], {
+          fontSize: fontSize,
+          fontWeight: fontWeight,
+          fontFamily: fontFamily
+        }, maxLineWidth, !1);
+        verticalList = [data.verticalList], width = data.width;
+      }
+      this.cache.verticalList = verticalList, this.cache.clipedWidth = width;
+    } else width = 0, verticalList[0].forEach(t => {
+      const w = t.direction === TextDirection.HORIZONTAL ? fontSize : textMeasure.measureTextWidth(t.text, {
+        fontSize: fontSize,
+        fontWeight: fontWeight,
+        fontFamily: fontFamily
+      });
+      width += w, t.width = w;
+    }), this.cache.verticalList = verticalList, this.cache.clipedWidth = width;
+    this.clearUpdateShapeTag();
+    const dx = textDrawOffsetX(textAlign, width),
+      dy = textLayoutOffsetY(textBaseline, lineHeight, fontSize);
+    return this._AABBBounds.set(dy, dx, dy + lineHeight, dx + width), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
+  }
+  updateHorizontalMultilineAABBBounds(text) {
+    var _a, _b;
+    const textTheme = this.getGraphicTheme(),
+      {
+        wrap = textTheme.wrap
+      } = this.attribute;
+    if (wrap) return this.updateWrapAABBBounds(text);
+    const attribute = this.attribute,
+      {
+        fontFamily = textTheme.fontFamily,
+        textAlign = textTheme.textAlign,
+        textBaseline = textTheme.textBaseline,
+        fontSize = textTheme.fontSize,
+        fontWeight = textTheme.fontWeight,
+        ellipsis = textTheme.ellipsis,
+        maxLineWidth: maxLineWidth,
+        stroke = textTheme.stroke,
+        lineWidth = textTheme.lineWidth,
+        whiteSpace = textTheme.whiteSpace,
+        suffixPosition = textTheme.suffixPosition
+      } = attribute,
+      lineHeight = null !== (_a = calculateLineHeight(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : attribute.fontSize || textTheme.fontSize;
+    if ("normal" === whiteSpace) return this.updateWrapAABBBounds(text);
+    if (!this.shouldUpdateShape() && (null === (_b = this.cache) || void 0 === _b ? void 0 : _b.layoutData)) {
+      const bbox = this.cache.layoutData.bbox;
+      return this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
+    }
+    const textMeasure = application.graphicUtil.textMeasure,
+      layoutData = new CanvasTextLayout(fontFamily, {
+        fontSize: fontSize,
+        fontWeight: fontWeight,
+        fontFamily: fontFamily
+      }, textMeasure).GetLayoutByLines(text, textAlign, textBaseline, lineHeight, !0 === ellipsis ? textTheme.ellipsis : ellipsis || void 0, !1, maxLineWidth, suffixPosition),
+      {
+        bbox: bbox
+      } = layoutData;
+    return this.cache.layoutData = layoutData, this.clearUpdateShapeTag(), this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
+  }
+  updateVerticalMultilineAABBBounds(text) {
+    var _a, _b, _c;
+    const textTheme = this.getGraphicTheme(),
+      textMeasure = application.graphicUtil.textMeasure;
+    let width;
+    const attribute = this.attribute,
+      {
+        ignoreBuf = textTheme.ignoreBuf
+      } = attribute,
+      buf = ignoreBuf ? 0 : 2,
       {
         maxLineWidth = textTheme.maxLineWidth,
         ellipsis = textTheme.ellipsis,
@@ -9956,14 +9994,14 @@ class Text extends Graphic {
         verticalMode = textTheme.verticalMode,
         suffixPosition = textTheme.suffixPosition
       } = attribute,
-      lineHeight = this.getLineHeight(attribute, textTheme);
+      lineHeight = null !== (_a = calculateLineHeight(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : (attribute.fontSize || textTheme.fontSize) + buf;
     let {
       textAlign = textTheme.textAlign,
       textBaseline = textTheme.textBaseline
     } = attribute;
     if (!verticalMode) {
       const t = textAlign;
-      textAlign = null !== (_a = Text.baselineMapAlign[textBaseline]) && void 0 !== _a ? _a : "left", textBaseline = null !== (_b = Text.alignMapBaseline[t]) && void 0 !== _b ? _b : "top";
+      textAlign = null !== (_b = Text.baselineMapAlign[textBaseline]) && void 0 !== _b ? _b : "left", textBaseline = null !== (_c = Text.alignMapBaseline[t]) && void 0 !== _c ? _c : "top";
     }
     if (width = 0, !this.shouldUpdateShape() && this.cache) {
       this.cache.verticalList.forEach(item => {
@@ -10011,15 +10049,6 @@ class Text extends Graphic {
       dy = textLayoutOffsetY(textBaseline, height, fontSize);
     return this._AABBBounds.set(dy, dx, dy + height, dx + width), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
   }
-  getMaxWidth(theme) {
-    var _a, _b;
-    const attribute = this.attribute;
-    return null !== (_b = null !== (_a = attribute.maxLineWidth) && void 0 !== _a ? _a : attribute.maxWidth) && void 0 !== _b ? _b : theme.maxWidth;
-  }
-  getLineHeight(attribute, textTheme) {
-    var _a;
-    return null !== (_a = calculateLineHeight(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : attribute.fontSize || textTheme.fontSize;
-  }
   needUpdateTags(keys) {
     let k = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : TEXT_UPDATE_TAG_KEY;
     return super.needUpdateTags(keys, k);
@@ -10034,12 +10063,6 @@ class Text extends Graphic {
   getNoWorkAnimateAttr() {
     return Text.NOWORK_ANIMATE_ATTR;
   }
-  getBaselineMapAlign() {
-    return Text.baselineMapAlign;
-  }
-  getAlignMapBaseline() {
-    return Text.alignMapBaseline;
-  }
 }
 Text.NOWORK_ANIMATE_ATTR = Object.assign({
   ellipsis: 1,
@@ -10118,10 +10141,7 @@ class WrapText extends Text {
           const clip = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, !1, suffixPosition);
           linesLayout.push({
             str: clip.str,
-            width: clip.width,
-            ascent: 0,
-            descent: 0,
-            keepCenterInLine: !1
+            width: clip.width
           });
           break;
         }
@@ -10135,10 +10155,7 @@ class WrapText extends Text {
         }
         if (linesLayout.push({
           str: clip.str,
-          width: clip.width,
-          ascent: 0,
-          descent: 0,
-          keepCenterInLine: !1
+          width: clip.width
         }), clip.str.length === str.length) ;else if (needCut) {
           const newStr = str.substring(clip.str.length);
           lines.splice(i + 1, 0, newStr);
@@ -10157,19 +10174,13 @@ class WrapText extends Text {
           const clip = layoutObj.textMeasure.clipTextWithSuffix(lines[i], layoutObj.textOptions, maxLineWidth, ellipsis, !1, suffixPosition);
           linesLayout.push({
             str: clip.str,
-            width: clip.width,
-            ascent: 0,
-            descent: 0,
-            keepCenterInLine: !1
+            width: clip.width
           }), lineWidth = Math.max(lineWidth, clip.width);
           break;
         }
         text = lines[i], width = layoutObj.textMeasure.measureTextWidth(text, layoutObj.textOptions, "break-word" === wordBreak), lineWidth = Math.max(lineWidth, width), linesLayout.push({
           str: text,
-          width: width,
-          ascent: 0,
-          descent: 0,
-          keepCenterInLine: !1
+          width: width
         });
       }
       bboxWH[0] = lineWidth;
@@ -10213,9 +10224,6 @@ class BaseSymbol {
       bounds.x1 = -halfS, bounds.x2 = halfS, bounds.y1 = -halfS, bounds.y2 = halfS;
     } else bounds.x1 = -size[0] / 2, bounds.x2 = size[0] / 2, bounds.y1 = -size[1] / 2, bounds.y2 = size[1] / 2;
   }
-  parseSize(size) {
-    return isNumber(size) ? size : Math.min(size[0], size[1]);
-  }
 }
 
 function circle(ctx, r, x, y, z) {
@@ -10226,13 +10234,13 @@ class CircleSymbol extends BaseSymbol {
     super(...arguments), this.type = "circle", this.pathStr = "M0.5,0A0.5,0.5,0,1,1,-0.5,0A0.5,0.5,0,1,1,0.5,0";
   }
   draw(ctx, size, x, y, z) {
-    return circle(ctx, this.parseSize(size) / 2, x, y, z);
+    return circle(ctx, size / 2, x, y, z);
   }
   drawOffset(ctx, size, x, y, offset, z) {
-    return circle(ctx, this.parseSize(size) / 2 + offset, x, y, z);
+    return circle(ctx, size / 2 + offset, x, y, z);
   }
   drawToSvgPath(size, x, y, z) {
-    const r = this.parseSize(size) / 2;
+    const r = size / 2;
     return `M ${x - r}, ${y} a ${r},${r} 0 1,0 ${2 * r},0 a ${r},${r} 0 1,0 -${2 * r},0`;
   }
 }
@@ -10249,10 +10257,10 @@ class CrossSymbol extends BaseSymbol {
     super(...arguments), this.type = "cross", this.pathStr = "M-0.5,-0.2L-0.5,0.2L-0.2,0.2L-0.2,0.5L0.2,0.5L0.2,0.2L0.5,0.2L0.5,-0.2L0.2,-0.2L0.2,-0.5L-0.2,-0.5L-0.2,-0.2Z";
   }
   draw(ctx, size, x, y, z) {
-    return cross(ctx, this.parseSize(size) / 6, x, y, z);
+    return cross(ctx, size / 6, x, y, z);
   }
   drawOffset(ctx, size, x, y, offset, z) {
-    return crossOffset(ctx, this.parseSize(size) / 6, x, y, offset, z);
+    return crossOffset(ctx, size / 6, x, y, offset, z);
   }
 }
 var cross$1 = new CrossSymbol();
@@ -10265,13 +10273,13 @@ class DiamondSymbol extends BaseSymbol {
     super(...arguments), this.type = "diamond", this.pathStr = "M-0.5,0L0,-0.5L0.5,0L0,0.5Z";
   }
   draw(ctx, size, x, y, z) {
-    return diamond(ctx, this.parseSize(size) / 2, x, y, z);
+    return diamond(ctx, size / 2, x, y, z);
   }
   drawFitDir(ctx, size, x, y, z) {
-    return diamond(ctx, this.parseSize(size) / 2, x, y, z);
+    return diamond(ctx, size / 2, x, y, z);
   }
   drawOffset(ctx, size, x, y, offset, z) {
-    return diamond(ctx, this.parseSize(size) / 2 + offset, x, y, z);
+    return diamond(ctx, size / 2 + offset, x, y, z);
   }
 }
 var diamond$1 = new DiamondSymbol();
@@ -10285,10 +10293,10 @@ class SquareSymbol extends BaseSymbol {
     super(...arguments), this.type = "square", this.pathStr = "M-0.5,-0.5h1v1h-1Z";
   }
   draw(ctx, size, x, y) {
-    return square(ctx, this.parseSize(size) / 2, x, y);
+    return square(ctx, size / 2, x, y);
   }
   drawOffset(ctx, size, x, y, offset) {
-    return square(ctx, this.parseSize(size) / 2 + offset, x, y);
+    return square(ctx, size / 2 + offset, x, y);
   }
 }
 var square$1 = new SquareSymbol();
@@ -10302,10 +10310,10 @@ class TriangleUpSymbol extends BaseSymbol {
     super(...arguments), this.type = "triangleUp", this.pathStr = "M0.5,0.5 L-0.5,0.5 L0,-0.5 Z";
   }
   draw(ctx, size, x, y) {
-    return trianglUpOffset(ctx, this.parseSize(size) / 2, x, y);
+    return trianglUpOffset(ctx, size / 2, x, y);
   }
   drawOffset(ctx, size, x, y, offset) {
-    return trianglUpOffset(ctx, this.parseSize(size) / 2, x, y, offset);
+    return trianglUpOffset(ctx, size / 2, x, y, offset);
   }
 }
 var triangleUp = new TriangleUpSymbol();
@@ -10337,10 +10345,10 @@ class StarSymbol extends BaseSymbol {
     super(...arguments), this.type = "star", this.pathStr = "M0 -1L0.22451398828979266 -0.3090169943749474L0.9510565162951535 -0.30901699437494745L0.3632712640026804 0.1180339887498948L0.5877852522924732 0.8090169943749473L8.326672684688674e-17 0.3819660112501051L-0.587785252292473 0.8090169943749476L-0.3632712640026804 0.11803398874989487L-0.9510565162951536 -0.30901699437494723L-0.22451398828979274 -0.30901699437494734Z";
   }
   draw(ctx, size, transX, transY) {
-    return star(ctx, this.parseSize(size) / 2, transX, transY);
+    return star(ctx, size / 2, transX, transY);
   }
   drawOffset(ctx, size, transX, transY, offset) {
-    return star(ctx, this.parseSize(size) / 2 + offset, transX, transY);
+    return star(ctx, size / 2 + offset, transX, transY);
   }
 }
 var star$1 = new StarSymbol();
@@ -10358,10 +10366,10 @@ class ArrowSymbol extends BaseSymbol {
     super(...arguments), this.type = "arrow", this.pathStr = "M-0.07142857142857142,0.5L0.07142857142857142,0.5L0.07142857142857142,-0.0625L0.2,-0.0625L0,-0.5L-0.2,-0.0625L-0.07142857142857142,-0.0625Z";
   }
   draw(ctx, size, transX, transY) {
-    return arrow(ctx, this.parseSize(size) / 2, transX, transY);
+    return arrow(ctx, size / 2, transX, transY);
   }
   drawOffset(ctx, size, transX, transY, offset) {
-    return arrow(ctx, this.parseSize(size) / 2 + offset, transX, transY);
+    return arrow(ctx, size / 2 + offset, transX, transY);
   }
 }
 var arrow$1 = new ArrowSymbol();
@@ -10375,10 +10383,10 @@ class WedgeSymbol extends BaseSymbol {
     super(...arguments), this.type = "wedge", this.pathStr = "M0,-0.5773502691896257L-0.125,0.28867513459481287L0.125,0.28867513459481287Z";
   }
   draw(ctx, size, transX, transY) {
-    return wedge(ctx, this.parseSize(size) / 2, transX, transY);
+    return wedge(ctx, size / 2, transX, transY);
   }
   drawOffset(ctx, size, transX, transY, offset) {
-    return wedge(ctx, this.parseSize(size) / 2 + offset, transX, transY);
+    return wedge(ctx, size / 2 + offset, transX, transY);
   }
 }
 var wedge$1 = new WedgeSymbol();
@@ -10391,10 +10399,10 @@ class StrokeSymbol extends BaseSymbol {
     super(...arguments), this.type = "stroke", this.pathStr = "";
   }
   draw(ctx, size, transX, transY) {
-    return stroke(ctx, this.parseSize(size) / 2, transX, transY);
+    return stroke(ctx, size / 2, transX, transY);
   }
   drawOffset(ctx, size, transX, transY, offset) {
-    return stroke(ctx, this.parseSize(size) / 2 + offset, transX, transY);
+    return stroke(ctx, size / 2 + offset, transX, transY);
   }
 }
 var stroke$1 = new StrokeSymbol();
@@ -10416,10 +10424,10 @@ class WyeSymbol extends BaseSymbol {
     super(...arguments), this.type = "wye", this.pathStr = "M0.25 0.14433756729740646L0.25 0.6443375672974064L-0.25 0.6443375672974064L-0.25 0.14433756729740643L-0.6830127018922193 -0.10566243270259357L-0.4330127018922193 -0.5386751345948129L0 -0.28867513459481287L0.4330127018922193 -0.5386751345948129L0.6830127018922193 -0.10566243270259357Z";
   }
   draw(ctx, size, transX, transY) {
-    return wye(ctx, this.parseSize(size) / 2, transX, transY);
+    return wye(ctx, size / 2, transX, transY);
   }
   drawOffset(ctx, size, transX, transY, offset) {
-    return wye(ctx, this.parseSize(size) / 2 + offset, transX, transY);
+    return wye(ctx, size / 2 + offset, transX, transY);
   }
 }
 var wye$1 = new WyeSymbol();
@@ -10432,10 +10440,10 @@ class TriangleLeftSymbol extends BaseSymbol {
     super(...arguments), this.type = "triangleLeft", this.pathStr = "M-0.5,0 L0.5,0.5 L0.5,-0.5 Z";
   }
   draw(ctx, size, x, y) {
-    return trianglLeftOffset(ctx, this.parseSize(size) / 2, x, y, 0);
+    return trianglLeftOffset(ctx, size / 2, x, y, 0);
   }
   drawOffset(ctx, size, x, y, offset) {
-    return trianglLeftOffset(ctx, this.parseSize(size) / 2, x, y, offset);
+    return trianglLeftOffset(ctx, size / 2, x, y, offset);
   }
 }
 var triangleLeft = new TriangleLeftSymbol();
@@ -10449,10 +10457,10 @@ class TriangleRightSymbol extends BaseSymbol {
     super(...arguments), this.type = "triangleRight", this.pathStr = "M-0.5,0.5 L0.5,0 L-0.5,-0.5 Z";
   }
   draw(ctx, size, x, y) {
-    return trianglRightOffset(ctx, this.parseSize(size) / 2, x, y);
+    return trianglRightOffset(ctx, size / 2, x, y);
   }
   drawOffset(ctx, size, x, y, offset) {
-    return trianglRightOffset(ctx, this.parseSize(size) / 2, x, y, offset);
+    return trianglRightOffset(ctx, size / 2, x, y, offset);
   }
 }
 var triangleRight = new TriangleRightSymbol();
@@ -10466,10 +10474,10 @@ class TriangleDownSymbol extends BaseSymbol {
     super(...arguments), this.type = "triangleDown", this.pathStr = "M-0.5,-0.5 L0.5,-0.5 L0,0.5 Z";
   }
   draw(ctx, size, x, y) {
-    return trianglDownOffset(ctx, this.parseSize(size) / 2, x, y);
+    return trianglDownOffset(ctx, size / 2, x, y);
   }
   drawOffset(ctx, size, x, y, offset) {
-    return trianglDownOffset(ctx, this.parseSize(size) / 2, x, y, offset);
+    return trianglDownOffset(ctx, size / 2, x, y, offset);
   }
 }
 var triangleDown = new TriangleDownSymbol();
@@ -10484,10 +10492,10 @@ class ThinTriangleSymbol extends BaseSymbol {
     super(...arguments), this.type = "thinTriangle", this.pathStr = "M0,-0.5773502691896257L-0.5,0.28867513459481287L0.5,0.28867513459481287Z";
   }
   draw(ctx, size, x, y) {
-    return thinTriangle(ctx, this.parseSize(size) / 2 / sqrt3, x, y);
+    return thinTriangle(ctx, size / 2 / sqrt3, x, y);
   }
   drawOffset(ctx, size, x, y, offset) {
-    return thinTriangle(ctx, this.parseSize(size) / 2 / sqrt3 + offset, x, y);
+    return thinTriangle(ctx, size / 2 / sqrt3 + offset, x, y);
   }
 }
 var thinTriangle$1 = new ThinTriangleSymbol();
@@ -10501,10 +10509,10 @@ class Arrow2LeftSymbol extends BaseSymbol {
     super(...arguments), this.type = "arrow2Left", this.pathStr = "M 0.25 -0.5 L -0.25 0 l 0.25 0.5";
   }
   draw(ctx, size, transX, transY) {
-    return arrow2Left(ctx, this.parseSize(size) / 4, transX, transY);
+    return arrow2Left(ctx, size / 4, transX, transY);
   }
   drawOffset(ctx, size, transX, transY, offset) {
-    return arrow2Left(ctx, this.parseSize(size) / 4 + offset, transX, transY);
+    return arrow2Left(ctx, size / 4 + offset, transX, transY);
   }
 }
 var arrow2Left$1 = new Arrow2LeftSymbol();
@@ -10518,10 +10526,10 @@ class Arrow2RightSymbol extends BaseSymbol {
     super(...arguments), this.type = "arrow2Right", this.pathStr = "M -0.25 -0.5 l 0.25 0 l -0.25 0.5";
   }
   draw(ctx, size, transX, transY) {
-    return arrow2Right(ctx, this.parseSize(size) / 4, transX, transY);
+    return arrow2Right(ctx, size / 4, transX, transY);
   }
   drawOffset(ctx, size, transX, transY, offset) {
-    return arrow2Right(ctx, this.parseSize(size) / 4 + offset, transX, transY);
+    return arrow2Right(ctx, size / 4 + offset, transX, transY);
   }
 }
 var arrow2Right$1 = new Arrow2RightSymbol();
@@ -10535,10 +10543,10 @@ class Arrow2UpSymbol extends BaseSymbol {
     super(...arguments), this.type = "arrow2Up", this.pathStr = "M -0.5 0.25 L 0 -0.25 l 0.5 0.25";
   }
   draw(ctx, size, transX, transY) {
-    return arrow2Up(ctx, this.parseSize(size) / 4, transX, transY);
+    return arrow2Up(ctx, size / 4, transX, transY);
   }
   drawOffset(ctx, size, transX, transY, offset) {
-    return arrow2Up(ctx, this.parseSize(size) / 4 + offset, transX, transY);
+    return arrow2Up(ctx, size / 4 + offset, transX, transY);
   }
 }
 var arrow2Up$1 = new Arrow2UpSymbol();
@@ -10552,10 +10560,10 @@ class Arrow2DownSymbol extends BaseSymbol {
     super(...arguments), this.type = "arrow2Down", this.pathStr = "M -0.5 -0.25 L 0 0.25 l 0.5 -0.25";
   }
   draw(ctx, size, transX, transY) {
-    return arrow2Down(ctx, this.parseSize(size) / 4, transX, transY);
+    return arrow2Down(ctx, size / 4, transX, transY);
   }
   drawOffset(ctx, size, transX, transY, offset) {
-    return arrow2Down(ctx, this.parseSize(size) / 4 + offset, transX, transY);
+    return arrow2Down(ctx, size / 4 + offset, transX, transY);
   }
 }
 var arrow2Down$1 = new Arrow2DownSymbol();
@@ -10568,13 +10576,13 @@ class LineVSymbol extends BaseSymbol {
     super(...arguments), this.type = "lineV", this.pathStr = "M0,-0.5L0,0.5";
   }
   draw(ctx, size, x, y, z) {
-    return lineV(ctx, this.parseSize(size) / 2, x, y);
+    return lineV(ctx, size / 2, x, y);
   }
   drawOffset(ctx, size, x, y, offset, z) {
-    return lineV(ctx, this.parseSize(size) / 2 + offset, x, y);
+    return lineV(ctx, size / 2 + offset, x, y);
   }
   drawToSvgPath(size, x, y, z) {
-    const r = this.parseSize(size) / 2;
+    const r = size / 2;
     return `M ${x}, ${y - r} L ${x},${y + r}`;
   }
 }
@@ -10588,13 +10596,13 @@ class LineHSymbol extends BaseSymbol {
     super(...arguments), this.type = "lineH", this.pathStr = "M-0.5,0L0.5,0";
   }
   draw(ctx, size, x, y, z) {
-    return lineH(ctx, this.parseSize(size) / 2, x, y);
+    return lineH(ctx, size / 2, x, y);
   }
   drawOffset(ctx, size, x, y, offset, z) {
-    return lineH(ctx, this.parseSize(size) / 2 + offset, x, y);
+    return lineH(ctx, size / 2 + offset, x, y);
   }
   drawToSvgPath(size, x, y, z) {
-    const r = this.parseSize(size) / 2;
+    const r = size / 2;
     return `M ${x - r}, ${y} L ${x + r},${y}`;
   }
 }
@@ -10608,13 +10616,13 @@ class CloseSymbol extends BaseSymbol {
     super(...arguments), this.type = "close", this.pathStr = "M-0.5,-0.5L0.5,0.5,M0.5,-0.5L-0.5,0.5";
   }
   draw(ctx, size, x, y, z) {
-    return close(ctx, this.parseSize(size) / 2, x, y);
+    return close(ctx, size / 2, x, y);
   }
   drawOffset(ctx, size, x, y, offset, z) {
-    return close(ctx, this.parseSize(size) / 2 + offset, x, y);
+    return close(ctx, size / 2 + offset, x, y);
   }
   drawToSvgPath(size, x, y, z) {
-    const r = this.parseSize(size) / 2;
+    const r = size / 2;
     return `M ${x - r}, ${y - r} L ${x + r},${y + r} M ${x + r}, ${y - r} L ${x - r},${y + r}`;
   }
 }
@@ -10648,18 +10656,15 @@ class CustomSymbolClass {
     this.pathStr = "", this.type = type, isArray(path) ? this.svgCache = path : this.path = path, this.isSvg = isSvg;
   }
   drawOffset(ctx, size, x, y, offset, z, cb) {
-    return size = this.parseSize(size), this.isSvg ? !!this.svgCache && (this.svgCache.forEach(item => {
+    return this.isSvg ? !!this.svgCache && (this.svgCache.forEach(item => {
       ctx.beginPath(), renderCommandList(item.path.commandList, ctx, x, y, size, size), cb && cb(item.path, item.attribute);
     }), !1) : (renderCommandList(this.path.commandList, ctx, x, y, size + offset, size + offset), !1);
   }
   draw(ctx, size, x, y, z, cb) {
-    return size = this.parseSize(size), this.drawOffset(ctx, size, x, y, 0, z, cb);
-  }
-  parseSize(size) {
-    return isNumber(size) ? size : Math.min(size[0], size[1]);
+    return this.drawOffset(ctx, size, x, y, 0, z, cb);
   }
   bounds(size, bounds) {
-    if (size = this.parseSize(size), this.isSvg) {
+    if (this.isSvg) {
       if (!this.svgCache) return;
       return bounds.clear(), void this.svgCache.forEach(_ref => {
         let {
@@ -11163,11 +11168,7 @@ class Paragraph {
       case "sub":
         baseline += this.descent / 2;
     }
-    "vertical" === direction && (ctx.save(), ctx.rotateAbout(Math.PI / 2, left, baseline), ctx.translate(-this.heightOrigin || -this.lineHeight / 2, -this.descent / 2), ctx.translate(left, baseline), left = 0, baseline = 0);
-    const {
-      lineWidth = 1
-    } = this.character;
-    this.character.stroke && lineWidth && (applyStrokeStyle(ctx, this.character), ctx.strokeText(text, left, baseline)), applyFillStyle(ctx, this.character), this.character.fill && ctx.fillText(text, left, baseline), this.character.fill && ("boolean" == typeof this.character.lineThrough || "boolean" == typeof this.character.underline ? (this.character.underline && ctx.fillRect(left, 1 + baseline, this.widthOrigin || this.width, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1), this.character.lineThrough && ctx.fillRect(left, 1 + baseline - this.ascent / 2, this.widthOrigin || this.width, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1)) : "underline" === this.character.textDecoration ? ctx.fillRect(left, 1 + baseline, this.widthOrigin || this.width, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1) : "line-through" === this.character.textDecoration && ctx.fillRect(left, 1 + baseline - this.ascent / 2, this.widthOrigin || this.width, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1)), "vertical" === direction && ctx.restore();
+    "vertical" === direction && (ctx.save(), ctx.rotateAbout(Math.PI / 2, left, baseline), ctx.translate(-this.heightOrigin || -this.lineHeight / 2, -this.descent / 2), ctx.translate(left, baseline), left = 0, baseline = 0), this.character.stroke && (applyStrokeStyle(ctx, this.character), ctx.strokeText(text, left, baseline)), applyFillStyle(ctx, this.character), this.character.fill && ctx.fillText(text, left, baseline), this.character.fill && ("boolean" == typeof this.character.lineThrough || "boolean" == typeof this.character.underline ? (this.character.underline && ctx.fillRect(left, 1 + baseline, this.widthOrigin || this.width, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1), this.character.lineThrough && ctx.fillRect(left, 1 + baseline - this.ascent / 2, this.widthOrigin || this.width, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1)) : "underline" === this.character.textDecoration ? ctx.fillRect(left, 1 + baseline, this.widthOrigin || this.width, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1) : "line-through" === this.character.textDecoration && ctx.fillRect(left, 1 + baseline - this.ascent / 2, this.widthOrigin || this.width, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1)), "vertical" === direction && ctx.restore();
   }
   getWidthWithEllips(direction) {
     let text = this.text;
@@ -13354,9 +13355,8 @@ class PickerBase {
     return this.canvasRenderer.drawShape(graphic, pickContext, x, y, {}, null, (context, arcAttribute, themeAttribute) => !!picked || (picked = context.isPointInPath(point.x, point.y), picked), (context, arcAttribute, themeAttribute) => {
       if (picked) return !0;
       const lineWidth = arcAttribute.lineWidth || themeAttribute.lineWidth,
-        pickStrokeBuffer = arcAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer,
-        keepStrokeScale = arcAttribute.keepStrokeScale || themeAttribute.keepStrokeScale;
-      return pickContext.lineWidth = keepStrokeScale ? lineWidth + pickStrokeBuffer : getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr), picked = context.isPointInStroke(point.x, point.y), picked;
+        pickStrokeBuffer = arcAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer;
+      return pickContext.lineWidth = getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr), picked = context.isPointInStroke(point.x, point.y), picked;
     }), pickContext.highPerformanceRestore(), picked;
   }
 }
@@ -13578,9 +13578,8 @@ class RectPickerBase {
     if (!onlyTranslate || rect.shadowRoot || isNumber(cornerRadius, !0) && 0 !== cornerRadius || isArray(cornerRadius) && cornerRadius.some(num => 0 !== num)) picked = !1, this.canvasRenderer.drawShape(rect, pickContext, x, y, {}, null, (context, rectAttribute, themeAttribute) => !!picked || (picked = context.isPointInPath(point.x, point.y), picked), (context, rectAttribute, themeAttribute) => {
       if (picked) return !0;
       const lineWidth = rectAttribute.lineWidth || themeAttribute.lineWidth,
-        pickStrokeBuffer = rectAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer,
-        keepStrokeScale = rectAttribute.keepStrokeScale || themeAttribute.keepStrokeScale;
-      return pickContext.lineWidth = keepStrokeScale ? lineWidth + pickStrokeBuffer : getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr), picked = context.isPointInStroke(point.x, point.y), picked;
+        pickStrokeBuffer = rectAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer;
+      return pickContext.lineWidth = getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr), picked = context.isPointInStroke(point.x, point.y), picked;
     });else {
       const {
         fill = rectAttribute.fill,
@@ -13759,9 +13758,8 @@ class BaseLinePicker extends BaseRender {
     return this.canvasRenderer.drawShape(graphic, pickContext, x, y, {}, null, context => !!picked || (picked = context.isPointInPath(pickPoint.x, pickPoint.y), picked), (context, lineAttribute, themeAttribute) => {
       if (picked) return !0;
       const lineWidth = lineAttribute.lineWidth || themeAttribute.lineWidth,
-        pickStrokeBuffer = lineAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer,
-        keepStrokeScale = lineAttribute.keepStrokeScale || themeAttribute.keepStrokeScale;
-      return pickContext.lineWidth = keepStrokeScale ? lineWidth + pickStrokeBuffer : getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr), picked = context.isPointInStroke(pickPoint.x, pickPoint.y), picked;
+        pickStrokeBuffer = lineAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer;
+      return pickContext.lineWidth = getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr), picked = context.isPointInStroke(pickPoint.x, pickPoint.y), picked;
     }), this.canvasRenderer.z = 0, pickContext.modelMatrix !== lastModelMatrix && mat4Allocate.free(pickContext.modelMatrix), pickContext.modelMatrix = lastModelMatrix, pickContext.highPerformanceRestore(), picked;
   }
 }
@@ -13896,9 +13894,8 @@ let DefaultCanvasSymbolPicker = class extends Base3dPicker {
     return this.canvasRenderer.drawShape(symbol, pickContext, x, y, {}, null, (context, symbolAttribute, themeAttribute) => !!picked || (picked = context.isPointInPath(pickPoint.x, pickPoint.y), picked), (context, symbolAttribute, themeAttribute) => {
       if (picked) return !0;
       const lineWidth = symbolAttribute.lineWidth || themeAttribute.lineWidth,
-        pickStrokeBuffer = symbolAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer,
-        keepStrokeScale = symbolAttribute.keepStrokeScale || themeAttribute.keepStrokeScale;
-      return pickContext.lineWidth = keepStrokeScale ? lineWidth + pickStrokeBuffer : getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr), picked = context.isPointInStroke(pickPoint.x, pickPoint.y), picked;
+        pickStrokeBuffer = symbolAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer;
+      return pickContext.lineWidth = getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr), picked = context.isPointInStroke(pickPoint.x, pickPoint.y), picked;
     }), this.canvasRenderer.z = 0, pickContext.modelMatrix !== lastModelMatrix && mat4Allocate.free(pickContext.modelMatrix), pickContext.modelMatrix = lastModelMatrix, pickContext.highPerformanceRestore(), picked;
   }
 };
@@ -14458,374 +14455,92 @@ class ScrollBar extends AbstractComponent {
         const [min, max] = clampRange(limitRange, 0, 1);
         const { width, height, x1, y1 } = this.getSliderRenderBounds();
         const sliderSize = this._sliderSize;
-        return direction === 'horizontal'
-            ? clampRange([x1 + min * width, x1 + max * width], x1, width - sliderSize)
-            : clampRange([y1 + min * height, y1 + max * height], y1, height - sliderSize);
-    }
-    _reset() {
-        this._sliderRenderBounds = null;
-        this._sliderLimitRange = null;
-    }
-}
-ScrollBar.defaultAttributes = {
-    direction: 'horizontal',
-    round: true,
-    sliderSize: 20,
-    sliderStyle: {
-        fill: 'rgba(0, 0, 0, .5)'
-    },
-    railStyle: {
-        fill: 'rgba(0, 0, 0, .0)'
-    },
-    padding: 2,
-    scrollRange: [0, 1],
-    delayType: 'throttle',
-    delayTime: 0,
-    realTime: true
-};
-
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-function __rest(s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-}
-function __decorate(decorators, target, key, desc) {
-  var c = arguments.length,
-    r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
-    d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-}
-function __awaiter(thisArg, _arguments, P, generator) {
-  function adopt(value) {
-    return value instanceof P ? value : new P(function (resolve) {
-      resolve(value);
-    });
-  }
-  return new (P || (P = Promise))(function (resolve, reject) {
-    function fulfilled(value) {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-    function rejected(value) {
-      try {
-        step(generator["throw"](value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-    function step(result) {
-      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
-    }
-    step((generator = generator.apply(thisArg, _arguments || [])).next());
-  });
-}
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-  var e = new Error(message);
-  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
-var ScrollBarPlugin_1;
-let ScrollBarPlugin = ScrollBarPlugin_1 = class ScrollBarPlugin {
-    constructor() {
-        this.name = 'scrollbar';
-        this.activeEvent = 'onRegister';
-        this._uid = Generator.GenAutoIncrementId();
-        this.key = this.name + this._uid;
-        this.scroll = (e) => {
-            var _a, _b;
-            const graphic = e.target;
-            const data = this.getScrollContainer(graphic);
-            if (!data && !this.scrollContainer) {
-                return;
-            }
-            if (!data && this.scrollContainer) {
-                if (!this.scrollContainer.g.stage || this.scrollContainer.g.stage !== graphic.stage) {
-                    return;
-                }
-                const newScrollContainer = this.formatScrollContainer(this.scrollContainer.g);
-                if (!newScrollContainer) {
-                    this.clearScrollbar(this.scrollContainer.g, 'all');
-                    return;
-                }
-                if (this.scrollContainer.showH && !newScrollContainer.showH) {
-                    this.clearScrollbar(this.scrollContainer.g, 'horizontal');
-                }
-                if (this.scrollContainer.showV && !newScrollContainer.showV) {
-                    this.clearScrollbar(this.scrollContainer.g, 'vertical');
-                }
-                this.scrollContainer = newScrollContainer;
-            }
-            else if (data && this.scrollContainer && data.g !== this.scrollContainer.g) {
-                this.clearScrollbar(this.scrollContainer.g, 'all');
-            }
-            this.scrollContainer = data !== null && data !== void 0 ? data : this.scrollContainer;
-            const scrollContainer = data.g;
-            const { width, height, scrollX = 0, scrollY = 0 } = scrollContainer.attribute;
-            let newScrollX = scrollX;
-            let newScrollY = scrollY;
-            let { showH, showV } = data;
-            this.scrollContainerBounds = new Bounds().set(0, 0, scrollContainer.attribute.width, scrollContainer.attribute.height);
-            if (showH && showH) {
-                if (abs(e.deltaX) > abs(e.deltaY)) {
-                    showH = showH && true;
-                    showV = showV && false;
-                }
-                else {
-                    showH = showH && false;
-                    showV = showV && true;
-                }
-            }
-            const childrenBounds = this.childrenBounds;
-            childrenBounds.clear();
-            childrenBounds.set(0, 0, scrollContainer.AABBBounds.width(), scrollContainer.AABBBounds.height());
-            const scrollWidth = childrenBounds.width();
-            const scrollHeight = childrenBounds.height();
-            if (showH) {
-                newScrollX = Math.max(Math.min(((_a = e.deltaX) !== null && _a !== void 0 ? _a : 0) - scrollX, scrollWidth - width), 0);
-            }
-            else {
-                newScrollX = -scrollX;
-            }
-            if (showV) {
-                newScrollY = Math.max(Math.min(((_b = e.deltaY) !== null && _b !== void 0 ? _b : 0) - scrollY, scrollHeight - height), 0);
-            }
-            else {
-                newScrollY = -scrollY;
-            }
-            childrenBounds.translate(-newScrollX, -newScrollY);
-            this.addOrUpdateScroll(showH, showV, scrollContainer.parent, scrollContainer);
-            scrollContainer.setAttributes({
-                scrollX: -newScrollX,
-                scrollY: -newScrollY
-            });
-        };
-        this.handleScrollBarChange = (params) => {
-            if (!this.scrollContainer ||
-                !this.scrollContainerBounds ||
-                !this.childrenBounds ||
-                !params ||
-                !params.target ||
-                !params.detail ||
-                !params.detail.value) {
-                return;
-            }
-            const scrollbar = params.target;
-            const newRange = params.detail.value;
-            if (scrollbar.attribute.direction === 'horizontal') {
-                const scrollWidth = this.childrenBounds.width();
-                this.scrollContainer.g.setAttributes({ scrollX: -newRange[0] * scrollWidth });
-            }
-            else {
-                const scrollHeight = this.childrenBounds.height();
-                this.scrollContainer.g.setAttributes({ scrollY: -newRange[0] * scrollHeight });
-            }
-        };
-    }
-    activate(context) {
-        this.pluginService = context;
-        const { stage } = this.pluginService;
-        this.childrenBounds = new AABBBounds();
-        stage.addEventListener('wheel', this.scroll);
-        this.params = ScrollBarPlugin_1.defaultParams;
-    }
-    initEventOfScrollbar(scrollContainer, scrollbar, isHorozntal) {
-        scrollContainer.addEventListener('pointerover', () => {
-            scrollbar.setAttribute('visibleAll', true);
-        });
-        scrollContainer.addEventListener('pointermove', () => {
-            scrollbar.setAttribute('visibleAll', true);
-        });
-        scrollContainer.addEventListener('pointerout', () => {
-            scrollbar.setAttribute('visibleAll', false);
-        });
-        scrollbar.addEventListener('pointerover', () => {
-            scrollbar.setAttribute('visibleAll', true);
-        });
-        scrollbar.addEventListener('pointerout', () => {
-            scrollbar.setAttribute('visibleAll', true);
-        });
-        scrollbar.addEventListener('scrollUp', this.handleScrollBarChange);
-        scrollbar.addEventListener(SCROLLBAR_EVENT, this.handleScrollBarChange);
-    }
-    addOrUpdateScroll(showH, showV, container, scrollContainer) {
-        if (showH) {
-            const { scrollBar: hScrollbar, isUpdate } = this.addOrUpdateHScroll(scrollContainer, container, true);
-            if (!isUpdate) {
-                this.initEventOfScrollbar(scrollContainer, hScrollbar, true);
-            }
-        }
-        else {
-            this.clearScrollbar(scrollContainer, 'horizontal');
-        }
-        if (showV) {
-            const { scrollBar: vScrollbar, isUpdate } = this.addOrUpdateHScroll(scrollContainer, container, false);
-            if (!isUpdate) {
-                this.initEventOfScrollbar(scrollContainer, vScrollbar, false);
-            }
-        }
-        else {
-            this.clearScrollbar(scrollContainer, 'vertical');
-        }
-    }
-    getDirection(isHorozntal) {
-        return isHorozntal ? 'horizontal' : 'vertical';
-    }
-    addOrUpdateHScroll(scrollContainer, container, isHorozntal) {
-        var _a;
-        const direction = this.getDirection(isHorozntal);
-        const name = `${(_a = scrollContainer.name) !== null && _a !== void 0 ? _a : scrollContainer._uid}_${this.getDirection(isHorozntal)}_${this.name}`;
-        const scrollbars = container.children.filter((g) => g.name === name);
-        let isUpdate = true;
-        let scrollBar = scrollbars[0];
-        const { y = 0, dy = 0, x = 0, dx = 0, height, width, zIndex = 0 } = this.scrollContainer.g.attribute;
-        const attrs = {
-            x: 0,
-            y: 0,
-            direction,
-            zIndex: zIndex + 1,
-            visibleAll: true,
-            padding: [2, 0],
-            railStyle: {
-                fill: 'rgba(0, 0, 0, .1)'
-            },
-            range: [0, 0.05]
-        };
-        if (isHorozntal) {
-            attrs.width = this.scrollContainerBounds.width();
-            attrs.height = 12;
-        }
-        else {
-            attrs.height = this.scrollContainerBounds.height();
-            attrs.width = 12;
-        }
-        if (!scrollBar) {
-            isUpdate = false;
-            scrollBar = new ScrollBar(attrs);
-            scrollBar.name = name;
-            container.add(scrollBar);
-            scrollBar.isScrollBar = true;
-        }
-        else if (scrollbars.length > 1) {
-            scrollbars.forEach((child, index) => {
-                var _a;
-                if (index) {
-                    (_a = child.parent) === null || _a === void 0 ? void 0 : _a.removeChild(child);
-                }
-            });
-        }
-        const childrenBounds = this.childrenBounds;
-        if (isHorozntal) {
-            const ratio = Math.min(this.scrollContainerBounds.width() / childrenBounds.width(), 1);
-            const start = Math.max(Math.min(this.childrenBounds.x1 / this.childrenBounds.width(), 0), ratio - 1);
-            attrs.x = x + dx;
-            attrs.y = y + dy + height - this.scrollContainerBounds.height();
-            attrs.range = [-start, -start + ratio];
-        }
-        else {
-            const ratio = Math.min(this.scrollContainerBounds.height() / childrenBounds.height(), 1);
-            const start = Math.max(Math.min(this.childrenBounds.y1 / this.childrenBounds.height(), 0), ratio - 1);
-            attrs.x = x + dx + width - this.scrollContainerBounds.width();
-            attrs.y = y + dy;
-            attrs.range = [-start, -start + ratio];
-        }
-        scrollBar.setAttributes(attrs);
-        return {
-            scrollBar,
-            isUpdate
-        };
-    }
-    clearScrollbar(scrollContainer, type) {
-        if (!scrollContainer.parent) {
-            return;
-        }
-        const scrollbarBars = scrollContainer.parent.children.filter((child) => {
-            return child.isScrollBar && (type === 'all' || child.attribute.direction === type);
-        });
-        scrollbarBars.forEach((child) => {
-            child.parent.removeChild(child);
-        });
-    }
-    formatScrollContainer(g) {
-        if (!g || g.type !== 'group' || !g.attribute) {
-            return null;
-        }
-        const { overflow, width, height } = g.attribute;
-        if (!overflow || overflow === 'hidden') {
-            return null;
-        }
-        let showH = false;
-        let showV = false;
-        if (overflow === 'scroll') {
-            showH = true;
-            showV = true;
-        }
-        else {
-            showH = overflow === 'scroll-x';
-            showV = !showH;
-        }
-        if (!g.AABBBounds.empty()) {
-            if (showH) {
-                showH = width < g.AABBBounds.width();
-            }
-            if (showV) {
-                showV = height < g.AABBBounds.height();
-            }
-        }
-        return showH || showV ? { g: g, showH, showV } : null;
-    }
-    getScrollContainer(graphic) {
-        let g = graphic;
-        while (g) {
-            const res = this.formatScrollContainer(g);
-            if (res) {
-                return res;
-            }
-            g = g.parent;
-        }
-        return null;
+        return direction === 'horizontal'
+            ? clampRange([x1 + min * width, x1 + max * width], x1, width - sliderSize)
+            : clampRange([y1 + min * height, y1 + max * height], y1, height - sliderSize);
     }
-    deactivate(context) {
-        const { stage } = this.pluginService;
-        stage.removeEventListener('wheel', this.scroll);
+    _reset() {
+        this._sliderRenderBounds = null;
+        this._sliderLimitRange = null;
     }
+}
+ScrollBar.defaultAttributes = {
+    direction: 'horizontal',
+    round: true,
+    sliderSize: 20,
+    sliderStyle: {
+        fill: 'rgba(0, 0, 0, .5)'
+    },
+    railStyle: {
+        fill: 'rgba(0, 0, 0, .0)'
+    },
+    padding: 2,
+    scrollRange: [0, 1],
+    delayType: 'throttle',
+    delayTime: 0,
+    realTime: true
 };
-ScrollBarPlugin.defaultParams = {
-    timeout: 500
-};
-ScrollBarPlugin = ScrollBarPlugin_1 = __decorate([
-    injectable()
-], ScrollBarPlugin);
 
-const scrollbarModule = new ContainerModule((bind, unbind, isBound, rebind) => {
-    if (!isBound(ScrollBarPlugin)) {
-        bind(ScrollBarPlugin).toSelf();
-        bind(AutoEnablePlugins).toService(ScrollBarPlugin);
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+function __rest(s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+}
+function __decorate(decorators, target, key, desc) {
+  var c = arguments.length,
+    r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+    d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+function __awaiter(thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
     }
-});
-function loadScrollbar() {
-    container.load(scrollbarModule);
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
 }
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+  var e = new Error(message);
+  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 function traverseGroup(group, cb) {
     group.forEachChildren(node => {
@@ -16284,29 +15999,24 @@ function defaultLabelPosition(type) {
             return DefaultPositions;
     }
 }
-function clampText(text, width, height, padding = {}) {
+function clampText(text, width, height) {
     const { x1, x2, y1, y2 } = text.AABBBounds;
-    const { top = 0, left = 0, right = 0, bottom = 0 } = padding;
     const minX = Math.min(x1, x2);
     const maxX = Math.max(x1, x2);
     const minY = Math.min(y1, y2);
     const maxY = Math.max(y1, y2);
-    const minXWithPadding = 0 - left;
-    const maxXWithPadding = width + right;
-    const minYWithPadding = 0 - top;
-    const maxYWithPadding = height + bottom;
     let dx = 0;
     let dy = 0;
-    if (minX < minXWithPadding && maxX - minX <= width) {
+    if (minX < 0 && maxX - minX <= width) {
         dx = -minX;
     }
-    else if (maxX > maxXWithPadding && minX - (maxX - width) >= minXWithPadding) {
+    else if (maxX > width && minX - (maxX - width) >= 0) {
         dx = width - maxX;
     }
-    if (minY < minYWithPadding && maxY - minY <= height) {
+    if (minY < 0 && maxY - minY <= height) {
         dy = -minY;
     }
-    else if (maxY > maxYWithPadding && minY - (maxY - height) >= minYWithPadding) {
+    else if (maxY > height && minY - (maxY - height) >= 0) {
         dy = height - maxY;
     }
     return { dx, dy };
@@ -16606,121 +16316,56 @@ function loadLabelComponent() {
     registerLine();
 }
 
-const isIntersect = (top, bottom) => {
-    return Math.ceil(top) > Math.floor(bottom);
-};
-const isXIntersect = ([a, b], [c, d]) => {
-    return d > a && b > c;
-};
-function getIntersectionLength(range1, range2) {
-    const [start1, end1] = range1;
-    const [start2, end2] = range2;
-    const start = Math.max(start1, start2);
-    const end = Math.min(end1, end2);
-    return Math.max(0, end - start);
-}
-function shiftY(texts, option) {
-    const { maxIterations = 10, maxError = 0.1, padding = 1, maxY = Number.MAX_VALUE, labelling } = option;
+function shiftY(texts, option = {}) {
+    const { maxIterations = 10, maxError = 0.1, padding = 1, maxY = Number.MAX_VALUE } = option;
     const n = texts.length;
     if (n <= 1) {
         return texts;
     }
-    const xMap = new Map();
+    const isIntersect = ([a, b], [c, d]) => {
+        return d > a && b > c;
+    };
     const textInformation = new Map();
-    const getY1Initial = (text) => textInformation.get(text).y1Initial;
-    const getHeight = (text) => textInformation.get(text).height;
-    const getY1 = (text) => textInformation.get(text).y1;
+    const getY0 = (text) => textInformation.get(text).y0;
     const getY = (text) => textInformation.get(text).y;
-    const getX = (text) => textInformation.get(text).x;
+    const getHeight = (text) => textInformation.get(text).height;
     const getX1 = (text) => textInformation.get(text).x1;
     const getX2 = (text) => textInformation.get(text).x2;
-    const setY1 = (text, y) => {
-        textInformation.get(text).y1 = y;
+    const setY = (text, y) => {
+        textInformation.get(text).y = y;
     };
-    function adjustPositionInOneGroup(texts) {
-        if (texts.length === 1) {
-            return;
-        }
-        for (let i = texts.length - 1; i > 0; i--) {
-            const curText = texts[i];
-            const upperText = texts[i - 1];
-            const lowerText = texts[i + 1];
-            if (isIntersect(getY1(upperText) + getHeight(upperText), getY1(curText))) {
-                const { y } = labelling(curText);
-                if (!lowerText || !isIntersect(y + getHeight(curText) / 2, getY1(lowerText))) {
-                    if (y + getHeight(curText) / 2 <= maxY) {
-                        setY1(curText, getY1(curText) + y - getY(curText));
-                    }
-                }
-            }
-        }
-    }
-    texts.sort((a, b) => a.attribute.x - b.attribute.x);
     for (const text of texts) {
         const { y1, y2, x1, x2 } = text.AABBBounds;
-        const { x, y } = text.attribute;
-        textInformation.set(text, { y1Initial: y1, y1, y2, y, height: y2 - y1, x1, x2, x });
-        let hasRange = false;
-        for (const [range, xGroupTexts] of xMap) {
-            const { start, end } = range;
-            if (x1 >= start && x2 <= end) {
-                xGroupTexts.push(text);
-                hasRange = true;
-            }
-            else if (isNumberClose(x, getX(xGroupTexts[0]), undefined, 5)) {
-                const newRange = { start: Math.min(start, x1), end: Math.max(end, x2) };
-                xGroupTexts.push(text);
-                xMap.set(newRange, xGroupTexts);
-                xMap.delete(range);
-                hasRange = true;
-            }
-            else if (getIntersectionLength([start, end], [x1, x2]) / (end - start) > 0.5) {
-                const newRange = { start: Math.min(start, x1), end: Math.max(end, x2) };
-                xGroupTexts.push(text);
-                xMap.set(newRange, xGroupTexts);
-                xMap.delete(range);
-                hasRange = true;
-            }
-            if (hasRange) {
-                break;
-            }
-        }
-        if (!hasRange) {
-            xMap.set({ start: x1, end: x2 }, [text]);
-        }
-    }
-    for (const xTexts of xMap.values()) {
-        xTexts.sort((a, b) => getY1Initial(a) - getY1Initial(b));
-        adjustPositionInOneGroup(xTexts);
+        textInformation.set(text, { y0: y1, y: y1, height: y2 - y1, x1, x2 });
     }
     for (let iter = 0; iter < maxIterations; iter++) {
-        texts.sort((a, b) => getY1(a) - getY1(b));
+        texts.sort((a, b) => getY(a) - getY(b));
         let error = 0;
         for (let i = 0; i < n - 1; i++) {
             const curText = texts[i];
             let j = i + 1;
             let nextText;
             while ((nextText = texts[j]) &&
-                !isXIntersect([getX1(curText), getX2(curText)], [getX1(nextText), getX2(nextText)])) {
+                !isIntersect([getX1(curText), getX2(curText)], [getX1(nextText), getX2(nextText)])) {
                 j += 1;
             }
             if (nextText) {
-                const y1 = getY1(curText);
+                const y0 = getY(curText);
                 const h0 = getHeight(curText);
-                const nextY1 = getY1(nextText);
-                const delta = nextY1 - (y1 + h0);
+                const y1 = getY(nextText);
+                const delta = y1 - (y0 + h0);
                 if (delta < padding) {
                     const newDelta = (padding - delta) / 2;
                     error = Math.max(error, newDelta);
                     if (y1 + newDelta + getHeight(nextText) > maxY) {
-                        setY1(curText, y1 - (padding - delta));
+                        setY(curText, y0 - (padding - delta));
                     }
-                    else if (y1 - newDelta < 0) {
-                        setY1(nextText, nextY1 + (padding - delta));
+                    else if (y0 - newDelta < 0) {
+                        setY(nextText, y1 + (padding - delta));
                     }
                     else {
-                        setY1(curText, y1 - newDelta);
-                        setY1(nextText, nextY1 + newDelta);
+                        setY(curText, y0 - newDelta);
+                        setY(nextText, y1 + newDelta);
                     }
                 }
             }
@@ -16730,25 +16375,10 @@ function shiftY(texts, option) {
         }
     }
     for (const text of texts) {
-        const finalY = text.attribute.y + getY1(text) - getY1Initial(text);
+        const finalY = text.attribute.y + getY(text) - getY0(text);
         text.setAttribute('y', finalY);
     }
-    const result = [];
-    texts.sort((a, b) => a.attribute.x - b.attribute.x);
-    let start = 0;
-    let end = texts.length - 1;
-    while (start <= end) {
-        if (start === end) {
-            result.push(texts[start]);
-        }
-        else {
-            result.push(texts[start]);
-            result.push(texts[end]);
-        }
-        start++;
-        end--;
-    }
-    return result;
+    return texts;
 }
 
 loadLabelComponent();
@@ -17094,25 +16724,18 @@ class LabelBase extends AbstractComponent {
         if (clampForce) {
             for (let i = 0; i < result.length; i++) {
                 const text = labels[i];
-                const { dx = 0, dy = 0 } = clampText(text, bmpTool.width, bmpTool.height, bmpTool.padding);
+                const { dx = 0, dy = 0 } = clampText(text, bmpTool.width, bmpTool.height);
                 if (dx !== 0 || dy !== 0) {
                     text.setAttributes({ x: text.attribute.x + dx, y: text.attribute.y + dy });
-                    text._isClamped = true;
                 }
             }
         }
-        result = shiftY(result, Object.assign(Object.assign({ maxY: bmpTool.height }, strategy), { labelling: (text) => {
-                const baseMark = this.getRelatedGraphic(text.attribute);
-                const graphicBound = this._isCollectionBase
-                    ? this.getGraphicBounds(null, this._idToPoint.get(text.attribute.id))
-                    : this.getGraphicBounds(baseMark, text);
-                return this.labeling(text.AABBBounds, graphicBound, 'bottom', this.attribute.offset);
-            } }));
+        result = shiftY(result, Object.assign({ maxY: bmpTool.height }, strategy));
         for (let i = 0; i < result.length; i++) {
             const text = result[i];
             const bounds = text.AABBBounds;
             const range = boundToRange(bmpTool, bounds, true);
-            if (canPlace(bmpTool, bitmap, bounds, clampForce, text._isClamped ? 0 : overlapPadding)) {
+            if (canPlace(bmpTool, bitmap, bounds, clampForce, overlapPadding)) {
                 bitmap.setRange(range);
             }
             else {
@@ -17185,7 +16808,7 @@ class LabelBase extends AbstractComponent {
                 }
             }
             if (!hasPlace && clampForce) {
-                const { dx = 0, dy = 0 } = clampText(text, bmpTool.width, bmpTool.height, bmpTool.padding);
+                const { dx = 0, dy = 0 } = clampText(text, bmpTool.width, bmpTool.height);
                 if (dx === 0 && dy === 0) {
                     if (canPlace(bmpTool, bitmap, text.AABBBounds)) {
                         bitmap.setRange(boundToRange(bmpTool, text.AABBBounds, true));
@@ -17669,9 +17292,6 @@ class ArcLabel extends LabelBase {
         this._alignOffset = 0;
     }
     _overlapping(labels) {
-        if (['inside', 'inside-center'].includes(this.attribute.position)) {
-            return super._overlapping(labels);
-        }
         return labels;
     }
     labeling(textBounds, graphicBounds, position = 'outside', offset = 0) {
@@ -29938,6 +29558,690 @@ EmptyTip.defaultAttributes = {
     }
 };
 
-const version = "0.21.0-alpha.11";
+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;
+
+class GifImage extends Image {
+    constructor(params) {
+        super(params);
+        this.isGifImage = true;
+        this.loadGif();
+    }
+    loadGif() {
+        if (isString(this.attribute.gifImage)) {
+            ResourceLoader.GetFile(this.attribute.gifImage, 'arrayBuffer')
+                .then((res) => {
+                const gif = parseGIF_1(res);
+                const frames = decompressFrames_1(gif, true);
+                this.renderGIF(frames);
+            })
+                .catch(e => {
+                console.error('Gif load error: ', e);
+            });
+        }
+        else if (this.attribute.gifImage instanceof ArrayBuffer) {
+            const gif = parseGIF_1(this.attribute.gifImage);
+            const frames = decompressFrames_1(gif, true);
+            this.renderGIF(frames);
+        }
+    }
+    renderGIF(frames) {
+        this.loadedFrames = frames;
+        this.frameIndex = 0;
+        if (!this.tempCanvas) {
+            this.tempCanvas = application.global.createCanvas({});
+            this.tempCtx = this.tempCanvas.getContext('2d');
+        }
+        if (!this.gifCanvas) {
+            this.gifCanvas = application.global.createCanvas({});
+            this.gifCtx = this.gifCanvas.getContext('2d');
+        }
+        this.gifCanvas.width = frames[0].dims.width;
+        this.gifCanvas.height = frames[0].dims.height;
+        this.playing = true;
+        this.lastTime = new Date().getTime();
+        const animation = this.animate();
+        if (this.attribute.timeline) {
+            animation.setTimeline(this.attribute.timeline);
+        }
+        animation.to({}, 1000, 'linear').loop(Infinity);
+    }
+    renderFrame(context, x, y) {
+        const frame = this.loadedFrames[this.frameIndex || 0];
+        if (frame.disposalType === 2) {
+            this.gifCtx.clearRect(0, 0, this.gifCanvas.width, this.gifCanvas.height);
+        }
+        this.drawPatch(frame);
+        this.manipulate(context, x, y);
+        const diff = new Date().getTime() - this.lastTime;
+        if (frame.delay < diff) {
+            this.frameIndex++;
+            this.lastTime = new Date().getTime();
+        }
+        if (this.frameIndex >= this.loadedFrames.length) {
+            this.frameIndex = 0;
+        }
+    }
+    drawPatch(frame) {
+        const dims = frame.dims;
+        if (!this.frameImageData ||
+            dims.width !== this.frameImageData.width ||
+            dims.height !== this.frameImageData.height) {
+            this.tempCanvas.width = dims.width;
+            this.tempCanvas.height = dims.height;
+            this.frameImageData = this.tempCtx.createImageData(dims.width, dims.height);
+        }
+        this.frameImageData.data.set(frame.patch);
+        this.tempCtx.putImageData(this.frameImageData, 0, 0);
+        this.gifCtx.drawImage(this.tempCanvas, dims.left, dims.top);
+    }
+    manipulate(context, x, y) {
+        context.drawImage(this.gifCanvas, 0, 0, this.gifCanvas.width, this.gifCanvas.height, x, y, this.attribute.width, this.attribute.height);
+    }
+    setAttribute(key, value, forceUpdateTag, context) {
+        super.setAttribute(key, value, forceUpdateTag, context);
+        if (key === 'gifImage') {
+            this.loadGif();
+        }
+    }
+    setAttributes(params, forceUpdateTag, context) {
+        super.setAttributes(params, forceUpdateTag, context);
+        if (params.gifImage) {
+            this.loadGif();
+        }
+    }
+}
+
+const version = "0.21.0-alpha.13";
 
-export { AXIS_ELEMENT_NAME, AbstractComponent, ArcInfo, ArcLabel, ArcSegment, AxisStateValue, BasePlayer, Brush, CheckBox, CircleAxis, CircleAxisGrid, CircleCrosshair, ColorContinuousLegend, ContinuousPlayer, DEFAULT_ITEM_SPACE_COL, DEFAULT_ITEM_SPACE_ROW, DEFAULT_LABEL_SPACE, DEFAULT_PAGER_SPACE, DEFAULT_SHAPE_SIZE, DEFAULT_SHAPE_SPACE, DEFAULT_STATES$1 as DEFAULT_STATES, DEFAULT_TITLE_SPACE, DEFAULT_VALUE_SPACE, DataLabel, DataZoom, DataZoomActiveTag, DirectionEnum, DiscreteLegend, DiscretePlayer, EmptyTip, GroupTransition, IMarkAreaLabelPosition, IMarkCommonArcLabelPosition, IMarkLineLabelPosition, IMarkPointItemPosition, IOperateType, Indicator, LEGEND_ELEMENT_NAME, LabelBase, LegendEvent, LegendStateValue, LineAxis, LineAxisGrid, LineCrosshair, LineLabel, LinkPath, MarkArcArea, MarkArcLine, MarkArea, MarkLine, MarkPoint, Pager, PlayerEventEnum, PolygonCrosshair, PopTip, Radio, RectCrosshair, RectLabel, SLIDER_ELEMENT_NAME, ScrollBar, SectorCrosshair, Segment, SizeContinuousLegend, Slider, SymbolLabel, Tag, Timeline, Title, Tooltip, TopZIndex, VTag, alignTextInLine, angle, angleLabelOrientAttribute, angleTo, cartesianTicks, clampRadian, computeOffsetForlimit, continuousTicks, contrastAccessibilityChecker, convertDomainToTickData, createTextGraphicByType, deltaXYToAngle, fuzzyEqualNumber, getAxisBreakSymbolAttrs, getCircleLabelPosition, getCirclePoints, getCircleVerticalVector, getElMap, getHorizontalPath, getMarksByName, getNoneGroupMarksByName, getPolarAngleLabelPosition, getPolygonPath, getSizeHandlerPath, getTextAlignAttrOfVerticalDir, getTextType, getVerticalCoord, getVerticalPath, hasOverlap, htmlAttributeTransform, initTextMeasure, isInRange, isPostiveXAxis, isRichText, isVisible, labelSmartInvert, length, limitShapeInBounds, linearDiscreteTicks, loadPoptip, loadScrollbar, measureTextSize, normalize, polarAngleAxisDiscreteTicks, polarTicks, reactAttributeTransform, registerArcDataLabel, registerLineDataLabel, registerMarkArcAreaAnimate, registerMarkArcLineAnimate, registerMarkAreaAnimate, registerMarkLineAnimate, registerMarkPointAnimate, registerRectDataLabel, registerSymbolDataLabel, removeRepeatPoint, richTextAttributeTransform, scale, scrollbarModule, setPoptipTheme, smartInvertStrategy, tan2AngleToAngle, textIntersect, ticks, traverseGroup, version };
+export { AXIS_ELEMENT_NAME, AbstractComponent, ArcInfo, ArcLabel, ArcSegment, AxisStateValue, BasePlayer, Brush, CheckBox, CircleAxis, CircleAxisGrid, CircleCrosshair, ColorContinuousLegend, ContinuousPlayer, DEFAULT_ITEM_SPACE_COL, DEFAULT_ITEM_SPACE_ROW, DEFAULT_LABEL_SPACE, DEFAULT_PAGER_SPACE, DEFAULT_SHAPE_SIZE, DEFAULT_SHAPE_SPACE, DEFAULT_STATES$1 as DEFAULT_STATES, DEFAULT_TITLE_SPACE, DEFAULT_VALUE_SPACE, DataLabel, DataZoom, DataZoomActiveTag, DirectionEnum, DiscreteLegend, DiscretePlayer, EmptyTip, GifImage, GroupTransition, IMarkAreaLabelPosition, IMarkCommonArcLabelPosition, IMarkLineLabelPosition, IMarkPointItemPosition, IOperateType, Indicator, LEGEND_ELEMENT_NAME, LabelBase, LegendEvent, LegendStateValue, LineAxis, LineAxisGrid, LineCrosshair, LineLabel, LinkPath, MarkArcArea, MarkArcLine, MarkArea, MarkLine, MarkPoint, Pager, PlayerEventEnum, PolygonCrosshair, PopTip, Radio, RectCrosshair, RectLabel, SLIDER_ELEMENT_NAME, ScrollBar, SectorCrosshair, Segment, SizeContinuousLegend, Slider, SymbolLabel, Tag, Timeline, Title, Tooltip, TopZIndex, VTag, alignTextInLine, angle, angleLabelOrientAttribute, angleTo, cartesianTicks, clampRadian, computeOffsetForlimit, continuousTicks, contrastAccessibilityChecker, convertDomainToTickData, createTextGraphicByType, deltaXYToAngle, fuzzyEqualNumber, getAxisBreakSymbolAttrs, getCircleLabelPosition, getCirclePoints, getCircleVerticalVector, getElMap, getHorizontalPath, getMarksByName, getNoneGroupMarksByName, getPolarAngleLabelPosition, getPolygonPath, getSizeHandlerPath, getTextAlignAttrOfVerticalDir, getTextType, getVerticalCoord, getVerticalPath, hasOverlap, htmlAttributeTransform, initTextMeasure, isInRange, isPostiveXAxis, isRichText, isVisible, labelSmartInvert, length, limitShapeInBounds, linearDiscreteTicks, loadPoptip, measureTextSize, normalize, polarAngleAxisDiscreteTicks, polarTicks, reactAttributeTransform, registerArcDataLabel, registerLineDataLabel, registerMarkArcAreaAnimate, registerMarkArcLineAnimate, registerMarkAreaAnimate, registerMarkLineAnimate, registerMarkPointAnimate, registerRectDataLabel, registerSymbolDataLabel, removeRepeatPoint, richTextAttributeTransform, scale, setPoptipTheme, smartInvertStrategy, tan2AngleToAngle, textIntersect, ticks, traverseGroup, version };