@visactor/vrender-components 0.21.0-alpha.4 → 0.21.0-beta.0

package/dist/index.es.js

@@ -2086,7 +2086,8 @@ const DefaultAttribute = Object.assign(Object.assign(Object.assign({
   globalZIndex: 1,
   globalCompositeOperation: "",
   overflow: "hidden",
-  shadowPickMode: "graphic"
+  shadowPickMode: "graphic",
+  keepStrokeScale: !1
 }, DefaultDebugAttribute), DefaultStyle), DefaultTransform);
 const DefaultArcAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
   startAngle: 0,
@@ -4372,7 +4373,7 @@ class ResourceLoader {
   }
   static GetFile(url, type) {
     let data = ResourceLoader.cache.get(url);
-    return data ? "fail" === data.loadState ? Promise.reject() : "init" === data.loadState || "loading" === data.loadState ? data.dataPromise.then(data => data.data) : Promise.resolve(data.data) : (data = {
+    return data ? "init" === data.loadState || "fail" === data.loadState ? Promise.reject() : "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));
@@ -6517,7 +6518,7 @@ class BaseRender {
   }
 }
 
-const parse$1 = function () {
+const parse = function () {
   const tokens = {
     linearGradient: /^(linear\-gradient)/i,
     radialGradient: /^(radial\-gradient)/i,
@@ -6670,7 +6671,7 @@ class GradientParser {
   }
   static Parse(c) {
     if (GradientParser.IsGradientStr(c)) try {
-      const datum = parse$1(c)[0];
+      const datum = parse(c)[0];
       if (datum) {
         if ("linear" === datum.type) return GradientParser.ParseLinear(datum);
         if ("radial" === datum.type) return GradientParser.ParseRadial(datum);
@@ -7027,7 +7028,8 @@ class DefaultArcRenderContribution {
       x: originX = arcAttribute.x,
       y: originY = arcAttribute.y,
       scaleX = arcAttribute.scaleX,
-      scaleY = arcAttribute.scaleY
+      scaleY = arcAttribute.scaleY,
+      keepStrokeScale = arcAttribute.keepStrokeScale
     } = arc.attribute;
     let {
       innerRadius = arcAttribute.innerRadius,
@@ -7039,7 +7041,7 @@ class DefaultArcRenderContribution {
         {
           distance = arcAttribute[key].distance
         } = borderStyle,
-        d = getScaledStroke(context, distance, context.dpr),
+        d = keepStrokeScale ? distance : getScaledStroke(context, distance, context.dpr),
         deltaAngle = distance / outerRadius,
         sign = "outerBorder" === key ? 1 : -1;
       if (arc.setAttributes({
@@ -7084,14 +7086,15 @@ class DefaultCircleRenderContribution {
         x: originX = circleAttribute.x,
         y: originY = circleAttribute.y,
         scaleX = circleAttribute.scaleX,
-        scaleY = circleAttribute.scaleY
+        scaleY = circleAttribute.scaleY,
+        keepStrokeScale = circleAttribute.keepStrokeScale
       } = circle.attribute,
       renderBorder = (borderStyle, key) => {
         const doStroke = !(!borderStyle || !borderStyle.stroke),
           {
             distance = circleAttribute[key].distance
           } = borderStyle,
-          d = getScaledStroke(context, distance, context.dpr),
+          d = keepStrokeScale ? distance : 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;
@@ -7210,7 +7213,8 @@ class DefaultRectRenderContribution {
       scaleX = rectAttribute.scaleX,
       scaleY = rectAttribute.scaleY,
       x1: x1,
-      y1: y1
+      y1: y1,
+      keepStrokeScale = rectAttribute.keepStrokeScale
     } = rect.attribute;
     let {
       width: width,
@@ -7223,7 +7227,7 @@ class DefaultRectRenderContribution {
         {
           distance = rectAttribute[key].distance
         } = borderStyle,
-        d = getScaledStroke(context, distance, context.dpr),
+        d = keepStrokeScale ? distance : getScaledStroke(context, distance, context.dpr),
         nextX = x + sign * d,
         nextY = y + sign * d,
         dw = 2 * d;
@@ -7353,9 +7357,8 @@ class DefaultImageRenderContribution extends DefaultRectRenderContribution {
   constructor() {
     super(...arguments), this.time = BaseRenderContributionTime.afterFillStroke, this.useStyle = !0, this.order = 0;
   }
-  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);
+  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);
   }
 }
 const defaultImageRenderContribution = new DefaultImageRenderContribution();
@@ -7381,14 +7384,15 @@ class DefaultSymbolRenderContribution {
         x: originX = symbolAttribute.x,
         y: originY = symbolAttribute.y,
         scaleX = symbolAttribute.scaleX,
-        scaleY = symbolAttribute.scaleY
+        scaleY = symbolAttribute.scaleY,
+        keepStrokeScale = symbolAttribute.keepStrokeScale
       } = symbol.attribute,
       renderBorder = (borderStyle, key) => {
         const doStroke = !(!borderStyle || !borderStyle.stroke),
           {
             distance = symbolAttribute[key].distance
           } = borderStyle,
-          d = getScaledStroke(context, distance, context.dpr),
+          d = keepStrokeScale ? distance : 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;
@@ -9093,12 +9097,10 @@ let DefaultCanvasImageRender = class extends BaseRender {
     const {
       image: url
     } = image.attribute;
-    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;
-    }
+    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;
@@ -10218,6 +10220,9 @@ 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) {
@@ -10228,13 +10233,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, size / 2, x, y, z);
+    return circle(ctx, this.parseSize(size) / 2, x, y, z);
   }
   drawOffset(ctx, size, x, y, offset, z) {
-    return circle(ctx, size / 2 + offset, x, y, z);
+    return circle(ctx, this.parseSize(size) / 2 + offset, x, y, z);
   }
   drawToSvgPath(size, x, y, z) {
-    const r = size / 2;
+    const r = this.parseSize(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`;
   }
 }
@@ -10251,10 +10256,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, size / 6, x, y, z);
+    return cross(ctx, this.parseSize(size) / 6, x, y, z);
   }
   drawOffset(ctx, size, x, y, offset, z) {
-    return crossOffset(ctx, size / 6, x, y, offset, z);
+    return crossOffset(ctx, this.parseSize(size) / 6, x, y, offset, z);
   }
 }
 var cross$1 = new CrossSymbol();
@@ -10267,13 +10272,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, size / 2, x, y, z);
+    return diamond(ctx, this.parseSize(size) / 2, x, y, z);
   }
   drawFitDir(ctx, size, x, y, z) {
-    return diamond(ctx, size / 2, x, y, z);
+    return diamond(ctx, this.parseSize(size) / 2, x, y, z);
   }
   drawOffset(ctx, size, x, y, offset, z) {
-    return diamond(ctx, size / 2 + offset, x, y, z);
+    return diamond(ctx, this.parseSize(size) / 2 + offset, x, y, z);
   }
 }
 var diamond$1 = new DiamondSymbol();
@@ -10287,10 +10292,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, size / 2, x, y);
+    return square(ctx, this.parseSize(size) / 2, x, y);
   }
   drawOffset(ctx, size, x, y, offset) {
-    return square(ctx, size / 2 + offset, x, y);
+    return square(ctx, this.parseSize(size) / 2 + offset, x, y);
   }
 }
 var square$1 = new SquareSymbol();
@@ -10304,10 +10309,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, size / 2, x, y);
+    return trianglUpOffset(ctx, this.parseSize(size) / 2, x, y);
   }
   drawOffset(ctx, size, x, y, offset) {
-    return trianglUpOffset(ctx, size / 2, x, y, offset);
+    return trianglUpOffset(ctx, this.parseSize(size) / 2, x, y, offset);
   }
 }
 var triangleUp = new TriangleUpSymbol();
@@ -10339,10 +10344,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, size / 2, transX, transY);
+    return star(ctx, this.parseSize(size) / 2, transX, transY);
   }
   drawOffset(ctx, size, transX, transY, offset) {
-    return star(ctx, size / 2 + offset, transX, transY);
+    return star(ctx, this.parseSize(size) / 2 + offset, transX, transY);
   }
 }
 var star$1 = new StarSymbol();
@@ -10360,10 +10365,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, size / 2, transX, transY);
+    return arrow(ctx, this.parseSize(size) / 2, transX, transY);
   }
   drawOffset(ctx, size, transX, transY, offset) {
-    return arrow(ctx, size / 2 + offset, transX, transY);
+    return arrow(ctx, this.parseSize(size) / 2 + offset, transX, transY);
   }
 }
 var arrow$1 = new ArrowSymbol();
@@ -10377,10 +10382,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, size / 2, transX, transY);
+    return wedge(ctx, this.parseSize(size) / 2, transX, transY);
   }
   drawOffset(ctx, size, transX, transY, offset) {
-    return wedge(ctx, size / 2 + offset, transX, transY);
+    return wedge(ctx, this.parseSize(size) / 2 + offset, transX, transY);
   }
 }
 var wedge$1 = new WedgeSymbol();
@@ -10393,10 +10398,10 @@ class StrokeSymbol extends BaseSymbol {
     super(...arguments), this.type = "stroke", this.pathStr = "";
   }
   draw(ctx, size, transX, transY) {
-    return stroke(ctx, size / 2, transX, transY);
+    return stroke(ctx, this.parseSize(size) / 2, transX, transY);
   }
   drawOffset(ctx, size, transX, transY, offset) {
-    return stroke(ctx, size / 2 + offset, transX, transY);
+    return stroke(ctx, this.parseSize(size) / 2 + offset, transX, transY);
   }
 }
 var stroke$1 = new StrokeSymbol();
@@ -10418,10 +10423,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, size / 2, transX, transY);
+    return wye(ctx, this.parseSize(size) / 2, transX, transY);
   }
   drawOffset(ctx, size, transX, transY, offset) {
-    return wye(ctx, size / 2 + offset, transX, transY);
+    return wye(ctx, this.parseSize(size) / 2 + offset, transX, transY);
   }
 }
 var wye$1 = new WyeSymbol();
@@ -10434,10 +10439,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, size / 2, x, y, 0);
+    return trianglLeftOffset(ctx, this.parseSize(size) / 2, x, y, 0);
   }
   drawOffset(ctx, size, x, y, offset) {
-    return trianglLeftOffset(ctx, size / 2, x, y, offset);
+    return trianglLeftOffset(ctx, this.parseSize(size) / 2, x, y, offset);
   }
 }
 var triangleLeft = new TriangleLeftSymbol();
@@ -10451,10 +10456,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, size / 2, x, y);
+    return trianglRightOffset(ctx, this.parseSize(size) / 2, x, y);
   }
   drawOffset(ctx, size, x, y, offset) {
-    return trianglRightOffset(ctx, size / 2, x, y, offset);
+    return trianglRightOffset(ctx, this.parseSize(size) / 2, x, y, offset);
   }
 }
 var triangleRight = new TriangleRightSymbol();
@@ -10468,10 +10473,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, size / 2, x, y);
+    return trianglDownOffset(ctx, this.parseSize(size) / 2, x, y);
   }
   drawOffset(ctx, size, x, y, offset) {
-    return trianglDownOffset(ctx, size / 2, x, y, offset);
+    return trianglDownOffset(ctx, this.parseSize(size) / 2, x, y, offset);
   }
 }
 var triangleDown = new TriangleDownSymbol();
@@ -10486,10 +10491,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, size / 2 / sqrt3, x, y);
+    return thinTriangle(ctx, this.parseSize(size) / 2 / sqrt3, x, y);
   }
   drawOffset(ctx, size, x, y, offset) {
-    return thinTriangle(ctx, size / 2 / sqrt3 + offset, x, y);
+    return thinTriangle(ctx, this.parseSize(size) / 2 / sqrt3 + offset, x, y);
   }
 }
 var thinTriangle$1 = new ThinTriangleSymbol();
@@ -10503,10 +10508,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, size / 4, transX, transY);
+    return arrow2Left(ctx, this.parseSize(size) / 4, transX, transY);
   }
   drawOffset(ctx, size, transX, transY, offset) {
-    return arrow2Left(ctx, size / 4 + offset, transX, transY);
+    return arrow2Left(ctx, this.parseSize(size) / 4 + offset, transX, transY);
   }
 }
 var arrow2Left$1 = new Arrow2LeftSymbol();
@@ -10520,10 +10525,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, size / 4, transX, transY);
+    return arrow2Right(ctx, this.parseSize(size) / 4, transX, transY);
   }
   drawOffset(ctx, size, transX, transY, offset) {
-    return arrow2Right(ctx, size / 4 + offset, transX, transY);
+    return arrow2Right(ctx, this.parseSize(size) / 4 + offset, transX, transY);
   }
 }
 var arrow2Right$1 = new Arrow2RightSymbol();
@@ -10537,10 +10542,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, size / 4, transX, transY);
+    return arrow2Up(ctx, this.parseSize(size) / 4, transX, transY);
   }
   drawOffset(ctx, size, transX, transY, offset) {
-    return arrow2Up(ctx, size / 4 + offset, transX, transY);
+    return arrow2Up(ctx, this.parseSize(size) / 4 + offset, transX, transY);
   }
 }
 var arrow2Up$1 = new Arrow2UpSymbol();
@@ -10554,10 +10559,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, size / 4, transX, transY);
+    return arrow2Down(ctx, this.parseSize(size) / 4, transX, transY);
   }
   drawOffset(ctx, size, transX, transY, offset) {
-    return arrow2Down(ctx, size / 4 + offset, transX, transY);
+    return arrow2Down(ctx, this.parseSize(size) / 4 + offset, transX, transY);
   }
 }
 var arrow2Down$1 = new Arrow2DownSymbol();
@@ -10570,13 +10575,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, size / 2, x, y);
+    return lineV(ctx, this.parseSize(size) / 2, x, y);
   }
   drawOffset(ctx, size, x, y, offset, z) {
-    return lineV(ctx, size / 2 + offset, x, y);
+    return lineV(ctx, this.parseSize(size) / 2 + offset, x, y);
   }
   drawToSvgPath(size, x, y, z) {
-    const r = size / 2;
+    const r = this.parseSize(size) / 2;
     return `M ${x}, ${y - r} L ${x},${y + r}`;
   }
 }
@@ -10590,13 +10595,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, size / 2, x, y);
+    return lineH(ctx, this.parseSize(size) / 2, x, y);
   }
   drawOffset(ctx, size, x, y, offset, z) {
-    return lineH(ctx, size / 2 + offset, x, y);
+    return lineH(ctx, this.parseSize(size) / 2 + offset, x, y);
   }
   drawToSvgPath(size, x, y, z) {
-    const r = size / 2;
+    const r = this.parseSize(size) / 2;
     return `M ${x - r}, ${y} L ${x + r},${y}`;
   }
 }
@@ -10610,13 +10615,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, size / 2, x, y);
+    return close(ctx, this.parseSize(size) / 2, x, y);
   }
   drawOffset(ctx, size, x, y, offset, z) {
-    return close(ctx, size / 2 + offset, x, y);
+    return close(ctx, this.parseSize(size) / 2 + offset, x, y);
   }
   drawToSvgPath(size, x, y, z) {
-    const r = size / 2;
+    const r = this.parseSize(size) / 2;
     return `M ${x - r}, ${y - r} L ${x + r},${y + r} M ${x + r}, ${y - r} L ${x - r},${y + r}`;
   }
 }
@@ -10650,15 +10655,18 @@ 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 this.isSvg ? !!this.svgCache && (this.svgCache.forEach(item => {
+    return size = this.parseSize(size), 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 this.drawOffset(ctx, size, x, y, 0, 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]);
   }
   bounds(size, bounds) {
-    if (this.isSvg) {
+    if (size = this.parseSize(size), this.isSvg) {
       if (!this.svgCache) return;
       return bounds.clear(), void this.svgCache.forEach(_ref => {
         let {
@@ -11162,7 +11170,11 @@ 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), 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();
+    "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();
   }
   getWidthWithEllips(direction) {
     let text = this.text;
@@ -13349,8 +13361,9 @@ 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;
-      return pickContext.lineWidth = getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr), picked = context.isPointInStroke(point.x, point.y), picked;
+        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;
     }), pickContext.highPerformanceRestore(), picked;
   }
 }
@@ -13572,8 +13585,9 @@ 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;
-      return pickContext.lineWidth = getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr), picked = context.isPointInStroke(point.x, point.y), picked;
+        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;
     });else {
       const {
         fill = rectAttribute.fill,
@@ -13752,8 +13766,9 @@ 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;
-      return pickContext.lineWidth = getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr), picked = context.isPointInStroke(pickPoint.x, pickPoint.y), picked;
+        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;
     }), this.canvasRenderer.z = 0, pickContext.modelMatrix !== lastModelMatrix && mat4Allocate.free(pickContext.modelMatrix), pickContext.modelMatrix = lastModelMatrix, pickContext.highPerformanceRestore(), picked;
   }
 }
@@ -13888,8 +13903,9 @@ 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;
-      return pickContext.lineWidth = getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr), picked = context.isPointInStroke(pickPoint.x, pickPoint.y), picked;
+        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;
     }), this.canvasRenderer.z = 0, pickContext.modelMatrix !== lastModelMatrix && mat4Allocate.free(pickContext.modelMatrix), pickContext.modelMatrix = lastModelMatrix, pickContext.highPerformanceRestore(), picked;
   }
 };
@@ -14536,6 +14552,288 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
   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;
+    }
+    deactivate(context) {
+        const { stage } = this.pluginService;
+        stage.removeEventListener('wheel', this.scroll);
+    }
+};
+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);
+    }
+});
+function loadScrollbar() {
+    container.load(scrollbarModule);
+}
+
 function traverseGroup(group, cb) {
     group.forEachChildren(node => {
         const stopped = cb(node);
@@ -15993,24 +16291,29 @@ function defaultLabelPosition(type) {
             return DefaultPositions;
     }
 }
-function clampText(text, width, height) {
+function clampText(text, width, height, padding = {}) {
     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 < 0 && maxX - minX <= width) {
+    if (minX < minXWithPadding && maxX - minX <= width) {
         dx = -minX;
     }
-    else if (maxX > width && minX - (maxX - width) >= 0) {
+    else if (maxX > maxXWithPadding && minX - (maxX - width) >= minXWithPadding) {
         dx = width - maxX;
     }
-    if (minY < 0 && maxY - minY <= height) {
+    if (minY < minYWithPadding && maxY - minY <= height) {
         dy = -minY;
     }
-    else if (maxY > height && minY - (maxY - height) >= 0) {
+    else if (maxY > maxYWithPadding && minY - (maxY - height) >= minYWithPadding) {
         dy = height - maxY;
     }
     return { dx, dy };
@@ -16310,56 +16613,121 @@ function loadLabelComponent() {
     registerLine();
 }
 
-function shiftY(texts, option = {}) {
-    const { maxIterations = 10, maxError = 0.1, padding = 1, maxY = Number.MAX_VALUE } = option;
+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;
     const n = texts.length;
     if (n <= 1) {
         return texts;
     }
-    const isIntersect = ([a, b], [c, d]) => {
-        return d > a && b > c;
-    };
+    const xMap = new Map();
     const textInformation = new Map();
-    const getY0 = (text) => textInformation.get(text).y0;
-    const getY = (text) => textInformation.get(text).y;
+    const getY1Initial = (text) => textInformation.get(text).y1Initial;
     const getHeight = (text) => textInformation.get(text).height;
+    const getY1 = (text) => textInformation.get(text).y1;
+    const getY = (text) => textInformation.get(text).y;
+    const getX = (text) => textInformation.get(text).x;
     const getX1 = (text) => textInformation.get(text).x1;
     const getX2 = (text) => textInformation.get(text).x2;
-    const setY = (text, y) => {
-        textInformation.get(text).y = y;
+    const setY1 = (text, y) => {
+        textInformation.get(text).y1 = 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;
-        textInformation.set(text, { y0: y1, y: y1, height: y2 - y1, x1, x2 });
+        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);
     }
     for (let iter = 0; iter < maxIterations; iter++) {
-        texts.sort((a, b) => getY(a) - getY(b));
+        texts.sort((a, b) => getY1(a) - getY1(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]) &&
-                !isIntersect([getX1(curText), getX2(curText)], [getX1(nextText), getX2(nextText)])) {
+                !isXIntersect([getX1(curText), getX2(curText)], [getX1(nextText), getX2(nextText)])) {
                 j += 1;
             }
             if (nextText) {
-                const y0 = getY(curText);
+                const y1 = getY1(curText);
                 const h0 = getHeight(curText);
-                const y1 = getY(nextText);
-                const delta = y1 - (y0 + h0);
+                const nextY1 = getY1(nextText);
+                const delta = nextY1 - (y1 + h0);
                 if (delta < padding) {
                     const newDelta = (padding - delta) / 2;
                     error = Math.max(error, newDelta);
                     if (y1 + newDelta + getHeight(nextText) > maxY) {
-                        setY(curText, y0 - (padding - delta));
+                        setY1(curText, y1 - (padding - delta));
                     }
-                    else if (y0 - newDelta < 0) {
-                        setY(nextText, y1 + (padding - delta));
+                    else if (y1 - newDelta < 0) {
+                        setY1(nextText, nextY1 + (padding - delta));
                     }
                     else {
-                        setY(curText, y0 - newDelta);
-                        setY(nextText, y1 + newDelta);
+                        setY1(curText, y1 - newDelta);
+                        setY1(nextText, nextY1 + newDelta);
                     }
                 }
             }
@@ -16369,10 +16737,25 @@ function shiftY(texts, option = {}) {
         }
     }
     for (const text of texts) {
-        const finalY = text.attribute.y + getY(text) - getY0(text);
+        const finalY = text.attribute.y + getY1(text) - getY1Initial(text);
         text.setAttribute('y', finalY);
     }
-    return texts;
+    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;
 }
 
 loadLabelComponent();
@@ -16718,18 +17101,25 @@ 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);
+                const { dx = 0, dy = 0 } = clampText(text, bmpTool.width, bmpTool.height, bmpTool.padding);
                 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({ maxY: bmpTool.height }, strategy));
+        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);
+            } }));
         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, overlapPadding)) {
+            if (canPlace(bmpTool, bitmap, bounds, clampForce, text._isClamped ? 0 : overlapPadding)) {
                 bitmap.setRange(range);
             }
             else {
@@ -16802,7 +17192,7 @@ class LabelBase extends AbstractComponent {
                 }
             }
             if (!hasPlace && clampForce) {
-                const { dx = 0, dy = 0 } = clampText(text, bmpTool.width, bmpTool.height);
+                const { dx = 0, dy = 0 } = clampText(text, bmpTool.width, bmpTool.height, bmpTool.padding);
                 if (dx === 0 && dy === 0) {
                     if (canPlace(bmpTool, bitmap, text.AABBBounds)) {
                         bitmap.setRange(boundToRange(bmpTool, text.AABBBounds, true));
@@ -17286,6 +17676,9 @@ 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) {
@@ -29552,690 +29945,6 @@ EmptyTip.defaultAttributes = {
     }
 };
 
-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.4";
+const version = "0.21.0-beta.0";
 
-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 };
+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 };