Add cancel event on tools

Signed-off-by: Dimitris Zervas <[email protected]>

applications/web/src/routes/(CADmium)/tools/Arc.svelte

@@ -7,10 +7,7 @@
 	// prettier-ignore
 	const log = (function () { const context = "[NewArcTool.svelte]"; const color="gray"; return Function.prototype.bind.call(console.log, console, `%c${context}`, `font-weight:bold;color:${color};`)})()
 
-	export let pointsById: PointsLikeById
-	export let sketchIndex: string
-	export let active: boolean
-	export let projectToPlane: ProjectToPlane
+	export let pointsById: PointsLikeById, sketchIndex: string, projectToPlane: ProjectToPlane
 
 	// log("[props]", "pointsById:", pointsById, "sketchIndex:", sketchIndex, "active:", active)
 
@@ -137,14 +134,8 @@
 		}
 	}
 
-	export function onKeyDown(event: KeyboardEvent) {
-		if (!active) return
-		if (event.key === "Escape") {
-			previewGeometry.set([])
-			centerPoint = null
-			$sketchTool = "Select"
-		}
+	export function cancel() {
+		previewGeometry.set([])
+		centerPoint = null
 	}
 </script>
-
-<svelte:window on:keydown={onKeyDown} />

applications/web/src/routes/(CADmium)/tools/Circle.svelte

@@ -7,10 +7,7 @@
 	// prettier-ignore
 	const log = (function () { const context = "[NewCircleTool.svelte]"; const color="gray"; return Function.prototype.bind.call(console.log, console, `%c${context}`, `font-weight:bold;color:${color};`)})()
 
-	export let pointsById: PointsLikeById
-	export let sketchIndex: string
-	export let active: boolean
-	export let projectToPlane: ProjectToPlane
+	export let pointsById: PointsLikeById, sketchIndex: string, projectToPlane: ProjectToPlane
 
 	// log("[props]", "pointsById:", pointsById, "sketchIndex:", sketchIndex, "active:", active)
 
@@ -137,14 +134,8 @@
 		}
 	}
 
-	export function onKeyDown(event: KeyboardEvent) {
-		if (!active) return
-		if (event.key === "Escape") {
-			previewGeometry.set([])
-			centerPoint = null
-			$sketchTool = "Select"
-		}
+	export function cancel() {
+		previewGeometry.set([])
+		centerPoint = null
 	}
 </script>
-
-<svelte:window on:keydown={onKeyDown} />

applications/web/src/routes/(CADmium)/tools/Line.svelte

@@ -7,7 +7,7 @@
 	// prettier-ignore
 	const log = (function () { const context = "[NewLineTool.svelte]"; const color="gray"; return Function.prototype.bind.call(console.log, console, `%c${context}`, `font-weight:bold;color:${color};`)})()
 
-	export let pointsById: IDictionary<SketchPoint>, sketchIndex: string, active: boolean, projectToPlane: ProjectToPlane
+	export let pointsById: IDictionary<SketchPoint>, sketchIndex: string, projectToPlane: ProjectToPlane
 
 	// $: pointsById, log("[props]", pointsById, sketchIndex, active, projectToPlane)
 
@@ -113,14 +113,8 @@
 		} else previewGeometry.set([])
 	}
 
-	export function onKeyDown(event: KeyboardEvent) {
-		if (!active) return
-		if (event.key === "Escape") {
-			previewGeometry.set([])
-			previousPoint = null
-			$sketchTool = "Select"
-		}
+	export function cancel() {
+		previewGeometry.set([])
+		previousPoint = null
 	}
 </script>
-
-<svelte:window on:keydown={onKeyDown} />

applications/web/src/routes/(CADmium)/tools/Rectangle.svelte

@@ -3,14 +3,11 @@
 	import { addRectangleBetweenPoints, addPointToSketch } from "shared/projectUtils"
 	import { Vector3 } from "three"
 	import type { IDictionary, PointLikeById, ProjectToPlane, SketchPoint } from "shared/types"
-	// import Sketch from "./Sketch.svelte"
 
 	// prettier-ignore
 	const log = (function () { const context = "[NewRectangleTool.svelte]"; const color="gray"; return Function.prototype.bind.call(console.log, console, `%c${context}`, `font-weight:bold;color:${color};`)})()
 
-	export let pointsById: IDictionary<SketchPoint>, sketchIndex: string, active: boolean, projectToPlane: ProjectToPlane
-
-	// log("[props]", pointsById, sketchIndex, active /** , projectToPlane */)
+	export let pointsById: IDictionary<SketchPoint>, sketchIndex: string, projectToPlane: ProjectToPlane
 
 	let anchorPoint: PointLikeById | null
 
@@ -153,14 +150,8 @@
 		} else previewGeometry.set([])
 	}
 
