@visactor/vchart 1.0.0-alpha.0 → 1.0.0

package/build/index.js

@@ -1003,6 +1003,10 @@
 	  return new RegExp(/^(http(s)?:\/\/)\w+[^\s]+(\.[^\s]+){1,}$/).test(value);
 	};
 
+	var isRegExp = function isRegExp(value) {
+	  return isType$1(value, "RegExp");
+	};
+
 	var isBase64 = function isBase64(value) {
 	  return new RegExp(/^data:image\/(?:gif|png|jpeg|bmp|webp)(?:;charset=utf-8)?;base64,(?:[A-Za-z0-9]|[+/])+={0,2}/g).test(value);
 	};
@@ -1039,6 +1043,31 @@
 	    return null != object && hasOwnProperty$1.call(object, key);
 	  };
 
+	function getRegExpFlags(re) {
+	  var flags = "";
+	  return re.global && (flags += "g"), re.ignoreCase && (flags += "i"), re.multiline && (flags += "m"), flags;
+	}
+	function clone$1(parent) {
+	  var circular = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
+	  var depth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+	  var prototype = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : void 0;
+	  var allParents = [],
+	    allChildren = [];
+	  return void 0 === circular && (circular = !0), void 0 === depth && (depth = 1 / 0), function _clone(parent, depth) {
+	    if (null === parent) return null;
+	    if (0 === depth) return parent;
+	    var child;
+	    if ("object" != _typeof(parent)) return parent;
+	    if (isArray$1(parent) ? child = [] : isRegExp(parent) ? (child = new RegExp(parent.source, getRegExpFlags(parent)), parent.lastIndex && (child.lastIndex = parent.lastIndex)) : child = isDate$1(parent) ? new Date(parent.getTime()) : void 0 === prototype ? Object.create(Object.getPrototypeOf(parent)) : Object.create(prototype), circular) {
+	      var index = allParents.indexOf(parent);
+	      if (-1 !== index) return allChildren[index];
+	      allParents.push(parent), allChildren.push(child);
+	    }
+	    for (var i in parent) child[i] = _clone(parent[i], depth - 1);
+	    return child;
+	  }(parent, depth);
+	}
+
 	function cloneDeep$1(value) {
 	  var result;
 	  if (!isValid$1(value) || "object" != _typeof(value)) return value;
@@ -10206,17 +10235,17 @@
 	  }).inSingletonScope().whenTargetNamed(id);
 	}
 
-	var __decorate$1A = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1E = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	    var d,
 	      c = arguments.length,
 	      r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
 	    return c > 3 && r && Object.defineProperty(target, key, r), r;
 	  },
-	  __metadata$Z = undefined && undefined.__metadata || function (k, v) {
+	  __metadata$10 = undefined && undefined.__metadata || function (k, v) {
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
 	  },
-	  __param$N = undefined && undefined.__param || function (paramIndex, decorator) {
+	  __param$O = undefined && undefined.__param || function (paramIndex, decorator) {
 	    return function (target, key) {
 	      decorator(target, key, paramIndex);
 	    };
@@ -10349,8 +10378,8 @@
 	    }
 	  }, {
 	    key: "mapToCanvasPoint",
-	    value: function mapToCanvasPoint(event) {
-	      return this._env || this.setEnv("browser"), this.envContribution.mapToCanvasPoint ? this.envContribution.mapToCanvasPoint(event) : null;
+	    value: function mapToCanvasPoint(event, domElement) {
+	      return this._env || this.setEnv("browser"), this.envContribution.mapToCanvasPoint ? this.envContribution.mapToCanvasPoint(event, domElement) : null;
 	    }
 	  }, {
 	    key: "loadImage",
@@ -10380,7 +10409,7 @@
 	  }]);
 	  return DefaultGlobal;
 	}();
-	DefaultGlobal = __decorate$1A([injectable(), __param$N(0, inject(ContributionProvider)), __param$N(0, named(EnvContribution)), __metadata$Z("design:paramtypes", [Object])], DefaultGlobal);
+	DefaultGlobal = __decorate$1E([injectable(), __param$O(0, inject(ContributionProvider)), __param$O(0, named(EnvContribution)), __metadata$10("design:paramtypes", [Object])], DefaultGlobal);
 
 	var circleThreshold = tau$2 - 1e-8;
 	var BoundsContext = /*#__PURE__*/function () {
@@ -11062,7 +11091,7 @@
 	  }, {
 	    key: "lineEnd",
 	    value: function lineEnd() {
-	      if (2 === this._point) _point$1(this, 6 * this._x1 - (this._x0 + 4 * this._x1), 6 * this._y1 - (this._y0 + 4 * this._y1), !1 !== this._lastDefined);
+	      if (2 === this._point) _point$1(this, 6 * this._x1 - (this._x0 + 4 * this._x1), 6 * this._y1 - (this._y0 + 4 * this._y1), !1 !== this._lastDefined1 && !1 !== this._lastDefined2);
 	      (this._line || 0 !== this._line && 1 === this._point) && this.context.closePath(), this._line = 1 - this._line;
 	    }
 	  }, {
@@ -11072,15 +11101,15 @@
 	        y = p.y;
 	      switch (this._point) {
 	        case 0:
-	          this._point = 1, this._line ? this.context.lineTo(x, y, !1 !== this._lastDefined && !1 !== p.defined) : this.context.moveTo(x, y);
+	          this._point = 1, this._line ? this.context.lineTo(x, y, !1 !== this._lastDefined1 && !1 !== this._lastDefined2) : this.context.moveTo(x, y);
 	          break;
 	        case 1:
 	          this._point = 2;
 	          break;
 	        default:
-	          _point$1(this, x, y, !1 !== this._lastDefined && !1 !== p.defined);
+	          _point$1(this, x, y, !1 !== this._lastDefined1 && !1 !== this._lastDefined2);
 	      }
-	      this._x0 = this._x1, this._x1 = x, this._y0 = this._y1, this._y1 = y, this._lastDefined = p.defined;
+	      this._x0 = this._x1, this._x1 = x, this._y0 = this._y1, this._y1 = y, this._lastDefined1 = this._lastDefined2, this._lastDefined2 = p.defined;
 	    }
 	  }, {
 	    key: "tryUpdateLength",
@@ -11151,10 +11180,10 @@
 	    value: function lineEnd() {
 	      switch (this._point) {
 	        case 2:
-	          this.context.lineTo(this._x1, this._y1, !1 !== this._lastDefined);
+	          this.context.lineTo(this._x1, this._y1, !1 !== this._lastDefined2);
 	          break;
 	        case 3:
-	          _point(this, this._t0, slope2(this, this._t0), !1 !== this._lastDefined);
+	          _point(this, this._t0, slope2(this, this._t0), !1 !== this._lastDefined2);
 	      }
 	      (this._line || 0 !== this._line && 1 === this._point) && this.context.closePath(), this._line = 1 - this._line;
 	    }
@@ -11167,18 +11196,18 @@
 	      if (x !== this._x1 || y !== this._y1) {
 	        switch (this._point) {
 	          case 0:
-	            this._point = 1, this._line ? this.context.lineTo(x, y, !1 !== this._lastDefined && !1 !== p.defined) : this.context.moveTo(x, y);
+	            this._point = 1, this._line ? this.context.lineTo(x, y, !1 !== this._lastDefined1 && !1 !== this._lastDefined2) : this.context.moveTo(x, y);
 	            break;
 	          case 1:
 	            this._point = 2;
 	            break;
 	          case 2:
-	            this._point = 3, _point(this, slope2(this, t1 = slope3(this, x, y)), t1, !1 !== this._lastDefined && !1 !== p.defined);
+	            this._point = 3, _point(this, slope2(this, t1 = slope3(this, x, y)), t1, !1 !== this._lastDefined1 && !1 !== this._lastDefined2);
 	            break;
 	          default:
-	            _point(this, this._t0, t1 = slope3(this, x, y), !1 !== this._lastDefined && !1 !== p.defined);
+	            _point(this, this._t0, t1 = slope3(this, x, y), !1 !== this._lastDefined1 && !1 !== this._lastDefined2);
 	        }
-	        this._x0 = this._x1, this._x1 = x, this._y0 = this._y1, this._y1 = y, this._t0 = t1, this._lastDefined = !1 !== p.defined;
+	        this._x0 = this._x1, this._x1 = x, this._y0 = this._y1, this._y1 = y, this._t0 = t1, this._lastDefined1 = this._lastDefined2, this._lastDefined2 = !1 !== p.defined;
 	      }
 	    }
 	  }, {
@@ -11944,7 +11973,7 @@
 	  opacity: 1
 	});
 
-	var __decorate$1z = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1D = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	  var d,
 	    c = arguments.length,
 	    r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -12078,9 +12107,9 @@
 	  }]);
 	  return ATextMeasure;
 	}();
-	ATextMeasure = __decorate$1z([injectable()], ATextMeasure);
+	ATextMeasure = __decorate$1D([injectable()], ATextMeasure);
 
-	var __decorate$1y = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1C = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	  var d,
 	    c = arguments.length,
 	    r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -12097,7 +12126,7 @@
 	  }
 	  return _createClass(DefaultTextMeasureContribution);
 	}(ATextMeasure);
-	DefaultTextMeasureContribution = __decorate$1y([injectable()], DefaultTextMeasureContribution);
+	DefaultTextMeasureContribution = __decorate$1C([injectable()], DefaultTextMeasureContribution);
 
 	var container = new Container();
 
@@ -12471,17 +12500,17 @@
 	  return containPath(commands, lineWidth, !0, x, y);
 	}
 
-	var __decorate$1x = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1B = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	    var d,
 	      c = arguments.length,
 	      r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
 	    return c > 3 && r && Object.defineProperty(target, key, r), r;
 	  },
-	  __metadata$Y = undefined && undefined.__metadata || function (k, v) {
+	  __metadata$$ = undefined && undefined.__metadata || function (k, v) {
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
 	  },
-	  __param$M = undefined && undefined.__param || function (paramIndex, decorator) {
+	  __param$N = undefined && undefined.__param || function (paramIndex, decorator) {
 	    return function (target, key) {
 	      decorator(target, key, paramIndex);
 	    };
@@ -12552,7 +12581,7 @@
 	  }]);
 	  return DefaultGraphicUtil;
 	}();
-	DefaultGraphicUtil = __decorate$1x([injectable(), __param$M(0, inject(ContributionProvider)), __param$M(0, named(TextMeasureContribution)), __param$M(1, inject(Global)), __metadata$Y("design:paramtypes", [Object, Object])], DefaultGraphicUtil);
+	DefaultGraphicUtil = __decorate$1B([injectable(), __param$N(0, inject(ContributionProvider)), __param$N(0, named(TextMeasureContribution)), __param$N(1, inject(Global)), __metadata$$("design:paramtypes", [Object, Object])], DefaultGraphicUtil);
 	var TransformMode;
 	!function (TransformMode) {
 	  TransformMode[TransformMode.transform = 0] = "transform", TransformMode[TransformMode.matrix = 1] = "matrix";
@@ -12613,7 +12642,7 @@
 	  }]);
 	  return DefaultTransformUtil;
 	}();
-	DefaultTransformUtil = __decorate$1x([injectable(), __metadata$Y("design:paramtypes", [])], DefaultTransformUtil);
+	DefaultTransformUtil = __decorate$1B([injectable(), __metadata$$("design:paramtypes", [])], DefaultTransformUtil);
 
 	var defaultThemeObj = {
 	    arc: DefaultArcAttribute,
@@ -12653,9 +12682,18 @@
 	  };
 	}
 	function combineTheme(out, t) {
-	  t && Object.keys(t).forEach(function (k) {
+	  var rewrite = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !0;
+	  t && (rewrite ? Object.keys(t).forEach(function (k) {
 	    out[k] ? Object.assign(out[k], t[k]) : out[k] = t[k];
-	  });
+	  }) : Object.keys(t).forEach(function (k) {
+	    if (out[k]) {
+	      var outItem = out[k],
+	        tItem = t[k];
+	      Object.keys(t[k]).forEach(function (kItem) {
+	        void 0 === outItem[kItem] && (outItem[kItem] = tItem[kItem]);
+	      });
+	    } else out[k] = t[k];
+	  }));
 	}
 	var staticThemePools = new Array(60).fill(0).map(function () {
 	  return newThemeObj();
@@ -12683,11 +12721,12 @@
 	  }, {
 	    key: "applyTheme",
 	    value: function applyTheme(group, pt) {
+	      var force = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !1;
 	      if (this.dirty) {
 	        var parentGroup = this.getParentWithTheme(group);
 	        if (parentGroup) {
 	          var parentTheme = parentGroup.theme;
-	          parentTheme.dirty && parentTheme.applyTheme(parentGroup, pt), combineTheme(pt, parentTheme.userTheme);
+	          (parentTheme.dirty || force) && parentTheme.applyTheme(parentGroup, pt, !0), this.userTheme ? combineTheme(this.userTheme, parentTheme.userTheme, !1) : this.userTheme = clone$1(parentTheme.userTheme), combineTheme(pt, parentTheme.userTheme);
 	        }
 	        this.userTheme ? this.doCombine(pt) : (parentGroup ? this.combinedTheme = parentGroup.theme.combinedTheme : (this.combinedTheme = this._defaultTheme, console.warn("未知错误，走到不应该走的区域里")), this.dirty = !1);
 	      }
@@ -13919,7 +13958,7 @@
 	    key: "mapToCanvasPoint",
 	    value: function mapToCanvasPoint(nativeEvent) {
 	      var _a;
-	      var point = null === (_a = this.globalObj) || void 0 === _a ? void 0 : _a.mapToCanvasPoint(nativeEvent);
+	      var point = null === (_a = this.globalObj) || void 0 === _a ? void 0 : _a.mapToCanvasPoint(nativeEvent, this.domElement);
 	      if (point) return point;
 	      var x = nativeEvent.clientX,
 	        y = nativeEvent.clientY,
@@ -16663,12 +16702,28 @@
 	}();
 	ColorStore.store255 = {}, ColorStore.store1 = {};
 
+	function colorArrayToString(color) {
+	  var alphaChannel = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
+	  return Array.isArray(color) ? alphaChannel ? "rgb(".concat(Math.round(color[0]), ",").concat(Math.round(color[1]), ",").concat(Math.round(color[2]), ",").concat(color[3].toFixed(2), ")") : "rgb(".concat(Math.round(color[0]), ",").concat(Math.round(color[1]), ",").concat(Math.round(color[2]), ")") : color;
+	}
 	function interpolateColor(from, to, ratio, alphaChannel, cb) {
+	  if (!from || !to) return from && colorArrayToString(from) || to && colorArrayToString(to) || !1;
 	  var fromArray,
 	    toArray,
 	    fromGradient = !1,
 	    toGradient = !1;
-	  if (Array.isArray(from) ? fromArray = from : "string" == typeof from ? fromArray = ColorStore.Get(from, ColorType.Color255) : fromGradient = !0, Array.isArray(to) ? toArray = to : "string" == typeof to ? toArray = ColorStore.Get(to, ColorType.Color255) : toGradient = !0, fromGradient !== toGradient) return !1;
+	  if (Array.isArray(from) ? fromArray = from : "string" == typeof from ? fromArray = ColorStore.Get(from, ColorType.Color255) : fromGradient = !0, Array.isArray(to) ? toArray = to : "string" == typeof to ? toArray = ColorStore.Get(to, ColorType.Color255) : toGradient = !0, fromGradient !== toGradient) {
+	    var gradient = fromGradient ? from : to,
+	      pure = fromGradient ? to : from,
+	      gradientFromPure = Object.assign(Object.assign({}, gradient), {
+	        stops: gradient.stops.map(function (v) {
+	          return Object.assign(Object.assign({}, v), {
+	            color: colorArrayToString(pure)
+	          });
+	        })
+	      });
+	    return fromGradient ? interpolateColor(gradient, gradientFromPure, ratio, alphaChannel, cb) : interpolateColor(gradientFromPure, gradient, ratio, alphaChannel, cb);
+	  }
 	  if (fromGradient) {
 	    if (from.gradient === to.gradient) {
 	      var fc = from,
@@ -16683,8 +16738,7 @@
 	    return !1;
 	  }
 	  cb && cb(fromArray, toArray);
-	  var result = interpolatePureColorArray(fromArray, toArray, ratio);
-	  return alphaChannel ? "rgb(".concat(Math.round(result[0]), ",").concat(Math.round(result[1]), ",").concat(Math.round(result[2]), ",").concat(result[3].toFixed(2), ")") : "rgb(".concat(Math.round(result[0]), ",").concat(Math.round(result[1]), ",").concat(Math.round(result[2]), ")");
+	  return colorArrayToString(interpolatePureColorArray(fromArray, toArray, ratio), alphaChannel);
 	}
 	function interpolateGradientLinearColor(fc, tc, ratio) {
 	  var fStops = fc.stops,
@@ -18357,17 +18411,17 @@
 	  return Layer;
 	}(Group$1);
 
-	var __decorate$1w = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1A = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	    var d,
 	      c = arguments.length,
 	      r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
 	    return c > 3 && r && Object.defineProperty(target, key, r), r;
 	  },
-	  __metadata$X = undefined && undefined.__metadata || function (k, v) {
+	  __metadata$_ = undefined && undefined.__metadata || function (k, v) {
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
 	  },
-	  __param$L = undefined && undefined.__param || function (paramIndex, decorator) {
+	  __param$M = undefined && undefined.__param || function (paramIndex, decorator) {
 	    return function (target, key) {
 	      decorator(target, key, paramIndex);
 	    };
@@ -18413,19 +18467,19 @@
 	  }]);
 	  return DefaultLayerService;
 	}();
-	DefaultLayerService = __decorate$1w([injectable(), __param$L(0, inject(Global)), __metadata$X("design:paramtypes", [Object])], DefaultLayerService);
+	DefaultLayerService = __decorate$1A([injectable(), __param$M(0, inject(Global)), __metadata$_("design:paramtypes", [Object])], DefaultLayerService);
 
-	var __decorate$1v = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1z = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	    var d,
 	      c = arguments.length,
 	      r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
 	    return c > 3 && r && Object.defineProperty(target, key, r), r;
 	  },
-	  __metadata$W = undefined && undefined.__metadata || function (k, v) {
+	  __metadata$Z = undefined && undefined.__metadata || function (k, v) {
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
 	  },
-	  __param$K = undefined && undefined.__param || function (paramIndex, decorator) {
+	  __param$L = undefined && undefined.__param || function (paramIndex, decorator) {
 	    return function (target, key) {
 	      decorator(target, key, paramIndex);
 	    };
@@ -18565,7 +18619,7 @@
 	  }]);
 	  return DefaultWindow;
 	}();
-	__decorate$1v([postConstruct(), __metadata$W("design:type", Function), __metadata$W("design:paramtypes", []), __metadata$W("design:returntype", void 0)], DefaultWindow.prototype, "postInit", null), DefaultWindow = __decorate$1v([injectable(), __param$K(0, inject(Global)), __metadata$W("design:paramtypes", [Object])], DefaultWindow);
+	__decorate$1z([postConstruct(), __metadata$Z("design:type", Function), __metadata$Z("design:paramtypes", []), __metadata$Z("design:returntype", void 0)], DefaultWindow.prototype, "postInit", null), DefaultWindow = __decorate$1z([injectable(), __param$L(0, inject(Global)), __metadata$Z("design:paramtypes", [Object])], DefaultWindow);
 
 	var TransformUtil = Symbol["for"]("TransformUtil");
 	var GraphicUtil = Symbol["for"]("GraphicUtil");
@@ -18901,35 +18955,73 @@
 	  if (!c || !0 === c) return "black";
 	  var result, color;
 	  if (isArray$1(c)) for (var i = 0; i < c.length && (color = c[i], !color); i++);else color = c;
-	  return "string" == typeof color ? color : ("linear" === color.gradient ? result = createLinearGradient(context, color, params.AABBBounds) : "conical" === color.gradient ? result = createConicGradient(context, color, params.AABBBounds) : "radial" === color.gradient && (result = createRadialGradient(context, color, params.AABBBounds)), result || "orange");
+	  return "string" == typeof color ? color : ("linear" === color.gradient ? result = createLinearGradient(context, color, params, offsetX, offsetY) : "conical" === color.gradient ? result = createConicGradient(context, color, params, offsetX, offsetY) : "radial" === color.gradient && (result = createRadialGradient(context, color, params, offsetX, offsetY)), result || "orange");
 	}
