@logicflow/react-node-registry 1.0.8 → 1.0.10
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.
- package/.turbo/turbo-build.log +20 -3
- package/CHANGELOG.md +13 -0
- package/dist/index.min.js +2 -0
- package/dist/index.min.js.map +1 -0
- package/es/index.d.ts +5 -0
- package/es/index.js +6 -0
- package/es/index.js.map +1 -0
- package/es/model.d.ts +16 -0
- package/es/model.js +63 -0
- package/es/model.js.map +1 -0
- package/es/portal.d.ts +9 -0
- package/es/portal.js +78 -0
- package/es/portal.js.map +1 -0
- package/es/registry.d.ts +17 -0
- package/es/registry.js +19 -0
- package/es/registry.js.map +1 -0
- package/es/view.d.ts +13 -0
- package/es/view.js +78 -0
- package/es/view.js.map +1 -0
- package/es/wrapper.d.ts +16 -0
- package/es/wrapper.js +64 -0
- package/es/wrapper.js.map +1 -0
- package/lib/index.d.ts +5 -0
- package/lib/index.js +22 -0
- package/lib/index.js.map +1 -0
- package/lib/model.d.ts +16 -0
- package/lib/model.js +66 -0
- package/lib/model.js.map +1 -0
- package/lib/portal.d.ts +9 -0
- package/lib/portal.js +104 -0
- package/lib/portal.js.map +1 -0
- package/lib/registry.d.ts +17 -0
- package/lib/registry.js +26 -0
- package/lib/registry.js.map +1 -0
- package/lib/view.d.ts +13 -0
- package/lib/view.js +81 -0
- package/lib/view.js.map +1 -0
- package/lib/wrapper.d.ts +16 -0
- package/lib/wrapper.js +90 -0
- package/lib/wrapper.js.map +1 -0
- package/package.json +3 -3
- package/stats.html +1 -1
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,17 +1,34 @@
|
|
|
1
1
|
|
|
2
|
-
> @logicflow/react-node-registry@1.0.
|
|
2
|
+
> @logicflow/react-node-registry@1.0.9 prebuild /Users/didi/Desktop/github/LogicFlow/packages/react-node-registry
|
|
3
3
|
> rss
|
|
4
4
|
|
|
5
5
|
> [prebuild] run-s -s clean:build
|
|
6
6
|
> [clean:build] rimraf dist es lib
|
|
7
7
|
|
|
8
|
-
> @logicflow/react-node-registry@1.0.
|
|
8
|
+
> @logicflow/react-node-registry@1.0.9 build /Users/didi/Desktop/github/LogicFlow/packages/react-node-registry
|
|
9
9
|
> rss
|
|
10
10
|
|
|
11
11
|
> [build] run-p -s build:dev build:umd
|
|
12
|
-
> [build:umd] pnpm run --if-present build:less && rollup -c ../../rollup.config.js --bundleConfigAsCjs
|
|
13
12
|
> [build:dev] pnpm run --if-present build:less && run-p -s build:cjs build:esm
|
|
13
|
+
> [build:umd] pnpm run --if-present build:less && rollup -c ../../rollup.config.js --bundleConfigAsCjs
|
|
14
14
|
> [build:less] ./scripts/build-less
|
|
15
15
|
> [build:less] ./scripts/build-less
|
|
16
16
|
[36m
|
|
17
17
|
[1m./src/index.ts[22m → [1mdist/index.min.js[22m...[39m
|
|
18
|
+
+------------------------------------+
|
|
19
|
+
| |
|
|
20
|
+
| [32m[1mBundle Format:[22m[39m [33mumd[39m |
|
|
21
|
+
| [32m[1mBundle Name:[22m[39m [33mReactNodeRegistry[39m |
|
|
22
|
+
| [32m[1mExternal Globals:[22m[39m |
|
|
23
|
+
| [33m @logicflow/core: Core[39m |
|
|
24
|
+
| [33m react: React[39m |
|
|
25
|
+
| [33m react-dom: ReactDom[39m |
|
|
26
|
+
| |
|
|
27
|
+
| [32m[1mDestination:[22m[39m [33mdist/index.min.js[39m |
|
|
28
|
+
| [32m[1mBundle Size:[22m[39m [33m433 B[39m |
|
|
29
|
+
| [32m[1mMinified Size:[22m[39m [33m394 B[39m |
|
|
30
|
+
| [32m[1mGZipped Size:[22m[39m [33m208 B[39m |
|
|
31
|
+
| |
|
|
32
|
+
+------------------------------------+
|
|
33
|
+
[1m[33m(!) [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.[39m[22m
|
|
34
|
+
[32mcreated [1mdist/index.min.js[22m in [1m5.3s[22m[39m
|
package/CHANGELOG.md
CHANGED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
!function(e){"function"==typeof define&&define.amd?define(e):e()}((function(){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const e=require("tslib");e.__exportStar(require("./view"),exports),e.__exportStar(require("./model"),exports),e.__exportStar(require("./registry"),exports),e.__exportStar(require("./wrapper"),exports),e.__exportStar(require("./portal"),exports)}));
|
|
2
|
+
//# sourceMappingURL=index.min.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.min.js","sources":["../src/index.ts"],"sourcesContent":["export * from './view'\nexport * from './model'\nexport * from './registry'\nexport * from './wrapper'\nexport * from './portal'\n"],"names":["tslib_1","__exportStar","require","exports"],"mappings":"2KAAAA,EAAsBC,aAAAC,QAAA,UAAAC,SACtBH,EAAuBC,aAAAC,QAAA,WAAAC,SACvBH,EAA0BC,aAAAC,QAAA,cAAAC,SAC1BH,EAAyBC,aAAAC,QAAA,aAAAC,SACzBH,EAAwBC,aAAAC,QAAA,YAAAC"}
|
package/es/index.d.ts
ADDED
package/es/index.js
ADDED
package/es/index.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA"}
|
package/es/model.d.ts
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import LogicFlow, { HtmlNodeModel, IHtmlNodeProperties } from '@logicflow/core';
|
|
2
|
+
export interface ReactCustomProperties extends IHtmlNodeProperties {
|
|
3
|
+
width?: number;
|
|
4
|
+
height?: number;
|
|
5
|
+
radius?: number;
|
|
6
|
+
refX?: number;
|
|
7
|
+
refY?: number;
|
|
8
|
+
style?: LogicFlow.CommonTheme;
|
|
9
|
+
textStyle?: LogicFlow.TextNodeTheme;
|
|
10
|
+
}
|
|
11
|
+
export declare class ReactNodeModel<P extends ReactCustomProperties = ReactCustomProperties> extends HtmlNodeModel<P> {
|
|
12
|
+
setAttributes(): void;
|
|
13
|
+
getTextStyle(): LogicFlow.TextNodeTheme;
|
|
14
|
+
getNodeStyle(): LogicFlow.CommonTheme;
|
|
15
|
+
}
|
|
16
|
+
export default ReactNodeModel;
|
package/es/model.js
ADDED
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
var __extends = (this && this.__extends) || (function () {
|
|
2
|
+
var extendStatics = function (d, b) {
|
|
3
|
+
extendStatics = Object.setPrototypeOf ||
|
|
4
|
+
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
5
|
+
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
|
6
|
+
return extendStatics(d, b);
|
|
7
|
+
};
|
|
8
|
+
return function (d, b) {
|
|
9
|
+
if (typeof b !== "function" && b !== null)
|
|
10
|
+
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
|
11
|
+
extendStatics(d, b);
|
|
12
|
+
function __() { this.constructor = d; }
|
|
13
|
+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
14
|
+
};
|
|
15
|
+
})();
|
|
16
|
+
var __assign = (this && this.__assign) || function () {
|
|
17
|
+
__assign = Object.assign || function(t) {
|
|
18
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
19
|
+
s = arguments[i];
|
|
20
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
21
|
+
t[p] = s[p];
|
|
22
|
+
}
|
|
23
|
+
return t;
|
|
24
|
+
};
|
|
25
|
+
return __assign.apply(this, arguments);
|
|
26
|
+
};
|
|
27
|
+
import { HtmlNodeModel } from '@logicflow/core';
|
|
28
|
+
import { cloneDeep } from 'lodash-es';
|
|
29
|
+
var ReactNodeModel = /** @class */ (function (_super) {
|
|
30
|
+
__extends(ReactNodeModel, _super);
|
|
31
|
+
function ReactNodeModel() {
|
|
32
|
+
return _super !== null && _super.apply(this, arguments) || this;
|
|
33
|
+
}
|
|
34
|
+
ReactNodeModel.prototype.setAttributes = function () {
|
|
35
|
+
console.log('this.properties', this.properties);
|
|
36
|
+
var _a = this.properties, width = _a.width, height = _a.height, radius = _a.radius;
|
|
37
|
+
if (width) {
|
|
38
|
+
this.width = width;
|
|
39
|
+
}
|
|
40
|
+
if (height) {
|
|
41
|
+
this.height = height;
|
|
42
|
+
}
|
|
43
|
+
if (radius) {
|
|
44
|
+
this.radius = radius;
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
ReactNodeModel.prototype.getTextStyle = function () {
|
|
48
|
+
// const { x, y, width, height } = this
|
|
49
|
+
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;
|
|
50
|
+
var style = _super.prototype.getTextStyle.call(this);
|
|
51
|
+
// 通过 transform 重新设置 text 的位置
|
|
52
|
+
return __assign(__assign(__assign({}, style), (cloneDeep(textStyle) || {})), { transform: "matrix(1 0 0 1 ".concat(refX, " ").concat(refY, ")") });
|
|
53
|
+
};
|
|
54
|
+
ReactNodeModel.prototype.getNodeStyle = function () {
|
|
55
|
+
var style = _super.prototype.getNodeStyle.call(this);
|
|
56
|
+
var customNodeStyle = this.properties.style;
|
|
57
|
+
return __assign(__assign({}, style), (cloneDeep(customNodeStyle) || {}));
|
|
58
|
+
};
|
|
59
|
+
return ReactNodeModel;
|
|
60
|
+
}(HtmlNodeModel));
|
|
61
|
+
export { ReactNodeModel };
|
|
62
|
+
export default ReactNodeModel;
|
|
63
|
+
//# sourceMappingURL=model.js.map
|
package/es/model.js.map
ADDED
|
@@ -0,0 +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,MAAM,WAAW,CAAA;AAiBrC;IAEU,kCAAgB;IAF1B;;IA4CA,CAAC;IAzCC,sCAAa,GAAb;QACE,OAAO,CAAC,GAAG,CAAC,iBAAiB,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;QACzC,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,SAAS,CAAC,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,SAAS,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC,EAGtC;IACH,CAAC;IACH,qBAAC;AAAD,CAAC,AA5CD,CAEU,aAAa,GA0CtB;;AAED,eAAe,cAAc,CAAA"}
|
package/es/portal.d.ts
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare namespace Portal {
|
|
3
|
+
function connect(id: string, portal: React.ReactPortal): void;
|
|
4
|
+
function disconnect(id: string): void;
|
|
5
|
+
function isActive(): boolean;
|
|
6
|
+
function getProvider(): () => React.FunctionComponentElement<{
|
|
7
|
+
children?: React.ReactNode;
|
|
8
|
+
}>;
|
|
9
|
+
}
|
package/es/portal.js
ADDED
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
2
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
3
|
+
if (ar || !(i in from)) {
|
|
4
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
5
|
+
ar[i] = from[i];
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
9
|
+
};
|
|
10
|
+
import React, { useReducer } from 'react';
|
|
11
|
+
export var Portal;
|
|
12
|
+
(function (Portal) {
|
|
13
|
+
var active = false;
|
|
14
|
+
var dispatch;
|
|
15
|
+
var reducer = function (state, action) {
|
|
16
|
+
var payload = action.payload;
|
|
17
|
+
switch (action.type) {
|
|
18
|
+
case 'add': {
|
|
19
|
+
var index = state.findIndex(function (item) { return item.id === payload.id; });
|
|
20
|
+
if (index >= 0) {
|
|
21
|
+
state[index] = payload;
|
|
22
|
+
return __spreadArray([], state, true);
|
|
23
|
+
}
|
|
24
|
+
return __spreadArray(__spreadArray([], state, true), [payload], false);
|
|
25
|
+
}
|
|
26
|
+
case 'remove': {
|
|
27
|
+
var index = state.findIndex(function (item) { return item.id === payload.id; });
|
|
28
|
+
if (index >= 0) {
|
|
29
|
+
var result = __spreadArray([], state, true);
|
|
30
|
+
result.splice(index, 1);
|
|
31
|
+
return result;
|
|
32
|
+
}
|
|
33
|
+
break;
|
|
34
|
+
}
|
|
35
|
+
default: {
|
|
36
|
+
break;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
return state;
|
|
40
|
+
};
|
|
41
|
+
function connect(id, portal) {
|
|
42
|
+
if (active) {
|
|
43
|
+
dispatch({
|
|
44
|
+
type: 'add',
|
|
45
|
+
payload: {
|
|
46
|
+
id: id,
|
|
47
|
+
portal: portal,
|
|
48
|
+
},
|
|
49
|
+
});
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
Portal.connect = connect;
|
|
53
|
+
function disconnect(id) {
|
|
54
|
+
if (active) {
|
|
55
|
+
dispatch({
|
|
56
|
+
type: 'remove',
|
|
57
|
+
payload: { id: id },
|
|
58
|
+
});
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
Portal.disconnect = disconnect;
|
|
62
|
+
function isActive() {
|
|
63
|
+
return active;
|
|
64
|
+
}
|
|
65
|
+
Portal.isActive = isActive;
|
|
66
|
+
function getProvider() {
|
|
67
|
+
return function () {
|
|
68
|
+
active = true;
|
|
69
|
+
var _a = useReducer(reducer, []), items = _a[0], mutate = _a[1];
|
|
70
|
+
dispatch = mutate;
|
|
71
|
+
return React.createElement(React.Fragment, {
|
|
72
|
+
children: items.map(function (item) { return item.portal; }),
|
|
73
|
+
});
|
|
74
|
+
};
|
|
75
|
+
}
|
|
76
|
+
Portal.getProvider = getProvider;
|
|
77
|
+
})(Portal || (Portal = {}));
|
|
78
|
+
//# sourceMappingURL=portal.js.map
|
package/es/portal.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"portal.js","sourceRoot":"","sources":["../src/portal.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,MAAM,KAAW,MAAM,CA4EtB;AA5ED,WAAiB,MAAM;IACrB,IAAI,MAAM,GAAG,KAAK,CAAA;IAClB,IAAI,QAAgC,CAAA;IAYpC,IAAM,OAAO,GAAG,UAAC,KAAgB,EAAE,MAAc;QAC/C,IAAM,OAAO,GAAG,MAAM,CAAC,OAAkB,CAAA;QACzC,QAAQ,MAAM,CAAC,IAAI,EAAE,CAAC;YACpB,KAAK,KAAK,CAAC,CAAC,CAAC;gBACX,IAAM,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC,UAAC,IAAI,IAAK,OAAA,IAAI,CAAC,EAAE,KAAK,OAAO,CAAC,EAAE,EAAtB,CAAsB,CAAC,CAAA;gBAC/D,IAAI,KAAK,IAAI,CAAC,EAAE,CAAC;oBACf,KAAK,CAAC,KAAK,CAAC,GAAG,OAAO,CAAA;oBACtB,yBAAW,KAAK,QAAC;gBACnB,CAAC;gBACD,uCAAW,KAAK,UAAE,OAAO,UAAC;YAC5B,CAAC;YACD,KAAK,QAAQ,CAAC,CAAC,CAAC;gBACd,IAAM,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC,UAAC,IAAI,IAAK,OAAA,IAAI,CAAC,EAAE,KAAK,OAAO,CAAC,EAAE,EAAtB,CAAsB,CAAC,CAAA;gBAC/D,IAAI,KAAK,IAAI,CAAC,EAAE,CAAC;oBACf,IAAM,MAAM,qBAAO,KAAK,OAAC,CAAA;oBACzB,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;oBACvB,OAAO,MAAM,CAAA;gBACf,CAAC;gBACD,MAAK;YACP,CAAC;YACD,OAAO,CAAC,CAAC,CAAC;gBACR,MAAK;YACP,CAAC;QACH,CAAC;QACD,OAAO,KAAK,CAAA;IACd,CAAC,CAAA;IAED,SAAgB,OAAO,CAAC,EAAU,EAAE,MAAyB;QAC3D,IAAI,MAAM,EAAE,CAAC;YACX,QAAQ,CAAC;gBACP,IAAI,EAAE,KAAK;gBACX,OAAO,EAAE;oBACP,EAAE,IAAA;oBACF,MAAM,QAAA;iBACP;aACF,CAAC,CAAA;QACJ,CAAC;IACH,CAAC;IAVe,cAAO,UAUtB,CAAA;IAED,SAAgB,UAAU,CAAC,EAAU;QACnC,IAAI,MAAM,EAAE,CAAC;YACX,QAAQ,CAAC;gBACP,IAAI,EAAE,QAAQ;gBACd,OAAO,EAAE,EAAE,EAAE,IAAA,EAAE;aAChB,CAAC,CAAA;QACJ,CAAC;IACH,CAAC;IAPe,iBAAU,aAOzB,CAAA;IAED,SAAgB,QAAQ;QACtB,OAAO,MAAM,CAAA;IACf,CAAC;IAFe,eAAQ,WAEvB,CAAA;IAED,SAAgB,WAAW;QACzB,OAAO;YACL,MAAM,GAAG,IAAI,CAAA;YACP,IAAA,KAAkB,UAAU,CAAC,OAAO,EAAE,EAAE,CAAC,EAAxC,KAAK,QAAA,EAAE,MAAM,QAA2B,CAAA;YAC/C,QAAQ,GAAG,MAAM,CAAA;YACjB,OAAO,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,EAAE;gBACzC,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,UAAC,IAAI,IAAK,OAAA,IAAI,CAAC,MAAM,EAAX,CAAW,CAAC;aAC3C,CAAC,CAAA;QACJ,CAAC,CAAA;IACH,CAAC;IATe,kBAAW,cAS1B,CAAA;AACH,CAAC,EA5EgB,MAAM,KAAN,MAAM,QA4EtB"}
|
package/es/registry.d.ts
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import LogicFlow, { BaseNodeModel, GraphModel } from '@logicflow/core';
|
|
3
|
+
import RegisterConfig = LogicFlow.RegisterConfig;
|
|
4
|
+
export type ReactNodeProps = {
|
|
5
|
+
node: BaseNodeModel;
|
|
6
|
+
graph: GraphModel;
|
|
7
|
+
};
|
|
8
|
+
export type ReactNodeConfig = {
|
|
9
|
+
type: string;
|
|
10
|
+
component: React.ComponentType<ReactNodeProps>;
|
|
11
|
+
effect?: (keyof LogicFlow.PropertiesType)[];
|
|
12
|
+
} & Partial<RegisterConfig>;
|
|
13
|
+
export declare const reactNodesMap: Record<string, {
|
|
14
|
+
component: React.ComponentType<ReactNodeProps>;
|
|
15
|
+
effect?: (keyof LogicFlow.PropertiesType)[];
|
|
16
|
+
}>;
|
|
17
|
+
export declare function register(config: ReactNodeConfig, lf: LogicFlow): void;
|
package/es/registry.js
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import ReactNodeView from './view';
|
|
2
|
+
import ReactNodeModel from './model';
|
|
3
|
+
export var reactNodesMap = {};
|
|
4
|
+
export function register(config, lf) {
|
|
5
|
+
var type = config.type, component = config.component, effect = config.effect, CustomNodeView = config.view, CustomNodeModel = config.model;
|
|
6
|
+
if (!type) {
|
|
7
|
+
throw new Error('You should specify type in config');
|
|
8
|
+
}
|
|
9
|
+
reactNodesMap[type] = {
|
|
10
|
+
component: component,
|
|
11
|
+
effect: effect,
|
|
12
|
+
};
|
|
13
|
+
lf.register({
|
|
14
|
+
type: type,
|
|
15
|
+
view: CustomNodeView || ReactNodeView,
|
|
16
|
+
model: CustomNodeModel || ReactNodeModel,
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
//# sourceMappingURL=registry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"registry.js","sourceRoot":"","sources":["../src/registry.ts"],"names":[],"mappings":"AACA,OAAO,aAAa,MAAM,QAAQ,CAAA;AAClC,OAAO,cAAc,MAAM,SAAS,CAAA;AAcpC,MAAM,CAAC,IAAM,aAAa,GAMtB,EAAE,CAAA;AAEN,MAAM,UAAU,QAAQ,CAAC,MAAuB,EAAE,EAAa;IAE3D,IAAA,IAAI,GAKF,MAAM,KALJ,EACJ,SAAS,GAIP,MAAM,UAJC,EACT,MAAM,GAGJ,MAAM,OAHF,EACA,cAAc,GAElB,MAAM,KAFY,EACb,eAAe,GACpB,MAAM,MADc,CACd;IAEV,IAAI,CAAC,IAAI,EAAE,CAAC;QACV,MAAM,IAAI,KAAK,CAAC,mCAAmC,CAAC,CAAA;IACtD,CAAC;IACD,aAAa,CAAC,IAAI,CAAC,GAAG;QACpB,SAAS,WAAA;QACT,MAAM,QAAA;KACP,CAAA;IAED,EAAE,CAAC,QAAQ,CAAC;QACV,IAAI,MAAA;QACJ,IAAI,EAAE,cAAc,IAAI,aAAa;QACrC,KAAK,EAAE,eAAe,IAAI,cAAc;KACzC,CAAC,CAAA;AACJ,CAAC"}
|
package/es/view.d.ts
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { Root } from 'react-dom/client';
|
|
2
|
+
import { HtmlNode } from '@logicflow/core';
|
|
3
|
+
export declare class ReactNodeView extends HtmlNode {
|
|
4
|
+
root?: Root;
|
|
5
|
+
protected targetId(): string;
|
|
6
|
+
componentWillUnmount(): void;
|
|
7
|
+
setHtml(rootEl: SVGForeignObjectElement): void;
|
|
8
|
+
confirmUpdate(_rootEl: SVGForeignObjectElement): void;
|
|
9
|
+
protected renderReactComponent(container: HTMLElement): void;
|
|
10
|
+
protected unmountReactComponent(): void;
|
|
11
|
+
unmount(): void;
|
|
12
|
+
}
|
|
13
|
+
export default ReactNodeView;
|
package/es/view.js
ADDED
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
var __extends = (this && this.__extends) || (function () {
|
|
2
|
+
var extendStatics = function (d, b) {
|
|
3
|
+
extendStatics = Object.setPrototypeOf ||
|
|
4
|
+
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
5
|
+
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
|
6
|
+
return extendStatics(d, b);
|
|
7
|
+
};
|
|
8
|
+
return function (d, b) {
|
|
9
|
+
if (typeof b !== "function" && b !== null)
|
|
10
|
+
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
|
11
|
+
extendStatics(d, b);
|
|
12
|
+
function __() { this.constructor = d; }
|
|
13
|
+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
14
|
+
};
|
|
15
|
+
})();
|
|
16
|
+
import { createElement } from 'react';
|
|
17
|
+
import { createRoot } from 'react-dom/client';
|
|
18
|
+
import { HtmlNode } from '@logicflow/core';
|
|
19
|
+
import { Wrapper } from './wrapper';
|
|
20
|
+
import { Portal } from './portal';
|
|
21
|
+
import { createPortal } from 'react-dom';
|
|
22
|
+
var ReactNodeView = /** @class */ (function (_super) {
|
|
23
|
+
__extends(ReactNodeView, _super);
|
|
24
|
+
function ReactNodeView() {
|
|
25
|
+
return _super !== null && _super.apply(this, arguments) || this;
|
|
26
|
+
}
|
|
27
|
+
ReactNodeView.prototype.targetId = function () {
|
|
28
|
+
return "".concat(this.props.graphModel.flowId, ":").concat(this.props.model.id);
|
|
29
|
+
};
|
|
30
|
+
ReactNodeView.prototype.componentWillUnmount = function () {
|
|
31
|
+
_super.prototype.componentWillUnmount.call(this);
|
|
32
|
+
this.unmount();
|
|
33
|
+
};
|
|
34
|
+
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);
|
|
43
|
+
};
|
|
44
|
+
ReactNodeView.prototype.renderReactComponent = function (container) {
|
|
45
|
+
console.log('render render render ===>>>');
|
|
46
|
+
this.unmountReactComponent();
|
|
47
|
+
var _a = this.props, model = _a.model, graphModel = _a.graphModel;
|
|
48
|
+
if (container) {
|
|
49
|
+
var elem = createElement(Wrapper, {
|
|
50
|
+
node: model,
|
|
51
|
+
graph: graphModel,
|
|
52
|
+
});
|
|
53
|
+
if (Portal.isActive()) {
|
|
54
|
+
var portal = createPortal(elem, container, model.id);
|
|
55
|
+
Portal.connect(this.targetId(), portal);
|
|
56
|
+
}
|
|
57
|
+
else {
|
|
58
|
+
this.root = createRoot(container);
|
|
59
|
+
this.root.render(elem);
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
};
|
|
63
|
+
ReactNodeView.prototype.unmountReactComponent = function () {
|
|
64
|
+
if (this.rootEl && this.root) {
|
|
65
|
+
this.root.unmount();
|
|
66
|
+
this.root = undefined;
|
|
67
|
+
this.rootEl.innerHTML = '';
|
|
68
|
+
}
|
|
69
|
+
};
|
|
70
|
+
// DONE: 是否需要 unmount 或 destroy 方法,在销毁后做一些处理
|
|
71
|
+
ReactNodeView.prototype.unmount = function () {
|
|
72
|
+
this.unmountReactComponent();
|
|
73
|
+
};
|
|
74
|
+
return ReactNodeView;
|
|
75
|
+
}(HtmlNode));
|
|
76
|
+
export { ReactNodeView };
|
|
77
|
+
export default ReactNodeView;
|
|
78
|
+
//# sourceMappingURL=view.js.map
|
package/es/view.js.map
ADDED
|
@@ -0,0 +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;;IAqFA,CAAC;IAlFW,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,OAAO,CAAC,GAAG,CAAC,6BAA6B,CAAC,CAAA;QAC1C,IAAI,CAAC,qBAAqB,EAAE,CAAA;QACtB,IAAA,KAAwB,IAAI,CAAC,KAAK,EAAhC,KAAK,WAAA,EAAE,UAAU,gBAAe,CAAA;QAExC,IAAI,SAAS,EAAE,CAAC;YACd,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,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,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,AArFD,CAAmC,QAAQ,GAqF1C;;AAED,eAAe,aAAa,CAAA"}
|
package/es/wrapper.d.ts
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React, { PureComponent } from 'react';
|
|
2
|
+
import { BaseNodeModel, GraphModel } from '@logicflow/core';
|
|
3
|
+
export interface IWrapperProps {
|
|
4
|
+
node: BaseNodeModel;
|
|
5
|
+
graph: GraphModel;
|
|
6
|
+
}
|
|
7
|
+
export interface IWrapperState {
|
|
8
|
+
tick: number;
|
|
9
|
+
}
|
|
10
|
+
export declare class Wrapper extends PureComponent<IWrapperProps, IWrapperState> {
|
|
11
|
+
constructor(props: IWrapperProps);
|
|
12
|
+
componentDidMount(): void;
|
|
13
|
+
clone(elem: React.ReactElement): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
|
|
14
|
+
render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
|
|
15
|
+
}
|
|
16
|
+
export default Wrapper;
|
package/es/wrapper.js
ADDED
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
var __extends = (this && this.__extends) || (function () {
|
|
2
|
+
var extendStatics = function (d, b) {
|
|
3
|
+
extendStatics = Object.setPrototypeOf ||
|
|
4
|
+
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
5
|
+
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
|
6
|
+
return extendStatics(d, b);
|
|
7
|
+
};
|
|
8
|
+
return function (d, b) {
|
|
9
|
+
if (typeof b !== "function" && b !== null)
|
|
10
|
+
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
|
11
|
+
extendStatics(d, b);
|
|
12
|
+
function __() { this.constructor = d; }
|
|
13
|
+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
14
|
+
};
|
|
15
|
+
})();
|
|
16
|
+
import React, { PureComponent } from 'react';
|
|
17
|
+
import { EventType } from '@logicflow/core';
|
|
18
|
+
import { reactNodesMap } from './registry';
|
|
19
|
+
var Wrapper = /** @class */ (function (_super) {
|
|
20
|
+
__extends(Wrapper, _super);
|
|
21
|
+
function Wrapper(props) {
|
|
22
|
+
var _this = _super.call(this, props) || this;
|
|
23
|
+
_this.state = { tick: 0 };
|
|
24
|
+
return _this;
|
|
25
|
+
}
|
|
26
|
+
Wrapper.prototype.componentDidMount = function () {
|
|
27
|
+
var _this = this;
|
|
28
|
+
// TODO: 讨论设计,如果节点有「副作用」属性配置的处理逻辑
|
|
29
|
+
var _a = this.props, node = _a.node, graph = _a.graph;
|
|
30
|
+
graph.eventCenter.on(EventType.NODE_PROPERTIES_CHANGE, function (eventData) {
|
|
31
|
+
var keys = eventData.keys;
|
|
32
|
+
var content = reactNodesMap[node.type];
|
|
33
|
+
if (content && eventData.id === node.id) {
|
|
34
|
+
var effect_1 = content.effect;
|
|
35
|
+
// 如果没有定义 effect,则默认更新;如果定义了 effect,则只有在 effect 中的属性发生变化时才更新
|
|
36
|
+
if (!effect_1 || keys.some(function (key) { return effect_1.includes(key); })) {
|
|
37
|
+
_this.setState({ tick: _this.state.tick + 1 });
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
});
|
|
41
|
+
};
|
|
42
|
+
Wrapper.prototype.clone = function (elem) {
|
|
43
|
+
var _a = this.props, node = _a.node, graph = _a.graph;
|
|
44
|
+
return typeof elem.type === 'string'
|
|
45
|
+
? React.cloneElement(elem)
|
|
46
|
+
: React.cloneElement(elem, { node: node, graph: graph });
|
|
47
|
+
};
|
|
48
|
+
Wrapper.prototype.render = function () {
|
|
49
|
+
var node = this.props.node;
|
|
50
|
+
var content = reactNodesMap[node.type];
|
|
51
|
+
if (!content)
|
|
52
|
+
return null;
|
|
53
|
+
var component = content.component;
|
|
54
|
+
if (React.isValidElement(component)) {
|
|
55
|
+
return this.clone(component);
|
|
56
|
+
}
|
|
57
|
+
var FC = component;
|
|
58
|
+
return this.clone(React.createElement(FC, null));
|
|
59
|
+
};
|
|
60
|
+
return Wrapper;
|
|
61
|
+
}(PureComponent));
|
|
62
|
+
export { Wrapper };
|
|
63
|
+
export default Wrapper;
|
|
64
|
+
//# sourceMappingURL=wrapper.js.map
|
|
@@ -0,0 +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"}
|
package/lib/index.d.ts
ADDED
package/lib/index.js
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
__exportStar(require("./view"), exports);
|
|
18
|
+
__exportStar(require("./model"), exports);
|
|
19
|
+
__exportStar(require("./registry"), exports);
|
|
20
|
+
__exportStar(require("./wrapper"), exports);
|
|
21
|
+
__exportStar(require("./portal"), exports);
|
|
22
|
+
//# sourceMappingURL=index.js.map
|
package/lib/index.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,yCAAsB;AACtB,0CAAuB;AACvB,6CAA0B;AAC1B,4CAAyB;AACzB,2CAAwB"}
|
package/lib/model.d.ts
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import LogicFlow, { HtmlNodeModel, IHtmlNodeProperties } from '@logicflow/core';
|
|
2
|
+
export interface ReactCustomProperties extends IHtmlNodeProperties {
|
|
3
|
+
width?: number;
|
|
4
|
+
height?: number;
|
|
5
|
+
radius?: number;
|
|
6
|
+
refX?: number;
|
|
7
|
+
refY?: number;
|
|
8
|
+
style?: LogicFlow.CommonTheme;
|
|
9
|
+
textStyle?: LogicFlow.TextNodeTheme;
|
|
10
|
+
}
|
|
11
|
+
export declare class ReactNodeModel<P extends ReactCustomProperties = ReactCustomProperties> extends HtmlNodeModel<P> {
|
|
12
|
+
setAttributes(): void;
|
|
13
|
+
getTextStyle(): LogicFlow.TextNodeTheme;
|
|
14
|
+
getNodeStyle(): LogicFlow.CommonTheme;
|
|
15
|
+
}
|
|
16
|
+
export default ReactNodeModel;
|
package/lib/model.js
ADDED
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __extends = (this && this.__extends) || (function () {
|
|
3
|
+
var extendStatics = function (d, b) {
|
|
4
|
+
extendStatics = Object.setPrototypeOf ||
|
|
5
|
+
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
6
|
+
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
|
7
|
+
return extendStatics(d, b);
|
|
8
|
+
};
|
|
9
|
+
return function (d, b) {
|
|
10
|
+
if (typeof b !== "function" && b !== null)
|
|
11
|
+
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
|
12
|
+
extendStatics(d, b);
|
|
13
|
+
function __() { this.constructor = d; }
|
|
14
|
+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
15
|
+
};
|
|
16
|
+
})();
|
|
17
|
+
var __assign = (this && this.__assign) || function () {
|
|
18
|
+
__assign = Object.assign || function(t) {
|
|
19
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
20
|
+
s = arguments[i];
|
|
21
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
22
|
+
t[p] = s[p];
|
|
23
|
+
}
|
|
24
|
+
return t;
|
|
25
|
+
};
|
|
26
|
+
return __assign.apply(this, arguments);
|
|
27
|
+
};
|
|
28
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
|
+
exports.ReactNodeModel = void 0;
|
|
30
|
+
var core_1 = require("@logicflow/core");
|
|
31
|
+
var lodash_es_1 = require("lodash-es");
|
|
32
|
+
var ReactNodeModel = /** @class */ (function (_super) {
|
|
33
|
+
__extends(ReactNodeModel, _super);
|
|
34
|
+
function ReactNodeModel() {
|
|
35
|
+
return _super !== null && _super.apply(this, arguments) || this;
|
|
36
|
+
}
|
|
37
|
+
ReactNodeModel.prototype.setAttributes = function () {
|
|
38
|
+
console.log('this.properties', this.properties);
|
|
39
|
+
var _a = this.properties, width = _a.width, height = _a.height, radius = _a.radius;
|
|
40
|
+
if (width) {
|
|
41
|
+
this.width = width;
|
|
42
|
+
}
|
|
43
|
+
if (height) {
|
|
44
|
+
this.height = height;
|
|
45
|
+
}
|
|
46
|
+
if (radius) {
|
|
47
|
+
this.radius = radius;
|
|
48
|
+
}
|
|
49
|
+
};
|
|
50
|
+
ReactNodeModel.prototype.getTextStyle = function () {
|
|
51
|
+
// const { x, y, width, height } = this
|
|
52
|
+
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;
|
|
53
|
+
var style = _super.prototype.getTextStyle.call(this);
|
|
54
|
+
// 通过 transform 重新设置 text 的位置
|
|
55
|
+
return __assign(__assign(__assign({}, style), ((0, lodash_es_1.cloneDeep)(textStyle) || {})), { transform: "matrix(1 0 0 1 ".concat(refX, " ").concat(refY, ")") });
|
|
56
|
+
};
|
|
57
|
+
ReactNodeModel.prototype.getNodeStyle = function () {
|
|
58
|
+
var style = _super.prototype.getNodeStyle.call(this);
|
|
59
|
+
var customNodeStyle = this.properties.style;
|
|
60
|
+
return __assign(__assign({}, style), ((0, lodash_es_1.cloneDeep)(customNodeStyle) || {}));
|
|
61
|
+
};
|
|
62
|
+
return ReactNodeModel;
|
|
63
|
+
}(core_1.HtmlNodeModel));
|
|
64
|
+
exports.ReactNodeModel = ReactNodeModel;
|
|
65
|
+
exports.default = ReactNodeModel;
|
|
66
|
+
//# sourceMappingURL=model.js.map
|
package/lib/model.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"model.js","sourceRoot":"","sources":["../src/model.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,wCAA+E;AAC/E,uCAAqC;AAiBrC;IAEU,kCAAgB;IAF1B;;IA4CA,CAAC;IAzCC,sCAAa,GAAb;QACE,OAAO,CAAC,GAAG,CAAC,iBAAiB,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;QACzC,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,AA5CD,CAEU,oBAAa,GA0CtB;AA5CY,wCAAc;AA8C3B,kBAAe,cAAc,CAAA"}
|
package/lib/portal.d.ts
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare namespace Portal {
|
|
3
|
+
function connect(id: string, portal: React.ReactPortal): void;
|
|
4
|
+
function disconnect(id: string): void;
|
|
5
|
+
function isActive(): boolean;
|
|
6
|
+
function getProvider(): () => React.FunctionComponentElement<{
|
|
7
|
+
children?: React.ReactNode;
|
|
8
|
+
}>;
|
|
9
|
+
}
|
package/lib/portal.js
ADDED
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
26
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
27
|
+
if (ar || !(i in from)) {
|
|
28
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
29
|
+
ar[i] = from[i];
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
33
|
+
};
|
|
34
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
35
|
+
exports.Portal = void 0;
|
|
36
|
+
var react_1 = __importStar(require("react"));
|
|
37
|
+
var Portal;
|
|
38
|
+
(function (Portal) {
|
|
39
|
+
var active = false;
|
|
40
|
+
var dispatch;
|
|
41
|
+
var reducer = function (state, action) {
|
|
42
|
+
var payload = action.payload;
|
|
43
|
+
switch (action.type) {
|
|
44
|
+
case 'add': {
|
|
45
|
+
var index = state.findIndex(function (item) { return item.id === payload.id; });
|
|
46
|
+
if (index >= 0) {
|
|
47
|
+
state[index] = payload;
|
|
48
|
+
return __spreadArray([], state, true);
|
|
49
|
+
}
|
|
50
|
+
return __spreadArray(__spreadArray([], state, true), [payload], false);
|
|
51
|
+
}
|
|
52
|
+
case 'remove': {
|
|
53
|
+
var index = state.findIndex(function (item) { return item.id === payload.id; });
|
|
54
|
+
if (index >= 0) {
|
|
55
|
+
var result = __spreadArray([], state, true);
|
|
56
|
+
result.splice(index, 1);
|
|
57
|
+
return result;
|
|
58
|
+
}
|
|
59
|
+
break;
|
|
60
|
+
}
|
|
61
|
+
default: {
|
|
62
|
+
break;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
return state;
|
|
66
|
+
};
|
|
67
|
+
function connect(id, portal) {
|
|
68
|
+
if (active) {
|
|
69
|
+
dispatch({
|
|
70
|
+
type: 'add',
|
|
71
|
+
payload: {
|
|
72
|
+
id: id,
|
|
73
|
+
portal: portal,
|
|
74
|
+
},
|
|
75
|
+
});
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
Portal.connect = connect;
|
|
79
|
+
function disconnect(id) {
|
|
80
|
+
if (active) {
|
|
81
|
+
dispatch({
|
|
82
|
+
type: 'remove',
|
|
83
|
+
payload: { id: id },
|
|
84
|
+
});
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
Portal.disconnect = disconnect;
|
|
88
|
+
function isActive() {
|
|
89
|
+
return active;
|
|
90
|
+
}
|
|
91
|
+
Portal.isActive = isActive;
|
|
92
|
+
function getProvider() {
|
|
93
|
+
return function () {
|
|
94
|
+
active = true;
|
|
95
|
+
var _a = (0, react_1.useReducer)(reducer, []), items = _a[0], mutate = _a[1];
|
|
96
|
+
dispatch = mutate;
|
|
97
|
+
return react_1.default.createElement(react_1.default.Fragment, {
|
|
98
|
+
children: items.map(function (item) { return item.portal; }),
|
|
99
|
+
});
|
|
100
|
+
};
|
|
101
|
+
}
|
|
102
|
+
Portal.getProvider = getProvider;
|
|
103
|
+
})(Portal || (exports.Portal = Portal = {}));
|
|
104
|
+
//# sourceMappingURL=portal.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"portal.js","sourceRoot":"","sources":["../src/portal.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAyC;AAEzC,IAAiB,MAAM,CA4EtB;AA5ED,WAAiB,MAAM;IACrB,IAAI,MAAM,GAAG,KAAK,CAAA;IAClB,IAAI,QAAgC,CAAA;IAYpC,IAAM,OAAO,GAAG,UAAC,KAAgB,EAAE,MAAc;QAC/C,IAAM,OAAO,GAAG,MAAM,CAAC,OAAkB,CAAA;QACzC,QAAQ,MAAM,CAAC,IAAI,EAAE,CAAC;YACpB,KAAK,KAAK,CAAC,CAAC,CAAC;gBACX,IAAM,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC,UAAC,IAAI,IAAK,OAAA,IAAI,CAAC,EAAE,KAAK,OAAO,CAAC,EAAE,EAAtB,CAAsB,CAAC,CAAA;gBAC/D,IAAI,KAAK,IAAI,CAAC,EAAE,CAAC;oBACf,KAAK,CAAC,KAAK,CAAC,GAAG,OAAO,CAAA;oBACtB,yBAAW,KAAK,QAAC;gBACnB,CAAC;gBACD,uCAAW,KAAK,UAAE,OAAO,UAAC;YAC5B,CAAC;YACD,KAAK,QAAQ,CAAC,CAAC,CAAC;gBACd,IAAM,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC,UAAC,IAAI,IAAK,OAAA,IAAI,CAAC,EAAE,KAAK,OAAO,CAAC,EAAE,EAAtB,CAAsB,CAAC,CAAA;gBAC/D,IAAI,KAAK,IAAI,CAAC,EAAE,CAAC;oBACf,IAAM,MAAM,qBAAO,KAAK,OAAC,CAAA;oBACzB,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;oBACvB,OAAO,MAAM,CAAA;gBACf,CAAC;gBACD,MAAK;YACP,CAAC;YACD,OAAO,CAAC,CAAC,CAAC;gBACR,MAAK;YACP,CAAC;QACH,CAAC;QACD,OAAO,KAAK,CAAA;IACd,CAAC,CAAA;IAED,SAAgB,OAAO,CAAC,EAAU,EAAE,MAAyB;QAC3D,IAAI,MAAM,EAAE,CAAC;YACX,QAAQ,CAAC;gBACP,IAAI,EAAE,KAAK;gBACX,OAAO,EAAE;oBACP,EAAE,IAAA;oBACF,MAAM,QAAA;iBACP;aACF,CAAC,CAAA;QACJ,CAAC;IACH,CAAC;IAVe,cAAO,UAUtB,CAAA;IAED,SAAgB,UAAU,CAAC,EAAU;QACnC,IAAI,MAAM,EAAE,CAAC;YACX,QAAQ,CAAC;gBACP,IAAI,EAAE,QAAQ;gBACd,OAAO,EAAE,EAAE,EAAE,IAAA,EAAE;aAChB,CAAC,CAAA;QACJ,CAAC;IACH,CAAC;IAPe,iBAAU,aAOzB,CAAA;IAED,SAAgB,QAAQ;QACtB,OAAO,MAAM,CAAA;IACf,CAAC;IAFe,eAAQ,WAEvB,CAAA;IAED,SAAgB,WAAW;QACzB,OAAO;YACL,MAAM,GAAG,IAAI,CAAA;YACP,IAAA,KAAkB,IAAA,kBAAU,EAAC,OAAO,EAAE,EAAE,CAAC,EAAxC,KAAK,QAAA,EAAE,MAAM,QAA2B,CAAA;YAC/C,QAAQ,GAAG,MAAM,CAAA;YACjB,OAAO,eAAK,CAAC,aAAa,CAAC,eAAK,CAAC,QAAQ,EAAE;gBACzC,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,UAAC,IAAI,IAAK,OAAA,IAAI,CAAC,MAAM,EAAX,CAAW,CAAC;aAC3C,CAAC,CAAA;QACJ,CAAC,CAAA;IACH,CAAC;IATe,kBAAW,cAS1B,CAAA;AACH,CAAC,EA5EgB,MAAM,sBAAN,MAAM,QA4EtB"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import LogicFlow, { BaseNodeModel, GraphModel } from '@logicflow/core';
|
|
3
|
+
import RegisterConfig = LogicFlow.RegisterConfig;
|
|
4
|
+
export type ReactNodeProps = {
|
|
5
|
+
node: BaseNodeModel;
|
|
6
|
+
graph: GraphModel;
|
|
7
|
+
};
|
|
8
|
+
export type ReactNodeConfig = {
|
|
9
|
+
type: string;
|
|
10
|
+
component: React.ComponentType<ReactNodeProps>;
|
|
11
|
+
effect?: (keyof LogicFlow.PropertiesType)[];
|
|
12
|
+
} & Partial<RegisterConfig>;
|
|
13
|
+
export declare const reactNodesMap: Record<string, {
|
|
14
|
+
component: React.ComponentType<ReactNodeProps>;
|
|
15
|
+
effect?: (keyof LogicFlow.PropertiesType)[];
|
|
16
|
+
}>;
|
|
17
|
+
export declare function register(config: ReactNodeConfig, lf: LogicFlow): void;
|
package/lib/registry.js
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
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.register = exports.reactNodesMap = void 0;
|
|
7
|
+
var view_1 = __importDefault(require("./view"));
|
|
8
|
+
var model_1 = __importDefault(require("./model"));
|
|
9
|
+
exports.reactNodesMap = {};
|
|
10
|
+
function register(config, lf) {
|
|
11
|
+
var type = config.type, component = config.component, effect = config.effect, CustomNodeView = config.view, CustomNodeModel = config.model;
|
|
12
|
+
if (!type) {
|
|
13
|
+
throw new Error('You should specify type in config');
|
|
14
|
+
}
|
|
15
|
+
exports.reactNodesMap[type] = {
|
|
16
|
+
component: component,
|
|
17
|
+
effect: effect,
|
|
18
|
+
};
|
|
19
|
+
lf.register({
|
|
20
|
+
type: type,
|
|
21
|
+
view: CustomNodeView || view_1.default,
|
|
22
|
+
model: CustomNodeModel || model_1.default,
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
exports.register = register;
|
|
26
|
+
//# sourceMappingURL=registry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"registry.js","sourceRoot":"","sources":["../src/registry.ts"],"names":[],"mappings":";;;;;;AACA,gDAAkC;AAClC,kDAAoC;AAcvB,QAAA,aAAa,GAMtB,EAAE,CAAA;AAEN,SAAgB,QAAQ,CAAC,MAAuB,EAAE,EAAa;IAE3D,IAAA,IAAI,GAKF,MAAM,KALJ,EACJ,SAAS,GAIP,MAAM,UAJC,EACT,MAAM,GAGJ,MAAM,OAHF,EACA,cAAc,GAElB,MAAM,KAFY,EACb,eAAe,GACpB,MAAM,MADc,CACd;IAEV,IAAI,CAAC,IAAI,EAAE,CAAC;QACV,MAAM,IAAI,KAAK,CAAC,mCAAmC,CAAC,CAAA;IACtD,CAAC;IACD,qBAAa,CAAC,IAAI,CAAC,GAAG;QACpB,SAAS,WAAA;QACT,MAAM,QAAA;KACP,CAAA;IAED,EAAE,CAAC,QAAQ,CAAC;QACV,IAAI,MAAA;QACJ,IAAI,EAAE,cAAc,IAAI,cAAa;QACrC,KAAK,EAAE,eAAe,IAAI,eAAc;KACzC,CAAC,CAAA;AACJ,CAAC;AAtBD,4BAsBC"}
|
package/lib/view.d.ts
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { Root } from 'react-dom/client';
|
|
2
|
+
import { HtmlNode } from '@logicflow/core';
|
|
3
|
+
export declare class ReactNodeView extends HtmlNode {
|
|
4
|
+
root?: Root;
|
|
5
|
+
protected targetId(): string;
|
|
6
|
+
componentWillUnmount(): void;
|
|
7
|
+
setHtml(rootEl: SVGForeignObjectElement): void;
|
|
8
|
+
confirmUpdate(_rootEl: SVGForeignObjectElement): void;
|
|
9
|
+
protected renderReactComponent(container: HTMLElement): void;
|
|
10
|
+
protected unmountReactComponent(): void;
|
|
11
|
+
unmount(): void;
|
|
12
|
+
}
|
|
13
|
+
export default ReactNodeView;
|
package/lib/view.js
ADDED
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __extends = (this && this.__extends) || (function () {
|
|
3
|
+
var extendStatics = function (d, b) {
|
|
4
|
+
extendStatics = Object.setPrototypeOf ||
|
|
5
|
+
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
6
|
+
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
|
7
|
+
return extendStatics(d, b);
|
|
8
|
+
};
|
|
9
|
+
return function (d, b) {
|
|
10
|
+
if (typeof b !== "function" && b !== null)
|
|
11
|
+
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
|
12
|
+
extendStatics(d, b);
|
|
13
|
+
function __() { this.constructor = d; }
|
|
14
|
+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
15
|
+
};
|
|
16
|
+
})();
|
|
17
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
18
|
+
exports.ReactNodeView = void 0;
|
|
19
|
+
var react_1 = require("react");
|
|
20
|
+
var client_1 = require("react-dom/client");
|
|
21
|
+
var core_1 = require("@logicflow/core");
|
|
22
|
+
var wrapper_1 = require("./wrapper");
|
|
23
|
+
var portal_1 = require("./portal");
|
|
24
|
+
var react_dom_1 = require("react-dom");
|
|
25
|
+
var ReactNodeView = /** @class */ (function (_super) {
|
|
26
|
+
__extends(ReactNodeView, _super);
|
|
27
|
+
function ReactNodeView() {
|
|
28
|
+
return _super !== null && _super.apply(this, arguments) || this;
|
|
29
|
+
}
|
|
30
|
+
ReactNodeView.prototype.targetId = function () {
|
|
31
|
+
return "".concat(this.props.graphModel.flowId, ":").concat(this.props.model.id);
|
|
32
|
+
};
|
|
33
|
+
ReactNodeView.prototype.componentWillUnmount = function () {
|
|
34
|
+
_super.prototype.componentWillUnmount.call(this);
|
|
35
|
+
this.unmount();
|
|
36
|
+
};
|
|
37
|
+
ReactNodeView.prototype.setHtml = function (rootEl) {
|
|
38
|
+
var el = document.createElement('div');
|
|
39
|
+
el.className = 'custom-react-node-content';
|
|
40
|
+
this.renderReactComponent(el);
|
|
41
|
+
rootEl.appendChild(el);
|
|
42
|
+
};
|
|
43
|
+
ReactNodeView.prototype.confirmUpdate = function (_rootEl) {
|
|
44
|
+
// TODO: 如有需要,可以先通过继承的方式,自定义该节点的更新逻辑;我们后续会根据实际需求,丰富该功能
|
|
45
|
+
console.log('_rootEl', _rootEl);
|
|
46
|
+
};
|
|
47
|
+
ReactNodeView.prototype.renderReactComponent = function (container) {
|
|
48
|
+
console.log('render render render ===>>>');
|
|
49
|
+
this.unmountReactComponent();
|
|
50
|
+
var _a = this.props, model = _a.model, graphModel = _a.graphModel;
|
|
51
|
+
if (container) {
|
|
52
|
+
var elem = (0, react_1.createElement)(wrapper_1.Wrapper, {
|
|
53
|
+
node: model,
|
|
54
|
+
graph: graphModel,
|
|
55
|
+
});
|
|
56
|
+
if (portal_1.Portal.isActive()) {
|
|
57
|
+
var portal = (0, react_dom_1.createPortal)(elem, container, model.id);
|
|
58
|
+
portal_1.Portal.connect(this.targetId(), portal);
|
|
59
|
+
}
|
|
60
|
+
else {
|
|
61
|
+
this.root = (0, client_1.createRoot)(container);
|
|
62
|
+
this.root.render(elem);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
};
|
|
66
|
+
ReactNodeView.prototype.unmountReactComponent = function () {
|
|
67
|
+
if (this.rootEl && this.root) {
|
|
68
|
+
this.root.unmount();
|
|
69
|
+
this.root = undefined;
|
|
70
|
+
this.rootEl.innerHTML = '';
|
|
71
|
+
}
|
|
72
|
+
};
|
|
73
|
+
// DONE: 是否需要 unmount 或 destroy 方法,在销毁后做一些处理
|
|
74
|
+
ReactNodeView.prototype.unmount = function () {
|
|
75
|
+
this.unmountReactComponent();
|
|
76
|
+
};
|
|
77
|
+
return ReactNodeView;
|
|
78
|
+
}(core_1.HtmlNode));
|
|
79
|
+
exports.ReactNodeView = ReactNodeView;
|
|
80
|
+
exports.default = ReactNodeView;
|
|
81
|
+
//# sourceMappingURL=view.js.map
|
package/lib/view.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"view.js","sourceRoot":"","sources":["../src/view.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,+BAAkD;AAClD,2CAAmD;AACnD,wCAA0C;AAC1C,qCAAmC;AACnC,mCAAiC;AACjC,uCAAwC;AAExC;IAAmC,iCAAQ;IAA3C;;IAqFA,CAAC;IAlFW,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,OAAO,CAAC,GAAG,CAAC,6BAA6B,CAAC,CAAA;QAC1C,IAAI,CAAC,qBAAqB,EAAE,CAAA;QACtB,IAAA,KAAwB,IAAI,CAAC,KAAK,EAAhC,KAAK,WAAA,EAAE,UAAU,gBAAe,CAAA;QAExC,IAAI,SAAS,EAAE,CAAC;YACd,IAAM,IAAI,GAAG,IAAA,qBAAa,EAAC,iBAAO,EAAE;gBAClC,IAAI,EAAE,KAAK;gBACX,KAAK,EAAE,UAAU;aAClB,CAAC,CAAA;YAEF,IAAI,eAAM,CAAC,QAAQ,EAAE,EAAE,CAAC;gBACtB,IAAM,MAAM,GAAG,IAAA,wBAAY,EAAC,IAAI,EAAE,SAAS,EAAE,KAAK,CAAC,EAAE,CAAgB,CAAA;gBACrE,eAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,MAAM,CAAC,CAAA;YACzC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,IAAI,GAAG,IAAA,mBAAU,EAAC,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,AArFD,CAAmC,eAAQ,GAqF1C;AArFY,sCAAa;AAuF1B,kBAAe,aAAa,CAAA"}
|
package/lib/wrapper.d.ts
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React, { PureComponent } from 'react';
|
|
2
|
+
import { BaseNodeModel, GraphModel } from '@logicflow/core';
|
|
3
|
+
export interface IWrapperProps {
|
|
4
|
+
node: BaseNodeModel;
|
|
5
|
+
graph: GraphModel;
|
|
6
|
+
}
|
|
7
|
+
export interface IWrapperState {
|
|
8
|
+
tick: number;
|
|
9
|
+
}
|
|
10
|
+
export declare class Wrapper extends PureComponent<IWrapperProps, IWrapperState> {
|
|
11
|
+
constructor(props: IWrapperProps);
|
|
12
|
+
componentDidMount(): void;
|
|
13
|
+
clone(elem: React.ReactElement): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
|
|
14
|
+
render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
|
|
15
|
+
}
|
|
16
|
+
export default Wrapper;
|
package/lib/wrapper.js
ADDED
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __extends = (this && this.__extends) || (function () {
|
|
3
|
+
var extendStatics = function (d, b) {
|
|
4
|
+
extendStatics = Object.setPrototypeOf ||
|
|
5
|
+
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
6
|
+
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
|
7
|
+
return extendStatics(d, b);
|
|
8
|
+
};
|
|
9
|
+
return function (d, b) {
|
|
10
|
+
if (typeof b !== "function" && b !== null)
|
|
11
|
+
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
|
12
|
+
extendStatics(d, b);
|
|
13
|
+
function __() { this.constructor = d; }
|
|
14
|
+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
15
|
+
};
|
|
16
|
+
})();
|
|
17
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
18
|
+
if (k2 === undefined) k2 = k;
|
|
19
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
20
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
21
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
22
|
+
}
|
|
23
|
+
Object.defineProperty(o, k2, desc);
|
|
24
|
+
}) : (function(o, m, k, k2) {
|
|
25
|
+
if (k2 === undefined) k2 = k;
|
|
26
|
+
o[k2] = m[k];
|
|
27
|
+
}));
|
|
28
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
29
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
30
|
+
}) : function(o, v) {
|
|
31
|
+
o["default"] = v;
|
|
32
|
+
});
|
|
33
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
34
|
+
if (mod && mod.__esModule) return mod;
|
|
35
|
+
var result = {};
|
|
36
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
37
|
+
__setModuleDefault(result, mod);
|
|
38
|
+
return result;
|
|
39
|
+
};
|
|
40
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
41
|
+
exports.Wrapper = void 0;
|
|
42
|
+
var react_1 = __importStar(require("react"));
|
|
43
|
+
var core_1 = require("@logicflow/core");
|
|
44
|
+
var registry_1 = require("./registry");
|
|
45
|
+
var Wrapper = /** @class */ (function (_super) {
|
|
46
|
+
__extends(Wrapper, _super);
|
|
47
|
+
function Wrapper(props) {
|
|
48
|
+
var _this = _super.call(this, props) || this;
|
|
49
|
+
_this.state = { tick: 0 };
|
|
50
|
+
return _this;
|
|
51
|
+
}
|
|
52
|
+
Wrapper.prototype.componentDidMount = function () {
|
|
53
|
+
var _this = this;
|
|
54
|
+
// TODO: 讨论设计,如果节点有「副作用」属性配置的处理逻辑
|
|
55
|
+
var _a = this.props, node = _a.node, graph = _a.graph;
|
|
56
|
+
graph.eventCenter.on(core_1.EventType.NODE_PROPERTIES_CHANGE, function (eventData) {
|
|
57
|
+
var keys = eventData.keys;
|
|
58
|
+
var content = registry_1.reactNodesMap[node.type];
|
|
59
|
+
if (content && eventData.id === node.id) {
|
|
60
|
+
var effect_1 = content.effect;
|
|
61
|
+
// 如果没有定义 effect,则默认更新;如果定义了 effect,则只有在 effect 中的属性发生变化时才更新
|
|
62
|
+
if (!effect_1 || keys.some(function (key) { return effect_1.includes(key); })) {
|
|
63
|
+
_this.setState({ tick: _this.state.tick + 1 });
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
});
|
|
67
|
+
};
|
|
68
|
+
Wrapper.prototype.clone = function (elem) {
|
|
69
|
+
var _a = this.props, node = _a.node, graph = _a.graph;
|
|
70
|
+
return typeof elem.type === 'string'
|
|
71
|
+
? react_1.default.cloneElement(elem)
|
|
72
|
+
: react_1.default.cloneElement(elem, { node: node, graph: graph });
|
|
73
|
+
};
|
|
74
|
+
Wrapper.prototype.render = function () {
|
|
75
|
+
var node = this.props.node;
|
|
76
|
+
var content = registry_1.reactNodesMap[node.type];
|
|
77
|
+
if (!content)
|
|
78
|
+
return null;
|
|
79
|
+
var component = content.component;
|
|
80
|
+
if (react_1.default.isValidElement(component)) {
|
|
81
|
+
return this.clone(component);
|
|
82
|
+
}
|
|
83
|
+
var FC = component;
|
|
84
|
+
return this.clone(react_1.default.createElement(FC, null));
|
|
85
|
+
};
|
|
86
|
+
return Wrapper;
|
|
87
|
+
}(react_1.PureComponent));
|
|
88
|
+
exports.Wrapper = Wrapper;
|
|
89
|
+
exports.default = Wrapper;
|
|
90
|
+
//# sourceMappingURL=wrapper.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"wrapper.js","sourceRoot":"","sources":["../src/wrapper.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA4C;AAC5C,wCAAsE;AACtE,uCAA0C;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,gBAAS,CAAC,sBAAsB,EAAE,UAAC,SAAS;YAC/D,IAAM,IAAI,GAAG,SAAS,CAAC,IAAgB,CAAA;YACvC,IAAM,OAAO,GAAG,wBAAa,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,eAAK,CAAC,YAAY,CAAC,IAAI,CAAC;YAC1B,CAAC,CAAC,eAAK,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,wBAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAExC,IAAI,CAAC,OAAO;YAAE,OAAO,IAAI,CAAA;QAEjB,IAAA,SAAS,GAAK,OAAO,UAAZ,CAAY;QAC7B,IAAI,eAAK,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,8BAAC,EAAE,OAAG,CAAC,CAAA;IAC3B,CAAC;IACH,cAAC;AAAD,CAAC,AA7CD,CAA6B,qBAAa,GA6CzC;AA7CY,0BAAO;AA+CpB,kBAAe,OAAO,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@logicflow/react-node-registry",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.10",
|
|
4
4
|
"description": "LogicFlow React Shape",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"peerDependencies": {
|
|
19
19
|
"react": ">= 18.0.0",
|
|
20
20
|
"react-dom": ">= 18.0.0",
|
|
21
|
-
"@logicflow/core": "2.0.
|
|
21
|
+
"@logicflow/core": "2.0.9"
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
24
|
"@types/react": "^18.0.25",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"react": "^18.0.0",
|
|
27
27
|
"react-dom": "^18.0.0",
|
|
28
28
|
"lodash-es": "^4.17.21",
|
|
29
|
-
"@logicflow/core": "2.0.
|
|
29
|
+
"@logicflow/core": "2.0.9"
|
|
30
30
|
},
|
|
31
31
|
"scripts": {
|
|
32
32
|
"clean:turbo": "rss",
|
package/stats.html
CHANGED
|
@@ -4822,7 +4822,7 @@ var drawChart = (function (exports) {
|
|
|
4822
4822
|
</script>
|
|
4823
4823
|
<script>
|
|
4824
4824
|
/*<!--*/
|
|
4825
|
-
const data = {"version":2,"tree":{"name":"root","children":[{"name":"index.min.js","children":[{"name":"src/index.ts","uid":"
|
|
4825
|
+
const data = {"version":2,"tree":{"name":"root","children":[{"name":"index.min.js","children":[{"name":"src/index.ts","uid":"00675a06-1"}]}],"isRoot":true},"nodeParts":{"00675a06-1":{"renderedLength":363,"gzipLength":0,"brotliLength":0,"metaUid":"00675a06-0"}},"nodeMetas":{"00675a06-0":{"id":"/src/index.ts","moduleParts":{"index.min.js":"00675a06-1"},"imported":[],"importedBy":[],"isEntry":true}},"env":{"rollup":"4.22.4"},"options":{"gzip":false,"brotli":false,"sourcemap":false}};
|
|
4826
4826
|
|
|
4827
4827
|
const run = () => {
|
|
4828
4828
|
const width = window.innerWidth;
|