create-weave-frontend-app 0.1.0

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

@@ -0,0 +1,316 @@
+import { PDFDocument } from 'pdf-lib';
+import { WeaveSelection, WeaveStateElement } from '@inditextech/weave-types';
+import React from 'react';
+import Konva from 'konva';
+import { Checkbox } from '@/components/ui/checkbox';
+import { useCollaborationRoom } from '@/store/store';
+import { useWeave } from '@inditextech/weave-react';
+import {
+  AlignStartHorizontal,
+  Download,
+  Presentation,
+  SkipBack,
+  SkipForward,
+  SquareCheck,
+  StepBack,
+  StepForward,
+  XIcon,
+} from 'lucide-react';
+import { toImageAsync } from './utils';
+import { FrameImage } from './frames-library.image';
+import { FramePresentationImage } from './frames-library.presentation-image';
+
+export const FramesLibrary = () => {
+  const instance = useWeave((state) => state.instance);
+  const appState = useWeave((state) => state.appState);
+  const selectedNodes = useWeave((state) => state.selection.nodes);
+
+  const [presentationMode, setPresentationMode] =
+    React.useState<boolean>(false);
+  const [actualFrame, setActualFrame] = React.useState<number>(0);
+  const [selectedFrames, setSelectedFrames] = React.useState<string[]>([]);
+
+  const framesLibraryVisible = useCollaborationRoom(
+    (state) => state.frames.library.visible
+  );
+
+  const framesAvailable = React.useMemo(() => {
+    if (!instance) {
+      return [];
+    }
+
+    const stage = instance.getStage();
+    const nodes = instance.findNodesByType(
+      appState.weave as WeaveStateElement,
+      'frame'
+    );
+
+    const frames: Konva.Node[] = [];
+    for (const node of nodes) {
+      const ele = stage.findOne(`#${node.key}`);
+      if (ele) {
+        frames.push(ele);
+      }
+    }
+    return frames;
+  }, [instance, appState]);
+
+  const selectedNodesAllFrame = React.useMemo(() => {
+    let allFrame = true;
+    for (const node of selectedNodes) {
+      if (node.node.type !== 'frame') {
+        allFrame = false;
+        break;
+      }
+    }
+    return allFrame;
+  }, [selectedNodes]);
+
+  const alignItemsHandler = React.useCallback(() => {
+    if (!instance) {
+      return;
+    }
+
+    instance.triggerAction<{ gap: number; nodes: WeaveSelection[] }>(
+      'alignElementsTool',
+      {
+        gap: 20,
+        nodes: selectedNodes,
+      }
+    );
+  }, [instance, selectedNodes]);
+
+  const exportFramesHandler = React.useCallback(async () => {
+    if (!instance) {
+      return;
+    }
+
+    const stage = instance.getStage();
+
+    let framesToRender = selectedFrames;
+    if (framesToRender.length === 0) {
+      framesToRender = framesAvailable.map((e) => e.getAttrs().id ?? '');
+    }
+
+    const pages: { title: string; image: string }[] = [];
+    for (const frameId of selectedFrames) {
+      const node = stage.findOne(`#${frameId}`) as Konva.Group | undefined;
+      if (node) {
+        const attrs = node.getAttrs();
+        const frameBg = node.findOne(`#${attrs.id}-bg`) as Konva.Group;
+        const boxBg = frameBg.getClientRect();
+        const img = await toImageAsync(node, {
+          x: boxBg.x + 2,
+          y: boxBg.y + 2,
+          width: boxBg.width - 4,
+          height: boxBg.height - 4,
+        });
+        pages.push({ title: attrs.title, image: img.src });
+      }
+    }
+
+    const pdfDoc = await PDFDocument.create();
+    for (const page of pages) {
+      const pdfPage = pdfDoc.addPage([1403, 992]);
+      const imageDoc = await pdfDoc.embedJpg(page.image);
+      pdfPage.drawImage(imageDoc, {
+        x: 30,
+        y: 30,
+        width: 1403 - 60,
+        height: 992 - 60,
+      });
+    }
+
+    const pdfDataUri = await pdfDoc.saveAsBase64({ dataUri: true });
+
+    const link = document.createElement('a');
+    link.href = pdfDataUri;
+    link.download = 'test.pdf';
+    link.click();
+  }, [instance, selectedFrames, framesAvailable]);
+
+  const actualNodePresentation = React.useMemo(() => {
+    const frameId = selectedFrames[actualFrame];
+    const node = framesAvailable.find((e) => e.getAttrs().id === frameId);
+    if (node) {
+      return node;
+    }
+    return undefined;
+  }, [actualFrame, selectedFrames, framesAvailable]);
+
+  if (!instance) {
+    return null;
+  }
+
+  if (!framesLibraryVisible) {
+    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 bg-white flex justify-between items-center">
+          <div className="flex justify-between font-noto-sans-mono font-light items-center text-md pl-2">
+            Frames
+          </div>
+          <div className="flex justify-end items-center gap-1">
+            <button
+              className="group cursor-pointer bg-transparent disabled:cursor-default hover:disabled:bg-transparent hover:bg-accent p-2"
+              disabled={selectedFrames.length === 0}
+              onClick={() => {
+                setActualFrame(0);
+                setPresentationMode((prev) => !prev);
+              }}
+            >
+              <Presentation className="group-disabled:text-accent" size={16} />
+            </button>
+            <button
+              className="cursor-pointer bg-transparent hover:bg-accent p-2"
+              disabled={selectedNodes.length <= 1 || !selectedNodesAllFrame}
+              onClick={alignItemsHandler}
+            >
+              <AlignStartHorizontal size={16} />
+            </button>
+            <button
+              className="cursor-pointer bg-transparent hover:bg-accent p-2"
+              onClick={() => {
+                if (selectedFrames.length === 0) {
+                  const frames = framesAvailable.map((frame) => {
+                    const attrs = frame.getAttrs();
+                    return attrs.id ?? '';
+                  });
+                  setSelectedFrames(frames);
+                } else {
+                  setSelectedFrames([]);
+                }
+              }}
+            >
+              <SquareCheck size={16} />
+            </button>
+            <button
+              className="group cursor-pointer bg-transparent disabled:cursor-default hover:disabled:bg-transparent hover:bg-accent p-2"
+              disabled={selectedFrames.length === 0}
+              onClick={exportFramesHandler}
+            >
+              <Download className="group-disabled:text-accent" size={16} />
+            </button>
+          </div>
+        </div>
+        <div className="flex flex-col gap-2 w-full h-[calc(100%-50px)] border-t border-zinc-200 p-3">
+          {framesAvailable.length === 0 && (
+            <div className="col-span-2 w-full flex flex-col justify-center items-center text-sm py-5 text-center">
+              <b>No frames created</b>
+              <span className="text-xs">Add a frame to the whiteboard</span>
+            </div>
+          )}
+          {framesAvailable.map((node) => {
+            const attrs = node.getAttrs();
+
+            return (
+              <div
+                key={attrs.id}
+                className="w-full bg-light-background-1 flex flex-col gap-2"
+              >
+                <div className="w-full flex justify-between items-center">
+                  <div className="w-full text-xs font-noto-sans-mono font-light">
+                    {attrs.title}
+                  </div>
+                  <div className="font-label-l-regular">
+                    <Checkbox
+                      className="cursor-pointer"
+                      checked={
+                        selectedFrames.findIndex((e) => e === attrs.id) !== -1
+                      }
+                      onCheckedChange={() => {
+                        setSelectedFrames((prev) => {
+                          const newElements = new Set(prev);
+                          if (newElements.has(attrs.id ?? '')) {
+                            newElements.delete(attrs.id ?? '');
+                          } else {
+                            newElements.add(attrs.id ?? '');
+                          }
+                          return Array.from(newElements);
+                        });
+                      }}
+                    />
+                  </div>
+                </div>
+                <FrameImage node={node as Konva.Group} />
+              </div>
+            );
+          })}
+        </div>
+      </div>
+      {presentationMode && (
+        <div className="fixed top-0 left-0 right-0 bottom-0 bg-black flex flex-col gap-3 justify-center items-start">
+          <div className="absolute top-8 right-8 flex justify-end items-center p-1">
+            <div className="flex justify-end items-center shadow-lg bg-white">
+              <button
+                className="cursor-pointer bg-transparent hover:bg-accent p-2"
+                onClick={() => {
+                  setPresentationMode((prev) => !prev);
+                }}
+              >
+                <XIcon size={24} />
+              </button>
+            </div>
+          </div>
+          <div className="absolute bottom-8 left-8 right-8 flex justify-center items-center">
+            <div className="flex justify-center items-center  p-1">
+              <div className="flex justify-end items-center shadow-lg bg-white border border-zinc-200 p-1">
+                <button
+                  className="group cursor-pointer bg-transparent disabled:cursor-default hover:disabled:bg-transparent hover:bg-accent p-2"
+                  disabled={actualFrame === 0}
+                  onClick={() => {
+                    setActualFrame(0);
+                  }}
+                >
+                  <SkipBack className="group-disabled:text-accent" size={24} />
+                </button>
+                <button
+                  className="group cursor-pointer bg-transparent disabled:cursor-default hover:disabled:bg-transparent hover:bg-accent p-2"
+                  disabled={actualFrame === 0}
+                  onClick={() => {
+                    setActualFrame((prev) => prev - 1);
+                  }}
+                >
+                  <StepBack className="group-disabled:text-accent" size={24} />
+                </button>
+                <button
+                  className="group cursor-pointer bg-transparent disabled:cursor-default hover:disabled:bg-transparent hover:bg-accent p-2"
+                  disabled={actualFrame === selectedFrames.length - 1}
+                  onClick={() => {
+                    setActualFrame((prev) => prev + 1);
+                  }}
+                >
+                  <StepForward
+                    className="group-disabled:text-accent"
+                    size={24}
+                  />
+                </button>
+                <button
+                  className="group cursor-pointer bg-transparent disabled:cursor-default hover:disabled:bg-transparent hover:bg-accent p-2"
+                  disabled={actualFrame === selectedFrames.length - 1}
+                  onClick={() => {
+                    setActualFrame(selectedFrames.length - 1);
+                  }}
+                >
+                  <SkipForward
+                    className="group-disabled:text-accent"
+                    size={24}
+                  />
+                </button>
+              </div>
+            </div>
+          </div>
+          <div className="w-full h-full bg-black">
+            <FramePresentationImage
+              key={selectedFrames[actualFrame]}
+              node={actualNodePresentation as Konva.Group}
+            />
+          </div>
+        </div>
+      )}
+    </>
+  );
+};

