@visactor/vrender-components 0.16.17 → 0.16.18

package/dist/index.js

@@ -4473,7 +4473,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,
@@ -4482,7 +4483,7 @@
     textureColor: "black",
     textureSize: 10,
     texturePadding: 2,
-    backgroundMode: 0,
+    backgroundMode: "no-repeat",
     blur: 0,
     cursor: null,
     html: null
@@ -4568,7 +4569,7 @@
   var DefaultPathAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
     path: new CustomPath2D(),
     customPath: function customPath() {
-      console.warn("空函数");
+      vutils.Logger.getInstance().warn("空函数");
     }
   });
   var DefaultPolygonAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
@@ -4832,7 +4833,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;
@@ -4871,7 +4872,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));
@@ -4880,7 +4881,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);
@@ -4894,7 +4909,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 {
@@ -4905,16 +4920,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,
@@ -4924,17 +4991,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: "",
@@ -4951,12 +5051,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;
@@ -5592,7 +5692,7 @@
             var parentTheme = parentGroup.theme;
             (parentTheme.dirty || force) && parentTheme.applyTheme(parentGroup, pt, !0), this.userTheme ? combineTheme(this.userTheme, parentTheme.userTheme, !1) : this.userTheme = vutils.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, vutils.Logger.getInstance().warn("未知错误，走到不应该走的区域里")), this.dirty = !1);
         }
         return this.combinedTheme;
       }
@@ -5864,7 +5964,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 && vutils.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 {
@@ -6193,7 +6293,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 vutils.Point(), this.page = new vutils.Point(), this.canvas = new vutils.Point(), this.viewport = new vutils.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",
@@ -6504,7 +6616,7 @@
             handler = new ManualTickHandler();
             break;
           default:
-            console.warn("非法的计时器模式"), handler = new RAFTickHandler();
+            vutils.Logger.getInstance().warn("非法的计时器模式"), handler = new RAFTickHandler();
         }
         return !!handler.avaliable() && (this.tickerHandler && this.tickerHandler.release(), this.tickerHandler = handler, !0);
       }
@@ -7299,7 +7411,7 @@
           }
           lastStep = lastStep.prev;
         }
-        return console.warn("未知错误，step中找不到属性"), step.props[name];
+        return vutils.Logger.getInstance().warn("未知错误，step中找不到属性"), step.props[name];
       }
     }, {
       key: "updateTarget",
@@ -8405,6 +8517,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;
@@ -9886,12 +9999,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,
@@ -9913,6 +10026,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();
         });
@@ -9921,7 +10035,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;
@@ -10199,12 +10313,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,
@@ -10222,7 +10336,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(), {
@@ -10282,6 +10396,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,
@@ -10305,7 +10421,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], {
@@ -10354,6 +10470,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)) {
@@ -10365,7 +10483,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;
       }
@@ -10396,6 +10514,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,
@@ -10428,7 +10548,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, {
@@ -11564,6 +11684,7 @@
     }, {
       key: "_isValid",
       value: function _isValid() {
+        if (this.pathProxy) return !0;
         var _this$attribute = this.attribute,
           points = _this$attribute.points,
           segments = _this$attribute.segments;
@@ -12699,6 +12820,7 @@
     }, {
       key: "_isValid",
       value: function _isValid() {
+        if (this.pathProxy) return !0;
         var _this$attribute = this.attribute,
           points = _this$attribute.points,
           segments = _this$attribute.segments;
@@ -13933,8 +14055,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), vutils.transformBoundsWithMatrix(aabbBounds, aabbBounds, graphic.transMatrix);
       }
@@ -16062,7 +16188,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;
@@ -16077,9 +16206,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;
   }();
@@ -16200,15 +16337,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) {
@@ -16458,13 +16595,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();
       }
     }]);
