create-weave-frontend-app 0.1.0

package/template/+nextjs+websockets/components/room-components/connection-status.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import React from 'react';
+import {
+  Cloud,
+  //CloudCog,
+  CloudAlert,
+} from 'lucide-react';
+import { WEAVE_STORE_AZURE_WEB_PUBSUB_CONNECTION_STATUS } from '@inditextech/weave-store-azure-web-pubsub/client';
+import { cn } from '@/lib/utils';
+
+type ConnectionStatusProps = {
+  weaveConnectionStatus: string;
+};
+
+export const ConnectionStatus = ({
+  weaveConnectionStatus,
+}: Readonly<ConnectionStatusProps>) => {
+  return (
+    <div className="flex">
+      <div
+        className={cn(
+          'bg-light-background-1 p-2 flex justify-center items-center rounded-full',
+          {
+            ['bg-emerald-200 text-black']:
+              weaveConnectionStatus ===
+              WEAVE_STORE_AZURE_WEB_PUBSUB_CONNECTION_STATUS.CONNECTED,
+            // ["bg-sky-300 text-white"]:
+            //   weaveConnectionStatus ===
+            //   WEAVE_STORE_AZURE_WEB_PUBSUB_CONNECTION_STATUS.CONNECTING,
+            ['bg-rose-300 text-white']:
+              weaveConnectionStatus ===
+              WEAVE_STORE_AZURE_WEB_PUBSUB_CONNECTION_STATUS.DISCONNECTED,
+          }
+        )}
+      >
+        {weaveConnectionStatus ===
+          WEAVE_STORE_AZURE_WEB_PUBSUB_CONNECTION_STATUS.CONNECTED && (
+          <Cloud size={20} />
+        )}
+        {/* {weaveConnectionStatus ===
+          WEAVE_STORE_AZURE_WEB_PUBSUB_CONNECTION_STATUS.CONNECTING && (
+          <CloudCog size={20} />
+        )} */}
+        {weaveConnectionStatus ===
+          WEAVE_STORE_AZURE_WEB_PUBSUB_CONNECTION_STATUS.DISCONNECTED && (
+          <CloudAlert size={20} />
+        )}
+      </div>
+    </div>
+  );
+};

