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 {
+import type { AbstractCanvas2D, ColorValue, Rectangle } from '@maxgraph/core';
-  AbstractCanvas2D,
+import { CellRenderer, EllipseShape, RectangleShape } from '@maxgraph/core';
-  CellRenderer,
-  type ColorValue,
-  EllipseShape,
-  Rectangle,
-  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,18 +25,12 @@ import {
 } from '@maxgraph/core';
 import { registerCustomShapes } from './custom-shapes';
 
-// display the maxGraph version in the footer
+const initializeGraph = (container: HTMLElement) => {
-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
@@ -117,3 +111,11 @@ graph.batchUpdate(() => {
       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'));