@@ -16492,9 +16632,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;
@@ -16508,7 +16648,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 (vutils.isObject(background)) {
           var stroke = background.stroke,
             fill = background.fill,
@@ -16525,9 +16665,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;
@@ -17855,7 +17995,8 @@
           var b = vutils.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;
@@ -17980,7 +18121,7 @@
     }, {
       key: "selectRenderByType",
       value: function selectRenderByType(type) {
-        return console.warn("未知错误，不应该走到这里"), null;
+        return vutils.Logger.getInstance().warn("未知错误，不应该走到这里"), null;
       }
     }, {
       key: "selectRenderByNumberType",
@@ -28288,7 +28429,7 @@
           const { maxWidth, maxHeight, maxCol = 1, maxRow = 2, item = {}, pager = {}, disableTriggerEvent } = this.attribute;
           const { spaceCol = DEFAULT_ITEM_SPACE_COL, spaceRow = DEFAULT_ITEM_SPACE_ROW } = item;
           const itemsContainer = this._itemsContainer;
-          const { animation = true, animationDuration = 450, animationEasing = 'quadIn', space: pagerSpace = DEFAULT_PAGER_SPACE } = pager, pageStyle = __rest(pager, ["animation", "animationDuration", "animationEasing", "space"]);
+          const { animation = true, animationDuration = 450, animationEasing = 'quadIn', space: pagerSpace = DEFAULT_PAGER_SPACE, position = 'middle' } = pager, pageStyle = __rest(pager, ["animation", "animationDuration", "animationEasing", "space", "position"]);
           let pagerComp;
           let pageHeight = 0;
           let pageWidth = 0;
@@ -28325,10 +28466,20 @@
                   }
                   startX += spaceCol + width;
               });
+              pagerComp.setAttribute('total', Math.ceil(pages / maxRow));
+              let y;
+              if (position === 'start') {
+                  y = renderStartY;
+              }
+              else if (position === 'end') {
+                  y = renderStartY + pageHeight - pagerComp.AABBBounds.height() / 2;
+              }
+              else {
+                  y = renderStartY + pageHeight / 2 - pagerComp.AABBBounds.height() / 2;
+              }
               pagerComp.setAttributes({
-                  total: Math.ceil(pages / maxRow),
                   x: pageWidth,
-                  y: renderStartY + pageHeight / 2 - pagerComp.AABBBounds.height() / 2
+                  y
               });
           }
           else {
@@ -28356,9 +28507,19 @@
                   }
                   startY += spaceRow + height;
               });
+              pagerComp.setAttribute('total', Math.ceil(pages / maxCol));
+              let x;
+              if (position === 'start') {
+                  x = 0;
+              }
+              else if (position === 'end') {
+                  x = pageWidth - pagerComp.AABBBounds.width();
+              }
+              else {
+                  x = (pageWidth - pagerComp.AABBBounds.width()) / 2;
+              }
               pagerComp.setAttributes({
-                  total: Math.ceil(pages / maxCol),
-                  x: (pageWidth - pagerComp.AABBBounds.width()) / 2,
+                  x,
                   y: maxHeight - pagerComp.AABBBounds.height()
               });
           }
@@ -29054,7 +29215,11 @@
           const railLen = isHorizontal ? railWidth : railHeight;
           const handlerStart = max === min ? (position === 'start' ? 0 : railLen) : ((value - min) / (max - min)) * railLen;
           const textSpace = (_a = handlerText.space) !== null && _a !== void 0 ? _a : 4;
-          const textStyle = Object.assign({ text: (handlerText === null || handlerText === void 0 ? void 0 : handlerText.formatter) ? handlerText.formatter(value) : value.toFixed((_b = handlerText === null || handlerText === void 0 ? void 0 : handlerText.precision) !== null && _b !== void 0 ? _b : 0), lineHeight: (_c = handlerText.style) === null || _c === void 0 ? void 0 : _c.lineHeight, cursor: slidable === false ? 'default' : getDefaultCursor(isHorizontal) }, handlerText.style);
+          const textStyle = {
+              text: (handlerText === null || handlerText === void 0 ? void 0 : handlerText.formatter) ? handlerText.formatter(value) : value.toFixed((_b = handlerText === null || handlerText === void 0 ? void 0 : handlerText.precision) !== null && _b !== void 0 ? _b : 0),
+              lineHeight: (_c = handlerText.style) === null || _c === void 0 ? void 0 : _c.lineHeight,
+              cursor: slidable === false ? 'default' : getDefaultCursor(isHorizontal)
+          };
           if (isHorizontal) {
               if (align === 'top') {
                   textStyle.textBaseline = 'bottom';
@@ -29083,7 +29248,7 @@
                   textStyle.y = handlerStart;
               }
           }
-          const textShape = createText(textStyle);
+          const textShape = createText(Object.assign(Object.assign({}, textStyle), handlerText.style));
           return textShape;
       }
       _bindEvents() {
@@ -29478,6 +29643,7 @@
     Z
 `;
   }
+
   class SizeContinuousLegend extends LegendBase {
       constructor(attributes) {
           super(vutils.merge({}, SizeContinuousLegend.defaultAttributes, attributes));
@@ -31686,7 +31852,7 @@
       }
   };
 
-  const version = "0.16.17";
+  const version = "0.16.18";
 
   exports.AbstractComponent = AbstractComponent;
   exports.ArcInfo = ArcInfo;