Fix delete function and type

Logo/logo.scad

@@ -0,0 +1,73 @@
+
+length = 10;
+n = 5;
+
+// Draw all geometry
+//translate([0,0]) polygon(ngon(n, length));
+
+translate([0,0]) hollow_ngon(n, length);
+
+
+
+// Simple list comprehension for creating N-gon vertices
+function ngon(num, r) = 
+  [for (i=[0:num-1], a=i*360/num) [ r*cos(a), r*sin(a) ]];
+
+
+
+module hollow_ngon(num, r, width = 1) {
+   difference() {
+      translate([0,0]) polygon(ngon(num, r));
+      translate([0,0]) polygon(ngon(num, r-width));
+   }
+}
+
+l = 10;
+
+
+CubePoints = [
+  [  0,  0,  0 ],  //0
+  [ 10,  0,  0 ],  //1
+  [ 10,  7,  0 ],  //2
+  [  0,  7,  0 ],  //3
+  [  0,  0,  5 ],  //4
+  [ 10,  0,  5 ],  //5
+  [ 10,  7,  5 ],  //6
+  [  0,  7,  5 ]]; //7
+  
+CubeFaces = [
+  [0,1,2,3],  // bottom
+  [4,5,1,0],  // front
+  [7,6,5,4],  // top
+  [5,6,2,1],  // right
+  [6,7,3,2],  // back
+  [7,4,0,3]]; // left
+  
+polyhedron( CubePoints, CubeFaces );
+
+//The coordinates of the 12 additional vertices are (0, ±(1 + h), ±(1 − h2)), (±(1 + h), ±(1 − h2), 0) and (±(1 − h2), 0, ±(1 + h)).
+// (0, ±(1 + h), ±(1 − h2)), 
+  // (0, (1 + h), (1 − h2) ),
+// (±(1 + h), ±(1 − h2), 0) 
+// (±(1 − h2), 0, ±(1 + h))
+
+steps = 50;
+sides = 5;
+
+
+vert = [
+  
+]
+
+
+points = [
+	// first expression generating the points in the positive Y quadrant
+  //(0, ±(1 + h), ±(1 − h2)),	
+  for (a = [0 : sides]) [ a, 10 * sin(a * 360 / steps) + 10 ],
+	// second expression generating the points in the negative Y quadrant
+	for (a = [steps : -1 : 0]) [ a, 10 * cos(a * 360 / steps) - 20 ],
+	// additional list of fixed points
+	[ 10, -3 ], [ 3, 0 ], [ 10, 3 ]
+];
+
+polygon(points);

package.json

@@ -20,14 +20,18 @@
     "@quasar/extras": "^1.13.5",
     "@types/katex": "^0.14.0",
     "@types/uuid": "^8.3.4",
+    "@types/validator": "^13.7.2",
     "@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",
     "mathjs": "^10.4.3",
     "quasar": "^2.6.6",
     "uuid": "^8.3.2",
+    "validator": "^13.7.0",
     "vue": "^3.2.25",
+    "vue-chart-3": "^3.1.8",
     "vue-router": "^4.0.14",
     "vuetify": "3.0.0-beta.0"
   },

pnpm-lock.yaml

@@ -7,11 +7,13 @@ specifiers:
   '@quasar/vite-plugin': ^1.0.9
   '@types/katex': ^0.14.0
   '@types/uuid': ^8.3.4
+  '@types/validator': ^13.7.2
   '@typescript-eslint/eslint-plugin': ^5.18.0
   '@typescript-eslint/parser': ^5.18.0
   '@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
@@ -21,8 +23,10 @@ specifiers:
   sass: 1.32.0
   typescript: ^4.5.4
   uuid: ^8.3.2
+  validator: ^13.7.0
   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
@@ -32,14 +36,18 @@ dependencies:
   '@quasar/extras': 1.13.5
   '@types/katex': 0.14.0
   '@types/uuid': 8.3.4
+  '@types/validator': 13.7.2
   '@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
   mathjs: 10.4.3
   quasar: 2.6.6
   uuid: 8.3.2
+  validator: 13.7.0
   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
 
@@ -389,6 +397,10 @@ packages:
     resolution: {integrity: sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==}
     dev: false
 
+  /@types/validator/13.7.2:
+    resolution: {integrity: sha512-KFcchQ3h0OPQgFirBRPZr5F/sVjxZsOrQHedj3zi8AH3Zv/hOLx2OLR4hxR5HcfoU+33n69ZuOfzthKVdMoTiw==}
+    dev: false
+
   /@types/vfile-message/2.0.0:
     resolution: {integrity: sha512-GpTIuDpb9u4zIO165fUy9+fXcULdD8HFRNli04GehoMVbeNq7D6OBnqSmg3lxZnC+UvgUhEWKxdKiwYUkGltIw==}
     deprecated: This is a stub types definition. vfile-message provides its own type definitions, so you do not need this installed.
@@ -1069,6 +1081,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 +1230,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 +2467,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
@@ -3745,6 +3769,11 @@ packages:
       spdx-expression-parse: 3.0.1
     dev: true
 
+  /validator/13.7.0:
+    resolution: {integrity: sha512-nYXQLCBkpJ8X6ltALua9dRrZDHVYxjJ1wgskNt1lH9fzGjs3tgojGSCBjmEPwkWS1y29+DrizMTW19Pr9uB2nw==}
+    engines: {node: '>= 0.10'}
+    dev: false
+
   /vfile-message/1.1.1:
     resolution: {integrity: sha512-1WmsopSGhWt5laNir+633LszXvZ+Z/lxveBf6yhGsqnQIhlhzooZae7zV6YVM1Sdkw68dtAW3ow0pOdPANugvA==}
     dependencies:
@@ -3907,6 +3936,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/App.vue

@@ -1,47 +1,94 @@
 <script setup lang="ts">
-import Home from "./pages/Login.vue";
+import Home from "./pages/Home.vue";
 // This starter template is using Vue 3 <script setup> SFCs
 // Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
-import HelloWorld from "./components/HelloWorld.vue";
 import { MathStatement } from "./support/parse";
 import { MathPage } from "./support/page";
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
+import { checkLoggedIn, loggedOut, loggedIn } from "./support/auth";
+import router from "./router";
+import { Dark } from "quasar";
 
 (window as any).Stmt = MathStatement;
 (window as any).Pg = MathPage;
+
+const status = ref(checkLoggedIn());
+(async () => {
+  const response = await fetch("/api/login/status/", {
+    method: "GET",
+    headers: {
+      Accept: "application/json",
+    },
+  });
+  const res = ((await response.json()) as unknown) as any;
+  if (res.data.hasUser) {
+    loggedIn();
+  }
+  status.value = checkLoggedIn();
+})();
+
+onMounted(() => {
+  status.value = checkLoggedIn();
+  console.log(status.value);
+});
+
+router.afterEach(() => {
+  status.value = checkLoggedIn();
+  console.log(status.value);
+});
+
+const logout = async () => {
+  const response = await fetch("/api/logout/", {
+    method: "POST",
+    headers: {
+      Accept: "application/json",
+    },
+  });
+  loggedOut();
+  status.value = checkLoggedIn();
+  router.push({ path: "/" });
+};
+Dark.set(true)
+
 </script>
 
 <template>
   <q-layout view="hHr LpR fFf">
-    <q-header elevated class="bg-primary text-white" height-hint="98">
+    <q-header elevated class="bg-primary text-white">
       <q-toolbar>
         <q-toolbar-title>
