refactor: declare RubberBandHandler as a plugin (#148)

Also enable `fadeOut` option.
Add missing link to the Rsbuild project in the main README.

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)
 

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