@visactor/vrender-components 0.21.0-alpha.2 → 0.21.0-alpha.4

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { tau, halfPi as halfPi$1, AABBBounds, degreeToRadian, Point, PointService, abs, max, min, atan2, epsilon, Matrix, pi2, Logger, TextMeasure, EventEmitter, isBoolean, isObject, isFunction, isString, cos, sin, pi, isArray, pointAt, isNumber, getDecimalPlaces, isNil, Color, OBBBounds, has, normalTransform, isValidUrl, isBase64, acos, sqrt, transformBoundsWithMatrix, arrayEqual, getContextFont, rotatePoint, clampAngleByRadian, asin, Bounds, getRectIntersect, isRectIntersect, isPlainObject, merge, clamp, clampRange, normalizePadding, debounce, throttle, hexToRgb, crossProduct, isValid, isEmpty, rectInsideAnotherRect, radianToDegree, getAngleByPoint, polarToCartesian, array, isValidNumber, calculateAnchorOfBounds, computeQuadrant, isGreater, isLess, isNumberClose, normalizeAngle, flattenArray, cloneDeep, get, last, isRotateAABBIntersect, mixin, isEqual, interpolateString, minInArray, maxInArray, binaryFuzzySearchInNumberRange, polygonContainPoint } from '@visactor/vutils';
+import { tau, halfPi as halfPi$1, AABBBounds, degreeToRadian, Point, PointService, abs, max, min, atan2, epsilon, Matrix, pi2, Logger, isNumberClose, TextMeasure, EventEmitter, isBoolean, isObject, isFunction, isString, cos, sin, pi, isArray, pointAt, isNumber, getDecimalPlaces, isNil, Color, OBBBounds, has, normalTransform, isValidUrl, isBase64, acos, sqrt, transformBoundsWithMatrix, arrayEqual, getContextFont, rotatePoint, clampAngleByRadian, asin, Bounds, getRectIntersect, isRectIntersect, isPlainObject, merge, clamp, clampRange, normalizePadding, debounce, throttle, hexToRgb, crossProduct, isValid, isEmpty, rectInsideAnotherRect, radianToDegree, getAngleByPoint, polarToCartesian, array, isValidNumber, calculateAnchorOfBounds, computeQuadrant, isGreater, isLess, normalizeAngle, flattenArray, cloneDeep, get, last, isRotateAABBIntersect, mixin, isEqual, interpolateString, minInArray, maxInArray, binaryFuzzySearchInNumberRange, polygonContainPoint } from '@visactor/vutils';
 import { isContinuous, isDiscrete, LinearScale } from '@visactor/vscale';
 
 class Generator {
@@ -860,11 +860,12 @@ function parseSvgPath(str) {
   for (let i = 0, len = paths.length; i < len; i++) if (currPath = paths[i], coordsStr = currPath.slice(1), commandChar = currPath[0], currCommandData = [commandChar], coordsStrArr = coordsStr.match(rePathCommand), null !== coordsStrArr) {
     for (let i = 0, len = coordsStrArr.length; i < len; i++) coordStr = coordsStrArr[i], coordNumber = parseFloat(coordStr), Number.isNaN(coordNumber) || currCommandData.push(coordNumber);
     if (standardCommandLen = commandLengths[commandChar], currCommandData.length - 1 > standardCommandLen) {
-      let subCommand;
+      let subCommand,
+        bestCommandChar = commandChar;
       for (let i = 1, len = currCommandData.length; i < len; i += standardCommandLen) {
-        subCommand = [commandChar];
+        subCommand = [bestCommandChar];
         for (let j = i, subLen = i + standardCommandLen; j < subLen; j++) subCommand.push(currCommandData[j]);
-        result.push(subCommand);
+        result.push(subCommand), "m" === bestCommandChar ? bestCommandChar = "l" : "M" === bestCommandChar && (bestCommandChar = "L");
       }
     } else result.push(currCommandData);
   } else result.push(currCommandData);
@@ -2075,6 +2076,7 @@ const DefaultAttribute = Object.assign(Object.assign(Object.assign({
   zIndex: 0,
   layout: null,
   boundsPadding: 0,
+  fillStrokeOrder: 0,
   renderStyle: "default",
   pickMode: "accurate",
   customPickShape: null,
@@ -2145,6 +2147,7 @@ const DefaultLineAttribute = Object.assign(Object.assign(Object.assign({}, Defau
 });
 const DefaultPathAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
   path: new CustomPath2D(),
+  fillStrokeOrder: 1,
   customPath: () => {
     Logger.getInstance().warn("空函数");
   }
@@ -2457,6 +2460,14 @@ let ATextMeasure = class {
     return data;
   }
   _clipTextEnd(text, options, width, leftIdx, rightIdx) {
+    if (leftIdx === rightIdx) {
+      Logger.getInstance().warn(`【_clipTextEnd】不应该走到这里${text}, ${leftIdx}, ${rightIdx}`);
+      const subText = text.substring(0, rightIdx + 1);
+      return {
+        str: subText,
+        width: this.measureTextWidth(subText, options)
+      };
+    }
     const middleIdx = Math.floor((leftIdx + rightIdx) / 2),
       subText = text.substring(0, middleIdx + 1),
       strWidth = this.measureTextWidth(subText, options);
@@ -2490,7 +2501,7 @@ let ATextMeasure = class {
   }
   _clipTextStart(text, options, width, leftIdx, rightIdx) {
     const middleIdx = Math.ceil((leftIdx + rightIdx) / 2),
-      subText = text.substring(middleIdx - 1, text.length - 1),
+      subText = text.substring(middleIdx - 1, text.length),
       strWidth = this.measureTextWidth(subText, options);
     let length;
     if (strWidth > width) {
@@ -2498,18 +2509,18 @@ let ATextMeasure = class {
         str: "",
         width: 0
       };
-      const str = text.substring(middleIdx, text.length - 1);
+      const str = text.substring(middleIdx, text.length);
       return length = this.measureTextWidth(str, options), length <= width ? {
         str: str,
         width: length
-      } : this._clipTextStart(text, options, width, middleIdx, text.length - 1);
+      } : this._clipTextStart(text, options, width, middleIdx, text.length);
     }
     if (strWidth < width) {
       if (middleIdx <= 0) return {
         str: text,
         width: this.measureTextWidth(text, options)
       };
-      const str = text.substring(middleIdx - 2, text.length - 1);
+      const str = text.substring(middleIdx - 2, text.length);
       return length = this.measureTextWidth(str, options), length >= width ? {
         str: subText,
         width: strWidth
@@ -2817,7 +2828,7 @@ let DefaultWindow = class {
   }
   hasSubView() {
     const viewBox = this._handler.getViewBox();
-    return !(0 === viewBox.x1 && 0 === viewBox.y1 && this.width === viewBox.width() && this.height === viewBox.height());
+    return !(0 === viewBox.x1 && 0 === viewBox.y1 && isNumberClose(this.width, viewBox.width()) && isNumberClose(this.height, viewBox.height()));
   }
   isVisible(bbox) {
     return this._handler.isVisible(bbox);
@@ -4361,7 +4372,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));
@@ -6506,7 +6517,7 @@ class BaseRender {
   }
 }
 
-const parse = function () {
+const parse$1 = function () {
   const tokens = {
     linearGradient: /^(linear\-gradient)/i,
     radialGradient: /^(radial\-gradient)/i,
@@ -6659,7 +6670,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);
@@ -7342,8 +7353,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();
@@ -7497,7 +7509,8 @@ let DefaultCanvasArcRender = class extends BaseRender {
         fill = arcAttribute.fill,
         stroke = arcAttribute.stroke,
         x: originX = arcAttribute.x,
-        y: originY = arcAttribute.y
+        y: originY = arcAttribute.y,
+        fillStrokeOrder = arcAttribute.fillStrokeOrder
       } = arc.attribute,
       data = this.valid(arc, arcAttribute, fillCb, strokeCb);
     if (!data) return;
@@ -7533,7 +7546,17 @@ let DefaultCanvasArcRender = class extends BaseRender {
       isFullStroke: isFullStroke,
       stroke: arrayStroke
     } = parseStroke(stroke);
-    if ((doFill || isFullStroke) && (context.beginPath(), drawArcPath(arc, context, x, y, outerRadius, innerRadius), beforeRenderContribitionsRuned = !0, context.setShadowBlendStyle && context.setShadowBlendStyle(arc, arc.attribute, arcAttribute), this.beforeRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb), doFill && (fillCb ? fillCb(context, arc.attribute, arcAttribute) : fVisible && (context.setCommonStyle(arc, arc.attribute, originX - x, originY - y, arcAttribute), context.fill())), doStroke && isFullStroke && (strokeCb ? strokeCb(context, arc.attribute, arcAttribute) : sVisible && (context.setStrokeStyle(arc, arc.attribute, originX - x, originY - y, arcAttribute), context.stroke()))), !isFullStroke && doStroke) {
+    if (doFill || isFullStroke) {
+      context.beginPath(), drawArcPath(arc, context, x, y, outerRadius, innerRadius), beforeRenderContribitionsRuned = !0, context.setShadowBlendStyle && context.setShadowBlendStyle(arc, arc.attribute, arcAttribute), this.beforeRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb);
+      const _runFill = () => {
+          doFill && (fillCb ? fillCb(context, arc.attribute, arcAttribute) : fVisible && (context.setCommonStyle(arc, arc.attribute, originX - x, originY - y, arcAttribute), context.fill()));
+        },
+        _runStroke = () => {
+          doStroke && isFullStroke && (strokeCb ? strokeCb(context, arc.attribute, arcAttribute) : sVisible && (context.setStrokeStyle(arc, arc.attribute, originX - x, originY - y, arcAttribute), context.stroke()));
+        };
+      fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke());
+    }
+    if (!isFullStroke && doStroke) {
       context.beginPath();
       drawArcPath(arc, context, x, y, outerRadius, innerRadius, arrayStroke);
       beforeRenderContribitionsRuned || this.beforeRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb), strokeCb ? strokeCb(context, arc.attribute, arcAttribute) : sVisible && (context.setStrokeStyle(arc, arc.attribute, x, y, arcAttribute), context.stroke());
@@ -7551,14 +7574,20 @@ let DefaultCanvasArcRender = class extends BaseRender {
             fill = arcAttribute.fill
           } = arc.attribute,
           startAngle = endAngle;
-        if (this.drawArcTailCapPath(arc, context, x, y, outerRadius, innerRadius, startAngle, startAngle + capAngle), beforeRenderContribitionsRuned || this.beforeRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb), doFill) {
-          const color = fill;
-          if ("conical" === color.gradient) {
-            const lastColor = getConicGradientAt(0, 0, endAngle, color);
-            fillCb || fillVisible && (context.setCommonStyle(arc, arc.attribute, x, y, arcAttribute), context.fillStyle = lastColor, context.fill());
-          }
-        }
-        doStroke && (strokeCb || sVisible && (context.setStrokeStyle(arc, arc.attribute, x, y, arcAttribute), context.stroke()));
+        this.drawArcTailCapPath(arc, context, x, y, outerRadius, innerRadius, startAngle, startAngle + capAngle), beforeRenderContribitionsRuned || this.beforeRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb);
+        const _runFill = () => {
+            if (doFill) {
+              const color = fill;
+              if ("conical" === color.gradient) {
+                const lastColor = getConicGradientAt(0, 0, endAngle, color);
+                fillCb || fillVisible && (context.setCommonStyle(arc, arc.attribute, x, y, arcAttribute), context.fillStyle = lastColor, context.fill());
+              }
+            }
+          },
+          _runStroke = () => {
+            doStroke && (strokeCb || sVisible && (context.setStrokeStyle(arc, arc.attribute, x, y, arcAttribute), context.stroke()));
+          };
+        _runFill(), _runStroke();
       }
     }
     this.afterRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb), tempChangeConicalColor && (fill.startAngle += conicalOffset, fill.endAngle += conicalOffset);
@@ -7596,7 +7625,8 @@ let DefaultCanvasCircleRender = class extends BaseRender {
         startAngle = circleAttribute.startAngle,
         endAngle = circleAttribute.endAngle,
         x: originX = circleAttribute.x,
-        y: originY = circleAttribute.y
+        y: originY = circleAttribute.y,
+        fillStrokeOrder = circleAttribute.fillStrokeOrder
       } = circle.attribute,
       data = this.valid(circle, circleAttribute, fillCb, strokeCb);
     if (!data) return;
@@ -7606,7 +7636,14 @@ let DefaultCanvasCircleRender = class extends BaseRender {
       doFill: doFill,
       doStroke: doStroke
     } = data;
-    context.beginPath(), context.arc(x, y, radius, startAngle, endAngle), context.closePath(), context.setShadowBlendStyle && context.setShadowBlendStyle(circle, circle.attribute, circleAttribute), this.beforeRenderStep(circle, context, x, y, doFill, doStroke, fVisible, sVisible, circleAttribute, drawContext, fillCb, strokeCb), doFill && (fillCb ? fillCb(context, circle.attribute, circleAttribute) : fVisible && (context.setCommonStyle(circle, circle.attribute, originX - x, originY - y, circleAttribute), context.fill())), doStroke && (strokeCb ? strokeCb(context, circle.attribute, circleAttribute) : sVisible && (context.setStrokeStyle(circle, circle.attribute, originX - x, originY - y, circleAttribute), context.stroke())), this.afterRenderStep(circle, context, x, y, doFill, doStroke, fVisible, sVisible, circleAttribute, drawContext, fillCb, strokeCb);
+    context.beginPath(), context.arc(x, y, radius, startAngle, endAngle), context.closePath(), context.setShadowBlendStyle && context.setShadowBlendStyle(circle, circle.attribute, circleAttribute), this.beforeRenderStep(circle, context, x, y, doFill, doStroke, fVisible, sVisible, circleAttribute, drawContext, fillCb, strokeCb);
+    const _runFill = () => {
+        doFill && (fillCb ? fillCb(context, circle.attribute, circleAttribute) : fVisible && (context.setCommonStyle(circle, circle.attribute, originX - x, originY - y, circleAttribute), context.fill()));
+      },
+      _runStroke = () => {
+        doStroke && (strokeCb ? strokeCb(context, circle.attribute, circleAttribute) : sVisible && (context.setStrokeStyle(circle, circle.attribute, originX - x, originY - y, circleAttribute), context.stroke()));
+      };
+    fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke()), this.afterRenderStep(circle, context, x, y, doFill, doStroke, fVisible, sVisible, circleAttribute, drawContext, fillCb, strokeCb);
   }
   draw(circle, renderService, drawContext, params) {
     const circleAttribute = getTheme(circle, null == params ? void 0 : params.theme).circle;
@@ -8047,7 +8084,7 @@ let DefaultCanvasAreaRender = class extends BaseRender {
     super(), this.areaRenderContribitions = areaRenderContribitions, this.numberType = AREA_NUMBER_TYPE, this.builtinContributions = [defaultAreaTextureRenderContribution, defaultAreaBackgroundRenderContribution], this.init(areaRenderContribitions);
   }
   drawLinearAreaHighPerformance(area, context, fill, stroke, fillOpacity, strokeOpacity, offsetX, offsetY, areaAttribute, drawContext, params, fillCb, strokeCb) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c;
     const {
       points: points
     } = area.attribute;
@@ -8071,28 +8108,31 @@ let DefaultCanvasAreaRender = class extends BaseRender {
       x: originX = 0,
       x: originY = 0
     } = area.attribute;
-    if (!1 !== fill && (fillCb ? fillCb(context, area.attribute, areaAttribute) : fillOpacity && (context.setCommonStyle(area, area.attribute, originX - offsetX, originY - offsetY, areaAttribute), context.fill())), this.afterRenderStep(area, context, offsetX, offsetY, !!fillOpacity, !1, fill, !1, areaAttribute, drawContext, fillCb, null, {
+    !1 !== fill && (fillCb ? fillCb(context, area.attribute, areaAttribute) : fillOpacity && (context.setCommonStyle(area, area.attribute, originX - offsetX, originY - offsetY, areaAttribute), context.fill())), this.afterRenderStep(area, context, offsetX, offsetY, !!fillOpacity, !1, fill, !1, areaAttribute, drawContext, fillCb, null, {
       attribute: area.attribute
-    }), stroke) {
-      const {
-        stroke = areaAttribute && areaAttribute.stroke
-      } = area.attribute;
-      if (isArray(stroke) && (stroke[0] || stroke[2]) && !1 === stroke[1]) if (context.beginPath(), stroke[0]) {
-        context.moveTo(startP.x + offsetX, startP.y + offsetY, z);
-        for (let i = 1; i < points.length; i++) {
-          const p = points[i];
-          context.lineTo(p.x + offsetX, p.y + offsetY, z);
-        }
-      } else if (stroke[2]) {
-        const endP = points[points.length - 1];
-        context.moveTo(endP.x + offsetX, endP.y + offsetY, z);
-        for (let i = points.length - 2; i >= 0; i--) {
-          const p = points[i];
-          context.lineTo((null !== (_d = p.x1) && void 0 !== _d ? _d : p.x) + offsetX, (null !== (_e = p.y1) && void 0 !== _e ? _e : p.y) + offsetY, z);
+    }), (() => {
+      var _a, _b;
+      if (stroke) {
+        const {
+          stroke = areaAttribute && areaAttribute.stroke
+        } = area.attribute;
+        if (isArray(stroke) && (stroke[0] || stroke[2]) && !1 === stroke[1]) if (context.beginPath(), stroke[0]) {
+          context.moveTo(startP.x + offsetX, startP.y + offsetY, z);
+          for (let i = 1; i < points.length; i++) {
+            const p = points[i];
+            context.lineTo(p.x + offsetX, p.y + offsetY, z);
+          }
+        } else if (stroke[2]) {
+          const endP = points[points.length - 1];
+          context.moveTo(endP.x + offsetX, endP.y + offsetY, z);
+          for (let i = points.length - 2; i >= 0; i--) {
+            const p = points[i];
+            context.lineTo((null !== (_a = p.x1) && void 0 !== _a ? _a : p.x) + offsetX, (null !== (_b = p.y1) && void 0 !== _b ? _b : p.y) + offsetY, z);
+          }
         }
+        strokeCb ? strokeCb(context, area.attribute, areaAttribute) : (context.setStrokeStyle(area, area.attribute, originX - offsetX, originY - offsetY, areaAttribute), context.stroke());
       }
-      strokeCb ? strokeCb(context, area.attribute, areaAttribute) : (context.setStrokeStyle(area, area.attribute, originX - offsetX, originY - offsetY, areaAttribute), context.stroke());
-    }
+    })();
   }
   drawShape(area, context, x, y, drawContext, params, fillCb, strokeCb) {
     var _a, _b, _c, _d, _e, _f;
@@ -8257,23 +8297,24 @@ let DefaultCanvasAreaRender = class extends BaseRender {
       x: originX = 0,
       x: originY = 0
     } = attribute;
-    if (!1 !== fill && (fillCb ? fillCb(context, attribute, defaultAttribute) : fillOpacity && (context.setCommonStyle(area, connect ? connectedStyle : attribute, originX - offsetX, originY - offsetY, connect ? da : defaultAttribute), context.fill())), this.afterRenderStep(area, context, offsetX, offsetY, !!fillOpacity, !1, fill, !1, defaultAttribute, drawContext, fillCb, null, {
+    return !1 !== fill && (fillCb ? fillCb(context, attribute, defaultAttribute) : fillOpacity && (context.setCommonStyle(area, connect ? connectedStyle : attribute, originX - offsetX, originY - offsetY, connect ? da : defaultAttribute), context.fill())), this.afterRenderStep(area, context, offsetX, offsetY, !!fillOpacity, !1, fill, !1, defaultAttribute, drawContext, fillCb, null, {
       attribute: attribute
-    }), !1 !== stroke) if (strokeCb) strokeCb(context, attribute, defaultAttribute);else {
-      const {
-        stroke = defaultAttribute && defaultAttribute[1] && defaultAttribute[1].stroke
-      } = attribute;
-      isArray(stroke) && (stroke[0] || stroke[2]) && !1 === stroke[1] && (context.beginPath(), drawSegments(context.camera ? context : context.nativeContext, stroke[0] ? cache.top : cache.bottom, clipRange, direction === Direction$1.ROW ? "x" : "y", {
-        offsetX: offsetX,
-        offsetY: offsetY,
-        offsetZ: offsetZ,
-        drawConnect: connect,
-        mode: connectedType,
-        zeroX: connectedX,
-        zeroY: connectedY
-      })), context.setStrokeStyle(area, connect ? connectedStyle : attribute, originX - offsetX, originY - offsetY, connect ? da : defaultAttribute), context.stroke();
-    }
-    return !1;
+    }), (() => {
+      if (!1 !== stroke) if (strokeCb) strokeCb(context, attribute, defaultAttribute);else {
+        const {
+          stroke = defaultAttribute && defaultAttribute[1] && defaultAttribute[1].stroke
+        } = attribute;
+        isArray(stroke) && (stroke[0] || stroke[2]) && !1 === stroke[1] && (context.beginPath(), drawSegments(context.camera ? context : context.nativeContext, stroke[0] ? cache.top : cache.bottom, clipRange, direction === Direction$1.ROW ? "x" : "y", {
+          offsetX: offsetX,
+          offsetY: offsetY,
+          offsetZ: offsetZ,
+          drawConnect: connect,
+          mode: connectedType,
+          zeroX: connectedX,
+          zeroY: connectedY
+        })), context.setStrokeStyle(area, connect ? connectedStyle : attribute, originX - offsetX, originY - offsetY, connect ? da : defaultAttribute), context.stroke();
+      }
+    })(), !1;
   }
 };
 DefaultCanvasAreaRender = __decorate$D([injectable(), __param$t(0, inject(ContributionProvider)), __param$t(0, named(AreaRenderContribution)), __metadata$w("design:paramtypes", [Object])], DefaultCanvasAreaRender);
@@ -8305,7 +8346,8 @@ let DefaultCanvasPathRender = class extends BaseRender {
     const pathAttribute = null !== (_a = this.tempTheme) && void 0 !== _a ? _a : getTheme(path, null == params ? void 0 : params.theme).path,
       {
         x: originX = pathAttribute.x,
-        y: originY = pathAttribute.y
+        y: originY = pathAttribute.y,
+        fillStrokeOrder = pathAttribute.fillStrokeOrder
       } = path.attribute,
       z = null !== (_b = this.z) && void 0 !== _b ? _b : 0,
       data = this.valid(path, pathAttribute, fillCb, strokeCb);
@@ -8320,7 +8362,14 @@ let DefaultCanvasPathRender = class extends BaseRender {
       const path2D = null !== (_c = path.attribute.path) && void 0 !== _c ? _c : pathAttribute.path;
       renderCommandList(path2D.commandList, context, x, y, 1, 1, z);
     }
-    context.setShadowBlendStyle && context.setShadowBlendStyle(path, path.attribute, pathAttribute), this.beforeRenderStep(path, context, x, y, doFill, doStroke, fVisible, sVisible, pathAttribute, drawContext, fillCb, strokeCb), doStroke && (strokeCb ? strokeCb(context, path.attribute, pathAttribute) : sVisible && (context.setStrokeStyle(path, path.attribute, originX - x, originY - y, pathAttribute), context.stroke())), doFill && (fillCb ? fillCb(context, path.attribute, pathAttribute) : fVisible && (context.setCommonStyle(path, path.attribute, originX - x, originY - y, pathAttribute), context.fill())), this.afterRenderStep(path, context, x, y, doFill, doStroke, fVisible, sVisible, pathAttribute, drawContext, fillCb, strokeCb);
+    context.setShadowBlendStyle && context.setShadowBlendStyle(path, path.attribute, pathAttribute), this.beforeRenderStep(path, context, x, y, doFill, doStroke, fVisible, sVisible, pathAttribute, drawContext, fillCb, strokeCb);
+    const _runStroke = () => {
+        doStroke && (strokeCb ? strokeCb(context, path.attribute, pathAttribute) : sVisible && (context.setStrokeStyle(path, path.attribute, originX - x, originY - y, pathAttribute), context.stroke()));
+      },
+      _runFill = () => {
+        doFill && (fillCb ? fillCb(context, path.attribute, pathAttribute) : fVisible && (context.setCommonStyle(path, path.attribute, originX - x, originY - y, pathAttribute), context.fill()));
+      };
+    fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke()), this.afterRenderStep(path, context, x, y, doFill, doStroke, fVisible, sVisible, pathAttribute, drawContext, fillCb, strokeCb);
   }
   draw(path, renderService, drawContext, params) {
     const pathAttribute = getTheme(path, null == params ? void 0 : params.theme).path;
@@ -8364,7 +8413,8 @@ let DefaultCanvasRectRender = class extends BaseRender {
         x1: x1,
         y1: y1,
         x: originX = rectAttribute.x,
-        y: originY = rectAttribute.y
+        y: originY = rectAttribute.y,
+        fillStrokeOrder = rectAttribute.fillStrokeOrder
       } = rect.attribute;
     let {
       width: width,
@@ -8383,7 +8433,14 @@ let DefaultCanvasRectRender = class extends BaseRender {
       doFill: doFill,
       doStroke: doStroke
     };
-    context.setShadowBlendStyle && context.setShadowBlendStyle(rect, rect.attribute, rectAttribute), this.beforeRenderStep(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb, doFillOrStroke), doFillOrStroke.doFill && (fillCb ? fillCb(context, rect.attribute, rectAttribute) : fVisible && (context.setCommonStyle(rect, rect.attribute, originX - x, originY - y, rectAttribute), context.fill())), doFillOrStroke.doStroke && (strokeCb ? strokeCb(context, rect.attribute, rectAttribute) : sVisible && (context.setStrokeStyle(rect, rect.attribute, originX - x, originY - y, rectAttribute), context.stroke())), this.afterRenderStep(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb);
+    context.setShadowBlendStyle && context.setShadowBlendStyle(rect, rect.attribute, rectAttribute), this.beforeRenderStep(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb, doFillOrStroke);
+    const _runFill = () => {
+        doFillOrStroke.doFill && (fillCb ? fillCb(context, rect.attribute, rectAttribute) : fVisible && (context.setCommonStyle(rect, rect.attribute, originX - x, originY - y, rectAttribute), context.fill()));
+      },
+      _runStroke = () => {
+        doFillOrStroke.doStroke && (strokeCb ? strokeCb(context, rect.attribute, rectAttribute) : sVisible && (context.setStrokeStyle(rect, rect.attribute, originX - x, originY - y, rectAttribute), context.stroke()));
+      };
+    fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke()), this.afterRenderStep(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb);
   }
   draw(rect, renderService, drawContext, params) {
     const rectAttribute = getTheme(rect, null == params ? void 0 : params.theme).rect;
@@ -8419,7 +8476,8 @@ let DefaultCanvasSymbolRender = class extends BaseRender {
         x: originX = symbolAttribute.x,
         y: originY = symbolAttribute.y,
         scaleX = symbolAttribute.scaleX,
-        scaleY = symbolAttribute.scaleY
+        scaleY = symbolAttribute.scaleY,
+        fillStrokeOrder = symbolAttribute.fillStrokeOrder
       } = symbol.attribute,
       data = this.valid(symbol, symbolAttribute, fillCb, strokeCb);
     if (!data) return;
@@ -8442,14 +8500,27 @@ let DefaultCanvasSymbolRender = class extends BaseRender {
         const obj = Object.assign({}, a);
         obj.fill = null !== (_a = a.fill) && void 0 !== _a ? _a : symbol.attribute.fill, obj.opacity = null !== (_b = a.opacity) && void 0 !== _b ? _b : symbol.attribute.opacity, obj.fillOpacity = symbol.attribute.fillOpacity, obj.stroke = null !== (_c = a.stroke) && void 0 !== _c ? _c : symbol.attribute.stroke, a = obj;
       }
-      a.fill && (fillCb ? fillCb(context, symbol.attribute, symbolAttribute) : (context.setCommonStyle(symbol, a, originX - x, originY - y, symbolAttribute), context.fill())), a.stroke && (strokeCb ? strokeCb(context, symbol.attribute, symbolAttribute) : (context.setStrokeStyle(symbol, a, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute), context.stroke()));
+      const _runFill = () => {
+          a.fill && (fillCb ? fillCb(context, symbol.attribute, symbolAttribute) : (context.setCommonStyle(symbol, a, originX - x, originY - y, symbolAttribute), context.fill()));
+        },
+        _runStroke = () => {
+          a.stroke && (strokeCb ? strokeCb(context, symbol.attribute, symbolAttribute) : (context.setStrokeStyle(symbol, a, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute), context.stroke()));
+        };
+      fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke());
     };
     if (keepDirIn3d && context.camera && context.project) {
       const p = context.project(x, y, z),
         camera = context.camera;
       context.camera = null, !1 === parsedPath.draw(context, isArray(size) ? [size[0] * scaleX, size[1] * scaleY] : size * scaleX, p.x, p.y, void 0, callback) && context.closePath(), context.camera = camera;
     } else !1 === parsedPath.draw(context, size, x, y, z, callback) && context.closePath();
