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

package/dist/index.js

@@ -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;
@@ -6691,14 +6726,14 @@
 	  return isType(value, "Date");
 	};
 
-	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");
 	};
 
 	var isValidNumber = function isValidNumber(value) {
-	  return isNumber(value) && Number.isFinite(value);
+	  return isNumber$1(value) && Number.isFinite(value);
 	};
 
 	var isValidUrl = function isValidUrl(value) {
@@ -6834,12 +6869,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$1(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$1(point) ? (this.x -= point, void (this.y -= point)) : (this.x -= point.x, this.y -= point.y, this);
 	    }
 	  }, {
 	    key: "multi",
@@ -7823,13 +7858,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) {
@@ -9287,11 +9324,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 +9342,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 }, DefaultStyle), DefaultTransform);
 	function addAttributeToPrototype(obj, c, keys) {
 	    keys.forEach(key => {
 	        c.prototype[key] = obj[key];
@@ -9355,145 +9361,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' });
+	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 +9627,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 +9772,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 +10515,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([
@@ -11014,35 +10895,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);
@@ -12007,20 +11890,23 @@
 	        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
+	                [cacheKey]: target,
+	                stageRenderCount: (_e = target === null || target === void 0 ? void 0 : target.stage.renderCount) !== null && _e !== void 0 ? _e : -1
 	            };
 	        }
 	        if (mappers) {
@@ -12237,9 +12123,7 @@
 	                }
 	            }
 	        }
-	        else {
-	            this.emitDelegation(e, type);
-	        }
+	        this.emitDelegation(e, type);
 	    }
 	    emitDelegation(e, type) {
 	        const events = e.currentTarget._events;
@@ -13577,7 +13461,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 +13480,7 @@
 	            animate.prevAnimate.nextAnimate = animate.nextAnimate;
 	            animate.nextAnimate.prevAnimate = animate.prevAnimate;
 	        }
-	        animate.release();
+	        release && animate.release();
 	        return;
 	    }
 	}
@@ -13684,6 +13568,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;
 	    }
@@ -14520,8 +14411,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$1((_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$1((_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;
 	        }
@@ -14733,16 +14624,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 +15728,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$1(point.x) && isNumber$1(point.y));
 	    if (validatePoints.length === 0) {
 	        return [];
 	    }
@@ -15900,7 +15782,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$1(point.x) && isNumber$1(point.y));
 	    if (!validatePoints.length) {
 	        return [];
 	    }
@@ -16505,10 +16387,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);
@@ -17264,6 +17143,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,6 +17258,7 @@
 	            this.addUpdateBoundTag();
 	        }
 	        this.addUpdatePositionTag();
+	        this.addUpdateLayoutTag();
 	        this.onAttributeUpdate(context);
 	    }
 	    setAttribute(key, value, forceUpdateTag, context) {
@@ -17397,6 +17278,7 @@
 	                    this.addUpdateBoundTag();
 	                }
 	                this.addUpdatePositionTag();
+	                this.addUpdateLayoutTag();
 	                this.onAttributeUpdate(context);
 	            }
 	        }
@@ -17464,6 +17346,7 @@
 	        }
 	        this.addUpdatePositionTag();
 	        this.addUpdateBoundTag();
+	        this.addUpdateLayoutTag();
 	        this.onAttributeUpdate(context);
 	        return this;
 	    }
@@ -17485,6 +17368,7 @@
 	        attribute.y = y;
 	        this.addUpdatePositionTag();
 	        this.addUpdateBoundTag();
+	        this.addUpdateLayoutTag();
 	        this.onAttributeUpdate(context);
 	        return this;
 	    }
@@ -17520,6 +17404,7 @@
 	        }
 	        this.addUpdatePositionTag();
 	        this.addUpdateBoundTag();
+	        this.addUpdateLayoutTag();
 	        this.onAttributeUpdate(context);
 	        return this;
 	    }
@@ -17541,6 +17426,7 @@
 	        attribute.scaleY = scaleY;
 	        this.addUpdatePositionTag();
 	        this.addUpdateBoundTag();
+	        this.addUpdateLayoutTag();
 	        this.onAttributeUpdate(context);
 	        return this;
 	    }
@@ -17560,6 +17446,7 @@
 	        attribute.angle = ((_a = attribute.angle) !== null && _a !== void 0 ? _a : DefaultTransform.angle) + angle;
 	        this.addUpdatePositionTag();
 	        this.addUpdateBoundTag();
