@inditextech/weave-react 0.77.0 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inditextech/weave-react",
-  "version": "0.77.0",
+  "version": "1.0.0",
   "type": "module",
   "license": "Apache-2.0",
   "author": "Jesus Manuel Piñeiro Cid <jesusmpc@inditex.com>",
@@ -32,6 +32,7 @@
     "link": "npm link",
     "lint:fix": "npm run lint -- --fix",
     "lint": "eslint ./src",
+    "pack": "npm pack",
     "publish:snapshot": "npm publish",
     "release:perform": "npm publish --access public",
     "release:prepare": "npm run verify",
@@ -44,11 +45,11 @@
   },
   "dependencies": {
     "@syncedstore/core": "0.6.0",
-    "konva": "9.3.20",
+    "konva": "10.0.2",
     "yjs": "13.6.27"
   },
   "devDependencies": {
-    "@inditextech/weave-sdk": "0.77.0",
+    "@inditextech/weave-sdk": "1.0.0",
     "@types/node": "^22.15.3",
     "@typescript-eslint/eslint-plugin": "8.26.0",
     "@typescript-eslint/parser": "8.26.0",

package/dist/react.cjs

@@ -1,387 +0,0 @@
-"use strict";
-//#region rolldown:runtime
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
-		key = keys[i];
-		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-			get: ((k) => from[k]).bind(null, key),
-			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-		});
-	}
-	return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-	value: mod,
-	enumerable: true
-}) : target, mod));
-
-//#endregion
-const react = __toESM(require("react"));
-const __inditextech_weave_sdk = __toESM(require("@inditextech/weave-sdk"));
-require("konva");
-require("yjs");
-
-//#region ../types/dist/types.js
-const WEAVE_INSTANCE_STATUS = {
-	["IDLE"]: "idle",
-	["STARTING"]: "starting",
-	["LOADING_FONTS"]: "loadingFonts",
-	["CONNECTING_TO_ROOM"]: "connectingToRoom",
-	["CONNECTING_ERROR"]: "connectingError",
-	["LOADING_ROOM"]: "loadingRoom",
-	["RUNNING"]: "running"
-};
-const WEAVE_TRANSFORMER_ANCHORS = {
-	["TOP_LEFT"]: "top-left",
-	["TOP_CENTER"]: "top-center",
-	["TOP_RIGHT"]: "top-right",
-	["MIDDLE_RIGHT"]: "middle-right",
-	["MIDDLE_LEFT"]: "middle-left",
-	["BOTTOM_LEFT"]: "bottom-left",
-	["BOTTOM_CENTER"]: "bottom-center",
-	["BOTTOM_RIGHT"]: "bottom-right"
-};
-const WEAVE_DEFAULT_ENABLED_ANCHORS = Object.values(WEAVE_TRANSFORMER_ANCHORS);
-
-//#endregion
-//#region ../../node_modules/zustand/esm/vanilla.mjs
-const createStoreImpl = (createState) => {
-	let state;
-	const listeners = /* @__PURE__ */ new Set();
-	const setState = (partial, replace) => {
-		const nextState = typeof partial === "function" ? partial(state) : partial;
-		if (!Object.is(nextState, state)) {
-			const previousState = state;
-			state = (replace != null ? replace : typeof nextState !== "object" || nextState === null) ? nextState : Object.assign({}, state, nextState);
-			listeners.forEach((listener) => listener(state, previousState));
-		}
-	};
-	const getState = () => state;
-	const getInitialState = () => initialState;
-	const subscribe = (listener) => {
-		listeners.add(listener);
-		return () => listeners.delete(listener);
-	};
-	const api = {
-		setState,
-		getState,
-		getInitialState,
-		subscribe
-	};
-	const initialState = state = createState(setState, getState, api);
-	return api;
-};
-const createStore = (createState) => createState ? createStoreImpl(createState) : createStoreImpl;
-
-//#endregion
-//#region ../../node_modules/zustand/esm/react.mjs
-const identity = (arg) => arg;
-function useStore(api, selector = identity) {
-	const slice = react.default.useSyncExternalStore(api.subscribe, () => selector(api.getState()), () => selector(api.getInitialState()));
-	react.default.useDebugValue(slice);
-	return slice;
-}
-const createImpl = (createState) => {
-	const api = createStore(createState);
-	const useBoundStore = (selector) => useStore(api, selector);
-	Object.assign(useBoundStore, api);
-	return useBoundStore;
-};
-const create = (createState) => createState ? createImpl(createState) : createImpl;
-
-//#endregion
-//#region src/components/store.tsx
-const useWeave = create()((set) => ({
-	instance: null,
-	appState: { weave: {} },
-	status: WEAVE_INSTANCE_STATUS.IDLE,
-	room: { loaded: false },
-	connection: { status: "disconnected" },
-	users: {},
-	undoRedo: {
-		canUndo: false,
-		canRedo: false
-	},
-	zoom: {
-		value: 1,
-		canZoomIn: false,
-		canZoomOut: false
-	},
-	contextMenu: {
-		show: false,
-		position: {
-			x: 0,
-			y: 0
-		},
-		options: []
-	},
-	selection: {
-		active: false,
-		nodes: [],
-		node: void 0
-	},
-	actions: {
-		active: false,
-		actual: void 0
-	},
-	setInstance: (newInstance) => set((state) => ({
-		...state,
-		instance: newInstance
-	})),
-	setStatus: (newStatus) => set((state) => ({
-		...state,
-		status: newStatus
-	})),
-	setAppState: (newAppState) => set((state) => ({
-		...state,
-		appState: newAppState
-	})),
-	setConnectionStatus: (newConnectionStatus) => set((state) => ({
-		...state,
-		connection: {
-			...state.connection,
-			status: newConnectionStatus
-		}
-	})),
-	setRoomLoaded: (newStatus) => set((state) => ({
-		...state,
-		room: {
-			...state.room,
-			loaded: newStatus
-		}
-	})),
-	setUsers: (newUsers) => set((state) => ({
-		...state,
-		users: newUsers
-	})),
-	setCanUndo: (newCanUndo) => set((state) => ({
-		...state,
-		undoRedo: {
-			...state.undoRedo,
-			canUndo: newCanUndo
-		}
-	})),
-	setCanRedo: (newCanRedo) => set((state) => ({
-		...state,
-		undoRedo: {
-			...state.undoRedo,
-			canRedo: newCanRedo
-		}
-	})),
-	setZoom: (newZoom) => set((state) => ({
-		...state,
-		zoom: {
-			...state.zoom,
-			value: newZoom
-		}
-	})),
-	setCanZoomIn: (newCanZoomIn) => set((state) => ({
-		...state,
-		zoom: {
-			...state.zoom,
-			canZoomIn: newCanZoomIn
-		}
-	})),
-	setCanZoomOut: (newCanZoomOut) => set((state) => ({
-		...state,
-		zoom: {
-			...state.zoom,
-			canZoomOut: newCanZoomOut
-		}
-	})),
-	setSelectionActive: (newSelectionActive) => set((state) => ({
-		...state,
-		selection: {
-			...state.selection,
-			active: newSelectionActive
-		}
-	})),
-	setSelectedNodes: (newSelectedNodes) => set((state) => ({
-		...state,
-		selection: {
-			...state.selection,
-			nodes: newSelectedNodes
-		}
-	})),
-	setNode: (newNode) => set((state) => ({
-		...state,
-		selection: {
-			...state.selection,
-			node: newNode
-		}
-	})),
-	setActualAction: (newActualAction) => set((state) => ({
-		...state,
-		actions: {
-			...state.actions,
-			active: typeof newActualAction !== "undefined",
-			actual: newActualAction
-		}
-	}))
-}));
-
-//#endregion
-//#region src/components/provider.tsx
-const WeaveProvider = ({ getContainer, store, nodes = [], actions = [], plugins = [], customPlugins = [], fonts = [], logLevel = "info", children }) => {
-	const weaveInstanceRef = react.default.useRef(null);
-	const selectedNodes = useWeave((state) => state.selection.nodes);
-	const setInstance = useWeave((state) => state.setInstance);
-	const setAppState = useWeave((state) => state.setAppState);
-	const setStatus = useWeave((state) => state.setStatus);
-	const setRoomLoaded = useWeave((state) => state.setRoomLoaded);
-	const setCanUndo = useWeave((state) => state.setCanUndo);
-	const setCanRedo = useWeave((state) => state.setCanRedo);
-	const setActualAction = useWeave((state) => state.setActualAction);
-	const setConnectionStatus = useWeave((state) => state.setConnectionStatus);
-	const onInstanceStatusHandler = react.default.useCallback(
-		(status) => {
-			setStatus(status);
-		},
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[]
-);
-	const onStoreConnectionStatusChangeHandler = react.default.useCallback(
-		(status) => {
-			setConnectionStatus(status);
-		},
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[]
-);
-	const onRoomLoadedHandler = react.default.useCallback(
-		(status) => {
-			setRoomLoaded(status);
-		},
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[]
-);
-	const onStateChangeHandler = react.default.useCallback(
-		(state) => {
-			setAppState(state);
-		},
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[selectedNodes]
-);
-	const onUndoManagerStatusChangeHandler = react.default.useCallback(
-		(undoManagerStatus) => {
-			const { canUndo, canRedo } = undoManagerStatus;
-			setCanUndo(canUndo);
-			setCanRedo(canRedo);
-		},
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[]
-);
-	const onActiveActionChangeHandler = react.default.useCallback(
-		(actionName) => {
-			setActualAction(actionName);
-		},
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[selectedNodes]
-);
-	react.default.useEffect(() => {
-		async function initWeave() {
-			const weaveEle = getContainer();
-			if (!weaveEle) throw new Error(`Weave container not defined.`);
-			const weaveEleClientRect = weaveEle?.getBoundingClientRect();
-			if (weaveEle && !weaveInstanceRef.current) {
-				const instanceNodes = [];
-				if (nodes.length > 0) for (const node of nodes) instanceNodes.push(node);
-				const instanceActions = [];
-				if (actions.length > 0) for (const action of actions) instanceActions.push(action);
-				const instancePlugins = [];
-				if (plugins.length > 0) for (const plugin of plugins) instancePlugins.push(plugin);
-				weaveInstanceRef.current = new __inditextech_weave_sdk.Weave({
-					store,
-					nodes,
-					actions,
-					plugins: [...instancePlugins, ...customPlugins],
-					fonts,
-					logger: { level: logLevel }
-				}, {
-					container: weaveEle,
-					width: weaveEleClientRect?.width ?? 1920,
-					height: weaveEleClientRect?.height ?? 1080
-				});
-				weaveInstanceRef.current.addEventListener("onInstanceStatus", onInstanceStatusHandler);
-				weaveInstanceRef.current.addEventListener("onStoreConnectionStatusChange", onStoreConnectionStatusChangeHandler);
-				weaveInstanceRef.current.addEventListener("onRoomLoaded", onRoomLoadedHandler);
-				weaveInstanceRef.current.addEventListener("onStateChange", onStateChangeHandler);
-				weaveInstanceRef.current.addEventListener("onUndoManagerStatusChange", onUndoManagerStatusChangeHandler);
-				weaveInstanceRef.current.addEventListener("onActiveActionChange", onActiveActionChangeHandler);
-				setInstance(weaveInstanceRef.current);
-				weaveInstanceRef.current.start();
-			}
-		}
-		setStatus(WEAVE_INSTANCE_STATUS.IDLE);
-		setRoomLoaded(false);
-		initWeave();
-		return () => {
-			weaveInstanceRef.current?.removeEventListener("onInstanceStatus", onInstanceStatusHandler);
-			weaveInstanceRef.current?.removeEventListener("onStoreConnectionStatusChange", onStoreConnectionStatusChangeHandler);
-			weaveInstanceRef.current?.removeEventListener("onRoomLoaded", onRoomLoadedHandler);
-			weaveInstanceRef.current?.removeEventListener("onStateChange", onStateChangeHandler);
-			weaveInstanceRef.current?.removeEventListener("onUndoManagerStatusChange", onUndoManagerStatusChangeHandler);
-			weaveInstanceRef.current?.removeEventListener("onActiveActionChange", onActiveActionChangeHandler);
-			weaveInstanceRef.current?.destroy();
-			weaveInstanceRef.current = null;
-		};
-	}, []);
-	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, children);
-};
-
-//#endregion
-//#region src/hooks/events.tsx
-const useWeaveEvents = () => {
-	const instance = useWeave((state) => state.instance);
-	const node = useWeave((state) => state.selection.node);
-	const setZoom = useWeave((state) => state.setZoom);
-	const setCanZoomIn = useWeave((state) => state.setCanZoomIn);
-	const setCanZoomOut = useWeave((state) => state.setCanZoomOut);
-	const setSelectionActive = useWeave((state) => state.setSelectionActive);
-	const setSelectedNodes = useWeave((state) => state.setSelectedNodes);
-	const setNode = useWeave((state) => state.setNode);
-	const setUsers = useWeave((state) => state.setUsers);
-	const onSelectionStateHandler = react.default.useCallback((active) => {
-		setSelectionActive(active);
-	}, []);
-	const onZoomChangeHandler = react.default.useCallback(
-		(zoomInfo) => {
-			setZoom(zoomInfo.scale);
-			setCanZoomIn(zoomInfo.canZoomIn);
-			setCanZoomOut(zoomInfo.canZoomOut);
-		},
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[]
-);
-	const onNodesChangeHandler = react.default.useCallback((nodes) => {
-		if (nodes.length === 1 && node?.key !== nodes[0].node?.key) setNode(nodes[0].node);
-		if (nodes.length === 0) setNode(void 0);
-		setSelectedNodes(nodes);
-	}, [node]);
-	const onConnectedUsersChangedHandler = react.default.useCallback((users) => {
-		setUsers(users);
-	}, []);
-	react.default.useEffect(() => {
-		if (!instance) return;
-		instance.addEventListener("onSelectionState", onSelectionStateHandler);
-		instance.addEventListener("onZoomChange", onZoomChangeHandler);
-		instance.addEventListener("onNodesChange", onNodesChangeHandler);
-		instance.addEventListener("onConnectedUsersChange", onConnectedUsersChangedHandler);
-		return () => {
-			instance.removeEventListener("onSelectionState", onSelectionStateHandler);
-			instance.removeEventListener("onZoomChange", onZoomChangeHandler);
-			instance.removeEventListener("onNodesChange", onNodesChangeHandler);
-			instance.removeEventListener("onConnectedUsersChange", onConnectedUsersChangedHandler);
-		};
-	}, [instance]);
-};
-
-//#endregion
-exports.WeaveProvider = WeaveProvider
-exports.useWeave = useWeave
-exports.useWeaveEvents = useWeaveEvents

