@visactor/vchart 1.12.12 → 1.12.13

package/build/index.js

@@ -1261,7 +1261,7 @@
     function sub(out, v1, v2) {
       out[0] = v1[0] - v2[0], out[1] = v1[1] - v2[1];
     }
-    function isIntersect(left1, right1, left2, right2) {
+    function isIntersect$1(left1, right1, left2, right2) {
       let min1 = left1[0],
         max1 = right1[0],
         min2 = left2[0],
@@ -1269,7 +1269,7 @@
       return max1 < min1 && ([min1, max1] = [max1, min1]), max2 < min2 && ([max2, min2] = [min2, max2]), !(max1 < min2 || max2 < min1) && (min1 = left1[1], max1 = right1[1], min2 = left2[1], max2 = right2[1], max1 < min1 && ([min1, max1] = [max1, min1]), max2 < min2 && ([max2, min2] = [min2, max2]), !(max1 < min2 || max2 < min1));
     }
     function getIntersectPoint(left1, right1, left2, right2) {
-      if (!isIntersect(left1, right1, left2, right2)) return !1;
+      if (!isIntersect$1(left1, right1, left2, right2)) return !1;
       const dir1 = [0, 0],
         dir2 = [0, 0],
         tempVec = [0, 0];
@@ -1454,7 +1454,7 @@
     function lineIntersectPolygon(a1x, a1y, a2x, a2y, points) {
       for (let i = 0, p2 = points[points.length - 1]; i < points.length; i++) {
         const p = points[i];
-        if (isIntersect([a1x, a1y], [a2x, a2y], [p.x, p.y], [p2.x, p2.y])) return !0;
+        if (isIntersect$1([a1x, a1y], [a2x, a2y], [p.x, p.y], [p2.x, p2.y])) return !0;
         p2 = p;
       }
       return !1;
@@ -9350,6 +9350,292 @@
     class Application {}
     const application = new Application();
 
+    const parse = function () {
+      const tokens = {
+        linearGradient: /^(linear\-gradient)/i,
+        radialGradient: /^(radial\-gradient)/i,
+        conicGradient: /^(conic\-gradient)/i,
+        sideOrCorner: /^to (left (top|bottom)|right (top|bottom)|top (left|right)|bottom (left|right)|left|right|top|bottom)/i,
+        extentKeywords: /^(closest\-side|closest\-corner|farthest\-side|farthest\-corner|contain|cover)/,
+        positionKeywords: /^(left|center|right|top|bottom)/i,
+        pixelValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))px/,
+        percentageValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))\%/,
+        emValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))em/,
+        angleValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))deg/,
+        fromAngleValue: /^from\s*(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))deg/,
+        startCall: /^\(/,
+        endCall: /^\)/,
+        comma: /^,/,
+        hexColor: /(^\#[0-9a-fA-F]+)/,
+        literalColor: /^([a-zA-Z]+)/,
+        rgbColor: /^(rgb\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))/i,
+        rgbaColor: /^(rgba\(\d{1,3},\s*\d{1,3},\s*\d{1,3},\s*((\d\.\d+)|\d{1,3})\))/i,
+        number: /^(([0-9]*\.[0-9]+)|([0-9]+\.?))/
+      };
+      let input = "";
+      function error(msg) {
+        const err = new Error(input + ": " + msg);
+        throw err.source = input, err;
+      }
+      function getAST() {
+        const ast = matchListing(matchDefinition);
+        return input.length > 0 && error("Invalid input not EOF"), ast;
+      }
+      function matchDefinition() {
+        return matchGradient("linear", tokens.linearGradient, matchLinearOrientation) || matchGradient("radial", tokens.radialGradient, matchListRadialOrientations) || matchGradient("conic", tokens.conicGradient, matchConicalOrientation);
+      }
+      function matchGradient(gradientType, pattern, orientationMatcher) {
+        return function (pattern, callback) {
+          const captures = scan(pattern);
+          if (captures) {
+            scan(tokens.startCall) || error("Missing (");
+            const result = callback(captures);
+            return scan(tokens.endCall) || error("Missing )"), result;
+          }
+        }(pattern, function (captures) {
+          const orientation = orientationMatcher();
+          return orientation && (scan(tokens.comma) || error("Missing comma before color stops")), {
+            type: gradientType,
+            orientation: orientation,
+            colorStops: matchListing(matchColorStop)
+          };
+        });
+      }
+      function matchLinearOrientation() {
+        return match("directional", tokens.sideOrCorner, 1) || match("angular", tokens.angleValue, 1);
+      }
+      function matchConicalOrientation() {
+        return match("angular", tokens.fromAngleValue, 1);
+      }
+      function matchListRadialOrientations() {
+        let radialOrientations,
+          lookaheadCache,
+          radialOrientation = matchRadialOrientation();
+        return radialOrientation && (radialOrientations = [], radialOrientations.push(radialOrientation), lookaheadCache = input, scan(tokens.comma) && (radialOrientation = matchRadialOrientation(), radialOrientation ? radialOrientations.push(radialOrientation) : input = lookaheadCache)), radialOrientations;
+      }
+      function matchRadialOrientation() {
+        let radialType = function () {
+          const circle = match("shape", /^(circle)/i, 0);
+          circle && (circle.style = matchLength() || matchExtentKeyword());
+          return circle;
+        }() || function () {
+          const ellipse = match("shape", /^(ellipse)/i, 0);
+          ellipse && (ellipse.style = matchDistance() || matchExtentKeyword());
+          return ellipse;
+        }();
+        if (radialType) radialType.at = matchAtPosition();else {
+          const extent = matchExtentKeyword();
+          if (extent) {
+            radialType = extent;
+            const positionAt = matchAtPosition();
+            positionAt && (radialType.at = positionAt);
+          } else {
+            const defaultPosition = matchPositioning();
+            defaultPosition && (radialType = {
+              type: "default-radial",
+              at: defaultPosition
+            });
+          }
+        }
+        return radialType;
+      }
+      function matchExtentKeyword() {
+        return match("extent-keyword", tokens.extentKeywords, 1);
+      }
+      function matchAtPosition() {
+        if (match("position", /^at/, 0)) {
+          const positioning = matchPositioning();
+          return positioning || error("Missing positioning value"), positioning;
+        }
+      }
+      function matchPositioning() {
+        const location = {
+          x: matchDistance(),
+          y: matchDistance()
+        };
+        if (location.x || location.y) return {
+          type: "position",
+          value: location
+        };
+      }
+      function matchListing(matcher) {
+        let captures = matcher();
+        const result = [];
+        if (captures) for (result.push(captures); scan(tokens.comma);) captures = matcher(), captures ? result.push(captures) : error("One extra comma");
+        return result;
+      }
+      function matchColorStop() {
+        const color = match("hex", tokens.hexColor, 1) || match("rgba", tokens.rgbaColor, 1) || match("rgb", tokens.rgbColor, 1) || match("literal", tokens.literalColor, 0);
+        return color || error("Expected color definition"), color.length = matchDistance(), color;
+      }
+      function matchDistance() {
+        return match("%", tokens.percentageValue, 1) || match("position-keyword", tokens.positionKeywords, 1) || matchLength();
+      }
+      function matchLength() {
+        return match("px", tokens.pixelValue, 1) || match("em", tokens.emValue, 1);
+      }
+      function match(type, pattern, captureIndex) {
+        const captures = scan(pattern);
+        if (captures) return {
+          type: type,
+          value: captures[captureIndex]
+        };
+      }
+      function scan(regexp) {
+        const blankCaptures = /^[\n\r\t\s]+/.exec(input);
+        blankCaptures && consume(blankCaptures[0].length);
+        const captures = regexp.exec(input);
+        return captures && consume(captures[0].length), captures;
+      }
+      function consume(size) {
+        input = input.substr(size);
+      }
+      return function (code) {
+        return input = code.toString(), getAST();
+      };
+    }();
+    class GradientParser {
+      static IsGradient(c) {
+        return !("string" == typeof c && !c.includes("gradient"));
+      }
+      static IsGradientStr(c) {
+        return "string" == typeof c && c.includes("gradient");
+      }
+      static Parse(c) {
+        if (GradientParser.IsGradientStr(c)) try {
+          const datum = parse(c)[0];
+          if (datum) {
+            if ("linear" === datum.type) return GradientParser.ParseLinear(datum);
+            if ("radial" === datum.type) return GradientParser.ParseRadial(datum);
+            if ("conic" === datum.type) return GradientParser.ParseConic(datum);
+          }
+        } catch (err) {
+          return c;
+        }
+        return c;
+      }
+      static ParseConic(datum) {
+        const {
+            orientation: orientation,
+            colorStops = []
+          } = datum,
+          halfPi = pi$1 / 2,
+          sa = parseFloat(orientation.value) / 180 * pi$1 - halfPi;
+        return {
+          gradient: "conical",
+          x: .5,
+          y: .5,
+          startAngle: sa,
+          endAngle: sa + pi2,
+          stops: colorStops.map(item => ({
+            color: item.value,
+            offset: parseFloat(item.length.value) / 100
+          }))
+        };
+      }
+      static ParseRadial(datum) {
+        const {
+          colorStops = []
+        } = datum;
+        return {
+          gradient: "radial",
+          x0: .5,
+          y0: .5,
+          x1: .5,
+          y1: .5,
+          r0: 0,
+          r1: 1,
+          stops: colorStops.map(item => ({
+            color: item.value,
+            offset: parseFloat(item.length.value) / 100
+          }))
+        };
+      }
+      static ParseLinear(datum) {
+        const {
+            orientation: orientation,
+            colorStops = []
+          } = datum,
+          halfPi = pi$1 / 2;
+        let angle = "angular" === orientation.type ? parseFloat(orientation.value) / 180 * pi$1 : 0;
+        for (; angle < 0;) angle += pi2;
+        for (; angle >= pi2;) angle -= pi2;
+        let x0 = 0,
+          y0 = 0,
+          x1 = 0,
+          y1 = 0;
+        return angle < halfPi ? (x0 = 0, y0 = 1, x1 = Math.sin(angle), y1 = y0 - Math.cos(angle)) : angle < pi$1 ? (x0 = 0, y0 = 0, x1 = Math.cos(angle - halfPi), y1 = Math.sin(angle - halfPi)) : angle < pi$1 + halfPi ? (x0 = 1, y0 = 0, x1 = x0 - Math.sin(angle - pi$1), y1 = Math.cos(angle - pi$1)) : (x0 = 1, x1 = x0 - Math.cos(angle - halfPi - pi$1), y1 -= Math.sin(angle - halfPi - pi$1)), {
+          gradient: "linear",
+          x0: x0,
+          y0: y0,
+          x1: x1,
+          y1: y1,
+          stops: colorStops.map(item => ({
+            color: item.value,
+            offset: parseFloat(item.length.value) / 100
+          }))
+        };
+      }
+    }
+
+    function getScaledStroke(context, width, dpr) {
+      let strokeWidth = width;
+      const {
+          a: a,
+          b: b,
+          c: c,
+          d: d
+        } = context.currentMatrix,
+        scaleX = Math.sign(a) * Math.sqrt(a * a + b * b),
+        scaleY = Math.sign(d) * Math.sqrt(c * c + d * d);
+      return scaleX + scaleY === 0 ? 0 : (strokeWidth = strokeWidth / Math.abs(scaleX + scaleY) * 2 * dpr, strokeWidth);
+    }
+    function createColor(context, c, params) {
+      let offsetX = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+      let offsetY = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+      if (!c || !0 === c) return "black";
+      let result, color;
+      if (isArray$1(c)) for (let i = 0; i < c.length && (color = c[i], !color); i++);else color = c;
+      if (color = GradientParser.Parse(color), "string" == typeof color) return color;
+      if (params.AABBBounds && (!params.attribute || 0 !== params.attribute.scaleX || 0 !== params.attribute.scaleY)) {
+        const bounds = params.AABBBounds;
+        let w = bounds.x2 - bounds.x1,
+          h = bounds.y2 - bounds.y1,
+          x = bounds.x1 - offsetX,
+          y = bounds.y1 - offsetY;
+        if (params.attribute) {
+          const {
+            scaleX = 1,
+            scaleY = 1
+          } = params.attribute;
+          w /= scaleX, h /= scaleY, x /= scaleX, y /= scaleY;
+        }
+        "linear" === color.gradient ? result = createLinearGradient(context, color, x, y, w, h) : "conical" === color.gradient ? result = createConicGradient(context, color, x, y, w, h) : "radial" === color.gradient && (result = createRadialGradient(context, color, x, y, w, h));
+      }
+      return result || "orange";
+    }
+    function createLinearGradient(context, color, x, y, w, h) {
+      var _a, _b, _c, _d;
+      const canvasGradient = context.createLinearGradient(x + (null !== (_a = color.x0) && void 0 !== _a ? _a : 0) * w, y + (null !== (_b = color.y0) && void 0 !== _b ? _b : 0) * h, x + (null !== (_c = color.x1) && void 0 !== _c ? _c : 1) * w, y + (null !== (_d = color.y1) && void 0 !== _d ? _d : 0) * h);
+      return color.stops.forEach(stop => {
+        canvasGradient.addColorStop(stop.offset, stop.color);
+      }), canvasGradient;
+    }
+    function createRadialGradient(context, color, x, y, w, h) {
+      var _a, _b, _c, _d, _e, _f;
+      const canvasGradient = context.createRadialGradient(x + (null !== (_a = color.x0) && void 0 !== _a ? _a : .5) * w, y + (null !== (_b = color.y0) && void 0 !== _b ? _b : .5) * h, Math.max(w, h) * (null !== (_c = color.r0) && void 0 !== _c ? _c : 0), x + (null !== (_d = color.x1) && void 0 !== _d ? _d : .5) * w, y + (null !== (_e = color.y1) && void 0 !== _e ? _e : .5) * h, Math.max(w, h) * (null !== (_f = color.r1) && void 0 !== _f ? _f : .5));
+      return color.stops.forEach(stop => {
+        canvasGradient.addColorStop(stop.offset, stop.color);
+      }), canvasGradient;
+    }
+    function createConicGradient(context, color, x, y, w, h) {
+      var _a, _b;
+      const canvasGradient = context.createConicGradient(x + (null !== (_a = color.x) && void 0 !== _a ? _a : 0) * w, y + (null !== (_b = color.y) && void 0 !== _b ? _b : 0) * h, color.startAngle, color.endAngle);
+      return color.stops.forEach(stop => {
+        canvasGradient.addColorStop(stop.offset, stop.color);
+      }), canvasGradient.GetPattern(w + x, h + y, undefined);
+    }
+
     const DIRECTION_KEY = {
       horizontal: {
         width: "width",
@@ -9401,14 +9687,16 @@
         fontFamily: character.fontFamily || "sans-serif"
       });
     };
