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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/.turbo/turbo-build.log +4 -4
  2. package/CHANGELOG.md +15 -0
  3. package/dist/index.css +122 -0
  4. package/es/components/Container.d.ts +9 -0
  5. package/es/components/Container.js +16 -0
  6. package/es/components/Container.js.map +1 -0
  7. package/es/components/TitleBar.d.ts +8 -0
  8. package/es/components/TitleBar.js +87 -0
  9. package/es/components/TitleBar.js.map +1 -0
  10. package/es/index.css +122 -0
  11. package/es/index.less +1 -0
  12. package/es/model.d.ts +18 -1
  13. package/es/model.js +46 -8
  14. package/es/model.js.map +1 -1
  15. package/es/style/index.css +122 -0
  16. package/es/style/index.less +140 -0
  17. package/es/style/raw.d.ts +4 -0
  18. package/es/style/raw.js +6 -0
  19. package/es/style/raw.js.map +1 -0
  20. package/es/view.d.ts +10 -1
  21. package/es/view.js +123 -9
  22. package/es/view.js.map +1 -1
  23. package/es/wrapper.d.ts +1 -1
  24. package/es/wrapper.js +4 -2
  25. package/es/wrapper.js.map +1 -1
  26. package/lib/components/Container.d.ts +9 -0
  27. package/lib/components/Container.js +23 -0
  28. package/lib/components/Container.js.map +1 -0
  29. package/lib/components/TitleBar.d.ts +8 -0
  30. package/lib/components/TitleBar.js +114 -0
  31. package/lib/components/TitleBar.js.map +1 -0
  32. package/lib/index.css +122 -0
  33. package/lib/index.less +1 -0
  34. package/lib/model.d.ts +18 -1
  35. package/lib/model.js +44 -6
  36. package/lib/model.js.map +1 -1
  37. package/lib/style/index.css +122 -0
  38. package/lib/style/index.less +140 -0
  39. package/lib/style/raw.d.ts +4 -0
  40. package/lib/style/raw.js +9 -0
  41. package/lib/style/raw.js.map +1 -0
  42. package/lib/view.d.ts +10 -1
  43. package/lib/view.js +123 -9
  44. package/lib/view.js.map +1 -1
  45. package/lib/wrapper.d.ts +1 -1
  46. package/lib/wrapper.js +7 -2
  47. package/lib/wrapper.js.map +1 -1
  48. package/package.json +3 -3
  49. package/rollup.config.js +52 -0
  50. package/src/components/Container.tsx +33 -0
  51. package/src/components/TitleBar.tsx +149 -0
  52. package/src/index.less +1 -0
  53. package/src/model.ts +82 -6
  54. package/src/style/index.less +140 -0
  55. package/src/style/raw.ts +129 -0
  56. package/src/view.ts +102 -9
  57. package/src/wrapper.tsx +17 -2
