From 30603ac3f6ae4a69f038be49f47d0e12390e42d0 Mon Sep 17 00:00:00 2001
From: Thomas <dev.csnova@gmail.com>
Date: Sat, 9 Apr 2022 19:58:38 -0500
Subject: [PATCH 1/4] idk

---
 src/components/ImageBox.vue  |  47 ++++++++++++
 src/pages/Editor.vue         | 143 +++++++++++++++++++----------------
 src/pages/RichTextEditor.vue |   2 +
 src/support/page.ts          |   2 +-
 src/support/parse.ts         |   2 +-
 src/{ => support}/types.ts   |   0
 6 files changed, 128 insertions(+), 68 deletions(-)
 create mode 100644 src/components/ImageBox.vue
 create mode 100644 src/pages/RichTextEditor.vue
 rename src/{ => support}/types.ts (100%)

diff --git a/src/components/ImageBox.vue b/src/components/ImageBox.vue
new file mode 100644
index 0000000..80216ac
--- /dev/null
+++ b/src/components/ImageBox.vue
@@ -0,0 +1,47 @@
+<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,
+  },
+});
+</script>
+
+<template>
+  <Draggable
+    :grid="[stepX, stepY]"
+    :default-position="{ x: props.value.x, y: props.value.y }"
+  >
+    <div>
+      <q-card flat bordered>
+        <q-card-section style="padding: 0">
+          <div class="row items-center no-wrap">
+            <q-card-section v-html="props.value.text" />
+            <div class="col-auto">
+              <q-btn color="grey-7" round flat icon="more_vert">
+                <q-menu cover auto-close>
+                  <q-list>
+                    <q-item clickable>
+                      <q-item-section @click="() => $emit('edit')"
+                        >Edit</q-item-section
+                      >
+                    </q-item>
+                    <q-item clickable>
+                      <q-item-section @click="() => $emit('remove')"
+                        >Remove</q-item-section
+                      >
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </q-btn>
+            </div>
+          </div>
+        </q-card-section>
+      </q-card>
+    </div>
+  </Draggable>
+</template>
+
+<style lang="sass" scoped></style>
diff --git a/src/pages/Editor.vue b/src/pages/Editor.vue
index 8a30b0d..bd6a54f 100644
--- a/src/pages/Editor.vue
+++ b/src/pages/Editor.vue
@@ -1,69 +1,73 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { v4 as uuidv4 } from 'uuid'
-import WrapperBox from '../components/WrapperBox.vue'
-import {MathPage} from '../support/page'
-import {MathStatement} from '../support/parse'
-import Katex from '../components/Katex.vue'
-import {EvaluationResult, StatementID} from '../types'
-import Statement from '../components/Statement.vue'
-import VarDeclEditor from './VarDeclEditor.vue'
-import ExpressionEditor from './ExpressionEditor.vue'
-import TextBox from '../components/TextBox.vue'
-import {RichTextBox} from "../types.ts";
+import { ref } from "vue";
+import { v4 as uuidv4 } from "uuid";
+import WrapperBox from "../components/WrapperBox.vue";
+import { MathPage } from "../support/page";
+import { MathStatement } from "../support/parse";
+import Katex from "../components/Katex.vue";
+import { EvaluationResult, StatementID } from "../types";
+import Statement from "../components/Statement.vue";
+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[]>([])
-const evaluation = ref<EvaluationResult|undefined>()
-const statementsKey = ref<string>(uuidv4())
+const math = new MathPage(uuidv4());
+const statements = ref<MathStatement[]>([]);
+const evaluation = ref<EvaluationResult | undefined>();
+const statementsKey = ref<string>(uuidv4());
 const leftDrawerOpen = ref(false);
 
 function toggleLeftDrawer() {
   leftDrawerOpen.value = !leftDrawerOpen.value;
 }
 
-const newVariableModalOpen = ref(false)
+const newVariableModalOpen = ref(false);
 const openNewVariableDeclModal = () => {
-  newVariableModalOpen.value = true
-}
+  newVariableModalOpen.value = true;
+};
 
