@visactor/vrender 0.19.8-beta.4 → 0.19.9-beta.1

package/dist/index.js

@@ -7224,22 +7224,18 @@
         this[type] = line, line.pathProxy = new CustomPath2D(), root.add(line);
       }
       onStartRect() {
-        var _a, _b, _c;
+        var _a;
         const root = this.target.attachShadow(),
-          isHorizontal = null === (_b = null === (_a = this.params) || void 0 === _a ? void 0 : _a.isHorizontal) || void 0 === _b || _b,
-          sizeAttr = isHorizontal ? "height" : "width",
-          otherSizeAttr = isHorizontal ? "width" : "height",
-          size = this.target.AABBBounds[sizeAttr](),
-          y = isHorizontal ? 0 : this.target.AABBBounds.y1,
+          height = this.target.AABBBounds.height(),
           rect = application.graphicService.creator.rect(Object.assign(Object.assign({
-            [sizeAttr]: size,
+            height: height,
             fill: "#bcdeff",
             shadowBlur: 30,
             shadowColor: "#bcdeff"
-          }, null === (_c = this.params) || void 0 === _c ? void 0 : _c.attribute), {
+          }, null === (_a = this.params) || void 0 === _a ? void 0 : _a.attribute), {
             x: 0,
-            y: y,
-            [otherSizeAttr]: 0
+            y: 0,
+            width: 0
           }));
         this.rect = rect, root.add(rect);
       }
@@ -7251,49 +7247,25 @@
         return this.rect ? this.onUpdateRect(end, ratio, out) : this.line || this.area ? this.onUpdateLineOrArea(end, ratio, out) : void 0;
       }
       onUpdateRect(end, ratio, out) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
