Update NetworkComponent to start brush and update network for brush + add...

Update NetworkComponent to start brush and update network for brush + add updateNetworkForBrush function -> brush now use reactive instead props

src/components/NetworkComponent.vue

@@ -34,7 +34,7 @@
 <script setup lang="ts">
 // Import -----------
 // Utils ----------
-import { defineBrush } from '../composables/UseGraphManager';
+import { defineBrush, updateNetworkForBrush } from '../composables/UseGraphManager';
 import { initZoom, stopZoom } from "../composables/UseZoomSvg";
 import { rescale } from "../composables/UseZoomSvg";
 // Type -----------
@@ -138,22 +138,23 @@ function mouseLeaveNode(Event: MouseEvent, node: Node): void {
 onMounted(async () => {
 	const checkDOM = document.querySelector('.globalviz');
 	if (checkDOM) {
-		console.log('checkDOM pass');
 		if (networkSvg.value) {
 			zoomStatus.instance = initZoom(networkSvg.value as SVGElement, graphG.value as SVGGElement);
 			emit('initZoom', zoomStatus.instance);
-			defineBrush(globalViz.value as HTMLElement, brushG.value as SVGGElement, props.network, props.graphStyleProperties?.nodeStyles as { [key: string]: NodeStyle }, zoomStatus.instance);
-			zoomStatus.autoRescale = await nextTick().then(() => {return true});
+			zoomStatus.autoRescale = await nextTick().then(() => {
+				defineBrush(globalViz.value as HTMLElement, brushG.value as SVGGElement, props.network, props.graphStyleProperties?.nodeStyles as { [key: string]: NodeStyle }, zoomStatus.instance);
+				return true
+			});
 		}
 	}
 });
 
-onUpdated(() => {
+onUpdated(async () => {
 	if (networkSvg.value && zoomStatus.instance === undefined) {
-		console.log('onUpdated, initZoom');
 		zoomStatus.instance = initZoom(networkSvg.value as SVGElement, graphG.value as SVGGElement);
 		emit('initZoom', zoomStatus.instance);
 	}
+	updateNetworkForBrush(props.network);
 });
 
 onBeforeUnmount(() => {

src/composables/UseGraphManager.ts

@@ -4,6 +4,11 @@ import type { NodeStyle } from "../types/NodeStyle";
 import { screenSize, applyInverseTransform } from "../utils/GraphUtils";
 import { getNodeStyle } from "../utils/NodeStyles";
 import * as d3 from 'd3';
+import { reactive } from "vue";
+
+const brushProperties = reactive({
+  nodes: {} as {[key: string]: Node}
+})
 
 /**
  * Change a boolean to switch between two modes. For example between selection and zoom for graph panel
@@ -36,6 +41,8 @@ export function defineBrush(globalViz: HTMLElement, brushG: SVGGElement, network
   const svgWidth = svgSize[0] as number;
   const svgHeight = svgSize[1] as number;
 
+  brushProperties.nodes = network.nodes;
+
   function endBrush(e: any) {
     if (!e.selection){
       return; // Prevent infinity loop
@@ -52,8 +59,8 @@ export function defineBrush(globalViz: HTMLElement, brushG: SVGGElement, network
       // Handle selection logic here
 
       if (extent[1][0] - extent[0][0] > 20 || extent[1][1] - extent[0][1] > 20) {
-        Object.keys(network.nodes).forEach((nodeID: string) => {
-          const node = network.nodes[nodeID];
+        Object.keys(brushProperties.nodes).forEach((nodeID: string) => {
+          const node = brushProperties.nodes[nodeID];
           const nodeStyle = getNodeStyle(node, styles);
           
           const xCenter = node.x + (nodeStyle.width as number / 2);
@@ -61,14 +68,14 @@ export function defineBrush(globalViz: HTMLElement, brushG: SVGGElement, network
           
           if ((realX0 <= xCenter && xCenter < realX1)
             && (realY0 <= yCenter && yCenter < realY1)){
-              if (network.nodes[nodeID]) {
-                if (network.nodes[nodeID].selected) {
-                  network.nodes[nodeID].selected = true;
+              if (brushProperties.nodes[nodeID]) {
+                if (brushProperties.nodes[nodeID].selected) {
+                  brushProperties.nodes[nodeID].selected = true;
                 } else {
-                  network.nodes[nodeID].selected = true;
+                  brushProperties.nodes[nodeID].selected = true;
                 }
               } else {
-                network.nodes[nodeID].selected = true;
+                brushProperties.nodes[nodeID].selected = true;
               }
           }
         });
@@ -101,6 +108,13 @@ export function defineBrush(globalViz: HTMLElement, brushG: SVGGElement, network
     });
 }
 
+/**
+ * Update network for brush functions
+ */
+export function updateNetworkForBrush(network: Network): void {
+  brushProperties.nodes = network.nodes;
+}
+
 /**
  * Remove brush tag and functions
  */