-const newExpressionModalOpen = ref(false)
+const newExpressionModalOpen = ref(false);
 const openNewExpressionModal = () => {
-  newExpressionModalOpen.value = true
-}
+  newExpressionModalOpen.value = true;
+};
 
 const updateStatements = () => {
-  statements.value = math.getStatements()
+  statements.value = math.getStatements();
   try {
-    evaluation.value = math.evaluate()
+    evaluation.value = math.evaluate();
   } catch (_) {
-    evaluation.value = undefined
+    evaluation.value = undefined;
   }
-  statementsKey.value = uuidv4()
-}
+  statementsKey.value = uuidv4();
+};
 
 const saveNewVariable = (stmt: MathStatement) => {
-  math.addStatement(stmt)
-  newVariableModalOpen.value = false
-  updateStatements()
-}
+  math.addStatement(stmt);
+  newVariableModalOpen.value = false;
+  updateStatements();
+};
 
 const saveNewExpression = (stmt: MathStatement) => {
-  math.addStatement(stmt)
-  newExpressionModalOpen.value = false
-  updateStatements()
-}
+  math.addStatement(stmt);
+  newExpressionModalOpen.value = false;
+  updateStatements();
+};
 
 /*
   Rich Text Stuff
 */
 
-const richTextStatements = ref([
-  new RichTextBox('newText'),
-  new RichTextBox('newText', 0,100)
+const makeNewRichTextBox = () => {
+  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", id, richEditModal);
+};
 
-  ]);
+const richTextStatements = ref([]);
 
 const richEditModal = ref(false);
 const richEditExpression = ref("");