package/dist/react.d.cts

@@ -1,133 +0,0 @@
-import React from "react";
-import { Weave, WeaveAction, WeaveConnectedUsers, WeaveNode, WeavePlugin, WeaveStore } from "@inditextech/weave-sdk";
-import Konva from "konva";
-import "yjs";
-import "konva/lib/types";
-import { StoreApi, UseBoundStore } from "zustand";
-
-//#region ../types/dist/types.d.ts
-
-type WeaveStatusKeys = keyof typeof WEAVE_INSTANCE_STATUS;
-type WeaveStatus = (typeof WEAVE_INSTANCE_STATUS)[WeaveStatusKeys];
-type WeaveElementAttributes = {
-  [key: string]: any;
-  id?: string;
-  nodeType?: string;
-  children?: WeaveStateElement[];
-};
-type WeaveStateElement = {
-  key: string;
-  type: string;
-  props: WeaveElementAttributes;
-};
-type WeaveState = {
-  weave: {
-    key: "stage";
-    type: "stage";
-    props: {
-      [key: string]: unknown;
-      id: "stage";
-      children: WeaveStateElement[];
-    };
-  } | Record<string, WeaveStateElement>;
-};
-type WeaveSelection = {
-  instance: Konva.Shape | Konva.Group;
-  node: WeaveStateElement | undefined;
-};
-type WeaveFont = {
-  id: string;
-  name: string;
-  offsetX?: number;
-  offsetY?: number;
-};
-declare const WEAVE_INSTANCE_STATUS: {
-  readonly "IDLE": "idle";
-  readonly "STARTING": "starting";
-  readonly "LOADING_FONTS": "loadingFonts";
-  readonly "CONNECTING_TO_ROOM": "connectingToRoom";
-  readonly "CONNECTING_ERROR": "connectingError";
-  readonly "LOADING_ROOM": "loadingRoom";
-  readonly "RUNNING": "running";
-}; //#endregion
-//#region src/components/provider.d.ts
-type WeaveProviderType = {
-  getContainer: () => HTMLElement;
-  fonts?: WeaveFont[] | (() => Promise<WeaveFont[]>);
-  store: WeaveStore;
-  nodes?: WeaveNode[];
-  actions?: WeaveAction[];
-  plugins?: WeavePlugin[];
-  customNodes?: WeaveNode[];
-  customActions?: WeaveAction[];
-  customPlugins?: WeavePlugin[];
-  children: React.ReactNode;
-  logLevel?: "debug" | "info" | "warn" | "error";
-};
-declare const WeaveProvider: ({
-  getContainer,
-  store,
-  nodes,
-  actions,
-  plugins,
-  customPlugins,
-  fonts,
-  logLevel,
-  children
-}: Readonly<WeaveProviderType>) => React.JSX.Element;
-
-//#endregion
-//#region src/components/store.d.ts
-interface WeaveRuntimeState {
-  instance: Weave | null;
-  appState: WeaveState;
-  status: WeaveStatus;
-  connection: {
-    status: string;
-  };
-  room: {
-    loaded: boolean;
-  };
-  users: WeaveConnectedUsers;
-  undoRedo: {
-    canUndo: boolean;
-    canRedo: boolean;
-  };
-  zoom: {
-    value: number;
-    canZoomIn: boolean;
-    canZoomOut: boolean;
-  };
-  selection: {
-    active: boolean;
-    nodes: WeaveSelection[];
-    node: WeaveStateElement | undefined;
-  };
-  actions: {
-    active: boolean;
-    actual: string | undefined;
-  };
-  setInstance: (newInstance: Weave | null) => void;
-  setStatus: (newStatus: WeaveStatus) => void;
-  setAppState: (newAppState: WeaveState) => void;
-  setConnectionStatus: (newConnectionStatus: string) => void;
-  setRoomLoaded: (newStatus: boolean) => void;
-  setUsers: (newUsers: WeaveConnectedUsers) => void;
-  setCanUndo: (newCanUndo: boolean) => void;
-  setCanRedo: (newCanRedo: boolean) => void;
-  setZoom: (newZoom: number) => void;
-  setCanZoomIn: (newCanZoomIn: boolean) => void;
-  setCanZoomOut: (newCanZoomOut: boolean) => void;
-  setSelectionActive: (newSelectionActive: boolean) => void;
-  setSelectedNodes: (newSelectedNodes: WeaveSelection[]) => void;
-  setNode: (newNode: WeaveStateElement | undefined) => void;
-  setActualAction: (newActualAction: string | undefined) => void;
-}
-declare const useWeave: UseBoundStore<StoreApi<WeaveRuntimeState>>;
-
-//#endregion
-//#region src/hooks/events.d.ts
-declare const useWeaveEvents: () => void;
-
-//#endregion
-export { WeaveProvider, useWeave, useWeaveEvents };