-    function applyFillStyle(ctx, character) {
+    function applyFillStyle(ctx, character, b) {
       const fillStyle = character && character.fill || defaultFormatting.fill;
       if (!fillStyle) return void (ctx.globalAlpha = 0);
       const {
         fillOpacity = 1,
         opacity = 1
       } = character;
-      ctx.globalAlpha = fillOpacity * opacity, ctx.fillStyle = fillStyle, setTextStyle(ctx, character);
+      ctx.globalAlpha = fillOpacity * opacity, ctx.fillStyle = b ? createColor(ctx, fillStyle, {
+        AABBBounds: b
+      }) : fillStyle, setTextStyle(ctx, character);
     }
     function applyStrokeStyle(ctx, character) {
       const strokeStyle = character && character.stroke || defaultFormatting.stroke;
@@ -16060,292 +16348,6 @@
       }
     }
 
-    const parse = function () {
-      const tokens = {
-        linearGradient: /^(linear\-gradient)/i,
-        radialGradient: /^(radial\-gradient)/i,
-        conicGradient: /^(conic\-gradient)/i,
-        sideOrCorner: /^to (left (top|bottom)|right (top|bottom)|top (left|right)|bottom (left|right)|left|right|top|bottom)/i,
-        extentKeywords: /^(closest\-side|closest\-corner|farthest\-side|farthest\-corner|contain|cover)/,
-        positionKeywords: /^(left|center|right|top|bottom)/i,
-        pixelValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))px/,
-        percentageValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))\%/,
-        emValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))em/,
-        angleValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))deg/,
-        fromAngleValue: /^from\s*(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))deg/,
-        startCall: /^\(/,
-        endCall: /^\)/,
-        comma: /^,/,
-        hexColor: /(^\#[0-9a-fA-F]+)/,
-        literalColor: /^([a-zA-Z]+)/,
-        rgbColor: /^(rgb\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))/i,
-        rgbaColor: /^(rgba\(\d{1,3},\s*\d{1,3},\s*\d{1,3},\s*((\d\.\d+)|\d{1,3})\))/i,
-        number: /^(([0-9]*\.[0-9]+)|([0-9]+\.?))/
-      };
-      let input = "";
-      function error(msg) {
-        const err = new Error(input + ": " + msg);
-        throw err.source = input, err;
-      }
-      function getAST() {
-        const ast = matchListing(matchDefinition);
-        return input.length > 0 && error("Invalid input not EOF"), ast;
-      }
-      function matchDefinition() {
-        return matchGradient("linear", tokens.linearGradient, matchLinearOrientation) || matchGradient("radial", tokens.radialGradient, matchListRadialOrientations) || matchGradient("conic", tokens.conicGradient, matchConicalOrientation);
-      }
-      function matchGradient(gradientType, pattern, orientationMatcher) {
-        return function (pattern, callback) {
-          const captures = scan(pattern);
-          if (captures) {
-            scan(tokens.startCall) || error("Missing (");
-            const result = callback(captures);
-            return scan(tokens.endCall) || error("Missing )"), result;
-          }
-        }(pattern, function (captures) {
-          const orientation = orientationMatcher();
-          return orientation && (scan(tokens.comma) || error("Missing comma before color stops")), {
-            type: gradientType,
-            orientation: orientation,
-            colorStops: matchListing(matchColorStop)
-          };
-        });
-      }
-      function matchLinearOrientation() {
-        return match("directional", tokens.sideOrCorner, 1) || match("angular", tokens.angleValue, 1);
-      }
-      function matchConicalOrientation() {
-        return match("angular", tokens.fromAngleValue, 1);
-      }
-      function matchListRadialOrientations() {
-        let radialOrientations,
-          lookaheadCache,
-          radialOrientation = matchRadialOrientation();
-        return radialOrientation && (radialOrientations = [], radialOrientations.push(radialOrientation), lookaheadCache = input, scan(tokens.comma) && (radialOrientation = matchRadialOrientation(), radialOrientation ? radialOrientations.push(radialOrientation) : input = lookaheadCache)), radialOrientations;
-      }
-      function matchRadialOrientation() {
-        let radialType = function () {
-          const circle = match("shape", /^(circle)/i, 0);
-          circle && (circle.style = matchLength() || matchExtentKeyword());
-          return circle;
-        }() || function () {
-          const ellipse = match("shape", /^(ellipse)/i, 0);
-          ellipse && (ellipse.style = matchDistance() || matchExtentKeyword());
-          return ellipse;
-        }();
-        if (radialType) radialType.at = matchAtPosition();else {
-          const extent = matchExtentKeyword();
-          if (extent) {
-            radialType = extent;
-            const positionAt = matchAtPosition();
-            positionAt && (radialType.at = positionAt);
-          } else {
-            const defaultPosition = matchPositioning();
-            defaultPosition && (radialType = {
-              type: "default-radial",
-              at: defaultPosition
-            });
-          }
-        }
-        return radialType;
-      }
-      function matchExtentKeyword() {
-        return match("extent-keyword", tokens.extentKeywords, 1);
-      }
-      function matchAtPosition() {
-        if (match("position", /^at/, 0)) {
-          const positioning = matchPositioning();
-          return positioning || error("Missing positioning value"), positioning;
-        }
-      }
-      function matchPositioning() {
-        const location = {
-          x: matchDistance(),
-          y: matchDistance()
-        };
-        if (location.x || location.y) return {
-          type: "position",
-          value: location
-        };
-      }
-      function matchListing(matcher) {
-        let captures = matcher();
-        const result = [];
-        if (captures) for (result.push(captures); scan(tokens.comma);) captures = matcher(), captures ? result.push(captures) : error("One extra comma");
-        return result;
-      }
-      function matchColorStop() {
-        const color = match("hex", tokens.hexColor, 1) || match("rgba", tokens.rgbaColor, 1) || match("rgb", tokens.rgbColor, 1) || match("literal", tokens.literalColor, 0);
-        return color || error("Expected color definition"), color.length = matchDistance(), color;
-      }
-      function matchDistance() {
-        return match("%", tokens.percentageValue, 1) || match("position-keyword", tokens.positionKeywords, 1) || matchLength();
-      }
-      function matchLength() {
-        return match("px", tokens.pixelValue, 1) || match("em", tokens.emValue, 1);
-      }
-      function match(type, pattern, captureIndex) {
-        const captures = scan(pattern);
-        if (captures) return {
-          type: type,
-          value: captures[captureIndex]
-        };
-      }
-      function scan(regexp) {
-        const blankCaptures = /^[\n\r\t\s]+/.exec(input);
-        blankCaptures && consume(blankCaptures[0].length);
-        const captures = regexp.exec(input);
-        return captures && consume(captures[0].length), captures;
-      }
-      function consume(size) {
-        input = input.substr(size);
-      }
-      return function (code) {
-        return input = code.toString(), getAST();
-      };
-    }();
-    class GradientParser {
-      static IsGradient(c) {
-        return !("string" == typeof c && !c.includes("gradient"));
-      }
-      static IsGradientStr(c) {
-        return "string" == typeof c && c.includes("gradient");
-      }
-      static Parse(c) {
-        if (GradientParser.IsGradientStr(c)) try {
-          const datum = parse(c)[0];
-          if (datum) {
-            if ("linear" === datum.type) return GradientParser.ParseLinear(datum);
-            if ("radial" === datum.type) return GradientParser.ParseRadial(datum);
-            if ("conic" === datum.type) return GradientParser.ParseConic(datum);
-          }
-        } catch (err) {
-          return c;
-        }
-        return c;
-      }
-      static ParseConic(datum) {
-        const {
-            orientation: orientation,
-            colorStops = []
-          } = datum,
-          halfPi = pi$1 / 2,
-          sa = parseFloat(orientation.value) / 180 * pi$1 - halfPi;
-        return {
-          gradient: "conical",
-          x: .5,
-          y: .5,
-          startAngle: sa,
-          endAngle: sa + pi2,
-          stops: colorStops.map(item => ({
-            color: item.value,
-            offset: parseFloat(item.length.value) / 100
-          }))
-        };
-      }
-      static ParseRadial(datum) {
-        const {
-          colorStops = []
-        } = datum;
-        return {
-          gradient: "radial",
-          x0: .5,
-          y0: .5,
-          x1: .5,
-          y1: .5,
-          r0: 0,
-          r1: 1,
-          stops: colorStops.map(item => ({
-            color: item.value,
-            offset: parseFloat(item.length.value) / 100
-          }))
-        };
-      }
-      static ParseLinear(datum) {
-        const {
-            orientation: orientation,
-            colorStops = []
-          } = datum,
-          halfPi = pi$1 / 2;
-        let angle = "angular" === orientation.type ? parseFloat(orientation.value) / 180 * pi$1 : 0;
-        for (; angle < 0;) angle += pi2;
-        for (; angle > pi2;) angle -= pi2;
-        let x0 = 0,
-          y0 = 0,
-          x1 = 0,
-          y1 = 0;
-        return angle < halfPi ? (x0 = 0, y0 = 1, x1 = Math.sin(angle), y1 = Math.cos(angle)) : angle < pi$1 ? (x0 = 0, y0 = 0, x1 = Math.cos(angle - halfPi), y1 = Math.sin(angle - halfPi)) : angle < pi$1 + halfPi ? (x0 = 1, y0 = 0, x1 = x0 - Math.sin(angle - pi$1), y1 = Math.cos(angle - pi$1)) : (x0 = 1, x1 = x0 - Math.cos(angle - halfPi - pi$1), y1 -= Math.sin(angle - halfPi - pi$1)), {
-          gradient: "linear",
-          x0: x0,
-          y0: y0,
-          x1: x1,
-          y1: y1,
-          stops: colorStops.map(item => ({
-            color: item.value,
-            offset: parseFloat(item.length.value) / 100
-          }))
-        };
-      }
-    }
-
-    function getScaledStroke(context, width, dpr) {
-      let strokeWidth = width;
-      const {
-          a: a,
-          b: b,
-          c: c,
-          d: d
-        } = context.currentMatrix,
-        scaleX = Math.sign(a) * Math.sqrt(a * a + b * b),
-        scaleY = Math.sign(d) * Math.sqrt(c * c + d * d);
-      return scaleX + scaleY === 0 ? 0 : (strokeWidth = strokeWidth / Math.abs(scaleX + scaleY) * 2 * dpr, strokeWidth);
-    }
-    function createColor(context, c, params) {
-      let offsetX = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
-      let offsetY = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
-      if (!c || !0 === c) return "black";
-      let result, color;
-      if (isArray$1(c)) for (let i = 0; i < c.length && (color = c[i], !color); i++);else color = c;
-      if (color = GradientParser.Parse(color), "string" == typeof color) return color;
-      if (params.AABBBounds && (!params.attribute || 0 !== params.attribute.scaleX || 0 !== params.attribute.scaleY)) {
-        const bounds = params.AABBBounds;
-        let w = bounds.x2 - bounds.x1,
-          h = bounds.y2 - bounds.y1,
-          x = bounds.x1 - offsetX,
-          y = bounds.y1 - offsetY;
-        if (params.attribute) {
-          const {
-            scaleX = 1,
-            scaleY = 1
-          } = params.attribute;
-          w /= scaleX, h /= scaleY, x /= scaleX, y /= scaleY;
-        }
-        "linear" === color.gradient ? result = createLinearGradient(context, color, x, y, w, h) : "conical" === color.gradient ? result = createConicGradient(context, color, x, y, w, h) : "radial" === color.gradient && (result = createRadialGradient(context, color, x, y, w, h));
-      }
-      return result || "orange";
-    }
-    function createLinearGradient(context, color, x, y, w, h) {
-      var _a, _b, _c, _d;
-      const canvasGradient = context.createLinearGradient(x + (null !== (_a = color.x0) && void 0 !== _a ? _a : 0) * w, y + (null !== (_b = color.y0) && void 0 !== _b ? _b : 0) * h, x + (null !== (_c = color.x1) && void 0 !== _c ? _c : 1) * w, y + (null !== (_d = color.y1) && void 0 !== _d ? _d : 0) * h);
-      return color.stops.forEach(stop => {
-        canvasGradient.addColorStop(stop.offset, stop.color);
-      }), canvasGradient;
-    }
-    function createRadialGradient(context, color, x, y, w, h) {
-      var _a, _b, _c, _d, _e, _f;
-      const canvasGradient = context.createRadialGradient(x + (null !== (_a = color.x0) && void 0 !== _a ? _a : .5) * w, y + (null !== (_b = color.y0) && void 0 !== _b ? _b : .5) * h, Math.max(w, h) * (null !== (_c = color.r0) && void 0 !== _c ? _c : 0), x + (null !== (_d = color.x1) && void 0 !== _d ? _d : .5) * w, y + (null !== (_e = color.y1) && void 0 !== _e ? _e : .5) * h, Math.max(w, h) * (null !== (_f = color.r1) && void 0 !== _f ? _f : .5));
-      return color.stops.forEach(stop => {
-        canvasGradient.addColorStop(stop.offset, stop.color);
-      }), canvasGradient;
-    }
-    function createConicGradient(context, color, x, y, w, h) {
-      var _a, _b;
-      const canvasGradient = context.createConicGradient(x + (null !== (_a = color.x) && void 0 !== _a ? _a : 0) * w, y + (null !== (_b = color.y) && void 0 !== _b ? _b : 0) * h, color.startAngle, color.endAngle);
-      return color.stops.forEach(stop => {
-        canvasGradient.addColorStop(stop.offset, stop.color);
-      }), canvasGradient.GetPattern(w + x, h + y, undefined);
-    }
-
     var __decorate$1t = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
