From f58ec67e5fcf694abe79cbada5df5fb0681964bb Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Thu, 16 Nov 2023 11:53:47 +0100 Subject: [PATCH] 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 +- packages/ts-example/src/main.ts | 176 ++++++++++++----------- 2 files changed, 93 insertions(+), 97 deletions(-) diff --git a/packages/ts-example/src/custom-shapes.ts b/packages/ts-example/src/custom-shapes.ts index 6db3b74db..be5f8f74e 100644 --- a/packages/ts-example/src/custom-shapes.ts +++ b/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) { diff --git a/packages/ts-example/src/main.ts b/packages/ts-example/src/main.ts index 95b531da1..446bf1dfb 100644 --- a/packages/ts-example/src/main.ts +++ b/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 = document.querySelector('footer'); footer.innerText = `Built with maxGraph ${Client.VERSION}`; // Creates the graph inside the given container -const container = 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(document.querySelector('#graph-container'));