rich text is not moved when delted

Logo/logo.scad

@@ -0,0 +1,73 @@
+
+length = 10;
+n = 5;
+
+// Draw all geometry
+//translate([0,0]) polygon(ngon(n, length));
+
+translate([0,0]) hollow_ngon(n, length);
+
+
+
+// Simple list comprehension for creating N-gon vertices
+function ngon(num, r) = 
+  [for (i=[0:num-1], a=i*360/num) [ r*cos(a), r*sin(a) ]];
+
+
+
+module hollow_ngon(num, r, width = 1) {
+   difference() {
+      translate([0,0]) polygon(ngon(num, r));
+      translate([0,0]) polygon(ngon(num, r-width));
+   }
+}
+
+l = 10;
+
+
+CubePoints = [
+  [  0,  0,  0 ],  //0
+  [ 10,  0,  0 ],  //1
+  [ 10,  7,  0 ],  //2
+  [  0,  7,  0 ],  //3
+  [  0,  0,  5 ],  //4
+  [ 10,  0,  5 ],  //5
+  [ 10,  7,  5 ],  //6
+  [  0,  7,  5 ]]; //7
+  
+CubeFaces = [
+  [0,1,2,3],  // bottom
+  [4,5,1,0],  // front
+  [7,6,5,4],  // top
+  [5,6,2,1],  // right
+  [6,7,3,2],  // back
+  [7,4,0,3]]; // left
+  
+polyhedron( CubePoints, CubeFaces );
+
+//The coordinates of the 12 additional vertices are (0, ±(1 + h), ±(1 − h2)), (±(1 + h), ±(1 − h2), 0) and (±(1 − h2), 0, ±(1 + h)).
+// (0, ±(1 + h), ±(1 − h2)), 
+  // (0, (1 + h), (1 − h2) ),
+// (±(1 + h), ±(1 − h2), 0) 
+// (±(1 − h2), 0, ±(1 + h))
+
+steps = 50;
+sides = 5;
+
+
+vert = [
+  
+]
+
+
+points = [
+	// first expression generating the points in the positive Y quadrant
+  //(0, ±(1 + h), ±(1 − h2)),	
+  for (a = [0 : sides]) [ a, 10 * sin(a * 360 / steps) + 10 ],
+	// second expression generating the points in the negative Y quadrant
+	for (a = [steps : -1 : 0]) [ a, 10 * cos(a * 360 / steps) - 20 ],
+	// additional list of fixed points
+	[ 10, -3 ], [ 3, 0 ], [ 10, 3 ]
+];
+
+polygon(points);

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>