compass now reacts to clicks and can submit

ui/src/components/widgets/Compass.vue

@@ -4,7 +4,12 @@
       <div class="compass-label compass-label-left">{{ leftLabel }}</div>
       <div class="compass-container">
         <div class="compass-label compass-label-top">{{ topLabel }}</div>
-        <div class="compass">
+        <div
+          class="compass"
+          ref="compass"
+          @mousedown="onMouse"
+          @mousemove="onMouse"
+        >
           <div class="compass-x-axis"></div>
           <div class="compass-y-axis"></div>
           <div
@@ -33,6 +38,7 @@
           :max="xRange"
         />
       </div>
+      <sl-icon-button name="save" :disabled="!dirty" @click="submit" />
       <div class="compass-field">
         <label for="compass_field_y_{{ widget.name }}">
           {{ yLabel }}
@@ -50,11 +56,12 @@
 
 <script lang="ts">
 import { asDict } from "@/lib/entity";
-import { IEntry } from "@/types/base";
-import { defineComponent, PropType, ref } from "vue";
+import { AttributeChange, IEntry } from "@/types/base";
+import { defineComponent, PropType, ref, watch } from "vue";
 
 export default defineComponent({
   name: "Compass",
+  emits: ["edit"],
   props: {
     attributes: {
       type: Array as PropType<[string, IEntry][]>,
@@ -112,17 +119,97 @@ export default defineComponent({
     markerLeft(): string {
       return `${((this.xVal + this.xRange) / (this.xRange * 2)) * 100}%`;
     },
+    dirty(): boolean {
+      return this.origXVal !== this.xVal || this.origYVal !== this.yVal;
+    },
   },
   setup(props) {
     const attrs = asDict(props.attributes);
-    const xVal = ref(parseInt(attrs[props.xAttrName]) || -1);
-    const yVal = ref(parseInt(attrs[props.yAttrName]) || -1);
+    const origXVal = ref(parseInt(attrs[props.xAttrName]) || -1);
+    const origYVal = ref(parseInt(attrs[props.yAttrName]) || -1);
+    const xVal = ref(origXVal.value);
+    const yVal = ref(origYVal.value);
+
+    watch(
+      () => props.attributes,
+      () => {
+        const attrs = asDict(props.attributes);
+        origXVal.value = parseInt(attrs[props.xAttrName]) || -1;
+        origYVal.value = parseInt(attrs[props.yAttrName]) || -1;
+      }
+    );
 
     return {
       xVal,
       yVal,
+      origXVal,
+      origYVal,
     };
   },
+  methods: {
+    submit() {
+      const xValAddr = this.attributes.find(
+        ([_, attr]) => attr.attribute === this.xAttrName
+      )?.[0];
+
+      if (xValAddr) {
+        this.$emit("edit", {
+          type: "delete",
+          addr: xValAddr,
+        } as AttributeChange);
+
+        // this.$emit("edit", {
+        //   type: "update",
+        //   addr: xValAddr,
+        //   value: this.xVal,
+        // } as AttributeChange);
+      }
+      this.$emit("edit", {
+        type: "create",
+        attribute: this.xAttrName,
+        value: this.xVal,
+      } as AttributeChange);
+
+      const yValAddr = this.attributes.find(
+        ([_, attr]) => attr.attribute === this.yAttrName
+      )?.[0];
+
+      if (yValAddr) {
+        this.$emit("edit", {
+          type: "delete",
+          addr: yValAddr,
+        } as AttributeChange);
+
+        // this.$emit("edit", {
+        //   type: "update",
+        //   addr: yValAddr,
+        //   value: this.yVal,
+        // } as AttributeChange);
+      }
+      this.$emit("edit", {
+        type: "create",
+        attribute: this.yAttrName,
+        value: this.yVal,
+      } as AttributeChange);
+    },
+    onMouse(ev: MouseEvent) {
+      if (ev.buttons > 0) {
+        const bbox = (
+          this.$refs.compass as HTMLDivElement
+        ).getBoundingClientRect();
+        this.xVal = Math.round(
+          ((ev.clientX - bbox.x - bbox.width / 2) / bbox.width) *
+            this.xRange *
+            2
+        );
+        this.yVal = Math.round(
+          ((ev.clientY - bbox.y - bbox.height / 2) / bbox.height) *
+            this.yRange *
+            -2
+        );
+      }
+    },
+  },
 });
 </script>