Procedurally generate the toolbar buttons/icons

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

applications/web/src/routes/(CADmium)/MainDisplay.svelte

@@ -53,9 +53,7 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-	class="bg-white {$sketchTool === 'Line' || $sketchTool === 'Circle' || $sketchTool === 'Rectangle'
-		? 'cursor-crosshair'
-		: ''}"
+	class="bg-white {$sketchTool !== 'Select' ? 'cursor-crosshair' : ''}"
 	style="width:{viewportWidth}px; height:{height}px"
 	on:mousedown={(e) => {
 		if ($selectingFor.length > 0) {

applications/web/src/routes/(CADmium)/PassiveSketch.svelte

@@ -10,10 +10,6 @@
 	import Face from "./Face.svelte"
 	import { LineMaterial } from "three/addons/lines/LineMaterial.js"
 	import { LineGeometry } from "three/addons/lines/LineGeometry.js"
-	import NewLineTool from "./tools/Line.svelte"
-	import NewCircleTool from "./tools/Circle.svelte"
-	import NewRectangleTool from "./tools/Rectangle.svelte"
-	import SelectTool from "./tools/Select.svelte"
 	import type {
 		ArcTuple,
 		CircleTuple,

applications/web/src/routes/(CADmium)/Sketch.svelte

@@ -2,7 +2,7 @@
 	import type { LineMaterial } from "three/examples/jsm/lines/LineMaterial.js"
 	import PassiveSketch from "./PassiveSketch.svelte"
 	import { currentlySelected, previewGeometry, sketchTool } from "shared/stores"
-	import type { PlaneRealized, SketchTuple } from "shared/types"
+	import type { PlaneRealized, SketchTuple, ToolType } from "shared/types"
 
 	// prettier-ignore
 	const log = (function () { const context = "[Sketch.svelte]"; const color="gray"; return Function.prototype.bind.call(console.log, console, `%c${context}`, `font-weight:bold;color:${color};`)})()
@@ -18,7 +18,7 @@
 		solidSelectedMaterial: LineMaterial,
 		collisionLineMaterial: LineMaterial
 
-	function setTool(tool: string): void {
+	function setTool(tool: ToolType): void {
 		$sketchTool = tool
 		$currentlySelected = []
 		$previewGeometry = []

applications/web/src/routes/(CADmium)/ToolBar.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	import {
 		currentlySelected,
 		currentlyMousedOver,
@@ -9,15 +9,15 @@
 		workbench,
 		hiddenSketches
 	} from "shared/stores"
+	import * as AllTools from "./tools";
 	import { newExtrusion, newSketchOnPlane } from "shared/projectUtils"
 	import { base } from "$app/paths"
+	import type { ToolType } from "shared/types"
 
 	// prettier-ignore
 	const log = (function () { const context = "[ToolBar.svelte]"; const color="gray"; return Function.prototype.bind.call(console.log, console, `%c${context}`, `font-weight:bold;color:${color};`)})()
 
 	let solving = false
-	// todo ask Matt why is this a no-op?
-	const solveSketch = () => {}
 	const createNewExtrusion = () => {
 		newExtrusion()
 		// set that as the current feature being edited
@@ -28,7 +28,6 @@
 		newSketchOnPlane()
 		$featureIndex = $workbench.history.length - 1
 	}
-	const stepSketch = () => {}
 	const debugging = false
 
 	const actions = [
@@ -42,13 +41,20 @@
 		// { alt: 'plane', src: '/actions/plane_min.svg' }
 	]
 
-	const sketchActions = [
-		{ alt: "solve", src: `${base}/actions/solve_min.svg`, text: "Solve", handler: solveSketch },
-		{ alt: "step", src: `${base}/actions/step_min.svg`, text: "Step", handler: stepSketch },
-		{ alt: "line", src: `${base}/actions/line.svg`, handler: () => ($sketchTool = "Line") },
-		{ alt: "circle", src: `${base}/actions/circle.svg`, handler: () => ($sketchTool = "Circle") },
-		{ alt: "rectangle", src: `${base}/actions/rectangle.svg`, handler: () => ($sketchTool = "Rectangle") }
-	]
+	interface SketchActionType {
+		alt: string
+		src: string
+		text: string
+		// tooltip: string // TODO
+		handler: () => void
+	}
+
+	const sketchActions: SketchActionType[] = Object.keys(AllTools).filter(toolName => toolName !== "Select").map((toolName: string): SketchActionType => ({
+		alt: toolName,
+		src: `${base}/actions/${toolName.toLowerCase()}.svg`,
+		text: toolName,
+		handler: () => ($sketchTool = (toolName as ToolType))
+	}))
 </script>
 
 <div class="col-span-2 flex flex-none items-center gap-1 bg-gray-100 h-[45px] select-none">

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

@@ -11,7 +11,6 @@
 
 	interface ToolComponentInstance {
 		name: string
-		// component: (new (...args: any[]) => AllTools.ToolComponentType)
 		component: AllTools.ToolComponentType
 	}
 
@@ -31,6 +30,10 @@
 			})
 		}))
 
+	export function getToolNames(): ToolType[] {
+		return instances.map(i => i.name as ToolType)
+	}
+
 	export function meshMouseMove(event: Event, data: Vector2) {
 		const inst = instances.find(i => i.name === $sketchTool)
 		inst !== undefined && inst.component.mouseMove(event, data)
@@ -41,3 +44,7 @@
 		inst !== undefined && inst.component.click(event, data)
 	}
 </script>
+
+<div
+	id="tool-instance"
+></div>