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,36 +25,30 @@ import {
 } from '@maxgraph/core';
 import { registerCustomShapes } from './custom-shapes';
 
-// display the maxGraph version in the footer
-const footer = <HTMLElement>document.querySelector('footer');
-footer.innerText = `Built with maxGraph ${Client.VERSION}`;
+const initializeGraph = (container: HTMLElement) => {
+  // Disables the built-in context menu
+  InternalEvent.disableContextMenu(container);
 
-// 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
+  new RubberBandHandler(graph); // Enables rubber band selection
 
-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', {
+  // 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();
+  // 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(() => {
+  // Adds cells to the model in a single step
+  graph.batchUpdate(() => {
     // use the legacy insertVertex method
     const vertex01 = graph.insertVertex(
       parent,
@@ -116,4 +110,12 @@ graph.batchUpdate(() => {
       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
+initializeGraph(<HTMLElement>document.querySelector('#graph-container'));