@visactor/vrender 0.18.5 → 0.18.7-alpha.0

package/cjs/index.d.ts

@@ -1,4 +1,4 @@
 import '@visactor/vrender-core';
-export declare const version = "0.18.5";
+export declare const version = "0.18.7-alpha.0";
 export * from '@visactor/vrender-core';
 export * from '@visactor/vrender-kits';

package/cjs/index.js

@@ -21,13 +21,14 @@ Object.defineProperty(exports, "__esModule", {
 
 const vrender_core_1 = require("@visactor/vrender-core"), vrender_kits_1 = require("@visactor/vrender-kits"), vrender_kits_2 = require("@visactor/vrender-kits");
 
-exports.version = "0.18.5", (0, vrender_core_1.preLoadAllModule)(), (0, vrender_core_1.isBrowserEnv)() ? (0, 
-vrender_kits_1.loadBrowserEnv)(vrender_core_1.container) : (0, vrender_core_1.isNodeEnv)() && (0, 
-vrender_kits_1.loadNodeEnv)(vrender_core_1.container), (0, vrender_kits_2.registerArc)(), 
-(0, vrender_kits_2.registerArc3d)(), (0, vrender_kits_2.registerArea)(), (0, vrender_kits_2.registerCircle)(), 
-(0, vrender_kits_2.registerGlyph)(), (0, vrender_kits_2.registerGroup)(), (0, vrender_kits_2.registerImage)(), 
-(0, vrender_kits_2.registerLine)(), (0, vrender_kits_2.registerPath)(), (0, vrender_kits_2.registerPolygon)(), 
-(0, vrender_kits_2.registerPyramid3d)(), (0, vrender_kits_2.registerRect)(), (0, 
-vrender_kits_2.registerRect3d)(), (0, vrender_kits_2.registerRichtext)(), (0, vrender_kits_2.registerShadowRoot)(), 
-(0, vrender_kits_2.registerSymbol)(), (0, vrender_kits_2.registerText)(), (0, vrender_kits_2.registerWrapText)(), 
-__exportStar(require("@visactor/vrender-core"), exports), __exportStar(require("@visactor/vrender-kits"), exports);
+exports.version = "0.18.7-alpha.0", (0, vrender_core_1.preLoadAllModule)(), (0, 
+vrender_core_1.isBrowserEnv)() ? (0, vrender_kits_1.loadBrowserEnv)(vrender_core_1.container) : (0, 
+vrender_core_1.isNodeEnv)() && (0, vrender_kits_1.loadNodeEnv)(vrender_core_1.container), 
+(0, vrender_kits_2.registerArc)(), (0, vrender_kits_2.registerArc3d)(), (0, vrender_kits_2.registerArea)(), 
+(0, vrender_kits_2.registerCircle)(), (0, vrender_kits_2.registerGlyph)(), (0, vrender_kits_2.registerGroup)(), 
+(0, vrender_kits_2.registerImage)(), (0, vrender_kits_2.registerLine)(), (0, vrender_kits_2.registerPath)(), 
+(0, vrender_kits_2.registerPolygon)(), (0, vrender_kits_2.registerPyramid3d)(), 
+(0, vrender_kits_2.registerRect)(), (0, vrender_kits_2.registerRect3d)(), (0, vrender_kits_2.registerRichtext)(), 
+(0, vrender_kits_2.registerShadowRoot)(), (0, vrender_kits_2.registerSymbol)(), 
+(0, vrender_kits_2.registerText)(), (0, vrender_kits_2.registerWrapText)(), __exportStar(require("@visactor/vrender-core"), exports), 
+__exportStar(require("@visactor/vrender-kits"), exports);

package/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kCAAgC;AAChC,yDAA8F;AAC9F,yDAAqE;AACrE,yDAmBgC;AAEnB,QAAA,OAAO,GAAG,QAAQ,CAAC;AAEhC,IAAA,+BAAgB,GAAE,CAAC;AAEnB,IAAI,IAAA,2BAAY,GAAE,EAAE;IAClB,IAAA,6BAAc,EAAC,wBAAS,CAAC,CAAC;CAC3B;KAAM,IAAI,IAAA,wBAAS,GAAE,EAAE;IACtB,IAAA,0BAAW,EAAC,wBAAS,CAAC,CAAC;CACxB;AACD,IAAA,0BAAW,GAAE,CAAC;AACd,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,6BAAc,GAAE,CAAC;AACjB,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,8BAAe,GAAE,CAAC;AAClB,IAAA,gCAAiB,GAAE,CAAC;AACpB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,6BAAc,GAAE,CAAC;AACjB,IAAA,+BAAgB,GAAE,CAAC;AACnB,IAAA,iCAAkB,GAAE,CAAC;AACrB,IAAA,6BAAc,GAAE,CAAC;AACjB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,+BAAgB,GAAE,CAAC;AACnB,yDAAuC;AACvC,yDAAuC","file":"index.js","sourcesContent":["import '@visactor/vrender-core';\nimport { container, isBrowserEnv, isNodeEnv, preLoadAllModule } from '@visactor/vrender-core';\nimport { loadBrowserEnv, loadNodeEnv } from '@visactor/vrender-kits';\nimport {\n  registerArc,\n  registerArc3d,\n  registerArea,\n  registerCircle,\n  registerGlyph,\n  registerGroup,\n  registerImage,\n  registerLine,\n  registerPath,\n  registerPolygon,\n  registerPyramid3d,\n  registerRect,\n  registerRect3d,\n  registerRichtext,\n  registerShadowRoot,\n  registerSymbol,\n  registerText,\n  registerWrapText\n} from '@visactor/vrender-kits';\n// 导出版本号\nexport const version = \"0.18.5\";\n\npreLoadAllModule();\n\nif (isBrowserEnv()) {\n  loadBrowserEnv(container);\n} else if (isNodeEnv()) {\n  loadNodeEnv(container);\n}\nregisterArc();\nregisterArc3d();\nregisterArea();\nregisterCircle();\nregisterGlyph();\nregisterGroup();\nregisterImage();\nregisterLine();\nregisterPath();\nregisterPolygon();\nregisterPyramid3d();\nregisterRect();\nregisterRect3d();\nregisterRichtext();\nregisterShadowRoot();\nregisterSymbol();\nregisterText();\nregisterWrapText();\nexport * from '@visactor/vrender-core';\nexport * from '@visactor/vrender-kits';\n"]}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kCAAgC;AAChC,yDAA8F;AAC9F,yDAAqE;AACrE,yDAmBgC;AAEnB,QAAA,OAAO,GAAG,gBAAgB,CAAC;AAExC,IAAA,+BAAgB,GAAE,CAAC;AAEnB,IAAI,IAAA,2BAAY,GAAE,EAAE;IAClB,IAAA,6BAAc,EAAC,wBAAS,CAAC,CAAC;CAC3B;KAAM,IAAI,IAAA,wBAAS,GAAE,EAAE;IACtB,IAAA,0BAAW,EAAC,wBAAS,CAAC,CAAC;CACxB;AACD,IAAA,0BAAW,GAAE,CAAC;AACd,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,6BAAc,GAAE,CAAC;AACjB,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,8BAAe,GAAE,CAAC;AAClB,IAAA,gCAAiB,GAAE,CAAC;AACpB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,6BAAc,GAAE,CAAC;AACjB,IAAA,+BAAgB,GAAE,CAAC;AACnB,IAAA,iCAAkB,GAAE,CAAC;AACrB,IAAA,6BAAc,GAAE,CAAC;AACjB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,+BAAgB,GAAE,CAAC;AACnB,yDAAuC;AACvC,yDAAuC","file":"index.js","sourcesContent":["import '@visactor/vrender-core';\nimport { container, isBrowserEnv, isNodeEnv, preLoadAllModule } from '@visactor/vrender-core';\nimport { loadBrowserEnv, loadNodeEnv } from '@visactor/vrender-kits';\nimport {\n  registerArc,\n  registerArc3d,\n  registerArea,\n  registerCircle,\n  registerGlyph,\n  registerGroup,\n  registerImage,\n  registerLine,\n  registerPath,\n  registerPolygon,\n  registerPyramid3d,\n  registerRect,\n  registerRect3d,\n  registerRichtext,\n  registerShadowRoot,\n  registerSymbol,\n  registerText,\n  registerWrapText\n} from '@visactor/vrender-kits';\n// 导出版本号\nexport const version = \"0.18.7-alpha.0\";\n\npreLoadAllModule();\n\nif (isBrowserEnv()) {\n  loadBrowserEnv(container);\n} else if (isNodeEnv()) {\n  loadNodeEnv(container);\n}\nregisterArc();\nregisterArc3d();\nregisterArea();\nregisterCircle();\nregisterGlyph();\nregisterGroup();\nregisterImage();\nregisterLine();\nregisterPath();\nregisterPolygon();\nregisterPyramid3d();\nregisterRect();\nregisterRect3d();\nregisterRichtext();\nregisterShadowRoot();\nregisterSymbol();\nregisterText();\nregisterWrapText();\nexport * from '@visactor/vrender-core';\nexport * from '@visactor/vrender-kits';\n"]}

package/dist/index.js

@@ -5176,7 +5176,8 @@
     backgroundFit: !0,
     blur: 0,
     cursor: null,
-    html: null
+    html: null,
+    react: null
   }, DefaultFillStyle), DefaultStrokeStyle), DefaultLayout), DefaultPickStyle);
   var DefaultConnectAttribute = {
     connectedType: "none",
@@ -5410,7 +5411,7 @@
   function applyStrokeStyle(ctx, character) {
     var strokeStyle = character && character.stroke || defaultFormatting.stroke;
     if (!strokeStyle) return void (ctx.globalAlpha = 0);
-    ctx.globalAlpha = 1, ctx.lineWidth = character && "number" == typeof character.lineHeight ? character.lineHeight : 1, ctx.strokeStyle = strokeStyle;
+    ctx.globalAlpha = 1, ctx.lineWidth = character && "number" == typeof character.lineWidth ? character.lineWidth : 1, ctx.strokeStyle = strokeStyle;
     var fontSize = character.fontSize || 16;
     switch (character.script) {
       case "super":
@@ -6241,9 +6242,14 @@
   var WindowHandlerContribution = Symbol["for"]("WindowHandlerContribution");
   exports.DefaultWindow = /*#__PURE__*/function () {
     function DefaultWindow() {
+      var _this = this;
       _classCallCheck(this, DefaultWindow);
       this.hooks = {
         onChange: new SyncHook(["x", "y", "width", "height"])
+      }, this.active = function () {
+        var global = _this.global;
+        if (!global.env || _this.actived) return;
+        container.getNamed(WindowHandlerContribution, global.env).configure(_this, global), _this.actived = !0;
       }, this._uid = Generator.GenAutoIncrementId(), this.global = application.global, this.postInit();
     }
     _createClass(DefaultWindow, [{
@@ -6272,17 +6278,7 @@
     }, {
       key: "postInit",
       value: function postInit() {
-        var _this = this;
-        this.global.hooks.onSetEnv.tap("window", function () {
-          _this.active();
-        }), this.active();
-      }
-    }, {
-      key: "active",
-      value: function active() {
-        var global = this.global;
-        if (!global.env || this.actived) return;
-        container.getNamed(WindowHandlerContribution, global.env).configure(this, global), this.actived = !0;
+        this.global.hooks.onSetEnv.tap("window", this.active), this.active();
       }
     }, {
       key: "style",
@@ -6334,7 +6330,7 @@
     }, {
       key: "release",
       value: function release() {
-        return this._handler.releaseWindow();
+        return this.global.hooks.onSetEnv.unTap("window", this.active), this._handler.releaseWindow();
       }
     }, {
       key: "getContext",
@@ -7852,6 +7848,11 @@
         var pickResult = this.rootTarget.pick(x, y);
         return target = pickResult && pickResult.graphic ? pickResult.graphic : pickResult && pickResult.group ? pickResult.group : this.rootTarget.AABBBounds.contains(x, y) ? this.rootTarget : null, e && (e.pickParams = pickResult.params), target;
       }
+    }, {
+      key: "release",
+      value: function release() {
+        this.dispatch.removeAllListeners(), this.eventPool.clear(), this.rootTarget = null, this.mappingTable = null, this.mappingState = null, this.cursorTarget = null;
+      }
     }]);
     return EventManager;
   }();
@@ -7943,7 +7944,7 @@
     _createClass(EventSystem, [{
       key: "release",
       value: function release() {
-        this.setTargetElement(null);
+        this.removeEvents(), this.manager && this.manager.release(), this.domElement = null, this.manager = null, this.globalObj = null;
       }
     }, {
       key: "setCursor",
@@ -13312,6 +13313,11 @@
       value: function restLayerCount(stage) {
         return "browser" === this.global.env ? 10 : 0;
       }
+    }, {
+      key: "releaseStage",
+      value: function releaseStage(stage) {
+        this.layerMap["delete"](stage);
+      }
     }], [{
       key: "GenerateLayerId",
       value: function GenerateLayerId() {
@@ -16623,14 +16629,16 @@
           fontSize = _this$attribute.fontSize,
           fontFamily = _this$attribute.fontFamily,
           fontStyle = _this$attribute.fontStyle,
-          fontWeight = _this$attribute.fontWeight;
+          fontWeight = _this$attribute.fontWeight,
+          lineWidth = _this$attribute.lineWidth;
         return Object.assign({
           fill: fill,
           stroke: stroke,
           fontSize: fontSize,
           fontFamily: fontFamily,
           fontStyle: fontStyle,
-          fontWeight: fontWeight
+          fontWeight: fontWeight,
+          lineWidth: lineWidth
         }, config);
       }
     }, {
@@ -23309,7 +23317,7 @@
   var HtmlAttributePlugin = /*#__PURE__*/function () {
     function HtmlAttributePlugin() {
       _classCallCheck(this, HtmlAttributePlugin);
-      this.name = "HtmlAttributePlugin", this.activeEvent = "onRegister", this._uid = Generator.GenAutoIncrementId(), this.key = this.name + this._uid;
+      this.name = "HtmlAttributePlugin", this.activeEvent = "onRegister", this._uid = Generator.GenAutoIncrementId(), this.key = this.name + this._uid, this.lastDomContainerSet = new Set(), this.currentDomContainerSet = new Set();
     }
     _createClass(HtmlAttributePlugin, [{
       key: "activate",
@@ -23329,18 +23337,20 @@
         var _this2 = this;
         context.stage.hooks.afterRender.taps = context.stage.hooks.afterRender.taps.filter(function (item) {
           return item.name !== _this2.key;
-        });
+        }), application.graphicService.hooks.onRemove.unTap(this.key), application.graphicService.hooks.onRelease.unTap(this.key), this.release();
       }
     }, {
       key: "drawHTML",
       value: function drawHTML(renderService) {
         var _this3 = this;
-        "browser" === application.global.env && renderService.renderTreeRoots.sort(function (a, b) {
+        "browser" === application.global.env && (renderService.renderTreeRoots.sort(function (a, b) {
           var _a, _b;
           return (null !== (_a = a.attribute.zIndex) && void 0 !== _a ? _a : DefaultAttribute.zIndex) - (null !== (_b = b.attribute.zIndex) && void 0 !== _b ? _b : DefaultAttribute.zIndex);
         }).forEach(function (group) {
           _this3.renderGroupHTML(group);
-        });
+        }), this.lastDomContainerSet.forEach(function (item) {
+          _this3.currentDomContainerSet.has(item) || item.parentElement && item.parentElement.removeChild(item);
+        }), this.lastDomContainerSet = new Set(this.currentDomContainerSet), this.currentDomContainerSet.clear());
       }
     }, {
       key: "renderGroupHTML",
@@ -23372,7 +23382,8 @@
           height = html.height,
           style = html.style,
           _html$anchorType = html.anchorType,
-          anchorType = _html$anchorType === void 0 ? "boundsLeftTop" : _html$anchorType;
+          anchorType = _html$anchorType === void 0 ? "boundsLeftTop" : _html$anchorType,
+          pointerEvents = html.pointerEvents;
         graphic.bindDom || (graphic.bindDom = new Map());
         var lastDom = graphic.bindDom.get(dom);
         var wrapGroup, nativeContainer;
@@ -23395,7 +23406,7 @@
             wrapGroup: wrapGroup
           }));
         } else wrapGroup = lastDom.wrapGroup, nativeContainer = wrapGroup.parentNode;
-        wrapGroup.style.pointerEvents = "none", wrapGroup.style.position || (wrapGroup.style.position = "absolute", nativeContainer.style.position = "relative");
+        wrapGroup.style.pointerEvents = pointerEvents || "none", wrapGroup.style.position || (wrapGroup.style.position = "absolute", nativeContainer.style.position = "relative");
         var left = 0,
           top = 0;
         var b = graphic.globalAABBBounds;
@@ -23407,7 +23418,20 @@
           windowTL = stage.window.getTopLeft(!1),
           offsetX = left + windowTL.left - containerTL.left,
           offsetTop = top + windowTL.top - containerTL.top;
-        wrapGroup.style.left = "".concat(offsetX, "px"), wrapGroup.style.top = "".concat(offsetTop, "px");
+        wrapGroup.style.left = "".concat(offsetX, "px"), wrapGroup.style.top = "".concat(offsetTop, "px"), this.currentDomContainerSet.add(wrapGroup);
+      }
+    }, {
+      key: "release",
+      value: function release() {
+        "browser" === application.global.env && (this.removeAllDom(this.pluginService.stage.defaultLayer), this.lastDomContainerSet.clear(), this.currentDomContainerSet.clear());
+      }
+    }, {
+      key: "removeAllDom",
+      value: function removeAllDom(g) {
+        var _this5 = this;
+        this.removeDom(g), g.forEachChildren(function (item) {
+          item.isContainer && _this5.removeAllDom(g);
+        });
       }
     }]);
     return HtmlAttributePlugin;
