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>