From 8fbab92e1b58227cab8611a1361faa67bd67b29a Mon Sep 17 00:00:00 2001
From: Thomas <dev.csnova@gmail.com>
Date: Sat, 9 Apr 2022 18:59:28 -0500
Subject: [PATCH] fixed dragability after new statment is added

---
 src/components/TextBox.vue | 7 ++-----
 src/pages/Editor.vue       | 8 ++++++--
 src/support/const.ts       | 2 ++
 src/support/parse.ts       | 3 +++
 src/types.ts               | 4 +++-
 5 files changed, 16 insertions(+), 8 deletions(-)
 create mode 100644 src/support/const.ts

diff --git a/src/components/TextBox.vue b/src/components/TextBox.vue
index 4a7dce5..74f8362 100644
--- a/src/components/TextBox.vue
+++ b/src/components/TextBox.vue
@@ -1,20 +1,17 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { RichTextBox } from "../types.ts";
-
+import { stepX, stepY } from "../support/const.ts";
 const props = defineProps({
   value: {
     type: RichTextBox,
   },
-  // statement: { type: String, required: true },
-  // startingX:  { type: Number, default: 0 },
-  // startingY:  { type: Number, default: 0 },
 });
 </script>
 
 <template>
   <Draggable
-    :grid="[5, 5]"
+    :grid="[stepX, stepY]"
     :default-position="{ x: props.value.x, y: props.value.y }"
   >
     <div style="display: flex; bottom: 10px; right: 0">
diff --git a/src/pages/Editor.vue b/src/pages/Editor.vue
index 338141d..914c44e 100644
--- a/src/pages/Editor.vue
+++ b/src/pages/Editor.vue
@@ -11,6 +11,7 @@ import VarDeclEditor from './VarDeclEditor.vue'
 import ExpressionEditor from './ExpressionEditor.vue'
 import TextBox from '../components/TextBox.vue'
 import {RichTextBox} from "../types.ts";
+import { stepX, stepY } from "../support/const.ts";
 
 const math = new MathPage(uuidv4())
 const statements = ref<MathStatement[]>([])
@@ -114,15 +115,18 @@ function richUpdateValue() {
     <q-page-container id="editor" >
 <!--      <WrapperBox />-->
 
-      <span v-for="statement in statements">
+      <span v-for="statement in statements" style="display: flex">
         <Draggable
-            :grid="[25, 25]"
+            :grid="[stepX, stepY]"
         >
+        <div>
           <Statement
             :key="statementsKey"
             :statement="statement"
             :evaluation="evaluation"
           />
+        </div>
+
         </Draggable>
       </span>
 
diff --git a/src/support/const.ts b/src/support/const.ts
new file mode 100644
index 0000000..4d1ef7f
--- /dev/null
+++ b/src/support/const.ts
@@ -0,0 +1,2 @@
+export const stepX = 5
+export const stepY = 5
diff --git a/src/support/parse.ts b/src/support/parse.ts
index f5d96da..b9cf433 100644
--- a/src/support/parse.ts
+++ b/src/support/parse.ts
@@ -269,6 +269,9 @@ export class MathStatement {
 
         /** The raw statement input by the user. */
         public readonly raw: string,
+
+        public x: Number = 0,
+        public y: Number = 0,
     ) {}
 
     /** Parse the raw statement to an AST. */
diff --git a/src/types.ts b/src/types.ts
index 275eaf8..d459c20 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -98,5 +98,7 @@ export class RichTextBox {
         public text: string = '',
         public x: Number = 0,
         public y: Number = 0,
-        ) {}
+        ) {
+   
+    }
 }
\ No newline at end of file