@visactor/vtable 0.10.0 → 0.10.1-alpha.1

package/dist/vtable.js

@@ -2407,6 +2407,17 @@
       return a < b && !isNumberClose(a, b, relTol, absTol);
     }
 
+    const memoize = func => {
+      let lastArgs = null,
+        lastResult = null;
+      return function () {
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+        return lastArgs && args.every((val, i) => val === lastArgs[i]) || (lastArgs = args, lastResult = func(...args)), lastResult;
+      };
+    };
+
     const clamp$1 = function (input, min, max) {
       return input < min ? min : input > max ? max : input;
     };
@@ -4663,7 +4674,7 @@
     };
 
     // https://github.com/zloirock/core-js/issues/86#issuecomment-115759028
-    var global$e =
+    var global$d =
     // eslint-disable-next-line es/no-global-this -- safe
     check(typeof globalThis == 'object' && globalThis) || check(typeof window == 'object' && window) ||
     // eslint-disable-next-line no-restricted-globals -- safe
@@ -4821,13 +4832,13 @@
       return typeof it == 'object' ? it !== null : isCallable$h(it);
     };
 
-    var global$d = global$e;
+    var global$c = global$d;
     var isCallable$g = isCallable$i;
     var aFunction = function (argument) {
       return isCallable$g(argument) ? argument : undefined;
     };
     var getBuiltIn$6 = function (namespace, method) {
-      return arguments.length < 2 ? aFunction(global$d[namespace]) : global$d[namespace] && global$d[namespace][method];
+      return arguments.length < 2 ? aFunction(global$c[namespace]) : global$c[namespace] && global$c[namespace][method];
     };
 
     var uncurryThis$k = functionUncurryThis;
@@ -4835,10 +4846,10 @@
 
     var engineUserAgent = typeof navigator != 'undefined' && String(navigator.userAgent) || '';
 
-    var global$c = global$e;
+    var global$b = global$d;
     var userAgent = engineUserAgent;
-    var process = global$c.process;
-    var Deno = global$c.Deno;
+    var process = global$b.process;
+    var Deno = global$b.Deno;
     var versions = process && process.versions || Deno && Deno.version;
     var v8 = versions && versions.v8;
     var match, version$1;
@@ -4863,8 +4874,8 @@
     /* eslint-disable es/no-symbol -- required for testing */
     var V8_VERSION = engineV8Version;
     var fails$c = fails$g;
-    var global$b = global$e;
-    var $String$4 = global$b.String;
+    var global$a = global$d;
+    var $String$4 = global$a.String;
 
     // eslint-disable-next-line es/no-object-getownpropertysymbols -- required for testing
     var symbolConstructorDetection = !!Object.getOwnPropertySymbols && !fails$c(function () {
@@ -4940,27 +4951,27 @@
 
     var shared$4 = {exports: {}};
 
-    var global$a = global$e;
+    var global$9 = global$d;
 
     // eslint-disable-next-line es/no-object-defineproperty -- safe
     var defineProperty$4 = Object.defineProperty;
     var defineGlobalProperty$3 = function (key, value) {
       try {
-        defineProperty$4(global$a, key, {
+        defineProperty$4(global$9, key, {
           value: value,
           configurable: true,
           writable: true
         });
       } catch (error) {
-        global$a[key] = value;
+        global$9[key] = value;
       }
       return value;
     };
 
-    var global$9 = global$e;
+    var global$8 = global$d;
     var defineGlobalProperty$2 = defineGlobalProperty$3;
     var SHARED = '__core-js_shared__';
-    var store$5 = global$9[SHARED] || defineGlobalProperty$2(SHARED, {});
+    var store$5 = global$8[SHARED] || defineGlobalProperty$2(SHARED, {});
     var sharedStore = store$5;
 
     var store$4 = sharedStore;
@@ -5003,13 +5014,13 @@
       return 'Symbol(' + (key === undefined ? '' : key) + ')_' + toString(++id$3 + postfix, 36);
     };
 
-    var global$8 = global$e;
+    var global$7 = global$d;
     var shared$3 = sharedExports;
     var hasOwn$a = hasOwnProperty_1;
     var uid$2 = uid$3;
     var NATIVE_SYMBOL = symbolConstructorDetection;
     var USE_SYMBOL_AS_UID = useSymbolAsUid;
-    var Symbol$2 = global$8.Symbol;
+    var Symbol$2 = global$7.Symbol;
     var WellKnownSymbolsStore = shared$3('wks');
     var createWellKnownSymbol = USE_SYMBOL_AS_UID ? Symbol$2['for'] || Symbol$2 : Symbol$2 && Symbol$2.withoutSetter || uid$2;
     var wellKnownSymbol$b = function (name) {
@@ -5054,9 +5065,9 @@
       return isSymbol(key) ? key : key + '';
     };
 
-    var global$7 = global$e;
+    var global$6 = global$d;
     var isObject$a = isObject$d;
-    var document$1 = global$7.document;
+    var document$1 = global$6.document;
     // typeof document.createElement is 'object' in old IE
     var EXISTS$1 = isObject$a(document$1) && isObject$a(document$1.createElement);
     var documentCreateElement$1 = function (it) {
@@ -5209,9 +5220,9 @@
     }
     var inspectSource$2 = store$3.inspectSource;
 
-    var global$6 = global$e;
+    var global$5 = global$d;
     var isCallable$b = isCallable$i;
-    var WeakMap$2 = global$6.WeakMap;
+    var WeakMap$2 = global$5.WeakMap;
     var weakMapBasicDetection = isCallable$b(WeakMap$2) && /native code/.test(String(WeakMap$2));
 
     var shared$2 = sharedExports;
@@ -5224,7 +5235,7 @@
     var hiddenKeys$5 = {};
 
     var NATIVE_WEAK_MAP$1 = weakMapBasicDetection;
-    var global$5 = global$e;
+    var global$4 = global$d;
     var isObject$8 = isObject$d;
     var createNonEnumerableProperty$2 = createNonEnumerableProperty$3;
     var hasOwn$7 = hasOwnProperty_1;
@@ -5232,8 +5243,8 @@
     var sharedKey$2 = sharedKey$3;
     var hiddenKeys$4 = hiddenKeys$5;
     var OBJECT_ALREADY_INITIALIZED = 'Object already initialized';
-    var TypeError$1 = global$5.TypeError;
-    var WeakMap$1 = global$5.WeakMap;
+    var TypeError$1 = global$4.TypeError;
+    var WeakMap$1 = global$4.WeakMap;
     var set, get$2, has;
     var enforce = function (it) {
       return has(it) ? get$2(it) : set(it, {});
@@ -5544,7 +5555,7 @@
     var POLYFILL = isForced$2.POLYFILL = 'P';
     var isForced_1 = isForced$2;
 
-    var global$4 = global$e;
+    var global$3 = global$d;
     var getOwnPropertyDescriptor = objectGetOwnPropertyDescriptor.f;
     var createNonEnumerableProperty$1 = createNonEnumerableProperty$3;
     var defineBuiltIn$4 = defineBuiltIn$5;
@@ -5573,11 +5584,11 @@
       var STATIC = options.stat;
       var FORCED, target, key, targetProperty, sourceProperty, descriptor;
       if (GLOBAL) {
-        target = global$4;
+        target = global$3;
       } else if (STATIC) {
-        target = global$4[TARGET] || defineGlobalProperty(TARGET, {});
+        target = global$3[TARGET] || defineGlobalProperty(TARGET, {});
       } else {
-        target = (global$4[TARGET] || {}).prototype;
+        target = (global$3[TARGET] || {}).prototype;
       }
       if (target) for (key in source) {
         sourceProperty = source[key];
@@ -6079,7 +6090,7 @@
     };
 
     var $$a = _export;
-    var global$3 = global$e;
+    var global$2 = global$d;
     var uncurryThis$9 = functionUncurryThis;
     var isForced = isForced_1;
     var defineBuiltIn$3 = defineBuiltIn$5;
@@ -6097,7 +6108,7 @@
       var IS_MAP = CONSTRUCTOR_NAME.indexOf('Map') !== -1;
       var IS_WEAK = CONSTRUCTOR_NAME.indexOf('Weak') !== -1;
       var ADDER = IS_MAP ? 'set' : 'add';
-      var NativeConstructor = global$3[CONSTRUCTOR_NAME];
+      var NativeConstructor = global$2[CONSTRUCTOR_NAME];
       var NativePrototype = NativeConstructor && NativeConstructor.prototype;
       var Constructor = NativeConstructor;
       var exported = {};
@@ -7043,7 +7054,7 @@
     };
 
     var FREEZING = freezing;
-    var global$2 = global$e;
+    var global$1 = global$d;
     var uncurryThis$5 = functionUncurryThis;
     var defineBuiltIns = defineBuiltIns$3;
     var InternalMetadataModule = internalMetadataExports;
@@ -7068,7 +7079,7 @@
     var seal = $Object.seal;
     var FROZEN = {};
     var SEALED = {};
-    var IS_IE11 = !global$2.ActiveXObject && 'ActiveXObject' in global$2;
+    var IS_IE11 = !global$1.ActiveXObject && 'ActiveXObject' in global$1;
     var InternalWeakMap;
     var wrapper = function (init) {
       return function WeakMap() {
@@ -10508,7 +10519,7 @@
     }
 
     const EnvContribution = Symbol.for("EnvContribution");
-    const Global = Symbol.for("Global");
+    const VGlobal = Symbol.for("VGlobal");
 
     var __decorate$1J = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
@@ -10634,6 +10645,12 @@
       loadBlob(url) {
         return this._env || this.setEnv("browser"), this.envContribution.loadBlob(url);
       }
+      isChrome() {
+        return this._env || this.setEnv("browser"), "browser" === this._env && navigator.userAgent.indexOf("Chrome") > -1;
+      }
+      isSafari() {
+        return this._env || this.setEnv("browser"), "browser" === this._env && /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);
+      }
     };
     DefaultGlobal = __decorate$1J([injectable(), __param$S(0, inject(ContributionProvider)), __param$S(0, named(EnvContribution)), __metadata$15("design:paramtypes", [Object])], DefaultGlobal);
 
@@ -11014,24 +11031,24 @@
       init(curveType, direction) {
         this._lastX = this._lastY = this._startX = this._startY = 0, this.curveType = curveType, this.direction = direction, this.curves = [];
       }
-      bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y, defined) {
+      bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y, defined, p) {
         const curve = new CubicBezierCurve(new Point(this._lastX, this._lastY), new Point(cp1x, cp1y), new Point(cp2x, cp2y), new Point(x, y));
-        curve.defined = defined, this.curves.push(curve), this._lastX = x, this._lastY = y;
+        curve.originP1 = this._lastOriginP, curve.originP2 = p, curve.defined = defined, this.curves.push(curve), this._lastX = x, this._lastY = y, this._lastOriginP = p;
       }
       closePath() {
         if (this.curves.length < 2) return;
         const lastCurve = this.curves[this.curves.length - 1];
-        this.lineTo(this._startX, this._startY, lastCurve.defined);
+        this.lineTo(this._startX, this._startY, lastCurve.defined, this._startOriginP);
       }
       ellipse() {
         throw new Error("SegContext不支持调用ellipse");
       }
-      lineTo(x, y, defined) {
-        const curve = this.addLinearCurve(x, y, defined);
-        this.curves.push(curve), this._lastX = x, this._lastY = y;
+      lineTo(x, y, defined, p) {
+        const curve = this.addLinearCurve(x, y, defined, this._lastOriginP, p);
+        this.curves.push(curve), this._lastX = x, this._lastY = y, this._lastOriginP = p;
       }
-      moveTo(x, y) {
-        return this._lastX = this._startX = x, this._lastY = this._startY = y, this;
+      moveTo(x, y, p) {
+        return this._lastX = this._startX = x, this._lastY = this._startY = y, this._lastOriginP = p, this._startOriginP = p, this;
       }
       quadraticCurveTo(cpx, cpy, x, y) {
         throw new Error("SegContext不支持调用quadraticCurveTo");
@@ -11042,9 +11059,9 @@
       tryUpdateLength(direction) {
         return this.getLength(direction);
       }
-      addLinearCurve(x, y, defined) {
+      addLinearCurve(x, y, defined, p1, p2) {
         const curve = new LineCurve(new Point(this._lastX, this._lastY), new Point(x, y));
-        return curve.defined = defined, curve;
+        return curve.originP1 = p1, curve.originP2 = p2, curve.defined = defined, curve;
       }
       getPointAt(t) {
         throw new Error("暂未实现");
@@ -11053,30 +11070,33 @@
         return [];
       }
       getLength(direction) {
+        var _a, _b;
         if (direction === Direction$1.COLUMN) {
           if (!this.curves.length) return 0;
           const sc = this.curves[0],
-            ec = this.curves[this.curves.length - 1];
-          return abs$1(sc.p0.y - ec.p1.y);
+            ec = this.curves[this.curves.length - 1],
+            endP = null !== (_a = ec.p3) && void 0 !== _a ? _a : ec.p1;
+          return abs$1(sc.p0.y - endP.y);
         }
         if (direction === Direction$1.ROW) {
           if (!this.curves.length) return 0;
           const sc = this.curves[0],
-            ec = this.curves[this.curves.length - 1];
-          return abs$1(sc.p0.x - ec.p1.x);
+            ec = this.curves[this.curves.length - 1],
+            endP = null !== (_b = ec.p3) && void 0 !== _b ? _b : ec.p1;
+          return abs$1(sc.p0.x - endP.x);
         }
         return Number.isFinite(this.length) || (this.length = this.curves.reduce((l, c) => l + c.getLength(), 0)), this.length;
       }
     }
     class ReflectSegContext extends SegContext {
-      bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y, defined) {
-        return super.bezierCurveTo(cp1y, cp1x, cp2y, cp2x, y, x, defined);
+      bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y, defined, p) {
+        return super.bezierCurveTo(cp1y, cp1x, cp2y, cp2x, y, x, defined, p);
       }
-      lineTo(x, y, defined) {
-        return super.lineTo(y, x, defined);
+      lineTo(x, y, defined, p) {
+        return super.lineTo(y, x, defined, p);
       }
-      moveTo(x, y) {
-        return super.moveTo(y, x);
+      moveTo(x, y, p) {
+        return super.moveTo(y, x, p);
       }
       clear() {
         return super.clear();
@@ -11109,12 +11129,12 @@
           y = p.y;
         switch (this._point) {
           case 0:
-            this._point = 1, this._line ? this.context.lineTo(x, y, !1 !== this._lastDefined && !1 !== p.defined) : this.context.moveTo(x, y);
+            this._point = 1, this._line ? this.context.lineTo(x, y, !1 !== this._lastDefined && !1 !== p.defined, p) : this.context.moveTo(x, y, p);
             break;
           case 1:
             this._point = 2;
           default:
-            this.context.lineTo(x, y, !1 !== this._lastDefined && !1 !== p.defined);
+            this.context.lineTo(x, y, !1 !== this._lastDefined && !1 !== p.defined, p);
         }
         this._lastDefined = p.defined;
       }
@@ -11136,8 +11156,8 @@
       return genCurveSegments(path, points);
     }
 
-    function point$2(curveClass, x, y, defined) {
-      curveClass.context.bezierCurveTo((2 * curveClass._x0 + curveClass._x1) / 3, (2 * curveClass._y0 + curveClass._y1) / 3, (curveClass._x0 + 2 * curveClass._x1) / 3, (curveClass._y0 + 2 * curveClass._y1) / 3, (curveClass._x0 + 4 * curveClass._x1 + x) / 6, (curveClass._y0 + 4 * curveClass._y1 + y) / 6, defined);
+    function point$2(curveClass, x, y, defined, p) {
+      curveClass.context.bezierCurveTo((2 * curveClass._x0 + curveClass._x1) / 3, (2 * curveClass._y0 + curveClass._y1) / 3, (curveClass._x0 + 2 * curveClass._x1) / 3, (curveClass._y0 + 2 * curveClass._y1) / 3, (curveClass._x0 + 4 * curveClass._x1 + x) / 6, (curveClass._y0 + 4 * curveClass._y1 + y) / 6, defined, curveClass.lastPoint1);
     }
     class Basis {
       constructor(context, startPoint) {
@@ -11153,7 +11173,7 @@
         this._x0 = this._x1 = this._y0 = this._y1 = NaN, this._point = 0, this.startPoint && this.point(this.startPoint);
       }
       lineEnd() {
-        if (2 === this._point) point$2(this, 6 * this._x1 - (this._x0 + 4 * this._x1), 6 * this._y1 - (this._y0 + 4 * this._y1), !1 !== this._lastDefined1 && !1 !== this._lastDefined2);
+        if (2 === this._point) point$2(this, 6 * this._x1 - (this._x0 + 4 * this._x1), 6 * this._y1 - (this._y0 + 4 * this._y1), !1 !== this._lastDefined1 && !1 !== this._lastDefined2, this.lastPoint1);
         (this._line || 0 !== this._line && 1 === this._point) && this.context.closePath(), this._line = 1 - this._line;
       }
       point(p) {
@@ -11161,7 +11181,7 @@
           y = p.y;
         switch (this._point) {
           case 0:
-            this._point = 1, this._line ? this.context.lineTo(x, y, !1 !== this._lastDefined1 && !1 !== this._lastDefined2) : this.context.moveTo(x, y);
+            this._point = 1, this._line ? this.context.lineTo(x, y, !1 !== this._lastDefined1 && !1 !== this._lastDefined2, p) : this.context.moveTo(x, y, p);
             break;
           case 1:
             this._point = 2;
@@ -11169,7 +11189,7 @@
           default:
             point$2(this, x, y, !1 !== this._lastDefined1 && !1 !== this._lastDefined2);
         }
-        this._x0 = this._x1, this._x1 = x, this._y0 = this._y1, this._y1 = y, this._lastDefined1 = this._lastDefined2, this._lastDefined2 = p.defined;
+        this._x0 = this._x1, this._x1 = x, this._y0 = this._y1, this._y1 = y, this._lastDefined1 = this._lastDefined2, this._lastDefined2 = p.defined, this.lastPoint0 = this.lastPoint1, this.lastPoint1 = p;
       }
       tryUpdateLength() {
         return this.context.tryUpdateLength();
@@ -11205,13 +11225,13 @@
       const h = curveClass._x1 - curveClass._x0;
       return h ? (3 * (curveClass._y1 - curveClass._y0) / h - t) / 2 : t;
     }
-    function point$1(curveClass, t0, t1, defined) {
+    function point$1(curveClass, t0, t1, defined, p) {
       const x0 = curveClass._x0,
         y0 = curveClass._y0,
         x1 = curveClass._x1,
         y1 = curveClass._y1,
         dx = (x1 - x0) / 3;
-      curveClass.context.bezierCurveTo(x0 + dx, y0 + dx * t0, x1 - dx, y1 - dx * t1, x1, y1, defined);
+      curveClass.context.bezierCurveTo(x0 + dx, y0 + dx * t0, x1 - dx, y1 - dx * t1, x1, y1, defined, curveClass.lastPoint1);
     }
     class MonotoneX {
       constructor(context, startPoint) {
@@ -11229,10 +11249,10 @@
       lineEnd() {
         switch (this._point) {
           case 2:
-            this.context.lineTo(this._x1, this._y1, !1 !== this._lastDefined2);
+            this.context.lineTo(this._x1, this._y1, !1 !== this._lastDefined2, this.lastPoint1);
             break;
           case 3:
-            point$1(this, this._t0, slope2(this, this._t0), !1 !== this._lastDefined2);
+            point$1(this, this._t0, slope2(this, this._t0), !1 !== this._lastDefined2, this.lastPoint1);
         }
         (this._line || 0 !== this._line && 1 === this._point) && this.context.closePath(), this._line = 1 - this._line;
       }
@@ -11243,7 +11263,7 @@
         if (x !== this._x1 || y !== this._y1) {
           switch (this._point) {
             case 0:
-              this._point = 1, this._line ? this.context.lineTo(x, y, !1 !== this._lastDefined1 && !1 !== this._lastDefined2) : this.context.moveTo(x, y);
+              this._point = 1, this._line ? this.context.lineTo(x, y, !1 !== this._lastDefined1 && !1 !== this._lastDefined2, p) : this.context.moveTo(x, y, p);
               break;
             case 1:
               this._point = 2;
@@ -11254,7 +11274,7 @@
             default:
               point$1(this, this._t0, t1 = slope3(this, x, y), !1 !== this._lastDefined1 && !1 !== this._lastDefined2);
           }
-          this._x0 = this._x1, this._x1 = x, this._y0 = this._y1, this._y1 = y, this._t0 = t1, this._lastDefined1 = this._lastDefined2, this._lastDefined2 = !1 !== p.defined;
+          this._x0 = this._x1, this._x1 = x, this._y0 = this._y1, this._y1 = y, this._t0 = t1, this._lastDefined1 = this._lastDefined2, this._lastDefined2 = !1 !== p.defined, this.lastPoint0 = this.lastPoint1, this.lastPoint1 = p;
         }
       }
       tryUpdateLength() {
@@ -11318,24 +11338,24 @@
         this._x = this._y = NaN, this._point = 0, this.startPoint && this.point(this.startPoint);
       }
       lineEnd() {
-        0 < this._t && this._t < 1 && 2 === this._point && this.context.lineTo(this._x, this._y, !1 !== this._lastDefined), (this._line || 0 !== this._line && 1 === this._point) && this.context.closePath(), this._line >= 0 && (this._t = 1 - this._t, this._line = 1 - this._line);
+        0 < this._t && this._t < 1 && 2 === this._point && this.context.lineTo(this._x, this._y, !1 !== this._lastDefined, this.lastPoint), (this._line || 0 !== this._line && 1 === this._point) && this.context.closePath(), this._line >= 0 && (this._t = 1 - this._t, this._line = 1 - this._line);
       }
       point(p) {
         const x = p.x,
           y = p.y;
         switch (this._point) {
           case 0:
-            this._point = 1, this._line ? this.context.lineTo(x, y, !1 !== this._lastDefined && !1 !== p.defined) : this.context.moveTo(x, y);
+            this._point = 1, this._line ? this.context.lineTo(x, y, !1 !== this._lastDefined && !1 !== p.defined, p) : this.context.moveTo(x, y, p);
             break;
           case 1:
             this._point = 2;
           default:
-            if (this._t <= 0) this.context.lineTo(this._x, y, !1 !== this._lastDefined && !1 !== p.defined), this.context.lineTo(x, y, !1 !== this._lastDefined && !1 !== p.defined);else {
+            if (this._t <= 0) this.context.lineTo(this._x, y, !1 !== this._lastDefined && !1 !== p.defined, this.lastPoint), this.context.lineTo(x, y, !1 !== this._lastDefined && !1 !== p.defined, p);else {
               const x1 = this._x * (1 - this._t) + x * this._t;
-              this.context.lineTo(x1, this._y, !1 !== this._lastDefined && !1 !== p.defined), this.context.lineTo(x1, y, !1 !== this._lastDefined && !1 !== p.defined);
+              this.context.lineTo(x1, this._y, !1 !== this._lastDefined && !1 !== p.defined, this.lastPoint), this.context.lineTo(x1, y, !1 !== this._lastDefined && !1 !== p.defined, p);
             }
         }
-        this._lastDefined = p.defined, this._x = x, this._y = y;
+        this._lastDefined = p.defined, this._x = x, this._y = y, this.lastPoint = p;
       }
       tryUpdateLength() {
         return this.context.tryUpdateLength();
@@ -11376,12 +11396,12 @@
           y = p.y;
         switch (this._point) {
           case 0:
-            this._point = 1, this._line ? this.context.lineTo(x, y, !1 !== this._lastDefined && !1 !== p.defined) : this.context.moveTo(x, y);
+            this._point = 1, this._line ? this.context.lineTo(x, y, !1 !== this._lastDefined && !1 !== p.defined, p) : this.context.moveTo(x, y, p);
             break;
           case 1:
             this._point = 2;
           default:
-            this.context.lineTo(x, y, !1 !== this._lastDefined && !1 !== p.defined);
+            this.context.lineTo(x, y, !1 !== this._lastDefined && !1 !== p.defined, p);
         }
         this._lastDefined = p.defined;
       }
@@ -11701,6 +11721,9 @@
       return temp$1;
     }
 
+    const DefaultLayout = {
+      alignSelf: "auto"
+    };
     const DefaultTransform = {
       x: 0,
       y: 0,
@@ -11761,9 +11784,11 @@
       lineHeight: void 0,
       underline: 0,
       lineThrough: 0,
-      scaleIn3d: !1
+      scaleIn3d: !1,
+      direction: "horizontal",
+      wordBreak: "break-all"
     };
-    const DefaultStyle = Object.assign(Object.assign({
+    const DefaultStyle = Object.assign(Object.assign(Object.assign({
       opacity: 1,
       background: null,
       texture: null,
@@ -11773,7 +11798,13 @@
       backgroundMode: 0,
       blur: 0,
       cursor: null
-    }, DefaultFillStyle), DefaultStrokeStyle);
+    }, DefaultFillStyle), DefaultStrokeStyle), DefaultLayout);
+    const DefaultConnectAttribute = {
+      connectedType: "none",
+      connectedStyle: {},
+      connectedX: NaN,
+      connectedY: NaN
+    };
     const DefaultAttribute = Object.assign(Object.assign({
       strokeSeg: null,
       pickable: !0,
@@ -11798,7 +11829,7 @@
       cap: !1,
       forceShowCap: !1
     });
-    const DefaultAreaAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
+    const DefaultAreaAttribute = Object.assign(Object.assign(Object.assign({}, DefaultAttribute), DefaultConnectAttribute), {
       points: [],
       segments: [],
       curveType: "linear",
@@ -11815,7 +11846,13 @@
       cornerRadius: 0,
       path: [],
       clip: !1,
-      visibleAll: !0
+      visibleAll: !0,
+      display: "relative",
+      flexDirection: "row",
+      flexWrap: "wrap",
+      justifyContent: "flex-start",
+      alignItems: "flex-start",
+      alignContent: "flex-start"
     });
     const DefaultGlyphAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
       path: "",
@@ -11824,7 +11861,7 @@
       cornerRadius: 0,
       clip: !1
     });
-    const DefaultLineAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
+    const DefaultLineAttribute = Object.assign(Object.assign(Object.assign({}, DefaultAttribute), DefaultConnectAttribute), {
       points: [],
       segments: [],
       curveType: "linear",
@@ -11904,6 +11941,119 @@
       opacity: 1
     });
 
+    class Application {}
+    const application = new Application();
+
+    const DIRECTION_KEY$1 = {
+      horizontal: {
+        width: "width",
+        height: "height",
+        left: "left",
+        top: "top",
+        x: "x",
+        y: "y",
+        bottom: "bottom"
+      },
+      vertical: {
+        width: "height",
+        height: "width",
+        left: "top",
+        top: "left",
+        x: "y",
+        y: "x",
+        bottom: "right"
+      }
+    };
+    const defaultFormatting = {
+        fontSize: 16,
+        fontFamily: "sans-serif",
+        fill: !0,
+        stroke: !1,
+        fontWeight: "normal",
+        lineHeight: "normal",
+        fontStyle: "normal",
+        textDecoration: "none",
+        textAlign: "left",
+        script: "normal"
+      };
+    const regLetter = /\w|\(|\)/;
+    const regPunctuation = /[.?!,;:/，。？！、；：]/;
+    const regFirstSpace = /\S/;
+    function applyFillStyle(ctx, character) {
+      const fillStyle = character && character.fill || defaultFormatting.fill;
+      if (!fillStyle) return void (ctx.globalAlpha = 0);
+      ctx.globalAlpha = 1, ctx.fillStyle = fillStyle;
+      let fontSize = character.fontSize || 16;
+      switch (character.script) {
+        case "super":
+        case "sub":
+          fontSize *= .8;
+      }
+      ctx.setTextStyle({
+        textAlign: "left",
+        textBaseline: character.textBaseline || "alphabetic",
+        fontStyle: character.fontStyle || "",
+        fontWeight: character.fontWeight || "",
+        fontSize: fontSize,
+        fontFamily: character.fontFamily || "sans-serif"
+      });
+    }
+    function applyStrokeStyle(ctx, character) {
+      const strokeStyle = character && character.stroke || defaultFormatting.stroke;
+      if (!strokeStyle) return void (ctx.globalAlpha = 0);
+      ctx.globalAlpha = 1, ctx.lineWidth = 1, ctx.strokeStyle = strokeStyle;
+      let fontSize = character.fontSize || 16;
+      switch (character.script) {
+        case "super":
+        case "sub":
+          fontSize *= .8;
+      }
+      ctx.setTextStyle({
+        textAlign: "left",
+        textBaseline: character.textBaseline || "alphabetic",
+        fontStyle: character.fontStyle || "",
+        fontWeight: character.fontWeight || "",
+        fontSize: fontSize,
+        fontFamily: character.fontFamily || "sans-serif"
+      });
+    }
+    function getStrByWithCanvas(desc, width, character, guessIndex, needTestLetter) {
+      if (!width || width <= 0) return 0;
+      const textMeasure = application.graphicUtil.textMeasure;
+      let index = guessIndex,
+        temp = desc.slice(0, index),
+        tempWidth = Math.floor(textMeasure.measureText(temp, character).width),
+        tempNext = desc.slice(0, index + 1),
+        tempWidthNext = Math.floor(textMeasure.measureText(tempNext, character).width);
+      for (; tempWidth > width || tempWidthNext <= width;) {
+        if (tempWidth > width ? index-- : index++, index > desc.length) {
+          index = desc.length;
+          break;
+        }
+        if (index < 0) {
+          index = 0;
+          break;
+        }
+        temp = desc.slice(0, index), tempWidth = Math.floor(textMeasure.measureText(temp, character).width), tempNext = desc.slice(0, index + 1), tempWidthNext = Math.floor(textMeasure.measureText(tempNext, character).width);
+      }
+      return needTestLetter && (index = testLetter(desc, index)), index;
+    }
+    function testLetter(string, index) {
+      let i = index;
+      for (; regLetter.test(string[i - 1]) && regLetter.test(string[i]) || regPunctuation.test(string[i]);) if (i--, i <= 0) return index;
+      return i;
+    }
+    function measureTextCanvas(text, character) {
+      const measurement = application.graphicUtil.textMeasure.measureText(text, character),
+        result = {
+          ascent: 0,
+          height: 0,
+          descent: 0,
+          width: 0
+        };
+      return "number" != typeof measurement.actualBoundingBoxAscent || "number" != typeof measurement.actualBoundingBoxDescent ? (result.width = Math.floor(measurement.width), result.height = character.fontSize || 0, result.ascent = result.height, result.descent = 0) : (result.width = Math.floor(measurement.width), result.height = Math.floor(measurement.actualBoundingBoxAscent + measurement.actualBoundingBoxDescent), result.ascent = Math.floor(measurement.actualBoundingBoxAscent), result.descent = result.height - result.ascent), result;
+    }
+
     var __decorate$1I = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
@@ -11949,19 +12099,65 @@
       measureText(text, options) {
         return this.context ? (this.context.setTextStyleWithoutAlignBaseline(options), this.context.measureText(text)) : this.estimate(text, options);
       }
-      clipText(text, options, width) {
+      clipTextVertical(verticalList, options, width, wordBreak) {
+        if (0 === verticalList.length) return {
+          verticalList: verticalList,
+          width: 0
+        };
+        const {
+          fontSize = 12
+        } = options;
+        verticalList.forEach(item => {
+          item.width = 0 === item.direction ? fontSize : this.measureTextWidth(item.text, options);
+        });
+        const out = [];
+        let length = 0,
+          i = 0;
+        for (; i < verticalList.length && length + verticalList[i].width < width; i++) length += verticalList[i].width, out.push(verticalList[i]);
+        if (verticalList[i] && verticalList[i].text.length > 1) {
+          const clipedData = this._clipText(verticalList[i].text, options, width - length, 0, verticalList[i].text.length - 1);
+          if (wordBreak && clipedData.str !== verticalList[i].text) {
+            let text = "",
+              length = 0;
+            for (let j = 0; j < i; j++) {
+              const item = verticalList[j];
+              text += item.text, length += item.text.length;
+            }
+            text += verticalList[i].text;
+            const totalLength = length + clipedData.str.length;
+            let index = testLetter(text, totalLength);
+            index -= length, index !== clipedData.str.length - 1 && (clipedData.str = clipedData.str.substring(0, index), clipedData.width = this.measureTextWidth(clipedData.str, options));
+          }
+          out.push(Object.assign(Object.assign({}, verticalList[i]), {
+            text: clipedData.str,
+            width: clipedData.width
+          })), length += clipedData.width;
+        }
+        return {
+          verticalList: out,
+          width: length
+        };
+      }
+      clipText(text, options, width, wordBreak) {
         if (0 === text.length) return {
           str: "",
           width: 0
         };
         let length = this.measureTextWidth(text, options);
-        return length <= width ? {
+        if (length <= width) return {
           str: text,
           width: length
-        } : (length = this.measureTextWidth(text[0], options), length > width ? {
+        };
+        if (length = this.measureTextWidth(text[0], options), length > width) return {
           str: "",
           width: 0
-        } : this._clipText(text, options, width, 0, text.length - 1));
+        };
+        const data = this._clipText(text, options, width, 0, text.length - 1);
+        if (wordBreak && data.str !== text) {
+          const index = testLetter(text, data.str.length);
+          index !== data.str.length && (data.str = text.substring(0, index), data.width = this.measureTextWidth(data.str, options));
+        }
+        return data;
       }
       _clipText(text, options, width, leftIdx, rightIdx) {
         const middleIdx = Math.floor((leftIdx + rightIdx) / 2),
@@ -11995,8 +12191,26 @@
           width: strWidth
         };
       }
-      clipTextWithSuffix(text, options, width, suffix) {
-        if ("" === suffix) return this.clipText(text, options, width);
+      clipTextWithSuffixVertical(verticalList, options, width, suffix, wordBreak) {
+        if ("" === suffix) return this.clipTextVertical(verticalList, options, width, wordBreak);
+        if (0 === verticalList.length) return {
+          verticalList: verticalList,
+          width: 0
+        };
+        const output = this.clipTextVertical(verticalList, options, width, wordBreak);
+        if (output.verticalList.length === verticalList.length && output.verticalList[output.verticalList.length - 1].width === verticalList[verticalList.length - 1].width) return output;
+        const suffixWidth = this.measureTextWidth(suffix, options);
+        if (suffixWidth > width) return output;
+        width -= suffixWidth;
+        const out = this.clipTextVertical(verticalList, options, width, wordBreak);
+        return out.width += suffixWidth, out.verticalList.push({
+          text: suffix,
+          direction: 1,
+          width: suffixWidth
+        }), out;
+      }
+      clipTextWithSuffix(text, options, width, suffix, wordBreak) {
+        if ("" === suffix) return this.clipText(text, options, width, wordBreak);
         if (0 === text.length) return {
           str: "",
           width: 0
@@ -12013,6 +12227,10 @@
         };
         width -= suffixWidth;
         const data = this._clipText(text, options, width, 0, text.length - 1);
+        if (wordBreak && data.str !== text) {
+          const index = testLetter(text, data.str.length);
+          index !== data.str.length && (data.str = text.substring(0, index), data.width = this.measureTextWidth(data.str, options));
+        }
         return data.str += suffix, data.width += suffixWidth, data;
       }
     };
@@ -12031,9 +12249,6 @@
 
     const container = new Container$2();
 
-    class Application {}
-    const application = new Application();
-
     const CanvasFactory = Symbol.for("CanvasFactory");
     const Context2dFactory = Symbol.for("Context2dFactory");
 
@@ -12462,7 +12677,7 @@
         }, null != option ? option : {}), textSpec);
       }
     };
-    DefaultGraphicUtil = __decorate$1G([injectable(), __param$R(0, inject(ContributionProvider)), __param$R(0, named(TextMeasureContribution)), __param$R(1, inject(Global)), __metadata$14("design:paramtypes", [Object, Object])], DefaultGraphicUtil);
+    DefaultGraphicUtil = __decorate$1G([injectable(), __param$R(0, inject(ContributionProvider)), __param$R(0, named(TextMeasureContribution)), __param$R(1, inject(VGlobal)), __metadata$14("design:paramtypes", [Object, Object])], DefaultGraphicUtil);
     var TransformMode;
     !function (TransformMode) {
       TransformMode[TransformMode.transform = 0] = "transform", TransformMode[TransformMode.matrix = 1] = "matrix";
@@ -13233,13 +13448,14 @@
         e.propagationStopped = !1, e.propagationImmediatelyStopped = !1, this.propagate(e, type), this.dispatch.emit(type || e.type, e);
       }
       mapEvent(e) {
-        var _a;
+        var _a, _b, _c, _d, _e;
         if (!this.rootTarget) return;
         const mappers = this.mappingTable[e.type];
         let target;
         const cacheKey = `${e.canvasX}-${e.canvasY}`;
-        if ((null === (_a = this._prePointTargetCache) || void 0 === _a ? void 0 : _a[cacheKey]) ? target = this._prePointTargetCache[cacheKey] : (target = this.pickTarget(e.canvasX, e.canvasY), this._prePointTargetCache = {
-          [cacheKey]: target
+        if ((null === (_a = this._prePointTargetCache) || void 0 === _a ? void 0 : _a[cacheKey]) && (null === (_c = null === (_b = this._prePointTargetCache) || void 0 === _b ? void 0 : _b[cacheKey]) || void 0 === _c ? void 0 : _c.stage.renderCount) === (null === (_d = this._prePointTargetCache) || void 0 === _d ? void 0 : _d.stageRenderCount) ? target = this._prePointTargetCache[cacheKey] : (target = this.pickTarget(e.canvasX, e.canvasY), this._prePointTargetCache = {
+          [cacheKey]: target,
+          stageRenderCount: null !== (_e = null == target ? void 0 : target.stage.renderCount) && void 0 !== _e ? _e : -1
         }), mappers) for (let i = 0, j = mappers.length; i < j; i++) mappers[i].fn(e, target);else console.warn(`[EventManager]: Event mapping not defined for ${e.type}`);
       }
       propagate(e, type) {
@@ -13316,13 +13532,12 @@
       }
       notifyListeners(e, type) {
         const listeners = e.currentTarget._events[type];
-        if (listeners) {
-          if ("fn" in listeners) listeners.once && e.currentTarget.removeEventListener(type, listeners.fn, {
-            once: !0
-          }), listeners.fn.call(listeners.context, e);else for (let i = 0, j = listeners.length; i < j && !e.propagationImmediatelyStopped; i++) listeners[i].once && e.currentTarget.removeEventListener(type, listeners[i].fn, {
-            once: !0
-          }), listeners[i].fn.call(listeners[i].context, e);
-        } else this.emitDelegation(e, type);
+        if (listeners) if ("fn" in listeners) listeners.once && e.currentTarget.removeEventListener(type, listeners.fn, {
+          once: !0
+        }), listeners.fn.call(listeners.context, e);else for (let i = 0, j = listeners.length; i < j && !e.propagationImmediatelyStopped; i++) listeners[i].once && e.currentTarget.removeEventListener(type, listeners[i].fn, {
+          once: !0
+        }), listeners[i].fn.call(listeners[i].context, e);
+        this.emitDelegation(e, type);
       }
       emitDelegation(e, type) {
         const listeners = e.currentTarget._events[WILDCARD];
@@ -14824,6 +15039,9 @@
         } else point.x = dx, point.y = dy;
         return point;
       }
+      onAnimateBind(animate) {
+        this._emitCustomEvent("animate-bind", animate);
+      }
       tryUpdateAABBBounds(full) {
         if (!this.shouldUpdateAABBBounds()) return this._AABBBounds;
         if (!this.valid) return this._AABBBounds.clear(), this._AABBBounds;
@@ -15356,6 +15574,38 @@
     function genNumberType() {
       return NUMBER_TYPE++;
     }
+    var TextDirection;
+    !function (TextDirection) {
+      TextDirection[TextDirection.HORIZONTAL = 0] = "HORIZONTAL", TextDirection[TextDirection.VERTICAL = 1] = "VERTICAL";
+    }(TextDirection || (TextDirection = {}));
+    function verticalLayout(text) {
+      const nextCharacter = [];
+      let flag = 0,
+        currStr = "";
+      for (let i = 0; i < text.length; i++) rotateText(text[i]) ? flag ? currStr += text[i] : (flag = 1, currStr = text[i]) : (flag && (nextCharacter.push({
+        text: currStr,
+        direction: TextDirection.VERTICAL
+      }), currStr = "", flag = 0), nextCharacter.push({
+        text: text[i],
+        direction: TextDirection.HORIZONTAL
+      }));
+      return currStr && nextCharacter.push({
+        text: currStr,
+        direction: TextDirection.VERTICAL
+      }), nextCharacter;
+    }
+    const rotateCharList = ["…", "（", "）", "—", "【", "】", "「", "」", "《", "》"],
+      rotateCharMap = new Map();
+    rotateCharList.forEach(c => rotateCharMap.set(c, !0));
+    const noRotateCharList = [""],
+      noRotateCharMap = new Map();
+    function rotateText(c) {
+      if (rotateCharMap.has(c)) return !0;
+      if (noRotateCharMap.has(c)) return !1;
+      let rotate = !1;
+      return c.codePointAt(0) < 256 && (rotate = !0), rotate;
+    }
+    noRotateCharList.forEach(c => noRotateCharMap.set(c, !0));
 
     const ARC_NUMBER_TYPE = genNumberType();
     const ARC3D_NUMBER_TYPE = genNumberType();
@@ -15694,7 +15944,7 @@
         return "browser" === this.global.env ? 10 : 0;
       }
     };
-    DefaultLayerService = __decorate$1F([injectable(), __param$Q(0, inject(Global)), __metadata$13("design:paramtypes", [Object])], DefaultLayerService);
+    DefaultLayerService = __decorate$1F([injectable(), __param$Q(0, inject(VGlobal)), __metadata$13("design:paramtypes", [Object])], DefaultLayerService);
 
     var __decorate$1E = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
@@ -15711,7 +15961,7 @@
           decorator(target, key, paramIndex);
         };
       };
-    const Window = Symbol.for("Window");
+    const VWindow = Symbol.for("VWindow");
     const WindowHandlerContribution = Symbol.for("WindowHandlerContribution");
     let DefaultWindow = class {
       get width() {
@@ -15800,14 +16050,14 @@
         this._handler.clearViewBox(viewBox, color);
       }
     };
-    __decorate$1E([postConstruct(), __metadata$12("design:type", Function), __metadata$12("design:paramtypes", []), __metadata$12("design:returntype", void 0)], DefaultWindow.prototype, "postInit", null), DefaultWindow = __decorate$1E([injectable(), __param$P(0, inject(Global)), __metadata$12("design:paramtypes", [Object])], DefaultWindow);
+    __decorate$1E([postConstruct(), __metadata$12("design:type", Function), __metadata$12("design:paramtypes", []), __metadata$12("design:returntype", void 0)], DefaultWindow.prototype, "postInit", null), DefaultWindow = __decorate$1E([injectable(), __param$P(0, inject(VGlobal)), __metadata$12("design:paramtypes", [Object])], DefaultWindow);
 
     const TransformUtil = Symbol.for("TransformUtil");
     const GraphicUtil = Symbol.for("GraphicUtil");
     const LayerService = Symbol.for("LayerService");
 
     var coreModule = new ContainerModule(bind => {
-      bind(DefaultGlobal).toSelf().inSingletonScope(), bind(Global).toService(DefaultGlobal), bind(DefaultWindow).to(DefaultWindow), bind(Window).toService(DefaultWindow), bind(DefaultGraphicUtil).toSelf().inSingletonScope(), bind(GraphicUtil).toService(DefaultGraphicUtil), bind(DefaultTransformUtil).toSelf().inSingletonScope(), bind(TransformUtil).toService(DefaultTransformUtil), bind(DefaultLayerService).toSelf().inSingletonScope(), bind(LayerService).toService(DefaultLayerService);
+      bind(DefaultGlobal).toSelf().inSingletonScope(), bind(VGlobal).toService(DefaultGlobal), bind(DefaultWindow).to(DefaultWindow), bind(VWindow).toService(DefaultWindow), bind(DefaultGraphicUtil).toSelf().inSingletonScope(), bind(GraphicUtil).toService(DefaultGraphicUtil), bind(DefaultTransformUtil).toSelf().inSingletonScope(), bind(TransformUtil).toService(DefaultTransformUtil), bind(DefaultLayerService).toSelf().inSingletonScope(), bind(LayerService).toService(DefaultLayerService);
     });
 
     function runFill(fill, background) {
@@ -16216,6 +16466,16 @@
           cap = arcAttribute.cap,
           forceShowCap = arcAttribute.forceShowCap
         } = arc.attribute;
+        let conicalOffset = 0;
+        const tempChangeConicalColor = (isBoolean(cap) && cap || cap[0]) && "conical" === fill.gradient;
+        if (tempChangeConicalColor) {
+          const {
+            sc: sc,
+            startAngle: startAngle,
+            endAngle: endAngle
+          } = arc.getParsedAngle();
+          abs$1(endAngle - startAngle) < pi2 - epsilon$1 && (conicalOffset = sc || 0, fill.startAngle -= conicalOffset, fill.endAngle -= conicalOffset);
+        }
         let beforeRenderContribitionsRuned = !1;
         const {
           isFullStroke: isFullStroke,
@@ -16250,7 +16510,7 @@
           }
           strokeCb ? strokeCb(context, arc.attribute, arcAttribute) : sVisible && (context.setStrokeStyle(arc, arc.attribute, x, y, arcAttribute), context.stroke());
         }
-        if (cap && forceShowCap) {
+        if ((isBoolean(cap) && cap || cap[1]) && forceShowCap) {
           const {
             startAngle: sa,
             endAngle: ea
@@ -16287,7 +16547,7 @@
         }
         this._arcAfterRenderContribitions.forEach(c => {
           c.drawShape(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb);
-        });
+        }), tempChangeConicalColor && (fill.startAngle += conicalOffset, fill.endAngle += conicalOffset);
       }
       draw(arc, renderService, drawContext, params) {
         const {
@@ -16470,14 +16730,14 @@
         }
         return bbox.yOffset = "top" === textBaseline ? 0 : "middle" === textBaseline ? bbox.height / -2 : "alphabetic" === textBaseline ? -.79 * bbox.height : -bbox.height, bbox;
       }