@@ -18748,7 +18750,10 @@
         const {
           context: context
         } = drawContext;
-        if (context.highPerformanceSave(), context.transformFromMatrix(graphic.transMatrix, !0), drawContribution.dirtyBounds && drawContribution.backupDirtyBounds) {
+        context.highPerformanceSave();
+        const t1 = graphic.parent.globalTransMatrix,
+          t2 = graphic.stage.window.getViewBoxTransform().clone().multiply(t1.a, t1.b, t1.c, t1.d, t1.e, t1.f);
+        if (graphic.parent && context.setTransformFromMatrix(t2, !0), drawContribution.dirtyBounds && drawContribution.backupDirtyBounds) {
           tempDirtyBounds.copy(drawContribution.dirtyBounds), tempBackupDirtyBounds.copy(drawContribution.backupDirtyBounds);
           const m = graphic.globalTransMatrix.getInverse();
           drawContribution.dirtyBounds.copy(drawContribution.backupDirtyBounds).transformWithMatrix(m), drawContribution.backupDirtyBounds.copy(drawContribution.dirtyBounds);
@@ -19636,6 +19641,9 @@
           bounds.x1 = -halfS, bounds.x2 = halfS, bounds.y1 = -halfS, bounds.y2 = halfS;
         } else bounds.x1 = -size[0] / 2, bounds.x2 = size[0] / 2, bounds.y1 = -size[1] / 2, bounds.y2 = size[1] / 2;
       }
