Layout system implementation and applied to tool options bar (#499)

* initial layout system with tool options

* cargo fmt

* cargo fmt again

* document bar defined on the backend

* cargo fmt

* removed RC<RefCell>

* cargo fmt

* - fix increment behavior
- removed hashmap from layout message handler
- removed no op message from layoutMessage

* cargo fmt

* only send documentBar when zoom or rotation is updated

* ctrl-0 changes zoom properly

* Code review changes

Co-authored-by: Keavon Chambers <keavon@keavon.com>

frontend/src/components/panels/Document.vue

@@ -6,67 +6,12 @@
 
 				<Separator :type="'Section'" />
 
-				<ToolOptions :activeTool="activeTool" :activeToolOptions="activeToolOptions" />
+				<WidgetLayout :layout="toolOptionsLayout" />
 			</LayoutRow>
 
 			<LayoutRow class="spacer"></LayoutRow>
 
-			<LayoutRow class="right side">
-				<OptionalInput v-model:checked="snappingEnabled" @update:checked="(snap: boolean) => setSnapping(snap)" :icon="'Snapping'" title="Snapping" />
-				<PopoverButton>
-					<h3>Snapping</h3>
-					<p>The contents of this popover menu are coming soon</p>
-				</PopoverButton>
-
-				<Separator :type="'Unrelated'" />
-
-				<OptionalInput v-model:checked="gridEnabled" @update:checked="() => dialog.comingSoon(318)" :icon="'Grid'" title="Grid" />
-				<PopoverButton>
-					<h3>Grid</h3>
-					<p>The contents of this popover menu are coming soon</p>
-				</PopoverButton>
-
-				<Separator :type="'Unrelated'" />
-
-				<OptionalInput v-model:checked="overlaysEnabled" @update:checked="(visible: boolean) => setOverlaysVisibility(visible)" :icon="'Overlays'" title="Overlays" />
-				<PopoverButton>
-					<h3>Overlays</h3>
-					<p>The contents of this popover menu are coming soon</p>
-				</PopoverButton>
-
-				<Separator :type="'Unrelated'" />
-
-				<RadioInput :entries="viewModeEntries" v-model:selectedIndex="viewModeIndex" class="combined-after" />
-				<PopoverButton>
-					<h3>View Mode</h3>
-					<p>The contents of this popover menu are coming soon</p>
-				</PopoverButton>
-
-				<Separator :type="'Section'" />
-
-				<NumberInput @update:value="(newRotation: number) => setRotation(newRotation)" v-model:value="documentRotation" :incrementFactor="15" :unit="'°'" />
-
-				<Separator :type="'Section'" />
-
-				<IconButton :action="increaseCanvasZoom" :icon="'ZoomIn'" :size="24" title="Zoom In" />
-				<IconButton :action="decreaseCanvasZoom" :icon="'ZoomOut'" :size="24" title="Zoom Out" />
-				<IconButton :action="() => setCanvasZoom(100)" :icon="'ZoomReset'" :size="24" title="Zoom to 100%" />
-
-				<Separator :type="'Related'" />
-
-				<NumberInput
-					v-model:value="documentZoom"
-					@update:value="(newZoom: number) => setCanvasZoom(newZoom)"
-					:min="0.000001"
-					:max="1000000"
-					:incrementBehavior="'Callback'"
-					:incrementCallbackIncrease="increaseCanvasZoom"
-					:incrementCallbackDecrease="decreaseCanvasZoom"
-					:unit="'%'"
-					:displayDecimalPlaces="4"
-					ref="zoom"
-				/>
-			</LayoutRow>
+			<WidgetLayout :layout="documentBarLayout" class="right side" />
 		</LayoutRow>
 		<LayoutRow class="shelf-and-viewport">
 			<LayoutCol class="shelf">
@@ -292,6 +237,9 @@ import {
 	ToolName,
 	UpdateDocumentArtboards,
 	UpdateMouseCursor,
+	UpdateToolOptionsLayout,
+	defaultWidgetLayout,
+	UpdateDocumentBarLayout,
 	TriggerTextCommit,
 	DisplayRemoveEditableTextbox,
 	DisplayEditableTextbox,
@@ -300,31 +248,19 @@ import {
 import LayoutCol from "@/components/layout/LayoutCol.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 import IconButton from "@/components/widgets/buttons/IconButton.vue";
-import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
 import { SectionsOfMenuListEntries } from "@/components/widgets/floating-menus/MenuList.vue";
 import DropdownInput from "@/components/widgets/inputs/DropdownInput.vue";
-import NumberInput from "@/components/widgets/inputs/NumberInput.vue";
-import OptionalInput from "@/components/widgets/inputs/OptionalInput.vue";
-import RadioInput, { RadioEntries } from "@/components/widgets/inputs/RadioInput.vue";
+import { RadioEntries } from "@/components/widgets/inputs/RadioInput.vue";
 import ShelfItemInput from "@/components/widgets/inputs/ShelfItemInput.vue";
 import SwatchPairInput from "@/components/widgets/inputs/SwatchPairInput.vue";
-import ToolOptions from "@/components/widgets/options/ToolOptions.vue";
 import CanvasRuler from "@/components/widgets/rulers/CanvasRuler.vue";
 import PersistentScrollbar from "@/components/widgets/scrollbars/PersistentScrollbar.vue";
 import Separator from "@/components/widgets/separators/Separator.vue";
+import WidgetLayout from "@/components/widgets/WidgetLayout.vue";
 
 export default defineComponent({
 	inject: ["editor", "dialog"],
 	methods: {
-		setSnapping(snap: boolean) {
-			this.editor.instance.set_snapping(snap);
-		},
-		setOverlaysVisibility(visible: boolean) {
-			this.editor.instance.set_overlays_visibility(visible);
-		},
-		setViewMode(newViewMode: string) {
-			this.editor.instance.set_view_mode(newViewMode);
-		},
 		viewportResize() {
 			const canvas = this.$refs.canvas as HTMLElement;
 			// Get the width and height rounded up to the nearest even number because resizing is centered and dividing an odd number by 2 for centering causes antialiasing
@@ -336,18 +272,6 @@ export default defineComponent({
 			this.canvasSvgWidth = `${width}px`;
 			this.canvasSvgHeight = `${height}px`;
 		},
-		setCanvasZoom(newZoom: number) {
-			this.editor.instance.set_canvas_zoom(newZoom / 100);
-		},
-		increaseCanvasZoom() {
-			this.editor.instance.increase_canvas_zoom();
-		},
-		decreaseCanvasZoom() {
-			this.editor.instance.decrease_canvas_zoom();
-		},
-		setRotation(newRotation: number) {
-			this.editor.instance.set_rotation(newRotation * (Math.PI / 180));
-		},
 		translateCanvasX(newValue: number) {
 			const delta = newValue - this.scrollbarPos.x;
 			this.scrollbarPos.x = newValue;
@@ -440,7 +364,6 @@ export default defineComponent({
 
 		this.editor.dispatcher.subscribeJsMessage(UpdateActiveTool, (updateActiveTool) => {
 			this.activeTool = updateActiveTool.tool_name;
-			this.activeToolOptions = updateActiveTool.tool_options;
 		});
 
 		this.editor.dispatcher.subscribeJsMessage(UpdateCanvasZoom, (updateCanvasZoom) => {
@@ -481,6 +404,14 @@ export default defineComponent({
 			);
 		});
 
+		this.editor.dispatcher.subscribeJsMessage(UpdateToolOptionsLayout, (updateToolOptionsLayout) => {
+			this.toolOptionsLayout = updateToolOptionsLayout;
+		});
+
+		this.editor.dispatcher.subscribeJsMessage(UpdateDocumentBarLayout, (updateDocumentBarLayout) => {
+			this.documentBarLayout = updateDocumentBarLayout;
+		});
+
 		window.addEventListener("resize", this.viewportResize);
 		window.addEventListener("DOMContentLoaded", this.viewportResize);
 	},
@@ -506,7 +437,8 @@ export default defineComponent({
 			canvasSvgHeight: "100%",
 			canvasCursor: "default",
 			activeTool: "Select" as ToolName,
-			activeToolOptions: {},
+			toolOptionsLayout: defaultWidgetLayout(),
+			documentBarLayout: defaultWidgetLayout(),
 			documentModeEntries,
 			viewModeEntries,
 			documentModeSelectionIndex: 0,
@@ -534,12 +466,8 @@ export default defineComponent({
 		PersistentScrollbar,
 		CanvasRuler,
 		IconButton,
-		PopoverButton,
-		RadioInput,
-		NumberInput,
 		DropdownInput,
-		OptionalInput,
-		ToolOptions,
+		WidgetLayout,
 	},
 });
 </script>

frontend/src/components/widgets/WidgetLayout.vue

@@ -0,0 +1,50 @@
+<template>
+	<div class="widget-layout">
+		<template v-for="(layoutRow, index) in layout.layout" :key="index">
+			<component :is="layoutRowType(layoutRow)" :widgetData="layoutRow" :layoutTarget="layout.layout_target"></component>
+		</template>
+	</div>
+</template>
+
+<style lang="scss">
+.widget-layout {
+	height: 100%;
+	flex: 0 0 auto;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+</style>
+
+<script lang="ts">
+import { defineComponent, PropType } from "vue";
+
+import { isWidgetRow, isWidgetSection, LayoutRow, WidgetLayout } from "@/dispatcher/js-messages";
+
+import WidgetRow from "@/components/widgets/WidgetRow.vue";
+import WidgetSection from "@/components/widgets/WidgetSection.vue";
+
+export default defineComponent({
+	props: {
+		layout: { type: Object as PropType<WidgetLayout>, required: true },
+	},
+	methods: {
+		layoutRowType(layoutRow: LayoutRow): unknown {
+			if (isWidgetRow(layoutRow)) return WidgetRow;
+			if (isWidgetSection(layoutRow)) return WidgetSection;
+
+			throw new Error("Layout row type does not exist");
+		},
+	},
+	data: () => {
+		return {
+			isWidgetRow,
+			isWidgetSection,
+		};
+	},
+	components: {
+		WidgetRow,
+		WidgetSection,
+	},
+});
+</script>

frontend/src/components/widgets/WidgetRow.vue

@@ -0,0 +1,66 @@
+<template>
+	<div class="widget-row">
+		<template v-for="(component, index) in widgetData.widgets" :key="index">
+			<!-- TODO: Use `<component :is="" v-bind="attributesObject"></component>` to avoid all the separate components with `v-if` -->
+			<PopoverButton v-if="component.kind === 'PopoverButton'">
+				<h3>{{ component.props.title }}</h3>
+				<p>{{ component.props.text }}</p>
+			</PopoverButton>
+			<NumberInput
+				v-if="component.kind === 'NumberInput'"
+				v-bind="component.props"
+				@update:value="(value: number) => updateLayout(component.widget_id, value)"
+				:incrementCallbackIncrease="() => updateLayout(component.widget_id, 'Increment')"
+				:incrementCallbackDecrease="() => updateLayout(component.widget_id, 'Decrement')"
+			/>
+			<IconButton v-if="component.kind === 'IconButton'" v-bind="component.props" :action="() => updateLayout(component.widget_id, null)" />
+			<OptionalInput v-if="component.kind === 'OptionalInput'" v-bind="component.props" @update:checked="(value: boolean) => updateLayout(component.widget_id, value)" />
+			<RadioInput v-if="component.kind === 'RadioInput'" v-bind="component.props" @update:selectedIndex="(value: number) => updateLayout(component.widget_id, value)" />
+			<Separator v-if="component.kind === 'Separator'" v-bind="component.props" />
+		</template>
+	</div>
+</template>
+
+<style lang="scss">
+.widget-row {
+	height: 100%;
+	flex: 0 0 auto;
+	display: flex;
+	align-items: center;
+}
+</style>
+
+<script lang="ts">
+import { defineComponent, PropType } from "vue";
+
+import { WidgetRow } from "@/dispatcher/js-messages";
+
+import IconButton from "@/components/widgets/buttons/IconButton.vue";
+import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
+import NumberInput from "@/components/widgets/inputs/NumberInput.vue";
+import OptionalInput from "@/components/widgets/inputs/OptionalInput.vue";
+import RadioInput from "@/components/widgets/inputs/RadioInput.vue";
+import Separator from "@/components/widgets/separators/Separator.vue";
+
+export default defineComponent({
+	inject: ["editor"],
+	props: {
+		widgetData: { type: Object as PropType<WidgetRow>, required: true },
+		layoutTarget: { required: true },
+	},
+	methods: {
+		updateLayout(widgetId: BigInt, value: unknown) {
+			this.editor.instance.update_layout(this.layoutTarget, widgetId, value);
+		},
+	},
+	components: {
+		Separator,
+		PopoverButton,
+		NumberInput,
+		IconButton,
+		OptionalInput,
+		RadioInput,
+	},
+});
+</script>
+

frontend/src/components/widgets/WidgetSection.vue

@@ -0,0 +1,56 @@
+<!-- TODO: Implement collapsable sections with properties system -->
+<template>
+	<div class="widget-section">
+		<template v-for="(layoutRow, index) in widgetData.layout" :key="index">
+			<component :is="layoutRowType(layoutRow)" :widgetData="layoutRow" :layoutTarget="layoutTarget"></component>
+		</template>
+	</div>
+</template>
+
+<style lang="scss">
+.widget-section {
+	height: 100%;
+	flex: 0 0 auto;
+	display: flex;
+	align-items: center;
+}
+</style>
+
+<script lang="ts">
+import { defineComponent, PropType } from "vue";
+
+import { isWidgetRow, isWidgetSection, LayoutRow, WidgetSection as WidgetSectionFromJsMessages } from "@/dispatcher/js-messages";
+
+import WidgetRow from "@/components/widgets/WidgetRow.vue";
+
+const WidgetSection = defineComponent({
+	name: "WidgetSection",
+	inject: ["editor"],
+	props: {
+		widgetData: { type: Object as PropType<WidgetSectionFromJsMessages>, required: true },
+		layoutTarget: { required: true },
+	},
+	data: () => {
+		return {
+			isWidgetRow,
+			isWidgetSection,
+		};
+	},
+	methods: {
+		updateLayout(widgetId: BigInt, value: unknown) {
+			this.editor.instance.update_layout(this.layoutTarget, widgetId, value);
+		},
+		layoutRowType(layoutRow: LayoutRow): unknown {
+			if (isWidgetRow(layoutRow)) return WidgetRow;
+			if (isWidgetSection(layoutRow)) return WidgetSection;
+
+			throw new Error("Layout row type does not exist");
+		},
+	},
+	components: {
+		WidgetRow,
+	},
+});
+export default WidgetSection;
+</script>
+

frontend/src/components/widgets/inputs/NumberInput.vue

@@ -167,7 +167,7 @@ export default defineComponent({
 	},
 	data() {
 		return {
-			text: `${this.value}${this.unit}`,
+			text: this.generateText(this.value),
 			editing: false,
 			id: `${Math.random()}`.substring(2),
 		};
@@ -230,9 +230,9 @@ export default defineComponent({
 			if (typeof this.min === "number" && !Number.isNaN(this.min)) sanitized = Math.max(sanitized, this.min);
 			if (typeof this.max === "number" && !Number.isNaN(this.max)) sanitized = Math.min(sanitized, this.max);
 			if (!invalid) this.$emit("update:value", sanitized);
-			this.setText(sanitized);
+			this.text = this.generateText(sanitized);
 		},
-		setText(value: number) {
+		generateText(value: number): string {
 			// Find the amount of digits on the left side of the decimal
 			// 10.25 == 2
 			// 1.23 == 1
@@ -240,7 +240,7 @@ export default defineComponent({
 			const leftSideDigits = Math.max(Math.floor(value).toString().length, 0) * Math.sign(value);
 			const roundingPower = 10 ** Math.max(this.displayDecimalPlaces - leftSideDigits, 0);
 			const displayValue = Math.round(value * roundingPower) / roundingPower;
-			this.text = `${displayValue}${this.unit}`;
+			return `${displayValue}${this.unit}`;
 		},
 	},
 	watch: {
@@ -254,7 +254,7 @@ export default defineComponent({
 			let sanitized = newValue;
 			if (typeof this.min === "number") sanitized = Math.max(sanitized, this.min);
 			if (typeof this.max === "number") sanitized = Math.min(sanitized, this.max);
-			this.setText(sanitized);
+			this.text = this.generateText(sanitized);
 		},
 	},
 	mounted() {

frontend/src/components/widgets/options/ToolOptions.vue

@@ -1,188 +0,0 @@
-<template>
-	<LayoutRow class="tool-options">
-		<template v-for="(option, index) in toolOptionsWidgets[activeTool] || []" :key="index">
-			<!-- TODO: Use `<component :is="" v-bind="attributesObject"></component>` to avoid all the separate components with `v-if` -->
-			<IconButton v-if="option.kind === 'IconButton'" :action="() => handleIconButtonAction(option)" :title="option.tooltip" v-bind="option.props" />
-			<PopoverButton v-if="option.kind === 'PopoverButton'" :title="option.tooltip" :action="option.callback" v-bind="option.props">
-				<h3>{{ option.popover.title }}</h3>
-				<p>{{ option.popover.text }}</p>
-			</PopoverButton>
-			<NumberInput
-				v-if="option.kind === 'NumberInput'"
-				@update:value="(value: number) => updateToolOptions(option.optionPath, value)"
-				:title="option.tooltip"
-				:value="getToolOption(option.optionPath)"
-				v-bind="option.props"
-			/>
-			<Separator v-if="option.kind === 'Separator'" v-bind="option.props" />
-		</template>
-	</LayoutRow>
-</template>
-
-<style lang="scss">
-.tool-options {
-	height: 100%;
-	flex: 0 0 auto;
-	align-items: center;
-}
-</style>
-
-<script lang="ts">
-import { defineComponent, PropType } from "vue";
-
-import { ToolName } from "@/dispatcher/js-messages";
-import { WidgetRow, IconButtonWidget } from "@/utilities/widgets";
-
-import LayoutRow from "@/components/layout/LayoutRow.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";
-import Separator from "@/components/widgets/separators/Separator.vue";
-
-export default defineComponent({
-	inject: ["editor", "dialog"],
-	props: {
-		activeTool: { type: String as PropType<ToolName>, required: true },
-		activeToolOptions: { type: Object as PropType<Record<string, object>>, required: true },
-	},
-	methods: {
-		async updateToolOptions(path: string[], newValue: number) {
-			this.setToolOption(path, newValue);
-			this.editor.instance.set_tool_options(this.activeTool || "", this.activeToolOptions);
-		},
-		async sendToolMessage(message: string | object) {
-			this.editor.instance.send_tool_message(this.activeTool || "", message);
-		},
-		// Traverses the given path and returns the direct parent of the option
-		getRecordContainingOption(optionPath: string[]): Record<string, number> {
-			// TODO: Formalize types and avoid casting with `as`
-			let currentRecord = this.activeToolOptions as Record<string, object | number>;
-
-			const allButLastOptions = optionPath.slice(0, -1);
-			[this.activeTool || "", ...allButLastOptions].forEach((attr) => {
-				// Dig into the tree in each loop iteration
-				currentRecord = currentRecord[attr] as Record<string, object | number>;
-			});
-
-			return currentRecord as Record<string, number>;
-		},
-		// Traverses the given path into the active tool's option struct, and sets the value at the path tail
-		setToolOption(optionPath: string[], newValue: number) {
-			const last = optionPath.slice(-1)[0];
-			const recordContainingOption = this.getRecordContainingOption(optionPath);
-			recordContainingOption[last] = newValue;
-		},
-		// Traverses the given path into the active tool's option struct, and returns the value at the path tail
-		getToolOption(optionPath: string[]): number {
-			const last = optionPath.slice(-1)[0];
-			const recordContainingOption = this.getRecordContainingOption(optionPath);
-			return recordContainingOption[last];
-		},
-		handleIconButtonAction(option: IconButtonWidget) {
-			if (option.message) {
-				this.sendToolMessage(option.message);
-				return;
-			}
-
-			if (option.callback) {
-				option.callback();
-				return;
-			}
-
-			this.dialog.comingSoon();
-		},
-	},
-	data() {
-		const toolOptionsWidgets: Record<ToolName, WidgetRow> = {
-			Select: [
-				{ kind: "IconButton", message: { Align: { axis: "X", aggregate: "Min" } }, tooltip: "Align Left", props: { icon: "AlignLeft", size: 24 } },
-				{ kind: "IconButton", message: { Align: { axis: "X", aggregate: "Center" } }, tooltip: "Align Horizontal Center", props: { icon: "AlignHorizontalCenter", size: 24 } },
-				{ kind: "IconButton", message: { Align: { axis: "X", aggregate: "Max" } }, tooltip: "Align Right", props: { icon: "AlignRight", size: 24 } },
-
-				{ kind: "Separator", props: { type: "Unrelated" } },
-
-				{ kind: "IconButton", message: { Align: { axis: "Y", aggregate: "Min" } }, tooltip: "Align Top", props: { icon: "AlignTop", size: 24 } },
-				{ kind: "IconButton", message: { Align: { axis: "Y", aggregate: "Center" } }, tooltip: "Align Vertical Center", props: { icon: "AlignVerticalCenter", size: 24 } },
-				{ kind: "IconButton", message: { Align: { axis: "Y", aggregate: "Max" } }, tooltip: "Align Bottom", props: { icon: "AlignBottom", size: 24 } },
-
-				{ kind: "Separator", props: { type: "Related" } },
-
-				{
-					kind: "PopoverButton",
-					popover: {
-						title: "Align",
-						text: "The contents of this popover menu are coming soon",
-					},
-					props: {},
-				},
-
-				{ kind: "Separator", props: { type: "Section" } },
-
-				{ kind: "IconButton", message: "FlipHorizontal", tooltip: "Flip Horizontal", props: { icon: "FlipHorizontal", size: 24 } },
-				{ kind: "IconButton", message: "FlipVertical", tooltip: "Flip Vertical", props: { icon: "FlipVertical", size: 24 } },
-
-				{ kind: "Separator", props: { type: "Related" } },
-
-				{
-					kind: "PopoverButton",
-					popover: {
-						title: "Flip",
-						text: "The contents of this popover menu are coming soon",
-					},
-					props: {},
-				},
-
-				{ kind: "Separator", props: { type: "Section" } },
-
-				{ kind: "IconButton", tooltip: "Boolean Union", callback: (): void => this.dialog.comingSoon(197), props: { icon: "BooleanUnion", size: 24 } },
-				{ kind: "IconButton", tooltip: "Boolean Subtract Front", callback: (): void => this.dialog.comingSoon(197), props: { icon: "BooleanSubtractFront", size: 24 } },
-				{ kind: "IconButton", tooltip: "Boolean Subtract Back", callback: (): void => this.dialog.comingSoon(197), props: { icon: "BooleanSubtractBack", size: 24 } },
-				{ kind: "IconButton", tooltip: "Boolean Intersect", callback: (): void => this.dialog.comingSoon(197), props: { icon: "BooleanIntersect", size: 24 } },
-				{ kind: "IconButton", tooltip: "Boolean Difference", callback: (): void => this.dialog.comingSoon(197), props: { icon: "BooleanDifference", size: 24 } },
-
-				{ kind: "Separator", props: { type: "Related" } },
-
-				{
-					kind: "PopoverButton",
-					popover: {
-						title: "Boolean",
-						text: "The contents of this popover menu are coming soon",
-					},
-					props: {},
-				},
-			],
-			Crop: [],
-			Navigate: [],
-			Eyedropper: [],
-			Text: [{ kind: "NumberInput", optionPath: ["font_size"], props: { min: 1, isInteger: true, unit: " px", label: "Font size" } }],
-			Fill: [],
-			Gradient: [],
-			Brush: [],
-			Heal: [],
-			Clone: [],
-			Patch: [],
-			Detail: [],
-			Relight: [],
-			Path: [],
-			Pen: [{ kind: "NumberInput", optionPath: ["weight"], props: { min: 1, isInteger: true, unit: " px", label: "Weight" } }],
-			Freehand: [{ kind: "NumberInput", optionPath: ["weight"], props: { min: 1, isInteger: true, unit: " px", label: "Weight" } }],
-			Spline: [],
-			Line: [{ kind: "NumberInput", optionPath: ["weight"], props: { min: 1, isInteger: true, unit: " px", label: "Weight" } }],
-			Rectangle: [],
-			Ellipse: [],
-			Shape: [{ kind: "NumberInput", optionPath: ["shape_type", "Polygon", "vertices"], props: { min: 3, isInteger: true, label: "Sides" } }],
-		};
-
-		return {
-			toolOptionsWidgets,
-		};
-	},
-	components: {
-		Separator,
-		IconButton,
-		PopoverButton,
-		NumberInput,
-		LayoutRow,
-	},
-});
-</script>