+	        this.addUpdateLayoutTag();
 	        this.onAttributeUpdate(context);
 	        return this;
 	    }
@@ -17580,6 +17467,7 @@
 	        attribute.angle = angle;
 	        this.addUpdatePositionTag();
 	        this.addUpdateBoundTag();
+	        this.addUpdateLayoutTag();
 	        this.onAttributeUpdate(context);
 	        return this;
 	    }
@@ -17788,6 +17676,15 @@
 	    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 _anchor = [0, 0];
@@ -17832,6 +17729,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);
 	        }
@@ -18005,7 +17908,7 @@
 	        return this.pathProxy;
 	    }
 	    loadImage(image, background = false) {
-	        if (!image) {
+	        if (!image || isObject(image)) {
 	            return;
 	        }
 	        const url = image;
@@ -19968,31 +19871,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)));
@@ -20259,6 +20164,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 +20332,7 @@
 	        return graphic;
 	    }
 	    clone() {
-	        return new Group({ ...this.attribute });
+	        return new Group(Object.assign({}, this.attribute));
 	    }
 	}
 
@@ -20556,17 +20462,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 +20477,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 +20499,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);
@@ -20745,6 +20628,12 @@
 	    clearViewBox(viewBox, color) {
 	        this._handler.clearViewBox(viewBox, color);
 	    }
+	    isVisible(bbox) {
+	        return this._handler.isVisible(bbox);
+	    }
+	    onVisibleChange(cb) {
+	        return this._handler.onVisibleChange(cb);
+	    }
 	};
 	__decorate([
 	    postConstruct(),
@@ -21385,6 +21274,16 @@
 	            return;
 	        }
 	        const { outerRadius = arcAttribute.outerRadius, innerRadius = arcAttribute.innerRadius, cap = arcAttribute.cap, forceShowCap = arcAttribute.forceShowCap } = arc.attribute;
+	        let conicalOffset = 0;
+	        const tempChangeConicalColor = ((isBoolean(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 +21358,7 @@
 	                context.stroke();
 	            }
 	        }
-	        if (cap && forceShowCap) {
+	        if (((isBoolean(cap) && cap) || cap[1]) && forceShowCap) {
 	            const { startAngle: sa, endAngle: ea } = arc.getParsedAngle();
 	            const deltaAngle = abs(ea - sa);
 	            if (deltaAngle >= pi2 - epsilon) {
@@ -21513,6 +21412,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 +21608,7 @@
 	        return path;
 	    }
 	    clone() {
-	        return new Circle({ ...this.attribute });
+	        return new Circle(Object.assign({}, this.attribute));
 	    }
 	}
 
@@ -22010,8 +21913,8 @@
 	        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;
@@ -22026,12 +21929,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, wordBreak === 'break-word');
 	                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, wordBreak === 'break-word');
 	                str = data.str;
 	                width = data.width;
 	            }
@@ -22039,7 +21942,7 @@
 	            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;
 	        }
@@ -22061,9 +21964,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 +21984,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, wordBreak === 'break-word');
 	                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, wordBreak === 'break-word');
 	                verticalList = [data.verticalList];
 	                width = data.width;
 	            }
@@ -22097,7 +22001,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;
 	            });
@@ -22143,9 +22047,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 +22073,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, wordBreak === 'break-word');
 	                    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, wordBreak === 'break-word');
 	                    verticalLists[i] = data.verticalList;
 	                    width = data.width;
 	                }
@@ -22183,7 +22088,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 +22135,7 @@
 	        return false;
 	    }
 	    clone() {
-	        return new Text({ ...this.attribute });
+	        return new Text(Object.assign({}, this.attribute));
 	    }
 	}
 
@@ -22246,8 +22151,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, 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);
@@ -22272,6 +22177,7 @@
 	            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');
 	                        linesLayout.push({
@@ -22291,13 +22197,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);
 	                    }
@@ -23122,17 +23029,17 @@
 	        this.pathStr = 'M-0.5,-0.5h1v1h-1Z';
 	    }
 	    draw(ctx, size, x, y) {
-	        const rectSize = isNumber(size) ? [size, size] : size;
+	        const rectSize = isNumber$1(size) ? [size, size] : size;
 	        return rect(ctx, rectSize, x, y);
 	    }
 	    drawOffset(ctx, size, x, y, offset) {
-	        const rectSize = isNumber(size)
+	        const rectSize = isNumber$1(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$1(size) ? [size, size] : size;
 	        bounds.x1 = -rectSize[0] / 2;
 	        bounds.x2 = rectSize[0] / 2;
 	        bounds.y1 = -rectSize[1] / 2;
@@ -23369,7 +23276,7 @@
 	            : 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 +23382,7 @@
 	        return path;
 	    }
 	    clone() {
-	        return new Line({ ...this.attribute });
+	        return new Line(Object.assign({}, this.attribute));
 	    }
 	};
 
