@visactor/vrender 0.16.17 → 0.16.18

package/dist/index.js

@@ -4795,6 +4795,130 @@
   }();
   TextMeasure.ALPHABET_CHAR_SET = "abcdefghijklmnopqrstuvwxyz", TextMeasure.NUMBERS_CHAR_SET = "0123456789", TextMeasure.FULL_SIZE_CHAR = "字";
 
+  var hasConsole = "undefined" != typeof console;
+  function log(method, level, input) {
+    var args = [level].concat([].slice.call(input));
+    hasConsole && console[method].apply(console, args);
+  }
+  var LoggerLevel;
+  !function (LoggerLevel) {
+    LoggerLevel[LoggerLevel.None = 0] = "None", LoggerLevel[LoggerLevel.Error = 1] = "Error", LoggerLevel[LoggerLevel.Warn = 2] = "Warn", LoggerLevel[LoggerLevel.Info = 3] = "Info", LoggerLevel[LoggerLevel.Debug = 4] = "Debug";
+  }(LoggerLevel || (LoggerLevel = {}));
+  var Logger = /*#__PURE__*/function () {
+    function Logger() {
+      var level = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : LoggerLevel.None;
+      var method = arguments.length > 1 ? arguments[1] : undefined;
+      _classCallCheck(this, Logger);
+      this._onErrorHandler = [], this._level = level, this._method = method;
+    }
+    _createClass(Logger, [{
+      key: "addErrorHandler",
+      value: function addErrorHandler(handler) {
+        this._onErrorHandler.find(function (h) {
+          return h === handler;
+        }) || this._onErrorHandler.push(handler);
+      }
+    }, {
+      key: "removeErrorHandler",
+      value: function removeErrorHandler(handler) {
+        var index = this._onErrorHandler.findIndex(function (h) {
+          return h === handler;
+        });
+        index < 0 || this._onErrorHandler.splice(index, 1);
+      }
+    }, {
+      key: "callErrorHandler",
+      value: function callErrorHandler() {
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+        this._onErrorHandler.forEach(function (h) {
+          return h.apply(void 0, args);
+        });
+      }
+    }, {
+      key: "canLogInfo",
+      value: function canLogInfo() {
+        return this._level >= LoggerLevel.Info;
+      }
+    }, {
+      key: "canLogDebug",
+      value: function canLogDebug() {
+        return this._level >= LoggerLevel.Debug;
+      }
+    }, {
+      key: "canLogError",
+      value: function canLogError() {
+        return this._level >= LoggerLevel.Error;
+      }
+    }, {
+      key: "canLogWarn",
+      value: function canLogWarn() {
+        return this._level >= LoggerLevel.Warn;
+      }
+    }, {
+      key: "level",
+      value: function level(levelValue) {
+        return arguments.length ? (this._level = +levelValue, this) : this._level;
+      }
+    }, {
+      key: "error",
+      value: function error() {
+        var _a;
+        for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+          args[_key2] = arguments[_key2];
+        }
+        return this._level >= LoggerLevel.Error && (this._onErrorHandler.length ? this.callErrorHandler.apply(this, args) : log(null !== (_a = this._method) && void 0 !== _a ? _a : "error", "ERROR", args)), this;
+      }
+    }, {
+      key: "warn",
+      value: function warn() {
+        for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+          args[_key3] = arguments[_key3];
+        }
+        return this._level >= LoggerLevel.Warn && log(this._method || "warn", "WARN", args), this;
+      }
+    }, {
+      key: "info",
+      value: function info() {
+        for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+          args[_key4] = arguments[_key4];
+        }
+        return this._level >= LoggerLevel.Info && log(this._method || "log", "INFO", args), this;
+      }
+    }, {
+      key: "debug",
+      value: function debug() {
+        for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
+          args[_key5] = arguments[_key5];
+        }
+        return this._level >= LoggerLevel.Debug && log(this._method || "log", "DEBUG", args), this;
+      }
+    }], [{
+      key: "getInstance",
+      value: function getInstance(level, method) {
+        return Logger._instance && isNumber$2(level) ? Logger._instance.level(level) : Logger._instance || (Logger._instance = new Logger(level, method)), Logger._instance;
+      }
+    }, {
+      key: "setInstance",
+      value: function setInstance(logger) {
+        return Logger._instance = logger;
+      }
+    }, {
+      key: "setInstanceLevel",
+      value: function setInstanceLevel(level) {
+        Logger._instance ? Logger._instance.level(level) : Logger._instance = new Logger(level);
+      }
+    }, {
+      key: "clearInstance",
+      value: function clearInstance() {
+        Logger._instance = null;
+      }
+    }]);
+    return Logger;
+  }();
+  Logger._instance = null;
+
   var circleThreshold = tau - 1e-8;
   var BoundsContext = /*#__PURE__*/function () {
     function BoundsContext(bounds) {
@@ -6295,7 +6419,8 @@
     verticalMode: 0,
     whiteSpace: "no-wrap",
     heightLimit: 1 / 0,
-    lineClamp: 1 / 0
+    lineClamp: 1 / 0,
+    suffixPosition: "end"
   };
   var DefaultStyle = Object.assign(Object.assign(Object.assign({
     opacity: 1,
@@ -6304,7 +6429,7 @@
     textureColor: "black",
     textureSize: 10,
     texturePadding: 2,
-    backgroundMode: 0,
+    backgroundMode: "no-repeat",
     blur: 0,
     cursor: null,
     html: null
@@ -6398,7 +6523,7 @@
   var DefaultPathAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
     path: new CustomPath2D(),
     customPath: function customPath() {
-      console.warn("空函数");
+      Logger.getInstance().warn("空函数");
     }
   });
   var DefaultPolygonAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
@@ -6662,7 +6787,7 @@
           i = 0;
         for (; i < verticalList.length && length + verticalList[i].width < width; i++) length += verticalList[i].width, out.push(verticalList[i]);
         if (verticalList[i] && verticalList[i].text.length > 1) {
-          var clipedData = this._clipText(verticalList[i].text, options, width - length, 0, verticalList[i].text.length - 1);
+          var clipedData = this._clipText(verticalList[i].text, options, width - length, 0, verticalList[i].text.length - 1, "end", !1);
           if (wordBreak && clipedData.str !== verticalList[i].text) {
             var text = "",
               _length = 0;
@@ -6701,7 +6826,7 @@
           str: "",
           width: 0
         };
-        var data = this._clipText(text, options, width, 0, text.length - 1);
+        var data = this._clipText(text, options, width, 0, text.length - 1, "end", !1);
         if (wordBreak && data.str !== text) {
           var index = testLetter(text, data.str.length);
           index !== data.str.length && (data.str = text.substring(0, index), data.width = this.measureTextWidth(data.str, options));
@@ -6710,7 +6835,21 @@
       }
     }, {
       key: "_clipText",
-      value: function _clipText(text, options, width, leftIdx, rightIdx) {
+      value: function _clipText(text, options, width, leftIdx, rightIdx, position, suffix) {
+        var data;
+        if ("end" === position) data = this._clipTextEnd(text, options, width, leftIdx, rightIdx), suffix && (data.result = data.str + suffix);else if ("start" === position) data = this._clipTextStart(text, options, width, leftIdx, rightIdx), suffix && (data.result = suffix + data.str);else if ("middle" === position) {
+          var d = this._clipTextMiddle(text, options, width, "", "", 0, 0, 1);
+          data = {
+            str: "none",
+            width: d.width,
+            result: d.left + suffix + d.right
+          };
+        }
+        return data;
+      }
+    }, {
+      key: "_clipTextEnd",
+      value: function _clipTextEnd(text, options, width, leftIdx, rightIdx) {
         var middleIdx = Math.floor((leftIdx + rightIdx) / 2),
           subText = text.substring(0, middleIdx + 1),
           strWidth = this.measureTextWidth(subText, options);
@@ -6724,7 +6863,7 @@
           return length = this.measureTextWidth(str, options), length <= width ? {
             str: str,
             width: length
-          } : this._clipText(text, options, width, leftIdx, middleIdx);
+          } : this._clipTextEnd(text, options, width, leftIdx, middleIdx);
         }
         if (strWidth < width) {
           if (middleIdx >= text.length - 1) return {
@@ -6735,16 +6874,68 @@
           return length = this.measureTextWidth(_str, options), length >= width ? {
             str: subText,
             width: strWidth
-          } : this._clipText(text, options, width, middleIdx, rightIdx);
+          } : this._clipTextEnd(text, options, width, middleIdx, rightIdx);
+        }
+        return {
+          str: subText,
+          width: strWidth
+        };
+      }
+    }, {
+      key: "_clipTextStart",
+      value: function _clipTextStart(text, options, width, leftIdx, rightIdx) {
+        var middleIdx = Math.ceil((leftIdx + rightIdx) / 2),
+          subText = text.substring(middleIdx - 1, text.length - 1),
+          strWidth = this.measureTextWidth(subText, options);
+        var length;
+        if (strWidth > width) {
+          if (subText.length <= 1) return {
+            str: "",
+            width: 0
+          };
+          var str = text.substring(middleIdx, text.length - 1);
+          return length = this.measureTextWidth(str, options), length <= width ? {
+            str: str,
+            width: length
+          } : this._clipTextStart(text, options, width, middleIdx, text.length - 1);
+        }
+        if (strWidth < width) {
+          if (middleIdx <= 0) return {
+            str: text,
+            width: this.measureTextWidth(text, options)
+          };
+          var _str2 = text.substring(middleIdx - 2, text.length - 1);
+          return length = this.measureTextWidth(_str2, options), length >= width ? {
+            str: subText,
+            width: strWidth
+          } : this._clipTextStart(text, options, width, leftIdx, middleIdx);
         }
         return {
           str: subText,
           width: strWidth
         };
       }
+    }, {
+      key: "_clipTextMiddle",
+      value: function _clipTextMiddle(text, options, width, left, right, leftW, rightW, buffer) {
+        var subLeftText = text.substring(0, buffer),
+          strLeftWidth = this.measureTextWidth(subLeftText, options);
+        if (strLeftWidth + rightW > width) return {
+          left: left,
+          right: right,
+          width: leftW + rightW
+        };
+        var subRightText = text.substring(text.length - buffer, text.length),
+          strRightWidth = this.measureTextWidth(subRightText, options);
+        return strLeftWidth + strRightWidth > width ? {
+          left: subLeftText,
+          right: right,
+          width: strLeftWidth + rightW
+        } : this._clipTextMiddle(text, options, width, subLeftText, subRightText, strLeftWidth, strRightWidth, buffer + 1);
+      }
     }, {
       key: "clipTextWithSuffixVertical",
-      value: function clipTextWithSuffixVertical(verticalList, options, width, suffix, wordBreak) {
+      value: function clipTextWithSuffixVertical(verticalList, options, width, suffix, wordBreak, suffixPosition) {
         if ("" === suffix) return this.clipTextVertical(verticalList, options, width, wordBreak);
         if (0 === verticalList.length) return {
           verticalList: verticalList,
@@ -6754,17 +6945,50 @@
         if (output.verticalList.length === verticalList.length && output.verticalList[output.verticalList.length - 1].width === verticalList[verticalList.length - 1].width) return output;
         var suffixWidth = this.measureTextWidth(suffix, options);
         if (suffixWidth > width) return output;
-        width -= suffixWidth;
-        var out = this.clipTextVertical(verticalList, options, width, wordBreak);
-        return out.width += suffixWidth, out.verticalList.push({
+        var out;
+        if (width -= suffixWidth, "start" === suffixPosition) {
+          var nextVerticalList = this.revertVerticalList(verticalList);
+          out = this.clipTextVertical(nextVerticalList, options, width, wordBreak);
+          var v = this.revertVerticalList(out.verticalList);
+          v.unshift({
+            text: suffix,
+            direction: 1,
+            width: suffixWidth
+          }), out.verticalList = v;
+        } else if ("middle" === suffixPosition) {
+          var leftOut = this.clipTextVertical(verticalList, options, width / 2, wordBreak),
+            _nextVerticalList = this.revertVerticalList(verticalList),
+            rightOut = this.clipTextVertical(_nextVerticalList, options, width / 2, wordBreak);
+          leftOut.verticalList.push({
+            text: suffix,
+            direction: 1,
+            width: suffixWidth
+          }), this.revertVerticalList(rightOut.verticalList).forEach(function (v) {
+            return leftOut.verticalList.push(v);
+          }), out = {
+            verticalList: leftOut.verticalList,
+            width: leftOut.width + rightOut.width
+          };
+        } else out = this.clipTextVertical(verticalList, options, width, wordBreak), out.verticalList.push({
           text: suffix,
           direction: 1,
           width: suffixWidth
-        }), out;
+        });
+        return out.width += suffixWidth, out;
+      }
+    }, {
+      key: "revertVerticalList",
+      value: function revertVerticalList(verticalList) {
+        return verticalList.reverse().map(function (l) {
+          var t = l.text.split("").reverse().join("");
+          return Object.assign(Object.assign({}, l), {
+            text: t
+          });
+        });
       }
     }, {
       key: "clipTextWithSuffix",
-      value: function clipTextWithSuffix(text, options, width, suffix, wordBreak) {
+      value: function clipTextWithSuffix(text, options, width, suffix, wordBreak, position) {
         if ("" === suffix) return this.clipText(text, options, width, wordBreak);
         if (0 === text.length) return {
           str: "",
@@ -6781,12 +7005,12 @@
           width: 0
         };
         width -= suffixWidth;
-        var data = this._clipText(text, options, width, 0, text.length - 1);
+        var data = this._clipText(text, options, width, 0, text.length - 1, position, suffix);
         if (wordBreak && data.str !== text) {
           var index = testLetter(text, data.str.length);
           index !== data.str.length && (data.str = text.substring(0, index), data.width = this.measureTextWidth(data.str, options));
         }
-        return data.str += suffix, data.width += suffixWidth, data;
+        return data.str = data.result, data.width += suffixWidth, data;
       }
     }]);
     return ATextMeasure;
@@ -7429,7 +7653,7 @@
             var parentTheme = parentGroup.theme;
             (parentTheme.dirty || force) && parentTheme.applyTheme(parentGroup, pt, !0), this.userTheme ? combineTheme(this.userTheme, parentTheme.userTheme, !1) : this.userTheme = clone(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);
+          this.userTheme ? this.doCombine(pt) : (parentGroup ? this.combinedTheme = parentGroup.theme.combinedTheme : (this.combinedTheme = this._defaultTheme, Logger.getInstance().warn("未知错误，走到不应该走的区域里")), this.dirty = !1);
         }
         return this.combinedTheme;
       }
@@ -7701,7 +7925,7 @@
     }, {
       key: "insertInto",
       value: function insertInto(newNode, idx) {
-        if (!this._ignoreWarn && this._nodeList && console.warn("insertIntoKeepIdx和insertInto混用可能会存在错误"), idx >= this.childrenCount) return this.appendChild(newNode);
+        if (!this._ignoreWarn && this._nodeList && Logger.getInstance().warn("insertIntoKeepIdx和insertInto混用可能会存在错误"), idx >= this.childrenCount) return this.appendChild(newNode);
         if (this._uid === newNode._uid) return null;
         if (newNode.isAncestorsOf(this)) throw new Error("【Node::insertBefore】不能将父辈元素insert为子元素");
         if (newNode.parent && newNode.parent.removeChild(newNode), newNode.parent = this, 0 === idx) newNode._next = this._firstChild, this._firstChild && (this._firstChild._prev = newNode), newNode._prev = null, this._firstChild = newNode;else {
@@ -8030,7 +8254,19 @@
   var FederatedEvent = /*#__PURE__*/function () {
     function FederatedEvent(manager) {
       _classCallCheck(this, FederatedEvent);
-      this.bubbles = !0, this.cancelBubble = !0, this.cancelable = !1, this.composed = !1, this.defaultPrevented = !1, this.eventPhase = FederatedEvent.prototype.NONE, this.propagationStopped = !1, this.propagationImmediatelyStopped = !1, this.layer = new Point(), this.page = new Point(), this.canvas = new Point(), this.viewport = new Point(), this.NONE = 0, this.CAPTURING_PHASE = 1, this.AT_TARGET = 2, this.BUBBLING_PHASE = 3, this.manager = manager;
+      this.bubbles = !0, this.cancelBubble = !0, this.cancelable = !1, this.composed = !1, this.defaultPrevented = !1, this.eventPhase = FederatedEvent.prototype.NONE, this.propagationStopped = !1, this.propagationImmediatelyStopped = !1, this.layer = {
+        x: 0,
+        y: 0
+      }, this.page = {
+        x: 0,
+        y: 0
+      }, this.canvas = {
+        x: 0,
+        y: 0
+      }, this.viewport = {
+        x: 0,
+        y: 0
+      }, this.NONE = 0, this.CAPTURING_PHASE = 1, this.AT_TARGET = 2, this.BUBBLING_PHASE = 3, this.manager = manager;
     }
     _createClass(FederatedEvent, [{
       key: "layerX",
@@ -8123,7 +8359,22 @@
     function FederatedMouseEvent() {
       var _this;
       _classCallCheck(this, FederatedMouseEvent);
-      _this = _super.apply(this, arguments), _this.client = new Point(), _this.movement = new Point(), _this.offset = new Point(), _this.global = new Point(), _this.screen = new Point();
+      _this = _super.apply(this, arguments), _this.client = {
+        x: 0,
+        y: 0
+      }, _this.movement = {
+        x: 0,
+        y: 0
+      }, _this.offset = {
+        x: 0,
+        y: 0
+      }, _this.global = {
+        x: 0,
+        y: 0
+      }, _this.screen = {
+        x: 0,
+        y: 0
+      };
       return _this;
     }
     _createClass(FederatedMouseEvent, [{
@@ -8267,7 +8518,7 @@
       this.dispatch = new EventEmitter(), this.mappingState = {
         trackingData: {}
       }, this.eventPool = new Map(), this.onPointerDown = function (from, target) {
-        if (!(from instanceof FederatedPointerEvent)) return void console.warn("EventManager cannot map a non-pointer event as a pointer event");
+        if (!(from instanceof FederatedPointerEvent)) return void Logger.getInstance().warn("EventManager cannot map a non-pointer event as a pointer event");
         var e = _this.createPointerEvent(from, from.type, target);
         if (_this.dispatchEvent(e, "pointerdown"), "touch" === e.pointerType) _this.dispatchEvent(e, "touchstart");else if (isMouseLike(e.pointerType)) {
           var isRightButton = 2 === e.button;
@@ -8276,7 +8527,7 @@
         _this.trackingData(from.pointerId).pressTargetsByButton[from.button] = e.composedPath(), _this.freeEvent(e);
       }, this.onPointerMove = function (from, target) {
         var _a, _b;
-        if (!(from instanceof FederatedPointerEvent)) return void console.warn("EventManager cannot map a non-pointer event as a pointer event");
+        if (!(from instanceof FederatedPointerEvent)) return void Logger.getInstance().warn("EventManager cannot map a non-pointer event as a pointer event");
         var e = _this.createPointerEvent(from, from.type, target),
           isMouse = isMouseLike(e.pointerType),
           trackingData = _this.trackingData(from.pointerId),
@@ -8307,7 +8558,7 @@
         _this.dispatchEvent(e, "pointermove"), "touch" === e.pointerType && _this.dispatchEvent(e, "touchmove"), isMouse && (_this.dispatchEvent(e, "mousemove"), _this.cursor = (null === (_b = null === (_a = e.target) || void 0 === _a ? void 0 : _a.attribute) || void 0 === _b ? void 0 : _b.cursor) || _this.rootTarget.getCursor()), trackingData.overTargets = e.composedPath(), _this.freeEvent(e);
       }, this.onPointerOver = function (from, target) {
         var _a, _b;
-        if (!(from instanceof FederatedPointerEvent)) return void console.warn("EventManager cannot map a non-pointer event as a pointer event");
+        if (!(from instanceof FederatedPointerEvent)) return void Logger.getInstance().warn("EventManager cannot map a non-pointer event as a pointer event");
         var trackingData = _this.trackingData(from.pointerId),
           e = _this.createPointerEvent(from, from.type, target),
           isMouse = isMouseLike(e.pointerType);
@@ -8316,7 +8567,7 @@
         for (enterEvent.eventPhase = enterEvent.AT_TARGET; enterEvent.target && enterEvent.target !== _this.rootTarget.parent;) enterEvent.currentTarget = enterEvent.target, _this.notifyTarget(enterEvent), isMouse && _this.notifyTarget(enterEvent, "mouseenter"), enterEvent.target = enterEvent.target.parent;
         trackingData.overTargets = e.composedPath(), _this.freeEvent(e), _this.freeEvent(enterEvent);
       }, this.onPointerOut = function (from, target) {
-        if (!(from instanceof FederatedPointerEvent)) return void console.warn("EventManager cannot map a non-pointer event as a pointer event");
+        if (!(from instanceof FederatedPointerEvent)) return void Logger.getInstance().warn("EventManager cannot map a non-pointer event as a pointer event");
         var trackingData = _this.trackingData(from.pointerId);
         if (trackingData.overTargets) {
           var isMouse = isMouseLike(from.pointerType),
@@ -8330,7 +8581,7 @@
         _this.cursor = "";
       }, this.onPointerUp = function (from, target) {
         var _a;
-        if (!(from instanceof FederatedPointerEvent)) return void console.warn("EventManager cannot map a non-pointer event as a pointer event");
+        if (!(from instanceof FederatedPointerEvent)) return void Logger.getInstance().warn("EventManager cannot map a non-pointer event as a pointer event");
         var now = clock.now(),
           e = _this.createPointerEvent(from, from.type, target);
         if (_this.dispatchEvent(e, "pointerup"), "touch" === e.pointerType) _this.dispatchEvent(e, "touchend");else if (isMouseLike(e.pointerType)) {
@@ -8363,7 +8614,7 @@
         }
         _this.freeEvent(e);
       }, this.onPointerUpOutside = function (from, target) {
-        if (!(from instanceof FederatedPointerEvent)) return void console.warn("EventManager cannot map a non-pointer event as a pointer event");
+        if (!(from instanceof FederatedPointerEvent)) return void Logger.getInstance().warn("EventManager cannot map a non-pointer event as a pointer event");
         var trackingData = _this.trackingData(from.pointerId),
           pressTarget = _this.findMountedTarget(trackingData.pressTargetsByButton[from.button]),
           e = _this.createPointerEvent(from, from.type, target);
@@ -8374,7 +8625,7 @@
         }
         _this.freeEvent(e);
       }, this.onWheel = function (from, target) {
-        if (!(from instanceof FederatedWheelEvent)) return void console.warn("EventManager cannot map a non-wheel event as a wheel event");
+        if (!(from instanceof FederatedWheelEvent)) return void Logger.getInstance().warn("EventManager cannot map a non-wheel event as a wheel event");
         var wheelEvent = _this.createWheelEvent(from, target);
         _this.dispatchEvent(wheelEvent), _this.freeEvent(wheelEvent);
       }, this.rootTarget = root, this.mappingTable = {}, this._config = Object.assign({
@@ -8404,7 +8655,7 @@
         var mappers = this.mappingTable[e.type];
         var target;
         var cacheKey = "".concat(e.canvasX, "-").concat(e.canvasY);
-        if ((null === (_a = this._prePointTargetCache) || void 0 === _a ? void 0 : _a[cacheKey]) && (null === (_c = null === (_b = this._prePointTargetCache) || void 0 === _b ? void 0 : _b[cacheKey]) || void 0 === _c ? void 0 : _c.stage) && (null === (_e = null === (_d = this._prePointTargetCache) || void 0 === _d ? void 0 : _d[cacheKey]) || void 0 === _e ? void 0 : _e.stage.renderCount) === (null === (_f = this._prePointTargetCache) || void 0 === _f ? void 0 : _f.stageRenderCount) ? target = this._prePointTargetCache[cacheKey] : (target = this.pickTarget(e.canvasX, e.canvasY, e), e.pickParams || (this._prePointTargetCache = _defineProperty(_defineProperty({}, cacheKey, target), "stageRenderCount", null !== (_g = null == target ? void 0 : target.stage.renderCount) && void 0 !== _g ? _g : -1))), mappers) for (var i = 0, j = mappers.length; i < j; i++) mappers[i].fn(e, target);else console.warn("[EventManager]: Event mapping not defined for ".concat(e.type));
+        if ((null === (_a = this._prePointTargetCache) || void 0 === _a ? void 0 : _a[cacheKey]) && (null === (_c = null === (_b = this._prePointTargetCache) || void 0 === _b ? void 0 : _b[cacheKey]) || void 0 === _c ? void 0 : _c.stage) && (null === (_e = null === (_d = this._prePointTargetCache) || void 0 === _d ? void 0 : _d[cacheKey]) || void 0 === _e ? void 0 : _e.stage.renderCount) === (null === (_f = this._prePointTargetCache) || void 0 === _f ? void 0 : _f.stageRenderCount) ? target = this._prePointTargetCache[cacheKey] : (target = this.pickTarget(e.canvasX, e.canvasY, e), e.pickParams || (this._prePointTargetCache = _defineProperty(_defineProperty({}, cacheKey, target), "stageRenderCount", null !== (_g = null == target ? void 0 : target.stage.renderCount) && void 0 !== _g ? _g : -1))), mappers) for (var i = 0, j = mappers.length; i < j; i++) mappers[i].fn(e, target);else Logger.getInstance().warn("[EventManager]: Event mapping not defined for ".concat(e.type));
       }
     }, {
       key: "propagate",
@@ -8474,12 +8725,14 @@
     }, {
       key: "copyMouseData",
       value: function copyMouseData(from, to) {
-        from instanceof FederatedMouseEvent && to instanceof FederatedMouseEvent && (to.altKey = from.altKey, to.button = from.button, to.buttons = from.buttons, to.client.copyFrom(from.client), to.ctrlKey = from.ctrlKey, to.shiftKey = from.shiftKey, to.metaKey = from.metaKey, to.movement.copyFrom(from.movement), to.canvas.copyFrom(from.canvas), to.screen.copyFrom(from.screen), to.global.copyFrom(from.global), to.offset.copyFrom(from.offset), to.viewport.copyFrom(from.viewport));
+        from instanceof FederatedMouseEvent && to instanceof FederatedMouseEvent && (to.altKey = from.altKey, to.button = from.button, to.buttons = from.buttons, to.ctrlKey = from.ctrlKey, to.shiftKey = from.shiftKey, to.metaKey = from.metaKey, ["client", "movement", "canvas", "screen", "global", "offset", "viewport"].forEach(function (key) {
+          to[key].x = from[key].x, to[key].y = from[key].y;
+        }));
       }
     }, {
       key: "copyData",
       value: function copyData(from, to) {
-        to.isTrusted = from.isTrusted, to.srcElement = from.srcElement, to.timeStamp = clock.now(), to.type = from.type, to.detail = from.detail, to.view = from.view, to.which = from.which, to.layer.copyFrom(from.layer), to.page.copyFrom(from.page), to.pickParams = from.pickParams;
+        to.isTrusted = from.isTrusted, to.srcElement = from.srcElement, to.timeStamp = clock.now(), to.type = from.type, to.detail = from.detail, to.view = from.view, to.which = from.which, to.layer.x = from.layer.x, to.layer.y = from.layer.y, to.page.x = from.page.x, to.page.y = from.page.y, to.pickParams = from.pickParams;
       }
     }, {
       key: "trackingData",
@@ -8700,7 +8953,7 @@
         var _this$mapToCanvasPoin = this.mapToCanvasPoint(nativeEvent),
           canvasX = _this$mapToCanvasPoin.x,
           canvasY = _this$mapToCanvasPoin.y;
-        event.canvas.x = canvasX, event.canvas.y = canvasY, event.global.copyFrom(event.canvas), event.offset.copyFrom(event.canvas);
+        event.canvas.x = canvasX, event.canvas.y = canvasY, event.global.x = canvasX, event.global.y = canvasY, event.offset.x = canvasX, event.offset.y = canvasY;
         var _this$mapToViewportPo = this.mapToViewportPoint(event),
           viewX = _this$mapToViewportPo.x,
           viewY = _this$mapToViewportPo.y;
@@ -8713,7 +8966,7 @@
         var _this$mapToCanvasPoin2 = this.mapToCanvasPoint(nativeEvent),
           canvasX = _this$mapToCanvasPoin2.x,
           canvasY = _this$mapToCanvasPoin2.y;
-        event.canvas.x = canvasX, event.canvas.y = canvasY, event.global.copyFrom(event.canvas), event.offset.copyFrom(event.canvas);
+        event.canvas.x = canvasX, event.canvas.y = canvasY, event.global.x = canvasX, event.global.y = canvasY, event.offset.x = canvasX, event.offset.y = canvasY;
         var _this$mapToViewportPo2 = this.mapToViewportPoint(event),
           viewX = _this$mapToViewportPo2.x,
           viewY = _this$mapToViewportPo2.y;
@@ -8932,7 +9185,7 @@
             handler = new ManualTickHandler();
             break;
           default:
-            console.warn("非法的计时器模式"), handler = new RAFTickHandler();
+            Logger.getInstance().warn("非法的计时器模式"), handler = new RAFTickHandler();
         }
         return !!handler.avaliable() && (this.tickerHandler && this.tickerHandler.release(), this.tickerHandler = handler, !0);
       }
@@ -9771,7 +10024,7 @@
           }
           lastStep = lastStep.prev;
         }
-        return console.warn("未知错误，step中找不到属性"), step.props[name];
+        return Logger.getInstance().warn("未知错误，step中找不到属性"), step.props[name];
       }
     }, {
       key: "updateTarget",
@@ -10200,6 +10453,19 @@
     }, {
       key: "onStart",
       value: function onStart() {
+        this.target && ("rect" === this.target.type ? this.onStartRect() : "line" === this.target.type ? this.onStartLineOrArea("line") : "area" === this.target.type && this.onStartLineOrArea("area"));
+      }
+    }, {
+      key: "onStartLineOrArea",
+      value: function onStartLineOrArea(type) {
+        var _a;
+        var root = this.target.attachShadow(),
+          line = application.graphicService.creator[type](Object.assign({}, null === (_a = this.params) || void 0 === _a ? void 0 : _a.attribute));
+        this[type] = line, line.pathProxy = new CustomPath2D(), root.add(line);
+      }
+    }, {
+      key: "onStartRect",
+      value: function onStartRect() {
         var _a;
         var root = this.target.attachShadow(),
           height = this.target.AABBBounds.height(),
@@ -10226,6 +10492,11 @@
     }, {
       key: "onUpdate",
       value: function onUpdate(end, ratio, out) {
+        return this.rect ? this.onUpdateRect(end, ratio, out) : this.line || this.area ? this.onUpdateLineOrArea(end, ratio, out) : void 0;
+      }
+    }, {
+      key: "onUpdateRect",
+      value: function onUpdateRect(end, ratio, out) {
         var _a, _b, _c, _d, _e, _f;
         var parentWidth = null !== (_a = this.target.attribute.width) && void 0 !== _a ? _a : 250,
           streamLength = null !== (_c = null === (_b = this.params) || void 0 === _b ? void 0 : _b.streamLength) && void 0 !== _c ? _c : parentWidth,
@@ -10246,6 +10517,114 @@
           }
         });
       }
+    }, {
+      key: "onUpdateLineOrArea",
+      value: function onUpdateLineOrArea(end, ratio, out) {
+        var target = this.line || this.area;
+        if (!target) return;
+        var customPath = target.pathProxy,
+          targetLine = this.target;
+        targetLine.cache || targetLine.cacheArea ? this._onUpdateLineOrAreaWithCache(customPath, targetLine, end, ratio, out) : this._onUpdateLineWithoutCache(customPath, targetLine, end, ratio, out);
+        var targetAttrs = targetLine.attribute;
+        target.setAttributes(Object.assign({
+          stroke: targetAttrs.stroke
+        }, target.attribute)), target.addUpdateBoundTag();
+      }
+    }, {
+      key: "_onUpdateLineOrAreaWithCache",
+      value: function _onUpdateLineOrAreaWithCache(customPath, g, end, ratio, out) {
+        if (customPath.clear(), "line" === g.type) {
+          var cache = g.cache;
+          Array.isArray(cache) || (cache = [cache]);
+          var totalLen = cache.reduce(function (l, c) {
+              return l + c.getLength();
+            }, 0),
+            curves = [];
+          return cache.forEach(function (c) {
+            c.curves.forEach(function (ci) {
+              return curves.push(ci);
+            });
+          }), this._updateCurves(customPath, curves, totalLen, ratio);
+        }
+        if ("area" === g.type) {
+          var _cache = g.cacheArea,
+            _totalLen = _cache.top.curves.reduce(function (a, b) {
+              return a + b.getLength();
+            }, 0);
+          return this._updateCurves(customPath, _cache.top.curves, _totalLen, ratio);
+        }
+      }
+    }, {
+      key: "_updateCurves",
+      value: function _updateCurves(customPath, curves, totalLen, ratio) {
+        var _a, _b;
+        var startLen = totalLen * ratio,
+          endLen = Math.min(null !== (_b = startLen + (null === (_a = this.params) || void 0 === _a ? void 0 : _a.streamLength)) && void 0 !== _b ? _b : 10, totalLen);
+        var lastLen = 0,
+          start = !1;
+        for (var i = 0; i < curves.length; i++) {
+          var curveItem = curves[i],
+            len = curveItem.getLength(),
+            startPercent = 1 - (lastLen + len - startLen) / len;
+          var curveForStart = void 0,
+            endPercent = 1 - (lastLen + len - endLen) / len;
+          if (lastLen < startLen && lastLen + len > startLen) if (start = !0, curveItem.p2 && curveItem.p3) {
+            var _divideCubic = divideCubic(curveItem, startPercent),
+              _divideCubic2 = _slicedToArray(_divideCubic, 2);
+              _divideCubic2[0];
+              var curve2 = _divideCubic2[1];
+            customPath.moveTo(curve2.p0.x, curve2.p0.y), curveForStart = curve2;
+          } else {
+            var p = curveItem.getPointAt(startPercent);
+            customPath.moveTo(p.x, p.y);
+          }
+          if (lastLen < endLen && lastLen + len > endLen) {
+            if (curveItem.p2 && curveItem.p3) {
+              curveForStart && (endPercent = (endLen - startLen) / curveForStart.getLength());
+              var _divideCubic3 = divideCubic(curveForStart || curveItem, endPercent),
+                _divideCubic4 = _slicedToArray(_divideCubic3, 1),
+                curve1 = _divideCubic4[0];
+              customPath.bezierCurveTo(curve1.p1.x, curve1.p1.y, curve1.p2.x, curve1.p2.y, curve1.p3.x, curve1.p3.y);
+            } else {
+              var _p = curveItem.getPointAt(endPercent);
+              customPath.lineTo(_p.x, _p.y);
+            }
+            break;
+          }
+          if (start) if (curveItem.p2 && curveItem.p3) {
+            var curve = curveForStart || curveItem;
+            customPath.bezierCurveTo(curve.p1.x, curve.p1.y, curve.p2.x, curve.p2.y, curve.p3.x, curve.p3.y);
+          } else customPath.lineTo(curveItem.p1.x, curveItem.p1.y);
+          lastLen += len;
+        }
+      }
+    }, {
+      key: "_onUpdateLineWithoutCache",
+      value: function _onUpdateLineWithoutCache(customPath, line, end, ratio, out) {
+        var _a, _b;
+        var _line$attribute = line.attribute,
+          points = _line$attribute.points,
+          curveType = _line$attribute.curveType;
+        if (!points || points.length < 2 || "linear" !== curveType) return;
+        var totalLen = 0;
+        for (var i = 1; i < points.length; i++) totalLen += PointService.distancePP(points[i], points[i - 1]);
+        var startLen = totalLen * ratio,
+          endLen = Math.min(null !== (_b = startLen + (null === (_a = this.params) || void 0 === _a ? void 0 : _a.streamLength)) && void 0 !== _b ? _b : 10, totalLen),
+          nextPoints = [];
+        var lastLen = 0;
+        for (var _i = 1; _i < points.length; _i++) {
+          var len = PointService.distancePP(points[_i], points[_i - 1]);
+          if (lastLen < startLen && lastLen + len > startLen && nextPoints.push(PointService.pointAtPP(points[_i - 1], points[_i], 1 - (lastLen + len - startLen) / len)), lastLen < endLen && lastLen + len > endLen) {
+            nextPoints.push(PointService.pointAtPP(points[_i - 1], points[_i], 1 - (lastLen + len - endLen) / len));
+            break;
+          }
+          nextPoints.length && nextPoints.push(points[_i]), lastLen += len;
+        }
+        if (nextPoints.length && !(nextPoints.length < 2)) {
+          customPath.clear(), customPath.moveTo(nextPoints[0].x, nextPoints[0].y);
+          for (var _i2 = 1; _i2 < nextPoints.length; _i2++) customPath.lineTo(nextPoints[_i2].x, nextPoints[_i2].y);
+        }
+      }
     }]);
     return StreamLight;
   }(ACustomAnimate);
@@ -10355,8 +10734,8 @@
           firstMatchedIndex = i, firstMatchedPoint = tagMap.get(this.toPoints[i].context);
           break;
         }
