@visactor/vrender-core 0.19.17 → 0.19.18
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/cjs/plugins/builtin-plugin/react-attribute-plugin.d.ts +2 -1
- package/cjs/plugins/builtin-plugin/react-attribute-plugin.js +15 -7
- package/cjs/plugins/builtin-plugin/react-attribute-plugin.js.map +1 -1
- package/dist/index.es.js +28 -6
- package/es/plugins/builtin-plugin/react-attribute-plugin.d.ts +2 -1
- package/es/plugins/builtin-plugin/react-attribute-plugin.js +15 -7
- package/es/plugins/builtin-plugin/react-attribute-plugin.js.map +1 -1
- package/package.json +1 -1
|
@@ -7,7 +7,8 @@ export declare class ReactAttributePlugin extends HtmlAttributePlugin implements
|
|
|
7
7
|
_uid: number;
|
|
8
8
|
key: string;
|
|
9
9
|
htmlMap: Record<string, {
|
|
10
|
-
root
|
|
10
|
+
root?: any;
|
|
11
|
+
unmount?: () => void;
|
|
11
12
|
wrapContainer: HTMLElement;
|
|
12
13
|
nativeContainer: HTMLElement;
|
|
13
14
|
container: string | HTMLElement | null;
|
|
@@ -14,12 +14,12 @@ class ReactAttributePlugin extends html_attribute_plugin_1.HtmlAttributePlugin {
|
|
|
14
14
|
}
|
|
15
15
|
removeElement(id) {
|
|
16
16
|
if (!this.htmlMap || !this.htmlMap[id]) return;
|
|
17
|
-
const {root: root, wrapContainer: wrapContainer} = this.htmlMap[id];
|
|
17
|
+
const {root: root, wrapContainer: wrapContainer, unmount: unmount} = this.htmlMap[id];
|
|
18
18
|
if (root) {
|
|
19
19
|
application_1.application.global.getRequestAnimationFrame()((() => {
|
|
20
20
|
root.unmount();
|
|
21
21
|
}));
|
|
22
|
-
}
|
|
22
|
+
} else unmount && unmount();
|
|
23
23
|
wrapContainer && application_1.application.global.removeDom(wrapContainer), this.htmlMap[id] = null;
|
|
24
24
|
}
|
|
25
25
|
renderGraphicHTML(graphic) {
|
|
@@ -29,21 +29,29 @@ class ReactAttributePlugin extends html_attribute_plugin_1.HtmlAttributePlugin {
|
|
|
29
29
|
const stage = graphic.stage;
|
|
30
30
|
if (!stage) return;
|
|
31
31
|
const ReactDOM = stage.params.ReactDOM, {element: element, container: container} = react;
|
|
32
|
-
if (!
|
|
32
|
+
if (!element || !ReactDOM || !ReactDOM.createRoot && !ReactDOM.render) return;
|
|
33
33
|
const id = (0, vutils_1.isNil)(react.id) ? `${null !== (_a = graphic.id) && void 0 !== _a ? _a : graphic._uid}_react` : react.id;
|
|
34
34
|
if (this.htmlMap && this.htmlMap[id] && container && container !== this.htmlMap[id].container && this.removeElement(id),
|
|
35
|
-
this.htmlMap && this.htmlMap[id]) this.htmlMap[id].root.render(element); else {
|
|
35
|
+
this.htmlMap && this.htmlMap[id]) ReactDOM.createRoot ? this.htmlMap[id].root.render(element) : ReactDOM.render(element, this.htmlMap[id].wrapContainer); else {
|
|
36
36
|
const {wrapContainer: wrapContainer, nativeContainer: nativeContainer} = this.getWrapContainer(stage, container);
|
|
37
|
-
if (wrapContainer) {
|
|
37
|
+
if (wrapContainer) if (this.htmlMap || (this.htmlMap = {}), ReactDOM.createRoot) {
|
|
38
38
|
const root = ReactDOM.createRoot(wrapContainer);
|
|
39
|
-
root.render(element), this.htmlMap
|
|
39
|
+
root.render(element), this.htmlMap[id] = {
|
|
40
40
|
root: root,
|
|
41
41
|
wrapContainer: wrapContainer,
|
|
42
42
|
nativeContainer: nativeContainer,
|
|
43
43
|
container: container,
|
|
44
44
|
renderId: this.renderId
|
|
45
45
|
};
|
|
46
|
-
}
|
|
46
|
+
} else ReactDOM.render(element, wrapContainer), this.htmlMap[id] = {
|
|
47
|
+
wrapContainer: wrapContainer,
|
|
48
|
+
nativeContainer: nativeContainer,
|
|
49
|
+
container: container,
|
|
50
|
+
renderId: this.renderId,
|
|
51
|
+
unmount: () => {
|
|
52
|
+
ReactDOM.unmountComponentAtNode(wrapContainer);
|
|
53
|
+
}
|
|
54
|
+
};
|
|
47
55
|
}
|
|
48
56
|
if (!this.htmlMap || !this.htmlMap[id]) return;
|
|
49
57
|
const {wrapContainer: wrapContainer, nativeContainer: nativeContainer} = this.htmlMap[id];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/plugins/builtin-plugin/react-attribute-plugin.ts"],"names":[],"mappings":";;;AAAA,sDAAmD;AAEnD,mDAAgD;AAChD,mEAA8D;AAC9D,6CAAyC;AAEzC,MAAa,oBAAqB,SAAQ,2CAAmB;IAA7D;;QACE,SAAI,GAA2B,sBAAsB,CAAC;QACtD,gBAAW,GAAiB,YAAY,CAAC;QAEzC,SAAI,GAAW,qBAAS,CAAC,kBAAkB,EAAE,CAAC;QAC9C,QAAG,GAAW,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QAEpC,YAAO,
|
|
1
|
+
{"version":3,"sources":["../src/plugins/builtin-plugin/react-attribute-plugin.ts"],"names":[],"mappings":"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","file":"react-attribute-plugin.js","sourcesContent":["import { Generator } from '../../common/generator';\nimport type { IGraphic, IPlugin, IPluginService } from '../../interface';\nimport { application } from '../../application';\nimport { HtmlAttributePlugin } from './html-attribute-plugin';\nimport { isNil } from '@visactor/vutils';\n\nexport class ReactAttributePlugin extends HtmlAttributePlugin implements IPlugin {\n name: 'ReactAttributePlugin' = 'ReactAttributePlugin';\n activeEvent: 'onRegister' = 'onRegister';\n declare pluginService: IPluginService;\n _uid: number = Generator.GenAutoIncrementId();\n key: string = this.name + this._uid;\n\n htmlMap: Record<\n string,\n {\n root?: any;\n unmount?: () => void;\n wrapContainer: HTMLElement;\n nativeContainer: HTMLElement;\n container: string | HTMLElement | null;\n renderId: number;\n }\n > = {};\n\n removeElement(id: string) {\n if (!this.htmlMap || !this.htmlMap[id]) {\n return;\n }\n\n const { root, wrapContainer, unmount } = this.htmlMap[id];\n\n if (root) {\n const raf = application.global.getRequestAnimationFrame();\n raf(() => {\n root.unmount();\n });\n } else if (unmount) {\n unmount();\n }\n\n wrapContainer && application.global.removeDom(wrapContainer);\n\n this.htmlMap[id] = null;\n }\n\n renderGraphicHTML(graphic: IGraphic) {\n const { react } = graphic.attribute;\n if (!react) {\n return;\n }\n const stage = graphic.stage;\n if (!stage) {\n return;\n }\n const ReactDOM = stage.params.ReactDOM;\n const { element, container } = react;\n if (!(element && ReactDOM && (ReactDOM.createRoot || ReactDOM.render))) {\n return;\n }\n const id = isNil(react.id) ? `${graphic.id ?? graphic._uid}_react` : react.id;\n\n if (this.htmlMap && this.htmlMap[id] && container && container !== this.htmlMap[id].container) {\n this.removeElement(id);\n }\n\n if (!this.htmlMap || !this.htmlMap[id]) {\n // createa a wrapper contianer to be the root of react element\n const { wrapContainer, nativeContainer } = this.getWrapContainer(stage, container);\n\n if (wrapContainer) {\n if (!this.htmlMap) {\n this.htmlMap = {};\n }\n if (ReactDOM.createRoot) {\n const root = ReactDOM.createRoot(wrapContainer);\n root.render(element);\n\n this.htmlMap[id] = { root, wrapContainer, nativeContainer, container, renderId: this.renderId };\n } else {\n ReactDOM.render(element, wrapContainer);\n\n this.htmlMap[id] = {\n wrapContainer,\n nativeContainer,\n container,\n renderId: this.renderId,\n unmount: () => {\n ReactDOM.unmountComponentAtNode(wrapContainer);\n }\n };\n }\n }\n } else {\n // update react element\n if (ReactDOM.createRoot) {\n this.htmlMap[id].root.render(element);\n } else {\n ReactDOM.render(element, this.htmlMap[id].wrapContainer);\n }\n }\n\n if (!this.htmlMap || !this.htmlMap[id]) {\n return;\n }\n\n const { wrapContainer, nativeContainer } = this.htmlMap[id];\n\n this.updateStyleOfWrapContainer(graphic, stage, wrapContainer, nativeContainer, react);\n this.htmlMap[id].renderId = this.renderId;\n }\n}\n"]}
|
package/dist/index.es.js
CHANGED
|
@@ -25954,13 +25954,16 @@ class ReactAttributePlugin extends HtmlAttributePlugin {
|
|
|
25954
25954
|
if (!this.htmlMap || !this.htmlMap[id]) {
|
|
25955
25955
|
return;
|
|
25956
25956
|
}
|
|
25957
|
-
const { root, wrapContainer } = this.htmlMap[id];
|
|
25957
|
+
const { root, wrapContainer, unmount } = this.htmlMap[id];
|
|
25958
25958
|
if (root) {
|
|
25959
25959
|
const raf = application.global.getRequestAnimationFrame();
|
|
25960
25960
|
raf(() => {
|
|
25961
25961
|
root.unmount();
|
|
25962
25962
|
});
|
|
25963
25963
|
}
|
|
25964
|
+
else if (unmount) {
|
|
25965
|
+
unmount();
|
|
25966
|
+
}
|
|
25964
25967
|
wrapContainer && application.global.removeDom(wrapContainer);
|
|
25965
25968
|
this.htmlMap[id] = null;
|
|
25966
25969
|
}
|
|
@@ -25976,7 +25979,7 @@ class ReactAttributePlugin extends HtmlAttributePlugin {
|
|
|
25976
25979
|
}
|
|
25977
25980
|
const ReactDOM = stage.params.ReactDOM;
|
|
25978
25981
|
const { element, container } = react;
|
|
25979
|
-
if (!(element && ReactDOM && ReactDOM.createRoot)) {
|
|
25982
|
+
if (!(element && ReactDOM && (ReactDOM.createRoot || ReactDOM.render))) {
|
|
25980
25983
|
return;
|
|
25981
25984
|
}
|
|
25982
25985
|
const id = isNil(react.id) ? `${(_a = graphic.id) !== null && _a !== void 0 ? _a : graphic._uid}_react` : react.id;
|
|
@@ -25986,16 +25989,35 @@ class ReactAttributePlugin extends HtmlAttributePlugin {
|
|
|
25986
25989
|
if (!this.htmlMap || !this.htmlMap[id]) {
|
|
25987
25990
|
const { wrapContainer, nativeContainer } = this.getWrapContainer(stage, container);
|
|
25988
25991
|
if (wrapContainer) {
|
|
25989
|
-
const root = ReactDOM.createRoot(wrapContainer);
|
|
25990
|
-
root.render(element);
|
|
25991
25992
|
if (!this.htmlMap) {
|
|
25992
25993
|
this.htmlMap = {};
|
|
25993
25994
|
}
|
|
25994
|
-
|
|
25995
|
+
if (ReactDOM.createRoot) {
|
|
25996
|
+
const root = ReactDOM.createRoot(wrapContainer);
|
|
25997
|
+
root.render(element);
|
|
25998
|
+
this.htmlMap[id] = { root, wrapContainer, nativeContainer, container, renderId: this.renderId };
|
|
25999
|
+
}
|
|
26000
|
+
else {
|
|
26001
|
+
ReactDOM.render(element, wrapContainer);
|
|
26002
|
+
this.htmlMap[id] = {
|
|
26003
|
+
wrapContainer,
|
|
26004
|
+
nativeContainer,
|
|
26005
|
+
container,
|
|
26006
|
+
renderId: this.renderId,
|
|
26007
|
+
unmount: () => {
|
|
26008
|
+
ReactDOM.unmountComponentAtNode(wrapContainer);
|
|
26009
|
+
}
|
|
26010
|
+
};
|
|
26011
|
+
}
|
|
25995
26012
|
}
|
|
25996
26013
|
}
|
|
25997
26014
|
else {
|
|
25998
|
-
|
|
26015
|
+
if (ReactDOM.createRoot) {
|
|
26016
|
+
this.htmlMap[id].root.render(element);
|
|
26017
|
+
}
|
|
26018
|
+
else {
|
|
26019
|
+
ReactDOM.render(element, this.htmlMap[id].wrapContainer);
|
|
26020
|
+
}
|
|
25999
26021
|
}
|
|
26000
26022
|
if (!this.htmlMap || !this.htmlMap[id]) {
|
|
26001
26023
|
return;
|
|
@@ -7,7 +7,8 @@ export declare class ReactAttributePlugin extends HtmlAttributePlugin implements
|
|
|
7
7
|
_uid: number;
|
|
8
8
|
key: string;
|
|
9
9
|
htmlMap: Record<string, {
|
|
10
|
-
root
|
|
10
|
+
root?: any;
|
|
11
|
+
unmount?: () => void;
|
|
11
12
|
wrapContainer: HTMLElement;
|
|
12
13
|
nativeContainer: HTMLElement;
|
|
13
14
|
container: string | HTMLElement | null;
|
|
@@ -13,12 +13,12 @@ export class ReactAttributePlugin extends HtmlAttributePlugin {
|
|
|
13
13
|
}
|
|
14
14
|
removeElement(id) {
|
|
15
15
|
if (!this.htmlMap || !this.htmlMap[id]) return;
|
|
16
|
-
const {root: root, wrapContainer: wrapContainer} = this.htmlMap[id];
|
|
16
|
+
const {root: root, wrapContainer: wrapContainer, unmount: unmount} = this.htmlMap[id];
|
|
17
17
|
if (root) {
|
|
18
18
|
application.global.getRequestAnimationFrame()((() => {
|
|
19
19
|
root.unmount();
|
|
20
20
|
}));
|
|
21
|
-
}
|
|
21
|
+
} else unmount && unmount();
|
|
22
22
|
wrapContainer && application.global.removeDom(wrapContainer), this.htmlMap[id] = null;
|
|
23
23
|
}
|
|
24
24
|
renderGraphicHTML(graphic) {
|
|
@@ -28,21 +28,29 @@ export class ReactAttributePlugin extends HtmlAttributePlugin {
|
|
|
28
28
|
const stage = graphic.stage;
|
|
29
29
|
if (!stage) return;
|
|
30
30
|
const ReactDOM = stage.params.ReactDOM, {element: element, container: container} = react;
|
|
31
|
-
if (!
|
|
31
|
+
if (!element || !ReactDOM || !ReactDOM.createRoot && !ReactDOM.render) return;
|
|
32
32
|
const id = isNil(react.id) ? `${null !== (_a = graphic.id) && void 0 !== _a ? _a : graphic._uid}_react` : react.id;
|
|
33
33
|
if (this.htmlMap && this.htmlMap[id] && container && container !== this.htmlMap[id].container && this.removeElement(id),
|
|
34
|
-
this.htmlMap && this.htmlMap[id]) this.htmlMap[id].root.render(element); else {
|
|
34
|
+
this.htmlMap && this.htmlMap[id]) ReactDOM.createRoot ? this.htmlMap[id].root.render(element) : ReactDOM.render(element, this.htmlMap[id].wrapContainer); else {
|
|
35
35
|
const {wrapContainer: wrapContainer, nativeContainer: nativeContainer} = this.getWrapContainer(stage, container);
|
|
36
|
-
if (wrapContainer) {
|
|
36
|
+
if (wrapContainer) if (this.htmlMap || (this.htmlMap = {}), ReactDOM.createRoot) {
|
|
37
37
|
const root = ReactDOM.createRoot(wrapContainer);
|
|
38
|
-
root.render(element), this.htmlMap
|
|
38
|
+
root.render(element), this.htmlMap[id] = {
|
|
39
39
|
root: root,
|
|
40
40
|
wrapContainer: wrapContainer,
|
|
41
41
|
nativeContainer: nativeContainer,
|
|
42
42
|
container: container,
|
|
43
43
|
renderId: this.renderId
|
|
44
44
|
};
|
|
45
|
-
}
|
|
45
|
+
} else ReactDOM.render(element, wrapContainer), this.htmlMap[id] = {
|
|
46
|
+
wrapContainer: wrapContainer,
|
|
47
|
+
nativeContainer: nativeContainer,
|
|
48
|
+
container: container,
|
|
49
|
+
renderId: this.renderId,
|
|
50
|
+
unmount: () => {
|
|
51
|
+
ReactDOM.unmountComponentAtNode(wrapContainer);
|
|
52
|
+
}
|
|
53
|
+
};
|
|
46
54
|
}
|
|
47
55
|
if (!this.htmlMap || !this.htmlMap[id]) return;
|
|
48
56
|
const {wrapContainer: wrapContainer, nativeContainer: nativeContainer} = this.htmlMap[id];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/plugins/builtin-plugin/react-attribute-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEnD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAEzC,MAAM,OAAO,oBAAqB,SAAQ,mBAAmB;IAA7D;;QACE,SAAI,GAA2B,sBAAsB,CAAC;QACtD,gBAAW,GAAiB,YAAY,CAAC;QAEzC,SAAI,GAAW,SAAS,CAAC,kBAAkB,EAAE,CAAC;QAC9C,QAAG,GAAW,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QAEpC,YAAO,
|
|
1
|
+
{"version":3,"sources":["../src/plugins/builtin-plugin/react-attribute-plugin.ts"],"names":[],"mappings":"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","file":"react-attribute-plugin.js","sourcesContent":["import { Generator } from '../../common/generator';\nimport type { IGraphic, IPlugin, IPluginService } from '../../interface';\nimport { application } from '../../application';\nimport { HtmlAttributePlugin } from './html-attribute-plugin';\nimport { isNil } from '@visactor/vutils';\n\nexport class ReactAttributePlugin extends HtmlAttributePlugin implements IPlugin {\n name: 'ReactAttributePlugin' = 'ReactAttributePlugin';\n activeEvent: 'onRegister' = 'onRegister';\n declare pluginService: IPluginService;\n _uid: number = Generator.GenAutoIncrementId();\n key: string = this.name + this._uid;\n\n htmlMap: Record<\n string,\n {\n root?: any;\n unmount?: () => void;\n wrapContainer: HTMLElement;\n nativeContainer: HTMLElement;\n container: string | HTMLElement | null;\n renderId: number;\n }\n > = {};\n\n removeElement(id: string) {\n if (!this.htmlMap || !this.htmlMap[id]) {\n return;\n }\n\n const { root, wrapContainer, unmount } = this.htmlMap[id];\n\n if (root) {\n const raf = application.global.getRequestAnimationFrame();\n raf(() => {\n root.unmount();\n });\n } else if (unmount) {\n unmount();\n }\n\n wrapContainer && application.global.removeDom(wrapContainer);\n\n this.htmlMap[id] = null;\n }\n\n renderGraphicHTML(graphic: IGraphic) {\n const { react } = graphic.attribute;\n if (!react) {\n return;\n }\n const stage = graphic.stage;\n if (!stage) {\n return;\n }\n const ReactDOM = stage.params.ReactDOM;\n const { element, container } = react;\n if (!(element && ReactDOM && (ReactDOM.createRoot || ReactDOM.render))) {\n return;\n }\n const id = isNil(react.id) ? `${graphic.id ?? graphic._uid}_react` : react.id;\n\n if (this.htmlMap && this.htmlMap[id] && container && container !== this.htmlMap[id].container) {\n this.removeElement(id);\n }\n\n if (!this.htmlMap || !this.htmlMap[id]) {\n // createa a wrapper contianer to be the root of react element\n const { wrapContainer, nativeContainer } = this.getWrapContainer(stage, container);\n\n if (wrapContainer) {\n if (!this.htmlMap) {\n this.htmlMap = {};\n }\n if (ReactDOM.createRoot) {\n const root = ReactDOM.createRoot(wrapContainer);\n root.render(element);\n\n this.htmlMap[id] = { root, wrapContainer, nativeContainer, container, renderId: this.renderId };\n } else {\n ReactDOM.render(element, wrapContainer);\n\n this.htmlMap[id] = {\n wrapContainer,\n nativeContainer,\n container,\n renderId: this.renderId,\n unmount: () => {\n ReactDOM.unmountComponentAtNode(wrapContainer);\n }\n };\n }\n }\n } else {\n // update react element\n if (ReactDOM.createRoot) {\n this.htmlMap[id].root.render(element);\n } else {\n ReactDOM.render(element, this.htmlMap[id].wrapContainer);\n }\n }\n\n if (!this.htmlMap || !this.htmlMap[id]) {\n return;\n }\n\n const { wrapContainer, nativeContainer } = this.htmlMap[id];\n\n this.updateStyleOfWrapContainer(graphic, stage, wrapContainer, nativeContainer, react);\n this.htmlMap[id].renderId = this.renderId;\n }\n}\n"]}
|