refactor(routes/+pages.svelte): adhere to maxGraph/maxGraph#223

maxGraph · Sep 19, 2023 · 58d9e33 · 58d9e33
1 parent f4b0d23
commit 58d9e33
Showing 1 changed file with 54 additions and 34 deletions.
diff --git a/projects/sveltekit-ts/src/routes/+page.svelte b/projects/sveltekit-ts/src/routes/+page.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-  import type { CellStyle } from '@maxgraph/core';
-  import { Graph, InternalEvent, RubberBandHandler } from '@maxgraph/core';
+  import {
+    Graph,
+    InternalEvent,
+    Perimeter,
+    RubberBandHandler,
+  } from '@maxgraph/core';
   import { onMount } from 'svelte';
   import { registerCustomShapes } from '$lib/custom-shapes';
 
@@ -12,26 +16,29 @@
 
     const graph = new Graph(container);
     graph.setPanning(true); // Use mouse right button for panning
-
-    // WARN: as the maxGraph css files are not available in the npm package (at least for now), dedicated CSS class must be defined in style.css
     new RubberBandHandler(graph); // Enables rubber band selection
 
+    // shapes and styles
     registerCustomShapes();
-
-    // @ts-ignore TODO fix TS2532: Object is possibly 'undefined'.
-    graph.getStylesheet().getDefaultEdgeStyle().edgeStyle =
-      'orthogonalEdgeStyle'; // TODO use constants.EDGESTYLE instead of 'orthogonalEdgeStyle'
+    // create a dedicated style for "ellipse" to share properties
+    graph.getStylesheet().putCellStyle('myEllipse', {
+      perimeter: Perimeter.EllipsePerimeter,
+      shape: 'ellipse',
+      verticalAlign: 'top',
+      verticalLabelPosition: 'bottom',
+    });
 
     // Gets the default parent for inserting new cells. This
-    // is normally the first child of the root (ie. layer 0).
+    // is normally the first child of the root (ie. layer 0)
     const parent = graph.getDefaultParent();
 
     // Adds cells to the model in a single step
     graph.batchUpdate(() => {
+      // use the legacy insertVertex method
       const vertex01 = graph.insertVertex(
         parent,
         null,
-        'a regular rectangle',
+        'rectangle',
         10,
         10,
         100,
@@ -40,41 +47,54 @@
       const vertex02 = graph.insertVertex(
         parent,
         null,
-        'a regular ellipse',
+        'ellipse',
         350,
         90,
         50,
         50,
         {
-          shape: 'ellipse',
+          baseStyleNames: ['myEllipse'],
           fillColor: 'orange',
         }
       );
-      graph.insertEdge(parent, null, 'a regular edge', vertex01, vertex02);
+      // use the legacy insertEdge method
+      graph.insertEdge(parent, null, 'edge', vertex01, vertex02, {
+        // TODO cannot use constants.EDGESTYLE.ORTHOGONAL
+        // TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided.
+        // See https://github.com/maxGraph/maxGraph/issues/205
+        edgeStyle: 'orthogonalEdgeStyle',
+        rounded: true,
+      });
 
-      // insert vertices using custom shapes
-      // TODO type issue in CellStyle type, shape should allow string to manage custom implementation
-      const vertex11 = graph.insertVertex(
+      // insert vertex using custom shapes using the new insertVertex method
+      const vertex11 = graph.insertVertex({
         parent,
-        null,
-        'a custom rectangle',
-        20,
-        200,
-        100,
-        100,
-        <CellStyle>{ shape: 'customRectangle' }
-      );
-      const vertex12 = graph.insertVertex(
+        value: 'a custom rectangle',
+        position: [20, 200],
+        size: [100, 100],
+        style: { shape: 'customRectangle' },
+      });
+      // use the new insertVertex method using position and size parameters
+      const vertex12 = graph.insertVertex({
         parent,
-        null,
-        'a custom ellipse',
-        150,
-        350,
-        70,
-        70,
-        <CellStyle>{ shape: 'customEllipse' }
-      );
-      graph.insertEdge(parent, null, 'another edge', vertex11, vertex12);
+        value: 'a custom ellipse',
+        x: 150,
+        y: 350,
+        width: 70,
+        height: 70,
+        style: {
+          baseStyleNames: ['myEllipse'],
+          shape: 'customEllipse',
+        },
+      });
+      // use the new insertEdge method
+      graph.insertEdge({
+        parent,
+        value: 'another edge',
+        source: vertex11,
+        target: vertex12,
+        style: { endArrow: 'block' },
+      });
     });
   });
 </script>