-	export function onKeyDown(event: KeyboardEvent) {
-		if (!active) return
-		if (event.key === "Escape") {
-			previewGeometry.set([])
-			anchorPoint = null
-			$sketchTool = "Select"
-		}
+	export function cancel() {
+		previewGeometry.set([])
+		anchorPoint = null
 	}
 </script>
-
-<svelte:window on:keydown={onKeyDown} />

applications/web/src/routes/(CADmium)/tools/Select.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { currentlyMousedOver, currentlySelected } from "shared/stores"
+	import { currentlyMousedOver, currentlySelected, sketchTool } from "shared/stores"
 	import { deleteEntities } from "shared/projectUtils"
 
 	// prettier-ignore
 	const log = (function () { const context = "[SelectTool.svelte]"; const color="gray"; return Function.prototype.bind.call(console.log, console, `%c${context}`, `font-weight:bold;color:${color};`)})()
 
-	export let sketchIndex: string, active: boolean
+	export let sketchIndex: string
 
 	export function mouseMove(_event: Event, projected: any) {
 		// log("mouse move", projected)
@@ -35,24 +35,23 @@
 		currentlySelected.set(alreadySelected)
 	}
 
+	// if the user presses the escape key, then we should deselect the currently selected things
+	export function cancel() {
+		currentlySelected.set([])
+	}
+
 	// export a function to handle keyboard events
 	// if the user presses the delete key, then we should delete the currently selected things
-	// if the user presses the escape key, then we should deselect the currently selected things
 	export function onKeyDown(event: KeyboardEvent) {
-		if (!active) return
+		if ($sketchTool !== "Select") return
 
-		// log('key press', event)
-		if (event.key === "Escape") {
-			currentlySelected.set([])
-		} else if (event.key === "Delete" || event.key === "Backspace") {
+		if (event.key === "Delete" || event.key === "Backspace") {
 			// delete the currently selected things
 			deleteEntities(sketchIndex, $currentlySelected)
 			currentlyMousedOver.set([])
 			currentlySelected.set([])
 		}
 	}
-
-	log("[props]", "sketchIndex:", sketchIndex, "active:", active)
 </script>
 
 <svelte:window on:keydown={onKeyDown} />

applications/web/src/routes/(CADmium)/tools/ToolInstance.svelte

@@ -24,7 +24,6 @@
 				props: {
 					pointsById,
 					sketchIndex,
-					active: $sketchTool === name,
 					projectToPlane
 				}
 			})
@@ -43,8 +42,18 @@
 		const inst = instances.find(i => i.name === $sketchTool)
 		inst !== undefined && inst.component.click(event, data)
 	}
+
+	export function onKeyDown(event: KeyboardEvent) {
+		if (event.key === "Escape") {
+			const inst = instances.find(i => i.name === $sketchTool)
+			inst !== undefined && inst.component.cancel()
+			$sketchTool = "Select"
+		}
+	}
 </script>
 
 <div
 	id="tool-instance"
 ></div>
+
+<svelte:window on:keydown={onKeyDown} />

applications/web/src/routes/(CADmium)/tools/index.ts

@@ -10,4 +10,5 @@ export { default as Select } from "./Select.svelte";
 export interface ToolComponentType extends SvelteComponent {
 	click: (event: Event, data: { twoD: Vector2; threeD: Vector3 }) => void;
 	mouseMove: (event: Event, data: Vector2) => void;
+	cancel: () => void;
 }