32 create new diagram from template

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"
@@ -66,6 +70,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 />

library/lib/constants/canvasConstants.ts

@@ -1,3 +1,4 @@
 export const MIN_SCALE_TO_ZOOM_OUT = 0.4
 export const MAX_SCALE_TO_ZOOM_IN = 2.5
 export const MOUSE_UP_OFFSET_IN_PIXELS = 5
+export const HALF_OF_BACKGROUND_BOX_LENGHT_IN_PX = 10

library/lib/hooks/useDrop.ts

@@ -25,10 +25,13 @@ export const useDrop = () => {
         return
       }
       // Convert the drop position to the flow position
-      const dropPosition = screenToFlowPosition({
-        x: event.clientX,
-        y: event.clientY,
-      })
+      const dropPosition = screenToFlowPosition(
+        {
+          x: event.clientX,
+          y: event.clientY,
+        },
+        { snapToGrid: true }
+      )
 
       // Adjust position by subtracting the offset
       const position = {

standalone/webapp/assets/diagramTemplates/Adapter.json

@@ -0,0 +1,110 @@
+{
+  "version": "apollon2",
+  "title": "Adapter",
+  "nodes": [
+    {
+      "width": 190,
+      "height": 82,
+      "id": "2eb1ceb2-266e-4669-89f1-c61e246cb10c",
+      "type": "class",
+      "position": { "x": 270, "y": 120 },
+      "data": {
+        "name": "Adapter",
+        "methods": [
+          { "id": "96d06d69-c8d2-4ea3-8d6b-d05c22a03286", "name": "+ method()" }
+        ],
+        "attributes": []
+      },
+      "selected": false,
+      "measured": { "width": 190, "height": 82 },
+      "dragging": true,
+      "resizing": false
+    },
+    {
+      "width": 160,
+      "height": 82,
+      "id": "7052e703-263f-4df5-95e0-3558793849af",
+      "type": "class",
+      "position": { "x": 120, "y": 330 },
+      "data": {
+        "name": "Adaptee1",
+        "methods": [
+          { "id": "964c1c16-441b-4d1e-99c3-406f3a37f50b", "name": "+ method()" }
+        ],
+        "attributes": []
+      },
+      "selected": false,
+      "measured": { "width": 160, "height": 82 },
+      "dragging": true,
+      "resizing": false
+    },
+    {
+      "width": 167.20445251464844,
+      "height": 112,
+      "id": "286257b1-ebd3-424f-b3e4-c1c2a722531b",
+      "type": "class",
+      "position": { "x": -90, "y": 105 },
+      "data": {
+        "name": "Client",
+        "methods": [
+          { "id": "964c1c16-441b-4d1e-99c3-406f3a37f50b", "name": "+ doWork()" }
+        ],
+        "attributes": [
+          {
+            "id": "fe5106d4-60eb-4c80-97b0-b5b8b8f1f80d",
+            "name": "+ adapter: Adapter"
+          }
+        ]
+      },
+      "selected": false,
+      "measured": { "width": 167, "height": 112 },
+      "dragging": true
+    },
+    {
+      "width": 160,
+      "height": 82,
+      "id": "2fecb039-1b0d-4de9-8820-fa120c51f4f6",
+      "type": "class",
+      "position": { "x": 435, "y": 330 },
+      "data": {
+        "name": "Adaptee2",
+        "methods": [
+          { "id": "964c1c16-441b-4d1e-99c3-406f3a37f50b", "name": "+ method()" }
+        ],
+        "attributes": []
+      },
+      "selected": false,
+      "measured": { "width": 160, "height": 82 },
+      "dragging": true
+    }
+  ],
+  "edges": [
+    {
+      "source": "286257b1-ebd3-424f-b3e4-c1c2a722531b",
+      "sourceHandle": "right",
+      "target": "2eb1ceb2-266e-4669-89f1-c61e246cb10c",
+      "targetHandle": "left",
+      "type": "uniassociation",
+      "selected": false,
+      "id": "xy-edge__286257b1-ebd3-424f-b3e4-c1c2a722531bright-2eb1ceb2-266e-4669-89f1-c61e246cb10cleft"
+    },
+    {
+      "source": "7052e703-263f-4df5-95e0-3558793849af",
+      "sourceHandle": "top",
+      "target": "2eb1ceb2-266e-4669-89f1-c61e246cb10c",
+      "targetHandle": "bottom",
+      "id": "1737993042486-7052e703-263f-4df5-95e0-3558793849af-2eb1ceb2-266e-4669-89f1-c61e246cb10c",
+      "type": "inheritance",
+      "selected": false
+    },
+    {
+      "source": "2fecb039-1b0d-4de9-8820-fa120c51f4f6",
+      "sourceHandle": "top",
+      "target": "2eb1ceb2-266e-4669-89f1-c61e246cb10c",
+      "targetHandle": "bottom",
+      "id": "1737993045593-2fecb039-1b0d-4de9-8820-fa120c51f4f6-2eb1ceb2-266e-4669-89f1-c61e246cb10c",
+      "type": "inheritance",
+      "selected": false
+    }
+  ]
+}

standalone/webapp/assets/diagramTemplates/Bridge.json

@@ -0,0 +1,190 @@
+{
+  "version": "apollon2",
+  "title": "Bridge",
+  "nodes": [
+    {
+      "width": 190,
+      "height": 82,
+      "id": "2eb1ceb2-266e-4669-89f1-c61e246cb10c",
+      "type": "class",
+      "position": { "x": 270, "y": 120 },
+      "data": {
+        "name": "Abstraction",
+        "methods": [
+          {
+            "id": "96d06d69-c8d2-4ea3-8d6b-d05c22a03286",
+            "name": "+ operation()"
+          }
+        ],
+        "attributes": []
+      },
+      "selected": false,
+      "measured": { "width": 190, "height": 82 },
+      "dragging": true,
+      "resizing": false
+    },
+    {
+      "width": 160,
+      "height": 82,
+      "id": "7052e703-263f-4df5-95e0-3558793849af",
+      "type": "class",
+      "position": { "x": 120, "y": 330 },
+      "data": {
+        "name": "Adaptee1",
+        "methods": [
+          { "id": "964c1c16-441b-4d1e-99c3-406f3a37f50b", "name": "+ method()" }
+        ],
+        "attributes": []
+      },
+      "selected": false,
+      "measured": { "width": 160, "height": 82 },
+      "dragging": true,
+      "resizing": false
+    },
+    {
+      "width": 167.20445251464844,
+      "height": 52,
+      "id": "286257b1-ebd3-424f-b3e4-c1c2a722531b",
+      "type": "class",
+      "position": { "x": -90, "y": 135 },
+      "data": { "name": "Client", "methods": [], "attributes": [] },
+      "selected": false,
+      "measured": { "width": 167, "height": 52 },
+      "dragging": true
+    },
+    {
+      "width": 160,
+      "height": 82,
+      "id": "2fecb039-1b0d-4de9-8820-fa120c51f4f6",
+      "type": "class",
+      "position": { "x": 435, "y": 330 },
+      "data": {
+        "name": "Adaptee2",
+        "methods": [
+          { "id": "964c1c16-441b-4d1e-99c3-406f3a37f50b", "name": "+ method()" }
+        ],
+        "attributes": []
+      },
+      "selected": false,
+      "measured": { "width": 160, "height": 82 },
+      "dragging": true
+    },
+    {
+      "width": 160,
+      "height": 82,
+      "id": "889cb1f6-175a-45c0-ae06-d1acab5dcbdc",
+      "type": "class",
+      "position": { "x": 765, "y": 120 },
+      "data": {
+        "name": "Implementor",
+        "methods": [
+          {
+            "id": "964c1c16-441b-4d1e-99c3-406f3a37f50b",
+            "name": "+ operationImpl()"
+          }
+        ],
+        "attributes": []
+      },
+      "selected": false,
+      "measured": { "width": 160, "height": 82 },
+      "dragging": true
+    },
+    {
+      "width": 198.02259826660156,
+      "height": 82,
+      "id": "2e018906-a3db-4308-977b-175ace3c3185",
+      "type": "class",
+      "position": { "x": 630, "y": 330 },
+      "data": {
+        "name": "ConcreteImplementor1",
+        "methods": [
+          {
+            "id": "964c1c16-441b-4d1e-99c3-406f3a37f50b",
+            "name": "+ operationImpl()"
+          }
+        ],
+        "attributes": []
+      },
+      "selected": false,
+      "measured": { "width": 198, "height": 82 },
+      "dragging": true
+    },
+    {
+      "width": 198.02259826660156,
+      "height": 82,
+      "id": "1bb3eed4-bcc2-45af-9b6e-62020b9c439d",
+      "type": "class",
+      "position": { "x": 900, "y": 330 },
+      "data": {
+        "name": "ConcreteImplementor2",
+        "methods": [
+          {
+            "id": "964c1c16-441b-4d1e-99c3-406f3a37f50b",
+            "name": "+ operationImpl()"
+          }
+        ],
+        "attributes": []
+      },
+      "selected": false,
+      "measured": { "width": 197.97740173339844, "height": 82 },
+      "dragging": true,
+      "resizing": false
+    }
+  ],
+  "edges": [
+    {
+      "source": "286257b1-ebd3-424f-b3e4-c1c2a722531b",
+      "sourceHandle": "right",
+      "target": "2eb1ceb2-266e-4669-89f1-c61e246cb10c",
+      "targetHandle": "left",
+      "type": "biassociation",
+      "selected": false,
+      "id": "xy-edge__286257b1-ebd3-424f-b3e4-c1c2a722531bright-2eb1ceb2-266e-4669-89f1-c61e246cb10cleft"
+    },
+    {
+      "source": "7052e703-263f-4df5-95e0-3558793849af",
+      "sourceHandle": "top",
+      "target": "2eb1ceb2-266e-4669-89f1-c61e246cb10c",
+      "targetHandle": "bottom",
+      "id": "1737993042486-7052e703-263f-4df5-95e0-3558793849af-2eb1ceb2-266e-4669-89f1-c61e246cb10c",
+      "type": "inheritance",
+      "selected": false
+    },
+    {
+      "source": "2fecb039-1b0d-4de9-8820-fa120c51f4f6",
+      "sourceHandle": "top",
+      "target": "2eb1ceb2-266e-4669-89f1-c61e246cb10c",
+      "targetHandle": "bottom",
+      "id": "1737993045593-2fecb039-1b0d-4de9-8820-fa120c51f4f6-2eb1ceb2-266e-4669-89f1-c61e246cb10c",
+      "type": "inheritance",
+      "selected": false
+    },
+    {
+      "source": "2e018906-a3db-4308-977b-175ace3c3185",
+      "sourceHandle": "top",
+      "target": "889cb1f6-175a-45c0-ae06-d1acab5dcbdc",
+      "targetHandle": "bottom",
+      "id": "1737993203512-2e018906-a3db-4308-977b-175ace3c3185-889cb1f6-175a-45c0-ae06-d1acab5dcbdc",
+      "type": "inheritance",
+      "selected": false
+    },
+    {
+      "source": "1bb3eed4-bcc2-45af-9b6e-62020b9c439d",
+      "sourceHandle": "top",
+      "target": "889cb1f6-175a-45c0-ae06-d1acab5dcbdc",
+      "targetHandle": "bottom",
+      "id": "1737993210921-1bb3eed4-bcc2-45af-9b6e-62020b9c439d-889cb1f6-175a-45c0-ae06-d1acab5dcbdc",
+      "type": "inheritance",
+      "selected": false
+    },
+    {
+      "source": "2eb1ceb2-266e-4669-89f1-c61e246cb10c",
+      "sourceHandle": "right",
+      "target": "889cb1f6-175a-45c0-ae06-d1acab5dcbdc",
+      "targetHandle": "left",
+      "id": "1737993220311-2eb1ceb2-266e-4669-89f1-c61e246cb10c-889cb1f6-175a-45c0-ae06-d1acab5dcbdc",
+      "type": "biassociation",
+      "selected": false
+    }
+  ]
+}