From 8f534c33204f937a8aae557132dc6a84643c6a60 Mon Sep 17 00:00:00 2001
From: Thomas <dev.csnova@gmail.com>
Date: Sat, 9 Apr 2022 14:31:27 -0500
Subject: [PATCH 01/16] working on dragable wraper

---
 src/components/WrapperBox.vue | 29 +++++++++++++++++++++++++++++
 src/pages/Editor.vue          |  8 +++++---
 vite.config.ts                | 12 ++++++------
 3 files changed, 40 insertions(+), 9 deletions(-)
 create mode 100644 src/components/WrapperBox.vue

diff --git a/src/components/WrapperBox.vue b/src/components/WrapperBox.vue
new file mode 100644
index 0000000..2f894b4
--- /dev/null
+++ b/src/components/WrapperBox.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useQuasar } from "quasar";
+
+const $q = useQuasar();
+const count = ref(0);
+function increment() {
+  count.value++
+}
+
+</script>
+
+<template>
+  <Draggable :grid="[25, 25]">
+    <div>
+      <div>Grid with component</div>
+
+        <q-btn @click="increment">Count is: {{ count }}</q-btn>
+        <q-card class="my-card">
+            hi
+        </q-card>
+    </div>
+  </Draggable>
+</template>
+<style lang="sass" scoped>
+.my-card
+  width: 50%
+  max-width: 250px
+</style>
\ No newline at end of file
diff --git a/src/pages/Editor.vue b/src/pages/Editor.vue
index d267c91..15a27cc 100644
--- a/src/pages/Editor.vue
+++ b/src/pages/Editor.vue
@@ -1,14 +1,16 @@
 <script setup lang="ts">
-  
+import WrapperBox from '../components/WrapperBox.vue';
+
 </script>
 
 <template>
 
+
+    <WrapperBox/>
     <Draggable>
     <div class="box">
 
     <q-btn
-        @click="showNotification"
         color="primary"
         label="Show another notification"
         />
@@ -16,4 +18,4 @@
   </Draggable>
 </template>
 
-<style></style>
\ No newline at end of file
+<style></style>
diff --git a/vite.config.ts b/vite.config.ts
index 731ae55..3bc00d8 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -12,11 +12,11 @@ export default defineConfig({
         },
     },
     plugins: [
-      vue({
-          template: { transformAssetUrls },
-      }),
+        vue({
+            template: { transformAssetUrls },
+        }),
 
-      quasar({
-          sassVariables: 'src/quasar-variables.sass',
-      }),]
+        quasar({
+            sassVariables: 'src/quasar-variables.sass',
+        })],
 })

From 3adadd4b9ddfac00d9eb4c3694c673f4e8b85101 Mon Sep 17 00:00:00 2001
From: Thomas <dev.csnova@gmail.com>
Date: Sat, 9 Apr 2022 14:54:10 -0500
Subject: [PATCH 02/16] added Editor layout

---
 src/pages/Editor.vue | 60 +++++++++++++++++++++++++++++++++-----------
 src/router.ts        |  3 ++-
 2 files changed, 47 insertions(+), 16 deletions(-)

diff --git a/src/pages/Editor.vue b/src/pages/Editor.vue
index 15a27cc..7a45dee 100644
--- a/src/pages/Editor.vue
+++ b/src/pages/Editor.vue
@@ -1,21 +1,51 @@
-<script setup lang="ts">
-import WrapperBox from '../components/WrapperBox.vue';
-
-</script>
-
 <template>
+  <q-layout view="hHh Lpr fff">
+    <q-header reveal bordered class="bg-primary text-white" height-hint="98">
+      <q-toolbar>
+        <q-btn dense flat round icon="menu" @click="toggleLeftDrawer" />
+
+        <q-toolbar-title>
+          <q-avatar>
+            <img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg" />
+          </q-avatar>
+          Title
+        </q-toolbar-title>
+      </q-toolbar>
+      <q-tabs align="left">
+        <q-route-tab to="/Scratch" label="Scratch" />
+        <q-route-tab to="/Editor" label="Editor" />
+      </q-tabs>
+    </q-header>
 
+    <q-drawer show-if-above v-model="leftDrawerOpen" side="left" bordered>
+    variables
+    <q-separator />
+    function
+ <!-- drawer content -->
+    </q-drawer>
 
+    <q-page-container> 
     <WrapperBox/>
-    <Draggable>
-    <div class="box">
-
-    <q-btn
-        color="primary"
-        label="Show another notification"
-        />
-    </div>
-  </Draggable>
+
+    </q-page-container>
+
+    <q-footer reveal elevated class="bg-grey-8 text-white">
+      <q-toolbar>
+        <q-toolbar-title>
+          <div>Status</div>
+        </q-toolbar-title>
+      </q-toolbar>
+    </q-footer>
+  </q-layout>
 </template>
 
