Merge incoming changes

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>
       

src/components/ImageBox.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { RichTextBox } from "../support/types";
+import { stepX, stepY } from "../support/const";
+const props = defineProps<{value: 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>

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'

src/components/TextBox.vue

@@ -1,12 +1,9 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import { RichTextBox } from "../types.ts";
+import { RichTextBox } from "../support/types";
-import { stepX, stepY } from "../support/const.ts";
+import { stepX, stepY } from "../support/const";
-const props = defineProps({
+const props = defineProps<{value: RichTextBox}>();
-  value: {
+
-    type: RichTextBox,
-  },
-});
 </script>
 
 <template>

src/pages/Editor.vue

@@ -3,18 +3,18 @@ import {onMounted, ref} from 'vue'
 import { v4 as uuidv4 } from 'uuid'
 import {MathPage} from '../support/page'
 import {MathStatement} from '../support/parse'
-import {EvaluationResult, hasOwnProperty} from '../types'
+import {EvaluationResult, hasOwnProperty} from '../support/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'
+import {RichTextBox} from '../support/types'
 import { stepX, stepY } from '../support/const'
 
-const math = new MathPage(uuidv4())
+const math = new MathPage(uuidv4());
-const statements = ref<MathStatement[]>([])
+const statements = ref<MathStatement[]>([]);
-const evaluation = ref<EvaluationResult|undefined>()
+const evaluation = ref<EvaluationResult | undefined>();
-const statementsKey = ref<string>(uuidv4())
+const statementsKey = ref<string>(uuidv4());
 const leftDrawerOpen = ref(false);
 
 const variableListingColumns = [
@@ -37,15 +37,15 @@ 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 editingStatement = ref<MathStatement|undefined>()
 const editExpressionModalOpen = ref(false)
@@ -59,7 +59,7 @@ const openEditVarDeclModal = () => {
 }
 
 const updateStatements = () => {
-  statements.value = math.getStatements()
+  statements.value = math.getStatements();
   try {
     evaluation.value = math.evaluate()
     const variableValues: ({name: string, value: string})[] = []
@@ -82,24 +82,24 @@ const updateStatements = () => {
 
     variableListingRows.value = variableValues
   } catch (_) {
-    evaluation.value = undefined
+    evaluation.value = undefined;
   }
-  statementsKey.value = uuidv4()
+  statementsKey.value = uuidv4();
-}
+};
 
 onMounted(updateStatements)
 
 const saveNewVariable = (stmt: MathStatement) => {
-  math.addStatement(stmt)
+  math.addStatement(stmt);
-  newVariableModalOpen.value = false
+  newVariableModalOpen.value = false;
-  updateStatements()
+  updateStatements();
-}
+};
 
 const saveNewExpression = (stmt: MathStatement) => {
-  math.addStatement(stmt)
+  math.addStatement(stmt);
-  newExpressionModalOpen.value = false
+  newExpressionModalOpen.value = false;
-  updateStatements()
+  updateStatements();
-}
+};
 
 const editStatement = (stmt: MathStatement) => {
   editingStatement.value = stmt
@@ -126,11 +126,15 @@ const finishEditStatement = () => {
   Rich Text Stuff
 */
 
-const richTextStatements = ref([
+const makeNewRichTextBox = () => {
-  new RichTextBox('newText'),
+  richTextStatements.value.push(new RichTextBox(""));
-  new RichTextBox('newText', 0,100)
+  richEditID.value = richTextStatements.value.length - 1;
+  richEditExpression.value = richTextStatements.value[richEditID.value].text;
+  richEditModal.value = true;
+  console.log("editing statement",richEditID.value, richEditModal);
+};
 
-  ]);
+const richTextStatements = ref([new RichTextBox("Hello World")]);
 
 const richEditModal = ref(false);
 const richEditExpression = ref("");
@@ -146,7 +150,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>
@@ -222,36 +228,31 @@ function richUpdateValue() {
       <!-- drawer content -->
     </q-drawer>
 
-    <q-page-container id="editor" >
+    <q-page-container id="editor">
-<!--      <WrapperBox />-->
+      <!--      <WrapperBox />-->
 
       <span v-for="statement in statements" style="display: flex">
         <Draggable
-            :grid="[stepX, stepY]"
+          :grid="[stepX, stepY]"
         >
-        <div>
+          <div>
-          <Statement
+            <Statement
-            :key="statementsKey"
+              :key="statementsKey"
-            :statement="statement"
+              :statement="statement"
-            :evaluation="evaluation"
+              :evaluation="evaluation"
-            v-on:edit="() => editStatement(statement)"
+              v-on:edit="() => editStatement(statement)"
-            v-on:remove="() => removeStatement(statement)"
+              v-on:remove="() => removeStatement(statement)"
-          />
+            />
-        </div>
+          </div>
-
         </Draggable>
       </span>
 
       <q-dialog v-model="newVariableModalOpen">
-        <VarDeclEditor
+        <VarDeclEditor v-on:save="(s) => saveNewVariable(s)" />
-          v-on:save="s => saveNewVariable(s)"
-        />
       </q-dialog>
 
       <q-dialog v-model="newExpressionModalOpen">
-        <ExpressionEditor
+        <ExpressionEditor v-on:save="(s) => saveNewExpression(s)" />
-          v-on:save="s => saveNewExpression(s)"
-        />
       </q-dialog>
 
       <q-dialog v-model="editExpressionModalOpen">
@@ -271,19 +272,24 @@ function richUpdateValue() {
       <q-page-sticky position="bottom-right" :offset="[32, 32]">
         <q-fab color="primary" icon="add" direction="left">
           <q-fab-action
-              color="secondary"
+            color="secondary"
-              label="x"
+            label="x"
-              label-style="font-family: serif; font-size: 1.4em; padding: 0"
+            label-style="font-family: serif; font-size: 1.4rem; padding: 0"
-              title="Add a variable declaration"
+            title="Add a variable declaration"
-              @click="() => openNewVariableDeclModal()"
+            @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>
 
@@ -292,16 +298,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>
 

src/pages/ExpressionEditor.vue

@@ -3,7 +3,7 @@ import {defineEmits, onMounted, 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 props = defineProps<{
   statement?: MathStatement,

src/pages/RichTextEditor.vue

@@ -0,0 +1,2 @@
+
+

src/pages/VarDeclEditor.vue

@@ -3,7 +3,7 @@ import {onMounted, 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 props = defineProps<{
   statement?: MathStatement,

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.

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. */

src/support/types.ts

@@ -96,9 +96,18 @@ export interface EvaluationResult {
 export class RichTextBox {
     constructor(
         public text: string = '',
-        public x: Number = 0,
+        public x: number = 0,
-        public y: Number = 0,
+        public y: number = 0,
-        ) {
+    ) {}
-   
+}
-    }
+
-}
+
+export class ImageBox {
+    constructor(
+        public text: string = '',
+        public x: number = 0,
+        public y: number = 0,
+    ) {}
+}
+
+