-      GetLayout(str, width, height, textAlign, textBaseline, lineHeight, suffix, miniApp) {
+      GetLayout(str, width, height, textAlign, textBaseline, lineHeight, suffix, wordBreak, miniApp) {
         const linesLayout = [],
           bboxWH = [width, height],
           bboxOffset = [0, 0];
         for (; str.length > 0;) {
           const {
             str: clipText
-          } = this.textMeasure.clipTextWithSuffix(str, this.textOptions, width, suffix);
+          } = this.textMeasure.clipTextWithSuffix(str, this.textOptions, width, suffix, wordBreak);
           linesLayout.push({
             str: clipText,
             width: this.textMeasure.measureTextWidth(clipText, this.textOptions)
@@ -16494,14 +16754,15 @@
       }
       GetLayoutByLines(lines, textAlign, textBaseline, lineHeight) {
         let suffix = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : "";
-        let lineWidth = arguments.length > 5 ? arguments[5] : undefined;
+        let wordBreak = arguments.length > 5 ? arguments[5] : undefined;
+        let lineWidth = arguments.length > 6 ? arguments[6] : undefined;
         lines = lines.map(l => l.toString());
         const linesLayout = [],
           bboxWH = [0, 0];
         if ("number" == typeof lineWidth && lineWidth !== 1 / 0) {
           let width;
           for (let i = 0, len = lines.length; i < len; i++) width = Math.min(this.textMeasure.measureTextWidth(lines[i], this.textOptions), lineWidth), linesLayout.push({
-            str: this.textMeasure.clipTextWithSuffix(lines[i], this.textOptions, width, suffix).str,
+            str: this.textMeasure.clipTextWithSuffix(lines[i], this.textOptions, width, suffix, wordBreak).str,
             width: width
           });
           bboxWH[0] = lineWidth;
@@ -16603,6 +16864,20 @@
         return paddingArray && bounds.expand(paddingArray), this.clearUpdateBoundTag(), bounds;
       }
       updateSingallineAABBBounds(text) {
+        const textTheme = getTheme(this).text,
+          {
+            direction = textTheme.direction
+          } = this.attribute;
+        return "horizontal" === direction ? this.updateHorizontalSinglelineAABBBounds(text) : this.updateVerticalSinglelineAABBBounds(text);
+      }
+      updateMultilineAABBBounds(text) {
+        const textTheme = getTheme(this).text,
+          {
+            direction = textTheme.direction
+          } = this.attribute;
+        return "horizontal" === direction ? this.updateHorizontalMultilineAABBBounds(text) : this.updateVerticalMultilineAABBBounds(text);
+      }
+      updateHorizontalSinglelineAABBBounds(text) {
         var _a;
         const textTheme = getTheme(this).text,
           textMeasure = application.graphicUtil.textMeasure;
@@ -16616,7 +16891,8 @@
             fontSize = textTheme.fontSize,
             fontWeight = textTheme.fontWeight,
             stroke = textTheme.stroke,
-            lineWidth = textTheme.lineWidth
+            lineWidth = textTheme.lineWidth,
+            wordBreak = textTheme.wordBreak
           } = attribute,
           buf = Math.max(2, .075 * fontSize),
           {
@@ -16634,13 +16910,13 @@
               data = textMeasure.clipTextWithSuffix(text.toString(), {
                 fontSize: fontSize,
                 fontWeight: fontWeight
-              }, maxLineWidth, strEllipsis);
+              }, maxLineWidth, strEllipsis, "break-word" === wordBreak);
             str = data.str, width = data.width;
           } else {
             const data = textMeasure.clipText(text.toString(), {
               fontSize: fontSize,
               fontWeight: fontWeight
-            }, maxLineWidth);
+            }, maxLineWidth, "break-word" === wordBreak);
             str = data.str, width = data.width;
           }
           this.cache.clipedText = str, this.cache.clipedWidth = width;
@@ -16649,11 +16925,67 @@
           fontWeight: fontWeight
         }), this.cache.clipedText = text.toString(), this.cache.clipedWidth = width;
         this.clearUpdateShapeTag();
+        const dx = textDrawOffsetX(textAlign, width);
+        let lh = lineHeight;
+        vglobal.isSafari() && (lh += .2 * fontSize);
+        const dy = textLayoutOffsetY(textBaseline, lh, fontSize, buf);
+        return this._AABBBounds.set(dx, dy, dx + width, dy + lh), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
+      }
+      updateVerticalSinglelineAABBBounds(text) {
+        var _a;
+        const textTheme = getTheme(this).text,
+          textMeasure = application.graphicUtil.textMeasure;
+        let width;
+        const buf = 2,
+          attribute = this.attribute,
+          {
+            maxLineWidth = textTheme.maxLineWidth,
+            ellipsis = textTheme.ellipsis,
+            textAlign = textTheme.textAlign,
+            textBaseline = textTheme.textBaseline,
+            fontSize = textTheme.fontSize,
+            fontWeight = textTheme.fontWeight,
+            stroke = textTheme.stroke,
+            lineHeight = null !== (_a = attribute.lineHeight) && void 0 !== _a ? _a : (attribute.fontSize || textTheme.fontSize) + buf,
+            lineWidth = textTheme.lineWidth,
+            wordBreak = textTheme.wordBreak
+          } = attribute;
+        if (!this.shouldUpdateShape() && this.cache) {
+          width = this.cache.clipedWidth;
+          const dx = textDrawOffsetX(textAlign, width),
+            dy = textLayoutOffsetY(textBaseline, lineHeight, fontSize);
+          return this._AABBBounds.set(dy, dx, dy + lineHeight, dx + width), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
+        }
+        let verticalList = [verticalLayout(text.toString())];
+        if (Number.isFinite(maxLineWidth)) {
+          if (ellipsis) {
+            const strEllipsis = !0 === ellipsis ? textTheme.ellipsis : ellipsis,
+              data = textMeasure.clipTextWithSuffixVertical(verticalList[0], {
+                fontSize: fontSize,
+                fontWeight: fontWeight
+              }, maxLineWidth, strEllipsis, "break-word" === wordBreak);
+            verticalList = [data.verticalList], width = data.width;
+          } else {
+            const data = textMeasure.clipTextVertical(verticalList[0], {
+              fontSize: fontSize,
+              fontWeight: fontWeight
+            }, maxLineWidth, "break-word" === wordBreak);
+            verticalList = [data.verticalList], width = data.width;
+          }
+          this.cache.verticalList = verticalList, this.cache.clipedWidth = width;
+        } else width = 0, verticalList[0].forEach(t => {
+          const w = t.direction === TextDirection.HORIZONTAL ? fontSize : textMeasure.measureTextWidth(t.text, {
+            fontSize: fontSize,
+            fontWeight: fontWeight
+          });
+          width += w, t.width = w;
+        }), this.cache.verticalList = verticalList, this.cache.clipedWidth = width;
+        this.clearUpdateShapeTag();
         const dx = textDrawOffsetX(textAlign, width),
-          dy = textLayoutOffsetY(textBaseline, lineHeight, fontSize, 0);
-        return this._AABBBounds.set(dx, dy, dx + width, dy + lineHeight), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
+          dy = textLayoutOffsetY(textBaseline, lineHeight, fontSize);
+        return this._AABBBounds.set(dy, dx, dy + lineHeight, dx + width), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
       }
-      updateMultilineAABBBounds(text) {
+      updateHorizontalMultilineAABBBounds(text) {
         var _a;
         const textTheme = getTheme(this).text,
           attribute = this.attribute,
@@ -16667,7 +16999,8 @@
             ellipsis = textTheme.ellipsis,
             maxLineWidth: maxLineWidth,
             stroke = textTheme.stroke,
-            lineWidth = textTheme.lineWidth
+            lineWidth = textTheme.lineWidth,
+            wordBreak = textTheme.wordBreak
           } = attribute;
         if (!this.shouldUpdateShape() && (null === (_a = this.cache) || void 0 === _a ? void 0 : _a.layoutData)) {
           const bbox = this.cache.layoutData.bbox;
@@ -16677,12 +17010,74 @@
           layoutData = new CanvasTextLayout(fontFamily, {
             fontSize: fontSize,
             fontWeight: fontWeight
-          }, textMeasure).GetLayoutByLines(text, textAlign, textBaseline, lineHeight, !0 === ellipsis ? textTheme.ellipsis : ellipsis || void 0, maxLineWidth),
+          }, textMeasure).GetLayoutByLines(text, textAlign, textBaseline, lineHeight, !0 === ellipsis ? textTheme.ellipsis : ellipsis || void 0, "break-word" === wordBreak, maxLineWidth),
           {
             bbox: bbox
           } = layoutData;
         return this.cache.layoutData = layoutData, this.clearUpdateShapeTag(), this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
       }
+      updateVerticalMultilineAABBBounds(text) {
+        var _a;
+        const textTheme = getTheme(this).text,
+          textMeasure = application.graphicUtil.textMeasure;
+        let width;
+        const buf = 2,
+          attribute = this.attribute,
+          {
+            maxLineWidth = textTheme.maxLineWidth,
+            ellipsis = textTheme.ellipsis,
+            textAlign = textTheme.textAlign,
+            textBaseline = textTheme.textBaseline,
+            fontSize = textTheme.fontSize,
+            fontWeight = textTheme.fontWeight,
+            stroke = textTheme.stroke,
+            lineHeight = null !== (_a = attribute.lineHeight) && void 0 !== _a ? _a : (attribute.fontSize || textTheme.fontSize) + buf,
+            lineWidth = textTheme.lineWidth,
+            wordBreak = textTheme.wordBreak
+          } = attribute;
+        if (width = 0, !this.shouldUpdateShape() && this.cache) {
+          this.cache.verticalList.forEach(item => {
+            const w = item.reduce((a, b) => a + b.width, 0);
+            width = max$2(w, width);
+          });
+          const dx = textDrawOffsetX(textAlign, width),
+            height = this.cache.verticalList.length * lineHeight,
+            dy = textLayoutOffsetY(textBaseline, height, fontSize);
+          return this._AABBBounds.set(dy, dx, dy + height, dx + width), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
+        }
+        const verticalLists = text.map(str => verticalLayout(str.toString()));
+        verticalLists.forEach((verticalData, i) => {
+          if (Number.isFinite(maxLineWidth)) {
+            if (ellipsis) {
+              const strEllipsis = !0 === ellipsis ? textTheme.ellipsis : ellipsis,
+                data = textMeasure.clipTextWithSuffixVertical(verticalData, {
+                  fontSize: fontSize,
+                  fontWeight: fontWeight
+                }, maxLineWidth, strEllipsis, "break-word" === wordBreak);
+              verticalLists[i] = data.verticalList, width = data.width;
+            } else {
+              const data = textMeasure.clipTextVertical(verticalData, {
+                fontSize: fontSize,
+                fontWeight: fontWeight
+              }, maxLineWidth, "break-word" === wordBreak);
+              verticalLists[i] = data.verticalList, width = data.width;
+            }
+          } else width = 0, verticalData.forEach(t => {
+            const w = t.direction === TextDirection.HORIZONTAL ? fontSize : textMeasure.measureTextWidth(t.text, {
+              fontSize: fontSize,
+              fontWeight: fontWeight
+            });
+            width += w, t.width = w;
+          });
+        }), this.cache.verticalList = verticalLists, this.clearUpdateShapeTag(), this.cache.verticalList.forEach(item => {
+          const w = item.reduce((a, b) => a + b.width, 0);
+          width = max$2(w, width);
+        });
+        const dx = textDrawOffsetX(textAlign, width),
+          height = this.cache.verticalList.length * lineHeight,
+          dy = textLayoutOffsetY(textBaseline, height, fontSize);
+        return this._AABBBounds.set(dy, dx, dy + height, dx + width), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
+      }
       tryUpdateOBBBounds() {
         throw new Error("暂不支持");
       }
@@ -17375,116 +17770,6 @@
       }
     }
 
