Implement the Properties panel with a transform section for layers (#527)

* 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

* unfinished layer hook in

* fix layerData name

* layer panel options bar

* basic x/y movment

* working transform section

* changed messages from tuples to structs

* hook up text input

* - fixed number input to be more clear
- fixed actions for properties message handler

* Add styling

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

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

@@ -185,8 +185,9 @@ export default defineComponent({
 			// Find the amount of digits on the left side of the decimal
 			// 10.25 == 2
 			// 1.23 == 1
-			// 0.23 == 0 (reason for the slightly more complicated code)
-			const leftSideDigits = Math.max(Math.floor(value).toString().length, 0) * Math.sign(value);
+			// 0.23 == 0 (Reason for the slightly more complicated code)
+			const absValueInt = Math.floor(Math.abs(value));
+			const leftSideDigits = absValueInt === 0 ? 0 : absValueInt.toString().length;
 			const roundingPower = 10 ** Math.max(this.displayDecimalPlaces - leftSideDigits, 0);
 
 			const displayValue = Math.round(value * roundingPower) / roundingPower;

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

@@ -12,7 +12,13 @@
 	></FieldInput>
 </template>
 
-<style lang="scss"></style>
+<style lang="scss">
+.text-input {
+	input {
+		text-align: left;
+	}
+}
+</style>
 
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
@@ -20,7 +26,7 @@ import { defineComponent, PropType } from "vue";
 import FieldInput from "@/components/widgets/inputs/FieldInput.vue";
 
 export default defineComponent({
-	emits: ["update:value"],
+	emits: ["update:value", "commitText"],
 	props: {
 		value: { type: String as PropType<string>, required: true },
 		label: { type: String as PropType<string>, required: false },
@@ -54,7 +60,13 @@ export default defineComponent({
 		// enter key (via the `change` event) or when the <input> element is defocused (with the `blur` event binding)
 		onTextChanged() {
 			// The `inputElement.blur()` call in `onCancelTextChange()` causes itself to be run again, so this if statement skips a second run
-			if (this.editing) this.onCancelTextChange();
+			if (!this.editing) return;
+
+			this.onCancelTextChange();
+
+			// TODO: Find a less hacky way to do this
+			const inputElement = (this.$refs.fieldInput as typeof FieldInput).$refs.input as HTMLInputElement;
+			this.$emit("commitText", inputElement.value);
 		},
 		onCancelTextChange() {
 			this.editing = false;