From 3203f7bcdfa9112370f0d73fe9d4d115afb5af28 Mon Sep 17 00:00:00 2001
From: Henry Sloan <henryksloan@gmail.com>
Date: Sun, 18 Jul 2021 12:06:57 -0400
Subject: [PATCH] Add JSON-backed options widget

---
 client/web/src/components/panels/Document.vue |  46 +------
 .../widgets/options/ToolOptions.vue           | 121 ++++++++++++++++++
 2 files changed, 124 insertions(+), 43 deletions(-)
 create mode 100644 client/web/src/components/widgets/options/ToolOptions.vue

diff --git a/client/web/src/components/panels/Document.vue b/client/web/src/components/panels/Document.vue
index 576ec33a9d..c59aa45b29 100644
--- a/client/web/src/components/panels/Document.vue
+++ b/client/web/src/components/panels/Document.vue
@@ -6,49 +6,7 @@
 
 				<Separator :type="SeparatorType.Section" />
 
-				<IconButton :icon="'AlignHorizontalLeft'" :size="24" title="Horizontal Align Left" />
-				<IconButton :icon="'AlignHorizontalCenter'" :size="24" title="Horizontal Align Center" />
-				<IconButton :icon="'AlignHorizontalRight'" :size="24" gapAfter title="Horizontal Align Right" />
-
-				<Separator :type="SeparatorType.Unrelated" />
-
-				<IconButton :icon="'AlignVerticalTop'" :size="24" title="Vertical Align Top" />
-				<IconButton :icon="'AlignVerticalCenter'" :size="24" title="Vertical Align Center" />
-				<IconButton :icon="'AlignVerticalBottom'" :size="24" title="Vertical Align Bottom" />
-
-				<Separator :type="SeparatorType.Related" />
-
-				<PopoverButton>
-					<h3>Align</h3>
-					<p>More alignment-related buttons will be here</p>
-				</PopoverButton>
-
-				<Separator :type="SeparatorType.Section" />
-
-				<IconButton :icon="'FlipHorizontal'" :size="24" title="Flip Horizontal" />
-				<IconButton :icon="'FlipVertical'" :size="24" title="Flip Vertical" />
-
-				<Separator :type="SeparatorType.Related" />
-
-				<PopoverButton>
-					<h3>Flip</h3>
-					<p>More flip-related buttons will be here</p>
-				</PopoverButton>
-
-				<Separator :type="SeparatorType.Section" />
-
-				<IconButton :icon="'BooleanUnion'" :size="24" title="Boolean Union" />
-				<IconButton :icon="'BooleanSubtractFront'" :size="24" title="Boolean Subtract Front" />
-				<IconButton :icon="'BooleanSubtractBack'" :size="24" title="Boolean Subtract Back" />
-				<IconButton :icon="'BooleanIntersect'" :size="24" title="Boolean Intersect" />
-				<IconButton :icon="'BooleanDifference'" :size="24" title="Boolean Difference" />
-
-				<Separator :type="SeparatorType.Related" />
-
-				<PopoverButton>
-					<h3>Boolean</h3>
-					<p>More boolean-related buttons will be here</p>
-				</PopoverButton>
+				<ToolOptions :activeTool="activeTool" />
 			</div>
 			<div class="spacer"></div>
 			<div class="right side">
@@ -255,6 +213,7 @@ import RadioInput from "@/components/widgets/inputs/RadioInput.vue";
 import NumberInput from "@/components/widgets/inputs/NumberInput.vue";
 import DropdownInput from "@/components/widgets/inputs/DropdownInput.vue";
 import OptionalInput from "@/components/widgets/inputs/OptionalInput.vue";
+import ToolOptions from "@/components/widgets/options/ToolOptions.vue";
 import { SectionsOfMenuListEntries } from "@/components/widgets/floating-menus/MenuList.vue";
 
 const modeMenuEntries: SectionsOfMenuListEntries = [
@@ -401,6 +360,7 @@ export default defineComponent({
 		NumberInput,
 		DropdownInput,
 		OptionalInput,
+		ToolOptions,
 	},
 });
 </script>
