Merge pull request #68 from ls1intum/24-see-components-from-sidebar

feat: 24 see components from sidebar

library/lib/App.tsx

@@ -6,24 +6,23 @@ import {
   Controls,
   MiniMap,
   DefaultEdgeOptions,
-  type NodeTypes,
   MarkerType,
   ConnectionLineType,
   ConnectionMode,
   ReactFlowInstance,
+  useNodesState,
+  addEdge,
+  useEdgesState,
+  Connection,
 } from "@xyflow/react"
-
 import "@xyflow/react/dist/style.css"
 import { MAX_SCALE_TO_ZOOM_IN, MIN_SCALE_TO_ZOOM_OUT } from "./contants"
-import { defaultEdges, defaultNodes } from "./initialElements"
+import { initialEdges, initialNodes } from "./initialElements"
 import "@/styles/app.css"
-import { Class, Package, ColorDescription } from "./nodes"
-
-const nodeTypes: NodeTypes = {
-  package: Package,
-  class: Class,
-  colorDescription: ColorDescription,
-}
+import { Sidebar } from "@/components"
+import { useCallback } from "react"
+import { diagramNodeTypes } from "./nodes"
+import { useDragDrop } from "./hooks"
 
 const defaultEdgeOptions: DefaultEdgeOptions = {
   type: "smoothstep",
@@ -36,13 +35,27 @@ interface AppProps {
 }
 
 function App({ onReactFlowInit }: AppProps) {
+  const [nodes, , onNodesChange] = useNodesState(initialNodes)
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges)
+  const { onDrop, onDragOver } = useDragDrop()
+  const onConnect = useCallback(
+    (params: Connection) => setEdges((eds) => addEdge(params, eds)),
+    []
+  )
+
   return (
-    <div style={{ width: "100vw", height: "100vh" }}>
+    <div style={{ display: "flex", width: "100vw", height: "100vh" }}>
+      <Sidebar />
       <ReactFlow
-        nodeTypes={nodeTypes}
+        nodeTypes={diagramNodeTypes}
         defaultEdgeOptions={defaultEdgeOptions}
-        defaultNodes={defaultNodes}
-        defaultEdges={defaultEdges}
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
+        onDragOver={onDragOver}
+        onDrop={onDrop}
         connectionLineType={ConnectionLineType.SmoothStep}
         connectionMode={ConnectionMode.Loose}
         fitView
@@ -52,7 +65,7 @@ function App({ onReactFlowInit }: AppProps) {
       >
         <Background variant={BackgroundVariant.Lines} />
         <MiniMap zoomable pannable />
-        <Controls />
+        <Controls orientation="horizontal" />
       </ReactFlow>
     </div>
   )

library/lib/components/Divider.tsx

@@ -0,0 +1,18 @@
+import React from "react"
+
+interface DividerProps {
+  style?: React.CSSProperties
+}
+
+export const Divider: React.FC<DividerProps> = ({ style }) => {
+  return (
+    <div
+      style={{
+        height: "2px",
+        width: "100%",
+        backgroundColor: "#000",
+        ...style,
+      }}
+    />
+  )
+}

library/lib/components/Sidebar.tsx

@@ -0,0 +1,65 @@
+import React, { DragEvent } from "react"
+import { dropElementConfig, transformScale } from "@/constant"
+import { Divider } from "./Divider"
+import { DropNodeData } from "@/types"
+
+const onDragStart = (event: DragEvent, { type, data }: DropNodeData) => {
+  const rect = (event.target as HTMLElement).getBoundingClientRect()
+  const offsetX = (event.clientX - rect.left) / transformScale // Cursor offset from the element's left
+  const offsetY = (event.clientY - rect.top) / transformScale // Cursor offset from the element's top
+
+  // Pass the offset along with the type and data
+  event.dataTransfer.setData(
+    "text/plain",
+    JSON.stringify({ type, data, offsetX, offsetY })
+  )
+  event.dataTransfer.effectAllowed = "move"
+}
+
+export const Sidebar = () => {
+  return (
+    <aside style={{ height: "100%", backgroundColor: "#f0f0f0" }}>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: "8px",
+          margin: "10px",
+        }}
+      >
+        {dropElementConfig.map((config) => (
+          <React.Fragment key={`${config.type}_${config.name}`}>
+            {/* Add separator before the Color Description */}
+            {config.type === "colorDescription" && (
+              <Divider style={{ margin: "3px 0" }} />
+            )}
+            <div
+              style={{
+                width: config.width * transformScale,
+                height: config.height * transformScale,
+                overflow: "hidden",
+                zIndex: 2,
+              }}
+              draggable
+              onDragStart={(event: DragEvent) =>
+                onDragStart(event, {
+                  type: config.type,
+                  data: config.defaultData,
+                  offsetX: 0,
+                  offsetY: 0,
+                })
+              }
+            >
+              {React.createElement(config.svg, {
+                width: config.width,
+                height: config.height,
+                ...config.defaultData,
+                transformScale,
+              })}
+            </div>
+          </React.Fragment>
+        ))}
+      </div>
+    </aside>
+  )
+}