-          <q-avatar>
+          <q-avatar size="50px">
-            <img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg" />
+            <img src="./assets/l2.svg" />
           </q-avatar>
-          Title
+          <span style="font-family: 'Cinzel Decorative', cursive;">Crystal Math Worktable</span>
         </q-toolbar-title>
+        <q-btn v-if="status" @click="logout()" label="Logout"></q-btn>
       </q-toolbar>
 
-      <q-tabs align="left">
+      <!-- <q-tabs>
           <q-route-tab to="/Scratch" label="Scratch" />
           <q-route-tab to="/Editor" label="Editor" />
-      </q-tabs>
+          <q-tab v-if="status" @click="logout()" label="Logout" />
+      </q-tabs>-->
     </q-header>
 
-    <q-page-container>
+    <q-page-container style="display: flex;padding-top: 0px;">
       <router-view />
     </q-page-container>
   </q-layout>
 </template>
 
 <style>
+@import url("https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&display=swap");
+
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
-  color: #2c3e50;
   margin-top: 60px;
 }
+.titleBar {
+  font-family: "Cinzel Decorative";
+}
 </style>

src/assets/grid.svg

@@ -0,0 +1,14 @@
+<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"/> -->
+    <circle cx="0.5" cy=".5" r=".25" stroke="#bcbcbc" 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="#f5f5f5" stroke-width="2"/>
+    </pattern>
+  </defs>
+      
+  <rect width="100%" height="100%" fill="url(#grid)" />
+</svg>

src/assets/l2.svg

@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="210mm"
+   height="297mm"
+   viewBox="0 0 210 297"
+   version="1.1"
+   id="svg13372"
+   inkscape:version="1.2-beta (1b65182ce9, 2022-04-05)"
+   sodipodi:docname="l2.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview13374"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="true"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="0.733172"
+     inkscape:cx="497.15483"
+     inkscape:cy="634.23044"
+     inkscape:window-width="1920"
+     inkscape:window-height="1001"
+     inkscape:window-x="-7"
+     inkscape:window-y="-7"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g5278">
+    <inkscape:grid
+       type="xygrid"
+       id="grid59924" />
+  </sodipodi:namedview>
+  <defs
+     id="defs13369" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       inkscape:groupmode="layer"
+       id="layer2"
+       inkscape:label="Text"
+       transform="matrix(0.26458333,0,0,0.26458333,10.166581,13.777983)"
+       style="fill:#550000">
+      <g
+         id="g5278">
+        <g
+           aria-label="C"
+           transform="scale(0.96764101,1.0334411)"
+           id="text6305"
+           style="font-weight:bold;font-size:969.291px;font-family:'Cinzel Decorative';-inkscape-font-specification:'Cinzel Decorative Bold';fill:#ffffff;stroke:#ffffff;stroke-width:0;stroke-miterlimit:4.8">
+          <path
+             d="m 734.8651,491.73955 q 0,166.71805 -90.14406,260.73928 -89.17477,93.05194 -252.98496,93.05194 -110.49917,0 -199.67395,-46.52597 Q 103.85665,752.47883 54.422811,672.02768 5.9582599,591.57652 5.9582599,492.70884 q 0,-99.83698 48.4645511,-180.28813 48.464549,-80.45116 133.762159,-126.00783 85.29761,-46.52597 189.98104,-46.52597 65.91179,0 133.76216,18.41653 68.81966,17.44724 114.37634,47.49526 l 19.38582,136.67003 h -8.72362 Q 616.6116,261.04829 542.94548,215.49161 469.27937,168.96564 379.1353,168.96564 q -128.9157,0 -215.1826,92.08265 -85.297614,91.11335 -85.297614,229.72197 0,138.60861 88.205484,232.62984 89.17477,93.05194 232.62984,93.05194 143.45507,0 233.59914,-93.05194 91.11335,-93.05194 91.11335,-254.92354 h 9.69291 q 0.96929,11.63149 0.96929,23.26299 z"
+             style="font-weight:normal;-inkscape-font-specification:'Cinzel Decorative'"
+             id="path5280" />
+        </g>
+        <g
+           aria-label="M"
+           transform="scale(0.97653789,1.0240258)"
+           id="text6413"
+           style="font-size:463.256px;font-family:'Cinzel Decorative';-inkscape-font-specification:'Cinzel Decorative';fill:#ffffff;stroke:#ffffff;stroke-width:0;stroke-miterlimit:4.8">
+          <path
+             d="m 75.88058,279.97194 q 26.40559,-11.11814 45.86235,-11.11814 19.45675,0 34.28094,3.70605 14.82419,3.70605 30.11164,12.50791 15.75071,8.33861 29.18513,20.84652 25.94234,24.55257 44.00932,55.59072 l 92.6512,173.72101 134.34425,-231.16475 h 4.1693 l 48.17863,272.39453 q 11.11814,63.00282 38.45024,100.0633 27.33211,37.52374 75.04748,37.52374 3.24279,0 6.02233,0 v 4.63256 q -25.47908,6.94884 -50.03165,6.94884 -50.03165,0 -91.26144,-39.37676 -39.84001,-37.52374 -54.20095,-109.79168 l -22.69954,-134.8075 -87.09213,151.02146 q -17.60373,29.18513 -18.06699,51.42142 h -4.1693 L 215.32064,425.43433 192.62109,610.73674 q -1.38976,10.65489 9.26513,17.14047 4.1693,2.77954 8.80186,2.77954 h 7.4121 v 4.1693 h -96.82051 v -4.63256 h 7.4121 q 12.04465,0 21.30977,-6.94884 9.72838,-7.4121 12.04466,-19.92001 l 31.50141,-220.97312 q -20.84652,-37.06048 -47.71537,-65.78235 -30.11164,-32.42792 -63.00282,-32.42792 -3.242792,0 -6.022328,0.46325 z"
+             style="font-weight:bold;-inkscape-font-specification:'Cinzel Decorative Bold'"
+             id="path5283" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