@@ -79,6 +83,9 @@ const richEditStatement = (id: number) => {
 function richUpdateValue() {
   richTextStatements.value[richEditID.value].text = richEditExpression.value;
 }
+const removeRichTextBox = (id: number) => {
+  richTextStatements.value.splice(id, 1);
+};
 </script>
 
 <template>
@@ -112,52 +119,50 @@ function richUpdateValue() {
       <!-- drawer content -->
     </q-drawer>
 
-    <q-page-container id="editor" >
-<!--      <WrapperBox />-->
+    <q-page-container id="editor">
+      <!--      <WrapperBox />-->
 
       <span v-for="statement in statements" style="display: flex">
-        <Draggable
-            :grid="[stepX, stepY]"
-        >
-        <div>
-          <Statement
-            :key="statementsKey"
-            :statement="statement"
-            :evaluation="evaluation"
-          />
-        </div>
-
+        <Draggable :grid="[stepX, stepY]">
+          <div>
+            <Statement
+              :key="statementsKey"
+              :statement="statement"
+              :evaluation="evaluation"
+            />
+          </div>
         </Draggable>
       </span>
 
       <q-dialog v-model="newVariableModalOpen">
-        <VarDeclEditor
-          v-on:save="s => saveNewVariable(s)"
-        />
+        <VarDeclEditor v-on:save="(s) => saveNewVariable(s)" />
       </q-dialog>
 
       <q-dialog v-model="newExpressionModalOpen">
-        <ExpressionEditor
-          v-on:save="s => saveNewExpression(s)"
-        />
+        <ExpressionEditor v-on:save="(s) => saveNewExpression(s)" />
       </q-dialog>
 
       <q-page-sticky position="bottom-right" :offset="[32, 32]">
         <q-fab color="primary" icon="add" direction="left">
           <q-fab-action
-              color="secondary"
-              label="x"
-              label-style="font-family: serif; font-size: 1.4em; padding: 0"
-              title="Add a variable declaration"
-              @click="() => openNewVariableDeclModal()"
+            color="secondary"
+            label="x"
+            label-style="font-family: serif; font-size: 1.4rem; padding: 0"
+            title="Add a variable declaration"
+            @click="() => openNewVariableDeclModal()"
           />
           <q-fab-action
             color="secondary"
             icon="code"
-            label-style="font-family: serif; font-size: 1.4em; padding: 0"
             title="Add an expression"
             @click="() => openNewExpressionModal()"
           />
+          <q-fab-action
+            color="secondary"
+            icon="text"
+            title="Add a Text Box"
+            @click="() => makeNewRichTextBox()"
+          />
         </q-fab>
       </q-page-sticky>
 
@@ -166,16 +171,22 @@ function richUpdateValue() {
           <q-editor v-model="richEditExpression" min-height="5rem" />
           <q-card-actions align="right" class="text-primary">
             <q-btn flat label="Cancel" v-close-popup></q-btn>
-            <q-btn flat label="Save" @click="richUpdateValue" v-close-popup></q-btn>
+            <q-btn
+              flat
+              label="Save"
+              @click="richUpdateValue"
+              v-close-popup
+            ></q-btn>
           </q-card-actions>
         </q-card>
       </q-dialog>
+
       <div v-for="(item, index) in richTextStatements" style="display: flex">
         <TextBox
           :value="item"
           v-on:edit="() => (item.text ? richEditStatement(index) : {})"
+          v-on:remove="() => removeRichTextBox(index)"
         />
-
       </div>
     </q-page-container>
 
diff --git a/src/pages/RichTextEditor.vue b/src/pages/RichTextEditor.vue
new file mode 100644
index 0000000..139597f
--- /dev/null
+++ b/src/pages/RichTextEditor.vue
@@ -0,0 +1,2 @@
+
+
diff --git a/src/support/page.ts b/src/support/page.ts
index b4e60fa..462cc03 100644
--- a/src/support/page.ts
+++ b/src/support/page.ts
@@ -2,7 +2,7 @@ import {MathStatement} from './parse'
 import * as math from 'mathjs'
 import {DepGraph} from 'dependency-graph'
 import { v4 as uuidv4 } from 'uuid'
-import {EvaluationResult, Maybe, StatementID, VariableName} from '../types'
+import {EvaluationResult, Maybe, StatementID, VariableName} from './types'
 
 /**
  * Wrapper for a page containing multiple interrelated mathematical statements.
diff --git a/src/support/parse.ts b/src/support/parse.ts
index b9cf433..5e15fb9 100644
--- a/src/support/parse.ts
+++ b/src/support/parse.ts
@@ -1,6 +1,6 @@
 import * as math from 'mathjs'
 import katex from 'katex'
-import {HTMLString, LaTeXString, StatementID} from '../types'
+import {HTMLString, LaTeXString, StatementID} from './types'
 import {v4 as uuidv4} from 'uuid'
 
 /** Base class for walks over MathNode trees. */
diff --git a/src/types.ts b/src/support/types.ts
similarity index 100%
rename from src/types.ts
rename to src/support/types.ts

From 8ca78cbe4b9a4a37d7a9df14ea32d9afd72f2036 Mon Sep 17 00:00:00 2001
From: Thomas <dev.csnova@gmail.com>
Date: Sat, 9 Apr 2022 20:03:02 -0500
Subject: [PATCH 2/4] ffixed toms bad

---
 src/support/parse.ts |  4 ++--
 src/support/types.ts | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/support/parse.ts b/src/support/parse.ts
index 5e15fb9..0855dbe 100644
--- a/src/support/parse.ts
+++ b/src/support/parse.ts
@@ -270,8 +270,8 @@ export class MathStatement {
         /** The raw statement input by the user. */
         public readonly raw: string,
 
-        public x: Number = 0,
-        public y: Number = 0,
+        public x: number = 0,
+        public y: number = 0,
     ) {}
 
     /** Parse the raw statement to an AST. */
diff --git a/src/support/types.ts b/src/support/types.ts
index d459c20..4e2c936 100644
--- a/src/support/types.ts
+++ b/src/support/types.ts
@@ -96,9 +96,9 @@ export interface EvaluationResult {
 export class RichTextBox {
     constructor(
         public text: string = '',
-        public x: Number = 0,
-        public y: Number = 0,
-        ) {
-   
+        public x: number = 0,
+        public y: number = 0,
+    ) {
+
     }
-}
\ No newline at end of file
+}

From 82d361d7ef25dfa9d9bee3a0d04830aca96cfc42 Mon Sep 17 00:00:00 2001
From: Thomas <dev.csnova@gmail.com>
Date: Sat, 9 Apr 2022 20:12:43 -0500
Subject: [PATCH 3/4] fixed toms stupid

---
 src/components/ImageBox.vue    | 10 +++-------
 src/components/Statement.vue   |  2 +-
 src/components/TextBox.vue     | 11 ++++-------
 src/pages/Editor.vue           |  4 ++--
 src/pages/ExpressionEditor.vue |  2 +-
 src/pages/VarDeclEditor.vue    |  2 +-
 6 files changed, 12 insertions(+), 19 deletions(-)

diff --git a/src/components/ImageBox.vue b/src/components/ImageBox.vue
index 80216ac..21a91e2 100644
--- a/src/components/ImageBox.vue
+++ b/src/components/ImageBox.vue
@@ -1,12 +1,8 @@
 <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,
-  },
-});
+import { RichTextBox } from "../support/types";
+import { stepX, stepY } from "../support/const";
+const props = defineProps<{value: RichTextBox}>();
 </script>
 
 <template>
diff --git a/src/components/Statement.vue b/src/components/Statement.vue
index 05b4a2e..2a80941 100644
--- a/src/components/Statement.vue
+++ b/src/components/Statement.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {EvaluationResult, Maybe} from '../types'
+import {EvaluationResult, Maybe} from '../support/types'
 import {MathStatement} from '../support/parse'
 import {computed} from 'vue'
 import Katex from './Katex.vue'