-        for (var _i = this.toPoints.length - 1; _i >= 0; _i -= 1) if (tagMap.has(this.toPoints[_i].context)) {
-          lastMatchedIndex = _i, lastMatchedPoint = tagMap.get(this.toPoints[_i].context);
+        for (var _i3 = this.toPoints.length - 1; _i3 >= 0; _i3 -= 1) if (tagMap.has(this.toPoints[_i3].context)) {
+          lastMatchedIndex = _i3, lastMatchedPoint = tagMap.get(this.toPoints[_i3].context);
           break;
         }
         var prevMatchedPoint = this.toPoints[0];
@@ -12700,6 +13079,7 @@
           if (!animate.validAttr(key)) return;
           var nextStepVal = nextProps[key],
             lastStepVal = null !== (_a = lastProps && lastProps[key]) && void 0 !== _a ? _a : subAnimate.getLastPropByName(key, step);
+          if (null == nextStepVal || null == lastStepVal) return void (nextAttributes[key] = nextStepVal);
           var match;
           match = animate.interpolateFunc && animate.interpolateFunc(key, ratio, lastStepVal, nextStepVal, nextAttributes), match || (match = animate.customInterpolate(key, ratio, lastStepVal, nextStepVal, _this7, nextAttributes), match || _this7.defaultInterpolate(nextStepVal, lastStepVal, key, nextAttributes, nextParsedProps, ratio) || _this7._interpolate(key, ratio, lastStepVal, nextStepVal, nextAttributes));
         }), step.parsedProps = nextParsedProps;