-	function createLinearGradient(context, color, bounds, offsetX, offsetY) {
+	function createLinearGradient(context, color, params) {
+	  var offsetX = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+	  var offsetY = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+	  var bounds = params.AABBBounds;
+	  if (!bounds) return;
 	  var w = bounds.x2 - bounds.x1,
 	    h = bounds.y2 - bounds.y1,
-	    x = bounds.x1,
-	    y = bounds.y1,
-	    canvasGradient = context.createLinearGradient(x + (color.x0 || 0) * w, y + (color.y0 || 0) * h, x + (color.x1 || 1) * w, y + (color.y1 || 0) * h);
+	    x = bounds.x1 - offsetX,
+	    y = bounds.y1 - offsetY;
+	  if (params.attribute) {
+	    var _params$attribute = params.attribute,
+	      _params$attribute$sca = _params$attribute.scaleX,
+	      scaleX = _params$attribute$sca === void 0 ? 1 : _params$attribute$sca,
+	      _params$attribute$sca2 = _params$attribute.scaleY,
+	      scaleY = _params$attribute$sca2 === void 0 ? 1 : _params$attribute$sca2;
+	    if (scaleX * scaleY == 0) return;
+	    w /= scaleX, h /= scaleY, x /= scaleX, y /= scaleY;
+	  }
+	  var canvasGradient = context.createLinearGradient(x + (color.x0 || 0) * w, y + (color.y0 || 0) * h, x + (color.x1 || 1) * w, y + (color.y1 || 0) * h);
 	  return color.stops.forEach(function (stop) {
 	    canvasGradient.addColorStop(stop.offset, stop.color);
 	  }), canvasGradient;
 	}
-	function createRadialGradient(context, color, bounds, offsetX, offsetY) {
+	function createRadialGradient(context, color, params) {
+	  var offsetX = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+	  var offsetY = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+	  var bounds = params.AABBBounds;
+	  if (!bounds) return;
 	  var w = bounds.x2 - bounds.x1,
 	    h = bounds.y2 - bounds.y1,
-	    x = bounds.x1,
-	    y = bounds.y1,
-	    canvasGradient = context.createRadialGradient(x + (color.x0 || .5) * w, y + (color.y0 || .5) * h, Math.max(w, h) * (color.r0 || 0), x + (color.x1 || .5) * w, y + (color.y1 || .5) * h, Math.max(w, h) * (color.r1 || .5));
+	    x = bounds.x1 - offsetX,
+	    y = bounds.y1 - offsetY;
+	  if (params.attribute) {
+	    var _params$attribute2 = params.attribute,
+	      _params$attribute2$sc = _params$attribute2.scaleX,
+	      scaleX = _params$attribute2$sc === void 0 ? 1 : _params$attribute2$sc,
+	      _params$attribute2$sc2 = _params$attribute2.scaleY,
+	      scaleY = _params$attribute2$sc2 === void 0 ? 1 : _params$attribute2$sc2;
+	    if (scaleX * scaleY == 0) return;
+	    x /= scaleX, y /= scaleY, w /= scaleX, h /= scaleY;
+	  }
+	  var canvasGradient = context.createRadialGradient(x + (color.x0 || .5) * w, y + (color.y0 || .5) * h, Math.max(w, h) * (color.r0 || 0), x + (color.x1 || .5) * w, y + (color.y1 || .5) * h, Math.max(w, h) * (color.r1 || .5));
 	  return color.stops.forEach(function (stop) {
 	    canvasGradient.addColorStop(stop.offset, stop.color);
 	  }), canvasGradient;
 	}
-	function createConicGradient(context, color, bounds, offsetX, offsetY) {
+	function createConicGradient(context, color, params) {
+	  var offsetX = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+	  var offsetY = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+	  var bounds = params.AABBBounds;
 	  if (!bounds) return;
 	  var w = bounds.x2 - bounds.x1,
 	    h = bounds.y2 - bounds.y1,
-	    x = bounds.x1 || 0,
-	    y = bounds.y1 || 0,
-	    canvasGradient = context.createConicGradient(x + (color.x || 0) * w, y + (color.y || 0) * h, color.startAngle, color.endAngle);
+	    x = bounds.x1 - offsetX,
+	    y = bounds.y1 - offsetY;
+	  if (params.attribute) {
+	    var _params$attribute3 = params.attribute,
+	      _params$attribute3$sc = _params$attribute3.scaleX,
+	      scaleX = _params$attribute3$sc === void 0 ? 1 : _params$attribute3$sc,
+	      _params$attribute3$sc2 = _params$attribute3.scaleY,
+	      scaleY = _params$attribute3$sc2 === void 0 ? 1 : _params$attribute3$sc2;
+	    if (scaleX * scaleY == 0) return;
+	    w /= scaleX, h /= scaleY, x /= scaleX, y /= scaleY;
+	  }
+	  var canvasGradient = context.createConicGradient(x + (color.x || 0) * w, y + (color.y || 0) * h, color.startAngle, color.endAngle);
 	  return color.stops.forEach(function (stop) {
 	    canvasGradient.addColorStop(stop.offset, stop.color);
 	  }), canvasGradient.GetPattern(w + x, h + y, undefined);
@@ -21904,7 +21996,7 @@
 	  return Pyramid3d;
 	}(Polygon);
 
-	var __decorate$1u = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1y = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	  var d,
 	    c = arguments.length,
 	    r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -21934,9 +22026,9 @@
 	  }]);
 	  return DefaultOuterBorderBoundsContribution;
 	}();
-	DefaultOuterBorderBoundsContribution = __decorate$1u([injectable()], DefaultOuterBorderBoundsContribution);
+	DefaultOuterBorderBoundsContribution = __decorate$1y([injectable()], DefaultOuterBorderBoundsContribution);
 
-	var __decorate$1t = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1x = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	  var d,
 	    c = arguments.length,
 	    r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -21953,9 +22045,9 @@
 	  }
 	  return _createClass(DefaultRectOuterBorderBoundsContribution);
 	}(DefaultOuterBorderBoundsContribution);
-	DefaultRectOuterBorderBoundsContribution = __decorate$1t([injectable()], DefaultRectOuterBorderBoundsContribution);
+	DefaultRectOuterBorderBoundsContribution = __decorate$1x([injectable()], DefaultRectOuterBorderBoundsContribution);
 
-	var __decorate$1s = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1w = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	  var d,
 	    c = arguments.length,
 	    r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -21991,9 +22083,9 @@
 	  }]);
 	  return DefaultSymbolOuterBorderBoundsContribution;
 	}(DefaultOuterBorderBoundsContribution);
-	DefaultSymbolOuterBorderBoundsContribution = __decorate$1s([injectable()], DefaultSymbolOuterBorderBoundsContribution);
+	DefaultSymbolOuterBorderBoundsContribution = __decorate$1w([injectable()], DefaultSymbolOuterBorderBoundsContribution);
 
-	var __decorate$1r = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1v = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	  var d,
 	    c = arguments.length,
 	    r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -22010,9 +22102,9 @@
 	  }
 	  return _createClass(DefaultCircleOuterBorderBoundsContribution);
 	}(DefaultOuterBorderBoundsContribution);
-	DefaultCircleOuterBorderBoundsContribution = __decorate$1r([injectable()], DefaultCircleOuterBorderBoundsContribution);
+	DefaultCircleOuterBorderBoundsContribution = __decorate$1v([injectable()], DefaultCircleOuterBorderBoundsContribution);
 
-	var __decorate$1q = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1u = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	  var d,
 	    c = arguments.length,
 	    r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -22029,9 +22121,9 @@
 	  }
 	  return _createClass(DefaultArcOuterBorderBoundsContribution);
 	}(DefaultOuterBorderBoundsContribution);
-	DefaultArcOuterBorderBoundsContribution = __decorate$1q([injectable()], DefaultArcOuterBorderBoundsContribution);
+	DefaultArcOuterBorderBoundsContribution = __decorate$1u([injectable()], DefaultArcOuterBorderBoundsContribution);
 
-	var __decorate$1p = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1t = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	  var d,
 	    c = arguments.length,
 	    r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -22048,7 +22140,7 @@
 	  }
 	  return _createClass(DefaultPathOuterBorderBoundsContribution);
 	}(DefaultOuterBorderBoundsContribution);
-	DefaultPathOuterBorderBoundsContribution = __decorate$1p([injectable()], DefaultPathOuterBorderBoundsContribution);
+	DefaultPathOuterBorderBoundsContribution = __decorate$1t([injectable()], DefaultPathOuterBorderBoundsContribution);
 
 	function createMat4() {
 	  return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
@@ -22136,17 +22228,17 @@
 	var matrixAllocate = new DefaultMatrixAllocate();
 	var mat4Allocate = new DefaultMat4Allocate();
 
-	var __decorate$1o = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1s = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	    var d,
 	      c = arguments.length,
 	      r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
 	    return c > 3 && r && Object.defineProperty(target, key, r), r;
 	  },
-	  __metadata$V = undefined && undefined.__metadata || function (k, v) {
+	  __metadata$Y = undefined && undefined.__metadata || function (k, v) {
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
 	  },
-	  __param$J = undefined && undefined.__param || function (paramIndex, decorator) {
+	  __param$K = undefined && undefined.__param || function (paramIndex, decorator) {
 	    return function (target, key) {
 	      decorator(target, key, paramIndex);
 	    };
@@ -22727,7 +22819,7 @@
 	  }]);
 	  return DefaultGraphicService;
 	}();
-	DefaultGraphicService = __decorate$1o([injectable(), __param$J(0, inject(GraphicCreator)), __param$J(1, inject(ContributionProvider)), __param$J(1, named(RectBoundsContribution)), __param$J(2, inject(ContributionProvider)), __param$J(2, named(SymbolBoundsContribution)), __param$J(3, inject(ContributionProvider)), __param$J(3, named(CircleBoundsContribution)), __param$J(4, inject(ContributionProvider)), __param$J(4, named(ArcBoundsContribution)), __param$J(5, inject(ContributionProvider)), __param$J(5, named(PathBoundsContribution)), __metadata$V("design:paramtypes", [Object, Object, Object, Object, Object, Object])], DefaultGraphicService);
+	DefaultGraphicService = __decorate$1s([injectable(), __param$K(0, inject(GraphicCreator)), __param$K(1, inject(ContributionProvider)), __param$K(1, named(RectBoundsContribution)), __param$K(2, inject(ContributionProvider)), __param$K(2, named(SymbolBoundsContribution)), __param$K(3, inject(ContributionProvider)), __param$K(3, named(CircleBoundsContribution)), __param$K(4, inject(ContributionProvider)), __param$K(4, named(ArcBoundsContribution)), __param$K(5, inject(ContributionProvider)), __param$K(5, named(PathBoundsContribution)), __metadata$Y("design:paramtypes", [Object, Object, Object, Object, Object, Object])], DefaultGraphicService);
 
 	var ShadowRoot = /*#__PURE__*/function (_Group) {
 	  _inherits(ShadowRoot, _Group);
@@ -23039,7 +23131,7 @@
 	}();
 	var canvasAllocate = new DefaultCanvasAllocate();
 
-	var __decorate$1n = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1r = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	  var d,
 	    c = arguments.length,
 	    r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -23079,7 +23171,7 @@
 	  }]);
 	  return DefaultBaseBackgroundRenderContribution;
 	}();
-	DefaultBaseBackgroundRenderContribution = __decorate$1n([injectable()], DefaultBaseBackgroundRenderContribution);
+	DefaultBaseBackgroundRenderContribution = __decorate$1r([injectable()], DefaultBaseBackgroundRenderContribution);
 	var DefaultBaseTextureRenderContribution = /*#__PURE__*/function () {
 	  function DefaultBaseTextureRenderContribution() {
 	    _classCallCheck(this, DefaultBaseTextureRenderContribution);
@@ -23220,9 +23312,9 @@
 	  }]);
 	  return DefaultBaseTextureRenderContribution;
 	}();
-	DefaultBaseTextureRenderContribution = __decorate$1n([injectable()], DefaultBaseTextureRenderContribution);
+	DefaultBaseTextureRenderContribution = __decorate$1r([injectable()], DefaultBaseTextureRenderContribution);
 
-	var __decorate$1m = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1q = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	  var d,
 	    c = arguments.length,
 	    r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -23291,7 +23383,7 @@
 	  }]);
 	  return DefaultArcRenderContribution;
 	}();
-	DefaultArcRenderContribution = __decorate$1m([injectable()], DefaultArcRenderContribution);
+	DefaultArcRenderContribution = __decorate$1q([injectable()], DefaultArcRenderContribution);
 	var DefaultArcBackgroundRenderContribution = /*#__PURE__*/function (_DefaultBaseBackgroun) {
 	  _inherits(DefaultArcBackgroundRenderContribution, _DefaultBaseBackgroun);
 	  var _super = _createSuper(DefaultArcBackgroundRenderContribution);
@@ -23303,7 +23395,7 @@
 	  }
 	  return _createClass(DefaultArcBackgroundRenderContribution);
 	}(DefaultBaseBackgroundRenderContribution);
-	DefaultArcBackgroundRenderContribution = __decorate$1m([injectable()], DefaultArcBackgroundRenderContribution);
+	DefaultArcBackgroundRenderContribution = __decorate$1q([injectable()], DefaultArcBackgroundRenderContribution);
 	var DefaultArcTextureRenderContribution = /*#__PURE__*/function (_DefaultBaseTextureRe) {
 	  _inherits(DefaultArcTextureRenderContribution, _DefaultBaseTextureRe);
 	  var _super2 = _createSuper(DefaultArcTextureRenderContribution);
@@ -23315,19 +23407,19 @@
 	  }
 	  return _createClass(DefaultArcTextureRenderContribution);
 	}(DefaultBaseTextureRenderContribution);
-	DefaultArcTextureRenderContribution = __decorate$1m([injectable()], DefaultArcTextureRenderContribution);
+	DefaultArcTextureRenderContribution = __decorate$1q([injectable()], DefaultArcTextureRenderContribution);
 
-	var __decorate$1l = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1p = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	    var d,
 	      c = arguments.length,
 	      r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
 	    return c > 3 && r && Object.defineProperty(target, key, r), r;
 	  },
-	  __metadata$U = undefined && undefined.__metadata || function (k, v) {
+	  __metadata$X = undefined && undefined.__metadata || function (k, v) {
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
 	  },
-	  __param$I = undefined && undefined.__param || function (paramIndex, decorator) {
+	  __param$J = undefined && undefined.__param || function (paramIndex, decorator) {
 	    return function (target, key) {
 	      decorator(target, key, paramIndex);
 	    };
@@ -23509,9 +23601,9 @@
 	  }]);
 	  return DefaultCanvasArcRender;
 	}();
-	DefaultCanvasArcRender = __decorate$1l([injectable(), __param$I(0, inject(ContributionProvider)), __param$I(0, named(ArcRenderContribution)), __metadata$U("design:paramtypes", [Object])], DefaultCanvasArcRender);
+	DefaultCanvasArcRender = __decorate$1p([injectable(), __param$J(0, inject(ContributionProvider)), __param$J(0, named(ArcRenderContribution)), __metadata$X("design:paramtypes", [Object])], DefaultCanvasArcRender);
 
-	var __decorate$1k = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1o = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	  var d,
 	    c = arguments.length,
 	    r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -23560,7 +23652,7 @@
 	  }]);
 	  return DefaultCircleRenderContribution;
 	}();
-	DefaultCircleRenderContribution = __decorate$1k([injectable()], DefaultCircleRenderContribution);
+	DefaultCircleRenderContribution = __decorate$1o([injectable()], DefaultCircleRenderContribution);
 	var DefaultCircleBackgroundRenderContribution = /*#__PURE__*/function (_DefaultBaseBackgroun) {
 	  _inherits(DefaultCircleBackgroundRenderContribution, _DefaultBaseBackgroun);
 	  var _super = _createSuper(DefaultCircleBackgroundRenderContribution);
@@ -23572,7 +23664,7 @@
 	  }
 	  return _createClass(DefaultCircleBackgroundRenderContribution);
 	}(DefaultBaseBackgroundRenderContribution);
-	DefaultCircleBackgroundRenderContribution = __decorate$1k([injectable()], DefaultCircleBackgroundRenderContribution);
+	DefaultCircleBackgroundRenderContribution = __decorate$1o([injectable()], DefaultCircleBackgroundRenderContribution);
 	var DefaultCircleTextureRenderContribution = /*#__PURE__*/function (_DefaultBaseTextureRe) {
 	  _inherits(DefaultCircleTextureRenderContribution, _DefaultBaseTextureRe);
 	  var _super2 = _createSuper(DefaultCircleTextureRenderContribution);
@@ -23584,19 +23676,19 @@
 	  }
 	  return _createClass(DefaultCircleTextureRenderContribution);
 	}(DefaultBaseTextureRenderContribution);
-	DefaultCircleTextureRenderContribution = __decorate$1k([injectable()], DefaultCircleTextureRenderContribution);
+	DefaultCircleTextureRenderContribution = __decorate$1o([injectable()], DefaultCircleTextureRenderContribution);
 
-	var __decorate$1j = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1n = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	    var d,
 	      c = arguments.length,
 	      r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
 	    return c > 3 && r && Object.defineProperty(target, key, r), r;
 	  },
-	  __metadata$T = undefined && undefined.__metadata || function (k, v) {
+	  __metadata$W = undefined && undefined.__metadata || function (k, v) {
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
 	  },
-	  __param$H = undefined && undefined.__param || function (paramIndex, decorator) {
+	  __param$I = undefined && undefined.__param || function (paramIndex, decorator) {
 	    return function (target, key) {
 	      decorator(target, key, paramIndex);
 	    };
@@ -23665,9 +23757,9 @@
 	  }]);
 	  return DefaultCanvasCircleRender;
 	}();
-	DefaultCanvasCircleRender = __decorate$1j([injectable(), __param$H(0, inject(ContributionProvider)), __param$H(0, named(CircleRenderContribution)), __metadata$T("design:paramtypes", [Object])], DefaultCanvasCircleRender);
+	DefaultCanvasCircleRender = __decorate$1n([injectable(), __param$I(0, inject(ContributionProvider)), __param$I(0, named(CircleRenderContribution)), __metadata$W("design:paramtypes", [Object])], DefaultCanvasCircleRender);
 
-	var __decorate$1i = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1m = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	  var d,
 	    c = arguments.length,
 	    r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -23767,7 +23859,7 @@
 	  }]);
 	  return BaseRender;
 	}();
-	BaseRender = __decorate$1i([injectable()], BaseRender);
+	BaseRender = __decorate$1m([injectable()], BaseRender);
 
 	function drawSegments(path, segPath, percent, clipRangeByDimension, params) {
 	  var _ref = params || {},
@@ -23848,7 +23940,7 @@
 	  }
 	}
 
-	var __decorate$1h = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1l = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	  var d,
 	    c = arguments.length,
 	    r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -23971,9 +24063,9 @@
 	  }]);
 	  return DefaultCanvasLineRender;
 	}(BaseRender);
-	DefaultCanvasLineRender = __decorate$1h([injectable()], DefaultCanvasLineRender);
+	DefaultCanvasLineRender = __decorate$1l([injectable()], DefaultCanvasLineRender);
 
-	var __decorate$1g = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1k = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	  var d,
 	    c = arguments.length,
 	    r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -23992,7 +24084,7 @@
 	  }
 	  return _createClass(DefaultAreaBackgroundRenderContribution);
 	}(DefaultBaseBackgroundRenderContribution);
-	DefaultAreaBackgroundRenderContribution = __decorate$1g([injectable()], DefaultAreaBackgroundRenderContribution);
+	DefaultAreaBackgroundRenderContribution = __decorate$1k([injectable()], DefaultAreaBackgroundRenderContribution);
 	var DefaultAreaTextureRenderContribution = /*#__PURE__*/function (_DefaultBaseTextureRe) {
 	  _inherits(DefaultAreaTextureRenderContribution, _DefaultBaseTextureRe);
 	  var _super2 = _createSuper(DefaultAreaTextureRenderContribution);
@@ -24050,9 +24142,9 @@
 	  }]);
 	  return DefaultAreaTextureRenderContribution;
 	}(DefaultBaseTextureRenderContribution);
-	DefaultAreaTextureRenderContribution = __decorate$1g([injectable()], DefaultAreaTextureRenderContribution);
+	DefaultAreaTextureRenderContribution = __decorate$1k([injectable()], DefaultAreaTextureRenderContribution);
 
-	var __decorate$1f = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1j = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	  var d,
 	    c = arguments.length,
 	    r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -24084,9 +24176,9 @@
 	  }]);
 	  return DefaultGroupBackgroundRenderContribution;
 	}(DefaultBaseBackgroundRenderContribution);
-	DefaultGroupBackgroundRenderContribution = __decorate$1f([injectable()], DefaultGroupBackgroundRenderContribution);
+	DefaultGroupBackgroundRenderContribution = __decorate$1j([injectable()], DefaultGroupBackgroundRenderContribution);
 
-	var __decorate$1e = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1i = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	  var d,
 	    c = arguments.length,
 	    r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -24133,7 +24225,7 @@
 	  }]);
 	  return DefaultImageBackgroundRenderContribution;
 	}(DefaultBaseBackgroundRenderContribution);
-	DefaultImageBackgroundRenderContribution = __decorate$1e([injectable()], DefaultImageBackgroundRenderContribution);
+	DefaultImageBackgroundRenderContribution = __decorate$1i([injectable()], DefaultImageBackgroundRenderContribution);
 
 	function createRectPath(path, x, y, width, height, rectBorderRadius) {
 	  var borderRadius;
@@ -24192,7 +24284,7 @@
 	  return path.closePath(), path;
 	}
 
-	var __decorate$1d = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1h = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	  var d,
 	    c = arguments.length,
 	    r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -24251,7 +24343,7 @@
 	  }]);
 	  return DefaultRectRenderContribution;
 	}();
-	DefaultRectRenderContribution = __decorate$1d([injectable()], DefaultRectRenderContribution);
+	DefaultRectRenderContribution = __decorate$1h([injectable()], DefaultRectRenderContribution);
 	var DefaultRectBackgroundRenderContribution = /*#__PURE__*/function (_DefaultBaseBackgroun) {
 	  _inherits(DefaultRectBackgroundRenderContribution, _DefaultBaseBackgroun);
 	  var _super = _createSuper(DefaultRectBackgroundRenderContribution);
@@ -24263,7 +24355,7 @@
 	  }
 	  return _createClass(DefaultRectBackgroundRenderContribution);
 	}(DefaultBaseBackgroundRenderContribution);
-	DefaultRectBackgroundRenderContribution = __decorate$1d([injectable()], DefaultRectBackgroundRenderContribution);
+	DefaultRectBackgroundRenderContribution = __decorate$1h([injectable()], DefaultRectBackgroundRenderContribution);
 	var DefaultRectTextureRenderContribution = /*#__PURE__*/function (_DefaultBaseTextureRe) {
 	  _inherits(DefaultRectTextureRenderContribution, _DefaultBaseTextureRe);
 	  var _super2 = _createSuper(DefaultRectTextureRenderContribution);
@@ -24275,7 +24367,7 @@
 	  }
 	  return _createClass(DefaultRectTextureRenderContribution);
 	}(DefaultBaseTextureRenderContribution);
