@visactor/vrender 0.15.0-alpha.2 → 0.15.0-alpha.21

package/dist/index.js

@@ -10,41 +10,41 @@
 		return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 	}
 
-	function _iterableToArrayLimit(arr, i) {
-	  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
-	  if (null != _i) {
-	    var _s,
-	      _e,
-	      _x,
-	      _r,
-	      _arr = [],
-	      _n = !0,
-	      _d = !1;
+	function _iterableToArrayLimit(r, l) {
+	  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+	  if (null != t) {
+	    var e,
+	      n,
+	      i,
+	      u,
+	      a = [],
+	      f = !0,
+	      o = !1;
 	    try {
-	      if (_x = (_i = _i.call(arr)).next, 0 === i) {
-	        if (Object(_i) !== _i) return;
-	        _n = !1;
-	      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
-	    } catch (err) {
-	      _d = !0, _e = err;
+	      if (i = (t = t.call(r)).next, 0 === l) {
+	        if (Object(t) !== t) return;
+	        f = !1;
+	      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+	    } catch (r) {
+	      o = !0, n = r;
 	    } finally {
 	      try {
-	        if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return;
+	        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
 	      } finally {
-	        if (_d) throw _e;
+	        if (o) throw n;
 	      }
 	    }
-	    return _arr;
+	    return a;
 	  }
 	}
-	function _typeof(obj) {
+	function _typeof(o) {
 	  "@babel/helpers - typeof";
 
-	  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-	    return typeof obj;
-	  } : function (obj) {
-	    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-	  }, _typeof(obj);
+	  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+	    return typeof o;
+	  } : function (o) {
+	    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+	  }, _typeof(o);
 	}
 	function _classCallCheck(instance, Constructor) {
 	  if (!(instance instanceof Constructor)) {
@@ -344,7 +344,7 @@
 	var isCallable$h = isCallable$i;
 	var $documentAll = documentAll_1;
 	var documentAll = $documentAll.all;
-	var isObject$e = $documentAll.IS_HTMLDDA ? function (it) {
+	var isObject$f = $documentAll.IS_HTMLDDA ? function (it) {
 	  return _typeof(it) == 'object' ? it !== null : isCallable$h(it) || it === documentAll;
 	} : function (it) {
 	  return _typeof(it) == 'object' ? it !== null : isCallable$h(it);
@@ -453,16 +453,16 @@
 
 	var call$7 = functionCall;
 	var isCallable$d = isCallable$i;
-	var isObject$d = isObject$e;
+	var isObject$e = isObject$f;
 	var $TypeError$7 = TypeError;
 
 	// `OrdinaryToPrimitive` abstract operation
 	// https://tc39.es/ecma262/#sec-ordinarytoprimitive
 	var ordinaryToPrimitive$1 = function ordinaryToPrimitive(input, pref) {
 	  var fn, val;
-	  if (pref === 'string' && isCallable$d(fn = input.toString) && !isObject$d(val = call$7(fn, input))) return val;
-	  if (isCallable$d(fn = input.valueOf) && !isObject$d(val = call$7(fn, input))) return val;
-	  if (pref !== 'string' && isCallable$d(fn = input.toString) && !isObject$d(val = call$7(fn, input))) return val;
+	  if (pref === 'string' && isCallable$d(fn = input.toString) && !isObject$e(val = call$7(fn, input))) return val;
+	  if (isCallable$d(fn = input.valueOf) && !isObject$e(val = call$7(fn, input))) return val;
+	  if (pref !== 'string' && isCallable$d(fn = input.toString) && !isObject$e(val = call$7(fn, input))) return val;
 	  throw $TypeError$7("Can't convert object to primitive value");
 	};
 
@@ -548,7 +548,7 @@
 	};
 
 	var call$6 = functionCall;
-	var isObject$c = isObject$e;
+	var isObject$d = isObject$f;
 	var isSymbol$1 = isSymbol$2;
 	var getMethod$2 = getMethod$3;
 	var ordinaryToPrimitive = ordinaryToPrimitive$1;
@@ -559,13 +559,13 @@
 	// `ToPrimitive` abstract operation
 	// https://tc39.es/ecma262/#sec-toprimitive
 	var toPrimitive$1 = function toPrimitive(input, pref) {
-	  if (!isObject$c(input) || isSymbol$1(input)) return input;
+	  if (!isObject$d(input) || isSymbol$1(input)) return input;
 	  var exoticToPrim = getMethod$2(input, TO_PRIMITIVE);
 	  var result;
 	  if (exoticToPrim) {
 	    if (pref === undefined) pref = 'default';
 	    result = call$6(exoticToPrim, input, pref);
-	    if (!isObject$c(result) || isSymbol$1(result)) return result;
+	    if (!isObject$d(result) || isSymbol$1(result)) return result;
 	    throw $TypeError$6("Can't convert object to primitive value");
 	  }
 	  if (pref === undefined) pref = 'number';
@@ -583,10 +583,10 @@
 	};
 
 	var global$6 = global$d;
-	var isObject$b = isObject$e;
+	var isObject$c = isObject$f;
 	var document$1 = global$6.document;
 	// typeof document.createElement is 'object' in old IE
-	var EXISTS$1 = isObject$b(document$1) && isObject$b(document$1.createElement);
+	var EXISTS$1 = isObject$c(document$1) && isObject$c(document$1.createElement);
 	var documentCreateElement$1 = function documentCreateElement(it) {
 	  return EXISTS$1 ? document$1.createElement(it) : {};
 	};
@@ -643,13 +643,13 @@
 	  }).prototype != 42;
 	});
 
-	var isObject$a = isObject$e;
+	var isObject$b = isObject$f;
 	var $String$2 = String;
 	var $TypeError$5 = TypeError;
 
 	// `Assert: Type(argument) is Object`
 	var anObject$i = function anObject(argument) {
-	  if (isObject$a(argument)) return argument;
+	  if (isObject$b(argument)) return argument;
 	  throw $TypeError$5($String$2(argument) + ' is not an object');
 	};
 
@@ -753,7 +753,7 @@
 
 	var NATIVE_WEAK_MAP$1 = weakMapBasicDetection;
 	var global$4 = global$d;
-	var isObject$9 = isObject$e;
+	var isObject$a = isObject$f;
 	var createNonEnumerableProperty$2 = createNonEnumerableProperty$3;
 	var hasOwn$7 = hasOwnProperty_1;
 	var shared$1 = sharedStore;
@@ -762,14 +762,14 @@
 	var OBJECT_ALREADY_INITIALIZED = 'Object already initialized';
 	var TypeError$1 = global$4.TypeError;
 	var WeakMap$1 = global$4.WeakMap;
-	var set, get$1, has$1;
+	var set, get$2, has$2;
 	var enforce = function enforce(it) {
-	  return has$1(it) ? get$1(it) : set(it, {});
+	  return has$2(it) ? get$2(it) : set(it, {});
 	};
 	var getterFor = function getterFor(TYPE) {
 	  return function (it) {
 	    var state;
-	    if (!isObject$9(it) || (state = get$1(it)).type !== TYPE) {
+	    if (!isObject$a(it) || (state = get$2(it)).type !== TYPE) {
 	      throw TypeError$1('Incompatible receiver, ' + TYPE + ' required');
 	    }
 	    return state;
@@ -788,10 +788,10 @@
 	    store$2.set(it, metadata);
 	    return metadata;
 	  };
-	  get$1 = function get(it) {
+	  get$2 = function get(it) {
 	    return store$2.get(it) || {};
 	  };
-	  has$1 = function has(it) {
+	  has$2 = function has(it) {
 	    return store$2.has(it);
 	  };
 	} else {
@@ -803,17 +803,17 @@
 	    createNonEnumerableProperty$2(it, STATE, metadata);
 	    return metadata;
 	  };
-	  get$1 = function get(it) {
+	  get$2 = function get(it) {
 	    return hasOwn$7(it, STATE) ? it[STATE] : {};
 	  };
-	  has$1 = function has(it) {
+	  has$2 = function has(it) {
 	    return hasOwn$7(it, STATE);
 	  };
 	}
 	var internalState = {
 	  set: set,
-	  get: get$1,
-	  has: has$1,
+	  get: get$2,
+	  has: has$2,
 	  enforce: enforce,
 	  getterFor: getterFor
 	};
@@ -1185,7 +1185,7 @@
 	});
 
 	var fails$6 = fails$g;
-	var isObject$8 = isObject$e;
+	var isObject$9 = isObject$f;
 	var classof$4 = classofRaw$2;
 	var ARRAY_BUFFER_NON_EXTENSIBLE = arrayBufferNonExtensible;
 
@@ -1198,7 +1198,7 @@
 	// `Object.isExtensible` method
 	// https://tc39.es/ecma262/#sec-object.isextensible
 	var objectIsExtensible = FAILS_ON_PRIMITIVES || ARRAY_BUFFER_NON_EXTENSIBLE ? function isExtensible(it) {
-	  if (!isObject$8(it)) return false;
+	  if (!isObject$9(it)) return false;
 	  if (ARRAY_BUFFER_NON_EXTENSIBLE && classof$4(it) == 'ArrayBuffer') return false;
 	  return $isExtensible ? $isExtensible(it) : true;
 	} : $isExtensible;
@@ -1212,7 +1212,7 @@
 	var $$b = _export;
 	var uncurryThis$d = functionUncurryThis;
 	var hiddenKeys$1 = hiddenKeys$5;
-	var isObject$7 = isObject$e;
+	var isObject$8 = isObject$f;
 	var hasOwn$3 = hasOwnProperty_1;
 	var defineProperty$2 = objectDefineProperty.f;
 	var getOwnPropertyNamesModule = objectGetOwnPropertyNames;
@@ -1235,7 +1235,7 @@
 
 	var fastKey$1 = function fastKey(it, create) {
 	  // return a primitive with prefix
-	  if (!isObject$7(it)) return _typeof(it) == 'symbol' ? it : (typeof it == 'string' ? 'S' : 'P') + it;
+	  if (!isObject$8(it)) return _typeof(it) == 'symbol' ? it : (typeof it == 'string' ? 'S' : 'P') + it;
 	  if (!hasOwn$3(it, METADATA)) {
 	    // can't set metadata to uncaught frozen object
 	    if (!isExtensible$1(it)) return 'F';
@@ -1591,7 +1591,7 @@
 	}() : undefined);
 
 	var isCallable$5 = isCallable$i;
-	var isObject$6 = isObject$e;
+	var isObject$7 = isObject$f;
 	var setPrototypeOf$1 = objectSetPrototypeOf;
 
 	// makes subclassing work correct for wrapped built-ins
@@ -1601,7 +1601,7 @@
 	  // it can work only with native `setPrototypeOf`
 	  setPrototypeOf$1 &&
 	  // we haven't completely correct pre-ES6 way for getting `new.target`, so use this
-	  isCallable$5(NewTarget = dummy.constructor) && NewTarget !== Wrapper && isObject$6(NewTargetPrototype = NewTarget.prototype) && NewTargetPrototype !== Wrapper.prototype) setPrototypeOf$1($this, NewTargetPrototype);
+	  isCallable$5(NewTarget = dummy.constructor) && NewTarget !== Wrapper && isObject$7(NewTargetPrototype = NewTarget.prototype) && NewTargetPrototype !== Wrapper.prototype) setPrototypeOf$1($this, NewTargetPrototype);
 	  return $this;
 	};
 
@@ -1615,7 +1615,7 @@
 	var anInstance$2 = anInstance$3;
 	var isCallable$4 = isCallable$i;
 	var isNullOrUndefined$3 = isNullOrUndefined$7;
-	var isObject$5 = isObject$e;
+	var isObject$6 = isObject$f;
 	var fails$4 = fails$g;
 	var checkCorrectnessOfIteration = checkCorrectnessOfIteration$1;
 	var setToStringTag$2 = setToStringTag$3;
@@ -1634,11 +1634,11 @@
 	      uncurriedNativeMethod(this, value === 0 ? 0 : value);
 	      return this;
 	    } : KEY == 'delete' ? function (key) {
-	      return IS_WEAK && !isObject$5(key) ? false : uncurriedNativeMethod(this, key === 0 ? 0 : key);
+	      return IS_WEAK && !isObject$6(key) ? false : uncurriedNativeMethod(this, key === 0 ? 0 : key);
 	    } : KEY == 'get' ? function get(key) {
-	      return IS_WEAK && !isObject$5(key) ? undefined : uncurriedNativeMethod(this, key === 0 ? 0 : key);
+	      return IS_WEAK && !isObject$6(key) ? undefined : uncurriedNativeMethod(this, key === 0 ? 0 : key);
 	    } : KEY == 'has' ? function has(key) {
-	      return IS_WEAK && !isObject$5(key) ? false : uncurriedNativeMethod(this, key === 0 ? 0 : key);
+	      return IS_WEAK && !isObject$6(key) ? false : uncurriedNativeMethod(this, key === 0 ? 0 : key);
 	    } : function set(key, value) {
 	      uncurriedNativeMethod(this, key === 0 ? 0 : key, value);
 	      return this;
@@ -1869,7 +1869,7 @@
 
 	var fails$2 = fails$g;
 	var isCallable$2 = isCallable$i;
-	var isObject$4 = isObject$e;
+	var isObject$5 = isObject$f;
 	var getPrototypeOf$4 = objectGetPrototypeOf;
 	var defineBuiltIn$1 = defineBuiltIn$5;
 	var wellKnownSymbol$3 = wellKnownSymbol$b;
@@ -1889,7 +1889,7 @@
 	    if (PrototypeOfArrayIteratorPrototype !== Object.prototype) IteratorPrototype$2 = PrototypeOfArrayIteratorPrototype;
 	  }
 	}