@@ -14416,12 +14796,12 @@
       }
     }, {
       key: "GetLayout",
-      value: function GetLayout(str, width, height, textAlign, textBaseline, lineHeight, suffix, wordBreak, miniApp) {
+      value: function GetLayout(str, width, height, textAlign, textBaseline, lineHeight, suffix, wordBreak, suffixPosition) {
         var linesLayout = [],
           bboxWH = [width, height],
           bboxOffset = [0, 0];
         for (; str.length > 0;) {
-          var _this$textMeasure$cli = this.textMeasure.clipTextWithSuffix(str, this.textOptions, width, suffix, wordBreak),
+          var _this$textMeasure$cli = this.textMeasure.clipTextWithSuffix(str, this.textOptions, width, suffix, wordBreak, suffixPosition),
             clipText = _this$textMeasure$cli.str;
           linesLayout.push({
             str: clipText,
@@ -14443,6 +14823,7 @@
         var suffix = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : "";
         var wordBreak = arguments.length > 5 ? arguments[5] : undefined;
         var lineWidth = arguments.length > 6 ? arguments[6] : undefined;
+        var suffixPosition = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : "end";
         lines = lines.map(function (l) {
           return l.toString();
         });
@@ -14451,7 +14832,7 @@
         if ("number" == typeof lineWidth && lineWidth !== 1 / 0) {
           var width;
           for (var i = 0, len = lines.length; i < len; i++) width = Math.min(this.textMeasure.measureTextWidth(lines[i], this.textOptions), lineWidth), linesLayout.push({
-            str: this.textMeasure.clipTextWithSuffix(lines[i], this.textOptions, width, suffix, wordBreak).str,
+            str: this.textMeasure.clipTextWithSuffix(lines[i], this.textOptions, width, suffix, wordBreak, suffixPosition).str,
             width: width
           });
           bboxWH[0] = lineWidth;
@@ -14729,12 +15110,12 @@
           stroke = _attribute$stroke === void 0 ? textTheme.stroke : _attribute$stroke,
           _attribute$lineWidth = attribute.lineWidth,
           lineWidth = _attribute$lineWidth === void 0 ? textTheme.lineWidth : _attribute$lineWidth,
-          _attribute$wordBreak = attribute.wordBreak;
-          _attribute$wordBreak === void 0 ? textTheme.wordBreak : _attribute$wordBreak;
-          var _attribute$ignoreBuf = attribute.ignoreBuf,
+          _attribute$ignoreBuf = attribute.ignoreBuf,
           ignoreBuf = _attribute$ignoreBuf === void 0 ? textTheme.ignoreBuf : _attribute$ignoreBuf,
           _attribute$whiteSpace = attribute.whiteSpace,
-          whiteSpace = _attribute$whiteSpace === void 0 ? textTheme.whiteSpace : _attribute$whiteSpace;
+          whiteSpace = _attribute$whiteSpace === void 0 ? textTheme.whiteSpace : _attribute$whiteSpace,
+          _attribute$suffixPosi = attribute.suffixPosition,
+          suffixPosition = _attribute$suffixPosi === void 0 ? textTheme.suffixPosition : _attribute$suffixPosi;
         if ("normal" === whiteSpace) return this.updateWrapAABBBounds(text);
         var buf = ignoreBuf ? 0 : Math.max(2, .075 * fontSize),
           textFontSize = attribute.fontSize || textTheme.fontSize,
@@ -14752,7 +15133,7 @@
                 fontSize: fontSize,
                 fontWeight: fontWeight,
                 fontFamily: fontFamily
-              }, maxLineWidth, strEllipsis, !1);
+              }, maxLineWidth, strEllipsis, !1, suffixPosition);
             str = data.str, width = data.width;
           } else {
             var _data = textMeasure.clipText(text.toString(), {
@@ -14812,6 +15193,8 @@
           lineWidth = _attribute$lineWidth2 === void 0 ? textTheme.lineWidth : _attribute$lineWidth2,
           _attribute$verticalMo = attribute.verticalMode,
           verticalMode = _attribute$verticalMo === void 0 ? textTheme.verticalMode : _attribute$verticalMo,
+          _attribute$suffixPosi2 = attribute.suffixPosition,
+          suffixPosition = _attribute$suffixPosi2 === void 0 ? textTheme.suffixPosition : _attribute$suffixPosi2,
           lineHeight = null !== (_a = calculateLineHeight(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : (attribute.fontSize || textTheme.fontSize) + buf;
         var _attribute$textAlign2 = attribute.textAlign,
           textAlign = _attribute$textAlign2 === void 0 ? textTheme.textAlign : _attribute$textAlign2,
@@ -14835,7 +15218,7 @@
                 fontSize: fontSize,
                 fontWeight: fontWeight,
                 fontFamily: fontFamily
-              }, maxLineWidth, strEllipsis, !1);
+              }, maxLineWidth, strEllipsis, !1, suffixPosition);
             verticalList = [data.verticalList], width = data.width;
           } else {
             var _data2 = textMeasure.clipTextVertical(verticalList[0], {
@@ -14884,6 +15267,8 @@
           lineWidth = _attribute$lineWidth3 === void 0 ? textTheme.lineWidth : _attribute$lineWidth3,
           _attribute$whiteSpace2 = attribute.whiteSpace,
           whiteSpace = _attribute$whiteSpace2 === void 0 ? textTheme.whiteSpace : _attribute$whiteSpace2,
+          _attribute$suffixPosi3 = attribute.suffixPosition,
+          suffixPosition = _attribute$suffixPosi3 === void 0 ? textTheme.suffixPosition : _attribute$suffixPosi3,
           lineHeight = null !== (_a = calculateLineHeight(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : attribute.fontSize || textTheme.fontSize;
         if ("normal" === whiteSpace) return this.updateWrapAABBBounds(text);
         if (!this.shouldUpdateShape() && (null === (_b = this.cache) || void 0 === _b ? void 0 : _b.layoutData)) {
@@ -14895,7 +15280,7 @@
             fontSize: fontSize,
             fontWeight: fontWeight,
             fontFamily: fontFamily
-          }, textMeasure).GetLayoutByLines(text, textAlign, textBaseline, lineHeight, !0 === ellipsis ? textTheme.ellipsis : ellipsis || void 0, !1, maxLineWidth),
+          }, textMeasure).GetLayoutByLines(text, textAlign, textBaseline, lineHeight, !0 === ellipsis ? textTheme.ellipsis : ellipsis || void 0, !1, maxLineWidth, suffixPosition),
           bbox = layoutData.bbox;
         return this.cache.layoutData = layoutData, this.clearUpdateShapeTag(), this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
       }
@@ -14926,6 +15311,8 @@
           lineWidth = _attribute$lineWidth4 === void 0 ? textTheme.lineWidth : _attribute$lineWidth4,
           _attribute$verticalMo2 = attribute.verticalMode,
           verticalMode = _attribute$verticalMo2 === void 0 ? textTheme.verticalMode : _attribute$verticalMo2,
+          _attribute$suffixPosi4 = attribute.suffixPosition,
+          suffixPosition = _attribute$suffixPosi4 === void 0 ? textTheme.suffixPosition : _attribute$suffixPosi4,
           lineHeight = null !== (_a = calculateLineHeight(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : (attribute.fontSize || textTheme.fontSize) + buf;
         var _attribute$textAlign4 = attribute.textAlign,
           textAlign = _attribute$textAlign4 === void 0 ? textTheme.textAlign : _attribute$textAlign4,
@@ -14958,7 +15345,7 @@
                   fontSize: fontSize,
                   fontWeight: fontWeight,
                   fontFamily: fontFamily
-                }, maxLineWidth, strEllipsis, !1);
+                }, maxLineWidth, strEllipsis, !1, suffixPosition);
               verticalLists[i] = data.verticalList, width = data.width;
             } else {
               var _data3 = textMeasure.clipTextVertical(verticalData, {
@@ -16094,6 +16481,7 @@
     }, {
       key: "_isValid",
       value: function _isValid() {
+        if (this.pathProxy) return !0;
         var _this$attribute = this.attribute,
           points = _this$attribute.points,
           segments = _this$attribute.segments;
@@ -17402,6 +17790,7 @@
     }, {
       key: "_isValid",
       value: function _isValid() {
+        if (this.pathProxy) return !0;
         var _this$attribute = this.attribute,
           points = _this$attribute.points,
           segments = _this$attribute.segments;
@@ -18822,8 +19211,12 @@
           boundStroke(tb1, scaledHalfLineWidth, miter, strokeBoundsBuffer), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2);
         }
         if (shadowBlur) {
-          var shadowBlurHalfWidth = shadowBlur / Math.abs(scaleX + scaleY);
-          boundStroke(tb1, shadowBlurHalfWidth, miter, strokeBoundsBuffer), aabbBounds.union(tb1);
+          var _attribute$shadowOffs = attribute.shadowOffsetX,
+            shadowOffsetX = _attribute$shadowOffs === void 0 ? theme.shadowOffsetX : _attribute$shadowOffs,
+            _attribute$shadowOffs2 = attribute.shadowOffsetY,
+            shadowOffsetY = _attribute$shadowOffs2 === void 0 ? theme.shadowOffsetY : _attribute$shadowOffs2,
+            shadowBlurWidth = shadowBlur / Math.abs(scaleX + scaleY) * 2 + Math.max(shadowOffsetX, shadowOffsetY);
+          boundStroke(tb1, shadowBlurWidth, miter, strokeBoundsBuffer + 1), aabbBounds.union(tb1);
         }
         this.combindShadowAABBBounds(aabbBounds, graphic), transformBoundsWithMatrix(aabbBounds, aabbBounds, graphic.transMatrix);
       }
@@ -20963,7 +21356,10 @@
     _createClass(DefaultBaseBackgroundRenderContribution, [{
       key: "drawShape",
       value: function drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, options) {
-        var background = graphic.attribute.background;
+        var _graphic$attribute = graphic.attribute,
+          background = _graphic$attribute.background,
+          _graphic$attribute$ba = _graphic$attribute.backgroundMode,
+          backgroundMode = _graphic$attribute$ba === void 0 ? graphicAttribute.backgroundMode : _graphic$attribute$ba;
         if (background) if (graphic.backgroundImg && graphic.resources) {
           var res = graphic.resources.get(background);
           if ("success" !== res.state || !res.data) return;
@@ -20978,9 +21374,17 @@
           }
           context.clip();
           var b = graphic.AABBBounds;
-          context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.drawImage(res.data, b.x1, b.y1, b.width(), b.height()), context.restore(), graphic.transMatrix.onlyTranslate() || context.setTransformForCurrent();
+          context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), this.doDrawImage(context, res.data, b, backgroundMode), context.restore(), graphic.transMatrix.onlyTranslate() || context.setTransformForCurrent();
         } else context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.fillStyle = background, context.fill(), context.highPerformanceRestore();
       }
+    }, {
+      key: "doDrawImage",
+      value: function doDrawImage(context, data, b, backgroundMode) {
+        if ("no-repeat" === backgroundMode) context.drawImage(data, b.x1, b.y1, b.width(), b.height());else {
+          var pattern = context.createPattern(data, backgroundMode);
+          context.fillStyle = pattern, context.translate(b.x1, b.y1), context.fillRect(0, 0, b.width(), b.height()), context.translate(-b.x1, -b.y1);
+        }
+      }
     }]);
     return DefaultBaseBackgroundRenderContribution;
   }();