-	DefaultRectTextureRenderContribution = __decorate$1d([injectable()], DefaultRectTextureRenderContribution);
+	DefaultRectTextureRenderContribution = __decorate$1h([injectable()], DefaultRectTextureRenderContribution);
 	var SplitRectBeforeRenderContribution = /*#__PURE__*/function () {
 	  function SplitRectBeforeRenderContribution() {
 	    _classCallCheck(this, SplitRectBeforeRenderContribution);
@@ -24293,7 +24385,7 @@
 	  }]);
 	  return SplitRectBeforeRenderContribution;
 	}();
-	SplitRectBeforeRenderContribution = __decorate$1d([injectable()], SplitRectBeforeRenderContribution);
+	SplitRectBeforeRenderContribution = __decorate$1h([injectable()], SplitRectBeforeRenderContribution);
 	var SplitRectAfterRenderContribution = /*#__PURE__*/function () {
 	  function SplitRectAfterRenderContribution() {
 	    _classCallCheck(this, SplitRectAfterRenderContribution);
@@ -24322,9 +24414,9 @@
 	  }]);
 	  return SplitRectAfterRenderContribution;
 	}();
-	SplitRectAfterRenderContribution = __decorate$1d([injectable()], SplitRectAfterRenderContribution);
+	SplitRectAfterRenderContribution = __decorate$1h([injectable()], SplitRectAfterRenderContribution);
 
-	var __decorate$1c = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1g = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	  var d,
 	    c = arguments.length,
 	    r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -24372,7 +24464,7 @@
 	  }]);
 	  return DefaultSymbolRenderContribution;
 	}();
-	DefaultSymbolRenderContribution = __decorate$1c([injectable()], DefaultSymbolRenderContribution);
+	DefaultSymbolRenderContribution = __decorate$1g([injectable()], DefaultSymbolRenderContribution);
 	var DefaultSymbolBackgroundRenderContribution = /*#__PURE__*/function (_DefaultBaseBackgroun) {
 	  _inherits(DefaultSymbolBackgroundRenderContribution, _DefaultBaseBackgroun);
 	  var _super = _createSuper(DefaultSymbolBackgroundRenderContribution);
@@ -24472,17 +24564,17 @@
 	  }
 	}
 
-	var __decorate$1b = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1f = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	    var d,
 	      c = arguments.length,
 	      r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
 	    return c > 3 && r && Object.defineProperty(target, key, r), r;
 	  },
-	  __metadata$S = undefined && undefined.__metadata || function (k, v) {
+	  __metadata$V = undefined && undefined.__metadata || function (k, v) {
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
 	  },
-	  __param$G = undefined && undefined.__param || function (paramIndex, decorator) {
+	  __param$H = undefined && undefined.__param || function (paramIndex, decorator) {
 	    return function (target, key) {
 	      decorator(target, key, paramIndex);
 	    };
@@ -24666,9 +24758,9 @@
 	  }]);
 	  return DefaultCanvasAreaRender;
 	}();
-	DefaultCanvasAreaRender = __decorate$1b([injectable(), __param$G(0, inject(ContributionProvider)), __param$G(0, named(AreaRenderContribution)), __metadata$S("design:paramtypes", [Object])], DefaultCanvasAreaRender);
+	DefaultCanvasAreaRender = __decorate$1f([injectable(), __param$H(0, inject(ContributionProvider)), __param$H(0, named(AreaRenderContribution)), __metadata$V("design:paramtypes", [Object])], DefaultCanvasAreaRender);
 
-	var __decorate$1a = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1e = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	  var d,
 	    c = arguments.length,
 	    r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -24687,7 +24779,7 @@
 	  }
 	  return _createClass(DefaultPathBackgroundRenderContribution);
 	}(DefaultBaseBackgroundRenderContribution);
-	DefaultPathBackgroundRenderContribution = __decorate$1a([injectable()], DefaultPathBackgroundRenderContribution);
+	DefaultPathBackgroundRenderContribution = __decorate$1e([injectable()], DefaultPathBackgroundRenderContribution);
 	var DefaultPathTextureRenderContribution = /*#__PURE__*/function (_DefaultBaseTextureRe) {
 	  _inherits(DefaultPathTextureRenderContribution, _DefaultBaseTextureRe);
 	  var _super2 = _createSuper(DefaultPathTextureRenderContribution);
@@ -24699,19 +24791,19 @@
 	  }
 	  return _createClass(DefaultPathTextureRenderContribution);
 	}(DefaultBaseTextureRenderContribution);
-	DefaultPathTextureRenderContribution = __decorate$1a([injectable()], DefaultPathTextureRenderContribution);
+	DefaultPathTextureRenderContribution = __decorate$1e([injectable()], DefaultPathTextureRenderContribution);
 
-	var __decorate$19 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1d = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	    var d,
 	      c = arguments.length,
 	      r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
 	    return c > 3 && r && Object.defineProperty(target, key, r), r;
 	  },
-	  __metadata$R = undefined && undefined.__metadata || function (k, v) {
+	  __metadata$U = undefined && undefined.__metadata || function (k, v) {
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
 	  },
-	  __param$F = undefined && undefined.__param || function (paramIndex, decorator) {
+	  __param$G = undefined && undefined.__param || function (paramIndex, decorator) {
 	    return function (target, key) {
 	      decorator(target, key, paramIndex);
 	    };
@@ -24746,6 +24838,10 @@
 	        lineWidth = _path$attribute$lineW === void 0 ? pathAttribute.lineWidth : _path$attribute$lineW,
 	        _path$attribute$visib = _path$attribute.visible,
 	        visible = _path$attribute$visib === void 0 ? pathAttribute.visible : _path$attribute$visib,
+	        _path$attribute$x = _path$attribute.x,
+	        originX = _path$attribute$x === void 0 ? pathAttribute.x : _path$attribute$x,
+	        _path$attribute$y = _path$attribute.y,
+	        originY = _path$attribute$y === void 0 ? pathAttribute.y : _path$attribute$y,
 	        z = null !== (_a = this.z) && void 0 !== _a ? _a : 0,
 	        fVisible = fillVisible(opacity, fillOpacity),
 	        sVisible = strokeVisible(opacity, strokeOpacity),
@@ -24760,7 +24856,7 @@
 	          return b.order - a.order;
 	        })), this._pathRenderContribitions.forEach(function (c) {
 	          c.time === BaseRenderContributionTime.beforeFillStroke && c.drawShape(path, context, x, y, doFill, doStroke, fVisible, sVisible, pathAttribute, fillCb, strokeCb);
-	        }), context.setShadowStyle && context.setShadowStyle(path, path.attribute, pathAttribute), doStroke && (strokeCb ? strokeCb(context, path.attribute, pathAttribute) : sVisible && (context.setStrokeStyle(path, path.attribute, x, y, pathAttribute), context.stroke())), doFill && (fillCb ? fillCb(context, path.attribute, pathAttribute) : fVisible && (context.setCommonStyle(path, path.attribute, x, y, pathAttribute), context.fill())), this._pathRenderContribitions.forEach(function (c) {
+	        }), context.setShadowStyle && context.setShadowStyle(path, path.attribute, pathAttribute), doStroke && (strokeCb ? strokeCb(context, path.attribute, pathAttribute) : sVisible && (context.setStrokeStyle(path, path.attribute, originX - x, originY - y, pathAttribute), context.stroke())), doFill && (fillCb ? fillCb(context, path.attribute, pathAttribute) : fVisible && (context.setCommonStyle(path, path.attribute, originX - x, originY - y, pathAttribute), context.fill())), this._pathRenderContribitions.forEach(function (c) {
 	          c.time === BaseRenderContributionTime.afterFillStroke && c.drawShape(path, context, x, y, doFill, doStroke, fVisible, sVisible, pathAttribute, fillCb, strokeCb);
 	        });
 	      }
@@ -24782,19 +24878,19 @@
 	  }]);
 	  return DefaultCanvasPathRender;
 	}(BaseRender);
-	DefaultCanvasPathRender = __decorate$19([injectable(), __param$F(0, inject(ContributionProvider)), __param$F(0, named(PathRenderContribution)), __metadata$R("design:paramtypes", [Object])], DefaultCanvasPathRender);
+	DefaultCanvasPathRender = __decorate$1d([injectable(), __param$G(0, inject(ContributionProvider)), __param$G(0, named(PathRenderContribution)), __metadata$U("design:paramtypes", [Object])], DefaultCanvasPathRender);
 
-	var __decorate$18 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1c = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	    var d,
 	      c = arguments.length,
 	      r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
 	    return c > 3 && r && Object.defineProperty(target, key, r), r;
 	  },
-	  __metadata$Q = undefined && undefined.__metadata || function (k, v) {
+	  __metadata$T = undefined && undefined.__metadata || function (k, v) {
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
 	  },
-	  __param$E = undefined && undefined.__param || function (paramIndex, decorator) {
+	  __param$F = undefined && undefined.__param || function (paramIndex, decorator) {
 	    return function (target, key) {
 	      decorator(target, key, paramIndex);
 	    };
@@ -24873,19 +24969,19 @@
 	  }]);
 	  return DefaultCanvasRectRender;
 	}();
-	DefaultCanvasRectRender = __decorate$18([injectable(), __param$E(0, inject(ContributionProvider)), __param$E(0, named(RectRenderContribution)), __metadata$Q("design:paramtypes", [Object])], DefaultCanvasRectRender);
+	DefaultCanvasRectRender = __decorate$1c([injectable(), __param$F(0, inject(ContributionProvider)), __param$F(0, named(RectRenderContribution)), __metadata$T("design:paramtypes", [Object])], DefaultCanvasRectRender);
 
-	var __decorate$17 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1b = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	    var d,
 	      c = arguments.length,
 	      r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
 	    return c > 3 && r && Object.defineProperty(target, key, r), r;
 	  },
-	  __metadata$P = undefined && undefined.__metadata || function (k, v) {
+	  __metadata$S = undefined && undefined.__metadata || function (k, v) {
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
 	  },
-	  __param$D = undefined && undefined.__param || function (paramIndex, decorator) {
+	  __param$E = undefined && undefined.__param || function (paramIndex, decorator) {
 	    return function (target, key) {
 	      decorator(target, key, paramIndex);
 	    };
@@ -24922,6 +25018,14 @@
 	        stroke = _symbol$attribute$str2 === void 0 ? symbolAttribute.stroke : _symbol$attribute$str2,
 	        _symbol$attribute$vis = _symbol$attribute.visible,
 	        visible = _symbol$attribute$vis === void 0 ? symbolAttribute.visible : _symbol$attribute$vis,
+	        _symbol$attribute$x = _symbol$attribute.x,
+	        originX = _symbol$attribute$x === void 0 ? symbolAttribute.x : _symbol$attribute$x,
+	        _symbol$attribute$y = _symbol$attribute.y,
+	        originY = _symbol$attribute$y === void 0 ? symbolAttribute.y : _symbol$attribute$y,
+	        _symbol$attribute$sca = _symbol$attribute.scaleX,
+	        scaleX = _symbol$attribute$sca === void 0 ? symbolAttribute.scaleX : _symbol$attribute$sca,
+	        _symbol$attribute$sca2 = _symbol$attribute.scaleY,
+	        scaleY = _symbol$attribute$sca2 === void 0 ? symbolAttribute.scaleY : _symbol$attribute$sca2,
 	        fVisible = fillVisible(opacity, fillOpacity),
 	        sVisible = strokeVisible(opacity, strokeOpacity),
 	        doFill = runFill(fill),
@@ -24943,7 +25047,7 @@
 	        return b.order - a.order;
 	      })), this._symbolRenderContribitions.forEach(function (c) {
 	        c.time === BaseRenderContributionTime.beforeFillStroke && c.drawShape(symbol, context, x, y, doFill, doStroke, fVisible, sVisible, symbolAttribute, fillCb, strokeCb);
-	      }), context.setShadowStyle && context.setShadowStyle(symbol, symbol.attribute, symbolAttribute), doFill && (fillCb ? fillCb(context, symbol.attribute, symbolAttribute) : fVisible && (context.setCommonStyle(symbol, symbol.attribute, x, y, symbolAttribute), context.fill())), doStroke && (strokeCb ? strokeCb(context, symbol.attribute, symbolAttribute) : sVisible && (context.setStrokeStyle(symbol, symbol.attribute, x, y, symbolAttribute), context.stroke())), this._symbolRenderContribitions.forEach(function (c) {
+	      }), context.setShadowStyle && context.setShadowStyle(symbol, symbol.attribute, symbolAttribute), doFill && (fillCb ? fillCb(context, symbol.attribute, symbolAttribute) : fVisible && (context.setCommonStyle(symbol, symbol.attribute, originX - x, originY - y, symbolAttribute), context.fill())), doStroke && (strokeCb ? strokeCb(context, symbol.attribute, symbolAttribute) : sVisible && (context.setStrokeStyle(symbol, symbol.attribute, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute), context.stroke())), this._symbolRenderContribitions.forEach(function (c) {
 	        c.time === BaseRenderContributionTime.afterFillStroke && c.drawShape(symbol, context, x, y, doFill, doStroke, fVisible, sVisible, symbolAttribute, fillCb, strokeCb);
 	      });
 	    }
@@ -24964,9 +25068,9 @@
 	  }]);
 	  return DefaultCanvasSymbolRender;
 	}(BaseRender);
-	DefaultCanvasSymbolRender = __decorate$17([injectable(), __param$D(0, inject(ContributionProvider)), __param$D(0, named(SymbolRenderContribution)), __metadata$P("design:paramtypes", [Object])], DefaultCanvasSymbolRender);
+	DefaultCanvasSymbolRender = __decorate$1b([injectable(), __param$E(0, inject(ContributionProvider)), __param$E(0, named(SymbolRenderContribution)), __metadata$S("design:paramtypes", [Object])], DefaultCanvasSymbolRender);
 
-	var __decorate$16 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1a = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	  var d,
 	    c = arguments.length,
 	    r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -25128,9 +25232,9 @@
 	  }]);
 	  return DefaultCanvasTextRender;
 	}(BaseRender);
-	DefaultCanvasTextRender = __decorate$16([injectable()], DefaultCanvasTextRender);
+	DefaultCanvasTextRender = __decorate$1a([injectable()], DefaultCanvasTextRender);
 
-	var __decorate$15 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$19 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	  var d,
 	    c = arguments.length,
 	    r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -25140,7 +25244,7 @@
 	var AbstractGraphicRender = /*#__PURE__*/_createClass(function AbstractGraphicRender() {
 	  _classCallCheck(this, AbstractGraphicRender);
 	});
-	AbstractGraphicRender = __decorate$15([injectable()], AbstractGraphicRender);
+	AbstractGraphicRender = __decorate$19([injectable()], AbstractGraphicRender);
 
 	function drawPolygon(path, points, x, y) {
 	  path.moveTo(points[0].x + x, points[0].y + y);
@@ -25187,7 +25291,7 @@
 	  };
 	}
 
-	var __decorate$14 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$18 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	  var d,
 	    c = arguments.length,
 	    r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -25206,7 +25310,7 @@
 	  }
 	  return _createClass(DefaultPolygonBackgroundRenderContribution);
 	}(DefaultBaseBackgroundRenderContribution);
-	DefaultPolygonBackgroundRenderContribution = __decorate$14([injectable()], DefaultPolygonBackgroundRenderContribution);
+	DefaultPolygonBackgroundRenderContribution = __decorate$18([injectable()], DefaultPolygonBackgroundRenderContribution);
 	var DefaultPolygonTextureRenderContribution = /*#__PURE__*/function (_DefaultBaseTextureRe) {
 	  _inherits(DefaultPolygonTextureRenderContribution, _DefaultBaseTextureRe);
 	  var _super2 = _createSuper(DefaultPolygonTextureRenderContribution);
@@ -25218,19 +25322,19 @@
 	  }
 	  return _createClass(DefaultPolygonTextureRenderContribution);
 	}(DefaultBaseTextureRenderContribution);
-	DefaultPolygonTextureRenderContribution = __decorate$14([injectable()], DefaultPolygonTextureRenderContribution);
+	DefaultPolygonTextureRenderContribution = __decorate$18([injectable()], DefaultPolygonTextureRenderContribution);
 
-	var __decorate$13 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$17 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	    var d,
 	      c = arguments.length,
 	      r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
 	    return c > 3 && r && Object.defineProperty(target, key, r), r;
 	  },
-	  __metadata$O = undefined && undefined.__metadata || function (k, v) {
+	  __metadata$R = undefined && undefined.__metadata || function (k, v) {
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
 	  },
-	  __param$C = undefined && undefined.__param || function (paramIndex, decorator) {
+	  __param$D = undefined && undefined.__param || function (paramIndex, decorator) {
 	    return function (target, key) {
 	      decorator(target, key, paramIndex);
 	    };
@@ -25299,19 +25403,19 @@
 	  }]);
 	  return DefaultCanvasPolygonRender;
 	}();
-	DefaultCanvasPolygonRender = __decorate$13([injectable(), __param$C(0, inject(ContributionProvider)), __param$C(0, named(PolygonRenderContribution)), __metadata$O("design:paramtypes", [Object])], DefaultCanvasPolygonRender);
+	DefaultCanvasPolygonRender = __decorate$17([injectable(), __param$D(0, inject(ContributionProvider)), __param$D(0, named(PolygonRenderContribution)), __metadata$R("design:paramtypes", [Object])], DefaultCanvasPolygonRender);
 
-	var __decorate$12 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$16 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	    var d,
 	      c = arguments.length,
 	      r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
 	    return c > 3 && r && Object.defineProperty(target, key, r), r;
 	  },
-	  __metadata$N = undefined && undefined.__metadata || function (k, v) {
+	  __metadata$Q = undefined && undefined.__metadata || function (k, v) {
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
 	  },
-	  __param$B = undefined && undefined.__param || function (paramIndex, decorator) {
+	  __param$C = undefined && undefined.__param || function (paramIndex, decorator) {
 	    return function (target, key) {
 	      decorator(target, key, paramIndex);
 	    };
@@ -25379,7 +25483,7 @@
 	  }]);
 	  return DefaultCanvasImageRender;
 	}();
-	DefaultCanvasImageRender = __decorate$12([injectable(), __param$B(0, inject(ContributionProvider)), __param$B(0, named(ImageRenderContribution)), __metadata$N("design:paramtypes", [Object])], DefaultCanvasImageRender);
+	DefaultCanvasImageRender = __decorate$16([injectable(), __param$C(0, inject(ContributionProvider)), __param$C(0, named(ImageRenderContribution)), __metadata$Q("design:paramtypes", [Object])], DefaultCanvasImageRender);
 
 	var IncrementalDrawContribution = Symbol["for"]("IncrementalDrawContribution");
 	var ArcRender = Symbol["for"]("ArcRender");
@@ -25402,17 +25506,17 @@
 	var RenderSelector = Symbol["for"]("RenderSelector");
 	var DrawContribution = Symbol["for"]("DrawContribution");
 
-	var __decorate$11 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$15 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	    var d,
 	      c = arguments.length,
 	      r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
 	    return c > 3 && r && Object.defineProperty(target, key, r), r;
 	  },
-	  __metadata$M = undefined && undefined.__metadata || function (k, v) {
+	  __metadata$P = undefined && undefined.__metadata || function (k, v) {
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
 	  },
-	  __param$A = undefined && undefined.__param || function (paramIndex, decorator) {
+	  __param$B = undefined && undefined.__param || function (paramIndex, decorator) {
 	    return function (target, key) {
 	      decorator(target, key, paramIndex);
 	    };
@@ -25466,7 +25570,7 @@
 	  }]);
 	  return DefaultRenderService;
 	}();
-	DefaultRenderService = __decorate$11([injectable(), __param$A(0, inject(DrawContribution)), __metadata$M("design:paramtypes", [Object])], DefaultRenderService);
+	DefaultRenderService = __decorate$15([injectable(), __param$B(0, inject(DrawContribution)), __metadata$P("design:paramtypes", [Object])], DefaultRenderService);
 
 	var renderModule$1 = new ContainerModule(function (bind) {
 	  bind(DefaultRenderService).toSelf(), bind(RenderService).toService(DefaultRenderService);
@@ -25589,7 +25693,7 @@
 	  return result;
 	}
 
-	var __decorate$10 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$14 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	  var d,
 	    c = arguments.length,
 	    r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -25673,19 +25777,19 @@
 	  }]);
 	  return Canvas3DPickItemInterceptor;
 	}();
-	Canvas3DPickItemInterceptor = __decorate$10([injectable()], Canvas3DPickItemInterceptor);
+	Canvas3DPickItemInterceptor = __decorate$14([injectable()], Canvas3DPickItemInterceptor);
 
-	var __decorate$$ = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$13 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	    var d,
 	      c = arguments.length,
 	      r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
 	    return c > 3 && r && Object.defineProperty(target, key, r), r;
 	  },
-	  __metadata$L = undefined && undefined.__metadata || function (k, v) {
+	  __metadata$O = undefined && undefined.__metadata || function (k, v) {
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
 	  },
-	  __param$z = undefined && undefined.__param || function (paramIndex, decorator) {
+	  __param$A = undefined && undefined.__param || function (paramIndex, decorator) {
 	    return function (target, key) {
 	      decorator(target, key, paramIndex);
 	    };
@@ -25800,19 +25904,19 @@
 	  }]);
 	  return DefaultPickService;
 	}();
-	DefaultPickService = __decorate$$([injectable(), __param$z(0, inject(Global)), __param$z(1, inject(ContributionProvider)), __param$z(1, named(PickItemInterceptor)), __metadata$L("design:paramtypes", [Object, Object])], DefaultPickService);
+	DefaultPickService = __decorate$13([injectable(), __param$A(0, inject(Global)), __param$A(1, inject(ContributionProvider)), __param$A(1, named(PickItemInterceptor)), __metadata$O("design:paramtypes", [Object, Object])], DefaultPickService);
 
-	var __decorate$_ = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$12 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	    var d,
 	      c = arguments.length,
 	      r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
 	    return c > 3 && r && Object.defineProperty(target, key, r), r;
 	  },
