@visactor/vrender 1.0.43-alpha.0 → 1.0.43-alpha.1

package/dist/index.js

@@ -31726,6 +31726,11 @@
       }
     }
     class DefaultTicker extends EventEmitter {
+      pushFrameTime(time) {
+        this.frameTimeHistory.push(time);
+        const overflow = this.frameTimeHistory.length - 600;
+        overflow > 0 && this.frameTimeHistory.splice(0, overflow);
+      }
       constructor(stage) {
         super(), this.timelines = [], this.frameTimeHistory = [], this.handleTick = (handler, params) => {
           const {
@@ -31733,10 +31738,10 @@
           } = null != params ? params : {};
           if (this.ifCanStop()) return this.stop(), !1;
           const currentTime = handler.getTime();
-          this._lastTickTime = currentTime, this.lastFrameTime < 0 && (this.lastFrameTime = currentTime - this.interval + this.timeOffset, this.frameTimeHistory.push(this.lastFrameTime));
+          this._lastTickTime = currentTime, this.lastFrameTime < 0 && (this.lastFrameTime = currentTime - this.interval + this.timeOffset, this.pushFrameTime(this.lastFrameTime));
           const delta = currentTime - this.lastFrameTime,
             skip = this.checkSkip(delta);
-          return skip || (this._handlerTick(delta), this.lastFrameTime = currentTime, this.frameTimeHistory.push(this.lastFrameTime)), once || handler.tick(this.interval, this.handleTick), !skip;
+          return skip || (this._handlerTick(delta), this.lastFrameTime = currentTime, this.pushFrameTime(this.lastFrameTime)), once || handler.tick(this.interval, this.handleTick), !skip;
         }, this._handlerTick = delta => {
           this.status === exports.STATUS.RUNNING && (this.tickCounts++, this.timelines.forEach(timeline => {
             timeline.tick(delta);
@@ -31828,7 +31833,7 @@
       }
       release() {
         var _a;
-        this.stop(), this.timelines = [], null === (_a = this.tickerHandler) || void 0 === _a || _a.release(), this.tickerHandler = null, this.lastFrameTime = -1, application.global.hooks.onSetEnv.unTap("graph-ticker", this._handleGraphTick);
+        this.stop(), this.timelines = [], this.frameTimeHistory.length = 0, null === (_a = this.tickerHandler) || void 0 === _a || _a.release(), this.tickerHandler = null, this.lastFrameTime = -1, application.global.hooks.onSetEnv.unTap("graph-ticker", this._handleGraphTick);
       }
       checkSkip(delta) {
         var _a, _b, _c;
@@ -44973,16 +44978,6 @@
         strokeBoundsBuffer: 0
       }
     };
-    const LAYOUT_LEVEL = {
-      background: 0,
-      preview: 1,
-      dragMask: 2,
-      selectedBackground: 3,
-      selectedPreview: 4,
-      handler: 5,
-      handlerText: 5,
-      handlerMask: 999
-    };
 
     const isTextOverflow = (componentBoundsLike, textBounds, layout, isHorizontal) => {
       if (!textBounds) return !1;
@@ -45114,14 +45109,12 @@
           x: position.x + start * width,
           y: position.y,
           width: (end - start) * width,
-          height: height,
-          zIndex: LAYOUT_LEVEL.dragMask
+          height: height
         }, dragMaskStyle), "rect") : this._dragMask = this._getContainer().createOrUpdateChild("dragMask", Object.assign({
           x: position.x,
           y: position.y + start * height,
           width: width,
-          height: (end - start) * height,
-          zIndex: LAYOUT_LEVEL.dragMask
+          height: (end - start) * height
         }, dragMaskStyle), "rect"), {
           start: start,
           end: end
@@ -45145,8 +45138,7 @@
           y: position.y,
           width: width,
           height: height,
-          cursor: brushSelect ? "crosshair" : "auto",
-          zIndex: LAYOUT_LEVEL.background
+          cursor: brushSelect ? "crosshair" : "auto"
         }, backgroundStyle), {
           pickable: !zoomLock && (null === (_a = backgroundStyle.pickable) || void 0 === _a || _a)
         }), "rect");