@@ -21101,15 +21505,15 @@
       key: "drawShape",
       value: function drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, options) {
         this.textureMap || this.initTextureMap(context, graphic.stage);
-        var _graphic$attribute = graphic.attribute,
-          _graphic$attribute$te = _graphic$attribute.texture,
-          texture = _graphic$attribute$te === void 0 ? graphicAttribute.texture : _graphic$attribute$te,
-          _graphic$attribute$te2 = _graphic$attribute.textureColor,
-          textureColor = _graphic$attribute$te2 === void 0 ? graphicAttribute.textureColor : _graphic$attribute$te2,
-          _graphic$attribute$te3 = _graphic$attribute.textureSize,
-          textureSize = _graphic$attribute$te3 === void 0 ? graphicAttribute.textureSize : _graphic$attribute$te3,
-          _graphic$attribute$te4 = _graphic$attribute.texturePadding,
-          texturePadding = _graphic$attribute$te4 === void 0 ? graphicAttribute.texturePadding : _graphic$attribute$te4;
+        var _graphic$attribute2 = graphic.attribute,
+          _graphic$attribute2$t = _graphic$attribute2.texture,
+          texture = _graphic$attribute2$t === void 0 ? graphicAttribute.texture : _graphic$attribute2$t,
+          _graphic$attribute2$t2 = _graphic$attribute2.textureColor,
+          textureColor = _graphic$attribute2$t2 === void 0 ? graphicAttribute.textureColor : _graphic$attribute2$t2,
+          _graphic$attribute2$t3 = _graphic$attribute2.textureSize,
+          textureSize = _graphic$attribute2$t3 === void 0 ? graphicAttribute.textureSize : _graphic$attribute2$t3,
+          _graphic$attribute2$t4 = _graphic$attribute2.texturePadding,
+          texturePadding = _graphic$attribute2$t4 === void 0 ? graphicAttribute.texturePadding : _graphic$attribute2$t4;
         if (!texture) return;
         var pattern = this.textureMap.get(texture);
         if (!pattern) switch (texture) {
@@ -21359,13 +21763,16 @@
     _createClass(DefaultGroupBackgroundRenderContribution, [{
       key: "drawShape",
       value: function drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb) {
-        var background = graphic.attribute.background;
+        var _graphic$attribute = graphic.attribute,
+          background = _graphic$attribute.background,
+          _graphic$attribute$ba = _graphic$attribute.backgroundMode,
+          backgroundMode = _graphic$attribute$ba === void 0 ? graphicAttribute.backgroundMode : _graphic$attribute$ba;
         if (background) if (graphic.backgroundImg && graphic.resources) {
           var res = graphic.resources.get(background);
           if ("success" !== res.state || !res.data) return;
           context.highPerformanceSave(), context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0);
           var b = graphic.AABBBounds;
-          context.drawImage(res.data, b.x1, b.y1, b.width(), b.height()), context.highPerformanceRestore(), context.setTransformForCurrent();
+          this.doDrawImage(context, res.data, b, backgroundMode), context.highPerformanceRestore(), context.setTransformForCurrent();
         } else context.highPerformanceSave(), context.fillStyle = background, context.fill(), context.highPerformanceRestore();
       }
     }]);