-<style></style>
+<script setup lang="ts">
+import { ref } from "vue";
+import WrapperBox from "../components/WrapperBox.vue";
+
+const leftDrawerOpen = ref(false);
+
+function toggleLeftDrawer() {
+  leftDrawerOpen.value = !leftDrawerOpen.value;
+}
+</script>
diff --git a/src/router.ts b/src/router.ts
index e0a2ff8..aaf3d4f 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -15,8 +15,9 @@ const routes = [
     {
         path: '/editor',
         name: 'Editor',
-        component: () => import('./pages/Editor.vue'),
+        component: () => import(/* webpackChunkName: "Editor" */ './pages/Editor.vue'),
     },
+
 ]
 
 const router = createRouter({

From 2e5c9e9c5fc0c27a5020cecefe70360fe0756922 Mon Sep 17 00:00:00 2001
From: Thomas <dev.csnova@gmail.com>
Date: Sat, 9 Apr 2022 15:08:26 -0500
Subject: [PATCH 03/16] Sidbar spacing

---
 src/App.vue          |  2 +-
 src/pages/Editor.vue | 20 +++++++++++++-------
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 0fdf14b..57e6d72 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,7 +12,7 @@ import { ref } from "vue";
 </script>
 
 <template>
-  <q-layout view="hHr LpR fFf">
+  <q-layout view="hHh Lpr fff">
     <q-header elevated class="bg-primary text-white" height-hint="98">
       <q-toolbar>
         <q-toolbar-title>
diff --git a/src/pages/Editor.vue b/src/pages/Editor.vue
index 7a45dee..3efbf92 100644
--- a/src/pages/Editor.vue
+++ b/src/pages/Editor.vue
@@ -18,15 +18,21 @@
     </q-header>
 
     <q-drawer show-if-above v-model="leftDrawerOpen" side="left" bordered>
-    variables
-    <q-separator />
-    function
- <!-- drawer content -->
+      <div class="column" style="height: 100%">
+        <div class="col">
+          variables
+        </div>
+        <div class="col">
+          <q-separator />
+          function
+        </div>
+      </div>
+
+      <!-- drawer content -->
     </q-drawer>
 
-    <q-page-container> 
-    <WrapperBox/>
-
+    <q-page-container>
+      <WrapperBox />
     </q-page-container>
 
     <q-footer reveal elevated class="bg-grey-8 text-white">

From b47159c4c9cc56eca9bc5f14e2096c2752dba71c Mon Sep 17 00:00:00 2001
From: garrettmills <shout@garrettmills.dev>
Date: Sat, 9 Apr 2022 15:27:37 -0500
Subject: [PATCH 04/16] Start implementing editor popup

---
 src/components/Katex.vue     | 17 +++++++----
 src/components/Statement.vue | 11 ++++++-
 src/pages/Scratch.vue        | 57 ++++++++++++++++++++++++++++++++++--
 src/support/parse.ts         | 10 +++++++
 4 files changed, 87 insertions(+), 8 deletions(-)

diff --git a/src/components/Katex.vue b/src/components/Katex.vue
index acbc53b..69b21b5 100644
--- a/src/components/Katex.vue
+++ b/src/components/Katex.vue
@@ -7,19 +7,26 @@ const props = defineProps<{
   size?: 'big' | 'small',
 }>()
 
-const getRenderedHTML = () => props.statement.toHTMLString()
+const getRenderedHTML = () => {
+  console.log('getRenderedHTML', props.statement)
+  try {
+    return props.statement.toHTMLString()
+  } catch (_) {
+    return ''
+  }
+}
 
-const renderedHtml = getRenderedHTML()
-computed(getRenderedHTML)
+let renderedHtml = getRenderedHTML()
+computed(() => renderedHtml = getRenderedHTML())
 </script>
 
 <style>
   .big {
-    transform: scale(1.3);
+    font-size: 1.3em;
   }
 
   .small {
-    transform: scale(0.9);
+    font-size: 0.9em;
   }
 </style>
 
diff --git a/src/components/Statement.vue b/src/components/Statement.vue
index 214275d..8712aab 100644
--- a/src/components/Statement.vue
+++ b/src/components/Statement.vue
@@ -7,6 +7,7 @@ import Katex from './Katex.vue'
 const props = defineProps<{
   statement: MathStatement,
   evaluation: EvaluationResult,
+  renderVersion: number,
 }>()
 
 const getValueStatement = (): Maybe<MathStatement> => {
@@ -36,6 +37,14 @@ computed(() => value = getValueStatement())
   .sidebar {
     padding-left: 10px;
   }
+
+  .edit-button {
+    border: none;
+  }
+
+  .edit-button:hover {
+    cursor: pointer;
+  }
 </style>
 
 <template>
@@ -48,7 +57,7 @@ computed(() => value = getValueStatement())
       </div>
     </div>
     <div class="sidebar">
-      <button>
+      <button class="edit-button" @click="() => $emit('edit')" title="Edit this expression">
         <img src="../assets/edit.svg" alt="Edit" height="16">
       </button>
     </div>
diff --git a/src/pages/Scratch.vue b/src/pages/Scratch.vue
index d2aa3fd..4161f73 100644
--- a/src/pages/Scratch.vue
+++ b/src/pages/Scratch.vue
@@ -3,19 +3,72 @@
   import {v4 as uuidv4} from 'uuid'
   import Statement from '../components/Statement.vue'
   import {MathStatement} from '../support/parse'
+  import {onMounted, ref} from 'vue'
+  import Katex from '../components/Katex.vue'
 
   const page = new MathPage(uuidv4())
   const stmt1Id = page.addRaw('x = y+3/4')
   const stmt2Id = page.addRaw('y = 9')
   const evaluation = page.evaluate()
+  let renderVersion = 0
 
   const stmt = page.getStatement(stmt1Id)
   console.log({page, stmt1Id})
 
-  const onEdit = (stmt: MathStatement) => () => console.log('edit', stmt)
+  let editModal = ref(false)
+  let editExpression = ref('')
+  let editPreview = ref(MathStatement.temp(''))
+  let activeStatement!: MathStatement
+
+  const editStatement = (stmt: MathStatement) => {
+    console.log('editing statement', stmt, editModal)
+    activeStatement = stmt
+    editPreview.value = MathStatement.temp(stmt.raw)
+    editModal.value = true
+    editExpression.value = stmt.raw
+  }
+
+  let key = ref(uuidv4())
+  const updateEditRender = () => {
+    const previewStmt = MathStatement.temp(editExpression.value)
+    if ( previewStmt.isValid() ) {
+      editPreview.value = MathStatement.temp(editExpression.value)
+      key.value = uuidv4()
+    }
+  }
 </script>
 
 <template>
   <p>Scratch page for testing!</p>
-  <Statement v-if="stmt" :statement="stmt" :evaluation="evaluation"/>
+  <q-dialog ref="edit-modal" v-model="editModal">
+    <q-card>
+      <q-card-section>
+        <div style="display: flex; justify-content: center">
+          <Katex :statement="editPreview" :key="key"/>
+        </div>
+      </q-card-section>
+      <q-card-section>
+        <q-input
+          v-model="editExpression"
+          v-on:update:model-value="() => updateEditRender()"
+          type="textarea"
+          outlined
+          label="Expression"
+          autogrow
+          autofocus
+        />
+      </q-card-section>
+      <q-card-actions align="right" class="text-primary">
+        <q-btn flat label="Cancel" v-close-popup></q-btn>
+        <q-btn flat label="Save" v-close-popup></q-btn>
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+  <Statement
+    v-if="stmt"
+    v-on:edit="() => editStatement(stmt)"
+    :statement="stmt"
+    :evaluation="evaluation"
+    :render-version="renderVersion"
+  />
 </template>
diff --git a/src/support/parse.ts b/src/support/parse.ts
index 6dfdae2..4245dc2 100644
--- a/src/support/parse.ts
+++ b/src/support/parse.ts
@@ -300,6 +300,16 @@ export class MathStatement {
         return node
     }
 
+    /** Returns true if the expression is valid. */
+    isValid(): boolean {
+        try {
+            this.toHTMLString()
+            return true
+        } catch (_) {
+            return false
+        }
+    }
+
     /** Get all symbols referenced in this statement. */
     symbols(): math.SymbolNode[] {
         return (new SymbolWalk()).walk(this.parse())

From 18252912a942c2b79665fb8d1ac1190b6cba8da8 Mon Sep 17 00:00:00 2001
From: garrettmills <shout@garrettmills.dev>
Date: Sat, 9 Apr 2022 15:32:45 -0500
Subject: [PATCH 05/16] Fix build

---
 src/pages/Scratch.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Scratch.vue b/src/pages/Scratch.vue
index 4161f73..08c4cba 100644
--- a/src/pages/Scratch.vue
+++ b/src/pages/Scratch.vue
@@ -66,7 +66,7 @@
   </q-dialog>
   <Statement
     v-if="stmt"
-    v-on:edit="() => editStatement(stmt)"
+    v-on:edit="() => stmt ? editStatement(stmt) : {}"
     :statement="stmt"
     :evaluation="evaluation"
     :render-version="renderVersion"

From 181b7ffbf7fc1550a797e1f4735445e939762d08 Mon Sep 17 00:00:00 2001
From: Thomas <dev.csnova@gmail.com>
Date: Sat, 9 Apr 2022 16:12:24 -0500
Subject: [PATCH 06/16] working on the text feild

---
 src/components/TextBox.vue    | 48 +++++++++++++++++++++++++++++++++++
 src/components/WrapperBox.vue |  4 +--
 src/pages/Editor.vue          |  7 +++--
 3 files changed, 54 insertions(+), 5 deletions(-)
 create mode 100644 src/components/TextBox.vue

diff --git a/src/components/TextBox.vue b/src/components/TextBox.vue
new file mode 100644
index 0000000..5209bc0
--- /dev/null
+++ b/src/components/TextBox.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useQuasar } from "quasar";
+
+const $q = useQuasar();
+const editor = ref("");
+const editMode = ref(false);
+
+function edit() {
+  editMode.value = !editMode.value;
+}
+</script>
+
+<template>
+
+  <q-dialog v-if="editMode" >
+    <q-editor v-model="editor" min-height="5rem" />
+  </q-dialog>
+
+
+  <Draggable :grid="[25, 25]">
+    <div style="display: flex">
+      <q-card flat bordered>
+        <q-card-section>
+          <div class="row items-center no-wrap">
+            <q-card-section v-html="editor" />
+            <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="edit">Edit</q-item-section>
+                    </q-item>
+                    <q-item clickable>
+                      <q-item-section>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/components/WrapperBox.vue b/src/components/WrapperBox.vue
index 2f894b4..caa52a7 100644
--- a/src/components/WrapperBox.vue
+++ b/src/components/WrapperBox.vue
@@ -16,9 +16,7 @@ function increment() {
       <div>Grid with component</div>
 
         <q-btn @click="increment">Count is: {{ count }}</q-btn>
-        <q-card class="my-card">
-            hi
-        </q-card>
+
     </div>
   </Draggable>
 </template>
diff --git a/src/pages/Editor.vue b/src/pages/Editor.vue
index 3efbf92..1a39d64 100644
--- a/src/pages/Editor.vue
+++ b/src/pages/Editor.vue
@@ -31,8 +31,10 @@
       <!-- drawer content -->
     </q-drawer>
 
-    <q-page-container>
-      <WrapperBox />
+    <q-page-container style="display: flex">
+
+      <TextBox/>
+
     </q-page-container>
 
     <q-footer reveal elevated class="bg-grey-8 text-white">
@@ -48,6 +50,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import WrapperBox from "../components/WrapperBox.vue";
+import TextBox from "../components/TextBox.vue";
 
 const leftDrawerOpen = ref(false);
 

From ad750a89595e4c89ec29cf163636895959aedd7e Mon Sep 17 00:00:00 2001
From: Thomas <dev.csnova@gmail.com>
Date: Sat, 9 Apr 2022 17:31:01 -0500
Subject: [PATCH 07/16] rich editing works

---
 src/assets/grid.svg        | 13 +++++++
 src/components/TextBox.vue | 23 ++++---------
 src/pages/Editor.vue       | 69 +++++++++++++++++++++++++++++---------
 3 files changed, 72 insertions(+), 33 deletions(-)
 create mode 100644 src/assets/grid.svg

diff --git a/src/assets/grid.svg b/src/assets/grid.svg
new file mode 100644
index 0000000..70917da
--- /dev/null
+++ b/src/assets/grid.svg
@@ -0,0 +1,13 @@
+<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <pattern id="smallGrid" width="8" height="8" patternUnits="userSpaceOnUse">
+      <path d="M 8 0 L 0 0 0 8" fill="none" stroke="gray" stroke-width="0.5"/>
+    </pattern>
+    <pattern id="grid" width="80" height="80" patternUnits="userSpaceOnUse">
+      <rect width="80" height="80" fill="url(#smallGrid)"/>
+      <path d="M 80 0 L 0 0 0 80" fill="none" stroke="gray" stroke-width="1"/>
+    </pattern>
+  </defs>
+      
+  <rect width="100%" height="100%" fill="url(#grid)" />
+</svg>
\ No newline at end of file
diff --git a/src/components/TextBox.vue b/src/components/TextBox.vue
index 5209bc0..bd61a0f 100644
--- a/src/components/TextBox.vue
+++ b/src/components/TextBox.vue
@@ -1,38 +1,27 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import { useQuasar } from "quasar";
 
-const $q = useQuasar();
-const editor = ref("");
-const editMode = ref(false);
-
-function edit() {
-  editMode.value = !editMode.value;
-}
+const props = defineProps({
+  statement: { type: String, required: true },
+  })
 </script>
 
 <template>
-
-  <q-dialog v-if="editMode" >
-    <q-editor v-model="editor" min-height="5rem" />
-  </q-dialog>
-
-
   <Draggable :grid="[25, 25]">
     <div style="display: flex">
       <q-card flat bordered>
         <q-card-section>
           <div class="row items-center no-wrap">
-            <q-card-section v-html="editor" />
+            <q-card-section v-html="props.statement" />
             <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="edit">Edit</q-item-section>
+                      <q-item-section @click="() => $emit('edit')">Edit</q-item-section>
                     </q-item>
                     <q-item clickable>
-                      <q-item-section>Remove</q-item-section>
+                      <q-item-section @click="() => $emit('remove')">Remove</q-item-section>
                     </q-item>
                   </q-list>
                 </q-menu>
diff --git a/src/pages/Editor.vue b/src/pages/Editor.vue
index 1a39d64..92d1962 100644
--- a/src/pages/Editor.vue
+++ b/src/pages/Editor.vue
@@ -1,3 +1,34 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import WrapperBox from "../components/WrapperBox.vue";
+import TextBox from "../components/TextBox.vue";
+
+const leftDrawerOpen = ref(false);
+
+function toggleLeftDrawer() {
+  leftDrawerOpen.value = !leftDrawerOpen.value;
+}
+
+/*
+  Rich Text Stuff
+*/
+
+const richTextStatments = ref([
+  { text: "test" },
+  { text: "test2" },
+  { text: "test3" },
+]);
+
+const richEditModal = ref(false);
+const richEditExpression = ref("");
+const richEditStatement = (stmt: String) => {
+  console.log('editing statement', stmt, editModal)
+  activeStatement = stmt
+  richEditModal.value = true
+  richEditExpression.value = stmt.raw
+}
+</script>
+
 <template>
   <q-layout view="hHh Lpr fff">
     <q-header reveal bordered class="bg-primary text-white" height-hint="98">
@@ -19,9 +50,7 @@
 
     <q-drawer show-if-above v-model="leftDrawerOpen" side="left" bordered>
       <div class="column" style="height: 100%">
-        <div class="col">
-          variables
-        </div>
+        <div class="col">variables</div>
         <div class="col">
           <q-separator />
           function
@@ -31,10 +60,22 @@
       <!-- drawer content -->
     </q-drawer>
 
-    <q-page-container style="display: flex">
-
-      <TextBox/>
+    <q-page-container id="editor" style="display: flex">
+      <q-dialog ref="edit-modal" v-model="richEditModal">
+        <q-card>
+          <q-card-actions align="right" class="text-primary">
+            <q-btn flat label="Cancel" v-close-popup></q-btn>
+            <q-btn flat label="Save" v-close-popup></q-btn>
+          </q-card-actions>
+        </q-card>
+      </q-dialog>
 
+      <span v-for="(item, index) in richTextStatments">
+        <TextBox
+          :statement="item.text"
+          v-on:edit="() => (stmt ? richEditStatement(stmt) : {})"
+        ></TextBox>
+      </span>
     </q-page-container>
 
     <q-footer reveal elevated class="bg-grey-8 text-white">
@@ -47,14 +88,10 @@
   </q-layout>
 </template>
 
-<script setup lang="ts">
-import { ref } from "vue";
-import WrapperBox from "../components/WrapperBox.vue";
-import TextBox from "../components/TextBox.vue";
-
-const leftDrawerOpen = ref(false);
-
-function toggleLeftDrawer() {
-  leftDrawerOpen.value = !leftDrawerOpen.value;
+<style>
+#editor {
+  background-image: url(../assets/grid.svg);
+  background-repeat: repeat;
+  height: 100%;
 }
-</script>
+</style>

From 14960831b45d9cbc37e8c1076f8296fb6c57ad5c Mon Sep 17 00:00:00 2001
From: Thomas <dev.csnova@gmail.com>
Date: Sat, 9 Apr 2022 17:31:11 -0500
Subject: [PATCH 08/16] forgot to stage these

---
 src/App.vue          |  3 ++-
 src/pages/Editor.vue | 24 +++++++++++++++---------
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 57e6d72..0d84cf4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,7 +12,7 @@ import { ref } from "vue";
 </script>
 
 <template>
-  <q-layout view="hHh Lpr fff">
+  <q-layout view="hHr LpR fFf">
     <q-header elevated class="bg-primary text-white" height-hint="98">
       <q-toolbar>
         <q-toolbar-title>
@@ -26,6 +26,7 @@ import { ref } from "vue";
       <q-tabs align="left">
         <q-route-tab to="/Scratch" label="Scratch" />
         <q-route-tab to="/Editor" label="Editor" />
+
       </q-tabs>
     </q-header>
 
diff --git a/src/pages/Editor.vue b/src/pages/Editor.vue
index 92d1962..66ad1a0 100644
--- a/src/pages/Editor.vue
+++ b/src/pages/Editor.vue
@@ -21,11 +21,17 @@ const richTextStatments = ref([
 
 const richEditModal = ref(false);
 const richEditExpression = ref("");
-const richEditStatement = (stmt: String) => {
-  console.log('editing statement', stmt, editModal)
-  activeStatement = stmt
-  richEditModal.value = true
-  richEditExpression.value = stmt.raw
+const richEditID = ref(0);
+
+const richEditStatement = (id: int) => {
+  console.log("editing statement", id, richEditModal);
+  richEditModal.value = true;
+  richEditID.value = id;
+  richEditExpression.value = richTextStatments.value[richEditID.value].text;
+};
+
+function richUpdateValue() {
+  richTextStatments.value[richEditID.value].text = richEditExpression.value;
 }
 </script>
 
@@ -61,19 +67,19 @@ const richEditStatement = (stmt: String) => {
     </q-drawer>
 
     <q-page-container id="editor" style="display: flex">
-      <q-dialog ref="edit-modal" v-model="richEditModal">
+      <q-dialog v-model="richEditModal">
         <q-card>
+          <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" v-close-popup></q-btn>
+            <q-btn flat label="Save" @click="richUpdateValue" v-close-popup></q-btn>
           </q-card-actions>
         </q-card>
       </q-dialog>
-
       <span v-for="(item, index) in richTextStatments">
         <TextBox
           :statement="item.text"
-          v-on:edit="() => (stmt ? richEditStatement(stmt) : {})"
+          v-on:edit="() => (item.text ? richEditStatement(index) : {})"
         ></TextBox>
       </span>
     </q-page-container>

From 4a3e92b910ffb0f24d1e754753d50152ffb7c1c6 Mon Sep 17 00:00:00 2001
From: garrettmills <shout@garrettmills.dev>
Date: Sat, 9 Apr 2022 17:48:41 -0500
Subject: [PATCH 09/16] Implement adding expression and var decls

---
 src/components/Statement.vue   |   5 +-
 src/pages/Editor.vue           | 112 +++++++++++++++++++++++++++++----
 src/pages/ExpressionEditor.vue |  78 +++++++++++++++++++++++
 src/pages/Scratch.vue          |   2 -
 src/pages/VarDeclEditor.vue    |  94 +++++++++++++++++++++++++++
 src/support/page.ts            |   5 ++
 src/support/parse.ts           |  14 +++++
 vite.config.ts                 |   3 +
 8 files changed, 296 insertions(+), 17 deletions(-)
 create mode 100644 src/pages/ExpressionEditor.vue
 create mode 100644 src/pages/VarDeclEditor.vue

diff --git a/src/components/Statement.vue b/src/components/Statement.vue
index 8712aab..ce75d19 100644
--- a/src/components/Statement.vue
+++ b/src/components/Statement.vue
@@ -6,12 +6,11 @@ import Katex from './Katex.vue'
 
 const props = defineProps<{
   statement: MathStatement,
-  evaluation: EvaluationResult,
-  renderVersion: number,
+  evaluation?: EvaluationResult,
 }>()
 
 const getValueStatement = (): Maybe<MathStatement> => {
-  const value = props.evaluation.statements[props.statement.id]
+  const value = props.evaluation?.statements?.[props.statement.id]
   if ( value ) {
     return MathStatement.temp(String(value))
   }
diff --git a/src/pages/Editor.vue b/src/pages/Editor.vue
index 3efbf92..3febc5e 100644
--- a/src/pages/Editor.vue
+++ b/src/pages/Editor.vue
@@ -1,3 +1,60 @@
+<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'
+
+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 openNewVariableDeclModal = () => {
+  newVariableModalOpen.value = true
+}
+
+const newExpressionModalOpen = ref(false)
+const openNewExpressionModal = () => {
+  newExpressionModalOpen.value = true
+}
+
+const updateStatements = () => {
+  statements.value = math.getStatements()
+  try {
+    evaluation.value = math.evaluate()
+  } catch (_) {
+    evaluation.value = undefined
+  }
+  statementsKey.value = uuidv4()
+}
+
+const saveNewVariable = (stmt: MathStatement) => {
+  math.addStatement(stmt)
+  newVariableModalOpen.value = false
+  updateStatements()
+}
+
+const saveNewExpression = (stmt: MathStatement) => {
+  math.addStatement(stmt)
+  newExpressionModalOpen.value = false
+  updateStatements()
+}
+
+</script>
+
 <template>
   <q-layout view="hHh Lpr fff">
     <q-header reveal bordered class="bg-primary text-white" height-hint="98">
@@ -32,7 +89,49 @@
     </q-drawer>
 
     <q-page-container>
-      <WrapperBox />
+<!--      <WrapperBox />-->
+
+      <Draggable
+        v-for="statement in statements"
+        :grid="[25, 25]"
+      >
+        <Statement
+          :key="statementsKey"
+          :statement="statement"
+          :evaluation="evaluation"
+        />
+      </Draggable>
+
+      <q-dialog v-model="newVariableModalOpen">
+        <VarDeclEditor
+          v-on:save="s => saveNewVariable(s)"
+        />
+      </q-dialog>
+
+      <q-dialog v-model="newExpressionModalOpen">
+        <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()"
+          />
+          <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>
+      </q-page-sticky>
     </q-page-container>
 
     <q-footer reveal elevated class="bg-grey-8 text-white">
@@ -44,14 +143,3 @@
     </q-footer>
   </q-layout>
 </template>
-
-<script setup lang="ts">
-import { ref } from "vue";
-import WrapperBox from "../components/WrapperBox.vue";
-
-const leftDrawerOpen = ref(false);
-
-function toggleLeftDrawer() {
-  leftDrawerOpen.value = !leftDrawerOpen.value;
-}
-</script>
diff --git a/src/pages/ExpressionEditor.vue b/src/pages/ExpressionEditor.vue
new file mode 100644
index 0000000..6fffc12
--- /dev/null
+++ b/src/pages/ExpressionEditor.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+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'
+
+const emit = defineEmits<{
+  (eventName: 'save', statement: MathStatement): void
+}>()
+
+const expressionPreview = ref(MathStatement.temp(''))
+const expressionPreviewKey = ref(uuidv4())
+const expressionError = ref<string|undefined>(undefined)
+const expressionValue = ref<string>('')
+
+const updateExpressionPreview = () => {
+  const previewStmt = MathStatement.temp(expressionValue.value)
+  if ( previewStmt.isValid() ) {
+    expressionPreview.value = MathStatement.temp(expressionValue.value)
+    expressionPreviewKey.value = uuidv4()
+  }
+}
+
+const validateExpression = () => {
+  const stmt = MathStatement.temp(expressionValue.value)
+  if ( !stmt.isValid() ) {
+    return 'The expression is invalid'
+  }
+
+  if ( stmt.defines().length > 0 ) {
+    return 'Expressions cannot declare variables'
+  }
+}
+
+const saveExpression = () => {
+  expressionError.value = validateExpression()
+  if ( expressionError.value ) {
+    return
+  }
+
+  emit('save', new MathStatement(
+      uuidv4() as StatementID,
+      expressionValue.value
+  ))
+}
+</script>
+
+<template>
+  <q-card>
+    <q-card-section>
+      <div style="display: flex; justify-content: center">
+        <Katex
+          :key="expressionPreviewKey"
+          :statement="expressionPreview"
+        />
+      </div>
+    </q-card-section>
+    <q-card-section v-if="expressionError">
+      <div style="color: darkred; font-weight: bold">{{ expressionError }}</div>
+    </q-card-section>
+    <q-card-section>
+      <q-input
+        v-model="expressionValue"
+        v-on:update:model-value="() => updateExpressionPreview()"
+        outlined
+        autogrow
+        type="textarea"
+        autofocus
+        label="Expression"
+      />
+    </q-card-section>
+    <q-card-actions align="right" class="text-primary">
+      <q-btn flat label="Cancel" v-close-popup></q-btn>
+      <q-btn flat label="Save" @click="() => saveExpression()"></q-btn>
+    </q-card-actions>
+  </q-card>
+</template>
diff --git a/src/pages/Scratch.vue b/src/pages/Scratch.vue
index 08c4cba..6e54ad8 100644
--- a/src/pages/Scratch.vue
+++ b/src/pages/Scratch.vue
@@ -10,7 +10,6 @@
   const stmt1Id = page.addRaw('x = y+3/4')
   const stmt2Id = page.addRaw('y = 9')
   const evaluation = page.evaluate()
-  let renderVersion = 0
 
   const stmt = page.getStatement(stmt1Id)
   console.log({page, stmt1Id})
@@ -69,6 +68,5 @@
     v-on:edit="() => stmt ? editStatement(stmt) : {}"
     :statement="stmt"
     :evaluation="evaluation"
-    :render-version="renderVersion"
   />
 </template>
diff --git a/src/pages/VarDeclEditor.vue b/src/pages/VarDeclEditor.vue
new file mode 100644
index 0000000..a8f545f
--- /dev/null
+++ b/src/pages/VarDeclEditor.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+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'
+
+const emit = defineEmits<{
+  (eventName: 'save', statement: MathStatement): void,
+}>()
+
+const newVariablePreview = ref(MathStatement.temp('? = ?'))
+let newVariablePreviewKey = ref(uuidv4())
+const newVariableModalError = ref<string|undefined>(undefined)
+const newVariableName = ref('')
+const newVariableValue = ref('')
+
+const updateNewVariablePreview = () => {
+  const previewStmt = MathStatement.temp(`${newVariableName.value} = ${newVariableValue.value}`)
+  if ( previewStmt.isValid() ) {
+    newVariablePreview.value = MathStatement.temp(`${newVariableName.value} = ${newVariableValue.value}`)
+    newVariablePreviewKey.value = uuidv4()
+  }
+}
+
+const validateNewVariable = () => {
+  if ( !newVariableName.value ) {
+    return 'Missing variable name'
+  }
+
+  if ( !newVariableValue.value ) {
+    return 'Missing variable value'
+  }
+
+  const stmt = MathStatement.temp(`${newVariableName.value} = ${newVariableValue.value}`)
+  if ( !stmt.isValid() ) {
+    return 'Assignment is invalid'
+  }
+
+  if ( !stmt.isNotRecursive() ) {
+    return 'A variable may not reference itself'
+  }
+}
+
+const saveNewVariable = () => {
+  newVariableModalError.value = validateNewVariable()
+  if ( newVariableModalError.value ) {
+    return
+  }
+
+  emit('save', new MathStatement(
+      uuidv4() as StatementID,
+      `${newVariableName.value} = ${newVariableValue.value}`
+  ))
+}
+</script>
+
+<template>
+  <q-card>
+    <q-card-section>
+      <div style="display: flex; justify-content: center">
+        <Katex
+          :key="newVariablePreviewKey"
+          :statement="newVariablePreview"
+        />
+      </div>
+    </q-card-section>
+    <q-card-section v-if="newVariableModalError">
+      <div style="color: darkred; font-weight: bold">{{ newVariableModalError }}</div>
+    </q-card-section>
+    <q-card-section>
+      <q-input
+        v-model="newVariableName"
+        v-on:update:model-value="() => updateNewVariablePreview()"
+        outlined
+        autofocus
+        label="Variable name"
+      />
+      <br>
+      <q-input
+        v-model="newVariableValue"
+        v-on:update:model-value="() => updateNewVariablePreview()"
+        outlined
+        type="textarea"
+        autogrow
+        label="Value"
+      />
+    </q-card-section>
+    <q-card-actions align="right" class="text-primary">
+      <q-btn flat label="Cancel" v-close-popup></q-btn>
+      <q-btn flat label="Save" @click="() => saveNewVariable()"></q-btn>
+    </q-card-actions>
+  </q-card>
+</template>
diff --git a/src/support/page.ts b/src/support/page.ts
index 3e77930..b4e60fa 100644
--- a/src/support/page.ts
+++ b/src/support/page.ts
@@ -16,6 +16,11 @@ export class MathPage {
         public readonly id: string,
     ) {}
 
+    /** Get all defined statements. */
+    getStatements(): MathStatement[] {
+        return Object.values(this.statements)
+    }
+
     /** Get a statement by ID if it exists. */
     getStatement(id: StatementID): Maybe<MathStatement> {
         return this.statements[id]
diff --git a/src/support/parse.ts b/src/support/parse.ts
index 4245dc2..f5d96da 100644
--- a/src/support/parse.ts
+++ b/src/support/parse.ts
@@ -324,4 +324,18 @@ export class MathStatement {
     uses(): math.SymbolNode[] {
         return (new RValSymbolWalk()).walk(this.parse())
     }
+
+    /** Returns true if the definition is correctly non-recursive. */
+    isNotRecursive(): boolean {
+        const uses = this.uses()
+        const defines = this.defines()
+
+        for ( const define of defines ) {
+            if ( uses.some(x => x.name === define.name) ) {
+                return false
+            }
+        }
+
+        return true
+    }
 }
diff --git a/vite.config.ts b/vite.config.ts
index 3bc00d8..96e978b 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -9,6 +9,9 @@ export default defineConfig({
             '/api': {
                 target: 'http://localhost:8000/',
             },
+            '/auth': {
+                target: 'http://localhost:8000/',
+            },
         },
     },
     plugins: [

From f93d0f246607093de1cd59dae1dc4327378b07bc Mon Sep 17 00:00:00 2001
From: Thomas <dev.csnova@gmail.com>
Date: Sat, 9 Apr 2022 18:07:31 -0500
Subject: [PATCH 10/16] fixed grid and

---
 src/App.vue                      |  2 +-
 src/assets/grid.svg              | 10 +++++-----
 src/components/RichTextModal.vue |  0
 src/components/TextBox.vue       |  2 +-
 src/pages/Editor.vue             | 10 +++++-----
 5 files changed, 12 insertions(+), 12 deletions(-)
 create mode 100644 src/components/RichTextModal.vue

diff --git a/src/App.vue b/src/App.vue
index 0d84cf4..07e4a36 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -30,7 +30,7 @@ import { ref } from "vue";
       </q-tabs>
     </q-header>
 
-    <q-page-container>
+    <q-page-container style="display: flex;padding-top: 20px;">
       <router-view />
     </q-page-container>
   </q-layout>
diff --git a/src/assets/grid.svg b/src/assets/grid.svg
index 70917da..7b35c2d 100644
--- a/src/assets/grid.svg
+++ b/src/assets/grid.svg
@@ -1,11 +1,11 @@
 <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
   <defs>
-    <pattern id="smallGrid" width="8" height="8" patternUnits="userSpaceOnUse">
-      <path d="M 8 0 L 0 0 0 8" fill="none" stroke="gray" stroke-width="0.5"/>
+    <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"/>
     </pattern>
-    <pattern id="grid" width="80" height="80" patternUnits="userSpaceOnUse">
-      <rect width="80" height="80" fill="url(#smallGrid)"/>
-      <path d="M 80 0 L 0 0 0 80" fill="none" stroke="gray" stroke-width="1"/>
+    <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"/>
     </pattern>
   </defs>
       
diff --git a/src/components/RichTextModal.vue b/src/components/RichTextModal.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/TextBox.vue b/src/components/TextBox.vue
index bd61a0f..7d7a2d9 100644
--- a/src/components/TextBox.vue
+++ b/src/components/TextBox.vue
@@ -10,7 +10,7 @@ const props = defineProps({
   <Draggable :grid="[25, 25]">
     <div style="display: flex">
       <q-card flat bordered>
-        <q-card-section>
+        <q-card-section style="padding:0">
           <div class="row items-center no-wrap">
             <q-card-section v-html="props.statement" />
             <div class="col-auto">
diff --git a/src/pages/Editor.vue b/src/pages/Editor.vue
index 66ad1a0..9e97186 100644
--- a/src/pages/Editor.vue
+++ b/src/pages/Editor.vue
@@ -13,7 +13,7 @@ function toggleLeftDrawer() {
   Rich Text Stuff
 */
 
-const richTextStatments = ref([
+const richTextStatements = ref([
   { text: "test" },
   { text: "test2" },
   { text: "test3" },
@@ -23,15 +23,15 @@ const richEditModal = ref(false);
 const richEditExpression = ref("");
 const richEditID = ref(0);
 
-const richEditStatement = (id: int) => {
+const richEditStatement = (id: number) => {
   console.log("editing statement", id, richEditModal);
   richEditModal.value = true;
   richEditID.value = id;
-  richEditExpression.value = richTextStatments.value[richEditID.value].text;
+  richEditExpression.value = richTextStatements.value[richEditID.value].text;
 };
 
 function richUpdateValue() {
-  richTextStatments.value[richEditID.value].text = richEditExpression.value;
+  richTextStatements.value[richEditID.value].text = richEditExpression.value;
 }
 </script>
 
@@ -76,7 +76,7 @@ function richUpdateValue() {
           </q-card-actions>
         </q-card>
       </q-dialog>
-      <span v-for="(item, index) in richTextStatments">
+      <span v-for="(item, index) in richTextStatements">
         <TextBox
           :statement="item.text"
           v-on:edit="() => (item.text ? richEditStatement(index) : {})"

From 83374615aabaa322d27e02f56b679f152afe69ac Mon Sep 17 00:00:00 2001
From: Thomas <dev.csnova@gmail.com>
Date: Sat, 9 Apr 2022 18:41:57 -0500
Subject: [PATCH 11/16] fixed positioning of textbox

---
 src/components/TextBox.vue | 29 +++++++++++++++++++++--------
 src/pages/Editor.vue       | 17 +++++++++--------
 src/types.ts               |  9 +++++++++
 3 files changed, 39 insertions(+), 16 deletions(-)

diff --git a/src/components/TextBox.vue b/src/components/TextBox.vue
index 7d7a2d9..4a7dce5 100644
--- a/src/components/TextBox.vue
+++ b/src/components/TextBox.vue
@@ -1,27 +1,40 @@
 <script setup lang="ts">
 import { ref } from "vue";
+import { RichTextBox } from "../types.ts";
 
 const props = defineProps({
-  statement: { type: String, required: true },
-  })
+  value: {
+    type: RichTextBox,
+  },
+  // statement: { type: String, required: true },
+  // startingX:  { type: Number, default: 0 },
+  // startingY:  { type: Number, default: 0 },
+});
 </script>
 
 <template>
-  <Draggable :grid="[25, 25]">
-    <div style="display: flex">
+  <Draggable
+    :grid="[5, 5]"
+    :default-position="{ x: props.value.x, y: props.value.y }"
+  >
+    <div style="display: flex; bottom: 10px; right: 0">
       <q-card flat bordered>
-        <q-card-section style="padding:0">
+        <q-card-section style="padding: 0">
           <div class="row items-center no-wrap">
-            <q-card-section v-html="props.statement" />
+            <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-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-section @click="() => $emit('remove')"
+                        >Remove</q-item-section
+                      >
                     </q-item>
                   </q-list>
                 </q-menu>
diff --git a/src/pages/Editor.vue b/src/pages/Editor.vue
index 214d829..338141d 100644
--- a/src/pages/Editor.vue
+++ b/src/pages/Editor.vue
@@ -10,6 +10,7 @@ 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";
 
 const math = new MathPage(uuidv4())
 const statements = ref<MathStatement[]>([])
@@ -58,10 +59,10 @@ const saveNewExpression = (stmt: MathStatement) => {
 */
 
 const richTextStatements = ref([
-  { text: "test" },
-  { text: "test2" },
-  { text: "test3" },
-]);
+  new RichTextBox('newText'),
+  new RichTextBox('newText', 0,100)
+
+  ]);
 
 const richEditModal = ref(false);
 const richEditExpression = ref("");
@@ -110,7 +111,7 @@ function richUpdateValue() {
       <!-- drawer content -->
     </q-drawer>
 
-    <q-page-container id="editor" style="display: flex">
+    <q-page-container id="editor" >
 <!--      <WrapperBox />-->
 
       <span v-for="statement in statements">
@@ -165,12 +166,12 @@ function richUpdateValue() {
           </q-card-actions>
         </q-card>
       </q-dialog>
-      <span v-for="(item, index) in richTextStatements">
+      <div v-for="(item, index) in richTextStatements">
         <TextBox
-          :statement="item.text"
+          :value="item"
           v-on:edit="() => (item.text ? richEditStatement(index) : {})"
         ></TextBox>
-      </span>
+      </div>
     </q-page-container>
 
     <q-footer reveal elevated class="bg-grey-8 text-white">
diff --git a/src/types.ts b/src/types.ts
index c0b76d6..275eaf8 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -91,3 +91,12 @@ export interface EvaluationResult {
     variables: Record<VariableName, any>
     statements: Record<StatementID, any>
 }
+
+
+export class RichTextBox {
+    constructor(
+        public text: string = '',
+        public x: Number = 0,
+        public y: Number = 0,
+        ) {}
+}
\ No newline at end of file

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 12/16] 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

From 3071947c281c5647af0b4ffb92f3774829cd3530 Mon Sep 17 00:00:00 2001
From: Thomas <dev.csnova@gmail.com>
Date: Sat, 9 Apr 2022 19:03:19 -0500
Subject: [PATCH 13/16] removed abs positioning

---
 src/components/TextBox.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TextBox.vue b/src/components/TextBox.vue
index 74f8362..7b88586 100644
--- a/src/components/TextBox.vue
+++ b/src/components/TextBox.vue
@@ -14,7 +14,7 @@ const props = defineProps({
     :grid="[stepX, stepY]"
     :default-position="{ x: props.value.x, y: props.value.y }"
   >
-    <div style="display: flex; bottom: 10px; right: 0">
+    <div style="display: flex;">
       <q-card flat bordered>
         <q-card-section style="padding: 0">
           <div class="row items-center no-wrap">

From 5bcb05e0f650c581b9db400a38299498ad141845 Mon Sep 17 00:00:00 2001
From: Thomas <dev.csnova@gmail.com>
Date: Sat, 9 Apr 2022 19:08:49 -0500
Subject: [PATCH 14/16] fixed the drag issue

---
 src/components/TextBox.vue | 2 +-
 src/pages/Editor.vue       | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/TextBox.vue b/src/components/TextBox.vue
index 7b88586..80216ac 100644
--- a/src/components/TextBox.vue
+++ b/src/components/TextBox.vue
@@ -14,7 +14,7 @@ const props = defineProps({
     :grid="[stepX, stepY]"
     :default-position="{ x: props.value.x, y: props.value.y }"
   >
-    <div style="display: flex;">
+    <div>
       <q-card flat bordered>
         <q-card-section style="padding: 0">
           <div class="row items-center no-wrap">
diff --git a/src/pages/Editor.vue b/src/pages/Editor.vue
index 914c44e..8a30b0d 100644
--- a/src/pages/Editor.vue
+++ b/src/pages/Editor.vue
@@ -170,11 +170,12 @@ function richUpdateValue() {
           </q-card-actions>
         </q-card>
       </q-dialog>
-      <div v-for="(item, index) in richTextStatements">
+      <div v-for="(item, index) in richTextStatements" style="display: flex">
         <TextBox
           :value="item"
           v-on:edit="() => (item.text ? richEditStatement(index) : {})"
-        ></TextBox>
+        />
+
       </div>
     </q-page-container>
 

From 3657efc44ffe8b2528df55786aa21cb9715e2ffa Mon Sep 17 00:00:00 2001
From: garrettmills <shout@garrettmills.dev>
Date: Sat, 9 Apr 2022 19:14:03 -0500
Subject: [PATCH 15/16] Add variables listing and start functions listing

---
 src/pages/Editor.vue | 90 +++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 85 insertions(+), 5 deletions(-)

diff --git a/src/pages/Editor.vue b/src/pages/Editor.vue
index 214d829..3fa1403 100644
--- a/src/pages/Editor.vue
+++ b/src/pages/Editor.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import {onMounted, 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 {EvaluationResult, hasOwnProperty, StatementID} from '../types'
 import Statement from '../components/Statement.vue'
 import VarDeclEditor from './VarDeclEditor.vue'
 import ExpressionEditor from './ExpressionEditor.vue'
@@ -17,6 +17,22 @@ const evaluation = ref<EvaluationResult|undefined>()
 const statementsKey = ref<string>(uuidv4())
 const leftDrawerOpen = ref(false);
 
+const variableListingColumns = [
+  {
+    name: 'name',
+    field: 'name',
+    label: 'Variable',
+    sortable: true,
+  },
+  {
+    name: 'value',
+    field: 'value',
+    label: 'Value',
+  },
+]
+
+const variableListingRows = ref<({name: string, value: string})[]>([])
+
 function toggleLeftDrawer() {
   leftDrawerOpen.value = !leftDrawerOpen.value;
 }
@@ -35,12 +51,33 @@ const updateStatements = () => {
   statements.value = math.getStatements()
   try {
     evaluation.value = math.evaluate()
+    const variableValues: ({name: string, value: string})[] = []
+
+    for ( const name in evaluation.value!.variables ) {
+      if ( !hasOwnProperty(evaluation.value!.variables, name) ) {
+        continue
+      }
+
+      let value = String(evaluation.value!.variables[name] ?? '')
+      try {
+        value = MathStatement.temp(value).toHTMLString()
+      } catch (_) {}
+
+      variableValues.push({
+        name,
+        value,
+      })
+    }
+
+    variableListingRows.value = variableValues
   } catch (_) {
     evaluation.value = undefined
   }
   statementsKey.value = uuidv4()
 }
 
+onMounted(updateStatements)
+
 const saveNewVariable = (stmt: MathStatement) => {
   math.addStatement(stmt)
   newVariableModalOpen.value = false
@@ -77,6 +114,7 @@ const richEditStatement = (id: number) => {
 function richUpdateValue() {
   richTextStatements.value[richEditID.value].text = richEditExpression.value;
 }
+
 </script>
 
 <template>
@@ -100,10 +138,52 @@ function richUpdateValue() {
 
     <q-drawer show-if-above v-model="leftDrawerOpen" side="left" bordered>
       <div class="column" style="height: 100%">
-        <div class="col">variables</div>
         <div class="col">
-          <q-separator />
-          function
+          <q-table
+            flat
+            title="Variables"
+            :rows="variableListingRows"
+            :columns="variableListingColumns"
+            row-key="name"
+            hide-no-data
+            hide-bottom
+            :pagination="{rowsPerPage: 10000}"
+            style="height: 100%; border-radius: 0"
+          >
+            <template v-slot:body="props">
+              <q-tr :props="props">
+                <q-td key="name" :props="props">
+                  {{ props.row.name }}
+                </q-td>
+                <q-td key="value" :props="props">
+                  <div v-html="props.row.value"></div>
+                </q-td>
+              </q-tr>
+            </template>
+          </q-table>
+        </div>
+        <div class="col">
+<!--          <q-separator />-->
+          <q-table
+            flat
+            title="Functions"
+            row-key="name"
+            hide-no-data
+            hide-bottom
+            :pagination="{rowsPerPage: 10000}"
+            style="height: 100%; border-top: 1px solid lightgrey; border-radius: 0"
+          >
+            <template v-slot:body="props">
+              <q-tr :props="props">
+                <q-td key="name" :props="props">
+                  {{ props.row.name }}
+                </q-td>
+                <q-td key="value" :props="props">
+                  <div v-html="props.row.value"></div>
+                </q-td>
+              </q-tr>
+            </template>
+          </q-table>
         </div>
       </div>
 

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 16/16] 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