-    const DIRECTION_KEY$1 = {
-      horizontal: {
-        width: "width",
-        height: "height",
-        left: "left",
-        top: "top",
-        x: "x",
-        y: "y",
-        bottom: "bottom"
-      },
-      vertical: {
-        width: "height",
-        height: "width",
-        left: "top",
-        top: "left",
-        x: "y",
-        y: "x",
-        bottom: "right"
-      }
-    };
-    const defaultFormatting = {
-        fontSize: 16,
-        fontFamily: "sans-serif",
-        fill: !0,
-        stroke: !1,
-        fontWeight: "normal",
-        lineHeight: "normal",
-        fontStyle: "normal",
-        textDecoration: "none",
-        textAlign: "left",
-        script: "normal"
-      };
-    const regLetter = /\w|\(|\)/;
-    const regPunctuation = /[.?!,;:/，。？！、；：]/;
-    const regFirstSpace = /\S/;
-    function applyFillStyle(ctx, character) {
-      const fillStyle = character && character.fill || defaultFormatting.fill;
-      if (!fillStyle) return void (ctx.globalAlpha = 0);
-      ctx.globalAlpha = 1, ctx.fillStyle = fillStyle;
-      let fontSize = character.fontSize || 16;
-      switch (character.script) {
-        case "super":
-        case "sub":
-          fontSize *= .8;
-      }
-      ctx.setTextStyle({
-        textAlign: "left",
-        textBaseline: character.textBaseline || "alphabetic",
-        fontStyle: character.fontStyle || "",
-        fontWeight: character.fontWeight || "",
-        fontSize: fontSize,
-        fontFamily: character.fontFamily || "sans-serif"
-      });
-    }
-    function applyStrokeStyle(ctx, character) {
-      const strokeStyle = character && character.stroke || defaultFormatting.stroke;
-      if (!strokeStyle) return void (ctx.globalAlpha = 0);
-      ctx.globalAlpha = 1, ctx.lineWidth = 1, ctx.strokeStyle = strokeStyle;
-      let fontSize = character.fontSize || 16;
-      switch (character.script) {
-        case "super":
-        case "sub":
-          fontSize *= .8;
-      }
-      ctx.setTextStyle({
-        textAlign: "left",
-        textBaseline: character.textBaseline || "alphabetic",
-        fontStyle: character.fontStyle || "",
-        fontWeight: character.fontWeight || "",
-        fontSize: fontSize,
-        fontFamily: character.fontFamily || "sans-serif"
-      });
-    }
-    function getStrByWithCanvas(desc, width, character, guessIndex, needTestLetter) {
-      if (!width || width <= 0) return 0;
-      const textMeasure = application.graphicUtil.textMeasure;
-      let index = guessIndex,
-        temp = desc.slice(0, index),
-        tempWidth = Math.floor(textMeasure.measureText(temp, character).width),
-        tempNext = desc.slice(0, index + 1),
-        tempWidthNext = Math.floor(textMeasure.measureText(tempNext, character).width);
-      for (; tempWidth > width || tempWidthNext <= width;) {
-        if (tempWidth > width ? index-- : index++, index > desc.length) {
-          index = desc.length;
-          break;
-        }
-        if (index < 0) {
-          index = 0;
-          break;
-        }
-        temp = desc.slice(0, index), tempWidth = Math.floor(textMeasure.measureText(temp, character).width), tempNext = desc.slice(0, index + 1), tempWidthNext = Math.floor(textMeasure.measureText(tempNext, character).width);
-      }
-      return needTestLetter && (index = testLetter(desc, index)), index;
-    }
-    function testLetter(string, index) {
-      let i = index;
-      for (; regLetter.test(string[i - 1]) && regLetter.test(string[i]) || regPunctuation.test(string[i]);) if (i--, i <= 0) return index;
-      return i;
-    }
-    function measureTextCanvas(text, character) {
-      const measurement = application.graphicUtil.textMeasure.measureText(text, character),
-        result = {
-          ascent: 0,
-          height: 0,
-          descent: 0,
-          width: 0
-        };
-      return "number" != typeof measurement.actualBoundingBoxAscent || "number" != typeof measurement.actualBoundingBoxDescent ? (result.width = Math.floor(measurement.width), result.height = character.fontSize || 0, result.ascent = result.height, result.descent = 0) : (result.width = Math.floor(measurement.width), result.height = Math.floor(measurement.actualBoundingBoxAscent + measurement.actualBoundingBoxDescent), result.ascent = Math.floor(measurement.actualBoundingBoxAscent), result.descent = result.height - result.ascent), result;
-    }
-
     class Frame {
       constructor(left, top, width, height, ellipsis, wordBreak, verticalDirection, globalAlign, globalBaseline, layoutDirection, isWidthMax, isHeightMax, singleLine, icons) {
         this.left = left, this.top = top, this.width = width, this.height = height, this.actualHeight = 0, this.bottom = top + height, this.right = left + width, this.ellipsis = ellipsis, this.wordBreak = wordBreak, this.verticalDirection = verticalDirection, this.lines = [], this.globalAlign = globalAlign, this.globalBaseline = globalBaseline, this.layoutDirection = layoutDirection, this.directionKey = DIRECTION_KEY$1[this.layoutDirection], this.isWidthMax = isWidthMax, this.isHeightMax = isHeightMax, this.singleLine = singleLine, icons ? (icons.clear(), this.icons = icons) : this.icons = new Map();
@@ -18323,7 +18608,9 @@
             capAngle = capWidth / outerRadius;
           if (capWidth > epsilon$1 && outerRadius > epsilon$1) return {
             startAngle: startAngle - sign * capAngle * startCap,
-            endAngle: endAngle + sign * capAngle * endCap
+            endAngle: endAngle + sign * capAngle * endCap,
+            sc: sign * capAngle * startCap,
+            ec: sign * capAngle * endCap
           };
         }
         return {
@@ -19265,6 +19552,7 @@
         if (heightLimit > 0 && (lineCountLimit = Math.max(Math.floor(heightLimit / lineHeight), 1)), lineClamp && (lineCountLimit = Math.min(lineCountLimit, lineClamp)), "number" == typeof maxLineWidth && maxLineWidth !== 1 / 0) {
           if (maxLineWidth > 0) for (let i = 0; i < lines.length; i++) {
             const str = lines[i];
+            let needCut = !0;
             if (i === lineCountLimit - 1) {
               const clip = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis);
               linesLayout.push({
@@ -19274,14 +19562,17 @@
               break;
             }
             const clip = layoutObj.textMeasure.clipText(str, layoutObj.textOptions, maxLineWidth);
-            if ("" !== str && "" === clip.str) if (ellipsis) {
-              const clipEllipsis = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis);
-              clip.str = null !== (_b = clipEllipsis.str) && void 0 !== _b ? _b : "", clip.width = null !== (_c = clipEllipsis.width) && void 0 !== _c ? _c : 0;
-            } else clip.str = "", clip.width = 0;
+            if ("" !== str && "" === clip.str) {
+              if (ellipsis) {
+                const clipEllipsis = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis);
+                clip.str = null !== (_b = clipEllipsis.str) && void 0 !== _b ? _b : "", clip.width = null !== (_c = clipEllipsis.width) && void 0 !== _c ? _c : 0;
+              } else clip.str = "", clip.width = 0;
+              needCut = !1;
+            }
             if (linesLayout.push({
               str: clip.str,
               width: clip.width
-            }), clip.str.length === str.length) ;else {
+            }), clip.str.length === str.length) ;else if (needCut) {
               const newStr = str.substring(clip.str.length);
               lines.splice(i + 1, 0, newStr);
             }
@@ -19494,30 +19785,90 @@
     BaseRender = __decorate$1u([injectable()], BaseRender);
 
     function drawSegments(path, segPath, percent, clipRangeByDimension, params) {
-      if (!segPath) return;
+      var _a;
       const {
         offsetX = 0,
         offsetY = 0,
-        offsetZ = 0
+        offsetZ = 0,
+        mode = "none",
+        drawConnect = !1,
+        zeroX = 0,
+        zeroY = 0
       } = params || {};
+      if (drawConnect && "none" === mode) return;
+      if (!segPath) return;
       let needMoveTo = !0;
       const {
         curves: curves
       } = segPath;
-      if (percent >= 1) return void curves.forEach(curve => {
-        curve.defined ? (needMoveTo && path.moveTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ), drawSegItem$1(path, curve, 1, params), needMoveTo = !1) : needMoveTo = !0;
-      });
+      if (percent >= 1) {
+        if (drawConnect) {
+          let lastCurve,
+            defined0 = !0;
+          curves.forEach((curve, i) => {
+            var _a;
+            let p0 = curve.p0;
+            if (curve.originP1 !== curve.originP2) {
+              if (lastCurve && lastCurve.originP1 === lastCurve.originP2 && (p0 = lastCurve.p0), curve.defined) defined0 || (path.lineTo(p0.x + offsetX, p0.y + offsetY, offsetZ), defined0 = !defined0);else {
+                const {
+                  originP1: originP1,
+                  originP2: originP2
+                } = curve;
+                let validP;
+                if (originP1 && !1 !== originP1.defined ? validP = p0 : originP1 && !1 !== originP2.defined && (validP = null !== (_a = curve.p3) && void 0 !== _a ? _a : curve.p1), defined0) {
+                  defined0 = !defined0;
+                  const x = validP ? validP.x : curve.p0.x,
+                    y = validP ? validP.y : curve.p0.y;
+                  path.moveTo(x + offsetX, y + offsetY, offsetZ);
+                } else validP && (defined0 = !defined0, path.lineTo(validP.x + offsetX, validP.y + offsetY, offsetZ));
+              }
+              lastCurve = curve;
+            } else lastCurve = curve;
+          });
+        } else curves.forEach(curve => {
+          curve.defined ? (needMoveTo && path.moveTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ), drawSegItem$1(path, curve, 1, params), needMoveTo = !1) : needMoveTo = !0;
+        });
+        return;
+      }
       if (percent <= 0) return;
       let direction;
       "x" === clipRangeByDimension ? direction = Direction$1.ROW : "y" === clipRangeByDimension ? direction = Direction$1.COLUMN : "auto" === clipRangeByDimension && (direction = segPath.direction);
       const totalDrawLength = percent * segPath.tryUpdateLength(direction);
-      let drawedLengthUntilLast = 0;
+      let drawedLengthUntilLast = 0,
+        defined0 = !0,
+        lastCurve = null;
       for (let i = 0, n = curves.length; i < n; i++) {
         const curve = curves[i],
           curCurveLength = curve.getLength(direction),
           _p = (totalDrawLength - drawedLengthUntilLast) / curCurveLength;
         if (drawedLengthUntilLast += curCurveLength, _p < 0) break;
-        curve.defined ? (needMoveTo && path.moveTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ), drawSegItem$1(path, curve, min$2(_p, 1), params), needMoveTo = !1) : needMoveTo = !0;
+        if (drawConnect) {
+          let p0 = curve.p0;
+          if (curve.originP1 === curve.originP2) {
+            lastCurve = curve;
+            continue;
+          }
+          if (lastCurve && lastCurve.originP1 === lastCurve.originP2 && (p0 = lastCurve.p0), curve.defined) defined0 || (path.lineTo(p0.x + offsetX, p0.y + offsetY, offsetZ), defined0 = !defined0);else {
+            const {
+              originP1: originP1,
+              originP2: originP2
+            } = curve;
+            let validP;
+            if (originP1 && !1 !== originP1.defined ? validP = p0 : originP1 && !1 !== originP2.defined && (validP = null !== (_a = curve.p3) && void 0 !== _a ? _a : curve.p1), defined0) {
+              defined0 = !defined0;
+              const x = validP ? validP.x : curve.p0.x,
+                y = validP ? validP.y : curve.p0.y;
+              path.moveTo(x + offsetX, y + offsetY, offsetZ);
+            } else validP && (defined0 = !defined0, path.lineTo(validP.x + offsetX, validP.y + offsetY, offsetZ));
+          }
+          lastCurve = curve;
+        } else {
+          if (!curve.defined) {
+            needMoveTo = !0;
+            continue;
+          }
+          needMoveTo && path.moveTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ), drawSegItem$1(path, curve, min$2(_p, 1), params), needMoveTo = !1;
+        }
       }
     }
     function drawIncrementalSegments(path, lastSeg, segments, params) {
@@ -19596,7 +19947,7 @@
         this.z = z, drawPathProxy(line, context, x, y) || (this.drawShape(line, context, x, y, drawContext, params), this.z = 0, context.modelMatrix !== lastModelMatrix && mat4Allocate.free(context.modelMatrix), context.modelMatrix = lastModelMatrix), context.highPerformanceRestore();
       }
       drawSegmentItem(context, cache, fill, stroke, fillOpacity, strokeOpacity, attribute, defaultAttribute, clipRange, clipRangeByDimension, offsetX, offsetY, line, fillCb, strokeCb) {
-        var _a;
+        var _a, _b, _c, _d, _e;
         if (!cache) return;
         context.beginPath();
         const z = null !== (_a = this.z) && void 0 !== _a ? _a : 0;
@@ -19609,7 +19960,27 @@
           x: originX = 0,
           x: originY = 0
         } = attribute;
-        return !1 !== fill && (fillCb ? fillCb(context, attribute, defaultAttribute) : fillOpacity && (context.setCommonStyle(line, attribute, originX - offsetX, originY - offsetY, defaultAttribute), context.fill())), !1 !== stroke && (strokeCb ? strokeCb(context, attribute, defaultAttribute) : strokeOpacity && (context.setStrokeStyle(line, attribute, originX - offsetX, originY - offsetY, defaultAttribute), context.stroke())), !1;
+        !1 !== fill && (fillCb ? fillCb(context, attribute, defaultAttribute) : fillOpacity && (context.setCommonStyle(line, attribute, originX - offsetX, originY - offsetY, defaultAttribute), context.fill())), !1 !== stroke && (strokeCb ? strokeCb(context, attribute, defaultAttribute) : strokeOpacity && (context.setStrokeStyle(line, attribute, originX - offsetX, originY - offsetY, defaultAttribute), context.stroke()));
+        let {
+          connectedType: connectedType,
+          connectedX: connectedX,
+          connectedY: connectedY,
+          connectedStyle: connectedStyle
+        } = attribute;
+        if (isArray$3(defaultAttribute) ? (connectedType = null !== (_b = null != connectedType ? connectedType : defaultAttribute[0].connectedType) && void 0 !== _b ? _b : defaultAttribute[1].connectedType, connectedX = null !== (_c = null != connectedX ? connectedX : defaultAttribute[0].connectedX) && void 0 !== _c ? _c : defaultAttribute[1].connectedX, connectedY = null !== (_d = null != connectedY ? connectedY : defaultAttribute[0].connectedY) && void 0 !== _d ? _d : defaultAttribute[1].connectedY, connectedStyle = null !== (_e = null != connectedStyle ? connectedStyle : defaultAttribute[0].connectedStyle) && void 0 !== _e ? _e : defaultAttribute[1].connectedStyle) : (connectedType = null != connectedType ? connectedType : defaultAttribute.connectedType, connectedX = null != connectedX ? connectedX : defaultAttribute.connectedX, connectedY = null != connectedY ? connectedY : defaultAttribute.connectedY, connectedStyle = null != connectedStyle ? connectedStyle : defaultAttribute.connectedStyle), "connect" !== connectedType && "zero" !== connectedType && (connectedType = "none"), "none" !== connectedType) {
+          context.beginPath(), drawSegments(context.camera ? context : context.nativeContext, cache, clipRange, clipRangeByDimension, {
+            offsetX: offsetX,
+            offsetY: offsetY,
+            offsetZ: z,
+            drawConnect: !0,
+            mode: connectedType,
+            zeroX: connectedX,
+            zeroY: connectedY
+          });
+          const da = [];
+          isArray$3(defaultAttribute) ? defaultAttribute.forEach(i => da.push(i)) : da.push(defaultAttribute), da.push(attribute), !1 !== fill && (fillCb ? fillCb(context, attribute, defaultAttribute) : fillOpacity && (context.setCommonStyle(line, connectedStyle, originX - offsetX, originY - offsetY, da), context.fill())), !1 !== stroke && (strokeCb ? strokeCb(context, attribute, defaultAttribute) : strokeOpacity && (context.setStrokeStyle(line, connectedStyle, originX - offsetX, originY - offsetY, da), context.stroke()));
+        }
+        return !1;
       }
       drawShape(line, context, x, y, drawContext, params, fillCb, strokeCb) {
         const lineAttribute = getTheme(line, null == params ? void 0 : params.theme).line,
@@ -19680,6 +20051,11 @@
 
     function drawAreaSegments(path, segPath, percent, params) {
       var _a;
+      const {
+        drawConnect = !1,
+        mode = "none"
+      } = params || {};
+      if (drawConnect && "none" === mode) return;
       const {
         top: top,
         bottom: bottom
@@ -19688,11 +20064,34 @@
         const topList = [],
           bottomList = [];
         let lastDefined = !0;
-        for (let i = 0, n = top.curves.length; i < n; i++) {
-          const topCurve = top.curves[i];
-          lastDefined !== topCurve.defined ? (lastDefined ? (drawAreaBlock(path, topList, bottomList, params), topList.length = 0, bottomList.length = 0) : (topList.push(topCurve), bottomList.push(bottom.curves[n - i - 1])), lastDefined = !lastDefined) : lastDefined && (topList.push(topCurve), bottomList.push(bottom.curves[n - i - 1]));
+        if (drawConnect) {
+          let lastCurve,
+            lastBottomCurve,
+            defined0 = !0;
+          const n = top.curves.length;
+          top.curves.forEach((curve, i) => {
+            const bototmCurve = bottom.curves[n - i - 1];
+            let currentTopCurve = curve,
+              currentBottomCurve = bototmCurve;
+            if (curve.originP1 === curve.originP2) return lastCurve = curve, void (lastBottomCurve = bototmCurve);
+            if (lastCurve && lastCurve.originP1 === lastCurve.originP2 && (currentTopCurve = lastCurve, currentBottomCurve = lastBottomCurve), curve.defined) defined0 || (topList.push(currentTopCurve), bottomList.push(currentBottomCurve), drawAreaConnectBlock(path, topList, bottomList, params), topList.length = 0, bottomList.length = 0, defined0 = !defined0);else {
+              const {
+                originP1: originP1,
+                originP2: originP2
+              } = curve;
+              let validTopCurve, validBottomCurve;
+              originP1 && !1 !== originP1.defined ? (validTopCurve = currentTopCurve, validBottomCurve = currentBottomCurve) : originP1 && !1 !== originP2.defined && (validTopCurve = curve, validBottomCurve = bototmCurve), defined0 ? (defined0 = !defined0, topList.push(validTopCurve || curve), bottomList.push(validBottomCurve || bototmCurve)) : validTopCurve && (defined0 = !defined0, topList.push(validTopCurve || curve), bottomList.push(validBottomCurve || bototmCurve), drawAreaConnectBlock(path, topList, bottomList, params), topList.length = 0, bottomList.length = 0);
+            }
+            lastCurve = curve;
+          }), drawAreaConnectBlock(path, topList, bottomList, params);
+        } else {
+          for (let i = 0, n = top.curves.length; i < n; i++) {
+            const topCurve = top.curves[i];
+            lastDefined !== topCurve.defined ? (lastDefined ? (drawAreaBlock(path, topList, bottomList, params), topList.length = 0, bottomList.length = 0) : (topList.push(topCurve), bottomList.push(bottom.curves[n - i - 1])), lastDefined = !lastDefined) : lastDefined && (topList.push(topCurve), bottomList.push(bottom.curves[n - i - 1]));
+          }
+          drawAreaBlock(path, topList, bottomList, params);
         }
-        return void drawAreaBlock(path, topList, bottomList, params);
+        return;
       }
       if (percent <= 0) return;
       let {
@@ -19710,17 +20109,51 @@
         lastDefined = !0;
       const topList = [],
         bottomList = [];
+      let lastTopCurve,
+        lastBottomCurve,
+        defined0 = !0;
       for (let i = 0, n = top.curves.length; i < n; i++) {
         const topCurve = top.curves[i],
           curCurveLength = topCurve.getLength(direction),
           percent = (totalDrawLength - drawedLengthUntilLast) / curCurveLength;
         if (percent < 0) break;
-        drawedLengthUntilLast += curCurveLength;
-        let tc = null,
-          bc = null;
-        lastDefined !== topCurve.defined ? (lastDefined ? (drawAreaBlock(path, topList, bottomList, params), topList.length = 0, bottomList.length = 0) : (tc = topCurve, bc = bottom.curves[n - i - 1]), lastDefined = !lastDefined) : lastDefined && (tc = topCurve, bc = bottom.curves[n - i - 1]), tc && bc && (percent < 1 && (tc = tc.p2 && tc.p3 ? divideCubic(tc, percent)[0] : divideLinear(tc, percent)[0], bc = bc.p2 && bc.p3 ? divideCubic(bc, 1 - percent)[1] : divideLinear(bc, 1 - percent)[1]), tc.defined = lastDefined, bc.defined = lastDefined, topList.push(tc), bottomList.push(bc)), tc = null, bc = null;
+        if (drawedLengthUntilLast += curCurveLength, drawConnect) {
+          const bototmCurve = bottom.curves[n - i - 1];
+          let currentTopCurve = topCurve,
+            currentBottomCurve = bototmCurve;
+          if (topCurve.originP1 === topCurve.originP2) {
+            lastTopCurve = topCurve, lastBottomCurve = bototmCurve;
+            continue;
+          }
+          if (lastTopCurve && lastTopCurve.originP1 === lastTopCurve.originP2 && (currentTopCurve = lastTopCurve, currentBottomCurve = lastBottomCurve), topCurve.defined) defined0 || (topList.push(currentTopCurve), bottomList.push(currentBottomCurve), drawAreaConnectBlock(path, topList, bottomList, params), topList.length = 0, bottomList.length = 0, defined0 = !defined0);else {
+            const {
+              originP1: originP1,
+              originP2: originP2
+            } = topCurve;
+            let validTopCurve, validBottomCurve;
+            originP1 && !1 !== originP1.defined ? (validTopCurve = currentTopCurve, validBottomCurve = currentBottomCurve) : originP1 && !1 !== originP2.defined && (validTopCurve = topCurve, validBottomCurve = bototmCurve), defined0 ? (defined0 = !defined0, topList.push(validTopCurve || topCurve), bottomList.push(validBottomCurve || bototmCurve)) : validTopCurve && (defined0 = !defined0, topList.push(validTopCurve || topCurve), bottomList.push(validBottomCurve || bototmCurve), drawAreaConnectBlock(path, topList, bottomList, params), topList.length = 0, bottomList.length = 0);
+          }
+          lastTopCurve = topCurve;
+        } else {
+          let tc = null,
+            bc = null;
+          lastDefined !== topCurve.defined ? (lastDefined ? (drawAreaBlock(path, topList, bottomList, params), topList.length = 0, bottomList.length = 0) : (tc = topCurve, bc = bottom.curves[n - i - 1]), lastDefined = !lastDefined) : lastDefined && (tc = topCurve, bc = bottom.curves[n - i - 1]), tc && bc && (percent < 1 && (tc = tc.p2 && tc.p3 ? divideCubic(tc, percent)[0] : divideLinear(tc, percent)[0], bc = bc.p2 && bc.p3 ? divideCubic(bc, 1 - percent)[1] : divideLinear(bc, 1 - percent)[1]), tc.defined = lastDefined, bc.defined = lastDefined, topList.push(tc), bottomList.push(bc)), tc = null, bc = null;
+        }
       }
-      drawAreaBlock(path, topList, bottomList, params);
+      drawConnect ? drawAreaConnectBlock(path, topList, bottomList, params) : drawAreaBlock(path, topList, bottomList, params);
+    }
+    function drawAreaConnectBlock(path, topList, bottomList, params) {
+      if (topList.length < 2) return;
+      const {
+        offsetX = 0,
+        offsetY = 0,
+        offsetZ = 0,
+        mode: mode
+      } = params || {};
+      let curve = topList[0];
+      path.moveTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ), curve = topList[topList.length - 1];
+      let end = curve.p3 || curve.p1;
+      path.lineTo(end.x + offsetX, end.y + offsetY, offsetZ), curve = bottomList[bottomList.length - 1], path.lineTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ), curve = bottomList[0], end = curve.p3 || curve.p1, path.lineTo(end.x + offsetX, end.y + offsetY, offsetZ), path.closePath();
     }
     function drawAreaBlock(path, topList, bottomList, params) {
       const {
@@ -19849,14 +20282,14 @@
                   y: null !== (_d = endPoint.y1) && void 0 !== _d ? _d : endPoint.y
                 });
               }
