Allow editing var decls and function decls

package.json

@@ -21,6 +21,7 @@
     "@types/katex": "^0.14.0",
     "@types/uuid": "^8.3.4",
     "@vuetify/vite-plugin": "1.0.0-alpha.10",
+    "chart.js": "^3.7.1",
     "dependency-graph": "^0.11.0",
     "install": "^0.13.0",
     "katex": "^0.15.3",
@@ -28,6 +29,7 @@
     "quasar": "^2.6.6",
     "uuid": "^8.3.2",
     "vue": "^3.2.25",
+    "vue-chart-3": "^3.1.8",
     "vue-router": "^4.0.14",
     "vuetify": "3.0.0-beta.0"
   },

pnpm-lock.yaml

@@ -12,6 +12,7 @@ specifiers:
   '@vitejs/plugin-vue': ^2.3.1
   '@volar/vue-language-service': ^0.33.9
   '@vuetify/vite-plugin': 1.0.0-alpha.10
+  chart.js: ^3.7.1
   dependency-graph: ^0.11.0
   eslint: ^8.13.0
   install: ^0.13.0
@@ -23,6 +24,7 @@ specifiers:
   uuid: ^8.3.2
   vite: ^2.9.0
   vue: ^3.2.25
+  vue-chart-3: ^3.1.8
   vue-router: ^4.0.14
   vue-tsc: ^0.33.9
   vuetify: 3.0.0-beta.0
@@ -33,6 +35,7 @@ dependencies:
   '@types/katex': 0.14.0
   '@types/uuid': 8.3.4
   '@vuetify/vite-plugin': 1.0.0-alpha.10_vite@2.9.1+vuetify@3.0.0-beta.0
+  chart.js: 3.7.1
   dependency-graph: 0.11.0
   install: 0.13.0
   katex: 0.15.3
@@ -40,6 +43,7 @@ dependencies:
   quasar: 2.6.6
   uuid: 8.3.2
   vue: 3.2.31
+  vue-chart-3: 3.1.8_chart.js@3.7.1+vue@3.2.31
   vue-router: 4.0.14_vue@3.2.31
   vuetify: 3.0.0-beta.0_vue@3.2.31
 
@@ -1069,6 +1073,10 @@ packages:
       is-regex: 1.1.4
     dev: true
 
+  /chart.js/3.7.1:
+    resolution: {integrity: sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA==}
+    dev: false
+
   /chokidar/3.5.3:
     resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
     engines: {node: '>= 8.10.0'}
@@ -1214,6 +1222,10 @@ packages:
     resolution: {integrity: sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==}
     dev: false
 
+  /csstype/3.0.11:
+    resolution: {integrity: sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==}
+    dev: false
+
   /currently-unhandled/0.4.1:
     resolution: {integrity: sha1-mI3zP+qxke95mmE2nddsF635V+o=}
     engines: {node: '>=0.10.0'}
@@ -2447,6 +2459,10 @@ packages:
     dependencies:
       p-locate: 4.1.0
 
+  /lodash-es/4.17.21:
+    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
+    dev: false
+
   /lodash.iteratee/4.7.0:
     resolution: {integrity: sha1-vkF32yiajMw8CZDx2ya1si/BVUw=}
     dev: true
@@ -3907,6 +3923,20 @@ packages:
     resolution: {integrity: sha512-EcswR2S8bpR7fD0YPeS7r2xXExrScVMxg4MedACaWHEtx9ftCF/qHG1xGkolzTPcEmjTavCQgbVzHUIdTMzFGA==}
     dev: true
 
+  /vue-chart-3/3.1.8_chart.js@3.7.1+vue@3.2.31:
+    resolution: {integrity: sha512-zX5ajjQi/PocEqLETlej3vp92q/tnI/Fvu2RVb++Kap8qOrXu6PXCpodi73BFrWzEGZIAnqoUxC3OIkRWD657g==}
+    peerDependencies:
+      chart.js: '=> ^3.1.0'
+      vue: '>= 3'
+    dependencies:
+      '@vue/runtime-core': 3.2.31
+      '@vue/runtime-dom': 3.2.31
+      chart.js: 3.7.1
+      csstype: 3.0.11
+      lodash-es: 4.17.21
+      vue: 3.2.31
+    dev: false
+
   /vue-demi/0.12.5_vue@3.2.31:
     resolution: {integrity: sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==}
     engines: {node: '>=12'}