+      parseSize(size) {
+        return isNumber$1(size) ? size : Math.min(size[0], size[1]);
+      }
     }
 
     function circle$1(ctx, r, x, y, z) {
@@ -19646,13 +19654,13 @@
         super(...arguments), this.type = "circle", this.pathStr = "M0.5,0A0.5,0.5,0,1,1,-0.5,0A0.5,0.5,0,1,1,0.5,0";
       }
       draw(ctx, size, x, y, z) {
-        return circle$1(ctx, size / 2, x, y, z);
+        return circle$1(ctx, this.parseSize(size) / 2, x, y, z);
       }
       drawOffset(ctx, size, x, y, offset, z) {
-        return circle$1(ctx, size / 2 + offset, x, y, z);
+        return circle$1(ctx, this.parseSize(size) / 2 + offset, x, y, z);
       }
       drawToSvgPath(size, x, y, z) {
-        const r = size / 2;
+        const r = this.parseSize(size) / 2;
         return `M ${x - r}, ${y} a ${r},${r} 0 1,0 ${2 * r},0 a ${r},${r} 0 1,0 -${2 * r},0`;
       }
     }
@@ -19669,10 +19677,10 @@
         super(...arguments), this.type = "cross", this.pathStr = "M-0.5,-0.2L-0.5,0.2L-0.2,0.2L-0.2,0.5L0.2,0.5L0.2,0.2L0.5,0.2L0.5,-0.2L0.2,-0.2L0.2,-0.5L-0.2,-0.5L-0.2,-0.2Z";
       }
       draw(ctx, size, x, y, z) {
-        return cross(ctx, size / 6, x, y, z);
+        return cross(ctx, this.parseSize(size) / 6, x, y, z);
       }
       drawOffset(ctx, size, x, y, offset, z) {
-        return crossOffset(ctx, size / 6, x, y, offset, z);
+        return crossOffset(ctx, this.parseSize(size) / 6, x, y, offset, z);
       }
     }
     var cross$1 = new CrossSymbol();
@@ -19685,13 +19693,13 @@
         super(...arguments), this.type = "diamond", this.pathStr = "M-0.5,0L0,-0.5L0.5,0L0,0.5Z";
       }
       draw(ctx, size, x, y, z) {
-        return diamond$1(ctx, size / 2, x, y, z);
+        return diamond$1(ctx, this.parseSize(size) / 2, x, y, z);
       }
       drawFitDir(ctx, size, x, y, z) {
-        return diamond$1(ctx, size / 2, x, y, z);
+        return diamond$1(ctx, this.parseSize(size) / 2, x, y, z);
       }
       drawOffset(ctx, size, x, y, offset, z) {
-        return diamond$1(ctx, size / 2 + offset, x, y, z);
+        return diamond$1(ctx, this.parseSize(size) / 2 + offset, x, y, z);
       }
     }
     var diamond$2 = new DiamondSymbol();
@@ -19705,10 +19713,10 @@
         super(...arguments), this.type = "square", this.pathStr = "M-0.5,-0.5h1v1h-1Z";
       }
       draw(ctx, size, x, y) {
-        return square$2(ctx, size / 2, x, y);
+        return square$2(ctx, this.parseSize(size) / 2, x, y);
       }
       drawOffset(ctx, size, x, y, offset) {
-        return square$2(ctx, size / 2 + offset, x, y);
+        return square$2(ctx, this.parseSize(size) / 2 + offset, x, y);
       }
     }
     var square$3 = new SquareSymbol();
@@ -19722,10 +19730,10 @@
         super(...arguments), this.type = "triangleUp", this.pathStr = "M0.5,0.5 L-0.5,0.5 L0,-0.5 Z";
       }
       draw(ctx, size, x, y) {
-        return trianglUpOffset(ctx, size / 2, x, y);
+        return trianglUpOffset(ctx, this.parseSize(size) / 2, x, y);
       }
       drawOffset(ctx, size, x, y, offset) {
-        return trianglUpOffset(ctx, size / 2, x, y, offset);
+        return trianglUpOffset(ctx, this.parseSize(size) / 2, x, y, offset);
       }
     }
     var triangleUp = new TriangleUpSymbol();
@@ -19757,10 +19765,10 @@
         super(...arguments), this.type = "star", this.pathStr = "M0 -1L0.22451398828979266 -0.3090169943749474L0.9510565162951535 -0.30901699437494745L0.3632712640026804 0.1180339887498948L0.5877852522924732 0.8090169943749473L8.326672684688674e-17 0.3819660112501051L-0.587785252292473 0.8090169943749476L-0.3632712640026804 0.11803398874989487L-0.9510565162951536 -0.30901699437494723L-0.22451398828979274 -0.30901699437494734Z";
       }
       draw(ctx, size, transX, transY) {
-        return star$1(ctx, size / 2, transX, transY);
+        return star$1(ctx, this.parseSize(size) / 2, transX, transY);
       }
       drawOffset(ctx, size, transX, transY, offset) {
-        return star$1(ctx, size / 2 + offset, transX, transY);
+        return star$1(ctx, this.parseSize(size) / 2 + offset, transX, transY);
       }
     }
     var star$2 = new StarSymbol();
@@ -19778,10 +19786,10 @@
         super(...arguments), this.type = "arrow", this.pathStr = "M-0.07142857142857142,0.5L0.07142857142857142,0.5L0.07142857142857142,-0.0625L0.2,-0.0625L0,-0.5L-0.2,-0.0625L-0.07142857142857142,-0.0625Z";
       }
       draw(ctx, size, transX, transY) {
-        return arrow(ctx, size / 2, transX, transY);
+        return arrow(ctx, this.parseSize(size) / 2, transX, transY);
       }
       drawOffset(ctx, size, transX, transY, offset) {
-        return arrow(ctx, size / 2 + offset, transX, transY);
+        return arrow(ctx, this.parseSize(size) / 2 + offset, transX, transY);
       }
     }
     var arrow$1 = new ArrowSymbol();
@@ -19795,10 +19803,10 @@
         super(...arguments), this.type = "wedge", this.pathStr = "M0,-0.5773502691896257L-0.125,0.28867513459481287L0.125,0.28867513459481287Z";
       }
       draw(ctx, size, transX, transY) {
-        return wedge(ctx, size / 2, transX, transY);
+        return wedge(ctx, this.parseSize(size) / 2, transX, transY);
       }
       drawOffset(ctx, size, transX, transY, offset) {
-        return wedge(ctx, size / 2 + offset, transX, transY);
+        return wedge(ctx, this.parseSize(size) / 2 + offset, transX, transY);
       }
     }
     var wedge$1 = new WedgeSymbol();
@@ -19811,10 +19819,10 @@
         super(...arguments), this.type = "stroke", this.pathStr = "";
       }
       draw(ctx, size, transX, transY) {
-        return stroke(ctx, size / 2, transX, transY);
+        return stroke(ctx, this.parseSize(size) / 2, transX, transY);
       }
       drawOffset(ctx, size, transX, transY, offset) {
-        return stroke(ctx, size / 2 + offset, transX, transY);
+        return stroke(ctx, this.parseSize(size) / 2 + offset, transX, transY);
       }
     }
     var stroke$1 = new StrokeSymbol();
@@ -19836,10 +19844,10 @@
         super(...arguments), this.type = "wye", this.pathStr = "M0.25 0.14433756729740646L0.25 0.6443375672974064L-0.25 0.6443375672974064L-0.25 0.14433756729740643L-0.6830127018922193 -0.10566243270259357L-0.4330127018922193 -0.5386751345948129L0 -0.28867513459481287L0.4330127018922193 -0.5386751345948129L0.6830127018922193 -0.10566243270259357Z";
       }
       draw(ctx, size, transX, transY) {
-        return wye(ctx, size / 2, transX, transY);
+        return wye(ctx, this.parseSize(size) / 2, transX, transY);
       }
       drawOffset(ctx, size, transX, transY, offset) {
-        return wye(ctx, size / 2 + offset, transX, transY);
+        return wye(ctx, this.parseSize(size) / 2 + offset, transX, transY);
       }
     }
     var wye$1 = new WyeSymbol();
@@ -19852,10 +19860,10 @@
         super(...arguments), this.type = "triangleLeft", this.pathStr = "M-0.5,0 L0.5,0.5 L0.5,-0.5 Z";
       }
       draw(ctx, size, x, y) {
-        return trianglLeftOffset(ctx, size / 2, x, y, 0);
+        return trianglLeftOffset(ctx, this.parseSize(size) / 2, x, y, 0);
       }
       drawOffset(ctx, size, x, y, offset) {
-        return trianglLeftOffset(ctx, size / 2, x, y, offset);
+        return trianglLeftOffset(ctx, this.parseSize(size) / 2, x, y, offset);
       }
     }
     var triangleLeft = new TriangleLeftSymbol();
