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