rich text is not moved when delted

src/components/TextBox.vue

@@ -4,12 +4,32 @@ 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,
+}>()
+
+
+function onControlledDrag(e) {
+   const { x, y } = e.data;
+   props.value.x = x;
+   props.value.y = y;
+   console.log(e)
+}
+function onControlledDragStop(e) {
+    const { x, y } = e.data;
+    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>

src/pages/Editor.vue

@@ -10,6 +10,7 @@ import ExpressionEditor from './ExpressionEditor.vue'
 import TextBox from '../components/TextBox.vue'
 import {RichTextBox} from '../support/types'
 import { stepX, stepY } from '../support/const'
+import { cos } from 'mathjs'
 
 const math = new MathPage(uuidv4());
 const statements = ref<MathStatement[]>([]);
@@ -31,6 +32,13 @@ const variableListingColumns = [
   },
 ]
 
+const stmOnControlledDragStop = (stmt: MathStatement) => (e: MouseEvent) => {
+  const { x, y } = e;
+  stmt.x = x;
+  stmt.y = y;
+}
+
+
 const variableListingRows = ref<({name: string, value: string})[]>([])
 
 function toggleLeftDrawer() {
@@ -141,16 +149,26 @@ const richEditExpression = ref("");
 const richEditID = ref(0);
 
 const richEditStatement = (id: number) => {
-  console.log("editing statement", id, richEditModal);
+  console.log("editing Text", id, richEditModal);
   richEditModal.value = true;
   richEditID.value = id;
   richEditExpression.value = richTextStatements.value[richEditID.value].text;
 };
 
+const moveRichTextBox = (id: number,x:number,y:number) => {
+  console.log("Moving Text", id, x,y);
+  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>
@@ -234,6 +252,8 @@ const removeRichTextBox = (id: number) => {
       <span v-for="statement in statements" style="display: flex">
         <Draggable
           :grid="[stepX, stepY]"
+          :position="{ x: statement.x, y: statement.y }"
+          @stop="stmOnControlledDragStop(statement)"
         >
           <div>
             <Statement
@@ -313,6 +333,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>