@visactor/react-vrender 1.1.0-alpha.0 → 1.1.0-alpha.2
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/Stage.d.ts +5 -3
- package/cjs/Stage.js +45 -16
- package/cjs/Stage.js.map +1 -1
- package/dist/index.es.js +30 -14
- package/es/Stage.d.ts +5 -3
- package/es/Stage.js +23 -15
- package/es/Stage.js.map +1 -1
- package/package.json +11 -3
package/cjs/Stage.d.ts
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
|
-
import
|
|
1
|
+
import * as VRender from '@visactor/vrender';
|
|
2
|
+
import type { IStageParams, IOption3D } from '@visactor/vrender';
|
|
2
3
|
import React from 'react';
|
|
3
|
-
|
|
4
|
+
import type { HTMLAttributes } from 'react';
|
|
5
|
+
export interface StageProps extends Omit<IStageParams, 'autoRender' | 'container'>, Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'title'> {
|
|
4
6
|
containerId?: string | undefined;
|
|
5
7
|
containerTitle?: string | undefined;
|
|
6
8
|
children?: any;
|
|
7
9
|
stage3dOptions?: IOption3D;
|
|
8
10
|
}
|
|
9
|
-
export declare const Stage: React.ForwardRefExoticComponent<StageProps & React.RefAttributes<IStage>>;
|
|
11
|
+
export declare const Stage: React.ForwardRefExoticComponent<StageProps & React.RefAttributes<VRender.IStage>>;
|
package/cjs/Stage.js
CHANGED
|
@@ -1,6 +1,29 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var __createBinding = this && this.__createBinding || (Object.create ? function(o, m, k, k2) {
|
|
4
|
+
void 0 === k2 && (k2 = k);
|
|
5
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
6
|
+
desc && !("get" in desc ? !m.__esModule : desc.writable || desc.configurable) || (desc = {
|
|
7
|
+
enumerable: !0,
|
|
8
|
+
get: function() {
|
|
9
|
+
return m[k];
|
|
10
|
+
}
|
|
11
|
+
}), Object.defineProperty(o, k2, desc);
|
|
12
|
+
} : function(o, m, k, k2) {
|
|
13
|
+
void 0 === k2 && (k2 = k), o[k2] = m[k];
|
|
14
|
+
}), __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function(o, v) {
|
|
15
|
+
Object.defineProperty(o, "default", {
|
|
16
|
+
enumerable: !0,
|
|
17
|
+
value: v
|
|
18
|
+
});
|
|
19
|
+
} : function(o, v) {
|
|
20
|
+
o.default = v;
|
|
21
|
+
}), __importStar = this && this.__importStar || function(mod) {
|
|
22
|
+
if (mod && mod.__esModule) return mod;
|
|
23
|
+
var result = {};
|
|
24
|
+
if (null != mod) for (var k in mod) "default" !== k && Object.prototype.hasOwnProperty.call(mod, k) && __createBinding(result, mod, k);
|
|
25
|
+
return __setModuleDefault(result, mod), result;
|
|
26
|
+
}, __rest = this && this.__rest || function(s, e) {
|
|
4
27
|
var t = {};
|
|
5
28
|
for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
|
|
6
29
|
if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
|
|
@@ -18,15 +41,18 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
18
41
|
value: !0
|
|
19
42
|
}), exports.Stage = void 0;
|
|
20
43
|
|
|
21
|
-
const
|
|
44
|
+
const VRender = __importStar(require("@visactor/vrender")), react_1 = __importDefault(require("react")), hostConfig_1 = require("./hostConfig"), util_1 = require("./util");
|
|
22
45
|
|
|
23
|
-
|
|
46
|
+
function createBrowserStageApp() {
|
|
47
|
+
return VRender.createBrowserVRenderApp();
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
exports.Stage = react_1.default.forwardRef(((props, ref) => {
|
|
24
51
|
const {viewBox: viewBox, width: width, height: height, dpr: dpr, background: background, canvasControled: canvasControled, title: title, canvas: canvas, disableDirtyBounds: disableDirtyBounds, beforeRender: beforeRender, afterRender: afterRender, renderStyle: renderStyle, stage3dOptions: stage3dOptions, containerId: containerId, containerTitle: containerTitle, children: children} = props, others = __rest(props, [ "viewBox", "width", "height", "dpr", "background", "canvasControled", "title", "canvas", "disableDirtyBounds", "beforeRender", "afterRender", "renderStyle", "stage3dOptions", "containerId", "containerTitle", "children" ]);
|
|
25
52
|
(0, util_1.assertRef)(ref);
|
|
26
|
-
const fiberRoot = (
|
|
27
|
-
react_1.
|
|
28
|
-
|
|
29
|
-
const stage = (0, vrender_1.createStage)({
|
|
53
|
+
const fiberRoot = react_1.default.useRef(null), divRef = react_1.default.useRef(null), innerStageRef = react_1.default.useRef(null), appRef = react_1.default.useRef(null), stageRef = ref && "function" != typeof ref ? ref : innerStageRef, initedRef = react_1.default.useRef(!1);
|
|
54
|
+
return react_1.default.useLayoutEffect((() => {
|
|
55
|
+
const app = createBrowserStageApp(), stage = app.createStage({
|
|
30
56
|
viewBox: viewBox,
|
|
31
57
|
width: width,
|
|
32
58
|
height: height,
|
|
@@ -42,22 +68,25 @@ exports.Stage = (0, react_1.forwardRef)(((props, ref) => {
|
|
|
42
68
|
canvas: canvas,
|
|
43
69
|
container: divRef.current
|
|
44
70
|
});
|
|
45
|
-
return stage3dOptions && stage.set3dOptions(stage3dOptions),
|
|
46
|
-
fiberRoot.current = hostConfig_1.reconcilor.createContainer(stage, 1, null, !1, !1, ""),
|
|
71
|
+
return stage3dOptions && stage.set3dOptions(stage3dOptions), appRef.current = app,
|
|
72
|
+
stageRef.current = stage, fiberRoot.current = hostConfig_1.reconcilor.createContainer(stage, 1, null, !1, !1, ""),
|
|
47
73
|
() => {
|
|
48
|
-
|
|
74
|
+
var _a, _b;
|
|
75
|
+
fiberRoot.current && (hostConfig_1.reconcilor.updateContainer(null, fiberRoot.current, null),
|
|
76
|
+
fiberRoot.current = null), stageRef.current = null, null === (_a = stage.release) || void 0 === _a || _a.call(stage),
|
|
77
|
+
null === (_b = appRef.current) || void 0 === _b || _b.release(), appRef.current = null;
|
|
49
78
|
};
|
|
50
|
-
}), []),
|
|
79
|
+
}), []), react_1.default.useLayoutEffect((() => {
|
|
51
80
|
viewBox && stageRef.current && initedRef.current && stageRef.current.setViewBox(viewBox.x1, viewBox.y1, viewBox.x2 - viewBox.x1, viewBox.y2 - viewBox.y1, !1);
|
|
52
|
-
}), [ stageRef, viewBox, initedRef ]),
|
|
81
|
+
}), [ stageRef, viewBox, initedRef ]), react_1.default.useLayoutEffect((() => {
|
|
53
82
|
dpr && stageRef.current && initedRef.current && stageRef.current.setDpr(dpr);
|
|
54
|
-
}), [ stageRef, dpr, initedRef ]),
|
|
83
|
+
}), [ stageRef, dpr, initedRef ]), react_1.default.useLayoutEffect((() => {
|
|
55
84
|
width > 0 && height > 0 && stageRef.current && initedRef.current && stageRef.current.resize(width, height);
|
|
56
|
-
}), [ width, height, stageRef, initedRef ]),
|
|
85
|
+
}), [ width, height, stageRef, initedRef ]), react_1.default.useLayoutEffect((() => {
|
|
57
86
|
initedRef.current = !0, fiberRoot.current && hostConfig_1.reconcilor.updateContainer(children, fiberRoot.current, null);
|
|
58
|
-
}), [ children ]),
|
|
87
|
+
}), [ children ]), react_1.default.createElement("div", Object.assign({}, others, {
|
|
59
88
|
id: containerId,
|
|
60
89
|
title: containerTitle,
|
|
61
90
|
ref: divRef
|
|
62
91
|
}));
|
|
63
|
-
}));
|
|
92
|
+
})), exports.Stage.displayName = "Stage";
|
package/cjs/Stage.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Stage.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/Stage.tsx"],"names":[],"mappings":"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","file":"Stage.js","sourcesContent":["import * as VRender from '@visactor/vrender';\nimport type { IStage, IStageParams, IOption3D } from '@visactor/vrender';\nimport React from 'react';\n// eslint-disable-next-line no-duplicate-imports\nimport type { HTMLAttributes, MutableRefObject } from 'react';\nimport type { FiberRoot } from 'react-reconciler';\nimport { reconcilor } from './hostConfig';\nimport { assertRef } from './util';\n\nexport interface StageProps\n extends Omit<IStageParams, 'autoRender' | 'container'>,\n Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'title'> {\n containerId?: string | undefined;\n containerTitle?: string | undefined;\n children?: any;\n stage3dOptions?: IOption3D;\n}\n\ntype TVRenderApp = {\n createStage: (params: Partial<IStageParams> & { autoRender?: boolean; container?: HTMLElement }) => IStage;\n release?: () => void;\n};\n\nfunction createBrowserStageApp(): TVRenderApp {\n return (VRender as any).createBrowserVRenderApp() as TVRenderApp;\n}\n\nexport const Stage = React.forwardRef<IStage, StageProps>((props, ref) => {\n const {\n viewBox,\n width,\n height,\n dpr,\n background,\n canvasControled,\n title,\n canvas,\n disableDirtyBounds,\n beforeRender,\n afterRender,\n renderStyle,\n stage3dOptions,\n containerId,\n containerTitle,\n children,\n ...others\n } = props;\n assertRef(ref);\n\n const fiberRoot = React.useRef<FiberRoot | null>(null);\n const divRef = React.useRef<HTMLDivElement>(null);\n const innerStageRef = React.useRef<IStage | null>(null);\n const appRef = React.useRef<TVRenderApp | null>(null);\n const stageRef = ref && typeof ref !== 'function' ? (ref as MutableRefObject<IStage | null>) : innerStageRef;\n const initedRef = React.useRef(false);\n\n React.useLayoutEffect(() => {\n const app = createBrowserStageApp();\n const stage = app.createStage({\n viewBox,\n width,\n height,\n dpr,\n background,\n canvasControled,\n title,\n autoRender: true,\n disableDirtyBounds,\n beforeRender,\n afterRender,\n renderStyle,\n canvas,\n container: divRef.current as HTMLElement\n }) as IStage;\n\n if (stage3dOptions) {\n stage.set3dOptions(stage3dOptions);\n }\n\n appRef.current = app;\n stageRef.current = stage;\n\n fiberRoot.current = (reconcilor as any).createContainer(stage as any, 1, null, false, false, '');\n\n return () => {\n if (fiberRoot.current) {\n reconcilor.updateContainer(null, fiberRoot.current, null);\n fiberRoot.current = null;\n }\n stageRef.current = null;\n stage.release?.();\n appRef.current?.release();\n appRef.current = null;\n };\n // Intentionally mount-only: subsequent prop updates are handled by dedicated effects below.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n React.useLayoutEffect(() => {\n if (viewBox && stageRef.current && initedRef.current) {\n stageRef.current.setViewBox(\n viewBox.x1 as any,\n viewBox.y1 as never,\n viewBox.x2 - viewBox.x1,\n viewBox.y2 - viewBox.y1,\n false\n );\n }\n }, [stageRef, viewBox, initedRef]);\n\n React.useLayoutEffect(() => {\n if (dpr && stageRef.current && initedRef.current) {\n stageRef.current.setDpr(dpr);\n }\n }, [stageRef, dpr, initedRef]);\n\n React.useLayoutEffect(() => {\n if (width > 0 && height > 0 && stageRef.current && initedRef.current) {\n stageRef.current.resize(width, height);\n }\n }, [width, height, stageRef, initedRef]);\n\n React.useLayoutEffect(() => {\n initedRef.current = true;\n if (fiberRoot.current) {\n reconcilor.updateContainer(children, fiberRoot.current, null);\n }\n }, [children]);\n\n return <div {...others} id={containerId} title={containerTitle} ref={divRef} />;\n});\n\nStage.displayName = 'Stage';\n"]}
|
package/dist/index.es.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import
|
|
1
|
+
import * as VRender from '@visactor/vrender';
|
|
2
|
+
import { createText, createGlyph, createShadowRoot, graphicCreator } from '@visactor/vrender';
|
|
2
3
|
import ReactReconciler from 'react-reconciler';
|
|
3
4
|
|
|
4
5
|
function ElementOf(type) {
|
|
@@ -3355,16 +3356,21 @@ function assertRef(forwardedRef) {
|
|
|
3355
3356
|
}
|
|
3356
3357
|
}
|
|
3357
3358
|
|
|
3358
|
-
|
|
3359
|
+
function createBrowserStageApp() {
|
|
3360
|
+
return VRender.createBrowserVRenderApp();
|
|
3361
|
+
}
|
|
3362
|
+
const Stage = React.forwardRef((props, ref) => {
|
|
3359
3363
|
const { viewBox, width, height, dpr, background, canvasControled, title, canvas, disableDirtyBounds, beforeRender, afterRender, renderStyle, stage3dOptions, containerId, containerTitle, children } = props, others = __rest(props, ["viewBox", "width", "height", "dpr", "background", "canvasControled", "title", "canvas", "disableDirtyBounds", "beforeRender", "afterRender", "renderStyle", "stage3dOptions", "containerId", "containerTitle", "children"]);
|
|
3360
3364
|
assertRef(ref);
|
|
3361
|
-
const fiberRoot =
|
|
3362
|
-
const divRef =
|
|
3363
|
-
const innerStageRef =
|
|
3364
|
-
const
|
|
3365
|
-
const
|
|
3366
|
-
|
|
3367
|
-
|
|
3365
|
+
const fiberRoot = React.useRef(null);
|
|
3366
|
+
const divRef = React.useRef(null);
|
|
3367
|
+
const innerStageRef = React.useRef(null);
|
|
3368
|
+
const appRef = React.useRef(null);
|
|
3369
|
+
const stageRef = ref && typeof ref !== 'function' ? ref : innerStageRef;
|
|
3370
|
+
const initedRef = React.useRef(false);
|
|
3371
|
+
React.useLayoutEffect(() => {
|
|
3372
|
+
const app = createBrowserStageApp();
|
|
3373
|
+
const stage = app.createStage({
|
|
3368
3374
|
viewBox,
|
|
3369
3375
|
width,
|
|
3370
3376
|
height,
|
|
@@ -3383,28 +3389,37 @@ const Stage = reactExports.forwardRef((props, ref) => {
|
|
|
3383
3389
|
if (stage3dOptions) {
|
|
3384
3390
|
stage.set3dOptions(stage3dOptions);
|
|
3385
3391
|
}
|
|
3392
|
+
appRef.current = app;
|
|
3386
3393
|
stageRef.current = stage;
|
|
3387
3394
|
fiberRoot.current = reconcilor.createContainer(stage, 1, null, false, false, '');
|
|
3388
3395
|
return () => {
|
|
3389
|
-
|
|
3396
|
+
var _a, _b;
|
|
3397
|
+
if (fiberRoot.current) {
|
|
3398
|
+
reconcilor.updateContainer(null, fiberRoot.current, null);
|
|
3399
|
+
fiberRoot.current = null;
|
|
3400
|
+
}
|
|
3401
|
+
stageRef.current = null;
|
|
3402
|
+
(_a = stage.release) === null || _a === void 0 ? void 0 : _a.call(stage);
|
|
3403
|
+
(_b = appRef.current) === null || _b === void 0 ? void 0 : _b.release();
|
|
3404
|
+
appRef.current = null;
|
|
3390
3405
|
};
|
|
3391
3406
|
}, []);
|
|
3392
|
-
|
|
3407
|
+
React.useLayoutEffect(() => {
|
|
3393
3408
|
if (viewBox && stageRef.current && initedRef.current) {
|
|
3394
3409
|
stageRef.current.setViewBox(viewBox.x1, viewBox.y1, viewBox.x2 - viewBox.x1, viewBox.y2 - viewBox.y1, false);
|
|
3395
3410
|
}
|
|
3396
3411
|
}, [stageRef, viewBox, initedRef]);
|
|
3397
|
-
|
|
3412
|
+
React.useLayoutEffect(() => {
|
|
3398
3413
|
if (dpr && stageRef.current && initedRef.current) {
|
|
3399
3414
|
stageRef.current.setDpr(dpr);
|
|
3400
3415
|
}
|
|
3401
3416
|
}, [stageRef, dpr, initedRef]);
|
|
3402
|
-
|
|
3417
|
+
React.useLayoutEffect(() => {
|
|
3403
3418
|
if (width > 0 && height > 0 && stageRef.current && initedRef.current) {
|
|
3404
3419
|
stageRef.current.resize(width, height);
|
|
3405
3420
|
}
|
|
3406
3421
|
}, [width, height, stageRef, initedRef]);
|
|
3407
|
-
|
|
3422
|
+
React.useLayoutEffect(() => {
|
|
3408
3423
|
initedRef.current = true;
|
|
3409
3424
|
if (fiberRoot.current) {
|
|
3410
3425
|
reconcilor.updateContainer(children, fiberRoot.current, null);
|
|
@@ -3412,5 +3427,6 @@ const Stage = reactExports.forwardRef((props, ref) => {
|
|
|
3412
3427
|
}, [children]);
|
|
3413
3428
|
return React.createElement("div", Object.assign({}, others, { id: containerId, title: containerTitle, ref: divRef }));
|
|
3414
3429
|
});
|
|
3430
|
+
Stage.displayName = 'Stage';
|
|
3415
3431
|
|
|
3416
3432
|
export { Arc, Area, Circle, ElementOf, Glyph, Group, Image, Layer, Line, Path, Polygon, Rect, Rect3d, RichText, ShadowRoot, Stage, TYPES, Text, VRenderSymbol, createInstance, reconcilor, render };
|
package/es/Stage.d.ts
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
|
-
import
|
|
1
|
+
import * as VRender from '@visactor/vrender';
|
|
2
|
+
import type { IStageParams, IOption3D } from '@visactor/vrender';
|
|
2
3
|
import React from 'react';
|
|
3
|
-
|
|
4
|
+
import type { HTMLAttributes } from 'react';
|
|
5
|
+
export interface StageProps extends Omit<IStageParams, 'autoRender' | 'container'>, Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'title'> {
|
|
4
6
|
containerId?: string | undefined;
|
|
5
7
|
containerTitle?: string | undefined;
|
|
6
8
|
children?: any;
|
|
7
9
|
stage3dOptions?: IOption3D;
|
|
8
10
|
}
|
|
9
|
-
export declare const Stage: React.ForwardRefExoticComponent<StageProps & React.RefAttributes<IStage>>;
|
|
11
|
+
export declare const Stage: React.ForwardRefExoticComponent<StageProps & React.RefAttributes<VRender.IStage>>;
|
package/es/Stage.js
CHANGED
|
@@ -8,9 +8,7 @@ var __rest = this && this.__rest || function(s, e) {
|
|
|
8
8
|
return t;
|
|
9
9
|
};
|
|
10
10
|
|
|
11
|
-
import
|
|
12
|
-
|
|
13
|
-
import { forwardRef, useLayoutEffect, useRef } from "react";
|
|
11
|
+
import * as VRender from "@visactor/vrender";
|
|
14
12
|
|
|
15
13
|
import React from "react";
|
|
16
14
|
|
|
@@ -18,12 +16,16 @@ import { reconcilor } from "./hostConfig";
|
|
|
18
16
|
|
|
19
17
|
import { assertRef } from "./util";
|
|
20
18
|
|
|
21
|
-
|
|
19
|
+
function createBrowserStageApp() {
|
|
20
|
+
return VRender.createBrowserVRenderApp();
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export const Stage = React.forwardRef(((props, ref) => {
|
|
22
24
|
const {viewBox: viewBox, width: width, height: height, dpr: dpr, background: background, canvasControled: canvasControled, title: title, canvas: canvas, disableDirtyBounds: disableDirtyBounds, beforeRender: beforeRender, afterRender: afterRender, renderStyle: renderStyle, stage3dOptions: stage3dOptions, containerId: containerId, containerTitle: containerTitle, children: children} = props, others = __rest(props, [ "viewBox", "width", "height", "dpr", "background", "canvasControled", "title", "canvas", "disableDirtyBounds", "beforeRender", "afterRender", "renderStyle", "stage3dOptions", "containerId", "containerTitle", "children" ]);
|
|
23
25
|
assertRef(ref);
|
|
24
|
-
const fiberRoot = useRef(), divRef = useRef(null), innerStageRef = useRef(null), stageRef = ref
|
|
25
|
-
return useLayoutEffect((() => {
|
|
26
|
-
const stage = createStage({
|
|
26
|
+
const fiberRoot = React.useRef(null), divRef = React.useRef(null), innerStageRef = React.useRef(null), appRef = React.useRef(null), stageRef = ref && "function" != typeof ref ? ref : innerStageRef, initedRef = React.useRef(!1);
|
|
27
|
+
return React.useLayoutEffect((() => {
|
|
28
|
+
const app = createBrowserStageApp(), stage = app.createStage({
|
|
27
29
|
viewBox: viewBox,
|
|
28
30
|
width: width,
|
|
29
31
|
height: height,
|
|
@@ -39,21 +41,27 @@ export const Stage = forwardRef(((props, ref) => {
|
|
|
39
41
|
canvas: canvas,
|
|
40
42
|
container: divRef.current
|
|
41
43
|
});
|
|
42
|
-
return stage3dOptions && stage.set3dOptions(stage3dOptions),
|
|
43
|
-
fiberRoot.current = reconcilor.createContainer(stage, 1, null, !1, !1, ""),
|
|
44
|
-
|
|
44
|
+
return stage3dOptions && stage.set3dOptions(stage3dOptions), appRef.current = app,
|
|
45
|
+
stageRef.current = stage, fiberRoot.current = reconcilor.createContainer(stage, 1, null, !1, !1, ""),
|
|
46
|
+
() => {
|
|
47
|
+
var _a, _b;
|
|
48
|
+
fiberRoot.current && (reconcilor.updateContainer(null, fiberRoot.current, null),
|
|
49
|
+
fiberRoot.current = null), stageRef.current = null, null === (_a = stage.release) || void 0 === _a || _a.call(stage),
|
|
50
|
+
null === (_b = appRef.current) || void 0 === _b || _b.release(), appRef.current = null;
|
|
45
51
|
};
|
|
46
|
-
}), []), useLayoutEffect((() => {
|
|
52
|
+
}), []), React.useLayoutEffect((() => {
|
|
47
53
|
viewBox && stageRef.current && initedRef.current && stageRef.current.setViewBox(viewBox.x1, viewBox.y1, viewBox.x2 - viewBox.x1, viewBox.y2 - viewBox.y1, !1);
|
|
48
|
-
}), [ stageRef, viewBox, initedRef ]), useLayoutEffect((() => {
|
|
54
|
+
}), [ stageRef, viewBox, initedRef ]), React.useLayoutEffect((() => {
|
|
49
55
|
dpr && stageRef.current && initedRef.current && stageRef.current.setDpr(dpr);
|
|
50
|
-
}), [ stageRef, dpr, initedRef ]), useLayoutEffect((() => {
|
|
56
|
+
}), [ stageRef, dpr, initedRef ]), React.useLayoutEffect((() => {
|
|
51
57
|
width > 0 && height > 0 && stageRef.current && initedRef.current && stageRef.current.resize(width, height);
|
|
52
|
-
}), [ width, height, stageRef, initedRef ]), useLayoutEffect((() => {
|
|
58
|
+
}), [ width, height, stageRef, initedRef ]), React.useLayoutEffect((() => {
|
|
53
59
|
initedRef.current = !0, fiberRoot.current && reconcilor.updateContainer(children, fiberRoot.current, null);
|
|
54
60
|
}), [ children ]), React.createElement("div", Object.assign({}, others, {
|
|
55
61
|
id: containerId,
|
|
56
62
|
title: containerTitle,
|
|
57
63
|
ref: divRef
|
|
58
64
|
}));
|
|
59
|
-
}));
|
|
65
|
+
}));
|
|
66
|
+
|
|
67
|
+
Stage.displayName = "Stage";
|
package/es/Stage.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Stage.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,
|
|
1
|
+
{"version":3,"sources":["../src/Stage.tsx"],"names":[],"mappings":"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","file":"Stage.js","sourcesContent":["import * as VRender from '@visactor/vrender';\nimport type { IStage, IStageParams, IOption3D } from '@visactor/vrender';\nimport React from 'react';\n// eslint-disable-next-line no-duplicate-imports\nimport type { HTMLAttributes, MutableRefObject } from 'react';\nimport type { FiberRoot } from 'react-reconciler';\nimport { reconcilor } from './hostConfig';\nimport { assertRef } from './util';\n\nexport interface StageProps\n extends Omit<IStageParams, 'autoRender' | 'container'>,\n Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'title'> {\n containerId?: string | undefined;\n containerTitle?: string | undefined;\n children?: any;\n stage3dOptions?: IOption3D;\n}\n\ntype TVRenderApp = {\n createStage: (params: Partial<IStageParams> & { autoRender?: boolean; container?: HTMLElement }) => IStage;\n release?: () => void;\n};\n\nfunction createBrowserStageApp(): TVRenderApp {\n return (VRender as any).createBrowserVRenderApp() as TVRenderApp;\n}\n\nexport const Stage = React.forwardRef<IStage, StageProps>((props, ref) => {\n const {\n viewBox,\n width,\n height,\n dpr,\n background,\n canvasControled,\n title,\n canvas,\n disableDirtyBounds,\n beforeRender,\n afterRender,\n renderStyle,\n stage3dOptions,\n containerId,\n containerTitle,\n children,\n ...others\n } = props;\n assertRef(ref);\n\n const fiberRoot = React.useRef<FiberRoot | null>(null);\n const divRef = React.useRef<HTMLDivElement>(null);\n const innerStageRef = React.useRef<IStage | null>(null);\n const appRef = React.useRef<TVRenderApp | null>(null);\n const stageRef = ref && typeof ref !== 'function' ? (ref as MutableRefObject<IStage | null>) : innerStageRef;\n const initedRef = React.useRef(false);\n\n React.useLayoutEffect(() => {\n const app = createBrowserStageApp();\n const stage = app.createStage({\n viewBox,\n width,\n height,\n dpr,\n background,\n canvasControled,\n title,\n autoRender: true,\n disableDirtyBounds,\n beforeRender,\n afterRender,\n renderStyle,\n canvas,\n container: divRef.current as HTMLElement\n }) as IStage;\n\n if (stage3dOptions) {\n stage.set3dOptions(stage3dOptions);\n }\n\n appRef.current = app;\n stageRef.current = stage;\n\n fiberRoot.current = (reconcilor as any).createContainer(stage as any, 1, null, false, false, '');\n\n return () => {\n if (fiberRoot.current) {\n reconcilor.updateContainer(null, fiberRoot.current, null);\n fiberRoot.current = null;\n }\n stageRef.current = null;\n stage.release?.();\n appRef.current?.release();\n appRef.current = null;\n };\n // Intentionally mount-only: subsequent prop updates are handled by dedicated effects below.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n React.useLayoutEffect(() => {\n if (viewBox && stageRef.current && initedRef.current) {\n stageRef.current.setViewBox(\n viewBox.x1 as any,\n viewBox.y1 as never,\n viewBox.x2 - viewBox.x1,\n viewBox.y2 - viewBox.y1,\n false\n );\n }\n }, [stageRef, viewBox, initedRef]);\n\n React.useLayoutEffect(() => {\n if (dpr && stageRef.current && initedRef.current) {\n stageRef.current.setDpr(dpr);\n }\n }, [stageRef, dpr, initedRef]);\n\n React.useLayoutEffect(() => {\n if (width > 0 && height > 0 && stageRef.current && initedRef.current) {\n stageRef.current.resize(width, height);\n }\n }, [width, height, stageRef, initedRef]);\n\n React.useLayoutEffect(() => {\n initedRef.current = true;\n if (fiberRoot.current) {\n reconcilor.updateContainer(children, fiberRoot.current, null);\n }\n }, [children]);\n\n return <div {...others} id={containerId} title={containerTitle} ref={divRef} />;\n});\n\nStage.displayName = 'Stage';\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@visactor/react-vrender",
|
|
3
|
-
"version": "1.1.0-alpha.
|
|
3
|
+
"version": "1.1.0-alpha.2",
|
|
4
4
|
"description": "",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "cjs/index.js",
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
"react": "^18.2.0"
|
|
16
16
|
},
|
|
17
17
|
"dependencies": {
|
|
18
|
-
"@visactor/vrender": "1.1.0-alpha.
|
|
18
|
+
"@visactor/vrender": "1.1.0-alpha.2",
|
|
19
19
|
"@visactor/vutils": "~1.0.12",
|
|
20
20
|
"react-reconciler": "^0.29.0",
|
|
21
21
|
"tslib": "^2.3.1"
|
|
@@ -28,6 +28,11 @@
|
|
|
28
28
|
"@types/react-dom": "^18.0.0",
|
|
29
29
|
"@types/react-reconciler": "^0.28.2",
|
|
30
30
|
"@vitejs/plugin-react": "3.1.0",
|
|
31
|
+
"@types/jest": "^26.0.0",
|
|
32
|
+
"jest": "^26.0.0",
|
|
33
|
+
"jest-electron": "npm:@pixi/jest-electron@26.1.0",
|
|
34
|
+
"jest-extended": "^1.2.1",
|
|
35
|
+
"ts-jest": "^26.0.0",
|
|
31
36
|
"eslint": "~8.18.0",
|
|
32
37
|
"vite": "3.2.6",
|
|
33
38
|
"typescript": "4.9.5",
|
|
@@ -70,7 +75,10 @@
|
|
|
70
75
|
"eslint": "eslint --debug --fix src/",
|
|
71
76
|
"build": "cross-env DEBUG='Bundler*' bundle",
|
|
72
77
|
"dev": "cross-env DEBUG='Bundler*' bundle --clean -f es -w",
|
|
73
|
-
"test": "",
|
|
78
|
+
"test": "jest -c jest.config.js",
|
|
79
|
+
"test:electron": "jest -c jest.electron.config.js --runInBand --passWithNoTests --testPathPattern='__tests__/(browser|electron)/'",
|
|
80
|
+
"test-cov": "jest -c jest.config.js --coverage",
|
|
81
|
+
"test-watch": "cross-env DEBUG_MODE=1 jest --watch -c jest.config.js",
|
|
74
82
|
"start": "vite ./vite"
|
|
75
83
|
}
|
|
76
84
|
}
|