Merge branch 'main' into 74-edit-edge

library/lib/App.tsx

@@ -12,7 +12,11 @@ import {
   useEdgesState,
 } from "@xyflow/react"
 import "@xyflow/react/dist/style.css"
-import { MAX_SCALE_TO_ZOOM_IN, MIN_SCALE_TO_ZOOM_OUT } from "./constants"
+import {
+  HALF_OF_BACKGROUND_BOX_LENGHT_IN_PX,
+  MAX_SCALE_TO_ZOOM_IN,
+  MIN_SCALE_TO_ZOOM_OUT,
+} from "./constants"
 import { initialEdges, initialNodes } from "./initialElements"
 import { Sidebar, SvgMarkers } from "@/components"
 import { diagramNodeTypes } from "./nodes"
@@ -25,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"
@@ -66,6 +72,10 @@ function App({ onReactFlowInit }: AppProps) {
         minZoom={MIN_SCALE_TO_ZOOM_OUT}
         maxZoom={MAX_SCALE_TO_ZOOM_IN}
         snapToGrid
+        snapGrid={[
+          HALF_OF_BACKGROUND_BOX_LENGHT_IN_PX,
+          HALF_OF_BACKGROUND_BOX_LENGHT_IN_PX,
+        ]}
       >
         <Background variant={BackgroundVariant.Lines} />
         <MiniMap zoomable pannable />
@@ -75,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/ThemedElements.tsx

@@ -8,8 +8,8 @@ const defaultBackground = "#000000" // Example: black
 
 // Themed Polyline
 export const ThemedPolyline = styled.polyline`
-  fill: ${(props) => props.fill || defaultBackground};
-  stroke: ${(props) => props.stroke || defaultPrimaryContrast};
+  fill: ${(props) => props.fill};
+  stroke: ${(props) => props.stroke};
 `
 
 ThemedPolyline.defaultProps = {
@@ -19,8 +19,8 @@ ThemedPolyline.defaultProps = {
 
 // Themed Path
 export const ThemedPath = styled.path`
-  fill: ${(props) => props.fill || defaultBackground};
-  stroke: ${(props) => props.stroke || defaultPrimaryContrast};
+  fill: ${(props) => props.fill};
+  stroke: ${(props) => props.stroke};
 `
 
 ThemedPath.defaultProps = {
@@ -41,8 +41,8 @@ ThemedPathContrast.defaultProps = {
 
 // Themed Rect
 export const ThemedRect = styled.rect`
-  fill: ${(props) => props.fill || defaultBackground};
-  stroke: ${(props) => props.stroke || defaultPrimaryContrast};
+  fill: ${(props) => props.fill};
+  stroke: ${(props) => props.stroke};
 `
 
 ThemedRect.defaultProps = {
@@ -52,8 +52,8 @@ ThemedRect.defaultProps = {
 
 // Themed Rect Contrast
 export const ThemedRectContrast = styled.rect`
-  fill: ${(props) => props.fill || defaultPrimaryContrast};
-  stroke: ${(props) => props.stroke || defaultBackground};
+  fill: ${(props) => props.fill};
+  stroke: ${(props) => props.stroke};
 `
 
 ThemedRectContrast.defaultProps = {
@@ -63,8 +63,8 @@ ThemedRectContrast.defaultProps = {
 
 // Themed Circle
 export const ThemedCircle = styled.circle`
-  fill: ${(props) => props.fill || defaultBackground};
-  stroke: ${(props) => props.stroke || defaultPrimaryContrast};
+  fill: ${(props) => props.fill};
+  stroke: ${(props) => props.stroke};
 `
 
 ThemedCircle.defaultProps = {
@@ -74,8 +74,8 @@ ThemedCircle.defaultProps = {
 
 // Themed Circle Contrast
 export const ThemedCircleContrast = styled.circle`
-  fill: ${(props) => props.fill || defaultPrimaryContrast};
-  stroke: ${(props) => props.stroke || defaultBackground};
+  fill: ${(props) => props.fill};
+  stroke: ${(props) => props.stroke};
 `
 
 ThemedCircleContrast.defaultProps = {
@@ -85,8 +85,8 @@ ThemedCircleContrast.defaultProps = {
 
 // Themed Ellipse
 export const ThemedEllipse = styled.ellipse`
-  fill: ${(props) => props.fill || defaultBackground};
-  stroke: ${(props) => props.stroke || defaultPrimaryContrast};
+  fill: ${(props) => props.fill};
+  stroke: ${(props) => props.stroke};
 `
 
 ThemedEllipse.defaultProps = {
@@ -96,7 +96,7 @@ ThemedEllipse.defaultProps = {
 
 // Themed Line
 export const ThemedLine = styled.line`
-  stroke: ${(props) => props.stroke || defaultPrimaryContrast};
+  stroke: ${(props) => props.stroke};
 `
 
 ThemedLine.defaultProps = {

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,14 +13,14 @@ 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%",
   y = "50%",
   dominantBaseline = "middle",
   textAnchor = "middle",
-  fontWeight = "500",
+  fontWeight = "400",
   pointerEvents = "none",
   noX = false,
   noY = false,

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}
+  />
+)