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>

src/pages/Editor.vue

@@ -32,6 +32,15 @@ const variableListingColumns = [
   },
 ]
 
+const stmOnControlledDragStop = (stmt: MathStatement) => (e: {event: MouseEvent, data: {x: number, y: number}}) => {
+  console.log(e)
+  console.log("moved stm5", stmt)
+ const { x, y } = e.data;
+  stmt.x = x;
+  stmt.y = y;
+}
+
+
 const variableListingRows = ref<({name: string, value: string})[]>([])
 
 const functionListingColumns = [
@@ -170,30 +179,37 @@ const finishEditStatement = () => {
 */
 
 const makeNewRichTextBox = () => {
-  richTextStatements.value.push(new RichTextBox(""));
+  richTextStatements.value.push(new RichTextBox(''));
   richEditID.value = richTextStatements.value.length - 1;
   richEditExpression.value = richTextStatements.value[richEditID.value].text;
   richEditModal.value = true;
-  console.log("editing statement",richEditID.value, richEditModal);
 };
 
-const richTextStatements = ref([]);
+const richTextStatements = ref<RichTextBox[]>([]);
 
 const richEditModal = ref(false);
 const richEditExpression = ref("");
 const richEditID = ref(0);
 
 const richEditStatement = (id: number) => {
-  console.log("editing statement", id, richEditModal);
   richEditModal.value = true;
   richEditID.value = id;
   richEditExpression.value = richTextStatements.value[richEditID.value].text;
 };
 
+const moveRichTextBox = (id: number,x:number,y:number) => {
+  richEditID.value = id;
+  richTextStatements.value[richEditID.value].x = x;
+  richTextStatements.value[richEditID.value].y = y;
+};
+
+
+
 function richUpdateValue() {
   richTextStatements.value[richEditID.value].text = richEditExpression.value;
 }
 const removeRichTextBox = (id: number) => {
+  console.log(richTextStatements.value[id]);
   richTextStatements.value.splice(id, 1);
 };
 </script>
@@ -277,6 +293,9 @@ const removeRichTextBox = (id: number) => {
       <span v-for="statement in statements" style="display: flex">
         <Draggable
           :grid="[stepX, stepY]"
+          :position="{ x: statement.x, y: statement.y }"
+          :default-position="{ x: statement.x, y: statement.y }"
+          @stop="(e: {event: MouseEvent, data: {x: number, y: number}}) => stmOnControlledDragStop(statement)(e)"
         >
           <div>
             <Statement
@@ -375,6 +394,7 @@ const removeRichTextBox = (id: number) => {
           :value="item"
           v-on:edit="() => (item.text ? richEditStatement(index) : {})"
           v-on:remove="() => removeRichTextBox(index)"
+          v-on:move="(x, y) => moveRichTextBox(index, x, y)"
         />
       </div>
     </q-page-container>