src/components/FunctionEditor.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import {MathStatement} from '../support/parse'
+import {onMounted, ref} from 'vue'
+import {v4 as uuidv4} from 'uuid'
+import {StatementID} from '../support/types'
+import Katex from './Katex.vue'
+
+const props = defineProps<{
+  statement?: MathStatement,
+}>()
+
+const emit = defineEmits<{
+  (eventName: 'save', statement: MathStatement): void,
+}>()
+
+const functionPreview = ref(MathStatement.temp(''))
+let functionPreviewKey = ref(uuidv4())
+const functionError = ref<string|undefined>(undefined)
+const functionValue = ref('')
+
+const updateFunctionPreview = () => {
+  const previewStmt = MathStatement.temp(functionValue.value)
+  if ( previewStmt.isValid() ) {
+    functionPreview.value = MathStatement.temp(functionValue.value)
+    functionPreviewKey.value = uuidv4()
+  }
+}
+
+const validateFunction = () => {
+  if ( !functionValue.value ) {
+    return 'Missing function declaration'
+  }
+
+  const stmt = MathStatement.temp(functionValue.value)
+  if ( !stmt.isValid() || !stmt.isFunctionDeclaration() ) {
+    return 'Function definition is invalid'
+  }
+
+  if ( !stmt.isNotRecursive() ) {
+    return 'A function may not reference itself'
+  }
+}
+
+const saveFunction = () => {
+  functionError.value = validateFunction()
+  if ( functionError.value ) {
+    return
+  }
+
+  if ( props.statement ) {
+    props.statement.raw = functionValue.value
+    emit('save', props.statement)
+  } else {
+    emit('save', new MathStatement(
+        uuidv4() as StatementID,
+        functionValue.value
+    ))
+  }
+}
+
+onMounted(() => {
+  if ( props.statement ) {
+    functionValue.value = props.statement.raw
+    updateFunctionPreview()
+  }
+})
+</script>
+
+<template>
+  <q-card>
+    <q-card-section>
+      <div style="display: flex; justify-content: center">
+        <Katex
+          :key="functionPreviewKey"
+          :statement="functionPreview"
+        />
+      </div>
+    </q-card-section>
+    <q-card-section v-if="functionError">
+      <div style="color: darkred; font-weight: bold">{{ functionError }}</div>
+    </q-card-section>
+    <q-card-section>
+      <q-input
+        v-model="functionValue"
+        v-on:update:model-value="() => updateFunctionPreview()"
+        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="() => saveFunction()"></q-btn>
+    </q-card-actions>
+  </q-card>
+</template>

src/pages/Editor.vue

@@ -10,6 +10,7 @@ import ExpressionEditor from './ExpressionEditor.vue'
 import TextBox from '../components/TextBox.vue'
 import {RichTextBox} from '../support/types'
 import { stepX, stepY } from '../support/const'
+import FunctionEditor from '../components/FunctionEditor.vue'
 
 const math = new MathPage(uuidv4());
 const statements = ref<MathStatement[]>([]);