-    context.setShadowBlendStyle && context.setShadowBlendStyle(symbol, symbol.attribute, symbolAttribute), this.beforeRenderStep(symbol, context, x, y, doFill, doStroke, fVisible, sVisible, symbolAttribute, drawContext, fillCb, strokeCb), doFill && !parsedPath.isSvg && (fillCb ? fillCb(context, symbol.attribute, symbolAttribute) : fVisible && (context.setCommonStyle(symbol, symbol.attribute, originX - x, originY - y, symbolAttribute), context.fill())), doStroke && !parsedPath.isSvg && (strokeCb ? strokeCb(context, symbol.attribute, symbolAttribute) : sVisible && (context.setStrokeStyle(symbol, symbol.attribute, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute), context.stroke())), this.afterRenderStep(symbol, context, x, y, doFill, doStroke, fVisible, sVisible, symbolAttribute, drawContext, fillCb, strokeCb);
+    context.setShadowBlendStyle && context.setShadowBlendStyle(symbol, symbol.attribute, symbolAttribute), this.beforeRenderStep(symbol, context, x, y, doFill, doStroke, fVisible, sVisible, symbolAttribute, drawContext, fillCb, strokeCb);
+    const _runFill = () => {
+        doFill && !parsedPath.isSvg && (fillCb ? fillCb(context, symbol.attribute, symbolAttribute) : fVisible && (context.setCommonStyle(symbol, symbol.attribute, originX - x, originY - y, symbolAttribute), context.fill()));
+      },
+      _runStroke = () => {
+        doStroke && !parsedPath.isSvg && (strokeCb ? strokeCb(context, symbol.attribute, symbolAttribute) : sVisible && (context.setStrokeStyle(symbol, symbol.attribute, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute), context.stroke()));
+      };
+    fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke()), this.afterRenderStep(symbol, context, x, y, doFill, doStroke, fVisible, sVisible, symbolAttribute, drawContext, fillCb, strokeCb);
   }
   draw(symbol, renderService, drawContext, params) {
     const symbolAttribute = getTheme(symbol, null == params ? void 0 : params.theme).symbol;
@@ -8823,7 +8894,8 @@ let DefaultCanvasPolygonRender = class extends BaseRender {
         cornerRadius = polygonAttribute.cornerRadius,
         x: originX = polygonAttribute.x,
         y: originY = polygonAttribute.y,
-        closePath = polygonAttribute.closePath
+        closePath = polygonAttribute.closePath,
+        fillStrokeOrder = polygonAttribute.fillStrokeOrder
       } = polygon.attribute,
       data = this.valid(polygon, polygonAttribute, fillCb, strokeCb);
     if (!data) return;
@@ -8833,7 +8905,14 @@ let DefaultCanvasPolygonRender = class extends BaseRender {
       doFill: doFill,
       doStroke: doStroke
     } = data;
-    context.beginPath(), cornerRadius <= 0 || isArray(cornerRadius) && cornerRadius.every(num => 0 === num) ? drawPolygon(context.camera ? context : context.nativeContext, points, x, y) : drawRoundedPolygon(context.camera ? context : context.nativeContext, points, x, y, cornerRadius, closePath), closePath && context.closePath(), context.setShadowBlendStyle && context.setShadowBlendStyle(polygon, polygon.attribute, polygonAttribute), this.beforeRenderStep(polygon, context, x, y, doFill, doStroke, fVisible, sVisible, polygonAttribute, drawContext, fillCb, strokeCb), doFill && (fillCb ? fillCb(context, polygon.attribute, polygonAttribute) : fVisible && (context.setCommonStyle(polygon, polygon.attribute, originX - x, originY - y, polygonAttribute), context.fill())), doStroke && (strokeCb ? strokeCb(context, polygon.attribute, polygonAttribute) : sVisible && (context.setStrokeStyle(polygon, polygon.attribute, originX - x, originY - y, polygonAttribute), context.stroke())), this.afterRenderStep(polygon, context, x, y, doFill, doStroke, fVisible, sVisible, polygonAttribute, drawContext, fillCb, strokeCb);
+    context.beginPath(), cornerRadius <= 0 || isArray(cornerRadius) && cornerRadius.every(num => 0 === num) ? drawPolygon(context.camera ? context : context.nativeContext, points, x, y) : drawRoundedPolygon(context.camera ? context : context.nativeContext, points, x, y, cornerRadius, closePath), closePath && context.closePath(), context.setShadowBlendStyle && context.setShadowBlendStyle(polygon, polygon.attribute, polygonAttribute), this.beforeRenderStep(polygon, context, x, y, doFill, doStroke, fVisible, sVisible, polygonAttribute, drawContext, fillCb, strokeCb);
+    const _runFill = () => {
+        doFill && (fillCb ? fillCb(context, polygon.attribute, polygonAttribute) : fVisible && (context.setCommonStyle(polygon, polygon.attribute, originX - x, originY - y, polygonAttribute), context.fill()));
+      },
+      _runStroke = () => {
+        doStroke && (strokeCb ? strokeCb(context, polygon.attribute, polygonAttribute) : sVisible && (context.setStrokeStyle(polygon, polygon.attribute, originX - x, originY - y, polygonAttribute), context.stroke()));
+      };
+    fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke()), this.afterRenderStep(polygon, context, x, y, doFill, doStroke, fVisible, sVisible, polygonAttribute, drawContext, fillCb, strokeCb);
   }
   draw(polygon, renderService, drawContext, params) {
     const polygonAttribute = getTheme(polygon, null == params ? void 0 : params.theme).polygon;
@@ -8876,7 +8955,10 @@ let DefaultCanvasGroupRender = class {
         cornerRadius = groupAttribute.cornerRadius,
         path = groupAttribute.path,
         lineWidth = groupAttribute.lineWidth,
-        visible = groupAttribute.visible
+        visible = groupAttribute.visible,
+        fillStrokeOrder = groupAttribute.fillStrokeOrder,
+        x: originX = groupAttribute.x,
+        y: originY = groupAttribute.y
       } = group.attribute,
       fVisible = rectFillVisible(opacity, fillOpacity, width, height, fill),
       sVisible = rectStrokeVisible(opacity, strokeOpacity, width, height),
@@ -8902,7 +8984,14 @@ let DefaultCanvasGroupRender = class {
     };
     this._groupRenderContribitions.forEach(c => {
       c.time === BaseRenderContributionTime.beforeFillStroke && c.drawShape(group, context, x, y, doFill, doStroke, fVisible, sVisible, groupAttribute, drawContext, fillCb, strokeCb, doFillOrStroke);
-    }), clip && context.clip(), context.setShadowBlendStyle && context.setShadowBlendStyle(group, group.attribute, groupAttribute), doFillOrStroke.doFill && (fillCb ? fillCb(context, group.attribute, groupAttribute) : fVisible && (context.setCommonStyle(group, group.attribute, x, y, groupAttribute), context.fill())), doFillOrStroke.doStroke && (strokeCb ? strokeCb(context, group.attribute, groupAttribute) : sVisible && (context.setStrokeStyle(group, group.attribute, x, y, groupAttribute), context.stroke())), this._groupRenderContribitions.forEach(c => {
+    }), clip && context.clip(), context.setShadowBlendStyle && context.setShadowBlendStyle(group, group.attribute, groupAttribute);
+    const _runFill = () => {
+        doFillOrStroke.doFill && (fillCb ? fillCb(context, group.attribute, groupAttribute) : fVisible && (context.setCommonStyle(group, group.attribute, originX - x, originY - y, groupAttribute), context.fill()));
+      },
+      _runStroke = () => {
+        doFillOrStroke.doStroke && (strokeCb ? strokeCb(context, group.attribute, groupAttribute) : sVisible && (context.setStrokeStyle(group, group.attribute, originX - x, originY - y, groupAttribute), context.stroke()));
+      };
+    fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke()), this._groupRenderContribitions.forEach(c => {
       c.time === BaseRenderContributionTime.afterFillStroke && c.drawShape(group, context, x, y, doFill, doStroke, fVisible, sVisible, groupAttribute, drawContext, fillCb, strokeCb);
     });
   }