package/template/+nextjs+azure-web-pubsub/components/room-components/frames-library/utils.ts

@@ -0,0 +1,27 @@
+import Konva from "konva";
+
+export const toImageAsync = (
+  node: Konva.Node,
+  properties: {
+    pixelRatio?: number;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  }
+): Promise<HTMLImageElement> => {
+  return new Promise((resolve) => {
+    node.toImage({
+      mimeType: "image/jpeg",
+      quality: 1,
+      pixelRatio: properties.pixelRatio ?? 1,
+      x: properties.x,
+      y: properties.y,
+      width: properties.width,
+      height: properties.height,
+      callback(img) {
+        resolve(img);
+      },
+    });
+  });
+};

package/template/+nextjs+azure-web-pubsub/components/room-components/help/help-arrange.tsx

@@ -0,0 +1,69 @@
+import {
+  BringToFront,
+  ArrowUp,
+  ArrowDown,
+  SendToBack,
+  Group,
+  Ungroup,
+} from "lucide-react";
+import { SYSTEM_OS } from "@/lib/utils";
+import { HelpShortcutElement } from "./help-shortcut-element";
+
+export const HelpArrange = () => {
+  return (
+    <div className="w-full grid grid-cols-2 py-3 gap-x-5">
+      <div className="flex flex-col gap-3">
+        <HelpShortcutElement
+          icon={<BringToFront />}
+          label="Bring to front"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: "]",
+            [SYSTEM_OS.OTHER]: "]",
+          }}
+        />
+        <HelpShortcutElement
+          icon={<ArrowUp />}
+          label="Move up"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: "⌘ ]",
+            [SYSTEM_OS.OTHER]: "Ctrl ]",
+          }}
+        />
+        <HelpShortcutElement
+          icon={<ArrowDown />}
+          label="Move down"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: "⌘ [",
+            [SYSTEM_OS.OTHER]: "Ctrl [",
+          }}
+        />
+        <HelpShortcutElement
+          icon={<SendToBack />}
+          label="Send to back"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: "[",
+            [SYSTEM_OS.OTHER]: "[",
+          }}
+        />
+      </div>
+      <div className="flex flex-col gap-3">
+        <HelpShortcutElement
+          icon={<Group />}
+          label="Group selected elements"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: "⇧ ⌘ G",
+            [SYSTEM_OS.OTHER]: "⇧ Ctrl G",
+          }}
+        />
+        <HelpShortcutElement
+          icon={<Ungroup />}
+          label="Un-group selected elements"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: "⇧ ⌘ U",
+            [SYSTEM_OS.OTHER]: "⇧ Ctrl U",
+          }}
+        />
+      </div>
+    </div>
+  );
+};