-              lastBottomSeg = calcLineCache(bottomPoints, curveType), bottomCaches.unshift(lastBottomSeg);
+              lastBottomSeg = calcLineCache(bottomPoints, "stepBefore" === curveType ? "stepAfter" : "stepAfter" === curveType ? "stepBefore" : curveType), bottomCaches.unshift(lastBottomSeg);
             }
             area.cacheArea = bottomCaches.map((item, index) => ({
               top: topCaches[index],
               bottom: item
             }));
           } else {
-            if (!points || !points.length) return area.cache = null, void area.clearUpdateShapeTag();
+            if (!points || !points.length) return area.cacheArea = null, void area.clearUpdateShapeTag();
             {
               const topPoints = points,
                 bottomPoints = [];
@@ -19910,12 +20343,41 @@
         drawPathProxy(area, context, x, y, drawContext, params) || this.drawShape(area, context, x, y, drawContext, params), context.highPerformanceRestore();
       }
       drawSegmentItem(context, cache, fill, fillOpacity, stroke, strokeOpacity, attribute, defaultAttribute, clipRange, offsetX, offsetY, offsetZ, area, drawContext, fillCb, strokeCb) {
+        let ret = !1;
+        return ret = ret || this._drawSegmentItem(context, cache, fill, fillOpacity, stroke, strokeOpacity, attribute, defaultAttribute, clipRange, offsetX, offsetY, offsetZ, area, drawContext, !1, fillCb, strokeCb), ret = ret || this._drawSegmentItem(context, cache, fill, fillOpacity, stroke, strokeOpacity, attribute, defaultAttribute, clipRange, offsetX, offsetY, offsetZ, area, drawContext, !0, fillCb, strokeCb), ret;
+      }
+      _drawSegmentItem(context, cache, fill, fillOpacity, stroke, strokeOpacity, attribute, defaultAttribute, clipRange, offsetX, offsetY, offsetZ, area, drawContext, connect, fillCb, strokeCb) {
+        var _a, _b, _c, _d;
+        let {
+          connectedType: connectedType,
+          connectedX: connectedX,
+          connectedY: connectedY,
+          connectedStyle: connectedStyle
+        } = attribute;
+        const da = [];
+        if (connect && (isArray$3(defaultAttribute) ? (connectedType = null !== (_a = null != connectedType ? connectedType : defaultAttribute[0].connectedType) && void 0 !== _a ? _a : defaultAttribute[1].connectedType, connectedX = null !== (_b = null != connectedX ? connectedX : defaultAttribute[0].connectedX) && void 0 !== _b ? _b : defaultAttribute[1].connectedX, connectedY = null !== (_c = null != connectedY ? connectedY : defaultAttribute[0].connectedY) && void 0 !== _c ? _c : defaultAttribute[1].connectedY, connectedStyle = null !== (_d = null != connectedStyle ? connectedStyle : defaultAttribute[0].connectedStyle) && void 0 !== _d ? _d : defaultAttribute[1].connectedStyle) : (connectedType = null != connectedType ? connectedType : defaultAttribute.connectedType, connectedX = null != connectedX ? connectedX : defaultAttribute.connectedX, connectedY = null != connectedY ? connectedY : defaultAttribute.connectedY, connectedStyle = null != connectedStyle ? connectedStyle : defaultAttribute.connectedStyle), "connect" !== connectedType && "zero" !== connectedType && (connectedType = "none"), isArray$3(defaultAttribute) ? defaultAttribute.forEach(i => da.push(i)) : da.push(defaultAttribute), da.push(attribute)), connect && "none" === connectedType) return !1;
         if (!cache) return;
         context.beginPath();
-        drawAreaSegments(context.camera ? context : context.nativeContext, cache, clipRange, {
+        const {
+          points: points,
+          segments: segments
+        } = area.attribute;
+        let endP,
+          startP,
+          direction = Direction$1.ROW;
+        if (segments) {
+          const endSeg = segments[segments.length - 1];
+          startP = segments[0].points[0], endP = endSeg.points[endSeg.points.length - 1];
+        } else startP = points[0], endP = points[points.length - 1];
+        direction = abs$1(endP.x - startP.x) > abs$1(endP.y - startP.y) ? Direction$1.ROW : Direction$1.COLUMN, drawAreaSegments(context.camera ? context : context.nativeContext, cache, clipRange, {
           offsetX: offsetX,
           offsetY: offsetY,
-          offsetZ: offsetZ
+          offsetZ: offsetZ,
+          direction: direction,
+          drawConnect: connect,
+          mode: connectedType,
+          zeroX: connectedX,
+          zeroY: connectedY
         }), this._areaRenderContribitions || (this._areaRenderContribitions = this.areaRenderContribitions.getContributions() || [], this._areaRenderContribitions.sort((a, b) => b.order - a.order)), this._areaRenderContribitions.forEach(c => {
           c.time === BaseRenderContributionTime.beforeFillStroke && c.drawShape(area, context, offsetX, offsetY, !!fillOpacity, !1, fill, !1, defaultAttribute, drawContext, fillCb, null, {
             attribute: attribute
@@ -19925,7 +20387,7 @@
           x: originX = 0,
           x: originY = 0
         } = attribute;
-        if (!1 !== fill && (fillCb ? fillCb(context, attribute, defaultAttribute) : fillOpacity && (context.setCommonStyle(area, attribute, originX - offsetX, originY - offsetY, defaultAttribute), context.fill())), this._areaRenderContribitions || (this._areaRenderContribitions = this.areaRenderContribitions.getContributions() || []), this._areaRenderContribitions.forEach(c => {
+        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._areaRenderContribitions || (this._areaRenderContribitions = this.areaRenderContribitions.getContributions() || []), this._areaRenderContribitions.forEach(c => {
           c.time === BaseRenderContributionTime.afterFillStroke && c.drawShape(area, context, offsetX, offsetY, !!fillOpacity, !1, fill, !1, defaultAttribute, drawContext, fillCb, null, {
             attribute: attribute
           });
@@ -19933,11 +20395,15 @@
           const {
             stroke: stroke
           } = attribute;
-          isArray$3(stroke) && (stroke[0] || stroke[2]) && !1 === stroke[1] && (context.beginPath(), drawSegments(context.camera ? context : context.nativeContext, stroke[0] ? cache.top : cache.bottom, clipRange, "auto", {
+          isArray$3(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
-          })), context.setStrokeStyle(area, attribute, originX - offsetX, originY - offsetY, defaultAttribute), context.stroke();
+            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;
       }
@@ -20257,8 +20723,10 @@
             underline = textAttribute.underline,
             lineThrough = textAttribute.lineThrough,
             keepDirIn3d = textAttribute.keepDirIn3d,
+            direction = textAttribute.direction,
             fontSize = textAttribute.fontSize,
             textBaseline = textAttribute.textBaseline,
+            textAlign = textAttribute.textAlign,
             x: originX = textAttribute.x,
             y: originY = textAttribute.y
           } = text.attribute,
@@ -20277,28 +20745,86 @@
             c.time === BaseRenderContributionTime.beforeFillStroke ? this._textBeforeRenderContribitions.push(c) : this._textAfterRenderContribitions.push(c);
           });
         }
-        if (this._textBeforeRenderContribitions.forEach(c => {
+        this._textBeforeRenderContribitions.forEach(c => {
           c.drawShape(text, context, x, y, doFill, doStroke, fVisible, sVisible, textAttribute, drawContext, fillCb, strokeCb);
-        }), context.setShadowStyle && context.setShadowStyle(text, text.attribute, textAttribute), transform3dMatrixToContextMatrix && this.transformUseContext2d(text, textAttribute, z, context), Array.isArray(str)) {
-          context.setTextStyleWithoutAlignBaseline(text.attribute, textAttribute, z);
-          const {
-            multilineLayout: multilineLayout
-          } = text;
-          if (!multilineLayout) return void context.highPerformanceRestore();
-          const {
-            xOffset: xOffset,
-            yOffset: yOffset
-          } = multilineLayout.bbox;
-          doStroke && (strokeCb ? strokeCb(context, text.attribute, textAttribute) : sVisible && (context.setStrokeStyle(text, text.attribute, originX - x, originY - y, textAttribute), multilineLayout.lines.forEach(line => {
-            context.strokeText(line.str, (line.leftOffset || 0) + xOffset + x, (line.topOffset || 0) + yOffset + y, z);
-          }))), doFill && (fillCb ? fillCb(context, text.attribute, textAttribute) : fVisible && (context.setCommonStyle(text, text.attribute, originX - x, originY - y, textAttribute), multilineLayout.lines.forEach(line => {
-            context.fillText(line.str, (line.leftOffset || 0) + xOffset + x, (line.topOffset || 0) + yOffset + y, z), this.drawMultiUnderLine(underline, lineThrough, text, (line.leftOffset || 0) + x, (line.topOffset || 0) + yOffset + y, z, line.width, textAttribute, context);
-          })));
+        }), context.setShadowStyle && context.setShadowStyle(text, text.attribute, textAttribute), transform3dMatrixToContextMatrix && this.transformUseContext2d(text, textAttribute, z, context);
+        const drawText = (t, offsetX, offsetY, direction) => {
+          let _x = x + offsetX;
+          const _y = y + offsetY;
+          if (direction) {
+            context.highPerformanceSave(), _x += fontSize;
+            const matrix = matrixAllocate.allocate(1, 0, 0, 1, 0, 0);
+            matrix.rotateByCenter(Math.PI / 2, _x, _y), context.transformFromMatrix(matrix, !0), matrixAllocate.free(matrix);
+          }
+          doStroke && (strokeCb ? strokeCb(context, text.attribute, textAttribute) : sVisible && (context.setStrokeStyle(text, text.attribute, originX - x, originY - y, textAttribute), context.strokeText(t, _x, _y, z))), doFill && (fillCb ? fillCb(context, text.attribute, textAttribute) : fVisible && (context.setCommonStyle(text, text.attribute, originX - x, originY - y, textAttribute), context.fillText(t, _x, _y, z), this.drawUnderLine(underline, lineThrough, text, _x, _y, z, textAttribute, context))), direction && (context.highPerformanceRestore(), context.setTransformForCurrent());
+        };
+        if (Array.isArray(str)) {
+          if (context.setTextStyleWithoutAlignBaseline(text.attribute, textAttribute, z), "horizontal" === direction) {
+            const {
+              multilineLayout: multilineLayout
+            } = text;
+            if (!multilineLayout) return void context.highPerformanceRestore();
+            const {
+              xOffset: xOffset,
+              yOffset: yOffset
+            } = multilineLayout.bbox;
+            doStroke && (strokeCb ? strokeCb(context, text.attribute, textAttribute) : sVisible && (context.setStrokeStyle(text, text.attribute, originX - x, originY - y, textAttribute), multilineLayout.lines.forEach(line => {
+              context.strokeText(line.str, (line.leftOffset || 0) + xOffset + x, (line.topOffset || 0) + yOffset + y, z);
+            }))), doFill && (fillCb ? fillCb(context, text.attribute, textAttribute) : fVisible && (context.setCommonStyle(text, text.attribute, originX - x, originY - y, textAttribute), multilineLayout.lines.forEach(line => {
+              context.fillText(line.str, (line.leftOffset || 0) + xOffset + x, (line.topOffset || 0) + yOffset + y, z), this.drawMultiUnderLine(underline, lineThrough, text, (line.leftOffset || 0) + x, (line.topOffset || 0) + yOffset + y, z, line.width, textAttribute, context);
+            })));
+          } else {
+            const cache = text.cache,
+              {
+                verticalList: verticalList
+              } = cache;
+            context.textAlign = "left", context.textBaseline = "top";
+            const totalHeight = lineHeight * verticalList.length;
+            let totalW = 0;
+            verticalList.forEach(verticalData => {
+              const _w = verticalData.reduce((a, b) => a + (b.width || 0), 0);
+              totalW = max$2(_w, totalW);
+            });
+            let offsetY = 0,
+              offsetX = 0;
+            "bottom" === textBaseline ? offsetX = -totalHeight : "middle" === textBaseline && (offsetX = -totalHeight / 2), "center" === textAlign ? offsetY -= totalW / 2 : "right" === textAlign && (offsetY -= totalW), verticalList.forEach((verticalData, i) => {
+              const currentW = verticalData.reduce((a, b) => a + (b.width || 0), 0),
+                dw = totalW - currentW;
+              let currentOffsetY = offsetY;
+              "center" === textAlign ? currentOffsetY += dw / 2 : "right" === textAlign && (currentOffsetY += dw), verticalData.forEach(item => {
+                const {
+                  text: text,
+                  width: width,
+                  direction: direction
+                } = item;
+                drawText(text, totalHeight - (i + 1) * lineHeight + offsetX, currentOffsetY, direction), currentOffsetY += width;
+              });
+            });
+          }
         } else {
-          context.setTextStyle(text.attribute, textAttribute, z);
-          const t = text.clipedText;
-          let dy = 0;
-          lineHeight !== fontSize && ("top" === textBaseline ? dy = (lineHeight - fontSize) / 2 : "middle" === textBaseline || "bottom" === textBaseline && (dy = -(lineHeight - fontSize) / 2)), doStroke && (strokeCb ? strokeCb(context, text.attribute, textAttribute) : sVisible && (context.setStrokeStyle(text, text.attribute, originX - x, originY - y, textAttribute), context.strokeText(t, x, y + dy, z))), doFill && (fillCb ? fillCb(context, text.attribute, textAttribute) : fVisible && (context.setCommonStyle(text, text.attribute, originX - x, originY - y, textAttribute), context.fillText(t, x, y + dy, z), this.drawUnderLine(underline, lineThrough, text, x, y + dy, z, textAttribute, context)));
+          const cache = text.cache;
+          if ("horizontal" === direction) {
+            context.setTextStyle(text.attribute, textAttribute, z);
+            const t = text.clipedText;
+            let dy = 0;
+            lineHeight !== fontSize && ("top" === textBaseline ? dy = (lineHeight - fontSize) / 2 : "middle" === textBaseline || "bottom" === textBaseline && (dy = -(lineHeight - fontSize) / 2)), drawText(t, 0, dy, 0);
+          } else if (cache) {
+            context.setTextStyleWithoutAlignBaseline(text.attribute, textAttribute, z);
+            const {
+              verticalList: verticalList
+            } = cache;
+            let offsetY = 0;
+            const totalW = verticalList[0].reduce((a, b) => a + (b.width || 0), 0);
+            let offsetX = 0;
+            "bottom" === textBaseline ? offsetX = -lineHeight : "middle" === textBaseline && (offsetX = -lineHeight / 2), "center" === textAlign ? offsetY -= totalW / 2 : "right" === textAlign && (offsetY -= totalW), context.textAlign = "left", context.textBaseline = "top", verticalList[0].forEach(item => {
+              const {
+                text: text,
+                width: width,
+                direction: direction
+              } = item;
+              drawText(text, offsetX, offsetY, direction), offsetY += width;
+            });
+          }
         }
         transform3dMatrixToContextMatrix && this.restoreTransformUseContext2d(text, textAttribute, z, context), this._textAfterRenderContribitions.forEach(c => {
           c.drawShape(text, context, x, y, doFill, doStroke, fVisible, sVisible, textAttribute, drawContext, fillCb, strokeCb);
@@ -20910,15 +21436,26 @@
       }
       drawShape(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb) {
         const {
-          innerRadius = arcAttribute.innerRadius,
-          outerRadius = arcAttribute.outerRadius,
-          startAngle = arcAttribute.startAngle,
-          endAngle = arcAttribute.endAngle,
-          opacity = arcAttribute.opacity,
-          outerBorder: outerBorder,
-          innerBorder: innerBorder
-        } = arc.attribute;
-        if (outerBorder) {
+            outerBorder: outerBorder,
+            innerBorder: innerBorder
+          } = arc.attribute,
+          doOuterBorder = outerBorder && !1 !== outerBorder.visible,
+          doInnerBorder = innerBorder && !1 !== innerBorder.visible;
+        if (!doOuterBorder && !doInnerBorder) return;
+        const {
+            innerRadius = arcAttribute.innerRadius,
+            outerRadius = arcAttribute.outerRadius,
+            startAngle = arcAttribute.startAngle,
+            endAngle = arcAttribute.endAngle,
+            opacity = arcAttribute.opacity,
+            x: originX = arcAttribute.x,
+            y: originY = arcAttribute.y,
+            scaleX = arcAttribute.scaleX,
+            scaleY = arcAttribute.scaleY
+          } = arc.attribute,
+          doStrokeOuter = !(!outerBorder || !outerBorder.stroke),
+          doStrokeInner = !(!innerBorder || !innerBorder.stroke);
+        if (doOuterBorder) {
           const {
               distance = arcAttribute.outerBorder.distance
             } = outerBorder,
@@ -20929,12 +21466,12 @@
             innerRadius: innerRadius - d,
             startAngle: startAngle - deltaAngle,
             endAngle: endAngle + deltaAngle
-          }), context.beginPath(), drawArcPath$1(arc, context, x, y, outerRadius + d, innerRadius - d), context.setShadowStyle && context.setShadowStyle(arc, arc.attribute, arcAttribute), strokeCb) strokeCb(context, outerBorder, arcAttribute.outerBorder);else if (sVisible) {
+          }), context.beginPath(), drawArcPath$1(arc, context, x, y, outerRadius + d, innerRadius - d), context.setShadowStyle && context.setShadowStyle(arc, arc.attribute, arcAttribute), strokeCb) strokeCb(context, outerBorder, arcAttribute.outerBorder);else if (doStrokeOuter) {
             const lastOpacity = arcAttribute.outerBorder.opacity;
-            arcAttribute.outerBorder.opacity = opacity, context.setStrokeStyle(arc, outerBorder, x, y, arcAttribute.outerBorder), arcAttribute.outerBorder.opacity = lastOpacity, context.stroke();
+            arcAttribute.outerBorder.opacity = opacity, context.setStrokeStyle(arc, outerBorder, (originX - x) / scaleX, (originY - y) / scaleY, arcAttribute.outerBorder), arcAttribute.outerBorder.opacity = lastOpacity, context.stroke();
           }
         }
-        if (innerBorder) {
+        if (doInnerBorder) {
           const {
               distance = arcAttribute.innerBorder.distance
             } = innerBorder,
@@ -20945,9 +21482,9 @@
             innerRadius: innerRadius + d,
             startAngle: startAngle + deltaAngle,
             endAngle: endAngle - deltaAngle
-          }), context.beginPath(), drawArcPath$1(arc, context, x, y, outerRadius - d, innerRadius + d), context.setShadowStyle && context.setShadowStyle(arc, arc.attribute, arcAttribute), strokeCb) strokeCb(context, innerBorder, arcAttribute.innerBorder);else if (sVisible) {
+          }), context.beginPath(), drawArcPath$1(arc, context, x, y, outerRadius - d, innerRadius + d), context.setShadowStyle && context.setShadowStyle(arc, arc.attribute, arcAttribute), strokeCb) strokeCb(context, innerBorder, arcAttribute.innerBorder);else if (doStrokeInner) {
             const lastOpacity = arcAttribute.innerBorder.opacity;
-            arcAttribute.innerBorder.opacity = opacity, context.setStrokeStyle(arc, innerBorder, x, y, arcAttribute.innerBorder), arcAttribute.innerBorder.opacity = lastOpacity, context.stroke();
+            arcAttribute.innerBorder.opacity = opacity, context.setStrokeStyle(arc, innerBorder, (originX - x) / scaleX, (originY - y) / scaleY, arcAttribute.innerBorder), arcAttribute.innerBorder.opacity = lastOpacity, context.stroke();
           }
         }
         arc.setAttributes({
@@ -20985,31 +21522,42 @@
       }
       drawShape(circle, context, x, y, doFill, doStroke, fVisible, sVisible, circleAttribute, drawContext, fillCb, strokeCb) {
         const {
-          radius = circleAttribute.radius,
-          startAngle = circleAttribute.startAngle,
-          endAngle = circleAttribute.endAngle,
-          opacity = circleAttribute.opacity,
-          outerBorder: outerBorder,
-          innerBorder: innerBorder
-        } = circle.attribute;
-        if (outerBorder) {
+            outerBorder: outerBorder,
+            innerBorder: innerBorder
+          } = circle.attribute,
+          doOuterBorder = outerBorder && !1 !== outerBorder.visible,
+          doInnerBorder = innerBorder && !1 !== innerBorder.visible;
+        if (!doOuterBorder && !doInnerBorder) return;
+        const {
+            radius = circleAttribute.radius,
+            startAngle = circleAttribute.startAngle,
+            endAngle = circleAttribute.endAngle,
+            opacity = circleAttribute.opacity,
+            x: originX = circleAttribute.x,
+            y: originY = circleAttribute.y,
+            scaleX = circleAttribute.scaleX,
+            scaleY = circleAttribute.scaleY
+          } = circle.attribute,
+          doStrokeOuter = !(!outerBorder || !outerBorder.stroke),
+          doStrokeInner = !(!innerBorder || !innerBorder.stroke);
+        if (doOuterBorder) {
           const {
               distance = circleAttribute.outerBorder.distance
             } = outerBorder,
             dw = getScaledStroke(context, distance, context.dpr);
-          if (context.beginPath(), context.arc(x, y, radius + dw, startAngle, endAngle), context.closePath(), context.setShadowStyle && context.setShadowStyle(circle, circle.attribute, circleAttribute), strokeCb) strokeCb(context, outerBorder, circleAttribute.outerBorder);else if (sVisible) {
+          if (context.beginPath(), context.arc(x, y, radius + dw, startAngle, endAngle), context.closePath(), context.setShadowStyle && context.setShadowStyle(circle, circle.attribute, circleAttribute), strokeCb) strokeCb(context, outerBorder, circleAttribute.outerBorder);else if (doStrokeOuter) {
             const lastOpacity = circleAttribute.outerBorder.opacity;
-            circleAttribute.outerBorder.opacity = opacity, context.setStrokeStyle(circle, outerBorder, x, y, circleAttribute.outerBorder), circleAttribute.outerBorder.opacity = lastOpacity, context.stroke();
+            circleAttribute.outerBorder.opacity = opacity, context.setStrokeStyle(circle, outerBorder, (originX - x) / scaleX, (originY - y) / scaleY, circleAttribute.outerBorder), circleAttribute.outerBorder.opacity = lastOpacity, context.stroke();
           }
         }
-        if (innerBorder) {
+        if (doInnerBorder) {
           const {
               distance = circleAttribute.innerBorder.distance
             } = innerBorder,
             dw = getScaledStroke(context, distance, context.dpr);
-          if (context.beginPath(), context.arc(x, y, radius - dw, startAngle, endAngle), context.closePath(), context.setShadowStyle && context.setShadowStyle(circle, circle.attribute, circleAttribute), strokeCb) strokeCb(context, innerBorder, circleAttribute.innerBorder);else if (sVisible) {
+          if (context.beginPath(), context.arc(x, y, radius - dw, startAngle, endAngle), context.closePath(), context.setShadowStyle && context.setShadowStyle(circle, circle.attribute, circleAttribute), strokeCb) strokeCb(context, innerBorder, circleAttribute.innerBorder);else if (doStrokeInner) {
             const lastOpacity = circleAttribute.innerBorder.opacity;
-            circleAttribute.innerBorder.opacity = opacity, context.setStrokeStyle(circle, innerBorder, x, y, circleAttribute.innerBorder), circleAttribute.innerBorder.opacity = lastOpacity, context.stroke();
+            circleAttribute.innerBorder.opacity = opacity, context.setStrokeStyle(circle, innerBorder, (originX - x) / scaleX, (originY - y) / scaleY, circleAttribute.innerBorder), circleAttribute.innerBorder.opacity = lastOpacity, context.stroke();
           }
         }
       }
@@ -21106,14 +21654,25 @@
       }
       drawShape(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb) {
         const {
-          width = rectAttribute.width,
-          height = rectAttribute.height,
-          cornerRadius = rectAttribute.cornerRadius,
-          opacity = rectAttribute.opacity,
-          outerBorder: outerBorder,
-          innerBorder: innerBorder
-        } = rect.attribute;
-        if (outerBorder) {
+            outerBorder: outerBorder,
+            innerBorder: innerBorder
+          } = rect.attribute,
+          doOuterBorder = outerBorder && !1 !== outerBorder.visible,
+          doInnerBorder = innerBorder && !1 !== innerBorder.visible;
+        if (!doOuterBorder && !doInnerBorder) return;
+        const {
+            width = rectAttribute.width,
+            height = rectAttribute.height,
+            cornerRadius = rectAttribute.cornerRadius,
+            opacity = rectAttribute.opacity,
+            x: originX = rectAttribute.x,
+            y: originY = rectAttribute.y,
+            scaleX = rectAttribute.scaleX,
+            scaleY = rectAttribute.scaleY
+          } = rect.attribute,
+          doStrokeOuter = !(!outerBorder || !outerBorder.stroke),
+          doStrokeInner = !(!innerBorder || !innerBorder.stroke);
+        if (doOuterBorder) {
           const {
               distance = rectAttribute.outerBorder.distance
             } = outerBorder,
@@ -21121,12 +21680,12 @@
             nextX = x - d,
             nextY = y - d,
             dw = 2 * d;
-          if (0 === cornerRadius || isArray$3(cornerRadius) && cornerRadius.every(num => 0 === num) ? (context.beginPath(), context.rect(nextX, nextY, width + dw, height + dw)) : (context.beginPath(), createRectPath(context, nextX, nextY, width + dw, height + dw, cornerRadius)), context.setShadowStyle && context.setShadowStyle(rect, rect.attribute, rectAttribute), strokeCb) strokeCb(context, outerBorder, rectAttribute.outerBorder);else if (sVisible) {
+          if (0 === cornerRadius || isArray$3(cornerRadius) && cornerRadius.every(num => 0 === num) ? (context.beginPath(), context.rect(nextX, nextY, width + dw, height + dw)) : (context.beginPath(), createRectPath(context, nextX, nextY, width + dw, height + dw, cornerRadius)), context.setShadowStyle && context.setShadowStyle(rect, rect.attribute, rectAttribute), strokeCb) strokeCb(context, outerBorder, rectAttribute.outerBorder);else if (doStrokeOuter) {
             const lastOpacity = rectAttribute.outerBorder.opacity;
-            rectAttribute.outerBorder.opacity = opacity, context.setStrokeStyle(rect, outerBorder, x, y, rectAttribute.outerBorder), rectAttribute.outerBorder.opacity = lastOpacity, context.stroke();
+            rectAttribute.outerBorder.opacity = opacity, context.setStrokeStyle(rect, outerBorder, (originX - x) / scaleX, (originY - y) / scaleY, rectAttribute.outerBorder), rectAttribute.outerBorder.opacity = lastOpacity, context.stroke();
           }
         }
-        if (innerBorder) {
+        if (doInnerBorder) {
           const {
               distance = rectAttribute.innerBorder.distance
             } = innerBorder,
@@ -21134,9 +21693,9 @@
             nextX = x + d,
             nextY = y + d,
             dw = 2 * d;
-          if (0 === cornerRadius || isArray$3(cornerRadius) && cornerRadius.every(num => 0 === num) ? (context.beginPath(), context.rect(nextX, nextY, width - dw, height - dw)) : (context.beginPath(), createRectPath(context, nextX, nextY, width - dw, height - dw, cornerRadius)), context.setShadowStyle && context.setShadowStyle(rect, rect.attribute, rectAttribute), strokeCb) strokeCb(context, innerBorder, rectAttribute.innerBorder);else if (sVisible) {
+          if (0 === cornerRadius || isArray$3(cornerRadius) && cornerRadius.every(num => 0 === num) ? (context.beginPath(), context.rect(nextX, nextY, width - dw, height - dw)) : (context.beginPath(), createRectPath(context, nextX, nextY, width - dw, height - dw, cornerRadius)), context.setShadowStyle && context.setShadowStyle(rect, rect.attribute, rectAttribute), strokeCb) strokeCb(context, innerBorder, rectAttribute.innerBorder);else if (doStrokeInner) {
             const lastOpacity = rectAttribute.innerBorder.opacity;
-            rectAttribute.innerBorder.opacity = opacity, context.setStrokeStyle(rect, innerBorder, x, y, rectAttribute.innerBorder), rectAttribute.innerBorder.opacity = lastOpacity, context.stroke();
+            rectAttribute.innerBorder.opacity = opacity, context.setStrokeStyle(rect, innerBorder, (originX - x) / scaleX, (originY - y) / scaleY, rectAttribute.innerBorder), rectAttribute.innerBorder.opacity = lastOpacity, context.stroke();
           }
         }
       }
@@ -21199,33 +21758,43 @@
         this.time = BaseRenderContributionTime.afterFillStroke, this.useStyle = !0, this.order = 0;
       }
       drawShape(symbol, context, x, y, doFill, doStroke, fVisible, sVisible, symbolAttribute, drawContext, fillCb, strokeCb) {
+        const parsedPath = symbol.getParsedPath();
+        if (!parsedPath) return;
         const {
-            size = symbolAttribute.size,
-            opacity = symbolAttribute.opacity,
             outerBorder: outerBorder,
             innerBorder: innerBorder
           } = symbol.attribute,
-          parsedPath = symbol.getParsedPath();
-        if (parsedPath) {
-          if (outerBorder) {
-            const {
-                distance = symbolAttribute.outerBorder.distance
-              } = outerBorder,
-              d = getScaledStroke(context, distance, context.dpr);
-            if (context.beginPath(), !1 === parsedPath.drawOffset(context, size, x, y, d) && context.closePath(), context.setShadowStyle && context.setShadowStyle(symbol, symbol.attribute, symbolAttribute), strokeCb) strokeCb(context, outerBorder, symbolAttribute.outerBorder);else if (sVisible) {
-              const lastOpacity = symbolAttribute.outerBorder.opacity;
-              symbolAttribute.outerBorder.opacity = opacity, context.setStrokeStyle(symbol, outerBorder, x, y, symbolAttribute.outerBorder), symbolAttribute.outerBorder.opacity = lastOpacity, context.stroke();
-            }
+          doOuterBorder = outerBorder && !1 !== outerBorder.visible,
+          doInnerBorder = innerBorder && !1 !== innerBorder.visible;
+        if (!doOuterBorder && !doInnerBorder) return;
+        const {
+            size = symbolAttribute.size,
+            opacity = symbolAttribute.opacity,
+            x: originX = symbolAttribute.x,
+            y: originY = symbolAttribute.y,
+            scaleX = symbolAttribute.scaleX,
+            scaleY = symbolAttribute.scaleY
+          } = symbol.attribute,
+          doStrokeOuter = !(!outerBorder || !outerBorder.stroke),
+          doStrokeInner = !(!innerBorder || !innerBorder.stroke);
+        if (doOuterBorder) {
+          const {
+              distance = symbolAttribute.outerBorder.distance
+            } = outerBorder,
+            d = getScaledStroke(context, distance, context.dpr);
+          if (context.beginPath(), !1 === parsedPath.drawOffset(context, size, x, y, d) && context.closePath(), context.setShadowStyle && context.setShadowStyle(symbol, symbol.attribute, symbolAttribute), strokeCb) strokeCb(context, outerBorder, symbolAttribute.outerBorder);else if (doStrokeOuter) {
+            const lastOpacity = symbolAttribute.outerBorder.opacity;
+            symbolAttribute.outerBorder.opacity = opacity, context.setStrokeStyle(symbol, outerBorder, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute.outerBorder), symbolAttribute.outerBorder.opacity = lastOpacity, context.stroke();
           }
-          if (innerBorder) {
-            const {
-                distance = symbolAttribute.innerBorder.distance
-              } = innerBorder,
-              d = getScaledStroke(context, distance, context.dpr);
-            if (context.beginPath(), !1 === parsedPath.drawOffset(context, size, x, y, -d) && context.closePath(), context.setShadowStyle && context.setShadowStyle(symbol, symbol.attribute, symbolAttribute), strokeCb) strokeCb(context, innerBorder, symbolAttribute.innerBorder);else if (sVisible) {
-              const lastOpacity = symbolAttribute.innerBorder.opacity;
-              symbolAttribute.innerBorder.opacity = opacity, context.setStrokeStyle(symbol, innerBorder, x, y, symbolAttribute.innerBorder), symbolAttribute.innerBorder.opacity = lastOpacity, context.stroke();
-            }
+        }
+        if (doInnerBorder) {
+          const {
+              distance = symbolAttribute.innerBorder.distance
+            } = innerBorder,
+            d = getScaledStroke(context, distance, context.dpr);
+          if (context.beginPath(), !1 === parsedPath.drawOffset(context, size, x, y, -d) && context.closePath(), context.setShadowStyle && context.setShadowStyle(symbol, symbol.attribute, symbolAttribute), strokeCb) strokeCb(context, innerBorder, symbolAttribute.innerBorder);else if (doStrokeInner) {
+            const lastOpacity = symbolAttribute.innerBorder.opacity;
+            symbolAttribute.innerBorder.opacity = opacity, context.setStrokeStyle(symbol, innerBorder, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute.innerBorder), symbolAttribute.innerBorder.opacity = lastOpacity, context.stroke();
           }
         }
       }
@@ -21575,7 +22144,7 @@
         return picker || null;
       }
     };
-    DefaultPickService = __decorate$1b([injectable(), __param$C(0, inject(Global)), __param$C(1, inject(ContributionProvider)), __param$C(1, named(PickItemInterceptor)), __metadata$R("design:paramtypes", [Object, Object])], DefaultPickService);
+    DefaultPickService = __decorate$1b([injectable(), __param$C(0, inject(VGlobal)), __param$C(1, inject(ContributionProvider)), __param$C(1, named(PickItemInterceptor)), __metadata$R("design:paramtypes", [Object, Object])], DefaultPickService);
 
     var __decorate$1a = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
@@ -21637,7 +22206,7 @@
         return !1 === graphic.attribute.pickable ? null : graphic.AABBBounds.containsPoint(point) ? graphic : null;
       }
     };
-    DefaultGlobalPickerService = __decorate$1a([injectable(), __param$B(0, inject(Global)), __metadata$Q("design:paramtypes", [Object])], DefaultGlobalPickerService);
+    DefaultGlobalPickerService = __decorate$1a([injectable(), __param$B(0, inject(VGlobal)), __metadata$Q("design:paramtypes", [Object])], DefaultGlobalPickerService);
 
     function lookAt(out, eye, center, up) {
       let x0, x1, x2, y0, y1, y2, z0, z1, z2, len;
@@ -22487,7 +23056,7 @@
         return picker && picker.contains(graphic, point, params) ? graphic : null;
       }
     };
-    __decorate$17([postConstruct(), __metadata$N("design:type", Function), __metadata$N("design:paramtypes", []), __metadata$N("design:returntype", void 0)], DefaultCanvasPickerService.prototype, "init", null), DefaultCanvasPickerService = __decorate$17([injectable(), __param$A(0, inject(ContributionProvider)), __param$A(0, named(CanvasPickerContribution)), __param$A(1, inject(CanvasCirclePicker)), __param$A(2, inject(CanvasRectPicker)), __param$A(3, inject(CanvasArcPicker)), __param$A(4, inject(CanvasAreaPicker)), __param$A(5, inject(CanvasImagePicker)), __param$A(6, inject(CanvasLinePicker)), __param$A(7, inject(CanvasPathPicker)), __param$A(8, inject(CanvasSymbolPicker)), __param$A(9, inject(CanvasTextPicker)), __param$A(10, inject(CanvasPolygonPicker)), __param$A(11, inject(CanvasRichTextPicker)), __param$A(12, inject(DrawContribution)), __param$A(13, inject(Global)), __param$A(14, inject(ContributionProvider)), __param$A(14, named(PickItemInterceptor)), __metadata$N("design:paramtypes", [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object])], DefaultCanvasPickerService);
+    __decorate$17([postConstruct(), __metadata$N("design:type", Function), __metadata$N("design:paramtypes", []), __metadata$N("design:returntype", void 0)], DefaultCanvasPickerService.prototype, "init", null), DefaultCanvasPickerService = __decorate$17([injectable(), __param$A(0, inject(ContributionProvider)), __param$A(0, named(CanvasPickerContribution)), __param$A(1, inject(CanvasCirclePicker)), __param$A(2, inject(CanvasRectPicker)), __param$A(3, inject(CanvasArcPicker)), __param$A(4, inject(CanvasAreaPicker)), __param$A(5, inject(CanvasImagePicker)), __param$A(6, inject(CanvasLinePicker)), __param$A(7, inject(CanvasPathPicker)), __param$A(8, inject(CanvasSymbolPicker)), __param$A(9, inject(CanvasTextPicker)), __param$A(10, inject(CanvasPolygonPicker)), __param$A(11, inject(CanvasRichTextPicker)), __param$A(12, inject(DrawContribution)), __param$A(13, inject(VGlobal)), __param$A(14, inject(ContributionProvider)), __param$A(14, named(PickItemInterceptor)), __metadata$N("design:paramtypes", [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object])], DefaultCanvasPickerService);
 
     var __decorate$16 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
@@ -22740,7 +23309,7 @@
         return picker && picker.contains(graphic, point, params) ? graphic : null;
       }
     };
-    __decorate$15([postConstruct(), __metadata$L("design:type", Function), __metadata$L("design:paramtypes", []), __metadata$L("design:returntype", void 0)], DefaultMathPickerService.prototype, "init", null), DefaultMathPickerService = __decorate$15([injectable(), __param$z(0, inject(ContributionProvider)), __param$z(0, named(MathPickerContribution)), __param$z(1, inject(Global)), __param$z(2, inject(ContributionProvider)), __param$z(2, named(PickItemInterceptor)), __metadata$L("design:paramtypes", [Object, Object, Object])], DefaultMathPickerService);
+    __decorate$15([postConstruct(), __metadata$L("design:type", Function), __metadata$L("design:paramtypes", []), __metadata$L("design:returntype", void 0)], DefaultMathPickerService.prototype, "init", null), DefaultMathPickerService = __decorate$15([injectable(), __param$z(0, inject(ContributionProvider)), __param$z(0, named(MathPickerContribution)), __param$z(1, inject(VGlobal)), __param$z(2, inject(ContributionProvider)), __param$z(2, named(PickItemInterceptor)), __metadata$L("design:paramtypes", [Object, Object, Object])], DefaultMathPickerService);
 
     var pickModule = new ContainerModule(bind => {
       bind(DefaultCanvasPickerService).toSelf().inSingletonScope(), bind(DefaultMathPickerService).toSelf().inSingletonScope(), bind(PickerService).toService(DefaultCanvasPickerService), bind(DefaultGlobalPickerService).toSelf().inSingletonScope(), bind(GlobalPickerService).toService(DefaultGlobalPickerService), bind(Canvas3DPickItemInterceptor).toSelf().inSingletonScope(), bind(PickItemInterceptor).toService(Canvas3DPickItemInterceptor), bindContributionProvider(bind, PickItemInterceptor);
@@ -23727,7 +24296,7 @@
         context.nativeContext.save(), context.nativeContext.setTransform(dpr, 0, 0, dpr, 0, 0), context.clearRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1), color && (context.fillStyle = color, context.fillRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1)), context.nativeContext.restore();
       }
     };
-    BrowserWindowHandlerContribution.env = "browser", BrowserWindowHandlerContribution = __decorate$X([injectable(), __param$x(0, inject(Global)), __metadata$D("design:paramtypes", [Object])], BrowserWindowHandlerContribution);
+    BrowserWindowHandlerContribution.env = "browser", BrowserWindowHandlerContribution = __decorate$X([injectable(), __param$x(0, inject(VGlobal)), __metadata$D("design:paramtypes", [Object])], BrowserWindowHandlerContribution);
 
     var __decorate$W = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
@@ -24028,7 +24597,7 @@
         context.nativeContext.save(), context.nativeContext.setTransform(dpr, 0, 0, dpr, 0, 0), context.clearRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1), color && (context.fillStyle = color, context.fillRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1)), context.nativeContext.restore();
       }
     };
-    FeishuWindowHandlerContribution.env = "feishu", FeishuWindowHandlerContribution = __decorate$U([injectable(), __param$w(0, inject(Global)), __metadata$B("design:paramtypes", [Object])], FeishuWindowHandlerContribution);
+    FeishuWindowHandlerContribution.env = "feishu", FeishuWindowHandlerContribution = __decorate$U([injectable(), __param$w(0, inject(VGlobal)), __metadata$B("design:paramtypes", [Object])], FeishuWindowHandlerContribution);
 
     var __decorate$T = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