@@ -33,20 +34,35 @@ const variableListingColumns = [
 
 const variableListingRows = ref<({name: string, value: string})[]>([])
 
+const functionListingColumns = [
+  {
+    name: 'value',
+    field: 'value',
+    label: 'Function',
+  },
+]
+
+const functionListingRows = ref<({name: string, value: string})[]>([])
+
 function toggleLeftDrawer() {
-  leftDrawerOpen.value = !leftDrawerOpen.value;
+  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 newFunctionModalOpen = ref(false)
+const openNewFunctionModal = () => {
+  newFunctionModalOpen.value = true
+}
+
 const editingStatement = ref<MathStatement|undefined>()
 const editExpressionModalOpen = ref(false)
 const openEditExpressionModal = () => {
@@ -58,6 +74,11 @@ const openEditVarDeclModal = () => {
   editVarDeclModalOpen.value = true
 }
 
+const editFunctionModalOpen = ref(false)
+const openEditFunctionModal = () => {
+  editFunctionModalOpen.value = true
+}
+
 const updateStatements = () => {
   statements.value = math.getStatements();
   try {
@@ -71,7 +92,8 @@ const updateStatements = () => {
 
       let value = String(evaluation.value!.variables[name] ?? '')
       try {
-        value = MathStatement.temp(value).toHTMLString()
+        const stmt = MathStatement.temp(value)
+        value = stmt.toHTMLString()
       } catch (_) {}
 
       variableValues.push({
@@ -81,32 +103,51 @@ const updateStatements = () => {
     }
 
     variableListingRows.value = variableValues
+
+    const functionValues: ({name: string, value: string})[] = []
+    for ( const stmt of math.functions() ) {
+      const node = stmt.parse() as math.FunctionAssignmentNode
+      functionValues.push({
+        name: node.name,
+        value: stmt.toHTMLString(),
+      })
+    }
+
+    functionListingRows.value = functionValues
   } catch (_) {
-    evaluation.value = undefined;
+    console.error(_)
+    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 saveNewFunction = (stmt: MathStatement) => {
+  math.addStatement(stmt)
+  newFunctionModalOpen.value = false
+  updateStatements()
+}
+
 const editStatement = (stmt: MathStatement) => {
   editingStatement.value = stmt
-  if ( stmt.isDeclaration() ) {
+  console.log('editStatement', stmt)
+  if ( stmt.isFunctionDeclaration() ) {
+    openEditFunctionModal()
+  } else if ( stmt.isDeclaration() ) {
     openEditVarDeclModal()
-  } else if ( stmt.isFunctionDeclaration() ) {
-
   } else {
     openEditExpressionModal()
   }
@@ -119,6 +160,8 @@ const removeStatement = (stmt: MathStatement) => {
 
 const finishEditStatement = () => {
   editExpressionModalOpen.value = false
+  editVarDeclModalOpen.value = false
+  editFunctionModalOpen.value = false
   updateStatements()
 }
 
@@ -134,7 +177,7 @@ const makeNewRichTextBox = () => {
   console.log("editing statement",richEditID.value, richEditModal);
 };
 
-const richTextStatements = ref([new RichTextBox("Hello World")]);
+const richTextStatements = ref([]);
 
 const richEditModal = ref(false);
 const richEditExpression = ref("");
@@ -205,17 +248,17 @@ const removeRichTextBox = (id: number) => {
           <q-table
             flat
             title="Functions"
+            :rows="functionListingRows"
+            :columns="functionListingColumns"
             row-key="name"
             hide-no-data
             hide-bottom
+            hide-header
             :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>
@@ -269,6 +312,19 @@ const removeRichTextBox = (id: number) => {
         />
       </q-dialog>
 
+      <q-dialog v-model="newFunctionModalOpen">
+        <FunctionEditor
+          v-on:save="(s) => saveNewFunction(s)"
+        />
+      </q-dialog>
+
+      <q-dialog v-model="editFunctionModalOpen">
+        <FunctionEditor
+          :statement="editingStatement"
+          v-on:save="() => finishEditStatement()"
+        />
+      </q-dialog>
+
       <q-page-sticky position="bottom-right" :offset="[32, 32]">
         <q-fab color="primary" icon="add" direction="left">
           <q-fab-action
@@ -279,15 +335,21 @@ const removeRichTextBox = (id: number) => {
             @click="() => openNewVariableDeclModal()"
           />
           <q-fab-action
-            color="secondary"
+              color="secondary"
-            icon="code"
+              icon="code"
-            title="Add an expression"
+              title="Add an expression"
-            @click="() => openNewExpressionModal()"
+              @click="() => openNewExpressionModal()"
+          />
+          <q-fab-action
+              color="secondary"
+              icon="functions"
+              title="Add a new function"
+              @click="() => openNewFunctionModal()"
           />
           <q-fab-action
             color="secondary"
             icon="text"
-            title="Add a Text Box"
+            title="Add a text box"
             @click="() => makeNewRichTextBox()"
           />
         </q-fab>

src/pages/ExpressionEditor.vue

@@ -32,8 +32,8 @@ const validateExpression = () => {
     return 'The expression is invalid'
   }
 
-  if ( stmt.defines().length > 0 ) {
+  if ( stmt.defines().length > 0 || stmt.isFunctionDeclaration() ) {
-    return 'Expressions cannot declare variables'
+    return 'Expressions cannot declare variables or functions'
   }
 }
 

src/pages/VarDeclEditor.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import * as math from 'mathjs'
 import {onMounted, ref} from 'vue'
 import {MathStatement} from '../support/parse'
 import {v4 as uuidv4} from 'uuid'
@@ -67,7 +68,9 @@ onMounted(() => {
   if ( props.statement ) {
     const [ define ] = props.statement.defines()
     newVariableName.value = define.name
-    newVariableValue.value = props.statement.raw
+
+    const [_, ...rest] = props.statement.raw.split('=')
+    newVariableValue.value = rest.join('=')
     updateNewVariablePreview()
   }
 })

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, hasOwnProperty, Maybe, StatementID, VariableName} from './types'
 
 /**
  * Wrapper for a page containing multiple interrelated mathematical statements.
@@ -82,6 +82,12 @@ export class MathPage {
     dependencies(): DepGraph<MathStatement> {
         const graph = new DepGraph<MathStatement>()
         const defined: Record<VariableName, MathStatement> = this.definers()
+        const definedFunctions: Record<VariableName, MathStatement> = {}
+
+        for ( const sym of this.functions() ) {
+            const node = sym.parse() as math.FunctionAssignmentNode
+            definedFunctions[node.name as VariableName] = sym
+        }
 
         for ( const statement of Object.values(this.statements) ) {
             graph.addNode(statement.id, statement)
@@ -89,6 +95,12 @@ export class MathPage {
 
         for ( const statement of Object.values(this.statements) ) {
             for ( const symbol of statement.uses() ) {
+                const functionProvider = definedFunctions[symbol.name as VariableName]
+                if ( functionProvider ) {
+                    graph.addDependency(statement.id, functionProvider.id)
+                    continue
+                }
+
                 const provider = defined[symbol.name as VariableName]
                 if ( !provider ) {
                     throw new Error('No provider for undefined symbol: ' + symbol.name)
@@ -101,11 +113,32 @@ export class MathPage {
         return graph
     }
 
+    /** Returns true if the given variable name is a function definition. */
+    isFunctionKey(name: VariableName): boolean {
+        return this.functions()
+            .some(stmt => {
+                const node = stmt.parse() as math.FunctionAssignmentNode
+                return node.name === name
+            })
+    }
+
+    /** Get all the statements defining functions. */
+    functions(): MathStatement[] {
+        return Object.values(this.statements)
+            .filter(x => x.isFunctionDeclaration())
+    }
+
     /** Evaluate the current state of the page and get the result. */
     evaluate(): EvaluationResult {
         const evaluations: Record<StatementID, any> = {}
         const scope: Record<VariableName, any> = {}
         const graph = this.dependencies()
+        const definers = this.definers()
+
+        for ( const stmt of this.functions() ) {
+            const node = stmt.parse() as math.FunctionAssignmentNode
+            scope[node.name as VariableName] = stmt.parse().evaluate()
+        }
 
         for ( const node of graph.overallOrder() ) {
             const stmt = this.statements[node as StatementID]
@@ -114,8 +147,19 @@ export class MathPage {
                 .evaluate(scope)
         }
 
+        const nonFunctionalScope: Record<VariableName, any> = {}
+        for ( const key in scope ) {
+            if ( !hasOwnProperty(scope, key) ) {
+                continue
+            }
+
+            if ( definers[key as VariableName] ) {
+                nonFunctionalScope[key as VariableName] = scope[key]
+            }
+        }
+
         return {
-            variables: scope,
+            variables: nonFunctionalScope,
             statements: evaluations,
         }
     }

src/support/parse.ts

@@ -117,6 +117,7 @@ export class SymbolWalk extends MathNodeWalk<math.SymbolNode[]> {
 
     walkFunctionAssignmentNode(node: math.FunctionAssignmentNode): math.SymbolNode[] {
         return this.walk(node.expr)
+            .filter(sym => !node.params.includes(sym.name))
     }
 
     walkFunctionNode(node: math.FunctionNode): math.SymbolNode[] {
@@ -350,6 +351,6 @@ export class MathStatement {
     }
 
     isFunctionDeclaration(): boolean {
-        return false
+        return math.isFunctionAssignmentNode(this.parse())
     }
 }