-        const isHorizontal = null === (_b = null === (_a = this.params) || void 0 === _a ? void 0 : _a.isHorizontal) || void 0 === _b || _b,
-          parentAttr = this.target.attribute;
-        if (isHorizontal) {
-          const parentWidth = null !== (_d = null !== (_c = parentAttr.width) && void 0 !== _c ? _c : Math.abs(parentAttr.x1 - parentAttr.x)) && void 0 !== _d ? _d : 250,
-            streamLength = null !== (_f = null === (_e = this.params) || void 0 === _e ? void 0 : _e.streamLength) && void 0 !== _f ? _f : parentWidth,
-            maxLength = null !== (_j = null === (_h = null === (_g = this.params) || void 0 === _g ? void 0 : _g.attribute) || void 0 === _h ? void 0 : _h.width) && void 0 !== _j ? _j : 60,
-            startX = -maxLength,
-            currentX = startX + (streamLength - startX) * ratio,
-            x = Math.max(currentX, 0),
-            w = Math.min(Math.min(currentX + maxLength, maxLength), streamLength - currentX),
-            width = w + x > parentWidth ? Math.max(parentWidth - x, 0) : w;
-          this.rect.setAttributes({
-            x: x,
-            width: width,
-            dx: Math.min(parentAttr.x1 - parentAttr.x, 0)
-          }, !1, {
-            type: exports.AttributeUpdateType.ANIMATE_PLAY,
-            animationState: {
-              ratio: ratio,
-              end: end
-            }
-          });
-        } else {
-          const parentHeight = null !== (_l = null !== (_k = parentAttr.height) && void 0 !== _k ? _k : Math.abs(parentAttr.y1 - parentAttr.y)) && void 0 !== _l ? _l : 250,
-            streamLength = null !== (_o = null === (_m = this.params) || void 0 === _m ? void 0 : _m.streamLength) && void 0 !== _o ? _o : parentHeight,
-            maxLength = null !== (_r = null === (_q = null === (_p = this.params) || void 0 === _p ? void 0 : _p.attribute) || void 0 === _q ? void 0 : _q.height) && void 0 !== _r ? _r : 60,
-            currentY = parentHeight - (streamLength + maxLength) * ratio;
-          let y = Math.min(currentY, parentHeight);
-          const h = Math.min(parentHeight - currentY, maxLength);
-          let height;
-          y <= 0 ? (height = Math.max(y + h, 0), y = 0) : height = h, this.rect.setAttributes({
-            y: y,
-            height: height,
-            dy: Math.min(parentAttr.y1 - parentAttr.y, 0)
-          }, !1, {
-            type: exports.AttributeUpdateType.ANIMATE_PLAY,
-            animationState: {
-              ratio: ratio,
-              end: end
-            }
-          });
-        }
+        var _a, _b, _c, _d, _e, _f;
+        const 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,
+          maxLength = null !== (_f = null === (_e = null === (_d = this.params) || void 0 === _d ? void 0 : _d.attribute) || void 0 === _e ? void 0 : _e.width) && void 0 !== _f ? _f : 60,
+          startX = -maxLength,
+          currentX = startX + (streamLength - startX) * ratio,
+          x = Math.max(currentX, 0),
+          w = Math.min(Math.min(currentX + maxLength, maxLength), streamLength - currentX),
+          width = w + x > parentWidth ? Math.max(parentWidth - x, 0) : w;
+        this.rect.setAttributes({
+          x: x,
+          width: width
+        }, !1, {
+          type: exports.AttributeUpdateType.ANIMATE_PLAY,
+          animationState: {
+            ratio: ratio,
+            end: end
+          }
+        });
       }
       onUpdateLineOrArea(end, ratio, out) {
         const target = this.line || this.area;
@@ -12291,6 +12263,7 @@
         var _a;
         if (!states.length) return void this.clearStates(hasAnimation);
         if (!((null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) !== states.length || states.some((stateName, index) => this.currentStates[index] !== stateName))) return;
+        this.stopStateAnimates();
         const stateAttrs = {},
           subAttrs = this.subGraphic.map(() => ({}));
         states.forEach(stateName => {
@@ -12304,9 +12277,9 @@
         }), this.updateNormalAttrs(stateAttrs), this.currentStates = states, this.applyStateAttrs(stateAttrs, states, hasAnimation);
       }
       clearStates(hasAnimation) {
-        this.hasState() && this.normalAttrs && (this.subGraphic.forEach(graphic => {
+        this.stopStateAnimates(), this.hasState() && this.normalAttrs ? (this.currentStates = [], this.subGraphic.forEach(graphic => {
           graphic.applyStateAttrs(graphic.normalAttrs, this.currentStates, hasAnimation, !0), graphic.normalAttrs = null;
-        }), this.applyStateAttrs(this.normalAttrs, this.currentStates, hasAnimation, !0), this.normalAttrs = null, this.currentStates = []);
+        }), this.applyStateAttrs(this.normalAttrs, this.currentStates, hasAnimation, !0)) : this.currentStates = [], this.normalAttrs = null;
       }
       clone() {
         const glyph = new Glyph(Object.assign({}, this.attribute));
@@ -13878,7 +13851,7 @@
           onClearIncremental: new SyncHook(["graphic", "group", "stage"]),
           beforeUpdateAABBBounds: new SyncHook(["graphic", "stage", "willUpdate", "aabbBounds"]),
           afterUpdateAABBBounds: new SyncHook(["graphic", "stage", "aabbBounds", "globalAABBBounds", "selfChange"])
-        }, this.tempAABBBounds1 = new AABBBounds(), this.tempAABBBounds2 = new AABBBounds(), this._rectBoundsContribitions = [new DefaultOuterBorderBoundsContribution()], this._symbolBoundsContribitions = [new DefaultSymbolOuterBorderBoundsContribution()], this._circleBoundsContribitions = [new DefaultOuterBorderBoundsContribution()], this._arcBoundsContribitions = [new DefaultOuterBorderBoundsContribution()], this._pathBoundsContribitions = [new DefaultOuterBorderBoundsContribution()];
+        }, this.tempAABBBounds1 = new AABBBounds(), this.tempAABBBounds2 = new AABBBounds(), this._rectBoundsContribitions = [new DefaultOuterBorderBoundsContribution()], this._symbolBoundsContribitions = [new DefaultSymbolOuterBorderBoundsContribution()], this._imageBoundsContribitions = [new DefaultOuterBorderBoundsContribution()], this._circleBoundsContribitions = [new DefaultOuterBorderBoundsContribution()], this._arcBoundsContribitions = [new DefaultOuterBorderBoundsContribution()], this._pathBoundsContribitions = [new DefaultOuterBorderBoundsContribution()];
       }
       onAttributeUpdate(graphic) {
         this.hooks.onAttributeUpdate.taps.length && this.hooks.onAttributeUpdate.call(graphic);
@@ -14279,7 +14252,9 @@
         }
         const tb1 = this.tempAABBBounds1,
           tb2 = this.tempAABBBounds2;