@@ -24358,7 +24927,7 @@
         context.nativeContext.save(), context.nativeContext.setTransform(dpr, 0, 0, dpr, 0, 0), context.clearRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1), color && (context.fillStyle = color, context.fillRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1)), context.nativeContext.restore();
       }
     };
-    TaroWindowHandlerContribution.env = "taro", TaroWindowHandlerContribution = __decorate$R([injectable(), __param$v(0, inject(Global)), __metadata$z("design:paramtypes", [Object])], TaroWindowHandlerContribution);
+    TaroWindowHandlerContribution.env = "taro", TaroWindowHandlerContribution = __decorate$R([injectable(), __param$v(0, inject(VGlobal)), __metadata$z("design:paramtypes", [Object])], TaroWindowHandlerContribution);
 
     var __decorate$Q = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
@@ -24668,7 +25237,7 @@
         context.nativeContext.save(), context.nativeContext.setTransform(dpr, 0, 0, dpr, 0, 0), context.clearRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1), color && (context.fillStyle = color, context.fillRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1)), context.nativeContext.restore();
       }
     };
-    LynxWindowHandlerContribution.env = "lynx", LynxWindowHandlerContribution = __decorate$O([injectable(), __param$u(0, inject(Global)), __metadata$x("design:paramtypes", [Object])], LynxWindowHandlerContribution);
+    LynxWindowHandlerContribution.env = "lynx", LynxWindowHandlerContribution = __decorate$O([injectable(), __param$u(0, inject(VGlobal)), __metadata$x("design:paramtypes", [Object])], LynxWindowHandlerContribution);
 
     var __decorate$N = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
@@ -24893,7 +25462,7 @@
       }
       clearViewBox(vb, color) {}
     };
-    NodeWindowHandlerContribution.env = "node", NodeWindowHandlerContribution = __decorate$L([injectable(), __param$t(0, inject(Global)), __metadata$u("design:paramtypes", [Object])], NodeWindowHandlerContribution);
+    NodeWindowHandlerContribution.env = "node", NodeWindowHandlerContribution = __decorate$L([injectable(), __param$t(0, inject(VGlobal)), __metadata$u("design:paramtypes", [Object])], NodeWindowHandlerContribution);
 
     var __decorate$K = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
@@ -25163,7 +25732,7 @@
         context.nativeContext.save(), context.nativeContext.setTransform(dpr, 0, 0, dpr, 0, 0), context.clearRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1), color && (context.fillStyle = color, context.fillRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1)), context.nativeContext.restore();
       }
     };
-    WxWindowHandlerContribution.env = "wx", WxWindowHandlerContribution = __decorate$I([injectable(), __param$s(0, inject(Global)), __metadata$s("design:paramtypes", [Object])], WxWindowHandlerContribution);
+    WxWindowHandlerContribution.env = "wx", WxWindowHandlerContribution = __decorate$I([injectable(), __param$s(0, inject(VGlobal)), __metadata$s("design:paramtypes", [Object])], WxWindowHandlerContribution);
 
     var windowModules = new ContainerModule(bind => {
       bind(BrowserWindowHandlerContribution).toSelf(), bind(WindowHandlerContribution).toDynamicValue(ctx => ctx.container.get(BrowserWindowHandlerContribution)).whenTargetNamed(BrowserWindowHandlerContribution.env), bind(FeishuWindowHandlerContribution).toSelf(), bind(WindowHandlerContribution).toDynamicValue(ctx => ctx.container.get(FeishuWindowHandlerContribution)).whenTargetNamed(FeishuWindowHandlerContribution.env), bind(TaroWindowHandlerContribution).toSelf(), bind(WindowHandlerContribution).toDynamicValue(ctx => ctx.container.get(TaroWindowHandlerContribution)).whenTargetNamed(TaroWindowHandlerContribution.env), bind(LynxWindowHandlerContribution).toSelf(), bind(WindowHandlerContribution).toDynamicValue(ctx => ctx.container.get(LynxWindowHandlerContribution)).whenTargetNamed(LynxWindowHandlerContribution.env), bind(WxWindowHandlerContribution).toSelf(), bind(WindowHandlerContribution).toDynamicValue(ctx => ctx.container.get(WxWindowHandlerContribution)).whenTargetNamed(WxWindowHandlerContribution.env), bind(NodeWindowHandlerContribution).toSelf(), bind(WindowHandlerContribution).toDynamicValue(ctx => ctx.container.get(NodeWindowHandlerContribution)).whenTargetNamed(NodeWindowHandlerContribution.env);
@@ -25251,7 +25820,7 @@
         this.canvas.release();
       }
     };
-    CanvasLayerHandlerContribution = __decorate$H([injectable(), __param$r(0, inject(Global)), __metadata$r("design:paramtypes", [Object])], CanvasLayerHandlerContribution);
+    CanvasLayerHandlerContribution = __decorate$H([injectable(), __param$r(0, inject(VGlobal)), __metadata$r("design:paramtypes", [Object])], CanvasLayerHandlerContribution);
 
     var __decorate$G = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
@@ -25324,7 +25893,7 @@
       }
       merge(layerHandlers) {}
     };
-    OffscreenLayerHandlerContribution = __decorate$G([injectable(), __param$q(0, inject(Global)), __metadata$q("design:paramtypes", [Object])], OffscreenLayerHandlerContribution);
+    OffscreenLayerHandlerContribution = __decorate$G([injectable(), __param$q(0, inject(VGlobal)), __metadata$q("design:paramtypes", [Object])], OffscreenLayerHandlerContribution);
 
     var layerHandlerModules = new ContainerModule(bind => {
       bind(CanvasLayerHandlerContribution).toSelf(), bind(OffscreenLayerHandlerContribution).toSelf(), bind(LayerHandlerContribution).toService(CanvasLayerHandlerContribution);
@@ -25958,7 +26527,7 @@
         });
       }
     };
-    __decorate$z([inject(Global), __metadata$n("design:type", Object)], DefaultIncrementalDrawContribution.prototype, "global", void 0), DefaultIncrementalDrawContribution = __decorate$z([injectable(), __param$n(0, multiInject(GraphicRender)), __param$n(1, inject(RenderSelector)), __param$n(2, inject(DefaultIncrementalCanvasLineRender)), __param$n(3, inject(DefaultIncrementalCanvasAreaRender)), __param$n(4, inject(LayerService)), __param$n(5, inject(ContributionProvider)), __param$n(5, named(DrawItemInterceptor)), __metadata$n("design:paramtypes", [Array, Object, Object, Object, Object, Object])], DefaultIncrementalDrawContribution);
+    __decorate$z([inject(VGlobal), __metadata$n("design:type", Object)], DefaultIncrementalDrawContribution.prototype, "global", void 0), DefaultIncrementalDrawContribution = __decorate$z([injectable(), __param$n(0, multiInject(GraphicRender)), __param$n(1, inject(RenderSelector)), __param$n(2, inject(DefaultIncrementalCanvasLineRender)), __param$n(3, inject(DefaultIncrementalCanvasAreaRender)), __param$n(4, inject(LayerService)), __param$n(5, inject(ContributionProvider)), __param$n(5, named(DrawItemInterceptor)), __metadata$n("design:paramtypes", [Array, Object, Object, Object, Object, Object])], DefaultIncrementalDrawContribution);
 
     var __decorate$y = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
@@ -27749,8 +28318,8 @@
     }
 
     container.load(coreModule), container.load(graphicModule), container.load(renderModule$1), container.load(pickModule), container.load(pluginModule), load$3(container), load$2(container), load$1(container), load(container);
-    const global$1 = container.get(Global);
-    application.global = global$1;
+    const vglobal = container.get(VGlobal);
+    application.global = vglobal;
     const graphicUtil = container.get(GraphicUtil);
     application.graphicUtil = graphicUtil;
     const transformUtil = container.get(TransformUtil);
@@ -27871,6 +28440,164 @@
       }
     }
 
+    class FlexLayoutPlugin {
+      constructor() {
+        this.name = "FlexLayoutPlugin", this.activeEvent = "onRegister", this.id = Generator.GenAutoIncrementId(), this.key = this.name + this.id;
+      }
+      tryLayout(graphic) {
+        const p = graphic.parent;
+        if (!p) return;
+        const theme = getTheme(p).group,
+          {
+            display = theme.display
+          } = p.attribute;
+        if ("flex" !== display) return;
+        const {
+          width: width,
+          height: height,
+          flexDirection = theme.flexDirection,
+          flexWrap = theme.flexWrap,
+          justifyContent = theme.justifyContent,
+          alignItems = theme.alignItems,
+          alignContent = theme.alignContent
+        } = p.attribute;
+        if (!width || !height) return;
+        const result = {
+            main: {
+              len: width,
+              field: "x"
+            },
+            cross: {
+              len: height,
+              field: "y"
+            },
+            dir: 1
+          },
+          main = result.main,
+          cross = result.cross;
+        "row-reverse" === flexDirection ? result.dir = -1 : "column" === flexDirection ? (main.len = height, cross.len = width, main.field = "y", cross.field = "x") : "column-reverse" === flexDirection && (main.len = height, cross.len = width, main.field = "y", cross.field = "x", result.dir = -1);
+        let mainLen = 0,
+          crossLen = 0;
+        const mianLenArray = [];
+        p.forEachChildren(c => {
+          const b = c.AABBBounds,
+            ml = "x" === main.field ? b.width() : b.height(),
+            cl = "x" === cross.field ? b.width() : b.height();
+          mianLenArray.push({
+            mainLen: ml,
+            crossLen: cl
+          }), mainLen += ml, crossLen = Math.max(crossLen, cl);
+        });
+        const mainList = [];
+        if (mainLen > main.len && "wrap" === flexWrap) {
+          let tempMainL = 0,
+            tempCrossL = 0;
+          mianLenArray.forEach((_ref, i) => {
+            let {
+              mainLen: mainLen,
+              crossLen: crossLen
+            } = _ref;
+            tempMainL + mainLen > main.len ? 0 === tempMainL ? (mainList.push({
+              idx: i,
+              mainLen: tempMainL + mainLen,
+              crossLen: crossLen
+            }), tempMainL = 0, tempCrossL = 0) : (mainList.push({
+              idx: i - 1,
+              mainLen: tempMainL,
+              crossLen: crossLen
+            }), tempMainL = mainLen, tempCrossL = crossLen) : (tempMainL += mainLen, tempCrossL = Math.max(tempCrossL, crossLen));
+          }), mainList.push({
+            idx: mianLenArray.length - 1,
+            mainLen: tempMainL,
+            crossLen: tempCrossL
+          });
+        } else mainList.push({
+          idx: mianLenArray.length - 1,
+          mainLen: mainLen,
+          crossLen: crossLen
+        });
+        const children = p.getChildren();
+        let lastIdx = 0;
+        if (mainList.forEach(s => {
+          this.layoutMain(p, children, justifyContent, main, mianLenArray, lastIdx, s), lastIdx = s.idx + 1;
+        }), crossLen = mainList.reduce((a, b) => a + b.crossLen, 0), 1 === mainList.length) {
+          if ("flex-end" === alignItems) {
+            const anchorPos = cross.len;
+            this.layoutCross(children, alignItems, cross, anchorPos, mianLenArray, mainList[0], 0);
+          } else if ("center" === alignItems) {
+            const anchorPos = cross.len / 2;
+            this.layoutCross(children, alignItems, cross, anchorPos, mianLenArray, mainList[0], 0);
+          }
+        } else if ("flex-start" === alignContent) {
+          lastIdx = 0;
+          let anchorPos = 0;
+          mainList.forEach((s, i) => {
+            this.layoutCross(children, "flex-start", cross, anchorPos, mianLenArray, mainList[i], lastIdx), lastIdx = s.idx + 1, anchorPos += s.crossLen;
+          });
+        } else if ("center" === alignContent) {
+          lastIdx = 0;
+          let anchorPos = Math.max(0, (cross.len - crossLen) / 2);
+          mainList.forEach((s, i) => {
+            this.layoutCross(children, "center", cross, anchorPos + s.crossLen / 2, mianLenArray, mainList[i], lastIdx), lastIdx = s.idx + 1, anchorPos += s.crossLen;
+          });
+        } else if ("space-around" === alignContent) {
+          lastIdx = 0;
+          const padding = Math.max(0, (cross.len - crossLen) / mainList.length / 2);
+          let anchorPos = padding;
+          mainList.forEach((s, i) => {
+            this.layoutCross(children, "flex-start", cross, anchorPos, mianLenArray, mainList[i], lastIdx), lastIdx = s.idx + 1, anchorPos += s.crossLen + 2 * padding;
+          });
+        } else if ("space-between" === alignContent) {
+          lastIdx = 0;
+          const padding = Math.max(0, (cross.len - crossLen) / (2 * mainList.length - 2));
+          let anchorPos = 0;
+          mainList.forEach((s, i) => {
+            this.layoutCross(children, "flex-start", cross, anchorPos, mianLenArray, mainList[i], lastIdx), lastIdx = s.idx + 1, anchorPos += s.crossLen + 2 * padding;
+          });
+        }
+      }
+      layoutMain(p, children, justifyContent, main, mianLenArray, lastIdx, currSeg) {
+        if ("flex-start" === justifyContent) {
+          let pos = 0;
+          for (let i = lastIdx; i <= currSeg.idx; i++) children[i].attribute[main.field] = pos, pos += mianLenArray[i].mainLen;
+        } else if ("flex-end" === justifyContent) {
+          let pos = main.len;
+          for (let i = lastIdx; i <= currSeg.idx; i++) pos -= mianLenArray[i].mainLen, children[i].attribute[main.field] = pos;
+        } else if ("space-around" === justifyContent) {
+          if (currSeg.mainLen >= main.len) {
+            let pos = 0;
+            for (let i = lastIdx; i <= currSeg.idx; i++) children[i].attribute[main.field] = pos, pos += mianLenArray[i].mainLen;
+          } else {
+            const size = currSeg.idx - lastIdx + 1,
+              padding = (main.len - currSeg.mainLen) / size / 2;
+            let pos = padding;
+            for (let i = lastIdx; i <= currSeg.idx; i++) children[i].attribute[main.field] = pos, pos += mianLenArray[i].mainLen + 2 * padding;
+          }
+        } else if ("space-between" === justifyContent) if (currSeg.mainLen >= main.len) {
+          let pos = 0;
+          for (let i = lastIdx; i <= currSeg.idx; i++) children[i].attribute[main.field] = pos, pos += mianLenArray[i].mainLen;
+        } else {
+          const size = currSeg.idx - lastIdx + 1,
+            padding = (main.len - currSeg.mainLen) / (2 * size - 2);
+          let pos = 0;
+          for (let i = lastIdx; i <= currSeg.idx; i++) children[i].attribute[main.field] = pos, pos += mianLenArray[i].mainLen + 2 * padding;
+        }
+      }
+      layoutCross(children, alignItem, cross, anchorPos, lenArray, currSeg, lastIdx) {
+        if ("flex-end" === alignItem) for (let i = lastIdx; i <= currSeg.idx; i++) children[i].attribute[cross.field] = anchorPos - lenArray[i].crossLen;else if ("center" === alignItem) for (let i = lastIdx; i <= currSeg.idx; i++) children[i].attribute[cross.field] = anchorPos - lenArray[i].crossLen / 2;else for (let i = lastIdx; i <= currSeg.idx; i++) children[i].attribute[cross.field] = anchorPos;
+      }
+      activate(context) {
+        this.pluginService = context, graphicService.hooks.onAttributeUpdate.tap(this.key, graphic => {
+          graphic.glyphHost && (graphic = graphic.glyphHost), this.tryLayout(graphic);
+        }), graphicService.hooks.onSetStage.tap(this.key, graphic => {
+          graphic.glyphHost && (graphic = graphic.glyphHost), this.tryLayout(graphic);
+        });
+      }
+      deactivate(context) {
+        graphicService.hooks.onAttributeUpdate.taps = graphicService.hooks.onAttributeUpdate.taps.filter(item => item.name !== this.key), graphicService.hooks.onSetStage.taps = graphicService.hooks.onSetStage.taps.filter(item => item.name !== this.key);
+      }
+    }
+
     const defaultTicker = new DefaultTicker();
     defaultTicker.addTimeline(defaultTimeline);
     defaultTicker.setFPS(60);
@@ -27969,7 +28696,7 @@
         }, this.theme = new Theme(), this.hooks = {
           beforeRender: new SyncHook(["stage"]),
           afterRender: new SyncHook(["stage"])
-        }, this.global = container.get(Global), this.window = container.get(Window), this.renderService = container.get(RenderService), this.pickerService = container.get(PickerService), this.pluginService = container.get(PluginService), this.layerService = container.get(LayerService), this.pluginService.active(this, params), this.window.create({
+        }, this.global = container.get(VGlobal), this.window = container.get(VWindow), this.renderService = container.get(RenderService), this.pickerService = container.get(PickerService), this.pluginService = container.get(PluginService), this.layerService = container.get(LayerService), this.pluginService.active(this, params), this.window.create({
           width: params.width,
           height: params.height,
           container: params.container,
@@ -27999,7 +28726,7 @@
               return this.viewBox.height();
             }
           }
-        })), params.autoRender && this.enableAutoRender(), !1 === params.disableDirtyBounds && this.enableDirtyBounds(), this.hooks.beforeRender.tap("constructor", this.beforeRender), this.hooks.afterRender.tap("constructor", this.afterRender), this._beforeRender = params.beforeRender, this._afterRender = params.afterRender, this.ticker = params.ticker || defaultTicker, this.supportInteractiveLayer = !1 !== params.interactiveLayer;
+        })), params.autoRender && this.enableAutoRender(), !1 === params.disableDirtyBounds && this.enableDirtyBounds(), params.enableLayout && this.enableLayout(), this.hooks.beforeRender.tap("constructor", this.beforeRender), this.hooks.afterRender.tap("constructor", this.afterRender), this._beforeRender = params.beforeRender, this._afterRender = params.afterRender, this.ticker = params.ticker || defaultTicker, this.supportInteractiveLayer = !1 !== params.interactiveLayer;
       }
       get3dOptions(options) {
         const {
@@ -28112,6 +28839,14 @@
           plugin.deactivate(this.pluginService);
         }));
       }
+      enableLayout() {
+        this._enableLayout || (this._enableLayout = !0, this.pluginService.register(new FlexLayoutPlugin()));
+      }
+      disableLayout() {
+        this._enableLayout && (this._enableLayout = !1, this.pluginService.findPluginsByName("FlexLayoutPlugin").forEach(plugin => {
+          plugin.deactivate(this.pluginService);
+        }));
+      }
       tryUpdateAABBBounds() {
         const viewBox = this._viewBox;
         return this._AABBBounds.setValue(viewBox.x1, viewBox.y1, viewBox.x2, viewBox.y2), this._AABBBounds;
@@ -28256,7 +28991,7 @@
       }
       renderToNewWindow() {
         let fullImage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !0;
-        const window = container.get(Window);
+        const window = container.get(VWindow);
         return fullImage ? window.create({
           width: this.viewWidth,
           height: this.viewHeight,
@@ -28376,7 +29111,7 @@
           const {
             direction: direction
           } = this.attribute;
-          this._prePos = "horizontal" === direction ? e.clientX : e.clientY, "browser" === global$1.env ? (global$1.addEventListener("pointermove", this._onSliderPointerMove), global$1.addEventListener("pointerup", this._onSliderPointerUp)) : (this._slider.addEventListener("pointermove", this._onSliderPointerMove), this._slider.addEventListener("pointerup", this._onSliderPointerUp), this._slider.addEventListener("pointerupoutside", this._onSliderPointerUp));
+          this._prePos = "horizontal" === direction ? e.clientX : e.clientY, "browser" === vglobal.env ? (vglobal.addEventListener("pointermove", this._onSliderPointerMove), vglobal.addEventListener("pointerup", this._onSliderPointerUp)) : (this._slider.addEventListener("pointermove", this._onSliderPointerMove), this._slider.addEventListener("pointerup", this._onSliderPointerUp), this._slider.addEventListener("pointerupoutside", this._onSliderPointerUp));
         }, this._onSliderPointerMove = e => {
           e.stopPropagation();
           const {
@@ -28392,7 +29127,7 @@
             } = this._getSliderRenderBounds();
           "vertical" === direction ? (currentPos = e.clientY, delta = currentPos - this._prePos, currentScrollValue = delta / height) : (currentPos = e.clientX, delta = currentPos - this._prePos, currentScrollValue = delta / width), this.setScrollRange([preScrollRange[0] + currentScrollValue, preScrollRange[1] + currentScrollValue], !0), this._prePos = currentPos;
         }, this._onSliderPointerUp = e => {
-          e.preventDefault(), "browser" === global$1.env ? (global$1.removeEventListener("pointermove", this._onSliderPointerMove), global$1.removeEventListener("pointerup", this._onSliderPointerUp)) : (this._slider.removeEventListener("pointermove", this._onSliderPointerMove), this._slider.removeEventListener("pointerup", this._onSliderPointerUp), this._slider.removeEventListener("pointerupoutside", this._onSliderPointerUp));
+          e.preventDefault(), "browser" === vglobal.env ? (vglobal.removeEventListener("pointermove", this._onSliderPointerMove), vglobal.removeEventListener("pointerup", this._onSliderPointerUp)) : (this._slider.removeEventListener("pointermove", this._onSliderPointerMove), this._slider.removeEventListener("pointerup", this._onSliderPointerUp), this._slider.removeEventListener("pointerupoutside", this._onSliderPointerUp));
         };
       }
       setScrollRange(range) {
@@ -28989,7 +29724,7 @@
 
     var AXIS_ELEMENT_NAME;
     !function (AXIS_ELEMENT_NAME) {
-      AXIS_ELEMENT_NAME.innerView = "inner-view", AXIS_ELEMENT_NAME.axisContainer = "axis-container", AXIS_ELEMENT_NAME.labelContainer = "axis-label-container", AXIS_ELEMENT_NAME.tickContainer = "axis-tick-container", AXIS_ELEMENT_NAME.tick = "axis-tick", AXIS_ELEMENT_NAME.subTick = "axis-sub-tick", AXIS_ELEMENT_NAME.label = "axis-label", AXIS_ELEMENT_NAME.title = "axis-title", AXIS_ELEMENT_NAME.gridContainer = "axis-grid-container", AXIS_ELEMENT_NAME.grid = "axis-grid", AXIS_ELEMENT_NAME.gridRegion = "axis-grid-region", AXIS_ELEMENT_NAME.line = "axis-line", AXIS_ELEMENT_NAME.background = "axis-background";
+      AXIS_ELEMENT_NAME.innerView = "inner-view", AXIS_ELEMENT_NAME.axisContainer = "axis-container", AXIS_ELEMENT_NAME.labelContainer = "axis-label-container", AXIS_ELEMENT_NAME.tickContainer = "axis-tick-container", AXIS_ELEMENT_NAME.tick = "axis-tick", AXIS_ELEMENT_NAME.subTick = "axis-sub-tick", AXIS_ELEMENT_NAME.label = "axis-label", AXIS_ELEMENT_NAME.title = "axis-title", AXIS_ELEMENT_NAME.gridContainer = "axis-grid-container", AXIS_ELEMENT_NAME.grid = "axis-grid", AXIS_ELEMENT_NAME.gridRegion = "axis-grid-region", AXIS_ELEMENT_NAME.line = "axis-line", AXIS_ELEMENT_NAME.background = "axis-background", AXIS_ELEMENT_NAME.axisLabelBackground = "axis-label-background";
     }(AXIS_ELEMENT_NAME || (AXIS_ELEMENT_NAME = {}));
     var AxisStateValue;
     !function (AxisStateValue) {
@@ -29140,8 +29875,7 @@
             tick: tick,
             line: line,
             grid: grid,
-            items: items,
-            panel: panel
+            items: items
           } = this.attribute,
           axisContainer = createGroup({
             x: 0,
@@ -29156,22 +29890,14 @@
               pickable: !1
             });
             labelGroup.name = AXIS_ELEMENT_NAME.labelContainer, labelGroup.id = this._getNodeId("label-container"), this.axisLabelsContainer = labelGroup, axisContainer.add(labelGroup), items.forEach((axisItems, layer) => {
-              const labels = this.renderLabels(labelGroup, axisItems, layer).getChildren();
-              this.handleLabelsOverlap(labels, axisItems, layer, items.length);
+              const layerLabelGroup = this.renderLabels(labelGroup, axisItems, layer),
+                labels = layerLabelGroup.getChildren();
+              this.beforeLabelsOverlap(labels, axisItems, layerLabelGroup, layer, items.length), this.handleLabelsOverlap(labels, axisItems, layerLabelGroup, layer, items.length), this.afterLabelsOverlap(labels, axisItems, layerLabelGroup, layer, items.length);
             });
           }
           (null == grid ? void 0 : grid.visible) && this.renderGrid(container);
         }