src/components/ExpressionEditor.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import {defineEmits, onMounted, ref} from 'vue'
+import {MathStatement} from '../support/parse'
+import Katex from './Katex.vue'
+import { v4 as uuidv4 } from 'uuid'
+import {StatementID} from '../support/types'
+
+const props = defineProps<{
+  statement?: MathStatement,
+}>()
+
+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 || stmt.isFunctionDeclaration() ) {
+    return 'Expressions cannot declare variables or functions'
+  }
+}
+
+const saveExpression = () => {
+  expressionError.value = validateExpression()
+  if ( expressionError.value ) {
+    return
+  }
+
+  if ( props.statement ) {
+    props.statement.raw = expressionValue.value
+    emit('save', props.statement)
+  } else {
+    emit('save', new MathStatement(
+        uuidv4() as StatementID,
+        expressionValue.value
+    ))
+  }
+}
+
+onMounted(() => {
+  if ( props.statement ) {
+    expressionValue.value = props.statement.raw
+    updateExpressionPreview()
+  }
+})
+</script>
+
+<template>
+  <q-card>
+    <q-card-section v-if="expressionValue">
+      <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/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  v-if="functionValue" 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/components/ImageBox.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { ImageContainer } from "../support/types";
+import { stepX, stepY } from "../support/const";
+const props = defineProps<{ value: ImageContainer }>();
+
+const emit = defineEmits<{
+  (eventName: 'move', x: number, y: number): void,
+  (eventName: 'edit',): void,
+  (eventName: 'remove',): void,
+
+}>()
+
+
+function onControlledDrag(e: { event: MouseEvent, data: { x: number, y: number } }) {
+
+  // const x = e.x;
+  // const y = e.y;
+  const { x, y } = e.data;
+  props.value.x = x;
+  props.value.y = y;
+  console.log(e)
+}
+function onControlledDragStop(e: { event: MouseEvent, data: { x: number, y: number } }) {
+  // console.log(typeof(e))
+  const { x, y } = e.data;
+  // const x = e.x;
+  // const y = e.y;
+  console.log(self)
+  emit('move', x, y);
+  onControlledDrag(e);
+}
+
+</script>
+
+<template>
+  <Draggable
+    :grid="[stepX, stepY]"
+    :default-position="{ x: props.value.x, y: props.value.y }"
+    :position="{ x: props.value.x, y: props.value.y }"
+    @stop="onControlledDragStop"
+  >
+    <div>
+      <q-card flat bordered>
+        <q-card-section style="padding: 0">
+          <div class="row items-center no-wrap">
+            <q-card-section>
+              <q-img :src="props.value.url" style="min-width: 200px"></q-img>
+            </q-card-section>
+            <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/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/Login.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import validator from 'validator'
+import { checkLoggedIn, loggedIn } from '../support/auth'
+import router from '../router'
+const name = ref<string>('')
+const email = ref<string>('')
+const password = ref<string>('')
+const passwordConfirm = ref<string>('')
+const btnDisabled = ref<boolean>(true)
+const isRegistration = ref<boolean>(false)
+const error = ref<string>('')
+
+const checkForm = () => {
+    btnDisabled.value =
+        (isRegistration.value
+            && (password.value != passwordConfirm.value
+                || name.value.length == 0))
+        || password.value.length < 8
+        || email.value.length == 0
+        || !validator.isEmail(email.value);
+}
+
+const submit = async () => {
+    if (isRegistration.value == true) {
+        error.value = await register()
+    } else {
+        error.value = await login()
+    }
+}
+
+const login = async () => {
+    const response = await fetch('/api/login/', {
+        method: 'POST',
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ email: email.value, password: password.value })
+    })
+
+    const user = (await response.json()) as unknown as any
+    if (!user.success) {
+        return user.message
+    }
+    loggedIn()
+    router.push({ path: '/Listings'})
+}
+
+const register = async () => {
+    const response = await fetch('/api/register', {
+        method: 'POST',
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ name:name.value, email:email.value, password:password.value })
+    })
+    const user = (await response.json()) as unknown as any
+    if (!user.success) {
+        return user.message
+    }
+    loggedIn()
+    router.push({ path: '/Listings'})
+}
+
+onMounted(() => {
+    if ( checkLoggedIn() ) {
+        router.push({ path: '/Listings'})
+    }
+})
+
+</script>
+
+<template>
+    <q-card-section v-if="!isRegistration">
+        <q-form class="q-gutter-md">
+            <q-input v-model="email" v-on:keyup="checkForm()" type="email" label="email" />
+            <q-input v-model="password" v-on:keyup="checkForm()" type="password" label="password" />
+        </q-form>
+    </q-card-section>
+    <q-card-section v-else>
+        <q-form class="q-gutter-md">
+            <q-input v-model="name" v-on:keyup="checkForm()" type="text" label="name" />
+            <q-input v-model="email" v-on:keyup="checkForm()" type="email" label="email" />
+            <q-input v-model="password" v-on:keyup="checkForm()" type="password" label="password" />
+            <q-input
+                v-model="passwordConfirm"
+                v-on:keyup="checkForm()"
+                type="password"
+                label="password confirmation"
+            />
+        </q-form>
+    </q-card-section>
+    <q-card-section v-if="error">
+        <p class="error">
+            <b>{{ error }}</b>
+        </p>
+    </q-card-section>
+    <q-card-actions class="q-px-md">
+        <q-btn
+            unelevated
+            color="primary"
+            size="lg"
+            :disable="btnDisabled"
+            class="full-width"
+            :label="isRegistration ? 'Register' : 'Login'"
+            @click="submit()"
+        />
+    </q-card-actions>
+    <q-card-section class="text-center q-pa-none">
+        <p class="text-grey-6">
+            {{ isRegistration ? 'Have an account?' : 'Not registered?' }}
+            <a
+                href="#"
+                @click="isRegistration = !isRegistration; checkForm()"
+            >{{ isRegistration ? 'Login' : 'Create an Account' }}</a>
+        </p>
+    </q-card-section>
+</template>
+<style>
+.error {
+    color: red;
+}
+</style>
+

src/components/RangeChart.vue

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import * as math from 'mathjs'
+import { v4 as uuidv4 } from 'uuid'
+import { LineChart } from 'vue-chart-3'
+import { computed, ref } from 'vue'
+import { Chart, ChartData, ChartOptions, registerables } from 'chart.js'
+import { MathStatement } from '../support/parse'
+import { ChartBox } from '../support/types'
+import { stepX, stepY } from '../support/const'
+
+Chart.register(...registerables)
+
+const emit = defineEmits<{
+  (eventName: 'move', x: number, y: number): void,
+  (eventName: 'edit'): void,
+  (eventName: 'remove'): void,
+}>()
+
+const props = defineProps<{
+  fn: MathStatement,
+  value: ChartBox,
+}>()
+const options = ref({
+  plugins: {
+    legend: {
+      labels: {
+        color: "white",
+        font: {
+          size: 18
+        }
+      }
+    }
+  },
+  scales: {
+    y: {
+      ticks: {
+        color: "white",
+        font: {
+          size: 15,
+        },
+      },
+      grid: {
+          color: '#ccc'
+      }
+    },
+    x: {
+      ticks: {
+        color: "white",
+        font: {
+          size: 14
+        },
+      },
+      grid: {
+          color: '#ccc'
+      }
+    }
+  }
+})
+
+const getChartData = (): ChartData<'line'> => {
+  const range = []
+  const min = Math.min(props.value.minX, props.value.maxX)
+  const max = Math.max(props.value.minX, props.value.maxX)
+  for (let i = min; i <= max; i += parseFloat(String(props.value.stepX)) || 1) {
+    range.push(i)
+  }
+
+  if (!props.fn.isFunctionDeclaration()) {
+    throw new TypeError('Cannot chart node that is not a function.')
+  }
+
+  const node = props.fn.parse() as math.FunctionAssignmentNode
+  const fn = node.compile().evaluate()  // FIXME need dependencies in scope
+
+  console.log('getChartData', {
+    labels: range.map(x => `${x}`),
+    datasets: [
+      {
+        label: node.name,
+        data: range.map(n => fn(n)),
+      },
+    ],
+  })
+  return {
+    labels: range.map(x => `${x}`),
+    datasets: [{
+      label: node.name,
+      backgroundColor: '#553564',
+      data: range.map(x => fn(x)),
+      pointRadius: 5
+    }],
+  }
+}
+
+const chartData = ref(getChartData())
+const chartKey = ref(uuidv4())
+computed(() => {
+  chartData.value = getChartData()
+  chartKey.value = uuidv4()
+})
+
+function onControlledDrag(e: { event: MouseEvent, data: { x: number, y: number } }) {
+
+  // const x = e.x;
+  // const y = e.y;
+  const { x, y } = e.data;
+  props.value.x = x;
+  props.value.y = y;
+  console.log(e)
+}
+function onControlledDragStop(e: { event: MouseEvent, data: { x: number, y: number } }) {
+  // console.log(typeof(e))
+  const { x, y } = e.data;
+  // const x = e.x;
+  // const y = e.y;
+  console.log(self)
+  emit('move', x, y);
+  onControlledDrag(e);
+}
+</script>
+<template>
+  <Draggable
+    :grid="[stepX, stepY]"
+    :default-position="{ x: props.value.x, y: props.value.y }"
+    :position="{ x: props.value.x, y: props.value.y }"
+    @stop="onControlledDragStop"
+  >
+    <div
+      style="background: var(--q-dark); display: flex; flex-direction: row; border: 1px solid #ccc; border-radius: 3px;"
+    >
+      <LineChart :options="options" :chartData="chartData" :key="chartKey" class="inner-chart" />
+      <div class="sidebar">
+        <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>
+  </Draggable>
+</template>
+
+<style>
+</style>
+