@@ -45179,8 +45171,7 @@
               x: position.x + start * width,
               y: position.y - middleHandlerBackgroundSize,
               width: (end - start) * width,
-              height: middleHandlerBackgroundSize,
-              zIndex: LAYOUT_LEVEL.handler
+              height: middleHandlerBackgroundSize
             }, null === (_d = middleHandlerStyle.background) || void 0 === _d ? void 0 : _d.style), {
               pickable: !zoomLock && (null === (_g = null === (_f = null === (_e = middleHandlerStyle.background) || void 0 === _e ? void 0 : _e.style) || void 0 === _f ? void 0 : _f.pickable) || void 0 === _g || _g)
             }), "rect"), this._middleHandlerSymbol = group.createOrUpdateChild("middleHandlerSymbol", Object.assign(Object.assign({
@@ -45188,29 +45179,24 @@
               y: position.y - middleHandlerBackgroundSize / 2,
               strokeBoundsBuffer: 0,
               angle: 0,
-              symbolType: null !== (_j = null === (_h = middleHandlerStyle.icon) || void 0 === _h ? void 0 : _h.symbolType) && void 0 !== _j ? _j : "square",
-              zIndex: LAYOUT_LEVEL.handler
+              symbolType: null !== (_j = null === (_h = middleHandlerStyle.icon) || void 0 === _h ? void 0 : _h.symbolType) && void 0 !== _j ? _j : "square"
             }, middleHandlerStyle.icon), {
               pickable: !zoomLock && (null === (_k = middleHandlerStyle.icon.pickable) || void 0 === _k || _k)
             }), "symbol");
           }
-          this._startHandler = group.createOrUpdateChild("startHandler", Object.assign(Object.assign(Object.assign(Object.assign({
+          this._startHandler = group.createOrUpdateChild("startHandler", Object.assign(Object.assign(Object.assign({
             x: position.x + start * width,
             y: position.y + height / 2,
             size: height,
             symbolType: null !== (_l = startHandlerStyle.symbolType) && void 0 !== _l ? _l : "square"
-          }, DEFAULT_HANDLER_ATTR_MAP.horizontal), {
-            zIndex: LAYOUT_LEVEL.handler
-          }), startHandlerStyle), {
+          }, DEFAULT_HANDLER_ATTR_MAP.horizontal), startHandlerStyle), {
             pickable: !zoomLock && (null === (_m = startHandlerStyle.pickable) || void 0 === _m || _m)
-          }), "symbol"), this._endHandler = group.createOrUpdateChild("endHandler", Object.assign(Object.assign(Object.assign(Object.assign({
+          }), "symbol"), this._endHandler = group.createOrUpdateChild("endHandler", Object.assign(Object.assign(Object.assign({
             x: position.x + end * width,
             y: position.y + height / 2,
             size: height,
             symbolType: null !== (_o = endHandlerStyle.symbolType) && void 0 !== _o ? _o : "square"
-          }, DEFAULT_HANDLER_ATTR_MAP.horizontal), {
-            zIndex: LAYOUT_LEVEL.handler
-          }), endHandlerStyle), {
+          }, DEFAULT_HANDLER_ATTR_MAP.horizontal), endHandlerStyle), {
             pickable: !zoomLock && (null === (_p = endHandlerStyle.pickable) || void 0 === _p || _p)
           }), "symbol");
           const startHandlerWidth = Math.max(this._startHandler.AABBBounds.width(), startHandlerMinSize),
@@ -45224,7 +45210,7 @@
             height: startHandlerHeight,
             fill: "white",
             fillOpacity: 0,
-            zIndex: LAYOUT_LEVEL.handlerMask
+            zIndex: 999
           }, DEFAULT_HANDLER_ATTR_MAP.horizontal), {
             pickable: !zoomLock
           }), "rect"), this._endHandlerMask = group.createOrUpdateChild("endHandlerMask", Object.assign(Object.assign({
@@ -45234,7 +45220,7 @@
             height: endHandlerHeight,
             fill: "white",
             fillOpacity: 0,
-            zIndex: LAYOUT_LEVEL.handlerMask
+            zIndex: 999
           }, DEFAULT_HANDLER_ATTR_MAP.horizontal), {
             pickable: !zoomLock
           }), "rect");
