Skip to content
Snippets Groups Projects
Commit b25f31bc authored by Jean-Clement Gallardo's avatar Jean-Clement Gallardo
Browse files

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
parent 7cf8d9bc
No related branches found
No related tags found
No related merge requests found
......@@ -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(() => {
......
......@@ -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
*/
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment