max/nodes
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: finetune some events

Browse Source
This commit is contained in:
max_richter 2024-03-20 01:58:36 +01:00
parent 05e13733e2
commit ff6eabdaf6
1 changed files with 60 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
frontend/src/lib/components/graph/Graph.svelte
View File

@ -118,6 +118,40 @@
); );
}); });
function getNodeIdFromEvent(event: MouseEvent) {
let clickedNodeId = -1;
if (event.button === 0) {
// check if the clicked element is a node
if (event.target instanceof HTMLElement) {
const nodeElement = event.target.closest(".node");
const nodeId = nodeElement?.getAttribute?.("data-node-id");
if (nodeId) {
clickedNodeId = parseInt(nodeId, 10);
}
}
// if we do not have an active node,
// we are going to check if we clicked on a node by coordinates
if (clickedNodeId === -1) {
const [downX, downY] = projectScreenToWorld(
event.clientX,
event.clientY,
);
for (const node of $nodes.values()) {
const x = node.position.x;
const y = node.position.y;
const height = getNodeHeight(node.type);
if (downX > x && downX < x + 20 && downY > y && downY < y + height) {
clickedNodeId = node.id;
break;
}
}
}
}
return clickedNodeId;
}
setContext("setDownSocket", (socket: Socket) => { setContext("setDownSocket", (socket: Socket) => {
$activeSocket = socket; $activeSocket = socket;
@ -345,39 +379,10 @@
cameraDown[0] = cameraPosition[0]; cameraDown[0] = cameraPosition[0];
cameraDown[1] = cameraPosition[1]; cameraDown[1] = cameraPosition[1];
let clickedNodeId: number | undefined; const clickedNodeId = getNodeIdFromEvent(event);
if (event.buttons === 1) {
// check if the clicked element is a node
if (event.target instanceof HTMLElement) {
const nodeElement = event.target.closest(".node");
const nodeId = nodeElement?.getAttribute?.("data-node-id");
if (nodeId) {
clickedNodeId = parseInt(nodeId, 10);
}
}
// if we do not have an active node,
// we are going to check if we clicked on a node by coordinates
if (clickedNodeId === undefined) {
const [downX, downY] = projectScreenToWorld(
event.clientX,
event.clientY,
);
for (const node of $nodes.values()) {
const x = node.position.x;
const y = node.position.y;
const height = getNodeHeight(node.type);
if (downX > x && downX < x + 20 && downY > y && downY < y + height) {
clickedNodeId = node.id;
break;
}
}
}
}
// if we clicked on a node // if we clicked on a node
if (clickedNodeId !== undefined) { if (clickedNodeId !== -1) {
if ($activeNodeId === -1) { if ($activeNodeId === -1) {
$activeNodeId = clickedNodeId; $activeNodeId = clickedNodeId;
// if the selected node is the same as the clicked node // if the selected node is the same as the clicked node
@ -403,15 +408,12 @@
} }
} else if (!$selectedNodes?.has(clickedNodeId)) { } else if (!$selectedNodes?.has(clickedNodeId)) {
$activeNodeId = clickedNodeId; $activeNodeId = clickedNodeId;
}
} else if (event.ctrlKey) {
boxSelection = true;
} else {
$activeNodeId = -1;
$selectedNodes?.clear(); $selectedNodes?.clear();
$selectedNodes = $selectedNodes; $selectedNodes = $selectedNodes;
} }
} else if (event.ctrlKey) {
boxSelection = true;
}
const node = graph.getNode($activeNodeId); const node = graph.getNode($activeNodeId);
if (!node) return; if (!node) return;
node.tmp = node.tmp || {}; node.tmp = node.tmp || {};
@ -491,17 +493,16 @@
function handleMouseUp(event: MouseEvent) { function handleMouseUp(event: MouseEvent) {
const activeNode = graph.getNode($activeNodeId); const activeNode = graph.getNode($activeNodeId);
if (event.target instanceof HTMLElement && event.button === 0) { const clickedNodeId = getNodeIdFromEvent(event);
const nodeElement = event.target.closest(".node");
const _activeNodeId = nodeElement?.getAttribute?.("data-node-id"); console.log({ clickedNodeId });
if (_activeNodeId) {
const nodeId = parseInt(_activeNodeId, 10); if (clickedNodeId !== -1) {
if (activeNode) { if (activeNode) {
if (!activeNode?.tmp?.isMoving && !event.ctrlKey && !event.shiftKey) { if (!activeNode?.tmp?.isMoving && !event.ctrlKey && !event.shiftKey) {
$selectedNodes?.clear(); $selectedNodes?.clear();
$selectedNodes = $selectedNodes; $selectedNodes = $selectedNodes;
$activeNodeId = nodeId; $activeNodeId = clickedNodeId;
}
} }
} }
} }
@ -581,6 +582,18 @@
graph.save(); graph.save();
} }
// check if camera moved
if (
clickedNodeId === -1 &&
!boxSelection &&
cameraDown[0] === cameraPosition[0] &&
cameraDown[1] === cameraPosition[1]
) {
$activeNodeId = -1;
$selectedNodes?.clear();
$selectedNodes = $selectedNodes;
}
mouseDown = null; mouseDown = null;
boxSelection = false; boxSelection = false;
$activeSocket = null; $activeSocket = null;