@@ -19869,10 +19877,10 @@
         super(...arguments), this.type = "triangleRight", this.pathStr = "M-0.5,0.5 L0.5,0 L-0.5,-0.5 Z";
       }
       draw(ctx, size, x, y) {
-        return trianglRightOffset(ctx, size / 2, x, y);
+        return trianglRightOffset(ctx, this.parseSize(size) / 2, x, y);
       }
       drawOffset(ctx, size, x, y, offset) {
-        return trianglRightOffset(ctx, size / 2, x, y, offset);
+        return trianglRightOffset(ctx, this.parseSize(size) / 2, x, y, offset);
       }
     }
     var triangleRight = new TriangleRightSymbol();
@@ -19886,10 +19894,10 @@
         super(...arguments), this.type = "triangleDown", this.pathStr = "M-0.5,-0.5 L0.5,-0.5 L0,0.5 Z";
       }
       draw(ctx, size, x, y) {
-        return trianglDownOffset(ctx, size / 2, x, y);
+        return trianglDownOffset(ctx, this.parseSize(size) / 2, x, y);
       }
       drawOffset(ctx, size, x, y, offset) {
-        return trianglDownOffset(ctx, size / 2, x, y, offset);
+        return trianglDownOffset(ctx, this.parseSize(size) / 2, x, y, offset);
       }
     }
     var triangleDown = new TriangleDownSymbol();
@@ -19904,10 +19912,10 @@
         super(...arguments), this.type = "thinTriangle", this.pathStr = "M0,-0.5773502691896257L-0.5,0.28867513459481287L0.5,0.28867513459481287Z";
       }
       draw(ctx, size, x, y) {
-        return thinTriangle(ctx, size / 2 / sqrt3, x, y);
+        return thinTriangle(ctx, this.parseSize(size) / 2 / sqrt3, x, y);
       }
       drawOffset(ctx, size, x, y, offset) {
-        return thinTriangle(ctx, size / 2 / sqrt3 + offset, x, y);
+        return thinTriangle(ctx, this.parseSize(size) / 2 / sqrt3 + offset, x, y);
       }
     }
     var thinTriangle$1 = new ThinTriangleSymbol();
@@ -19921,10 +19929,10 @@
         super(...arguments), this.type = "arrow2Left", this.pathStr = "M 0.25 -0.5 L -0.25 0 l 0.25 0.5";
       }
       draw(ctx, size, transX, transY) {
-        return arrow2Left(ctx, size / 4, transX, transY);
+        return arrow2Left(ctx, this.parseSize(size) / 4, transX, transY);
       }
       drawOffset(ctx, size, transX, transY, offset) {
-        return arrow2Left(ctx, size / 4 + offset, transX, transY);
+        return arrow2Left(ctx, this.parseSize(size) / 4 + offset, transX, transY);
       }
     }
     var arrow2Left$1 = new Arrow2LeftSymbol();
@@ -19938,10 +19946,10 @@
         super(...arguments), this.type = "arrow2Right", this.pathStr = "M -0.25 -0.5 l 0.25 0 l -0.25 0.5";
       }
       draw(ctx, size, transX, transY) {
-        return arrow2Right(ctx, size / 4, transX, transY);
+        return arrow2Right(ctx, this.parseSize(size) / 4, transX, transY);
       }
       drawOffset(ctx, size, transX, transY, offset) {
-        return arrow2Right(ctx, size / 4 + offset, transX, transY);
+        return arrow2Right(ctx, this.parseSize(size) / 4 + offset, transX, transY);
       }
     }
     var arrow2Right$1 = new Arrow2RightSymbol();
@@ -19955,10 +19963,10 @@
         super(...arguments), this.type = "arrow2Up", this.pathStr = "M -0.5 0.25 L 0 -0.25 l 0.5 0.25";
       }
       draw(ctx, size, transX, transY) {
-        return arrow2Up(ctx, size / 4, transX, transY);
+        return arrow2Up(ctx, this.parseSize(size) / 4, transX, transY);
       }
       drawOffset(ctx, size, transX, transY, offset) {
-        return arrow2Up(ctx, size / 4 + offset, transX, transY);
+        return arrow2Up(ctx, this.parseSize(size) / 4 + offset, transX, transY);
       }
     }
     var arrow2Up$1 = new Arrow2UpSymbol();
@@ -19972,10 +19980,10 @@
         super(...arguments), this.type = "arrow2Down", this.pathStr = "M -0.5 -0.25 L 0 0.25 l 0.5 -0.25";
       }
       draw(ctx, size, transX, transY) {
-        return arrow2Down(ctx, size / 4, transX, transY);
+        return arrow2Down(ctx, this.parseSize(size) / 4, transX, transY);
       }
       drawOffset(ctx, size, transX, transY, offset) {
-        return arrow2Down(ctx, size / 4 + offset, transX, transY);
+        return arrow2Down(ctx, this.parseSize(size) / 4 + offset, transX, transY);
       }
     }
     var arrow2Down$1 = new Arrow2DownSymbol();
@@ -19988,13 +19996,13 @@
         super(...arguments), this.type = "lineV", this.pathStr = "M0,-0.5L0,0.5";
       }
       draw(ctx, size, x, y, z) {
-        return lineV(ctx, size / 2, x, y);
+        return lineV(ctx, this.parseSize(size) / 2, x, y);
       }
       drawOffset(ctx, size, x, y, offset, z) {
-        return lineV(ctx, size / 2 + offset, x, y);
+        return lineV(ctx, this.parseSize(size) / 2 + offset, x, y);
       }
       drawToSvgPath(size, x, y, z) {
-        const r = size / 2;
+        const r = this.parseSize(size) / 2;
         return `M ${x}, ${y - r} L ${x},${y + r}`;
       }
     }
@@ -20008,13 +20016,13 @@
         super(...arguments), this.type = "lineH", this.pathStr = "M-0.5,0L0.5,0";
       }
       draw(ctx, size, x, y, z) {
-        return lineH(ctx, size / 2, x, y);
+        return lineH(ctx, this.parseSize(size) / 2, x, y);
       }
       drawOffset(ctx, size, x, y, offset, z) {
-        return lineH(ctx, size / 2 + offset, x, y);
+        return lineH(ctx, this.parseSize(size) / 2 + offset, x, y);
       }
       drawToSvgPath(size, x, y, z) {
-        const r = size / 2;
+        const r = this.parseSize(size) / 2;
         return `M ${x - r}, ${y} L ${x + r},${y}`;
       }
     }
@@ -20028,13 +20036,13 @@
         super(...arguments), this.type = "close", this.pathStr = "M-0.5,-0.5L0.5,0.5,M0.5,-0.5L-0.5,0.5";
       }
       draw(ctx, size, x, y, z) {
-        return close(ctx, size / 2, x, y);
+        return close(ctx, this.parseSize(size) / 2, x, y);
       }
       drawOffset(ctx, size, x, y, offset, z) {
-        return close(ctx, size / 2 + offset, x, y);
+        return close(ctx, this.parseSize(size) / 2 + offset, x, y);
       }
       drawToSvgPath(size, x, y, z) {
-        const r = size / 2;
+        const r = this.parseSize(size) / 2;
         return `M ${x - r}, ${y - r} L ${x + r},${y + r} M ${x + r}, ${y - r} L ${x - r},${y + r}`;
       }
     }