package/template/+nextjs+azure-web-pubsub/components/room-components/help/help-drawer.tsx

@@ -0,0 +1,140 @@
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer";
+import { Keyboard, XIcon } from "lucide-react";
+import { SYSTEM_OS } from "@/lib/utils";
+import { HelpTools } from "./help-tools";
+import { ShortcutElement } from "./shortcut-element";
+import React from "react";
+import { useKeyDown } from "../hooks/use-key-down";
+import { useGetOs } from "../hooks/use-get-os";
+import { HelpZoom } from "./help-zoom";
+import { HelpView } from "./help-view";
+import { HelpSelection } from "./help-selection";
+import { HelpEdit } from "./help-edit";
+import { HelpArrange } from "./help-arrange";
+
+export const HelpDrawer = () => {
+  const os = useGetOs();
+
+  const [open, setOpen] = React.useState<boolean>(false);
+
+  useKeyDown(
+    () => {
+      setOpen((prev) => !prev);
+    },
+    ["KeyK"],
+    (e) => ([SYSTEM_OS.MAC as string].includes(os) ? e.metaKey : e.ctrlKey)
+  );
+
+  return (
+    <Drawer modal={false} open={open} onOpenChange={setOpen}>
+      <DrawerTrigger>
+        <TooltipProvider delayDuration={300}>
+          <Tooltip>
+            <TooltipTrigger
+              asChild
+              className="pointer-events-auto cursor-pointer hover:text-black hover:bg-accent w-8 h-8 px-2 py-2"
+            >
+              <Keyboard />
+            </TooltipTrigger>
+            <TooltipContent side="top" align="start" className="rounded-none">
+              <div className="flex flex-col gap-2 justify-start items-end">
+                <p>Keyboard shortcuts</p>
+                <ShortcutElement
+                  variant="light"
+                  shortcuts={{
+                    [SYSTEM_OS.MAC]: "⌘ K",
+                    [SYSTEM_OS.OTHER]: "Ctrl K",
+                  }}
+                />
+              </div>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </DrawerTrigger>
+      <DrawerContent className="p-0 !rounded-none bg-black flex flex-col justify-start items-center min-h-[330px]">
+        <DrawerHeader className="w-[1024px] flex flex-row justify-between items-centers p-0 py-3">
+          <DrawerTitle className="flex flex-row justify-start items-center text-center text-white font-noto-sans-mono">
+            Keyboard shortcuts
+          </DrawerTitle>
+          <DrawerClose>
+            <div className="outline-none rounded-none font-noto-sans-mono cursor-pointer text-white">
+              <XIcon size={24} />
+            </div>
+          </DrawerClose>
+        </DrawerHeader>
+        <Tabs defaultValue="tools" className="w-[1024px] my-5 p-0">
+          <TabsList className="w-full bg-zinc-700 rounded-none  h-auto">
+            <TabsTrigger
+              value="tools"
+              className="cursor-pointer bg-black rounded-none p-1"
+            >
+              Tools
+            </TabsTrigger>
+            <TabsTrigger
+              value="view"
+              className="cursor-pointer bg-black rounded-none p-1"
+            >
+              View
+            </TabsTrigger>
+            <TabsTrigger
+              value="zoom"
+              className="cursor-pointer bg-black rounded-none p-1"
+            >
+              Zoom
+            </TabsTrigger>
+            <TabsTrigger
+              value="selection"
+              className="cursor-pointer bg-black rounded-none p-1"
+            >
+              Selection
+            </TabsTrigger>
+            <TabsTrigger
+              value="edit"
+              className="cursor-pointer bg-black rounded-none p-1"
+            >
+              Edit
+            </TabsTrigger>
+            <TabsTrigger
+              value="arrange"
+              className="cursor-pointer bg-black rounded-none p-1"
+            >
+              Arrange
+            </TabsTrigger>
+          </TabsList>
+          <TabsContent value="tools">
+            <HelpTools />
+          </TabsContent>
+          <TabsContent value="view">
+            <HelpView />
+          </TabsContent>
+          <TabsContent value="zoom">
+            <HelpZoom />
+          </TabsContent>
+          <TabsContent value="selection">
+            <HelpSelection />
+          </TabsContent>
+          <TabsContent value="edit">
+            <HelpEdit />
+          </TabsContent>
+          <TabsContent value="arrange">
+            <HelpArrange />
+          </TabsContent>
+        </Tabs>
+      </DrawerContent>
+    </Drawer>
+  );
+};