-	  __metadata$K = undefined && undefined.__metadata || function (k, v) {
+	  __metadata$N = undefined && undefined.__metadata || function (k, v) {
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
 	  },
-	  __param$y = undefined && undefined.__param || function (paramIndex, decorator) {
+	  __param$z = undefined && undefined.__param || function (paramIndex, decorator) {
 	    return function (target, key) {
 	      decorator(target, key, paramIndex);
 	    };
@@ -25877,7 +25981,7 @@
 	  }]);
 	  return DefaultGlobalPickerService;
 	}();
-	DefaultGlobalPickerService = __decorate$_([injectable(), __param$y(0, inject(Global)), __metadata$K("design:paramtypes", [Object])], DefaultGlobalPickerService);
+	DefaultGlobalPickerService = __decorate$12([injectable(), __param$z(0, inject(Global)), __metadata$N("design:paramtypes", [Object])], DefaultGlobalPickerService);
 
 	function lookAt(out, eye, center, up) {
 	  var x0, x1, x2, y0, y1, y2, z0, z1, z2, len;
@@ -26011,14 +26115,14 @@
 	  return OrthoCamera;
 	}();
 
-	var __decorate$Z = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$11 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	    var d,
 	      c = arguments.length,
 	      r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
 	    return c > 3 && r && Object.defineProperty(target, key, r), r;
 	  },
-	  __metadata$J = undefined && undefined.__metadata || function (k, v) {
+	  __metadata$M = undefined && undefined.__metadata || function (k, v) {
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
 	  };
 	var outP = [0, 0, 0],
@@ -26583,7 +26687,7 @@
 	        opacity = _attribute$opacity === void 0 ? defaultParams.opacity : _attribute$opacity,
 	        _attribute$fill = attribute.fill,
 	        fill = _attribute$fill === void 0 ? defaultParams.fill : _attribute$fill;
-	      fillOpacity > 1e-12 && opacity > 1e-12 ? (_context.globalAlpha = fillOpacity * opacity, _context.fillStyle = createColor(this, fill, params)) : _context.globalAlpha = fillOpacity * opacity;
+	      fillOpacity > 1e-12 && opacity > 1e-12 ? (_context.globalAlpha = fillOpacity * opacity, _context.fillStyle = createColor(this, fill, params, offsetX, offsetY)) : _context.globalAlpha = fillOpacity * opacity;
 	    }
 	  }, {
 	    key: "setShadowStyle",
@@ -26650,7 +26754,7 @@
 	          lineCap = _attribute$lineCap === void 0 ? defaultParams.lineCap : _attribute$lineCap,
 	          _attribute$miterLimit = attribute.miterLimit,
 	          miterLimit = _attribute$miterLimit === void 0 ? defaultParams.miterLimit : _attribute$miterLimit;
-	        _context.globalAlpha = strokeOpacity * opacity, _context.lineWidth = getScaledStroke(this, lineWidth, this.dpr), _context.strokeStyle = createColor(this, stroke, params), _context.lineJoin = lineJoin, _context.setLineDash(lineDash), _context.lineCap = lineCap, _context.miterLimit = miterLimit;
+	        _context.globalAlpha = strokeOpacity * opacity, _context.lineWidth = getScaledStroke(this, lineWidth, this.dpr), _context.strokeStyle = createColor(this, stroke, params, offsetX, offsetY), _context.lineJoin = lineJoin, _context.setLineDash(lineDash), _context.lineCap = lineCap, _context.miterLimit = miterLimit;
 	      }
 	    }
 	  }, {
@@ -26702,19 +26806,19 @@
 	  }]);
 	  return BrowserContext2d;
 	}();
-	BrowserContext2d.env = "browser", BrowserContext2d = __decorate$Z([injectable(), __metadata$J("design:paramtypes", [Object, Number])], BrowserContext2d);
+	BrowserContext2d.env = "browser", BrowserContext2d = __decorate$11([injectable(), __metadata$M("design:paramtypes", [Object, Number])], BrowserContext2d);
 
-	var __decorate$Y = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$10 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	    var d,
 	      c = arguments.length,
 	      r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
 	    return c > 3 && r && Object.defineProperty(target, key, r), r;
 	  },
-	  __metadata$I = undefined && undefined.__metadata || function (k, v) {
+	  __metadata$L = undefined && undefined.__metadata || function (k, v) {
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
 	  };
-	var DefaultConfig$4 = {
+	var DefaultConfig$5 = {
 	  WIDTH: 500,
 	  HEIGHT: 500,
 	  DPR: 1
@@ -26724,11 +26828,11 @@
 	    _classCallCheck(this, BrowserCanvas);
 	    var nativeCanvas = params.nativeCanvas,
 	      _params$width = params.width,
-	      width = _params$width === void 0 ? DefaultConfig$4.WIDTH : _params$width,
+	      width = _params$width === void 0 ? DefaultConfig$5.WIDTH : _params$width,
 	      _params$height = params.height,
-	      height = _params$height === void 0 ? DefaultConfig$4.HEIGHT : _params$height,
+	      height = _params$height === void 0 ? DefaultConfig$5.HEIGHT : _params$height,
 	      _params$dpr = params.dpr,
-	      dpr = _params$dpr === void 0 ? DefaultConfig$4.DPR : _params$dpr,
+	      dpr = _params$dpr === void 0 ? DefaultConfig$5.DPR : _params$dpr,
 	      container = params.container,
 	      x = params.x,
 	      y = params.y,
@@ -26894,7 +26998,7 @@
 	  }]);
 	  return BrowserCanvas;
 	}();
-	BrowserCanvas.env = "browser", BrowserCanvas = __decorate$Y([injectable(), __metadata$I("design:paramtypes", [Object])], BrowserCanvas);
+	BrowserCanvas.env = "browser", BrowserCanvas = __decorate$10([injectable(), __metadata$L("design:paramtypes", [Object])], BrowserCanvas);
 
 	var CanvasArcPicker = Symbol["for"]("CanvasArcPicker");
 	var CanvasArc3dPicker = Symbol["for"]("CanvasArc3dPicker");
@@ -26924,17 +27028,17 @@
 	var MathGlyphPicker = Symbol["for"]("MathGlyphPicker");
 	var MathPickerContribution = Symbol["for"]("MathPickerContribution");
 
-	var __decorate$X = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$$ = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	    var d,
 	      c = arguments.length,
 	      r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
 	    return c > 3 && r && Object.defineProperty(target, key, r), r;
 	  },
-	  __metadata$H = undefined && undefined.__metadata || function (k, v) {
+	  __metadata$K = undefined && undefined.__metadata || function (k, v) {
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
 	  },
-	  __param$x = undefined && undefined.__param || function (paramIndex, decorator) {
+	  __param$y = undefined && undefined.__param || function (paramIndex, decorator) {
 	    return function (target, key) {
 	      decorator(target, key, paramIndex);
 	    };
@@ -26986,16 +27090,16 @@
 	  }]);
 	  return DefaultCanvasPickerService;
 	}(DefaultPickService);
-	__decorate$X([postConstruct(), __metadata$H("design:type", Function), __metadata$H("design:paramtypes", []), __metadata$H("design:returntype", void 0)], DefaultCanvasPickerService.prototype, "init", null), DefaultCanvasPickerService = __decorate$X([injectable(), __param$x(0, inject(ContributionProvider)), __param$x(0, named(CanvasPickerContribution)), __param$x(1, inject(CanvasCirclePicker)), __param$x(2, inject(CanvasRectPicker)), __param$x(3, inject(CanvasArcPicker)), __param$x(4, inject(CanvasAreaPicker)), __param$x(5, inject(CanvasImagePicker)), __param$x(6, inject(CanvasLinePicker)), __param$x(7, inject(CanvasPathPicker)), __param$x(8, inject(CanvasSymbolPicker)), __param$x(9, inject(CanvasTextPicker)), __param$x(10, inject(CanvasPolygonPicker)), __param$x(11, inject(CanvasRichTextPicker)), __param$x(12, inject(DrawContribution)), __param$x(13, inject(Global)), __param$x(14, inject(ContributionProvider)), __param$x(14, named(PickItemInterceptor)), __metadata$H("design:paramtypes", [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object])], DefaultCanvasPickerService);
+	__decorate$$([postConstruct(), __metadata$K("design:type", Function), __metadata$K("design:paramtypes", []), __metadata$K("design:returntype", void 0)], DefaultCanvasPickerService.prototype, "init", null), DefaultCanvasPickerService = __decorate$$([injectable(), __param$y(0, inject(ContributionProvider)), __param$y(0, named(CanvasPickerContribution)), __param$y(1, inject(CanvasCirclePicker)), __param$y(2, inject(CanvasRectPicker)), __param$y(3, inject(CanvasArcPicker)), __param$y(4, inject(CanvasAreaPicker)), __param$y(5, inject(CanvasImagePicker)), __param$y(6, inject(CanvasLinePicker)), __param$y(7, inject(CanvasPathPicker)), __param$y(8, inject(CanvasSymbolPicker)), __param$y(9, inject(CanvasTextPicker)), __param$y(10, inject(CanvasPolygonPicker)), __param$y(11, inject(CanvasRichTextPicker)), __param$y(12, inject(DrawContribution)), __param$y(13, inject(Global)), __param$y(14, inject(ContributionProvider)), __param$y(14, named(PickItemInterceptor)), __metadata$K("design:paramtypes", [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object])], DefaultCanvasPickerService);
 
-	var __decorate$W = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$_ = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	    var d,
 	      c = arguments.length,
 	      r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
 	    return c > 3 && r && Object.defineProperty(target, key, r), r;
 	  },
-	  __metadata$G = undefined && undefined.__metadata || function (k, v) {
+	  __metadata$J = undefined && undefined.__metadata || function (k, v) {
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
 	  };
 	var initMatrix = new Matrix(1, 0, 0, 1, 0, 0),
@@ -27337,19 +27441,19 @@
 	  }]);
 	  return EmptyContext2d;
 	}();
-	EmptyContext2d = __decorate$W([injectable(), __metadata$G("design:paramtypes", [Object, Number])], EmptyContext2d);
+	EmptyContext2d = __decorate$_([injectable(), __metadata$J("design:paramtypes", [Object, Number])], EmptyContext2d);
 
-	var __decorate$V = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$Z = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	    var d,
 	      c = arguments.length,
 	      r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
 	    return c > 3 && r && Object.defineProperty(target, key, r), r;
 	  },
-	  __metadata$F = undefined && undefined.__metadata || function (k, v) {
+	  __metadata$I = undefined && undefined.__metadata || function (k, v) {
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
 	  },
-	  __param$w = undefined && undefined.__param || function (paramIndex, decorator) {
+	  __param$x = undefined && undefined.__param || function (paramIndex, decorator) {
 	    return function (target, key) {
 	      decorator(target, key, paramIndex);
 	    };
@@ -27388,7 +27492,7 @@
 	  }]);
 	  return DefaultMathPickerService;
 	}(DefaultPickService);
-	__decorate$V([postConstruct(), __metadata$F("design:type", Function), __metadata$F("design:paramtypes", []), __metadata$F("design:returntype", void 0)], DefaultMathPickerService.prototype, "init", null), DefaultMathPickerService = __decorate$V([injectable(), __param$w(0, inject(ContributionProvider)), __param$w(0, named(MathPickerContribution)), __param$w(1, inject(Global)), __param$w(2, inject(ContributionProvider)), __param$w(2, named(PickItemInterceptor)), __metadata$F("design:paramtypes", [Object, Object, Object])], DefaultMathPickerService);
+	__decorate$Z([postConstruct(), __metadata$I("design:type", Function), __metadata$I("design:paramtypes", []), __metadata$I("design:returntype", void 0)], DefaultMathPickerService.prototype, "init", null), DefaultMathPickerService = __decorate$Z([injectable(), __param$x(0, inject(ContributionProvider)), __param$x(0, named(MathPickerContribution)), __param$x(1, inject(Global)), __param$x(2, inject(ContributionProvider)), __param$x(2, named(PickItemInterceptor)), __metadata$I("design:paramtypes", [Object, Object, Object])], DefaultMathPickerService);
 
 	var pickModule = new ContainerModule(function (bind) {
 	  bind(DefaultCanvasPickerService).toSelf().inSingletonScope(), bind(DefaultMathPickerService).toSelf().inSingletonScope(), bind(PickerService).toService(DefaultCanvasPickerService), bind(DefaultGlobalPickerService).toSelf().inSingletonScope(), bind(GlobalPickerService).toService(DefaultGlobalPickerService), bind(Canvas3DPickItemInterceptor).toSelf().inSingletonScope(), bind(PickItemInterceptor).toService(Canvas3DPickItemInterceptor), bindContributionProvider(bind, PickItemInterceptor);
@@ -27398,14 +27502,14 @@
 	  bind(DefaultGraphicService).toSelf().inSingletonScope(), bind(GraphicService).toService(DefaultGraphicService), bind(DefaultRectOuterBorderBoundsContribution).toSelf().inSingletonScope(), bind(RectBoundsContribution).toService(DefaultRectOuterBorderBoundsContribution), bindContributionProvider(bind, RectBoundsContribution), bind(DefaultSymbolOuterBorderBoundsContribution).toSelf().inSingletonScope(), bind(SymbolBoundsContribution).toService(DefaultSymbolOuterBorderBoundsContribution), bindContributionProvider(bind, SymbolBoundsContribution), bind(DefaultCircleOuterBorderBoundsContribution).toSelf().inSingletonScope(), bind(CircleBoundsContribution).toService(DefaultCircleOuterBorderBoundsContribution), bindContributionProvider(bind, CircleBoundsContribution), bind(DefaultArcOuterBorderBoundsContribution).toSelf().inSingletonScope(), bind(ArcBoundsContribution).toService(DefaultArcOuterBorderBoundsContribution), bindContributionProvider(bind, ArcBoundsContribution), bind(DefaultPathOuterBorderBoundsContribution).toSelf().inSingletonScope(), bind(PathBoundsContribution).toService(DefaultPathOuterBorderBoundsContribution), bindContributionProvider(bind, PathBoundsContribution), bind(GraphicCreator).toConstantValue(graphicCreator);
 	});
 
-	var __decorate$U = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$Y = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	    var d,
 	      c = arguments.length,
 	      r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
 	    return c > 3 && r && Object.defineProperty(target, key, r), r;
 	  },
-	  __metadata$E = undefined && undefined.__metadata || function (k, v) {
+	  __metadata$H = undefined && undefined.__metadata || function (k, v) {
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
 	  };
 	var PluginService = Symbol["for"]("PluginService");
@@ -27447,13 +27551,13 @@
 	  }]);
 	  return DefaultPluginService;
 	}();
-	DefaultPluginService = __decorate$U([injectable(), __metadata$E("design:paramtypes", [])], DefaultPluginService);
+	DefaultPluginService = __decorate$Y([injectable(), __metadata$H("design:paramtypes", [])], DefaultPluginService);
 
 	var pluginModule = new ContainerModule(function (bind) {
 	  bind(DefaultPluginService).toSelf(), bind(PluginService).toService(DefaultPluginService);
 	});
 
-	var __decorate$T = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$X = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	  var d,
 	    c = arguments.length,
 	    r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -27534,16 +27638,16 @@
 	  }]);
 	  return BaseEnvContribution;
 	}();
-	BaseEnvContribution = __decorate$T([injectable()], BaseEnvContribution);
+	BaseEnvContribution = __decorate$X([injectable()], BaseEnvContribution);
 
-	var __decorate$S = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$W = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	    var d,
 	      c = arguments.length,
 	      r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
 	    return c > 3 && r && Object.defineProperty(target, key, r), r;
 	  },
-	  __metadata$D = undefined && undefined.__metadata || function (k, v) {
+	  __metadata$G = undefined && undefined.__metadata || function (k, v) {
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
 	  };
 	function createImageElement(src) {
@@ -27580,6 +27684,26 @@
 	    return _this;
 	  }
 	  _createClass(BrowserEnvContribution, [{
+	    key: "mapToCanvasPoint",
+	    value: function mapToCanvasPoint(nativeEvent, domElement) {
+	      var _a;
+	      if (domElement) {
+	        var x = nativeEvent.clientX,
+	          y = nativeEvent.clientY,
+	          rect = domElement.getBoundingClientRect(),
+	          nativeCanvas = null === (_a = domElement.getNativeHandler) || void 0 === _a ? void 0 : _a.call(domElement).nativeCanvas;
+	        var scaleX, scaleY;
+	        return nativeCanvas && (scaleX = rect.width / nativeCanvas.offsetWidth, scaleY = rect.height / nativeCanvas.offsetHeight), {
+	          x: (x - rect.left) / (isValidNumber(scaleX) ? scaleX : 1),
+	          y: (y - rect.top) / (isValidNumber(scaleY) ? scaleX : 1)
+	        };
+	      }
+	      return {
+	        x: nativeEvent.offsetX,
+	        y: nativeEvent.offsetY
+	      };
+	    }
+	  }, {
 	    key: "loadImage",
 	    value: function loadImage(url) {
 	      return createImageElement(url, !1).then(function (img) {
@@ -27682,7 +27806,7 @@
 	  }]);
 	  return BrowserEnvContribution;
 	}(BaseEnvContribution);
-	BrowserEnvContribution = __decorate$S([injectable(), __metadata$D("design:paramtypes", [])], BrowserEnvContribution);
+	BrowserEnvContribution = __decorate$W([injectable(), __metadata$G("design:paramtypes", [])], BrowserEnvContribution);
 
 	function loadFeishuContributions() {
 	  container.rebind(PickerService).toService(DefaultMathPickerService);
@@ -27691,14 +27815,14 @@
 	  container.rebind(PickerService).toService(DefaultMathPickerService);
 	}
 
-	var __decorate$R = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$V = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	    var d,
 	      c = arguments.length,
 	      r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
 	    return c > 3 && r && Object.defineProperty(target, key, r), r;
 	  },
-	  __metadata$C = undefined && undefined.__metadata || function (k, v) {
+	  __metadata$F = undefined && undefined.__metadata || function (k, v) {
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
 	  };
 	function makeUpCanvas$2(domref, canvasIdLists, canvasMap, freeCanvasIdx, freeCanvasList) {
@@ -27782,7 +27906,7 @@
 	    key: "getRequestAnimationFrame",
 	    value: function getRequestAnimationFrame() {
 	      return function (callback) {
-	        setTimeout(callback, 1e3 / 60, !0);
+	        return setTimeout(callback, 1e3 / 60, !0);
 	      };
 	    }
 	  }, {
@@ -27834,16 +27958,16 @@
 	  }]);
 	  return FeishuEnvContribution;
 	}(BaseEnvContribution);
-	FeishuEnvContribution = __decorate$R([injectable(), __metadata$C("design:paramtypes", [])], FeishuEnvContribution);
+	FeishuEnvContribution = __decorate$V([injectable(), __metadata$F("design:paramtypes", [])], FeishuEnvContribution);
 
-	var __decorate$Q = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$U = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	    var d,
 	      c = arguments.length,
 	      r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
 	    return c > 3 && r && Object.defineProperty(target, key, r), r;
 	  },
-	  __metadata$B = undefined && undefined.__metadata || function (k, v) {
+	  __metadata$E = undefined && undefined.__metadata || function (k, v) {
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
 	  };
 	function makeUpCanvas$1(domref, canvasIdLists, canvasMap, freeCanvasIdx, freeCanvasList, taro, dpr) {
@@ -28007,16 +28131,16 @@
 	  }]);
 	  return TaroEnvContribution;
 	}(BaseEnvContribution);
-	TaroEnvContribution = __decorate$Q([injectable(), __metadata$B("design:paramtypes", [])], TaroEnvContribution);
+	TaroEnvContribution = __decorate$U([injectable(), __metadata$E("design:paramtypes", [])], TaroEnvContribution);
 
-	var __decorate$P = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$T = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	    var d,
 	      c = arguments.length,
 	      r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
 	    return c > 3 && r && Object.defineProperty(target, key, r), r;
 	  },
-	  __metadata$A = undefined && undefined.__metadata || function (k, v) {
+	  __metadata$D = undefined && undefined.__metadata || function (k, v) {
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
 	  };
 	function makeUpCanvas(domref, canvasIdLists, canvasMap, freeCanvasIdx, freeCanvasList) {
@@ -28145,20 +28269,157 @@
 	  }]);
 	  return LynxEnvContribution;
 	}(BaseEnvContribution);