@@ -20068,15 +20076,18 @@
         this.pathStr = "", this.type = type, isArray$1(path) ? this.svgCache = path : this.path = path, this.isSvg = isSvg;
       }
       drawOffset(ctx, size, x, y, offset, z, cb) {
-        return this.isSvg ? !!this.svgCache && (this.svgCache.forEach(item => {
+        return size = this.parseSize(size), this.isSvg ? !!this.svgCache && (this.svgCache.forEach(item => {
           ctx.beginPath(), renderCommandList(item.path.commandList, ctx, x, y, size, size), cb && cb(item.path, item.attribute);
         }), !1) : (renderCommandList(this.path.commandList, ctx, x, y, size + offset, size + offset), !1);
       }
       draw(ctx, size, x, y, z, cb) {
-        return this.drawOffset(ctx, size, x, y, 0, z, cb);
+        return size = this.parseSize(size), this.drawOffset(ctx, size, x, y, 0, z, cb);
+      }
+      parseSize(size) {
+        return isNumber$1(size) ? size : Math.min(size[0], size[1]);
       }
       bounds(size, bounds) {
-        if (this.isSvg) {
+        if (size = this.parseSize(size), this.isSvg) {
           if (!this.svgCache) return;
           return bounds.clear(), void this.svgCache.forEach(_ref => {
             let {
@@ -20759,7 +20770,11 @@
           case "sub":
             baseline += this.descent / 2;
         }
-        "vertical" === direction && (ctx.save(), ctx.rotateAbout(Math.PI / 2, left, baseline), ctx.translate(-this.heightOrigin || -this.lineHeight / 2, -this.descent / 2), ctx.translate(left, baseline), left = 0, baseline = 0), this.character.stroke && (applyStrokeStyle(ctx, this.character), ctx.strokeText(text, left, baseline)), applyFillStyle(ctx, this.character), this.character.fill && ctx.fillText(text, left, baseline), this.character.fill && ("boolean" == typeof this.character.lineThrough || "boolean" == typeof this.character.underline ? (this.character.underline && ctx.fillRect(left, 1 + baseline, this.widthOrigin || this.width, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1), this.character.lineThrough && ctx.fillRect(left, 1 + baseline - this.ascent / 2, this.widthOrigin || this.width, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1)) : "underline" === this.character.textDecoration ? ctx.fillRect(left, 1 + baseline, this.widthOrigin || this.width, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1) : "line-through" === this.character.textDecoration && ctx.fillRect(left, 1 + baseline - this.ascent / 2, this.widthOrigin || this.width, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1)), "vertical" === direction && ctx.restore();
+        "vertical" === direction && (ctx.save(), ctx.rotateAbout(Math.PI / 2, left, baseline), ctx.translate(-this.heightOrigin || -this.lineHeight / 2, -this.descent / 2), ctx.translate(left, baseline), left = 0, baseline = 0);
+        const {
+          lineWidth = 1
+        } = this.character;
+        this.character.stroke && lineWidth && ctx.strokeText(text, left, baseline), this.character.fill && ctx.fillText(text, left, baseline), this.character.fill && ("boolean" == typeof this.character.lineThrough || "boolean" == typeof this.character.underline ? (this.character.underline && ctx.fillRect(left, 1 + baseline, this.widthOrigin || this.width, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1), this.character.lineThrough && ctx.fillRect(left, 1 + baseline - this.ascent / 2, this.widthOrigin || this.width, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1)) : "underline" === this.character.textDecoration ? ctx.fillRect(left, 1 + baseline, this.widthOrigin || this.width, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1) : "line-through" === this.character.textDecoration && ctx.fillRect(left, 1 + baseline - this.ascent / 2, this.widthOrigin || this.width, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1)), "vertical" === direction && ctx.restore();
       }
       getWidthWithEllips(direction) {
         let text = this.text;
@@ -20982,12 +20997,18 @@
             paragraph.ellipsis = "hide", otherParagraphWidth += paragraph.width;
           }
         }
-        this.paragraphs.map((paragraph, index) => {
+        this.paragraphs.forEach((paragraph, index) => {
           if (paragraph instanceof RichTextIcon) return paragraph.setAttributes({
             x: x + paragraph._x,
             y: y + paragraph._y
           }), void drawIcon(paragraph, ctx, x + paragraph._x, y + paragraph._y, this.ascent);
-          paragraph.draw(ctx, y + this.ascent, x, 0 === index, this.textAlign);
+          const b = {
+            x1: this.left,
+            y1: this.top,
+            x2: this.left + this.actualWidth,
+            y2: this.top + this.height
+          };
+          applyStrokeStyle(ctx, paragraph.character), applyFillStyle(ctx, paragraph.character, b), paragraph.draw(ctx, y + this.ascent, x, 0 === index, this.textAlign);
         });
       }
       getWidthWithEllips(ellipsis) {
@@ -21010,7 +21031,7 @@
           paragraph.ellipsis = "hide", otherParagraphWidth += paragraph.width;
         }
         let width = 0;
-        return this.paragraphs.map((paragraph, index) => {
+        return this.paragraphs.forEach((paragraph, index) => {
           width += paragraph instanceof RichTextIcon ? paragraph.width : paragraph.getWidthWithEllips(this.direction);
         }), width;
       }
@@ -31756,19 +31777,28 @@
       return "rect" === type ? DefaultRectPositions : DefaultPositions;
     }
     function clampText(text, width, height) {
+      let padding = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
       const {
           x1: x1,
           x2: x2,
           y1: y1,
           y2: y2
         } = text.AABBBounds,
+        {
+          top = 0,
+          left = 0,
+          right = 0,
+          bottom = 0
+        } = padding,
         minX = Math.min(x1, x2),
         maxX = Math.max(x1, x2),
         minY = Math.min(y1, y2),
-        maxY = Math.max(y1, y2);
+        maxY = Math.max(y1, y2),
+        minXWithPadding = 0 - left,
+        minYWithPadding = 0 - top;
       let dx = 0,
         dy = 0;
-      return minX < 0 && maxX - minX <= width ? dx = -minX : maxX > width && minX - (maxX - width) >= 0 && (dx = width - maxX), minY < 0 && maxY - minY <= height ? dy = -minY : maxY > height && minY - (maxY - height) >= 0 && (dy = height - maxY), {
+      return minX < minXWithPadding && maxX - minX <= width ? dx = -minX : maxX > width + right && minX - (maxX - width) >= minXWithPadding && (dx = width - maxX), minY < minYWithPadding && maxY - minY <= height ? dy = -minY : maxY > height + bottom && minY - (maxY - height) >= minYWithPadding && (dy = height - maxY), {
         dx: dx,
         dy: dy
       };
@@ -32063,71 +32093,166 @@
       registerGroup(), registerText(), registerRichtext(), registerLine();
     }
 
-    function shiftY(texts) {
-      let option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    const isIntersect = (top, bottom) => Math.ceil(top) > Math.floor(bottom),
+      isXIntersect = (_ref, _ref2) => {
+        let [a, b] = _ref;
+        let [c, d] = _ref2;
+        return d > a && b > c;
+      };
+    function getIntersectionLength(range1, range2) {
+      const [start1, end1] = range1,
+        [start2, end2] = range2,
+        start = Math.max(start1, start2),
+        end = Math.min(end1, end2);
+      return Math.max(0, end - start);
+    }
+    function shiftY(texts, option) {
       const {
-          maxIterations = 10,
-          maxError = .1,
-          padding = 1,
-          maxY = Number.MAX_VALUE
+          maxY = Number.MAX_VALUE,
+          labelling: labelling,
+          globalShiftY = {
+            enable: !0,
+            maxIterations: 10,
+            maxError: .1,
+            padding: 1
+          }
         } = option,
         n = texts.length;
       if (n <= 1) return texts;
-      const isIntersect = (_ref, _ref2) => {
-          let [a, b] = _ref;
-          let [c, d] = _ref2;
-          return d > a && b > c;
-        },
+      const xMap = new Map(),
         textInformation = new Map(),
-        getY0 = text => textInformation.get(text).y0,
-        getY = text => textInformation.get(text).y,
+        getY1Initial = text => textInformation.get(text).y1Initial,
         getHeight = text => textInformation.get(text).height,
+        getY1 = text => textInformation.get(text).y1,
+        getX = text => textInformation.get(text).x,
         getX1 = text => textInformation.get(text).x1,
         getX2 = text => textInformation.get(text).x2,
-        setY = (text, y) => {
-          textInformation.get(text).y = y;
+        getAdjustAttempts = text => textInformation.get(text).attempts,
+        setY1 = (text, y) => {
+          textInformation.get(text).y1 = y;
+        },
+        setAdjustAttempts = (text, attempts) => {
+          textInformation.get(text).attempts = attempts;
         };
+      function adjustPositionInOneGroup(texts) {
+        var text;
+        if (1 !== texts.length) for (let i = texts.length - 1; i > 0; i--) {
+          const curText = texts[i],
+            upperText = texts[i - 1],
+            lowerText = texts[i + 1];
+          if (isIntersect(getY1(upperText) + getHeight(upperText), getY1(curText))) {
+            const {
+              y: y
+            } = labelling(curText);
+            lowerText && isIntersect(y + getHeight(curText) / 2, getY1(lowerText)) || y + getHeight(curText) / 2 <= maxY && setY1(curText, getY1(curText) + y - (text = curText, textInformation.get(text).y));
+          }
+        }
+      }
+      texts.sort((a, b) => a.attribute.x - b.attribute.x);
       for (const text of texts) {
         const {
+            y1: y1,
+            y2: y2,
+            x1: x1,
+            x2: x2
+          } = text.AABBBounds,
+          {
+            x: x,
+            y: y
+          } = text.attribute;
+        textInformation.set(text, {
+          y1Initial: y1,
           y1: y1,
           y2: y2,
-          x1: x1,
-          x2: x2
-        } = text.AABBBounds;
-        textInformation.set(text, {
-          y0: y1,
-          y: y1,
+          y: y,
           height: y2 - y1,
           x1: x1,
-          x2: x2
+          x2: x2,
+          x: x,
+          attempts: 0
         });
+        let hasRange = !1;
+        for (const [range, xGroupTexts] of xMap) {
+          const {
+            start: start,
+            end: end
+          } = range;
+          if (x1 >= start && x2 <= end) xGroupTexts.push(text), hasRange = !0;else if (isNumberClose(x, getX(xGroupTexts[0]), void 0, 5)) {
+            const newRange = {
+              start: Math.min(start, x1),
+              end: Math.max(end, x2)
+            };
+            xGroupTexts.push(text), xMap.set(newRange, xGroupTexts), xMap.delete(range), hasRange = !0;
+          } else if (getIntersectionLength([start, end], [x1, x2]) / (end - start) > .5) {
+            const newRange = {
+              start: Math.min(start, x1),
+              end: Math.max(end, x2)
+            };
+            xGroupTexts.push(text), xMap.set(newRange, xGroupTexts), xMap.delete(range), hasRange = !0;
+          }
+          if (hasRange) break;
+        }
+        hasRange || xMap.set({
+          start: x1,
+          end: x2
+        }, [text]);
       }
-      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 nextText,
-            j = i + 1;
-          for (; (nextText = texts[j]) && !isIntersect([getX1(curText), getX2(curText)], [getX1(nextText), getX2(nextText)]);) j += 1;
-          if (nextText) {
-            const y0 = getY(curText),
-              h0 = getHeight(curText),
-              y1 = getY(nextText),
-              delta = y1 - (y0 + h0);
-            if (delta < padding) {
-              const newDelta = (padding - delta) / 2;
-              error = Math.max(error, newDelta), y1 + newDelta + getHeight(nextText) > maxY ? setY(curText, y0 - (padding - delta)) : y0 - newDelta < 0 ? setY(nextText, y1 + (padding - delta)) : (setY(curText, y0 - newDelta), setY(nextText, y1 + newDelta));
+      for (const xTexts of xMap.values()) xTexts.sort((a, b) => getY1Initial(a) - getY1Initial(b)), adjustPositionInOneGroup(xTexts);
+      if (!1 !== globalShiftY.enable) {
+        const {
+          maxIterations = 10,
+          maxError = .1,
+          padding = 1,
+          maxAttempts = 1e3,
+          deltaYTolerance = Number.MAX_VALUE
+        } = globalShiftY;
+        for (let iter = 0; iter < maxIterations; iter++) {
+          texts.sort((a, b) => getY1(a) - getY1(b));
+          let error = 0;
+          for (let i = 0; i < n - 1; i++) {
+            const curText = texts[i];
+            if (getAdjustAttempts(curText) >= maxAttempts) continue;
+            let nextText,
+              j = i + 1;
+            for (; (nextText = texts[j]) && !isXIntersect([getX1(curText), getX2(curText)], [getX1(nextText), getX2(nextText)]);) j += 1;
+            if (nextText) {
+              const y1 = getY1(curText),
+                h0 = getHeight(curText),
+                nextY1 = getY1(nextText),
+                delta = nextY1 - (y1 + h0);
+              if (delta < padding) {
+                const newDelta = (padding - delta) / 2;
+                if (error = Math.max(error, newDelta), y1 + newDelta + getHeight(nextText) > maxY) {
+                  const newY1 = y1 - (padding - delta),
+                    curTextDelta = getY1Initial(curText) - newY1;
+                  Math.abs(curTextDelta) <= deltaYTolerance && (setY1(curText, newY1), setAdjustAttempts(curText, getAdjustAttempts(curText) + 1));
+                } else if (y1 - newDelta < 0) {
+                  const newY1 = nextY1 + (padding - delta),
+                    nextTextDelta = getY1Initial(nextText) - newY1;
+                  Math.abs(nextTextDelta) <= deltaYTolerance && (setY1(nextText, newY1), setAdjustAttempts(nextText, getAdjustAttempts(nextText) + 1));
+                } else {
+                  const newCurY1 = y1 - newDelta,
+                    curTextDelta = getY1Initial(curText) - newCurY1,
+                    newNextY1 = nextY1 + newDelta,
+                    nextTextDelta = getY1Initial(nextText) - newNextY1;
+                  Math.abs(curTextDelta) <= deltaYTolerance && Math.abs(nextTextDelta) <= deltaYTolerance && (setY1(curText, newCurY1), setY1(nextText, newNextY1), setAdjustAttempts(curText, getAdjustAttempts(curText) + 1), setAdjustAttempts(nextText, getAdjustAttempts(nextText) + 1));
+                }
+              }
             }
           }
+          if (error < maxError) break;
         }
-        if (error < maxError) break;
       }
       for (const text of texts) {
-        const finalY = text.attribute.y + getY(text) - getY0(text);
+        const finalY = text.attribute.y + getY1(text) - getY1Initial(text);
         text.setAttribute("y", finalY);
       }
-      return texts;
+      const result = [];
+      texts.sort((a, b) => a.attribute.x - b.attribute.x);
+      let start = 0,
+        end = texts.length - 1;
+      for (; start <= end;) start === end ? result.push(texts[start]) : (result.push(texts[start]), result.push(texts[end])), start++, end--;
+      return result;
     }
 
     var __rest$b = undefined && undefined.__rest || function (s, e) {
@@ -32366,20 +32491,26 @@
             {
               dx = 0,
               dy = 0
-            } = clampText(text, bmpTool.width, bmpTool.height);
-          0 === dx && 0 === dy || text.setAttributes({
+            } = clampText(text, bmpTool.width, bmpTool.height, bmpTool.padding);
+          0 === dx && 0 === dy || (text.setAttributes({
             x: text.attribute.x + dx,
             y: text.attribute.y + dy
-          });
+          }), text._isClamped = !0);
         }
-        result = shiftY(result, Object.assign({
+        result = shiftY(result, Object.assign(Object.assign({
           maxY: bmpTool.height
-        }, strategy));
+        }, strategy), {
+          labelling: text => {
+            const baseMark = this.getRelatedGraphic(text.attribute),
+              graphicBound = this._isCollectionBase ? this.getGraphicBounds(null, this._idToPoint.get(text.attribute.id)) : this.getGraphicBounds(baseMark, text);
+            return this.labeling(text.AABBBounds, graphicBound, "bottom", this.attribute.offset);
+          }
+        }));
         for (let i = 0; i < result.length; i++) {
           const text = result[i],
             bounds = text.AABBBounds,
             range = boundToRange(bmpTool, bounds, !0);
-          canPlace(bmpTool, bitmap, bounds, clampForce, overlapPadding) ? bitmap.setRange(range) : hideOnHit ? text.setAttributes({
+          canPlace(bmpTool, bitmap, bounds, clampForce, text._isClamped ? 0 : overlapPadding) ? bitmap.setRange(range) : hideOnHit ? text.setAttributes({
             visible: !1
           }) : bitmap.setRange(range);
         }
@@ -32436,7 +32567,7 @@
             const {
               dx = 0,
               dy = 0
-            } = clampText(text, bmpTool.width, bmpTool.height);
+            } = clampText(text, bmpTool.width, bmpTool.height, bmpTool.padding);
             if (0 === dx && 0 === dy) {
               if (canPlace(bmpTool, bitmap, text.AABBBounds)) {
                 bitmap.setRange(boundToRange(bmpTool, text.AABBBounds, !0)), result.push(text);
@@ -47843,10 +47974,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         return this.options.state;
       }
       start(element) {
-        element && this._marks && this._marks.includes(element.mark) && element.addState(this.options.state);
+        element && this._marks && this._marks.includes(element.mark) && (element.addState(this.options.state), this._prevActiveElement = element);
       }
       reset(element) {
-        element && this._marks && this._marks.includes(element.mark) && element.removeState(this.options.state);
+        const el = null != element ? element : this._prevActiveElement;
+        el && this._marks && this._marks.includes(el.mark) && el.removeState(this.options.state);
       }
     }
     ElementActive.type = "element-active", ElementActive.defaultOptions = {
@@ -47884,7 +48016,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
 
     class ElementSelect extends BaseInteraction {
       constructor(view, options) {
-        super(view, options), this.type = ElementSelect.type, this._resetType = [], this.clearPrevElements = () => {
+        super(view, options), this.type = ElementSelect.type, this._resetType = [], this.resetAll = () => {
           const {
             state: state,
             reverseState: reverseState
@@ -47896,7 +48028,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }, this.handleStart = e => {
           this.start(e.element);
         }, this.handleReset = e => {
-          this.reset(e.element);
+          if (!this._statedElements || !this._statedElements.length) return;
+          const element = e.element,
+            hasActiveElement = element && this._marks && this._marks.includes(element.mark);
+          (this._resetType.includes("view") && !hasActiveElement || this._resetType.includes("self") && hasActiveElement) && this.resetAll();
         }, this.options = Object.assign({}, ElementSelect.defaultOptions, options), this._marks = view.getMarksBySelector(this.options.selector), this._stateMarks = groupMarksByState(this._marks, [this.options.state, this.options.reverseState]);
       }
       getStartState() {
@@ -47930,20 +48065,18 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
           if (element.hasState(state)) {
             if (this._resetType.includes("self")) {
               const newStatedElements = this._statedElements && this._statedElements.filter(el => el !== element);
-              newStatedElements && newStatedElements.length ? this._statedElements = this.updateStates(newStatedElements, this._statedElements, state, reverseState) : this.clearPrevElements();
+              newStatedElements && newStatedElements.length ? this._statedElements = this.updateStates(newStatedElements, this._statedElements, state, reverseState) : this.resetAll();
             }
           } else this._timer && clearTimeout(this._timer), element.addState(state), this._statedElements = this.updateStates(isMultiple && this._statedElements ? [...this._statedElements, element] : [element], this._statedElements, state, reverseState), this.dispatchEvent("start", {
             elements: this._statedElements,
             options: this.options
           }), this._resetType.includes("timeout") && (this._timer = setTimeout(() => {
-            this.clearPrevElements();
+            this.resetAll();
           }, this.options.triggerOff));
-        } else this._resetType.includes("view") && this._statedElements && this._statedElements.length && this.clearPrevElements();
+        } else this._resetType.includes("view") && this._statedElements && this._statedElements.length && this.resetAll();
       }
       reset(element) {
-        if (!this._statedElements || !this._statedElements.length) return;
-        const hasActiveElement = element && this._marks && this._marks.includes(element.mark);
-        (this._resetType.includes("view") && !hasActiveElement || this._resetType.includes("self") && hasActiveElement) && this.clearPrevElements();
+        element ? this._marks && this._marks.includes(element.mark) && element.removeState([this.options.state, this.options.reverseState]) : this.resetAll();
       }
     }
     ElementSelect.type = "element-select", ElementSelect.defaultOptions = {
@@ -47956,7 +48089,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         super(view, options), this.type = ElementHighlight.type, this.handleStart = e => {
           this.start(e.element);
         }, this.handleReset = e => {
-          this.reset(e.element);
+          if (!this._statedElements || !this._statedElements.length) return;
+          const element = e.element;
+          if (element) {
+            const hasActiveElement = this._marks && this._marks.includes(element.mark);
+            "view" !== this._resetType || hasActiveElement ? "self" === this._resetType && hasActiveElement && this.resetAll() : this.resetAll();
+          }
         }, this.options = Object.assign({}, ElementHighlight.defaultOptions, options), this._marks = view.getMarksBySelector(this.options.selector), this._stateMarks = groupMarksByState(this._marks, [this.options.highlightState, this.options.blurState]);
       }
       getStartState() {
@@ -47974,7 +48112,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
           handler: this.handleReset
         }), events;
       }
-      clearPrevElements() {
+      resetAll() {
         const {
           highlightState: highlightState,
           blurState: blurState
@@ -47995,12 +48133,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             elements: [element],
             options: this.options
           });
-        } else this._lastElement && "view" === this._resetType && this.clearPrevElements();
+        } else this._lastElement && "view" === this._resetType && this.resetAll();
       }
       reset(element) {
-        if (!this._statedElements || !this._statedElements.length) return;
-        const hasActiveElement = element && this._marks && this._marks.includes(element.mark);
-        "view" !== this._resetType || hasActiveElement ? "self" === this._resetType && hasActiveElement && this.clearPrevElements() : this.clearPrevElements();
+        element ? this._marks && this._marks.includes(element.mark) && element.removeState([this.options.highlightState, this.options.blurState]) : this.resetAll();
       }
     }
     ElementHighlight.type = "element-highlight", ElementHighlight.defaultOptions = {
@@ -48015,7 +48151,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         super(view, options), this.type = ElementHighlightByKey.type, this.handleStart = e => {
           this.start(e.element);
         }, this.handleReset = e => {
-          e.element && this._marks && this._marks.includes(e.element.mark) && this.clearPrevElements();
+          e.element && this._marks && this._marks.includes(e.element.mark) && this.resetAll();
         }, this.options = Object.assign({}, ElementHighlightByKey.defaultOptions, options), this._marks = view.getMarksBySelector(this.options.selector);
       }
       getStartState() {
@@ -48030,7 +48166,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
           handler: this.handleReset
         }];
       }
-      clearPrevElements() {
+      resetAll() {
         const states = [this.options.highlightState, this.options.blurState];
         this._marks.forEach(mark => {
           mark.elements.forEach(el => {
@@ -48056,21 +48192,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
       }
       reset(element) {
-        if (element && this._marks && this._marks.includes(element.mark)) {
-          const highlightKey = element.key;
-          if (isNil$1(highlightKey)) return;
-          this._marks.forEach(mark => {
-            mark.elements.forEach(el => {
-              el.key === highlightKey ? el.updateStates({
-                [this.options.blurState]: !1,
-                [this.options.highlightState]: !0
-              }) : el.updateStates({
-                [this.options.blurState]: !0,
-                [this.options.highlightState]: !1
-              });
-            });
-          });
-        }
+        element ? this._marks && this._marks.includes(element.mark) && element.removeState([this.options.highlightState, this.options.blurState]) : this.resetAll();
       }
     }
     ElementHighlightByKey.type = "element-highlight-by-key", ElementHighlightByKey.defaultOptions = {
@@ -48085,7 +48207,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         super(view, options), this.type = ElementHighlightByGroup.type, this.handleStart = e => {
           this.start(e.element);
         }, this.handleReset = e => {
-          this.reset(e.element);
+          const element = e.element;
+          element && this._marks && this._marks.includes(element.mark) && this.resetAll();
         }, this.options = Object.assign({}, ElementHighlightByGroup.defaultOptions, options), this._marks = view.getMarksBySelector(this.options.selector);
       }
       getStartState() {
@@ -48100,7 +48223,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
           handler: this.handleReset
         }];
       }
-      clearPrevElements() {
+      resetAll() {
         const states = [this.options.highlightState, this.options.blurState];
         this._marks.forEach(mark => {
           mark.elements.forEach(el => {
@@ -48126,7 +48249,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
       }
       reset(element) {
-        element && this._marks && this._marks.includes(element.mark) && this.clearPrevElements();
+        element ? this._marks && this._marks.includes(element.mark) && element.removeState([this.options.highlightState, this.options.blurState]) : this.resetAll();
       }
     }
     ElementHighlightByGroup.type = "element-highlight-by-group", ElementHighlightByGroup.defaultOptions = {
@@ -48142,7 +48265,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
           var _a, _b;
           this.start(null === (_b = null === (_a = e.detail) || void 0 === _a ? void 0 : _a.data) || void 0 === _b ? void 0 : _b.id);
         }, this.handleReset = e => {
-          this.reset();
+          this.resetAll();
         }, this.options = Object.assign({}, ElementActiveByLegend.defaultOptions, options), this._marks = view.getMarksBySelector(this.options.selector);
       }
       getEvents() {
@@ -48167,13 +48290,16 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
           });
         });
       }
-      reset() {
+      resetAll() {
         this._marks.forEach(mark => {
           mark.elements.forEach(el => {
             el.removeState(this.options.state);
           });
         });
       }
+      reset(element) {
+        element ? this._marks && this._marks.includes(element.mark) && element.removeState(this.options.state) : this.resetAll();
+      }
     }
     ElementActiveByLegend.type = "element-active-by-legend", ElementActiveByLegend.defaultOptions = {
       state: InteractionStateEnum.active,
@@ -48186,7 +48312,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
           var _a, _b;
           this.start(null === (_b = null === (_a = e.detail) || void 0 === _a ? void 0 : _a.data) || void 0 === _b ? void 0 : _b.id);
         }, this.handleReset = e => {
-          this.reset();
+          this.resetAll();
         }, this.options = Object.assign({}, ElementHighlightByLegend.defaultOptions, options), this._marks = view.getMarksBySelector(this.options.selector);
       }
       getStartState() {
@@ -48216,14 +48342,17 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
           });
         });
       }
-      reset() {
-        const states = [this.options.blurState, this.options.highlightState];
+      resetAll() {
+        const states = [this.options.highlightState, this.options.blurState];
         this._marks.forEach(mark => {
           mark.elements.forEach(el => {
             el.removeState(states);
           });
         });
       }
+      reset(element) {
+        element ? this._marks && this._marks.includes(element.mark) && element.removeState([this.options.highlightState, this.options.blurState]) : this.resetAll();
+      }
     }
     ElementHighlightByLegend.type = "element-highlight-by-legend", ElementHighlightByLegend.defaultOptions = {
       highlightState: InteractionStateEnum.highlight,
@@ -48239,7 +48368,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.start(itemKey);
           }
         }, this.handleReset = e => {
-          (this.options.shouldReset ? this.options.shouldReset(e) : this._filterByName(e)) && this.reset();
+          (this.options.shouldReset ? this.options.shouldReset(e) : this._filterByName(e)) && this.resetAll();
         }, this.options = Object.assign({}, ElementHighlightByName.defaultOptions, options), this._marks = view.getMarksBySelector(this.options.selector);
       }
       getStartState() {
@@ -48277,7 +48406,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
           });
         });
       }
