48 object diagram extension

library/lib/App.tsx

@@ -29,23 +29,25 @@ import {
 } from "./hooks"
 import { diagramEdgeTypes } from "./edges"
 import "@/styles/app.css"
+import { DiagramType } from "./types"
 
 interface AppProps {
   onReactFlowInit: (instance: ReactFlowInstance) => void
+  diagramType: DiagramType
 }
 
-function App({ onReactFlowInit }: AppProps) {
+function App({ onReactFlowInit, diagramType }: AppProps) {
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes)
   const [edges, , onEdgesChange] = useEdgesState(initialEdges)
-  const { onDrop } = useDrop()
+  const { onDrop } = useDrop(diagramType)
   const { onDragOver } = useDragOver()
   const { onNodeDragStop } = useNodeDragStop(setNodes)
   const { onConnect } = useConnect()
   const { onReconnect } = useReconnect()
 
   return (
     <div style={{ display: "flex", width: "100%", height: "100%" }}>
-      <Sidebar />
+      <Sidebar selectedDiagramType={diagramType} />
       <SvgMarkers />
       <ReactFlow
         id="react-flow-library"
@@ -83,10 +85,10 @@ function App({ onReactFlowInit }: AppProps) {
   )
 }
 
-export function AppWithProvider({ onReactFlowInit }: AppProps) {
+export function AppWithProvider({ onReactFlowInit, diagramType }: AppProps) {
   return (
     <ReactFlowProvider>
-      <App onReactFlowInit={onReactFlowInit} />
+      <App onReactFlowInit={onReactFlowInit} diagramType={diagramType} />
     </ReactFlowProvider>
   )
 }

library/lib/components/Sidebar.tsx

@@ -1,10 +1,10 @@
-import React, { DragEvent } from "react"
+import React, { DragEvent, FC } from "react"
 import {
-  dropElementConfig,
+  dropElementConfigs,
   transformScale,
 } from "@/constants/dropElementConfig"
 import { DividerLine } from "./DividerLine"
-import { DropNodeData } from "@/types"
+import { DiagramType, DropNodeData } from "@/types"
 
 const onDragStart = (event: DragEvent, { type, data }: DropNodeData) => {
   const rect = (event.target as HTMLElement).getBoundingClientRect()
@@ -20,7 +20,11 @@ const onDragStart = (event: DragEvent, { type, data }: DropNodeData) => {
   event.dataTransfer.effectAllowed = "move"
 }
 
-export const Sidebar = () => {
+interface SidebarProps {
+  selectedDiagramType: DiagramType
+}
+
+export const Sidebar: FC<SidebarProps> = ({ selectedDiagramType }) => {
   return (
     <aside style={{ height: "100%", backgroundColor: "#f0f0f0" }}>
       <div
@@ -31,8 +35,8 @@ export const Sidebar = () => {
           margin: "10px",
         }}
       >
-        {dropElementConfig.map((config) => (
-          <React.Fragment key={`${config.type}_${config.name}`}>
+        {dropElementConfigs[selectedDiagramType].map((config) => (
+          <React.Fragment key={`${config.type}_${config.defaultData.name}`}>
             {/* Add separator before the Color Description */}
             {config.type === "colorDescription" && (
               <DividerLine style={{ margin: "3px 0" }} height={2} />
@@ -59,7 +63,7 @@ export const Sidebar = () => {
                 height: config.height,
                 ...config.defaultData,
                 transformScale,
-                id: "1",
+                id: "2",
               })}
             </div>
           </React.Fragment>

library/lib/components/index.ts

@@ -1,4 +1,4 @@
-export * from "./Text"
+export * from "./svgs/nodes/CustomText"
 export * from "./ThemedElements"
 export * from "./Sidebar"
 export * from "./DividerLine"

library/lib/components/Text.tsx → library/lib/components/svgs/nodes/CustomText.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC } from "react"
 
 type Props = {
   children: React.ReactNode
@@ -13,7 +13,7 @@ type Props = {
   noY?: boolean
 }
 
-export const Text: React.FC<Props & Record<string, unknown>> = ({
+export const CustomText: FC<Props & Record<string, unknown>> = ({
   children,
   fill,
   x = "50%",

library/lib/components/svgs/nodes/HeaderSection.tsx

@@ -0,0 +1,50 @@
+import { FC } from "react"
+import { ClassType } from "@/types"
+import { CustomText } from "./CustomText"
+
+interface HeaderSectionProps {
+  showStereotype: boolean
+  stereotype?: ClassType
+  name: string
+  width: number
+  font: string
+  headerHeight: number
+}
+
+export const HeaderSection: FC<HeaderSectionProps> = ({
+  showStereotype,
+  stereotype,
+  name,
+  width,
+  font,
+  headerHeight,
+}) => {
+  return (
+    <g>
+      <CustomText
+        x={width / 2}
+        y={headerHeight / 2}
+        dominantBaseline="middle"
+        textAnchor="middle"
+        font={font}
+        fontWeight="bold"
+        textDecoration={
+          stereotype === ClassType.ObjectClass ? "underline" : "normal"
+        }
+      >
+        {showStereotype && (
+          <tspan x={width / 2} dy="-8" fontSize="85%">
+            {`«${stereotype}»`}
+          </tspan>
+        )}
+        <tspan
+          x={width / 2}
+          dy={showStereotype ? "18" : "0"}
+          fontStyle={stereotype === ClassType.Abstract ? "italic" : "normal"}
+        >
+          {name}
+        </tspan>
+      </CustomText>
+    </g>
+  )
+}

library/lib/components/svgs/nodes/RowBlockSection.tsx

@@ -0,0 +1,35 @@
+import { ExtraElement } from "@/types"
+import { CustomText } from "./CustomText"
+import { FC } from "react"
+
+interface Props {
+  items: ExtraElement[]
+  padding: number
+  itemHeight: number
+  width: number
+  font: string
+  offsetFromTop: number
+}
+
+export const RowBlockSection: FC<Props> = ({
+  items,
+  padding,
+  itemHeight,
+  font,
+  offsetFromTop,
+}) => (
+  <g transform={`translate(0, ${offsetFromTop})`}>
+    {items.map((item, index) => (
+      <CustomText
+        key={item.id}
+        x={padding}
+        y={15 + index * itemHeight}
+        dominantBaseline="middle"
+        textAnchor="start"
+        font={font}
+      >
+        {item.name}
+      </CustomText>
+    ))}
+  </g>
+)

library/lib/components/svgs/nodes/SeparationLine.tsx

@@ -0,0 +1,18 @@
+import { LINE_WIDTH } from "@/constants"
+import { FC } from "react"
+
+interface SeparationLineProps {
+  y: number
+  width: number
+}
+
+export const SeparationLine: FC<SeparationLineProps> = ({ y, width }) => (
+  <line
+    x1="0"
+    x2={width}
+    y1={y}
+    y2={y}
+    stroke="black"
+    strokeWidth={LINE_WIDTH}
+  />
+)