@@ -23543,7 +23450,7 @@
 	        return path;
 	    }
 	    clone() {
-	        return new Rect({ ...this.attribute });
+	        return new Rect(Object.assign({}, this.attribute));
 	    }
 	}
 
@@ -23755,7 +23662,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 +24216,7 @@
 	        return false;
 	    }
 	    clone() {
-	        return new Image({ ...this.attribute });
+	        return new Image(Object.assign({}, this.attribute));
 	    }
 	}
 
@@ -24867,7 +24774,7 @@
 	        this._frameCache = frame;
 	    }
 	    clone() {
-	        return new RichText({ ...this.attribute });
+	        return new RichText(Object.assign({}, this.attribute));
 	    }
 	    setStage(stage, layer) {
 	        super.setStage(stage, layer);
@@ -25011,7 +24918,7 @@
 	        return new CustomPath2D().fromCustomPath2D(this.getParsedPathShape(), x, y);
 	    }
 	    clone() {
-	        return new Path({ ...this.attribute });
+	        return new Path(Object.assign({}, this.attribute));
 	    }
 	}
 
@@ -25125,7 +25032,7 @@
 	        return path;
 	    }
 	    clone() {
-	        return new Area({ ...this.attribute });
+	        return new Area(Object.assign({}, this.attribute));
 	    }
 	}
 
@@ -25163,7 +25070,7 @@
 	            return 0;
 	        }
 	        const deltaRadius = Math.abs(outerRadius - innerRadius);
-	        return Math.min(isNumber(cornerRadius, true)
+	        return Math.min(isNumber$1(cornerRadius, true)
 	            ? cornerRadius
 	            : (deltaRadius * parseFloat(cornerRadius)) / 100, deltaRadius / 2);
 	    }
@@ -25188,7 +25095,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 +25236,7 @@
 	        return path;
 	    }
 	    clone() {
-	        return new Arc({ ...this.attribute });
+	        return new Arc(Object.assign({}, this.attribute));
 	    }
 	}
 
@@ -25424,7 +25333,7 @@
 	        return path;
 	    }
 	    clone() {
-	        return new Polygon({ ...this.attribute });
+	        return new Polygon(Object.assign({}, this.attribute));
 	    }
 	}
 
@@ -27994,7 +27903,7 @@
 	const halfPi = pi / 2;
 	function createRectPath(path, x, y, width, height, rectCornerRadius) {
 	    let cornerRadius;
-	    if (isNumber(rectCornerRadius, true)) {
+	    if (isNumber$1(rectCornerRadius, true)) {
 	        cornerRadius = [
 	            rectCornerRadius,
 	            rectCornerRadius,
@@ -28794,7 +28703,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 +28736,15 @@
 	                if (res.state !== 'success') {
 	                    return;
 	                }
+	                let needRestore = false;
+	                if (cornerRadius === 0 || (isArray(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 +28761,9 @@
 	                else {
 	                    context.drawImage(res.data, x, y, width, height);
 	                }
+	                if (needRestore) {
+	                    context.restore();
+	                }
 	            }
 	        }
 	        this._imageRenderContribitions.forEach(c => {
@@ -29038,10 +28959,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 +28973,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 +29220,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 +29245,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 +29269,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 +29309,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 +29329,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 +29348,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 +29425,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(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 +29482,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$1(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,8 +29516,16 @@
 	        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;
@@ -29552,15 +29543,15 @@
 	            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;
@@ -29578,10 +29569,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 +29669,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 +29693,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 +29712,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 +29763,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 +29849,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 = {};
@@ -30459,12 +30460,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 +30679,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');
@@ -32885,28 +32886,30 @@
 	    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) {
+	    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 => {
+	                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);
+	                });
 	            });
-	        });
-	    }
+	        }
+	    });
 	}
 	let WxEnvContribution = class WxEnvContribution extends exports.BaseEnvContribution {
 	    constructor() {
@@ -33033,6 +33036,12 @@
 	    release(...params) {
 	        this.releaseWindow();
 	    }
+	    isVisible(bbox) {
+	        return true;
+	    }
+	    onVisibleChange(cb) {
+	        return;
+	    }
 	};
 	exports.BaseWindowHandlerContribution = __decorate([
 	    injectable(),
@@ -33047,6 +33056,7 @@
 	        super();
 	        this.global = global;
 	        this.type = 'browser';
+	        this._canvasIsIntersecting = true;
 	    }
 	    getTitle() {
 	        return this.canvas.id.toString();
@@ -33067,6 +33077,37 @@
 	        else {
 	            this.createWindowByCanvas(params);
 	        }
+	        this.postInit();
+	    }
+	    postInit() {
+	        this.observerCanvas();
+	    }
+	    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(entry.isIntersecting);
+	                }
+	                else {
+	                    this._canvasIsIntersecting = entry.isIntersecting;
+	                }
+	            });
+	        });
+	        if (!observer) {
+	            return;
+	        }
+	        observer.observe(this.canvas.nativeCanvas);
 	    }
 	    createWindowByConfig(params) {
 	        const nativeCanvas = this.global.createCanvas({
@@ -33206,6 +33247,12 @@
 	        }
 	        context.nativeContext.restore();
 	    }
+	    isVisible(bbox) {
+	        return this._canvasIsIntersecting;
+	    }
+	    onVisibleChange(cb) {
+	        this._onVisibleChangeCb = cb;
+	    }
 	};
 	BrowserWindowHandlerContribution.env = 'browser';
 	BrowserWindowHandlerContribution = __decorate([
@@ -33902,22 +33949,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 = () => {
@@ -35011,12 +35050,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 +35065,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() {
@@ -35083,13 +35113,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;
@@ -35460,15 +35484,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 +35501,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 }));
 	            }
 	        }
 	    }