-        return tb1.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2), tb2.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2), this.transformAABBBounds(attribute, aabbBounds, imageTheme, !1, graphic), aabbBounds;
+        return tb1.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2), tb2.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2), this._imageBoundsContribitions.length && this._imageBoundsContribitions.forEach(c => {
+          c.updateBounds(attribute, imageTheme, tb1, graphic), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2);
+        }), this.transformAABBBounds(attribute, aabbBounds, imageTheme, !1, graphic), aabbBounds;
       }
       combindShadowAABBBounds(bounds, graphic) {
         if (graphic && graphic.shadowRoot) {
@@ -15210,70 +15185,6 @@
       return path.closePath(), path;
     }
 
-    class DefaultImageBackgroundRenderContribution extends DefaultBaseBackgroundRenderContribution {
-      constructor() {
-        super(...arguments), this.time = exports.BaseRenderContributionTime.beforeFillStroke;
-      }
-      drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb) {
-        const {
-          background: background,
-          backgroundMode = graphicAttribute.backgroundMode,
-          backgroundFit = graphicAttribute.backgroundFit
-        } = graphic.attribute;
-        if (background) if (graphic.backgroundImg) {
-          const res = graphic.resources.get(background);
-          if ("success" !== res.state || !res.data) return;
-          if (context.save(), graphic.parent && !graphic.transMatrix.onlyTranslate()) {
-            const groupAttribute = getTheme(graphic.parent).group,
-              {
-                scrollX = groupAttribute.scrollX,
-                scrollY = groupAttribute.scrollY
-              } = graphic.parent.attribute;
-            context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0), context.translate(scrollX, scrollY);
-          }
-          const b = graphic.AABBBounds;
-          this.doDrawImage(context, res.data, b, backgroundMode, backgroundFit), context.restore(), graphic.transMatrix.onlyTranslate() || context.setTransformForCurrent();
-        } else if (isObject$1(background)) {
-          const {
-            stroke: stroke,
-            fill: fill,
-            lineWidth = 1,
-            cornerRadius = 0,
-            expandX = 0,
-            expandY = 0
-          } = background;
-          if (!stroke && !fill) return;
-          context.beginPath();
-          const {
-            x: x,
-            y: y,
-            width: width,
-            height: height
-          } = getActualPosition(graphic);
-          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();
-          const b = graphic.AABBBounds;
-          context.rect(x, y, b.width(), b.height()), context.fillStyle = background, context.globalAlpha = 1, context.fill();
-        }
-      }
-    }
-    function getActualPosition(graphic) {
-      const boundsPadding = parsePadding(graphic.attribute.boundsPadding),
-        bounds = graphic.AABBBounds;
-      let x = bounds.x1,
-        y = bounds.y1,
-        width = bounds.width(),
-        height = bounds.height();
-      return isNumber$1(boundsPadding) ? (x += boundsPadding, y += boundsPadding, width -= 2 * boundsPadding, height -= 2 * boundsPadding) : (x += boundsPadding[3], y += boundsPadding[0], width -= boundsPadding[1] + boundsPadding[3], height -= boundsPadding[0] + boundsPadding[2]), {
-        x: x,
-        y: y,
-        width: width,
-        height: height
-      };
-    }
-    const defaultImageBackgroundRenderContribution = new DefaultImageBackgroundRenderContribution();
-
     var __decorate$1D = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
@@ -15380,6 +15291,79 @@
     const defaultRectTextureRenderContribution = defaultBaseTextureRenderContribution;
     const defaultRectBackgroundRenderContribution = defaultBaseBackgroundRenderContribution;
 
