@logicflow/react-node-registry 1.2.0-alpha.2 → 1.2.0-alpha.3

package/lib/index.css

@@ -0,0 +1,122 @@
+.lf-vue-node-container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: 6px;
+  color: #474747;
+  border-radius: 12px;
+  box-shadow: 0 0 10px #cad2e15f;
+}
+.lf-vue-node-content-wrap {
+  display: flex;
+  flex: 1 1 auto;
+  justify-content: center;
+}
+.lf-vue-node-title {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  box-sizing: border-box;
+  margin-bottom: 4px;
+  padding: 0 8px;
+  backdrop-filter: saturate(180%) blur(4px);
+}
+.lf-vue-node-title-expanded {
+  margin-bottom: 6px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #eaeaea;
+}
+@supports not (backdrop-filter: blur(1px)) {
+  .lf-vue-node-title {
+    backdrop-filter: none;
+  }
+}
+.lf-vue-node-title-left {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  min-width: 0;
+}
+.lf-vue-node-title-icon {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  color: #666;
+  font-style: normal;
+  line-height: 16px;
+  text-align: center;
+}
+.lf-vue-node-title-text {
+  overflow: hidden;
+  color: #333;
+  font-weight: 500;
+  font-size: 14px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.lf-vue-node-title-actions {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+.lf-vue-node-title-expand,
+.lf-vue-node-title-more {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 2px;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background 0.15s ease;
+  appearance: none;
+}
+.lf-vue-node-title-expand:hover,
+.lf-vue-node-title-more:hover {
+  background: rgba(0, 0, 0, 0.06);
+}
+.lf-vue-node-title-expand-icon {
+  color: #666;
+  font-style: normal;
+  transition: transform 0.3s ease;
+}
+.lf-vue-node-title-more-icon {
+  color: #666;
+  font-style: normal;
+}
+.lf-vue-node-title-tooltip {
+  position: absolute;
+  top: -50px;
+  right: -135px;
+  min-width: 120px;
+  max-width: 240px;
+  padding: 6px 8px;
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 6px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
+  transform: translateY(calc(100% + 4px));
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+.lf-vue-node-title-tooltip-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.lf-vue-node-title-tooltip-item {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 6px;
+  color: #333;
+  font-size: 12px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.lf-vue-node-title-tooltip-item:hover {
+  background: rgba(0, 0, 0, 0.05);
+}

package/lib/index.less

@@ -0,0 +1 @@
+@import url('./style/index.less');

package/lib/model.d.ts

@@ -1,4 +1,9 @@
-import LogicFlow, { HtmlNodeModel, IHtmlNodeProperties } from '@logicflow/core';
+import LogicFlow, { HtmlNodeModel, IHtmlNodeProperties, BaseNodeModel, GraphModel } from '@logicflow/core';
+import NodeConfig = LogicFlow.NodeConfig;
+export type NodeAction = {
+    name: string;
+    callback?: (node: BaseNodeModel, graph: GraphModel) => void;
+};
 export interface ReactCustomProperties extends IHtmlNodeProperties {
     width?: number;
     height?: number;
@@ -7,10 +12,22 @@ export interface ReactCustomProperties extends IHtmlNodeProperties {
     refY?: number;
     style?: LogicFlow.CommonTheme;
     textStyle?: LogicFlow.TextNodeTheme;
+    _showTitle?: boolean;
+    _title?: string;
+    _icon?: string;
+    _titleHeight?: number;
+    _expanded?: boolean;
 }
 export declare class ReactNodeModel<P extends ReactCustomProperties = ReactCustomProperties> extends HtmlNodeModel<P> {
+    private __baseHeight?;
+    __actions?: {
+        name: string;
+        callback?: (node: BaseNodeModel, graph: GraphModel) => void;
+    }[];
+    constructor(data: NodeConfig<P>, graphModel: GraphModel);
     setAttributes(): void;
     getTextStyle(): LogicFlow.TextNodeTheme;
     getNodeStyle(): LogicFlow.CommonTheme;
+    setNodeActions(actions: NodeAction[]): void;
 }
 export default ReactNodeModel;

package/lib/model.js

@@ -31,20 +31,54 @@ var core_1 = require("@logicflow/core");
 var lodash_es_1 = require("lodash-es");
 var ReactNodeModel = /** @class */ (function (_super) {
     __extends(ReactNodeModel, _super);
-    function ReactNodeModel() {
-        return _super !== null && _super.apply(this, arguments) || this;
+    function ReactNodeModel(data, graphModel) {
+        var _this = _super.call(this, data, graphModel) || this;
+        var properties = data.properties;
+        if (properties) {
+            var _a = properties._showTitle, _showTitle = _a === void 0 ? false : _a, _b = properties.style, style = _b === void 0 ? {} : _b;
+            if (_showTitle) {
+                _this.minWidth = 160;
+                _this.minHeight = 80;
+                _this.text.editable = false;
+                // 判断当前节点宽高是否小于最小宽高，如果是，强制设置为最小宽高
+                var newWidth = _this.width < _this.minWidth ? _this.minWidth : _this.width;
+                var newHeight = _this.height < _this.minHeight ? _this.minHeight : _this.height;
+                _this.setProperties(__assign(__assign({ _expanded: false }, properties), { style: __assign({ overflow: 'visible' }, (0, lodash_es_1.cloneDeep)(style)), width: newWidth, height: newHeight }));
+                _this.setNodeActions([
+                    {
+                        name: '复制',
+                        callback: function (nodeModel, graphModel) {
+                            graphModel.cloneNode(nodeModel.id);
+                        },
+                    },
+                    {
+                        name: '删除',
+                        callback: function (nodeModel, graphModel) {
+                            graphModel.deleteNode(nodeModel.id);
+                        },
+                    },
+                ]);
+            }
+        }
+        return _this;
     }
     ReactNodeModel.prototype.setAttributes = function () {
-        var _a = this.properties, width = _a.width, height = _a.height, radius = _a.radius;
-        if (width) {
+        var _a = this.properties, width = _a.width, height = _a.height, radius = _a.radius, _showTitle = _a._showTitle, _titleHeight = _a._titleHeight;
+        if (!(0, lodash_es_1.isNil)(width)) {
             this.width = width;
         }
-        if (height) {
+        if (!(0, lodash_es_1.isNil)(height)) {
             this.height = height;
         }
-        if (radius) {
+        if (!(0, lodash_es_1.isNil)(radius)) {
             this.radius = radius;
         }
+        if (this.__baseHeight === undefined) {
+            this.__baseHeight = (0, lodash_es_1.isNil)(height) ? this.height : height;
+        }
+        var extra = _showTitle ? (_titleHeight !== null && _titleHeight !== void 0 ? _titleHeight : 28) : 0;
+        var base = (0, lodash_es_1.isNil)(height) ? this.__baseHeight : height;
+        this.height = base + extra;
     };
     ReactNodeModel.prototype.getTextStyle = function () {
         // const { x, y, width, height } = this
@@ -58,6 +92,10 @@ var ReactNodeModel = /** @class */ (function (_super) {
         var customNodeStyle = this.properties.style;
         return __assign(__assign({}, style), ((0, lodash_es_1.cloneDeep)(customNodeStyle) || {}));
     };
+    ReactNodeModel.prototype.setNodeActions = function (actions) {
+        this.__actions =
+            (0, lodash_es_1.isArray)(actions) && !(0, lodash_es_1.isEmpty)(actions) ? (0, lodash_es_1.cloneDeep)(actions) : [];
+    };
     return ReactNodeModel;
 }(core_1.HtmlNodeModel));
 exports.ReactNodeModel = ReactNodeModel;

package/lib/model.js.map

@@ -1 +1 @@
-{"version":3,"file":"model.js","sourceRoot":"","sources":["../src/model.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,wCAA+E;AAC/E,uCAAqC;AAiBrC;IAEU,kCAAgB;IAF1B;;IA2CA,CAAC;IAxCC,sCAAa,GAAb;QACQ,IAAA,KAA4B,IAAI,CAAC,UAAU,EAAzC,KAAK,WAAA,EAAE,MAAM,YAAA,EAAE,MAAM,YAAoB,CAAA;QACjD,IAAI,KAAK,EAAE,CAAC;YACV,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QACpB,CAAC;QACD,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;QACtB,CAAC;QACD,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;QACtB,CAAC;IACH,CAAC;IAED,qCAAY,GAAZ;QACE,uCAAuC;QACjC,IAAA,KAAoC,IAAI,CAAC,UAAU,EAAjD,YAAQ,EAAR,IAAI,mBAAG,CAAC,KAAA,EAAE,YAAQ,EAAR,IAAI,mBAAG,CAAC,KAAA,EAAE,SAAS,eAAoB,CAAA;QACzD,IAAM,KAAK,GAAG,gBAAK,CAAC,YAAY,WAAE,CAAA;QAElC,6BAA6B;QAC7B,sCACK,KAAK,GACL,CAAC,IAAA,qBAAS,EAAC,SAAS,CAAC,IAAI,EAAE,CAAC,KAC/B,SAAS,EAAE,yBAAkB,IAAI,cAAI,IAAI,MAAG,IAC7C;IACH,CAAC;IAED,qCAAY,GAAZ;QACE,IAAM,KAAK,GAAG,gBAAK,CAAC,YAAY,WAAE,CAAA;QAEhC,IAAO,eAAe,GAEpB,IAAI,CAAC,UAAU,MAFK,CAEL;QAEnB,6BACK,KAAK,GACL,CAAC,IAAA,qBAAS,EAAC,eAAe,CAAC,IAAI,EAAE,CAAC,EAGtC;IACH,CAAC;IACH,qBAAC;AAAD,CAAC,AA3CD,CAEU,oBAAa,GAyCtB;AA3CY,wCAAc;AA6C3B,kBAAe,cAAc,CAAA"}
+{"version":3,"file":"model.js","sourceRoot":"","sources":["../src/model.ts"],"names":[],"mappings":"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"}

package/lib/style/index.css

@@ -0,0 +1,122 @@
+.lf-vue-node-container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: 6px;
+  color: #474747;
+  border-radius: 12px;
+  box-shadow: 0 0 10px #cad2e15f;
+}
+.lf-vue-node-content-wrap {
+  display: flex;
+  flex: 1 1 auto;
+  justify-content: center;
+}
+.lf-vue-node-title {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  box-sizing: border-box;
+  margin-bottom: 4px;
+  padding: 0 8px;
+  backdrop-filter: saturate(180%) blur(4px);
+}
+.lf-vue-node-title-expanded {
+  margin-bottom: 6px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #eaeaea;
+}
+@supports not (backdrop-filter: blur(1px)) {
+  .lf-vue-node-title {
+    backdrop-filter: none;
+  }
+}
+.lf-vue-node-title-left {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  min-width: 0;
+}
+.lf-vue-node-title-icon {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  color: #666;
+  font-style: normal;
+  line-height: 16px;
+  text-align: center;
+}
+.lf-vue-node-title-text {
+  overflow: hidden;
+  color: #333;
+  font-weight: 500;
+  font-size: 14px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.lf-vue-node-title-actions {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+.lf-vue-node-title-expand,
+.lf-vue-node-title-more {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 2px;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background 0.15s ease;
+  appearance: none;
+}
+.lf-vue-node-title-expand:hover,
+.lf-vue-node-title-more:hover {
+  background: rgba(0, 0, 0, 0.06);
+}
+.lf-vue-node-title-expand-icon {
+  color: #666;
+  font-style: normal;
+  transition: transform 0.3s ease;
+}
+.lf-vue-node-title-more-icon {
+  color: #666;
+  font-style: normal;
+}
+.lf-vue-node-title-tooltip {
+  position: absolute;
+  top: -50px;
+  right: -135px;
+  min-width: 120px;
+  max-width: 240px;
+  padding: 6px 8px;
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 6px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
+  transform: translateY(calc(100% + 4px));
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+.lf-vue-node-title-tooltip-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.lf-vue-node-title-tooltip-item {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 6px;
+  color: #333;
+  font-size: 12px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.lf-vue-node-title-tooltip-item:hover {
+  background: rgba(0, 0, 0, 0.05);
+}

package/lib/style/index.less

@@ -0,0 +1,140 @@
+.lf-vue-node-container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: 6px;
+  color: #474747;
+  border-radius: 12px;
+  box-shadow: 0 0 10px #cad2e15f;
+}
+
+.lf-vue-node-content-wrap {
+  display: flex;
+  flex: 1 1 auto;
+  justify-content: center;
+}
+
+.lf-vue-node-title {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  box-sizing: border-box;
+  margin-bottom: 4px;
+  padding: 0 8px;
+  backdrop-filter: saturate(180%) blur(4px);
+
+  &-expanded {
+    margin-bottom: 6px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #eaeaea;
+  }
+}
+
+@supports not (backdrop-filter: blur(1px)) {
+  .lf-vue-node-title {
+    backdrop-filter: none;
+  }
+}
+
+.lf-vue-node-title-left {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  min-width: 0;
+}
+
+.lf-vue-node-title-icon {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  color: #666;
+  font-style: normal;
+  line-height: 16px;
+  text-align: center;
+}
+
+.lf-vue-node-title-text {
+  overflow: hidden;
+  color: #333;
+  font-weight: 500;
+  font-size: 14px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.lf-vue-node-title-actions {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.lf-vue-node-title-expand,
+.lf-vue-node-title-more {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 2px;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background 0.15s ease;
+  appearance: none;
+}
+
+.lf-vue-node-title-expand:hover,
+.lf-vue-node-title-more:hover {
+  background: rgb(0 0 0 / 6%);
+}
+
+.lf-vue-node-title-expand-icon {
+  color: #666;
+  font-style: normal;
+  transition: transform 0.3s ease;
+}
+
+.lf-vue-node-title-more-icon {
+  color: #666;
+  font-style: normal;
+}
+
+.lf-vue-node-title-tooltip {
+  position: absolute;
+  top: -50px;
+  right: -135px;
+  min-width: 120px;
+  max-width: 240px;
+  padding: 6px 8px;
+  background: #fff;
+  border: 1px solid rgb(0 0 0 / 10%);
+  border-radius: 6px;
+  box-shadow: 0 6px 20px rgb(0 0 0 / 12%);
+  transform: translateY(calc(100% + 4px));
+  transition:
+    opacity 0.15s ease,
+    transform 0.15s ease;
+}
+
+.lf-vue-node-title-tooltip-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.lf-vue-node-title-tooltip-item {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 6px;
+  color: #333;
+  font-size: 12px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.lf-vue-node-title-tooltip-item:hover {
+  background: rgb(0 0 0 / 5%);
+}

package/lib/style/raw.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Auto generated file, do not modify it!
+ */
+export declare const content = ".lf-vue-node-container {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  padding: 6px;\n  color: #474747;\n  border-radius: 12px;\n  box-shadow: 0 0 10px #cad2e15f;\n}\n.lf-vue-node-content-wrap {\n  display: flex;\n  flex: 1 1 auto;\n  justify-content: center;\n}\n.lf-vue-node-title {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  box-sizing: border-box;\n  margin-bottom: 4px;\n  padding: 0 8px;\n  backdrop-filter: saturate(180%) blur(4px);\n}\n.lf-vue-node-title-expanded {\n  margin-bottom: 6px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid #eaeaea;\n}\n@supports not (backdrop-filter: blur(1px)) {\n  .lf-vue-node-title {\n    backdrop-filter: none;\n  }\n}\n.lf-vue-node-title-left {\n  display: flex;\n  gap: 6px;\n  align-items: center;\n  min-width: 0;\n}\n.lf-vue-node-title-icon {\n  display: inline-block;\n  width: 16px;\n  height: 16px;\n  color: #666;\n  font-style: normal;\n  line-height: 16px;\n  text-align: center;\n}\n.lf-vue-node-title-text {\n  overflow: hidden;\n  color: #333;\n  font-weight: 500;\n  font-size: 14px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.lf-vue-node-title-actions {\n  display: flex;\n  gap: 6px;\n  align-items: center;\n}\n.lf-vue-node-title-expand,\n.lf-vue-node-title-more {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  padding: 2px;\n  background: transparent;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: background 0.15s ease;\n  appearance: none;\n}\n.lf-vue-node-title-expand:hover,\n.lf-vue-node-title-more:hover {\n  background: rgba(0, 0, 0, 0.06);\n}\n.lf-vue-node-title-expand-icon {\n  color: #666;\n  font-style: normal;\n  transition: transform 0.3s ease;\n}\n.lf-vue-node-title-more-icon {\n  color: #666;\n  font-style: normal;\n}\n.lf-vue-node-title-tooltip {\n  position: absolute;\n  top: -50px;\n  right: -135px;\n  min-width: 120px;\n  max-width: 240px;\n  padding: 6px 8px;\n  background: #fff;\n  border: 1px solid rgba(0, 0, 0, 0.1);\n  border-radius: 6px;\n  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);\n  transform: translateY(calc(100% + 4px));\n  transition: opacity 0.15s ease, transform 0.15s ease;\n}\n.lf-vue-node-title-tooltip-list {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n.lf-vue-node-title-tooltip-item {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  padding: 6px;\n  color: #333;\n  font-size: 12px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n.lf-vue-node-title-tooltip-item:hover {\n  background: rgba(0, 0, 0, 0.05);\n}\n";

package/lib/style/raw.js

@@ -0,0 +1,9 @@
+"use strict";
+/* eslint-disable */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.content = void 0;
+/**
+ * Auto generated file, do not modify it!
+ */
+exports.content = ".lf-vue-node-container {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  padding: 6px;\n  color: #474747;\n  border-radius: 12px;\n  box-shadow: 0 0 10px #cad2e15f;\n}\n.lf-vue-node-content-wrap {\n  display: flex;\n  flex: 1 1 auto;\n  justify-content: center;\n}\n.lf-vue-node-title {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  box-sizing: border-box;\n  margin-bottom: 4px;\n  padding: 0 8px;\n  backdrop-filter: saturate(180%) blur(4px);\n}\n.lf-vue-node-title-expanded {\n  margin-bottom: 6px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid #eaeaea;\n}\n@supports not (backdrop-filter: blur(1px)) {\n  .lf-vue-node-title {\n    backdrop-filter: none;\n  }\n}\n.lf-vue-node-title-left {\n  display: flex;\n  gap: 6px;\n  align-items: center;\n  min-width: 0;\n}\n.lf-vue-node-title-icon {\n  display: inline-block;\n  width: 16px;\n  height: 16px;\n  color: #666;\n  font-style: normal;\n  line-height: 16px;\n  text-align: center;\n}\n.lf-vue-node-title-text {\n  overflow: hidden;\n  color: #333;\n  font-weight: 500;\n  font-size: 14px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.lf-vue-node-title-actions {\n  display: flex;\n  gap: 6px;\n  align-items: center;\n}\n.lf-vue-node-title-expand,\n.lf-vue-node-title-more {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  padding: 2px;\n  background: transparent;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: background 0.15s ease;\n  appearance: none;\n}\n.lf-vue-node-title-expand:hover,\n.lf-vue-node-title-more:hover {\n  background: rgba(0, 0, 0, 0.06);\n}\n.lf-vue-node-title-expand-icon {\n  color: #666;\n  font-style: normal;\n  transition: transform 0.3s ease;\n}\n.lf-vue-node-title-more-icon {\n  color: #666;\n  font-style: normal;\n}\n.lf-vue-node-title-tooltip {\n  position: absolute;\n  top: -50px;\n  right: -135px;\n  min-width: 120px;\n  max-width: 240px;\n  padding: 6px 8px;\n  background: #fff;\n  border: 1px solid rgba(0, 0, 0, 0.1);\n  border-radius: 6px;\n  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);\n  transform: translateY(calc(100% + 4px));\n  transition: opacity 0.15s ease, transform 0.15s ease;\n}\n.lf-vue-node-title-tooltip-list {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n.lf-vue-node-title-tooltip-item {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  padding: 6px;\n  color: #333;\n  font-size: 12px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n.lf-vue-node-title-tooltip-item:hover {\n  background: rgba(0, 0, 0, 0.05);\n}\n";
+//# sourceMappingURL=raw.js.map

package/lib/style/raw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"raw.js","sourceRoot":"","sources":["../../src/style/raw.ts"],"names":[],"mappings":";AAAA,oBAAoB;;;AAEpB;;GAEG;AAEU,QAAA,OAAO,GAAG,unFA0HtB,CAAA"}

package/lib/view.d.ts

@@ -2,12 +2,21 @@ import { Root } from 'react-dom/client';
 import { HtmlNode } from '@logicflow/core';
 export declare class ReactNodeView extends HtmlNode {
     root?: Root;
+    private containerEl?;
+    private __resizeObserver?;
+    private __resizeRafId?;
+    private __lastWidth?;
+    private __lastHeight?;
+    private __fallbackUnlisten?;
+    private __throttledUpdate;
     protected targetId(): string;
     componentWillUnmount(): void;
     setHtml(rootEl: SVGForeignObjectElement): void;
-    confirmUpdate(_rootEl: SVGForeignObjectElement): void;
     protected renderReactComponent(container: HTMLElement): void;
     protected unmountReactComponent(): void;
     unmount(): void;
+    private measureAndUpdate;
+    private startResizeObserver;
+    private stopResizeObserver;
 }
 export default ReactNodeView;