@@ -45245,8 +45231,7 @@
               x: "left" === orient ? position.x - middleHandlerBackgroundSize : position.x + width,
               y: position.y + start * height,
               width: middleHandlerBackgroundSize,
-              height: (end - start) * height,
-              zIndex: LAYOUT_LEVEL.handler
+              height: (end - start) * height
             }, null === (_r = middleHandlerStyle.background) || void 0 === _r ? void 0 : _r.style), {
               pickable: !zoomLock && (null === (_u = null === (_t = null === (_s = middleHandlerStyle.background) || void 0 === _s ? void 0 : _s.style) || void 0 === _t ? void 0 : _t.pickable) || void 0 === _u || _u)
             }), "rect"), this._middleHandlerSymbol = group.createOrUpdateChild("middleHandlerSymbol", Object.assign(Object.assign({
@@ -45254,27 +45239,23 @@
               y: position.y + (start + end) / 2 * height,
               angle: Math.PI / 180 * 90,
               symbolType: null !== (_w = null === (_v = middleHandlerStyle.icon) || void 0 === _v ? void 0 : _v.symbolType) && void 0 !== _w ? _w : "square",
-              strokeBoundsBuffer: 0,
-              zIndex: LAYOUT_LEVEL.handler
+              strokeBoundsBuffer: 0
             }, middleHandlerStyle.icon), {
               pickable: !zoomLock && (null === (_y = null === (_x = middleHandlerStyle.icon) || void 0 === _x ? void 0 : _x.pickable) || void 0 === _y || _y)
             }), "symbol");
           }
-          this._startHandler = group.createOrUpdateChild("startHandler", Object.assign(Object.assign(Object.assign(Object.assign({
+          this._startHandler = group.createOrUpdateChild("startHandler", Object.assign(Object.assign(Object.assign({
             x: position.x + width / 2,
             y: position.y + start * height,
             size: width,
             symbolType: null !== (_z = startHandlerStyle.symbolType) && void 0 !== _z ? _z : "square"
-          }, DEFAULT_HANDLER_ATTR_MAP.vertical), {
-            zIndex: LAYOUT_LEVEL.handler
-          }), startHandlerStyle), {
+          }, DEFAULT_HANDLER_ATTR_MAP.vertical), startHandlerStyle), {
             pickable: !zoomLock && (null === (_0 = startHandlerStyle.pickable) || void 0 === _0 || _0)
           }), "symbol"), this._endHandler = group.createOrUpdateChild("endHandler", Object.assign(Object.assign(Object.assign({
             x: position.x + width / 2,
             y: position.y + end * height,
             size: width,
-            symbolType: null !== (_1 = endHandlerStyle.symbolType) && void 0 !== _1 ? _1 : "square",
-            zIndex: LAYOUT_LEVEL.handler
+            symbolType: null !== (_1 = endHandlerStyle.symbolType) && void 0 !== _1 ? _1 : "square"
           }, DEFAULT_HANDLER_ATTR_MAP.vertical), endHandlerStyle), {
             pickable: !zoomLock && (null === (_2 = endHandlerStyle.pickable) || void 0 === _2 || _2)
           }), "symbol");
@@ -45289,7 +45270,7 @@
             height: endHandlerWidth,
             fill: "white",
             fillOpacity: 0,
-            zIndex: LAYOUT_LEVEL.handlerMask
+            zIndex: 999
           }, DEFAULT_HANDLER_ATTR_MAP.vertical), {
             pickable: !zoomLock
           }), "rect"), this._endHandlerMask = group.createOrUpdateChild("endHandlerMask", Object.assign(Object.assign({
@@ -45299,7 +45280,7 @@
             height: endHandlerWidth,
             fill: "white",
             fillOpacity: 0,
-            zIndex: LAYOUT_LEVEL.handlerMask
+            zIndex: 999
           }, DEFAULT_HANDLER_ATTR_MAP.vertical), {
             pickable: !zoomLock
           }), "rect");