src/components/RangeChartEditor.vue

@@ -0,0 +1,118 @@
+<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'
+import Katex from './Katex.vue'
+import {ChartBox, StatementID} from '../support/types'
+import {MathPage} from '../support/page'
+
+const props = defineProps<{
+  page: MathPage,
+  chartBox?: ChartBox,
+}>()
+
+const emit = defineEmits<{
+  (eventName: 'save', statement: ChartBox): void,
+}>()
+
+const chartBoxModalError = ref<string|undefined>(undefined)
+const chartBoxFunctionName = ref('')
+const chartBoxMinXValue = ref(0)
+const chartBoxMaxXValue = ref(30)
+const chartBoxStepXValue = ref(1)
+
+const validateChartBox = () => {
+  if ( !chartBoxFunctionName.value ) {
+    return 'Missing function name'
+  }
+
+  if ( isNaN(parseFloat(String(chartBoxMinXValue.value))) ) {
+    return 'Invalid minimum X-value'
+  }
+
+  if ( isNaN(parseFloat(String(chartBoxMaxXValue.value))) ) {
+    return 'Invalid maximum X-value'
+  }
+
+  if ( isNaN(parseFloat(String(chartBoxStepXValue.value))) ) {
+    return 'Invalid X-value step size'
+  }
+
+  if ( !props.page.getFunctionByName(chartBoxFunctionName.value) ) {
+    return 'Invalid function name'
+  }
+}
+
+const saveChartBox = () => {
+  chartBoxModalError.value = validateChartBox()
+  if ( chartBoxModalError.value ) {
+    return
+  }
+
+  if ( props.chartBox ) {
+    props.chartBox.fnName = chartBoxFunctionName.value
+    props.chartBox.minX = chartBoxMinXValue.value
+    props.chartBox.maxX = chartBoxMaxXValue.value
+    props.chartBox.stepX = chartBoxStepXValue.value
+    emit('save', props.chartBox)
+  } else {
+    emit('save', new ChartBox(
+        chartBoxFunctionName.value,
+        chartBoxMinXValue.value,
+        chartBoxMaxXValue.value,
+        chartBoxStepXValue.value,
+    ))
+  }
+}
+
+onMounted(() => {
+  if ( props.chartBox ) {
+    chartBoxFunctionName.value = props.chartBox.fnName
+    chartBoxMinXValue.value = props.chartBox.minX
+    chartBoxMaxXValue.value = props.chartBox.maxX
+    chartBoxStepXValue.value = props.chartBox.stepX
+  }
+})
+</script>
+
+<template>
+  <q-card>
+    <q-card-section v-if="chartBoxModalError">
+      <div style="color: darkred; font-weight: bold">{{ chartBoxModalError }}</div>
+    </q-card-section>
+    <q-card-section>
+      <q-input
+          v-model="chartBoxFunctionName"
+          outlined
+          autofocus
+          label="Function name"
+      />
+      <br>
+      <q-input
+          v-model="chartBoxMinXValue"
+          outlined
+          autofocus
+          label="Minimum X-value"
+      />
+      <br>
+      <q-input
+          v-model="chartBoxMaxXValue"
+          outlined
+          autofocus
+          label="Maximum X-value"
+      />
+      <br>
+      <q-input
+          v-model="chartBoxStepXValue"
+          outlined
+          autofocus
+          label="X-value step size"
+      />
+    </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="() => saveChartBox()"></q-btn>
+    </q-card-actions>
+  </q-card>
+</template>

src/components/RichTextEditor.vue

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

src/components/Statement.vue

@@ -1,16 +1,16 @@
 <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'
 
 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))
   }
@@ -39,7 +39,7 @@ computed(() => value = getValueStatement())
 </style>
 
 <template>
-  <div class="math-statement">
+  <div class="math-statement" style="background: var(--q-dark)">
     <div class="content">
       <Katex :statement="statement" size="big"/>
       <div class="result" v-if="value">
@@ -48,9 +48,18 @@ computed(() => value = getValueStatement())
       </div>
     </div>
     <div class="sidebar">
-      <button>
+      <q-btn color="grey-7" round flat icon="more_vert">
-        <img src="../assets/edit.svg" alt="Edit" height="16">
+        <q-menu cover auto-close>
-      </button>
+          <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>
 </template>

src/components/TextBox.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { RichTextBox } from "../support/types";
+import { stepX, stepY } from "../support/const";
+const props = defineProps<{ value: RichTextBox }>();
+
+const emit = defineEmits<{
+  (eventName: 'move', x: number, y: number): void,
+  (eventName: 'edit',): void,
+  (eventName: 'remove',): void,
+
+}>()
+
+
+function onControlledDrag(e: { event: MouseEvent, data: { x: number, y: number } }) {
+
+  // const x = e.x;
+  // const y = e.y;
+  const { x, y } = e.data;
+  props.value.x = x;
+  props.value.y = y;
+  console.log(e)
+}
+function onControlledDragStop(e: { event: MouseEvent, data: { x: number, y: number } }) {
+  // console.log(typeof(e))
+  const { x, y } = e.data;
+  // const x = e.x;
+  // const y = e.y;
+  console.log(self)
+  emit('move', x, y);
+  onControlledDrag(e);
+}
+
+</script>
+
+<template>
+  <Draggable
+    :grid="[stepX, stepY]"
+    :default-position="{ x: props.value.x, y: props.value.y }"
+    :position="{ x: props.value.x, y: props.value.y }"
+    @stop="onControlledDragStop"
+  >
+    <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')">
+                        <q-item-label>Edit</q-item-label>
+                      </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/VarDeclEditor.vue

@@ -0,0 +1,115 @@
+<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'
+import Katex from './Katex.vue'
+import {StatementID} from '../support/types'
+
+const props = defineProps<{
+  statement?: MathStatement,
+}>()
+
+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
+  }
+
+  if ( props.statement ) {
+    props.statement.raw = `${newVariableName.value} = ${newVariableValue.value}`
+    emit('save', props.statement)
+  } else {
+    emit('save', new MathStatement(
+        uuidv4() as StatementID,
+        `${newVariableName.value} = ${newVariableValue.value}`
+    ))
+  }
+}
+
+onMounted(() => {
+  if ( props.statement ) {
+    const [ define ] = props.statement.defines()
+    newVariableName.value = define.name
+
+    const [_, ...rest] = props.statement.raw.split('=')
+    newVariableValue.value = rest.join('=')
+    updateNewVariablePreview()
+  }
+})
+</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/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/main.ts

@@ -12,7 +12,7 @@ import router from './router'
                     App UI
 --------------------------------------------------
 */
-import { Quasar } from 'quasar'
+import { Dark, Quasar  } from 'quasar'
 
 // Import icon libraries
 import '@quasar/extras/roboto-font-latin-ext/roboto-font-latin-ext.css'
@@ -20,8 +20,8 @@ import '@quasar/extras/material-icons/material-icons.css'
 import '@quasar/extras/fontawesome-v6/fontawesome-v6.css'
 
 // A few examples for animations from Animate.css:
-// import @quasar/extras/animate/fadeIn.css
+import '@quasar/extras/animate/fadeInUp.css'
-// import @quasar/extras/animate/fadeOut.css
+import '@quasar/extras/animate/fadeOutUp.css'
 
 // Import Quasar css
 import 'quasar/src/css/index.sass'
@@ -32,7 +32,6 @@ import 'quasar/src/css/index.sass'
 --------------------------------------------------
 */
 import { DraggablePlugin } from '@braks/revue-draggable'
-import { createAuth0 } from '@auth0/auth0-vue'
 
 import 'katex/dist/katex.min.css'
 import 'katex/dist/contrib/auto-render.min'
@@ -47,16 +46,22 @@ import App from './App.vue'
 const app = createApp(App)
 
 app.use(Quasar, {
-    plugins: {}, // import Quasar plugins and add here
+    plugins: {Dark}, // import Quasar plugins and add here
-})
+    config: {
+        brand: {
+            primary: '#553564',
+            secondary: '#7da9b2',
+            accent: '#9C27B0',
 
-app.use(
+            dark: '#1d1d1d',
-    createAuth0({
+
-        domain: 'dev-ge84r-eu.us.auth0.com',
+            positive: '#21BA45',
-        client_id: 'zHjZGg1uPws0DkQg5bRdKcDX8m6AuTZl', // eslint-disable-line camelcase
+            negative: '#C10015',
-        redirect_uri: window.location.origin, // eslint-disable-line camelcase
+            info: '#31CCEC',
-    }),
+            warning: '#F2C037',
-)
+        },
+    },
+})
 
 app.use(router)
 

src/pages/Editor.vue

@@ -1,19 +1,686 @@
 <script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { v4 as uuidv4 } from 'uuid'