diff --git a/client/web/src/components/widgets/options/ToolOptions.vue b/client/web/src/components/widgets/options/ToolOptions.vue
new file mode 100644
index 0000000000..3be38c2d37
--- /dev/null
+++ b/client/web/src/components/widgets/options/ToolOptions.vue
@@ -0,0 +1,121 @@
+<template>
+	<div class="tool-options">
+		<template v-for="(option, index) in optionsMap.get(activeTool) || []" :key="index">
+			<IconButton v-if="option.kind === 'icon'" :icon="option.icon" :size="24" :title="option.title" />
+			<Separator v-if="option.kind === 'separator'" :type="option.type" />
+			<PopoverButton v-if="option.kind === 'popover'">
+				<h3>{{ option.title }}</h3>
+				<p>{{ option.placeholder_text }}</p>
+			</PopoverButton>
+			<NumberInput v-if="option.kind === 'number'" :initialValue="option.initial" :step="option.step" :updateOnCallback="false" />
+		</template>
+	</div>
+</template>
+
+<style lang="scss">
+.tool-options {
+	height: 100%;
+	flex: 0 0 auto;
+	display: flex;
+	align-items: center;
+}
+</style>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import Separator, { SeparatorType } from "@/components/widgets/separators/Separator.vue";
+import IconButton from "@/components/widgets/buttons/IconButton.vue";
+import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
+import NumberInput from "@/components/widgets/inputs/NumberInput.vue";
+
+type ToolOptionsList = Array<ToolOptions>;
+type ToolOptionsMap = Map<string, ToolOptionsList>;
+
+type ToolOptions = IconOption | SeparatorOption | PopoverOption | NumberOption;
+
+interface IconOption {
+	kind: "icon";
+	icon: string;
+	title: string;
+}
+
+interface SeparatorOption {
+	kind: "separator";
+	type: SeparatorType;
+}
+
+interface PopoverOption {
+	kind: "popover";
+	title: string;
+	placeholder_text: string;
+}
+
+interface NumberOption {
+	kind: "number";
+	initial: number;
+	step: number;
+}
+
+const optionsMap: ToolOptionsMap = new Map([
+	[
+		"Select",
+		[
+			{ kind: "icon", icon: "AlignHorizontalLeft", title: "Horizontal Align Left" },
+			{ kind: "icon", icon: "AlignHorizontalCenter", title: "Horizontal Align Center" },
+			{ kind: "icon", icon: "AlignHorizontalRight", title: "Horizontal Align Right" },
+
+			{ kind: "separator", type: SeparatorType.Unrelated },
+
+			{ kind: "icon", icon: "AlignVerticalTop", title: "Vertical Align Top" },
+			{ kind: "icon", icon: "AlignVerticalCenter", title: "Vertical Align Center" },
+			{ kind: "icon", icon: "AlignVerticalBottom", title: "Vertical Align Bottom" },
+
+			{ kind: "separator", type: SeparatorType.Related },
+
+			{ kind: "popover", title: "Align", placeholder_text: "More alignment-related buttons will be here" },
+
+			{ kind: "separator", type: SeparatorType.Section },
+
+			{ kind: "icon", icon: "FlipHorizontal", title: "Flip Horizontal" },
+			{ kind: "icon", icon: "FlipVertical", title: "Flip Vertical" },
+
+			{ kind: "separator", type: SeparatorType.Related },
+
+			{ kind: "popover", title: "Flip", placeholder_text: "More flip-related buttons will be here" },
+
+			{ kind: "separator", type: SeparatorType.Section },
+
+			{ kind: "icon", icon: "BooleanUnion", title: "Boolean Union" },
+			{ kind: "icon", icon: "BooleanSubtractFront", title: "Boolean Subtract Front" },
+			{ kind: "icon", icon: "BooleanSubtractBack", title: "Boolean Subtract Back" },
+			{ kind: "icon", icon: "BooleanIntersect", title: "Boolean Intersect" },
+			{ kind: "icon", icon: "BooleanDifference", title: "Boolean Difference" },
+
+			{ kind: "separator", type: SeparatorType.Related },
+
+			{ kind: "popover", title: "Boolean", placeholder_text: "More boolean-related buttons will be here" },
+		],
+	],
+	["Shape", [{ kind: "number", initial: 6, step: 1 }]],
+]);
+
+export default defineComponent({
+	props: {
+		activeTool: { type: String },
+	},
+	computed: {},
+	methods: {},
+	data() {
+		return {
+			optionsMap,
+			SeparatorType,
+		};
+	},
+	components: {
+		Separator,
+		IconButton,
+		PopoverButton,
+		NumberInput,
+	},
+});
+</script>