Resolve merge conflicts

src/App.vue

@@ -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>
 

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>

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()
+let renderedHtml = getRenderedHTML()
-computed(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>
 

src/components/Statement.vue

@@ -6,11 +6,11 @@ import Katex from './Katex.vue'
 
 const props = defineProps<{
   statement: MathStatement,
-  evaluation: EvaluationResult,
+  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))
   }
@@ -36,10 +36,18 @@ computed(() => value = getValueStatement())
   .sidebar {
     padding-left: 10px;
   }
+
+  .edit-button {
+    border: none;
+  }
+
+  .edit-button:hover {
+    cursor: pointer;
+  }
 </style>
 
 <template>
-  <div class="math-statement">
+  <div class="math-statement" style="background: white">
     <div class="content">
       <Katex :statement="statement" size="big"/>
       <div class="result" v-if="value">
@@ -48,7 +56,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>

src/components/TextBox.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const props = defineProps({
+  statement: { type: String, required: true },
+  })
+</script>
+
+<template>
+  <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="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="() => $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/WrapperBox.vue

@@ -0,0 +1,27 @@
+<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>
+
+    </div>
+  </Draggable>
+</template>
+<style lang="sass" scoped>
+.my-card
+  width: 50%
+  max-width: 250px
+</style>

src/pages/Editor.vue

@@ -1,19 +1,192 @@
 <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'
 
+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()
+}
+
+/*
+  Rich Text Stuff
+*/
+
+const richTextStatments = ref([
+  { text: "test" },
+  { text: "test2" },
+  { text: "test3" },
+]);
+
+const richEditModal = ref(false);
+const richEditExpression = ref("");
+const richEditID = ref(0);
+
+const richEditStatement = (id: number) => {
+  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>
 
 <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" />
 
-    <Draggable>
+        <q-toolbar-title>
-    <div class="box">
+          <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-btn
+    <q-drawer show-if-above v-model="leftDrawerOpen" side="left" bordered>
-        @click="showNotification"
+      <div class="column" style="height: 100%">
-        color="primary"
+        <div class="col">variables</div>
-        label="Show another notification"
+        <div class="col">
+          <q-separator />
+          function
+        </div>
+      </div>
+
+      <!-- drawer content -->
+    </q-drawer>
+
+    <q-page-container id="editor" style="display: flex">
+<!--      <WrapperBox />-->
+
+      <span v-for="statement in statements">
+        <Draggable
+            :grid="[25, 25]"
+        >
+          <Statement
+            :key="statementsKey"
+            :statement="statement"
+            :evaluation="evaluation"
+          />
+        </Draggable>
+      </span>
+
+      <q-dialog v-model="newVariableModalOpen">
+        <VarDeclEditor
+          v-on:save="s => saveNewVariable(s)"
         />
-    </div>
+      </q-dialog>
-  </Draggable>
+
+      <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-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" @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="() => (item.text ? richEditStatement(index) : {})"
+        ></TextBox>
+      </span>
+    </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>
+<style>
+#editor {
+  background-image: url(../assets/grid.svg);
+  background-repeat: repeat;
+  height: 100%;
+}
+</style>

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>

src/pages/Scratch.vue

@@ -3,6 +3,8 @@
   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')
@@ -12,10 +14,59 @@
   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="() => stmt ? editStatement(stmt) : {}"
+    :statement="stmt"
+    :evaluation="evaluation"
+  />
 </template>

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>

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({

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]

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())
@@ -314,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
+    }
 }

vite.config.ts

@@ -9,14 +9,17 @@ export default defineConfig({
             '/api': {
                 target: 'http://localhost:8000/',
             },
+            '/auth': {
+                target: 'http://localhost:8000/',
+            },
         },
     },
     plugins: [
-      vue({
+        vue({
-          template: { transformAssetUrls },
+            template: { transformAssetUrls },
-      }),
+        }),
 
-      quasar({
+        quasar({
-          sassVariables: 'src/quasar-variables.sass',
+            sassVariables: 'src/quasar-variables.sass',
-      }),]
+        })],
 })