@@ -23929,6 +23953,84 @@
     return isBrowserEnv() ? "browser" : "node";
   }
 
+  var ReactAttributePlugin = /*#__PURE__*/function (_HtmlAttributePlugin) {
+    _inherits(ReactAttributePlugin, _HtmlAttributePlugin);
+    var _super = _createSuper(ReactAttributePlugin);
+    function ReactAttributePlugin() {
+      var _this;
+      _classCallCheck(this, ReactAttributePlugin);
+      _this = _super.apply(this, arguments), _this.name = "ReactAttributePlugin", _this.activeEvent = "onRegister", _this._uid = Generator.GenAutoIncrementId(), _this.key = _this.name + _this._uid;
+      return _this;
+    }
+    _createClass(ReactAttributePlugin, [{
+      key: "removeDom",
+      value: function removeDom(graphic) {
+        graphic.bindDom && graphic.bindDom.size && (graphic.bindDom.forEach(function (item) {
+          item.root && item.root.unmount();
+        }), graphic.bindDom.clear());
+      }
+    }, {
+      key: "renderGraphicHTML",
+      value: function renderGraphicHTML(graphic) {
+        var react = graphic.attribute.react;
+        if (!react) return void (graphic.bindDom && graphic.bindDom.size && (graphic.bindDom.forEach(function (item) {
+          item.root && item.root.unmount();
+        }), graphic.bindDom.clear()));
+        var stage = graphic.stage;
+        if (!stage) return;
+        var ReactDOM = stage.params.ReactDOM,
+          element = react.element,
+          container = react.container,
+          width = react.width,
+          height = react.height,
+          style = react.style,
+          _react$anchorType = react.anchorType,
+          anchorType = _react$anchorType === void 0 ? "boundsLeftTop" : _react$anchorType,
+          pointerEvents = react.pointerEvents;
+        if (!(element && ReactDOM && ReactDOM.createRoot)) return;
+        graphic.bindDom || (graphic.bindDom = new Map());
+        var lastDom = graphic.bindDom.get(element);
+        var wrapGroup, nativeContainer;
+        if (!lastDom || container && container !== lastDom.container) {
+          graphic.bindDom.forEach(function (_ref) {
+            var wrapGroup = _ref.wrapGroup;
+            application.global.removeDom(wrapGroup);
+          });
+          var _container = container;
+          if (nativeContainer = _container ? "string" == typeof _container ? application.global.getElementById(_container) : _container : graphic.stage.window.getContainer(), wrapGroup = application.global.createDom({
+            tagName: "div",
+            width: width,
+            height: height,
+            style: style,
+            parent: nativeContainer
+          }), wrapGroup) {
+            var root = ReactDOM.createRoot(wrapGroup);
+            root.render(element), graphic.bindDom.set(element, {
+              dom: element,
+              container: container,
+              wrapGroup: wrapGroup,
+              root: root
+            });
+          }
+        } else wrapGroup = lastDom.wrapGroup, nativeContainer = wrapGroup.parentNode;
+        wrapGroup.style.pointerEvents = pointerEvents || "none", wrapGroup.style.position || (wrapGroup.style.position = "absolute", nativeContainer.style.position = "relative");
+        var left = 0,
+          top = 0;
+        var b = graphic.globalAABBBounds;
+        if ("position" === anchorType || b.empty()) {
+          var matrix = graphic.globalTransMatrix;
+          left = matrix.e, top = matrix.f;
+        } else left = b.x1, top = b.y1;
+        var containerTL = application.global.getElementTopLeft(nativeContainer, !1),
+          windowTL = stage.window.getTopLeft(!1),
+          offsetX = left + windowTL.left - containerTL.left,
+          offsetTop = top + windowTL.top - containerTL.top;
+        wrapGroup.style.left = "".concat(offsetX, "px"), wrapGroup.style.top = "".concat(offsetTop, "px");
+      }
+    }]);
+    return ReactAttributePlugin;
+  }(HtmlAttributePlugin);
+
   var DefaultConfig$1 = {
     WIDTH: 500,
     HEIGHT: 500,
@@ -23972,7 +24074,7 @@
         canvas: params.canvas
       }), _this.state = "normal", _this.renderCount = 0, _this.tryInitEventSystem(), _this._background = null !== (_a = params.background) && void 0 !== _a ? _a : DefaultConfig$1.BACKGROUND, _this.appendChild(_this.layerService.createLayer(_assertThisInitialized(_this), {
         main: !0
-      })), _this.nextFrameRenderLayerSet = new Set(), _this.willNextFrameRender = !1, _this.stage = _assertThisInitialized(_this), _this.renderStyle = params.renderStyle, params.autoRender && _this.enableAutoRender(), !1 === params.disableDirtyBounds && _this.enableDirtyBounds(), params.enableHtmlAttribute && _this.enableHtmlAttribute(params.enableHtmlAttribute), params.enableLayout && _this.enableLayout(), _this.hooks.beforeRender.tap("constructor", _this.beforeRender), _this.hooks.afterRender.tap("constructor", _this.afterRender), _this._beforeRender = params.beforeRender, _this._afterRender = params.afterRender, _this.ticker = params.ticker || defaultTicker, _this.supportInteractiveLayer = !1 !== params.interactiveLayer, _this.timeline = new DefaultTimeline(), _this.ticker.addTimeline(_this.timeline), _this.timeline.pause(), params.optimize || (params.optimize = {}), _this.optmize(params.optimize), params.background && isString$1(_this._background) && _this._background.includes("/") && _this.setAttributes({
+      })), _this.nextFrameRenderLayerSet = new Set(), _this.willNextFrameRender = !1, _this.stage = _assertThisInitialized(_this), _this.renderStyle = params.renderStyle, params.autoRender && _this.enableAutoRender(), !1 === params.disableDirtyBounds && _this.enableDirtyBounds(), params.enableHtmlAttribute && _this.enableHtmlAttribute(params.enableHtmlAttribute), params.ReactDOM && _this.enableReactAttribute(params.ReactDOM), params.enableLayout && _this.enableLayout(), _this.hooks.beforeRender.tap("constructor", _this.beforeRender), _this.hooks.afterRender.tap("constructor", _this.afterRender), _this._beforeRender = params.beforeRender, _this._afterRender = params.afterRender, _this.ticker = params.ticker || defaultTicker, _this.supportInteractiveLayer = !1 !== params.interactiveLayer, _this.timeline = new DefaultTimeline(), _this.ticker.addTimeline(_this.timeline), _this.timeline.pause(), params.optimize || (params.optimize = {}), _this.optmize(params.optimize), params.background && isString$1(_this._background) && _this._background.includes("/") && _this.setAttributes({
         background: _this._background
       });
       return _this;
