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

wip: box selection

Browse Source
This commit is contained in:
max_richter 2024-03-13 19:41:52 +01:00
parent c4c203968d
commit f312f885c7
3 changed files with 58 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
frontend/src/lib/components/BoxSelection.svelte Normal file
View File

@ -0,0 +1,40 @@
<script lang="ts">
import { HTML } from "@threlte/extras";
export let p1 = { x: 0, y: 0 };
export let p2 = { x: 0, y: 0 };
export let cameraPosition = [0, 1, 0];
$: width = Math.abs(p1.x - p2.x) * cameraPosition[2];
$: height = Math.abs(p1.y - p2.y) * cameraPosition[2];
$: x = Math.max(p1.x, p2.x) - width / cameraPosition[2];
$: y = Math.max(p1.y, p2.y) - height / cameraPosition[2];
</script>
<HTML position.x={x} position.z={y} transform={false}>
<div
class="selection"
style={`width: ${width}px; height: ${height}px;`}
></div>
</HTML>
<!-- <T.Mesh -->
<!-- position.x={x - width / 2} -->
<!-- position.z={y - height / 2} -->
<!-- rotation.x={-Math.PI / 2} -->
<!-- > -->
<!-- <T.PlaneGeometry args={[width, height]} /> -->
<!-- <T.MeshBasicMaterial color="red" /> -->
<!-- </T.Mesh> -->
<style>
.selection {
width: 40px;
height: 20px;
border: solid 0.2px red;
border-style: dashed;
border-radius: 2px;
}
</style>

3
frontend/src/lib/components/Camera.svelte
View File

@ -2,7 +2,7 @@
import { T } from "@threlte/core"; import { T } from "@threlte/core";
import { OrbitControls } from "@threlte/extras"; import { OrbitControls } from "@threlte/extras";
import { onMount } from "svelte"; import { onMount } from "svelte";
import { type OrthographicCamera } from "three"; import { MOUSE, type OrthographicCamera } from "three";
export let camera: OrthographicCamera | undefined = undefined; export let camera: OrthographicCamera | undefined = undefined;
export let maxZoom = 150; export let maxZoom = 150;
@ -57,6 +57,7 @@
<T.OrthographicCamera bind:ref={camera} position.y={10} makeDefault> <T.OrthographicCamera bind:ref={camera} position.y={10} makeDefault>
<OrbitControls <OrbitControls
args={[camera, window]} args={[camera, window]}
mouseButtons={{ LEFT: MOUSE.PAN, MIDDLE: 0, RIGHT: 0 }}
bind:ref={controls} bind:ref={controls}
enableZoom={true} enableZoom={true}
zoomSpeed={2} zoomSpeed={2}

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

@ -18,6 +18,7 @@
possibleSocketIds, possibleSocketIds,
selectedNodes, selectedNodes,
} from "./stores"; } from "./stores";
import BoxSelection from "../BoxSelection.svelte";
export let graph: GraphManager; export let graph: GraphManager;
setContext("graphManager", graph); setContext("graphManager", graph);
@ -30,6 +31,7 @@
const maxZoom = 150; const maxZoom = 150;
let mousePosition = [0, 0]; let mousePosition = [0, 0];
let mouseDown: null | [number, number] = null; let mouseDown: null | [number, number] = null;
let boxSelection = false;
let cameraPosition: [number, number, number] = [0, 1, 0]; let cameraPosition: [number, number, number] = [0, 1, 0];
let width = 100; let width = 100;
let height = 100; let height = 100;
@ -291,6 +293,8 @@
} else { } else {
$activeNodeId = nodeId; $activeNodeId = nodeId;
} }
} else if (event.ctrlKey) {
boxSelection = true;
} else { } else {
$activeNodeId = -1; $activeNodeId = -1;
$selectedNodes?.clear(); $selectedNodes?.clear();
@ -464,6 +468,7 @@
} }
mouseDown = null; mouseDown = null;
boxSelection = false;
$activeSocket = null; $activeSocket = null;
$possibleSockets = []; $possibleSockets = [];
$possibleSocketIds = null; $possibleSocketIds = null;
@ -486,6 +491,17 @@
<Background {cameraPosition} {maxZoom} {minZoom} {width} {height} /> <Background {cameraPosition} {maxZoom} {minZoom} {width} {height} />
{#if boxSelection && mouseDown}
<BoxSelection
{cameraPosition}
p1={{
x: cameraPosition[0] + (mouseDown[0] - width / 2) / cameraPosition[2],
y: cameraPosition[1] + (mouseDown[1] - height / 2) / cameraPosition[2],
}}
p2={{ x: mousePosition[0], y: mousePosition[1] }}
/>
{/if}
{#if $status === "idle"} {#if $status === "idle"}
{#if $activeSocket} {#if $activeSocket}
<FloatingEdge <FloatingEdge