library/lib/components/index.ts

@@ -1,2 +1,4 @@
 export * from "./Text"
 export * from "./ThemedElements"
+export * from "./Sidebar"
+export * from "./Divider"

library/lib/constant/index.tsx

@@ -0,0 +1,87 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ClassSVG, PackageSVG, ColorDescriptionSVG } from "@/svgs"
+import { generateUUID } from "@/utils"
+import { ClassType } from "@/types"
+import { DiagramNodeTypeKeys } from "@/nodes"
+
+export const transformScale = 0.8
+const droppedElementWidth = 160
+const droppedElementHeight = 110
+
+export const dropElementConfig: {
+  type: DiagramNodeTypeKeys
+  name: string
+  width: number
+  height: number
+  defaultData: Record<string, unknown>
+  svg: React.FC<any>
+}[] = [
+  {
+    type: "package",
+    name: "Package",
+    width: droppedElementWidth,
+    height: droppedElementHeight,
+    defaultData: { name: "Package" },
+    svg: (props) => <PackageSVG {...props} />,
+  },
+  {
+    type: "class",
+    name: "Class",
+    width: droppedElementWidth,
+    height: droppedElementHeight,
+    defaultData: {
+      name: "Class",
+      methods: [{ id: generateUUID(), name: "+ method()" }],
+      attributes: [{ id: generateUUID(), name: "+ attribute: Type" }],
+      // strokeWidth: 1,
+    },
+    svg: (props) => <ClassSVG {...props} />,
+  },
+  {
+    type: "class",
+    name: "Abstract",
+    width: droppedElementWidth,
+    height: droppedElementHeight,
+    defaultData: {
+      name: "Abstract",
+      stereotype: ClassType.Abstract,
+      methods: [{ id: generateUUID(), name: "+ method()" }],
+      attributes: [{ id: generateUUID(), name: "+ attribute: Type" }],
+    },
+    svg: (props) => <ClassSVG {...props} />,
+  },
+  {
+    type: "class",
+    name: "Enumeration",
+    width: droppedElementWidth,
+    height: droppedElementHeight,
+    defaultData: {
+      name: "Enumeration",
+      stereotype: ClassType.Enumeration,
+      methods: [{ id: generateUUID(), name: "+ method()" }],
+      attributes: [{ id: generateUUID(), name: "+ attribute: Type" }],
+    },
+    svg: (props) => <ClassSVG {...props} />,
+  },
+  {
+    type: "class",
+    name: "Interface",
+    width: droppedElementWidth,
+    height: droppedElementHeight,
+    defaultData: {
+      name: "Interface",
+      stereotype: ClassType.Interface,
+      methods: [{ id: generateUUID(), name: "+ method()" }],
+      attributes: [{ id: generateUUID(), name: "+ attribute: Type" }],
+    },
+    svg: (props) => <ClassSVG {...props} />,
+  },
+  {
+    type: "colorDescription",
+    name: "Color Description",
+    width: droppedElementWidth,
+    height: 48,
+    defaultData: { description: "Color Description" },
+    svg: (props) => <ColorDescriptionSVG {...props} />,
+  },
+]