diff --git a/src/components/TextBox.vue b/src/components/TextBox.vue
index 80216ac..7318fa9 100644
--- a/src/components/TextBox.vue
+++ b/src/components/TextBox.vue
@@ -1,12 +1,9 @@
 <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,
-  },
-});
+import { RichTextBox } from "../support/types";
+import { stepX, stepY } from "../support/const";
+const props = defineProps<{value: RichTextBox}>();
+
 </script>
 
 <template>
diff --git a/src/pages/Editor.vue b/src/pages/Editor.vue
index 0ec3342..3d5fba2 100644
--- a/src/pages/Editor.vue
+++ b/src/pages/Editor.vue
@@ -101,10 +101,10 @@ const makeNewRichTextBox = () => {
   richEditID.value = richTextStatements.value.length - 1;
   richEditExpression.value = richTextStatements.value[richEditID.value].text;
   richEditModal.value = true;
-  console.log("editing statement", id, richEditModal);
+  console.log("editing statement",richEditID.value, richEditModal);
 };
 
-const richTextStatements = ref([]);
+const richTextStatements = ref([new RichTextBox("Hello World")]);
 
 const richEditModal = ref(false);
 const richEditExpression = ref("");
diff --git a/src/pages/ExpressionEditor.vue b/src/pages/ExpressionEditor.vue
index 6fffc12..ecd565b 100644
--- a/src/pages/ExpressionEditor.vue
+++ b/src/pages/ExpressionEditor.vue
@@ -3,7 +3,7 @@ import {defineEmits, ref} from 'vue'
 import {MathStatement} from '../support/parse'
 import Katex from '../components/Katex.vue'
 import { v4 as uuidv4 } from 'uuid'
-import {StatementID} from '../types'
+import {StatementID} from '../support/types'
 
 const emit = defineEmits<{
   (eventName: 'save', statement: MathStatement): void
diff --git a/src/pages/VarDeclEditor.vue b/src/pages/VarDeclEditor.vue
index a8f545f..53cc274 100644
--- a/src/pages/VarDeclEditor.vue
+++ b/src/pages/VarDeclEditor.vue
@@ -3,7 +3,7 @@ import {ref} from 'vue'
 import {MathStatement} from '../support/parse'
 import {v4 as uuidv4} from 'uuid'
 import Katex from '../components/Katex.vue'
-import {StatementID} from '../types'
+import {StatementID} from '../support/types'
 
 const emit = defineEmits<{
   (eventName: 'save', statement: MathStatement): void,

From ec69324496bab13b432c89a969b0b25bf5199afc Mon Sep 17 00:00:00 2001
From: Thomas <dev.csnova@gmail.com>
Date: Sat, 9 Apr 2022 20:35:39 -0500
Subject: [PATCH 4/4] fixed

---
 src/assets/grid.svg  |  5 +++--
 src/support/types.ts | 13 +++++++++++--
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/assets/grid.svg b/src/assets/grid.svg
index 7b35c2d..ac2d34e 100644
--- a/src/assets/grid.svg
+++ b/src/assets/grid.svg
@@ -1,11 +1,12 @@
 <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
   <defs>
     <pattern id="smallGrid" width="25" height="25" patternUnits="userSpaceOnUse">
-      <path d="M 25 0 L 0 0 0 25" fill="none" stroke="gray" stroke-width="0.5"/>
+      <!-- <path d="M 25 0 L 0 0 0 25" fill="none" stroke="gray" stroke-width="0.5"/> -->
+    <circle cx="0.5" cy=".5" r=".25" stroke="gray" fill="transparent" stroke-width="1"/>    
     </pattern>
     <pattern id="grid" width="250" height="250" patternUnits="userSpaceOnUse">
       <rect width="250" height="250" fill="url(#smallGrid)"/>
-      <path d="M 250 0 L 0 0 0 250" fill="none" stroke="gray" stroke-width="1"/>
+      <path d="M 250 0 L 0 0 0 250" fill="none" stroke="gray" stroke-width="2"/>
     </pattern>
   </defs>
       
diff --git a/src/support/types.ts b/src/support/types.ts
index 4e2c936..533e3aa 100644
--- a/src/support/types.ts
+++ b/src/support/types.ts
@@ -98,7 +98,16 @@ export class RichTextBox {
         public text: string = '',
         public x: number = 0,
         public y: number = 0,
-    ) {
+    ) {}
+}
 
-    }
+
+export class ImageBox {
+    constructor(
+        public text: string = '',
+        public x: number = 0,
+        public y: number = 0,
+    ) {}
 }
+
+