@logicflow/vue-node-registry 1.2.0-alpha.2 → 1.2.0-alpha.4

package/.turbo/turbo-build$colon$dev.log

@@ -1,10 +1,10 @@
 
-> @logicflow/vue-node-registry@1.2.0-alpha.1 build:dev /Users/didi/Desktop/github/LogicFlow/packages/vue-node-registry
+> @logicflow/vue-node-registry@1.2.0-alpha.4 build:dev /Users/didi/Desktop/github/LogicFlow/packages/vue-node-registry
 > rss
 
 > [build:dev] pnpm run --if-present build:less && run-p -s build:cjs build:esm 
 
-> @logicflow/vue-node-registry@1.2.0-alpha.1 build:less /Users/didi/Desktop/github/LogicFlow/packages/vue-node-registry
+> @logicflow/vue-node-registry@1.2.0-alpha.4 build:less /Users/didi/Desktop/github/LogicFlow/packages/vue-node-registry
 > rss
 
 > [build:less] ./scripts/build-less

package/.turbo/turbo-build.log

@@ -1,11 +1,11 @@
 
-> @logicflow/vue-node-registry@1.2.0-alpha.1 prebuild /Users/didi/Desktop/github/LogicFlow/packages/vue-node-registry
+> @logicflow/vue-node-registry@1.2.0-alpha.4 prebuild /Users/didi/Desktop/github/LogicFlow/packages/vue-node-registry
 > rss
 
 > [prebuild] run-s -s clean:build 
 > [clean:build] rimraf dist es lib 
 
-> @logicflow/vue-node-registry@1.2.0-alpha.1 build /Users/didi/Desktop/github/LogicFlow/packages/vue-node-registry
+> @logicflow/vue-node-registry@1.2.0-alpha.4 build /Users/didi/Desktop/github/LogicFlow/packages/vue-node-registry
 > rss
 
 > [build] run-p -s build:dev build:umd 
@@ -31,4 +31,4 @@
 |                                              |
 +----------------------------------------------+
 (!) [plugin typescript] @rollup/plugin-typescript: Rollup requires that TypeScript produces ES Modules. Unfortunately your configuration specifies a "module" other than "esnext". Unless you know what you're doing, please change "module" to "esnext" in the target tsconfig.json file or plugin options.
-created dist/index.min.js in 3.6s
+created dist/index.min.js in 4.9s

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @logicflow/vue-node-registry
 
+## 1.2.0-alpha.4
+
+### Patch Changes
+
+- Updated dependencies
+  - @logicflow/core@2.2.0-alpha.4
+
+## 1.2.0-alpha.3
+
+### Patch Changes
+
+- feat: 整体UI美化,并丰富可配置的UI项
+- Updated dependencies
+  - @logicflow/core@2.2.0-alpha.3
+
 ## 1.2.0-alpha.2
 
 ### Patch Changes

package/dist/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/es/components/container.d.ts

@@ -0,0 +1,19 @@
+export declare const Container: import("vue-demi").DefineComponent<{
+    node: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    graph: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}, unknown, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    node: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    graph: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>>, {}, {}>;

package/es/components/container.js

@@ -0,0 +1,27 @@
+import { defineComponent, h } from 'vue-demi';
+import { TitleBar } from './titleBar';
+export var Container = defineComponent({
+    name: 'LFVueNodeContainer',
+    props: {
+        node: { type: Object, required: true },
+        graph: { type: Object, required: true },
+    },
+    render: function () {
+        var _a, _b;
+        var props = ((_a = this.node) === null || _a === void 0 ? void 0 : _a.properties) || {};
+        var children = [];
+        var titleColor = props.style.titleColor || '#E5EEFC';
+        if (props._showTitle) {
+            children.push(h(TitleBar, { node: this.node, graph: this.graph }));
+        }
+        console.log('props._expanded', props._expanded);
+        if (props._expanded === true) {
+            children.push(h('div', { class: 'lf-vue-node-content-wrap' }, ((_b = this.$slots) === null || _b === void 0 ? void 0 : _b.default) ? this.$slots.default() : []));
+        }
+        return h('div', {
+            class: 'lf-vue-node-container',
+            style: " background: linear-gradient(180deg, ".concat(titleColor, " 0%, #FFFFFF 24px)"),
+        }, children);
+    },
+});
+//# sourceMappingURL=container.js.map