@@ -24273,6 +24375,19 @@
           _this7.pluginService.unRegister(plugin);
         }));
       }
+    }, {
+      key: "enableReactAttribute",
+      value: function enableReactAttribute(container) {
+        this.reactAttribute || (this.reactAttribute = container, this.pluginService.register(new ReactAttributePlugin()));
+      }
+    }, {
+      key: "disableReactAttribute",
+      value: function disableReactAttribute() {
+        var _this8 = this;
+        this.reactAttribute && (this.reactAttribute = !1, this.pluginService.findPluginsByName("ReactAttributePlugin").forEach(function (plugin) {
+          _this8.pluginService.unRegister(plugin);
+        }));
+      }
     }, {
       key: "getPluginsByName",
       value: function getPluginsByName(name) {
@@ -24302,10 +24417,10 @@
     }, {
       key: "sortLayer",
       value: function sortLayer(cb) {
-        var _this8 = this;
+        var _this9 = this;
         var children = this.children;
         children.sort(cb), this.removeAllChild(), children.forEach(function (c) {
-          _this8.appendChild(c);
+          _this9.appendChild(c);
         });
       }
     }, {
@@ -24336,11 +24451,11 @@
     }, {
       key: "renderNextFrame",
       value: function renderNextFrame(layers, force) {
-        var _this9 = this;
+        var _this10 = this;
         this.nextFrameRenderLayerSet.size !== this.childrenCount && (layers || this).forEach(function (layer) {
-          _this9.nextFrameRenderLayerSet.add(layer);
+          _this10.nextFrameRenderLayerSet.add(layer);
         }), this.willNextFrameRender || (this.willNextFrameRender = !0, this.global.getRequestAnimationFrame()(function () {
-          _this9._doRenderInThisFrame(), _this9.willNextFrameRender = !1;
+          _this10._doRenderInThisFrame(), _this10.willNextFrameRender = !1;
         }));
       }
     }, {
@@ -24353,21 +24468,21 @@
     }, {
       key: "renderLayerList",
       value: function renderLayerList(layerList, params) {
-        var _this10 = this;
+        var _this11 = this;
         var list = [];
         for (var i = 0; i < layerList.length; i++) {
           var l = layerList[i];
           "virtual" === l.layerMode && (l = l.getNativeHandler().mainHandler.layer), list.includes(l) || list.push(l);
         }
         list.forEach(function (layer) {
-          layer.renderCount > _this10.renderCount || (layer.renderCount = _this10.renderCount + 1, layer.render({
-            renderService: _this10.renderService,
-            background: layer === _this10.defaultLayer ? _this10.background : void 0,
-            updateBounds: !(!_this10.dirtyBounds || _this10.dirtyBounds.empty()),
-            viewBox: _this10.window.getViewBox(),
-            transMatrix: _this10.window.getViewBoxTransform()
+          layer.renderCount > _this11.renderCount || (layer.renderCount = _this11.renderCount + 1, layer.render({
+            renderService: _this11.renderService,
+            background: layer === _this11.defaultLayer ? _this11.background : void 0,
+            updateBounds: !(!_this11.dirtyBounds || _this11.dirtyBounds.empty()),
+            viewBox: _this11.window.getViewBox(),
+            transMatrix: _this11.window.getViewBoxTransform()
           }, Object.assign({
-            renderStyle: _this10.renderStyle
+            renderStyle: _this11.renderStyle
           }, params)));
         }), this.interactiveLayer && !layerList.includes(this.interactiveLayer) && this.interactiveLayer.render({
           renderService: this.renderService,
@@ -24406,10 +24521,10 @@
     }, {
       key: "setViewBox",
       value: function setViewBox(x, y, w, h, rerender) {
-        var _this11 = this;
+        var _this12 = this;
         var isRerender = !0;
         "object" == _typeof(x) ? (this.viewBox.setValue(x.x1, x.y1, x.x2, x.y2), !1 === y && (isRerender = !1)) : (this.viewBox.setValue(x, y, x + w, y + h), !1 === rerender && (isRerender = !1)), this.forEachChildren(function (c) {
-          c.resizeView(_this11.viewBox.width(), _this11.viewBox.height());
+          c.resizeView(_this12.viewBox.width(), _this12.viewBox.height());
         }), isRerender && this.render();
       }
     }, {
@@ -24452,7 +24567,7 @@
     }, {
       key: "release",
       value: function release() {
-        _get(_getPrototypeOf(Stage.prototype), "release", this).call(this), this.eventSystem && this.eventSystem.release(), this.pluginService.release(), this.forEach(function (layer) {
+        _get(_getPrototypeOf(Stage.prototype), "release", this).call(this), this.hooks.beforeRender.unTap("constructor", this.beforeRender), this.hooks.afterRender.unTap("constructor", this.afterRender), this.eventSystem && this.eventSystem.release(), this.layerService.releaseStage(this), this.pluginService.release(), this.forEach(function (layer) {
           layer.release();
         }), this.interactiveLayer && this.interactiveLayer.release(), this.window.release();
       }
@@ -24474,15 +24589,15 @@
     }, {
       key: "renderTo",
       value: function renderTo(window) {
-        var _this12 = this;
+        var _this13 = this;
         this.forEachChildren(function (layer, i) {
           layer.drawTo(window, {
-            renderService: _this12.renderService,
+            renderService: _this13.renderService,
             viewBox: window.getViewBox(),
             transMatrix: window.getViewBoxTransform(),
-            background: layer === _this12.defaultLayer ? _this12.background : void 0,
+            background: layer === _this13.defaultLayer ? _this13.background : void 0,
             clear: 0 === i,
-            updateBounds: !(!_this12.dirtyBounds || _this12.dirtyBounds.empty())
+            updateBounds: !(!_this13.dirtyBounds || _this13.dirtyBounds.empty())
           });
         });
       }
@@ -35221,7 +35336,7 @@
 
   var roughModule = _roughModule;
 
-  const version = "0.18.5";
+  const version = "0.18.7-alpha.0";
   preLoadAllModule();
   if (isBrowserEnv()) {
       loadBrowserEnv(container);