+import { MathPage } from '../support/page'
+import { MathStatement } from '../support/parse'
+import { ChartBox, EvaluationResult, hasOwnProperty } from '../support/types'
+import Statement from '../components/Statement.vue'
+import VarDeclEditor from '../components/VarDeclEditor.vue'
+import ExpressionEditor from '../components/ExpressionEditor.vue'
+import TextBox from '../components/TextBox.vue'
+import ImageBox from '../components/ImageBox.vue'
+
+import FunctionEditor from '../components/FunctionEditor.vue'
+import { RichTextBox, ImageContainer } from '../support/types'
+import RangeChart from '../components/RangeChart.vue'
+import RangeChartEditor from '../components/RangeChartEditor.vue'
+import { stepX, stepY } from '../support/const'
+import { checkLoggedIn, loggedOut } from '../support/auth'
+import router from '../router'
+
+const props = defineProps<{
+  pageId?: number,
+}>()
+
+const math = ref(new MathPage(uuidv4()));
+const pageTitle = ref('New Page');
+const statements = ref<MathStatement[]>([]);
+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 stmOnControlledDragStop = (stmt: MathStatement) => (e: { event: MouseEvent, data: { x: number, y: number } }) => {
+  console.log(e)
+  console.log("moved stm5", stmt)
+  const { x, y } = e.data;
+  stmt.x = x;
+  stmt.y = y;
+}
+
+
+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
+}
+
+const newVariableModalOpen = ref(false)
+const openNewVariableDeclModal = () => {
+  newVariableModalOpen.value = true
+};
+
+const newExpressionModalOpen = ref(false)
+const openNewExpressionModal = () => {
+  newExpressionModalOpen.value = true
+};
+
+const newFunctionModalOpen = ref(false)
+const openNewFunctionModal = () => {
+  newFunctionModalOpen.value = true
+}
+
+const editingStatement = ref<MathStatement | undefined>()
+const editExpressionModalOpen = ref(false)
+const openEditExpressionModal = () => {
+  editExpressionModalOpen.value = true
+}
+
+const editVarDeclModalOpen = ref(false)
+const openEditVarDeclModal = () => {
+  editVarDeclModalOpen.value = true
+}
+
+const editFunctionModalOpen = ref(false)
+const openEditFunctionModal = () => {
+  editFunctionModalOpen.value = true
+}
+
+const updateStatements = () => {
+  statements.value = math.value.getStatements();
+  try {
+    evaluation.value = math.value.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 {
+        const stmt = MathStatement.temp(value)
+        value = stmt.toHTMLString()
+      } catch (_) { }
+
+      variableValues.push({
+        name,
+        value,
+      })
+    }
+
+    variableListingRows.value = variableValues
+
+    const functionValues: ({ name: string, value: string })[] = []
+    for (const stmt of math.value.functions()) {
+      const node = stmt.parse() as math.FunctionAssignmentNode
+      functionValues.push({
+        name: node.name,
+        value: stmt.toHTMLString(),
+      })
+    }
+
+    functionListingRows.value = functionValues
+  } catch (_) {
+    console.error(_)
+    evaluation.value = undefined
+  }
+  statementsKey.value = uuidv4()
+};
+
+onMounted(() => {
+  updateStatements()
+})
+
+const saveNewVariable = (stmt: MathStatement) => {
+  math.value.addStatement(stmt)
+  newVariableModalOpen.value = false
+  updateStatements()
+};
+
+const saveNewExpression = (stmt: MathStatement) => {
+  math.value.addStatement(stmt)
+  newExpressionModalOpen.value = false
+  updateStatements()
+};
+
+const saveNewFunction = (stmt: MathStatement) => {
+  math.value.addStatement(stmt)
+  newFunctionModalOpen.value = false
+  updateStatements()
+}
+
+const editStatement = (stmt: MathStatement) => {
+  editingStatement.value = stmt
+  console.log('editStatement', stmt)
+  if (stmt.isFunctionDeclaration()) {
+    openEditFunctionModal()
+  } else if (stmt.isDeclaration()) {
+    openEditVarDeclModal()
+  } else {
+    openEditExpressionModal()
+  }
+}
+
+const removeStatement = (stmt: MathStatement) => {
+  math.value.removeStatement(stmt.id)
+  updateStatements()
+}
+
+const finishEditStatement = () => {
+  editExpressionModalOpen.value = false
+  editVarDeclModalOpen.value = false
+  editFunctionModalOpen.value = false
+  updateStatements()
+}
+
+/*
+  Rich Text Stuff
+*/
+
+const makeNewRichTextBox = () => {
+  richTextStatements.value.push(new RichTextBox(''));
+  richEditID.value = richTextStatements.value.length - 1;
+  richEditExpression.value = richTextStatements.value[richEditID.value].text;
+  richEditModal.value = true;
+};
+
+const chartBoxKey = ref(uuidv4())
+const chartBoxes = ref<ChartBox[]>([])
+
+const newChartModalOpen = ref(false)
+const openNewChartModal = () => {
+  newChartModalOpen.value = true
+}
+
+const saveNewChartBox = (chartBox: ChartBox) => {
+  chartBoxes.value.push(chartBox)
+  newChartModalOpen.value = false
+}
+
+const editingChartBox = ref<ChartBox | undefined>()
+const chartEditModalOpen = ref(false)
+const openChartEditModal = (box: ChartBox) => {
+  editingChartBox.value = box
+  chartEditModalOpen.value = true
+}
+
+const saveEditingChartBox = () => {
+  chartEditModalOpen.value = false
+  chartBoxKey.value = uuidv4()
+}
+
+const moveChartBox = (id: number, x: number, y: number) => {
+  chartBoxes.value[id].x = x
+  chartBoxes.value[id].y = y
+}
+const removeChartBox = (id: number) => {
+  chartBoxes.value.splice(id, 1);
+};
+
+const richTextStatements = ref<RichTextBox[]>([
+  new RichTextBox("Hello World"),
+]);
+const richEditModal = ref(false);
+const richEditExpression = ref("");
+const richEditID = ref(0);
+
+const richEditStatement = (id: number) => {
+  richEditModal.value = true;
+  richEditID.value = id;
+  richEditExpression.value = richTextStatements.value[richEditID.value].text;
+};
+
+const moveRichTextBox = (id: number, x: number, y: number) => {
+  richEditID.value = id;
+  richTextStatements.value[richEditID.value].x = x;
+  richTextStatements.value[richEditID.value].y = y;
+};
+
+
+
+function richUpdateValue() {
+  richTextStatements.value[richEditID.value].text = richEditExpression.value;
+}
+const removeRichTextBox = (id: number) => {
+  console.log(richTextStatements.value[id]);
+  richTextStatements.value.splice(id, 1);
+};
+
+/*
+  Image box
+*/
+
+const makeNewImageBox = () => {
+  images.value.push(new ImageContainer(''));
+  imageID.value = images.value.length - 1;
+  imageURL.value = images.value[richEditID.value].url;
+  imageModal.value = true;
+};
+
+const images = ref<ImageContainer[]>([]);
+
+const imageModal = ref(false);
+const imageURL = ref("");
+const imageID = ref(0);
+
+const imageEditStatement = (id: number) => {
+  imageModal.value = true;
+  imageID.value = id;
+  imageURL.value = images.value[imageID.value].url;
+};
+
+const moveImageBox = (id: number, x: number, y: number) => {
+  imageID.value = id;
+  images.value[imageID.value].x = x;
+  images.value[imageID.value].y = y;
+};
+
+
+
+function imageUpdateValue() {
+  images.value[imageID.value].url = imageURL.value;
+}
+const removeimageBox = (id: number) => {
+  console.log(images.value[id]);
+  images.value.splice(id, 1);
+};
+
+
+/*
+  Auth
+*/
+const status = ref(checkLoggedIn())
+const logout = async () => {
+  const response = await fetch('/api/logout/', {
+    method: 'POST',
+    headers: {
+      'Accept': 'application/json',
+    },
+  })
+  loggedOut()
+  status.value = checkLoggedIn()
+  router.push('/')
+}
+
+onMounted(() => {
+  status.value = checkLoggedIn()
+  console.log(status.value)
+  if (status.value == false) {
+    router.push({ path: '/' })
+  }
+})
+
+const serialize = () => {
+  return {
+    title: pageTitle.value,
+    page: math.value.serialize(),
+    textBoxes: richTextStatements.value.map(x => x.serialize()),
+    chartBoxes: chartBoxes.value.map(x => x.serialize()),
+    imageBoxes: images.value.map(x => x.serialize()),
+  }
+}
+
+const editorPageId = ref<number|undefined>()
+const saveEditorPage = async (close = false) => {
+  const params = {
+    serialData: JSON.stringify(serialize()),
+  } as any
+
+  if ( editorPageId.value ) {
+    params.pageId = editorPageId.value
+  }
+
+  const response = await fetch('/api/editor/page', {
+    method: 'POST',
+    headers: {
+      'Accept': 'application/json',
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify(params),
+  })
+
+  const result = (await response.json()) as unknown as any
+  if (!result.success) {
+    return alert('Failed to save page: ' + result.message)
+  }
+
+  editorPageId.value = result.data.pageId
+  if ( close ) {
+    await router.push('/Listings')
+  }
+}
+
+const deleteEditorPage = async (close = false) => {
+  const params = {
+    serialData: JSON.stringify(serialize()),
+  } as any
+
+  if ( editorPageId.value ) {
+    params.pageId = editorPageId.value
+  }
+
+  const response = await fetch('/api/editor/page', {
+    method: 'DELETE',
+    headers: {
+      'Accept': 'application/json',
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify(params),
+  })
+  await router.push('/Listings')
+}
+
+const loadEditorPage = async () => {
+  if ( !editorPageId.value ) {
+    return
+  }
+
+  const pageId = editorPageId.value
+  const response = await fetch(`/api/editor/page?pageId=${pageId}`, {
+    method: 'GET',
+    headers: {
+      'Accept': 'application/json',
+    },
+  })
+
+  const result = (await response.json()) as unknown as any
+  if (!result.success) {
+    return alert('Failed to load page: ' + result.message)
+  }
+
+  const serialData = result.data.serialData
+  const serialized = JSON.parse(serialData) as any
+  math.value = MathPage.deserialize(serialized.page)
+  richTextStatements.value = serialized.textBoxes.map((box: any) => RichTextBox.deserialize(box))
+  chartBoxes.value = serialized.chartBoxes.map((box: any) => ChartBox.deserialize(box))
+  images.value = serialized.imageBoxes.map((box: any) => ImageContainer.deserialize(box))
+  pageTitle.value = serialized.title ?? 'New Page'
+  updateStatements()
+  chartBoxKey.value = uuidv4()
+}
+
+onMounted(() => {
+  if ( props.pageId ) {
+    editorPageId.value = props.pageId
+    loadEditorPage()
+    return
+  }
+
+  const paramPageId = router.currentRoute.value.params.pageId
+  if ( !Array.isArray(paramPageId) && !isNaN(parseInt(paramPageId, 10)) ) {
+    editorPageId.value = parseInt(paramPageId, 10)
+    loadEditorPage()
+    return
+  }
+})
 
 </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 size="50px">
+            <img src="../assets/l2.svg" />
+          </q-avatar>
+          <span style="font-family: 'Cinzel Decorative', cursive;">
+            Crystal Math Worktable
+          </span>
+        </q-toolbar-title>
 
-    <q-btn
+        <q-btn v-if="status" @click="logout()" label="Logout"></q-btn>
-        @click="showNotification"
+      </q-toolbar>
-        color="primary"
+    </q-header>
-        label="Show another notification"
+
+    <q-drawer show-if-above v-model="leftDrawerOpen" side="left" bordered>
+      <div class="column" style="height: 100%">
+        <div>
+          <q-input
+            v-model="pageTitle"
+            label="Title"
+            style="padding: 10px"
+          ></q-input>
+        </div>
+        <div class="col">
+          <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"
+            :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="value" :props="props">
+                  <div v-html="props.row.value"></div>
+                </q-td>
+              </q-tr>
+            </template>
+          </q-table>
+        </div>
+      </div>
+
+      <!-- drawer content -->
+    </q-drawer>
+
+    <q-page-container id="editor" style='padding: 0'>
+      <span v-for="(chartBox, index) in chartBoxes" style="display: flex">
+        <RangeChart
+          :fn="math.getFunctionByNameOrFail(chartBox.fnName)"
+          :key="chartBoxKey"
+          :value="chartBox"
+          v-on:move="(x, y) => moveChartBox(index, x, y)"
+          v-on:remove="() => removeChartBox(index)"
+          v-on:edit="() => openChartEditModal(chartBox)"
+        />
+      </span>
+
+      <span v-for="statement in statements" style="display: flex">
+        <Draggable
+          :grid="[stepX, stepY]"
+          :position="{ x: statement.x, y: statement.y }"
+          :default-position="{ x: statement.x, y: statement.y }"
+          @stop="(e: { event: MouseEvent, data: { x: number, y: number } }) => stmOnControlledDragStop(statement)(e)"
+        >
+          <div>
+            <Statement
+              :key="statementsKey"
+              :statement="statement"
+              :evaluation="evaluation"
+              v-on:edit="() => editStatement(statement)"
+              v-on:remove="() => removeStatement(statement)"
             />
           </div>
         </Draggable>
+      </span>
+
+      <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-dialog v-model="editExpressionModalOpen">
+        <ExpressionEditor :statement="editingStatement" v-on:save="() => finishEditStatement()" />
+      </q-dialog>
+
+      <q-dialog v-model="editVarDeclModalOpen">
+        <VarDeclEditor :statement="editingStatement" v-on:save="() => finishEditStatement()" />
+      </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-dialog v-model="newChartModalOpen">
+        <!-- // @ts-ignore -->
+        <RangeChartEditor :page="math" v-on:save="c => saveNewChartBox(c)" />
+      </q-dialog>
+
+      <q-dialog v-model="chartEditModalOpen">
+        <RangeChartEditor
+          :page="math"
+          :chartBox="editingChartBox"
+          v-on:save="() => saveEditingChartBox()"
+        />
+      </q-dialog>
+
+      <q-page-sticky position="top-right" :offset="[18, 18]">
+        <q-btn fab icon="save" title="Save" color="primary" @click="() => saveEditorPage()"/>
+      </q-page-sticky>
+
+      <q-page-sticky position="top-right" :offset="[18, 90]">
+        <q-btn fab icon="close" title="Save and close" color="primary" @click="() => saveEditorPage(true)"/>
+      </q-page-sticky>
+      <q-page-sticky position="top-right" :offset="[18, 162]">
+        <q-btn fab icon="delete_forever" title="Delete forever" color="primary" @click="() => deleteEditorPage()"/>
+      </q-page-sticky>
+
+      <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.4rem; padding: 0"
+            title="Add a variable declaration"
+            @click="() => openNewVariableDeclModal()"
+          />
+          <q-fab-action
+            color="secondary"
+            icon="code"
+            title="Add an expression"
+            @click="() => openNewExpressionModal()"
+          />
+          <q-fab-action
+            color="secondary"
+            icon="functions"
+            title="Add a new function"
+            @click="() => openNewFunctionModal()"
+          />
+          <q-fab-action
+            color="secondary"
+            icon="format_quote"
+            title="Add a text box"
+            @click="() => makeNewRichTextBox()"
+          />
+          <q-fab-action
+            color="secondary"
+            icon="image"
+            title="Add an image box"
+            @click="() => makeNewImageBox()"
+          />
+          <q-fab-action
+            color="secondary"
+            icon="show_chart"
+            title="Add a new chart"
+            @click="() => openNewChartModal()"
+          />
+        </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>
+
+      <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)"
+          v-on:move="(x, y) => moveRichTextBox(index, x, y)"
+        />
+      </div>
+
+      <q-dialog v-model="imageModal">
+        <q-card autogrow style="min-width: 25em;">
+          <q-input autogrow v-model="imageURL" />
+          <q-card-actions align="right" class="text-primary">
+            <q-btn flat label="Cancel" v-close-popup></q-btn>
+            <q-btn flat label="Save" @click="imageUpdateValue" v-close-popup></q-btn>
+          </q-card-actions>
+        </q-card>
+      </q-dialog>
+
+      <div v-for="(item, index) in images" style="display: flex">
+        <ImageBox
+          :value="item"
+          v-on:edit="() => (item.url ? imageEditStatement(index) : {})"
+          v-on:remove="() => removeimageBox(index)"
+          v-on:move="(x, y) => moveImageBox(index, x, y)"
+        />
+      </div>
+    </q-page-container>
+  </q-layout>
 </template>
 
-<style></style>
+<style>
+@import url("https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&display=swap");
+
+#editor {
+  background-image: url(../assets/grid.svg);
+  background-repeat: repeat;
+  height: 100%;
+  padding-top: 0px;
+}
+</style>

