refactor: simplify the code of `ts-example` (#255)

Replicate the improvements done in the `maxgraph-integration-examples`
repository:
- introduce function to simplify the main file
- Remove out dated comments
- Simplify the code and use "type" imports when possible

packages/ts-example/src/custom-shapes.ts

@@ -14,23 +14,17 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {
-  AbstractCanvas2D,
-  CellRenderer,
-  type ColorValue,
-  EllipseShape,
-  Rectangle,
-  RectangleShape,
-} from '@maxgraph/core';
+import type { AbstractCanvas2D, ColorValue, Rectangle } from '@maxgraph/core';
+import { CellRenderer, EllipseShape, RectangleShape } from '@maxgraph/core';
 
-export function registerCustomShapes(): void {
+export const registerCustomShapes = (): void => {
   console.info('Registering custom shapes...');
   // @ts-ignore TODO fix CellRenderer. Calls to this function are also marked as 'ts-ignore' in CellRenderer
   CellRenderer.registerShape('customRectangle', CustomRectangleShape);
   // @ts-ignore
   CellRenderer.registerShape('customEllipse', CustomEllipseShape);
   console.info('Custom shapes registered');
-}
+};
 
 class CustomRectangleShape extends RectangleShape {
   constructor(bounds: Rectangle, fill: ColorValue, stroke: ColorValue) {

packages/ts-example/src/main.ts

@@ -25,95 +25,97 @@ import {
 } from '@maxgraph/core';
 import { registerCustomShapes } from './custom-shapes';
 
+const initializeGraph = (container: HTMLElement) => {
+  // Disables the built-in context menu
+  InternalEvent.disableContextMenu(container);
+
+  const graph = new Graph(container);
+  graph.setPanning(true); // Use mouse right button for panning
+  new RubberBandHandler(graph); // Enables rubber band selection
+
+  // shapes and styles
+  registerCustomShapes();
+  // 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).
+  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',
+      10,
+      10,
+      100,
+      100
+    );
+    const vertex02 = graph.insertVertex(
+      parent,
+      null,
+      'a regular ellipse',
+      350,
+      90,
+      50,
+      50,
+      {
+        baseStyleNames: ['myEllipse'],
+        fillColor: 'orange',
+      }
+    );
+    // use the legacy insertEdge method
+    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({
+      parent,
+      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,
+      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' },
+    });
+  });
+};
+
 // display the maxGraph version in the footer
 const footer = <HTMLElement>document.querySelector('footer');
 footer.innerText = `Built with maxGraph ${Client.VERSION}`;
 
 // Creates the graph inside the given container
-const container = <HTMLElement>document.getElementById('graph-container');
-// Disables the built-in context menu
-InternalEvent.disableContextMenu(container);
-
-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();
-// 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).
-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',
-    10,
-    10,
-    100,
-    100
-  );
-  const vertex02 = graph.insertVertex(
-    parent,
-    null,
-    'a regular ellipse',
-    350,
-    90,
-    50,
-    50,
-    {
-      baseStyleNames: ['myEllipse'],
-      fillColor: 'orange',
-    }
-  );
-  // use the legacy insertEdge method
-  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({
-    parent,
-    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,
-    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' },
-  });
-});
+initializeGraph(<HTMLElement>document.querySelector('#graph-container'));