From ad31bfcf86d53bcae1cdfdd40c52c881b346a09d Mon Sep 17 00:00:00 2001
From: Dimitris Zervas <dzervas@dzervas.gr>
Date: Sat, 25 May 2024 16:59:48 +0300
Subject: [PATCH] Procedurally generate the toolbar buttons/icons

Signed-off-by: Dimitris Zervas <dzervas@dzervas.gr>
---
 .../src/routes/(CADmium)/MainDisplay.svelte   |  4 +-
 .../src/routes/(CADmium)/PassiveSketch.svelte |  4 --
 .../web/src/routes/(CADmium)/Sketch.svelte    |  4 +-
 .../web/src/routes/(CADmium)/ToolBar.svelte   | 28 +++++----
 .../(CADmium)/tools/ToolInstance.svelte       |  9 ++-
 applications/web/static/actions/arc.svg       | 58 +++++++++++++++++++
 6 files changed, 86 insertions(+), 21 deletions(-)
 create mode 100644 applications/web/static/actions/arc.svg

diff --git a/applications/web/src/routes/(CADmium)/MainDisplay.svelte b/applications/web/src/routes/(CADmium)/MainDisplay.svelte
index d5d6fb67..3b0d3db1 100644
--- a/applications/web/src/routes/(CADmium)/MainDisplay.svelte
+++ b/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) {
diff --git a/applications/web/src/routes/(CADmium)/PassiveSketch.svelte b/applications/web/src/routes/(CADmium)/PassiveSketch.svelte
index 30486dba..83189b5c 100644
--- a/applications/web/src/routes/(CADmium)/PassiveSketch.svelte
+++ b/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,
diff --git a/applications/web/src/routes/(CADmium)/Sketch.svelte b/applications/web/src/routes/(CADmium)/Sketch.svelte
index e779d855..b7360fc4 100644
--- a/applications/web/src/routes/(CADmium)/Sketch.svelte
+++ b/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 = []
diff --git a/applications/web/src/routes/(CADmium)/ToolBar.svelte b/applications/web/src/routes/(CADmium)/ToolBar.svelte
index 7022e7ef..7a1446b8 100644
--- a/applications/web/src/routes/(CADmium)/ToolBar.svelte
+++ b/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">
diff --git a/applications/web/src/routes/(CADmium)/tools/ToolInstance.svelte b/applications/web/src/routes/(CADmium)/tools/ToolInstance.svelte
index b3e5d5bc..4cecf3d6 100644
--- a/applications/web/src/routes/(CADmium)/tools/ToolInstance.svelte
+++ b/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>
diff --git a/applications/web/static/actions/arc.svg b/applications/web/static/actions/arc.svg
new file mode 100644
index 00000000..55f178d7
--- /dev/null
+++ b/applications/web/static/actions/arc.svg
@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="96"
+   height="96"
+   version="1.1"
+   viewBox="0 0 25.4 25.4"
+   id="svg1815"
+   sodipodi:docname="circle.svg"
+   inkscape:version="1.3.2 (091e20e, 2023-11-25)"
+   inkscape:export-filename="/Users/matthewferraro/Documents/git/CADmium/static/actions/horizontal.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1819" />
+  <sodipodi:namedview
+     id="namedview1817"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="6.78125"
+     inkscape:cx="54.930876"
+     inkscape:cy="47.852535"
+     inkscape:window-width="1648"
+     inkscape:window-height="1098"
+     inkscape:window-x="1819"
+     inkscape:window-y="25"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg1815"
+     inkscape:showpageshadow="2"
+     inkscape:deskcolor="#d1d1d1" />
+  <circle
+     style="fill:none;stroke:#000000;stroke-width:1.05833333;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none"
+     id="path1092"
+     cx="12.999941"
+     cy="12.504915"
+     r="9.2274961" />
+  <circle
+     style="fill:#ffffff;fill-opacity:1;stroke:#0063ff;stroke-width:0.750001;stroke-linecap:round;stroke-linejoin:bevel;stroke-opacity:1"
+     id="path1103"
+     cx="19.363237"
+     cy="5.637341"
+     r="1.9399883" />
+  <ellipse
+     style="fill:#ffffff;fill-opacity:1;stroke:#0063ff;stroke-width:0.750001;stroke-linecap:round;stroke-linejoin:bevel;stroke-opacity:1"
+     id="path1103-9"
+     cx="12.953609"
+     cy="12.407373"
+     rx="1.9400001"
+     ry="1.9399883" />
+</svg>