package/es/style/index.css ADDED
@@ -0,0 +1,122 @@
1
+ .lf-vue-node-container {
2
+ position: relative;
3
+ display: flex;
4
+ flex-direction: column;
5
+ box-sizing: border-box;
6
+ padding: 6px;
7
+ color: #474747;
8
+ border-radius: 12px;
9
+ box-shadow: 0 0 10px #cad2e15f;
10
+ }
11
+ .lf-vue-node-content-wrap {
12
+ display: flex;
13
+ flex: 1 1 auto;
14
+ justify-content: center;
15
+ }
16
+ .lf-vue-node-title {
17
+ display: flex;
18
+ align-items: flex-start;
19
+ justify-content: space-between;
20
+ box-sizing: border-box;
21
+ margin-bottom: 4px;
22
+ padding: 0 8px;
23
+ backdrop-filter: saturate(180%) blur(4px);
24
+ }
25
+ .lf-vue-node-title-expanded {
26
+ margin-bottom: 6px;
27
+ padding-bottom: 8px;
28
+ border-bottom: 1px solid #eaeaea;
29
+ }
30
+ @supports not (backdrop-filter: blur(1px)) {
31
+ .lf-vue-node-title {
32
+ backdrop-filter: none;
33
+ }
34
+ }
35
+ .lf-vue-node-title-left {
36
+ display: flex;
37
+ gap: 6px;
38
+ align-items: center;
39
+ min-width: 0;
40
+ }
41
+ .lf-vue-node-title-icon {
42
+ display: inline-block;
43
+ width: 16px;
44
+ height: 16px;
45
+ color: #666;
46
+ font-style: normal;
47
+ line-height: 16px;
48
+ text-align: center;
49
+ }
50
+ .lf-vue-node-title-text {
51
+ overflow: hidden;
52
+ color: #333;
53
+ font-weight: 500;
54
+ font-size: 14px;
55
+ white-space: nowrap;
56
+ text-overflow: ellipsis;
57
+ }
58
+ .lf-vue-node-title-actions {
59
+ display: flex;
60
+ gap: 6px;
61
+ align-items: center;
62
+ }
63
+ .lf-vue-node-title-expand,
64
+ .lf-vue-node-title-more {
65
+ display: inline-flex;
66
+ align-items: center;
67
+ justify-content: center;
68
+ width: 20px;
69
+ height: 20px;
70
+ padding: 2px;
71
+ background: transparent;
72
+ border: none;
73
+ border-radius: 4px;
74
+ cursor: pointer;
75
+ transition: background 0.15s ease;
76
+ appearance: none;
77
+ }
78
+ .lf-vue-node-title-expand:hover,
79
+ .lf-vue-node-title-more:hover {
80
+ background: rgba(0, 0, 0, 0.06);
81
+ }
82
+ .lf-vue-node-title-expand-icon {
83
+ color: #666;
84
+ font-style: normal;
85
+ transition: transform 0.3s ease;
86
+ }
87
+ .lf-vue-node-title-more-icon {
88
+ color: #666;
89
+ font-style: normal;
90
+ }
91
+ .lf-vue-node-title-tooltip {
92
+ position: absolute;
93
+ top: -50px;
94
+ right: -135px;
95
+ min-width: 120px;
96
+ max-width: 240px;
97
+ padding: 6px 8px;
98
+ background: #fff;
99
+ border: 1px solid rgba(0, 0, 0, 0.1);
100
+ border-radius: 6px;
101
+ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
102
+ transform: translateY(calc(100% + 4px));
103
+ transition: opacity 0.15s ease, transform 0.15s ease;
104
+ }
105
+ .lf-vue-node-title-tooltip-list {
106
+ display: flex;
107
+ flex-direction: column;
108
+ gap: 4px;
109
+ }
110
+ .lf-vue-node-title-tooltip-item {
111
+ display: flex;
112
+ align-items: center;
113
+ justify-content: flex-start;
114
+ padding: 6px;
115
+ color: #333;
116
+ font-size: 12px;
117
+ border-radius: 4px;
118
+ cursor: pointer;
119
+ }
120
+ .lf-vue-node-title-tooltip-item:hover {
121
+ background: rgba(0, 0, 0, 0.05);
122
+ }
package/es/style/index.less ADDED
@@ -0,0 +1,140 @@
1
+ .lf-vue-node-container {
2
+ position: relative;
3
+ display: flex;
4
+ flex-direction: column;
5
+ box-sizing: border-box;
6
+ padding: 6px;
7
+ color: #474747;
8
+ border-radius: 12px;
9
+ box-shadow: 0 0 10px #cad2e15f;
10
+ }
11
+
12
+ .lf-vue-node-content-wrap {
13
+ display: flex;
14
+ flex: 1 1 auto;
15
+ justify-content: center;
16
+ }
17
+
18
+ .lf-vue-node-title {
19
+ display: flex;
20
+ align-items: flex-start;
21
+ justify-content: space-between;
22
+ box-sizing: border-box;
23
+ margin-bottom: 4px;
24
+ padding: 0 8px;
25
+ backdrop-filter: saturate(180%) blur(4px);
26
+
27
+ &-expanded {
28
+ margin-bottom: 6px;
29
+ padding-bottom: 8px;
30
+ border-bottom: 1px solid #eaeaea;
31
+ }
32
+ }
33
+
34
+ @supports not (backdrop-filter: blur(1px)) {
35
+ .lf-vue-node-title {
36
+ backdrop-filter: none;
37
+ }
38
+ }
39
+
40
+ .lf-vue-node-title-left {
41
+ display: flex;
42
+ gap: 6px;
43
+ align-items: center;
44
+ min-width: 0;
45
+ }
46
+
47
+ .lf-vue-node-title-icon {
48
+ display: inline-block;
49
+ width: 16px;
50
+ height: 16px;
51
+ color: #666;
52
+ font-style: normal;
53
+ line-height: 16px;
54
+ text-align: center;
55
+ }
56
+
57
+ .lf-vue-node-title-text {
58
+ overflow: hidden;
59
+ color: #333;
60
+ font-weight: 500;
61
+ font-size: 14px;
62
+ white-space: nowrap;
63
+ text-overflow: ellipsis;
64
+ }
65
+
66
+ .lf-vue-node-title-actions {
67
+ display: flex;
68
+ gap: 6px;
69
+ align-items: center;
70
+ }
71
+
72
+ .lf-vue-node-title-expand,
73
+ .lf-vue-node-title-more {
74
+ display: inline-flex;
75
+ align-items: center;
76
+ justify-content: center;
77
+ width: 20px;
78
+ height: 20px;
79
+ padding: 2px;
80
+ background: transparent;
81
+ border: none;
82
+ border-radius: 4px;
83
+ cursor: pointer;
84
+ transition: background 0.15s ease;
85
+ appearance: none;
86
+ }
87
+
88
+ .lf-vue-node-title-expand:hover,
89
+ .lf-vue-node-title-more:hover {
90
+ background: rgb(0 0 0 / 6%);
91
+ }
92
+
93
+ .lf-vue-node-title-expand-icon {
94
+ color: #666;
95
+ font-style: normal;
96
+ transition: transform 0.3s ease;
97
+ }
98
+
99
+ .lf-vue-node-title-more-icon {
100
+ color: #666;
101
+ font-style: normal;
102
+ }
103
+
104
+ .lf-vue-node-title-tooltip {
105
+ position: absolute;
106
+ top: -50px;
107
+ right: -135px;
108
+ min-width: 120px;
109
+ max-width: 240px;
110
+ padding: 6px 8px;
111
+ background: #fff;
112
+ border: 1px solid rgb(0 0 0 / 10%);
113
+ border-radius: 6px;
114
+ box-shadow: 0 6px 20px rgb(0 0 0 / 12%);
115
+ transform: translateY(calc(100% + 4px));
116
+ transition:
117
+ opacity 0.15s ease,
118
+ transform 0.15s ease;
119
+ }
120
+
121
+ .lf-vue-node-title-tooltip-list {
122
+ display: flex;
123
+ flex-direction: column;
124
+ gap: 4px;
125
+ }
126
+
127
+ .lf-vue-node-title-tooltip-item {
128
+ display: flex;
129
+ align-items: center;
130
+ justify-content: flex-start;
131
+ padding: 6px;
132
+ color: #333;
133
+ font-size: 12px;
134
+ border-radius: 4px;
135
+ cursor: pointer;
136
+ }
137
+
138
+ .lf-vue-node-title-tooltip-item:hover {
139
+ background: rgb(0 0 0 / 5%);
140
+ }
package/es/style/raw.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ /**
2
+ * Auto generated file, do not modify it!
3
+ */
4
+ 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/es/style/raw.js ADDED
@@ -0,0 +1,6 @@
1
+ /* eslint-disable */
2
+ /**
3
+ * Auto generated file, do not modify it!
4
+ */
5
+ export var 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";
6
+ //# sourceMappingURL=raw.js.map
package/es/style/raw.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"raw.js","sourceRoot":"","sources":["../../src/style/raw.ts"],"names":[],"mappings":"AAAA,oBAAoB;AAEpB;;GAEG;AAEH,MAAM,CAAC,IAAM,OAAO,GAAG,unFA0HtB,CAAA"}
package/es/view.d.ts CHANGED
@@ -2,12 +2,21 @@ import { Root } from 'react-dom/client';
2
2
  import { HtmlNode } from '@logicflow/core';