-	var NEW_ITERATOR_PROTOTYPE = !isObject$4(IteratorPrototype$2) || fails$2(function () {
+	var NEW_ITERATOR_PROTOTYPE = !isObject$5(IteratorPrototype$2) || fails$2(function () {
 	  var test = {};
 	  // FF44- legacy iterators case
 	  return IteratorPrototype$2[ITERATOR$1].call(test) !== test;
@@ -2280,7 +2280,7 @@
 	// `IsArray` abstract operation
 	// https://tc39.es/ecma262/#sec-isarray
 	// eslint-disable-next-line es/no-array-isarray -- safe
-	var isArray$3 = Array.isArray || function isArray(argument) {
+	var isArray$4 = Array.isArray || function isArray(argument) {
 	  return classof$1(argument) == 'Array';
 	};
 
@@ -2333,9 +2333,9 @@
 	  }) || called;
 	}) ? isConstructorLegacy : isConstructorModern;
 
-	var isArray$2 = isArray$3;
+	var isArray$3 = isArray$4;
 	var isConstructor = isConstructor$1;
-	var isObject$3 = isObject$e;
+	var isObject$4 = isObject$f;
 	var wellKnownSymbol = wellKnownSymbol$b;
 	var SPECIES = wellKnownSymbol('species');
 	var $Array = Array;
@@ -2344,10 +2344,10 @@
 	// https://tc39.es/ecma262/#sec-arrayspeciescreate
 	var arraySpeciesConstructor$1 = function arraySpeciesConstructor(originalArray) {
 	  var C;
-	  if (isArray$2(originalArray)) {
+	  if (isArray$3(originalArray)) {
 	    C = originalArray.constructor;
 	    // cross-realm fallback
-	    if (isConstructor(C) && (C === $Array || isArray$2(C.prototype))) C = undefined;else if (isObject$3(C)) {
+	    if (isConstructor(C) && (C === $Array || isArray$3(C.prototype))) C = undefined;else if (isObject$4(C)) {
 	      C = C[SPECIES];
 	      if (C === null) C = undefined;
 	    }
@@ -2454,7 +2454,7 @@
 	var anInstance = anInstance$3;
 	var anObject$9 = anObject$i;
 	var isNullOrUndefined$1 = isNullOrUndefined$7;
-	var isObject$2 = isObject$e;
+	var isObject$3 = isObject$f;
 	var iterate$1 = iterate$4;
 	var ArrayIterationModule = arrayIteration;
 	var hasOwn = hasOwnProperty_1;
@@ -2526,7 +2526,7 @@
 	      // https://tc39.es/ecma262/#sec-weakset.prototype.delete
 	      'delete': function _delete(key) {
 	        var state = getInternalState(this);
-	        if (!isObject$2(key)) return false;
+	        if (!isObject$3(key)) return false;
 	        var data = getWeakData(key);
 	        if (data === true) return uncaughtFrozenStore(state)['delete'](key);
 	        return data && hasOwn(data, state.id) && delete data[state.id];
@@ -2536,7 +2536,7 @@
 	      // https://tc39.es/ecma262/#sec-weakset.prototype.has
 	      has: function has(key) {
 	        var state = getInternalState(this);
-	        if (!isObject$2(key)) return false;
+	        if (!isObject$3(key)) return false;
 	        var data = getWeakData(key);
 	        if (data === true) return uncaughtFrozenStore(state).has(key);
 	        return data && hasOwn(data, state.id);
@@ -2547,7 +2547,7 @@
 	      // https://tc39.es/ecma262/#sec-weakmap.prototype.get
 	      get: function get(key) {
 	        var state = getInternalState(this);
-	        if (isObject$2(key)) {
+	        if (isObject$3(key)) {
 	          var data = getWeakData(key);
 	          if (data === true) return uncaughtFrozenStore(state).get(key);
 	          return data ? data[state.id] : undefined;
@@ -2576,13 +2576,13 @@
 	var InternalMetadataModule = internalMetadataExports;
 	var collection = collection$2;
 	var collectionWeak = collectionWeak$1;
-	var isObject$1 = isObject$e;
+	var isObject$2 = isObject$f;
 	var enforceInternalState = internalState.enforce;
 	var fails = fails$g;
 	var NATIVE_WEAK_MAP = weakMapBasicDetection;
 	var $Object = Object;
 	// eslint-disable-next-line es/no-array-isarray -- safe
-	var isArray$1 = Array.isArray;
+	var isArray$2 = Array.isArray;
 	// eslint-disable-next-line es/no-object-isextensible -- safe
 	var isExtensible = $Object.isExtensible;
 	// eslint-disable-next-line es/no-object-isfrozen -- safe
@@ -2629,7 +2629,7 @@
 	  var nativeGet = uncurryThis$5(WeakMapPrototype.get);
 	  defineBuiltIns(WeakMapPrototype, {
 	    'delete': function _delete(key) {
-	      if (isObject$1(key) && !isExtensible(key)) {
+	      if (isObject$2(key) && !isExtensible(key)) {
 	        var state = enforceInternalState(this);
 	        if (!state.frozen) state.frozen = new InternalWeakMap();
 	        return nativeDelete(this, key) || state.frozen['delete'](key);
@@ -2637,7 +2637,7 @@
 	      return nativeDelete(this, key);
 	    },
 	    has: function has(key) {
-	      if (isObject$1(key) && !isExtensible(key)) {
+	      if (isObject$2(key) && !isExtensible(key)) {
 	        var state = enforceInternalState(this);
 	        if (!state.frozen) state.frozen = new InternalWeakMap();
 	        return nativeHas(this, key) || state.frozen.has(key);
@@ -2645,7 +2645,7 @@
 	      return nativeHas(this, key);
 	    },
 	    get: function get(key) {
-	      if (isObject$1(key) && !isExtensible(key)) {
+	      if (isObject$2(key) && !isExtensible(key)) {
 	        var state = enforceInternalState(this);
 	        if (!state.frozen) state.frozen = new InternalWeakMap();
 	        return nativeHas(this, key) ? nativeGet(this, key) : state.frozen.get(key);
@@ -2653,7 +2653,7 @@
 	      return nativeGet(this, key);
 	    },
 	    set: function set(key, value) {
-	      if (isObject$1(key) && !isExtensible(key)) {
+	      if (isObject$2(key) && !isExtensible(key)) {
 	        var state = enforceInternalState(this);
 	        if (!state.frozen) state.frozen = new InternalWeakMap();
 	        nativeHas(this, key) ? nativeSet(this, key, value) : state.frozen.set(key, value);
@@ -2666,7 +2666,7 @@
 	  defineBuiltIns(WeakMapPrototype, {
 	    set: function set(key, value) {
 	      var arrayIntegrityLevel;
-	      if (isArray$1(key)) {
+	      if (isArray$2(key)) {
 	        if (isFrozen(key)) arrayIntegrityLevel = FROZEN;else if (isSealed(key)) arrayIntegrityLevel = SEALED;
 	      }
 	      nativeSet(this, key, value);
@@ -3712,7 +3712,7 @@
 	  return Array.isArray(object) && object.some(isPromise);
 	}
 
-	var __awaiter$3 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+	var __awaiter$4 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
 	  function adopt(value) {
 	    return value instanceof P ? value : new P(function (resolve) {
 	      resolve(value);
@@ -3857,7 +3857,7 @@
 	  }
 	};
 	var _saveAsyncResultToSingletonScope = function _saveAsyncResultToSingletonScope(binding, asyncResult) {
-	  return __awaiter$3(void 0, void 0, void 0, function () {
+	  return __awaiter$4(void 0, void 0, void 0, function () {
 	    var result, ex_1;
 	    return __generator$3(this, function (_a) {
 	      switch (_a.label) {
@@ -3945,7 +3945,7 @@
 	  };
 	  return __assign$1.apply(this, arguments);
 	};
-	var __awaiter$2 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+	var __awaiter$3 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
 	  function adopt(value) {
 	    return value instanceof P ? value : new P(function (resolve) {
 	      resolve(value);
@@ -4118,7 +4118,7 @@
 	  return instance;
 	}
 	function createInstanceWithInjectionsAsync(args) {
-	  return __awaiter$2(this, void 0, void 0, function () {
+	  return __awaiter$3(this, void 0, void 0, function () {
 	    var constructorInjections, propertyInjections;
 	    return __generator$2(this, function (_a) {
 	      switch (_a.label) {
@@ -4138,7 +4138,7 @@
 	  });
 	}
 	function possiblyWaitInjections(possiblePromiseinjections) {
-	  return __awaiter$2(this, void 0, void 0, function () {
+	  return __awaiter$3(this, void 0, void 0, function () {
 	    var injections, _i, possiblePromiseinjections_1, injection;
 	    return __generator$2(this, function (_a) {
 	      injections = [];
@@ -4201,7 +4201,7 @@
 	  }
 	}
 
-	var __awaiter$1 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+	var __awaiter$2 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
 	  function adopt(value) {
 	    return value instanceof P ? value : new P(function (resolve) {
 	      resolve(value);
@@ -4427,7 +4427,7 @@
 	  return result;
 	};
 	var _activateContainerAsync = function _activateContainerAsync(activationsIterator, context, resultPromise) {
-	  return __awaiter$1(void 0, void 0, void 0, function () {
+	  return __awaiter$2(void 0, void 0, void 0, function () {
 	    var result, activation;
 	    return __generator$1(this, function (_a) {
 	      switch (_a.label) {
@@ -5041,7 +5041,7 @@
 	  };
 	  return __assign.apply(this, arguments);
 	};
-	var __awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+	var __awaiter$1 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
 	  function adopt(value) {
 	    return value instanceof P ? value : new P(function (resolve) {
 	      resolve(value);
@@ -5240,7 +5240,7 @@
 	    for (var _i = 0; _i < arguments.length; _i++) {
 	      modules[_i] = arguments[_i];
 	    }
-	    return __awaiter(this, void 0, void 0, function () {
+	    return __awaiter$1(this, void 0, void 0, function () {
 	      var getHelpers, _a, modules_2, currentModule, containerModuleHelpers;
 	      return __generator(this, function (_b) {
 	        switch (_b.label) {
@@ -5282,7 +5282,7 @@
 	    for (var _i = 0; _i < arguments.length; _i++) {
 	      modules[_i] = arguments[_i];
 	    }
-	    return __awaiter(this, void 0, void 0, function () {
+	    return __awaiter$1(this, void 0, void 0, function () {
 	      var _a, modules_3, module_1, deactivations;
 	      return __generator(this, function (_b) {
 	        switch (_b.label) {
@@ -5318,7 +5318,7 @@
 	    return this.bind(serviceIdentifier);
 	  };
 	  Container.prototype.rebindAsync = function (serviceIdentifier) {
-	    return __awaiter(this, void 0, void 0, function () {
+	    return __awaiter$1(this, void 0, void 0, function () {
 	      return __generator(this, function (_a) {
 	        switch (_a.label) {
 	          case 0:
@@ -5338,7 +5338,7 @@
 	    this._removeServiceFromDictionary(serviceIdentifier);
 	  };
 	  Container.prototype.unbindAsync = function (serviceIdentifier) {
-	    return __awaiter(this, void 0, void 0, function () {
+	    return __awaiter$1(this, void 0, void 0, function () {
 	      var bindings;
 	      return __generator(this, function (_a) {
 	        switch (_a.label) {
@@ -5364,7 +5364,7 @@
 	    this._bindingDictionary = new Lookup();
 	  };
 	  Container.prototype.unbindAllAsync = function () {
-	    return __awaiter(this, void 0, void 0, function () {
+	    return __awaiter$1(this, void 0, void 0, function () {
 	      var promises;
 	      var _this = this;
 	      return __generator(this, function (_a) {
@@ -5453,7 +5453,7 @@
 	    return this._getButThrowIfAsync(getArgs);
 	  };
 	  Container.prototype.getAsync = function (serviceIdentifier) {
-	    return __awaiter(this, void 0, void 0, function () {
+	    return __awaiter$1(this, void 0, void 0, function () {
 	      var getArgs;
 	      return __generator(this, function (_a) {
 	        getArgs = this._getNotAllArgs(serviceIdentifier, false);
@@ -5466,7 +5466,7 @@
 	    return this._getButThrowIfAsync(getArgs);
 	  };
 	  Container.prototype.getTaggedAsync = function (serviceIdentifier, key, value) {
-	    return __awaiter(this, void 0, void 0, function () {
+	    return __awaiter$1(this, void 0, void 0, function () {
 	      var getArgs;
 	      return __generator(this, function (_a) {
 	        getArgs = this._getNotAllArgs(serviceIdentifier, false, key, value);
@@ -5550,7 +5550,7 @@
 	    }
 	  };
 	  Container.prototype._handleDeactivationError = function (asyncResult, constructor) {
-	    return __awaiter(this, void 0, void 0, function () {
+	    return __awaiter$1(this, void 0, void 0, function () {
 	      var ex_1;
 	      return __generator(this, function (_a) {
 	        switch (_a.label) {
@@ -5583,7 +5583,7 @@
 	    }
 	  };
 	  Container.prototype._deactivateContainerAsync = function (instance, deactivationsIterator) {
-	    return __awaiter(this, void 0, void 0, function () {
+	    return __awaiter$1(this, void 0, void 0, function () {
 	      var deactivation;
 	      return __generator(this, function (_a) {
 	        switch (_a.label) {
@@ -5736,7 +5736,7 @@
 	    }
 	  };
 	  Container.prototype._deactivateSingletonsAsync = function (bindings) {
-	    return __awaiter(this, void 0, void 0, function () {
+	    return __awaiter$1(this, void 0, void 0, function () {
 	      var _this = this;
 	      return __generator(this, function (_a) {
 	        switch (_a.label) {
@@ -5759,7 +5759,7 @@
 	    }
 	  };
 	  Container.prototype._propagateContainerDeactivationThenBindingAndPreDestroyAsync = function (binding, instance, constructor) {
-	    return __awaiter(this, void 0, void 0, function () {
+	    return __awaiter$1(this, void 0, void 0, function () {
 	      return __generator(this, function (_a) {
 	        switch (_a.label) {
 	          case 0:
@@ -5799,7 +5799,7 @@
 	    return this._preDestroy(constructor, instance);
 	  };
 	  Container.prototype._bindingDeactivationAndPreDestroyAsync = function (binding, instance, constructor) {
-	    return __awaiter(this, void 0, void 0, function () {
+	    return __awaiter$1(this, void 0, void 0, function () {
 	      return __generator(this, function (_a) {
 	        switch (_a.label) {
 	          case 0:
@@ -5955,6 +5955,14 @@
 
 	var postConstruct = propertyEventDecorator(POST_CONSTRUCT, MULTIPLE_POST_CONSTRUCT_METHODS);
 
+	function __rest(s, e) {
+	  var t = {};
+	  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+	  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+	    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+	  }
+	  return t;
+	}
 	function __decorate(decorators, target, key, desc) {
 	  var c = arguments.length,
 	    r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
@@ -5970,6 +5978,33 @@
 	function __metadata(metadataKey, metadataValue) {
 	  if ((typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
 	}
+	function __awaiter(thisArg, _arguments, P, generator) {
+	  function adopt(value) {
+	    return value instanceof P ? value : new P(function (resolve) {
+	      resolve(value);
+	    });
+	  }
+	  return new (P || (P = Promise))(function (resolve, reject) {
+	    function fulfilled(value) {
+	      try {
+	        step(generator.next(value));
+	      } catch (e) {
+	        reject(e);
+	      }
+	    }
+	    function rejected(value) {
+	      try {
+	        step(generator["throw"](value));
+	      } catch (e) {
+	        reject(e);
+	      }
+	    }
+	    function step(result) {
+	      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+	    }
+	    step((generator = generator.apply(thisArg, _arguments || [])).next());
+	  });
+	}
 	typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
 	  var e = new Error(message);
 	  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
@@ -5997,6 +6032,11 @@
 	        .inSingletonScope()
 	        .whenTargetNamed(id);
 	}
+	function bindContributionProviderNoSingletonScope(bind, id) {
+	    bind(ContributionProvider)
+	        .toDynamicValue(({ container }) => new ContributionProviderCache(id, container))
+	        .whenTargetNamed(id);
+	}
 
 	class Hook {
 	    constructor(args, name) {
@@ -6322,6 +6362,24 @@
 	        }
 	        return this.envContribution.createDom(params);
 	    }
+	    getElementTop(dom, baseWindow = false) {
+	        if (!this._env) {
+	            this.setEnv('browser');
+	        }
+	        return this.envContribution.getElementTop(dom, baseWindow);
+	    }
+	    getElementLeft(dom, baseWindow = false) {
+	        if (!this._env) {
+	            this.setEnv('browser');
+	        }
+	        return this.envContribution.getElementLeft(dom, baseWindow);
+	    }
+	    getElementTopLeft(dom, baseWindow = false) {
+	        if (!this._env) {
+	            this.setEnv('browser');
+	        }
+	        return this.envContribution.getElementTopLeft(dom, baseWindow);
+	    }
 	};
 	exports.DefaultGlobal = __decorate([
 	    injectable(),
@@ -6650,79 +6708,96 @@
 	var isType = function isType(value, type) {
 	  return Object.prototype.toString.call(value) === "[object ".concat(type, "]");
 	};
+	var isType$1 = isType;
 
 	var isBoolean = function isBoolean(value) {
 	  var fuzzy = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
-	  return fuzzy ? "boolean" == typeof value : !0 === value || !1 === value || isType(value, "Boolean");
+	  return fuzzy ? "boolean" == typeof value : !0 === value || !1 === value || isType$1(value, "Boolean");
 	};
+	var isBoolean$1 = isBoolean;
 
 	var isFunction = function isFunction(value) {
 	  return "function" == typeof value;
 	};
+	var isFunction$1 = isFunction;
 
 	var isNil = function isNil(value) {
 	  return null == value;
 	};
+	var isNil$1 = isNil;
 
 	var isValid = function isValid(value) {
 	  return null != value;
 	};
+	var isValid$1 = isValid;
 
 	var isObject = function isObject(value) {
 	  var type = _typeof(value);
 	  return null !== value && "object" === type || "function" === type;
 	};
+	var isObject$1 = isObject;
 
 	var isUndefined = function isUndefined(value) {
 	  return void 0 === value;
 	};
+	var isUndefined$1 = isUndefined;
 
 	var isString = function isString(value) {
 	  var fuzzy = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
 	  var type = _typeof(value);
-	  return fuzzy ? "string" === type : "string" === type || isType(value, "String");
+	  return fuzzy ? "string" === type : "string" === type || isType$1(value, "String");
 	};
+	var isString$1 = isString;
 
 	var isArray = function isArray(value) {
-	  return Array.isArray ? Array.isArray(value) : isType(value, "Array");
+	  return Array.isArray ? Array.isArray(value) : isType$1(value, "Array");
 	};
+	var isArray$1 = isArray;
 
 	var isDate = function isDate(value) {
-	  return isType(value, "Date");
+	  return isType$1(value, "Date");
 	};
+	var isDate$1 = isDate;
 
-	var isNumber = function isNumber(value) {
+	var isNumber$1 = function isNumber(value) {
 	  var fuzzy = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
 	  var type = _typeof(value);
-	  return fuzzy ? "number" === type : "number" === type || isType(value, "Number");
+	  return fuzzy ? "number" === type : "number" === type || isType$1(value, "Number");
 	};
+	var isNumber$2 = isNumber$1;
 
 	var isValidNumber = function isValidNumber(value) {
-	  return isNumber(value) && Number.isFinite(value);
+	  return isNumber$2(value) && Number.isFinite(value);
 	};
+	var isValidNumber$1 = isValidNumber;
 
 	var isValidUrl = function isValidUrl(value) {
 	  return new RegExp(/^(http(s)?:\/\/)\w+[^\s]+(\.[^\s]+){1,}$/).test(value);
 	};
+	var isValidUrl$1 = isValidUrl;
 
 	var isRegExp = function isRegExp(value) {
-	  return isType(value, "RegExp");
+	  return isType$1(value, "RegExp");
 	};
+	var isRegExp$1 = isRegExp;
 
 	var isBase64 = function isBase64(value) {
 	  return new RegExp(/^data:image\/(?:gif|png|jpeg|bmp|webp)(?:;charset=utf-8)?;base64,(?:[A-Za-z0-9]|[+/])+={0,2}/g).test(value);
 	};
+	var isBase64$1 = isBase64;
 
 	var get = function get(obj, path, defaultValue) {
-	  var paths = isString(path) ? path.split(".") : path;
+	  var paths = isString$1(path) ? path.split(".") : path;
 	  for (var p = 0; p < paths.length; p++) obj = obj ? obj[paths[p]] : void 0;
 	  return void 0 === obj ? defaultValue : obj;
 	};
+	var get$1 = get;
 
 	var hasOwnProperty = Object.prototype.hasOwnProperty,
 	  has = function has(object, key) {
 	    return null != object && hasOwnProperty.call(object, key);
 	  };
+	var has$1 = has;
 
 	function getRegExpFlags(re) {
 	  var flags = "";
@@ -6739,7 +6814,7 @@
 	    if (0 === depth) return parent;
 	    var child;
 	    if ("object" != _typeof(parent)) return parent;
-	    if (isArray(parent) ? child = [] : isRegExp(parent) ? (child = new RegExp(parent.source, getRegExpFlags(parent)), parent.lastIndex && (child.lastIndex = parent.lastIndex)) : child = isDate(parent) ? new Date(parent.getTime()) : void 0 === prototype ? Object.create(Object.getPrototypeOf(parent)) : Object.create(prototype), circular) {
+	    if (isArray$1(parent) ? child = [] : isRegExp$1(parent) ? (child = new RegExp(parent.source, getRegExpFlags(parent)), parent.lastIndex && (child.lastIndex = parent.lastIndex)) : child = isDate$1(parent) ? new Date(parent.getTime()) : void 0 === prototype ? Object.create(Object.getPrototypeOf(parent)) : Object.create(prototype), circular) {
 	      var index = allParents.indexOf(parent);
 	      if (-1 !== index) return allChildren[index];
 	      allParents.push(parent), allChildren.push(child);
@@ -6750,7 +6825,7 @@
 	}
 
 	function arrayEqual(a, b) {
-	  if (!isArray(a) || !isArray(b)) return !1;
+	  if (!isArray$1(a) || !isArray$1(b)) return !1;
 	  if (a.length !== b.length) return !1;
 	  for (var i = 0; i < a.length; i++) if (a[i] !== b[i]) return !1;
 	  return !0;
@@ -6766,14 +6841,6 @@
 	  return Math.abs(a - b) <= Math.max(abs, rel);
 	}
 
-	var hasRaf = !1;
-	try {
-	  hasRaf = "function" == typeof requestAnimationFrame && "function" == typeof cancelAnimationFrame;
-	} catch (err) {
-	  hasRaf = !1;
-	}
-	hasRaf = !1;
-
 	var epsilon = 1e-12;
 	var pi = Math.PI;
 	var halfPi$1 = pi / 2;
@@ -6834,12 +6901,12 @@
 	  }, {
 	    key: "add",
 	    value: function add(point) {
-	      return isNumber(point) ? (this.x += point, void (this.y += point)) : (this.x += point.x, this.y += point.y, this);
+	      return isNumber$2(point) ? (this.x += point, void (this.y += point)) : (this.x += point.x, this.y += point.y, this);
 	    }
 	  }, {
 	    key: "sub",
 	    value: function sub(point) {
-	      return isNumber(point) ? (this.x -= point, void (this.y -= point)) : (this.x -= point.x, this.y -= point.y, this);
+	      return isNumber$2(point) ? (this.x -= point, void (this.y -= point)) : (this.x -= point.x, this.y -= point.y, this);
 	    }
 	  }, {
 	    key: "multi",
@@ -6943,7 +7010,7 @@
 	    key: "expand",
 	    value: function expand() {
 	      var d = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-	      return isArray(d) ? (this.y1 -= d[0], this.x2 += d[1], this.y2 += d[2], this.x1 -= d[3]) : (this.x1 -= d, this.y1 -= d, this.x2 += d, this.y2 += d), this;
+	      return isArray$1(d) ? (this.y1 -= d[0], this.x2 += d[1], this.y2 += d[2], this.x1 -= d[3]) : (this.x1 -= d, this.y1 -= d, this.x2 += d, this.y2 += d), this;
 	    }
 	  }, {
 	    key: "round",
@@ -7368,17 +7435,17 @@
 	var TextMeasure = /*#__PURE__*/function () {
 	  function TextMeasure(option, textSpec) {
 	    _classCallCheck(this, TextMeasure);
-	    this._numberCharSize = null, this._fullCharSize = null, this._letterCharSize = null, this._specialCharSizeMap = {}, this._canvas = null, this._context = null, this._contextSaved = !1, this._notSupportCanvas = !1, this._notSupportVRender = !1, this._userSpec = {}, this.specialCharSet = "-/: .,@%'\"~", this._option = option, this._userSpec = null != textSpec ? textSpec : {}, this.textSpec = this._initSpec(), isValid(option.specialCharSet) && (this.specialCharSet = option.specialCharSet), this._standardMethod = isValid(option.getTextBounds) ? this.fullMeasure.bind(this) : this.measureWithNaiveCanvas.bind(this);
+	    this._numberCharSize = null, this._fullCharSize = null, this._letterCharSize = null, this._specialCharSizeMap = {}, this._canvas = null, this._context = null, this._contextSaved = !1, this._notSupportCanvas = !1, this._notSupportVRender = !1, this._userSpec = {}, this.specialCharSet = "-/: .,@%'\"~", this._option = option, this._userSpec = null != textSpec ? textSpec : {}, this.textSpec = this._initSpec(), isValid$1(option.specialCharSet) && (this.specialCharSet = option.specialCharSet), this._standardMethod = isValid$1(option.getTextBounds) ? this.fullMeasure.bind(this) : this.measureWithNaiveCanvas.bind(this);
 	  }
 	  _createClass(TextMeasure, [{
 	    key: "initContext",
 	    value: function initContext() {
 	      if (this._notSupportCanvas) return !1;
-	      if (isNil(this._canvas) && (isValid(this._option.getCanvasForMeasure) && (this._canvas = this._option.getCanvasForMeasure()), isNil(this._canvas) && "undefined" != typeof window && void 0 !== window.document && isValid(globalThis.document) && (this._canvas = globalThis.document.createElement("canvas"))), isNil(this._context) && isValid(this._canvas)) {
+	      if (isNil$1(this._canvas) && (isValid$1(this._option.getCanvasForMeasure) && (this._canvas = this._option.getCanvasForMeasure()), isNil$1(this._canvas) && "undefined" != typeof window && void 0 !== window.document && isValid$1(globalThis.document) && (this._canvas = globalThis.document.createElement("canvas"))), isNil$1(this._context) && isValid$1(this._canvas)) {
 	        var context = this._canvas.getContext("2d");
-	        isValid(context) && (context.save(), context.font = getContextFont$1(this.textSpec), this._contextSaved = !0, this._context = context);
+	        isValid$1(context) && (context.save(), context.font = getContextFont$1(this.textSpec), this._contextSaved = !0, this._context = context);
 	      }
-	      return !isNil(this._context) || (this._notSupportCanvas = !0, !1);
+	      return !isNil$1(this._context) || (this._notSupportCanvas = !0, !1);
 	    }
 	  }, {
 	    key: "_initSpec",
@@ -7438,11 +7505,11 @@
 	  }, {
 	    key: "fullMeasure",
 	    value: function fullMeasure(text) {
-	      if (isNil(text)) return {
+	      if (isNil$1(text)) return {
 	        width: 0,
 	        height: 0
 	      };
-	      if (isNil(this._option.getTextBounds) || !this._notSupportVRender) return this.measureWithNaiveCanvas(text);
+	      if (isNil$1(this._option.getTextBounds) || !this._notSupportVRender) return this.measureWithNaiveCanvas(text);
 	      var _this$textSpec = this.textSpec,
 	        fontFamily = _this$textSpec.fontFamily,
 	        fontSize = _this$textSpec.fontSize,
@@ -7507,7 +7574,7 @@
 	      for (var i = 0; i < text.length; i++) {
 	        var _char = text[i];
 	        var size = this._measureSpecialChar(_char);
-	        isNil(size) && TextMeasure.NUMBERS_CHAR_SET.includes(_char) && (size = this._measureNumberChar()), isNil(size) && ["F", "W"].includes(eastAsianCharacterInfo(_char)) && (size = this._measureFullSizeChar()), isNil(size) && (size = this._measureLetterChar()), totalSize.width += size.width, totalSize.height = Math.max(totalSize.height, size.height);
+	        isNil$1(size) && TextMeasure.NUMBERS_CHAR_SET.includes(_char) && (size = this._measureNumberChar()), isNil$1(size) && ["F", "W"].includes(eastAsianCharacterInfo(_char)) && (size = this._measureFullSizeChar()), isNil$1(size) && (size = this._measureLetterChar()), totalSize.width += size.width, totalSize.height = Math.max(totalSize.height, size.height);
 	      }
 	      return totalSize;
 	    }
@@ -7543,9 +7610,9 @@
 	          width: 0,
 	          height: 0
 	        };
-	      if (isNil(text)) return defaultResult;
-	      if (isArray(text)) {
-	        var textArr = text.filter(isValid).map(function (s) {
+	      if (isNil$1(text)) return defaultResult;
+	      if (isArray$1(text)) {
+	        var textArr = text.filter(isValid$1).map(function (s) {
 	          return s.toString();
 	        });
 	        return 0 === textArr.length ? defaultResult : 1 === textArr.length ? processor(textArr[0]) : {
@@ -7560,7 +7627,7 @@
 	  }, {
 	    key: "_measureNumberChar",
 	    value: function _measureNumberChar() {
-	      if (isNil(this._numberCharSize)) {
+	      if (isNil$1(this._numberCharSize)) {
 	        var numberBounds = this._standardMethod(TextMeasure.NUMBERS_CHAR_SET);
 	        this._numberCharSize = {
 	          width: numberBounds.width / TextMeasure.NUMBERS_CHAR_SET.length,
@@ -7572,12 +7639,12 @@
 	  }, {
 	    key: "_measureFullSizeChar",
 	    value: function _measureFullSizeChar() {
-	      return isNil(this._fullCharSize) && (this._fullCharSize = this._standardMethod(TextMeasure.FULL_SIZE_CHAR)), this._fullCharSize;
+	      return isNil$1(this._fullCharSize) && (this._fullCharSize = this._standardMethod(TextMeasure.FULL_SIZE_CHAR)), this._fullCharSize;
 	    }
 	  }, {
 	    key: "_measureLetterChar",
 	    value: function _measureLetterChar() {
-	      if (isNil(this._letterCharSize)) {
+	      if (isNil$1(this._letterCharSize)) {
 	        var alphabetBounds = this._standardMethod(TextMeasure.ALPHABET_CHAR_SET);
 	        this._letterCharSize = {
 	          width: alphabetBounds.width / TextMeasure.ALPHABET_CHAR_SET.length,
@@ -7589,23 +7656,18 @@
 	  }, {
 	    key: "_measureSpecialChar",
 	    value: function _measureSpecialChar(_char3) {
-	      return isValid(this._specialCharSizeMap[_char3]) ? this._specialCharSizeMap[_char3] : this.specialCharSet.includes(_char3) ? (this._specialCharSizeMap[_char3] = this._standardMethod(_char3), this._specialCharSizeMap[_char3]) : null;
+	      return isValid$1(this._specialCharSizeMap[_char3]) ? this._specialCharSizeMap[_char3] : this.specialCharSet.includes(_char3) ? (this._specialCharSizeMap[_char3] = this._standardMethod(_char3), this._specialCharSizeMap[_char3]) : null;
 	    }
 	  }, {
 	    key: "release",
 	    value: function release() {
-	      isValid(this._canvas) && (this._canvas = null), isValid(this._context) && (this._contextSaved && (this._context.restore(), this._contextSaved = !1), this._context = null);
+	      isValid$1(this._canvas) && (this._canvas = null), isValid$1(this._context) && (this._contextSaved && (this._context.restore(), this._contextSaved = !1), this._context = null);
 	    }
 	  }]);
 	  return TextMeasure;
 	}();
 	TextMeasure.ALPHABET_CHAR_SET = "abcdefghijklmnopqrstuvwxyz", TextMeasure.NUMBERS_CHAR_SET = "0123456789", TextMeasure.FULL_SIZE_CHAR = "字";
 
-	var LoggerLevel;
-	!function (LoggerLevel) {
-	  LoggerLevel[LoggerLevel.None = 0] = "None", LoggerLevel[LoggerLevel.Error = 1] = "Error", LoggerLevel[LoggerLevel.Warn = 2] = "Warn", LoggerLevel[LoggerLevel.Info = 3] = "Info", LoggerLevel[LoggerLevel.Debug = 4] = "Debug";
-	}(LoggerLevel || (LoggerLevel = {}));
-
 	const circleThreshold = tau - 1e-8;
 	class BoundsContext {
 	    constructor(bounds) {
@@ -7823,13 +7885,15 @@
 	    UpdateTag[UpdateTag["UPDATE_SHAPE"] = 2] = "UPDATE_SHAPE";
 	    UpdateTag[UpdateTag["CLEAR_SHAPE"] = 253] = "CLEAR_SHAPE";
 	    UpdateTag[UpdateTag["UPDATE_SHAPE_AND_BOUNDS"] = 3] = "UPDATE_SHAPE_AND_BOUNDS";
-	    UpdateTag[UpdateTag["INIT"] = 51] = "INIT";
+	    UpdateTag[UpdateTag["INIT"] = 179] = "INIT";
 	    UpdateTag[UpdateTag["CLEAR_BOUNDS"] = 254] = "CLEAR_BOUNDS";
 	    UpdateTag[UpdateTag["UPDATE_GLOBAL_MATRIX"] = 32] = "UPDATE_GLOBAL_MATRIX";
 	    UpdateTag[UpdateTag["CLEAR_GLOBAL_MATRIX"] = 223] = "CLEAR_GLOBAL_MATRIX";
 	    UpdateTag[UpdateTag["UPDATE_LOCAL_MATRIX"] = 16] = "UPDATE_LOCAL_MATRIX";
 	    UpdateTag[UpdateTag["CLEAR_LOCAL_MATRIX"] = 239] = "CLEAR_LOCAL_MATRIX";
 	    UpdateTag[UpdateTag["UPDATE_GLOBAL_LOCAL_MATRIX"] = 48] = "UPDATE_GLOBAL_LOCAL_MATRIX";
+	    UpdateTag[UpdateTag["UPDATE_LAYOUT"] = 128] = "UPDATE_LAYOUT";
+	    UpdateTag[UpdateTag["CLEAR_LAYOUT"] = 127] = "CLEAR_LAYOUT";
 	})(exports.UpdateTag || (exports.UpdateTag = {}));
 	exports.IContainPointMode = void 0;
 	(function (IContainPointMode) {
@@ -9264,6 +9328,7 @@
 	    angle: 0,
 	    alpha: 0,
 	    beta: 0,
+	    scaleCenter: [0, 0],
 	    anchor: [0, 0],
 	    anchor3d: [0, 0],
 	    postMatrix: new Matrix()
@@ -9287,11 +9352,7 @@
 	    strokeBoundsBuffer: 2,
 	    stroke: false
 	};
-	const DefaultStrokeStyle = {
-	    outerBorder: { ...commonStroke, distance: 0 },
-	    innerBorder: { ...commonStroke, distance: 0 },
-	    ...commonStroke
-	};
+	const DefaultStrokeStyle = Object.assign({ outerBorder: Object.assign(Object.assign({}, commonStroke), { distance: 0 }), innerBorder: Object.assign(Object.assign({}, commonStroke), { distance: 0 }) }, commonStroke);
 	const DefaultTextStyle = {
 	    text: '',
 	    maxLineWidth: Infinity,
@@ -9309,44 +9370,17 @@
 	    lineThrough: 0,
 	    scaleIn3d: false,
 	    direction: 'horizontal',
-	    wordBreak: 'break-all'
-	};
-	const DefaultStyle = {
-	    opacity: 1,
-	    background: null,
-	    texture: null,
-	    textureColor: 'black',
-	    textureSize: 10,
-	    texturePadding: 2,
-	    backgroundMode: 0,
-	    blur: 0,
-	    cursor: null,
-	    html: null,
-	    ...DefaultFillStyle,
-	    ...DefaultStrokeStyle,
-	    ...DefaultLayout
+	    wordBreak: 'break-all',
+	    ignoreBuf: false
 	};
+	const DefaultStyle = Object.assign(Object.assign(Object.assign({ opacity: 1, background: null, texture: null, textureColor: 'black', textureSize: 10, texturePadding: 2, backgroundMode: 0, blur: 0, cursor: null, html: null }, DefaultFillStyle), DefaultStrokeStyle), DefaultLayout);
 	const DefaultConnectAttribute = {
 	    connectedType: 'none',
 	    connectedStyle: {},
 	    connectedX: NaN,
 	    connectedY: NaN
 	};
-	const DefaultAttribute = {
-	    strokeSeg: null,
-	    pickable: true,
-	    childrenPickable: true,
-	    visible: true,
-	    zIndex: 0,
-	    layout: null,
-	    boundsPadding: 0,
-	    pickMode: 'accurate',
-	    customPickShape: null,
-	    boundsMode: 'accurate',
-	    keepDirIn3d: true,
-	    ...DefaultStyle,
-	    ...DefaultTransform
-	};
+	const DefaultAttribute = Object.assign(Object.assign({ strokeSeg: null, pickable: true, childrenPickable: true, visible: true, zIndex: 0, layout: null, boundsPadding: 0, pickMode: 'accurate', customPickShape: null, boundsMode: 'accurate', keepDirIn3d: true, shadowRootIdx: 1 }, DefaultStyle), DefaultTransform);
 	function addAttributeToPrototype(obj, c, keys) {
 	    keys.forEach(key => {
 	        c.prototype[key] = obj[key];
@@ -9355,145 +9389,23 @@
 	function rewriteProto(obj, c) {
 	    Object.setPrototypeOf(obj, c);
 	}
-	const DefaultArcAttribute = {
-	    ...DefaultAttribute,
-	    startAngle: 0,
-	    endAngle: pi2,
-	    innerRadius: 0,
-	    outerRadius: 1,
-	    cornerRadius: 0,
-	    padRadius: 0,
-	    padAngle: 0,
-	    cap: false,
-	    forceShowCap: false
-	};
-	const DefaultAreaAttribute = {
-	    ...DefaultAttribute,
-	    ...DefaultConnectAttribute,
-	    points: [],
-	    segments: [],
-	    curveType: 'linear',
-	    clipRange: 1
-	};
-	const DefaultCircleAttribute = {
-	    ...DefaultAttribute,
-	    radius: 1,
-	    startAngle: 0,
-	    endAngle: pi2
-	};
-	const DefaultGroupAttribute = {
-	    ...DefaultAttribute,
-	    width: 0,
-	    height: 0,
-	    cornerRadius: 0,
-	    path: [],
-	    clip: false,
-	    visibleAll: true,
-	    display: 'relative',
-	    flexDirection: 'row',
-	    flexWrap: 'wrap',
-	    justifyContent: 'flex-start',
-	    alignItems: 'flex-start',
-	    alignContent: 'flex-start'
-	};
-	const DefaultGlyphAttribute = {
-	    ...DefaultAttribute,
-	    path: '',
-	    width: 0,
-	    height: 0,
-	    cornerRadius: 0,
-	    clip: false
-	};
-	const DefaultLineAttribute = {
-	    ...DefaultAttribute,
-	    ...DefaultConnectAttribute,
-	    points: [],
-	    segments: [],
-	    curveType: 'linear',
-	    clipRange: 1,
-	    clipRangeByDimension: 'default'
-	};
-	const DefaultPathAttribute = {
-	    ...DefaultAttribute,
-	    path: new CustomPath2D(),
-	    customPath: () => {
+	const DefaultArcAttribute = Object.assign(Object.assign({}, DefaultAttribute), { startAngle: 0, endAngle: pi2, innerRadius: 0, outerRadius: 1, cornerRadius: 0, padRadius: 0, padAngle: 0, cap: false, forceShowCap: false });
+	const DefaultAreaAttribute = Object.assign(Object.assign(Object.assign({}, DefaultAttribute), DefaultConnectAttribute), { points: [], segments: [], curveType: 'linear', clipRange: 1 });
+	const DefaultCircleAttribute = Object.assign(Object.assign({}, DefaultAttribute), { radius: 1, startAngle: 0, endAngle: pi2 });
+	const DefaultGroupAttribute = Object.assign(Object.assign({}, DefaultAttribute), { width: 0, height: 0, cornerRadius: 0, path: [], clip: false, visibleAll: true, display: 'relative', flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'flex-start', alignItems: 'flex-start', alignContent: 'flex-start' });
+	const DefaultGlyphAttribute = Object.assign(Object.assign({}, DefaultAttribute), { path: '', width: 0, height: 0, cornerRadius: 0, clip: false });
+	const DefaultLineAttribute = Object.assign(Object.assign(Object.assign({}, DefaultAttribute), DefaultConnectAttribute), { points: [], segments: [], curveType: 'linear', clipRange: 1, clipRangeByDimension: 'default', closePath: false });
+	const DefaultPathAttribute = Object.assign(Object.assign({}, DefaultAttribute), { path: new CustomPath2D(), customPath: () => {
 	        console.warn('空函数');
-	    }
-	};
-	const DefaultPolygonAttribute = {
-	    ...DefaultAttribute,
-	    points: [],
-	    cornerRadius: 0
-	};
-	const DefaultRectAttribute = {
-	    ...DefaultAttribute,
-	    width: 0,
-	    height: 0,
-	    strokeBoundsBuffer: 0,
-	    cornerRadius: 0
-	};
-	const DefaultRect3dAttribute = {
-	    ...DefaultAttribute,
-	    width: 0,
-	    height: 0,
-	    cornerRadius: 0,
-	    length: 0
-	};
-	const DefaultSymbolAttribute = {
-	    ...DefaultAttribute,
-	    symbolType: 'circle',
-	    size: 10,
-	    keepDirIn3d: true
-	};
-	const DefaultTextAttribute = {
-	    ...DefaultAttribute,
-	    ...DefaultTextStyle,
-	    strokeBoundsBuffer: 0,
-	    keepDirIn3d: true
-	};
-	const DefaultRichTextAttribute = {
-	    ...DefaultAttribute,
-	    width: 300,
-	    height: 300,
-	    ellipsis: true,
-	    wordBreak: 'break-word',
-	    verticalDirection: 'top',
-	    textAlign: 'left',
-	    textBaseline: 'top',
-	    layoutDirection: 'horizontal',
-	    textConfig: [],
-	    maxHeight: undefined,
-	    maxWidth: undefined,
-	    singleLine: false
-	};
-	const DefaultImageAttribute = {
-	    repeatX: 'no-repeat',
-	    repeatY: 'no-repeat',
-	    image: '',
-	    width: 0,
-	    height: 0,
-	    ...DefaultAttribute,
-	    fill: true
-	};
-	const DefaultRichTextIconAttribute = {
-	    ...DefaultImageAttribute,
-	    backgroundShowMode: 'never',
-	    backgroundWidth: 0,
-	    backgroundHeight: 0,
-	    textAlign: 'left',
-	    textBaseline: 'middle',
-	    direction: 'horizontal',
-	    margin: 0,
-	    id: '',
-	    width: 20,
-	    height: 20,
-	    backgroundFill: 'rgba(101, 117, 168, 0.1)',
-	    backgroundFillOpacity: 1,
-	    backgroundStroke: false,
-	    backgroundStrokeOpacity: 1,
-	    backgroundRadius: 4,
-	    opacity: 1
-	};
+	    } });
+	const DefaultPolygonAttribute = Object.assign(Object.assign({}, DefaultAttribute), { points: [], cornerRadius: 0 });
+	const DefaultRectAttribute = Object.assign(Object.assign({}, DefaultAttribute), { width: 0, height: 0, strokeBoundsBuffer: 0, cornerRadius: 0 });
+	const DefaultRect3dAttribute = Object.assign(Object.assign({}, DefaultAttribute), { width: 0, height: 0, cornerRadius: 0, length: 0 });
+	const DefaultSymbolAttribute = Object.assign(Object.assign({}, DefaultAttribute), { symbolType: 'circle', size: 10, keepDirIn3d: true });
+	const DefaultTextAttribute = Object.assign(Object.assign(Object.assign({}, DefaultAttribute), DefaultTextStyle), { strokeBoundsBuffer: 0, keepDirIn3d: true });
+	const DefaultRichTextAttribute = Object.assign(Object.assign({}, DefaultAttribute), { width: 300, height: 300, ellipsis: true, wordBreak: 'break-word', verticalDirection: 'top', textAlign: 'left', textBaseline: 'top', layoutDirection: 'horizontal', textConfig: [], maxHeight: undefined, maxWidth: undefined, singleLine: false });
+	const DefaultImageAttribute = Object.assign(Object.assign({ repeatX: 'no-repeat', repeatY: 'no-repeat', image: '', width: 0, height: 0 }, DefaultAttribute), { fill: true, cornerRadius: 0 });
+	const DefaultRichTextIconAttribute = Object.assign(Object.assign({}, DefaultImageAttribute), { backgroundShowMode: 'never', backgroundWidth: 0, backgroundHeight: 0, textAlign: 'left', textBaseline: 'middle', direction: 'horizontal', margin: 0, id: '', width: 20, height: 20, backgroundFill: 'rgba(101, 117, 168, 0.1)', backgroundFillOpacity: 1, backgroundStroke: false, backgroundStrokeOpacity: 1, backgroundRadius: 4, opacity: 1 });
 
 	class Application {
 	}
@@ -9743,7 +9655,7 @@
 	                    clipedData.width = this.measureTextWidth(clipedData.str, options);
 	                }
 	            }
-	            out.push({ ...verticalList[i], text: clipedData.str, width: clipedData.width });
+	            out.push(Object.assign(Object.assign({}, verticalList[i]), { text: clipedData.str, width: clipedData.width }));
 	            length += clipedData.width;
 	        }
 	        return {
@@ -9888,6 +9800,9 @@
 	function isNotAroundZero(val) {
 	    return val > EPSILON || val < -EPSILON;
 	}
+	function isNumber(data) {
+	    return typeof data === 'number' && Number.isFinite(data);
+	}
 	const _v0 = [0, 0];
 	const _v1 = [0, 0];
 	const _v2 = [0, 0];
@@ -10628,16 +10543,10 @@
 	    }
 	    createTextMeasureInstance(textSpec, option, getCanvasForMeasure) {
 	        this.configure(this.global, this.global.env);
-	        return new TextMeasure({
-	            defaultFontParams: {
+	        return new TextMeasure(Object.assign({ defaultFontParams: {
 	                fontFamily: DefaultTextStyle.fontFamily,
 	                fontSize: DefaultTextStyle.fontSize
-	            },
-	            getCanvasForMeasure: getCanvasForMeasure || (() => this.canvas),
-	            getTextBounds: undefined,
-	            specialCharSet: '-/: .,@%\'"~' + TextMeasure.ALPHABET_CHAR_SET + TextMeasure.ALPHABET_CHAR_SET.toUpperCase(),
-	            ...(option !== null && option !== void 0 ? option : {})
-	        }, textSpec);
+	            }, getCanvasForMeasure: getCanvasForMeasure || (() => this.canvas), getTextBounds: undefined, specialCharSet: '-/: .,@%\'"~' + TextMeasure.ALPHABET_CHAR_SET + TextMeasure.ALPHABET_CHAR_SET.toUpperCase() }, (option !== null && option !== void 0 ? option : {})), textSpec);
 	    }
 	};
 	exports.DefaultGraphicUtil = __decorate([
@@ -10685,12 +10594,34 @@
 	        this.outTargetMatrix.multiply(_matrix.a, _matrix.b, _matrix.c, _matrix.d, _matrix.e, _matrix.f);
 	        return this;
 	    }
+	    rotateMatrix(angle, center) {
+	        const sMatrix = this.outSourceMatrix;
+	        _matrix.setValue(sMatrix.a, sMatrix.b, sMatrix.c, sMatrix.d, sMatrix.e, sMatrix.f);
+	        this.outTargetMatrix.reset();
+	        if (center) {
+	            const { x, y } = center;
+	            this.outTargetMatrix.translate(x, y);
+	            this.outTargetMatrix.rotate(angle);
+	            this.outTargetMatrix.translate(-x, -y);
+	        }
+	        else {
+	            this.outTargetMatrix.rotate(angle);
+	        }
+	        this.outTargetMatrix.multiply(_matrix.a, _matrix.b, _matrix.c, _matrix.d, _matrix.e, _matrix.f);
+	        return this;
+	    }
 	    scale(sx, sy, center) {
 	        if (this.mode === TransformMode.matrix) {
 	            return this.scaleMatrix(sx, sy, center);
 	        }
 	        return this;
 	    }
+	    rotate(angle, center) {
+	        if (this.mode === TransformMode.matrix) {
+	            return this.rotateMatrix(angle, center);
+	        }
+	        return this;
+	    }
 	    translateMatrix(dx, dy) {
 	        const sMatrix = this.outSourceMatrix;
 	        _matrix.setValue(sMatrix.a, sMatrix.b, sMatrix.c, sMatrix.d, sMatrix.e, sMatrix.f);
@@ -11014,35 +10945,37 @@
 	            }
 	        }
 	    }
-	    async forEachChildrenAsync(cb, reverse = false) {
-	        if (reverse) {
-	            let child = this._lastChild;
-	            let i = 0;
-	            while (child) {
-	                let breakTag = cb(child, i++);
-	                if (breakTag.then) {
-	                    breakTag = await breakTag;
-	                }
-	                if (breakTag) {
-	                    return;
+	    forEachChildrenAsync(cb, reverse = false) {
+	        return __awaiter(this, void 0, void 0, function* () {
+	            if (reverse) {
+	                let child = this._lastChild;
+	                let i = 0;
+	                while (child) {
+	                    let breakTag = cb(child, i++);
+	                    if (breakTag.then) {
+	                        breakTag = yield breakTag;
+	                    }
+	                    if (breakTag) {
+	                        return;
+	                    }
+	                    child = child._prev;
 	                }
-	                child = child._prev;
 	            }
-	        }
-	        else {
-	            let child = this._firstChild;
-	            let i = 0;
-	            while (child) {
-	                let breakTag = cb(child, i++);
-	                if (breakTag.then) {
-	                    breakTag = await breakTag;
-	                }
-	                if (breakTag) {
-	                    return;
+	            else {
+	                let child = this._firstChild;
+	                let i = 0;
+	                while (child) {
+	                    let breakTag = cb(child, i++);
+	                    if (breakTag.then) {
+	                        breakTag = yield breakTag;
+	                    }
+	                    if (breakTag) {
+	                        return;
+	                    }
+	                    child = child._next;
 	                }
-	                child = child._next;
 	            }
-	        }
+	        });
 	    }
 	    forEach(cb) {
 	        return this.forEachChildren(cb);
@@ -11456,11 +11389,11 @@
 	        return this.removeChild(child);
 	    }
 	    addEventListener(type, listener, options) {
-	        const capture = (isBoolean(options, true) && options) || (isObject(options) && options.capture);
-	        const once = isObject(options) && options.once;
-	        const context = isFunction(listener) ? undefined : listener;
+	        const capture = (isBoolean$1(options, true) && options) || (isObject$1(options) && options.capture);
+	        const once = isObject$1(options) && options.once;
+	        const context = isFunction$1(listener) ? undefined : listener;
 	        type = capture ? `${type}capture` : type;
-	        listener = isFunction(listener) ? listener : listener.handleEvent;
+	        listener = isFunction$1(listener) ? listener : listener.handleEvent;
 	        if (once) {
 	            super.once(type, listener, context);
 	        }
@@ -11473,11 +11406,11 @@
 	        return this.addEventListener(type, listener, options);
 	    }
 	    removeEventListener(type, listener, options) {
-	        const capture = (isBoolean(options, true) && options) || (isObject(options) && options.capture);
-	        const context = isFunction(listener) ? undefined : listener;
+	        const capture = (isBoolean$1(options, true) && options) || (isObject$1(options) && options.capture);
+	        const context = isFunction$1(listener) ? undefined : listener;
 	        type = capture ? `${type}capture` : type;
-	        listener = isFunction(listener) ? listener : listener.handleEvent;
-	        const once = isObject(options) && options.once;
+	        listener = isFunction$1(listener) ? listener : listener.handleEvent;
+	        const once = isObject$1(options) && options.once;
 	        super.off(type, listener, context, once);
 	        return this;
 	    }
@@ -11485,7 +11418,7 @@
 	        return this.removeEventListener(type, listener, options);
 	    }
 	    once(type, listener, options) {
-	        if (isObject(options)) {
+	        if (isObject$1(options)) {
 	            options.once = true;
 	            return this.addEventListener(type, listener, options);
 	        }
@@ -12007,21 +11940,26 @@
 	        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 ((_a = this._prePointTargetCache) === null || _a === void 0 ? void 0 : _a[cacheKey]) {
+	        if (((_a = this._prePointTargetCache) === null || _a === void 0 ? void 0 : _a[cacheKey]) &&
+	            ((_c = (_b = this._prePointTargetCache) === null || _b === void 0 ? void 0 : _b[cacheKey]) === null || _c === void 0 ? void 0 : _c.stage.renderCount) ===
+	                ((_d = this._prePointTargetCache) === null || _d === void 0 ? void 0 : _d.stageRenderCount)) {
 	            target = this._prePointTargetCache[cacheKey];
 	        }
 	        else {
-	            target = this.pickTarget(e.canvasX, e.canvasY);
-	            this._prePointTargetCache = {
-	                [cacheKey]: target
-	            };
+	            target = this.pickTarget(e.canvasX, e.canvasY, e);
+	            if (!e.pickParams) {
+	                this._prePointTargetCache = {
+	                    [cacheKey]: target,
+	                    stageRenderCount: (_e = target === null || target === void 0 ? void 0 : target.stage.renderCount) !== null && _e !== void 0 ? _e : -1
+	                };
+	            }
 	        }
 	        if (mappers) {
 	            for (let i = 0, j = mappers.length; i < j; i++) {
@@ -12106,7 +12044,7 @@
 	            event.target = target;
 	        }
 	        else {
-	            event.target = this.pickTarget(event.global.x, event.global.y);
+	            event.target = this.pickTarget(event.global.x, event.global.y, event);
 	        }
 	        if (typeof type === 'string') {
 	            event.type = type;
@@ -12120,7 +12058,7 @@
 	        this.copyData(from, event);
 	        event.nativeEvent = from.nativeEvent;
 	        event.originalEvent = from;
-	        event.target = target || this.pickTarget(event.global.x, event.global.y);
+	        event.target = target || this.pickTarget(event.global.x, event.global.y, event);
 	        return event;
 	    }
 	    clonePointerEvent(from, type) {
@@ -12184,6 +12122,7 @@
 	        to.which = from.which;
 	        to.layer.copyFrom(from.layer);
 	        to.page.copyFrom(from.page);
+	        to.pickParams = from.pickParams;
 	    }
 	    trackingData(id) {
 	        if (!this.mappingState.trackingData[id]) {
@@ -12237,9 +12176,7 @@
 	                }
 	            }
 	        }
-	        else {
-	            this.emitDelegation(e, type);
-	        }
+	        this.emitDelegation(e, type);
 	    }
 	    emitDelegation(e, type) {
 	        const events = e.currentTarget._events;
@@ -12255,7 +12192,7 @@
 	            }
 	        }
 	    }
-	    pickTarget(x, y) {
+	    pickTarget(x, y, e) {
 	        let target;
 	        const pickResult = this.rootTarget.pick(x, y);
 	        if (pickResult && pickResult.graphic) {
@@ -12264,12 +12201,15 @@
 	        else if (pickResult && pickResult.group) {
 	            target = pickResult.group;
 	        }
-	        else if (x >= 0 && x <= get(this.rootTarget, 'width') && y >= 0 && y <= get(this.rootTarget, 'height')) {
+	        else if (x >= 0 && x <= get$1(this.rootTarget, 'width') && y >= 0 && y <= get$1(this.rootTarget, 'height')) {
 	            target = this.rootTarget;
 	        }
 	        else {
 	            target = null;
 	        }
+	        if (e) {
+	            e.pickParams = pickResult.params;
+	        }
 	        return target;
 	    }
 	}
@@ -12404,7 +12344,7 @@
 	                Object.assign(domElement.style, style);
 	            }
 	        }
-	        else if (applyStyles && isString(mode) && !has(this.cursorStyles, mode)) {
+	        else if (applyStyles && isString$1(mode) && !has$1(this.cursorStyles, mode)) {
 	            domElement.style.cursor = mode;
 	        }
 	    }
@@ -12522,46 +12462,46 @@
 	            event.changedTouches.length) {
 	            for (let i = 0, li = event.changedTouches.length; i < li; i++) {
 	                const touch = event.changedTouches[i];
-	                if (isUndefined(touch.button)) {
+	                if (isUndefined$1(touch.button)) {
 	                    touch.button = 0;
 	                }
-	                if (isUndefined(touch.buttons)) {
+	                if (isUndefined$1(touch.buttons)) {
 	                    touch.buttons = 1;
 	                }
-	                if (isUndefined(touch.isPrimary)) {
+	                if (isUndefined$1(touch.isPrimary)) {
 	                    touch.isPrimary = event.touches.length === 1 && event.type === 'touchstart';
 	                }
-	                if (isUndefined(touch.width)) {
+	                if (isUndefined$1(touch.width)) {
 	                    touch.width = touch.radiusX || 1;
 	                }
-	                if (isUndefined(touch.height)) {
+	                if (isUndefined$1(touch.height)) {
 	                    touch.height = touch.radiusY || 1;
 	                }
-	                if (isUndefined(touch.tiltX)) {
+	                if (isUndefined$1(touch.tiltX)) {
 	                    touch.tiltX = 0;
 	                }
-	                if (isUndefined(touch.tiltY)) {
+	                if (isUndefined$1(touch.tiltY)) {
 	                    touch.tiltY = 0;
 	                }
-	                if (isUndefined(touch.pointerType)) {
+	                if (isUndefined$1(touch.pointerType)) {
 	                    touch.pointerType = 'touch';
 	                }
-	                if (isUndefined(touch.pointerId)) {
+	                if (isUndefined$1(touch.pointerId)) {
 	                    touch.pointerId = touch.identifier || 0;
 	                }
-	                if (isUndefined(touch.pressure)) {
+	                if (isUndefined$1(touch.pressure)) {
 	                    touch.pressure = touch.force || 0.5;
 	                }
-	                if (isUndefined(touch.twist)) {
+	                if (isUndefined$1(touch.twist)) {
 	                    touch.twist = 0;
 	                }
-	                if (isUndefined(touch.tangentialPressure)) {
+	                if (isUndefined$1(touch.tangentialPressure)) {
 	                    touch.tangentialPressure = 0;
 	                }
-	                if (isUndefined(touch.layerX)) {
+	                if (isUndefined$1(touch.layerX)) {
 	                    touch.layerX = touch.offsetX = touch.clientX;
 	                }
-	                if (isUndefined(touch.layerY)) {
+	                if (isUndefined$1(touch.layerY)) {
 	                    touch.layerY = touch.offsetY = touch.clientY;
 	                }
 	                touch.isNormalized = true;
@@ -12572,34 +12512,34 @@
 	        else if (!this.globalObj.supportsMouseEvents ||
 	            (event instanceof MouseEvent && (!this.supportsPointerEvents || !(event instanceof PointerEvent)))) {
 	            const tempEvent = event;
-	            if (isUndefined(tempEvent.isPrimary)) {
+	            if (isUndefined$1(tempEvent.isPrimary)) {
 	                tempEvent.isPrimary = true;
 	            }
-	            if (isUndefined(tempEvent.width)) {
+	            if (isUndefined$1(tempEvent.width)) {
 	                tempEvent.width = 1;
 	            }
-	            if (isUndefined(tempEvent.height)) {
+	            if (isUndefined$1(tempEvent.height)) {
 	                tempEvent.height = 1;
 	            }
-	            if (isUndefined(tempEvent.tiltX)) {
+	            if (isUndefined$1(tempEvent.tiltX)) {
 	                tempEvent.tiltX = 0;
 	            }
-	            if (isUndefined(tempEvent.tiltY)) {
+	            if (isUndefined$1(tempEvent.tiltY)) {
 	                tempEvent.tiltY = 0;
 	            }
-	            if (isUndefined(tempEvent.pointerType)) {
+	            if (isUndefined$1(tempEvent.pointerType)) {
 	                tempEvent.pointerType = 'mouse';
 	            }
-	            if (isUndefined(tempEvent.pointerId)) {
+	            if (isUndefined$1(tempEvent.pointerId)) {
 	                tempEvent.pointerId = MOUSE_POINTER_ID;
 	            }
-	            if (isUndefined(tempEvent.pressure)) {
+	            if (isUndefined$1(tempEvent.pressure)) {
 	                tempEvent.pressure = 0.5;
 	            }
-	            if (isUndefined(tempEvent.twist)) {
+	            if (isUndefined$1(tempEvent.twist)) {
 	                tempEvent.twist = 0;
 	            }
-	            if (isUndefined(tempEvent.tangentialPressure)) {
+	            if (isUndefined$1(tempEvent.tangentialPressure)) {
 	                tempEvent.tangentialPressure = 0;
 	            }
 	            tempEvent.isNormalized = true;
@@ -13577,7 +13517,7 @@
 	        this.animateTail = null;
 	        this.animateCount = 0;
 	    }
-	    removeAnimate(animate) {
+	    removeAnimate(animate, release = true) {
 	        animate._onRemove && animate._onRemove.forEach(cb => cb());
 	        if (animate === this.animateHead) {
 	            this.animateHead = animate.nextAnimate;
@@ -13596,7 +13536,7 @@
 	            animate.prevAnimate.nextAnimate = animate.nextAnimate;
 	            animate.nextAnimate.prevAnimate = animate.prevAnimate;
 	        }
-	        animate.release();
+	        release && animate.release();
 	        return;
 	    }
 	}
@@ -13684,6 +13624,13 @@
 	        this._duringTime = 0;
 	        this.timeline.addAnimate(this);
 	    }
+	    setTimeline(timeline) {
+	        if (timeline === this.timeline) {
+	            return;
+	        }
+	        this.timeline.removeAnimate(this, false);
+	        timeline.addAnimate(this);
+	    }
 	    getStartTime() {
 	        return this._startTime;
 	    }
@@ -14289,7 +14236,7 @@
 	const parseStroke = (stroke) => {
 	    var _a;
 	    let isFullStroke = true;
-	    if (isBoolean(stroke, true)) {
+	    if (isBoolean$1(stroke, true)) {
 	        for (let i = 0; i < 4; i++) {
 	            _strokeVec4[i] = stroke;
 	            isFullStroke && (isFullStroke = !!((_a = _strokeVec4[i]) !== null && _a !== void 0 ? _a : true));
@@ -14318,7 +14265,7 @@
 	    if (!padding) {
 	        return 0;
 	    }
-	    if (isArray(padding)) {
+	    if (isArray$1(padding)) {
 	        if (padding.length === 0) {
 	            return 0;
 	        }
@@ -14469,7 +14416,7 @@
 	    return transformKeys.includes(key);
 	};
 	function getAttributeFromDefaultAttrList(attr, key) {
-	    if (isArray(attr)) {
+	    if (isArray$1(attr)) {
 	        let val;
 	        for (let i = 0; i < attr.length && val === undefined; i++) {
 	            val = attr[i][key];
@@ -14520,8 +14467,8 @@
 	    }
 	    onBind() {
 	        var _a, _b, _c, _d, _e, _f;
-	        this.fromNumber = isNumber((_a = this.from) === null || _a === void 0 ? void 0 : _a.text) ? (_b = this.from) === null || _b === void 0 ? void 0 : _b.text : Number.parseFloat((_c = this.from) === null || _c === void 0 ? void 0 : _c.text);
-	        this.toNumber = isNumber((_d = this.to) === null || _d === void 0 ? void 0 : _d.text) ? (_e = this.to) === null || _e === void 0 ? void 0 : _e.text : Number.parseFloat((_f = this.to) === null || _f === void 0 ? void 0 : _f.text);
+	        this.fromNumber = isNumber$2((_a = this.from) === null || _a === void 0 ? void 0 : _a.text) ? (_b = this.from) === null || _b === void 0 ? void 0 : _b.text : Number.parseFloat((_c = this.from) === null || _c === void 0 ? void 0 : _c.text);
+	        this.toNumber = isNumber$2((_d = this.to) === null || _d === void 0 ? void 0 : _d.text) ? (_e = this.to) === null || _e === void 0 ? void 0 : _e.text : Number.parseFloat((_f = this.to) === null || _f === void 0 ? void 0 : _f.text);
 	        if (!Number.isFinite(this.toNumber)) {
 	            this.fromNumber = 0;
 	        }
@@ -14685,7 +14632,7 @@
 	        var _a, _b, _c, _d;
 	        this.fromText = (_b = (_a = this.from) === null || _a === void 0 ? void 0 : _a.text) !== null && _b !== void 0 ? _b : '';
 	        this.toText = (_d = (_c = this.to) === null || _c === void 0 ? void 0 : _c.text) !== null && _d !== void 0 ? _d : '';
-	        if (!this.toText || isArray(this.toText)) {
+	        if (!this.toText || isArray$1(this.toText)) {
 	            this.valid = false;
 	        }
 	        else {
@@ -14733,16 +14680,7 @@
 	        var _a;
 	        const root = this.target.attachShadow();
 	        const height = this.target.AABBBounds.height();
-	        const rect = application.graphicService.creator.rect({
-	            height: height,
-	            fill: '#bcdeff',
-	            shadowBlur: 30,
-	            shadowColor: '#bcdeff',
-	            ...(_a = this.params) === null || _a === void 0 ? void 0 : _a.attribute,
-	            x: 0,
-	            y: 0,
-	            width: 0
-	        });
+	        const rect = application.graphicService.creator.rect(Object.assign(Object.assign({ height: height, fill: '#bcdeff', shadowBlur: 30, shadowColor: '#bcdeff' }, (_a = this.params) === null || _a === void 0 ? void 0 : _a.attribute), { x: 0, y: 0, width: 0 }));
 	        this.rect = rect;
 	        root.add(rect);
 	    }
@@ -15846,7 +15784,7 @@
 	    return res;
 	};
 	const samplingPoints = (points, count) => {
-	    const validatePoints = points.filter(point => point.defined !== false && isNumber(point.x) && isNumber(point.y));
+	    const validatePoints = points.filter(point => point.defined !== false && isNumber$2(point.x) && isNumber$2(point.y));
 	    if (validatePoints.length === 0) {
 	        return [];
 	    }
@@ -15900,7 +15838,7 @@
 	            return res.concat((_a = seg.points) !== null && _a !== void 0 ? _a : []);
 	        }, []);
 	    }
-	    const validatePoints = points.filter(point => point.defined !== false && isNumber(point.x) && isNumber(point.y));
+	    const validatePoints = points.filter(point => point.defined !== false && isNumber$2(point.x) && isNumber$2(point.y));
 	    if (!validatePoints.length) {
 	        return [];
 	    }
@@ -16209,7 +16147,7 @@
 
 	const reverseNames = {};
 	for (const name in colorNames) {
-	    if (has(colorNames, name)) {
+	    if (has$1(colorNames, name)) {
 	        reverseNames[colorNames[name]] = name;
 	    }
 	}
@@ -16505,10 +16443,7 @@
 	    if (fromGradient !== toGradient) {
 	        const gradient = (fromGradient ? from : to);
 	        const pure = (fromGradient ? to : from);
-	        const gradientFromPure = {
-	            ...gradient,
-	            stops: gradient.stops.map(v => ({ ...v, color: colorArrayToString(pure) }))
-	        };
+	        const gradientFromPure = Object.assign(Object.assign({}, gradient), { stops: gradient.stops.map(v => (Object.assign(Object.assign({}, v), { color: colorArrayToString(pure) }))) });
 	        return fromGradient
 	            ? interpolateColor(gradient, gradientFromPure, ratio, alphaChannel, cb)
 	            : interpolateColor(gradientFromPure, gradient, ratio, alphaChannel, cb);
@@ -16711,7 +16646,7 @@
 	            return;
 	        }
 	        const toValue = toAttrs[fromKey];
-	        if (!isNil(toValue) && !isNil(fromAttrs[fromKey]) && toValue !== fromAttrs[fromKey]) {
+	        if (!isNil$1(toValue) && !isNil$1(fromAttrs[fromKey]) && toValue !== fromAttrs[fromKey]) {
 	            if (fromKey === 'fill' || fromKey === 'stroke') {
 	                res.push({
 	                    from: typeof fromAttrs[fromKey] === 'string'
@@ -17264,6 +17199,7 @@
 	        }
 	        application.graphicService.beforeUpdateAABBBounds(this, this.stage, true, this._AABBBounds);
 	        const bounds = this.doUpdateAABBBounds(full);
+	        this.addUpdateLayoutTag();
 	        application.graphicService.afterUpdateAABBBounds(this, this.stage, this._AABBBounds, this, true);
 	        return bounds;
 	    }
@@ -17378,13 +17314,14 @@
 	            this.addUpdateBoundTag();
 	        }
 	        this.addUpdatePositionTag();
+	        this.addUpdateLayoutTag();
 	        this.onAttributeUpdate(context);
 	    }
 	    setAttribute(key, value, forceUpdateTag, context) {
 	        var _a;
 	        const params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate({ [key]: value }, this.attribute, key, context);
 	        if (!params) {
-	            if (!isNil((_a = this.normalAttrs) === null || _a === void 0 ? void 0 : _a[key])) {
+	            if (!isNil$1((_a = this.normalAttrs) === null || _a === void 0 ? void 0 : _a[key])) {
 	                this.normalAttrs[key] = value;
 	            }
 	            else {
@@ -17397,6 +17334,7 @@
 	                    this.addUpdateBoundTag();
 	                }
 	                this.addUpdatePositionTag();
+	                this.addUpdateLayoutTag();
 	                this.onAttributeUpdate(context);
 	            }
 	        }
@@ -17464,6 +17402,7 @@
 	        }
 	        this.addUpdatePositionTag();
 	        this.addUpdateBoundTag();
+	        this.addUpdateLayoutTag();
 	        this.onAttributeUpdate(context);
 	        return this;
 	    }
@@ -17485,6 +17424,7 @@
 	        attribute.y = y;
 	        this.addUpdatePositionTag();
 	        this.addUpdateBoundTag();
+	        this.addUpdateLayoutTag();
 	        this.onAttributeUpdate(context);
 	        return this;
 	    }
@@ -17520,6 +17460,7 @@
 	        }
 	        this.addUpdatePositionTag();
 	        this.addUpdateBoundTag();
+	        this.addUpdateLayoutTag();
 	        this.onAttributeUpdate(context);
 	        return this;
 	    }
@@ -17541,25 +17482,37 @@
 	        attribute.scaleY = scaleY;
 	        this.addUpdatePositionTag();
 	        this.addUpdateBoundTag();
+	        this.addUpdateLayoutTag();
 	        this.onAttributeUpdate(context);
 	        return this;
 	    }
-	    rotate(angle) {
+	    rotate(angle, rotateCenter) {
 	        var _a;
 	        if (angle === 0) {
 	            return this;
 	        }
 	        const context = { type: exports.AttributeUpdateType.ROTATE };
 	        const params = this.onBeforeAttributeUpdate &&
-	            this.onBeforeAttributeUpdate(angle, this.attribute, tempConstantAngleKey, context);
+	            this.onBeforeAttributeUpdate({ angle, rotateCenter }, this.attribute, tempConstantAngleKey, context);
 	        if (params) {
+	            delete params.angle;
 	            this._setAttributes(params, false, context);
-	            return this;
 	        }
 	        const attribute = this.attribute;
-	        attribute.angle = ((_a = attribute.angle) !== null && _a !== void 0 ? _a : DefaultTransform.angle) + angle;
+	        if (!rotateCenter) {
+	            attribute.angle = ((_a = attribute.angle) !== null && _a !== void 0 ? _a : DefaultTransform.angle) + angle;
+	        }
+	        else {
+	            let { postMatrix } = this.attribute;
+	            if (!postMatrix) {
+	                postMatrix = new Matrix();
+	                attribute.postMatrix = postMatrix;
+	            }
+	            application.transformUtil.fromMatrix(postMatrix, postMatrix).rotate(angle, rotateCenter);
+	        }
 	        this.addUpdatePositionTag();
 	        this.addUpdateBoundTag();
+	        this.addUpdateLayoutTag();
 	        this.onAttributeUpdate(context);
 	        return this;
 	    }
@@ -17580,6 +17533,7 @@
 	        attribute.angle = angle;
 	        this.addUpdatePositionTag();
 	        this.addUpdateBoundTag();
+	        this.addUpdateLayoutTag();
 	        this.onAttributeUpdate(context);
 	        return this;
 	    }
@@ -17623,7 +17577,7 @@
 	        if (!this.currentStates || !this.currentStates.length) {
 	            return false;
 	        }
-	        if (!isNil(stateName)) {
+	        if (!isNil$1(stateName)) {
 	            return this.currentStates.includes(stateName);
 	        }
 	        return true;
@@ -17679,7 +17633,7 @@
 	            this.animates.forEach(animate => {
 	                if (animate.stateNames) {
 	                    const endProps = animate.getEndProps();
-	                    if (has(endProps, key)) {
+	                    if (has$1(endProps, key)) {
 	                        value = endProps[key];
 	                    }
 	                }
@@ -17788,8 +17742,17 @@
 	    clearUpdateGlobalPositionTag() {
 	        this._updateTag &= exports.UpdateTag.CLEAR_GLOBAL_MATRIX;
 	    }
+	    addUpdateLayoutTag() {
+	        this._updateTag |= exports.UpdateTag.UPDATE_LAYOUT;
+	    }
+	    clearUpdateLayoutTag() {
+	        this._updateTag &= exports.UpdateTag.CLEAR_LAYOUT;
+	    }
+	    needUpdateLayout() {
+	        return !!(this._updateTag & exports.UpdateTag.UPDATE_LAYOUT);
+	    }
 	    doUpdateLocalMatrix() {
-	        const { x = DefaultTransform.x, y = DefaultTransform.y, scaleX = DefaultTransform.scaleX, scaleY = DefaultTransform.scaleY, angle = DefaultTransform.angle, anchor, postMatrix } = this.attribute;
+	        const { x = DefaultTransform.x, y = DefaultTransform.y, scaleX = DefaultTransform.scaleX, scaleY = DefaultTransform.scaleY, angle = DefaultTransform.angle, scaleCenter, anchor, postMatrix } = this.attribute;
 	        const _anchor = [0, 0];
 	        if (anchor) {
 	            if (typeof anchor[0] === 'string') {
@@ -17809,7 +17772,18 @@
 	                _anchor[1] = anchor[1];
 	            }
 	        }
-	        normalTransform(this._transMatrix, this._transMatrix.reset(), x, y, scaleX, scaleY, angle, anchor && _anchor);
+	        if (scaleCenter && (scaleX !== 1 || scaleY !== 1)) {
+	            const m = this._transMatrix;
+	            m.reset();
+	            m.translate(_anchor[0], _anchor[1]);
+	            m.rotate(angle);
+	            m.translate(-_anchor[0], -_anchor[1]);
+	            m.translate(x, y);
+	            application.transformUtil.fromMatrix(m, m).scale(scaleX, scaleY, { x: scaleCenter[0], y: scaleCenter[1] });
+	        }
+	        else {
+	            normalTransform(this._transMatrix, this._transMatrix.reset(), x, y, scaleX, scaleY, angle, anchor && _anchor);
+	        }
 	        const p = this.getOffsetXY(DefaultTransform);
 	        this._transMatrix.e += p.x;
 	        this._transMatrix.f += p.y;
@@ -17832,6 +17806,12 @@
 	            this.stage = stage;
 	            this.layer = layer;
 	            this.setStageToShadowRoot(stage, layer);
+	            if (this.animates && this.animates.size) {
+	                const timeline = stage.getTimeline();
+	                this.animates.forEach(a => {
+	                    a.setTimeline(timeline);
+	                });
+	            }
 	            this._onSetStage && this._onSetStage(this, stage, layer);
 	            application.graphicService.onSetStage(this, stage);
 	        }
@@ -17996,7 +17976,7 @@
 	        };
 	    }
 	    createPathProxy(path) {
-	        if (isString(path, true)) {
+	        if (isString$1(path, true)) {
 	            this.pathProxy = new CustomPath2D().fromString(path);
 	        }
 	        else {
@@ -18005,7 +17985,7 @@
 	        return this.pathProxy;
 	    }
 	    loadImage(image, background = false) {
-	        if (!image) {
+	        if (!image || (background && backgroundNotImage(image))) {
 	            return;
 	        }
 	        const url = image;
@@ -18019,7 +17999,7 @@
 	        this.resources.set(url, cache);
 	        if (typeof image === 'string') {
 	            cache.state = 'loading';
-	            if (isValidUrl(image) || isBase64(image)) {
+	            if (isValidUrl$1(image) || isBase64$1(image)) {
 	                ResourceLoader.GetImage(image, this);
 	                this.backgroundImg = this.backgroundImg || background;
 	            }
@@ -18090,6 +18070,12 @@
 	    }
 	}
 	Graphic.mixin(EventTarget);
+	function backgroundNotImage(image) {
+	    if (image.fill || image.stroke) {
+	        return true;
+	    }
+	    return false;
+	}
 
 	var validator$2 = {};
 
@@ -19968,31 +19954,33 @@
 	function incrementalAddTo(group, graphic) {
 	    group.incrementalAppendChild(graphic);
 	}
-	async function waitForAllSubLayers(stage) {
-	    const promiseList = [];
-	    const layers = stage.getChildren();
-	    await new Promise(resolve => {
-	        application.global.getRequestAnimationFrame()(() => {
-	            resolve(null);
+	function waitForAllSubLayers(stage) {
+	    return __awaiter(this, void 0, void 0, function* () {
+	        const promiseList = [];
+	        const layers = stage.getChildren();
+	        yield new Promise(resolve => {
+	            application.global.getRequestAnimationFrame()(() => {
+	                resolve(null);
+	            });
 	        });
-	    });
-	    layers.forEach(l => {
-	        if (l.subLayers.size) {
-	            l.subLayers.forEach(sl => {
-	                if (sl.drawContribution && sl.drawContribution.hooks && sl.drawContribution.rendering) {
-	                    promiseList.push(new Promise(resolve => {
-	                        sl.drawContribution.hooks.completeDraw.tap('outWait', () => {
-	                            sl.drawContribution.hooks.completeDraw.taps = sl.drawContribution.hooks.completeDraw.taps.filter(i => {
-	                                return i.name !== 'outWait';
+	        layers.forEach(l => {
+	            if (l.subLayers.size) {
+	                l.subLayers.forEach(sl => {
+	                    if (sl.drawContribution && sl.drawContribution.hooks && sl.drawContribution.rendering) {
+	                        promiseList.push(new Promise(resolve => {
+	                            sl.drawContribution.hooks.completeDraw.tap('outWait', () => {
+	                                sl.drawContribution.hooks.completeDraw.taps = sl.drawContribution.hooks.completeDraw.taps.filter(i => {
+	                                    return i.name !== 'outWait';
+	                                });
+	                                resolve(null);
 	                            });
-	                            resolve(null);
-	                        });
-	                    }));
-	                }
-	            });
-	        }
+	                        }));
+	                    }
+	                });
+	            }
+	        });
+	        yield Promise.all(promiseList);
 	    });
-	    await Promise.all(promiseList);
 	}
 	function boundStroke(bounds, halfW, miter, pad = 0) {
 	    bounds.expand(halfW + (pad / 2 + (miter ? miterAdjustment(miter, halfW) : 0)));
@@ -20068,7 +20056,7 @@
 	    return rotate;
 	}
 	function xul(str) {
-	    const xmlStr = isArray(str) ? str[0] : str;
+	    const xmlStr = isArray$1(str) ? str[0] : str;
 	    const config = [];
 	    if (!xmlStr) {
 	        return config;
@@ -20259,6 +20247,7 @@
 	        application.graphicService.beforeUpdateAABBBounds(this, this.stage, true, this._AABBBounds);
 	        const selfChange = this.shouldSelfChangeUpdateAABBBounds();
 	        const bounds = this.doUpdateAABBBounds();
+	        this.addUpdateLayoutTag();
 	        application.graphicService.afterUpdateAABBBounds(this, this.stage, this._AABBBounds, this, selfChange);
 	        return bounds;
 	    }
@@ -20426,7 +20415,7 @@
 	        return graphic;
 	    }
 	    clone() {
-	        return new Group({ ...this.attribute });
+	        return new Group(Object.assign({}, this.attribute));
 	    }
 	}
 
@@ -20539,7 +20528,7 @@
 	        this.layerHandler.resizeView(w, h);
 	    }
 	    setDpr(dpr) {
-	        throw new Error('暂不支持');
+	        this.layerHandler.setDpr(dpr);
 	    }
 	    afterDraw(cb) {
 	        this.afterDrawCbs.push(cb);
@@ -20556,17 +20545,7 @@
 	    combineTo(target, params) {
 	        var _a, _b, _c;
 	        if (this.offscreen) {
-	            this.layerHandler.drawTo(target, [this], {
-	                background: (_a = params.background) !== null && _a !== void 0 ? _a : this.background,
-	                renderService: params.renderService,
-	                x: (_b = params.x) !== null && _b !== void 0 ? _b : this.stage.x,
-	                y: (_c = params.y) !== null && _c !== void 0 ? _c : this.stage.y,
-	                width: this.viewWidth,
-	                height: this.viewHeight,
-	                stage: this.stage,
-	                layer: this,
-	                ...params
-	            });
+	            this.layerHandler.drawTo(target, [this], Object.assign({ background: (_a = params.background) !== null && _a !== void 0 ? _a : this.background, renderService: params.renderService, x: (_b = params.x) !== null && _b !== void 0 ? _b : this.stage.x, y: (_c = params.y) !== null && _c !== void 0 ? _c : this.stage.y, width: this.viewWidth, height: this.viewHeight, stage: this.stage, layer: this }, params));
 	            this.afterDrawCbs.forEach(c => c(this));
 	        }
 	    }
@@ -20581,17 +20560,7 @@
 	    }
 	    drawTo(target, params) {
 	        var _a, _b, _c;
-	        this.layerHandler.drawTo(target, [this], {
-	            background: (_a = params.background) !== null && _a !== void 0 ? _a : this.background,
-	            renderService: params.renderService,
-	            x: (_b = params.x) !== null && _b !== void 0 ? _b : this.stage.x,
-	            y: (_c = params.y) !== null && _c !== void 0 ? _c : this.stage.y,
-	            width: this.viewWidth,
-	            height: this.viewHeight,
-	            stage: this.stage,
-	            layer: this,
-	            ...params
-	        });
+	        this.layerHandler.drawTo(target, [this], Object.assign({ background: (_a = params.background) !== null && _a !== void 0 ? _a : this.background, renderService: params.renderService, x: (_b = params.x) !== null && _b !== void 0 ? _b : this.stage.x, y: (_c = params.y) !== null && _c !== void 0 ? _c : this.stage.y, width: this.viewWidth, height: this.viewHeight, stage: this.stage, layer: this }, params));
 	        this.afterDrawCbs.forEach(c => c(this));
 	    }
 	}
@@ -20613,10 +20582,7 @@
 	    }
 	    createLayer(stage, options = { main: false }) {
 	        this.tryInit();
-	        const layer = new Layer(stage, this.global, stage.window, {
-	            ...options,
-	            virtual: this.staticLayerCountInEnv === 0
-	        });
+	        const layer = new Layer(stage, this.global, stage.window, Object.assign(Object.assign({}, options), { virtual: this.staticLayerCountInEnv === 0 }));
 	        const stageLayers = this.layerMap.get(stage) || [];
 	        stageLayers.push(layer);
 	        this.layerMap.set(stage, stageLayers);
@@ -20685,6 +20651,7 @@
 	        const handler = container.getNamed(WindowHandlerContribution, global.env);
 	        handler.configure(this, global);
 	        this.actived = true;
+	        this._handler;
 	    }
 	    get style() {
 	        return this._handler.getStyle();
@@ -20745,6 +20712,15 @@
 	    clearViewBox(viewBox, color) {
 	        this._handler.clearViewBox(viewBox, color);
 	    }
+	    isVisible(bbox) {
+	        return this._handler.isVisible(bbox);
+	    }
+	    onVisibleChange(cb) {
+	        return this._handler.onVisibleChange(cb);
+	    }
+	    getTopLeft(baseWindow) {
+	        return this._handler.getTopLeft(baseWindow);
+	    }
 	};
 	__decorate([
 	    postConstruct(),
@@ -20780,7 +20756,7 @@
 	}
 	function runStroke(stroke, lineWidth) {
 	    let s;
-	    if (isArray(stroke)) {
+	    if (isArray$1(stroke)) {
 	        s = stroke.some(item => item || item === undefined);
 	    }
 	    else {
@@ -21385,6 +21361,16 @@
 	            return;
 	        }
 	        const { outerRadius = arcAttribute.outerRadius, innerRadius = arcAttribute.innerRadius, cap = arcAttribute.cap, forceShowCap = arcAttribute.forceShowCap } = arc.attribute;
+	        let conicalOffset = 0;
+	        const tempChangeConicalColor = ((isBoolean$1(cap) && cap) || cap[0]) && fill.gradient === 'conical';
+	        if (tempChangeConicalColor) {
+	            const { sc, startAngle, endAngle } = arc.getParsedAngle();
+	            if (abs(endAngle - startAngle) < pi2 - epsilon) {
+	                conicalOffset = sc || 0;
+	                fill.startAngle -= conicalOffset;
+	                fill.endAngle -= conicalOffset;
+	            }
+	        }
 	        let beforeRenderContribitionsRuned = false;
 	        const { isFullStroke, stroke: arrayStroke } = parseStroke(stroke);
 	        if (doFill || isFullStroke) {
@@ -21459,7 +21445,7 @@
 	                context.stroke();
 	            }
 	        }
-	        if (cap && forceShowCap) {
+	        if (((isBoolean$1(cap) && cap) || cap[1]) && forceShowCap) {
 	            const { startAngle: sa, endAngle: ea } = arc.getParsedAngle();
 	            const deltaAngle = abs(ea - sa);
 	            if (deltaAngle >= pi2 - epsilon) {
@@ -21513,6 +21499,10 @@
 	        this._arcAfterRenderContribitions.forEach(c => {
 	            c.drawShape(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb);
 	        });
+	        if (tempChangeConicalColor) {
+	            fill.startAngle += conicalOffset;
+	            fill.endAngle += conicalOffset;
+	        }
 	    }
 	    draw(arc, renderService, drawContext, params) {
 	        const { context } = drawContext;
@@ -21705,7 +21695,7 @@
 	        return path;
 	    }
 	    clone() {
-	        return new Circle({ ...this.attribute });
+	        return new Circle(Object.assign({}, this.attribute));
 	    }
 	}
 
@@ -21855,6 +21845,7 @@
 	            bboxWH[0] = lineWidth;
 	        }
 	        bboxWH[1] = linesLayout.length * lineHeight;
+	        bboxWH[0] = linesLayout.reduce((a, b) => Math.max(a, b.width), 0);
 	        const bbox = {
 	            xOffset: 0,
 	            yOffset: 0,
@@ -21954,7 +21945,7 @@
 	            return false;
 	        }
 	        this.tryUpdateAABBBounds();
-	        return this.clipedText !== attribute.text;
+	        return this.clipedText !== attribute.text.toString();
 	    }
 	    get multilineLayout() {
 	        if (!Array.isArray(this.attribute.text)) {
@@ -22004,17 +21995,17 @@
 	            : this.updateVerticalMultilineAABBBounds(text);
 	    }
 	    updateHorizontalSinglelineAABBBounds(text) {
-	        var _a;
+	        var _a, _b;
 	        const textTheme = getTheme(this).text;
 	        const textMeasure = application.graphicUtil.textMeasure;
 	        let width;
 	        let str;
 	        const attribute = this.attribute;
-	        const { maxLineWidth = textTheme.maxLineWidth, ellipsis = textTheme.ellipsis, textAlign = textTheme.textAlign, textBaseline = textTheme.textBaseline, fontSize = textTheme.fontSize, fontWeight = textTheme.fontWeight, stroke = textTheme.stroke, lineWidth = textTheme.lineWidth, wordBreak = textTheme.wordBreak } = attribute;
-	        const buf = Math.max(2, fontSize * 0.075);
+	        const { maxLineWidth = textTheme.maxLineWidth, ellipsis = textTheme.ellipsis, textAlign = textTheme.textAlign, textBaseline = textTheme.textBaseline, fontFamily = textTheme.fontFamily, fontSize = textTheme.fontSize, fontWeight = textTheme.fontWeight, stroke = textTheme.stroke, lineWidth = textTheme.lineWidth, wordBreak = textTheme.wordBreak, ignoreBuf = textTheme.ignoreBuf } = attribute;
+	        const buf = ignoreBuf ? 0 : Math.max(2, fontSize * 0.075);
 	        const { lineHeight = (_a = attribute.lineHeight) !== null && _a !== void 0 ? _a : (attribute.fontSize || textTheme.fontSize) + buf } = attribute;
 	        if (!this.shouldUpdateShape() && this.cache) {
-	            width = this.cache.clipedWidth;
+	            width = (_b = this.cache.clipedWidth) !== null && _b !== void 0 ? _b : 0;
 	            const dx = textDrawOffsetX(textAlign, width);
 	            const dy = textLayoutOffsetY(textBaseline, lineHeight, fontSize);
 	            this._AABBBounds.set(dx, dy, dx + width, dy + lineHeight);
@@ -22026,12 +22017,12 @@
 	        if (Number.isFinite(maxLineWidth)) {
 	            if (ellipsis) {
 	                const strEllipsis = (ellipsis === true ? textTheme.ellipsis : ellipsis);
-	                const data = textMeasure.clipTextWithSuffix(text.toString(), { fontSize, fontWeight }, maxLineWidth, strEllipsis, wordBreak === 'break-word');
+	                const data = textMeasure.clipTextWithSuffix(text.toString(), { fontSize, fontWeight, fontFamily }, maxLineWidth, strEllipsis, false);
 	                str = data.str;
 	                width = data.width;
 	            }
 	            else {
-	                const data = textMeasure.clipText(text.toString(), { fontSize, fontWeight }, maxLineWidth, wordBreak === 'break-word');
+	                const data = textMeasure.clipText(text.toString(), { fontSize, fontWeight, fontFamily }, maxLineWidth, false);
 	                str = data.str;
 	                width = data.width;
 	            }
@@ -22039,14 +22030,14 @@
 	            this.cache.clipedWidth = width;
 	        }
 	        else {
-	            width = textMeasure.measureTextWidth(text.toString(), { fontSize, fontWeight });
+	            width = textMeasure.measureTextWidth(text.toString(), { fontSize, fontWeight, fontFamily });
 	            this.cache.clipedText = text.toString();
 	            this.cache.clipedWidth = width;
 	        }
 	        this.clearUpdateShapeTag();
 	        const dx = textDrawOffsetX(textAlign, width);
 	        let lh = lineHeight;
-	        if (vglobal.isSafari()) {
+	        if (application.global && application.global.isSafari()) {
 	            lh += fontSize * 0.2;
 	        }
 	        const dy = textLayoutOffsetY(textBaseline, lh, fontSize, buf);
@@ -22061,9 +22052,10 @@
 	        const textTheme = getTheme(this).text;
 	        const textMeasure = application.graphicUtil.textMeasure;
 	        let width;
-	        const buf = 2;
 	        const attribute = this.attribute;
-	        const { maxLineWidth = textTheme.maxLineWidth, ellipsis = textTheme.ellipsis, textAlign = textTheme.textAlign, textBaseline = textTheme.textBaseline, fontSize = textTheme.fontSize, fontWeight = textTheme.fontWeight, stroke = textTheme.stroke, lineHeight = (_a = attribute.lineHeight) !== null && _a !== void 0 ? _a : (attribute.fontSize || textTheme.fontSize) + buf, lineWidth = textTheme.lineWidth, wordBreak = textTheme.wordBreak } = attribute;
+	        const { ignoreBuf = textTheme.ignoreBuf } = attribute;
+	        const buf = ignoreBuf ? 0 : 2;
+	        const { maxLineWidth = textTheme.maxLineWidth, ellipsis = textTheme.ellipsis, textAlign = textTheme.textAlign, textBaseline = textTheme.textBaseline, fontSize = textTheme.fontSize, fontWeight = textTheme.fontWeight, fontFamily = textTheme.fontFamily, stroke = textTheme.stroke, lineHeight = (_a = attribute.lineHeight) !== null && _a !== void 0 ? _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);
@@ -22080,12 +22072,12 @@
 	        if (Number.isFinite(maxLineWidth)) {
 	            if (ellipsis) {
 	                const strEllipsis = (ellipsis === true ? textTheme.ellipsis : ellipsis);
-	                const data = textMeasure.clipTextWithSuffixVertical(verticalList[0], { fontSize, fontWeight }, maxLineWidth, strEllipsis, wordBreak === 'break-word');
+	                const data = textMeasure.clipTextWithSuffixVertical(verticalList[0], { fontSize, fontWeight, fontFamily }, maxLineWidth, strEllipsis, false);
 	                verticalList = [data.verticalList];
 	                width = data.width;
 	            }
 	            else {
-	                const data = textMeasure.clipTextVertical(verticalList[0], { fontSize, fontWeight }, maxLineWidth, wordBreak === 'break-word');
+	                const data = textMeasure.clipTextVertical(verticalList[0], { fontSize, fontWeight, fontFamily }, maxLineWidth, false);
 	                verticalList = [data.verticalList];
 	                width = data.width;
 	            }
@@ -22097,7 +22089,7 @@
 	            verticalList[0].forEach(t => {
 	                const w = t.direction === exports.TextDirection.HORIZONTAL
 	                    ? fontSize
-	                    : textMeasure.measureTextWidth(t.text, { fontSize, fontWeight });
+	                    : textMeasure.measureTextWidth(t.text, { fontSize, fontWeight, fontFamily });
 	                width += w;
 	                t.width = w;
 	            });
@@ -22127,8 +22119,8 @@
 	            return this._AABBBounds;
 	        }
 	        const textMeasure = application.graphicUtil.textMeasure;
-	        const layoutObj = new CanvasTextLayout(fontFamily, { fontSize, fontWeight }, textMeasure);
-	        const layoutData = layoutObj.GetLayoutByLines(text, textAlign, textBaseline, lineHeight, ellipsis === true ? textTheme.ellipsis : ellipsis || undefined, wordBreak === 'break-word', maxLineWidth);
+	        const layoutObj = new CanvasTextLayout(fontFamily, { fontSize, fontWeight, fontFamily }, textMeasure);
+	        const layoutData = layoutObj.GetLayoutByLines(text, textAlign, textBaseline, lineHeight, ellipsis === true ? textTheme.ellipsis : ellipsis || undefined, false, maxLineWidth);
 	        const { bbox } = layoutData;
 	        this.cache.layoutData = layoutData;
 	        this.clearUpdateShapeTag();
@@ -22143,9 +22135,10 @@
 	        const textTheme = getTheme(this).text;
 	        const textMeasure = application.graphicUtil.textMeasure;
 	        let width;
-	        const buf = 2;
 	        const attribute = this.attribute;
-	        const { maxLineWidth = textTheme.maxLineWidth, ellipsis = textTheme.ellipsis, textAlign = textTheme.textAlign, textBaseline = textTheme.textBaseline, fontSize = textTheme.fontSize, fontWeight = textTheme.fontWeight, stroke = textTheme.stroke, lineHeight = (_a = attribute.lineHeight) !== null && _a !== void 0 ? _a : (attribute.fontSize || textTheme.fontSize) + buf, lineWidth = textTheme.lineWidth, wordBreak = textTheme.wordBreak } = attribute;
+	        const { ignoreBuf = textTheme.ignoreBuf } = attribute;
+	        const buf = ignoreBuf ? 0 : 2;
+	        const { maxLineWidth = textTheme.maxLineWidth, ellipsis = textTheme.ellipsis, textAlign = textTheme.textAlign, textBaseline = textTheme.textBaseline, fontFamily = textTheme.fontFamily, fontSize = textTheme.fontSize, fontWeight = textTheme.fontWeight, stroke = textTheme.stroke, lineHeight = (_a = attribute.lineHeight) !== null && _a !== void 0 ? _a : (attribute.fontSize || textTheme.fontSize) + buf, lineWidth = textTheme.lineWidth, wordBreak = textTheme.wordBreak } = attribute;
 	        width = 0;
 	        if (!this.shouldUpdateShape() && this.cache) {
 	            this.cache.verticalList.forEach(item => {
@@ -22168,12 +22161,12 @@
 	            if (Number.isFinite(maxLineWidth)) {
 	                if (ellipsis) {
 	                    const strEllipsis = (ellipsis === true ? textTheme.ellipsis : ellipsis);
-	                    const data = textMeasure.clipTextWithSuffixVertical(verticalData, { fontSize, fontWeight }, maxLineWidth, strEllipsis, wordBreak === 'break-word');
+	                    const data = textMeasure.clipTextWithSuffixVertical(verticalData, { fontSize, fontWeight, fontFamily }, maxLineWidth, strEllipsis, false);
 	                    verticalLists[i] = data.verticalList;
 	                    width = data.width;
 	                }
 	                else {
-	                    const data = textMeasure.clipTextVertical(verticalData, { fontSize, fontWeight }, maxLineWidth, wordBreak === 'break-word');
+	                    const data = textMeasure.clipTextVertical(verticalData, { fontSize, fontWeight, fontFamily }, maxLineWidth, false);
 	                    verticalLists[i] = data.verticalList;
 	                    width = data.width;
 	                }
@@ -22183,7 +22176,7 @@
 	                verticalData.forEach(t => {
 	                    const w = t.direction === exports.TextDirection.HORIZONTAL
 	                        ? fontSize
-	                        : textMeasure.measureTextWidth(t.text, { fontSize, fontWeight });
+	                        : textMeasure.measureTextWidth(t.text, { fontSize, fontWeight, fontFamily });
 	                    width += w;
 	                    t.width = w;
 	                });
@@ -22230,7 +22223,7 @@
 	        return false;
 	    }
 	    clone() {
-	        return new Text({ ...this.attribute });
+	        return new Text(Object.assign({}, this.attribute));
 	    }
 	}
 
@@ -22238,7 +22231,7 @@
 	class WrapText extends Text {
 	    _isValid() {
 	        const { text } = this.attribute;
-	        if (isArray(text)) {
+	        if (isArray$1(text)) {
 	            return !text.every((t) => t == null || t === '');
 	        }
 	        return text != null && text !== '';
@@ -22246,8 +22239,8 @@
 	    updateMultilineAABBBounds(text) {
 	        var _a, _b, _c;
 	        const textTheme = getTheme(this).text;
-	        const { fontFamily = textTheme.fontFamily, textAlign = textTheme.textAlign, textBaseline = textTheme.textBaseline, fontSize = textTheme.fontSize, lineHeight = this.attribute.lineHeight || this.attribute.fontSize || textTheme.fontSize, ellipsis = textTheme.ellipsis, maxLineWidth, stroke = textTheme.stroke, lineWidth = textTheme.lineWidth, wordBreak = textTheme.wordBreak, heightLimit = 0, lineClamp } = this.attribute;
-	        const buf = 2;
+	        const { fontFamily = textTheme.fontFamily, textAlign = textTheme.textAlign, textBaseline = textTheme.textBaseline, fontSize = textTheme.fontSize, lineHeight = this.attribute.lineHeight || this.attribute.fontSize || textTheme.fontSize, ellipsis = textTheme.ellipsis, maxLineWidth, stroke = textTheme.stroke, lineWidth = textTheme.lineWidth, wordBreak = textTheme.wordBreak, fontWeight = textTheme.fontWeight, ignoreBuf = textTheme.ignoreBuf, heightLimit = 0, lineClamp } = this.attribute;
+	        const buf = ignoreBuf ? 0 : 2;
 	        if (!this.shouldUpdateShape() && ((_a = this.cache) === null || _a === void 0 ? void 0 : _a.layoutData)) {
 	            const bbox = this.cache.layoutData.bbox;
 	            this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height);
@@ -22257,7 +22250,7 @@
 	            return this._AABBBounds;
 	        }
 	        const textMeasure = application.graphicUtil.textMeasure;
-	        const layoutObj = new CanvasTextLayout(fontFamily, { fontSize }, textMeasure);
+	        const layoutObj = new CanvasTextLayout(fontFamily, { fontSize, fontWeight, fontFamily }, textMeasure);
 	        const lines = text.map(l => l.toString());
 	        const linesLayout = [];
 	        const bboxWH = [0, 0];
@@ -22272,8 +22265,9 @@
 	            if (maxLineWidth > 0) {
 	                for (let i = 0; i < lines.length; i++) {
 	                    const str = lines[i];
+	                    let needCut = true;
 	                    if (i === lineCountLimit - 1) {
-	                        const clip = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, wordBreak === 'break-word');
+	                        const clip = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, false);
 	                        linesLayout.push({
 	                            str: clip.str,
 	                            width: clip.width
@@ -22283,7 +22277,7 @@
 	                    const clip = layoutObj.textMeasure.clipText(str, layoutObj.textOptions, maxLineWidth, wordBreak === 'break-word');
 	                    if (str !== '' && clip.str === '') {
 	                        if (ellipsis) {
-	                            const clipEllipsis = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, wordBreak === 'break-word');
+	                            const clipEllipsis = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, false);
 	                            clip.str = (_b = clipEllipsis.str) !== null && _b !== void 0 ? _b : '';
 	                            clip.width = (_c = clipEllipsis.width) !== null && _c !== void 0 ? _c : 0;
 	                        }
@@ -22291,13 +22285,14 @@
 	                            clip.str = '';
 	                            clip.width = 0;
 	                        }
+	                        needCut = false;
 	                    }
 	                    linesLayout.push({
 	                        str: clip.str,
 	                        width: clip.width
 	                    });
 	                    if (clip.str.length === str.length) ;
-	                    else {
+	                    else if (needCut) {
 	                        const newStr = str.substring(clip.str.length);
 	                        lines.splice(i + 1, 0, newStr);
 	                    }
@@ -22315,7 +22310,7 @@
 	            let text;
 	            for (let i = 0, len = lines.length; i < len; i++) {
 	                if (i === lineCountLimit - 1) {
-	                    const clip = layoutObj.textMeasure.clipTextWithSuffix(lines[i], layoutObj.textOptions, maxLineWidth, ellipsis, wordBreak === 'break-word');
+	                    const clip = layoutObj.textMeasure.clipTextWithSuffix(lines[i], layoutObj.textOptions, maxLineWidth, ellipsis, false);
 	                    linesLayout.push({
 	                        str: clip.str,
 	                        width: clip.width
@@ -23122,17 +23117,17 @@
 	        this.pathStr = 'M-0.5,-0.5h1v1h-1Z';
 	    }
 	    draw(ctx, size, x, y) {
-	        const rectSize = isNumber(size) ? [size, size] : size;
+	        const rectSize = isNumber$2(size) ? [size, size] : size;
 	        return rect(ctx, rectSize, x, y);
 	    }
 	    drawOffset(ctx, size, x, y, offset) {
-	        const rectSize = isNumber(size)
+	        const rectSize = isNumber$2(size)
 	            ? [size + 2 * offset, size + 2 * offset]
 	            : [size[0] + 2 * offset, size[1] + 2 * offset];
 	        return rect(ctx, rectSize, x, y);
 	    }
 	    bounds(size, bounds) {
-	        const rectSize = isNumber(size) ? [size, size] : size;
+	        const rectSize = isNumber$2(size) ? [size, size] : size;
 	        bounds.x1 = -rectSize[0] / 2;
 	        bounds.x2 = rectSize[0] / 2;
 	        bounds.y1 = -rectSize[1] / 2;
@@ -23146,7 +23141,7 @@
 	    constructor(type, path, isSvg = false) {
 	        this.pathStr = '';
 	        this.type = type;
-	        if (isArray(path)) {
+	        if (isArray$1(path)) {
 	            this.svgCache = path;
 	        }
 	        else {
@@ -23258,7 +23253,7 @@
 	    }
 	    _isValid() {
 	        const { size } = this.attribute;
-	        return isArray(size) ? size.length === 2 && size.every(this._validNumber) : this._validNumber(size);
+	        return isArray$1(size) ? size.length === 2 && size.every(this._validNumber) : this._validNumber(size);
 	    }
 	    doUpdateParsedPath() {
 	        const symbolTheme = getTheme(this).symbol;
@@ -23282,7 +23277,7 @@
 	            if (!svg) {
 	                return null;
 	            }
-	            const path = isArray(svg.path) ? svg.path : [svg.path];
+	            const path = isArray$1(svg.path) ? svg.path : [svg.path];
 	            const b = new AABBBounds();
 	            const cacheList = [];
 	            path.forEach((item) => {
@@ -23363,13 +23358,13 @@
 	        const size = this.attribute.size;
 	        const x = 0;
 	        const y = 0;
-	        const formattedSize = isArray(size) ? size : [size, size];
+	        const formattedSize = isArray$1(size) ? size : [size, size];
 	        return symbolInstance.path
 	            ? new CustomPath2D().fromCustomPath2D(symbolInstance.path, x, y, formattedSize[0], formattedSize[1])
 	            : new CustomPath2D().fromString(symbolInstance.pathStr, x, y, formattedSize[0], formattedSize[1]);
 	    }
 	    clone() {
-	        return new Symbol({ ...this.attribute });
+	        return new Symbol(Object.assign({}, this.attribute));
 	    }
 	};
 	Symbol$1.userSymbolMap = {};
@@ -23475,7 +23470,7 @@
 	        return path;
 	    }
 	    clone() {
-	        return new Line({ ...this.attribute });
+	        return new Line(Object.assign({}, this.attribute));
 	    }
 	};
 
@@ -23543,7 +23538,7 @@
 	        return path;
 	    }
 	    clone() {
-	        return new Rect({ ...this.attribute });
+	        return new Rect(Object.assign({}, this.attribute));
 	    }
 	}
 
@@ -23755,7 +23750,7 @@
 	        this.currentStates = [];
 	    }
 	    clone() {
-	        const glyph = new Glyph({ ...this.attribute });
+	        const glyph = new Glyph(Object.assign({}, this.attribute));
 	        glyph.setSubGraphic(this.subGraphic.map(g => g.clone()));
 	        return glyph;
 	    }
@@ -24309,7 +24304,7 @@
 	        return false;
 	    }
 	    clone() {
-	        return new Image({ ...this.attribute });
+	        return new Image(Object.assign({}, this.attribute));
 	    }
 	}
 
@@ -24333,7 +24328,7 @@
 	            }
 	        }
 	        this.onBeforeAttributeUpdate = (val, attributes, key) => {
-	            if ((isArray(key) && key.indexOf('margin') !== -1) || key === 'margin') {
+	            if ((isArray$1(key) && key.indexOf('margin') !== -1) || key === 'margin') {
 	                if (attributes.margin) {
 	                    const marginArray = parsePadding(attributes.margin);
 	                    if (typeof marginArray === 'number') {
@@ -24867,7 +24862,7 @@
 	        this._frameCache = frame;
 	    }
 	    clone() {
-	        return new RichText({ ...this.attribute });
+	        return new RichText(Object.assign({}, this.attribute));
 	    }
 	    setStage(stage, layer) {
 	        super.setStage(stage, layer);
@@ -24948,7 +24943,7 @@
 	        if (attribute.path instanceof CustomPath2D) {
 	            return attribute.path;
 	        }
-	        if (isNil(this.cache)) {
+	        if (isNil$1(this.cache)) {
 	            this.doUpdatePathShape();
 	        }
 	        if (this.cache instanceof CustomPath2D) {
@@ -24972,7 +24967,7 @@
 	    }
 	    doUpdatePathShape() {
 	        const attribute = this.attribute;
-	        if (isString(attribute.path, true)) {
+	        if (isString$1(attribute.path, true)) {
 	            this.cache = new CustomPath2D().fromString(attribute.path);
 	        }
 	        else if (attribute.customPath) {
@@ -25011,7 +25006,7 @@
 	        return new CustomPath2D().fromCustomPath2D(this.getParsedPathShape(), x, y);
 	    }
 	    clone() {
-	        return new Path({ ...this.attribute });
+	        return new Path(Object.assign({}, this.attribute));
 	    }
 	}
 
@@ -25125,7 +25120,7 @@
 	        return path;
 	    }
 	    clone() {
-	        return new Area({ ...this.attribute });
+	        return new Area(Object.assign({}, this.attribute));
 	    }
 	}
 
@@ -25163,7 +25158,7 @@
 	            return 0;
 	        }
 	        const deltaRadius = Math.abs(outerRadius - innerRadius);
-	        return Math.min(isNumber(cornerRadius, true)
+	        return Math.min(isNumber$2(cornerRadius, true)
 	            ? cornerRadius
 	            : (deltaRadius * parseFloat(cornerRadius)) / 100, deltaRadius / 2);
 	    }
@@ -25188,7 +25183,9 @@
 	            if (capWidth > epsilon && outerRadius > epsilon) {
 	                return {
 	                    startAngle: startAngle - sign * capAngle * startCap,
-	                    endAngle: endAngle + sign * capAngle * endCap
+	                    endAngle: endAngle + sign * capAngle * endCap,
+	                    sc: sign * capAngle * startCap,
+	                    ec: sign * capAngle * endCap
 	                };
 	            }
 	        }
@@ -25327,7 +25324,7 @@
 	        return path;
 	    }
 	    clone() {
-	        return new Arc({ ...this.attribute });
+	        return new Arc(Object.assign({}, this.attribute));
 	    }
 	}
 
@@ -25424,7 +25421,7 @@
 	        return path;
 	    }
 	    clone() {
-	        return new Polygon({ ...this.attribute });
+	        return new Polygon(Object.assign({}, this.attribute));
 	    }
 	}
 
@@ -25583,6 +25580,8 @@
 	    injectable()
 	], DefaultPathOuterBorderBoundsContribution);
 
+	const MatrixAllocate = Symbol.for('MatrixAllocate');
+	const Mat4Allocate = Symbol.for('Mat4Allocate');
 	function createMat4() {
 	    return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
 	}
@@ -26562,7 +26561,7 @@
 	    }
 	    updateSymbolAABBBoundsImprecise(attribute, symbolTheme, aabbBounds, graphic) {
 	        const { size = symbolTheme.size } = attribute;
-	        if (isArray(size)) {
+	        if (isArray$1(size)) {
 	            aabbBounds.set(-size[0] / 2, -size[1] / 2, size[0] / 2, size[1] / 2);
 	        }
 	        else {
@@ -27122,7 +27121,7 @@
 	            offsetY,
 	            offsetZ: z
 	        });
-	        if (line.cache && !isArray(line.cache) && line.attribute.curveType && line.attribute.curveType.includes('Closed')) {
+	        if (line.cache && !isArray$1(line.cache) && line.attribute.curveType && line.attribute.curveType.includes('Closed')) {
 	            context.closePath();
 	        }
 	        context.setShadowStyle && context.setShadowStyle(line, attribute, defaultAttribute);
@@ -27147,7 +27146,7 @@
 	            }
 	        }
 	        let { connectedType, connectedX, connectedY, connectedStyle } = attribute;
-	        if (isArray(defaultAttribute)) {
+	        if (isArray$1(defaultAttribute)) {
 	            connectedType = (_b = connectedType !== null && connectedType !== void 0 ? connectedType : defaultAttribute[0].connectedType) !== null && _b !== void 0 ? _b : defaultAttribute[1].connectedType;
 	            connectedX = (_c = connectedX !== null && connectedX !== void 0 ? connectedX : defaultAttribute[0].connectedX) !== null && _c !== void 0 ? _c : defaultAttribute[1].connectedX;
 	            connectedY = (_d = connectedY !== null && connectedY !== void 0 ? connectedY : defaultAttribute[0].connectedY) !== null && _d !== void 0 ? _d : defaultAttribute[1].connectedY;
@@ -27174,7 +27173,7 @@
 	                zeroY: connectedY
 	            });
 	            const da = [];
-	            if (isArray(defaultAttribute)) {
+	            if (isArray$1(defaultAttribute)) {
 	                defaultAttribute.forEach(i => da.push(i));
 	            }
 	            else {
@@ -27219,12 +27218,28 @@
 	            return;
 	        }
 	        if (line.shouldUpdateShape()) {
-	            const { points, segments, curveType = lineAttribute.curveType } = line.attribute;
+	            const { points, segments, closePath } = line.attribute;
+	            let { curveType = lineAttribute.curveType } = line.attribute;
+	            if (closePath && curveType === 'linear') {
+	                curveType = 'linearClosed';
+	            }
 	            const _points = points;
 	            if (segments && segments.length) {
 	                let startPoint;
 	                let lastSeg;
-	                line.cache = segments.map((seg, index) => {
+	                line.cache = segments
+	                    .map((seg, index) => {
+	                    if (seg.points.length <= 1) {
+	                        if (index === 0) {
+	                            seg.points[0] &&
+	                                (lastSeg = {
+	                                    endX: seg.points[0].x,
+	                                    endY: seg.points[0].y,
+	                                    curves: [{ defined: seg.points[0].defined !== false }]
+	                                });
+	                            return null;
+	                        }
+	                    }
 	                    if (index === 1) {
 	                        startPoint = {
 	                            x: lastSeg.endX,
@@ -27237,11 +27252,29 @@
 	                        startPoint.y = lastSeg.endY;
 	                        startPoint.defined = lastSeg.curves[lastSeg.curves.length - 1].defined;
 	                    }
-	                    lastSeg = calcLineCache$1(seg.points, curveType, {
+	                    const data = calcLineCache$1(seg.points, curveType, {
 	                        startPoint
 	                    });
-	                    return lastSeg;
-	                });
+	                    lastSeg = data;
+	                    return data;
+	                })
+	                    .filter(item => !!item);
+	                if (curveType === 'linearClosed') {
+	                    let startP;
+	                    for (let i = 0; i < line.cache.length; i++) {
+	                        const cacheItem = line.cache[i];
+	                        for (let i = 0; i < cacheItem.curves.length; i++) {
+	                            if (cacheItem.curves[i].defined) {
+	                                startP = cacheItem.curves[i].p0;
+	                                break;
+	                            }
+	                        }
+	                        if (startP) {
+	                            break;
+	                        }
+	                    }
+	                    line.cache[line.cache.length - 1] && line.cache[line.cache.length - 1].lineTo(startP.x, startP.y, true);
+	                }
 	            }
 	            else if (points && points.length) {
 	                line.cache = calcLineCache$1(_points, curveType);
@@ -27255,13 +27288,17 @@
 	        }
 	        const { clipRange = lineAttribute.clipRange, clipRangeByDimension = lineAttribute.clipRangeByDimension } = line.attribute;
 	        if (Array.isArray(line.cache)) {
+	            const segments = line.attribute.segments.filter(item => item.points.length);
+	            if (segments[0].points.length === 1) {
+	                segments.shift();
+	            }
 	            if (clipRange === 1) {
 	                let skip = false;
 	                line.cache.forEach((cache, index) => {
 	                    if (skip) {
 	                        return;
 	                    }
-	                    skip = this.drawSegmentItem(context, cache, !!fill, !!stroke, fillOpacity, strokeOpacity, line.attribute.segments[index], [lineAttribute, line.attribute], clipRange, clipRangeByDimension, x, y, line, fillCb, strokeCb);
+	                    skip = this.drawSegmentItem(context, cache, !!fill, !!stroke, fillOpacity, strokeOpacity, segments[index], [lineAttribute, line.attribute], clipRange, clipRangeByDimension, x, y, line, fillCb, strokeCb);
 	                });
 	            }
 	            else {
@@ -27277,7 +27314,7 @@
 	                    const _cr = (totalDrawLength - drawedLengthUntilLast) / curSegLength;
 	                    drawedLengthUntilLast += curSegLength;
 	                    if (_cr > 0) {
-	                        skip = this.drawSegmentItem(context, cache, !!fill, !!stroke, fillOpacity, strokeOpacity, line.attribute.segments[index], [lineAttribute, line.attribute], min(_cr, 1), clipRangeByDimension, x, y, line, fillCb, strokeCb);
+	                        skip = this.drawSegmentItem(context, cache, !!fill, !!stroke, fillOpacity, strokeOpacity, segments[index], [lineAttribute, line.attribute], min(_cr, 1), clipRangeByDimension, x, y, line, fillCb, strokeCb);
 	                    }
 	                });
 	            }
@@ -27646,7 +27683,14 @@
 	            if (segments && segments.length) {
 	                let startPoint;
 	                let lastTopSeg;
-	                const topCaches = segments.map((seg, index) => {
+	                const topCaches = segments
+	                    .map((seg, index) => {
+	                    if (seg.points.length <= 1) {
+	                        if (index === 0) {
+	                            seg.points[0] && (lastTopSeg = { endX: seg.points[0].x, endY: seg.points[0].y });
+	                            return null;
+	                        }
+	                    }
 	                    if (index === 1) {
 	                        startPoint = { x: lastTopSeg.endX, y: lastTopSeg.endY };
 	                    }
@@ -27654,11 +27698,13 @@
 	                        startPoint.x = lastTopSeg.endX;
 	                        startPoint.y = lastTopSeg.endY;
 	                    }
-	                    lastTopSeg = calcLineCache(seg.points, curveType, {
+	                    const data = calcLineCache(seg.points, curveType, {
 	                        startPoint
 	                    });
-	                    return lastTopSeg;
-	                });
+	                    lastTopSeg = data;
+	                    return data;
+	                })
+	                    .filter(item => !!item);
 	                let lastBottomSeg;
 	                const bottomCaches = [];
 	                for (let i = segments.length - 1; i >= 0; i--) {
@@ -27708,13 +27754,17 @@
 	            area.clearUpdateShapeTag();
 	        }
 	        if (Array.isArray(area.cacheArea)) {
+	            const segments = area.attribute.segments.filter(item => item.points.length);
+	            if (segments[0].points.length === 1) {
+	                segments.shift();
+	            }
 	            if (clipRange === 1) {
 	                let skip = false;
 	                area.cacheArea.forEach((cache, index) => {
 	                    if (skip) {
 	                        return;
 	                    }
-	                    skip = this.drawSegmentItem(context, cache, doFill, fillOpacity, doStroke, strokeOpacity, area.attribute.segments[index], [areaAttribute, area.attribute], clipRange, x, y, z, area, drawContext, fillCb, strokeCb);
+	                    skip = this.drawSegmentItem(context, cache, doFill, fillOpacity, doStroke, strokeOpacity, segments[index], [areaAttribute, area.attribute], clipRange, x, y, z, area, drawContext, fillCb, strokeCb);
 	                });
 	            }
 	            else {
@@ -27730,7 +27780,7 @@
 	                    const _cr = (totalDrawLength - drawedLengthUntilLast) / curSegLength;
 	                    drawedLengthUntilLast += curSegLength;
 	                    if (_cr > 0) {
-	                        skip = this.drawSegmentItem(context, cache, doFill, fillOpacity, doStroke, strokeOpacity, area.attribute.segments[index], [areaAttribute, area.attribute], min(_cr, 1), x, y, z, area, drawContext, fillCb, strokeCb);
+	                        skip = this.drawSegmentItem(context, cache, doFill, fillOpacity, doStroke, strokeOpacity, segments[index], [areaAttribute, area.attribute], min(_cr, 1), x, y, z, area, drawContext, fillCb, strokeCb);
 	                    }
 	                });
 	            }
@@ -27777,7 +27827,7 @@
 	        let { connectedType, connectedX, connectedY, connectedStyle } = attribute;
 	        const da = [];
 	        if (connect) {
-	            if (isArray(defaultAttribute)) {
+	            if (isArray$1(defaultAttribute)) {
 	                connectedType = (_a = connectedType !== null && connectedType !== void 0 ? connectedType : defaultAttribute[0].connectedType) !== null && _a !== void 0 ? _a : defaultAttribute[1].connectedType;
 	                connectedX = (_b = connectedX !== null && connectedX !== void 0 ? connectedX : defaultAttribute[0].connectedX) !== null && _b !== void 0 ? _b : defaultAttribute[1].connectedX;
 	                connectedY = (_c = connectedY !== null && connectedY !== void 0 ? connectedY : defaultAttribute[0].connectedY) !== null && _c !== void 0 ? _c : defaultAttribute[1].connectedY;
@@ -27792,7 +27842,7 @@
 	            if (connectedType !== 'connect' && connectedType !== 'zero') {
 	                connectedType = 'none';
 	            }
-	            if (isArray(defaultAttribute)) {
+	            if (isArray$1(defaultAttribute)) {
 	                defaultAttribute.forEach(i => da.push(i));
 	            }
 	            else {
@@ -27868,8 +27918,8 @@
 	                strokeCb(context, attribute, defaultAttribute);
 	            }
 	            else {
-	                const { stroke } = attribute;
-	                if (isArray(stroke) && (stroke[0] || stroke[2]) && stroke[1] === false) {
+	                const { stroke = defaultAttribute && defaultAttribute[1] && defaultAttribute[1].stroke } = attribute;
+	                if (isArray$1(stroke) && (stroke[0] || stroke[2]) && stroke[1] === false) {
 	                    context.beginPath();
 	                    drawSegments(context.camera ? context : context.nativeContext, stroke[0] ? cache.top : cache.bottom, clipRange, direction === exports.Direction.ROW ? 'x' : 'y', {
 	                        offsetX,
@@ -27994,7 +28044,7 @@
 	const halfPi = pi / 2;
 	function createRectPath(path, x, y, width, height, rectCornerRadius) {
 	    let cornerRadius;
-	    if (isNumber(rectCornerRadius, true)) {
+	    if (isNumber$2(rectCornerRadius, true)) {
 	        cornerRadius = [
 	            rectCornerRadius,
 	            rectCornerRadius,
@@ -28100,7 +28150,7 @@
 	        if (!(fVisible || sVisible || fillCb || strokeCb || background)) {
 	            return;
 	        }
-	        if (cornerRadius === 0 || (isArray(cornerRadius) && cornerRadius.every(num => num === 0))) {
+	        if (cornerRadius === 0 || (isArray$1(cornerRadius) && cornerRadius.every(num => num === 0))) {
 	            context.beginPath();
 	            context.rect(x, y, width, height);
 	        }
@@ -28711,7 +28761,7 @@
 	            return;
 	        }
 	        context.beginPath();
-	        if (cornerRadius <= 0 || (isArray(cornerRadius) && cornerRadius.every(num => num === 0))) {
+	        if (cornerRadius <= 0 || (isArray$1(cornerRadius) && cornerRadius.every(num => num === 0))) {
 	            drawPolygon(context.camera ? context : context.nativeContext, points, x, y);
 	        }
 	        else {
@@ -28794,7 +28844,7 @@
 	    }
 	    drawShape(image, context, x, y, drawContext, params, fillCb) {
 	        const imageAttribute = getTheme(image).image;
-	        const { fill = imageAttribute.fill, width = imageAttribute.width, height = imageAttribute.height, opacity = imageAttribute.opacity, fillOpacity = imageAttribute.fillOpacity, visible = imageAttribute.visible, repeatX = imageAttribute.repeatX, repeatY = imageAttribute.repeatY, image: url } = image.attribute;
+	        const { fill = imageAttribute.fill, width = imageAttribute.width, height = imageAttribute.height, opacity = imageAttribute.opacity, fillOpacity = imageAttribute.fillOpacity, visible = imageAttribute.visible, repeatX = imageAttribute.repeatX, repeatY = imageAttribute.repeatY, cornerRadius = imageAttribute.cornerRadius, image: url } = image.attribute;
 	        const fVisible = fillVisible(opacity, fillOpacity, fill);
 	        const doFill = runFill(fill);
 	        if (!(image.valid && visible)) {
@@ -28827,6 +28877,15 @@
 	                if (res.state !== 'success') {
 	                    return;
 	                }
+	                let needRestore = false;
+	                if (cornerRadius === 0 || (isArray$1(cornerRadius) && cornerRadius.every(num => num === 0))) ;
+	                else {
+	                    context.beginPath();
+	                    createRectPath(context, x, y, width, height, cornerRadius);
+	                    context.save();
+	                    context.clip();
+	                    needRestore = true;
+	                }
 	                context.setCommonStyle(image, image.attribute, x, y, imageAttribute);
 	                let repeat = 0;
 	                if (repeatX === 'repeat') {
@@ -28843,6 +28902,9 @@
 	                else {
 	                    context.drawImage(res.data, x, y, width, height);
 	                }
+	                if (needRestore) {
+	                    context.restore();
+	                }
 	            }
 	        }
 	        this._imageRenderContribitions.forEach(c => {
@@ -28927,7 +28989,7 @@
 	    }
 	    let result;
 	    let color;
-	    if (isArray(c)) {
+	    if (isArray$1(c)) {
 	        for (let i = 0; i < c.length; i++) {
 	            color = c[i];
 	            if (color) {
@@ -29038,10 +29100,7 @@
 	    }
 	    allocate(data) {
 	        if (!this.pools.length) {
-	            return wrapCanvas({
-	                nativeCanvas: application.global.createCanvas(data),
-	                ...data
-	            });
+	            return wrapCanvas(Object.assign({ nativeCanvas: application.global.createCanvas(data) }, data));
 	        }
 	        const m = this.pools.pop();
 	        m.resize(data.width, data.height);
@@ -29055,10 +29114,7 @@
 	                height: canvas.height / canvas.dpr,
 	                dpr: canvas.dpr
 	            };
-	            return wrapCanvas({
-	                nativeCanvas: application.global.createCanvas(data),
-	                ...data
-	            });
+	            return wrapCanvas(Object.assign({ nativeCanvas: application.global.createCanvas(data) }, data));
 	        }
 	        const m = this.pools.pop();
 	        m.width = canvas.width;
@@ -29305,8 +29361,16 @@
 	        this.order = 0;
 	    }
 	    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, innerBorder } = arc.attribute;
-	        if (outerBorder) {
+	        const { outerBorder, innerBorder } = arc.attribute;
+	        const doOuterBorder = outerBorder && outerBorder.visible !== false;
+	        const doInnerBorder = innerBorder && innerBorder.visible !== false;
+	        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;
+	        const doStrokeOuter = !!(outerBorder && outerBorder.stroke);
+	        const doStrokeInner = !!(innerBorder && innerBorder.stroke);
+	        if (doOuterBorder) {
 	            const { distance = arcAttribute.outerBorder.distance } = outerBorder;
 	            const d = getScaledStroke(context, distance, context.dpr);
 	            const deltaAngle = distance / outerRadius;
@@ -29322,15 +29386,15 @@
 	            if (strokeCb) {
 	                strokeCb(context, outerBorder, arcAttribute.outerBorder);
 	            }
-	            else if (sVisible) {
+	            else if (doStrokeOuter) {
 	                const lastOpacity = arcAttribute.outerBorder.opacity;
 	                arcAttribute.outerBorder.opacity = opacity;
-	                context.setStrokeStyle(arc, outerBorder, x, y, arcAttribute.outerBorder);
+	                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;
 	            const d = getScaledStroke(context, distance, context.dpr);
 	            const deltaAngle = distance / outerRadius;
@@ -29346,10 +29410,10 @@
 	            if (strokeCb) {
 	                strokeCb(context, innerBorder, arcAttribute.innerBorder);
 	            }
-	            else if (sVisible) {
+	            else if (doStrokeInner) {
 	                const lastOpacity = arcAttribute.innerBorder.opacity;
 	                arcAttribute.innerBorder.opacity = opacity;
-	                context.setStrokeStyle(arc, innerBorder, x, y, arcAttribute.innerBorder);
+	                context.setStrokeStyle(arc, innerBorder, (originX - x) / scaleX, (originY - y) / scaleY, arcAttribute.innerBorder);
 	                arcAttribute.innerBorder.opacity = lastOpacity;
 	                context.stroke();
 	            }
@@ -29386,8 +29450,16 @@
 	        this.order = 0;
 	    }
 	    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, innerBorder } = circle.attribute;
-	        if (outerBorder) {
+	        const { outerBorder, innerBorder } = circle.attribute;
+	        const doOuterBorder = outerBorder && outerBorder.visible !== false;
+	        const doInnerBorder = innerBorder && innerBorder.visible !== false;
+	        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;
+	        const doStrokeOuter = !!(outerBorder && outerBorder.stroke);
+	        const doStrokeInner = !!(innerBorder && innerBorder.stroke);
+	        if (doOuterBorder) {
 	            const { distance = circleAttribute.outerBorder.distance } = outerBorder;
 	            const d = getScaledStroke(context, distance, context.dpr);
 	            const dw = d;
@@ -29398,15 +29470,15 @@
 	            if (strokeCb) {
 	                strokeCb(context, outerBorder, circleAttribute.outerBorder);
 	            }
-	            else if (sVisible) {
+	            else if (doStrokeOuter) {
 	                const lastOpacity = circleAttribute.outerBorder.opacity;
 	                circleAttribute.outerBorder.opacity = opacity;
-	                context.setStrokeStyle(circle, outerBorder, x, y, circleAttribute.outerBorder);
+	                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;
 	            const d = getScaledStroke(context, distance, context.dpr);
 	            const dw = d;
@@ -29417,10 +29489,10 @@
 	            if (strokeCb) {
 	                strokeCb(context, innerBorder, circleAttribute.innerBorder);
 	            }
-	            else if (sVisible) {
+	            else if (doStrokeInner) {
 	                const lastOpacity = circleAttribute.innerBorder.opacity;
 	                circleAttribute.innerBorder.opacity = opacity;
-	                context.setStrokeStyle(circle, innerBorder, x, y, circleAttribute.innerBorder);
+	                context.setStrokeStyle(circle, innerBorder, (originX - x) / scaleX, (originY - y) / scaleY, circleAttribute.innerBorder);
 	                circleAttribute.innerBorder.opacity = lastOpacity;
 	                context.stroke();
 	            }
@@ -29494,12 +29566,38 @@
 	            return;
 	        }
 	        if (!graphic.backgroundImg) {
-	            context.beginPath();
-	            const b = graphic.AABBBounds;
-	            context.rect(x, y, b.width(), b.height());
-	            context.fillStyle = background;
-	            context.globalAlpha = 1;
-	            context.fill();
+	            if (isObject$1(background)) {
+	                const { stroke, fill, lineWidth = 1, cornerRadius = 0, expandX = 0, expandY = 0 } = background;
+	                if (!stroke && !fill) {
+	                    return;
+	                }
+	                context.beginPath();
+	                const { x, y, width, height } = getActualPosition(graphic);
+	                if (cornerRadius) {
+	                    createRectPath(context, x - expandX, y - expandY, width + expandX * 2, height + expandY * 2, cornerRadius);
+	                }
+	                else {
+	                    context.rect(x - expandX, y - expandY, width + expandX * 2, height + expandY * 2);
+	                }
+	                context.globalAlpha = 1;
+	                if (fill) {
+	                    context.fillStyle = fill;
+	                    context.fill();
+	                }
+	                if (stroke && lineWidth > 0) {
+	                    context.lineWidth = lineWidth;
+	                    context.strokeStyle = stroke;
+	                    context.stroke();
+	                }
+	            }
+	            else {
+	                context.beginPath();
+	                const b = graphic.AABBBounds;
+	                context.rect(x, y, b.width(), b.height());
+	                context.fillStyle = background;
+	                context.globalAlpha = 1;
+	                context.fill();
+	            }
 	        }
 	        else {
 	            const res = graphic.resources.get(background);
@@ -29525,6 +29623,32 @@
 	exports.DefaultImageBackgroundRenderContribution = __decorate([
 	    injectable()
 	], exports.DefaultImageBackgroundRenderContribution);
+	function getActualPosition(graphic) {
+	    const boundsPadding = parsePadding(graphic.attribute.boundsPadding);
+	    const bounds = graphic.AABBBounds;
+	    let x = bounds.x1;
+	    let y = bounds.y1;
+	    let width = bounds.width();
+	    let height = bounds.height();
+	    if (isNumber$2(boundsPadding)) {
+	        x += boundsPadding;
+	        y += boundsPadding;
+	        width -= boundsPadding * 2;
+	        height -= boundsPadding * 2;
+	    }
+	    else {
+	        x += boundsPadding[3];
+	        y += boundsPadding[0];
+	        width -= boundsPadding[1] + boundsPadding[3];
+	        height -= boundsPadding[0] + boundsPadding[2];
+	    }
+	    return {
+	        x,
+	        y,
+	        width,
+	        height
+	    };
+	}
 
 	exports.DefaultRectRenderContribution = class DefaultRectRenderContribution {
 	    constructor() {
@@ -29533,14 +29657,22 @@
 	        this.order = 0;
 	    }
 	    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, innerBorder } = rect.attribute;
-	        if (outerBorder) {
+	        const { outerBorder, innerBorder } = rect.attribute;
+	        const doOuterBorder = outerBorder && outerBorder.visible !== false;
+	        const doInnerBorder = innerBorder && innerBorder.visible !== false;
+	        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;
+	        const doStrokeOuter = !!(outerBorder && outerBorder.stroke);
+	        const doStrokeInner = !!(innerBorder && innerBorder.stroke);
+	        if (doOuterBorder) {
 	            const { distance = rectAttribute.outerBorder.distance } = outerBorder;
 	            const d = getScaledStroke(context, distance, context.dpr);
 	            const nextX = x - d;
 	            const nextY = y - d;
 	            const dw = d * 2;
-	            if (cornerRadius === 0 || (isArray(cornerRadius) && cornerRadius.every(num => num === 0))) {
+	            if (cornerRadius === 0 || (isArray$1(cornerRadius) && cornerRadius.every(num => num === 0))) {
 	                context.beginPath();
 	                context.rect(nextX, nextY, width + dw, height + dw);
 	            }
@@ -29552,21 +29684,21 @@
 	            if (strokeCb) {
 	                strokeCb(context, outerBorder, rectAttribute.outerBorder);
 	            }
-	            else if (sVisible) {
+	            else if (doStrokeOuter) {
 	                const lastOpacity = rectAttribute.outerBorder.opacity;
 	                rectAttribute.outerBorder.opacity = opacity;
-	                context.setStrokeStyle(rect, outerBorder, x, y, rectAttribute.outerBorder);
+	                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;
 	            const d = getScaledStroke(context, distance, context.dpr);
 	            const nextX = x + d;
 	            const nextY = y + d;
 	            const dw = d * 2;
-	            if (cornerRadius === 0 || (isArray(cornerRadius) && cornerRadius.every(num => num === 0))) {
+	            if (cornerRadius === 0 || (isArray$1(cornerRadius) && cornerRadius.every(num => num === 0))) {
 	                context.beginPath();
 	                context.rect(nextX, nextY, width - dw, height - dw);
 	            }
@@ -29578,10 +29710,10 @@
 	            if (strokeCb) {
 	                strokeCb(context, innerBorder, rectAttribute.innerBorder);
 	            }
-	            else if (sVisible) {
+	            else if (doStrokeInner) {
 	                const lastOpacity = rectAttribute.innerBorder.opacity;
 	                rectAttribute.innerBorder.opacity = opacity;
-	                context.setStrokeStyle(rect, innerBorder, x, y, rectAttribute.innerBorder);
+	                context.setStrokeStyle(rect, innerBorder, (originX - x) / scaleX, (originY - y) / scaleY, rectAttribute.innerBorder);
 	                rectAttribute.innerBorder.opacity = lastOpacity;
 	                context.stroke();
 	            }
@@ -29678,12 +29810,20 @@
 	        this.order = 0;
 	    }
 	    drawShape(symbol, context, x, y, doFill, doStroke, fVisible, sVisible, symbolAttribute, drawContext, fillCb, strokeCb) {
-	        const { size = symbolAttribute.size, opacity = symbolAttribute.opacity, outerBorder, innerBorder } = symbol.attribute;
 	        const parsedPath = symbol.getParsedPath();
 	        if (!parsedPath) {
 	            return;
 	        }
-	        if (outerBorder) {
+	        const { outerBorder, innerBorder } = symbol.attribute;
+	        const doOuterBorder = outerBorder && outerBorder.visible !== false;
+	        const doInnerBorder = innerBorder && innerBorder.visible !== false;
+	        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;
+	        const doStrokeOuter = !!(outerBorder && outerBorder.stroke);
+	        const doStrokeInner = !!(innerBorder && innerBorder.stroke);
+	        if (doOuterBorder) {
 	            const { distance = symbolAttribute.outerBorder.distance } = outerBorder;
 	            const d = getScaledStroke(context, distance, context.dpr);
 	            context.beginPath();
@@ -29694,15 +29834,15 @@
 	            if (strokeCb) {
 	                strokeCb(context, outerBorder, symbolAttribute.outerBorder);
 	            }
-	            else if (sVisible) {
+	            else if (doStrokeOuter) {
 	                const lastOpacity = symbolAttribute.outerBorder.opacity;
 	                symbolAttribute.outerBorder.opacity = opacity;
-	                context.setStrokeStyle(symbol, outerBorder, x, y, symbolAttribute.outerBorder);
+	                context.setStrokeStyle(symbol, outerBorder, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute.outerBorder);
 	                symbolAttribute.outerBorder.opacity = lastOpacity;
 	                context.stroke();
 	            }
 	        }
-	        if (innerBorder) {
+	        if (doInnerBorder) {
 	            const { distance = symbolAttribute.innerBorder.distance } = innerBorder;
 	            const d = getScaledStroke(context, distance, context.dpr);
 	            context.beginPath();
@@ -29713,10 +29853,10 @@
 	            if (strokeCb) {
 	                strokeCb(context, innerBorder, symbolAttribute.innerBorder);
 	            }
-	            else if (sVisible) {
+	            else if (doStrokeInner) {
 	                const lastOpacity = symbolAttribute.innerBorder.opacity;
 	                symbolAttribute.innerBorder.opacity = opacity;
-	                context.setStrokeStyle(symbol, innerBorder, x, y, symbolAttribute.innerBorder);
+	                context.setStrokeStyle(symbol, innerBorder, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute.innerBorder);
 	                symbolAttribute.innerBorder.opacity = lastOpacity;
 	                context.stroke();
 	            }
@@ -29764,10 +29904,10 @@
 	        return;
 	    }
 	    draw(params) {
-	        this.drawContribution.draw(this, { ...this.drawParams });
+	        this.drawContribution.draw(this, Object.assign({}, this.drawParams));
 	    }
 	    afterDraw(params) {
-	        this.drawContribution.afterDraw && this.drawContribution.afterDraw(this, { ...this.drawParams });
+	        this.drawContribution.afterDraw && this.drawContribution.afterDraw(this, Object.assign({}, this.drawParams));
 	        return;
 	    }
 	    render(groups, params) {
@@ -29850,8 +29990,10 @@
 	        graphic.forEachChildren(cb, reverse);
 	    }
 	}
-	async function foreachAsync(graphic, defaultZIndex, cb, reverse = false) {
-	    await graphic.forEachChildrenAsync(cb, reverse);
+	function foreachAsync(graphic, defaultZIndex, cb, reverse = false) {
+	    return __awaiter(this, void 0, void 0, function* () {
+	        yield graphic.forEachChildrenAsync(cb, reverse);
+	    });
 	}
 	function findNextGraphic(graphic, id, defaultZIndex, reverse = false) {
 	    const childMap = {};
@@ -29917,6 +30059,46 @@
 	}
 
 	const PickItemInterceptor = Symbol.for('PickItemInterceptor');
+	let ShadowRootPickItemInterceptorContribution = class ShadowRootPickItemInterceptorContribution {
+	    constructor() {
+	        this.order = 1;
+	    }
+	    afterPickItem(graphic, pickerService, point, pickParams, params) {
+	        if (graphic.attribute.shadowRootIdx > 0 || !graphic.attribute.shadowRootIdx) {
+	            return this._pickItem(graphic, pickerService, point, pickParams, params);
+	        }
+	        return false;
+	    }
+	    beforePickItem(graphic, pickerService, point, pickParams, params) {
+	        if (graphic.attribute.shadowRootIdx < 0) {
+	            return this._pickItem(graphic, pickerService, point, pickParams, params);
+	        }
+	        return false;
+	    }
+	    _pickItem(graphic, pickerService, point, pickParams, params) {
+	        if (!graphic.shadowRoot) {
+	            return false;
+	        }
+	        const { parentMatrix } = params || {};
+	        if (!parentMatrix) {
+	            return false;
+	        }
+	        const context = pickerService.pickContext;
+	        context.highPerformanceSave();
+	        const g = graphic.shadowRoot;
+	        const currentGroupMatrix = matrixAllocate.allocateByObj(parentMatrix);
+	        const newPoint = new Point(point.x, point.y);
+	        parentMatrix.transformPoint(newPoint, newPoint);
+	        const transMatrix = graphic.transMatrix;
+	        currentGroupMatrix.multiply(transMatrix.a, transMatrix.b, transMatrix.c, transMatrix.d, transMatrix.e, transMatrix.f);
+	        const result = pickerService.pickGroup(g, newPoint.clone(), currentGroupMatrix, pickParams);
+	        context.highPerformanceRestore();
+	        return result;
+	    }
+	};
+	ShadowRootPickItemInterceptorContribution = __decorate([
+	    injectable()
+	], ShadowRootPickItemInterceptorContribution);
 	let Canvas3DPickItemInterceptor = class Canvas3DPickItemInterceptor {
 	    constructor() {
 	        this.order = 1;
@@ -30083,7 +30265,7 @@
 	                result = this.pickGroup(graphics[i], point, parentMatrix, params);
 	            }
 	            else {
-	                result.graphic = this.pickItem(graphics[i], point, params);
+	                result.graphic = this.pickItem(graphics[i], point, parentMatrix, params);
 	            }
 	            if (result.graphic) {
 	                break;
@@ -30098,10 +30280,22 @@
 	        if (this.pickContext) {
 	            this.pickContext.inuse = false;
 	        }
+	        if (result.graphic) {
+	            let g = result.graphic;
+	            while (g.parent) {
+	                g = g.parent;
+	            }
+	            if (g.shadowHost) {
+	                result.params = {
+	                    shadowTarget: result.graphic
+	                };
+	                result.graphic = g.shadowHost;
+	            }
+	        }
 	        return result;
 	    }
 	    containsPoint(graphic, point, params) {
-	        return !!this.pickItem(graphic, point, params);
+	        return !!this.pickItem(graphic, point, null, params);
 	    }
 	    pickGroup(group, point, parentMatrix, params) {
 	        let result = {
@@ -30152,9 +30346,13 @@
 	        if (!insideGroup && !group.stage.camera) {
 	            return result;
 	        }
+	        const pickedItem = this.pickItem(group, newPoint.clone(), parentMatrix, params);
+	        if (pickedItem) {
+	            result.graphic = pickedItem;
+	        }
 	        const groupPicked = group.attribute.pickable !== false && insideGroup;
 	        currentGroupMatrix.multiply(transMatrix.a, transMatrix.b, transMatrix.c, transMatrix.d, transMatrix.e, transMatrix.f);
-	        if (group.attribute.childrenPickable !== false) {
+	        if (group.attribute.childrenPickable !== false && !pickedItem) {
 	            foreach(group, DefaultAttribute.zIndex, (graphic) => {
 	                if (graphic.isContainer) {
 	                    const newPoint = new Point(point.x, point.y);
@@ -30171,7 +30369,7 @@
 	                    const { scrollX = theme.scrollX, scrollY = theme.scrollY } = group.attribute;
 	                    newPoint.x -= scrollX;
 	                    newPoint.y -= scrollY;
-	                    const pickedItem = this.pickItem(graphic, newPoint, params);
+	                    const pickedItem = this.pickItem(graphic, newPoint, parentMatrix, params);
 	                    result.graphic = pickedItem;
 	                }
 	                return !!result.graphic || !!result.group;
@@ -30227,7 +30425,7 @@
 	                result = this.pickGroup(graphics[i], point, parentMatrix, params);
 	            }
 	            else {
-	                result.graphic = this.pickItem(graphics[i], point, params);
+	                result.graphic = this.pickItem(graphics[i], point, parentMatrix, params);
 	            }
 	            if (result.graphic) {
 	                break;
@@ -30239,10 +30437,22 @@
 	        if (!result.graphic) {
 	            result.group = group;
 	        }
+	        if (result.graphic) {
+	            let g = result.graphic;
+	            while (g.parent) {
+	                g = g.parent;
+	            }
+	            if (g.shadowHost) {
+	                result.params = {
+	                    shadowTarget: result.graphic
+	                };
+	                result.graphic = g.shadowHost;
+	            }
+	        }
 	        return result;
 	    }
 	    containsPoint(graphic, point, params) {
-	        return !!this.pickItem(graphic, point, params);
+	        return !!this.pickItem(graphic, point, null, params);
 	    }
 	    pickGroup(group, point, parentMatrix, params) {
 	        let result = {
@@ -30269,7 +30479,7 @@
 	                else {
 	                    const newPoint = new Point(point.x, point.y);
 	                    parentMatrix.transformPoint(newPoint, newPoint);
-	                    result.graphic = this.pickItem(graphic, newPoint, params);
+	                    result.graphic = this.pickItem(graphic, newPoint, parentMatrix, params);
 	                }
 	                return !!result.graphic || !!result.group;
 	            });
@@ -30279,7 +30489,7 @@
 	        }
 	        return result;
 	    }
-	    pickItem(graphic, point, params) {
+	    pickItem(graphic, point, parentMatrix, params) {
 	        if (graphic.attribute.pickable === false) {
 	            return null;
 	        }
@@ -30459,12 +30669,12 @@
 	}
 	class OrthoCamera {
 	    set params(params) {
-	        this._params = { ...params };
+	        this._params = Object.assign({}, params);
 	        this._projectionMatrixCached = this.forceGetProjectionMatrix();
 	        this._viewMatrixCached = this.forceGetViewMatrix();
 	    }
 	    get params() {
-	        return { ...this._params };
+	        return Object.assign({}, this._params);
 	    }
 	    constructor(params) {
 	        this.params = params;
@@ -30678,9 +30888,9 @@
 	        }
 	    }
 	    constructor(canvas, dpr) {
-	        this.fillAttributes = { ...DefaultFillStyle, opacity: 1 };
-	        this.strokeAttributes = { ...DefaultStrokeStyle, opacity: 1 };
-	        this.textAttributes = { ...DefaultTextStyle, opacity: 1 };
+	        this.fillAttributes = Object.assign(Object.assign({}, DefaultFillStyle), { opacity: 1 });
+	        this.strokeAttributes = Object.assign(Object.assign({}, DefaultStrokeStyle), { opacity: 1 });
+	        this.textAttributes = Object.assign(Object.assign({}, DefaultTextStyle), { opacity: 1 });
 	        this._clearShadowStyle = false;
 	        this._clearFilterStyle = false;
 	        const context = canvas.nativeCanvas.getContext('2d');
@@ -31350,7 +31560,7 @@
 	    }
 	    set dpr(dpr) {
 	        this._dpr = dpr;
-	        this.resize(this.width, this.height);
+	        this.resize(this._displayWidth, this._displayHeight);
 	    }
 	    constructor(params) {
 	        const { nativeCanvas, width = DefaultConfig$6.WIDTH, height = DefaultConfig$6.HEIGHT, dpr = DefaultConfig$6.DPR, container, x, y, canvasControled = true } = params;
@@ -31505,6 +31715,7 @@
 	const CanvasPyramid3dPicker = Symbol.for('CanvasPyramid3dPicker');
 	const CanvasRichTextPicker = Symbol.for('CanvasRichTextPicker');
 	const CanvasGlyphPicker = Symbol.for('CanvasGlyphPicker');
+	const CanvasGroupPicker = Symbol.for('CanvasGroupPicker');
 	const CanvasPickerContribution = Symbol.for('CanvasPickerContribution');
 	const MathArcPicker = Symbol.for('MathArcPicker');
 	const MathAreaPicker = Symbol.for('MathAreaPicker');
@@ -31558,7 +31769,7 @@
 	        this.pickCanvas = new exports.BrowserCanvas(options);
 	        this.pickContext = this.pickCanvas.getContext('2d');
 	    }
-	    pickItem(graphic, point, params) {
+	    pickItem(graphic, point, parentMatrix, params) {
 	        if (graphic.attribute.pickable === false) {
 	            return null;
 	        }
@@ -31566,8 +31777,9 @@
 	            for (let i = 0; i < this.InterceptorContributions.length; i++) {
 	                const drawContribution = this.InterceptorContributions[i];
 	                if (drawContribution.beforePickItem) {
-	                    if (drawContribution.beforePickItem(graphic, this, point, params)) {
-	                        return graphic;
+	                    const ret = drawContribution.beforePickItem(graphic, this, point, params, { parentMatrix });
+	                    if (ret) {
+	                        return ret === true ? graphic : ret.graphic;
 	                    }
 	                }
 	            }
@@ -31576,7 +31788,22 @@
 	        if (!picker) {
 	            return null;
 	        }
-	        return picker.contains(graphic, point, params) ? graphic : null;
+	        const data = picker.contains(graphic, point, params) ? graphic : null;
+	        if (data) {
+	            return data;
+	        }
+	        if (this.InterceptorContributions.length) {
+	            for (let i = 0; i < this.InterceptorContributions.length; i++) {
+	                const drawContribution = this.InterceptorContributions[i];
+	                if (drawContribution.afterPickItem) {
+	                    const ret = drawContribution.afterPickItem(graphic, this, point, params, { parentMatrix });
+	                    if (ret) {
+	                        return ret === true ? graphic : ret.graphic;
+	                    }
+	                }
+	            }
+	        }
+	        return data;
 	    }
 	};
 	__decorate([
@@ -31881,7 +32108,7 @@
 	    configure(global, env) {
 	        this.pickContext = new exports.EmptyContext2d(null, 1);
 	    }
-	    pickItem(graphic, point, params) {
+	    pickItem(graphic, point, parentMatrix, params) {
 	        if (graphic.attribute.pickable === false) {
 	            return null;
 	        }
@@ -31916,6 +32143,8 @@
 	    bind(GlobalPickerService).toService(exports.DefaultGlobalPickerService);
 	    bind(Canvas3DPickItemInterceptor).toSelf().inSingletonScope();
 	    bind(PickItemInterceptor).toService(Canvas3DPickItemInterceptor);
+	    bind(ShadowRootPickItemInterceptorContribution).toSelf().inSingletonScope();
+	    bind(PickItemInterceptor).toService(ShadowRootPickItemInterceptorContribution);
 	    bindContributionProvider(bind, PickItemInterceptor);
 	});
 
@@ -32006,7 +32235,7 @@
 	var pluginModule = new ContainerModule(bind => {
 	    bind(DefaultPluginService).toSelf();
 	    bind(PluginService).toService(DefaultPluginService);
-	    bindContributionProvider(bind, AutoEnablePlugins);
+	    bindContributionProviderNoSingletonScope(bind, AutoEnablePlugins);
 	});
 
 	exports.BaseEnvContribution = class BaseEnvContribution {
@@ -32085,6 +32314,15 @@
 	            };
 	        });
 	    }
+	    getElementTop(dom, baseWindow) {
+	        return 0;
+	    }
+	    getElementLeft(dom, baseWindow) {
+	        return 0;
+	    }
+	    getElementTopLeft(dom, baseWindow) {
+	        return { top: 0, left: 0 };
+	    }
 	};
 	exports.BaseEnvContribution = __decorate([
 	    injectable()
@@ -32164,8 +32402,8 @@
 	                scaleY = rect.height / nativeCanvas.offsetHeight;
 	            }
 	            return {
-	                x: (x - rect.left) / (isValidNumber(scaleX) ? scaleX : 1),
-	                y: (y - rect.top) / (isValidNumber(scaleY) ? scaleX : 1)
+	                x: (x - rect.left) / (isValidNumber$1(scaleX) ? scaleX : 1),
+	                y: (y - rect.top) / (isValidNumber$1(scaleY) ? scaleX : 1)
 	            };
 	        }
 	        return {
@@ -32192,7 +32430,7 @@
 	        const { tagName = 'div', width, height, style, parent } = params;
 	        const element = document.createElement(tagName);
 	        if (style) {
-	            if (isString(style)) {
+	            if (isString$1(style)) {
 	                element.setAttribute('style', style);
 	            }
 	            else {
@@ -32208,7 +32446,7 @@
 	            element.style.height = `${height}px`;
 	        }
 	        if (parent) {
-	            const pd = isString(parent) ? this.getElementById(parent) : parent;
+	            const pd = isString$1(parent) ? this.getElementById(parent) : parent;
 	            if (pd && pd.appendChild) {
 	                pd.appendChild(element);
 	            }
@@ -32311,6 +32549,38 @@
 	    release(...params) {
 	        return;
 	    }
+	    getElementTop(element, baseWindow) {
+	        let actualTop = element.offsetTop;
+	        let current = element.offsetParent;
+	        while (current !== null) {
+	            actualTop += current.offsetTop;
+	            current = current.offsetParent;
+	        }
+	        return actualTop;
+	    }
+	    getElementLeft(element, baseWindow) {
+	        let actualLeft = element.offsetLeft;
+	        let current = element.offsetParent;
+	        while (current !== null) {
+	            actualLeft += current.offsetLeft;
+	            current = current.offsetParent;
+	        }
+	        return actualLeft;
+	    }
+	    getElementTopLeft(element, baseWindow) {
+	        let actualTop = element.offsetTop;
+	        let actualLeft = element.offsetLeft;
+	        let current = element.offsetParent;
+	        while (current !== null) {
+	            actualTop += current.offsetTop;
+	            actualLeft += current.offsetLeft;
+	            current = current.offsetParent;
+	        }
+	        return {
+	            top: actualTop,
+	            left: actualLeft
+	        };
+	    }
 	};
 	BrowserEnvContribution = __decorate([
 	    injectable(),
@@ -32885,28 +33155,37 @@
 	    injectable()
 	], NodeEnvContribution);
 
-	async function makeUpCanvas(domref, canvasIdLists, canvasMap, freeCanvasIdx, freeCanvasList) {
-	    const dpr = wx.getSystemInfoSync().pixelRatio;
-	    for (let i = 0; i < canvasIdLists.length; i++) {
-	        const id = canvasIdLists[i];
-	        await new Promise(resolve => {
-	            wx.createSelectorQuery()
-	                .select(`#${id}`)
-	                .fields({ node: true, size: true })
-	                .exec((res) => {
-	                const canvas = res[0].node;
-	                const width = res[0].width;
-	                const height = res[0].height;
-	                canvas.width = width * dpr;
-	                canvas.height = height * dpr;
-	                canvasMap.set(id, canvas);
-	                if (i >= freeCanvasIdx) {
-	                    freeCanvasList.push(canvas);
-	                }
-	                resolve(null);
+	function makeUpCanvas(domref, canvasIdLists, canvasMap, freeCanvasIdx, freeCanvasList, compoient) {
+	    return __awaiter(this, void 0, void 0, function* () {
+	        const dpr = wx.getSystemInfoSync().pixelRatio;
+	        for (let i = 0; i < canvasIdLists.length; i++) {
+	            const id = canvasIdLists[i];
+	            yield new Promise(resolve => {
+	                let data = wx.createSelectorQuery();
+	                if (compoient) {
+	                    data = data.in(compoient);
+	                }
+	                data
+	                    .select(`#${id}`)
+	                    .fields({ node: true, size: true })
+	                    .exec((res) => {
+	                    if (!res[0]) {
+	                        return;
+	                    }
+	                    const canvas = res[0].node;
+	                    const width = res[0].width;
+	                    const height = res[0].height;
+	                    canvas.width = width * dpr;
+	                    canvas.height = height * dpr;
+	                    canvasMap.set(id, canvas);
+	                    if (i >= freeCanvasIdx) {
+	                        freeCanvasList.push(canvas);
+	                    }
+	                    resolve(null);
+	                });
 	            });
-	        });
-	    }
+	        }
+	    });
 	}
 	let WxEnvContribution = class WxEnvContribution extends exports.BaseEnvContribution {
 	    constructor() {
@@ -32930,7 +33209,7 @@
 	    configure(service, params) {
 	        if (service.env === this.type) {
 	            service.setActiveEnvContribution(this);
-	            return makeUpCanvas(params.domref, params.canvasIdLists, this.canvasMap, params.freeCanvasIdx, this.freeCanvasList).then(() => {
+	            return makeUpCanvas(params.domref, params.canvasIdLists, this.canvasMap, params.freeCanvasIdx, this.freeCanvasList, params.compoient).then(() => {
 	                loadFeishuContributions();
 	            });
 	        }
@@ -33033,6 +33312,18 @@
 	    release(...params) {
 	        this.releaseWindow();
 	    }
+	    isVisible(bbox) {
+	        return true;
+	    }
+	    onVisibleChange(cb) {
+	        return;
+	    }
+	    getTopLeft(baseWindow) {
+	        return {
+	            top: 0,
+	            left: 0
+	        };
+	    }
 	};
 	exports.BaseWindowHandlerContribution = __decorate([
 	    injectable(),
@@ -33047,6 +33338,7 @@
 	        super();
 	        this.global = global;
 	        this.type = 'browser';
+	        this._canvasIsIntersecting = true;
 	    }
 	    getTitle() {
 	        return this.canvas.id.toString();
@@ -33067,6 +33359,42 @@
 	        else {
 	            this.createWindowByCanvas(params);
 	        }
+	        this.postInit();
+	    }
+	    postInit() {
+	        try {
+	            this.observerCanvas();
+	        }
+	        catch (err) {
+	            console.error('发生错误，该环境不存在IntersectionObserver');
+	        }
+	    }
+	    isElementVisible(el) {
+	        const rect = el.getBoundingClientRect();
+	        const vWidth = window.innerWidth || document.documentElement.clientWidth;
+	        const vHeight = window.innerHeight || document.documentElement.clientHeight;
+	        if (rect.right < 0 || rect.bottom < 0 || rect.left > vWidth || rect.top > vHeight) {
+	            return false;
+	        }
+	        return true;
+	    }
+	    observerCanvas() {
+	        this._canvasIsIntersecting = this.isElementVisible(this.canvas.nativeCanvas);
+	        const observer = new IntersectionObserver((entries, observer) => {
+	            entries.forEach(entry => {
+	                if (this._canvasIsIntersecting !== entry.isIntersecting) {
+	                    this._canvasIsIntersecting = entry.isIntersecting;
+	                    this._onVisibleChangeCb && this._onVisibleChangeCb(entry.isIntersecting);
+	                }
+	                else {
+	                    this._canvasIsIntersecting = entry.isIntersecting;
+	                }
+	            });
+	        });
+	        if (!observer) {
+	            return;
+	        }
+	        observer.observe(this.canvas.nativeCanvas);
 	    }
 	    createWindowByConfig(params) {
 	        const nativeCanvas = this.global.createCanvas({
@@ -33206,6 +33534,15 @@
 	        }
 	        context.nativeContext.restore();
 	    }
+	    isVisible(bbox) {
+	        return this._canvasIsIntersecting;
+	    }
+	    onVisibleChange(cb) {
+	        this._onVisibleChangeCb = cb;
+	    }
+	    getTopLeft(baseWindow) {
+	        return this.global.getElementTopLeft(this.canvas.nativeCanvas, baseWindow);
+	    }
 	};
 	BrowserWindowHandlerContribution.env = 'browser';
 	BrowserWindowHandlerContribution = __decorate([
@@ -33902,22 +34239,14 @@
 	        }
 	        if (event.changedTouches.length > 0) {
 	            event.changedTouches.forEach((d, i) => {
-	                event.changedTouches[i] = {
-	                    ...event.changedTouches[i],
-	                    offsetX: d.x,
-	                    offsetY: d.y
-	                };
+	                event.changedTouches[i] = Object.assign(Object.assign({}, event.changedTouches[i]), { offsetX: d.x, offsetY: d.y });
 	            });
 	            event.offsetX = event.changedTouches[0].offsetX;
 	            event.offsetY = event.changedTouches[0].offsetY;
 	        }
 	        if (event.touches.length > 0) {
 	            event.touches.forEach((d, i) => {
-	                event.touches[i] = {
-	                    ...event.touches[i],
-	                    offsetX: d.x,
-	                    offsetY: d.y
-	                };
+	                event.touches[i] = Object.assign(Object.assign({}, event.touches[i]), { offsetX: d.x, offsetY: d.y });
 	            });
 	        }
 	        event.preventDefault = () => {
@@ -34474,7 +34803,7 @@
 	        throw new Error('暂未实现');
 	    }
 	    release(...params) {
-	        if (this._nativeCanvas.release && isFunction(this._nativeCanvas.release)) {
+	        if (this._nativeCanvas.release && isFunction$1(this._nativeCanvas.release)) {
 	            this._nativeCanvas.release();
 	        }
 	    }
@@ -34953,6 +35282,10 @@
 	        this.global = global;
 	        this.offscreen = false;
 	    }
+	    setDpr(dpr) {
+	        this.canvas.dpr = dpr;
+	        return;
+	    }
 	    init(layer, window, params) {
 	        this.layer = layer;
 	        this.window = window;
@@ -35011,12 +35344,7 @@
 	                this.canvas.applyPosition();
 	            }
 	        }
-	        params.renderService.render(group, {
-	            context: this.context,
-	            clear: (_a = params.background) !== null && _a !== void 0 ? _a : '#ffffff',
-	            ...params,
-	            ...userParams
-	        });
+	        params.renderService.render(group, Object.assign(Object.assign({ context: this.context, clear: (_a = params.background) !== null && _a !== void 0 ? _a : '#ffffff' }, params), userParams));
 	    }
 	    merge(layerHandlers) {
 	        layerHandlers.forEach(l => {
@@ -35031,11 +35359,7 @@
 	    drawTo(target, group, params) {
 	        var _a;
 	        const context = target.getContext();
-	        params.renderService.render(group, {
-	            context,
-	            ...params,
-	            clear: params.clear ? (_a = params.background) !== null && _a !== void 0 ? _a : '#fff' : undefined
-	        });
+	        params.renderService.render(group, Object.assign(Object.assign({ context }, params), { clear: params.clear ? (_a = params.background) !== null && _a !== void 0 ? _a : '#fff' : undefined }));
 	        return;
 	    }
 	    getContext() {
@@ -35056,6 +35380,10 @@
 	        this.global = global;
 	        this.offscreen = true;
 	    }
+	    setDpr(dpr) {
+	        this.canvas.dpr = dpr;
+	        return;
+	    }
 	    init(layer, window, params) {
 	        this.layer = layer;
 	        const nativeCanvas = this.global.createOffscreenCanvas({
@@ -35083,13 +35411,7 @@
 	    }
 	    render(group, params) {
 	        var _a;
-	        params.renderService.render(group, {
-	            context: this.context,
-	            ...params,
-	            x: 0,
-	            y: 0,
-	            clear: (_a = params.background) !== null && _a !== void 0 ? _a : '#ffffff'
-	        });
+	        params.renderService.render(group, Object.assign(Object.assign({ context: this.context }, params), { x: 0, y: 0, clear: (_a = params.background) !== null && _a !== void 0 ? _a : '#ffffff' }));
 	    }
 	    prepare(dirtyBounds, params) {
 	        return;
@@ -35142,6 +35464,18 @@
 	        this.order = 1;
 	    }
 	    afterDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+	        if (graphic.attribute.shadowRootIdx > 0 || !graphic.attribute.shadowRootIdx) {
+	            this.drawItem(graphic, renderService, drawContext, drawContribution, params);
+	        }
+	        return false;
+	    }
+	    beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+	        if (graphic.attribute.shadowRootIdx < 0) {
+	            this.drawItem(graphic, renderService, drawContext, drawContribution, params);
+	        }
+	        return false;
+	    }
+	    drawItem(graphic, renderService, drawContext, drawContribution, params) {
 	        if (!graphic.shadowRoot) {
 	            return false;
 	        }
@@ -35460,15 +35794,7 @@
 	        const idc = incrementalLayer.drawContribution || container.get(IncrementalDrawContribution);
 	        idc.dirtyBounds.setValue(-Infinity, -Infinity, Infinity, Infinity);
 	        idc.backupDirtyBounds.setValue(-Infinity, -Infinity, Infinity, Infinity);
-	        idc.draw(this.currentRenderService, {
-	            ...drawContext,
-	            drawContribution: idc,
-	            clear: 'transparent',
-	            layer: incrementalLayer.layer,
-	            context: incrementalContext,
-	            startAtId: group._uid,
-	            break: false
-	        });
+	        idc.draw(this.currentRenderService, Object.assign(Object.assign({}, drawContext), { drawContribution: idc, clear: 'transparent', layer: incrementalLayer.layer, context: incrementalContext, startAtId: group._uid, break: false }));
 	        incrementalLayer.drawContribution = idc;
 	        const nextGraphic = this._findNextGraphic(group);
 	        if (nextGraphic) {
@@ -35485,15 +35811,7 @@
 	                    subLayers.set(nextGraphic._uid, afterLayer);
 	                }
 	                const afterContext = afterLayer.layer.getNativeHandler().getContext();
-	                this.draw(this.currentRenderService, {
-	                    ...drawContext,
-	                    drawContribution: idc,
-	                    clear: 'transparent',
-	                    layer: afterLayer.layer,
-	                    context: afterContext,
-	                    startAtId: nextGraphic._uid,
-	                    break: false
-	                });
+	                this.draw(this.currentRenderService, Object.assign(Object.assign({}, drawContext), { drawContribution: idc, clear: 'transparent', layer: afterLayer.layer, context: afterContext, startAtId: nextGraphic._uid, break: false }));
 	            }
 	        }
 	    }
@@ -35639,7 +35957,7 @@
 	            context.disableStroke = disableStroke;
 	            context.disableBeginPath = disableBeginPath;
 	        }
-	        else if (cornerRadius === 0 || (isArray(cornerRadius) && cornerRadius.every(num => num === 0))) {
+	        else if (cornerRadius === 0 || (isArray$1(cornerRadius) && cornerRadius.every(num => num === 0))) {
 	            context.beginPath();
 	            context.rect(x, y, width, height);
 	        }
@@ -35895,164 +36213,178 @@
 	        this.defaultRenderMap.set(this.lineRender.numberType, this.lineRender);
 	        this.defaultRenderMap.set(this.areaRender.numberType, this.areaRender);
 	    }
-	    async draw(renderService, drawContext) {
-	        if (this.checkingForDrawPromise) {
-	            return;
-	        }
-	        this.lastRenderService = renderService;
-	        this.lastDrawContext = drawContext;
-	        this.checkingForDrawPromise = this.checkForDraw(drawContext);
-	        const skipDraw = await this.checkingForDrawPromise;
-	        this.checkingForDrawPromise = null;
-	        if (skipDraw) {
-	            return;
-	        }
-	        this.currentRenderService = renderService;
-	        const { context, x = 0, y = 0 } = drawContext;
-	        if (!context) {
-	            return;
-	        }
-	        context.inuse = true;
-	        context.clearMatrix();
-	        context.setTransformForCurrent(true);
-	        context.save();
-	        drawContext.restartIncremental && this.clearScreen(this.currentRenderService, context, drawContext);
-	        context.translate(x, y, true);
-	        context.save();
-	        renderService.renderTreeRoots
-	            .sort((a, b) => {
-	            var _a, _b;
-	            return ((_a = a.attribute.zIndex) !== null && _a !== void 0 ? _a : DefaultAttribute.zIndex) - ((_b = b.attribute.zIndex) !== null && _b !== void 0 ? _b : DefaultAttribute.zIndex);
-	        })
-	            .forEach(group => {
-	            this.renderGroup(group, drawContext);
-	        });
-	        this.hooks.completeDraw.tap('top-draw', () => {
-	            context.restore();
-	            context.restore();
-	            context.draw();
-	            context.inuse = false;
-	            this.rendering = false;
+	    draw(renderService, drawContext) {
+	        return __awaiter(this, void 0, void 0, function* () {
+	            if (this.checkingForDrawPromise) {
+	                return;
+	            }
+	            this.lastRenderService = renderService;
+	            this.lastDrawContext = drawContext;
+	            this.checkingForDrawPromise = this.checkForDraw(drawContext);
+	            const skipDraw = yield this.checkingForDrawPromise;
+	            this.checkingForDrawPromise = null;
+	            if (skipDraw) {
+	                return;
+	            }
+	            this.currentRenderService = renderService;
+	            const { context, x = 0, y = 0 } = drawContext;
+	            if (!context) {
+	                return;
+	            }
+	            context.inuse = true;
+	            context.clearMatrix();
+	            context.setTransformForCurrent(true);
+	            context.save();
+	            drawContext.restartIncremental && this.clearScreen(this.currentRenderService, context, drawContext);
+	            context.translate(x, y, true);
+	            context.save();
+	            renderService.renderTreeRoots
+	                .sort((a, b) => {
+	                var _a, _b;
+	                return ((_a = a.attribute.zIndex) !== null && _a !== void 0 ? _a : DefaultAttribute.zIndex) - ((_b = b.attribute.zIndex) !== null && _b !== void 0 ? _b : DefaultAttribute.zIndex);
+	            })
+	                .forEach(group => {
+	                this.renderGroup(group, drawContext);
+	            });
+	            this.hooks.completeDraw.tap('top-draw', () => {
+	                context.restore();
+	                context.restore();
+	                context.draw();
+	                context.inuse = false;
+	                this.rendering = false;
+	            });
 	        });
 	    }
-	    async _increaseRender(group, drawContext) {
-	        this.rendering = true;
-	        await this._renderIncrementalGroup(group, drawContext);
-	        return;
+	    _increaseRender(group, drawContext) {
+	        return __awaiter(this, void 0, void 0, function* () {
+	            this.rendering = true;
+	            yield this._renderIncrementalGroup(group, drawContext);
+	            return;
+	        });
 	    }
-	    async _renderIncrementalGroup(group, drawContext) {
-	        this.count = group.count;
-	        await new Promise(resolve => {
-	            this.renderItem(group, drawContext, {
-	                drawingCb: async () => {
-	                    if (group.count === 2) {
-	                        const graphic = group.getChildAt(0);
-	                        if (graphic.incremental && graphic.attribute.segments) {
-	                            if (!graphic.incrementalAt) {
-	                                graphic.incrementalAt = 0;
+	    _renderIncrementalGroup(group, drawContext) {
+	        return __awaiter(this, void 0, void 0, function* () {
+	            this.count = group.count;
+	            yield new Promise(resolve => {
+	                this.renderItem(group, drawContext, {
+	                    drawingCb: () => __awaiter(this, void 0, void 0, function* () {
+	                        if (group.count === 2) {
+	                            const graphic = group.getChildAt(0);
+	                            if (graphic.incremental && graphic.attribute.segments) {
+	                                if (!graphic.incrementalAt) {
+	                                    graphic.incrementalAt = 0;
+	                                }
+	                                while (graphic.incrementalAt < graphic.attribute.segments.length) {
+	                                    drawContext.multiGraphicOptions = {
+	                                        startAtIdx: graphic.incrementalAt,
+	                                        length: graphic.incremental
+	                                    };
+	                                    this.renderItem(graphic, drawContext);
+	                                    graphic.incrementalAt += graphic.incremental;
+	                                    yield this.waitToNextFrame();
+	                                }
 	                            }
-	                            while (graphic.incrementalAt < graphic.attribute.segments.length) {
-	                                drawContext.multiGraphicOptions = {
-	                                    startAtIdx: graphic.incrementalAt,
-	                                    length: graphic.incremental
-	                                };
+	                            else {
 	                                this.renderItem(graphic, drawContext);
-	                                graphic.incrementalAt += graphic.incremental;
-	                                await this.waitToNextFrame();
 	                            }
+	                            resolve(false);
+	                            return;
 	                        }
-	                        else {
-	                            this.renderItem(graphic, drawContext);
-	                        }
-	                        resolve(false);
-	                        return;
-	                    }
-	                    await foreachAsync(group, DefaultAttribute.zIndex, (item, i) => {
-	                        if (this.status === STATUS.STOP) {
-	                            return true;
-	                        }
-	                        if (item.isContainer) {
-	                            return false;
-	                        }
-	                        if (i < this.currentIdx) {
+	                        yield foreachAsync(group, DefaultAttribute.zIndex, (item, i) => {
+	                            if (this.status === STATUS.STOP) {
+	                                return true;
+	                            }
+	                            if (item.isContainer) {
+	                                return false;
+	                            }
+	                            if (i < this.currentIdx) {
+	                                return false;
+	                            }
+	                            const frameTail = this.currFrameStartAt + group.incremental;
+	                            if (i < frameTail) {
+	                                this.currentIdx = i + 1;
+	                                this.renderItem(item, drawContext);
+	                            }
+	                            if (i === frameTail - 1) {
+	                                this.currFrameStartAt = this.currentIdx;
+	                                return this.waitToNextFrame();
+	                            }
 	                            return false;
-	                        }
-	                        const frameTail = this.currFrameStartAt + group.incremental;
-	                        if (i < frameTail) {
-	                            this.currentIdx = i + 1;
-	                            this.renderItem(item, drawContext);
-	                        }
-	                        if (i === frameTail - 1) {
-	                            this.currFrameStartAt = this.currentIdx;
-	                            return this.waitToNextFrame();
-	                        }
-	                        return false;
-	                    });
-	                    resolve(false);
-	                }
+	                        });
+	                        resolve(false);
+	                    })
+	                });
 	            });
+	            this.hooks.completeDraw.call();
 	        });
-	        this.hooks.completeDraw.call();
 	    }
-	    async waitToNextFrame() {
-	        return new Promise(resolve => {
-	            this.global.getRequestAnimationFrame()(() => {
-	                resolve(false);
+	    waitToNextFrame() {
+	        return __awaiter(this, void 0, void 0, function* () {
+	            return new Promise(resolve => {
+	                this.global.getRequestAnimationFrame()(() => {
+	                    resolve(false);
+	                });
 	            });
 	        });
 	    }
-	    async checkForDraw(drawContext) {
-	        let skip = this.rendering;
-	        if (drawContext.restartIncremental) {
-	            skip = false;
-	            await this.forceStop();
-	            this.resetToInit();
-	        }
-	        return skip;
+	    checkForDraw(drawContext) {
+	        return __awaiter(this, void 0, void 0, function* () {
+	            let skip = this.rendering;
+	            if (drawContext.restartIncremental) {
+	                skip = false;
+	                yield this.forceStop();
+	                this.resetToInit();
+	            }
+	            return skip;
+	        });
 	    }
-	    async forceStop() {
-	        if (this.rendering) {
-	            this.status = STATUS.STOP;
-	            await new Promise(resolve => {
-	                this.hooks.completeDraw.tap('stopCb', () => {
-	                    this.status = STATUS.NORMAL;
-	                    this.hooks.completeDraw.taps = this.hooks.completeDraw.taps.filter(item => {
-	                        return item.name !== 'stopCb';
+	    forceStop() {
+	        return __awaiter(this, void 0, void 0, function* () {
+	            if (this.rendering) {
+	                this.status = STATUS.STOP;
+	                yield new Promise(resolve => {
+	                    this.hooks.completeDraw.tap('stopCb', () => {
+	                        this.status = STATUS.NORMAL;
+	                        this.hooks.completeDraw.taps = this.hooks.completeDraw.taps.filter(item => {
+	                            return item.name !== 'stopCb';
+	                        });
+	                        resolve(false);
 	                    });
-	                    resolve(false);
 	                });
-	            });
-	        }
+	            }
+	        });
 	    }
 	    resetToInit() {
 	        this.currFrameStartAt = 0;
 	        this.currentIdx = 0;
 	    }
-	    async renderGroup(group, drawContext) {
-	        if (drawContext.break || group.attribute.visibleAll === false) {
-	            return;
-	        }
-	        if (group.incremental && drawContext.startAtId === group._uid) {
-	            await this._increaseRender(group, drawContext);
-	            drawContext.break = true;
-	            return;
-	        }
-	        await new Promise(resolve => {
-	            this.renderItem(group, drawContext, {
-	                drawingCb: async () => {
-	                    await foreachAsync(group, DefaultAttribute.zIndex, async (item) => {
-	                        if (drawContext.break) {
-	                            return;
-	                        }
-	                        if (item.isContainer) {
-	                            await this.renderGroup(item, drawContext);
-	                        }
-	                        else {
-	                            return;
-	                        }
-	                    });
-	                    resolve(false);
-	                }
+	    renderGroup(group, drawContext) {
+	        return __awaiter(this, void 0, void 0, function* () {
+	            if (drawContext.break || group.attribute.visibleAll === false) {
+	                return;
+	            }
+	            if (group.incremental && drawContext.startAtId === group._uid) {
+	                yield this._increaseRender(group, drawContext);
+	                drawContext.break = true;
+	                return;
+	            }
+	            yield new Promise(resolve => {
+	                this.renderItem(group, drawContext, {
+	                    drawingCb: () => __awaiter(this, void 0, void 0, function* () {
+	                        yield foreachAsync(group, DefaultAttribute.zIndex, (item) => __awaiter(this, void 0, void 0, function* () {
+	                            if (drawContext.break) {
+	                                return;
+	                            }
+	                            if (item.isContainer) {
+	                                yield this.renderGroup(item, drawContext);
+	                            }
+	                            else {
+	                                return;
+	                            }
+	                        }));
+	                        resolve(false);
+	                    })
+	                });
 	            });
 	        });
 	    }
@@ -37031,8 +37363,8 @@
 	        }
 	        let picked = true;
 	        if (!onlyTranslate ||
-	            (isNumber(cornerRadius, true) && cornerRadius !== 0) ||
-	            (isArray(cornerRadius) && cornerRadius.some(num => num !== 0))) {
+	            (isNumber$2(cornerRadius, true) && cornerRadius !== 0) ||
+	            (isArray$1(cornerRadius) && cornerRadius.some(num => num !== 0))) {
 	            picked = false;
 	            this.canvasRenderer.drawShape(rect, pickContext, x, y, {}, null, (context, rectAttribute, themeAttribute) => {
 	                if (picked) {
@@ -37554,7 +37886,7 @@
 	                if (picked) {
 	                    return;
 	                }
-	                picked = !!pickerService.pickItem(g, point, params);
+	                picked = !!pickerService.pickItem(g, point, null, params);
 	            });
 	            return picked;
 	        }
@@ -37713,6 +38045,19 @@
 	    __metadata("design:paramtypes", [Object])
 	], DefaultCanvasArc3dPicker);
 
+	let DefaultCanvasGroupPicker = class DefaultCanvasGroupPicker {
+	    constructor() {
+	        this.type = 'group';
+	        this.numberType = GROUP_NUMBER_TYPE;
+	    }
+	    contains(group, point, params) {
+	        return false;
+	    }
+	};
+	DefaultCanvasGroupPicker = __decorate([
+	    injectable()
+	], DefaultCanvasGroupPicker);
+
 	var canvasPickModule = new ContainerModule((bind, unbind, isBound, rebind) => {
 	    bind(DefaultCanvasCirclePicker).toSelf().inSingletonScope();
 	    bind(CanvasCirclePicker).toService(DefaultCanvasCirclePicker);
@@ -37759,6 +38104,9 @@
 	    bind(DefaultCanvasGlyphPicker).toSelf().inSingletonScope();
 	    bind(CanvasGlyphPicker).toService(DefaultCanvasGlyphPicker);
 	    bind(CanvasPickerContribution).toService(CanvasGlyphPicker);
+	    bind(DefaultCanvasGroupPicker).toSelf().inSingletonScope();
+	    bind(CanvasGroupPicker).toService(DefaultCanvasGroupPicker);
+	    bind(CanvasPickerContribution).toService(CanvasGroupPicker);
 	    bindContributionProvider(bind, CanvasPickerContribution);
 	});
 
@@ -37913,8 +38261,8 @@
 	        }
 	        let picked = true;
 	        if (!onlyTranslate ||
-	            (isNumber(cornerRadius, true) && cornerRadius !== 0) ||
-	            (isArray(cornerRadius) && cornerRadius.some(num => num !== 0))) {
+	            (isNumber$2(cornerRadius, true) && cornerRadius !== 0) ||
+	            (isArray$1(cornerRadius) && cornerRadius.some(num => num !== 0))) {
 	            picked = false;
 	            this.canvasRenderer.drawShape(rect, pickContext, x, y, {}, null, (context, rectAttribute, themeAttribute) => {
 	                if (picked) {
@@ -38268,7 +38616,7 @@
 	                if (picked) {
 	                    return;
 	                }
-	                picked = !!pickerService.pickItem(g, point, params);
+	                picked = !!pickerService.pickItem(g, point, null, params);
 	            });
 	            return picked;
 	        }
@@ -38597,20 +38945,8 @@
 	                if (!subLayer || !subLayer.drawContribution) {
 	                    return;
 	                }
-	                subLayer.drawContribution.draw(stage.renderService, {
-	                    x: stage.x,
-	                    y: stage.y,
-	                    width: layer.viewWidth,
-	                    height: layer.viewHeight,
-	                    stage,
-	                    layer,
-	                    clear: 'transparent',
-	                    renderService: stage.renderService,
-	                    updateBounds: false,
-	                    startAtId: group._uid,
-	                    context: subLayer.layer.getNativeHandler().getContext(),
-	                    ...this.nextUserParams
-	                });
+	                subLayer.drawContribution.draw(stage.renderService, Object.assign({ x: stage.x, y: stage.y, width: layer.viewWidth, height: layer.viewHeight, stage,
+	                    layer, clear: 'transparent', renderService: stage.renderService, updateBounds: false, startAtId: group._uid, context: subLayer.layer.getNativeHandler().getContext() }, this.nextUserParams));
 	            });
 	            this.nextUserParams = {};
 	            this.nextFrameRenderGroupSet.clear();
@@ -38654,12 +38990,23 @@
 	    renderGroupHTML(group) {
 	        this.renderGraphicHTML(group);
 	        group.forEachChildren((g) => {
-	            this.renderGraphicHTML(g);
+	            if (g.isContainer) {
+	                this.renderGroupHTML(g);
+	            }
+	            else {
+	                this.renderGraphicHTML(g);
+	            }
 	        });
 	    }
 	    renderGraphicHTML(graphic) {
 	        const { html } = graphic.attribute;
 	        if (!html) {
+	            if (graphic.bindDom && graphic.bindDom.size) {
+	                graphic.bindDom.forEach(item => {
+	                    item.dom && item.dom.parentElement.removeChild(item.dom);
+	                });
+	                graphic.bindDom.clear();
+	            }
 	            return;
 	        }
 	        const stage = graphic.stage;
@@ -38705,6 +39052,7 @@
 	        wrapGroup.style.pointerEvents = 'none';
 	        if (!wrapGroup.style.position) {
 	            wrapGroup.style.position = 'absolute';
+	            nativeContainer.style.position = 'relative';
 	        }
 	        let left = 0;
 	        let top = 0;
@@ -38718,8 +39066,12 @@
 	            left = b.x1;
 	            top = b.y1;
 	        }
-	        wrapGroup.style.left = `${left}px`;
-	        wrapGroup.style.top = `${top}px`;
+	        const containerTL = application.global.getElementTopLeft(nativeContainer, false);
+	        const windowTL = stage.window.getTopLeft(false);
+	        const offsetX = left + windowTL.left - containerTL.left;
+	        const offsetTop = top + windowTL.top - containerTL.top;
+	        wrapGroup.style.left = `${offsetX}px`;
+	        wrapGroup.style.top = `${offsetTop}px`;
 	    }
 	}
 
@@ -38797,10 +39149,11 @@
 	        this.activeEvent = 'onRegister';
 	        this.id = Generator.GenAutoIncrementId();
 	        this.key = this.name + this.id;
+	        this.tempBounds = new AABBBounds();
 	    }
 	    tryLayout(graphic) {
 	        const p = graphic.parent;
-	        if (!p) {
+	        if (!p || !graphic.needUpdateLayout()) {
 	            return;
 	        }
 	        const theme = getTheme(p).group;
@@ -38808,10 +39161,37 @@
 	        if (display !== 'flex') {
 	            return;
 	        }
-	        const { width, height, flexDirection = theme.flexDirection, flexWrap = theme.flexWrap, justifyContent = theme.justifyContent, alignItems = theme.alignItems, alignContent = theme.alignContent } = p.attribute;
-	        if (!(width && height)) {
+	        const { flexDirection = theme.flexDirection, flexWrap = theme.flexWrap, justifyContent = theme.justifyContent, alignItems = theme.alignItems, alignContent = theme.alignContent, clip = theme.clip } = p.attribute;
+	        let childrenWidth = 0;
+	        let childrenHeight = 0;
+	        let boundsLegal = 0;
+	        p.forEachChildren((child) => {
+	            const bounds = child.AABBBounds;
+	            if (flexDirection === 'column' || flexDirection === 'column-reverse') {
+	                childrenHeight += bounds.height();
+	                childrenWidth = Math.max(childrenWidth, bounds.width());
+	            }
+	            else {
+	                childrenWidth += bounds.width();
+	                childrenHeight = Math.max(childrenHeight, bounds.height());
+	            }
+	            boundsLegal += bounds.x1;
+	            boundsLegal += bounds.y1;
+	            boundsLegal += bounds.x2;
+	            boundsLegal += bounds.y2;
+	        });
+	        if (!isFinite(boundsLegal)) {
 	            return;
 	        }
+	        const width = p.attribute.width || childrenWidth;
+	        const height = p.attribute.height || childrenHeight;
+	        if (!p.attribute.width) {
+	            p.attribute.width = 0;
+	        }
+	        if (!p.attribute.height) {
+	            p.attribute.height = 0;
+	        }
+	        this.tempBounds.copy(p._AABBBounds);
 	        const result = {
 	            main: { len: width, field: 'x' },
 	            cross: { len: height, field: 'y' },
@@ -38889,6 +39269,11 @@
 	                const anchorPos = cross.len / 2;
 	                this.layoutCross(children, alignItems, cross, anchorPos, mianLenArray, mainList[0], 0);
 	            }
+	            else {
+	                children.forEach(child => {
+	                    child.attribute[cross.field] = getPadding(child, cross.field);
+	                });
+	            }
 	        }
 	        else {
 	            if (alignContent === 'flex-start') {
@@ -38931,12 +39316,21 @@
 	                });
 	            }
 	        }
+	        children.forEach((child, idx) => {
+	            child.addUpdateBoundTag();
+	            child.addUpdatePositionTag();
+	            child.clearUpdateLayoutTag();
+	        });
+	        p.addUpdateLayoutTag();
+	        if (!clip && !this.tempBounds.equals(p.AABBBounds)) {
+	            this.tryLayout(p);
+	        }
 	    }
 	    layoutMain(p, children, justifyContent, main, mianLenArray, lastIdx, currSeg) {
 	        if (justifyContent === 'flex-start') {
 	            let pos = 0;
 	            for (let i = lastIdx; i <= currSeg.idx; i++) {
-	                children[i].attribute[main.field] = pos;
+	                children[i].attribute[main.field] = pos + getPadding(children[i], main.field);
 	                pos += mianLenArray[i].mainLen;
 	            }
 	        }
@@ -38944,14 +39338,14 @@
 	            let pos = main.len;
 	            for (let i = lastIdx; i <= currSeg.idx; i++) {
 	                pos -= mianLenArray[i].mainLen;
-	                children[i].attribute[main.field] = pos;
+	                children[i].attribute[main.field] = pos + getPadding(children[i], main.field);
 	            }
 	        }
 	        else if (justifyContent === 'space-around') {
 	            if (currSeg.mainLen >= main.len) {
 	                let pos = 0;
 	                for (let i = lastIdx; i <= currSeg.idx; i++) {
-	                    children[i].attribute[main.field] = pos;
+	                    children[i].attribute[main.field] = pos + getPadding(children[i], main.field);
 	                    pos += mianLenArray[i].mainLen;
 	                }
 	            }
@@ -38960,7 +39354,7 @@
 	                const padding = (main.len - currSeg.mainLen) / size / 2;
 	                let pos = padding;
 	                for (let i = lastIdx; i <= currSeg.idx; i++) {
-	                    children[i].attribute[main.field] = pos;
+	                    children[i].attribute[main.field] = pos + getPadding(children[i], main.field);
 	                    pos += mianLenArray[i].mainLen + padding * 2;
 	                }
 	            }
@@ -38969,7 +39363,7 @@
 	            if (currSeg.mainLen >= main.len) {
 	                let pos = 0;
 	                for (let i = lastIdx; i <= currSeg.idx; i++) {
-	                    children[i].attribute[main.field] = pos;
+	                    children[i].attribute[main.field] = pos + getPadding(children[i], main.field);
 	                    pos += mianLenArray[i].mainLen;
 	                }
 	            }
@@ -38978,7 +39372,7 @@
 	                const padding = (main.len - currSeg.mainLen) / (size * 2 - 2);
 	                let pos = 0;
 	                for (let i = lastIdx; i <= currSeg.idx; i++) {
-	                    children[i].attribute[main.field] = pos;
+	                    children[i].attribute[main.field] = pos + getPadding(children[i], main.field);
 	                    pos += mianLenArray[i].mainLen + padding * 2;
 	                }
 	            }
@@ -38987,17 +39381,18 @@
 	    layoutCross(children, alignItem, cross, anchorPos, lenArray, currSeg, lastIdx) {
 	        if (alignItem === 'flex-end') {
 	            for (let i = lastIdx; i <= currSeg.idx; i++) {
-	                children[i].attribute[cross.field] = anchorPos - lenArray[i].crossLen;
+	                children[i].attribute[cross.field] = anchorPos - lenArray[i].crossLen + getPadding(children[i], cross.field);
 	            }
 	        }
 	        else if (alignItem === 'center') {
 	            for (let i = lastIdx; i <= currSeg.idx; i++) {
-	                children[i].attribute[cross.field] = anchorPos - lenArray[i].crossLen / 2;
+	                children[i].attribute[cross.field] =
+	                    anchorPos - lenArray[i].crossLen / 2 + getPadding(children[i], cross.field);
 	            }
 	        }
 	        else {
 	            for (let i = lastIdx; i <= currSeg.idx; i++) {
-	                children[i].attribute[cross.field] = anchorPos;
+	                children[i].attribute[cross.field] = anchorPos + getPadding(children[i], cross.field);
 	            }
 	        }
 	    }
@@ -39025,11 +39420,30 @@
 	        });
 	    }
 	}
+	function getPadding(graphic, field) {
+	    if (!graphic.attribute.boundsPadding) {
+	        return 0;
+	    }
+	    else if (isNumber(graphic.attribute.boundsPadding)) {
+	        return graphic.attribute.boundsPadding;
+	    }
+	    else if (isArray$1(graphic.attribute.boundsPadding) && graphic.attribute.boundsPadding.length === 1) {
+	        return graphic.attribute.boundsPadding[0];
+	    }
+	    const paddingArray = parsePadding(graphic.attribute.boundsPadding);
+	    if (field === 'x') {
+	        return paddingArray[3];
+	    }
+	    else if (field === 'y') {
+	        return paddingArray[0];
+	    }
+	    return 0;
+	}
 
 	const defaultTicker = new DefaultTicker();
 	defaultTicker.addTimeline(defaultTimeline);
-	const DEFAULT_TICKER_FPS = 60;
-	defaultTicker.setFPS(DEFAULT_TICKER_FPS);
+	const TICKER_FPS = 60;
+	defaultTicker.setFPS(TICKER_FPS);
 
 	class DirectionalLight {
 	    constructor(dir, color, ambient = 0.8) {
@@ -39048,7 +39462,7 @@
 	        const brightness = min(max((normal[0] * lightDir[0] + normal[1] * lightDir[1] + normal[2] * lightDir[2]) * (1 - this.ambient / 2), 0) +
 	            this.ambient, 1);
 	        let colorArray;
-	        if (isString(color)) {
+	        if (isString$1(color)) {
 	            const result = colorString.get(color);
 	            colorArray = result.value;
 	        }
@@ -39214,19 +39628,46 @@
 	        this._afterRender = params.afterRender;
 	        this.ticker = params.ticker || defaultTicker;
 	        this.supportInteractiveLayer = params.interactiveLayer !== false;
+	        this.timeline = new DefaultTimeline();
+	        this.ticker.addTimeline(this.timeline);
+	        this.timeline.pause();
+	        this.optmize(params.optimize);
+	    }
+	    optmize(params) {
+	        this.optmizeRender(params === null || params === void 0 ? void 0 : params.skipRenderWithOutRange);
+	    }
+	    optmizeRender(skipRenderWithOutRange = true) {
+	        if (!skipRenderWithOutRange) {
+	            return;
+	        }
+	        this._skipRender = this.window.isVisible() ? 0 : 1;
+	        this.window.onVisibleChange(visible => {
+	            if (visible) {
+	                if (this.dirtyBounds) {
+	                    this.dirtyBounds.setValue(0, 0, this._viewBox.width(), this._viewBox.height());
+	                }
+	                if (this._skipRender > 1) {
+	                    this.renderNextFrame();
+	                }
+	                this._skipRender = 0;
+	            }
+	            else {
+	                this._skipRender = 1;
+	            }
+	        });
+	    }
+	    getTimeline() {
+	        return this.timeline;
 	    }
 	    get3dOptions(options) {
 	        const { center = { x: this.width / 2, y: this.height / 2, z: 0, dx: 0, dy: 0, dz: 0 }, light = {}, alpha = 0, beta = 0, camera, fieldRatio = 1, fieldDepth } = options;
-	        return {
-	            ...options,
-	            center,
+	        return Object.assign(Object.assign({}, options), { center,
 	            light,
 	            alpha,
 	            beta,
 	            camera,
 	            fieldRatio,
-	            fieldDepth
-	        };
+	            fieldDepth });
 	    }
 	    set3dOptions(options) {
 	        var _a, _b, _c, _d, _e, _f;
@@ -39415,6 +39856,7 @@
 	        if (this.supportInteractiveLayer && !this.interactiveLayer) {
 	            this.interactiveLayer = this.createLayer();
 	            this.interactiveLayer.name = '_builtin_interactive';
+	            this.nextFrameRenderLayerSet.add(this.interactiveLayer);
 	        }
 	    }
 	    clearViewBox(color) {
@@ -39422,18 +39864,22 @@
 	    }
 	    render(layers, params) {
 	        this.ticker.start();
-	        this.lastRenderparams = params;
-	        this.hooks.beforeRender.call(this);
-	        (layers || this).forEach((layer, i) => {
-	            layer.render({
-	                renderService: this.renderService,
-	                background: layer === this.defaultLayer ? this.background : undefined,
-	                updateBounds: !!this.dirtyBounds
-	            }, { renderStyle: this.renderStyle, ...params });
-	        });
-	        this.combineLayersToWindow();
-	        this.nextFrameRenderLayerSet.clear();
-	        this.hooks.afterRender.call(this);
+	        this.timeline.resume();
+	        if (!this._skipRender) {
+	            this.lastRenderparams = params;
+	            this.hooks.beforeRender.call(this);
+	            (layers || this).forEach((layer, i) => {
+	                layer.render({
+	                    renderService: this.renderService,
+	                    background: layer === this.defaultLayer ? this.background : undefined,
+	                    updateBounds: !!this.dirtyBounds
+	                }, Object.assign({ renderStyle: this.renderStyle }, params));
+	            });
+	            this.combineLayersToWindow();
+	            this.nextFrameRenderLayerSet.clear();
+	            this.hooks.afterRender.call(this);
+	        }
+	        this._skipRender && this._skipRender++;
 	    }
 	    combineLayersToWindow() {
 	        this.forEach((layer, i) => {
@@ -39463,8 +39909,9 @@
 	        }
 	    }
 	    _doRenderInThisFrame() {
-	        if (this.nextFrameRenderLayerSet.size) {
-	            this.ticker.start();
+	        this.timeline.resume();
+	        this.ticker.start();
+	        if (this.nextFrameRenderLayerSet.size && !this._skipRender) {
 	            this.hooks.beforeRender.call(this);
 	            this.forEach((layer) => {
 	                if (this.nextFrameRenderLayerSet.has(layer)) {
@@ -39472,13 +39919,14 @@
 	                        renderService: this.renderService,
 	                        background: layer === this.defaultLayer ? this.background : undefined,
 	                        updateBounds: !!this.dirtyBounds
-	                    }, { renderStyle: this.renderStyle, ...(this.lastRenderparams || {}) });
+	                    }, Object.assign({ renderStyle: this.renderStyle }, (this.lastRenderparams || {})));
 	                }
 	            });
 	            this.combineLayersToWindow();
 	            this.hooks.afterRender.call(this);
 	            this.nextFrameRenderLayerSet.clear();
 	        }
+	        this._skipRender && this._skipRender++;
 	    }
 	    resizeWindow(w, h, rerender = true) {
 	        this.window.resize(w, h);
@@ -39500,7 +39948,7 @@
 	        this.forEachChildren(c => {
 	            c.resizeView(w, h);
 	        });
-	        this.camera && (this.camera.params = { ...this.camera.params, right: this.width, bottom: this.height });
+	        this.camera && (this.camera.params = Object.assign(Object.assign({}, this.camera.params), { right: this.width, bottom: this.height }));
 	        rerender && this.render();
 	    }
 	    setViewBox(x, y, w, h, rerender) {
@@ -39522,10 +39970,11 @@
 	        });
 	        isRerender && this.render();
 	    }
-	    setDpr(dpr) {
+	    setDpr(dpr, rerender = true) {
 	        this.forEachChildren(c => {
 	            c.setDpr(dpr);
 	        });
+	        rerender && this.render();
 	    }
 	    setOrigin(x, y) {
 	        throw new Error('暂不支持');
@@ -39576,13 +40025,7 @@
 	    }
 	    renderTo(window, params) {
 	        this.forEachChildren((layer, i) => {
-	            layer.drawTo(window, {
-	                ...params,
-	                renderService: this.renderService,
-	                background: layer === this.defaultLayer ? this.background : undefined,
-	                clear: i === 0,
-	                updateBounds: !!this.dirtyBounds
-	            });
+	            layer.drawTo(window, Object.assign(Object.assign({}, params), { renderService: this.renderService, background: layer === this.defaultLayer ? this.background : undefined, clear: i === 0, updateBounds: !!this.dirtyBounds }));
 	        });
 	    }
 	    renderToNewWindow(fullImage = true, viewBox) {
@@ -39614,8 +40057,8 @@
 	        this.renderTo(window, {
 	            x,
 	            y,
-	            width: window.width,
-	            height: window.height
+	            width: viewBox ? viewBox.x2 : window.width,
+	            height: viewBox ? viewBox.y2 : window.height
 	        });
 	        return window;
 	    }
@@ -39756,37 +40199,33 @@
 	    return createRichText(params ? params.attribute : {});
 	}
 	VRichText.Text = function (params) {
-	    return {
-	        type: 'rich/text',
-	        ...params
-	    };
+	    return Object.assign({ type: 'rich/text' }, params);
 	};
 	VRichText.Image = function (params) {
-	    return {
-	        type: 'rich/image',
-	        ...params
-	    };
+	    return Object.assign({ type: 'rich/image' }, params);
 	};
 
 	function flatten(list, out) {
-	    if (isArray(list)) {
+	    if (isArray$1(list)) {
 	        return list.forEach(i => flatten(i, out));
 	    }
 	    out.push(list);
 	}
 	function jsx(type, config, ...children) {
-	    const { key, attribute, ...props } = config || {};
+	    const _a = config || {}, { key, attribute, stateProxy } = _a, props = __rest(_a, ["key", "attribute", "stateProxy"]);
 	    let c = type;
-	    if (isString(type)) {
+	    if (isString$1(type)) {
 	        c = graphicCreator[type];
 	    }
 	    const childrenList = [];
 	    if (children.length) {
 	        flatten(children.length === 1 ? children[0] : children, childrenList);
 	    }
-	    if (c.type === 'richtext') ;
-	    const g = c.prototype.type ? new c(attribute) : c(config);
+	    const g = c.name === 'Group' ? new c(attribute) : c(config);
 	    parseToGraphic(g, childrenList, props);
+	    if (stateProxy) {
+	        g.stateProxy = stateProxy;
+	    }
 	    return g;
 	}
 	function parseToGraphic(g, childrenList, props) {
@@ -39806,7 +40245,7 @@
 	    }
 	    if (isGraphic) {
 	        childrenList.forEach((c) => {
-	            g.add(c);
+	            c && g.add(c);
 	        });
 	        Object.keys(props).forEach(k => {
 	            const en = REACT_TO_CANOPUS_EVENTS[k];
@@ -39821,16 +40260,9 @@
 	        }
 	    }
 	}
-	class Fragment {
-	    constructor() {
-	        this.children = [];
-	    }
-	    add(g) {
-	        this.children.push(g);
-	    }
-	}
+	const Fragment = Group;
 
-	const version = "0.15.0-alpha.2";
+	const version = "0.15.0-alpha.21";
 
 	exports.ACustomAnimate = ACustomAnimate;
 	exports.ARC3D_NUMBER_TYPE = ARC3D_NUMBER_TYPE;
@@ -39882,6 +40314,8 @@
 	exports.DefaultImageAttribute = DefaultImageAttribute;
 	exports.DefaultLayout = DefaultLayout;
 	exports.DefaultLineAttribute = DefaultLineAttribute;
+	exports.DefaultMat4Allocate = DefaultMat4Allocate;
+	exports.DefaultMatrixAllocate = DefaultMatrixAllocate;
 	exports.DefaultMorphingAnimateConfig = DefaultMorphingAnimateConfig;
 	exports.DefaultPathAttribute = DefaultPathAttribute;
 	exports.DefaultPolygonAttribute = DefaultPolygonAttribute;
@@ -39949,6 +40383,8 @@
 	exports.LinearClosed = LinearClosed;
 	exports.ManualTickHandler = ManualTickHandler;
 	exports.ManualTicker = ManualTicker;
+	exports.Mat4Allocate = Mat4Allocate;
+	exports.MatrixAllocate = MatrixAllocate;
 	exports.Meteor = Meteor;
 	exports.MonotoneX = MonotoneX;
 	exports.MonotoneY = MonotoneY;
@@ -40038,6 +40474,7 @@
 	exports.bezierCurversToPath = bezierCurversToPath;
 	exports.binarySplitPolygon = binarySplitPolygon;
 	exports.bindContributionProvider = bindContributionProvider;
+	exports.bindContributionProviderNoSingletonScope = bindContributionProviderNoSingletonScope;
 	exports.boundStroke = boundStroke;
 	exports.builtinSymbols = builtinSymbols;
 	exports.builtinSymbolsMap = builtinSymbolsMap;
@@ -40057,6 +40494,7 @@
 	exports.createGroup = createGroup;
 	exports.createImage = createImage;
 	exports.createLine = createLine;
+	exports.createMat4 = createMat4;
 	exports.createPath = createPath;
 	exports.createPolygon = createPolygon;
 	exports.createPyramid3d = createPyramid3d;
@@ -40123,6 +40561,8 @@
 	exports.loadFeishuContributions = loadFeishuContributions;
 	exports.loadTaroContributions = loadTaroContributions;
 	exports.mat3Tomat4 = mat3Tomat4;
+	exports.mat4Allocate = mat4Allocate;
+	exports.matrixAllocate = matrixAllocate;
 	exports.morphPath = morphPath;
 	exports.multiToOneMorph = multiToOneMorph;
 	exports.multiplyMat4Mat3 = multiplyMat4Mat3;