From 7cf493646a3cf5d890322b58d73e965c641da7dc Mon Sep 17 00:00:00 2001
From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com>
Date: Tue, 20 Aug 2024 09:21:21 +0200
Subject: [PATCH] refactor: declare RubberBandHandler as a plugin (#148)

Also enable `fadeOut` option.
Add missing link to the Rsbuild project in the main README.
---
 README.md                              |  1 +
 projects/_shared/src/generate-graph.ts | 15 +++++++++++----
 2 files changed, 12 insertions(+), 4 deletions(-)

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>('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'},
         });
     });
 }