package/template/+nextjs+websockets/components/room-components/context-menu.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+
+type ContextMenuButtonProps = {
+  label: React.ReactNode;
+  icon?: React.ReactNode;
+  disabled?: boolean;
+  onClick: () => void;
+};
+
+export type ContextMenuOption = {
+  id: string;
+  type: "button" | "divider";
+} & (
+  | {
+      type: "button";
+      label: string | React.ReactNode;
+      icon?: React.ReactNode;
+      disabled?: boolean;
+      onClick: () => void;
+    }
+  | {
+      type: "divider";
+    }
+);
+
+type ContextMenuProps = {
+  show: boolean;
+  onChanged: (show: boolean) => void;
+  position: { x: number; y: number };
+  options: ContextMenuOption[];
+};
+
+function ContextMenuButton({
+  label,
+  icon,
+  disabled,
+  onClick,
+}: Readonly<ContextMenuButtonProps>) {
+  return (
+    <button
+      className={cn(
+        "!cursor-pointer w-[calc(100%-8px)] flex justify-between items-center gap-2 font-noto-sans-mono text-sm text-left whitespace-nowrap m-1 text-foreground px-2 py-1.5",
+        {
+          ["hover:bg-accent"]: !disabled,
+          ["!cursor-default hover:bg-white text-muted-foreground"]: disabled,
+        }
+      )}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {icon} <div className="w-full">{label}</div>
+    </button>
+  );
+}
+
+export const ContextMenuRender = ({
+  show,
+  onChanged,
+  position,
+  options,
+}: Readonly<ContextMenuProps>) => {
+  const ref = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    if (ref.current && show) {
+      const boundingRect = ref.current.getBoundingClientRect();
+      let X = boundingRect.x;
+      let Y = boundingRect.y;
+
+      X = Math.max(
+        20,
+        Math.min(X, window.innerWidth - boundingRect.width - 20)
+      );
+      Y = Math.max(
+        20,
+        Math.min(Y, window.innerHeight - boundingRect.height - 20)
+      );
+
+      ref.current.style.top = `${Y}px`;
+      ref.current.style.left = `${X}px`;
+    }
+  }, [show]);
+
+  React.useEffect(() => {
+    function checkIfClickedOutside(e: MouseEvent) {
+      if (
+        ref.current &&
+        e.target !== ref.current &&
+        !ref.current.contains(e.target as Node)
+      ) {
+        ref.current.style.display = `none`;
+        onChanged(false);
+      }
+    }
+
+    function checkIfTouchOutside(e: TouchEvent) {
+      console.log(e);
+      if (
+        ref.current &&
+        e.target !== ref.current &&
+        !ref.current.contains(e.target as Node)
+      ) {
+        ref.current.style.display = `none`;
+        onChanged(false);
+      }
+    }
+
+    window.addEventListener("click", checkIfClickedOutside);
+    window.addEventListener("touchstart", checkIfTouchOutside);
+
+    return () => {
+      window.removeEventListener("click", checkIfClickedOutside);
+      window.removeEventListener("touchstart", checkIfTouchOutside);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div
+      ref={ref}
+      className="fixed w-[300px] bg-white flex flex-col border border-zinc-200 shadow-lg"
+      style={{
+        display: show ? "block" : "none",
+        top: `${position.y}px`,
+        left: `${position.x}px`,
+        zIndex: 10,
+      }}
+    >
+      {options.map((option) => {
+        if (option.type === "button") {
+          return (
+            <ContextMenuButton
+              key={option.id}
+              label={option.label}
+              icon={option.icon}
+              disabled={option.disabled ?? false}
+              onClick={option.onClick}
+            />
+          );
+        }
+        if (option.type === "divider") {
+          return (
+            <div key={option.id} className="w-full h-[1px] bg-accent"></div>
+          );
+        }
+      })}
+    </div>
+  );
+};

package/template/+nextjs+websockets/components/room-components/frames-library/frames-library.image.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import Image from "next/image";
+import Konva from "konva";
+import { toImageAsync } from "./utils";
+
+type FrameImageProps = {
+  node: Konva.Group;
+};
+
+export const FrameImage = ({ node }: Readonly<FrameImageProps>) => {
+  const [image, setImage] = React.useState<React.ReactElement | null>(null);
+
+  React.useEffect(() => {
+    setInterval(async () => {
+      const nodeAttrs = node.getAttrs();
+      try {
+        // const box = frameInternal.getClientRect({ relativeTo: stage });
+        const frameBg = node.findOne(`#${nodeAttrs.id}-bg`) as Konva.Group;
+        if (!frameBg) {
+          return;
+        }
+        const boxBg = frameBg.getClientRect();
+        const img = await toImageAsync(node, {
+          x: boxBg.x + 1,
+          y: boxBg.y + 1,
+          width: boxBg.width - 2,
+          height: boxBg.height - 2,
+        });
+        setImage(
+          <Image
+            src={img.src}
+            width={284}
+            height={201}
+            alt="A frame image"
+            className="object-fit w-full h-full"
+          />
+        );
+      } catch (ex) {
+        console.error(ex);
+      }
+    }, 100);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div className="w-full aspect-video border border-zinc-200">{image}</div>
+  );
+};

package/template/+nextjs+websockets/components/room-components/frames-library/frames-library.presentation-image.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import Image from "next/image";
+import Konva from "konva";
+import { toImageAsync } from "./utils";
+
+type FrameImageProps = {
+  node: Konva.Group;
+};
+
+export const FramePresentationImage = ({ node }: Readonly<FrameImageProps>) => {
+  const [loading, setLoading] = React.useState<boolean>(false);
+  const [image, setImage] = React.useState<React.ReactElement | null>(null);
+
+  React.useEffect(() => {
+    async function loadPresentationImage() {
+      const nodeAttrs = node.getAttrs();
+      try {
+        // const box = frameInternal.getClientRect({ relativeTo: stage });
+        const frameBg = node.findOne(`#${nodeAttrs.id}-bg`) as Konva.Group;
+        if (!frameBg) {
+          return;
+        }
+        const boxBg = frameBg.getClientRect();
+        setLoading(true);
+        const img = await toImageAsync(node, {
+          pixelRatio: 6,
+          x: boxBg.x + 2,
+          y: boxBg.y + 2,
+          width: boxBg.width - 4,
+          height: boxBg.height - 4,
+        });
+        setLoading(false);
+        setImage(
+          <Image
+            src={img.src}
+            width={500}
+            height={600}
+            alt="A frame image"
+            className="object-contain w-full h-full"
+          />
+        );
+      } catch (ex) {
+        console.error(ex);
+      }
+    }
+    loadPresentationImage();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="w-full h-full flex justify-center items-center">
+        <div className="font-noto-sans-mono text-2xl text-white">
+          Loading...
+        </div>
+      </div>
+    );
+  }
+
+  return image;
+};

package/template/+nextjs+websockets/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+websockets/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);
+      },
+    });
+  });
+};