@@ -45328,8 +45309,7 @@
           y: position.y,
           width: (end - start) * width,
           height: height,
-          cursor: brushSelect ? "crosshair" : "move",
-          zIndex: LAYOUT_LEVEL.selectedBackground
+          cursor: brushSelect ? "crosshair" : "move"
         }, selectedBackgroundStyle), {
           pickable: !zoomLock && (null === (_a = selectedBackgroundChartStyle.pickable) || void 0 === _a || _a)
         }), "rect") : this._selectedBackground = group.createOrUpdateChild("selectedBackground", Object.assign(Object.assign({
@@ -45337,16 +45317,14 @@
           y: position.y + start * height,
           width: width,
           height: (end - start) * height,
-          cursor: brushSelect ? "crosshair" : "move",
-          zIndex: LAYOUT_LEVEL.selectedBackground
+          cursor: brushSelect ? "crosshair" : "move"
         }, selectedBackgroundStyle), {
           pickable: !zoomLock && (null === (_b = selectedBackgroundStyle.pickable) || void 0 === _b || _b)
         }), "rect");
       }
       _setPreviewAttributes(type, group) {
         this._previewGroup || (this._previewGroup = group.createOrUpdateChild("previewGroup", {
-          pickable: !1,
-          zIndex: LAYOUT_LEVEL.preview
+          pickable: !1
         }, "group")), "line" === type ? this._previewLine = this._previewGroup.createOrUpdateChild("previewLine", {}, "line") : this._previewArea = this._previewGroup.createOrUpdateChild("previewArea", {
           curveType: "basis"
         }, "area");
@@ -45365,8 +45343,7 @@
       }
       _setSelectedPreviewClipAttributes(type, group) {
         this._selectedPreviewGroupClip || (this._selectedPreviewGroupClip = group.createOrUpdateChild("selectedPreviewGroupClip", {
-          pickable: !1,
-          zIndex: LAYOUT_LEVEL.selectedPreview
+          pickable: !1
         }, "group"), this._selectedPreviewGroup = this._selectedPreviewGroupClip.createOrUpdateChild("selectedPreviewGroup", {}, "group"));
         const {
             start: start,
@@ -49201,7 +49178,31 @@
         return graphicCreator.symbol(style);
       }
       _renderHandlerText(value, position) {
-        var _a, _b, _c;
+        return graphicCreator.text(this._getHandlerTextAttributes(value, position));
+      }
+      _getHandlerPosition(isStart) {
+        return this.attribute.range && isStart ? "start" : "end";
+      }
+      _getHandlerTextStyle(value, position) {
+        const {
+          align: align,
+          handlerSize = 14,
+          handlerText = {},
+          railHeight: railHeight,
+          railWidth: railWidth,
+          slidable: slidable
+        } = this.attribute;
+        return isFunction$1(handlerText.style) ? handlerText.style(value, position, {
+          layout: this.attribute.layout,
+          align: align,
+          railWidth: railWidth,
+          railHeight: railHeight,
+          handlerSize: handlerSize,
+          slidable: slidable
+        }) : handlerText.style;
+      }
+      _getHandlerTextAttributes(value, position) {
+        var _a, _b;
         const {
             align: align,
             handlerSize = 14,
@@ -49213,13 +49214,13 @@
           isHorizontal = this._isHorizontal,
           pos = this.calculatePosByValue(value, position),
           textSpace = null !== (_a = handlerText.space) && void 0 !== _a ? _a : 4,
+          handlerTextStyle = this._getHandlerTextStyle(value, position),
           textStyle = {
             text: handlerText.formatter ? handlerText.formatter(value) : value.toFixed(null !== (_b = handlerText.precision) && void 0 !== _b ? _b : 0),
-            lineHeight: null === (_c = handlerText.style) || void 0 === _c ? void 0 : _c.lineHeight,
+            lineHeight: null == handlerTextStyle ? void 0 : handlerTextStyle.lineHeight,
             cursor: !1 === slidable ? "default" : getDefaultCursor(isHorizontal)
           };
-        isHorizontal ? "top" === align ? (textStyle.textBaseline = "bottom", textStyle.textAlign = "center", textStyle.x = pos, textStyle.y = (railHeight - handlerSize) / 2 - textSpace) : (textStyle.textBaseline = "top", textStyle.textAlign = "center", textStyle.x = pos, textStyle.y = (railHeight + handlerSize) / 2 + textSpace) : "left" === align ? (textStyle.textBaseline = "middle", textStyle.textAlign = "end", textStyle.x = (railWidth - handlerSize) / 2 - textSpace, textStyle.y = pos) : (textStyle.textBaseline = "middle", textStyle.textAlign = "start", textStyle.x = (railWidth + handlerSize) / 2 + textSpace, textStyle.y = pos);
-        return graphicCreator.text(Object.assign(Object.assign({}, textStyle), handlerText.style));
+        return isHorizontal ? "top" === align ? (textStyle.textBaseline = "bottom", textStyle.textAlign = "center", textStyle.x = pos, textStyle.y = (railHeight - handlerSize) / 2 - textSpace) : (textStyle.textBaseline = "top", textStyle.textAlign = "center", textStyle.x = pos, textStyle.y = (railHeight + handlerSize) / 2 + textSpace) : "left" === align ? (textStyle.textBaseline = "middle", textStyle.textAlign = "end", textStyle.x = (railWidth - handlerSize) / 2 - textSpace, textStyle.y = pos) : (textStyle.textBaseline = "middle", textStyle.textAlign = "start", textStyle.x = (railWidth + handlerSize) / 2 + textSpace, textStyle.y = pos), Object.assign(Object.assign({}, textStyle), handlerTextStyle);
       }
       _renderTooltip() {
         var _a;
@@ -49347,31 +49348,19 @@
         }
       }
       _updateHandler(handler, position, value) {
-        var _a;
         const isHorizontal = this._isHorizontal;
         handler.setAttribute(isHorizontal ? "x" : "y", position);
         const updateHandlerText = handler.name === exports.SLIDER_ELEMENT_NAME.startHandler ? this._startHandlerText : this._endHandlerText;
         if (updateHandlerText) {
-          const {
-            handlerText = {}
-          } = this.attribute;
-          updateHandlerText.setAttributes({
-            text: handlerText.formatter ? handlerText.formatter(value) : value.toFixed(null !== (_a = handlerText.precision) && void 0 !== _a ? _a : 0),
-            [isHorizontal ? "x" : "y"]: position
-          });
+          const handlerPosition = this._getHandlerPosition(handler.name === exports.SLIDER_ELEMENT_NAME.startHandler);
+          updateHandlerText.setAttributes(this._getHandlerTextAttributes(value, handlerPosition));
         }
         handler.name === exports.SLIDER_ELEMENT_NAME.startHandler ? (this._currentValue.startValue = value, this._currentValue.startPos = position) : (this._currentValue.endValue = value, this._currentValue.endPos = position);
       }
       _updateHandlerText(handlerText, position, value) {
-        var _a;
         const isHorizontal = this._isHorizontal,
-          {
-            handlerText: handlerTextAttr = {}
-          } = this.attribute;
-        handlerText.setAttributes({
-          [isHorizontal ? "x" : "y"]: position,
-          text: handlerTextAttr.formatter ? handlerTextAttr.formatter(value) : value.toFixed(null !== (_a = handlerTextAttr.precision) && void 0 !== _a ? _a : 0)
-        });
+          handlerPosition = this._getHandlerPosition(handlerText.name === exports.SLIDER_ELEMENT_NAME.startHandlerText);
+        handlerText.setAttributes(this._getHandlerTextAttributes(value, handlerPosition));
         const updateHandler = handlerText.name === exports.SLIDER_ELEMENT_NAME.startHandlerText ? this._startHandler : this._endHandler;
         updateHandler && updateHandler.setAttributes({
           [isHorizontal ? "x" : "y"]: position
@@ -53147,7 +53136,7 @@
       select: !0
     };
 
-    const version = "1.0.43-alpha.0";
+    const version = "1.0.43-alpha.1";
     preLoadAllModule();
     if (isBrowserEnv()) {
         loadBrowserEnv(container);