Skip to content

Use D3 on tick to set the position of the nodes back to the SVG #325

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JackWilb merged 3 commits into from
Jul 29, 2022
Merged

Use D3 on tick to set the position of the nodes back to the SVG #325

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d834992
Disable no param reassign for props
JackWilb Jul 29, 2022
d385e7f
Set node position back to svg in on tick
JackWilb Jul 29, 2022
282e4a6
Set some values only once, not on each tick
JackWilb Jul 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ module.exports = {
'import/prefer-default-export': ['off'],
'no-underscore-dangle': ['error', { allow: ['_id', '_from', '_to', '_key'] }],
...a11yOff,
'no-param-reassign': ['error', { props: false }],
},

parserOptions: {
Expand Down
4 changes: 0 additions & 4 deletions src/components/ContextMenu.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,7 @@ function pinSelectedNodes() {
network.value.nodes
.filter((node) => selectedNodes.value.has(node._id))
.forEach((node) => {
// eslint-disable-next-line no-param-reassign
node.fx = node.x;
// eslint-disable-next-line no-param-reassign
node.fy = node.y;
});
}
Expand All @@ -22,9 +20,7 @@ function unPinSelectedNodes() {
network.value.nodes
.filter((node) => selectedNodes.value.has(node._id))
.forEach((node) => {
// eslint-disable-next-line no-param-reassign
delete node.fx;
// eslint-disable-next-line no-param-reassign
delete node.fy;
});
}
Expand Down
62 changes: 20 additions & 42 deletions src/components/MultiLink.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,25 +163,17 @@ function dragNode(node: Node, event: MouseEvent) {
network.value.nodes
.filter((innerNode) => selectedNodes.value.has(innerNode._id) && innerNode._id !== node._id)
.forEach((innerNode) => {
// eslint-disable-next-line no-param-reassign
innerNode.x = (innerNode.x || 0) + dx;
// eslint-disable-next-line no-param-reassign
innerNode.y = (innerNode.y || 0) + dy;
// eslint-disable-next-line no-param-reassign
innerNode.fx = (innerNode.fx || innerNode.x || 0) + dx;
// eslint-disable-next-line no-param-reassign
innerNode.fy = (innerNode.fy || innerNode.y || 0) + dy;
});
}
}

// eslint-disable-next-line no-param-reassign
node.x = eventX;
// eslint-disable-next-line no-param-reassign
node.y = eventY;
// eslint-disable-next-line no-param-reassign
node.fx = eventX;
// eslint-disable-next-line no-param-reassign
node.fy = eventY;

if (currentInstance !== null) {
Expand Down Expand Up @@ -236,34 +228,6 @@ function hideTooltip() {
toggleTooltip.value = false;
}

function nodeTranslate(node: Node): string {
let forcedX = node.x || 0;
let forcedY = node.y || 0;

const svgEdgePadding = 5;

const minimumX = svgEdgePadding;
const minimumY = svgEdgePadding;
const maximumX = svgDimensions.value.width - calculateNodeSize(node) - svgEdgePadding;
const maximumY = svgDimensions.value.height - calculateNodeSize(node) - svgEdgePadding;

// Ideally we would update node.x and node.y, but those variables are being changed
// by the simulation. My solution was to use these forcedX and forcedY variables.
if (forcedX < minimumX) { forcedX = minimumX; }
if (forcedX > maximumX) { forcedX = maximumX; }
if (forcedY < minimumY) { forcedY = minimumY; }
if (forcedY > maximumY) { forcedY = maximumY; }

// Update the node position with this forced position
// eslint-disable-next-line no-param-reassign
node.x = forcedX;
// eslint-disable-next-line no-param-reassign
node.y = forcedY;

// Use the forced position, because the node.x is updated by simulation
return `translate(${forcedX}, ${forcedY})`;
}

function arcPath(edge: Edge): string {
if (network.value !== null) {
const fromNode = network.value.nodes.find((node) => node._id === edge._from);
Expand Down Expand Up @@ -522,9 +486,7 @@ function generateNodePositions(nodes: Node[]) {
nodes.forEach((node) => {
// If the position is not defined for x or y, generate it
if (node.x === undefined || node.y === undefined) {
// eslint-disable-next-line no-param-reassign
node.x = Math.random() * svgDimensions.value.width;
// eslint-disable-next-line no-param-reassign
node.y = Math.random() * svgDimensions.value.height;
}
});
Expand Down Expand Up @@ -688,13 +650,10 @@ function makePositionScale(axis: 'x' | 'y', type: ColumnType, range: AttributeRa
}
position -= (markerSize.value / 2);

// eslint-disable-next-line no-param-reassign
node[axis] = position;
// eslint-disable-next-line no-param-reassign
node[`f${axis}`] = position;

if (store.state.layoutVars[otherAxis] === null) {
// eslint-disable-next-line no-param-reassign
node[`f${otherAxis}`] = undefined;
}
});
Expand Down Expand Up @@ -829,11 +788,30 @@ watch(layoutVars, () => {
}
});

const svgEdgePadding = 5;

const minimumX = svgEdgePadding;
const minimumY = svgEdgePadding;
const maximumX = svgDimensions.value.width - svgEdgePadding;
const maximumY = svgDimensions.value.height - svgEdgePadding;
onMounted(() => {
if (network.value !== null && simulationEdges.value !== null) {
// Make the simulation
const simulation = forceSimulation<Node, SimulationEdge>(network.value.nodes)
.on('tick', () => {
network.value?.nodes.forEach((node) => {
if (node.x !== undefined && node.y !== undefined) {
const maxX = maximumX - calculateNodeSize(node);
const maxY = maximumY - calculateNodeSize(node);

// Update the node position forced to stay on the svg
if (node.x < minimumX) { node.x = minimumX; }
if (node.x > maxX) { node.x = maxX; }
if (node.y < minimumY) { node.y = minimumY; }
if (node.y > maxY) { node.y = maxY; }
}
});

if (currentInstance !== null) {
currentInstance.proxy.$forceUpdate();
}
Expand Down Expand Up @@ -994,7 +972,7 @@ onMounted(() => {
<g
v-for="node of network.nodes"
:key="node._id"
:transform="nodeTranslate(node)"
:transform="`translate(${node.x},${node.y})`"
:class="nodeGroupClass(node)"
>
<rect
Expand Down
4 changes: 0 additions & 4 deletions src/lib/provenanceUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@ import { ProvenanceEventTypes, State } from '@/types';
import { createAction } from '@visdesignlab/trrack';

export function updateProvenanceState(vuexState: State, label: ProvenanceEventTypes) {
/* eslint-disable no-param-reassign */

const stateUpdateActions = createAction<State, State[], ProvenanceEventTypes>((provState, newProvState) => {
if (label === 'Select Node(s)' || label === 'De-select Node' || label === 'Clear Selection') {
provState.selectedNodes = newProvState.selectedNodes;
Expand All @@ -26,8 +24,6 @@ export function updateProvenanceState(vuexState: State, label: ProvenanceEventTy
} else if (label === 'Set Edge Length') {
provState.edgeLength = newProvState.edgeLength;
}

/* eslint-enable no-param-reassign */
})
.setLabel(label);

Expand Down
2 changes: 0 additions & 2 deletions src/store/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -459,9 +459,7 @@ const {

if (context.state.network !== null) {
context.state.network.nodes.forEach((n: Node) => {
// eslint-disable-next-line no-param-reassign
n.fx = null;
// eslint-disable-next-line no-param-reassign
n.fy = null;
});
commit.startSimulation();
Expand Down