create-weave-frontend-app 0.1.0

package/template/+nextjs+azure-web-pubsub/components/room-components/hooks/use-keyboard-handler.tsx

@@ -0,0 +1,557 @@
+'use client';
+
+import React from 'react';
+import { useWeave } from '@inditextech/weave-react';
+import { useCollaborationRoom } from '@/store/store';
+import { useKeyDown } from '../hooks/use-key-down';
+import { SYSTEM_OS } from '@/lib/utils';
+import { useGetOs } from '../hooks/use-get-os';
+import {
+  WeaveCopyPasteNodesPlugin,
+  WeaveExportNodeActionParams,
+  WeaveExportStageActionParams,
+  WeaveNodesSelectionPlugin,
+  WeaveUsersPointersPlugin,
+} from '@inditextech/weave-sdk';
+
+export function useKeyboardHandler() {
+  const os = useGetOs();
+
+  const instance = useWeave((state) => state.instance);
+  const selectedNodes = useWeave((state) => state.selection.nodes);
+  const actualAction = useWeave((state) => state.actions.actual);
+
+  const showUI = useCollaborationRoom((state) => state.ui.show);
+  const setShowUi = useCollaborationRoom((state) => state.setShowUi);
+  const framesLibraryVisible = useCollaborationRoom(
+    (state) => state.frames.library.visible
+  );
+  const setFramesLibraryVisible = useCollaborationRoom(
+    (state) => state.setFramesLibraryVisible
+  );
+  const imagesLibraryVisible = useCollaborationRoom(
+    (state) => state.images.library.visible
+  );
+  const setImagesLibraryVisible = useCollaborationRoom(
+    (state) => state.setImagesLibraryVisible
+  );
+  const colorTokensLibraryVisible = useCollaborationRoom(
+    (state) => state.colorToken.library.visible
+  );
+  const setColorTokensLibraryVisible = useCollaborationRoom(
+    (state) => state.setColorTokensLibraryVisible
+  );
+  const setShowSelectFileImage = useCollaborationRoom(
+    (state) => state.setShowSelectFileImage
+  );
+
+  const triggerTool = React.useCallback(
+    (toolName: string) => {
+      if (instance && actualAction !== toolName) {
+        instance.triggerAction(toolName);
+      }
+      if (instance && actualAction === toolName) {
+        instance.cancelAction(toolName);
+      }
+    },
+    [instance, actualAction]
+  );
+
+  const libraryToggle = React.useCallback(
+    (library: string) => {
+      switch (library) {
+        case 'images':
+          setColorTokensLibraryVisible(false);
+          setFramesLibraryVisible(false);
+          setImagesLibraryVisible(!imagesLibraryVisible);
+          break;
+        case 'colorTokens':
+          setImagesLibraryVisible(false);
+          setFramesLibraryVisible(false);
+          setColorTokensLibraryVisible(!colorTokensLibraryVisible);
+          break;
+        case 'frames':
+          setImagesLibraryVisible(false);
+          setColorTokensLibraryVisible(false);
+          setFramesLibraryVisible(!framesLibraryVisible);
+          break;
+        default:
+          break;
+      }
+    },
+    [
+      colorTokensLibraryVisible,
+      framesLibraryVisible,
+      imagesLibraryVisible,
+      setImagesLibraryVisible,
+      setColorTokensLibraryVisible,
+      setFramesLibraryVisible,
+    ]
+  );
+
+  const handleTriggerAction = React.useCallback(
+    (actionName: string) => {
+      if (instance) {
+        const triggerSelection = actualAction === 'selectionTool';
+        instance.triggerAction(actionName);
+        if (triggerSelection) {
+          instance.triggerAction('selectionTool');
+        }
+      }
+    },
+    [instance, actualAction]
+  );
+
+  const handlePrintToConsoleState = React.useCallback(() => {
+    if (instance) {
+      // eslint-disable-next-line no-console
+      console.log({
+        appState: JSON.parse(JSON.stringify(instance.getStore().getState())),
+      });
+    }
+  }, [instance]);
+
+  /* Keyboard shortcuts toolbar */
+
+  useKeyDown(
+    () => {
+      triggerTool('selectionTool');
+    },
+    ['KeyS'],
+    () => {
+      return (
+        !window.weaveTextEditing &&
+        !window.weaveTextEditing &&
+        !['textTool'].includes(actualAction ?? '')
+      );
+    }
+  );
+
+  useKeyDown(
+    () => {
+      triggerTool('frameTool');
+    },
+    ['KeyF'],
+    () =>
+      !window.weaveTextEditing && !['textTool'].includes(actualAction ?? ''),
+    (e) => !(e.ctrlKey || e.metaKey)
+  );
+
+  useKeyDown(
+    () => {
+      triggerTool('rectangleTool');
+    },
+    ['KeyR'],
+    () => !window.weaveTextEditing && !['textTool'].includes(actualAction ?? '')
+  );
+
+  useKeyDown(
+    () => {
+      triggerTool('penTool');
+    },
+    ['KeyL'],
+    () => !window.weaveTextEditing && !['textTool'].includes(actualAction ?? '')
+  );
+
+  useKeyDown(
+    () => {
+      triggerTool('brushTool');
+    },
+    ['KeyB'],
+    () => !window.weaveTextEditing && !['textTool'].includes(actualAction ?? '')
+  );
+
+  useKeyDown(
+    () => {
+      triggerTool('textTool');
+    },
+    ['KeyT'],
+    () => !window.weaveTextEditing && !['textTool'].includes(actualAction ?? '')
+  );
+
+  useKeyDown(
+    () => {
+      triggerTool('imageTool');
+      setShowSelectFileImage(true);
+    },
+    ['KeyI'],
+    () =>
+      !window.weaveTextEditing && !['textTool'].includes(actualAction ?? ''),
+    (e) => !(e.ctrlKey || e.metaKey)
+  );
+
+  useKeyDown(
+    () => {
+      triggerTool('colorTokenTool');
+    },
+    ['KeyP'],
+    () =>
+      !window.weaveTextEditing && !['textTool'].includes(actualAction ?? ''),
+    (e) => !(e.ctrlKey || e.metaKey)
+  );
+
+  useKeyDown(
+    () => {
+      if (instance) {
+        const actualStore = instance.getStore();
+        actualStore.undoStateStep();
+      }
+    },
+    ['Comma'],
+    () =>
+      !window.weaveTextEditing && !['textTool'].includes(actualAction ?? ''),
+    (e) =>
+      e.shiftKey &&
+      ([SYSTEM_OS.MAC as string].includes(os) ? e.metaKey : e.ctrlKey)
+  );
+
+  useKeyDown(
+    () => {
+      if (instance) {
+        const actualStore = instance.getStore();
+        actualStore.redoStateStep();
+      }
+    },
+    ['Period'],
+    () =>
+      !window.weaveTextEditing && !['textTool'].includes(actualAction ?? ''),
+    (e) =>
+      e.shiftKey &&
+      ([SYSTEM_OS.MAC as string].includes(os) ? e.metaKey : e.ctrlKey)
+  );
+
+  /* Keyboard shortcuts visibility */
+
+  useKeyDown(
+    () => {
+      setShowUi(!showUI);
+    },
+    ['IntlBackslash'],
+    () =>
+      !window.weaveTextEditing && !['textTool'].includes(actualAction ?? ''),
+    (e) => ([SYSTEM_OS.MAC as string].includes(os) ? e.metaKey : e.ctrlKey)
+  );
+
+  useKeyDown(
+    () => {
+      if (instance) {
+        const usersPointersPlugin =
+          instance.getPlugin<WeaveUsersPointersPlugin>('usersPointers');
+        if (usersPointersPlugin) {
+          usersPointersPlugin.toggleRenderCursors();
+        }
+      }
+    },
+    ['KeyU'],
+    () =>
+      !window.weaveTextEditing && !['textTool'].includes(actualAction ?? ''),
+    (e) =>
+      e.altKey &&
+      ([SYSTEM_OS.MAC as string].includes(os) ? e.metaKey : e.ctrlKey)
+  );
+
+  /* Keyboard shortcuts selection */
+
+  useKeyDown(
+    () => {
+      if (instance) {
+        const selectionPlugin =
+          instance.getPlugin<WeaveNodesSelectionPlugin>('nodesSelection');
+        if (selectionPlugin) {
+          selectionPlugin.selectAll();
+        }
+      }
+    },
+    ['KeyA'],
+    () =>
+      !window.weaveTextEditing && !['textTool'].includes(actualAction ?? ''),
+    (e) =>
+      e.shiftKey &&
+      ([SYSTEM_OS.MAC as string].includes(os) ? e.metaKey : e.ctrlKey)
+  );
+
+  useKeyDown(
+    () => {
+      if (instance) {
+        const selectionPlugin =
+          instance.getPlugin<WeaveNodesSelectionPlugin>('nodesSelection');
+        if (selectionPlugin) {
+          selectionPlugin.selectNone();
+        }
+      }
+    },
+    ['Escape'],
+    () =>
+      !window.weaveTextEditing && !['textTool'].includes(actualAction ?? ''),
+    (e) => e.shiftKey
+  );
+
+  /* Keyboard shortcuts editing */
+
+  useKeyDown(
+    async () => {
+      if (instance && selectedNodes.length > 0) {
+        const weaveCopyPasteNodesPlugin =
+          instance.getPlugin<WeaveCopyPasteNodesPlugin>('copyPasteNodes');
+        if (weaveCopyPasteNodesPlugin) {
+          await weaveCopyPasteNodesPlugin.copy();
+        }
+      }
+    },
+    ['KeyC'],
+    () =>
+      !window.weaveTextEditing && !['textTool'].includes(actualAction ?? ''),
+    (e) => ([SYSTEM_OS.MAC as string].includes(os) ? e.metaKey : e.ctrlKey)
+  );
+
+  useKeyDown(
+    () => {
+      if (instance) {
+        const weaveCopyPasteNodesPlugin =
+          instance.getPlugin<WeaveCopyPasteNodesPlugin>('copyPasteNodes');
+        if (weaveCopyPasteNodesPlugin) {
+          weaveCopyPasteNodesPlugin.paste();
+        }
+      }
+    },
+    ['KeyP'],
+    () =>
+      !window.weaveTextEditing && !['textTool'].includes(actualAction ?? ''),
+    (e) => ([SYSTEM_OS.MAC as string].includes(os) ? e.metaKey : e.ctrlKey)
+  );
+
+  useKeyDown(
+    async () => {
+      if (instance && selectedNodes.length === 1) {
+        const weaveCopyPasteNodesPlugin =
+          instance.getPlugin<WeaveCopyPasteNodesPlugin>('copyPasteNodes');
+        if (weaveCopyPasteNodesPlugin) {
+          await weaveCopyPasteNodesPlugin.copy();
+          weaveCopyPasteNodesPlugin.paste();
+        }
+      }
+    },
+    ['KeyD'],
+    () =>
+      !window.weaveTextEditing && !['textTool'].includes(actualAction ?? ''),
+    (e) => ([SYSTEM_OS.MAC as string].includes(os) ? e.metaKey : e.ctrlKey)
+  );
+
+  useKeyDown(
+    () => {
+      if (instance && selectedNodes.length === 1) {
+        instance.triggerAction<WeaveExportNodeActionParams>('exportNodeTool', {
+          node: selectedNodes[0].instance,
+          options: {
+            padding: 20,
+            pixelRatio: 2,
+          },
+        });
+      }
+    },
+    ['KeyE'],
+    () =>
+      !window.weaveTextEditing && !['textTool'].includes(actualAction ?? ''),
+    (e) =>
+      e.shiftKey &&
+      ([SYSTEM_OS.MAC as string].includes(os) ? e.metaKey : e.ctrlKey)
+  );
+
+  useKeyDown(
+    () => {
+      if (instance) {
+        instance.triggerAction<WeaveExportStageActionParams>(
+          'exportStageTool',
+          {
+            options: {
+              padding: 20,
+              pixelRatio: 2,
+            },
+          }
+        );
+      }
+    },
+    ['KeyV'],
+    () =>
+      !window.weaveTextEditing && !['textTool'].includes(actualAction ?? ''),
+    (e) =>
+      e.shiftKey &&
+      ([SYSTEM_OS.MAC as string].includes(os) ? e.metaKey : e.ctrlKey)
+  );
+
+  /* Keyboard shortcuts arrange */
+
+  useKeyDown(
+    () => {
+      if (instance && selectedNodes.length === 1) {
+        instance.bringToFront(selectedNodes[0].instance);
+      }
+    },
+    ['BracketRight'],
+    () =>
+      !window.weaveTextEditing && !['textTool'].includes(actualAction ?? ''),
+    (e) => !([SYSTEM_OS.MAC as string].includes(os) ? e.metaKey : e.ctrlKey)
+  );
+
+  useKeyDown(
+    () => {
+      if (instance && selectedNodes.length === 1) {
+        instance.moveUp(selectedNodes[0].instance);
+      }
+    },
+    ['BracketRight'],
+    () =>
+      !window.weaveTextEditing && !['textTool'].includes(actualAction ?? ''),
+    (e) => ([SYSTEM_OS.MAC as string].includes(os) ? e.metaKey : e.ctrlKey)
+  );
+
+  useKeyDown(
+    () => {
+      if (instance && selectedNodes.length === 1) {
+        instance.moveDown(selectedNodes[0].instance);
+      }
+    },
+    ['BracketLeft'],
+    () =>
+      !window.weaveTextEditing && !['textTool'].includes(actualAction ?? ''),
+    (e) => ([SYSTEM_OS.MAC as string].includes(os) ? e.metaKey : e.ctrlKey)
+  );
+
+  useKeyDown(
+    () => {
+      if (instance && selectedNodes.length === 1) {
+        instance.sendToBack(selectedNodes[0].instance);
+      }
+    },
+    ['BracketLeft'],
+    () =>
+      !window.weaveTextEditing && !['textTool'].includes(actualAction ?? ''),
+    (e) => !([SYSTEM_OS.MAC as string].includes(os) ? e.metaKey : e.ctrlKey)
+  );
+
+  useKeyDown(
+    () => {
+      if (instance && selectedNodes.length > 1) {
+        instance.group(selectedNodes.map((n) => n.node));
+      }
+    },
+    ['KeyG'],
+    () =>
+      !window.weaveTextEditing && !['textTool'].includes(actualAction ?? ''),
+    (e) =>
+      e.shiftKey &&
+      ([SYSTEM_OS.MAC as string].includes(os) ? e.metaKey : e.ctrlKey)
+  );
+
+  useKeyDown(
+    () => {
+      if (
+        instance &&
+        selectedNodes.length === 1 &&
+        selectedNodes[0].node.type === 'group'
+      ) {
+        instance.unGroup(selectedNodes[0].node);
+      }
+    },
+    ['KeyU'],
+    () =>
+      !window.weaveTextEditing && !['textTool'].includes(actualAction ?? ''),
+    (e) =>
+      e.shiftKey &&
+      ([SYSTEM_OS.MAC as string].includes(os) ? e.metaKey : e.ctrlKey)
+  );
+
+  /* Keyboard shortcuts sidebars */
+
+  useKeyDown(
+    () => {
+      libraryToggle('images');
+    },
+    ['KeyI'],
+    () =>
+      !window.weaveTextEditing && !['textTool'].includes(actualAction ?? ''),
+    (e) =>
+      e.altKey &&
+      ([SYSTEM_OS.MAC as string].includes(os) ? e.metaKey : e.ctrlKey)
+  );
+
+  useKeyDown(
+    () => {
+      libraryToggle('colorTokens');
+    },
+    ['KeyP'],
+    () =>
+      !window.weaveTextEditing && !['textTool'].includes(actualAction ?? ''),
+    (e) =>
+      e.altKey &&
+      ([SYSTEM_OS.MAC as string].includes(os) ? e.metaKey : e.ctrlKey)
+  );
+
+  useKeyDown(
+    () => {
+      libraryToggle('frames');
+    },
+    ['KeyF'],
+    () =>
+      !window.weaveTextEditing && !['textTool'].includes(actualAction ?? ''),
+    (e) =>
+      e.altKey &&
+      ([SYSTEM_OS.MAC as string].includes(os) ? e.metaKey : e.ctrlKey)
+  );
+
+  /* Keyboard shortcuts zoom */
+
+  useKeyDown(
+    () => {
+      handleTriggerAction('zoomInTool');
+    },
+    ['BracketRight'],
+    () =>
+      !window.weaveTextEditing && !['textTool'].includes(actualAction ?? ''),
+    (e) => ([SYSTEM_OS.MAC as string].includes(os) ? e.metaKey : e.ctrlKey)
+  );
+
+  useKeyDown(
+    () => {
+      handleTriggerAction('zoomOutTool');
+    },
+    ['Slash'],
+    () =>
+      !window.weaveTextEditing && !['textTool'].includes(actualAction ?? ''),
+    (e) => ([SYSTEM_OS.MAC as string].includes(os) ? e.metaKey : e.ctrlKey)
+  );
+
+  useKeyDown(
+    () => {
+      handleTriggerAction('fitToScreenTool');
+    },
+    ['Digit1'],
+    () =>
+      !window.weaveTextEditing && !['textTool'].includes(actualAction ?? ''),
+    (e) => e.shiftKey
+  );
+
+  useKeyDown(
+    () => {
+      handleTriggerAction('fitToSelectionTool');
+    },
+    ['Digit2'],
+    () =>
+      !window.weaveTextEditing && !['textTool'].includes(actualAction ?? ''),
+    (e) => e.shiftKey
+  );
+
+  /* Keyboard shortcuts utility */
+
+  useKeyDown(
+    () => {
+      handlePrintToConsoleState();
+    },
+    ['KeyC'],
+    () =>
+      !window.weaveTextEditing && !['textTool'].includes(actualAction ?? ''),
+    (e) =>
+      e.altKey &&
+      ([SYSTEM_OS.MAC as string].includes(os) ? e.metaKey : e.ctrlKey)
+  );
+}