library/lib/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./useDragDrop"

library/lib/hooks/useDragDrop.ts

@@ -0,0 +1,57 @@
+import { dropElementConfig } from "@/constant"
+import { DropNodeData } from "@/types"
+import { generateUUID } from "@/utils"
+import { useReactFlow, type Node } from "@xyflow/react"
+import { useCallback, DragEvent } from "react"
+
+export const useDragDrop = () => {
+  const { screenToFlowPosition, setNodes } = useReactFlow()
+
+  const onDrop = useCallback(
+    (event: DragEvent) => {
+      event.preventDefault()
+      const dropData = JSON.parse(
+        event.dataTransfer.getData("text/plain")
+      ) as DropNodeData
+
+      const config = dropElementConfig.find(
+        (config) => config.type === dropData.type
+      )
+      // Validate the dropped element type
+      if (!config) {
+        console.warn(`Unknown drop element type: ${dropData.type}`)
+        return
+      }
+      // Convert the drop position to the flow position
+      const dropPosition = screenToFlowPosition({
+        x: event.clientX,
+        y: event.clientY,
+      })
+
+      // Adjust position by subtracting the offset
+      const position = {
+        x: dropPosition.x - dropData.offsetX,
+        y: dropPosition.y - dropData.offsetY,
+      }
+
+      const newNode: Node = {
+        width: config.width,
+        height: config.height,
+        id: generateUUID(),
+        type: dropData.type,
+        position,
+        data: { ...config.defaultData, ...dropData.data },
+      }
+
+      setNodes((nds) => nds.concat(newNode))
+    },
+    [screenToFlowPosition, setNodes]
+  )
+
+  const onDragOver = useCallback((event: DragEvent) => {
+    event.preventDefault()
+    event.dataTransfer.dropEffect = "move"
+  }, [])
+
+  return { onDrop, onDragOver }
+}

library/lib/initialElements.ts

@@ -1,6 +1,6 @@
 import { type Edge, type Node } from "@xyflow/react"
 
-export const defaultNodes: Node[] = [
+export const initialNodes: Node[] = [
   {
     id: "1",
     type: "package",
@@ -100,9 +100,24 @@ export const defaultNodes: Node[] = [
       description: "Color description",
     },
   },
+
+  // Testing TitleAndDescription
+  // {
+  //   id: "99",
+  //   type: "titleAndDesctiption",
+  //   position: { x: -100, y: 100 },
+  //   width: 160,
+  //   height: 200,
+  //   selected: false,
+  //   data: {
+  //     title: "Title",
+  //     description:
+  //       "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
+  //   },
+  // },
 ]
 
-export const defaultEdges: Edge[] = [
+export const initialEdges: Edge[] = [
   {
     id: "1->2",
     source: "1",

library/lib/nodes/TitleAndDescriptionNode.tsx

@@ -0,0 +1,31 @@
+import { NodeProps, NodeResizer, type Node } from "@xyflow/react"
+import { DefaultNodeWrapper } from "@/nodes/wrappers"
+import { TitleAndDescriptionSVG } from "@/svgs"
+
+type Props = Node<{
+  description?: string
+  title: string
+}>
+
+export function TitleAndDesctiption({
+  selected,
+  width,
+  height,
+  data: { description, title },
+}: NodeProps<Props>) {
+  if (!width || !height) {
+    return null
+  }
+
+  return (
+    <DefaultNodeWrapper>
+      <TitleAndDescriptionSVG
+        width={width}
+        height={height}
+        title={title}
+        description={description || ""}
+      />
+      <NodeResizer isVisible={selected} minHeight={200} />
+    </DefaultNodeWrapper>
+  )
+}