src/pages/Home.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import Login from '../components/Login.vue'
+
+defineProps<{ msg: string }>()
+
+const show = ref<boolean>(true)
+</script>
+
+<template>
+  <q-layout>
+    <h1>{{ msg }}</h1>
+    <transition
+      appear
+      enter-active-class="animated fadeInUp"
+      leave-active-class="animated fadeOutUp"
+      mode="out-in"
+    >
+      <q-btn color="primary" text-color="white" @click="show = !show" v-if="show">Start</q-btn>
+      <div class="login" v-else>
+        <q-card square bordered class="q-pa-lg shadow-1">
+          <Login />
+        </q-card>
+      </div>
+    </transition>
+  </q-layout>
+</template>
+
+<style scoped>
+button {
+  background-color: #4484c4;
+  border: none;
+  color: white;
+  padding: 15px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 32px;
+  border-radius: 5px;
+}
+
+.login {
+  max-width: 30em;
+  margin: auto;
+}
+</style>

src/pages/Listings.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import {onMounted, ref} from 'vue'
+import router from '../router'
+
+interface PageRecord {
+  pageId: number|string,
+  title: string,
+}
+
+const pages = ref<PageRecord[]>([])
+const columns = ref([
+  {
+    name: 'title',
+    field: 'title',
+    label: 'Title',
+  },
+])
+
+const loadPages = async () => {
+  const response = await fetch(`/api/editor/pages`, {
+    method: 'GET',
+    headers: {
+      'Accept': 'application/json',
+    },
+  })
+
+  const result = (await response.json()) as unknown as any
+  if ( !result.success ) {
+    alert('Unable to load pages: ' + result?.message)
+  }
+
+  pages.value = result.data.records.map((row: any) => {
+    return {
+      pageId: row.pageId,
+      title: JSON.parse(row.serialData).title || 'New Page',
+    }
+  })
+}
+
+onMounted(loadPages)
+
+const onRowClick = (_: unknown, row: PageRecord) => {
+  router.push({ path: `/Editor/${row.pageId}` })
+}
+
+const onNewPageClick = () => {
+  router.push('/Editor')
+}
+
+</script>
+
+<template>
+  <div style="width: 100%">
+    <q-btn icon="add" style="margin-bottom: 10px" @click="onNewPageClick">New Page</q-btn>
+    <q-table
+        style="width: 100%"
+        title="My Pages"
+        :columns="columns"
+        :rows="pages"
+        row-key="pageId"
+        hide-bottom
+        :pagination="{ rowsPerPage: 10000 }"
+        @row-click="onRowClick"
+    />
+  </div>
+</template>

src/pages/Login.vue

@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { useAuth0 } from '@auth0/auth0-vue';
-
-defineProps<{ msg: string }>()
-
-const { loginWithRedirect } = useAuth0();
-
-const login = () => {
-    loginWithRedirect();
-}
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <button @click="login">Log in</button>
-  
-</template>
-
-<style scoped>
-button {
-  background-color: #215b8a; /* Green */
-  border: none;
-  color: white;
-  padding: 15px 32px;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  font-size: 32px;
-  border-radius: 5px;
-}
-</style>

src/pages/Scratch.vue

@@ -1,21 +1,75 @@
 <script setup lang="ts">
-  import {MathPage} from '../support/page'
+import { MathPage } from '../support/page'
-  import {v4 as uuidv4} from 'uuid'
+import { v4 as uuidv4 } from 'uuid'
-  import Statement from '../components/Statement.vue'
+import Statement from '../components/Statement.vue'
-  import {MathStatement} from '../support/parse'
+import { MathStatement } from '../support/parse'
+import { onMounted, ref } from 'vue'
+import Katex from '../components/Katex.vue'
+import { checkLoggedIn, loggedOut } from '../support/auth'
+import router from '../router'
 
