From 3da432ad0664db7bc5ecb67a6fcffcc26cdc3acd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesus=20Manuel=20Pi=C3=B1eiro=20Cid?= Date: Tue, 11 Mar 2025 15:49:32 +0100 Subject: [PATCH 1/2] chore: initial commit From 57b45375dcf875046b1a196aa77473b72767358c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesus=20Manuel=20Pi=C3=B1eiro=20Cid?= Date: Tue, 11 Mar 2025 17:06:19 +0100 Subject: [PATCH 2/2] feat: update context-menu styles --- .../room-components/context-menu.tsx | 36 ++++++++++---- code/components/room/room.layout.tsx | 16 +++--- code/components/room/room.tsx | 37 ++++++++++++-- code/package-lock.json | 32 ++++++------ code/store/store.ts | 49 +++++++++++++++---- 5 files changed, 121 insertions(+), 49 deletions(-) diff --git a/code/components/room-components/context-menu.tsx b/code/components/room-components/context-menu.tsx index 12cd8ec..cc7de3d 100644 --- a/code/components/room-components/context-menu.tsx +++ b/code/components/room-components/context-menu.tsx @@ -5,6 +5,7 @@ import { cn } from "@/lib/utils"; type ContextMenuButtonProps = { label: React.ReactNode; + icon?: React.ReactNode; disabled?: boolean; onClick: () => void; }; @@ -16,6 +17,7 @@ export type ContextMenuOption = { | { type: "button"; label: string; + icon?: React.ReactNode; disabled?: boolean; onClick: () => void; } @@ -31,22 +33,35 @@ type ContextMenuProps = { options: ContextMenuOption[]; }; -function ContextMenuButton({ label, disabled, onClick }: Readonly) { +function ContextMenuButton({ + label, + icon, + disabled, + onClick, +}: Readonly) { return ( ); } -export const ContextMenu = ({ show, onChanged, position, options }: Readonly) => { +export const ContextMenuRender = ({ + show, + onChanged, + position, + options, +}: Readonly) => { const ref = React.useRef(null); React.useEffect(() => { @@ -68,7 +83,7 @@ export const ContextMenu = ({ show, onChanged, position, options }: Readonly ); } if (option.type === "divider") { - return
; + return ( +
+ ); } })} diff --git a/code/components/room/room.layout.tsx b/code/components/room/room.layout.tsx index 50cc7f7..3bf24d2 100644 --- a/code/components/room/room.layout.tsx +++ b/code/components/room/room.layout.tsx @@ -2,13 +2,12 @@ import { Hourglass } from "lucide-react"; import React from "react"; -import { ContextMenu } from "@/components/room-components/context-menu"; +import { ContextMenuRender } from "@/components/room-components/context-menu"; import { useCollaborationRoom } from "@/store/store"; import { RoomInformationOverlay } from "@/components/room-components/overlay/room-information-overlay"; import { RoomStatusOverlay } from "@/components/room-components/overlay/room-status-overlay"; import { ToolsOverlay } from "@/components/room-components/overlay/tools-overlay"; import { MultiuseOverlay } from "@/components/room-components/overlay/multiuse-overlay"; -// import { OperationsOverlay } from "@/components/room-components/overlay/operations-overlay"; import { useWeave } from "@inditextech/weavejs-react"; import { RoomLoader } from "../room-components/room-loader"; import { WEAVE_INSTANCE_STATUS } from "@inditextech/weavejs-sdk"; @@ -92,13 +91,7 @@ export const RoomLayout = () => { )} {status === WEAVE_INSTANCE_STATUS.RUNNING && roomLoaded && ( <> - - - - - {/* */} - - { setContextMenuShow(show); @@ -106,6 +99,11 @@ export const RoomLayout = () => { position={contextMenuPosition} options={contextMenuOptions} /> + + + + + {uploadingImage && (
diff --git a/code/components/room/room.tsx b/code/components/room/room.tsx index 953d46e..aa7d971 100644 --- a/code/components/room/room.tsx +++ b/code/components/room/room.tsx @@ -28,7 +28,10 @@ import { WeaveSelection, } from "@inditextech/weavejs-sdk"; // import { WeaveStoreWebsocketsConnectionStatus, WeaveStoreWebsockets } from "@inditextech/weavejs-store-websockets"; -import { WeaveStoreAzureWebPubsubConnectionStatus, WeaveStoreAzureWebPubsub } from "@inditextech/weavejs-store-azure-web-pubsub"; +import { + WeaveStoreAzureWebPubsubConnectionStatus, + WeaveStoreAzureWebPubsub, +} from "@inditextech/weavejs-store-azure-web-pubsub"; import { PantoneNode } from "@/components/nodes/pantone/pantone"; import { PantoneToolAction } from "@/components/actions/pantone-tool/pantone-tool"; import { WorkspaceNode } from "@/components/nodes/workspace/workspace"; @@ -39,6 +42,17 @@ import { useWeave, WeaveProvider } from "@inditextech/weavejs-react"; import { RoomLayout } from "./room.layout"; import { AlignElementsToolAction } from "@/components/actions/align-elements-tool/align-elements-tool"; import { RoomLoader } from "../room-components/room-loader"; +import { + Copy, + Clipboard, + Group, + Ungroup, + Trash, + SendToBack, + BringToFront, + ArrowUp, + ArrowDown, +} from "lucide-react"; export const Room = () => { const params = useParams<{ roomId: string }>(); @@ -52,8 +66,12 @@ export const Room = () => { const user = useCollaborationRoom((state) => state.user); const setRoom = useCollaborationRoom((state) => state.setRoom); const setUser = useCollaborationRoom((state) => state.setUser); - const setFetchConnectionUrlLoading = useCollaborationRoom((state) => state.setFetchConnectionUrlLoading); - const setFetchConnectionUrlError = useCollaborationRoom((state) => state.setFetchConnectionUrlError); + const setFetchConnectionUrlLoading = useCollaborationRoom( + (state) => state.setFetchConnectionUrlLoading + ); + const setFetchConnectionUrlError = useCollaborationRoom( + (state) => state.setFetchConnectionUrlError + ); const setContextMenuShow = useCollaborationRoom( (state) => state.setContextMenuShow @@ -94,7 +112,7 @@ export const Room = () => { setFetchConnectionUrlError(error); }, // eslint-disable-next-line react-hooks/exhaustive-deps - [], + [] ); const onConnectionStatusChangeHandler = React.useCallback( @@ -102,7 +120,7 @@ export const Room = () => { setConnectionStatus(status); }, // eslint-disable-next-line react-hooks/exhaustive-deps - [], + [] ); // const onConnectionStatusChangeHandler = React.useCallback( @@ -235,6 +253,7 @@ export const Room = () => { id: "copy", type: "button", label: "Copy", + icon: , disabled: actIsActionActive || !actCanCopy, onClick: () => { const weaveCopyPasteNodesPlugin = @@ -250,6 +269,7 @@ export const Room = () => { id: "paste", type: "button", label: "Paste", + icon: , disabled: actIsActionActive || !actCanPaste, onClick: () => { const weaveCopyPasteNodesPlugin = @@ -269,6 +289,7 @@ export const Room = () => { id: "bring-to-front", type: "button", label: "Bring to front", + icon: , disabled: nodes.length !== 1, onClick: () => { actInstance.bringToFront(nodes[0].instance); @@ -278,6 +299,7 @@ export const Room = () => { id: "move-up", type: "button", label: "Move up", + icon: , disabled: nodes.length !== 1, onClick: () => { actInstance.moveUp(nodes[0].instance); @@ -287,6 +309,7 @@ export const Room = () => { id: "move-down", type: "button", label: "Move down", + icon: , disabled: nodes.length !== 1, onClick: () => { actInstance.moveDown(nodes[0].instance); @@ -296,6 +319,7 @@ export const Room = () => { id: "send-to-back", type: "button", label: "Send to back", + icon: , disabled: nodes.length !== 1, onClick: () => { actInstance.sendToBack(nodes[0].instance); @@ -309,6 +333,7 @@ export const Room = () => { id: "group", type: "button", label: "Group", + icon: , disabled: !canGroup, onClick: () => { actInstance.group(nodes.map((n) => n.node)); @@ -318,6 +343,7 @@ export const Room = () => { id: "ungroup", type: "button", label: "Ungroup", + icon: , disabled: !canUnGroup, onClick: () => { actInstance.unGroup(nodes[0].node); @@ -331,6 +357,7 @@ export const Room = () => { id: "delete", type: "button", label: "Delete", + icon: , onClick: () => { for (const node of nodes) { actInstance.removeNode(node.node); diff --git a/code/package-lock.json b/code/package-lock.json index 417ef29..ffece2a 100644 --- a/code/package-lock.json +++ b/code/package-lock.json @@ -6181,12 +6181,12 @@ } }, "node_modules/framer-motion": { - "version": "12.4.13", - "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.4.13.tgz", - "integrity": "sha512-JHSXIdL7WOTCSEb2UUurHURV85pWTn6UIg+iWLBhH5SFndbjni8CEQcxwsBwOs3RHZ83TkE4xoxb9cHsFPY9yQ==", + "version": "12.5.0", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.5.0.tgz", + "integrity": "sha512-buPlioFbH9/W7rDzYh1C09AuZHAk2D1xTA1BlounJ2Rb9aRg84OXexP0GLd+R83v0khURdMX7b5MKnGTaSg5iA==", "dependencies": { - "motion-dom": "^12.4.11", - "motion-utils": "^12.4.10", + "motion-dom": "^12.5.0", + "motion-utils": "^12.5.0", "tslib": "^2.4.0" }, "peerDependencies": { @@ -8236,11 +8236,11 @@ "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==" }, "node_modules/motion": { - "version": "12.4.13", - "resolved": "https://registry.npmjs.org/motion/-/motion-12.4.13.tgz", - "integrity": "sha512-8ehpE6Sd8ack6jLLzweW6RwCBQoASf+yVu8aUPFNKHsJIVejJaBPGsMiswcpfzHeCusZ/ztNIKbgoEn7ruJaOw==", + "version": "12.5.0", + "resolved": "https://registry.npmjs.org/motion/-/motion-12.5.0.tgz", + "integrity": "sha512-BTAYKszMmTvXSsIyeHNMPSicjWgUA4j7OmZv1xPpthm4sPub3ch66fy9U7BhJ1uXNL3YeprsIegzuvps3FkEMw==", "dependencies": { - "framer-motion": "^12.4.13", + "framer-motion": "^12.5.0", "tslib": "^2.4.0" }, "peerDependencies": { @@ -8261,17 +8261,17 @@ } }, "node_modules/motion-dom": { - "version": "12.4.11", - "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.4.11.tgz", - "integrity": "sha512-wstlyV3pktgFjqsjbXMo1NX9hQD9XTVqxQNvfc+FREAgxr3GVzgWIEKvbyyNlki3J1jmmh+et9X3aCKeqFPcxA==", + "version": "12.5.0", + "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.5.0.tgz", + "integrity": "sha512-uH2PETDh7m+Hjd1UQQ56yHqwn83SAwNjimNPE/kC+Kds0t4Yh7+29rfo5wezVFpPOv57U4IuWved5d1x0kNhbQ==", "dependencies": { - "motion-utils": "^12.4.10" + "motion-utils": "^12.5.0" } }, "node_modules/motion-utils": { - "version": "12.4.10", - "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.4.10.tgz", - "integrity": "sha512-NPwZd94V013SwRf++jMrk2+HEBgPkeIE2RiOzhAuuQlqxMJPkKt/LXVh6Upl+iN8oarSGD2dlY5/bqgsYXDABA==" + "version": "12.5.0", + "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.5.0.tgz", + "integrity": "sha512-+hFFzvimn0sBMP9iPxBa9OtRX35ZQ3py0UHnb8U29VD+d8lQ8zH3dTygJWqK7av2v6yhg7scj9iZuvTS0f4+SA==" }, "node_modules/ms": { "version": "2.1.3", diff --git a/code/store/store.ts b/code/store/store.ts index 3a7899f..759bebb 100644 --- a/code/store/store.ts +++ b/code/store/store.ts @@ -35,7 +35,9 @@ interface CollaborationRoomState { }; }; setFetchConnectionUrlLoading: (newLoading: boolean) => void; - setFetchConnectionUrlError: (newFetchConnectionUrlError: Error | null) => void; + setFetchConnectionUrlError: ( + newFetchConnectionUrlError: Error | null + ) => void; setUser: (newUser: ShowcaseUser | undefined) => void; setRoom: (newRoom: string | undefined) => void; setContextMenuShow: (newContextMenuShow: boolean) => void; @@ -83,36 +85,63 @@ export const useCollaborationRoom = create()((set) => ({ setFetchConnectionUrlError: (newFetchConnectionUrlError) => set((state) => ({ ...state, - fetchConnectionUrl: { ...state.fetchConnectionUrl, error: newFetchConnectionUrlError }, + fetchConnectionUrl: { + ...state.fetchConnectionUrl, + error: newFetchConnectionUrlError, + }, })), setUser: (newUser) => set((state) => ({ ...state, user: newUser })), setRoom: (newRoom) => set((state) => ({ ...state, room: newRoom })), setContextMenuShow: (newContextMenuShow) => - set((state) => ({ ...state, contextMenu: { ...state.contextMenu, show: newContextMenuShow } })), + set((state) => ({ + ...state, + contextMenu: { ...state.contextMenu, show: newContextMenuShow }, + })), setContextMenuPosition: (newContextMenuPosition) => - set((state) => ({ ...state, contextMenu: { ...state.contextMenu, position: newContextMenuPosition } })), + set((state) => ({ + ...state, + contextMenu: { ...state.contextMenu, position: newContextMenuPosition }, + })), setContextMenuOptions: (newContextMenuOptions) => - set((state) => ({ ...state, contextMenu: { ...state.contextMenu, options: newContextMenuOptions } })), + set((state) => ({ + ...state, + contextMenu: { ...state.contextMenu, options: newContextMenuOptions }, + })), setUploadingImage: (newUploadingImage) => - set((state) => ({ ...state, images: { ...state.images, uploading: newUploadingImage } })), + set((state) => ({ + ...state, + images: { ...state.images, uploading: newUploadingImage }, + })), setLoadingImage: (newLoadingImage) => - set((state) => ({ ...state, images: { ...state.images, loading: newLoadingImage } })), + set((state) => ({ + ...state, + images: { ...state.images, loading: newLoadingImage }, + })), setNodePropertiesVisible: (newNodePropertiesVisible) => set((state) => ({ ...state, - nodeProperties: { ...state.nodeProperties, visible: newNodePropertiesVisible }, + nodeProperties: { + ...state.nodeProperties, + visible: newNodePropertiesVisible, + }, })), setImagesLibraryVisible: (newImagesLibraryVisible) => set((state) => ({ ...state, - images: { ...state.images, library: { ...state.images.library, visible: newImagesLibraryVisible } }, + images: { + ...state.images, + library: { ...state.images.library, visible: newImagesLibraryVisible }, + }, })), setWorkspacesLibraryVisible: (newWorkspacesLibraryVisible) => set((state) => ({ ...state, workspaces: { ...state.workspaces, - library: { ...state.workspaces.library, visible: newWorkspacesLibraryVisible }, + library: { + ...state.workspaces.library, + visible: newWorkspacesLibraryVisible, + }, }, })), }));