package/es/components/container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.js","sourceRoot":"","sources":["../../src/components/container.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAAE,MAAM,UAAU,CAAA;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,MAAM,CAAC,IAAM,SAAS,GAAG,eAAe,CAAC;IACvC,IAAI,EAAE,oBAAoB;IAC1B,KAAK,EAAE;QACL,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE;QACtC,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE;KACxC;IACD,MAAM;;QACJ,IAAM,KAAK,GAAG,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,UAAU,KAAI,EAAE,CAAA;QACzC,IAAM,QAAQ,GAAU,EAAE,CAAA;QAC1B,IAAM,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC,UAAU,IAAI,SAAS,CAAA;QACtD,IAAI,KAAK,CAAC,UAAU,EAAE,CAAC;YACrB,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;QACpE,CAAC;QACD,OAAO,CAAC,GAAG,CAAC,iBAAiB,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;QAC/C,IAAI,KAAK,CAAC,SAAS,KAAK,IAAI,EAAE,CAAC;YAC7B,QAAQ,CAAC,IAAI,CACX,CAAC,CACC,KAAK,EACL,EAAE,KAAK,EAAE,0BAA0B,EAAE,EACrC,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,OAAO,EAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,CAClD,CACF,CAAA;QACH,CAAC;QACD,OAAO,CAAC,CACN,KAAK,EACL;YACE,KAAK,EAAE,uBAAuB;YAC9B,KAAK,EAAE,+CAAwC,UAAU,uBAAoB;SAC9E,EACD,QAAQ,CACT,CAAA;IACH,CAAC;CACF,CAAC,CAAA"}

package/es/components/titleBar.d.ts

@@ -0,0 +1,24 @@
+export declare const TitleBar: import("vue-demi").DefineComponent<{
+    node: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    graph: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}, unknown, {
+    showTooltip: boolean;
+}, {}, {
+    toggleExpand(): void;
+    runAction(act: any): void;
+}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    node: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    graph: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>>, {}, {}>;

package/es/components/titleBar.js

