create-weave-frontend-app 0.1.0

package/template/+nextjs+azure-web-pubsub/components/room-components/hooks/use-get-weave-js-props.tsx

@@ -0,0 +1,120 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from 'react';
+
+import {
+  WeaveBrushToolAction,
+  WeaveCopyPasteNodesPlugin,
+  WeaveFrameToolAction,
+  WeaveImageToolAction,
+  WeavePenToolAction,
+  WeaveRectangleToolAction,
+} from '@inditextech/weave-sdk';
+import { toast } from 'sonner';
+import { useCollaborationRoom } from '@/store/store';
+import {
+  ACTIONS,
+  CUSTOM_PLUGINS,
+  FONTS,
+  NODES,
+} from '@/components/utils/constants';
+import useContextMenu from './use-context-menu';
+import { ColorTokenToolAction } from '@/components/actions/color-token-tool/color-token-tool';
+
+function useGetWeaveJSProps() {
+  const setLoadingImage = useCollaborationRoom(
+    (state) => state.setLoadingImage
+  );
+
+  const setNodePropertiesCreateProps = useCollaborationRoom(
+    (state) => state.setNodePropertiesCreateProps
+  );
+  const setFinishUploadCallbackImage = useCollaborationRoom(
+    (state) => state.setFinishUploadCallbackImage
+  );
+
+  const { contextMenu } = useContextMenu();
+
+  const memoizedActions = React.useMemo(
+    () => [
+      new WeaveRectangleToolAction({
+        onPropsChange: (props) => {
+          setNodePropertiesCreateProps(props);
+        },
+      }),
+      new WeavePenToolAction({
+        onPropsChange: (props) => {
+          setNodePropertiesCreateProps(props);
+        },
+      }),
+      new WeaveBrushToolAction({
+        onPropsChange: (props) => {
+          setNodePropertiesCreateProps(props);
+        },
+      }),
+      new WeaveImageToolAction({
+        onPropsChange: (props) => {
+          setNodePropertiesCreateProps(props);
+        },
+        onUploadImage: async (finished: (imageURL: string) => void) => {
+          setFinishUploadCallbackImage(finished);
+        },
+        onImageLoadStart: () => {
+          setLoadingImage(true);
+        },
+        onImageLoadEnd: () => {
+          setLoadingImage(false);
+        },
+      }),
+      new WeaveFrameToolAction({
+        onPropsChange: (props) => {
+          setNodePropertiesCreateProps(props);
+        },
+      }),
+      new ColorTokenToolAction({
+        onPropsChange: (props) => {
+          setNodePropertiesCreateProps(props);
+        },
+      }),
+      ...ACTIONS,
+    ],
+    [
+      setNodePropertiesCreateProps,
+      setLoadingImage,
+      setFinishUploadCallbackImage,
+    ]
+  );
+
+  const memoizedCustomPlugins = React.useMemo(() => {
+    return [
+      ...CUSTOM_PLUGINS,
+      contextMenu,
+      new WeaveCopyPasteNodesPlugin({
+        onCopy: (error?: Error) => {
+          if (error) {
+            console.error('onCopy', error);
+            toast.error('Aan error occurred when copying to the clipboard');
+          } else {
+            toast.success('Copy successful');
+          }
+        },
+        onPaste: (error?: Error) => {
+          if (error) {
+            console.error('onPaste', error);
+            toast.error('Aan error occurred when reading from the clipboard');
+          } else {
+            toast.success('Paste successful');
+          }
+        },
+      }),
+    ];
+  }, [contextMenu]);
+
+  return {
+    fonts: FONTS,
+    nodes: NODES,
+    customPlugins: memoizedCustomPlugins,
+    actions: memoizedActions,
+  };
+}
+
+export default useGetWeaveJSProps;

package/template/+nextjs+azure-web-pubsub/components/room-components/hooks/use-handle-route-params.ts

@@ -0,0 +1,30 @@
+import { useCollaborationRoom } from "@/store/store";
+import { useParams, useSearchParams } from "next/navigation";
+import React from "react";
+
+function useHandleRouteParams() {
+  const [loadedParams, setLoadedParams] = React.useState(false);
+  const setRoom = useCollaborationRoom((state) => state.setRoom);
+  const params = useParams<{ roomId: string }>();
+  const searchParams = useSearchParams();
+  const setUser = useCollaborationRoom((state) => state.setUser);
+
+  React.useEffect(() => {
+    const roomId = params.roomId;
+    const userName = searchParams.get("userName");
+    if (roomId && userName) {
+      setRoom(roomId);
+      setUser({
+        name: userName,
+        email: `${userName}@weave.js`,
+      });
+    }
+    setLoadedParams(true);
+  }, [params.roomId, searchParams, setRoom, setUser]);
+
+  return {
+    loadedParams,
+  }
+}
+
+export default useHandleRouteParams;

package/template/+nextjs+azure-web-pubsub/components/room-components/hooks/use-key-down.ts

@@ -0,0 +1,29 @@
+import React from "react";
+
+export const useKeyDown = (
+  callback: () => void,
+  keys: string[],
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  active?: (event: any) => boolean,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  modifiers?: (event: any) => boolean
+) => {
+  const onKeyDown = React.useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (event: any) => {
+      const wasAnyKeyPressed = keys.some((key: string) => event.code === key);
+      if ((wasAnyKeyPressed && active?.(event) && modifiers?.(event)) ?? true) {
+        event.preventDefault();
+        callback();
+      }
+    },
+    [callback, keys, active, modifiers]
+  );
+
+  React.useEffect(() => {
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [onKeyDown]);
+};