diff --git a/README.md b/README.md index 24ab480..433d058 100644 --- a/README.md +++ b/README.md @@ -31,6 +31,7 @@ Build the "shared" package: - [TypeScript with Lit](./projects/lit-ts/README.md) - [TypeScript with Parcel](./projects/parcel-ts/README.md) - [TypeScript with Rollup](./projects/rollup-ts/README.md) +- [TypeScript with Rsbuild](./projects/rsbuild-ts/README.md) - [TypeScript with SvelteKit](./projects/sveltekit-ts/README.md) - [TypeScript with ViteJs](./projects/vitejs-ts/README.md) diff --git a/projects/_shared/src/generate-graph.ts b/projects/_shared/src/generate-graph.ts index c05fec7..14e1cfb 100644 --- a/projects/_shared/src/generate-graph.ts +++ b/projects/_shared/src/generate-graph.ts @@ -1,6 +1,8 @@ import { constants, + getDefaultPlugins, Graph, + GraphDataModel, InternalEvent, Perimeter, RubberBandHandler, @@ -11,9 +13,14 @@ export const initializeGraph = (container: HTMLElement) => { // Disables the built-in context menu InternalEvent.disableContextMenu(container); - const graph = new Graph(container); + const graph = new Graph(container, new GraphDataModel(), [ + ...getDefaultPlugins(), + RubberBandHandler, // Enables rubber band selection + ]); graph.setPanning(true); // Use mouse right button for panning - new RubberBandHandler(graph); // Enables rubber band selection + + // Customize the rubber band selection + graph.getPlugin('RubberBandHandler').fadeOut = true; // shapes and styles registerCustomShapes(); @@ -66,7 +73,7 @@ export const initializeGraph = (container: HTMLElement) => { value: 'a custom rectangle', position: [20, 200], size: [100, 100], - style: { shape: 'customRectangle' }, + style: {shape: 'customRectangle'}, }); // use the new insertVertex method using position and size parameters const vertex12 = graph.insertVertex({ @@ -87,7 +94,7 @@ export const initializeGraph = (container: HTMLElement) => { value: 'another edge', source: vertex11, target: vertex12, - style: { endArrow: 'block' }, + style: {endArrow: 'block'}, }); }); }