-	LynxEnvContribution = __decorate$P([injectable(), __metadata$A("design:paramtypes", [])], LynxEnvContribution);
+	LynxEnvContribution = __decorate$T([injectable(), __metadata$D("design:paramtypes", [])], LynxEnvContribution);
+
+	var __decorate$S = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	  var d,
+	    c = arguments.length,
+	    r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
+	  if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
+	  return c > 3 && r && Object.defineProperty(target, key, r), r;
+	};
+	var NodeEnvContribution = /*#__PURE__*/function (_BaseEnvContribution) {
+	  _inherits(NodeEnvContribution, _BaseEnvContribution);
+	  var _super = _createSuper(NodeEnvContribution);
+	  function NodeEnvContribution() {
+	    var _this;
+	    _classCallCheck(this, NodeEnvContribution);
+	    _this = _super.apply(this, arguments), _this.type = "node", _this._lastTime = 0, _this.supportEvent = !1;
+	    return _this;
+	  }
+	  _createClass(NodeEnvContribution, [{
+	    key: "configure",
+	    value: function configure(service, pkg) {
+	      service.env === this.type && (service.setActiveEnvContribution(this), this.pkg = pkg);
+	    }
+	  }, {
+	    key: "loadJson",
+	    value: function loadJson(url) {
+	      var jsonPromise = fetch(url).then(function (data) {
+	        return data.json();
+	      });
+	      return jsonPromise.then(function (json) {
+	        return {
+	          data: json,
+	          state: "success"
+	        };
+	      })["catch"](function () {
+	        return {
+	          data: null,
+	          state: "fail"
+	        };
+	      }), jsonPromise;
+	    }
+	  }, {
+	    key: "loadArrayBuffer",
+	    value: function loadArrayBuffer(url) {
+	      return fetch(url).then(function (data) {
+	        return data.arrayBuffer();
+	      }).then(function (arrayBuffer) {
+	        return {
+	          data: arrayBuffer,
+	          loadState: "success"
+	        };
+	      })["catch"](function () {
+	        return {
+	          data: null,
+	          loadState: "fail"
+	        };
+	      });
+	    }
+	  }, {
+	    key: "loadImage",
+	    value: function loadImage(url) {
+	      var loadImage = this.pkg.loadImage;
+	      return loadImage ? loadImage(url).then(function (image) {
+	        return {
+	          loadState: image ? "success" : "fail",
+	          data: image
+	        };
+	      })["catch"](function () {
+	        return {
+	          loadState: "fail",
+	          data: null
+	        };
+	      }) : Promise.reject(new Error("node-canvas loadImage could not be found!"));
+	    }
+	  }, {
+	    key: "loadSvg",
+	    value: function loadSvg(svgStr) {
+	      var Resvg = this.pkg.Resvg;
+	      if (!Resvg) return Promise.reject(new Error("@resvg/resvg-js svgParser could not be found!"));
+	      var pngData = new Resvg(svgStr).render().asPng();
+	      return this.loadImage(pngData);
+	    }
+	  }, {
+	    key: "createCanvas",
+	    value: function createCanvas(params) {
+	      return this.pkg.createCanvas(params.width, params.height);
+	    }
+	  }, {
+	    key: "releaseCanvas",
+	    value: function releaseCanvas(canvas) {}
+	  }, {
+	    key: "getDevicePixelRatio",
+	    value: function getDevicePixelRatio() {
+	      return 0;
+	    }
+	  }, {
+	    key: "getRequestAnimationFrame",
+	    value: function getRequestAnimationFrame() {
+	      return function (callback) {
+	        return setTimeout(callback, 1e3 / 60, !0);
+	      };
+	    }
+	  }, {
+	    key: "getCancelAnimationFrame",
+	    value: function getCancelAnimationFrame() {
+	      return function (h) {
+	        clearTimeout(h);
+	      };
+	    }
+	  }, {
+	    key: "addEventListener",
+	    value: function addEventListener(type, listener, options) {}
+	  }, {
+	    key: "removeEventListener",
+	    value: function removeEventListener(type, listener, options) {}
+	  }, {
+	    key: "getElementById",
+	    value: function getElementById(str) {
+	      return null;
+	    }
+	  }, {
+	    key: "getRootElement",
+	    value: function getRootElement() {
+	      return null;
+	    }
+	  }, {
+	    key: "dispatchEvent",
+	    value: function dispatchEvent(event) {}
+	  }, {
+	    key: "release",
+	    value: function release() {}
+	  }, {
+	    key: "createOffscreenCanvas",
+	    value: function createOffscreenCanvas(params) {}
+	  }]);
+	  return NodeEnvContribution;
+	}(BaseEnvContribution);
+	NodeEnvContribution = __decorate$S([injectable()], NodeEnvContribution);
 
 	var envModules = new ContainerModule(function (bind) {
-	  bind(BrowserEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(BrowserEnvContribution), bind(FeishuEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(FeishuEnvContribution), bind(TaroEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(TaroEnvContribution), bind(LynxEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(LynxEnvContribution), bindContributionProvider(bind, EnvContribution);
+	  bind(BrowserEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(BrowserEnvContribution), bind(FeishuEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(FeishuEnvContribution), bind(TaroEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(TaroEnvContribution), bind(LynxEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(LynxEnvContribution), bind(NodeEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(NodeEnvContribution), bindContributionProvider(bind, EnvContribution);
 	});
 
-	var __decorate$O = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$R = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	    var d,
 	      c = arguments.length,
 	      r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
 	    return c > 3 && r && Object.defineProperty(target, key, r), r;
 	  },
-	  __metadata$z = undefined && undefined.__metadata || function (k, v) {
+	  __metadata$C = undefined && undefined.__metadata || function (k, v) {
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
 	  };
 	var BaseWindowHandlerContribution = /*#__PURE__*/function () {
@@ -28179,19 +28440,19 @@
 	  }]);
 	  return BaseWindowHandlerContribution;
 	}();
-	BaseWindowHandlerContribution = __decorate$O([injectable(), __metadata$z("design:paramtypes", [])], BaseWindowHandlerContribution);
+	BaseWindowHandlerContribution = __decorate$R([injectable(), __metadata$C("design:paramtypes", [])], BaseWindowHandlerContribution);
 
-	var __decorate$N = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$Q = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	    var d,
 	      c = arguments.length,
 	      r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
 	    return c > 3 && r && Object.defineProperty(target, key, r), r;
 	  },
-	  __metadata$y = undefined && undefined.__metadata || function (k, v) {
+	  __metadata$B = undefined && undefined.__metadata || function (k, v) {
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
 	  },
-	  __param$v = undefined && undefined.__param || function (paramIndex, decorator) {
+	  __param$w = undefined && undefined.__param || function (paramIndex, decorator) {
 	    return function (target, key) {
 	      decorator(target, key, paramIndex);
 	    };
@@ -28313,35 +28574,446 @@
 	    }
 	  }, {
 	    key: "addEventListener",
-	    value: function addEventListener(type, listener, options) {
-	      return this.canvas.nativeCanvas.addEventListener(type, listener, options);
+	    value: function addEventListener(type, listener, options) {
+	      return this.canvas.nativeCanvas.addEventListener(type, listener, options);
+	    }
+	  }, {
+	    key: "removeEventListener",
+	    value: function removeEventListener(type, listener, options) {
+	      return this.canvas.nativeCanvas.removeEventListener(type, listener, options);
+	    }
+	  }, {
+	    key: "dispatchEvent",
+	    value: function dispatchEvent(event) {
+	      return this.canvas.nativeCanvas.dispatchEvent(event);
+	    }
+	  }, {
+	    key: "getStyle",
+	    value: function getStyle() {
+	      return this.canvas.nativeCanvas.style;
+	    }
+	  }, {
+	    key: "setStyle",
+	    value: function setStyle(style) {
+	      this.canvas.nativeCanvas.style = style;
+	    }
+	  }, {
+	    key: "getBoundingClientRect",
+	    value: function getBoundingClientRect() {
+	      var c = this.canvas.nativeCanvas,
+	        wh = this.getWH();
+	      return c.parentElement ? this.canvas.nativeCanvas.getBoundingClientRect() : {
+	        x: 0,
+	        y: 0,
+	        width: wh.width,
+	        height: wh.height,
+	        left: 0,
+	        top: 0,
+	        right: 0,
+	        bottom: 0
+	      };
+	    }
+	  }, {
+	    key: "clearViewBox",
+	    value: function clearViewBox(vb, color) {
+	      var context = this.getContext(),
+	        dpr = this.getDpr();
+	      context.nativeContext.save(), context.nativeContext.setTransform(dpr, 0, 0, dpr, 0, 0), context.clearRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1), color && (context.fillStyle = color, context.fillRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1)), context.nativeContext.restore();
+	    }
+	  }]);
+	  return BrowserWindowHandlerContribution;
+	}(BaseWindowHandlerContribution);
+	BrowserWindowHandlerContribution.env = "browser", BrowserWindowHandlerContribution = __decorate$Q([injectable(), __param$w(0, inject(Global)), __metadata$B("design:paramtypes", [Object])], BrowserWindowHandlerContribution);
+
+	var __decorate$P = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	  var d,
+	    c = arguments.length,
+	    r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
+	  if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
+	  return c > 3 && r && Object.defineProperty(target, key, r), r;
+	};
+	var FeishuContext2d = /*#__PURE__*/function (_BrowserContext2d) {
+	  _inherits(FeishuContext2d, _BrowserContext2d);
+	  var _super = _createSuper(FeishuContext2d);
+	  function FeishuContext2d() {
+	    _classCallCheck(this, FeishuContext2d);
+	    return _super.apply(this, arguments);
+	  }
+	  _createClass(FeishuContext2d, [{
+	    key: "globalAlpha",
+	    get: function get() {
+	      return this._globalAlpha;
+	    },
+	    set: function set(ga) {
+	      this.nativeContext.globalAlpha = ga, this._globalAlpha = ga;
+	    }
+	  }, {
+	    key: "getImageData",
+	    value: function getImageData(sx, sy, sw, sh) {
+	      var _this = this;
+	      return new Promise(function (resolve, reject) {
+	        var _a;
+	        try {
+	          tt.canvasGetImageData({
+	            canvasId: null !== (_a = _this.canvas.nativeCanvas.id) && void 0 !== _a ? _a : _this.canvas.id,
+	            x: sx,
+	            y: sy,
+	            width: sw,
+	            height: sh,
+	            success: function success(res) {
+	              resolve(res);
+	            }
+	          });
+	        } catch (err) {
+	          reject(err);
+	        }
+	      });
+	    }
+	  }, {
+	    key: "draw",
+	    value: function draw() {
+	      var _this2 = this;
+	      var _context = this.nativeContext;
+	      this.drawPromise = new Promise(function (resolve) {
+	        _context.draw(!0, function () {
+	          _this2.drawPromise = null, resolve(null);
+	        });
+	      });
+	    }
+	  }]);
+	  return FeishuContext2d;
+	}(BrowserContext2d);
+	FeishuContext2d.env = "feishu", FeishuContext2d = __decorate$P([injectable()], FeishuContext2d);
+
+	var __decorate$O = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	    var d,
+	      c = arguments.length,
+	      r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
+	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
+	    return c > 3 && r && Object.defineProperty(target, key, r), r;
+	  },
+	  __metadata$A = undefined && undefined.__metadata || function (k, v) {
+	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+	  };
+	var DefaultConfig$4 = {
+	  WIDTH: 500,
+	  HEIGHT: 500,
+	  DPR: 1
+	};
+	var FeishuCanvas = /*#__PURE__*/function () {
+	  function FeishuCanvas(params) {
+	    _classCallCheck(this, FeishuCanvas);
+	    var nativeCanvas = params.nativeCanvas,
+	      _params$width = params.width,
+	      width = _params$width === void 0 ? DefaultConfig$4.WIDTH : _params$width,
+	      _params$height = params.height,
+	      height = _params$height === void 0 ? DefaultConfig$4.HEIGHT : _params$height,
+	      _params$dpr = params.dpr,
+	      dpr = _params$dpr === void 0 ? DefaultConfig$4.DPR : _params$dpr,
+	      _ref = nativeCanvas.getBoundingClientRect ? nativeCanvas.getBoundingClientRect() : {
+	        x: 0,
+	        y: 0
+	      },
+	      x = _ref.x,
+	      y = _ref.y;
+	    this._x = x, this._y = y, this._pixelWidth = width * dpr, this._pixelHeight = height * dpr, this._visiable = !1 !== params.visiable, this._displayWidth = width, this._displayHeight = height, this._dpr = dpr, this._nativeCanvas = nativeCanvas, this._context = new FeishuContext2d(this, this._dpr), this._id = nativeCanvas.id;
+	  }
+	  _createClass(FeishuCanvas, [{
+	    key: "id",
+	    get: function get() {
+	      return this._id;
+	    }
+	  }, {
+	    key: "x",
+	    get: function get() {
+	      return this._x;
+	    }
+	  }, {
+	    key: "y",
+	    get: function get() {
+	      return this._y;
+	    }
+	  }, {
+	    key: "nativeCanvas",
+	    get: function get() {
+	      return this._nativeCanvas;
+	    }
+	  }, {
+	    key: "width",
+	    get: function get() {
+	      return this._pixelWidth;
+	    },
+	    set: function set(width) {
+	      this._pixelWidth = width, this._displayWidth = width / (this._dpr || 1);
+	    }
+	  }, {
+	    key: "height",
+	    get: function get() {
+	      return this._pixelHeight;
+	    },
+	    set: function set(height) {
+	      this._pixelHeight = height, this._displayHeight = height / (this._dpr || 1);
+	    }
+	  }, {
+	    key: "displayWidth",
+	    get: function get() {
+	      return this._displayWidth;
+	    }
+	  }, {
+	    key: "displayHeight",
+	    get: function get() {
+	      return this._displayHeight;
+	    }
+	  }, {
+	    key: "getContext",
+	    value: function getContext(str) {
+	      return this._context;
+	    }
+	  }, {
+	    key: "visiable",
+	    get: function get() {
+	      return this._visiable;
+	    },
+	    set: function set(visiable) {
+	      this._visiable = visiable, visiable ? this.show() : this.hide();
+	    }
+	  }, {
+	    key: "dpr",
+	    get: function get() {
+	      return this._dpr;
+	    },
+	    set: function set(dpr) {
+	      this._dpr = dpr;
+	    }
+	  }, {
+	    key: "getNativeCanvas",
+	    value: function getNativeCanvas() {
+	      return this._nativeCanvas;
+	    }
+	  }, {
+	    key: "resetStyle",
+	    value: function resetStyle(params) {}
+	  }, {
+	    key: "applyPosition",
+	    value: function applyPosition() {}
+	  }, {
+	    key: "hide",
+	    value: function hide() {}
+	  }, {
+	    key: "show",
+	    value: function show() {}
+	  }, {
+	    key: "resize",
+	    value: function resize(width, height) {}
+	  }, {
+	    key: "toDataURL",
+	    value: function toDataURL(mimeType, quality) {
+	      return "";
+	    }
+	  }, {
+	    key: "readPixels",
+	    value: function readPixels(x, y, w, h) {
+	      throw new Error("暂未实现");
+	    }
+	  }, {
+	    key: "convertToBlob",
+	    value: function convertToBlob(options) {
+	      throw new Error("暂未实现");
+	    }
+	  }, {
+	    key: "transferToImageBitmap",
+	    value: function transferToImageBitmap() {
+	      throw new Error("暂未实现");
+	    }
+	  }, {
+	    key: "release",
+	    value: function release() {}
+	  }]);
+	  return FeishuCanvas;
+	}();
+	FeishuCanvas.env = "feishu", FeishuCanvas = __decorate$O([injectable(), __metadata$A("design:paramtypes", [Object])], FeishuCanvas);
+
+	var __decorate$N = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	    var d,
+	      c = arguments.length,
+	      r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
+	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
+	    return c > 3 && r && Object.defineProperty(target, key, r), r;
+	  },
+	  __metadata$z = undefined && undefined.__metadata || function (k, v) {
+	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+	  },
+	  __param$v = undefined && undefined.__param || function (paramIndex, decorator) {
+	    return function (target, key) {
+	      decorator(target, key, paramIndex);
+	    };
+	  };
+	var MiniAppEventManager$2 = /*#__PURE__*/function () {
+	  function MiniAppEventManager() {
+	    _classCallCheck(this, MiniAppEventManager);
+	    this.cache = {};
+	  }
+	  _createClass(MiniAppEventManager, [{
+	    key: "addEventListener",
+	    value: function addEventListener(type, func) {
+	      type && func && (this.cache[type] = this.cache[type] || {
+	        listener: []
+	      }, this.cache[type].listener.push(func));
+	    }
+	  }, {
+	    key: "removeEventListener",
+	    value: function removeEventListener(type, func) {
+	      if (!type || !func) return;
+	      if (!this.cache[type]) return;
+	      var index = this.cache[type].listener.findIndex(function (f) {
+	        return f === func;
+	      });
+	      index >= 0 && this.cache[type].listener.splice(index, 1);
+	    }
+	  }, {
+	    key: "cleanEvent",
+	    value: function cleanEvent() {
+	      this.cache = {};
+	    }
+	  }]);
+	  return MiniAppEventManager;
+	}();
+	var FeishuWindowHandlerContribution = /*#__PURE__*/function (_BaseWindowHandlerCon) {
+	  _inherits(FeishuWindowHandlerContribution, _BaseWindowHandlerCon);
+	  var _super = _createSuper(FeishuWindowHandlerContribution);
+	  function FeishuWindowHandlerContribution(global) {
+	    var _this;
+	    _classCallCheck(this, FeishuWindowHandlerContribution);
+	    _this = _super.call(this), _this.global = global, _this.type = "feishu", _this.eventManager = new MiniAppEventManager$2();
+	    return _this;
+	  }
+	  _createClass(FeishuWindowHandlerContribution, [{
+	    key: "container",
+	    get: function get() {
+	      return null;
+	    }
+	  }, {
+	    key: "getTitle",
+	    value: function getTitle() {
+	      return this.canvas.id.toString();
+	    }
+	  }, {
+	    key: "getWH",
+	    value: function getWH() {
+	      return {
+	        width: this.canvas.width / (this.canvas.dpr || 1),
+	        height: this.canvas.height / (this.canvas.dpr || 1)
+	      };
+	    }
+	  }, {
+	    key: "getXY",
+	    value: function getXY() {
+	      return {
+	        x: 0,
+	        y: 0
+	      };
+	    }
+	  }, {
+	    key: "createWindow",
+	    value: function createWindow(params) {
+	      params.canvas ? this.createWindowByCanvas(params) : this.createWindowByConfig(params);
+	    }
+	  }, {
+	    key: "createWindowByConfig",
+	    value: function createWindowByConfig(params) {
+	      var nativeCanvas = this.global.createCanvas({
+	          width: params.width,
+	          height: params.height
+	        }),
+	        options = {
+	          width: params.width,
+	          height: params.height,
+	          dpr: params.dpr,
+	          nativeCanvas: nativeCanvas,
+	          id: Generator.GenAutoIncrementId().toString(),
+	          canvasControled: !1
+	        };
+	      this.canvas = new FeishuCanvas(options);
+	    }
+	  }, {
+	    key: "createWindowByCanvas",
+	    value: function createWindowByCanvas(params) {
+	      var canvas;
+	      if ("string" == typeof params.canvas) {
+	        if (canvas = this.global.getElementById(params.canvas), !canvas) throw new Error("canvasId 参数不正确，请确认canvas存在并插入dom");
+	      } else canvas = params.canvas;
+	      var width = params.width,
+	        height = params.height;
+	      if (null == width || null == height || !params.canvasControled) {
+	        var data = canvas.getBoundingClientRect();
+	        width = data.width, height = data.height;
+	      }
+	      var dpr = params.dpr;
+	      null == dpr && (dpr = canvas.width / width), this.canvas = new FeishuCanvas({
+	        width: width,
+	        height: height,
+	        dpr: dpr,
+	        nativeCanvas: canvas,
+	        canvasControled: params.canvasControled
+	      });
+	    }
+	  }, {
+	    key: "releaseWindow",
+	    value: function releaseWindow() {}
+	  }, {
+	    key: "resizeWindow",
+	    value: function resizeWindow(width, height) {}
+	  }, {
+	    key: "setDpr",
+	    value: function setDpr(dpr) {
+	      this.canvas.dpr = dpr;
+	    }
+	  }, {
+	    key: "getContext",
+	    value: function getContext() {
+	      return this.canvas.getContext();
+	    }
+	  }, {
+	    key: "getNativeHandler",
+	    value: function getNativeHandler() {
+	      return this.canvas;
+	    }
+	  }, {
+	    key: "getDpr",
+	    value: function getDpr() {
+	      return this.canvas.dpr;
+	    }
+	  }, {
+	    key: "addEventListener",
+	    value: function addEventListener(type, listener) {
+	      this.eventManager.addEventListener(type, listener);
 	    }
 	  }, {
 	    key: "removeEventListener",
-	    value: function removeEventListener(type, listener, options) {
-	      return this.canvas.nativeCanvas.removeEventListener(type, listener, options);
+	    value: function removeEventListener(type, listener) {
+	      this.eventManager.removeEventListener(type, listener);
 	    }
 	  }, {
 	    key: "dispatchEvent",
 	    value: function dispatchEvent(event) {
-	      return this.canvas.nativeCanvas.dispatchEvent(event);
+	      var type = event.type;
+	      return !!this.eventManager.cache[type] && (event.changedTouches && event.changedTouches[0] && (event.offsetX = event.changedTouches[0].x, event.changedTouches[0].offsetX = event.changedTouches[0].x, event.changedTouches[0].clientX = event.changedTouches[0].x, event.offsetY = event.changedTouches[0].y, event.changedTouches[0].offsetY = event.changedTouches[0].y, event.changedTouches[0].clientY = event.changedTouches[0].y), event.preventDefault = function () {}, event.stopPropagation = function () {}, this.eventManager.cache[type].listener && this.eventManager.cache[type].listener.forEach(function (f) {
+	        f(event);
+	      }), !0);
 	    }
 	  }, {
 	    key: "getStyle",
 	    value: function getStyle() {
-	      return this.canvas.nativeCanvas.style;
+	      return {};
 	    }
 	  }, {
 	    key: "setStyle",
-	    value: function setStyle(style) {
-	      this.canvas.nativeCanvas.style = style;
-	    }
+	    value: function setStyle(style) {}
 	  }, {
 	    key: "getBoundingClientRect",
 	    value: function getBoundingClientRect() {
-	      var c = this.canvas.nativeCanvas,
-	        wh = this.getWH();
-	      return c.parentElement ? this.canvas.nativeCanvas.getBoundingClientRect() : {
+	      var wh = this.getWH();
+	      return {
 	        x: 0,
 	        y: 0,
 	        width: wh.width,
@@ -28360,9 +29032,9 @@
 	      context.nativeContext.save(), context.nativeContext.setTransform(dpr, 0, 0, dpr, 0, 0), context.clearRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1), color && (context.fillStyle = color, context.fillRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1)), context.nativeContext.restore();
 	    }
 	  }]);
-	  return BrowserWindowHandlerContribution;
+	  return FeishuWindowHandlerContribution;
 	}(BaseWindowHandlerContribution);
-	BrowserWindowHandlerContribution.env = "browser", BrowserWindowHandlerContribution = __decorate$N([injectable(), __param$v(0, inject(Global)), __metadata$y("design:paramtypes", [Object])], BrowserWindowHandlerContribution);
+	FeishuWindowHandlerContribution.env = "feishu", FeishuWindowHandlerContribution = __decorate$N([injectable(), __param$v(0, inject(Global)), __metadata$z("design:paramtypes", [Object])], FeishuWindowHandlerContribution);
 
 	var __decorate$M = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	  var d,
@@ -28371,58 +29043,90 @@
 	  if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
 	  return c > 3 && r && Object.defineProperty(target, key, r), r;
 	};
