@inditextech/weave-react 0.8.0 → 0.9.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/react.cjs +51 -25
  2. package/dist/react.d.cts +8 -4
  3. package/dist/react.d.ts +8 -4
  4. package/dist/react.js +51 -26
  5. package/package.json +2 -2
package/dist/react.cjs CHANGED
@@ -213,14 +213,8 @@ const WeaveProvider = ({ containerId, getUser, store, nodes = [], actions = [],
213
213
  const setAppState = useWeave((state) => state.setAppState);
214
214
  const setStatus = useWeave((state) => state.setStatus);
215
215
  const setRoomLoaded = useWeave((state) => state.setRoomLoaded);
216
- const setUsers = useWeave((state) => state.setUsers);
217
216
  const setCanUndo = useWeave((state) => state.setCanUndo);
218
217
  const setCanRedo = useWeave((state) => state.setCanRedo);
219
- const setZoom = useWeave((state) => state.setZoom);
220
- const setCanZoomIn = useWeave((state) => state.setCanZoomIn);
221
- const setCanZoomOut = useWeave((state) => state.setCanZoomOut);
222
- const setSelectedNodes = useWeave((state) => state.setSelectedNodes);
223
- const setNode = useWeave((state) => state.setNode);
224
218
  const setActualAction = useWeave((state) => state.setActualAction);
225
219
  const { onInstanceStatus, onRoomLoaded, onStateChange, onUndoManagerStatusChange, onActiveActionChange,...restCallbacks } = callbacks;
226
220
  const onInstanceStatusHandler = react.default.useCallback(
@@ -265,11 +259,6 @@ const WeaveProvider = ({ containerId, getUser, store, nodes = [], actions = [],
265
259
  // eslint-disable-next-line react-hooks/exhaustive-deps
266
260
  [selectedNodes]
267
261
  );
268
- const onNodesChange = react.default.useCallback((nodes$1) => {
269
- if (nodes$1.length === 1) setNode(nodes$1[0].node);
270
- if (nodes$1.length !== 1) setNode(void 0);
271
- setSelectedNodes(nodes$1);
272
- }, []);
273
262
  react.default.useEffect(() => {
274
263
  async function initWeave() {
275
264
  const weaveEle = document.getElementById(containerId);
@@ -285,21 +274,17 @@ const WeaveProvider = ({ containerId, getUser, store, nodes = [], actions = [],
285
274
  instancePlugins.push(new __inditextech_weave_sdk.WeaveStageGridPlugin());
286
275
  instancePlugins.push(new __inditextech_weave_sdk.WeaveStagePanningPlugin());
287
276
  instancePlugins.push(new __inditextech_weave_sdk.WeaveStageResizePlugin());
288
- instancePlugins.push(new __inditextech_weave_sdk.WeaveStageZoomPlugin({ callbacks: { onZoomChange: (zoomInfo) => {
289
- setZoom(zoomInfo.scale);
290
- setCanZoomIn(zoomInfo.canZoomIn);
291
- setCanZoomOut(zoomInfo.canZoomOut);
292
- } } }));
293
- instancePlugins.push(new __inditextech_weave_sdk.WeaveNodesSelectionPlugin({ callbacks: { onNodesChange } }));
277
+ instancePlugins.push(new __inditextech_weave_sdk.WeaveStageZoomPlugin());
278
+ instancePlugins.push(new __inditextech_weave_sdk.WeaveNodesSelectionPlugin());
279
+ instancePlugins.push(new __inditextech_weave_sdk.WeaveNodesSnappingPlugin());
294
280
  instancePlugins.push(new __inditextech_weave_sdk.WeaveStageDropAreaPlugin());
295
- instancePlugins.push(new __inditextech_weave_sdk.WeaveConnectedUsersPlugin({
296
- config: { getUser },
297
- callbacks: { onConnectedUsersChanged: (users) => {
298
- setUsers(users);
299
- } }
300
- }));
301
- instancePlugins.push(new __inditextech_weave_sdk.WeaveUsersPointersPlugin({ config: { getUser } }));
302
281
  instancePlugins.push(new __inditextech_weave_sdk.WeaveCopyPasteNodesPlugin());
282
+ instancePlugins.push(new __inditextech_weave_sdk.WeaveConnectedUsersPlugin({ config: { getUser } }));
283
+ instancePlugins.push(new __inditextech_weave_sdk.WeaveUsersPointersPlugin({ config: { getUser } }));
284
+ instancePlugins.push(new __inditextech_weave_sdk.WeaveContextMenuPlugin({ config: {
285
+ xOffset: 10,
286
+ yOffset: 10
287
+ } }));
303
288
  }
304
289
  weaveInstanceRef.current = new __inditextech_weave_sdk.Weave({
305
290
  store,
@@ -330,6 +315,47 @@ const WeaveProvider = ({ containerId, getUser, store, nodes = [], actions = [],
330
315
  return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, children);
331
316
  };
332
317
 
318
+ //#endregion
319
+ //#region src/hooks/events.tsx
320
+ const useWeaveEvents = () => {
321
+ const instance = useWeave((state) => state.instance);
322
+ const setZoom = useWeave((state) => state.setZoom);
323
+ const setCanZoomIn = useWeave((state) => state.setCanZoomIn);
324
+ const setCanZoomOut = useWeave((state) => state.setCanZoomOut);
325
+ const setSelectedNodes = useWeave((state) => state.setSelectedNodes);
326
+ const setNode = useWeave((state) => state.setNode);
327
+ const setUsers = useWeave((state) => state.setUsers);
328
+ const onZoomChangeHandler = react.default.useCallback(
329
+ (zoomInfo) => {
330
+ setZoom(zoomInfo.scale);
331
+ setCanZoomIn(zoomInfo.canZoomIn);
332
+ setCanZoomOut(zoomInfo.canZoomOut);
333
+ },
334
+ // eslint-disable-next-line react-hooks/exhaustive-deps
335
+ []
336
+ );
337
+ const onNodesChangeHandler = react.default.useCallback((nodes) => {
338
+ if (nodes.length === 1) setNode(nodes[0].node);
339
+ if (nodes.length !== 1) setNode(void 0);
340
+ setSelectedNodes(nodes);
341
+ }, []);
342
+ const onConnectedUsersChangedHandler = react.default.useCallback((users) => {
343
+ setUsers(users);
344
+ }, []);
345
+ react.default.useEffect(() => {
346
+ if (!instance) return;
347
+ instance.addEventListener("onZoomChange", onZoomChangeHandler);
348
+ instance.addEventListener("onNodesChange", onNodesChangeHandler);
349
+ instance.addEventListener("onConnectedUsersChange", onConnectedUsersChangedHandler);
350
+ return () => {
351
+ instance.removeEventListener("onZoomChange", onZoomChangeHandler);
352
+ instance.removeEventListener("onNodesChange", onNodesChangeHandler);
353
+ instance.removeEventListener("onConnectedUsersChange", onConnectedUsersChangedHandler);
354
+ };
355
+ }, [instance]);
356
+ };
357
+
333
358
  //#endregion
334
359
  exports.WeaveProvider = WeaveProvider
335
- exports.useWeave = useWeave
360
+ exports.useWeave = useWeave
361
+ exports.useWeaveEvents = useWeaveEvents
package/dist/react.d.cts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from "react";
2
- import { Weave, WeaveAction, WeaveConnectedUsersChanged, WeaveNode, WeavePlugin, WeaveStore } from "@inditextech/weave-sdk";
2
+ import { Weave, WeaveAction, WeaveConnectedUsers, WeaveNode, WeavePlugin, WeaveStore } from "@inditextech/weave-sdk";
3
3
  import Konva from "konva";
4
4
  import "yjs";
5
5
  import "konva/lib/types";
@@ -103,7 +103,7 @@ interface WeaveRuntimeState {
103
103
  room: {
104
104
  loaded: boolean;
105
105
  };
106
- users: WeaveConnectedUsersChanged;
106
+ users: WeaveConnectedUsers;
107
107
  undoRedo: {
108
108
  canUndo: boolean;
109
109
  canRedo: boolean;
@@ -126,7 +126,7 @@ interface WeaveRuntimeState {
126
126
  setAppState: (newAppState: WeaveState) => void;
127
127
  setConnectionStatus: (newConnectionStatus: string) => void;
128
128
  setRoomLoaded: (newStatus: boolean) => void;
129
- setUsers: (newUsers: WeaveConnectedUsersChanged) => void;
129
+ setUsers: (newUsers: WeaveConnectedUsers) => void;
130
130
  setCanUndo: (newCanUndo: boolean) => void;
131
131
  setCanRedo: (newCanRedo: boolean) => void;
132
132
  setZoom: (newZoom: number) => void;
@@ -139,4 +139,8 @@ interface WeaveRuntimeState {
139
139
  declare const useWeave: UseBoundStore<StoreApi<WeaveRuntimeState>>;
140
140
 
141
141
  //#endregion
142
- export { WeaveProvider, useWeave };
142
+ //#region src/hooks/events.d.ts
143
+ declare const useWeaveEvents: () => void;
144
+
145
+ //#endregion
146
+ export { WeaveProvider, useWeave, useWeaveEvents };
package/dist/react.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from "react";
2
- import { Weave, WeaveAction, WeaveConnectedUsersChanged, WeaveNode, WeavePlugin, WeaveStore } from "@inditextech/weave-sdk";
2
+ import { Weave, WeaveAction, WeaveConnectedUsers, WeaveNode, WeavePlugin, WeaveStore } from "@inditextech/weave-sdk";
3
3
  import Konva from "konva";
4
4
  import "yjs";
5
5
  import "konva/lib/types";
@@ -103,7 +103,7 @@ interface WeaveRuntimeState {
103
103
  room: {
104
104
  loaded: boolean;
105
105
  };
106
- users: WeaveConnectedUsersChanged;
106
+ users: WeaveConnectedUsers;
107
107
  undoRedo: {
108
108
  canUndo: boolean;
109
109
  canRedo: boolean;
@@ -126,7 +126,7 @@ interface WeaveRuntimeState {
126
126
  setAppState: (newAppState: WeaveState) => void;
127
127
  setConnectionStatus: (newConnectionStatus: string) => void;
128
128
  setRoomLoaded: (newStatus: boolean) => void;
129
- setUsers: (newUsers: WeaveConnectedUsersChanged) => void;
129
+ setUsers: (newUsers: WeaveConnectedUsers) => void;
130
130
  setCanUndo: (newCanUndo: boolean) => void;
131
131
  setCanRedo: (newCanRedo: boolean) => void;
132
132
  setZoom: (newZoom: number) => void;
@@ -139,4 +139,8 @@ interface WeaveRuntimeState {
139
139
  declare const useWeave: UseBoundStore<StoreApi<WeaveRuntimeState>>;
140
140
 
141
141
  //#endregion
142
- export { WeaveProvider, useWeave };
142
+ //#region src/hooks/events.d.ts
143
+ declare const useWeaveEvents: () => void;
144
+
145
+ //#endregion
146
+ export { WeaveProvider, useWeave, useWeaveEvents };
package/dist/react.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from "react";
2
- import { Weave, WeaveAction, WeaveConnectedUsersPlugin, WeaveCopyPasteNodesPlugin, WeaveNode, WeaveNodesSelectionPlugin, WeavePlugin, WeaveStageDropAreaPlugin, WeaveStageGridPlugin, WeaveStagePanningPlugin, WeaveStageResizePlugin, WeaveStageZoomPlugin, WeaveStore, WeaveUsersPointersPlugin } from "@inditextech/weave-sdk";
2
+ import { Weave, WeaveAction, WeaveConnectedUsersPlugin, WeaveContextMenuPlugin, WeaveCopyPasteNodesPlugin, WeaveNode, WeaveNodesSelectionPlugin, WeaveNodesSnappingPlugin, WeavePlugin, WeaveStageDropAreaPlugin, WeaveStageGridPlugin, WeaveStagePanningPlugin, WeaveStageResizePlugin, WeaveStageZoomPlugin, WeaveStore, WeaveUsersPointersPlugin } from "@inditextech/weave-sdk";
3
3
  import Konva from "konva";
4
4
  import "yjs";
5
5
 
@@ -189,14 +189,8 @@ const WeaveProvider = ({ containerId, getUser, store, nodes = [], actions = [],
189
189
  const setAppState = useWeave((state) => state.setAppState);
190
190
  const setStatus = useWeave((state) => state.setStatus);
191
191
  const setRoomLoaded = useWeave((state) => state.setRoomLoaded);
192
- const setUsers = useWeave((state) => state.setUsers);
193
192
  const setCanUndo = useWeave((state) => state.setCanUndo);
194
193
  const setCanRedo = useWeave((state) => state.setCanRedo);
195
- const setZoom = useWeave((state) => state.setZoom);
196
- const setCanZoomIn = useWeave((state) => state.setCanZoomIn);
197
- const setCanZoomOut = useWeave((state) => state.setCanZoomOut);
198
- const setSelectedNodes = useWeave((state) => state.setSelectedNodes);
199
- const setNode = useWeave((state) => state.setNode);
200
194
  const setActualAction = useWeave((state) => state.setActualAction);
201
195
  const { onInstanceStatus, onRoomLoaded, onStateChange, onUndoManagerStatusChange, onActiveActionChange,...restCallbacks } = callbacks;
202
196
  const onInstanceStatusHandler = React.useCallback(
@@ -241,11 +235,6 @@ const WeaveProvider = ({ containerId, getUser, store, nodes = [], actions = [],
241
235
  // eslint-disable-next-line react-hooks/exhaustive-deps
242
236
  [selectedNodes]
243
237
  );
244
- const onNodesChange = React.useCallback((nodes$1) => {
245
- if (nodes$1.length === 1) setNode(nodes$1[0].node);
246
- if (nodes$1.length !== 1) setNode(void 0);
247
- setSelectedNodes(nodes$1);
248
- }, []);
249
238
  React.useEffect(() => {
250
239
  async function initWeave() {
251
240
  const weaveEle = document.getElementById(containerId);
@@ -261,21 +250,17 @@ const WeaveProvider = ({ containerId, getUser, store, nodes = [], actions = [],
261
250
  instancePlugins.push(new WeaveStageGridPlugin());
262
251
  instancePlugins.push(new WeaveStagePanningPlugin());
263
252
  instancePlugins.push(new WeaveStageResizePlugin());
264
- instancePlugins.push(new WeaveStageZoomPlugin({ callbacks: { onZoomChange: (zoomInfo) => {
265
- setZoom(zoomInfo.scale);
266
- setCanZoomIn(zoomInfo.canZoomIn);
267
- setCanZoomOut(zoomInfo.canZoomOut);
268
- } } }));
269
- instancePlugins.push(new WeaveNodesSelectionPlugin({ callbacks: { onNodesChange } }));
253
+ instancePlugins.push(new WeaveStageZoomPlugin());
254
+ instancePlugins.push(new WeaveNodesSelectionPlugin());
255
+ instancePlugins.push(new WeaveNodesSnappingPlugin());
270
256
  instancePlugins.push(new WeaveStageDropAreaPlugin());
271
- instancePlugins.push(new WeaveConnectedUsersPlugin({
272
- config: { getUser },
273
- callbacks: { onConnectedUsersChanged: (users) => {
274
- setUsers(users);
275
- } }
276
- }));
277
- instancePlugins.push(new WeaveUsersPointersPlugin({ config: { getUser } }));
278
257
  instancePlugins.push(new WeaveCopyPasteNodesPlugin());
258
+ instancePlugins.push(new WeaveConnectedUsersPlugin({ config: { getUser } }));
259
+ instancePlugins.push(new WeaveUsersPointersPlugin({ config: { getUser } }));
260
+ instancePlugins.push(new WeaveContextMenuPlugin({ config: {
261
+ xOffset: 10,
262
+ yOffset: 10
263
+ } }));
279
264
  }
280
265
  weaveInstanceRef.current = new Weave({
281
266
  store,
@@ -307,4 +292,44 @@ const WeaveProvider = ({ containerId, getUser, store, nodes = [], actions = [],
307
292
  };
308
293
 
309
294
  //#endregion
310
- export { WeaveProvider, useWeave };
295
+ //#region src/hooks/events.tsx
296
+ const useWeaveEvents = () => {
297
+ const instance = useWeave((state) => state.instance);
298
+ const setZoom = useWeave((state) => state.setZoom);
299
+ const setCanZoomIn = useWeave((state) => state.setCanZoomIn);
300
+ const setCanZoomOut = useWeave((state) => state.setCanZoomOut);
301
+ const setSelectedNodes = useWeave((state) => state.setSelectedNodes);
302
+ const setNode = useWeave((state) => state.setNode);
303
+ const setUsers = useWeave((state) => state.setUsers);
304
+ const onZoomChangeHandler = React.useCallback(
305
+ (zoomInfo) => {
306
+ setZoom(zoomInfo.scale);
307
+ setCanZoomIn(zoomInfo.canZoomIn);
308
+ setCanZoomOut(zoomInfo.canZoomOut);
309
+ },
310
+ // eslint-disable-next-line react-hooks/exhaustive-deps
311
+ []
312
+ );
313
+ const onNodesChangeHandler = React.useCallback((nodes) => {
314
+ if (nodes.length === 1) setNode(nodes[0].node);
315
+ if (nodes.length !== 1) setNode(void 0);
316
+ setSelectedNodes(nodes);
317
+ }, []);
318
+ const onConnectedUsersChangedHandler = React.useCallback((users) => {
319
+ setUsers(users);
320
+ }, []);
321
+ React.useEffect(() => {
322
+ if (!instance) return;
323
+ instance.addEventListener("onZoomChange", onZoomChangeHandler);
324
+ instance.addEventListener("onNodesChange", onNodesChangeHandler);
325
+ instance.addEventListener("onConnectedUsersChange", onConnectedUsersChangedHandler);
326
+ return () => {
327
+ instance.removeEventListener("onZoomChange", onZoomChangeHandler);
328
+ instance.removeEventListener("onNodesChange", onNodesChangeHandler);
329
+ instance.removeEventListener("onConnectedUsersChange", onConnectedUsersChangedHandler);
330
+ };
331
+ }, [instance]);
332
+ };
333
+
334
+ //#endregion
335
+ export { WeaveProvider, useWeave, useWeaveEvents };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@inditextech/weave-react",
3
- "version": "0.8.0",
3
+ "version": "0.9.1",
4
4
  "type": "module",
5
5
  "license": "Apache-2.0",
6
6
  "author": "Jesus Manuel Piñeiro Cid <jesusmpc@inditex.com>",
@@ -48,7 +48,7 @@
48
48
  "yjs": "13.6.26"
49
49
  },
50
50
  "devDependencies": {
51
- "@inditextech/weave-sdk": "0.8.0",
51
+ "@inditextech/weave-sdk": "0.9.1",
52
52
  "@types/node": "^22.15.3",
53
53
  "@typescript-eslint/eslint-plugin": "8.26.0",
54
54
  "@typescript-eslint/parser": "8.26.0",