-      reset() {
+      resetAll() {
         const states = [this.options.blurState, this.options.highlightState];
         this._marks.forEach(mark => {
           mark.elements.forEach(el => {
@@ -48285,6 +48414,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
           });
         });
       }
+      reset(element) {
+        element ? this._marks && this._marks.includes(element.mark) && element.removeState([this.options.highlightState, this.options.blurState]) : this.resetAll();
+      }
     }
     ElementHighlightByName.type = "element-highlight-by-name", ElementHighlightByName.defaultOptions = {
       trigger: "pointerover",
@@ -61748,7 +61880,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     };
     registerVChartCore();
 
-    const version = "1.12.12";
+    const version = "1.12.13";
 
     const addVChartProperty = (data, op) => {
         const context = op.beforeCall();
@@ -73992,10 +74124,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 largeThreshold: this._spec.largeThreshold
             };
             this._boxPlotMark = this._createMark(BoxPlotSeries.mark.boxPlot, {
+                groupKey: this._seriesField,
                 isSeriesMark: true
             }, progressive);
             this._outlierMark = this._createMark(BoxPlotSeries.mark.outlier, {
                 key: DEFAULT_DATA_INDEX,
+                groupKey: this._seriesField,
                 dataView: this._outlierDataView.getDataView(),
                 dataProductId: this._outlierDataView.getProductId()
             }, progressive);
