transcribe 0hypercube's frontend help code

Author: wade-cheng

editor/src/messages/frontend/frontend_message.rs

@@ -152,6 +152,10 @@ pub enum FrontendMessage {
 		#[serde(rename = "box")]
 		box_selection: Option<BoxSelection>,
 	},
+	UpdateLasoo {
+		#[serde(rename = "lasoo")]
+		lasoo_selection: Option<LasooSelection>,
+	},
 	UpdateContextMenuInformation {
 		#[serde(rename = "contextMenuInformation")]
 		context_menu_information: Option<ContextMenuInformation>,

editor/src/messages/portfolio/document/node_graph/utility_types.rs

@@ -152,6 +152,22 @@ pub struct BoxSelection {
 	pub end_y: u32,
 }
 
+#[derive(Clone, Debug, PartialEq, serde::Serialize, serde::Deserialize, specta::Type)]
+pub struct LasooSelection {
+	pub points: String,
+}
+
+impl FromIterator<glam::DVec2> for LasooSelection {
+	fn from_iter<I: IntoIterator<Item = glam::DVec2>>(iter: I) -> Self {
+		let mut points = String::new();
+		for coordinate in iter {
+			use std::fmt::Write;
+			write!(&mut points, "{},{} ", coordinate.x, coordinate.y).unwrap();
+		}
+		LasooSelection { points }
+	}
+}
+
 #[derive(Clone, Debug, PartialEq, serde::Serialize, serde::Deserialize, specta::Type)]
 #[serde(tag = "type", content = "data")]
 pub enum ContextMenuData {

frontend/src/components/views/Graph.svelte

@@ -777,6 +777,12 @@
 	></div>
 {/if}
 
+{#if $nodeGraph.lasoo}
+	<svg class="lasoo-selection" style:clip-path={`polygon(${$nodeGraph.lasoo.points})`}>
+		<polygon points={$nodeGraph.lasoo.points} stroke="#00a8ff" stroke-width="1px" fill="rgba(0, 168, 255, 0.05)" />
+	</svg>
+{/if}
+
 <style lang="scss" global>
 	.graph {
 		position: relative;
@@ -1369,4 +1375,14 @@
 		background: rgba(0, 168, 255, 0.05);
 		border: 1px solid #00a8ff;
 	}
+
+	.lasoo-selection {
+		position: absolute;
+		pointer-events: none;
+		z-index: 2;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+	}
 </style>

frontend/src/messages.ts

@@ -29,6 +29,10 @@ export class UpdateBox extends JsMessage {
 	readonly box!: Box | undefined;
 }
 
+export class UpdateLasoo extends JsMessage {
+	readonly lasoo!: Lasoo | undefined;
+}
+
 export class UpdateClickTargets extends JsMessage {
 	readonly clickTargets!: FrontendClickTargets | undefined;
 }
@@ -154,6 +158,10 @@ export class Box {
 	readonly endY!: number;
 }
 
+export class Lasoo {
+	readonly points!: string;
+}
+
 export type FrontendClickTargets = {
 	readonly nodeClickTargets: string[];
 	readonly layerClickTargets: string[];
@@ -1665,6 +1673,7 @@ export const messageMakers: Record<string, MessageMaker> = {
 	TriggerVisitLink,
 	UpdateActiveDocument,
 	UpdateBox,
+	UpdateLasoo,
 	UpdateClickTargets,
 	UpdateContextMenuInformation,
 	UpdateDialogButtons,

frontend/src/state-providers/node-graph.ts

@@ -4,6 +4,7 @@ import { type Editor } from "@graphite/editor";
 import type { NodeGraphError } from "@graphite/messages";
 import {
 	type Box,
+	type Lasoo,
 	type FrontendClickTargets,
 	type ContextMenuInformation,
 	type FrontendNode,
@@ -12,6 +13,7 @@ import {
 	ClearAllNodeGraphWires,
 	SendUIMetadata,
 	UpdateBox,
+	UpdateLasoo,
 	UpdateClickTargets,
 	UpdateContextMenuInformation,
 	UpdateInSelectedNetwork,
@@ -32,6 +34,7 @@ import {
 export function createNodeGraphState(editor: Editor) {
 	const { subscribe, update } = writable({
 		box: undefined as Box | undefined,
+		lasoo: undefined as Lasoo | undefined,
 		clickTargets: undefined as FrontendClickTargets | undefined,
 		contextMenuInformation: undefined as ContextMenuInformation | undefined,
 		error: undefined as NodeGraphError | undefined,
@@ -68,6 +71,12 @@ export function createNodeGraphState(editor: Editor) {
 			return state;
 		});
 	});
+	editor.subscriptions.subscribeJsMessage(UpdateLasoo, (updateLasoo) => {
+		update((state) => {
+			state.lasoo = updateLasoo.lasoo;
+			return state;
+		});
+	});
 	editor.subscriptions.subscribeJsMessage(UpdateClickTargets, (UpdateClickTargets) => {
 		update((state) => {
 			state.clickTargets = UpdateClickTargets.clickTargets;