@inditextech/weave-react 0.1.1 → 0.2.0
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/dist/react.cjs +332 -20
- package/dist/react.d.cts +596 -0
- package/dist/react.d.ts +596 -81
- package/dist/react.js +304 -861
- package/package.json +10 -5
- package/dist/react.cjs.gz +0 -0
- package/dist/react.js.gz +0 -0
package/dist/react.cjs
CHANGED
|
@@ -1,22 +1,334 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
//#region rolldown:runtime
|
|
3
|
+
var __create = Object.create;
|
|
4
|
+
var __defProp = Object.defineProperty;
|
|
5
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
8
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
|
|
11
|
+
key = keys[i];
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
|
|
13
|
+
get: ((k) => from[k]).bind(null, key),
|
|
14
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
15
|
+
});
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
20
|
+
value: mod,
|
|
21
|
+
enumerable: true
|
|
22
|
+
}) : target, mod));
|
|
14
23
|
|
|
15
|
-
|
|
24
|
+
//#endregion
|
|
25
|
+
const react = __toESM(require("react"));
|
|
26
|
+
const __inditextech_weave_sdk = __toESM(require("@inditextech/weave-sdk"));
|
|
27
|
+
require("konva");
|
|
16
28
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
29
|
+
//#region ../types/dist/types.js
|
|
30
|
+
const WEAVE_INSTANCE_STATUS = {
|
|
31
|
+
["IDLE"]: "idle",
|
|
32
|
+
["STARTING"]: "starting",
|
|
33
|
+
["LOADING_FONTS"]: "loadingFonts",
|
|
34
|
+
["RUNNING"]: "running"
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
//#endregion
|
|
38
|
+
//#region ../../node_modules/zustand/esm/vanilla.mjs
|
|
39
|
+
const createStoreImpl = (createState) => {
|
|
40
|
+
let state;
|
|
41
|
+
const listeners = /* @__PURE__ */ new Set();
|
|
42
|
+
const setState = (partial, replace) => {
|
|
43
|
+
const nextState = typeof partial === "function" ? partial(state) : partial;
|
|
44
|
+
if (!Object.is(nextState, state)) {
|
|
45
|
+
const previousState = state;
|
|
46
|
+
state = (replace != null ? replace : typeof nextState !== "object" || nextState === null) ? nextState : Object.assign({}, state, nextState);
|
|
47
|
+
listeners.forEach((listener) => listener(state, previousState));
|
|
48
|
+
}
|
|
49
|
+
};
|
|
50
|
+
const getState = () => state;
|
|
51
|
+
const getInitialState = () => initialState;
|
|
52
|
+
const subscribe = (listener) => {
|
|
53
|
+
listeners.add(listener);
|
|
54
|
+
return () => listeners.delete(listener);
|
|
55
|
+
};
|
|
56
|
+
const api = {
|
|
57
|
+
setState,
|
|
58
|
+
getState,
|
|
59
|
+
getInitialState,
|
|
60
|
+
subscribe
|
|
61
|
+
};
|
|
62
|
+
const initialState = state = createState(setState, getState, api);
|
|
63
|
+
return api;
|
|
64
|
+
};
|
|
65
|
+
const createStore = (createState) => createState ? createStoreImpl(createState) : createStoreImpl;
|
|
66
|
+
|
|
67
|
+
//#endregion
|
|
68
|
+
//#region ../../node_modules/zustand/esm/react.mjs
|
|
69
|
+
const identity = (arg) => arg;
|
|
70
|
+
function useStore(api, selector = identity) {
|
|
71
|
+
const slice = react.default.useSyncExternalStore(api.subscribe, () => selector(api.getState()), () => selector(api.getInitialState()));
|
|
72
|
+
react.default.useDebugValue(slice);
|
|
73
|
+
return slice;
|
|
74
|
+
}
|
|
75
|
+
const createImpl = (createState) => {
|
|
76
|
+
const api = createStore(createState);
|
|
77
|
+
const useBoundStore = (selector) => useStore(api, selector);
|
|
78
|
+
Object.assign(useBoundStore, api);
|
|
79
|
+
return useBoundStore;
|
|
80
|
+
};
|
|
81
|
+
const create = (createState) => createState ? createImpl(createState) : createImpl;
|
|
82
|
+
|
|
83
|
+
//#endregion
|
|
84
|
+
//#region src/components/store.tsx
|
|
85
|
+
const useWeave = create()((set) => ({
|
|
86
|
+
instance: null,
|
|
87
|
+
appState: { weave: {} },
|
|
88
|
+
status: WEAVE_INSTANCE_STATUS.IDLE,
|
|
89
|
+
room: { loaded: false },
|
|
90
|
+
connection: { status: "disconnected" },
|
|
91
|
+
users: {},
|
|
92
|
+
undoRedo: {
|
|
93
|
+
canUndo: false,
|
|
94
|
+
canRedo: false
|
|
95
|
+
},
|
|
96
|
+
zoom: {
|
|
97
|
+
value: 1,
|
|
98
|
+
canZoomIn: false,
|
|
99
|
+
canZoomOut: false
|
|
100
|
+
},
|
|
101
|
+
contextMenu: {
|
|
102
|
+
show: false,
|
|
103
|
+
position: {
|
|
104
|
+
x: 0,
|
|
105
|
+
y: 0
|
|
106
|
+
},
|
|
107
|
+
options: []
|
|
108
|
+
},
|
|
109
|
+
selection: {
|
|
110
|
+
nodes: [],
|
|
111
|
+
node: void 0
|
|
112
|
+
},
|
|
113
|
+
actions: {
|
|
114
|
+
active: false,
|
|
115
|
+
actual: void 0
|
|
116
|
+
},
|
|
117
|
+
setInstance: (newInstance) => set((state) => ({
|
|
118
|
+
...state,
|
|
119
|
+
instance: newInstance
|
|
120
|
+
})),
|
|
121
|
+
setStatus: (newStatus) => set((state) => ({
|
|
122
|
+
...state,
|
|
123
|
+
status: newStatus
|
|
124
|
+
})),
|
|
125
|
+
setAppState: (newAppState) => set((state) => ({
|
|
126
|
+
...state,
|
|
127
|
+
appState: newAppState
|
|
128
|
+
})),
|
|
129
|
+
setConnectionStatus: (newConnectionStatus) => set((state) => ({
|
|
130
|
+
...state,
|
|
131
|
+
connection: {
|
|
132
|
+
...state.connection,
|
|
133
|
+
status: newConnectionStatus
|
|
134
|
+
}
|
|
135
|
+
})),
|
|
136
|
+
setRoomLoaded: (newStatus) => set((state) => ({
|
|
137
|
+
...state,
|
|
138
|
+
room: {
|
|
139
|
+
...state.room,
|
|
140
|
+
loaded: newStatus
|
|
141
|
+
}
|
|
142
|
+
})),
|
|
143
|
+
setUsers: (newUsers) => set((state) => ({
|
|
144
|
+
...state,
|
|
145
|
+
users: newUsers
|
|
146
|
+
})),
|
|
147
|
+
setCanUndo: (newCanUndo) => set((state) => ({
|
|
148
|
+
...state,
|
|
149
|
+
undoRedo: {
|
|
150
|
+
...state.undoRedo,
|
|
151
|
+
canUndo: newCanUndo
|
|
152
|
+
}
|
|
153
|
+
})),
|
|
154
|
+
setCanRedo: (newCanRedo) => set((state) => ({
|
|
155
|
+
...state,
|
|
156
|
+
undoRedo: {
|
|
157
|
+
...state.undoRedo,
|
|
158
|
+
canRedo: newCanRedo
|
|
159
|
+
}
|
|
160
|
+
})),
|
|
161
|
+
setZoom: (newZoom) => set((state) => ({
|
|
162
|
+
...state,
|
|
163
|
+
zoom: {
|
|
164
|
+
...state.zoom,
|
|
165
|
+
value: newZoom
|
|
166
|
+
}
|
|
167
|
+
})),
|
|
168
|
+
setCanZoomIn: (newCanZoomIn) => set((state) => ({
|
|
169
|
+
...state,
|
|
170
|
+
zoom: {
|
|
171
|
+
...state.zoom,
|
|
172
|
+
canZoomIn: newCanZoomIn
|
|
173
|
+
}
|
|
174
|
+
})),
|
|
175
|
+
setCanZoomOut: (newCanZoomOut) => set((state) => ({
|
|
176
|
+
...state,
|
|
177
|
+
zoom: {
|
|
178
|
+
...state.zoom,
|
|
179
|
+
canZoomOut: newCanZoomOut
|
|
180
|
+
}
|
|
181
|
+
})),
|
|
182
|
+
setSelectedNodes: (newSelectedNodes) => set((state) => ({
|
|
183
|
+
...state,
|
|
184
|
+
selection: {
|
|
185
|
+
...state.selection,
|
|
186
|
+
nodes: newSelectedNodes
|
|
187
|
+
}
|
|
188
|
+
})),
|
|
189
|
+
setNode: (newNode) => set((state) => ({
|
|
190
|
+
...state,
|
|
191
|
+
selection: {
|
|
192
|
+
...state.selection,
|
|
193
|
+
node: newNode
|
|
194
|
+
}
|
|
195
|
+
})),
|
|
196
|
+
setActualAction: (newActualAction) => set((state) => ({
|
|
197
|
+
...state,
|
|
198
|
+
actions: {
|
|
199
|
+
...state.actions,
|
|
200
|
+
active: typeof newActualAction !== "undefined",
|
|
201
|
+
actual: newActualAction
|
|
202
|
+
}
|
|
203
|
+
}))
|
|
204
|
+
}));
|
|
205
|
+
|
|
206
|
+
//#endregion
|
|
207
|
+
//#region src/components/provider.tsx
|
|
208
|
+
const WeaveProvider = ({ containerId, getUser, store, nodes = [], actions = [], plugins = [], customPlugins = [], fonts = [], callbacks = {}, children }) => {
|
|
209
|
+
const weaveInstanceRef = react.default.useRef(null);
|
|
210
|
+
const selectedNodes = useWeave((state) => state.selection.nodes);
|
|
211
|
+
const setInstance = useWeave((state) => state.setInstance);
|
|
212
|
+
const setAppState = useWeave((state) => state.setAppState);
|
|
213
|
+
const setStatus = useWeave((state) => state.setStatus);
|
|
214
|
+
const setRoomLoaded = useWeave((state) => state.setRoomLoaded);
|
|
215
|
+
const setUsers = useWeave((state) => state.setUsers);
|
|
216
|
+
const setCanUndo = useWeave((state) => state.setCanUndo);
|
|
217
|
+
const setCanRedo = useWeave((state) => state.setCanRedo);
|
|
218
|
+
const setZoom = useWeave((state) => state.setZoom);
|
|
219
|
+
const setCanZoomIn = useWeave((state) => state.setCanZoomIn);
|
|
220
|
+
const setCanZoomOut = useWeave((state) => state.setCanZoomOut);
|
|
221
|
+
const setSelectedNodes = useWeave((state) => state.setSelectedNodes);
|
|
222
|
+
const setNode = useWeave((state) => state.setNode);
|
|
223
|
+
const setActualAction = useWeave((state) => state.setActualAction);
|
|
224
|
+
const { onInstanceStatus, onRoomLoaded, onStateChange, onUndoManagerStatusChange, onActiveActionChange,...restCallbacks } = callbacks;
|
|
225
|
+
const onInstanceStatusHandler = react.default.useCallback(
|
|
226
|
+
(status$1) => {
|
|
227
|
+
setStatus(status$1);
|
|
228
|
+
onInstanceStatus?.(status$1);
|
|
229
|
+
},
|
|
230
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
231
|
+
[]
|
|
232
|
+
);
|
|
233
|
+
const onRoomLoadedHandler = react.default.useCallback(
|
|
234
|
+
(status$1) => {
|
|
235
|
+
setRoomLoaded(status$1);
|
|
236
|
+
onRoomLoaded?.(status$1);
|
|
237
|
+
},
|
|
238
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
239
|
+
[]
|
|
240
|
+
);
|
|
241
|
+
const onStateChangeHandler = react.default.useCallback(
|
|
242
|
+
(state) => {
|
|
243
|
+
setAppState(state);
|
|
244
|
+
onStateChange?.(state);
|
|
245
|
+
},
|
|
246
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
247
|
+
[selectedNodes]
|
|
248
|
+
);
|
|
249
|
+
const onUndoManagerStatusChangeHandler = react.default.useCallback(
|
|
250
|
+
(undoManagerStatus) => {
|
|
251
|
+
const { canUndo, canRedo } = undoManagerStatus;
|
|
252
|
+
setCanUndo(canUndo);
|
|
253
|
+
setCanRedo(canRedo);
|
|
254
|
+
onUndoManagerStatusChange?.(undoManagerStatus);
|
|
255
|
+
},
|
|
256
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
257
|
+
[]
|
|
258
|
+
);
|
|
259
|
+
const onActiveActionChangeHandler = react.default.useCallback(
|
|
260
|
+
(actionName) => {
|
|
261
|
+
setActualAction(actionName);
|
|
262
|
+
onActiveActionChange?.(status);
|
|
263
|
+
},
|
|
264
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
265
|
+
[selectedNodes]
|
|
266
|
+
);
|
|
267
|
+
const onNodesChange = react.default.useCallback((nodes$1) => {
|
|
268
|
+
if (nodes$1.length === 1) setNode(nodes$1[0].node);
|
|
269
|
+
if (nodes$1.length !== 1) setNode(void 0);
|
|
270
|
+
setSelectedNodes(nodes$1);
|
|
271
|
+
}, []);
|
|
272
|
+
react.default.useEffect(() => {
|
|
273
|
+
async function initWeave() {
|
|
274
|
+
const weaveEle = document.getElementById(containerId);
|
|
275
|
+
const weaveEleClientRect = weaveEle?.getBoundingClientRect();
|
|
276
|
+
if (weaveEle && !weaveInstanceRef.current) {
|
|
277
|
+
const instanceNodes = [];
|
|
278
|
+
if (nodes.length > 0) for (const node of nodes) instanceNodes.push(node);
|
|
279
|
+
const instanceActions = [];
|
|
280
|
+
if (actions.length > 0) for (const action of actions) instanceActions.push(action);
|
|
281
|
+
const instancePlugins = [];
|
|
282
|
+
if (plugins.length > 0) for (const plugin of plugins) instancePlugins.push(plugin);
|
|
283
|
+
else {
|
|
284
|
+
instancePlugins.push(new __inditextech_weave_sdk.WeaveStageGridPlugin({}));
|
|
285
|
+
instancePlugins.push(new __inditextech_weave_sdk.WeaveStagePanningPlugin());
|
|
286
|
+
instancePlugins.push(new __inditextech_weave_sdk.WeaveStageResizePlugin());
|
|
287
|
+
instancePlugins.push(new __inditextech_weave_sdk.WeaveStageZoomPlugin({ onZoomChange: (zoomInfo) => {
|
|
288
|
+
setZoom(zoomInfo.scale);
|
|
289
|
+
setCanZoomIn(zoomInfo.canZoomIn);
|
|
290
|
+
setCanZoomOut(zoomInfo.canZoomOut);
|
|
291
|
+
} }));
|
|
292
|
+
instancePlugins.push(new __inditextech_weave_sdk.WeaveNodesSelectionPlugin({ onNodesChange }));
|
|
293
|
+
instancePlugins.push(new __inditextech_weave_sdk.WeaveStageDropAreaPlugin({}));
|
|
294
|
+
instancePlugins.push(new __inditextech_weave_sdk.WeaveConnectedUsersPlugin({
|
|
295
|
+
onConnectedUsersChanged: (users) => {
|
|
296
|
+
setUsers(users);
|
|
297
|
+
},
|
|
298
|
+
getUser
|
|
299
|
+
}));
|
|
300
|
+
instancePlugins.push(new __inditextech_weave_sdk.WeaveUsersPointersPlugin({ getUser }));
|
|
301
|
+
instancePlugins.push(new __inditextech_weave_sdk.WeaveCopyPasteNodesPlugin({}));
|
|
302
|
+
}
|
|
303
|
+
weaveInstanceRef.current = new __inditextech_weave_sdk.Weave({
|
|
304
|
+
store,
|
|
305
|
+
nodes,
|
|
306
|
+
actions,
|
|
307
|
+
plugins: [...instancePlugins, ...customPlugins],
|
|
308
|
+
fonts,
|
|
309
|
+
callbacks: {
|
|
310
|
+
...restCallbacks,
|
|
311
|
+
onInstanceStatus: onInstanceStatusHandler,
|
|
312
|
+
onRoomLoaded: onRoomLoadedHandler,
|
|
313
|
+
onStateChange: onStateChangeHandler,
|
|
314
|
+
onUndoManagerStatusChange: onUndoManagerStatusChangeHandler,
|
|
315
|
+
onActiveActionChange: onActiveActionChangeHandler
|
|
316
|
+
},
|
|
317
|
+
logger: { level: "info" }
|
|
318
|
+
}, {
|
|
319
|
+
container: containerId,
|
|
320
|
+
width: weaveEleClientRect?.width ?? 1920,
|
|
321
|
+
height: weaveEleClientRect?.height ?? 1080
|
|
322
|
+
});
|
|
323
|
+
setInstance(weaveInstanceRef.current);
|
|
324
|
+
weaveInstanceRef.current.start();
|
|
325
|
+
}
|
|
326
|
+
}
|
|
327
|
+
initWeave();
|
|
328
|
+
}, []);
|
|
329
|
+
return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, children);
|
|
330
|
+
};
|
|
331
|
+
|
|
332
|
+
//#endregion
|
|
333
|
+
exports.WeaveProvider = WeaveProvider
|
|
334
|
+
exports.useWeave = useWeave
|