package/template/+nextjs+azure-web-pubsub/components/room-components/help/help-edit.tsx

@@ -0,0 +1,80 @@
+import {
+  ClipboardPaste,
+  Copy,
+  ClipboardCopy,
+  ImageDown,
+  MonitorDown,
+  Undo,
+  Redo,
+} from "lucide-react";
+import { SYSTEM_OS } from "@/lib/utils";
+import { HelpShortcutElement } from "./help-shortcut-element";
+
+export const HelpEdit = () => {
+  return (
+    <div className="w-full grid grid-cols-3 py-3 gap-x-5">
+      <div className="flex flex-col gap-3">
+        <HelpShortcutElement
+          icon={<ClipboardCopy />}
+          label="Copy"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: "⌘ C",
+            [SYSTEM_OS.OTHER]: "Ctrl C",
+          }}
+        />
+        <HelpShortcutElement
+          icon={<ClipboardPaste />}
+          label="Paste"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: "⌘ P",
+            [SYSTEM_OS.OTHER]: "Ctrl P",
+          }}
+        />
+      </div>
+      <div className="flex flex-col gap-3">
+        <HelpShortcutElement
+          icon={<Copy />}
+          label="Duplicate"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: "⌘ D",
+            [SYSTEM_OS.OTHER]: "Ctrl D",
+          }}
+        />
+        <HelpShortcutElement
+          icon={<Undo />}
+          label="Undo"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: "⇧ ⌘ ,",
+            [SYSTEM_OS.OTHER]: "⇧ Ctrl ,",
+          }}
+        />
+        <HelpShortcutElement
+          icon={<Redo />}
+          label="Redo"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: "⇧ ⌘ .",
+            [SYSTEM_OS.OTHER]: "⇧ Ctrl .",
+          }}
+        />
+      </div>
+      <div className="flex flex-col gap-3">
+        <HelpShortcutElement
+          icon={<ImageDown />}
+          label="Export selected as image"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: "⇧ ⌘ E",
+            [SYSTEM_OS.OTHER]: "⇧ Ctrl E",
+          }}
+        />
+        <HelpShortcutElement
+          icon={<MonitorDown />}
+          label="Export viewport as image"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: "⇧ ⌘ V",
+            [SYSTEM_OS.OTHER]: "⇧ Ctrl V",
+          }}
+        />
+      </div>
+    </div>
+  );
+};

