refactor: improve examples in README and ts-example (#223)

ts-example
  - improve the position of the ellipse labels
  - introduce a shared style for ellipse vertices
  - bump vite from 4.3.9 to 4.4.2
  - work when not deployed in the "root" context of the site

README
  - improve the position of the ellipse label
  - display rounded orthogonal edge
  - fix the style configuration to match the rendering shown in the gif

README.md

@@ -78,21 +78,29 @@ graph.batchUpdate(() => {
     parent,
     position: [10, 10],
     size: [100, 100],
-    style: { shape: 'customRectangle' },
-    value: 'a regular rectangle',
+    value: 'rectangle',
   });
   const vertex02 = graph.insertVertex({
     parent,
     position: [350, 90],
     size: [50, 50],
-    style: { shape: 'ellipse', fillColor: 'orange' },
-    value: 'a regular ellipse',
+    style: {
+      fillColor: 'orange',
+      shape: 'ellipse',
+      verticalAlign: 'top',
+      verticalLabelPosition: 'bottom',
+    },
+    value: 'ellipse',
   });
   graph.insertEdge({
     parent,
     source: vertex01,
     target: vertex02,
-    value: 'a regular edge',
+    value: 'edge',
+    style: {
+      edgeStyle: 'orthogonalEdgeStyle',
+      rounded: true,
+    },
   });
 });
 ```

packages/core/webpack.config.js

@@ -39,7 +39,7 @@ module.exports = merge(base, {
       // include: /dir/,
       // add errors to webpack instead of warnings
       failOnError: true,
-      // allow import cycles that include an asyncronous import,
+      // allow import cycles that include an asynchronous import,
       // e.g. via import(/* webpackMode: "weak" */ './file.js')
       allowAsyncCycles: false,
       // set the current working directory for displaying module paths

packages/ts-example/package.json

@@ -5,13 +5,13 @@
   "version": "0.0.0",
   "scripts": {
     "dev": "vite",
-    "build": "tsc --version && tsc && vite build",
+    "build": "tsc --version && tsc && vite build --base ./",
     "preview": "vite preview"
   },
   "dependencies": {
     "@maxgraph/core": "*"
   },
   "devDependencies": {
-    "vite": "~4.3.9"
+    "vite": "~4.4.2"
   }
 }

packages/ts-example/src/main.ts

@@ -15,7 +15,13 @@ limitations under the License.
 */
 
 import './style.css';
-import { Client, Graph, InternalEvent, RubberBandHandler } from '@maxgraph/core';
+import {
+  Client,
+  Graph,
+  InternalEvent,
+  Perimeter,
+  RubberBandHandler,
+} from '@maxgraph/core';
 import { registerCustomShapes } from './custom-shapes';
 
 // display the maxGraph version in the footer
@@ -34,10 +40,13 @@ new RubberBandHandler(graph); // Enables rubber band selection
 
 // shapes and styles
 registerCustomShapes();
-// 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
-graph.getStylesheet().getDefaultEdgeStyle().edgeStyle = '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).
@@ -63,10 +72,19 @@ graph.batchUpdate(() => {
     90,
     50,
     50,
-    { fillColor: 'orange', shape: 'ellipse', verticalLabelPosition: 'bottom' }
+    {
+      baseStyleNames: ['myEllipse'],
+      fillColor: 'orange',
+    }
   );
   // use the legacy insertEdge method
-  graph.insertEdge(parent, null, 'a regular edge', vertex01, vertex02);
+  graph.insertEdge(parent, null, 'an orthogonal style 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 vertex using custom shapes using the new insertVertex method
   const vertex11 = graph.insertVertex({
@@ -85,8 +103,8 @@ graph.batchUpdate(() => {
     width: 70,
     height: 70,
     style: {
+      baseStyleNames: ['myEllipse'],
       shape: 'customEllipse',
-      verticalLabelPosition: 'bottom',
     },
   });
   // use the new insertEdge method
@@ -95,6 +113,6 @@ graph.batchUpdate(() => {
     value: 'another edge',
     source: vertex11,
     target: vertex12,
-    style: { endArrow: 'block', rounded: true },
+    style: { endArrow: 'block' },
   });
 });

packages/ts-example/vite.config.js

@@ -27,7 +27,7 @@ export default defineConfig(({ mode }) => {
           },
         },
       },
-      chunkSizeWarningLimit: 562, // maxgraph
+      chunkSizeWarningLimit: 562, // @maxgraph/core
     },
   };
 });