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/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>