+    class DefaultImageBackgroundRenderContribution extends DefaultBaseBackgroundRenderContribution {
+      constructor() {
+        super(...arguments), this.time = exports.BaseRenderContributionTime.beforeFillStroke;
+      }
+      drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb) {
+        const {
+          background: background,
+          backgroundMode = graphicAttribute.backgroundMode,
+          backgroundFit = graphicAttribute.backgroundFit
+        } = graphic.attribute;
+        if (background) if (graphic.backgroundImg) {
+          const res = graphic.resources.get(background);
+          if ("success" !== res.state || !res.data) return;
+          if (context.save(), graphic.parent && !graphic.transMatrix.onlyTranslate()) {
+            const groupAttribute = getTheme(graphic.parent).group,
+              {
+                scrollX = groupAttribute.scrollX,
+                scrollY = groupAttribute.scrollY
+              } = graphic.parent.attribute;
+            context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0), context.translate(scrollX, scrollY);
+          }
+          const b = graphic.AABBBounds;
+          this.doDrawImage(context, res.data, b, backgroundMode, backgroundFit), context.restore(), graphic.transMatrix.onlyTranslate() || context.setTransformForCurrent();
+        } else if (isObject$1(background)) {
+          const {
+            stroke: stroke,
+            fill: fill,
+            lineWidth = 1,
+            cornerRadius = 0,
+            expandX = 0,
+            expandY = 0
+          } = background;
+          if (!stroke && !fill) return;
+          context.beginPath();
+          const {
+            x: x,
+            y: y,
+            width: width,
+            height: height
+          } = getActualPosition(graphic);
+          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();
+          const b = graphic.AABBBounds;
+          context.rect(x, y, b.width(), b.height()), context.fillStyle = background, context.globalAlpha = 1, context.fill();
+        }
+      }
+    }
+    function getActualPosition(graphic) {
+      const boundsPadding = parsePadding(graphic.attribute.boundsPadding),
+        bounds = graphic.AABBBounds;
+      let x = bounds.x1,
+        y = bounds.y1,
+        width = bounds.width(),
+        height = bounds.height();
+      return isNumber$1(boundsPadding) ? (x += boundsPadding, y += boundsPadding, width -= 2 * boundsPadding, height -= 2 * boundsPadding) : (x += boundsPadding[3], y += boundsPadding[0], width -= boundsPadding[1] + boundsPadding[3], height -= boundsPadding[0] + boundsPadding[2]), {
+        x: x,
+        y: y,
+        width: width,
+        height: height
+      };
+    }
+    class DefaultImageRenderContribution extends DefaultRectRenderContribution {
+      constructor() {
+        super(...arguments), this.time = exports.BaseRenderContributionTime.afterFillStroke, this.useStyle = !0, this.order = 0;
+      }
+      drawShape(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb) {
+        return super.drawShape(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb);
+      }
+    }
+    const defaultImageRenderContribution = new DefaultImageRenderContribution();
+    const defaultImageBackgroundRenderContribution = new DefaultImageBackgroundRenderContribution();
+
     class DefaultSymbolRenderContribution {
       constructor() {
         this.time = exports.BaseRenderContributionTime.afterFillStroke, this.useStyle = !0, this.order = 0;
@@ -16959,15 +16943,17 @@
     const repeatStr = ["", "repeat-x", "repeat-y", "repeat"];
     exports.DefaultCanvasImageRender = class DefaultCanvasImageRender extends BaseRender {
       constructor(imageRenderContribitions) {
-        super(), this.imageRenderContribitions = imageRenderContribitions, this.numberType = IMAGE_NUMBER_TYPE, this.builtinContributions = [defaultImageBackgroundRenderContribution], this.init(imageRenderContribitions);
+        super(), this.imageRenderContribitions = imageRenderContribitions, this.numberType = IMAGE_NUMBER_TYPE, this.builtinContributions = [defaultImageRenderContribution, defaultImageBackgroundRenderContribution], this.init(imageRenderContribitions);
       }
-      drawShape(image, context, x, y, drawContext, params, fillCb) {
+      drawShape(image, context, x, y, drawContext, params, fillCb, strokeCb) {
         const imageAttribute = getTheme(image).image,
           {
             width = imageAttribute.width,
             height = imageAttribute.height,
             repeatX = imageAttribute.repeatX,
             repeatY = imageAttribute.repeatY,
+            x: originX = imageAttribute.x,
+            y: originY = imageAttribute.y,
             cornerRadius = imageAttribute.cornerRadius,
             image: url
           } = image.attribute,
@@ -16992,7 +16978,7 @@
           } else context.drawImage(res.data, x, y, width, height);
           needRestore && context.restore();
         }
-        this.afterRenderStep(image, context, x, y, doFill, !1, fVisible, !1, imageAttribute, drawContext, fillCb);
+        doStroke && (strokeCb ? strokeCb(context, image.attribute, imageAttribute) : sVisible && (context.setStrokeStyle(image, image.attribute, originX - x, originY - y, imageAttribute), context.stroke())), this.afterRenderStep(image, context, x, y, doFill, !1, fVisible, !1, imageAttribute, drawContext, fillCb);
       }
       draw(image, renderService, drawContext) {
         const {
@@ -17044,8 +17030,7 @@
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       };
     const DrawItemInterceptor = Symbol.for("DrawItemInterceptor");
-    const tempDirtyBounds = new AABBBounds(),
-      tempBackupDirtyBounds = new AABBBounds();
+    const tempDirtyBounds = new AABBBounds();
     class ShadowRootDrawItemInterceptorContribution {
       constructor() {
         this.order = 1;
@@ -17062,11 +17047,11 @@
           context: context
         } = drawContext;
         if (context.highPerformanceSave(), context.transformFromMatrix(graphic.transMatrix, !0), drawContribution.dirtyBounds && drawContribution.backupDirtyBounds) {
-          tempDirtyBounds.copy(drawContribution.dirtyBounds), tempBackupDirtyBounds.copy(drawContribution.backupDirtyBounds);
+          tempDirtyBounds.copy(drawContribution.dirtyBounds);
           const m = graphic.globalTransMatrix.getInverse();
-          drawContribution.dirtyBounds.copy(drawContribution.backupDirtyBounds).transformWithMatrix(m), drawContribution.backupDirtyBounds.copy(drawContribution.dirtyBounds);
+          drawContribution.dirtyBounds.copy(drawContribution.backupDirtyBounds).transformWithMatrix(m);
         }
-        return drawContribution.renderGroup(graphic.shadowRoot, drawContext, graphic.parent.globalTransMatrix), context.highPerformanceRestore(), drawContribution.dirtyBounds && drawContribution.backupDirtyBounds && (drawContribution.dirtyBounds.copy(tempDirtyBounds), drawContribution.backupDirtyBounds.copy(tempBackupDirtyBounds)), !0;
+        return drawContribution.renderGroup(graphic.shadowRoot, drawContext, graphic.parent.globalTransMatrix), context.highPerformanceRestore(), drawContribution.dirtyBounds && drawContribution.backupDirtyBounds && drawContribution.dirtyBounds.copy(tempDirtyBounds), !0;
       }
     }
     class DebugDrawItemInterceptorContribution {
@@ -19029,7 +19014,9 @@
     let _isBrowserEnv;
     function initIsBrowserEnv() {
       if (null == _isBrowserEnv) try {
-        _isBrowserEnv = globalThis === window, _isBrowserEnv && (_isBrowserEnv = !!document.createElement);
+        const canvas = document.createElement("canvas"),
+          ctx = canvas.getContext("2d");
+        _isBrowserEnv = !!(window && canvas.getBoundingClientRect && requestAnimationFrame && window.devicePixelRatio && ctx && ctx.isPointInPath && ctx.isPointInStroke), _isBrowserEnv && (_isBrowserEnv = !!document.createElement);
       } catch (err) {
         _isBrowserEnv = !1;
       }
@@ -28573,7 +28560,7 @@
 
     const roughModule = _roughModule;
 
-    const version = "0.19.8-beta.4";
+    const version = "0.19.9-beta.1";
     preLoadAllModule();
     if (isBrowserEnv()) {
         loadBrowserEnv(container);
@@ -28687,6 +28674,7 @@
     exports.DefaultGroupBackgroundRenderContribution = DefaultGroupBackgroundRenderContribution;
     exports.DefaultImageAttribute = DefaultImageAttribute;
     exports.DefaultImageBackgroundRenderContribution = DefaultImageBackgroundRenderContribution;
+    exports.DefaultImageRenderContribution = DefaultImageRenderContribution;
     exports.DefaultLayout = DefaultLayout;
     exports.DefaultLineAllocate = DefaultLineAllocate;
     exports.DefaultLineAttribute = DefaultLineAttribute;
@@ -28952,6 +28940,7 @@
     exports.defaultGraphicMemoryManager = defaultGraphicMemoryManager;
     exports.defaultGroupBackgroundRenderContribution = defaultGroupBackgroundRenderContribution;
     exports.defaultImageBackgroundRenderContribution = defaultImageBackgroundRenderContribution;
+    exports.defaultImageRenderContribution = defaultImageRenderContribution;
     exports.defaultLineAllocate = defaultLineAllocate;
     exports.defaultPathAllocate = defaultPathAllocate;
     exports.defaultRectAllocate = defaultRectAllocate;