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/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() {