package/template/+nextjs+azure-web-pubsub/components/room-components/help/help-selection.tsx

@@ -0,0 +1,30 @@
+import { SquareDashed, TextSelect } from "lucide-react";
+import { SYSTEM_OS } from "@/lib/utils";
+import { HelpShortcutElement } from "./help-shortcut-element";
+
+export const HelpSelection = () => {
+  return (
+    <div className="w-full grid grid-cols-2 py-3 gap-x-5">
+      <div className="flex flex-col gap-3">
+        <HelpShortcutElement
+          icon={<TextSelect />}
+          label="Select all"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: "⇧ ⌘ A",
+            [SYSTEM_OS.OTHER]: "⇧ Ctrl A",
+          }}
+        />
+      </div>
+      <div className="flex flex-col gap-3">
+        <HelpShortcutElement
+          icon={<SquareDashed />}
+          label="Select none"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: "⇧ Esc",
+            [SYSTEM_OS.OTHER]: "⇧ Esc",
+          }}
+        />
+      </div>
+    </div>
+  );
+};

package/template/+nextjs+azure-web-pubsub/components/room-components/help/help-shortcut-element.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { ShortcutElement } from "./shortcut-element";
+
+type HelpShortcutElement = {
+  icon: React.ReactElement;
+  label: string;
+  shortcuts: Record<string, string>;
+};
+
+export const HelpShortcutElement = ({
+  icon,
+  label,
+  shortcuts,
+}: Readonly<HelpShortcutElement>) => {
+  return (
+    <div className="flex justify-between items-center text-white">
+      <div className="flex gap-2 justify-start items-center">
+        {React.cloneElement(icon, { size: 20 })}
+        <div className="text-white font-noto-sans-mono text-sm">{label}</div>
+      </div>
+      <ShortcutElement shortcuts={shortcuts} />
+    </div>
+  );
+};