-  const page = new MathPage(uuidv4())
+const page = new MathPage(uuidv4())
-  const stmt1Id = page.addRaw('x = y+3/4')
+const stmt1Id = page.addRaw('x = y+3/4')
-  const stmt2Id = page.addRaw('y = 9')
+const stmt2Id = page.addRaw('y = 9')
-  const evaluation = page.evaluate()
+const evaluation = page.evaluate()
 
-  const stmt = page.getStatement(stmt1Id)
+const stmt = page.getStatement(stmt1Id)
-  console.log({page, stmt1Id})
+console.log({ page, stmt1Id })
+
+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()
+  }
+}
 
-  const onEdit = (stmt: MathStatement) => () => console.log('edit', stmt)
 </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/quasar-variables.sass

@@ -1,10 +1,12 @@
-$primary   : #1976D2
+$primary   : #553564
-$secondary : #26A69A
+$secondary : #008e80
 $accent    : #9C27B0
 
 $dark      : #1D1D1D
+// $dark-page: #333333;
+
 
 $positive  : #21BA45
 $negative  : #C10015
-$info      : #31CCEC
+$info      : #7da9b2
 $warning   : #F2C037

src/router.ts

@@ -1,5 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import Home from './pages/Login.vue'
+import Home from './pages/Home.vue'
 
 const routes = [
     {
@@ -15,8 +15,18 @@ const routes = [
     {
         path: '/editor',
         name: 'Editor',
-        component: () => import('./pages/Editor.vue'),
+        component: () => import(/* webpackChunkName: "Editor" */ './pages/Editor.vue'),
     },
+    {
+        path: '/editor/:pageId',
+        component: () => import(/* webpackChunkName: "Editor" */ './pages/Editor.vue'),
+    },
+    {
+        path: '/listings',
+        name: 'Listings',
+        component: () => import(/* webpackChunkName: "Listings" */ './pages/Listings.vue'),
+    },
+
 ]
 
 const router = createRouter({

src/support/auth.ts

@@ -0,0 +1,10 @@
+let isLoggedIn = false
+export const checkLoggedIn = () => {
+    return isLoggedIn
+}
+export const loggedIn = () => {
+    isLoggedIn = true
+}
+export const loggedOut = () => {
+    isLoggedIn = false
+}

src/support/const.ts

@@ -0,0 +1,2 @@
+export const stepX = 5
+export const stepY = 5

src/support/page.ts

@@ -2,20 +2,47 @@ 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.
  */
 export class MathPage {
     /** The statements on the page. */
-    protected statements: Record<StatementID, MathStatement> = {}
+    statements: Record<StatementID, MathStatement> = {}
+
+    static deserialize(vals: [string, [StatementID, string, number, number][]]) {
+        const inst = new this(vals[0])
+
+        for ( const row of vals[1] ) {
+            inst.statements[row[0]] = MathStatement.deserialize(row)
+        }
+
+        return inst
+    }
 
     constructor(
         /** Unique page ID. */
         public readonly id: string,
     ) {}
 
+    serialize(): [string, [StatementID, string, number, number][]] {
+        return [
+            this.id,
+            Object.values(this.statements).map(x => x.serialize()),
+        ]
+    }
+
+    /** Get all defined statements. */
+    getStatements(): MathStatement[] {
+        return Object.values(this.statements)
+    }
+
+    /** Remove a statement from the math page. */
+    removeStatement(id: StatementID) {
+        delete this.statements[id]
+    }
+
     /** Get a statement by ID if it exists. */
     getStatement(id: StatementID): Maybe<MathStatement> {
         return this.statements[id]
@@ -72,6 +99,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)
@@ -79,6 +112,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)
@@ -91,11 +130,51 @@ 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())
+    }
+
+    /** Look up a function statement by name, if it exists. */
+    getFunctionByName(name: string): MathStatement|undefined {
+        for ( const fn of this.functions() ) {
+            const node = fn.parse() as math.FunctionAssignmentNode
+            if ( node.name === name ) {
+                return fn
+            }
+        }
+    }
+
+    /** Look up a function statement by name, if it exists. */
+    getFunctionByNameOrFail(name: string): MathStatement {
+        const fn = this.getFunctionByName(name)
+        if ( !fn ) {
+            throw new Error('Unable to find function with name: ' + name)
+        }
+        return fn
+    }
+
     /** 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]
@@ -104,8 +183,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

@@ -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. */
@@ -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[] {
@@ -263,14 +264,33 @@ export class MathStatement {
         return new MathStatement(uuidv4() as StatementID, raw)
     }
 
+    static deserialize(vals: [StatementID, string, number, number]) {
+        return new this(...vals)
+    }
+
     constructor(
         /** Unique ID of this statement. */
         public readonly id: StatementID,
 
         /** The raw statement input by the user. */
-        public readonly raw: string,
+        public raw: string,
+
+        /** The x position in the grid. */
+        public x: number = 0,
+
+        /** The y position in the grid. */
+        public y: number = 0,
     ) {}
 
+    serialize(): [StatementID, string, number, number] {
+        return [
+            this.id,
+            this.raw,
+            this.x,
+            this.y,
+        ]
+    }
+
     /** Parse the raw statement to an AST. */
     parse(): math.MathNode {
         return math.parse(this.raw)
@@ -300,6 +320,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 +344,26 @@ 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
+    }
+
+    isDeclaration(): boolean {
+        return this.defines().length > 0
+    }
+
+    isFunctionDeclaration(): boolean {
+        return math.isFunctionAssignmentNode(this.parse())
+    }
 }

src/support/types.ts

@@ -91,3 +91,75 @@ export interface EvaluationResult {
     variables: Record<VariableName, any>
     statements: Record<StatementID, any>
 }
+
+
+export class RichTextBox {
+    static deserialize(vals: [string, number, number]) {
+        return new this(...vals)
+    }
+
+    constructor(
+        public text: string = '',
+        public x: number = 0,
+        public y: number = 0,
+    ) {}
+
+    serialize(): [string, number, number] {
+        return [
+            this.text,
+            this.x,
+            this.y,
+        ]
+    }
+}
+
+
+export class ImageContainer {
+    static deserialize(vals: [string, number, number]) {
+        return new this(...vals)
+    }
+
+    constructor(
+        public url: string = '',
+        public x: number = 0,
+        public y: number = 0,
+    ) {}
+
+    serialize(): [string, number, number] {
+        return [
+            this.url,
+            this.x,
+            this.y,
+        ]
+    }
+}
+
+
+export class ChartBox {
+    static deserialize(vals: [string, number, number, number, number, number]) {
+        return new this(...vals)
+    }
+
+    // eslint-disable-next-line max-params
+    constructor(
+        public fnName: string,
+        public minX: number,
+        public maxX: number,
+        public stepX: number = 1,
+        public x: number = 0,
+        public y: number = 0,
+    ) {}
+
+    serialize(): [string, number, number, number, number, number] {
+        return [
+            this.fnName,
+            this.minX,
+            this.maxX,
+            this.stepX,
+            this.x,
+            this.y,
+        ]
+    }
+}
+
+

vite.config.ts

@@ -9,6 +9,9 @@ export default defineConfig({
             '/api': {
                 target: 'http://localhost:8000/',
             },
+            '/auth': {
+                target: 'http://localhost:8000/',
+            },
         },
     },
     plugins: [
@@ -18,5 +21,5 @@ export default defineConfig({
 
         quasar({
             sassVariables: 'src/quasar-variables.sass',
-      }),]
+        })],
 })