@@ -21393,9 +21800,9 @@
       key: "drawShape",
       value: function drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb) {
         var _graphic$attribute = graphic.attribute,
-          background = _graphic$attribute.background;
-          _graphic$attribute.width;
-          _graphic$attribute.height;
+          background = _graphic$attribute.background,
+          _graphic$attribute$ba = _graphic$attribute.backgroundMode,
+          backgroundMode = _graphic$attribute$ba === void 0 ? graphicAttribute.backgroundMode : _graphic$attribute$ba;
         if (background) if (graphic.backgroundImg) {
           var res = graphic.resources.get(background);
           if ("success" !== res.state || !res.data) return;
@@ -21409,7 +21816,7 @@
             context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0), context.translate(scrollX, scrollY);
           }
           var b = graphic.AABBBounds;
-          context.drawImage(res.data, b.x1, b.y1, b.width(), b.height()), context.restore(), graphic.transMatrix.onlyTranslate() || context.setTransformForCurrent();
+          this.doDrawImage(context, res.data, b, backgroundMode), context.restore(), graphic.transMatrix.onlyTranslate() || context.setTransformForCurrent();
         } else if (isObject$1(background)) {
           var stroke = background.stroke,
             fill = background.fill,
@@ -21426,9 +21833,9 @@
           var _getActualPosition = getActualPosition(graphic),
             _x = _getActualPosition.x,
             _y = _getActualPosition.y,
-            _width = _getActualPosition.width,
-            _height = _getActualPosition.height;
-          cornerRadius ? createRectPath(context, _x - expandX, _y - expandY, _width + 2 * expandX, _height + 2 * expandY, cornerRadius) : context.rect(_x - expandX, _y - expandY, _width + 2 * expandX, _height + 2 * expandY), context.globalAlpha = 1, fill && (context.fillStyle = fill, context.fill()), stroke && lineWidth > 0 && (context.lineWidth = lineWidth, context.strokeStyle = stroke, context.stroke());
+            width = _getActualPosition.width,
+            height = _getActualPosition.height;
+          cornerRadius ? createRectPath(context, _x - expandX, _y - expandY, width + 2 * expandX, height + 2 * expandY, cornerRadius) : context.rect(_x - expandX, _y - expandY, width + 2 * expandX, height + 2 * expandY), context.globalAlpha = 1, fill && (context.fillStyle = fill, context.fill()), stroke && lineWidth > 0 && (context.lineWidth = lineWidth, context.strokeStyle = stroke, context.stroke());
         } else {
           context.beginPath();
           var _b = graphic.AABBBounds;
@@ -22759,7 +23166,8 @@
           var b = getRectIntersect(dirtyBounds, stage.dirtyBounds, !1);
           dirtyBounds.x1 = Math.floor(b.x1), dirtyBounds.y1 = Math.floor(b.y1), dirtyBounds.x2 = Math.ceil(b.x2), dirtyBounds.y2 = Math.ceil(b.y2);
         }