@@ -35895,164 +35903,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,7 +37053,7 @@
 	        }
 	        let picked = true;
 	        if (!onlyTranslate ||
-	            (isNumber(cornerRadius, true) && cornerRadius !== 0) ||
+	            (isNumber$1(cornerRadius, true) && cornerRadius !== 0) ||
 	            (isArray(cornerRadius) && cornerRadius.some(num => num !== 0))) {
 	            picked = false;
 	            this.canvasRenderer.drawShape(rect, pickContext, x, y, {}, null, (context, rectAttribute, themeAttribute) => {
@@ -37913,7 +37935,7 @@
 	        }
 	        let picked = true;
 	        if (!onlyTranslate ||
-	            (isNumber(cornerRadius, true) && cornerRadius !== 0) ||
+	            (isNumber$1(cornerRadius, true) && cornerRadius !== 0) ||
 	            (isArray(cornerRadius) && cornerRadius.some(num => num !== 0))) {
 	            picked = false;
 	            this.canvasRenderer.drawShape(rect, pickContext, x, y, {}, null, (context, rectAttribute, themeAttribute) => {
@@ -38597,20 +38619,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();
@@ -38797,10 +38807,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 +38819,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 +38927,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 +38974,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 +38996,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 +39012,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 +39021,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 +39030,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 +39039,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 +39078,30 @@
 	        });
 	    }
 	}
+	function getPadding(graphic, field) {
+	    if (!graphic.attribute.boundsPadding) {
+	        return 0;
+	    }
+	    else if (isNumber(graphic.attribute.boundsPadding)) {
+	        return graphic.attribute.boundsPadding;
+	    }
+	    else if (isArray(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) {
@@ -39214,19 +39286,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;
@@ -39422,18 +39521,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 +39566,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 +39576,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 +39605,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) {
@@ -39576,13 +39681,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 +39713,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,16 +39855,10 @@
 	    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) {
@@ -39775,7 +39868,7 @@
 	    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)) {
 	        c = graphicCreator[type];
@@ -39787,6 +39880,9 @@
 	    if (c.type === 'richtext') ;
 	    const g = c.prototype.type ? new c(attribute) : c(config);
 	    parseToGraphic(g, childrenList, props);
+	    if (stateProxy) {
+	        g.stateProxy = stateProxy;
+	    }
 	    return g;
 	}
 	function parseToGraphic(g, childrenList, props) {
@@ -39806,7 +39902,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];
@@ -39830,7 +39926,7 @@
 	    }
 	}
 
-	const version = "0.15.0-alpha.2";
+	const version = "0.15.0-alpha.3";
 
 	exports.ACustomAnimate = ACustomAnimate;
 	exports.ARC3D_NUMBER_TYPE = ARC3D_NUMBER_TYPE;