Resolve conflicts

src/components/TextBox.vue

@@ -4,12 +4,41 @@ import { RichTextBox } from "../support/types";
 import { stepX, stepY } from "../support/const";
 const props = defineProps<{value: RichTextBox}>();
 
+const emit = defineEmits<{
+  (eventName: 'move', x: number,y:number): void,
+  (eventName: 'edit',): void,
+  (eventName: 'remove',): void,
+
+}>()
+
+
+function onControlledDrag(e: {event: MouseEvent, data: {x: number, y: number}}) {
+  
+  // const x = e.x;
+  // const y = e.y;
+   const { x, y } = e.data;
+   props.value.x = x;
+   props.value.y = y;
+   console.log(e)
+}
+function onControlledDragStop(e: {event: MouseEvent, data: {x: number, y: number}}) {
+  // console.log(typeof(e))
+    const { x, y } = e.data;
+      // const x = e.x;
+    // const y = e.y;
+    console.log(self)
+    emit('move', x, y);
+  onControlledDrag(e);
+}
+
 </script>
 
 <template>
   <Draggable
     :grid="[stepX, stepY]"
     :default-position="{ x: props.value.x, y: props.value.y }"
+    :position="{ x: props.value.x, y: props.value.y }"
+    @stop="onControlledDragStop"
   >
     <div>
       <q-card flat bordered>
@@ -21,7 +50,9 @@ const props = defineProps<{value: RichTextBox}>();
                 <q-menu cover auto-close>
                   <q-list>
                     <q-item clickable>
-                      <q-item-section @click="() => $emit('edit')"
+                      <q-item-section @click="() => $emit('edit')">
+                        <q-icon name="edit" />
+                        <q-item-label>Edit</q-item-label>
                       >Edit</q-item-section
                       >
                     </q-item>