package/template/+nextjs+azure-web-pubsub/components/room-components/images-library/images-library.tsx

@@ -0,0 +1,146 @@
+'use client';
+
+import React from 'react';
+import { useInfiniteQuery, useMutation } from '@tanstack/react-query';
+import { ImagePlus, Trash } from 'lucide-react';
+import { useWeave } from '@inditextech/weave-react';
+import { useCollaborationRoom } from '@/store/store';
+import { getImages } from '@/api/get-images';
+import { postImage } from '@/api/post-image';
+import { delImage } from '@/api/del-image';
+
+export const ImagesLibrary = () => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const inputFileRef = React.useRef<any>(null);
+
+  const instance = useWeave((state) => state.instance);
+
+  const room = useCollaborationRoom((state) => state.room);
+  const imagesLibraryVisible = useCollaborationRoom(
+    (state) => state.images.library.visible
+  );
+
+  const mutationUpload = useMutation({
+    mutationFn: async (file: File) => {
+      return await postImage(room ?? '', file);
+    },
+  });
+
+  const mutationDelete = useMutation({
+    mutationFn: async (imageId: string) => {
+      return await delImage(room ?? '', imageId);
+    },
+  });
+
+  const query = useInfiniteQuery({
+    queryKey: ['getImages', room],
+    queryFn: async ({ pageParam }) => {
+      if (!room) {
+        return [];
+      }
+      return await getImages(room ?? '', 20, pageParam);
+    },
+    initialPageParam: '',
+    getNextPageParam: (lastPage) => lastPage.continuationToken,
+  });
+
+  const linearData = React.useMemo(() => {
+    return query.data?.pages.flatMap((page) => page.images) ?? [];
+  }, [query.data]);
+
+  if (!instance) {
+    return null;
+  }
+
+  if (!imagesLibraryVisible) {
+    return null;
+  }
+
+  return (
+    <div className="pointer-events-auto w-full h-full">
+      <div className="w-[calc(100%-38px)] font-title-xs p-1 pr-0 flex justify-between items-center">
+        <div className="flex justify-between font-noto-sans-mono font-light items-center text-md pl-2">
+          Images
+        </div>
+        <div className="flex justify-end items-center gap-1">
+          <input
+            type="file"
+            accept="image/png,image/gif,image/jpeg"
+            name="image"
+            ref={inputFileRef}
+            className="hidden"
+            onChange={(e) => {
+              const file = e.target.files?.[0];
+              if (file) {
+                mutationUpload.mutate(file, {
+                  onSuccess: () => {
+                    query.refetch();
+                  },
+                });
+              }
+            }}
+          />
+          <button
+            className="cursor-pointer bg-transparent hover:bg-accent p-2"
+            onClick={() => {
+              if (inputFileRef.current) {
+                inputFileRef.current.click();
+                // instance.triggerAction("imageTool");
+              }
+            }}
+          >
+            <ImagePlus size={16} />
+          </button>
+        </div>
+      </div>
+      <div className="flex flex-col gap-2 w-full h-[calc(100%-50px)] border-t border-zinc-200">
+        <div
+          className="grid grid-cols-2 gap-2 w-full weaveDraggable p-4"
+          onDragStart={(e) => {
+            if (e.target instanceof HTMLImageElement) {
+              window.weaveDragImageURL = e.target.src;
+            }
+          }}
+        >
+          {linearData.length === 0 && (
+            <div className="col-span-2 w-full flex flex-col justify-center items-center text-sm py-5 text-center">
+              <b>No images uploaded</b>
+              <span className="text-xs">Add an image to the whiteboard</span>
+            </div>
+          )}
+          {linearData.length > 0 &&
+            linearData.map((image) => {
+              const imageUrl = `${process.env.NEXT_PUBLIC_API_ENDPOINT}/rooms/${room}/images/${image}`;
+
+              return (
+                <div
+                  key={image}
+                  className="group w-full h-[100px] bg-light-background-1 object-cover cursor-pointer border border-zinc-200 relative"
+                >
+                  {/* eslint-disable-next-line @next/next/no-img-element */}
+                  <img
+                    className="w-full h-full object-cover"
+                    draggable="true"
+                    src={imageUrl}
+                    alt="An image"
+                  />
+                  <button
+                    className="absolute bottom-[8px] right-[8px] bg-white p-2 border border-zinc-200 rounded hidden group-hover:block cursor-pointer"
+                    onClick={() => {
+                      mutationDelete.mutate(image, {
+                        onSuccess: () => {
+                          query.refetch();
+                        },
+                      });
+                    }}
+                  >
+                    <Trash size={16} />
+                  </button>
+                </div>
+              );
+            })}
+        </div>
+      </div>
+    </div>
+  );
+};