-        this.backupDirtyBounds.copy(dirtyBounds), context.inuse = !0, context.clearMatrix(), context.setTransformForCurrent(!0);
+        var d = context.dpr % 1;
+        (d || .5 !== d) && (dirtyBounds.x1 = Math.floor(dirtyBounds.x1 * context.dpr) / context.dpr, dirtyBounds.y1 = Math.floor(dirtyBounds.y1 * context.dpr) / context.dpr, dirtyBounds.x2 = Math.ceil(dirtyBounds.x2 * context.dpr) / context.dpr, dirtyBounds.y2 = Math.ceil(dirtyBounds.y2 * context.dpr) / context.dpr), this.backupDirtyBounds.copy(dirtyBounds), context.inuse = !0, context.clearMatrix(), context.setTransformForCurrent(!0);
         var drawInArea = dirtyBounds.width() * context.dpr !== context.canvas.width || dirtyBounds.height() * context.dpr !== context.canvas.height;
         context.save(), context.translate(x, y, !0), drawInArea && (context.beginPath(), context.rect(dirtyBounds.x1, dirtyBounds.y1, dirtyBounds.width(), dirtyBounds.height()), context.clip()), stage.camera && (this.dirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0), this.backupDirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0)), this.clearScreen(renderService, context, drawContext), context.save(), renderService.renderTreeRoots.sort(function (a, b) {
           var _a, _b;
@@ -22884,7 +23292,7 @@
     }, {
       key: "selectRenderByType",
       value: function selectRenderByType(type) {
-        return console.warn("未知错误，不应该走到这里"), null;
+        return Logger.getInstance().warn("未知错误，不应该走到这里"), null;
       }
     }, {
       key: "selectRenderByNumberType",
@@ -29216,7 +29624,7 @@
       var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
       _classCallCheck(this, Gesture);
       var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-      _this = _super.call(this), _this.cachedEvents = [], _this.startPoints = [], _this.processEvent = {}, _this.throttleTimer = 0, _this.emitThrottles = [], _this.onStart = function (ev) {
+      _this = _super.call(this), _this.cachedEvents = [], _this.startPoints = [], _this.processEvent = {}, _this.throttleTimer = 0, _this.emitThrottles = [], _this.lastTapTarget = null, _this.onStart = function (ev) {
         _this.reset(), _this.startTime = clock.now();
         var _assertThisInitialize = _assertThisInitialized(_this),
           cachedEvents = _assertThisInitialize.cachedEvents,
@@ -29300,7 +29708,7 @@
               velocity > _this.config.swipe.velocity && distance > _this.config.swipe.threshold && (endEvent.velocity = velocity, endEvent.direction = calcDirection(prevMovePoint, lastMovePoint), _this.triggerEvent("swipe", endEvent));
             }
           }
-          now - _this.lastTapTime < _this.config.tap.interval ? _this.tapCount++ : _this.tapCount = 1, _this.lastTapTime = now, 1 === _this.tapCount ? _this.triggerEvent("tap", endEvent) : 2 === _this.tapCount && (_this.triggerEvent("doubletap", endEvent), _this.tapCount = 0);
+          now - _this.lastTapTime < _this.config.tap.interval && ev.target === _this.lastTapTarget ? _this.tapCount++ : _this.tapCount = 1, _this.lastTapTime = now, _this.lastTapTarget = ev.target, 1 === _this.tapCount ? _this.triggerEvent("tap", endEvent) : 2 === _this.tapCount && (_this.triggerEvent("doubletap", endEvent), _this.tapCount = 0);
         }
         for (var i = 0, len = cachedEvents.length; i < len; i++) if (cachedEvents[i].pointerId === endEvent.pointerId) {
           cachedEvents.splice(i, 1), startPoints.splice(i, 1);
@@ -30751,7 +31159,7 @@
     }, {
       key: "reset",
       value: function reset() {
-        this.stack.length && console.warn("可能存在bug，matrix没有清空"), this.matrix.setValue(1, 0, 0, 1, 0, 0), this.applyedMatrix = new Matrix(1, 0, 0, 1, 0, 0), this.stack.length = 0, this.nativeContext.setTransform(1, 0, 0, 1, 0, 0);
+        this.stack.length && Logger.getInstance().warn("可能存在bug，matrix没有清空"), this.matrix.setValue(1, 0, 0, 1, 0, 0), this.applyedMatrix = new Matrix(1, 0, 0, 1, 0, 0), this.stack.length = 0, this.nativeContext.setTransform(1, 0, 0, 1, 0, 0);
       }
     }, {
       key: "getCanvas",
@@ -34686,7 +35094,7 @@
 
   var roughModule = _roughModule;
 
-  const version = "0.16.17";
+  const version = "0.16.18";
   loadAllModule(container);
 
   exports.ACustomAnimate = ACustomAnimate;