-        if ((null == title ? void 0 : title.visible) && this.renderTitle(axisContainer), panel && panel.visible) {
-          const axisContainerBounds = axisContainer.AABBBounds,
-            bgRect = createRect(Object.assign({
-              x: axisContainerBounds.x1,
-              y: axisContainerBounds.y1,
-              width: axisContainerBounds.width(),
-              height: axisContainerBounds.height()
-            }, panel.style));
-          bgRect.name = AXIS_ELEMENT_NAME.background, bgRect.id = this._getNodeId("background"), isEmpty(panel.state) || (bgRect.states = merge$2({}, DEFAULT_STATES$2, panel.state)), axisContainer.insertBefore(bgRect, axisContainer.firstChild);
-        }
+        (null == title ? void 0 : title.visible) && this.renderTitle(axisContainer);
       }
       renderTicks(container) {
         const tickLineItems = this.getTickLineItems(),
@@ -29183,7 +29909,7 @@
         tickLineGroup.name = AXIS_ELEMENT_NAME.tickContainer, tickLineGroup.id = this._getNodeId("tick-container"), container.add(tickLineGroup), tickLineItems.forEach((item, index) => {
           var _a;
           const line = createLine(Object.assign({}, this._getTickLineAttribute("tick", item, index, tickLineItems)));
-          if (line.name = AXIS_ELEMENT_NAME.tick, line.id = this._getNodeId(item.id), isEmpty(null === (_a = this.attribute.tick) || void 0 === _a ? void 0 : _a.state)) line.states = null;else {
+          if (line.name = AXIS_ELEMENT_NAME.tick, line.id = this._getNodeId(item.id), isEmpty(null === (_a = this.attribute.tick) || void 0 === _a ? void 0 : _a.state)) line.states = DEFAULT_STATES$2;else {
             const data = this.data[index],
               tickLineState = merge$2({}, DEFAULT_STATES$2, this.attribute.tick.state);
             Object.keys(tickLineState).forEach(key => {
@@ -29199,7 +29925,7 @@
           const subTickLineItems = this.getSubTickLineItems();
           subTickLineItems.length && subTickLineItems.forEach((item, index) => {
             const line = createLine(Object.assign({}, this._getTickLineAttribute("subTick", item, index, tickLineItems)));
-            if (line.name = AXIS_ELEMENT_NAME.subTick, line.id = this._getNodeId(`${index}`), isEmpty(subTick.state)) line.states = null;else {
+            if (line.name = AXIS_ELEMENT_NAME.subTick, line.id = this._getNodeId(`${index}`), isEmpty(subTick.state)) line.states = DEFAULT_STATES$2;else {
               const subTickLineState = merge$2({}, DEFAULT_STATES$2, subTick.state);
               Object.keys(subTickLineState).forEach(key => {
                 isFunction(subTickLineState[key]) && (subTickLineState[key] = subTickLineState[key](item.value, index, item, tickLineItems));
@@ -29229,7 +29955,7 @@
           var _a, _b;
           const labelStyle = this._getLabelAttribute(item, index, data, layer),
             text = createText(labelStyle);
-          if (text.name = AXIS_ELEMENT_NAME.label, text.id = this._getNodeId(`layer${layer}-label-${item.id}`), isEmpty(null === (_a = this.attribute.label) || void 0 === _a ? void 0 : _a.state)) text.states = null;else {
+          if (text.name = AXIS_ELEMENT_NAME.label, text.id = this._getNodeId(`layer${layer}-label-${item.id}`), isEmpty(null === (_a = this.attribute.label) || void 0 === _a ? void 0 : _a.state)) text.states = DEFAULT_STATES$2;else {
             const labelState = merge$2({}, DEFAULT_STATES$2, this.attribute.label.state);
             Object.keys(labelState).forEach(key => {
               isFunction(labelState[key]) && (labelState[key] = labelState[key](item, index, data, layer));
@@ -29378,10 +30104,9 @@
         let {
           style: textStyle
         } = tagAttributes;
-        return textStyle = isFunction(textStyle) ? merge$2({}, DEFAULT_AXIS_THEME.label.style, textStyle(tickDatum, index, tickData, layer)) : textStyle, textStyle = merge$2({
-          textAlign: this.getTextAlign(vector),
-          textBaseline: this.getTextBaseline(vector, inside)
-        }, textStyle), isFunction(textStyle.text) && (textStyle.text = textStyle.text({
+        textStyle = isFunction(textStyle) ? merge$2({}, DEFAULT_AXIS_THEME.label.style, textStyle(tickDatum, index, tickData, layer)) : textStyle;
+        const labelAlign = this.getLabelAlign(vector, inside, textStyle.angle);
+        return textStyle = merge$2(labelAlign, textStyle), isFunction(textStyle.text) && (textStyle.text = textStyle.text({
           label: tickDatum.label,
           value: tickDatum.rawValue,
           index: tickDatum.index,
@@ -29509,37 +30234,49 @@
         bounds.x1 += deltaX, bounds.x2 += deltaX, bounds.y1 += deltaY, bounds.y2 += deltaY, bounds.centerX += deltaX, bounds.centerY += deltaY, item.rotatedBounds = bounds;
       });
     }
+    function clampAngle() {
+      let angle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      if (angle < 0) for (; angle < 0;) angle += 2 * Math.PI;
+      if (angle > 0) for (; angle >= 2 * Math.PI;) angle -= 2 * Math.PI;
+      return angle;
+    }
     function rotateYAxis(orient, items) {
-      let align = ["right", "right", "center", "left", "center", "left", "center", "right", "right"],
-        baseline = ["middle", "middle", "top", "top", "middle", "middle", "bottom", "bottom", "middle"];
-      "right" === orient && (align = ["left", "right", "right", "right", "left", "left", "left", "left", "right"], baseline = ["middle", "bottom", "middle", "top", "top", "top", "middle", "bottom", "bottom"]), items.forEach((item, i) => {
-        let angle = item.attribute.angle || 0;
-        if (angle < 0) for (; angle < 0;) angle += 2 * Math.PI;
-        if (angle > 0) for (; angle >= 2 * Math.PI;) angle -= 2 * Math.PI;
-        const step = angle / (.5 * Math.PI);
-        let index;
-        index = step === Math.floor(step) ? 2 * Math.floor(step) : 2 * Math.floor(step) + 1, item.setAttributes({
-          textAlign: align[index],
-          textBaseline: baseline[index],
-          angle: angle
-        });
+      items.forEach((item, i) => {
+        item.setAttributes(Object.assign(Object.assign({}, getYAxisLabelAlign(orient, item.attribute.angle)), {
+          angle: clampAngle(item.attribute.angle)
+        }));
       });
     }
     function rotateXAxis(orient, items) {
+      items.forEach(item => {
+        item.setAttributes(Object.assign(Object.assign({}, getXAxisLabelAlign(orient, item.attribute.angle)), {
+          angle: clampAngle(item.attribute.angle)
+        }));
+      });
+    }
+    function getXAxisLabelAlign(orient) {
+      let angle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
       let align = ["center", "left", "left", "left", "center", "right", "right", "right", "left"],
         baseline = ["top", "top", "middle", "bottom", "bottom", "bottom", "middle", "top", "top"];
-      "top" === orient && (align = ["center", "right", "right", "right", "center", "left", "left", "left", "right"], baseline = ["bottom", "bottom", "middle", "top", "top", "top", "middle", "bottom", "bottom"]), items.forEach(item => {
-        let angle = item.attribute.angle || 0;
-        if (angle < 0) for (; angle < 0;) angle += 2 * Math.PI;
-        if (angle > 0) for (; angle >= 2 * Math.PI;) angle -= 2 * Math.PI;
-        const step = angle / (.5 * Math.PI);
-        let index;
-        index = step === Math.floor(step) ? 2 * Math.floor(step) : 2 * Math.floor(step) + 1, item.setAttributes({
-          textAlign: align[index],
-          textBaseline: baseline[index],
-          angle: angle
-        });
-      });
+      "top" === orient && (align = ["center", "right", "right", "right", "center", "left", "left", "left", "right"], baseline = ["bottom", "bottom", "middle", "top", "top", "top", "middle", "bottom", "bottom"]);
+      const step = (angle = clampAngle(angle)) / (.5 * Math.PI);
+      let index;
+      return index = step === Math.floor(step) ? 2 * Math.floor(step) : 2 * Math.floor(step) + 1, {
+        textAlign: align[index],
+        textBaseline: baseline[index]
+      };
+    }
+    function getYAxisLabelAlign(orient) {
+      let angle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+      let align = ["right", "right", "center", "left", "center", "left", "center", "right", "right"],
+        baseline = ["middle", "middle", "top", "top", "middle", "middle", "bottom", "bottom", "middle"];
+      "right" === orient && (align = ["left", "right", "right", "right", "left", "left", "left", "left", "right"], baseline = ["middle", "bottom", "middle", "top", "top", "top", "middle", "bottom", "bottom"]);
+      const step = (angle = clampAngle(angle)) / (.5 * Math.PI);
+      let index;
+      return index = step === Math.floor(step) ? 2 * Math.floor(step) : 2 * Math.floor(step) + 1, {
+        textAlign: align[index],
+        textBaseline: baseline[index]
+      };
     }
 
     function autoLimit(labels, config) {
@@ -29559,6 +30296,60 @@
       });
     }
 
+    function alignAxisLabels(labels, start, containerSize, orient, align) {
+      if ("right" === orient || "left" === orient) {
+        if ("left" === align) {
+          const flag = "right" === orient ? 0 : -1;
+          labels.forEach(label => {
+            label.setAttributes({
+              x: start + containerSize * flag,
+              textAlign: "left"
+            });
+          });
+        } else if ("right" === align) {
+          const flag = "right" === orient ? 1 : 0;
+          labels.forEach(label => {
+            label.setAttributes({
+              x: start + containerSize * flag,
+              textAlign: "right"
+            });
+          });
+        } else if ("center" === align) {
+          const flag = "right" === orient ? 1 : -1;
+          labels.forEach(label => {
+            label.setAttributes({
+              x: start + .5 * containerSize * flag,
+              textAlign: "center"
+            });
+          });
+        }
+      } else if ("bottom" === orient || "top" === orient) if ("top" === align) {
+        const flag = "bottom" === orient ? 0 : -1;
+        labels.forEach(label => {
+          label.setAttributes({
+            y: start + containerSize * flag,
+            textBaseline: "top"
+          });
+        });
+      } else if ("bottom" === align) {
+        const flag = "bottom" === orient ? 1 : 0;
+        labels.forEach(label => {
+          label.setAttributes({
+            y: start + containerSize * flag,
+            textBaseline: "bottom"
+          });
+        });
+      } else if ("middle" === align) {
+        const flag = "bottom" === orient ? 1 : -1;
+        labels.forEach(label => {
+          label.setAttributes({
+            y: start + .5 * containerSize * flag,
+            textBaseline: "middle"
+          });
+        });
+      }
+    }
+
     var __rest$1 = undefined && undefined.__rest || function (s, e) {
       var t = {};
       for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
@@ -29581,6 +30372,24 @@
       constructor(attributes, mode) {
         super(merge$2({}, LineAxis.defaultAttributes, attributes), mode), "3d" === mode && this.setMode(mode);
       }
+      _renderInner(container) {
+        var _a;
+        super._renderInner(container);
+        const {
+          panel: panel
+        } = this.attribute;
+        if (panel && panel.visible) {
+          const axisContainer = this.axisContainer,
+            axisContainerBounds = axisContainer.AABBBounds,
+            bgRect = createRect(Object.assign({
+              x: axisContainerBounds.x1,
+              y: axisContainerBounds.y1,
+              width: axisContainerBounds.width(),
+              height: axisContainerBounds.height()
+            }, panel.style));
+          bgRect.name = AXIS_ELEMENT_NAME.background, bgRect.id = this._getNodeId("background"), bgRect.states = merge$2({}, DEFAULT_STATES$1, null !== (_a = panel.state) && void 0 !== _a ? _a : {}), axisContainer.insertBefore(bgRect, axisContainer.firstChild);
+        }
+      }
       renderLine(container) {
         const {
             start: start,
@@ -29706,10 +30515,10 @@
             textAlign: textAlign,
             textBaseline: textBaseline
           }, textStyle),
-          state: isEmpty(state) ? null : {
-            text: state.text,
-            shape: state.shape,
-            panel: state.background
+          state: {
+            text: merge$2({}, DEFAULT_STATES$1, null == state ? void 0 : state.text),
+            shape: merge$2({}, DEFAULT_STATES$1, null == state ? void 0 : state.shape),
+            panel: merge$2({}, DEFAULT_STATES$1, null == state ? void 0 : state.background)
           }
         });
         return attrs.angle = angle, shape && shape.visible && (attrs.shape = Object.assign({
@@ -29821,34 +30630,36 @@
           factor = (inside ? 1 : -1) * verticalFactor;
         return isNumberClose(vector[1], 0) ? base = !isNumberClose(vector[0], 0) || Object.is(vector[0], -0) || Object.is(vector[1], -0) ? "middle" : 1 === factor ? "bottom" : "top" : vector[1] > 0 ? base = "top" : vector[1] < 0 && (base = "bottom"), base;
       }
-      handleLabelsOverlap(labelShapes, labelData, layer, layerCount) {
-        var _a, _b, _c;
+      getLabelAlign(vector, inside, angle) {
+        const orient = this.attribute.orient;
+        if (isValidNumber(angle)) {
+          if ("top" === orient || "bottom" === orient) return getXAxisLabelAlign(orient, angle);
+          if ("left" === orient || "right" === orient) return getYAxisLabelAlign(orient, angle);
+        }
+        return {
+          textAlign: this.getTextAlign(vector),
+          textBaseline: this.getTextBaseline(vector, inside)
+        };
+      }
+      beforeLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {}
+      handleLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
         if (isEmpty(labelShapes)) return;
         const {
             verticalLimitSize: verticalLimitSize,
             label: label,
-            title: title,
-            line: line,
-            tick: tick,
             orient: orient
           } = this.attribute,
-          labelSpace = null !== (_a = label.space) && void 0 !== _a ? _a : 4;
-        let limitLength = verticalLimitSize,
-          titleHeight = 0,
-          titleSpacing = 0;
-        const axisLineWidth = (null == line ? void 0 : line.visible) ? null !== (_b = line.style.lineWidth) && void 0 !== _b ? _b : 1 : 0,
-          tickLength = (null == tick ? void 0 : tick.visible) ? null !== (_c = tick.length) && void 0 !== _c ? _c : 4 : 0;
-        (null == title ? void 0 : title.visible) && (titleHeight = measureTextSize(title.text, title.textStyle).height, titleSpacing = title.space), limitLength && (limitLength = (limitLength - labelSpace - titleSpacing - titleHeight - axisLineWidth - tickLength) / layerCount);
-        const {
-          layoutFunc: layoutFunc,
-          autoRotate: autoRotate$1,
-          autoRotateAngle: autoRotateAngle,
-          autoLimit: autoLimit$1,
-          limitEllipsis: limitEllipsis,
-          autoHide: autoHide$1,
-          autoHideMethod: autoHideMethod,
-          autoHideSeparation: autoHideSeparation
-        } = label;
+          limitLength = this._getAxisLabelLimitLength(verticalLimitSize, layerCount),
+          {
+            layoutFunc: layoutFunc,
+            autoRotate: autoRotate$1,
+            autoRotateAngle: autoRotateAngle,
+            autoLimit: autoLimit$1,
+            limitEllipsis: limitEllipsis,
+            autoHide: autoHide$1,
+            autoHideMethod: autoHideMethod,
+            autoHideSeparation: autoHideSeparation
+          } = label;
         isFunction(layoutFunc) ? layoutFunc(labelShapes, labelData, layer, this) : (autoRotate$1 && autoRotate(labelShapes, {
           labelRotateAngle: autoRotateAngle,
           orient: orient
@@ -29862,6 +30673,56 @@
           separation: autoHideSeparation
         }));
       }
+      afterLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
+        const {
+            verticalLimitSize: verticalLimitSize,
+            orient: orient
+          } = this.attribute,
+          isHorizontal = "bottom" === orient || "top" === orient,
+          axisLabelContainerBounds = labelContainer.AABBBounds;
+        let axisLabelContainerSize = isHorizontal ? axisLabelContainerBounds.height() : axisLabelContainerBounds.width();
+        const {
+          verticalMinSize: verticalMinSize
+        } = this.attribute;
+        if (isValidNumber(verticalMinSize) && (!isValidNumber(verticalLimitSize) || verticalMinSize <= verticalLimitSize)) {
+          const minSize = this._getAxisLabelLimitLength(verticalMinSize, layerCount);
+          let x, y;
+          axisLabelContainerSize = Math.max(axisLabelContainerSize, minSize), "left" === orient ? (x = axisLabelContainerBounds.x2 - axisLabelContainerSize, y = axisLabelContainerBounds.y1) : "right" === orient ? (x = axisLabelContainerBounds.x1, y = axisLabelContainerBounds.y1) : "top" === orient ? (x = axisLabelContainerBounds.x1, y = axisLabelContainerBounds.y2 - axisLabelContainerSize) : "bottom" === orient && (x = axisLabelContainerBounds.x1, y = axisLabelContainerBounds.y1);
+          const bgRect = createRect({
+            x: x,
+            y: y,
+            width: isHorizontal ? axisLabelContainerBounds.width() : axisLabelContainerSize,
+            height: isHorizontal ? axisLabelContainerSize : axisLabelContainerBounds.height(),
+            pickable: !1
+          });
+          bgRect.name = AXIS_ELEMENT_NAME.axisLabelBackground, bgRect.id = this._getNodeId("axis-label-background"), labelContainer.insertBefore(bgRect, labelContainer.firstChild);
+        }
+        if (isValid(this.attribute.label.containerAlign)) {
+          let start;
+          "left" === orient ? start = axisLabelContainerBounds.x2 : "right" === orient ? start = axisLabelContainerBounds.x1 : "top" === orient ? start = axisLabelContainerBounds.y2 : "bottom" === orient && (start = axisLabelContainerBounds.y1), alignAxisLabels(labelShapes, start, axisLabelContainerSize, orient, this.attribute.label.containerAlign);
+        }
+      }
+      _getAxisLabelLimitLength(limitSize, layerCount) {
+        var _a, _b, _c;
+        const {
+            label: label,
+            title: title,
+            line: line,
+            tick: tick
+          } = this.attribute,
+          labelSpace = null !== (_a = label.space) && void 0 !== _a ? _a : 4;
+        let limitLength = limitSize,
+          titleHeight = 0,
+          titleSpacing = 0;
+        const axisLineWidth = (null == line ? void 0 : line.visible) ? null !== (_b = line.style.lineWidth) && void 0 !== _b ? _b : 1 : 0,
+          tickLength = (null == tick ? void 0 : tick.visible) ? null !== (_c = tick.length) && void 0 !== _c ? _c : 4 : 0;
+        if (null == title ? void 0 : title.visible) {
+          titleHeight = measureTextSize(title.text, title.textStyle).height;
+          const padding = normalizePadding(title.padding);
+          titleSpacing = title.space + padding[0] + padding[2];
+        }
+        return limitLength && (limitLength = (limitLength - labelSpace - titleSpacing - titleHeight - axisLineWidth - tickLength) / layerCount), limitLength;
+      }
     }
     LineAxis.defaultAttributes = DEFAULT_AXIS_THEME;
 
@@ -30015,7 +30876,7 @@
     }(LegendStateValue || (LegendStateValue = {}));
     var LegendEvent;
     !function (LegendEvent) {
-      LegendEvent.legendItemHover = "legendItemHover", LegendEvent.legendItemUnHover = "legendItemUnHover", LegendEvent.legendItemClick = "legendItemClick";
+      LegendEvent.legendItemHover = "legendItemHover", LegendEvent.legendItemUnHover = "legendItemUnHover", LegendEvent.legendItemClick = "legendItemClick", LegendEvent.legendItemAttributeUpdate = "legendItemAttributeUpdate";
     }(LegendEvent || (LegendEvent = {}));
     var LEGEND_ELEMENT_NAME;
     !function (LEGEND_ELEMENT_NAME) {
@@ -30114,11 +30975,12 @@
           const target = e.target;
           if (null === (_a = null == target ? void 0 : target.name) || void 0 === _a ? void 0 : _a.startsWith(LEGEND_ELEMENT_NAME.item)) {
             const legendItem = target.delegate;
-            legendItem.removeState(LegendStateValue.unSelectedHover), legendItem.removeState(LegendStateValue.selectedHover), legendItem.getChildren()[0].getChildren().forEach(child => {
-              child.removeState(LegendStateValue.unSelectedHover), child.removeState(LegendStateValue.selectedHover);
+            let attributeUpdate = !1;
+            (legendItem.hasState(LegendStateValue.unSelectedHover) || legendItem.hasState(LegendStateValue.selectedHover)) && (attributeUpdate = !0), legendItem.removeState(LegendStateValue.unSelectedHover), legendItem.removeState(LegendStateValue.selectedHover), legendItem.getChildren()[0].getChildren().forEach(child => {
+              attributeUpdate || !child.hasState(LegendStateValue.unSelectedHover) && !child.hasState(LegendStateValue.selectedHover) || (attributeUpdate = !0), child.removeState(LegendStateValue.unSelectedHover), child.removeState(LegendStateValue.selectedHover);
             });
             const focusButton = legendItem.getChildren()[0].find(node => node.name === LEGEND_ELEMENT_NAME.focus, !1);
-            focusButton && focusButton.setAttribute("visible", !1), this._dispatchEvent(LegendEvent.legendItemUnHover, legendItem);
+            focusButton && focusButton.setAttribute("visible", !1), attributeUpdate && this._dispatchEvent(LegendEvent.legendItemAttributeUpdate, legendItem), this._dispatchEvent(LegendEvent.legendItemUnHover, legendItem);
           }
         }, this._onClick = e => {
           var _a, _b, _c, _d, _e;
@@ -30306,10 +31168,18 @@
             }, null == valueAttr ? void 0 : valueAttr.style), {
               text: valueAttr.formatMethod ? valueAttr.formatMethod(value, item, index) : value
             }));
-          this._appendDataToShape(valueShape, LEGEND_ELEMENT_NAME.itemValue, item, itemGroup, null == valueAttr ? void 0 : valueAttr.state), valueShape.addState(isSelected ? LegendStateValue.selected : LegendStateValue.unSelected), this._itemWidthByUser && (valueShape.setAttribute("maxLineWidth", this._itemWidthByUser - parsedPadding[1] - parsedPadding[3] - shapeSize - shapeSpace - labelShape.AABBBounds.width() - labelSpace - focusSpace - valueSpace), valueAttr.alignRight && valueShape.setAttributes({
-            textAlign: "right",
-            x: this._itemWidthByUser - shapeSize / 2 - parsedPadding[1] - parsedPadding[3] - focusSpace - valueSpace
-          })), focusStartX = valueShape.AABBBounds.x2 + valueSpace, innerGroup.add(valueShape);
+          if (this._appendDataToShape(valueShape, LEGEND_ELEMENT_NAME.itemValue, item, itemGroup, null == valueAttr ? void 0 : valueAttr.state), valueShape.addState(isSelected ? LegendStateValue.selected : LegendStateValue.unSelected), this._itemWidthByUser) {
+            const layoutWidth = this._itemWidthByUser - parsedPadding[1] - parsedPadding[3] - shapeSize - shapeSpace - labelSpace - focusSpace - valueSpace,
+              valueBounds = valueShape.AABBBounds,
+              labelBounds = labelShape.AABBBounds,
+              valueWidth = valueBounds.width(),
+              labelWidth = labelBounds.width();
+            labelWidth > layoutWidth ? (layoutWidth - valueWidth) / labelWidth > .4 ? labelShape.setAttribute("maxLineWidth", layoutWidth - valueWidth) : (valueShape.setAttribute("maxLineWidth", .5 * layoutWidth), labelShape.setAttribute("maxLineWidth", .5 * layoutWidth)) : valueShape.setAttribute("maxLineWidth", layoutWidth - labelWidth), valueAttr.alignRight && valueShape.setAttributes({
+              textAlign: "right",
+              x: this._itemWidthByUser - shapeSize / 2 - parsedPadding[1] - parsedPadding[3] - focusSpace - valueSpace
+            });
+          }
+          focusStartX = valueShape.AABBBounds.x2 + valueSpace, innerGroup.add(valueShape);
         } else this._itemWidthByUser && labelShape.setAttribute("maxLineWidth", this._itemWidthByUser - parsedPadding[1] - parsedPadding[3] - shapeSize - shapeSpace - focusSpace);
         focusShape && (focusShape.setAttribute("x", focusStartX), innerGroup.add(focusShape));
         const innerGroupBounds = innerGroup.AABBBounds,
@@ -30414,18 +31284,20 @@
       }
       _setLegendItemState(legendItem, stateName) {
         let keepCurrentStates = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !0;
-        legendItem.addState(stateName, keepCurrentStates), legendItem.getChildren()[0].getChildren().forEach(child => {
-          child.name !== LEGEND_ELEMENT_NAME.focus && child.addState(stateName, keepCurrentStates);
-        });
+        let attributeUpdate = !1;
+        legendItem.hasState(stateName) || (attributeUpdate = !0), legendItem.addState(stateName, keepCurrentStates), legendItem.getChildren()[0].getChildren().forEach(child => {
+          child.name !== LEGEND_ELEMENT_NAME.focus && (attributeUpdate || child.hasState(stateName) || (attributeUpdate = !0), child.addState(stateName, keepCurrentStates));
+        }), attributeUpdate && this._dispatchEvent(LegendEvent.legendItemAttributeUpdate, legendItem);
       }
       _removeLegendItemState(legendItem, stateNames) {
+        let attributeUpdate = !1;
         stateNames.forEach(name => {
-          legendItem.removeState(name);
+          !attributeUpdate && legendItem.hasState(name) && (attributeUpdate = !0), legendItem.removeState(name);
         }), legendItem.getChildren()[0].getChildren().forEach(child => {
           child.name !== LEGEND_ELEMENT_NAME.focus && stateNames.forEach(name => {
-            child.removeState(name);
+            !attributeUpdate && child.hasState(name) && (attributeUpdate = !0), child.removeState(name);
           });
-        });
+        }), attributeUpdate && this._dispatchEvent(LegendEvent.legendItemAttributeUpdate, legendItem);
       }
       _getSelectedLegends() {
         var _a;
@@ -30589,12 +31461,6 @@
         }
         return range;
       }
-      calculateVisibleDomain(range) {
-        if (this._rangeFactor && 2 === range.length) {
-          return [this.invert(range[0]), this.invert(range[1])];
-        }
-        return this.domain();
-      }
       rangeFactor(_, slience) {
         return _ ? (2 === _.length && _.every(r => r >= 0 && r <= 1) && (this._wholeRange = null, this._rangeFactor = _), this) : this._rangeFactor;
       }
@@ -30618,10 +31484,16 @@
       clone() {
         return new OrdinalScale().domain(this._domain).range(this._ordinalRange).unknown(this._unknown);
       }
+      calculateVisibleDomain(range) {
+        if (this._rangeFactor && 2 === range.length) {
+          return [this.invert(range[0]), this.invert(range[1])];
+        }
+        return this._domain;
+      }
       scale(d) {
-        const special = this._getSpecifiedValue(d);
-        if (!isNil(special)) return special;
-        const key = `${d}`;
+        const key = `${d}`,
+          special = this._getSpecifiedValue(key);
+        if (void 0 !== special) return special;
         let i = this._index.get(key);
         if (!i) {
           if (this._unknown !== implicit) return this._unknown;
@@ -30728,7 +31600,7 @@
         return super.range(reverse ? values.reverse() : values), this;
       }
       calculateVisibleDomain(range) {
-        const domain = this.domain();
+        const domain = this._domain;
         if (this._rangeFactor && domain.length) {
           const d0 = this._getInvertIndex(range[0]),
             d1 = this._getInvertIndex(range[1]);
@@ -30748,7 +31620,7 @@
       ticks() {
         let count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
         const d = this.calculateVisibleDomain(this._range);
-        if (-1 === count) return d;
+        if (-1 === count) return d.slice();
         return ticks$2(0, d.length - 1, count, !1).map(i => d[i]);
       }
       tickData() {
@@ -30839,14 +31711,25 @@
         let untransformer = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : identity$2;
         super(), this._unknown = void 0, this.transformer = transformer, this.untransformer = untransformer, this._forceAlign = !0, this._domain = [0, 1], this._range = [0, 1], this._clamp = identity$2, this._piecewise = bimap, this._interpolate = interpolate;
       }
+      calculateVisibleDomain(range) {
+        var _a;
+        if (this._rangeFactor && 2 === range.length) {
+          return [this.invert(range[0]), this.invert(range[1])];
+        }
+        return null !== (_a = this._niceDomain) && void 0 !== _a ? _a : this._domain;
+      }
       scale(x) {
-        return x = Number(x), Number.isNaN(x) ? this._unknown : (this._output || (this._output = this._piecewise(this._domain.map(this.transformer), this._calculateRange(this._range), this._interpolate)), this._output(this.transformer(this._clamp(x))));
+        var _a;
+        return x = Number(x), Number.isNaN(x) || this._domainValidator && !this._domainValidator(x) ? this._unknown : (this._output || (this._output = this._piecewise((null !== (_a = this._niceDomain) && void 0 !== _a ? _a : this._domain).map(this.transformer), this._calculateRange(this._range), this._interpolate)), this._output(this.transformer(this._clamp(x))));
       }
       invert(y) {
-        return this._input || (this._input = this._piecewise(this._calculateRange(this._range), this._domain.map(this.transformer), interpolateNumber)), this._clamp(this.untransformer(this._input(y)));
+        var _a;
+        return this._input || (this._input = this._piecewise(this._calculateRange(this._range), (null !== (_a = this._niceDomain) && void 0 !== _a ? _a : this._domain).map(this.transformer), interpolateNumber)), this._clamp(this.untransformer(this._input(y)));
       }
       domain(_, slience) {
-        if (!_) return this._domain.slice();
+        var _a;
+        if (!_) return (null !== (_a = this._niceDomain) && void 0 !== _a ? _a : this._domain).slice();
+        this._domainValidator = null, this._niceType = null, this._niceDomain = null;
         const nextDomain = Array.from(_, toNumber);
         return this._domain = nextDomain, this.rescale(slience);
       }
@@ -30860,18 +31743,20 @@
         return this._range = nextRange, this._interpolate = interpolateNumberRound, this.rescale(slience);
       }
       rescale(slience) {
+        var _a;
         if (slience) return this;
-        const domainLength = this._domain.length,
+        const domain = null !== (_a = this._niceDomain) && void 0 !== _a ? _a : this._domain,
+          domainLength = domain.length,
           rangeLength = this._range.length;
         let n = Math.min(domainLength, rangeLength);
         if (domainLength && domainLength < rangeLength && this._forceAlign) {
           const deltaStep = rangeLength - domainLength + 1,
-            last = this._domain[domainLength - 1],
-            delta = domainLength >= 2 ? (last - this._domain[domainLength - 2]) / deltaStep : 0;
-          for (let i = 1; i <= deltaStep; i++) this._domain[domainLength - 2 + i] = last - delta * (deltaStep - i);
+            last = domain[domainLength - 1],
+            delta = domainLength >= 2 ? (last - domain[domainLength - 2]) / deltaStep : 0;
+          for (let i = 1; i <= deltaStep; i++) domain[domainLength - 2 + i] = last - delta * (deltaStep - i);
           n = rangeLength;
         }
-        return void 0 === this._clamp && (this._clamp = clamper(this._domain[0], this._domain[n - 1])), this._piecewise = n > 2 ? polymap : bimap, this._output = this._input = null, this._wholeRange = null, this;
+        return void 0 === this._clamp && (this._clamp = clamper(domain[0], domain[n - 1])), this._piecewise = n > 2 ? polymap : bimap, this._output = this._input = null, this._wholeRange = null, this;
       }
       clamp(_, f, slience) {
         return arguments.length ? (this._clamp = f || (_ ? void 0 : identity$2), this.rescale(slience)) : this._clamp !== identity$2;
@@ -30901,20 +31786,34 @@
 
     const e10$1 = Math.sqrt(50),
       e5$1 = Math.sqrt(10),
-      e2$1 = Math.sqrt(2);
-    function ticks$1(start, stop, count) {
+      e2$1 = Math.sqrt(2),
+      niceNumbers = [1, 2, 5, 10];
+    const calculateTicksOfSingleValue = (value, tickCount, noDecimals) => {
+      let step = 1,
+        start = value;
+      const middleIndex = Math.floor((tickCount - 1) / 2),
+        absVal = Math.abs(value);
+      return value >= 0 && value <= Number.MIN_VALUE ? start = 0 : value < 0 && value >= -Number.MIN_VALUE ? start = -(tickCount - 1) : !noDecimals && absVal < 1 ? step = getNickStep(absVal).step : (noDecimals || absVal > 1) && (start = Math.floor(value) - middleIndex * step), step > 0 ? (value > 0 ? start = Math.max(start, 0) : value < 0 && (start = Math.min(start, -(tickCount - 1) * step)), range(0, tickCount).map(index => start + index * step)) : value > 0 ? calculateTicksByStep(0, -(tickCount - 1) / step, step) : calculateTicksByStep((tickCount - 1) / step, 0, step);
+    };
+    const d3Ticks = memoize((start, stop, count, options) => {
       let reverse,
         n,
         ticks,
         step,
         i = -1;
-      if (count = +count, (start = +start) === (stop = +stop)) return [];
+      if (count = +count, (start = +start) === (stop = +stop)) return [start];
       if (Math.abs(start - stop) <= Number.MIN_VALUE && count > 0) return [start];
-      if ((reverse = stop < start) && (n = start, start = stop, stop = n), step = tickIncrement(start, stop, count), !isFinite(step)) return [];
+      if ((reverse = stop < start) && (n = start, start = stop, stop = n), step = tickIncrement(start, stop, count).step, !isFinite(step)) return [];
       if (step > 0) {
         let r0 = Math.round(start / step),
           r1 = Math.round(stop / step);
         for (r0 * step < start && ++r0, r1 * step > stop && --r1, ticks = new Array(n = r1 - r0 + 1); ++i < n;) ticks[i] = (r0 + i) * step;
+      } else if (step < 0 && (null == options ? void 0 : options.noDecimals)) {
+        step = 1;
+        const r0 = Math.ceil(start),
+          r1 = Math.floor(stop);
+        if (!(r0 <= r1)) return [];
+        for (ticks = new Array(n = r1 - r0 + 1); ++i < n;) ticks[i] = r0 + i;
       } else {
         step = -step;
         let r0 = Math.round(start * step),
@@ -30922,13 +31821,79 @@
         for (r0 / step < start && ++r0, r1 / step > stop && --r1, ticks = new Array(n = r1 - r0 + 1); ++i < n;) ticks[i] = (r0 + i) / step;
       }
       return reverse && ticks.reverse(), ticks;
-    }
-    function tickIncrement(start, stop, count) {
-      const step = (stop - start) / Math.max(0, count),
-        power = Math.floor(Math.log(step) / Math.LN10),
+    });
+    const calculateTicksByStep = (start, stop, step) => {
+      let n,
+        ticks,
+        i = -1;
+      if (step > 0) {
+        let r0 = Math.floor(start / step),
+          r1 = Math.ceil(stop / step);
+        for ((r0 + 1) * step < start && ++r0, (r1 - 1) * step > stop && --r1, ticks = new Array(n = r1 - r0 + 1); ++i < n;) ticks[i] = (r0 + i) * step;
+      } else {
+        step = -step;
+        let r0 = Math.floor(start * step),
+          r1 = Math.ceil(stop * step);
+        for ((r0 + 1) / step < start && ++r0, (r1 - 1) / step > stop && --r1, ticks = new Array(n = r1 - r0 + 1); ++i < n;) ticks[i] = (r0 + i) / step;
+      }
+      return ticks;
+    };
+    const appendTicksToCount = (ticks, count, step) => {
+      let n;
+      const firstTick = ticks[0],
+        lastTick = ticks[ticks.length - 1],
+        appendCount = count - ticks.length;
+      if (lastTick <= 0) {
+        const headTicks = [];
+        for (n = appendCount; n >= 1; n--) headTicks.push(firstTick - n * step);
+        return headTicks.concat(ticks);
+      }
+      if (firstTick >= 0) {
+        for (n = 1; n <= appendCount; n++) ticks.push(lastTick + n * step);
+        return ticks;
+      }
+      let headTicks = [];
+      const tailTicks = [];
+      for (n = 1; n <= appendCount; n++) n % 2 == 0 ? headTicks = [firstTick - Math.floor(n / 2) * step].concat(headTicks) : tailTicks.push(lastTick + Math.ceil(n / 2) * step);
+      return headTicks.concat(ticks).concat(tailTicks);
+    };
+    const ticks$1 = memoize((start, stop, count, options) => {
+      let reverse, ticks, n;
+      if (count = +count, (start = +start) === (stop = +stop)) return calculateTicksOfSingleValue(start, count, null == options ? void 0 : options.noDecimals);
+      if (Math.abs(start - stop) <= Number.MIN_VALUE && count > 0) return calculateTicksOfSingleValue(start, count, null == options ? void 0 : options.noDecimals);
+      (reverse = stop < start) && (n = start, start = stop, stop = n);
+      const stepRes = tickIncrement(start, stop, count);
+      let step = stepRes.step;
+      if (!isFinite(step)) return [];
+      if (step > 0) {
+        let cur = 1;
+        const {
+            power: power,
+            gap: gap
+          } = stepRes,
+          delatStep = 10 === gap ? 2 * 10 ** power : 1 * 10 ** power;
+        for (; cur <= 5 && (ticks = calculateTicksByStep(start, stop, step), ticks.length > count + 1) && count > 2;) step += delatStep, cur += 1;
+        count > 2 && ticks.length < count - 1 && (ticks = appendTicksToCount(ticks, count, step));
+      } else (null == options ? void 0 : options.noDecimals) && step < 0 && (step = 1), ticks = calculateTicksByStep(start, stop, step);
+      return reverse && ticks.reverse(), ticks;
+    });
+    const getNickStep = step => {
+      const power = Math.floor(Math.log(step) / Math.LN10),
         error = step / 10 ** power;
-      let gap = 1;
-      return error >= e10$1 ? gap = 10 : error >= e5$1 ? gap = 5 : error >= e2$1 && (gap = 2), power >= 0 ? gap * 10 ** power : -(10 ** -power) / gap;
+      let gap = niceNumbers[0];
+      return error >= e10$1 ? gap = niceNumbers[3] : error >= e5$1 ? gap = niceNumbers[2] : error >= e2$1 && (gap = niceNumbers[1]), power >= 0 ? {
+        step: gap * 10 ** power,
+        gap: gap,
+        power: power
+      } : {
+        step: -(10 ** -power) / gap,
+        gap: gap,
+        power: power
+      };
+    };
+    function tickIncrement(start, stop, count) {
+      const step = (stop - start) / Math.max(0, count);
+      return getNickStep(step);
     }
     function forceTicks(start, stop, count) {
       let step;
@@ -30961,7 +31926,7 @@
         stop = d[i1],
         maxIter = 10;
       for (stop < start && (step = start, start = stop, stop = step, step = i0, i0 = i1, i1 = step); maxIter-- > 0;) {
-        if (step = tickIncrement(start, stop, count), step === prestep) return d[i0] = start, d[i1] = stop, d;
+        if (step = tickIncrement(start, stop, count).step, step === prestep) return d[i0] = start, d[i1] = stop, d;
         if (step > 0) start = Math.floor(start / step) * step, stop = Math.ceil(stop / step) * step;else {
           if (!(step < 0)) break;
           start = Math.ceil(start * step) / step, stop = Math.floor(stop * step) / step;
@@ -30969,6 +31934,20 @@
         prestep = step;
       }
     }
+    function parseNiceOptions(originalDomain, option) {
+      const hasForceMin = isNumber(option.forceMin),
+        hasForceMax = isNumber(option.forceMax);
+      let niceType = null;
+      const niceMinMax = [];
+      let niceDomain = null;
+      const domainValidator = hasForceMin && hasForceMax ? x => x >= option.forceMin && x <= option.forceMax : hasForceMin ? x => x >= option.forceMin : hasForceMax ? x => x <= option.forceMax : null;
+      return hasForceMin ? niceMinMax[0] = option.forceMin : isNumber(option.min) && option.min <= Math.min(originalDomain[0], originalDomain[originalDomain.length - 1]) && (niceMinMax[0] = option.min), hasForceMax ? niceMinMax[1] = option.forceMax : isNumber(option.max) && option.max >= Math.max(originalDomain[0], originalDomain[originalDomain.length - 1]) && (niceMinMax[1] = option.max), isNumber(niceMinMax[0]) && isNumber(niceMinMax[1]) ? (niceDomain = originalDomain.slice(), niceDomain[0] = niceMinMax[0], niceDomain[niceDomain.length - 1] = niceMinMax[1]) : niceType = isNumber(niceMinMax[0]) || isNumber(niceMinMax[1]) ? isNumber(niceMinMax[0]) ? "max" : "min" : "all", {
+        niceType: niceType,
+        niceDomain: niceDomain,
+        niceMinMax: niceMinMax,
+        domainValidator: domainValidator
+      };
+    }
 
     class LinearScale extends ContinuousScale {
       constructor() {
@@ -30980,10 +31959,34 @@
       tickFormat() {
         return () => {};
       }
-      ticks() {
+      d3Ticks() {
         let count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
+        let options = arguments.length > 1 ? arguments[1] : undefined;
         const d = this.calculateVisibleDomain(this._range);
-        return ticks$1(d[0], d[d.length - 1], count);
+        return d3Ticks(d[0], d[d.length - 1], count, options);
+      }
+      ticks() {
+        let count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
+        let options = arguments.length > 1 ? arguments[1] : undefined;
+        var _a;
+        if (this._rangeFactor && (this._rangeFactor[0] > 0 || this._rangeFactor[1] < 1) && 2 === this._range.length || !this._niceType) return this.d3Ticks(count, options);
+        const curNiceDomain = null !== (_a = this._niceDomain) && void 0 !== _a ? _a : this._domain,
+          originalDomain = this._domain,
+          start = curNiceDomain[0],
+          stop = curNiceDomain[curNiceDomain.length - 1];
+        let ticksResult = ticks$1(originalDomain[0], originalDomain[originalDomain.length - 1], count, options);
+        if (!ticksResult.length) return ticksResult;
+        if (ticksResult[0] !== start && "max" === this._niceType || ticksResult[ticksResult.length - 1] !== stop && "min" === this._niceType) {
+          const newNiceDomain = curNiceDomain.slice();
+          "min" === this._niceType ? newNiceDomain[0] = ticksResult[0] : newNiceDomain[newNiceDomain.length - 1] = ticksResult[ticksResult.length - 1], this._niceDomain = newNiceDomain, this.rescale();
+          const min = Math.min(newNiceDomain[0], newNiceDomain[newNiceDomain.length - 1]),
+            max = Math.max(newNiceDomain[0], newNiceDomain[newNiceDomain.length - 1]);
+          ticksResult = ticksResult.filter(entry => entry >= min && entry <= max);
+        } else if ("all" !== this._niceType || ticksResult[0] === start && ticksResult[ticksResult.length - 1] === stop) this._domainValidator && (ticksResult = ticksResult.filter(this._domainValidator));else {
+          const newNiceDomain = curNiceDomain.slice();
+          newNiceDomain[0] = ticksResult[0], newNiceDomain[newNiceDomain.length - 1] = ticksResult[ticksResult.length - 1], this._niceDomain = newNiceDomain, this.rescale();
+        }
+        return ticksResult;
       }
       forceTicks() {
         let count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
@@ -30996,20 +31999,33 @@
       }
       nice() {
         let count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
-        const niceDomain = niceLinear(this.domain(), count);
-        return niceDomain ? this.domain(niceDomain) : this;
+        let option = arguments.length > 1 ? arguments[1] : undefined;
+        var _a, _b;
+        const originalDomain = this._domain;
+        let niceMinMax = [];
+        if (option) {
+          const res = parseNiceOptions(originalDomain, option);
+          if (niceMinMax = res.niceMinMax, this._domainValidator = res.domainValidator, this._niceType = res.niceType, res.niceDomain) return this._niceDomain = res.niceDomain, this.rescale(), this;
+        } else this._niceType = "all";
+        if (this._niceType) {
+          const niceDomain = niceLinear(originalDomain.slice(), count);
+          "min" === this._niceType ? niceDomain[niceDomain.length - 1] = null !== (_a = niceMinMax[1]) && void 0 !== _a ? _a : niceDomain[niceDomain.length - 1] : "max" === this._niceType && (niceDomain[0] = null !== (_b = niceMinMax[0]) && void 0 !== _b ? _b : niceDomain[0]), this._niceDomain = niceDomain, this.rescale();
+        }
+        return this;
       }
       niceMin() {
         let count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
+        this._niceType = "min";
         const maxD = this._domain[this._domain.length - 1],
           niceDomain = niceLinear(this.domain(), count);
-        return niceDomain && (niceDomain[niceDomain.length - 1] = maxD, this.domain(niceDomain)), this;
+        return niceDomain && (niceDomain[niceDomain.length - 1] = maxD, this._niceDomain = niceDomain, this.rescale()), this;
       }
       niceMax() {
         let count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
+        this._niceType = "max";
         const minD = this._domain[0],
-          niceDomain = niceLinear(this.domain(), count);
-        return niceDomain && (niceDomain[0] = minD, this.domain(niceDomain)), this;
+          niceDomain = niceLinear(this._domain.slice(), count);
+        return niceDomain && (niceDomain[0] = minD, this._niceDomain = niceDomain, this.rescale()), this;
       }
     }
 
@@ -31295,6 +32311,7 @@
             }
         }
         return {
+            orient: spec.orient,
             select: spec.select,
             hover: spec.hover,
             line: transformAxisLineStyle(spec.domainLine),
@@ -31308,7 +32325,8 @@
                         return spec.label.formatMethod(datum.rawValue, datum);
                     }
                     : null,
-                state: transformStateStyle(spec.label.state)
+                state: transformStateStyle(spec.label.state),
+                containerAlign: spec.label.containerAlign
             },
             tick: {
                 visible: spec.tick.visible,
@@ -34821,7 +35839,7 @@
       for (let i = 0; i < sortFields.length; i++) {
         const sortInfo = sortFields[i];
         let v = 0;
-        if ("ordinal" === sortInfo.type ? (void 0 === sortInfo.sortIndex[a[sortInfo.key]] && (sortInfo.sortIndex[a[sortInfo.key]] = sortInfo.sortIndexCount++), void 0 === sortInfo.sortIndex[b[sortInfo.key]] && (sortInfo.sortIndex[b[sortInfo.key]] = sortInfo.sortIndexCount++), v = sortInfo.sortIndex[a[sortInfo.key]] - sortInfo.sortIndex[b[sortInfo.key]]) : "linear" === sortInfo.type && (v = a[sortInfo.key] - b[sortInfo.key]), sortInfo.sortReverse && (v = -v), 0 !== v) return v;
+        if ("ordinal" === sortInfo.type ? (void 0 === sortInfo.sortIndex[b[sortInfo.key]] && (sortInfo.sortIndex[b[sortInfo.key]] = sortInfo.sortIndexCount++), void 0 === sortInfo.sortIndex[a[sortInfo.key]] && (sortInfo.sortIndex[a[sortInfo.key]] = sortInfo.sortIndexCount++), v = sortInfo.sortIndex[a[sortInfo.key]] - sortInfo.sortIndex[b[sortInfo.key]]) : "linear" === sortInfo.type && (v = a[sortInfo.key] - b[sortInfo.key]), sortInfo.sortReverse && (v = -v), 0 !== v) return v;
       }
       return 0;
     }
@@ -35624,20 +36642,16 @@
           }), _this.isRunning = !1, !1 !== (null == opt ? void 0 : opt.emitMessage) && _this.target.emit("change", []), _this;
         }, this.markRunning = () => {
           this.isRunning = !0, this.target.emit("markRunning", []);
-        }, name = (null == options ? void 0 : options.name) ? options.name : getUUID("dataview"), this.name = name, (null == options ? void 0 : options.history) && (this.history = options.history), this.dataSet.setDataView(name, this), (null == options ? void 0 : options.fields) && (this.dataSet.registerTransform("fields", fields), this.transform({
-          type: "fields",
-          options: {
-            fields: options.fields
-          }
-        }, !1));
+        }, name = (null == options ? void 0 : options.name) ? options.name : getUUID("dataview"), this.name = name, (null == options ? void 0 : options.history) && (this.history = options.history), this.dataSet.setDataView(name, this), this.setFields(null == options ? void 0 : options.fields);
       }
       parse(data, options) {
         let emit = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !1;
+        var _a;
         this.isRunning = !0, emit && this.target.emit("beforeParse", []);
         const cloneData = this.cloneParseData(data, options);
-        if (options) {
+        if (null == options ? void 0 : options.type) {
           this.parseOption = options, options = cloneDeep(options);
-          const parserData = this.dataSet.getParser(options.type || "bytejson")(cloneData, options.options, this);
+          const parserData = (null !== (_a = this.dataSet.getParser(options.type)) && void 0 !== _a ? _a : this.dataSet.getParser("bytejson"))(cloneData, options.options, this);
           this.rawData = cloneData, this.parserData = parserData, this.history && this.historyData.push(cloneData, parserData), this.latestData = parserData;
         } else this.parserData = cloneData, this.rawData = cloneData, this.history && this.historyData.push(cloneData), this.latestData = cloneData;
         return this.isRunning = !1, emit && this.target.emit("afterParse", []), this;
@@ -35645,12 +36659,13 @@
       transform(options) {
         let execute = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
         if (this.isRunning = !0, options && options.type) {
+          let pushOption = !0;
           if ("fields" === options.type) {
             this._fields = options.options.fields;
             const index = this.transformsArr.findIndex(_op => _op.type === options.type);
-            index >= 0 && this.transformsArr.splice(index, 1);
+            index >= 0 && (pushOption = !1, this.transformsArr[index].options.fields = this._fields);
           }
-          if (this.transformsArr.push(options), execute) {
+          if (pushOption && this.transformsArr.push(options), execute) {
             const lastTag = this.isLastTransform(options);
             options = cloneDeep(options), this.executeTransform(options), lastTag && this.diffLastData();
           }
@@ -35717,8 +36732,8 @@
         this._diffRank = next;
       }
       cloneParseData(data, options) {
-        let clone = !0;
-        return (data instanceof DataView || !1 === (null == options ? void 0 : options.clone)) && (clone = !1), clone ? data : cloneDeep(data);
+        let clone = !1;
+        return data instanceof DataView || !0 !== (null == options ? void 0 : options.clone) || (clone = !0), clone ? cloneDeep(data) : data;
       }
       parseNewData(data, options) {
         this.parse(data, options || this.parseOption), this.reRunAllTransform();
@@ -35731,6 +36746,17 @@
         var _a;
         return this._fields ? this._fields : "dataview" === (null === (_a = this.parseOption) || void 0 === _a ? void 0 : _a.type) && 1 === this.rawData.length && this.rawData[0].getFields ? this.rawData[0].getFields() : null;
       }
+      setFields(f) {
+        let foreMerge = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
+        this._fields = f && foreMerge ? merge$2({}, this._fields, f) : f;
+        const fieldsOption = this.transformsArr.find(_op => "fields" === _op.type);
+        !isNil(this._fields) && isNil(fieldsOption) ? (this.dataSet.registerTransform("fields", fields), this.transform({
+          type: "fields",
+          options: {
+            fields: this._fields
+          }
+        }, !1)) : fieldsOption && (fieldsOption.options.fields = this._fields);
+      }
       destroy() {
         this.dataSet.removeDataView(this.name), this.resetDiff(), this.latestData = null, this.rawData = null, this.parserData = null, this.transformsArr = null, this.target = null;
       }
@@ -40485,6 +41511,10 @@
         if (bottomColumn) {
             updateColunmWidth(bottomColumn, detaX, autoRowHeight, 'bottom', scene);
         }
+        const rightBottomColumn = scene.getColGroupInRightBottomCorner(col);
+        if (rightBottomColumn) {
+            updateColunmWidth(bottomColumn, detaX, autoRowHeight, 'right-bottom', scene);
+        }
         if (col < scene.frozenColCount) {
             scene.cornerHeaderGroup.forEachChildrenSkipChild((column, index) => {
                 if (column.col > col) {
@@ -40523,6 +41553,13 @@
                 }
             });
         }
+        if (rightBottomColumn) {
+            scene.rightBottomCornerGroup.forEachChildrenSkipChild((column, index) => {
+                if (column.col > col) {
+                    column.setAttribute('x', column.attribute.x + detaX);
+                }
+            });
+        }
         scene.table.setColWidth(col, rowHeaderOrBodyColumn.attribute.width, true);
     }
     function updateColunmWidth(columnGroup, detaX, autoRowHeight, mode, scene) {
@@ -40570,6 +41607,11 @@
                     colGroup = scene.getColGroupInLeftBottomCorner(col);
                     oldContainerHeight = scene.leftBottomCornerGroup.attribute.height ?? 0;
                 }
+                else if (mode === 'right-bottom') {
+                    row = scene.table.rowCount - scene.table.bottomFrozenRowCount;
+                    colGroup = scene.getColGroupInRightBottomCorner(col);
+                    oldContainerHeight = scene.rightBottomCornerGroup.attribute.height ?? 0;
+                }
                 let y = 0;
                 colGroup.forEachChildren((cellGroup) => {
                     if (cellGroup.role !== 'cell') {
@@ -41160,7 +42202,10 @@
         }
     }
 
-    function getColX(col, table) {
+    function getColX(col, table, isRightFrozen) {
+        if (isRightFrozen) {
+            return table.tableNoFrameWidth - table.getColsWidth(col, table.colCount - 1);
+        }
         let colX = table.getColsWidth(0, col);
         if (col >= table.frozenColCount) {
             colX -= table.scrollLeft;
@@ -41406,8 +42451,8 @@
             this.columnResizeLabel.setAttribute('visible', false);
             this.columnResizeLabel.hideAll();
         }
-        showResizeCol(col, y) {
-            const colX = getColX(col, this.table);
+        showResizeCol(col, y, isRightFrozen) {
+            const colX = getColX(col, this.table, isRightFrozen);
             this.columnResizeLine.setAttributes({
                 visible: true,
                 x: colX,
@@ -41432,8 +42477,8 @@
             });
             this.columnResizeLabel.lastChild.setAttribute('text', `${this.table.getColWidth(col)}px`);
         }
-        updateResizeCol(col, y) {
-            const colX = getColX(col, this.table);
+        updateResizeCol(col, y, isRightFrozen) {
+            const colX = getColX(col, this.table, isRightFrozen);
             this.columnResizeLine.setAttributes({
                 x: colX,
                 points: [
@@ -41463,14 +42508,14 @@
         updateMoveCol(backX, lineX, backY, lineY) {
             this.cellMover.update(backX, lineX, backY, lineY);
         }
-        setFrozenColumnShadow(col) {
+        setFrozenColumnShadow(col, isRightFrozen) {
             if (col < 0) {
                 this.frozenShadowLine.setAttributes({
                     visible: false
                 });
             }
             else {
-                const colX = this.table.getColsWidth(0, col);
+                const colX = getColX(col, this.table, isRightFrozen);
                 this.frozenShadowLine.setAttributes({
                     visible: true,
                     x: colX,
@@ -42785,11 +43830,12 @@
                     if (attribute.label.formatMethod) {
                         text = attribute.label.formatMethod(text);
                     }
-                    labelWidth = Math.max(labelWidth, table.measureText(text, {
+                    const { width, height } = table.measureText(text, {
                         fontSize: attribute.label?.style?.fontSize,
                         fontWeight: attribute.label?.style?.fontWeight,
                         fontFamily: attribute.label?.style?.fontFamily
-                    }).width);
+                    });
+                    labelWidth = Math.max(labelWidth, getSizeAfterResize(width, height, attribute.label?.style?.angle).width);
                 });
             }
             else {
@@ -42802,32 +43848,29 @@
                     if (attribute.label.formatMethod) {
                         text = attribute.label.formatMethod(text);
                     }
-                    labelWidth = Math.max(labelWidth, table.measureText(text, {
+                    const { width, height } = table.measureText(text, {
                         fontSize: attribute.label?.style?.fontSize,
                         fontWeight: attribute.label?.style?.fontWeight,
                         fontFamily: attribute.label?.style?.fontFamily
-                    }).width + 2);
+                    });
+                    labelWidth = Math.max(labelWidth, getSizeAfterResize(width, height, attribute.label?.style?.angle).width + 2);
                 });
             }
             labelWidth += attribute.label.space ?? 4;
         }
         let titleWidth = 0;
         if (attribute.title.visible && attribute.title.text) {
+            const { width, height } = table.measureText(attribute.title.text, {
+                fontSize: attribute.label?.style?.fontSize,
+                fontWeight: attribute.label?.style?.fontWeight,
+                fontFamily: attribute.label?.style?.fontFamily
+            });
+            const size = getSizeAfterResize(width, height, attribute.label?.style?.angle);
             if ((config.orient === 'left' || config.orient === 'right') && attribute.title.autoRotate) {
-                titleWidth =
-                    table.measureText(attribute.title.text, {
-                        fontSize: attribute.title?.style?.fontSize,
-                        fontWeight: attribute.title?.style?.fontWeight,
-                        fontFamily: attribute.title?.style?.fontFamily
-                    }).height + 2;
+                titleWidth = size.height + 2;
             }
             else {
-                titleWidth =
-                    table.measureText(attribute.title.text, {
-                        fontSize: attribute.title?.style?.fontSize,
-                        fontWeight: attribute.title?.style?.fontWeight,
-                        fontFamily: attribute.title?.style?.fontFamily
-                    }).width + 2;
+                titleWidth = size.width + 2;
             }
             titleWidth += attribute.title.space ?? 4;
         }
@@ -42844,10 +43887,12 @@
                     if (attribute.label.formatMethod) {
                         text = attribute.label.formatMethod(text);
                     }
-                    labelHeight = Math.max(labelHeight, table.measureText(text, {
+                    const { width, height } = table.measureText(text, {
                         fontSize: attribute.label?.style?.fontSize,
+                        fontWeight: attribute.label?.style?.fontWeight,
                         fontFamily: attribute.label?.style?.fontFamily
-                    }).height);
+                    });
+                    labelHeight = Math.max(labelHeight, getSizeAfterResize(width, height, attribute.label?.style?.angle).height);
                 });
             }
             else {
@@ -42860,29 +43905,29 @@
                     if (attribute.label.formatMethod) {
                         text = attribute.label.formatMethod(text);
                     }
-                    labelHeight = Math.max(labelHeight, table.measureText(text, {
+                    const { width, height } = table.measureText(text, {
                         fontSize: attribute.label?.style?.fontSize,
+                        fontWeight: attribute.label?.style?.fontWeight,
                         fontFamily: attribute.label?.style?.fontFamily
-                    }).height + 2);
+                    });
+                    labelHeight = Math.max(labelHeight, getSizeAfterResize(width, height, attribute.label?.style?.angle).height + 2);
                 });
             }
             labelHeight += attribute.label.space ?? 4;
         }
         let titleHeight = 0;
         if (attribute.title.visible && attribute.title.text) {
+            const { width, height } = table.measureText(attribute.title.text, {
+                fontSize: attribute.label?.style?.fontSize,
+                fontWeight: attribute.label?.style?.fontWeight,
+                fontFamily: attribute.label?.style?.fontFamily
+            });
+            const size = getSizeAfterResize(width, height, attribute.label?.style?.angle);
             if ((config.orient === 'bottom' || config.orient === 'top') && attribute.title.autoRotate) {
-                titleHeight =
-                    table.measureText(attribute.title.text, {
-                        fontSize: attribute.title?.style?.fontSize,
-                        fontFamily: attribute.title?.style?.fontFamily
-                    }).width + 2;
+                titleHeight = size.width + 2;
             }
             else {
-                titleHeight =
-                    table.measureText(attribute.title.text, {
-                        fontSize: attribute.title?.style?.fontSize,
-                        fontFamily: attribute.title?.style?.fontFamily
-                    }).height + 2;
+                titleHeight = size.height + 2;
             }
             titleHeight += attribute.title.space ?? 4;
         }
@@ -42894,6 +43939,39 @@
         }
         return Number(number.toPrecision(1)).toString();
     }
+    function getSizeAfterResize(width, height, angle = 0) {
+        const theta = (angle * Math.PI) / 180;
+        const p1 = { x: -width / 2, y: -height / 2 };
+        const p2 = { x: width / 2, y: -height / 2 };
+        const p3 = { x: width / 2, y: height / 2 };
+        const p4 = { x: -width / 2, y: height / 2 };
+        const p1Rotated = {
+            x: p1.x * Math.cos(theta) - p1.y * Math.sin(theta),
+            y: p1.x * Math.sin(theta) + p1.y * Math.cos(theta)
+        };
+        const p2Rotated = {
+            x: p2.x * Math.cos(theta) - p2.y * Math.sin(theta),
+            y: p2.x * Math.sin(theta) + p2.y * Math.cos(theta)
+        };
+        const p3Rotated = {
+            x: p3.x * Math.cos(theta) - p3.y * Math.sin(theta),
+            y: p3.x * Math.sin(theta) + p3.y * Math.cos(theta)
+        };
+        const p4Rotated = {
+            x: p4.x * Math.cos(theta) - p4.y * Math.sin(theta),
+            y: p4.x * Math.sin(theta) + p4.y * Math.cos(theta)
+        };
+        const bounds = {
+            minX: Math.min(p1Rotated.x, p2Rotated.x, p3Rotated.x, p4Rotated.x),
+            maxX: Math.max(p1Rotated.x, p2Rotated.x, p3Rotated.x, p4Rotated.x),
+            minY: Math.min(p1Rotated.y, p2Rotated.y, p3Rotated.y, p4Rotated.y),
+            maxY: Math.max(p1Rotated.y, p2Rotated.y, p3Rotated.y, p4Rotated.y)
+        };
+        return {
+            width: bounds.maxX - bounds.minX,
+            height: bounds.maxY - bounds.minY
+        };
+    }
 
     function computeColsWidth(table, colStart, colEnd, update) {
         typeof window !== 'undefined' ? window.performance.now() : 0;
@@ -42981,54 +44059,12 @@
         }
     }
     function computeColWidth(col, startRow, endRow, table, forceCompute) {
-        const { layoutMap, transpose } = table.internalProps;
-        let { width } = layoutMap?.getColumnWidthDefined(col) ?? {};
-        if (transpose) {
-            if (table.widthMode === 'standard') {
-                if (table.isRowHeader(col, 0) || table.isCornerHeader(col, 0)) {
-                    const defaultWidth = Array.isArray(table.defaultHeaderColWidth)
-                        ? table.defaultHeaderColWidth[col] ?? table.defaultColWidth
-                        : table.defaultHeaderColWidth;
-                    if (defaultWidth === 'auto') {
-                        width = 'auto';
-                    }
-                    else {
-                        return defaultWidth;
-                    }
-                }
-                if (width !== 'auto') {
-                    if (typeof width === 'string') {
-                        return toPx(width, table.internalProps.calcWidthContext);
-                    }
-                    else if (width) {
-                        return width;
-                    }
-                    return table.defaultColWidth;
-                }
-            }
-            else if (table.widthMode === 'adaptive' &&
-                col === 0 &&
-                width !== 'auto' &&
-                layoutMap?.showHeader) {
-                if (typeof width === 'string') {
-                    return toPx(width, table.internalProps.calcWidthContext);
-                }
-                else if (width) {
-                    return width;
-                }
-            }
+        const width = getColWidthDefinedWidthResizedWidth(col, table);
+        if (typeof width === 'number') {
+            return width;
         }
-        else if (width !== 'auto' && table.widthMode !== 'autoWidth' && !forceCompute) {
-            if (typeof width === 'string') {
-                return toPx(width, table.internalProps.calcWidthContext);
-            }
-            else if (width) {
-                return width;
-            }
-            const defaultWidth = table.getColWidthDefine(col);
-            if (defaultWidth !== 'auto') {
-                return table.getColWidth(col);
-            }
+        else if (width !== 'auto' && typeof width === 'string') {
+            return toPx(width, table.internalProps.calcWidthContext);
         }
         return computeAutoColWidth(width, col, startRow, endRow, forceCompute, table);
     }
@@ -43206,6 +44242,13 @@
             height: table.getRowHeight(row)
         };
     }
+    function getColWidthDefinedWidthResizedWidth(col, table) {
+        const widthDefined = table.getColWidthDefined(col);
+        if (table.internalProps._widthResizedColMap.has(col)) {
+            return table.getColWidth(col);
+        }
+        return widthDefined;
+    }
 
     const utilTextMark = new WrapText({
         autoWrapText: true
@@ -44072,11 +45115,7 @@
         const { leftBottomCornerGroup, rightTopCornerGroup, rightBottomCornerGroup } = proxy.table.scenegraph;
         proxy.setParamsForRow();
         proxy.setParamsForColumn();
-        proxy.table.internalProps._colWidthsMap.clear();
-        proxy.table._clearColRangeWidthsMap();
         computeColsWidth(proxy.table, 0, Math.min(proxy.firstScreenColLimit, proxy.table.colCount - 1));
-        proxy.table.internalProps._rowHeightsMap.clear();
-        proxy.table._clearRowRangeHeightsMap();
         computeRowsHeight(proxy.table, 0, Math.min(proxy.firstScreenRowLimit, proxy.table.rowCount - 1));
         if (proxy.table.rightFrozenColCount > 0 && proxy.table.colCount - 1 > proxy.firstScreenColLimit) {
             computeColsWidth(proxy.table, proxy.table.colCount - 1 - proxy.table.rightFrozenColCount + 1, proxy.table.colCount - 1);
@@ -46087,6 +47126,15 @@
         });
     }
 
+    function updateContainerChildrenX(containerGroup) {
+        let x = 0;
+        containerGroup.forEachChildrenSkipChild((column, index) => {
+            column.setAttribute('x', x);
+            x += column.attribute.width;
+        });
+        return x;
+    }
+
     container.load(splitModule);
     class Scenegraph {
         proxy;
@@ -46556,6 +47604,7 @@
             this.table.isPivotChart() && updateChartState(this, datum);
         }
         updateAutoColWidth(col) {
+            this.table.internalProps._widthResizedColMap.delete(col);
             const oldWidth = this.table.getColWidth(col);
             const newWidth = computeColWidth(col, 0, this.table.rowCount - 1, this.table, true);
             if (newWidth !== oldWidth) {
@@ -46861,29 +47910,24 @@
             moveHeaderPosition(colSource, rowSource, colTarget, rowTarget, this.table);
         }
         updateContainer() {
-            let cornerX = 0;
-            this.cornerHeaderGroup.forEachChildrenSkipChild((column, index) => {
-                column.setAttribute('x', cornerX);
-                cornerX += column.attribute.width;
-            });
-            let rowHeaderX = 0;
-            this.rowHeaderGroup.forEachChildrenSkipChild((column, index) => {
-                column.setAttribute('x', rowHeaderX);
-                rowHeaderX += column.attribute.width;
-            });
-            let colHeaderX = 0;
-            this.colHeaderGroup.forEachChildrenSkipChild((column, index) => {
-                column.setAttribute('x', colHeaderX);
-                colHeaderX += column.attribute.width;
-            });
-            let bodyX = 0;
-            this.bodyGroup.forEachChildrenSkipChild((column, index) => {
-                column.setAttribute('x', bodyX);
-                bodyX += column.attribute.width;
-            });
+            const cornerX = updateContainerChildrenX(this.cornerHeaderGroup);
+            const rowHeaderX = updateContainerChildrenX(this.rowHeaderGroup);
+            const colHeaderX = updateContainerChildrenX(this.colHeaderGroup);
+            const bodyX = updateContainerChildrenX(this.bodyGroup);
+            const rightX = updateContainerChildrenX(this.rightFrozenGroup);
+            updateContainerChildrenX(this.bottomFrozenGroup);
+            updateContainerChildrenX(this.leftBottomCornerGroup);
+            updateContainerChildrenX(this.rightTopCornerGroup);
+            updateContainerChildrenX(this.rightBottomCornerGroup);
             this.cornerHeaderGroup.setDeltaWidth(cornerX - this.cornerHeaderGroup.attribute.width);
+            this.leftBottomCornerGroup.setDeltaWidth(cornerX - this.leftBottomCornerGroup.attribute.width);
             this.colHeaderGroup.setDeltaWidth(colHeaderX - this.colHeaderGroup.attribute.width);
+            this.rightFrozenGroup.setDeltaWidth(colHeaderX - this.rightFrozenGroup.attribute.width);
             this.rowHeaderGroup.setDeltaWidth(rowHeaderX - this.rowHeaderGroup.attribute.width);
+            this.bottomFrozenGroup.setDeltaWidth(rowHeaderX - this.bottomFrozenGroup.attribute.width);
+            this.rightFrozenGroup.setDeltaWidth(rightX - this.rightFrozenGroup.attribute.width);
+            this.rightTopCornerGroup.setDeltaWidth(rightX - this.rightTopCornerGroup.attribute.width);
+            this.rightBottomCornerGroup.setDeltaWidth(rightX - this.rightBottomCornerGroup.attribute.width);
             this.bodyGroup.setDeltaWidth(bodyX - this.bodyGroup.attribute.width);
             this.colHeaderGroup.setAttribute('x', this.cornerHeaderGroup.attribute.width);
             this.bottomFrozenGroup.setAttribute('x', this.rowHeaderGroup.attribute.width);
@@ -46915,11 +47959,26 @@
         getResizeColAt(abstractX, abstractY, cellGroup, offset = ResizeColumnHotSpotSize / 2) {
             if (!cellGroup) ;
             else {
+                let cell;
                 if (abstractX < cellGroup.globalAABBBounds.x1 + offset) {
-                    return { col: cellGroup.col - 1, row: cellGroup.row, x: cellGroup.globalAABBBounds.x1 };
+                    cell = { col: cellGroup.col - 1, row: cellGroup.row, x: cellGroup.globalAABBBounds.x1 };
                 }
-                if (cellGroup.globalAABBBounds.x2 - offset < abstractX) {
-                    return { col: cellGroup.col, row: cellGroup.row, x: cellGroup.globalAABBBounds.x2 };
+                else if (cellGroup.globalAABBBounds.x2 - offset < abstractX) {
+                    cell = { col: cellGroup.col, row: cellGroup.row, x: cellGroup.globalAABBBounds.x2 };
+                }
+                if (cell &&
+                    this.table.rightFrozenColCount > 0 &&
+                    cell.col === this.table.colCount - this.table.rightFrozenColCount - 1 &&
+                    this.table.tableNoFrameWidth -
+                        this.table.getFrozenColsWidth() -
+                        this.table.getRightFrozenColsWidth() +
+                        this.table.scrollLeft <
+                        this.bodyGroup.attribute.width) {
+                    cell.col = cell.col + 1;
+                    cell.rightFrozen = true;
+                }
+                if (cell) {
+                    return cell;
                 }
             }
             return { col: -1, row: -1 };
@@ -47360,14 +48419,17 @@
                 order: 'normal'
             };
         }
-        table.sortState = tableState;
+        const sortEventReturns = table.fireListeners(TABLE_EVENT_TYPE.SORT_CLICK, tableState);
+        if (sortEventReturns.includes(false)) {
+            return;
+        }
+        table.internalProps.sortState = tableState;
         table.stateManeger.setSortState(tableState);
         if (headerC?.sort) {
             executeSort(tableState, table, headerC);
         }
         table.scenegraph.sortCell();
         table.stateManeger.updateSelectPos(-1, -1);
-        table.fireListeners(TABLE_EVENT_TYPE.SORT_CLICK, tableState);
     }
     function executeSort(newState, table, headerDefine) {
         let hd;
@@ -47824,6 +48886,135 @@
         };
     }
 
+    function updateResizeColumn(xInTable, yInTable, state) {
+        xInTable = Math.ceil(xInTable);
+        yInTable = Math.ceil(yInTable);
+        let detaX = state.columnResize.isRightFrozen ? state.columnResize.x - xInTable : xInTable - state.columnResize.x;
+        if (Math.abs(detaX) < 1) {
+            return;
+        }
+        const widthCache = state.table.getColWidth(state.columnResize.col);
+        let width = widthCache;
+        width += detaX;
+        const minWidth = state.table.getMinColWidth(state.columnResize.col);
+        const maxWidth = state.table.getMaxColWidth(state.columnResize.col);
+        if (width < minWidth || width > maxWidth) {
+            if (widthCache === minWidth || widthCache === maxWidth) {
+                return;
+            }
+            else if (widthCache - minWidth > maxWidth - widthCache) {
+                detaX = maxWidth - widthCache;
+            }
+            else {
+                detaX = minWidth - widthCache;
+            }
+        }
+        detaX = Math.ceil(detaX);
+        if (state.columnResize.col < state.table.rowHeaderLevelCount ||
+            state.columnResize.col >= state.table.colCount - state.table.rightFrozenColCount) {
+            updateResizeColForColumn(detaX, state);
+        }
+        else if (state.table.internalProps.columnResizeType === 'indicator') {
+            updateResizeColForIndicator(detaX, state);
+        }
+        else if (state.table.internalProps.columnResizeType === 'indicatorGroup') {
+            updateResizeColForIndicatorGroup(detaX, state);
+        }
+        else if (state.table.internalProps.columnResizeType === 'all') {
+            updateResizeColForAll(detaX, state);
+        }
+        else {
+            updateResizeColForColumn(detaX, state);
+        }
+        state.columnResize.x = xInTable;
+        state.table.scenegraph.component.updateResizeCol(state.columnResize.col, yInTable, state.columnResize.isRightFrozen);
+        if (state.columnResize.col < state.table.frozenColCount &&
+            !state.table.isPivotTable() &&
+            !state.table.transpose) {
+            state.table.scenegraph.component.setFrozenColumnShadow(state.table.frozenColCount - 1, state.columnResize.isRightFrozen);
+        }
+        state.table.scenegraph.updateNextFrame();
+    }
+    function updateResizeColForColumn(detaX, state) {
+        if (state.table.widthMode === 'adaptive' && state.columnResize.col < state.table.colCount - 1) {
+            const rightColWidth = state.table.getColWidth(state.columnResize.col + 1);
+            if (rightColWidth - detaX < 0) {
+                detaX = rightColWidth;
+            }
+            state.table.scenegraph.updateColWidth(state.columnResize.col, detaX);
+            state.table.scenegraph.updateColWidth(state.columnResize.col + 1, -detaX);
+            state.table.internalProps._widthResizedColMap.add(state.columnResize.col);
+            state.table.internalProps._widthResizedColMap.add(state.columnResize.col + 1);
+        }
+        else {
+            state.table.scenegraph.updateColWidth(state.columnResize.col, detaX);
+            state.table.internalProps._widthResizedColMap.add(state.columnResize.col);
+        }
+    }
+    function updateResizeColForAll(detaX, state) {
+        const layout = state.table.internalProps.layoutMap;
+        for (let col = state.table.options.frozenColCount; col < state.table.colCount - state.table.rightFrozenColCount; col++) {
+            if (!(state.table.internalProps.transpose || (state.table.isPivotTable() && !layout.indicatorsAsCol))) {
+                const cellDefine = layout.getBody(col, state.table.columnHeaderLevelCount);
+                if (cellDefine?.disableColumnResize) {
+                    continue;
+                }
+            }
+            state.table.scenegraph.updateColWidth(col, detaX);
+            state.table.internalProps._widthResizedColMap.add(col);
+        }
+    }
+    function updateResizeColForIndicator(detaX, state) {
+        const layout = state.table.internalProps.layoutMap;
+        let resizeIndicatorKey;
+        let resizeDimensionKey;
+        let resizeDimensionValue;
+        if (layout.indicatorsAsCol) {
+            resizeIndicatorKey = layout.getIndicatorKey(state.columnResize.col, state.table.columnHeaderLevelCount);
+        }
+        else {
+            const headerPaths = layout.getCellHeaderPaths(state.columnResize.col, state.table.columnHeaderLevelCount - 1);
+            const headerPath = headerPaths.colHeaderPaths[headerPaths.colHeaderPaths.length - 1];
+            resizeDimensionKey = headerPath.dimensionKey;
+            resizeDimensionValue = headerPath.value;
+        }
+        for (let col = state.table.rowHeaderLevelCount; col < state.table.colCount - state.table.rightFrozenColCount; col++) {
+            const indicatorKey = layout.getIndicatorKey(col, state.table.columnHeaderLevelCount);
+            if (layout.indicatorsAsCol && indicatorKey === resizeIndicatorKey) {
+                state.table.scenegraph.updateColWidth(col, detaX);
+                state.table.internalProps._widthResizedColMap.add(col);
+            }
+            else if (!layout.indicatorsAsCol) {
+                const headerPaths = layout.getCellHeaderPaths(col, state.table.columnHeaderLevelCount - 1);
+                const headerPath = headerPaths?.colHeaderPaths[headerPaths.colHeaderPaths.length - 1];
+                if (headerPath && resizeDimensionKey === headerPath.dimensionKey && resizeDimensionValue === headerPath.value) {
+                    state.table.scenegraph.updateColWidth(col, detaX);
+                    state.table.internalProps._widthResizedColMap.add(col);
+                }
+            }
+        }
+    }
+    function updateResizeColForIndicatorGroup(detaX, state) {
+        const layout = state.table.internalProps.layoutMap;
+        const headerPaths = layout.getCellHeaderPaths(state.columnResize.col, state.table.columnHeaderLevelCount);
+        const node = layout.getHeadNode(headerPaths.colHeaderPaths.slice(0, headerPaths.colHeaderPaths.length - 1));
+        const startCol = node.startInTotal + state.table.frozenColCount;
+        const endCol = node.startInTotal + state.table.frozenColCount + node.size - 1;
+        const totalColWidth = state.table.getColsWidth(startCol, endCol);
+        const moveX = detaX;
+        for (let col = startCol; col <= endCol; col++) {
+            if (!(state.table.internalProps.transpose || (state.table.isPivotTable() && !layout.indicatorsAsCol))) {
+                const cellDefine = layout.getBody(col, state.table.columnHeaderLevelCount);
+                if (cellDefine?.disableColumnResize) {
+                    continue;
+                }
+            }
+            const prevWidth = state.table.getColWidth(col);
+            state.table.scenegraph.updateColWidth(col, (prevWidth / totalColWidth) * moveX);
+            state.table.internalProps._widthResizedColMap.add(col);
+        }
+    }
+
     class StateManeger {
         table;
         interactionState;
@@ -48094,63 +49285,17 @@
             this.table.scenegraph.component.hideResizeCol();
             this.table.scenegraph.updateNextFrame();
         }
-        startResizeCol(col, x, y) {
+        startResizeCol(col, x, y, isRightFrozen) {
             this.columnResize.resizing = true;
             this.columnResize.col = col;
             this.columnResize.x = x;
-            this.table.scenegraph.component.showResizeCol(col, y);
+            this.columnResize.isRightFrozen = isRightFrozen;
+            this.table.scenegraph.component.showResizeCol(col, y, isRightFrozen);
             this.table.stateManeger.updateSelectPos(-1, -1);
             this.table.scenegraph.updateNextFrame();
         }
         updateResizeCol(xInTable, yInTable) {
-            xInTable = Math.ceil(xInTable);
-            yInTable = Math.ceil(yInTable);
-            let detaX = xInTable - this.columnResize.x;
-            if (Math.abs(detaX) < 1) {
-                return;
-            }
-            let widthCache = this.table.colWidthsMap.get(this.columnResize.col);
-            if (typeof widthCache === 'number') {
-                widthCache = widthCache;
-            }
-            else {
-                widthCache = this.table.getColWidth(this.columnResize.col);
-            }
-            let width = widthCache;
-            width += detaX;
-            const minWidth = this.table.getMinColWidth(this.columnResize.col);
-            const maxWidth = this.table.getMaxColWidth(this.columnResize.col);
-            if (width < minWidth || width > maxWidth) {
-                if (widthCache === minWidth || widthCache === maxWidth) {
-                    return;
-                }
-                else if (widthCache - minWidth > maxWidth - widthCache) {
-                    detaX = maxWidth - widthCache;
-                }
-                else {
-                    detaX = minWidth - widthCache;
-                }
-            }
-            detaX = Math.ceil(detaX);
-            if (this.table.widthMode === 'adaptive' && this.columnResize.col < this.table.colCount - 1) {
-                const rightColWidth = this.table.getColWidth(this.columnResize.col + 1);
-                if (rightColWidth - detaX < 0) {
-                    detaX = rightColWidth;
-                }
-                this.table.scenegraph.updateColWidth(this.columnResize.col, detaX);
-                this.table.scenegraph.updateColWidth(this.columnResize.col + 1, -detaX);
-            }
-            else {
-                this.table.scenegraph.updateColWidth(this.columnResize.col, detaX);
-            }
-            this.columnResize.x = xInTable;
-            this.table.scenegraph.component.updateResizeCol(this.columnResize.col, yInTable);
-            if (this.columnResize.col < this.table.frozenColCount &&
-                !this.table.isPivotTable() &&
-                !this.table.transpose) {
-                this.table.scenegraph.component.setFrozenColumnShadow(this.table.frozenColCount - 1);
-            }
-            this.table.scenegraph.updateNextFrame();
+            updateResizeColumn(xInTable, yInTable, this);
         }
         startMoveCol(col, row, x, y) {
             startMoveCol(col, row, x, y, this);
@@ -48592,6 +49737,9 @@
                 table.stateManeger.updateDrillState(undefined, undefined, false, false, -1, -1);
             }
         });
+        table.on(TABLE_EVENT_TYPE.MOUSELEAVE_TABLE, (e) => {
+            table.stateManeger.updateDrillState(undefined, undefined, false, false, -1, -1);
+        });
     }
     function drillClick(table) {
         table.fireListeners(PIVOT_TABLE_EVENT_TYPE.DRILLMENU_CLICK, table.stateManeger.drill);
@@ -48673,6 +49821,7 @@
         return null;
     }
 
+    let LastPointerXY;
     function bindTableGroupListener(eventManeger) {
         const table = eventManeger.table;
         const stateManeger = table.stateManeger;
@@ -48698,6 +49847,9 @@
             }
         });
         table.scenegraph.tableGroup.addEventListener('pointermove', (e) => {
+            const lastX = LastPointerXY?.x ?? e.x;
+            const lastY = LastPointerXY?.y ?? e.y;
+            LastPointerXY = { x: e.x, y: e.y };
             if (eventManeger.touchSetTimeout) {
                 clearTimeout(eventManeger.touchSetTimeout);
                 eventManeger.touchSetTimeout = undefined;
@@ -48706,7 +49858,8 @@
             if (stateManeger.interactionState === InteractionState.scrolling) {
                 return;
             }
-            if (stateManeger.interactionState === InteractionState.grabing) {
+            if (stateManeger.interactionState === InteractionState.grabing &&
+                Math.abs(lastX - e.x) + Math.abs(lastY - e.y) >= 1) {
                 if (stateManeger.isResizeCol()) ;
                 else if (stateManeger.isMoveCol()) {
                     eventManeger.dealColumnMover(eventArgsSet);
@@ -48844,6 +49997,7 @@
             eventManeger.dealTableSelect();
         });
         table.scenegraph.tableGroup.addEventListener('pointerdown', (e) => {
+            LastPointerXY = { x: e.x, y: e.y };
             if (e.button !== 0) {
                 return;
             }
@@ -49637,7 +50791,7 @@
                 const resizeCol = this.table.scenegraph.getResizeColAt(eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y, eventArgs.targetCell);
                 if (this.table._canResizeColumn(resizeCol.col, resizeCol.row) && resizeCol.col >= 0) {
                     if (update) {
-                        this.table.stateManeger.startResizeCol(resizeCol.col, eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y);
+                        this.table.stateManeger.startResizeCol(resizeCol.col, eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y, resizeCol.rightFrozen);
                     }
                     return true;
                 }
@@ -51446,6 +52600,9 @@
                     this._unbindFromCell();
                 }
             });
+            table.on(TABLE_EVENT_TYPE.MOUSELEAVE_TABLE, e => {
+                this._unbindFromCell();
+            });
             table.on(TABLE_EVENT_TYPE.SCROLL, e => {
                 const info = this._attachInfo;
                 if (info?.tooltipOptions && info?.range?.start) {
@@ -52337,7 +53494,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "0.10.0";
+        version = "0.10.1-alpha.1";
         pagerConf;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -52398,6 +53555,7 @@
             internalProps._rowHeightsMap = new NumberMap();
             internalProps._rowRangeHeightsMap = new Map();
             internalProps._colRangeWidthsMap = new Map();
+            internalProps._widthResizedColMap = new Set();
             this.colWidthsMap = new NumberMap();
             this.colContentWidthsMap = new NumberMap();
             this.colWidthsLimit = {};
@@ -52735,17 +53893,7 @@
             }
             const cachedLowerColWidth = this._colRangeWidthsMap.get(`$${startCol}$${endCol - 1}`);
             if (cachedLowerColWidth !== null && cachedLowerColWidth !== undefined) {
-                const width = this.colWidthsMap.get(endCol);
-                let adjustW;
-                if (width) {
-                    adjustW =
-                        this.widthMode === 'adaptive' || this.transpose
-                            ? Number(width)
-                            : this._adjustColWidth(endCol, this._colWidthDefineToPxWidth(width));
-                }
-                else {
-                    adjustW = this.getColWidth(endCol);
-                }
+                const adjustW = this.getColWidth(endCol);
                 const addWidth = cachedLowerColWidth + adjustW;
                 if (startCol >= 0 && endCol >= 0 && !Number.isNaN(addWidth)) {
                     this._colRangeWidthsMap.set(`$${startCol}$${endCol}`, Math.round(addWidth));
@@ -52756,21 +53904,6 @@
             for (let col = startCol; col <= endCol; col++) {
                 w += this.getColWidth(col);
             }
-            this.colWidthsMap.each(startCol, endCol, (width, col) => {
-                w +=
-                    (this.widthMode === 'adaptive' || this.transpose
-                        ? Number(width)
-                        : this._adjustColWidth(col, this._colWidthDefineToPxWidth(width))) - this.getColWidth(col);
-            });
-            for (let col = startCol; col <= endCol; col++) {
-                if (this.colWidthsMap.has(col)) {
-                    continue;
-                }
-                const adj = this._adjustColWidth(col, this.internalProps.defaultColWidth);
-                if (adj !== this.internalProps.defaultColWidth) {
-                    w += adj - this.internalProps.defaultColWidth;
-                }
-            }
             if (startCol >= 0 && endCol >= 0) {
                 this._colRangeWidthsMap.set(`$${startCol}$${endCol}`, Math.round(w));
             }
@@ -52839,8 +53972,12 @@
             }
             return Math.round(h);
         }
-        getColWidthDefine(col) {
-            const width = this.colWidthsMap.get(col);
+        getColWidthDefined(col) {
+            const { layoutMap } = this.internalProps;
+            if (this.widthMode === 'autoWidth') {
+                return 'auto';
+            }
+            const { width } = layoutMap?.getColumnWidthDefined(col) ?? {};
             if (typeof width === 'number' && width <= 0) {
                 return 0;
             }
@@ -52853,14 +53990,17 @@
                     : this.defaultHeaderColWidth;
             }
             else if (this.isRightFrozenColumn(col, this.columnHeaderLevelCount)) {
-                return Array.isArray(this.defaultHeaderColWidth)
-                    ? this.defaultHeaderColWidth[this.rowHeaderLevelCount - this.rightFrozenColCount] ?? this.defaultColWidth
-                    : this.defaultHeaderColWidth;
+                if (this.isPivotTable()) {
+                    return Array.isArray(this.defaultHeaderColWidth)
+                        ? this.defaultHeaderColWidth[this.rowHeaderLevelCount - this.rightFrozenColCount] ?? this.defaultColWidth
+                        : this.defaultHeaderColWidth;
+                }
+                return this.defaultColWidth;
             }
             return this.defaultColWidth;
         }
         getColWidth(col) {
-            const width = this.getColWidthDefine(col);
+            const width = this.colWidthsMap.get(col);
             if ((this.widthMode === 'adaptive' && typeof width === 'number') ||
                 (this.transpose && typeof width === 'number')) {
                 return this._colWidthDefineToPxWidth(width);
@@ -53332,6 +54472,7 @@
             internalProps._rowHeightsMap = new NumberMap();
             internalProps._rowRangeHeightsMap = new Map();
             internalProps._colRangeWidthsMap = new Map();
+            internalProps._widthResizedColMap = new Set();
             this.colWidthsMap = new NumberMap();
             this.colContentWidthsMap = new NumberMap();
             this.colWidthsLimit = {};
@@ -53376,6 +54517,8 @@
             }
             this.headerStyleCache = new Map();
             this.bodyStyleCache = new Map();
+            this.clearColWidthCache();
+            this.clearRowHeightCache();
         }
         getFrozenRowsHeight() {
             const height = this.getRowsHeight(0, this.frozenRowCount - 1);
@@ -53628,11 +54771,14 @@
         get theme() {
             return this.internalProps.theme;
         }
-        set theme(theme) {
-            const t = themes.of(theme);
-            this.internalProps.theme = t ? t : themes.DEFAULT;
+        updateTheme(theme) {
+            this.internalProps.theme = themes.of(theme ?? themes.DEFAULT);
             this.options.theme = theme;
-            this.resize();
+            this.scenegraph.clearCells();
+            this.headerStyleCache = new Map();
+            this.bodyStyleCache = new Map();
+            this.scenegraph.createSceneGraph();
+            this.render();
         }
         getBodyField(col, row) {
             return this.internalProps.layoutMap.getBody(col, row).field;
@@ -53737,7 +54883,7 @@
             const time = typeof window !== 'undefined' ? window.performance.now() : 0;
             this.scenegraph.clearCells();
             if (sort !== undefined) {
-                this.sortState = sort;
+                this.internalProps.sortState = sort;
                 this.stateManeger.setSortState(this.sortState);
             }
             if (records) {
@@ -53917,6 +55063,14 @@
         clearCellStyleCache() {
             this.headerStyleCache.clear();
         }
+        clearRowHeightCache() {
+            this.internalProps._rowHeightsMap.clear();
+            this._clearRowRangeHeightsMap();
+        }
+        clearColWidthCache() {
+            this.internalProps._colWidthsMap.clear();
+            this._clearColRangeWidthsMap();
+        }
         _canResizeColumn(col, row) {
             if (!(col >= 0 && row >= 0)) {
                 return false;
@@ -54780,23 +55934,34 @@
                 let width = 0;
                 let maxWidth;
                 let minWidth;
-                let isAuto;
-                this.columnObjects.forEach((obj, index) => {
-                    if (typeof obj.width === 'number') {
-                        width = Math.max(obj.width, width);
-                    }
-                    else if (obj.width === 'auto') {
-                        isAuto = true;
-                    }
-                    if (typeof obj.minWidth === 'number') {
-                        minWidth = Math.max(obj.minWidth, minWidth);
-                    }
-                    if (typeof obj.maxWidth === 'number') {
-                        maxWidth = Math.max(obj.maxWidth, maxWidth);
+                if (col >= this.rowHeaderLevelCount) {
+                    let isAuto;
+                    this.columnObjects.forEach((obj, index) => {
+                        if (typeof obj.width === 'number') {
+                            width = Math.max(obj.width, width);
+                        }
+                        else if (obj.width === 'auto') {
+                            isAuto = true;
+                        }
+                        if (typeof obj.minWidth === 'number') {
+                            minWidth = Math.max(obj.minWidth, minWidth);
+                        }
+                        if (typeof obj.maxWidth === 'number') {
+                            maxWidth = Math.max(obj.maxWidth, maxWidth);
+                        }
+                    });
+                    width = width > 0 ? width : isAuto ? 'auto' : undefined;
+                    return { width, minWidth, maxWidth };
+                }
+                if (this.isRowHeader(col, 0)) {
+                    const defaultWidth = Array.isArray(this._table.defaultHeaderColWidth)
+                        ? this._table.defaultHeaderColWidth[col] ?? this._table.defaultColWidth
+                        : this._table.defaultHeaderColWidth;
+                    if (defaultWidth === 'auto') {
+                        return { width: 'auto' };
                     }
-                });
-                width = width > 0 ? width : isAuto ? 'auto' : undefined;
-                return { width, minWidth, maxWidth };
+                    return { width: defaultWidth };
+                }
             }
             return this._columns[col];
         }
@@ -55297,9 +56462,6 @@
         get sortState() {
             return this.internalProps.sortState;
         }
-        set sortState(sortState) {
-            this.internalProps.sortState = sortState;
-        }
         get columns() {
             return this.internalProps.columns;
         }
@@ -55638,7 +56800,7 @@
             }
             return undefined;
         }
-        updateSortState(sortState) {
+        updateSortState(sortState, executeSort = true) {
             if (!sortState) {
                 if (this.internalProps.sortState) {
                     if (Array.isArray(this.internalProps.sortState)) {
@@ -55664,7 +56826,7 @@
             else {
                 ({ order, field, fieldKey } = this.internalProps.sortState);
             }
-            if (field) {
+            if (field && executeSort) {
                 const sortFunc = this._getSortFuncFromHeaderOption(this.internalProps.columns, field, fieldKey);
                 let hd;
                 if (fieldKey) {
@@ -56483,9 +57645,6 @@
                         ? 1
                         : 0;
                 }
-                return this.getDimension(this.colDimensionKeys[this.colDimensionKeys.length - 1], 'column')?.multiDimension
-                    ? 1
-                    : 0;
             }
             return 0;
         }
@@ -56498,7 +57657,6 @@
                         ? 1
                         : 0;
                 }
-                return this.getDimension(this.rowDimensionKeys[this.rowDimensionKeys.length - 1], 'row')?.multiDimension ? 1 : 0;
             }
             return 0;
         }
@@ -57202,6 +58360,54 @@
                 indicatorObject.chartInstance?.release();
             });
         }
+        getHeadNode(dimensions) {
+            if (!Array.isArray(dimensions)) {
+                return undefined;
+            }
+            let rowArr = this.rowTree;
+            let rowDimension;
+            let colArr = this.columnTree;
+            let colDimension;
+            for (let i = 0; i < dimensions.length; i++) {
+                const highlightDimension = dimensions[i];
+                if ((highlightDimension.isPivotCorner || !highlightDimension.value) &&
+                    i === dimensions.length - 1) {
+                    return undefined;
+                }
+                let isCol = false;
+                for (let j = 0; j < colArr.length; j++) {
+                    const dimension = colArr[j];
+                    if (((isValid$1(highlightDimension.dimensionKey) && dimension.dimensionKey === highlightDimension.dimensionKey) ||
+                        (isValid$1(highlightDimension.indicatorKey) && dimension.indicatorKey === highlightDimension.indicatorKey)) &&
+                        dimension.value === highlightDimension.value) {
+                        colArr = dimension.children;
+                        colDimension = dimension;
+                        isCol = true;
+                        break;
+                    }
+                }
+                if (isCol) {
+                    continue;
+                }
+                for (let k = 0; k < rowArr.length; k++) {
+                    const dimension = rowArr[k];
+                    if (((isValid$1(highlightDimension.dimensionKey) && dimension.dimensionKey === highlightDimension.dimensionKey) ||
+                        (isValid$1(highlightDimension.indicatorKey) && dimension.indicatorKey === highlightDimension.indicatorKey)) &&
+                        dimension.value === highlightDimension.value) {
+                        rowArr = dimension.children;
+                        rowDimension = dimension;
+                        break;
+                    }
+                }
+            }
+            if (rowDimension) {
+                return rowDimension;
+            }
+            else if (colDimension) {
+                return colDimension;
+            }
+            return undefined;
+        }
     }
 
     const EMPTY_HEADER = {
@@ -59846,6 +61052,7 @@
             if (options.layout) {
                 Object.assign(options, options.layout);
             }
+            this.internalProps.columnResizeType = options.columnResizeType ?? 'column';
             this.internalProps.dataConfig = options.dataConfig;
             this.internalProps.enableDataAnalysis = options.enableDataAnalysis;
             if (this.internalProps.enableDataAnalysis && (options.rows || options.columns)) {
@@ -59920,6 +61127,7 @@
         updateOption(options, accelerateFirstScreen = false) {
             const internalProps = this.internalProps;
             super.updateOption(options);
+            internalProps.columnResizeType = options.columnResizeType ?? 'column';
             internalProps.dataConfig = options.dataConfig;
             internalProps.enableDataAnalysis = options.enableDataAnalysis;
             if (options?.rowHierarchyType === 'tree' &&
@@ -60297,6 +61505,7 @@
                 Object.assign(options, options.layout);
             }
             this.setCustomStateNameToSpec();
+            this.internalProps.columnResizeType = options.columnResizeType ?? 'column';
             this.internalProps.dataConfig = { isPivotChart: true };
             this._axes = isArray$3(options.axes) ? options.axes : [];
             if (options.rows || options.columns) {
@@ -60374,6 +61583,7 @@
             const internalProps = this.internalProps;
             super.updateOption(options);
             this.setCustomStateNameToSpec();
+            internalProps.columnResizeType = options.columnResizeType ?? 'column';
             internalProps.dataConfig = {};
             this._axes = isArray$3(options.axes) ? options.axes : [];
             if (options.rows || options.columns) {
@@ -61565,7 +62775,7 @@
         percentCalc: percentCalc
     });
 
-    const version = "0.10.0";
+    const version = "0.10.1-alpha.1";
     function getIcons() {
         return get$1();
     }