@@ -0,0 +1,160 @@
+import { defineComponent, h } from 'vue-demi';
+import { isNumber, isEmpty } from 'lodash-es';
+export var TitleBar = defineComponent({
+    name: 'LFVueNodeTitleBar',
+    props: {
+        node: { type: Object, required: true },
+        graph: { type: Object, required: true },
+    },
+    data: function () {
+        return {
+            showTooltip: false,
+        };
+    },
+    mounted: function () {
+        var _this = this;
+        var _a, _b;
+        var trigger = ((_b = (_a = this.node) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.titleTrigger) === 'hover'
+            ? 'hover'
+            : 'click';
+        var moreBtn = this.$refs.moreBtn || null;
+        var tooltip = this.$refs.tooltip || null;
+        var onDoc = function (e) {
+            if (!tooltip || !moreBtn)
+                return;
+            var t = e.target;
+            if (_this.showTooltip && !tooltip.contains(t) && !moreBtn.contains(t)) {
+                _this.showTooltip = false;
+            }
+        };
+        if (trigger === 'hover' && moreBtn && tooltip) {
+            moreBtn.addEventListener('mouseenter', function () {
+                _this.showTooltip = true;
+            });
+            moreBtn.addEventListener('mouseleave', function () {
+                _this.showTooltip = false;
+            });
+        }
+        else if (trigger === 'click' && moreBtn) {
+            moreBtn.addEventListener('click', function (e) {
+                e.stopPropagation();
+                _this.showTooltip = !_this.showTooltip;
+            });
+            document.addEventListener('click', onDoc);
+            this.$once &&
+                this.$once('hook:beforeDestroy', function () {
+                    document.removeEventListener('click', onDoc);
+                });
+        }
+    },
+    methods: {
+        toggleExpand: function () {
+            var _a, _b, _c;
+            var cur = !!((_b = (_a = this.node) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b._expanded);
+            (_c = this.node) === null || _c === void 0 ? void 0 : _c.setProperty('_expanded', !cur);
+        },
+        runAction: function (act) {
+            try {
+                typeof (act === null || act === void 0 ? void 0 : act.callback) === 'function' &&
+                    act.callback(this.node, this.graph);
+            }
+            finally {
+                this.showTooltip = false;
+            }
+        },
+    },
+    render: function () {
+        var _this = this;
+        var _a, _b;
+        var props = ((_a = this.node) === null || _a === void 0 ? void 0 : _a.properties) || {};
+        var icon = props._icon;
+        var title = props._title || '';
+        var expanded = !!props._expanded;
+        var _titleHeight = isNumber(props._titleHeight) ? props._titleHeight : 28;
+        var actions = ((_b = this.node) === null || _b === void 0 ? void 0 : _b.__actions) || [];
+        var showMoreAction = !isEmpty(actions);
+        console.log('showMoreAction', actions, props._titleActions);
+        var bar = h('div', {
+            class: expanded
+                ? 'lf-vue-node-title lf-vue-node-title-expanded'
+                : 'lf-vue-node-title',
+            style: "height:".concat(expanded ? _titleHeight : 18, "px;"),
+            title: title,
+        }, [
+            h('div', { class: 'lf-vue-node-title-left' }, [
+                icon
+                    ? h('i', {
+                        class: 'lf-vue-node-title-icon',
+                    }, icon)
+                    : null,
+                h('span', {
+                    class: 'lf-vue-node-title-text',
+                }, title),
+            ]),
+            h('div', { class: 'lf-vue-node-title-actions' }, [
+                h('button', {
+                    ref: 'expandBtn',
+                    class: 'lf-vue-node-title-expand',
+                    onClick: function (e) {
+                        console.log('expandClicked');
+                        e.stopPropagation();
+                        _this.toggleExpand();
+                    },
+                    on: {
+                        click: function (e) {
+                            console.log('expandClicked');
+                            e.stopPropagation();
+                            _this.toggleExpand();
+                        },
+                    },
+                }, [
+                    h('svg', {
+                        width: 14,
+                        height: 12,
+                        viewBox: '0 0 14 12',
+                        xmlns: 'http://www.w3.org/2000/svg',
+                        class: 'lf-vue-node-title-expand-icon',
+                        style: "transform:".concat(expanded ? 'rotate(180deg)' : 'rotate(0deg)', ";"),
+                    }, [
+                        h('path', {
+                            d: 'M0.5201124,5.47988755C0.23603013,5.7639699,0.24460429,6.2271326,0.53900635,6.5005059L6.3195491,11.8681526C6.7032304,12.2244282,7.2967696,12.2244282,7.6804514,11.8681526L13.460994,6.5005059C13.755396,6.2271326,13.76397,5.7639699,13.479888,5.47988755C13.211547,5.21154633,12.779465,5.20215771,12.499721,5.45858961L7.3378625,10.1902928C7.1467018,10.3655233,6.8532982,10.3655233,6.6621375,10.1902928L1.5002797,5.45858967C1.2205358,5.20215771,0.78845364,5.21154633,0.5201124,5.47988755Z',
+                            fill: '#474747',
+                        }),
+                        h('path', {
+                            d: 'M0.5201124,0.47988755C0.23603013,0.7639699,0.24460429,1.2271326,0.53900635,1.5005059L6.3195491,6.8681526C6.7032304,7.2244282,7.2967696,7.2244282,7.6804514,6.8681526L13.460994,1.5005059C13.755396,1.2271326,13.76397,0.7639699,13.479888,0.47988755C13.211547,0.21154633,12.779465,0.20215771,12.499721,0.45858961L7.3378625,5.1902928C7.1467018,5.3655233,6.8532982,5.3655233,6.6621375,5.1902928L1.5002797,0.45858967C1.2205358,0.20215771,0.78845364,0.21154633,0.5201124,0.47988755Z',
+                            fill: '#9B9B9B',
+                        }),
+                    ]),
+                ]),
+                showMoreAction &&
+                    h('button', {
+                        ref: 'moreBtn',
+                        class: 'lf-vue-node-title-more',
+                    }, [h('i', { class: 'lf-vue-node-title-more-icon' }, '⋯')]),
+                h('div', {
+                    ref: 'tooltip',
+                    class: 'lf-vue-node-title-tooltip',
+                    style: "opacity:".concat(this.showTooltip ? 1 : 0, ";pointer-events:").concat(this.showTooltip ? 'auto' : 'none', ";"),
+                }, [
+                    h('div', { class: 'lf-vue-node-title-tooltip-list' }, actions.map(function (act) {
+                        return h('div', {
+                            class: 'lf-vue-node-title-tooltip-item',
+                            onClick: function (e) {
+                                e.stopPropagation();
+                                _this.runAction(act);
+                            },
+                            on: {
+                                click: function (e) {
+                                    e.stopPropagation();
+                                    _this.runAction(act);
+                                },
+                            },
+                        }, (act === null || act === void 0 ? void 0 : act.name) || '');
+                    })),
+                ]),
+            ]),
+        ]);
+        return bar;
+    },
+});
+//# sourceMappingURL=titleBar.js.map

package/es/components/titleBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"titleBar.js","sourceRoot":"","sources":["../../src/components/titleBar.ts"],"names":[],"mappings":"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"}

package/es/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/es/index.less

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

package/es/model.d.ts

@@ -1,4 +1,9 @@
-import LogicFlow, { HtmlNodeModel, IHtmlNodeProperties } from '@logicflow/core';
+import LogicFlow, { GraphModel, BaseNodeModel, HtmlNodeModel, IHtmlNodeProperties } from '@logicflow/core';
+import NodeConfig = LogicFlow.NodeConfig;
+export type NodeAction = {
+    name: string;
+    callback?: (node: BaseNodeModel, graph: GraphModel) => void;
+};
 export interface VueCustomProperties extends IHtmlNodeProperties {
     width?: number;
     height?: number;
@@ -7,10 +12,22 @@ export interface VueCustomProperties extends IHtmlNodeProperties {
     refY?: number;
     style?: LogicFlow.CommonTheme;
     textStyle?: LogicFlow.TextNodeTheme;
+    _showTitle?: boolean;
+    _title?: string;
+    _icon?: string;
+    _titleHeight?: number;
+    _expanded?: boolean;
 }
 export declare class VueNodeModel<P extends VueCustomProperties = VueCustomProperties> 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 VueNodeModel;

package/es/model.js

@@ -24,16 +24,46 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { HtmlNodeModel } from '@logicflow/core';
-import { cloneDeep, isNil } from 'lodash-es';
+import { HtmlNodeModel, } from '@logicflow/core';
+import { cloneDeep, isNil, isArray, isEmpty } from 'lodash-es';
 var VueNodeModel = /** @class */ (function (_super) {
     __extends(VueNodeModel, _super);
-    function VueNodeModel() {
-        return _super !== null && _super.apply(this, arguments) || this;
+    function VueNodeModel(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' }, cloneDeep(style)), width: newWidth + 8, height: newHeight + 8 }));
+                _this.setNodeActions([
+                    {
+                        name: '复制',
+                        callback: function (nodeModel, graphModel) {
+                            graphModel.cloneNode(nodeModel.id);
+                        },
+                    },
+                    {
+                        name: '删除',
+                        callback: function (nodeModel, graphModel) {
+                            graphModel.deleteNode(nodeModel.id);
+                        },
+                    },
+                ]);
+            }
+        }
+        console.log('nodeModel', _this);
+        return _this;
     }
     VueNodeModel.prototype.setAttributes = function () {
         // DONE: 解决 width、height、radius 为 0 时的问题
-        var _a = this.properties, width = _a.width, height = _a.height, radius = _a.radius;
+        var _a = this.properties, width = _a.width, height = _a.height, radius = _a.radius, _showTitle = _a._showTitle, _titleHeight = _a._titleHeight;
         if (!isNil(width)) {
             this.width = width;
         }
@@ -43,6 +73,12 @@ var VueNodeModel = /** @class */ (function (_super) {
         if (!isNil(radius)) {
             this.radius = radius;
         }
+        if (this.__baseHeight === undefined) {
+            this.__baseHeight = isNil(height) ? this.height : height;
+        }
+        var extra = _showTitle ? (_titleHeight !== null && _titleHeight !== void 0 ? _titleHeight : 28) : 0;
+        var base = isNil(height) ? this.__baseHeight : height;
+        this.height = base + extra;
     };
     VueNodeModel.prototype.getTextStyle = function () {
         var _a = this.properties, _b = _a.refX, refX = _b === void 0 ? 0 : _b, _c = _a.refY, refY = _c === void 0 ? 0 : _c, textStyle = _a.textStyle;
@@ -55,6 +91,10 @@ var VueNodeModel = /** @class */ (function (_super) {
         var customNodeStyle = this.properties.style;
         return __assign(__assign({}, style), (cloneDeep(customNodeStyle) || {}));
     };
+    VueNodeModel.prototype.setNodeActions = function (actions) {
+        this.__actions =
+            isArray(actions) && !isEmpty(actions) ? cloneDeep(actions) : [];
+    };
     return VueNodeModel;
 }(HtmlNodeModel));
 export { VueNodeModel };

package/es/model.js.map

@@ -1 +1 @@
-{"version":3,"file":"model.js","sourceRoot":"","sources":["../src/model.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAkB,EAAE,aAAa,EAAuB,MAAM,iBAAiB,CAAA;AAC/E,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAiB5C;IAEU,gCAAgB;IAF1B;;IA2CA,CAAC;IAxCC,oCAAa,GAAb;QACE,wCAAwC;QAClC,IAAA,KAA4B,IAAI,CAAC,UAAU,EAAzC,KAAK,WAAA,EAAE,MAAM,YAAA,EAAE,MAAM,YAAoB,CAAA;QACjD,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;YAClB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QACpB,CAAC;QACD,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;YACnB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;QACtB,CAAC;QACD,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;YACnB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;QACtB,CAAC;IACH,CAAC;IAED,mCAAY,GAAZ;QACQ,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,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC,KAC/B,SAAS,EAAE,yBAAkB,IAAI,cAAI,IAAI,MAAG,IAC7C;IACH,CAAC;IAED,mCAAY,GAAZ;QACE,IAAM,KAAK,GAAG,gBAAK,CAAC,YAAY,WAAE,CAAA;QAEhC,IAAO,eAAe,GAEpB,IAAI,CAAC,UAAU,MAFK,CAEL;QAEnB,6BACK,KAAK,GACL,CAAC,SAAS,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC,EAGtC;IACH,CAAC;IACH,mBAAC;AAAD,CAAC,AA3CD,CAEU,aAAa,GAyCtB;;AAED,eAAe,YAAY,CAAA"}
+{"version":3,"file":"model.js","sourceRoot":"","sources":["../src/model.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAkB,EAGhB,aAAa,GAEd,MAAM,iBAAiB,CAAA;AACxB,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AA+B9D;IAEU,gCAAgB;IAMxB,sBAAY,IAAmB,EAAE,UAAsB;QACrD,YAAA,MAAK,YAAC,IAAI,EAAE,UAAU,CAAC,SAAA;QACf,IAAA,UAAU,GAAK,IAAI,WAAT,CAAS;QAC3B,mCAAmC;QACnC,IAAI,UAAU,EAAE,CAAC;YACP,IAAA,KAAmC,UAAU,WAA3B,EAAlB,UAAU,mBAAG,KAAK,KAAA,EAAE,KAAe,UAAU,MAAf,EAAV,KAAK,mBAAG,EAAE,KAAA,CAAe;YACrD,IAAI,UAAU,EAAE,CAAC;gBACf,KAAI,CAAC,QAAQ,GAAG,GAAG,CAAA;gBACnB,KAAI,CAAC,SAAS,GAAG,EAAE,CAAA;gBACnB,KAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAA;gBAC1B,iCAAiC;gBACjC,IAAM,QAAQ,GAAG,KAAI,CAAC,KAAK,GAAG,KAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAI,CAAC,KAAK,CAAA;gBACxE,IAAM,SAAS,GACb,KAAI,CAAC,MAAM,GAAG,KAAI,CAAC,SAAS,CAAC,CAAC,CAAC,KAAI,CAAC,SAAS,CAAC,CAAC,CAAC,KAAI,CAAC,MAAM,CAAA;gBAE7D,KAAI,CAAC,aAAa,qBAChB,SAAS,EAAE,KAAK,IACb,UAAU,KACb,KAAK,aACH,QAAQ,EAAE,SAAS,IAChB,SAAS,CAAC,KAAK,CAAC,GAErB,KAAK,EAAE,QAAQ,GAAG,CAAC,EACnB,MAAM,EAAE,SAAS,GAAG,CAAC,IACrB,CAAA;gBACF,KAAI,CAAC,cAAc,CAAC;oBAClB;wBACE,IAAI,EAAE,IAAI;wBACV,QAAQ,EAAE,UAAC,SAAS,EAAE,UAAU;4BAC9B,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,EAAE,CAAC,CAAA;wBACpC,CAAC;qBACF;oBACD;wBACE,IAAI,EAAE,IAAI;wBACV,QAAQ,EAAE,UAAC,SAAS,EAAE,UAAU;4BAC9B,UAAU,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,CAAC,CAAA;wBACrC,CAAC;qBACF;iBACF,CAAC,CAAA;YACJ,CAAC;QACH,CAAC;QACD,OAAO,CAAC,GAAG,CAAC,WAAW,EAAE,KAAI,CAAC,CAAA;;IAChC,CAAC;IACD,oCAAa,GAAb;QACE,wCAAwC;QAClC,IAAA,KAAsD,IAAI,CAAC,UAAU,EAAnE,KAAK,WAAA,EAAE,MAAM,YAAA,EAAE,MAAM,YAAA,EAAE,UAAU,gBAAA,EAAE,YAAY,kBAAoB,CAAA;QAC3E,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;YAClB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QACpB,CAAC;QACD,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;YACnB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;QACtB,CAAC;QACD,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;YACnB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;QACtB,CAAC;QACD,IAAI,IAAI,CAAC,YAAY,KAAK,SAAS,EAAE,CAAC;YACpC,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAA;QAC1D,CAAC;QACD,IAAM,KAAK,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;QACnD,IAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAE,IAAI,CAAC,YAAuB,CAAC,CAAC,CAAC,MAAM,CAAA;QACnE,IAAI,CAAC,MAAM,GAAG,IAAI,GAAG,KAAK,CAAA;IAC5B,CAAC;IAED,mCAAY,GAAZ;QACQ,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,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC,KAC/B,SAAS,EAAE,yBAAkB,IAAI,cAAI,IAAI,MAAG,IAC7C;IACH,CAAC;IAED,mCAAY,GAAZ;QACE,IAAM,KAAK,GAAG,gBAAK,CAAC,YAAY,WAAE,CAAA;QAEhC,IAAO,eAAe,GAEpB,IAAI,CAAC,UAAU,MAFK,CAEL;QAEnB,6BACK,KAAK,GACL,CAAC,SAAS,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC,EAGtC;IACH,CAAC;IAED,qCAAc,GAAd,UAAe,OAAqB;QAClC,IAAI,CAAC,SAAS;YACZ,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;IACnE,CAAC;IACH,mBAAC;AAAD,CAAC,AAtGD,CAEU,aAAa,GAoGtB;;AAED,eAAe,YAAY,CAAA"}