@@ -80896,19 +81030,22 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const outerLabelMark = this._funnelOuterLabelMark.label;
             if (outerLabelMark) {
                 this.setMarkStyle(outerLabelMark, {
-                    text: (datum) => {
-                        const text = `${datum[this.getCategoryField()]}`;
-                        if (isFunction$1(this._spec.outerLabel.formatMethod)) {
-                            return this._spec.outerLabel.formatMethod(text, datum);
-                        }
-                        return text;
-                    },
+                    text: (datum) => `${datum[this.getCategoryField()]}`,
                     x: (datum) => this._computeOuterLabelPosition(datum).x,
                     y: (datum) => this._computeOuterLabelPosition(datum).y,
                     textAlign: (datum) => this._computeOuterLabelPosition(datum).align,
                     textBaseline: (datum) => this._computeOuterLabelPosition(datum).textBaseline,
-                    maxLineWidth: (datum) => this._computeOuterLabelLimit(datum)
+                    maxLineWidth: (datum) => this._computeOuterLabelLimit(datum),
+                    width: 0,
+                    height: 0
                 }, 'normal', AttributeLevel.Series);
+                if (isFunction$1(this._spec.outerLabel.formatMethod)) {
+                    this.setMarkStyle(outerLabelMark, {
+                        text: (datum) => {
+                            return this._spec.outerLabel.formatMethod(`${datum[this.getCategoryField()]}`, datum);
+                        }
+                    }, 'normal', AttributeLevel.User_Mark);
+                }
             }
             const outerLabelLineMark = this._funnelOuterLabelMark.line;
             if (outerLabelLineMark && outerLabelMark) {