-	var FeishuContext2d = /*#__PURE__*/function (_BrowserContext2d) {
-	  _inherits(FeishuContext2d, _BrowserContext2d);
-	  var _super = _createSuper(FeishuContext2d);
-	  function FeishuContext2d() {
-	    _classCallCheck(this, FeishuContext2d);
+	var TaroContext2d = /*#__PURE__*/function (_BrowserContext2d) {
+	  _inherits(TaroContext2d, _BrowserContext2d);
+	  var _super = _createSuper(TaroContext2d);
+	  function TaroContext2d() {
+	    _classCallCheck(this, TaroContext2d);
 	    return _super.apply(this, arguments);
 	  }
-	  _createClass(FeishuContext2d, [{
+	  _createClass(TaroContext2d, [{
 	    key: "globalAlpha",
 	    get: function get() {
 	      return this._globalAlpha;
 	    },
 	    set: function set(ga) {
-	      this.nativeContext.globalAlpha = ga, this._globalAlpha = ga;
-	    }
-	  }, {
-	    key: "getImageData",
-	    value: function getImageData(sx, sy, sw, sh) {
-	      var _this = this;
-	      return new Promise(function (resolve, reject) {
-	        var _a;
-	        try {
-	          tt.canvasGetImageData({
-	            canvasId: null !== (_a = _this.canvas.nativeCanvas.id) && void 0 !== _a ? _a : _this.canvas.id,
-	            x: sx,
-	            y: sy,
-	            width: sw,
-	            height: sh,
-	            success: function success(res) {
-	              resolve(res);
-	            }
-	          });
-	        } catch (err) {
-	          reject(err);
-	        }
-	      });
+	      this.nativeContext.setGlobalAlpha(ga), this._globalAlpha = ga;
 	    }
 	  }, {
 	    key: "draw",
 	    value: function draw() {
-	      var _this2 = this;
+	      this.nativeContext.draw();
+	    }
+	  }, {
+	    key: "strokeText",
+	    value: function strokeText(text, x, y) {}
+	  }, {
+	    key: "_setCommonStyle",
+	    value: function _setCommonStyle(params, attribute, offsetX, offsetY, defaultParams) {
 	      var _context = this.nativeContext;
-	      this.drawPromise = new Promise(function (resolve) {
-	        _context.draw(!0, function () {
-	          _this2.drawPromise = null, resolve(null);
-	        });
-	      });
+	      defaultParams || (defaultParams = this.fillAttributes);
+	      var _attribute$fillOpacit = attribute.fillOpacity,
+	        fillOpacity = _attribute$fillOpacit === void 0 ? defaultParams.fillOpacity : _attribute$fillOpacit,
+	        _attribute$opacity = attribute.opacity,
+	        opacity = _attribute$opacity === void 0 ? defaultParams.opacity : _attribute$opacity,
+	        _attribute$fill = attribute.fill,
+	        fill = _attribute$fill === void 0 ? defaultParams.fill : _attribute$fill;
+	      fillOpacity > 1e-12 && opacity > 1e-12 && (_context.setGlobalAlpha(fillOpacity * opacity), _context.setFillStyle(createColor(this, fill, params, offsetX, offsetY)));
+	    }
+	  }, {
+	    key: "_setStrokeStyle",
+	    value: function _setStrokeStyle(params, attribute, offsetX, offsetY, defaultParams) {
+	      var _context = this.nativeContext;
+	      defaultParams || (defaultParams = this.strokeAttributes);
+	      var _attribute$strokeOpac = attribute.strokeOpacity,
+	        strokeOpacity = _attribute$strokeOpac === void 0 ? defaultParams.strokeOpacity : _attribute$strokeOpac,
+	        _attribute$opacity2 = attribute.opacity,
+	        opacity = _attribute$opacity2 === void 0 ? defaultParams.opacity : _attribute$opacity2;
+	      if (strokeOpacity > 1e-12 && opacity > 1e-12) {
+	        var _attribute$lineWidth = attribute.lineWidth,
+	          lineWidth = _attribute$lineWidth === void 0 ? defaultParams.lineWidth : _attribute$lineWidth,
+	          _attribute$stroke = attribute.stroke,
+	          stroke = _attribute$stroke === void 0 ? defaultParams.stroke : _attribute$stroke,
+	          _attribute$lineJoin = attribute.lineJoin,
+	          lineJoin = _attribute$lineJoin === void 0 ? defaultParams.lineJoin : _attribute$lineJoin,
+	          _attribute$lineDash = attribute.lineDash,
+	          lineDash = _attribute$lineDash === void 0 ? defaultParams.lineDash : _attribute$lineDash,
+	          _attribute$lineCap = attribute.lineCap,
+	          lineCap = _attribute$lineCap === void 0 ? defaultParams.lineCap : _attribute$lineCap,
+	          _attribute$miterLimit = attribute.miterLimit,
+	          miterLimit = _attribute$miterLimit === void 0 ? defaultParams.miterLimit : _attribute$miterLimit;
+	        _context.setGlobalAlpha(strokeOpacity * opacity), _context.setLineWidth(getScaledStroke(this, lineWidth, this.dpr)), _context.setStrokeStyle(createColor(this, stroke, params, offsetX, offsetY)), _context.setLineJoin(lineJoin), _context.setLineDash(lineDash), _context.setLineCap(lineCap), _context.setMiterLimit(miterLimit);
+	      }
+	    }
+	  }, {
+	    key: "setTextStyleWithoutAlignBaseline",
+	    value: function setTextStyleWithoutAlignBaseline(params, defaultParams) {
+	      var _a;
+	      var _context = this.nativeContext;
+	      defaultParams || (defaultParams = this.textAttributes), params.font ? _context.font = params.font : _context.font = getContextFont(params, defaultParams), _context.setFontSize(null !== (_a = params.fontSize) && void 0 !== _a ? _a : defaultParams.fontSize);
+	    }
+	  }, {
+	    key: "setTextStyle",
+	    value: function setTextStyle(params, defaultParams) {
+	      var _a, _b;
+	      var _context = this.nativeContext;
+	      defaultParams || (defaultParams = this.textAttributes), params.font ? _context.font = params.font : _context.font = getContextFont(params, defaultParams), _context.setTextAlign(null !== (_a = params.textAlign) && void 0 !== _a ? _a : defaultParams.textAlign), _context.setTextBaseline(null !== (_b = params.textBaseline) && void 0 !== _b ? _b : defaultParams.textBaseline);
+	    }
+	  }, {
+	    key: "createConicGradient",
+	    value: function createConicGradient(x, y, startAngle, endAngle) {
+	      return null;
 	    }
 	  }]);
-	  return FeishuContext2d;
+	  return TaroContext2d;
 	}(BrowserContext2d);
-	FeishuContext2d.env = "feishu", FeishuContext2d = __decorate$M([injectable()], FeishuContext2d);
+	TaroContext2d.env = "taro", TaroContext2d = __decorate$M([injectable()], TaroContext2d);
 
 	var __decorate$L = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	    var d,
@@ -28431,7 +29135,7 @@
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
 	    return c > 3 && r && Object.defineProperty(target, key, r), r;
 	  },
-	  __metadata$x = undefined && undefined.__metadata || function (k, v) {
+	  __metadata$y = undefined && undefined.__metadata || function (k, v) {
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
 	  };
 	var DefaultConfig$3 = {
@@ -28439,9 +29143,9 @@
 	  HEIGHT: 500,
 	  DPR: 1
 	};
-	var FeishuCanvas = /*#__PURE__*/function () {
-	  function FeishuCanvas(params) {
-	    _classCallCheck(this, FeishuCanvas);
+	var TaroCanvas = /*#__PURE__*/function () {
+	  function TaroCanvas(params) {
+	    _classCallCheck(this, TaroCanvas);
 	    var nativeCanvas = params.nativeCanvas,
 	      _params$width = params.width,
 	      width = _params$width === void 0 ? DefaultConfig$3.WIDTH : _params$width,
@@ -28455,9 +29159,9 @@
 	      },
 	      x = _ref.x,
 	      y = _ref.y;
-	    this._x = x, this._y = y, this._pixelWidth = width * dpr, this._pixelHeight = height * dpr, this._visiable = !1 !== params.visiable, this._displayWidth = width, this._displayHeight = height, this._dpr = dpr, this._nativeCanvas = nativeCanvas, this._context = new FeishuContext2d(this, this._dpr), this._id = nativeCanvas.id;
+	    this._x = x, this._y = y, this._pixelWidth = width * dpr, this._pixelHeight = height * dpr, this._visiable = !1 !== params.visiable, this._displayWidth = width, this._displayHeight = height, this._dpr = dpr, this._nativeCanvas = nativeCanvas, this._context = new TaroContext2d(this, this._dpr), this._id = nativeCanvas.id;
 	  }
-	  _createClass(FeishuCanvas, [{
+	  _createClass(TaroCanvas, [{
 	    key: "id",
 	    get: function get() {
 	      return this._id;
@@ -28568,9 +29272,9 @@
 	    key: "release",
 	    value: function release() {}
 	  }]);
-	  return FeishuCanvas;
+	  return TaroCanvas;
 	}();
-	FeishuCanvas.env = "feishu", FeishuCanvas = __decorate$L([injectable(), __metadata$x("design:paramtypes", [Object])], FeishuCanvas);
+	TaroCanvas.env = "taro", TaroCanvas = __decorate$L([injectable(), __metadata$y("design:paramtypes", [Object])], TaroCanvas);
 
 	var __decorate$K = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	    var d,
@@ -28579,7 +29283,7 @@
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
 	    return c > 3 && r && Object.defineProperty(target, key, r), r;
 	  },
-	  __metadata$w = undefined && undefined.__metadata || function (k, v) {
+	  __metadata$x = undefined && undefined.__metadata || function (k, v) {
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
 	  },
 	  __param$u = undefined && undefined.__param || function (paramIndex, decorator) {
@@ -28587,7 +29291,7 @@
 	      decorator(target, key, paramIndex);
 	    };
 	  };
-	var MiniAppEventManager$2 = /*#__PURE__*/function () {
+	var MiniAppEventManager$1 = /*#__PURE__*/function () {
 	  function MiniAppEventManager() {
 	    _classCallCheck(this, MiniAppEventManager);
 	    this.cache = {};
@@ -28617,16 +29321,16 @@
 	  }]);
 	  return MiniAppEventManager;
 	}();
-	var FeishuWindowHandlerContribution = /*#__PURE__*/function (_BaseWindowHandlerCon) {
-	  _inherits(FeishuWindowHandlerContribution, _BaseWindowHandlerCon);
-	  var _super = _createSuper(FeishuWindowHandlerContribution);
-	  function FeishuWindowHandlerContribution(global) {
+	var TaroWindowHandlerContribution = /*#__PURE__*/function (_BaseWindowHandlerCon) {
+	  _inherits(TaroWindowHandlerContribution, _BaseWindowHandlerCon);
+	  var _super = _createSuper(TaroWindowHandlerContribution);
+	  function TaroWindowHandlerContribution(global) {
 	    var _this;
-	    _classCallCheck(this, FeishuWindowHandlerContribution);
-	    _this = _super.call(this), _this.global = global, _this.type = "feishu", _this.eventManager = new MiniAppEventManager$2();
+	    _classCallCheck(this, TaroWindowHandlerContribution);
+	    _this = _super.call(this), _this.global = global, _this.type = "taro", _this.eventManager = new MiniAppEventManager$1();
 	    return _this;
 	  }
-	  _createClass(FeishuWindowHandlerContribution, [{
+	  _createClass(TaroWindowHandlerContribution, [{
 	    key: "container",
 	    get: function get() {
 	      return null;
@@ -28672,7 +29376,7 @@
 	          id: Generator.GenAutoIncrementId().toString(),
 	          canvasControled: !1
 	        };
-	      this.canvas = new FeishuCanvas(options);
+	      this.canvas = new TaroCanvas(options);
 	    }
 	  }, {
 	    key: "createWindowByCanvas",
@@ -28688,7 +29392,7 @@
 	        width = data.width, height = data.height;
 	      }
 	      var dpr = params.dpr;
-	      null == dpr && (dpr = canvas.width / width), this.canvas = new FeishuCanvas({
+	      null == dpr && (dpr = canvas.width / width), this.canvas = new TaroCanvas({
 	        width: width,
 	        height: height,
 	        dpr: dpr,
@@ -28736,7 +29440,17 @@
 	    key: "dispatchEvent",
 	    value: function dispatchEvent(event) {
 	      var type = event.type;
-	      return !!this.eventManager.cache[type] && (event.changedTouches && event.changedTouches[0] && (event.offsetX = event.changedTouches[0].x, event.changedTouches[0].offsetX = event.changedTouches[0].x, event.changedTouches[0].clientX = event.changedTouches[0].x, event.offsetY = event.changedTouches[0].y, event.changedTouches[0].offsetY = event.changedTouches[0].y, event.changedTouches[0].clientY = event.changedTouches[0].y), event.preventDefault = function () {}, event.stopPropagation = function () {}, this.eventManager.cache[type].listener && this.eventManager.cache[type].listener.forEach(function (f) {
+	      return !!this.eventManager.cache[type] && (event.changedTouches.length > 0 && (event.changedTouches.forEach(function (d, i) {
+	        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), event.touches.length > 0 && event.touches.forEach(function (d, i) {
+	        event.touches[i] = Object.assign(Object.assign({}, event.touches[i]), {
+	          offsetX: d.x,
+	          offsetY: d.y
+	        });
+	      }), event.preventDefault = function () {}, event.stopPropagation = function () {}, this.eventManager.cache[type].listener && this.eventManager.cache[type].listener.forEach(function (f) {
 	        f(event);
 	      }), !0);
 	    }
@@ -28771,9 +29485,9 @@
 	      context.nativeContext.save(), context.nativeContext.setTransform(dpr, 0, 0, dpr, 0, 0), context.clearRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1), color && (context.fillStyle = color, context.fillRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1)), context.nativeContext.restore();
 	    }
 	  }]);
-	  return FeishuWindowHandlerContribution;
+	  return TaroWindowHandlerContribution;
 	}(BaseWindowHandlerContribution);
-	FeishuWindowHandlerContribution.env = "feishu", FeishuWindowHandlerContribution = __decorate$K([injectable(), __param$u(0, inject(Global)), __metadata$w("design:paramtypes", [Object])], FeishuWindowHandlerContribution);
+	TaroWindowHandlerContribution.env = "taro", TaroWindowHandlerContribution = __decorate$K([injectable(), __param$u(0, inject(Global)), __metadata$x("design:paramtypes", [Object])], TaroWindowHandlerContribution);
 
 	var __decorate$J = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	  var d,
@@ -28782,90 +29496,36 @@
 	  if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
 	  return c > 3 && r && Object.defineProperty(target, key, r), r;
 	};
-	var TaroContext2d = /*#__PURE__*/function (_BrowserContext2d) {
-	  _inherits(TaroContext2d, _BrowserContext2d);
-	  var _super = _createSuper(TaroContext2d);
-	  function TaroContext2d() {
-	    _classCallCheck(this, TaroContext2d);
+	var LynxContext2d = /*#__PURE__*/function (_BrowserContext2d) {
+	  _inherits(LynxContext2d, _BrowserContext2d);
+	  var _super = _createSuper(LynxContext2d);
+	  function LynxContext2d() {
+	    _classCallCheck(this, LynxContext2d);
 	    return _super.apply(this, arguments);
 	  }
-	  _createClass(TaroContext2d, [{
+	  _createClass(LynxContext2d, [{
 	    key: "globalAlpha",
 	    get: function get() {
 	      return this._globalAlpha;
 	    },
 	    set: function set(ga) {
-	      this.nativeContext.setGlobalAlpha(ga), this._globalAlpha = ga;
+	      this.nativeContext.globalAlpha = ga, this._globalAlpha = ga;
 	    }
 	  }, {
 	    key: "draw",
 	    value: function draw() {
-	      this.nativeContext.draw();
-	    }
-	  }, {
-	    key: "strokeText",
-	    value: function strokeText(text, x, y) {}
-	  }, {
-	    key: "_setCommonStyle",
-	    value: function _setCommonStyle(params, attribute, offsetX, offsetY, defaultParams) {
-	      var _context = this.nativeContext;
-	      defaultParams || (defaultParams = this.fillAttributes);
-	      var _attribute$fillOpacit = attribute.fillOpacity,
-	        fillOpacity = _attribute$fillOpacit === void 0 ? defaultParams.fillOpacity : _attribute$fillOpacit,
-	        _attribute$opacity = attribute.opacity,
-	        opacity = _attribute$opacity === void 0 ? defaultParams.opacity : _attribute$opacity,
-	        _attribute$fill = attribute.fill,
-	        fill = _attribute$fill === void 0 ? defaultParams.fill : _attribute$fill;
-	      fillOpacity > 1e-12 && opacity > 1e-12 && (_context.setGlobalAlpha(fillOpacity * opacity), _context.setFillStyle(createColor(this, fill, params)));
-	    }
-	  }, {
-	    key: "_setStrokeStyle",
-	    value: function _setStrokeStyle(params, attribute, offsetX, offsetY, defaultParams) {
-	      var _context = this.nativeContext;
-	      defaultParams || (defaultParams = this.strokeAttributes);
-	      var _attribute$strokeOpac = attribute.strokeOpacity,
-	        strokeOpacity = _attribute$strokeOpac === void 0 ? defaultParams.strokeOpacity : _attribute$strokeOpac,
-	        _attribute$opacity2 = attribute.opacity,
-	        opacity = _attribute$opacity2 === void 0 ? defaultParams.opacity : _attribute$opacity2;
-	      if (strokeOpacity > 1e-12 && opacity > 1e-12) {
-	        var _attribute$lineWidth = attribute.lineWidth,
-	          lineWidth = _attribute$lineWidth === void 0 ? defaultParams.lineWidth : _attribute$lineWidth,
-	          _attribute$stroke = attribute.stroke,
-	          stroke = _attribute$stroke === void 0 ? defaultParams.stroke : _attribute$stroke,
-	          _attribute$lineJoin = attribute.lineJoin,
-	          lineJoin = _attribute$lineJoin === void 0 ? defaultParams.lineJoin : _attribute$lineJoin,
-	          _attribute$lineDash = attribute.lineDash,
-	          lineDash = _attribute$lineDash === void 0 ? defaultParams.lineDash : _attribute$lineDash,
-	          _attribute$lineCap = attribute.lineCap,
-	          lineCap = _attribute$lineCap === void 0 ? defaultParams.lineCap : _attribute$lineCap,
-	          _attribute$miterLimit = attribute.miterLimit,
-	          miterLimit = _attribute$miterLimit === void 0 ? defaultParams.miterLimit : _attribute$miterLimit;
-	        _context.setGlobalAlpha(strokeOpacity * opacity), _context.setLineWidth(getScaledStroke(this, lineWidth, this.dpr)), _context.setStrokeStyle(createColor(this, stroke, params)), _context.setLineJoin(lineJoin), _context.setLineDash(lineDash), _context.setLineCap(lineCap), _context.setMiterLimit(miterLimit);
-	      }
-	    }
-	  }, {
-	    key: "setTextStyleWithoutAlignBaseline",
-	    value: function setTextStyleWithoutAlignBaseline(params, defaultParams) {
-	      var _a;
-	      var _context = this.nativeContext;
-	      defaultParams || (defaultParams = this.textAttributes), params.font ? _context.font = params.font : _context.font = getContextFont(params, defaultParams), _context.setFontSize(null !== (_a = params.fontSize) && void 0 !== _a ? _a : defaultParams.fontSize);
-	    }
-	  }, {
-	    key: "setTextStyle",
-	    value: function setTextStyle(params, defaultParams) {
-	      var _a, _b;
+	      var _this = this;
 	      var _context = this.nativeContext;
-	      defaultParams || (defaultParams = this.textAttributes), params.font ? _context.font = params.font : _context.font = getContextFont(params, defaultParams), _context.setTextAlign(null !== (_a = params.textAlign) && void 0 !== _a ? _a : defaultParams.textAlign), _context.setTextBaseline(null !== (_b = params.textBaseline) && void 0 !== _b ? _b : defaultParams.textBaseline);
-	    }
-	  }, {
-	    key: "createConicGradient",
-	    value: function createConicGradient(x, y, startAngle, endAngle) {
-	      return null;
+	      this.drawPromise = new Promise(function (resolve) {
+	        _context.draw(!0, function () {
+	          _this.drawPromise = null, resolve(null);
+	        });
+	      });
 	    }
 	  }]);
-	  return TaroContext2d;
+	  return LynxContext2d;
 	}(BrowserContext2d);
-	TaroContext2d.env = "taro", TaroContext2d = __decorate$J([injectable()], TaroContext2d);
+	LynxContext2d.env = "lynx", LynxContext2d = __decorate$J([injectable()], LynxContext2d);
 
 	var __decorate$I = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	    var d,
@@ -28874,7 +29534,7 @@
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
 	    return c > 3 && r && Object.defineProperty(target, key, r), r;
 	  },
-	  __metadata$v = undefined && undefined.__metadata || function (k, v) {
+	  __metadata$w = undefined && undefined.__metadata || function (k, v) {
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
 	  };
 	var DefaultConfig$2 = {
@@ -28882,9 +29542,9 @@
 	  HEIGHT: 500,
 	  DPR: 1
 	};
-	var TaroCanvas = /*#__PURE__*/function () {
-	  function TaroCanvas(params) {
-	    _classCallCheck(this, TaroCanvas);
+	var LynxCanvas = /*#__PURE__*/function () {
+	  function LynxCanvas(params) {
+	    _classCallCheck(this, LynxCanvas);
 	    var nativeCanvas = params.nativeCanvas,
 	      _params$width = params.width,
 	      width = _params$width === void 0 ? DefaultConfig$2.WIDTH : _params$width,
@@ -28898,9 +29558,9 @@
 	      },
 	      x = _ref.x,
 	      y = _ref.y;
-	    this._x = x, this._y = y, this._pixelWidth = width * dpr, this._pixelHeight = height * dpr, this._visiable = !1 !== params.visiable, this._displayWidth = width, this._displayHeight = height, this._dpr = dpr, this._nativeCanvas = nativeCanvas, this._context = new TaroContext2d(this, this._dpr), this._id = nativeCanvas.id;
+	    this._x = x, this._y = y, this._pixelWidth = width * dpr, this._pixelHeight = height * dpr, this._visiable = !1 !== params.visiable, this._displayWidth = width, this._displayHeight = height, this._dpr = dpr, this._nativeCanvas = nativeCanvas, this._context = new LynxContext2d(this, this._dpr), this._id = nativeCanvas.id;
 	  }
-	  _createClass(TaroCanvas, [{
+	  _createClass(LynxCanvas, [{
 	    key: "id",
 	    get: function get() {
 	      return this._id;
@@ -29011,9 +29671,9 @@
 	    key: "release",
 	    value: function release() {}
 	  }]);
-	  return TaroCanvas;
+	  return LynxCanvas;
 	}();
-	TaroCanvas.env = "taro", TaroCanvas = __decorate$I([injectable(), __metadata$v("design:paramtypes", [Object])], TaroCanvas);
+	LynxCanvas.env = "lynx", LynxCanvas = __decorate$I([injectable(), __metadata$w("design:paramtypes", [Object])], LynxCanvas);
 
 	var __decorate$H = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	    var d,
@@ -29022,7 +29682,7 @@
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
 	    return c > 3 && r && Object.defineProperty(target, key, r), r;
 	  },
-	  __metadata$u = undefined && undefined.__metadata || function (k, v) {
+	  __metadata$v = undefined && undefined.__metadata || function (k, v) {
 	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
 	  },
 	  __param$t = undefined && undefined.__param || function (paramIndex, decorator) {
@@ -29030,7 +29690,7 @@
 	      decorator(target, key, paramIndex);
 	    };
 	  };
-	var MiniAppEventManager$1 = /*#__PURE__*/function () {
+	var MiniAppEventManager = /*#__PURE__*/function () {
 	  function MiniAppEventManager() {
 	    _classCallCheck(this, MiniAppEventManager);
 	    this.cache = {};
@@ -29060,16 +29720,16 @@
 	  }]);
 	  return MiniAppEventManager;
 	}();
-	var TaroWindowHandlerContribution = /*#__PURE__*/function (_BaseWindowHandlerCon) {
-	  _inherits(TaroWindowHandlerContribution, _BaseWindowHandlerCon);
-	  var _super = _createSuper(TaroWindowHandlerContribution);
-	  function TaroWindowHandlerContribution(global) {
+	var LynxWindowHandlerContribution = /*#__PURE__*/function (_BaseWindowHandlerCon) {
+	  _inherits(LynxWindowHandlerContribution, _BaseWindowHandlerCon);
+	  var _super = _createSuper(LynxWindowHandlerContribution);
+	  function LynxWindowHandlerContribution(global) {
 	    var _this;
-	    _classCallCheck(this, TaroWindowHandlerContribution);
-	    _this = _super.call(this), _this.global = global, _this.type = "taro", _this.eventManager = new MiniAppEventManager$1();
+	    _classCallCheck(this, LynxWindowHandlerContribution);
+	    _this = _super.call(this), _this.global = global, _this.type = "lynx", _this.eventManager = new MiniAppEventManager();
 	    return _this;
 	  }
-	  _createClass(TaroWindowHandlerContribution, [{
+	  _createClass(LynxWindowHandlerContribution, [{
 	    key: "container",
 	    get: function get() {
 	      return null;
@@ -29115,7 +29775,7 @@
 	          id: Generator.GenAutoIncrementId().toString(),
 	          canvasControled: !1
 	        };
-	      this.canvas = new TaroCanvas(options);
+	      this.canvas = new LynxCanvas(options);
 	    }
 	  }, {
 	    key: "createWindowByCanvas",
@@ -29131,7 +29791,7 @@
 	        width = data.width, height = data.height;
 	      }
 	      var dpr = params.dpr;
-	      null == dpr && (dpr = canvas.width / width), this.canvas = new TaroCanvas({
+	      null == dpr && (dpr = canvas.width / width), this.canvas = new LynxCanvas({
 	        width: width,
 	        height: height,
 	        dpr: dpr,
@@ -29179,17 +29839,7 @@
 	    key: "dispatchEvent",
 	    value: function dispatchEvent(event) {
 	      var type = event.type;
-	      return !!this.eventManager.cache[type] && (event.changedTouches.length > 0 && (event.changedTouches.forEach(function (d, i) {
-	        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), event.touches.length > 0 && event.touches.forEach(function (d, i) {
-	        event.touches[i] = Object.assign(Object.assign({}, event.touches[i]), {
-	          offsetX: d.x,
-	          offsetY: d.y
-	        });
-	      }), event.preventDefault = function () {}, event.stopPropagation = function () {}, this.eventManager.cache[type].listener && this.eventManager.cache[type].listener.forEach(function (f) {
+	      return !!this.eventManager.cache[type] && (event.changedTouches && event.changedTouches[0] && (event.offsetX = event.changedTouches[0].x, event.changedTouches[0].offsetX = event.changedTouches[0].x, event.changedTouches[0].clientX = event.changedTouches[0].x, event.offsetY = event.changedTouches[0].y, event.changedTouches[0].offsetY = event.changedTouches[0].y, event.changedTouches[0].clientY = event.changedTouches[0].y), event.preventDefault = function () {}, event.stopPropagation = function () {}, this.eventManager.cache[type].listener && this.eventManager.cache[type].listener.forEach(function (f) {
 	        f(event);
 	      }), !0);
 	    }
@@ -29224,47 +29874,40 @@
 	      context.nativeContext.save(), context.nativeContext.setTransform(dpr, 0, 0, dpr, 0, 0), context.clearRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1), color && (context.fillStyle = color, context.fillRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1)), context.nativeContext.restore();
 	    }
 	  }]);
-	  return TaroWindowHandlerContribution;
+	  return LynxWindowHandlerContribution;
 	}(BaseWindowHandlerContribution);
-	TaroWindowHandlerContribution.env = "taro", TaroWindowHandlerContribution = __decorate$H([injectable(), __param$t(0, inject(Global)), __metadata$u("design:paramtypes", [Object])], TaroWindowHandlerContribution);
+	LynxWindowHandlerContribution.env = "lynx", LynxWindowHandlerContribution = __decorate$H([injectable(), __param$t(0, inject(Global)), __metadata$v("design:paramtypes", [Object])], LynxWindowHandlerContribution);
 
 	var __decorate$G = undefined && undefined.__decorate || function (decorators, target, key, desc) {
-	  var d,
-	    c = arguments.length,
-	    r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
-	  if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
-	  return c > 3 && r && Object.defineProperty(target, key, r), r;
-	};
-	var LynxContext2d = /*#__PURE__*/function (_BrowserContext2d) {
-	  _inherits(LynxContext2d, _BrowserContext2d);
-	  var _super = _createSuper(LynxContext2d);
-	  function LynxContext2d() {
-	    _classCallCheck(this, LynxContext2d);
-	    return _super.apply(this, arguments);
+	    var d,
+	      c = arguments.length,
+	      r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
+	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
+	    return c > 3 && r && Object.defineProperty(target, key, r), r;
+	  },
+	  __metadata$u = undefined && undefined.__metadata || function (k, v) {
+	    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+	  };
+	new Matrix(1, 0, 0, 1, 0, 0);
+	var NodeContext2d = /*#__PURE__*/function (_BrowserContext2d) {
+	  _inherits(NodeContext2d, _BrowserContext2d);
+	  var _super = _createSuper(NodeContext2d);
+	  function NodeContext2d(canvas, dpr) {
+	    var _this;
+	    _classCallCheck(this, NodeContext2d);
+	    _this = _super.call(this, canvas, dpr);
+	    var context = canvas.nativeCanvas.getContext("2d");
+	    if (!context) throw new Error("发生错误，获取2d上下文失败");
+	    _this.nativeContext = context, _this.canvas = canvas, _this.matrix = new Matrix(1, 0, 0, 1, 0, 0), _this.stack = [], _this.dpr = null != dpr ? dpr : 1;
+	    return _this;
 	  }
-	  _createClass(LynxContext2d, [{
-	    key: "globalAlpha",
-	    get: function get() {
-	      return this._globalAlpha;
-	    },
-	    set: function set(ga) {
-	      this.nativeContext.globalAlpha = ga, this._globalAlpha = ga;
-	    }
-	  }, {
-	    key: "draw",
-	    value: function draw() {
-	      var _this = this;
-	      var _context = this.nativeContext;
-	      this.drawPromise = new Promise(function (resolve) {
-	        _context.draw(!0, function () {
-	          _this.drawPromise = null, resolve(null);
-	        });
-	      });
-	    }
+	  _createClass(NodeContext2d, [{
+	    key: "release",
+	    value: function release() {}
 	  }]);
-	  return LynxContext2d;
+	  return NodeContext2d;
 	}(BrowserContext2d);
-	LynxContext2d.env = "lynx", LynxContext2d = __decorate$G([injectable()], LynxContext2d);
+	NodeContext2d.env = "node", NodeContext2d = __decorate$G([injectable(), __metadata$u("design:paramtypes", [Object, Number])], NodeContext2d);
 
 	var __decorate$F = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	    var d,
@@ -29281,25 +29924,21 @@
 	  HEIGHT: 500,
 	  DPR: 1
 	};
-	var LynxCanvas = /*#__PURE__*/function () {
-	  function LynxCanvas(params) {
-	    _classCallCheck(this, LynxCanvas);
+	var NodeCanvas = /*#__PURE__*/function () {
+	  function NodeCanvas(params) {
+	    _classCallCheck(this, NodeCanvas);
 	    var nativeCanvas = params.nativeCanvas,
 	      _params$width = params.width,
 	      width = _params$width === void 0 ? DefaultConfig$1.WIDTH : _params$width,
 	      _params$height = params.height,
 	      height = _params$height === void 0 ? DefaultConfig$1.HEIGHT : _params$height,
+	      _params$canvasControl = params.canvasControled,
+	      canvasControled = _params$canvasControl === void 0 ? !0 : _params$canvasControl,
 	      _params$dpr = params.dpr,
-	      dpr = _params$dpr === void 0 ? DefaultConfig$1.DPR : _params$dpr,
-	      _ref = nativeCanvas.getBoundingClientRect ? nativeCanvas.getBoundingClientRect() : {
-	        x: 0,
-	        y: 0
-	      },
-	      x = _ref.x,
-	      y = _ref.y;
-	    this._x = x, this._y = y, this._pixelWidth = width * dpr, this._pixelHeight = height * dpr, this._visiable = !1 !== params.visiable, this._displayWidth = width, this._displayHeight = height, this._dpr = dpr, this._nativeCanvas = nativeCanvas, this._context = new LynxContext2d(this, this._dpr), this._id = nativeCanvas.id;
+	      dpr = _params$dpr === void 0 ? DefaultConfig$1.DPR : _params$dpr;
+	    this._visiable = !1 !== params.visiable, this.controled = canvasControled, this._pixelWidth = width * dpr, this._pixelHeight = height * dpr, this._displayWidth = width, this._displayHeight = height, this._nativeCanvas = nativeCanvas, this._context = new NodeContext2d(this, params.dpr), this._id = nativeCanvas.id, this._dpr = dpr;
 	  }
-	  _createClass(LynxCanvas, [{
+	  _createClass(NodeCanvas, [{
 	    key: "id",
 	    get: function get() {
 	      return this._id;
@@ -29307,12 +29946,12 @@
 	  }, {
 	    key: "x",
 	    get: function get() {
-	      return this._x;
+	      return 0;
 	    }
 	  }, {
 	    key: "y",
 	    get: function get() {
-	      return this._y;
+	      return 0;
 	    }
 	  }, {
 	    key: "nativeCanvas",
@@ -29328,22 +29967,22 @@
 	      this._pixelWidth = width, this._displayWidth = width / (this._dpr || 1);
 	    }
 	  }, {
-	    key: "height",
+	    key: "displayWidth",
 	    get: function get() {
-	      return this._pixelHeight;
-	    },
-	    set: function set(height) {
-	      this._pixelHeight = height, this._displayHeight = height / (this._dpr || 1);
+	      return this._pixelWidth / this._dpr;
 	    }
 	  }, {
-	    key: "displayWidth",
+	    key: "displayHeight",
 	    get: function get() {
-	      return this._displayWidth;
+	      return this._pixelHeight / this._dpr;
 	    }
 	  }, {
-	    key: "displayHeight",
+	    key: "height",
 	    get: function get() {
-	      return this._displayHeight;
+	      return this._pixelHeight;
+	    },
+	    set: function set(height) {
+	      this._pixelHeight = height, this._displayHeight = height / (this._dpr || 1);
 	    }
 	  }, {
 	    key: "getContext",
@@ -29364,8 +30003,11 @@
 	      return this._dpr;
 	    },
 	    set: function set(dpr) {
-	      this._dpr = dpr;
+	      this._dpr = dpr, this.resize(this.width, this.height);
 	    }
+	  }, {
+	    key: "applyPosition",
+	    value: function applyPosition() {}
 	  }, {
 	    key: "getNativeCanvas",
 	    value: function getNativeCanvas() {
@@ -29374,9 +30016,6 @@
 	  }, {
 	    key: "resetStyle",
 	    value: function resetStyle(params) {}
-	  }, {
-	    key: "applyPosition",
-	    value: function applyPosition() {}
 	  }, {
 	    key: "hide",
 	    value: function hide() {}
@@ -29385,7 +30024,9 @@
 	    value: function show() {}
 	  }, {
 	    key: "resize",
-	    value: function resize(width, height) {}
+	    value: function resize(width, height) {
+	      this._pixelWidth = width * this._dpr, this._pixelHeight = height * this._dpr, this._displayWidth = width, this._displayHeight = height, this._nativeCanvas && (this._nativeCanvas.width = this._pixelWidth, this._nativeCanvas.height = this._pixelHeight);
+	    }
 	  }, {
 	    key: "toDataURL",
 	    value: function toDataURL(mimeType, quality) {
@@ -29394,7 +30035,7 @@
 	  }, {
 	    key: "readPixels",
 	    value: function readPixels(x, y, w, h) {
-	      throw new Error("暂未实现");
+	      return this._context.getImageData(x, y, w, h);
 	    }
 	  }, {
 	    key: "convertToBlob",
@@ -29408,11 +30049,13 @@
 	    }
 	  }, {
 	    key: "release",
-	    value: function release() {}
+	    value: function release() {
+	      throw new Error("暂不支持release");
+	    }
 	  }]);
-	  return LynxCanvas;
+	  return NodeCanvas;
 	}();
-	LynxCanvas.env = "lynx", LynxCanvas = __decorate$F([injectable(), __metadata$t("design:paramtypes", [Object])], LynxCanvas);
+	NodeCanvas.env = "node", NodeCanvas = __decorate$F([injectable(), __metadata$t("design:paramtypes", [Object])], NodeCanvas);
 
 	var __decorate$E = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	    var d,
@@ -29429,46 +30072,16 @@
 	      decorator(target, key, paramIndex);
 	    };
 	  };
-	var MiniAppEventManager = /*#__PURE__*/function () {
-	  function MiniAppEventManager() {
-	    _classCallCheck(this, MiniAppEventManager);
-	    this.cache = {};
-	  }
-	  _createClass(MiniAppEventManager, [{
-	    key: "addEventListener",
-	    value: function addEventListener(type, func) {
-	      type && func && (this.cache[type] = this.cache[type] || {
-	        listener: []
-	      }, this.cache[type].listener.push(func));
-	    }
-	  }, {
-	    key: "removeEventListener",
-	    value: function removeEventListener(type, func) {
-	      if (!type || !func) return;
-	      if (!this.cache[type]) return;
-	      var index = this.cache[type].listener.findIndex(function (f) {
-	        return f === func;
-	      });
-	      index >= 0 && this.cache[type].listener.splice(index, 1);
-	    }
-	  }, {
-	    key: "cleanEvent",
-	    value: function cleanEvent() {
-	      this.cache = {};
-	    }
-	  }]);
-	  return MiniAppEventManager;
-	}();
-	var LynxWindowHandlerContribution = /*#__PURE__*/function (_BaseWindowHandlerCon) {
-	  _inherits(LynxWindowHandlerContribution, _BaseWindowHandlerCon);
-	  var _super = _createSuper(LynxWindowHandlerContribution);
-	  function LynxWindowHandlerContribution(global) {
+	var NodeWindowHandlerContribution = /*#__PURE__*/function (_BaseWindowHandlerCon) {
+	  _inherits(NodeWindowHandlerContribution, _BaseWindowHandlerCon);
+	  var _super = _createSuper(NodeWindowHandlerContribution);
+	  function NodeWindowHandlerContribution(global) {
 	    var _this;
-	    _classCallCheck(this, LynxWindowHandlerContribution);
-	    _this = _super.call(this), _this.global = global, _this.type = "lynx", _this.eventManager = new MiniAppEventManager();
+	    _classCallCheck(this, NodeWindowHandlerContribution);
+	    _this = _super.call(this), _this.global = global, _this.type = "node";
 	    return _this;
 	  }
-	  _createClass(LynxWindowHandlerContribution, [{
+	  _createClass(NodeWindowHandlerContribution, [{
 	    key: "container",
 	    get: function get() {
 	      return null;
@@ -29476,14 +30089,14 @@
 	  }, {
 	    key: "getTitle",
 	    value: function getTitle() {
-	      return this.canvas.id.toString();
+	      return "";
 	    }
 	  }, {
 	    key: "getWH",
 	    value: function getWH() {
 	      return {
-	        width: this.canvas.width / (this.canvas.dpr || 1),
-	        height: this.canvas.height / (this.canvas.dpr || 1)
+	        width: this.canvas.displayWidth,
+	        height: this.canvas.displayHeight
 	      };
 	    }
 	  }, {
@@ -29512,38 +30125,34 @@
 	          dpr: params.dpr,
 	          nativeCanvas: nativeCanvas,
 	          id: Generator.GenAutoIncrementId().toString(),
-	          canvasControled: !1
+	          canvasControled: !0
 	        };
-	      this.canvas = new LynxCanvas(options);
+	      this.canvas = new NodeCanvas(options);
 	    }
 	  }, {
 	    key: "createWindowByCanvas",
 	    value: function createWindowByCanvas(params) {
-	      var canvas;
-	      if ("string" == typeof params.canvas) {
-	        if (canvas = this.global.getElementById(params.canvas), !canvas) throw new Error("canvasId 参数不正确，请确认canvas存在并插入dom");
-	      } else canvas = params.canvas;
+	      var canvas = params.canvas;
 	      var width = params.width,
 	        height = params.height;
-	      if (null == width || null == height || !params.canvasControled) {
-	        var data = canvas.getBoundingClientRect();
-	        width = data.width, height = data.height;
-	      }
-	      var dpr = params.dpr;
-	      null == dpr && (dpr = canvas.width / width), this.canvas = new LynxCanvas({
+	      null != width && null != height && params.canvasControled || (width = canvas.width, height = canvas.height), this.canvas = new NodeCanvas({
 	        width: width,
 	        height: height,
-	        dpr: dpr,
+	        dpr: 1,
 	        nativeCanvas: canvas,
 	        canvasControled: params.canvasControled
 	      });
 	    }
 	  }, {
 	    key: "releaseWindow",
-	    value: function releaseWindow() {}
+	    value: function releaseWindow() {
+	      this.canvas.release();
+	    }
 	  }, {
 	    key: "resizeWindow",
-	    value: function resizeWindow(width, height) {}
+	    value: function resizeWindow(width, height) {
+	      this.canvas.resize(width, height);
+	    }
 	  }, {
 	    key: "setDpr",
 	    value: function setDpr(dpr) {
@@ -29565,57 +30174,40 @@
 	      return this.canvas.dpr;
 	    }
 	  }, {
-	    key: "addEventListener",
-	    value: function addEventListener(type, listener) {
-	      this.eventManager.addEventListener(type, listener);
+	    key: "getImageBuffer",
+	    value: function getImageBuffer() {
+	      var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "image/png";
+	      return this.canvas.nativeCanvas.toBuffer(type);
 	    }
 	  }, {
-	    key: "removeEventListener",
-	    value: function removeEventListener(type, listener) {
-	      this.eventManager.removeEventListener(type, listener);
-	    }
+	    key: "addEventListener",
+	    value: function addEventListener(type, listener, options) {}
 	  }, {
 	    key: "dispatchEvent",
 	    value: function dispatchEvent(event) {
-	      var type = event.type;
-	      return !!this.eventManager.cache[type] && (event.changedTouches && event.changedTouches[0] && (event.offsetX = event.changedTouches[0].x, event.changedTouches[0].offsetX = event.changedTouches[0].x, event.changedTouches[0].clientX = event.changedTouches[0].x, event.offsetY = event.changedTouches[0].y, event.changedTouches[0].offsetY = event.changedTouches[0].y, event.changedTouches[0].clientY = event.changedTouches[0].y), event.preventDefault = function () {}, event.stopPropagation = function () {}, this.eventManager.cache[type].listener && this.eventManager.cache[type].listener.forEach(function (f) {
-	        f(event);
-	      }), !0);
+	      return !0;
 	    }
+	  }, {
+	    key: "removeEventListener",
+	    value: function removeEventListener(type, listener, options) {}
 	  }, {
 	    key: "getStyle",
-	    value: function getStyle() {
-	      return {};
-	    }
+	    value: function getStyle() {}
 	  }, {
 	    key: "setStyle",
 	    value: function setStyle(style) {}
 	  }, {
 	    key: "getBoundingClientRect",
 	    value: function getBoundingClientRect() {
-	      var wh = this.getWH();
-	      return {
-	        x: 0,
-	        y: 0,
-	        width: wh.width,
-	        height: wh.height,
-	        left: 0,
-	        top: 0,
-	        right: 0,
-	        bottom: 0
-	      };
+	      return null;
 	    }
 	  }, {
 	    key: "clearViewBox",
-	    value: function clearViewBox(vb, color) {
-	      var context = this.getContext(),
-	        dpr = this.getDpr();
-	      context.nativeContext.save(), context.nativeContext.setTransform(dpr, 0, 0, dpr, 0, 0), context.clearRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1), color && (context.fillStyle = color, context.fillRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1)), context.nativeContext.restore();
-	    }
+	    value: function clearViewBox(vb, color) {}
 	  }]);
-	  return LynxWindowHandlerContribution;
+	  return NodeWindowHandlerContribution;
 	}(BaseWindowHandlerContribution);
-	LynxWindowHandlerContribution.env = "lynx", LynxWindowHandlerContribution = __decorate$E([injectable(), __param$s(0, inject(Global)), __metadata$s("design:paramtypes", [Object])], LynxWindowHandlerContribution);
+	NodeWindowHandlerContribution.env = "node", NodeWindowHandlerContribution = __decorate$E([injectable(), __param$s(0, inject(Global)), __metadata$s("design:paramtypes", [Object])], NodeWindowHandlerContribution);
 
 	var windowModules = new ContainerModule(function (bind) {
 	  bind(BrowserWindowHandlerContribution).toSelf(), bind(WindowHandlerContribution).toDynamicValue(function (ctx) {
@@ -29626,7 +30218,9 @@
 	    return ctx.container.get(TaroWindowHandlerContribution);
 	  }).whenTargetNamed(TaroWindowHandlerContribution.env), bind(LynxWindowHandlerContribution).toSelf(), bind(WindowHandlerContribution).toDynamicValue(function (ctx) {
 	    return ctx.container.get(LynxWindowHandlerContribution);
-	  }).whenTargetNamed(LynxWindowHandlerContribution.env);
+	  }).whenTargetNamed(LynxWindowHandlerContribution.env), bind(NodeWindowHandlerContribution).toSelf(), bind(WindowHandlerContribution).toDynamicValue(function (ctx) {
+	    return ctx.container.get(NodeWindowHandlerContribution);
+	  }).whenTargetNamed(NodeWindowHandlerContribution.env);
 	});
 
 	var textMeasureModules = new ContainerModule(function (bind) {
@@ -30142,7 +30736,7 @@
 	            x2: x + width,
 	            y2: y + height
 	          }
-	        }), context.fillRect(x, y, width, height);
+	        }, 0, 0), context.fillRect(x, y, width, height);
 	      }
 	    }
 	  }]);
@@ -32738,8 +33332,20 @@
 	  }).whenTargetNamed(LynxContext2d.env);
 	});
 
+	var nodeModule = new ContainerModule(function (bind) {
+	  bind(CanvasFactory).toDynamicValue(function () {
+	    return function (params) {
+	      return new NodeCanvas(params);
+	    };
+	  }).whenTargetNamed(NodeCanvas.env), bind(Context2dFactory).toDynamicValue(function () {
+	    return function (params, dpr) {
+	      return new NodeContext2d(params, dpr);
+	    };
+	  }).whenTargetNamed(NodeContext2d.env);
+	});
+
 	function load(container) {
-	  container.load(browserModule), container.load(feishuModule), container.load(taroModule), container.load(lynxModule);
+	  container.load(browserModule), container.load(feishuModule), container.load(taroModule), container.load(lynxModule), container.load(nodeModule);
 	}
 
 	container.load(coreModule), container.load(graphicModule), container.load(renderModule$1), container.load(pickModule), container.load(pluginModule), load$3(container), load$2(container), load$1(container), load(container);
@@ -33243,7 +33849,7 @@
 	        }, Object.assign({
 	          renderStyle: _this6.renderStyle
 	        }, params));
-	      }), this.combineLayersToWindow(), this.hooks.afterRender.call(this);
+	      }), this.combineLayersToWindow(), this.nextFrameRenderLayerSet.clear(), this.hooks.afterRender.call(this);
 	    }
 	  }, {
 	    key: "combineLayersToWindow",
@@ -38870,6 +39476,23 @@
 	  }, scale.ratio = ratio, scale.padding = padding, scale.width = width, scale.height = height, scale;
 	}
 	function boundToRange($, bound) {
+	  var clamp = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !1;
+	  if (clamp) {
+	    var x1 = bound.x1,
+	      x2 = bound.x2,
+	      y1 = bound.y1,
+	      y2 = bound.y2,
+	      _x1 = clamp$1(x1, 0, $.width),
+	      _x2 = clamp$1(x2, 0, $.width),
+	      _y1 = clamp$1(y1, 0, $.height),
+	      _y2 = clamp$1(y2, 0, $.height);
+	    return {
+	      x1: $(_x1),
+	      x2: $(_x2),
+	      y1: $(_y1),
+	      y2: $(_y2)
+	    };
+	  }
 	  return {
 	    x1: $(bound.x1),
 	    x2: $(bound.x2),
@@ -38890,9 +39513,10 @@
 	  var candidates = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
 	  var clampForce = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : !0;
 	  for (var i = 0; i < candidates.length; i++) {
-	    var tempText = createText(text.attribute);
-	    if (tempText.setAttributes(candidates[i]), tempText.update(), canPlace($, bitmap, boundToRange($, tempText.AABBBounds), clampForce)) return bitmap.setRange(boundToRange($, tempText.AABBBounds)), text.setAttributes(candidates[i]), !0;
+	    var tempText = text.clone();
+	    if (tempText.setAttributes(candidates[i]), tempText.update(), canPlace($, bitmap, boundToRange($, tempText.AABBBounds), clampForce)) return bitmap.setRange(boundToRange($, tempText.AABBBounds, !0)), candidates[i];
 	  }
+	  return !1;
 	}
 	function place$2($, bitmap, s, attrs, text, bounds, labeling) {
 	  var _a, _b, _c;
@@ -38901,7 +39525,7 @@
 	      var candidates = ((isFunction(s.position) ? s.position(text.attribute) : s.position) || defaultLabelPosition(attrs.type)).map(function (p) {
 	        return labeling(text.AABBBounds, bounds, p, attrs.offset);
 	      });
-	      return !!placeToCandidates($, bitmap, text, candidates, null === (_a = attrs.overlap) || void 0 === _a ? void 0 : _a.clampForce);
+	      return placeToCandidates($, bitmap, text, candidates, null === (_a = attrs.overlap) || void 0 === _a ? void 0 : _a.clampForce);
 	    }
 	    return !1;
 	  }
@@ -38912,7 +39536,7 @@
 	        y: text.attribute.y + dy
 	      };
 	    });
-	    return !!placeToCandidates($, bitmap, text, _candidates, null === (_b = attrs.overlap) || void 0 === _b ? void 0 : _b.clampForce);
+	    return placeToCandidates($, bitmap, text, _candidates, null === (_b = attrs.overlap) || void 0 === _b ? void 0 : _b.clampForce);
 	  }
 	  if ("moveX" === s.type) {
 	    var _candidates2 = (s.offset ? isFunction(s.offset) ? s.offset(text.attribute) : s.offset : []).map(function (dx) {
@@ -38921,7 +39545,7 @@
 	        y: text.attribute.y
 	      };
 	    });
-	    return !!placeToCandidates($, bitmap, text, _candidates2, null === (_c = attrs.overlap) || void 0 === _c ? void 0 : _c.clampForce);
+	    return placeToCandidates($, bitmap, text, _candidates2, null === (_c = attrs.overlap) || void 0 === _c ? void 0 : _c.clampForce);
 	  }
 	  return !1;
 	}
@@ -39113,7 +39737,7 @@
 	          return "bound" === s.type;
 	        });
 	      avoidBaseMark && (null === (_d = this._baseMarks) || void 0 === _d || _d.forEach(function (mark) {
-	        mark.AABBBounds && bitmap.setRange(boundToRange(bmpTool, mark.AABBBounds));
+	        mark.AABBBounds && bitmap.setRange(boundToRange(bmpTool, mark.AABBBounds, !0));
 	      }));
 	      for (var i = 0; i < labels.length; i++) {
 	        if (!1 === labels[i].visible) continue;
@@ -39121,30 +39745,29 @@
 	          baseMark = null === (_e = this._baseMarks) || void 0 === _e ? void 0 : _e[i];
 	        if (text.update(), canPlace(bmpTool, bitmap, text.AABBBounds, clampForce)) {
 	          if (!checkBounds) {
-	            bitmap.setRange(boundToRange(bmpTool, text.AABBBounds)), result.push(Object.assign(Object.assign({}, text.attribute), {
-	              _insideGraphic: canPlaceInside(text.AABBBounds, null == baseMark ? void 0 : baseMark.AABBBounds),
-	              _computedBound: text.AABBBounds
+	            bitmap.setRange(boundToRange(bmpTool, text.AABBBounds, !0)), result.push(Object.assign(Object.assign({}, text.attribute), {
+	              _insideGraphic: canPlaceInside(text.AABBBounds, null == baseMark ? void 0 : baseMark.AABBBounds)
 	            }));
 	            continue;
 	          }
 	          if (checkBounds && (null == baseMark ? void 0 : baseMark.AABBBounds) && canPlaceInside(text.AABBBounds, null == baseMark ? void 0 : baseMark.AABBBounds)) {
-	            bitmap.setRange(boundToRange(bmpTool, text.AABBBounds)), result.push(Object.assign(Object.assign({}, text.attribute), {
+	            bitmap.setRange(boundToRange(bmpTool, text.AABBBounds, !0)), result.push(Object.assign(Object.assign({}, text.attribute), {
 	              _insideGraphic: !0,
 	              _computedBound: text.AABBBounds
 	            }));
 	            continue;
 	          }
 	        }
-	        for (var j = 0; j < strategy.length; j++) {
-	          if (place$2(bmpTool, bitmap, strategy[j], this.attribute, text, this.getGraphicBounds(baseMark, labels[i]), this.labeling)) {
-	            result.push(Object.assign(Object.assign({}, text.attribute), {
-	              _insideGraphic: canPlaceInside(text.AABBBounds, null == baseMark ? void 0 : baseMark.AABBBounds),
-	              _computedBound: text.AABBBounds
-	            }));
-	            break;
-	          }
+	        var hasPlace = !1;
+	        for (var j = 0; j < strategy.length; j++) if (hasPlace = place$2(bmpTool, bitmap, strategy[j], this.attribute, text, this.getGraphicBounds(baseMark, labels[i]), this.labeling), !1 !== hasPlace) {
+	          result.push(Object.assign(Object.assign({}, text.attribute), {
+	            x: hasPlace.x,
+	            y: hasPlace.y,
+	            _insideGraphic: canPlaceInside(text.AABBBounds, null == baseMark ? void 0 : baseMark.AABBBounds)
+	          }));
+	          break;
 	        }
-	        !hideOnHit && result.push(Object.assign(Object.assign({}, text.attribute), {
+	        !hasPlace && !hideOnHit && result.push(Object.assign(Object.assign({}, text.attribute), {
 	          _insideGraphic: canPlaceInside(text.AABBBounds, null == baseMark ? void 0 : baseMark.AABBBounds),
 	          _computedBound: text.AABBBounds
 	        }));
@@ -41040,7 +41663,7 @@
 	        attPos = _this$_layoutCache.attPos,
 	        max = _this$_layoutCache.max,
 	        dis = (pos[attPos] - _this._activeCache.lastPos[attPos]) / max;
-	      _this._activeState && (_this._activeTag === DataZoomActiveTag.middleHandler ? _this.moveZoomWithMiddle((_this.state.start + _this.state.end) / 2 + dis) : _this._activeTag === DataZoomActiveTag.startHandler ? _this.state.start + dis > _this.state.end ? (_this.state.start = _this.state.end, _this.state.end = _this.state.start + dis, _this._activeTag = DataZoomActiveTag.endHandler) : _this.state.start = _this.state.start + dis : _this._activeTag === DataZoomActiveTag.endHandler && (_this.state.end + dis < _this.state.start ? (_this.state.end = _this.state.start, _this.state.start = _this.state.end + dis, _this._activeTag = DataZoomActiveTag.startHandler) : _this.state.end = _this.state.end + dis), _this._activeCache.lastPos = pos), _this.state.start = Math.min(Math.max(_this.state.start, 0), 1), _this.state.end = Math.min(Math.max(_this.state.end, 0), 1), brushSelect && _this.renderDragMask(), start === _this.state.start && end === _this.state.end || (_this.setAttributes({
+	      _this._activeState && (_this._activeTag === DataZoomActiveTag.middleHandler ? _this.moveZoomWithMiddle((_this.state.start + _this.state.end) / 2 + dis) : _this._activeTag === DataZoomActiveTag.startHandler ? _this.state.start + dis > _this.state.end ? (_this.state.start = _this.state.end, _this.state.end = _this.state.start + dis, _this._activeTag = DataZoomActiveTag.endHandler) : _this.state.start = _this.state.start + dis : _this._activeTag === DataZoomActiveTag.endHandler && (_this.state.end + dis < _this.state.start ? (_this.state.end = _this.state.start, _this.state.start = _this.state.end + dis, _this._activeTag = DataZoomActiveTag.startHandler) : _this.state.end = _this.state.end + dis), _this._activeCache.lastPos = pos, brushSelect && _this.renderDragMask()), _this.state.start = Math.min(Math.max(_this.state.start, 0), 1), _this.state.end = Math.min(Math.max(_this.state.end, 0), 1), start === _this.state.start && end === _this.state.end || (_this.setAttributes({
 	        start: _this.state.start,
 	        end: _this.state.end
 	      }), _this._updateStateCallback && _this._updateStateCallback(_this.state.start, _this.state.end));
@@ -41087,7 +41710,7 @@
 	        return _this2._onHandlerPointerDown(e, "background");
 	      }), this._selectedPreviewGroup && this._selectedPreviewGroup.addEventListener("pointerdown", function (e) {
 	        return _this2._onHandlerPointerDown(e, selectedTag);
-	      }), "browser" === global$1.env && (global$1.addEventListener("pointermove", this._onHandlerPointerMove.bind(this)), global$1.addEventListener("pointerup", this._onHandlerPointerUp.bind(this))), this.addEventListener("pointermove", this._onHandlerPointerMove), this.addEventListener("pointerup", this._onHandlerPointerUp), this.addEventListener("pointerside", this._onHandlerPointerUp), "auto" === showDetail && (this.addEventListener("pointerenter", this._onHandlerPointerEnter), this.addEventListener("pointerleave", this._onHandlerPointerLeave));
+	      }), "browser" === global$1.env && (global$1.addEventListener("pointermove", this._onHandlerPointerMove.bind(this)), global$1.addEventListener("pointerup", this._onHandlerPointerUp.bind(this))), this.addEventListener("pointermove", this._onHandlerPointerMove), this.addEventListener("pointerup", this._onHandlerPointerUp), this.addEventListener("pointerupoutside", this._onHandlerPointerUp), "auto" === showDetail && (this.addEventListener("pointerenter", this._onHandlerPointerEnter), this.addEventListener("pointerleave", this._onHandlerPointerLeave));
 	    }
 	  }, {
 	    key: "dragMaskSize",
@@ -41162,13 +41785,13 @@
 	        width = _this$getLayoutAttrFr.width,
 	        height = _this$getLayoutAttrFr.height;
 	      this._isHorizontal ? this._dragMask = this._container.createOrUpdateChild("dragMask", Object.assign({
-	        x: this.dragMaskSize() < 0 ? this._activeCache.lastPos.x : this._activeCache.startPos.x,
+	        x: clamp$1(this.dragMaskSize() < 0 ? this._activeCache.lastPos.x : this._activeCache.startPos.x, position.x, position.x + width),
 	        y: position.y,
 	        width: this._activeState && this._activeTag === DataZoomActiveTag.background && Math.abs(this.dragMaskSize()) || 0,
 	        height: height
 	      }, dragMaskStyle), "rect") : this._dragMask = this._container.createOrUpdateChild("dragMask", Object.assign({
 	        x: position.x,
-	        y: this.dragMaskSize() < 0 ? this._activeCache.lastPos.y : this._activeCache.startPos.y,
+	        y: clamp$1(this.dragMaskSize() < 0 ? this._activeCache.lastPos.y : this._activeCache.startPos.y, position.y, position.y + height),
 	        width: width,
 	        height: this._activeState && this._activeTag === DataZoomActiveTag.background && Math.abs(this.dragMaskSize()) || 0
 	      }, dragMaskStyle), "rect");
@@ -41240,31 +41863,34 @@
 	  }, {
 	    key: "getLayoutAttrFromConfig",
 	    value: function getLayoutAttrFromConfig() {
-	      var _a, _b, _c, _d, _e, _f, _g, _h;
+	      var _a, _b;
+	      if (this._layoutAttrFromConfig) return this._layoutAttrFromConfig;
 	      var _this$attribute6 = this.attribute,
 	        positionConfig = _this$attribute6.position,
 	        size = _this$attribute6.size,
 	        orient = _this$attribute6.orient,
 	        middleHandlerStyle = _this$attribute6.middleHandlerStyle,
 	        widthConfig = size.width,
-	        heightConfig = size.height;
+	        heightConfig = size.height,
+	        middleHandlerSize = null !== (_b = null === (_a = null == middleHandlerStyle ? void 0 : middleHandlerStyle.background) || void 0 === _a ? void 0 : _a.size) && void 0 !== _b ? _b : 10;
 	      var width, height, position;
-	      return (null == middleHandlerStyle ? void 0 : middleHandlerStyle.visible) ? this._isHorizontal ? (width = widthConfig, height = heightConfig - (null !== (_b = null === (_a = middleHandlerStyle.background) || void 0 === _a ? void 0 : _a.size) && void 0 !== _b ? _b : 10), position = {
+	      return (null == middleHandlerStyle ? void 0 : middleHandlerStyle.visible) ? this._isHorizontal ? (width = widthConfig, height = heightConfig - middleHandlerSize, position = {
 	        x: positionConfig.x,
-	        y: positionConfig.y + (null !== (_d = null === (_c = middleHandlerStyle.background) || void 0 === _c ? void 0 : _c.size) && void 0 !== _d ? _d : 10)
-	      }) : (width = widthConfig - (null !== (_f = null === (_e = middleHandlerStyle.background) || void 0 === _e ? void 0 : _e.size) && void 0 !== _f ? _f : 10), height = heightConfig, position = {
-	        x: positionConfig.x + ("left" === orient ? null !== (_h = null === (_g = middleHandlerStyle.background) || void 0 === _g ? void 0 : _g.size) && void 0 !== _h ? _h : 10 : 0),
+	        y: positionConfig.y + middleHandlerSize
+	      }) : (width = widthConfig - middleHandlerSize, height = heightConfig, position = {
+	        x: positionConfig.x + ("left" === orient ? middleHandlerSize : 0),
 	        y: positionConfig.y
-	      }) : (width = widthConfig, height = heightConfig, position = positionConfig), {
+	      }) : (width = widthConfig, height = heightConfig, position = positionConfig), this._layoutAttrFromConfig = {
 	        position: position,
 	        width: width,
 	        height: height
-	      };
+	      }, this._layoutAttrFromConfig;
 	    }
 	  }, {
 	    key: "render",
 	    value: function render() {
 	      var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+	      this._layoutAttrFromConfig = null;
 	      var _this$attribute7 = this.attribute,
 	        orient = _this$attribute7.orient,
 	        backgroundStyle = _this$attribute7.backgroundStyle,
@@ -67425,9 +68051,10 @@
 	            const layoutRect = zItems[0].getLayoutRect();
 	            extraWH = layoutRect;
 	        }
-	        this._rightCurrent -= extraWH.width;
-	        this._topCurrent += (extraWH.height / 4) * 3;
-	        this._bottomCurrent -= extraWH.height / 4;
+	        this._leftCurrent += extraWH.width / 8;
+	        this._rightCurrent -= extraWH.width / 8;
+	        this._topCurrent += extraWH.height / 8;
+	        this._bottomCurrent -= extraWH.height / 8;
 	        const offsetWH = {
 	            offsetBottom: 0,
 	            offsetTop: 0,
@@ -73442,13 +74069,13 @@
 	        if (isZ) {
 	            const directionStr = this.directionStr ?? 'r2l';
 	            const depthZ = this.layout3dBox ? this.layout3dBox.width : 0;
-	            let anchor3d = this._spec.depth ? [0, 0] : undefined;
-	            let alpha = this._spec.depth ? -Math.PI / 2 : 0;
+	            let anchor3d = [0, 0];
+	            let alpha = -Math.PI / 2;
 	            let z = 0;
 	            if (directionStr === 'l2r') {
 	                z = this.layout3dBox.length;
-	                anchor3d = this._spec.depth ? [0, 0, 0] : undefined;
-	                alpha = this._spec.depth ? Math.PI / 2 : 0;
+	                anchor3d = [0, 0, 0];
+	                alpha = Math.PI / 2;
 	            }
 	            return {
 	                start: { x: 0, y: 0 },
@@ -95913,7 +96540,7 @@
 	Factory.registerLayout('grid', GridLayout$1);
 	Factory.registerLayout('layout3d', Layout3d);
 
-	const version = "0.2.0";
+	const version = "1.0.0";
 
 	exports.AreaChart = AreaChart;
 	exports.AreaSeries = AreaSeries;