create-weave-frontend-app 0.1.0

package/template/+nextjs+azure-web-pubsub/components/room-components/node-properties/crop-properties.tsx

@@ -0,0 +1,156 @@
+'use client';
+
+import React from 'react';
+import { WeaveStateElement } from '@inditextech/weave-types';
+import { Crop } from 'lucide-react';
+import { InputNumber } from '../inputs/input-number';
+import { useWeave } from '@inditextech/weave-react';
+import { useCollaborationRoom } from '@/store/store';
+import { ToggleIconButton } from '../toggle-icon-button';
+
+export function CropProperties() {
+  const instance = useWeave((state) => state.instance);
+  const node = useWeave((state) => state.selection.node);
+  const actualAction = useWeave((state) => state.actions.actual);
+
+  const nodePropertiesAction = useCollaborationRoom(
+    (state) => state.nodeProperties.action
+  );
+
+  const nodeCreateProps = useCollaborationRoom(
+    (state) => state.nodeProperties.createProps
+  );
+
+  const [actualNode, setActualNode] = React.useState<
+    WeaveStateElement | undefined
+  >(node);
+
+  React.useEffect(() => {
+    if (!instance) return;
+    if (node && nodePropertiesAction === 'update') {
+      setActualNode(node);
+    }
+  }, [instance, actualAction, node, nodePropertiesAction, nodeCreateProps]);
+
+  const updateElement = React.useCallback(
+    (updatedNode: WeaveStateElement) => {
+      if (!instance) return;
+      if (nodePropertiesAction === 'update') {
+        instance.updateNode(updatedNode);
+        return;
+      }
+    },
+    [instance, nodePropertiesAction]
+  );
+
+  if (!instance || !actualNode) return null;
+
+  if (!['image'].includes(actualNode.type)) {
+    return null;
+  }
+
+  return (
+    <div className="border-b border-zinc-200">
+      <div className="w-full flex justify-between items-center gap-3 p-4 py-3">
+        <div className="cursor-pointer hover:no-underline items-center py-0">
+          <span className="text-xs font-noto-sans-mono font-light">Crop</span>
+        </div>
+        <div className="flex justify-end items-center">
+          <ToggleIconButton
+            kind="switch"
+            icon={<Crop size={16} />}
+            pressed={typeof actualNode.props.cropX !== 'undefined'}
+            onClick={() => {
+              const updatedNode: WeaveStateElement = {
+                ...actualNode,
+                props: {
+                  ...actualNode.props,
+                  ...(typeof actualNode.props.cropX !== 'undefined'
+                    ? {
+                        width: actualNode.props.imageInfo.width,
+                        height: actualNode.props.imageInfo.height,
+                        cropX: null,
+                        cropY: null,
+                        cropWidth: null,
+                        cropHeight: null,
+                      }
+                    : {
+                        width: actualNode.props.imageInfo.width,
+                        height: actualNode.props.imageInfo.height,
+                        cropX: 0,
+                        cropY: 0,
+                        cropWidth: actualNode.props.imageInfo.width,
+                        cropHeight: actualNode.props.imageInfo.height,
+                      }),
+                },
+              };
+              updateElement(updatedNode);
+            }}
+          />
+        </div>
+      </div>
+      <div className="px-4 pb-4">
+        <div className="grid grid-cols-2 gap-3 w-full">
+          <InputNumber
+            label="X"
+            value={actualNode.props.cropX ?? 0}
+            onChange={(value) => {
+              const updatedNode: WeaveStateElement = {
+                ...actualNode,
+                props: {
+                  ...actualNode.props,
+                  cropX: value,
+                },
+              };
+              updateElement(updatedNode);
+            }}
+          />
+          <InputNumber
+            label="Y"
+            value={actualNode.props.cropY ?? 0}
+            onChange={(value) => {
+              const updatedNode: WeaveStateElement = {
+                ...actualNode,
+                props: {
+                  ...actualNode.props,
+                  cropY: value,
+                },
+              };
+              updateElement(updatedNode);
+            }}
+          />
+          <InputNumber
+            label="W"
+            value={actualNode.props.cropWidth ?? actualNode.props.width}
+            onChange={(value) => {
+              const updatedNode: WeaveStateElement = {
+                ...actualNode,
+                props: {
+                  ...actualNode.props,
+                  cropWidth: value,
+                  width: value,
+                },
+              };
+              updateElement(updatedNode);
+            }}
+          />
+          <InputNumber
+            label="H"
+            value={actualNode.props.cropHeight ?? actualNode.props.height}
+            onChange={(value) => {
+              const updatedNode: WeaveStateElement = {
+                ...actualNode,
+                props: {
+                  ...actualNode.props,
+                  cropHeight: value,
+                  height: value,
+                },
+              };
+              updateElement(updatedNode);
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

package/template/+nextjs+azure-web-pubsub/components/room-components/node-properties/fill-properties.tsx

@@ -0,0 +1,115 @@
+'use client';
+
+import React from 'react';
+import { WeaveStateElement } from '@inditextech/weave-types';
+import { Eye, EyeOff } from 'lucide-react';
+import { InputColor } from './../inputs/input-color';
+import { ToggleIconButton } from './../toggle-icon-button';
+import { useWeave } from '@inditextech/weave-react';
+import { useCollaborationRoom } from '@/store/store';
+
+export function FillProperties() {
+  const instance = useWeave((state) => state.instance);
+  const node = useWeave((state) => state.selection.node);
+  const actualAction = useWeave((state) => state.actions.actual);
+
+  const nodePropertiesAction = useCollaborationRoom(
+    (state) => state.nodeProperties.action
+  );
+
+  const nodeCreateProps = useCollaborationRoom(
+    (state) => state.nodeProperties.createProps
+  );
+
+  const [actualNode, setActualNode] = React.useState<
+    WeaveStateElement | undefined
+  >(node);
+
+  React.useEffect(() => {
+    if (!instance) return;
+    if (actualAction && nodePropertiesAction === 'create') {
+      setActualNode({
+        key: 'creating',
+        type: 'undefined',
+        props: {
+          ...nodeCreateProps,
+        },
+      });
+    }
+    if (node && nodePropertiesAction === 'update') {
+      setActualNode(node);
+    }
+    if (!actualAction && !node) {
+      setActualNode(undefined);
+    }
+  }, [instance, actualAction, node, nodePropertiesAction, nodeCreateProps]);
+
+  const updateElement = React.useCallback(
+    (updatedNode: WeaveStateElement) => {
+      if (!instance) return;
+      if (actualAction && nodePropertiesAction === 'create') {
+        instance.updatePropsAction(actualAction, updatedNode.props);
+      }
+      if (nodePropertiesAction === 'update') {
+        instance.updateNode(updatedNode);
+      }
+    },
+    [instance, actualAction, nodePropertiesAction]
+  );
+
+  if (!instance || !actualAction || !actualNode) {
+    return null;
+  }
+
+  if (!actualAction && !actualNode) {
+    return null;
+  }
+
+  if (actualNode.type !== 'rectangle') {
+    return null;
+  }
+  return (
+    <div className="border-b border-zinc-200">
+      <div className="w-full flex justify-between items-center gap-3 p-4 py-3">
+        <div className="cursor-pointer hover:no-underline items-center py-0">
+          <span className="text-xs font-noto-sans-mono font-light">Fill</span>
+        </div>
+        <ToggleIconButton
+          kind="toggle"
+          icon={<Eye size={12} />}
+          pressedIcon={<EyeOff size={12} />}
+          pressed={actualNode.props.fillEnabled ?? true}
+          onClick={(e) => {
+            e.stopPropagation();
+            const updatedNode: WeaveStateElement = {
+              ...actualNode,
+              props: {
+                ...actualNode.props,
+                fillEnabled: !(actualNode.props.fillEnabled ?? true),
+              },
+            };
+            updateElement(updatedNode);
+          }}
+        />
+      </div>
+      <div className="px-4 pb-4">
+        <div className="grid grid-cols-1 gap-3 w-full">
+          <InputColor
+            label="Color (#RGBA)"
+            value={`${(actualNode.props.fill ?? '#000000FF').replace('#', '')}`}
+            onChange={(value) => {
+              const updatedNode: WeaveStateElement = {
+                ...actualNode,
+                props: {
+                  ...actualNode.props,
+                  fill: `#${value}`,
+                },
+              };
+              updateElement(updatedNode);
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

package/template/+nextjs+azure-web-pubsub/components/room-components/node-properties/frame-properties.tsx

@@ -0,0 +1,100 @@
+'use client';
+
+import React from 'react';
+import { WeaveStateElement } from '@inditextech/weave-types';
+import { useWeave } from '@inditextech/weave-react';
+import { useCollaborationRoom } from '@/store/store';
+import { InputText } from '../inputs/input-text';
+
+export function FrameProperties() {
+  const instance = useWeave((state) => state.instance);
+  const node = useWeave((state) => state.selection.node);
+  const actualAction = useWeave((state) => state.actions.actual);
+
+  const nodePropertiesAction = useCollaborationRoom(
+    (state) => state.nodeProperties.action
+  );
+
+  const nodeCreateProps = useCollaborationRoom(
+    (state) => state.nodeProperties.createProps
+  );
+
+  const [actualNode, setActualNode] = React.useState<
+    WeaveStateElement | undefined
+  >(node);
+
+  React.useEffect(() => {
+    if (!instance) return;
+    if (actualAction && nodePropertiesAction === 'create') {
+      setActualNode({
+        key: 'creating',
+        type: 'undefined',
+        props: {
+          ...nodeCreateProps,
+        },
+      });
+    }
+    if (node && nodePropertiesAction === 'update') {
+      setActualNode(node);
+    }
+    if (!actualAction && !node) {
+      setActualNode(undefined);
+    }
+  }, [instance, actualAction, node, nodePropertiesAction, nodeCreateProps]);
+
+  const updateElement = React.useCallback(
+    (updatedNode: WeaveStateElement) => {
+      if (!instance) return;
+      if (actualAction && nodePropertiesAction === 'create') {
+        instance.updatePropsAction(actualAction, updatedNode.props);
+      }
+      if (nodePropertiesAction === 'update') {
+        instance.updateNode(updatedNode);
+      }
+    },
+    [instance, actualAction, nodePropertiesAction]
+  );
+
+  if (!instance || !actualNode) return null;
+
+  if (!actualAction && !actualNode) return null;
+
+  if (
+    actualAction &&
+    ['selectionTool'].includes(actualAction) &&
+    !['frame'].includes(actualNode.type)
+  ) {
+    return null;
+  }
+
+  if (actualAction && !['selectionTool', 'frameTool'].includes(actualAction))
+    return null;
+
+  return (
+    <div className="border-b border-zinc-200">
+      <div className="w-full flex justify-between items-center gap-3 p-4 py-3">
+        <div className="cursor-pointer hover:no-underline items-center py-0">
+          <span className="text-xs font-noto-sans-mono font-light">Frame</span>
+        </div>
+      </div>
+      <div className="px-4 pb-4">
+        <div className="grid grid-cols-1 gap-3 w-full">
+          <InputText
+            label="Title"
+            value={`${actualNode.props.title ?? 'Frame XXX'}`}
+            onChange={(value) => {
+              const updatedNode: WeaveStateElement = {
+                ...actualNode,
+                props: {
+                  ...actualNode.props,
+                  title: value,
+                },
+              };
+              updateElement(updatedNode);
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

package/template/+nextjs+azure-web-pubsub/components/room-components/node-properties/image-properties.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import React from 'react';
+import { WeaveStateElement } from '@inditextech/weave-types';
+import { InputNumber } from '../inputs/input-number';
+import { useWeave } from '@inditextech/weave-react';
+import { useCollaborationRoom } from '@/store/store';
+
+export function ImageProperties() {
+  const instance = useWeave((state) => state.instance);
+  const node = useWeave((state) => state.selection.node);
+  const actualAction = useWeave((state) => state.actions.actual);
+
+  const nodePropertiesAction = useCollaborationRoom(
+    (state) => state.nodeProperties.action
+  );
+
+  const nodeCreateProps = useCollaborationRoom(
+    (state) => state.nodeProperties.createProps
+  );
+
+  const [actualNode, setActualNode] = React.useState<
+    WeaveStateElement | undefined
+  >(node);
+
+  React.useEffect(() => {
+    if (!instance) return;
+    if (node && nodePropertiesAction === 'update') {
+      setActualNode(node);
+    }
+  }, [instance, actualAction, node, nodePropertiesAction, nodeCreateProps]);
+
+  if (!instance || !actualNode) return null;
+
+  if (!['image'].includes(actualNode.type)) {
+    return null;
+  }
+
+  return (
+    <div className="border-b border-zinc-200">
+      <div className="px-4 py-4">
+        <div className="grid grid-cols-2 gap-3 w-full">
+          <InputNumber
+            label="Width (px)"
+            value={actualNode.props.imageInfo.width}
+            disabled={true}
+          />
+          <InputNumber
+            label="Height (px)"
+            value={actualNode.props.imageInfo.height}
+            disabled={true}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

package/template/+nextjs+azure-web-pubsub/components/room-components/node-properties/position-properties.tsx

@@ -0,0 +1,156 @@
+'use client';
+
+import React from 'react';
+// import { Pin, PinOff } from "lucide-react";
+import { WeaveStateElement } from '@inditextech/weave-types';
+import { InputNumber } from '../inputs/input-number';
+// import { ToggleIconButton } from "../toggle-icon-button";
+import { useWeave } from '@inditextech/weave-react';
+import { useCollaborationRoom } from '@/store/store';
+
+export function PositionProperties() {
+  const instance = useWeave((state) => state.instance);
+  const node = useWeave((state) => state.selection.node);
+
+  const nodePropertiesAction = useCollaborationRoom(
+    (state) => state.nodeProperties.action
+  );
+
+  const updateElement = React.useCallback(
+    (updatedNode: WeaveStateElement) => {
+      if (!instance) return;
+      if (nodePropertiesAction === 'update') {
+        instance.updateNode(updatedNode);
+        return;
+      }
+    },
+    [instance, nodePropertiesAction]
+  );
+
+  const onRotationChange = React.useCallback(
+    (value: number) => {
+      if (!instance || !node) return;
+
+      function degToRad(angle: number) {
+        return (angle / 180) * Math.PI;
+      }
+
+      function getCenter(shape: WeaveStateElement) {
+        const angleRad = degToRad(shape.props.rotation || 0);
+        return {
+          x:
+            (shape.props.x || 0) +
+            ((shape.props.width || 0) / 2) * Math.cos(angleRad) +
+            ((shape.props.height || 0) / 2) * Math.sin(-angleRad),
+          y:
+            (shape.props.y || 0) +
+            ((shape.props.height || 0) / 2) * Math.cos(angleRad) +
+            ((shape.props.width || 0) / 2) * Math.sin(angleRad),
+        };
+      }
+
+      function rotateAroundPoint(
+        shape: WeaveStateElement,
+        deltaDeg: number,
+        point: { x: number; y: number }
+      ) {
+        const angleRad = degToRad(deltaDeg);
+        const x = Math.round(
+          point.x +
+            ((shape.props.x || 0) - point.x) * Math.cos(angleRad) -
+            ((shape.props.y || 0) - point.y) * Math.sin(angleRad)
+        );
+        const y = Math.round(
+          point.y +
+            ((shape.props.x || 0) - point.x) * Math.sin(angleRad) +
+            ((shape.props.y || 0) - point.y) * Math.cos(angleRad)
+        );
+        return {
+          ...shape,
+          props: {
+            ...shape.props,
+            rotation: Math.round((shape.props.rotation || 0) + deltaDeg),
+            x,
+            y,
+          },
+        };
+      }
+
+      function rotateAroundCenter(shape: WeaveStateElement, deltaDeg: number) {
+        const center = getCenter(shape);
+        return rotateAroundPoint(shape, deltaDeg, center);
+      }
+
+      if (!node) return;
+
+      let updatedNode = {
+        ...node,
+      };
+      updatedNode = rotateAroundCenter(
+        updatedNode,
+        value - (updatedNode.props.rotation || 0)
+      );
+      updateElement(updatedNode);
+    },
+    [instance, node, updateElement]
+  );
+
+  if (nodePropertiesAction === 'create') {
+    return null;
+  }
+
+  if (!instance || !node) {
+    return null;
+  }
+
+  return (
+    <div className="border-b border-zinc-200">
+      <div className="w-full flex justify-between items-center gap-3 p-4 py-3">
+        <div className="cursor-pointer hover:no-underline items-center py-0">
+          <span className="text-xs font-noto-sans-mono font-light">
+            Position
+          </span>
+        </div>
+      </div>
+      <div className="px-4 pb-4">
+        <div className="grid grid-cols-1 gap-3 w-full">
+          <div className="grid grid-cols-2 gap-3 w-full">
+            <InputNumber
+              label="X (px)"
+              value={node.props.x ?? 0}
+              onChange={(value) => {
+                const updatedNode = {
+                  ...node,
+                  props: {
+                    ...node.props,
+                    x: value,
+                  },
+                };
+                updateElement(updatedNode);
+              }}
+            />
+            <InputNumber
+              label="Y (px)"
+              value={node.props.y ?? 0}
+              onChange={(value) => {
+                const updatedNode = {
+                  ...node,
+                  props: {
+                    ...node.props,
+                    y: value,
+                  },
+                };
+                updateElement(updatedNode);
+              }}
+            />
+          </div>
+          <InputNumber
+            label="Rotation (deg)"
+            value={node.props.rotation ?? 0}
+            onChange={onRotationChange}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}