3
3
  export declare class ReactNodeView extends HtmlNode {
4
4
  root?: Root;
5
+ private containerEl?;
6
+ private __resizeObserver?;
7
+ private __resizeRafId?;
8
+ private __lastWidth?;
9
+ private __lastHeight?;
10
+ private __fallbackUnlisten?;
11
+ private __throttledUpdate;
5
12
  protected targetId(): string;
6
13
  componentWillUnmount(): void;
7
14
  setHtml(rootEl: SVGForeignObjectElement): void;
8
- confirmUpdate(_rootEl: SVGForeignObjectElement): void;
9
15
  protected renderReactComponent(container: HTMLElement): void;
10
16
  protected unmountReactComponent(): void;
11
17
  unmount(): void;
18
+ private measureAndUpdate;
19
+ private startResizeObserver;
20
+ private stopResizeObserver;
12
21
  }
13
22
  export default ReactNodeView;
package/es/view.js CHANGED
@@ -16,13 +16,70 @@ var __extends = (this && this.__extends) || (function () {
16
16
  import { createElement } from 'react';
17
17
  import { createRoot } from 'react-dom/client';
18
18
  import { HtmlNode } from '@logicflow/core';
19
+ import { throttle, round, get, isFunction, isArray, clamp, isNumber, } from 'lodash-es';
19
20
  import { Wrapper } from './wrapper';
20
21
  import { Portal } from './portal';
21
22
  import { createPortal } from 'react-dom';
22
23
  var ReactNodeView = /** @class */ (function (_super) {
23
24
  __extends(ReactNodeView, _super);
24
25
  function ReactNodeView() {
25
- return _super !== null && _super.apply(this, arguments) || this;
26
+ var _this = _super !== null && _super.apply(this, arguments) || this;
27
+ _this.__throttledUpdate = throttle(function () { return _this.measureAndUpdate(); }, 80);
28
+ _this.measureAndUpdate = function () {
29
+ try {
30
+ var root = _this.containerEl;
31
+ if (!root)
32
+ return;
33
+ var target = root.firstElementChild || root;
34
+ var rect = target.getBoundingClientRect();
35
+ var width = round(rect.width);
36
+ var height = round(rect.height);
37
+ if (width <= 0 || height <= 0)
38
+ return;
39
+ if (width === _this.__lastWidth && height === _this.__lastHeight)
40
+ return;
41
+ _this.__lastWidth = width;
42
+ _this.__lastHeight = height;
43
+ var props = _this.props.model.properties;
44
+ var extra = get(props, '_showTitle')
45
+ ? isNumber(get(props, '_titleHeight'))
46
+ ? get(props, '_titleHeight')
47
+ : 28
48
+ : 0;
49
+ var baseHeight = clamp(height - extra, 1, Number.MAX_SAFE_INTEGER);
50
+ _this.props.model.setProperties({ width: width, height: baseHeight });
51
+ }
52
+ catch (err) {
53
+ console.error('measureAndUpdate error', err);
54
+ }
55
+ };
56
+ return _this;
57
+ // TODO: 确认是否需要重写 onMouseDown 方法
58
+ // handleMouseDown(ev: MouseEvent, x: number, y: number) {
59
+ // const target = ev.target as Element
60
+ // const tagName = target.tagName.toLowerCase()
61
+ // if (tagName === 'input') {
62
+ // const type = target.getAttribute('type')
63
+ // if (
64
+ // type == null ||
65
+ // [
66
+ // 'text',
67
+ // 'password',
68
+ // 'number',
69
+ // 'email',
70
+ // 'search',
71
+ // 'tel',
72
+ // 'url',
73
+ // ].includes(type)
74
+ // ) {
75
+ // return
76
+ // }
77
+ // }
78
+ //
79
+ // console.log('pointer position, x:', x, 'y: ', y)
80
+ // // TODO
81
+ // // super.handleMouseDown(ev)
82
+ // }
26
83
  }
27
84
  ReactNodeView.prototype.targetId = function () {
28
85
  return "".concat(this.props.graphModel.flowId, ":").concat(this.props.model.id);
@@ -32,15 +89,23 @@ var ReactNodeView = /** @class */ (function (_super) {
32
89
  this.unmount();
33
90
  };
34
91
  ReactNodeView.prototype.setHtml = function (rootEl) {
35
- var el = document.createElement('div');
36
- el.className = 'custom-react-node-content';
37
- this.renderReactComponent(el);
38
- rootEl.appendChild(el);
39
- };
40
- ReactNodeView.prototype.confirmUpdate = function (_rootEl) {
41
- // TODO: 如有需要，可以先通过继承的方式，自定义该节点的更新逻辑；我们后续会根据实际需求，丰富该功能
42
- console.log('_rootEl', _rootEl);
92
+ var existed = rootEl.querySelector('.custom-react-node-content');
93
+ if (existed) {
94
+ this.containerEl = existed;
95
+ }
96
+ else {
97
+ var el = document.createElement('div');
98
+ el.className = 'custom-react-node-content';
99
+ this.containerEl = el;
100
+ this.renderReactComponent(el);
101
+ rootEl.appendChild(el);
102
+ }
103
+ this.startResizeObserver();
43
104
  };
105
+ // confirmUpdate(_rootEl: SVGForeignObjectElement) {
106
+ // // TODO: 如有需要，可以先通过继承的方式，自定义该节点的更新逻辑；我们后续会根据实际需求，丰富该功能
107
+ // console.log('_rootEl', _rootEl)
108
+ // }
44
109
  ReactNodeView.prototype.renderReactComponent = function (container) {
45
110
  this.unmountReactComponent();
46
111
  var _a = this.props, model = _a.model, graphModel = _a.graphModel;
@@ -64,6 +129,7 @@ var ReactNodeView = /** @class */ (function (_super) {
64
129
  };
65
130
  ReactNodeView.prototype.unmountReactComponent = function () {
66
131
  if (this.rootEl && this.root) {
132
+ this.stopResizeObserver();
67
133
  this.root.unmount();
68
134
  this.root = undefined;
69
135
  this.rootEl.innerHTML = '';
@@ -73,6 +139,54 @@ var ReactNodeView = /** @class */ (function (_super) {
73
139
  ReactNodeView.prototype.unmount = function () {
74
140
  this.unmountReactComponent();
75
141
  };
142
+ ReactNodeView.prototype.startResizeObserver = function () {
143
+ var _this = this;
144
+ var _a;
145
+ var root = this.containerEl;
146
+ if (!root)
147
+ return;
148
+ try {
149
+ if (isFunction(window.ResizeObserver)) {
150
+ this.__resizeObserver = new window.ResizeObserver(function (entries) {
151
+ if (!isArray(entries) || !entries.length)
152
+ return;
153
+ if (_this.__resizeRafId)
154
+ cancelAnimationFrame(_this.__resizeRafId);
155
+ _this.__resizeRafId = requestAnimationFrame(_this.__throttledUpdate);
156
+ });
157
+ var target = root.firstElementChild || root;
158
+ (_a = this.__resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(target);
159
+ }
160
+ else {
161
+ window.addEventListener('resize', function () { return _this.__throttledUpdate(); });
162
+ this.__fallbackUnlisten = function () {
163
+ return window.removeEventListener('resize', function () { return _this.__throttledUpdate(); });
164
+ };
165
+ }
166
+ }
167
+ catch (err) {
168
+ console.error('startResizeObserver error', err);
169
+ }
170
+ };
171
+ ReactNodeView.prototype.stopResizeObserver = function () {
172
+ try {
173
+ if (this.__resizeObserver) {
174
+ this.__resizeObserver.disconnect();
175
+ this.__resizeObserver = undefined;
176
+ }
177
+ if (this.__resizeRafId) {
178
+ cancelAnimationFrame(this.__resizeRafId);
179
+ this.__resizeRafId = undefined;
180
+ }
181
+ if (this.__fallbackUnlisten) {
182
+ this.__fallbackUnlisten();
183
+ this.__fallbackUnlisten = undefined;
184
+ }
185
+ }
186
+ catch (err) {
187
+ console.error('stopResizeObserver error', err);
188
+ }
189
+ };
76
190
  return ReactNodeView;
77
191
  }(HtmlNode));
78
192
  export { ReactNodeView };
package/es/view.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"view.js","sourceRoot":"","sources":["../src/view.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,OAAO,EAAE,aAAa,EAAe,MAAM,OAAO,CAAA;AAClD,OAAO,EAAE,UAAU,EAAQ,MAAM,kBAAkB,CAAA;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAExC;IAAmC,iCAAQ;IAA3C;;IAuFA,CAAC;IApFW,gCAAQ,GAAlB;QACE,OAAO,UAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,cAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAE,CAAA;IACjE,CAAC;IAED,4CAAoB,GAApB;QACE,gBAAK,CAAC,oBAAoB,WAAE,CAAA;QAC5B,IAAI,CAAC,OAAO,EAAE,CAAA;IAChB,CAAC;IAED,+BAAO,GAAP,UAAQ,MAA+B;QACrC,IAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;QACxC,EAAE,CAAC,SAAS,GAAG,2BAA2B,CAAA;QAE1C,IAAI,CAAC,oBAAoB,CAAC,EAAE,CAAC,CAAA;QAC7B,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,CAAA;IACxB,CAAC;IAED,qCAAa,GAAb,UAAc,OAAgC;QAC5C,sDAAsD;QACtD,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,OAAO,CAAC,CAAA;IACjC,CAAC;IAES,4CAAoB,GAA9B,UAA+B,SAAsB;QACnD,IAAI,CAAC,qBAAqB,EAAE,CAAA;QACtB,IAAA,KAAwB,IAAI,CAAC,KAAK,EAAhC,KAAK,WAAA,EAAE,UAAU,gBAAe,CAAA;QAExC,IAAI,SAAS,EAAE,CAAC;YACd,qBAAqB;YACrB,IAAM,IAAI,GAAG,aAAa,CAAC,OAAO,EAAE;gBAClC,IAAI,EAAE,KAAK;gBACX,KAAK,EAAE,UAAU;aAClB,CAAC,CAAA;YAEF,IAAI,MAAM,CAAC,QAAQ,EAAE,EAAE,CAAC;gBACtB,YAAY;gBACZ,IAAM,MAAM,GAAG,YAAY,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,CAAC,EAAE,CAAgB,CAAA;gBACrE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,MAAM,CAAC,CAAA;YACzC,CAAC;iBAAM,CAAC;gBACN,aAAa;gBACb,IAAI,CAAC,IAAI,GAAG,UAAU,CAAC,SAAS,CAAC,CAAA;gBACjC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;YACxB,CAAC;QACH,CAAC;IACH,CAAC;IAES,6CAAqB,GAA/B;QACE,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YAC7B,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAA;YACnB,IAAI,CAAC,IAAI,GAAG,SAAS,CAAA;YACrB,IAAI,CAAC,MAAM,CAAC,SAAS,GAAG,EAAE,CAAA;QAC5B,CAAC;IACH,CAAC;IAED,4CAA4C;IAC5C,+BAAO,GAAP;QACE,IAAI,CAAC,qBAAqB,EAAE,CAAA;IAC9B,CAAC;IA4BH,oBAAC;AAAD,CAAC,AAvFD,CAAmC,QAAQ,GAuF1C;;AAED,eAAe,aAAa,CAAA"}
1
+ {"version":3,"file":"view.js","sourceRoot":"","sources":["../src/view.ts"],"names":[],"mappings":"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"}
package/es/wrapper.d.ts CHANGED
@@ -11,6 +11,6 @@ export declare class Wrapper extends PureComponent<IWrapperProps, IWrapperState>
11
11
  constructor(props: IWrapperProps);
12
12
  componentDidMount(): void;
13
13
  clone(elem: React.ReactElement): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
14
- render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
14
+ render(): React.JSX.Element | null;
15
15
  }
16
16
  export default Wrapper;
package/es/wrapper.js CHANGED
@@ -16,6 +16,7 @@ var __extends = (this && this.__extends) || (function () {
16
16
  import React, { PureComponent } from 'react';
17
17
  import { EventType } from '@logicflow/core';
18
18
  import { reactNodesMap } from './registry';
19
+ import Container from './components/Container';
19
20
  var Wrapper = /** @class */ (function (_super) {
20
21
  __extends(Wrapper, _super);
21
22
  function Wrapper(props) {
@@ -50,12 +51,13 @@ var Wrapper = /** @class */ (function (_super) {
50
51
  var content = reactNodesMap[node.type];
51
52
  if (!content)
52
53
  return null;
54
+ var _a = (node.properties || {})._showTitle, _showTitle = _a === void 0 ? false : _a;
53
55
  var component = content.component;
54
56
  if (React.isValidElement(component)) {
55
- return this.clone(component);
57
+ return _showTitle ? (React.createElement(Container, { node: this.props.node, graph: this.props.graph }, this.clone(component))) : (this.clone(component));
56
58
  }
57
59
  var FC = component;
58
- return this.clone(React.createElement(FC, null));
60
+ return _showTitle ? (React.createElement(Container, { node: this.props.node, graph: this.props.graph }, this.clone(React.createElement(FC, null)))) : (this.clone(React.createElement(FC, null)));
59
61
  };
60
62
  return Wrapper;
61
63
  }(PureComponent));
package/es/wrapper.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"wrapper.js","sourceRoot":"","sources":["../src/wrapper.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAC5C,OAAO,EAAiB,SAAS,EAAc,MAAM,iBAAiB,CAAA;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAW1C;IAA6B,2BAA2C;IACtE,iBAAY,KAAoB;QAC9B,YAAA,MAAK,YAAC,KAAK,CAAC,SAAA;QACZ,KAAI,CAAC,KAAK,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,CAAA;;IAC1B,CAAC;IAED,mCAAiB,GAAjB;QAAA,iBAgBC;QAfC,iCAAiC;QAC3B,IAAA,KAAkB,IAAI,CAAC,KAAK,EAA1B,IAAI,UAAA,EAAE,KAAK,WAAe,CAAA;QAClC,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC,SAAS,CAAC,sBAAsB,EAAE,UAAC,SAAS;YAC/D,IAAM,IAAI,GAAG,SAAS,CAAC,IAAgB,CAAA;YACvC,IAAM,OAAO,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YAExC,IAAI,OAAO,IAAI,SAAS,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,EAAE,CAAC;gBAChC,IAAA,QAAM,GAAK,OAAO,OAAZ,CAAY;gBAE1B,4DAA4D;gBAC5D,IAAI,CAAC,QAAM,IAAI,IAAI,CAAC,IAAI,CAAC,UAAC,GAAG,IAAK,OAAA,QAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,EAApB,CAAoB,CAAC,EAAE,CAAC;oBACxD,KAAI,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAI,CAAC,KAAK,CAAC,IAAI,GAAG,CAAC,EAAE,CAAC,CAAA;gBAC9C,CAAC;YACH,CAAC;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,uBAAK,GAAL,UAAM,IAAwB;QACtB,IAAA,KAAkB,IAAI,CAAC,KAAK,EAA1B,IAAI,UAAA,EAAE,KAAK,WAAe,CAAA;QAElC,OAAO,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ;YAClC,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC;YAC1B,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE,EAAE,IAAI,MAAA,EAAE,KAAK,OAAA,EAAE,CAAC,CAAA;IAC/C,CAAC;IAED,wBAAM,GAAN;QACU,IAAA,IAAI,GAAK,IAAI,CAAC,KAAK,KAAf,CAAe;QAC3B,IAAM,OAAO,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAExC,IAAI,CAAC,OAAO;YAAE,OAAO,IAAI,CAAA;QAEjB,IAAA,SAAS,GAAK,OAAO,UAAZ,CAAY;QAC7B,IAAI,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,CAAC;YACpC,OAAO,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;QAC9B,CAAC;QACD,IAAM,EAAE,GAAG,SAAqB,CAAA;QAChC,OAAO,IAAI,CAAC,KAAK,CAAC,oBAAC,EAAE,OAAG,CAAC,CAAA;IAC3B,CAAC;IACH,cAAC;AAAD,CAAC,AA7CD,CAA6B,aAAa,GA6CzC;;AAED,eAAe,OAAO,CAAA"}
1
+ {"version":3,"file":"wrapper.js","sourceRoot":"","sources":["../src/wrapper.tsx"],"names":[],"mappings":"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"}
package/lib/components/Container.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import React from 'react';
2
+ import { BaseNodeModel, GraphModel } from '@logicflow/core';
3
+ export type ContainerProps = {
4
+ node: BaseNodeModel;
5
+ graph: GraphModel;
6
+ children?: React.ReactNode;
7
+ };
8
+ export declare const Container: React.FC<ContainerProps>;
9
+ export default Container;
package/lib/components/Container.js ADDED
@@ -0,0 +1,23 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.Container = void 0;
7
+ var react_1 = __importDefault(require("react"));
8
+ var TitleBar_1 = __importDefault(require("./TitleBar"));
9
+ var Container = function (_a) {
10
+ var _b;
11
+ var node = _a.node, graph = _a.graph, children = _a.children;
12
+ var props = (node === null || node === void 0 ? void 0 : node.properties) || {};
13
+ var titleColor = ((_b = props.style) === null || _b === void 0 ? void 0 : _b.titleColor) || '#E5EEFC';
14
+ var expanded = props._expanded === true;
15
+ return (react_1.default.createElement("div", { className: "lf-vue-node-container", style: {
16
+ background: "linear-gradient(180deg, ".concat(titleColor, " 0%, #FFFFFF 24px)"),
17
+ } },
18
+ props._showTitle && react_1.default.createElement(TitleBar_1.default, { node: node, graph: graph }),
19
+ expanded && react_1.default.createElement("div", { className: "lf-vue-node-content-wrap" }, children)));
20
+ };
21
+ exports.Container = Container;
22
+ exports.default = exports.Container;
23
+ //# sourceMappingURL=Container.js.map
package/lib/components/Container.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Container.js","sourceRoot":"","sources":["../../src/components/Container.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAAyB;AAEzB,wDAAiC;AAQ1B,IAAM,SAAS,GAA6B,UAAC,EAInD;;QAHC,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,QAAQ,cAAA;IAER,IAAM,KAAK,GAAQ,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,UAAU,KAAI,EAAE,CAAA;IACzC,IAAM,UAAU,GAAG,CAAA,MAAA,KAAK,CAAC,KAAK,0CAAE,UAAU,KAAI,SAAS,CAAA;IACvD,IAAM,QAAQ,GAAG,KAAK,CAAC,SAAS,KAAK,IAAI,CAAA;IAEzC,OAAO,CACL,uCACE,SAAS,EAAC,uBAAuB,EACjC,KAAK,EAAE;YACL,UAAU,EAAE,kCAA2B,UAAU,uBAAoB;SACtE;QAEA,KAAK,CAAC,UAAU,IAAI,8BAAC,kBAAQ,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,GAAI;QAC1D,QAAQ,IAAI,uCAAK,SAAS,EAAC,0BAA0B,IAAE,QAAQ,CAAO,CACnE,CACP,CAAA;AACH,CAAC,CAAA;AApBY,QAAA,SAAS,aAoBrB;AAED,kBAAe,iBAAS,CAAA"}
package/lib/components/TitleBar.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import React from 'react';
2
+ import { BaseNodeModel, GraphModel } from '@logicflow/core';
3
+ export type TitleBarProps = {
4
+ node: BaseNodeModel;
5
+ graph: GraphModel;
6
+ };
7
+ export declare const TitleBar: React.FC<TitleBarProps>;
8
+ export default TitleBar;