idk

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>

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>
 

src/pages/RichTextEditor.vue

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

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