@@ -8968,6 +9057,7 @@ let DefaultCanvasImageRender = class extends BaseRender {
         x: originX = imageAttribute.x,
         y: originY = imageAttribute.y,
         cornerRadius = imageAttribute.cornerRadius,
+        fillStrokeOrder = imageAttribute.fillStrokeOrder,
         image: url
       } = image.attribute,
       data = this.valid(image, imageAttribute, fillCb);
@@ -8978,29 +9068,37 @@ let DefaultCanvasImageRender = class extends BaseRender {
       doFill: doFill,
       doStroke: doStroke
     } = data;
-    if (context.setShadowBlendStyle && context.setShadowBlendStyle(image, imageAttribute), this.beforeRenderStep(image, context, x, y, doFill, !1, fVisible, !1, imageAttribute, drawContext, fillCb), doFill) if (fillCb) fillCb(context, image.attribute, imageAttribute);else if (fVisible) {
-      if (!url || !image.resources) return;
-      const res = image.resources.get(url);
-      if ("success" !== res.state) return;
-      let needRestore = !1;
-      0 === cornerRadius || isArray(cornerRadius) && cornerRadius.every(num => 0 === num) || (context.beginPath(), createRectPath(context, x, y, width, height, cornerRadius), context.save(), context.clip(), needRestore = !0), context.setCommonStyle(image, image.attribute, x, y, imageAttribute);
-      let repeat = 0;
-      if ("repeat" === repeatX && (repeat |= 1), "repeat" === repeatY && (repeat |= 2), repeat) {
-        const pattern = context.createPattern(res.data, repeatStr[repeat]);
-        context.fillStyle = pattern, context.translate(x, y, !0), context.fillRect(0, 0, width, height), context.translate(-x, -y, !0);
-      } else context.drawImage(res.data, x, y, width, height);
-      needRestore && context.restore();
-    }
-    doStroke && (strokeCb ? strokeCb(context, image.attribute, imageAttribute) : sVisible && (context.setStrokeStyle(image, image.attribute, originX - x, originY - y, imageAttribute), context.stroke())), this.afterRenderStep(image, context, x, y, doFill, !1, fVisible, !1, imageAttribute, drawContext, fillCb);
+    context.setShadowBlendStyle && context.setShadowBlendStyle(image, imageAttribute), this.beforeRenderStep(image, context, x, y, doFill, !1, fVisible, !1, imageAttribute, drawContext, fillCb);
+    const _runFill = () => {
+        if (doFill) if (fillCb) fillCb(context, image.attribute, imageAttribute);else if (fVisible) {
+          if (!url || !image.resources) return;
+          const res = image.resources.get(url);
+          if ("success" !== res.state) return;
+          let needRestore = !1;
+          0 === cornerRadius || isArray(cornerRadius) && cornerRadius.every(num => 0 === num) || (context.beginPath(), createRectPath(context, x, y, width, height, cornerRadius), context.save(), context.clip(), needRestore = !0), context.setCommonStyle(image, image.attribute, x, y, imageAttribute);
+          let repeat = 0;
+          if ("repeat" === repeatX && (repeat |= 1), "repeat" === repeatY && (repeat |= 2), repeat) {
+            const pattern = context.createPattern(res.data, repeatStr[repeat]);
+            context.fillStyle = pattern, context.translate(x, y, !0), context.fillRect(0, 0, width, height), context.translate(-x, -y, !0);
+          } else context.drawImage(res.data, x, y, width, height);
+          needRestore && context.restore();
+        }
+      },
+      _runStroke = () => {
+        doStroke && (strokeCb ? strokeCb(context, image.attribute, imageAttribute) : sVisible && (context.setStrokeStyle(image, image.attribute, originX - x, originY - y, imageAttribute), context.stroke()));
+      };
+    fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke()), this.afterRenderStep(image, context, x, y, doFill, !1, fVisible, !1, imageAttribute, drawContext, fillCb);
   }
   draw(image, renderService, drawContext) {
     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;
@@ -12925,27 +13023,9 @@ function simplifyRadialDist(points, sqTolerance) {
   for (let i = 1, len = points.length; i < len; i++) deltaX = points[i].x - lastX, deltaY = points[i].y - lastY, deltaX * deltaX + deltaY * deltaY > sqTolerance && (lastX = points[i].x, lastY = points[i].y, newPoints.push(points[i]));
   return points[points.length - 1].x === lastX && points[points.length - 1].y === lastY || newPoints.push(points[points.length - 1]), newPoints;
 }
-function simplifyDPStep(points, startIdx, endIdx, sqTolerance, simplified) {
-  let maxSqDist = sqTolerance,
-    nextIdx = startIdx;
-  const startX = points[startIdx].x,
-    startY = points[startIdx].y,
-    vecX2 = points[endIdx].x - startX,
-    vecY2 = points[endIdx].y - startY,
-    sqLength = vecX2 * vecX2 + vecY2 * vecY2;
-  let area, sqArea, sqDistance, vecX1, vecY1;
-  for (let i = startIdx + 1, len = endIdx - 1; i < len; i++) vecX1 = points[i].x - startX, vecY1 = points[i].y - startY, area = vecX1 * vecY2 - vecX2 * vecY1, sqArea = area * area, sqDistance = sqArea / sqLength, sqDistance > maxSqDist && (maxSqDist = sqDistance, nextIdx = i);
-  maxSqDist > sqTolerance && (nextIdx - startIdx > 2 && simplifyDPStep(points, startIdx, nextIdx, sqTolerance, simplified), simplified.push(points[nextIdx], points[nextIdx + 1]), endIdx - nextIdx > 2 && simplifyDPStep(points, nextIdx, endIdx, sqTolerance, simplified));
-}
-function simplifyDouglasPeucker(points, sqTolerance) {
-  const lastIdx = points.length - 1,
-    simplified = [points[0]];
-  return simplifyDPStep(points, 0, lastIdx, sqTolerance, simplified), simplified.push(points[lastIdx]), simplified;
-}
 function flatten_simplify(points, tolerance, highestQuality) {
   if (points.length <= 10) return points;
-  const sqTolerance = void 0 !== tolerance ? tolerance * tolerance : 1;
-  return points = simplifyDouglasPeucker(points = highestQuality ? points : simplifyRadialDist(points, sqTolerance), sqTolerance);
+  return points = highestQuality ? points : simplifyRadialDist(points, void 0 !== tolerance ? tolerance * tolerance : 1);
 }
 
 let loadArcModule = !1;
@@ -15807,19 +15887,22 @@ function bitmapTool(width, height, padding = { top: 0, left: 0, right: 0, bottom
     scale.height = height;
     return scale;
 }
-function boundToRange($, bound, clamp$1 = false) {
-    if (clamp$1) {
-        const { x1, x2, y1, y2 } = bound;
-        const _x1 = clamp(x1, 0, $.width);
-        const _x2 = clamp(x2, 0, $.width);
-        const _y1 = clamp(y1, 0, $.height);
-        const _y2 = clamp(y2, 0, $.height);
-        return {
-            x1: $.x(_x1),
-            x2: $.x(_x2),
-            y1: $.y(_y1),
-            y2: $.y(_y2)
-        };
+function clampRangeByBitmap($, range) {
+    const { x1, x2, y1, y2 } = range;
+    const _x1 = clamp(x1, 0, $.width);
+    const _x2 = clamp(x2, 0, $.width);
+    const _y1 = clamp(y1, 0, $.height);
+    const _y2 = clamp(y2, 0, $.height);
+    return {
+        x1: $.x(_x1),
+        x2: $.x(_x2),
+        y1: $.y(_y1),
+        y2: $.y(_y2)
+    };
+}
+function boundToRange($, bound, clamp = false) {
+    if (clamp) {
+        return clampRangeByBitmap($, bound);
     }
     return {
         x1: $.x(bound.x1),
@@ -15840,10 +15923,13 @@ function canPlace($, bitmap, bound, checkBound = true, pad = 0) {
         };
     }
     range = boundToRange($, range);
-    const outOfBounds = checkBound && bitmap.outOfBounds(range);
-    if (outOfBounds) {
+    const outOfBounds = bitmap.outOfBounds(range);
+    if (checkBound && outOfBounds) {
         return false;
     }
+    if (outOfBounds) {
+        range = clampRangeByBitmap($, range);
+    }
     return !bitmap.getRange(range);
 }
 function placeToCandidates($, bitmap, text, candidates = [], clampForce = true, pad = 0) {
@@ -16224,6 +16310,71 @@ function loadLabelComponent() {
     registerLine();
 }
 
+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 isIntersect = ([a, b], [c, d]) => {
+        return d > a && b > c;
+    };
+    const textInformation = new Map();
+    const getY0 = (text) => textInformation.get(text).y0;
+    const getY = (text) => textInformation.get(text).y;
+    const getHeight = (text) => textInformation.get(text).height;
+    const getX1 = (text) => textInformation.get(text).x1;
+    const getX2 = (text) => textInformation.get(text).x2;
+    const setY = (text, y) => {
+        textInformation.get(text).y = y;
+    };
+    for (const text of texts) {
+        const { y1, y2, x1, x2 } = text.AABBBounds;
+        textInformation.set(text, { y0: y1, y: y1, height: y2 - y1, x1, x2 });
+    }
+    for (let iter = 0; iter < maxIterations; iter++) {
+        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]) &&
+                !isIntersect([getX1(curText), getX2(curText)], [getX1(nextText), getX2(nextText)])) {
+                j += 1;
+            }
+            if (nextText) {
+                const y0 = getY(curText);
+                const h0 = getHeight(curText);
+                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) {
+                        setY(curText, y0 - (padding - delta));
+                    }
+                    else if (y0 - newDelta < 0) {
+                        setY(nextText, y1 + (padding - delta));
+                    }
+                    else {
+                        setY(curText, y0 - newDelta);
+                        setY(nextText, y1 + newDelta);
+                    }
+                }
+            }
+        }
+        if (error < maxError) {
+            break;
+        }
+    }
+    for (const text of texts) {
+        const finalY = text.attribute.y + getY(text) - getY0(text);
+        text.setAttribute('y', finalY);
+    }
+    return texts;
+}
+
 loadLabelComponent();
 class LabelBase extends AbstractComponent {
     setBitmap(bitmap) {
@@ -16537,12 +16688,11 @@ class LabelBase extends AbstractComponent {
         return texts;
     }
     _overlapping(labels) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         if (labels.length === 0) {
             return [];
         }
         const option = (isObject(this.attribute.overlap) ? this.attribute.overlap : {});
-        const result = [];
         const baseMarkGroup = this.getBaseMarkGroup();
         const size = (_a = option.size) !== null && _a !== void 0 ? _a : {
             width: (_b = baseMarkGroup === null || baseMarkGroup === void 0 ? void 0 : baseMarkGroup.AABBBounds.width()) !== null && _b !== void 0 ? _b : 0,
@@ -16551,12 +16701,55 @@ class LabelBase extends AbstractComponent {
         if (size.width === 0 || size.height === 0) {
             return labels;
         }
-        const { avoidBaseMark, strategy = [], hideOnHit = true, clampForce = true, avoidMarks = [], overlapPadding } = option;
+        const { strategy, priority } = option;
         const bmpTool = this._bmpTool || bitmapTool(size.width, size.height);
         const bitmap = this._bitmap || bmpTool.bitmap();
+        if (priority) {
+            labels = labels.sort((a, b) => priority(b.attribute.data) - priority(a.attribute.data));
+        }
+        if ((strategy === null || strategy === void 0 ? void 0 : strategy.type) === 'shiftY') {
+            return this._overlapGlobal(labels, option, bmpTool, bitmap);
+        }
+        return this._overlapByStrategy(labels, option, bmpTool, bitmap);
+    }
+    _overlapGlobal(labels, option, bmpTool, bitmap) {
+        let result = labels.filter(label => label.attribute.visible && label.attribute.opacity !== 0);
+        const { clampForce = true, hideOnHit = true, overlapPadding, strategy } = option;
+        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);
+                if (dx !== 0 || dy !== 0) {
+                    text.setAttributes({ x: text.attribute.x + dx, y: text.attribute.y + dy });
+                }
+            }
+        }
+        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, overlapPadding)) {
+                bitmap.setRange(range);
+            }
+            else {
+                if (hideOnHit) {
+                    text.setAttributes({ visible: false });
+                }
+                else {
+                    bitmap.setRange(range);
+                }
+            }
+        }
+        return result;
+    }
+    _overlapByStrategy(labels, option, bmpTool, bitmap) {
+        var _a;
+        const { avoidBaseMark, strategy = [], hideOnHit = true, clampForce = true, avoidMarks = [], overlapPadding } = option;
+        const result = [];
         const checkBounds = strategy.some(s => s.type === 'bound');
         if (avoidBaseMark) {
-            (_d = this._baseMarks) === null || _d === void 0 ? void 0 : _d.forEach(mark => {
+            (_a = this._baseMarks) === null || _a === void 0 ? void 0 : _a.forEach(mark => {
                 mark.AABBBounds && bitmap.setRange(boundToRange(bmpTool, mark.AABBBounds, true));
             });
         }
@@ -16573,7 +16766,7 @@ class LabelBase extends AbstractComponent {
             });
         }
         for (let i = 0; i < labels.length; i++) {
-            if (labels[i].visible === false) {
+            if (labels[i].attribute.visible === false) {
                 continue;
             }
             const text = labels[i];
@@ -16840,7 +17033,7 @@ class LabelBase extends AbstractComponent {
         return listener;
     }
     _smartInvert(labels) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g;
         const option = (isObject(this.attribute.smartInvert) ? this.attribute.smartInvert : {});
         const { textType, contrastRatiosThreshold, alternativeColors, mode, interactInvertType } = option;
         const fillStrategy = (_a = option.fillStrategy) !== null && _a !== void 0 ? _a : 'invertBase';
@@ -16857,8 +17050,15 @@ class LabelBase extends AbstractComponent {
                 continue;
             }
             const baseMark = this.getRelatedGraphic(label.attribute);
-            const backgroundColor = baseMark.attribute.fill;
-            const foregroundColor = label.attribute.fill;
+            let backgroundColor = baseMark.attribute.fill;
+            let foregroundColor = label.attribute.fill;
+            if (isObject(backgroundColor) && backgroundColor.gradient) {
+                const firstStopColor = (_g = (_f = backgroundColor.stops) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.color;
+                if (firstStopColor) {
+                    backgroundColor = firstStopColor;
+                    foregroundColor = firstStopColor;
+                }
+            }
             const invertColor = labelSmartInvert(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors, mode);
             const similarColor = contrastAccessibilityChecker(invertColor, brightColor) ? brightColor : darkColor;
             const isInside = this._canPlaceInside(label.AABBBounds, baseMark.AABBBounds);
@@ -19107,15 +19307,24 @@ function autoLimit(labels, config) {
         return;
     }
     const overflowLimitLength = normalizeOverflowLimitLength(config.overflowLimitLength);
+    const firstLabel = labels[0];
+    const angle = firstLabel.attribute.angle;
+    const hasAngle = !isNil(angle);
+    const cos = hasAngle ? Math.cos(angle) : 1;
+    const sin = hasAngle ? Math.sin(angle) : 0;
+    const isHorizontal = isAngleHorizontal(angle);
+    const isVertical = isAngleVertical(angle);
+    const isX = orient === 'top' || orient === 'bottom';
+    const direction = firstLabel.attribute.direction;
+    const THRESHOLD = 2;
+    const checkBox = !isHorizontal &&
+        !isVertical &&
+        isX &&
+        (labels.length < 2 ||
+            labels.some(label => Math.abs(label.AABBBounds.width() - firstLabel.AABBBounds.width()) >= THRESHOLD)) &&
+        firstLabel.AABBBounds.width() > Math.abs(limitLength / sin);
     labels.forEach(label => {
         var _a;
-        const angle = label.attribute.angle;
-        const hasAngle = !isNil(angle);
-        const cos = hasAngle ? Math.cos(angle) : 1;
-        const sin = hasAngle ? Math.sin(angle) : 0;
-        const isHorizontal = isAngleHorizontal(angle);
-        const isVertical = isAngleVertical(angle);
-        const isX = orient === 'top' || orient === 'bottom';
         if (isX) {
             if (isVertical && Math.floor(label.AABBBounds.height()) <= limitLength) {
                 return;
@@ -19124,7 +19333,6 @@ function autoLimit(labels, config) {
                 return;
             }
         }
-        const direction = label.attribute.direction;
         if (!isX) {
             if (direction === 'vertical' && Math.floor(label.AABBBounds.height()) <= verticalLimitLength) {
                 return;
@@ -19144,12 +19352,18 @@ function autoLimit(labels, config) {
                 const { x1, x2 } = label.AABBBounds;
                 const tan = sin / cos;
                 const verticalSizeLimit = Math.abs(limitLength / sin);
-                if (tan > 0 && x1 <= axisLength && limitLength / tan + x1 > axisLength) {
-                    const lengthLimit = (axisLength - x1) / Math.abs(cos) + overflowLimitLength.right;
+                if (checkBox &&
+                    tan > 0 &&
+                    x1 <= axisLength + overflowLimitLength.right &&
+                    limitLength / tan + x1 > axisLength + overflowLimitLength.right) {
+                    const lengthLimit = (axisLength - x1 + overflowLimitLength.right) / Math.abs(cos);
                     limitLabelLength = Math.min(lengthLimit, verticalSizeLimit);
                 }
-                else if (tan < 0 && x2 >= 0 && limitLength / tan + x2 < 0) {
-                    const lengthLimit = x2 / Math.abs(cos) + overflowLimitLength.left;
+                else if (checkBox &&
+                    tan < 0 &&
+                    x2 >= -overflowLimitLength.left &&
+                    limitLength / tan + x2 < -overflowLimitLength.left) {
+                    const lengthLimit = (x2 + overflowLimitLength.left) / Math.abs(cos);
                     limitLabelLength = Math.min(lengthLimit, verticalSizeLimit);
                 }
                 else {
@@ -19183,24 +19397,37 @@ function autoWrap(labels, config) {
     if (isEmpty(labels) || !isValidNumber(limitLength)) {
         return;
     }
-    const verticalLimitLength = axisLength / labels.length;
-    labels.forEach(label => {
-        var _a;
-        const angle = label.attribute.angle;
-        const isHorizontal = isAngleHorizontal(angle);
-        const isVertical = isAngleVertical(angle);
-        const isX = orient === 'top' || orient === 'bottom';
+    const firstLabel = labels[0];
+    const angle = firstLabel.attribute.angle;
+    const isHorizontal = isAngleHorizontal(angle);
+    const isVertical = isAngleVertical(angle);
+    const isX = orient === 'top' || orient === 'bottom';
+    let verticalLimitLength = axisLength / labels.length;
+    labels.forEach((label, index) => {
+        var _a, _b, _c, _d, _e;
         if (isX) {
             if (isVertical && Math.floor(label.AABBBounds.height()) <= limitLength) {
                 return;
             }
-            if (isHorizontal && Math.floor(label.AABBBounds.width()) <= verticalLimitLength) {
-                return;
+            if (isHorizontal) {
+                const curLabelX = label.attribute.x;
+                const nextLabelX = (_a = labels[index + 1]) === null || _a === void 0 ? void 0 : _a.attribute.x;
+                const lastLabelX = (_b = labels[index - 1]) === null || _b === void 0 ? void 0 : _b.attribute.x;
+                const minGap = getLabelMinGap(curLabelX, nextLabelX, lastLabelX);
+                if (isValidNumber(minGap)) {
+                    verticalLimitLength = min(verticalLimitLength, minGap);
+                }
             }
         }
         else {
-            if (isVertical && Math.floor(label.AABBBounds.height()) <= verticalLimitLength) {
-                return;
+            if (isVertical) {
+                const curLabelY = label.attribute.y;
+                const nextLabelY = (_c = labels[index + 1]) === null || _c === void 0 ? void 0 : _c.attribute.y;
+                const lastLabelY = (_d = labels[index - 1]) === null || _d === void 0 ? void 0 : _d.attribute.y;
+                const minGap = getLabelMinGap(curLabelY, nextLabelY, lastLabelY);
+                if (isValidNumber(minGap)) {
+                    verticalLimitLength = min(verticalLimitLength, minGap);
+                }
             }
             if (isHorizontal && Math.floor(label.AABBBounds.width()) <= limitLength) {
                 return;
@@ -19230,12 +19457,27 @@ function autoWrap(labels, config) {
         }
         label.setAttributes({
             maxLineWidth: limitLabelLength,
-            ellipsis: (_a = label.attribute.ellipsis) !== null && _a !== void 0 ? _a : ellipsis,
+            ellipsis: (_e = label.attribute.ellipsis) !== null && _e !== void 0 ? _e : ellipsis,
             whiteSpace: 'normal',
             heightLimit
         });
     });
 }
+function getLabelMinGap(current, next, prev) {
+    let minGap;
+    if (isValidNumber(next)) {
+        minGap = Math.abs(next - current);
+    }
+    if (isValidNumber(prev)) {
+        if (isValidNumber(minGap)) {
+            minGap = Math.min(Math.abs(current - prev), minGap);
+        }
+        else {
+            minGap = Math.abs(current - prev);
+        }
+    }
+    return minGap;
+}
 
 function alignAxisLabels(labels, start, containerSize, orient, align) {
     if (orient === 'left' || orient === 'right') {
@@ -20058,13 +20300,13 @@ class CircleAxis extends AxisBase {
         if (isEmpty(labelShapes)) {
             return;
         }
-        const { inside, radius, center, width, height, label, orient } = this.attribute;
-        const bounds = width && height
+        const { inside, radius, center, size, label, orient } = this.attribute;
+        const bounds = size
             ? {
                 x1: 0,
                 y1: 0,
-                x2: width,
-                y2: height
+                x2: size.width,
+                y2: size.height
             }
             : {
                 x1: center.x - radius,
@@ -24172,10 +24414,10 @@ class LegendBase extends AbstractComponent {
     render() {
         this.removeAllChild(true);
         const { interactive = true, title, padding = 0 } = this.attribute;
-        const parsedPadding = normalizePadding(padding);
+        this._parsedPadding = normalizePadding(padding);
         const innerView = graphicCreator.group({
-            x: parsedPadding[3],
-            y: parsedPadding[0],
+            x: this._parsedPadding[3],
+            y: this._parsedPadding[0],
             pickable: interactive,
             childrenPickable: interactive
         });
@@ -24191,8 +24433,8 @@ class LegendBase extends AbstractComponent {
             this._bindEvents();
         }
         const viewBounds = this._innerView.AABBBounds;
-        this.attribute.width = viewBounds.width() + parsedPadding[1] + parsedPadding[3];
-        this.attribute.height = viewBounds.height() + parsedPadding[0] + parsedPadding[2];
+        this.attribute.width = viewBounds.width() + this._parsedPadding[1] + this._parsedPadding[3];
+        this.attribute.height = viewBounds.height() + this._parsedPadding[0] + this._parsedPadding[2];
     }
     _renderTitle(title) {
         const { text = '', textStyle, padding = 0, background, minWidth, maxWidth, shape } = title;
@@ -24277,6 +24519,7 @@ class DiscreteLegend extends LegendBase {
         this._itemHeightByUser = undefined;
         this._itemHeight = 0;
         this._itemMaxWidth = 0;
+        this._contentMaxHeight = 0;
         this._onHover = (e) => {
             const target = e.target;
             if (target && target.name && target.name.startsWith(LEGEND_ELEMENT_NAME.item)) {
@@ -24381,11 +24624,12 @@ class DiscreteLegend extends LegendBase {
         });
     }
     _renderItems() {
-        const { item: itemAttrs = {}, maxCol = 1, maxRow = 2, maxWidth, maxHeight, defaultSelected, lazyload, autoPage } = this.attribute;
+        const { item: itemAttrs = {}, maxCol = 1, maxRow = 2, maxWidth, defaultSelected, lazyload, autoPage } = this.attribute;
         const { spaceCol = DEFAULT_ITEM_SPACE_COL, spaceRow = DEFAULT_ITEM_SPACE_ROW } = itemAttrs;
         const itemsContainer = this._itemsContainer;
         const { items: legendItems, isHorizontal, startIndex, isScrollbar } = this._itemContext;
         const maxPages = isScrollbar ? 1 : isHorizontal ? maxRow : maxCol;
+        const maxHeight = this._contentMaxHeight;
         let { doWrap, maxWidthInCol, startX, startY, pages } = this._itemContext;
         let item;
         let lastItemWidth = 0;
@@ -24482,7 +24726,7 @@ class DiscreteLegend extends LegendBase {
         return this._itemContext;
     }
     _renderContent() {
-        const { item = {}, items, reversed, maxWidth } = this.attribute;
+        const { item = {}, items, reversed, maxWidth, maxHeight } = this.attribute;
         if (item.visible === false || isEmpty(items)) {
             return;
         }
@@ -24490,6 +24734,7 @@ class DiscreteLegend extends LegendBase {
         if (reversed) {
             legendItems = items === null || items === void 0 ? void 0 : items.reverse();
         }
+        this._contentMaxHeight = Math.max(0, maxHeight - this._parsedPadding[0] - this._parsedPadding[2]);
         const itemsContainer = graphicCreator.group({
             x: 0,
             y: 0
@@ -24527,7 +24772,8 @@ class DiscreteLegend extends LegendBase {
             items: legendItems,
             isHorizontal,
             totalPage: Infinity,
-            isScrollbar: pager && pager.type === 'scrollbar'
+            isScrollbar: pager && pager.type === 'scrollbar',
+            clipContainer: undefined
         };
         this._itemContext = this._renderItems();
         let pagerRendered = false;
@@ -24548,11 +24794,21 @@ class DiscreteLegend extends LegendBase {
         }
         const { hover = true, select = true } = this.attribute;
         if (hover) {
-            this._itemsContainer.addEventListener('pointermove', this._onHover);
-            this._itemsContainer.addEventListener('pointerleave', this._onUnHover);
+            let trigger = 'pointermove';
+            let triggerOff = 'pointerleave';
+            if (isObject(hover)) {
+                hover.trigger && (trigger = hover.trigger);
+                hover.triggerOff && (triggerOff = hover.triggerOff);
+            }
+            this._itemsContainer.addEventListener(trigger, this._onHover);
+            this._itemsContainer.addEventListener(triggerOff, this._onUnHover);
         }
         if (select) {
-            this._itemsContainer.addEventListener('pointerdown', this._onClick);
+            let trigger = 'pointerdown';
+            if (isObject(select) && select.trigger) {
+                trigger = select.trigger;
+            }
+            this._itemsContainer.addEventListener(trigger, this._onClick);
         }
     }
     _autoEllipsis(autoEllipsisStrategy, layoutWidth, labelShape, valueShape) {
@@ -24757,8 +25013,8 @@ class DiscreteLegend extends LegendBase {
     _createScrollbar(compStyle, compSize) {
         const { disableTriggerEvent } = this.attribute;
         return this._itemContext.isHorizontal
-            ? new ScrollBar(Object.assign(Object.assign({ direction: 'horizontal', disableTriggerEvent, range: [0, 0.5], height: 12 }, compStyle), { width: compSize }))
-            : new ScrollBar(Object.assign(Object.assign({ direction: 'vertical', width: 12, range: [0, 0.5] }, compStyle), { height: compSize, disableTriggerEvent }));
+            ? new ScrollBar(Object.assign(Object.assign({ direction: 'horizontal', disableTriggerEvent, range: [0, 0.5], height: compStyle.visible === false ? 0 : 12 }, compStyle), { width: compSize }))
+            : new ScrollBar(Object.assign(Object.assign({ direction: 'vertical', width: compStyle.visible === false ? 0 : 12, range: [0, 0.5] }, compStyle), { height: compSize, disableTriggerEvent }));
     }
     _updatePositionOfPager(renderStartY, compWidth, compHeight) {
         const { pager } = this.attribute;
@@ -24798,9 +25054,26 @@ class DiscreteLegend extends LegendBase {
             });
         }
     }
+    _computeScrollbarDelta() {
+        const { isHorizontal, clipContainer } = this._itemContext;
+        const itemContainerBounds = this._itemsContainer.AABBBounds;
+        const clipContainerBounds = clipContainer.AABBBounds;
+        let delta;
+        let innerViewSize;
+        if (isHorizontal) {
+            innerViewSize = clipContainerBounds.width();
+            delta = innerViewSize / itemContainerBounds.width();
+        }
+        else {
+            innerViewSize = clipContainerBounds.height();
+            delta = innerViewSize / itemContainerBounds.height();
+        }
+        return delta;
+    }
     _updatePositionOfScrollbar(contentWidth, contentHeight, renderStartY) {
-        const { currentPage, totalPage, isHorizontal } = this._itemContext;
-        this._pagerComponent.setScrollRange([(currentPage - 1) / totalPage, currentPage / totalPage]);
+        const { isHorizontal, currentPage, totalPage } = this._itemContext;
+        const start = (currentPage - 1) / totalPage;
+        this._pagerComponent.setScrollRange([start, start + this._computeScrollbarDelta()]);
         if (isHorizontal) {
             this._pagerComponent.setAttributes({
                 x: 0,
@@ -24828,13 +25101,7 @@ class DiscreteLegend extends LegendBase {
                     newPage = this._itemContext.totalPage;
                 }
                 else {
-                    newPage = value[0] * this._itemContext.totalPage;
-                    if (pager.scrollByPosition) {
-                        newPage = newPage + 1;
-                    }
-                    else {
-                        newPage = Math.floor(newPage) + 1;
-                    }
+                    newPage = value[0] * this._itemContext.totalPage + 1;
                 }
                 return newPage;
             }
@@ -24848,6 +25115,7 @@ class DiscreteLegend extends LegendBase {
             const { width, height } = scrollComponent.getSliderRenderBounds();
             const currentScrollValue = direction === 'vertical' ? e.deltaY / height : e.deltaX / width;
             scrollComponent.setScrollRange([preScrollRange[0] + currentScrollValue, preScrollRange[1] + currentScrollValue], true);
+            this.updateScrollMask();
         };
         const onPaging = (e) => {
             const newPage = pageParser(e);
@@ -24859,15 +25127,39 @@ class DiscreteLegend extends LegendBase {
                 this._renderItems();
                 const newTotalPage = Math.ceil(this._itemContext.pages / this._itemContext.maxPages);
                 this._itemContext.totalPage = newTotalPage;
-                this._pagerComponent.setScrollRange([(newPage - 1) / newTotalPage, newPage / newTotalPage]);
+                if (this._itemContext.isScrollbar && this._pagerComponent) {
+                    const newDelta = this._computeScrollbarDelta();
+                    const [start] = this._pagerComponent.getScrollRange();
+                    this._pagerComponent.setScrollRange([start, start + newDelta]);
+                }
             }
-            if (animation) {
-                this._itemsContainer
-                    .animate()
-                    .to({ [channel]: -(newPage - 1) * pageSize }, animationDuration, animationEasing);
+            if (!this._itemContext.isScrollbar) {
+                if (animation) {
+                    this._itemsContainer
+                        .animate()
+                        .to({ [channel]: -(newPage - 1) * pageSize }, animationDuration, animationEasing);
+                }
+                else {
+                    this._itemsContainer.setAttribute(channel, -(newPage - 1) * pageSize);
+                }
             }
             else {
-                this._itemsContainer.setAttribute(channel, -(newPage - 1) * pageSize);
+                const [start] = this._pagerComponent.getScrollRange();
+                let containerSize;
+                if (this._itemContext.isHorizontal) {
+                    containerSize = this._itemsContainer.AABBBounds.width();
+                }
+                else {
+                    containerSize = this._itemsContainer.AABBBounds.height();
+                }
+                const startOffset = containerSize * start;
+                this.updateScrollMask();
+                if (animation) {
+                    this._itemsContainer.animate().to({ [channel]: -startOffset }, animationDuration, animationEasing);
+                }
+                else {
+                    this._itemsContainer.setAttribute(channel, -startOffset);
+                }
             }
         };
         if (this._itemContext.isScrollbar) {
@@ -24886,11 +25178,12 @@ class DiscreteLegend extends LegendBase {
     }
     _renderPager() {
         const renderStartY = this._title ? this._title.AABBBounds.height() + get(this.attribute, 'title.space', 8) : 0;
-        const { maxWidth, maxHeight, maxCol = 1, maxRow = 2, item = {}, pager = {} } = this.attribute;
+        const { maxWidth, maxCol = 1, maxRow = 2, item = {}, pager = {} } = this.attribute;
         const { spaceCol = DEFAULT_ITEM_SPACE_COL, spaceRow = DEFAULT_ITEM_SPACE_ROW } = item;
         const itemsContainer = this._itemsContainer;
         const { space: pagerSpace = DEFAULT_PAGER_SPACE, defaultCurrent = 1 } = pager, compStyle = __rest(pager, ["space", "defaultCurrent"]);
         const { isHorizontal } = this._itemContext;
+        const maxHeight = this._contentMaxHeight;
         let comp;
         let compWidth = 0;
         let compHeight = 0;
@@ -24981,57 +25274,76 @@ class DiscreteLegend extends LegendBase {
         });
         clipGroup.add(itemsContainer);
         this._innerView.add(clipGroup);
+        this._itemContext.clipContainer = clipGroup;
         this._bindEventsOfPager(isHorizontal ? compHeight + spaceRow : compWidth + spaceCol, isHorizontal ? 'y' : 'x');
         return true;
     }
     _renderScrollbar() {
+        var _a;
         const renderStartY = this._title ? this._title.AABBBounds.height() + get(this.attribute, 'title.space', 8) : 0;
-        const { maxWidth, maxHeight, item = {}, pager = {} } = this.attribute;
+        const { maxWidth, item = {}, pager = {} } = this.attribute;
         const { spaceCol = DEFAULT_ITEM_SPACE_COL, spaceRow = DEFAULT_ITEM_SPACE_ROW } = item;
         const itemsContainer = this._itemsContainer;
         const { space: pagerSpace = DEFAULT_PAGER_SPACE, defaultCurrent = 1 } = pager, compStyle = __rest(pager, ["space", "defaultCurrent"]);
         const { isHorizontal } = this._itemContext;
+        const maxHeight = this._contentMaxHeight;
         let comp;
-        let compSize = 0;
         let contentWidth = 0;
         let contentHeight = 0;
         let startY = 0;
         let pages = 1;
         if (isHorizontal) {
-            compSize = maxWidth;
             contentWidth = maxWidth;
             contentHeight = this._itemHeight;
-            comp = this._createScrollbar(compStyle, compSize);
+            comp = this._createScrollbar(compStyle, contentWidth);
             this._pagerComponent = comp;
             this._innerView.add(comp);
-            this._updatePositionOfScrollbar(contentWidth, contentHeight, renderStartY);
         }
         else {
-            compSize = maxHeight;
-            comp = this._createScrollbar(compStyle, compSize);
-            this._pagerComponent = comp;
-            this._innerView.add(comp);
             contentHeight = maxHeight - renderStartY;
             contentWidth = this._itemMaxWidth;
+            comp = this._createScrollbar(compStyle, contentHeight);
+            this._pagerComponent = comp;
+            this._innerView.add(comp);
             if (contentHeight <= 0) {
                 this._innerView.removeChild(comp);
                 return false;
             }
-            itemsContainer.getChildren().forEach((item, index) => {
-                const { height } = item.attribute;
-                pages = Math.floor((startY + height) / contentHeight) + 1;
-                startY += spaceRow + height;
-            });
+            const items = itemsContainer.getChildren();
+            const itemsHeightArr = items.map((item) => item.attribute.height);
+            if (itemsHeightArr.length === 1 || itemsHeightArr.every(entry => entry === itemsHeightArr[0])) {
+                const itemHeight = itemsHeightArr[0];
+                const maxContentHeight = contentHeight;
+                const pageItemsCount = Math.floor(maxContentHeight / (spaceRow + itemHeight));
+                contentHeight = pageItemsCount * (spaceRow + itemHeight);
+                pages = Math.ceil(items.length / pageItemsCount);
+            }
+            else {
+                items.forEach((item, index) => {
+                    const { height } = item.attribute;
+                    const prePages = pages;
+                    const preStartY = startY;
+                    pages = Math.floor((startY + height) / contentHeight) + 1;
+                    startY += spaceRow + height;
+                    if (prePages !== pages &&
+                        index === itemsContainer.getChildren().length - 1 &&
+                        startY - contentHeight >= (1 / 3) * height) {
+                        contentHeight = preStartY + height;
+                        pages -= 1;
+                    }
+                });
+            }
             this._itemContext.totalPage = pages;
             this._itemContext.pages = pages;
-            this._updatePositionOfScrollbar(contentWidth, contentHeight, renderStartY);
         }
         if (defaultCurrent > 1) {
             if (isHorizontal) {
-                itemsContainer.setAttribute('x', -(defaultCurrent - 1) * (contentWidth + spaceCol));
+                const maxOffset = this._itemsContainer.AABBBounds.width() - contentWidth;
+                itemsContainer.setAttribute('x', -Math.min((defaultCurrent - 1) * (contentWidth + spaceCol), maxOffset));
             }
             else {
-                itemsContainer.setAttribute('y', -(defaultCurrent - 1) * (contentHeight + spaceRow));
+                const maxOffset = this._itemsContainer.AABBBounds.height() - contentHeight;
+                itemsContainer.setAttribute('y', -Math.min((defaultCurrent - 1) * (contentHeight + spaceRow), maxOffset));
             }
         }
         const clipGroup = graphicCreator.group({
@@ -25044,9 +25356,89 @@ class DiscreteLegend extends LegendBase {
         });
         clipGroup.add(itemsContainer);
         this._innerView.add(clipGroup);
+        this._itemContext.clipContainer = clipGroup;
+        this._updatePositionOfScrollbar(contentWidth, contentHeight, renderStartY);
+        if ((_a = pager.scrollMask) === null || _a === void 0 ? void 0 : _a.visible) {
+            this.renderScrollMask(clipGroup);
+        }
         this._bindEventsOfPager(isHorizontal ? contentWidth : contentHeight, isHorizontal ? 'x' : 'y');
         return true;
     }
+    renderScrollMask(clipGroup) {
+        const { scrollMask = {} } = this.attribute
+            .pager;
+        const { visible = true, gradientLength = 16, gradientStops } = scrollMask;
+        if (!visible || !gradientStops) {
+            return;
+        }
+        const width = clipGroup.AABBBounds.width();
+        const height = clipGroup.AABBBounds.height();
+        const totalLength = this._itemContext.isHorizontal ? width : height;
+        const startStops = gradientStops.map(stop => {
+            return {
+                offset: (gradientLength * stop.offset) / totalLength,
+                color: stop.color
+            };
+        });
+        const endStops = gradientStops.map(stop => {
+            return {
+                offset: (totalLength - gradientLength * stop.offset) / totalLength,
+                color: stop.color
+            };
+        });
+        const mask = graphicCreator.rect({
+            x: 0,
+            y: 0,
+            width,
+            height
+        });
+        this._scrollMask = mask;
+        this._scrollMaskContext = { startStops, endStops };
+        this.updateScrollMask();
+        clipGroup.add(mask);
+    }
+    updateScrollMask() {
+        if (!this._scrollMask || !this._pagerComponent) {
+            return;
+        }
+        if (!this._itemContext.isScrollbar) {
+            return;
+        }
+        const [start, end] = this._pagerComponent.getScrollRange();
+        const stops = [];
+        if (!isNumberClose(clamp(end, 0, 1), 1)) {
+            stops.push(...this._scrollMaskContext.endStops);
+        }
+        if (!isNumberClose(clamp(start, 0, 1), 0)) {
+            stops.push(...this._scrollMaskContext.startStops);
+        }
+        if (stops.length) {
+            if (this._itemContext.isHorizontal) {
+                this._scrollMask.setAttributes({
+                    fill: {
+                        gradient: 'linear',
+                        x0: 0,
+                        y0: 0,
+                        x1: 1,
+                        y1: 0,
+                        stops
+                    }
+                });
+            }
+            else {
+                this._scrollMask.setAttributes({
+                    fill: {
+                        gradient: 'linear',
+                        x0: 0,
+                        y0: 0,
+                        x1: 0,
+                        y1: 1,
+                        stops
+                    }
+                });
+            }
+        }
+    }
     _renderPagerComponent() {
         if (this._itemContext.isScrollbar) {
             this._renderScrollbar();
@@ -29160,6 +29552,690 @@ EmptyTip.defaultAttributes = {
     }
 };
 
-const version = "0.21.0-alpha.2";
+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";
 
-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, 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, 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 };