Resolve merge conflicts

Implement adding expression and var decls
forgot to stage these
2022-04-09 18:07:25 -05:00 · 2022-04-09 17:48:41 -05:00 · 2022-04-09 17:31:11 -05:00 · 2022-04-09 17:31:01 -05:00 · 2022-04-09 16:12:59 -05:00 · 2022-04-09 16:12:24 -05:00
23 changed files with 767 additions and 107 deletions
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
-  <body style="display: flex; height: 100%; min-height: 100vh; flex-direction: column">
+  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
  },
  "dependencies": {
    "@auth0/auth0-vue": "^1.0.0",
+    "@quasar/extras": "^1.13.5",
    "@types/katex": "^0.14.0",
    "@types/uuid": "^8.3.4",
    "@vuetify/vite-plugin": "1.0.0-alpha.10",
@@ -24,6 +25,7 @@
    "install": "^0.13.0",
    "katex": "^0.15.3",
    "mathjs": "^10.4.3",
+    "quasar": "^2.6.6",
    "uuid": "^8.3.2",
    "vue": "^3.2.25",
    "vue-router": "^4.0.14",
@@ -31,11 +33,13 @@
  },
  "devDependencies": {
    "@braks/revue-draggable": "^0.4.2",
+    "@quasar/vite-plugin": "^1.0.9",
    "@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",
    "eslint": "^8.13.0",
+    "sass": "1.32.0",
    "typescript": "^4.5.4",
    "vite": "^2.9.0",
    "vue-tsc": "^0.33.9"
--- a/plugins/vuetify.ts
+++ b/plugins/vuetify.ts
@@ -1,10 +0,0 @@
-import 'vuetify/styles'
-import { createVuetify } from 'vuetify'
-
-export default createVuetify({
-    theme: {
-        defaultTheme: 'dark'
-      }
-}
-    
-)
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3,6 +3,8 @@ lockfileVersion: 5.3
 specifiers:
  '@auth0/auth0-vue': ^1.0.0
  '@braks/revue-draggable': ^0.4.2
+  '@quasar/extras': ^1.13.5
+  '@quasar/vite-plugin': ^1.0.9
  '@types/katex': ^0.14.0
  '@types/uuid': ^8.3.4
  '@typescript-eslint/eslint-plugin': ^5.18.0
@@ -15,6 +17,8 @@ specifiers:
  install: ^0.13.0
  katex: ^0.15.3
  mathjs: ^10.4.3
+  quasar: ^2.6.6
+  sass: 1.32.0
  typescript: ^4.5.4
  uuid: ^8.3.2
  vite: ^2.9.0
@@ -25,6 +29,7 @@ specifiers:

 dependencies:
  '@auth0/auth0-vue': 1.0.0_vue-router@4.0.14
+  '@quasar/extras': 1.13.5
  '@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
@@ -32,6 +37,7 @@ dependencies:
  install: 0.13.0
  katex: 0.15.3
  mathjs: 10.4.3
+  quasar: 2.6.6
  uuid: 8.3.2
  vue: 3.2.31
  vue-router: 4.0.14_vue@3.2.31
@@ -39,13 +45,15 @@ dependencies:

 devDependencies:
  '@braks/revue-draggable': 0.4.2_vue@3.2.31
+  '@quasar/vite-plugin': 1.0.9_c0effa32a194597943674c123f9c6ed2
  '@typescript-eslint/eslint-plugin': 5.18.0_0dd9be2ba5ed9805045f3fec8be848f5
  '@typescript-eslint/parser': 5.18.0_eslint@8.13.0+typescript@4.6.3
  '@vitejs/plugin-vue': 2.3.1_vite@2.9.1+vue@3.2.31
  '@volar/vue-language-service': 0.33.9
  eslint: 8.13.0
+  sass: 1.32.0
  typescript: 4.6.3
-  vite: 2.9.1
+  vite: 2.9.1_sass@1.32.0
  vue-tsc: 0.33.9_typescript@4.6.3

 packages:
@@ -203,6 +211,23 @@ packages:
      fastq: 1.13.0
    dev: true

+  /@quasar/extras/1.13.5:
+    resolution: {integrity: sha512-H4X3jwqOJpDrn1Pof1mJIpoHdBrZQSR9ZpnQ7RCkJsJccpTyQzs8Q6ehVXfIZrco2kd3UPitRQqEiW7k45ckLg==}
+    dev: false
+
+  /@quasar/vite-plugin/1.0.9_c0effa32a194597943674c123f9c6ed2:
+    resolution: {integrity: sha512-i3tOXLu9SvBG/u/VH/vlPpwzU3QHVtogoSl23Y3i9Clgo6XCtm9mHB0XnQvsLQgNfUTkAKJPKnGwAPQd9uBu1A==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      quasar: ^2.0.0
+      vite: ^2.0.0
+      vue: ^3.0.0
+    dependencies:
+      quasar: 2.6.6
+      vite: 2.9.1_sass@1.32.0
+      vue: 3.2.31
+    dev: true
+
  /@sindresorhus/is/0.14.0:
    resolution: {integrity: sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ==}
    engines: {node: '>=6'}
@@ -512,7 +537,7 @@ packages:
      vite: ^2.5.10
      vue: ^3.2.25
    dependencies:
-      vite: 2.9.1
+      vite: 2.9.1_sass@1.32.0
      vue: 3.2.31
    dev: true

@@ -739,7 +764,7 @@ packages:
    dependencies:
      '@vuetify/loader-shared': 1.3.0_vuetify@3.0.0-beta.0
      debug: 4.3.4
-      vite: 2.9.1
+      vite: 2.9.1_sass@1.32.0
      vuetify: 3.0.0-beta.0_vue@3.2.31
    transitivePeerDependencies:
      - supports-color
@@ -852,6 +877,14 @@ packages:
      color-convert: 2.0.1
    dev: true

+  /anymatch/3.1.2:
+    resolution: {integrity: sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==}
+    engines: {node: '>= 8'}
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.1
+    dev: true
+
  /argparse/1.0.10:
    resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
    dependencies:
@@ -904,6 +937,11 @@ packages:
    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
    dev: true

+  /binary-extensions/2.2.0:
+    resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
+    engines: {node: '>=8'}
+    dev: true
+
  /boxen/3.2.0:
    resolution: {integrity: sha512-cU4J/+NodM3IHdSL2yN8bqYqnmlBTidDR4RC7nJs61ZmtGz8VZzM3HLQX0zY5mrSmPtR3xWwsq2jOUQqFZN8+A==}
    engines: {node: '>=6'}
@@ -1031,6 +1069,21 @@ packages:
      is-regex: 1.1.4
    dev: true

+  /chokidar/3.5.3:
+    resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
+    engines: {node: '>= 8.10.0'}
+    dependencies:
+      anymatch: 3.1.2
+      braces: 3.0.2
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.6.0
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
+
  /ci-info/2.0.0:
    resolution: {integrity: sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==}
    dev: true
@@ -2116,6 +2169,13 @@ packages:
    resolution: {integrity: sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=}
    dev: true

+  /is-binary-path/2.1.0:
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+    engines: {node: '>=8'}
+    dependencies:
+      binary-extensions: 2.2.0
+    dev: true
+
  /is-buffer/2.0.5:
    resolution: {integrity: sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==}
    engines: {node: '>=4'}
@@ -2586,6 +2646,11 @@ packages:
      validate-npm-package-license: 3.0.4
    dev: true

+  /normalize-path/3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
  /normalize-url/4.5.1:
    resolution: {integrity: sha512-9UZCFRHQdNrfTpGg8+1INIg93B6zE0aXMVFkw1WFwvO4SlZywU6aLg5Of0Ap/PgcbSw4LNxvMWXMeugwMCX0AA==}
    engines: {node: '>=8'}
@@ -2936,6 +3001,11 @@ packages:
    engines: {node: '>=6'}
    dev: true

+  /quasar/2.6.6:
+    resolution: {integrity: sha512-rXoGZROOXVutQX14l/ys0te/NrgQ754krI0Vz52pBXdznyS+dTL6AgGpr3JMwffoxpxhQyedrL2jOAMpq+Jsgw==}
+    engines: {node: '>= 10.18.1', npm: '>= 6.13.4', yarn: '>= 1.21.1'}
+    dev: false
+
  /queue-microtask/1.2.3:
    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
    dev: true
@@ -3008,6 +3078,13 @@ packages:
      util-deprecate: 1.0.2
    dev: true

+  /readdirp/3.6.0:
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
+    engines: {node: '>=8.10.0'}
+    dependencies:
+      picomatch: 2.3.1
+    dev: true
+
  /redent/2.0.0:
    resolution: {integrity: sha1-wbIAe0LVfrE4kHmzyDM2OdXhzKo=}
    engines: {node: '>=4'}
@@ -3131,6 +3208,14 @@ packages:
      suf-regex: 0.3.4
    dev: true

+  /sass/1.32.0:
+    resolution: {integrity: sha512-fhyqEbMIycQA4blrz/C0pYhv2o4x2y6FYYAH0CshBw3DXh5D5wyERgxw0ptdau1orc/GhNrhF7DFN2etyOCEng==}
+    engines: {node: '>=8.9.0'}
+    hasBin: true
+    dependencies:
+      chokidar: 3.5.3
+    dev: true
+
  /seedrandom/3.0.5:
    resolution: {integrity: sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg==}
    dev: false
@@ -3728,7 +3813,7 @@ packages:
      vfile-message: 2.0.4
    dev: true

-  /vite/2.9.1:
+  /vite/2.9.1_sass@1.32.0:
    resolution: {integrity: sha512-vSlsSdOYGcYEJfkQ/NeLXgnRv5zZfpAsdztkIrs7AZHV8RCMZQkwjo4DS5BnrYTqoWqLoUe1Cah4aVO4oNNqCQ==}
    engines: {node: '>=12.2.0'}
    hasBin: true
@@ -3748,6 +3833,7 @@ packages:
      postcss: 8.4.12
      resolve: 1.22.0
      rollup: 2.70.1
+      sass: 1.32.0
    optionalDependencies:
      fsevents: 2.3.2
    dev: true
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,25 +1,39 @@
 <script setup lang="ts">
+import Home from "./pages/Login.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";
+
 (window as any).Stmt = MathStatement;
 (window as any).Pg = MathPage;
-
 </script>

 <template>
-  <v-app>
-    <v-app-bar height="30" elevation="0">
-      <div id="nav">
-        <router-link class="links" to="/">Home</router-link> |
-        <router-link class="links" to="/scratch">Scratch Testing</router-link> |
-        <router-link class="links" to="/editor">Editor</router-link>
-      </div>
-    </v-app-bar>
+  <q-layout view="hHr LpR fFf">
+    <q-header elevated class="bg-primary text-white" height-hint="98">
+      <q-toolbar>
+        <q-toolbar-title>
+          <q-avatar>
+            <img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg" />
+          </q-avatar>
+          Title
+        </q-toolbar-title>
+      </q-toolbar>

-    <div style="margin-top: 30px">  <!-- Account for the navbar height -->
-      <router-view/>
-    </div>
-  </v-app>
+      <q-tabs align="left">
+        <q-route-tab to="/Scratch" label="Scratch" />
+        <q-route-tab to="/Editor" label="Editor" />
+
+      </q-tabs>
+    </q-header>
+
+    <q-page-container>
+      <router-view />
+    </q-page-container>
+  </q-layout>
 </template>

 <style>
@@ -28,14 +42,7 @@ import { MathPage } from "./support/page";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
-.links {
-  color: #fff;
-}
-.links:visited {
-  color: #fff;
+  color: #2c3e50;
+  margin-top: 60px;
 }
 </style>
--- a/src/assets/grid.svg
+++ b/src/assets/grid.svg
@@ -0,0 +1,13 @@
+<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <pattern id="smallGrid" width="8" height="8" patternUnits="userSpaceOnUse">
+      <path d="M 8 0 L 0 0 0 8" fill="none" stroke="gray" stroke-width="0.5"/>
+    </pattern>
+    <pattern id="grid" width="80" height="80" patternUnits="userSpaceOnUse">
+      <rect width="80" height="80" fill="url(#smallGrid)"/>
+      <path d="M 80 0 L 0 0 0 80" fill="none" stroke="gray" stroke-width="1"/>
+    </pattern>
+  </defs>
+      
+  <rect width="100%" height="100%" fill="url(#grid)" />
+</svg>
--- a/src/components/Editor.vue
+++ b/src/components/Editor.vue
@@ -1,15 +0,0 @@
-<script setup>
-</script>
-
-<template>
- <v-navigation-drawer width="100" permanent>
-
- </v-navigation-drawer>
-
-           <Draggable>
-            <div class="box">I use a wrapper</div>
-            </Draggable>
-</template>
-
-<style>
-</style>
--- a/src/components/Katex.vue
+++ b/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()
-computed(getRenderedHTML)
+let renderedHtml = 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>

--- a/src/components/Scratch.vue
+++ b/src/components/Scratch.vue
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-  import {MathPage} from '../support/page'
-  import {v4 as uuidv4} from 'uuid'
-  import Statement from './Statement.vue'
-  import {MathStatement} from '../support/parse'
-
-  const page = new MathPage(uuidv4())
-  const stmt1Id = page.addRaw('x = y+3/4')
-  const stmt2Id = page.addRaw('y = 9')
-  const evaluation = page.evaluate()
-
-  const stmt = page.getStatement(stmt1Id)
-  console.log({page, stmt1Id})
-
-  const onEdit = (stmt: MathStatement) => () => console.log('edit', stmt)
-</script>
-
-<template>
-  <p>Scratch page for testing!</p>
-  <Statement v-if="stmt" :statement="stmt" :evaluation="evaluation"/>
-</template>
--- a/src/components/Statement.vue
+++ b/src/components/Statement.vue
@@ -6,11 +6,11 @@ import Katex from './Katex.vue'

 const props = defineProps<{
  statement: MathStatement,
-  evaluation: EvaluationResult,
+  evaluation?: EvaluationResult,
 }>()

 const getValueStatement = (): Maybe<MathStatement> => {
-  const value = props.evaluation.statements[props.statement.id]
+  const value = props.evaluation?.statements?.[props.statement.id]
  if ( value ) {
    return MathStatement.temp(String(value))
  }
@@ -36,10 +36,18 @@ computed(() => value = getValueStatement())
  .sidebar {
    padding-left: 10px;
  }
+
+  .edit-button {
+    border: none;
+  }
+
+  .edit-button:hover {
+    cursor: pointer;
+  }
 </style>

 <template>
-  <div class="math-statement">
+  <div class="math-statement" style="background: white">
    <div class="content">
      <Katex :statement="statement" size="big"/>
      <div class="result" v-if="value">
@@ -48,7 +56,7 @@ computed(() => value = getValueStatement())
      </div>
    </div>
    <div class="sidebar">
-      <button>
+      <button class="edit-button" @click="() => $emit('edit')" title="Edit this expression">
        <img src="../assets/edit.svg" alt="Edit" height="16">
      </button>
    </div>
--- a/src/components/TextBox.vue
+++ b/src/components/TextBox.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const props = defineProps({
+  statement: { type: String, required: true },
+  })
+</script>
+
+<template>
+  <Draggable :grid="[25, 25]">
+    <div style="display: flex">
+      <q-card flat bordered>
+        <q-card-section>
+          <div class="row items-center no-wrap">
+            <q-card-section v-html="props.statement" />
+            <div class="col-auto">
+              <q-btn color="grey-7" round flat icon="more_vert">
+                <q-menu cover auto-close>
+                  <q-list>
+                    <q-item clickable>
+                      <q-item-section @click="() => $emit('edit')">Edit</q-item-section>
+                    </q-item>
+                    <q-item clickable>
+                      <q-item-section @click="() => $emit('remove')">Remove</q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </q-btn>
+            </div>
+          </div>
+        </q-card-section>
+      </q-card>
+    </div>
+  </Draggable>
+</template>
+
+<style lang="sass" scoped></style>
--- a/src/components/WrapperBox.vue
+++ b/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>
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,27 +1,54 @@
+/*
+--------------------------------------------------
+                    Vue Helpers
+--------------------------------------------------
+*/
 import { createApp } from 'vue'
-import App from './App.vue'
-import { DraggablePlugin } from '@braks/revue-draggable'
-import { createAuth0 } from '@auth0/auth0-vue'
+
 import router from './router'

-import 'vuetify/styles' // Global CSS has to be imported
-import { createVuetify } from 'vuetify'
-import * as components from 'vuetify/components'
-import * as directives from 'vuetify/directives'
+/*
+--------------------------------------------------
+                    App UI
+--------------------------------------------------
+*/
+import { Quasar } from 'quasar'
+
+// Import icon libraries
+import '@quasar/extras/roboto-font-latin-ext/roboto-font-latin-ext.css'
+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/fadeOut.css
+
+// Import Quasar css
+import 'quasar/src/css/index.sass'
+
+/*
+--------------------------------------------------
+                    Plugins
+--------------------------------------------------
+*/
+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'

-
+/*
+--------------------------------------------------
+                    Components
+--------------------------------------------------
+*/
+import App from './App.vue'

 const app = createApp(App)
-const vuetify = createVuetify({
-    components,
-    directives,
-    theme: {
-        defaultTheme: 'dark',
-    },
-}) // Replaces new Vuetify(...)
-app.use(vuetify)
+
+app.use(Quasar, {
+    plugins: {}, // import Quasar plugins and add here
+})

 app.use(
    createAuth0({
@@ -33,5 +60,5 @@ app.use(

 app.use(router)

-app.use(DraggablePlugin);
+app.use(DraggablePlugin)
 app.mount('#app')
--- a/src/pages/Editor.vue
+++ b/src/pages/Editor.vue
@@ -0,0 +1,192 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { v4 as uuidv4 } from 'uuid'
+import WrapperBox from '../components/WrapperBox.vue'
+import {MathPage} from '../support/page'
+import {MathStatement} from '../support/parse'
+import Katex from '../components/Katex.vue'
+import {EvaluationResult, StatementID} from '../types'
+import Statement from '../components/Statement.vue'
+import VarDeclEditor from './VarDeclEditor.vue'
+import ExpressionEditor from './ExpressionEditor.vue'
+import TextBox from '../components/TextBox.vue'
+
+const math = new MathPage(uuidv4())
+const statements = ref<MathStatement[]>([])
+const evaluation = ref<EvaluationResult|undefined>()
+const statementsKey = ref<string>(uuidv4())
+const leftDrawerOpen = ref(false);
+
+function toggleLeftDrawer() {
+  leftDrawerOpen.value = !leftDrawerOpen.value;
+}
+
+const newVariableModalOpen = ref(false)
+const openNewVariableDeclModal = () => {
+  newVariableModalOpen.value = true
+}
+
+const newExpressionModalOpen = ref(false)
+const openNewExpressionModal = () => {
+  newExpressionModalOpen.value = true
+}
+
+const updateStatements = () => {
+  statements.value = math.getStatements()
+  try {
+    evaluation.value = math.evaluate()
+  } catch (_) {
+    evaluation.value = undefined
+  }
+  statementsKey.value = uuidv4()
+}
+
+const saveNewVariable = (stmt: MathStatement) => {
+  math.addStatement(stmt)
+  newVariableModalOpen.value = false
+  updateStatements()
+}
+
+const saveNewExpression = (stmt: MathStatement) => {
+  math.addStatement(stmt)
+  newExpressionModalOpen.value = false
+  updateStatements()
+}
+
+/*
+  Rich Text Stuff
+*/
+
+const richTextStatments = ref([
+  { text: "test" },
+  { text: "test2" },
+  { text: "test3" },
+]);
+
+const richEditModal = ref(false);
+const richEditExpression = ref("");
+const richEditID = ref(0);
+
+const richEditStatement = (id: number) => {
+  console.log("editing statement", id, richEditModal);
+  richEditModal.value = true;
+  richEditID.value = id;
+  richEditExpression.value = richTextStatments.value[richEditID.value].text;
+};
+
+function richUpdateValue() {
+  richTextStatments.value[richEditID.value].text = richEditExpression.value;
+}
+</script>
+
+<template>
+  <q-layout view="hHh Lpr fff">
+    <q-header reveal bordered class="bg-primary text-white" height-hint="98">
+      <q-toolbar>
+        <q-btn dense flat round icon="menu" @click="toggleLeftDrawer" />
+
+        <q-toolbar-title>
+          <q-avatar>
+            <img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg" />
+          </q-avatar>
+          Title
+        </q-toolbar-title>
+      </q-toolbar>
+      <q-tabs align="left">
+        <q-route-tab to="/Scratch" label="Scratch" />
+        <q-route-tab to="/Editor" label="Editor" />
+      </q-tabs>
+    </q-header>
+
+    <q-drawer show-if-above v-model="leftDrawerOpen" side="left" bordered>
+      <div class="column" style="height: 100%">
+        <div class="col">variables</div>
+        <div class="col">
+          <q-separator />
+          function
+        </div>
+      </div>
+
+      <!-- drawer content -->
+    </q-drawer>
+
+    <q-page-container id="editor" style="display: flex">
+<!--      <WrapperBox />-->
+
+      <span v-for="statement in statements">
+        <Draggable
+            :grid="[25, 25]"
+        >
+          <Statement
+            :key="statementsKey"
+            :statement="statement"
+            :evaluation="evaluation"
+          />
+        </Draggable>
+      </span>
+
+      <q-dialog v-model="newVariableModalOpen">
+        <VarDeclEditor
+          v-on:save="s => saveNewVariable(s)"
+        />
+      </q-dialog>
+
+      <q-dialog v-model="newExpressionModalOpen">
+        <ExpressionEditor
+          v-on:save="s => saveNewExpression(s)"
+        />
+      </q-dialog>
+
+      <q-page-sticky position="bottom-right" :offset="[32, 32]">
+        <q-fab color="primary" icon="add" direction="left">
+          <q-fab-action
+              color="secondary"
+              label="x"
+              label-style="font-family: serif; font-size: 1.4em; padding: 0"
+              title="Add a variable declaration"
+              @click="() => openNewVariableDeclModal()"
+          />
+          <q-fab-action
+            color="secondary"
+            icon="code"
+            label-style="font-family: serif; font-size: 1.4em; padding: 0"
+            title="Add an expression"
+            @click="() => openNewExpressionModal()"
+          />
+        </q-fab>
+      </q-page-sticky>
+
+      <q-dialog v-model="richEditModal">
+        <q-card>
+          <q-editor v-model="richEditExpression" min-height="5rem" />
+          <q-card-actions align="right" class="text-primary">
+            <q-btn flat label="Cancel" v-close-popup></q-btn>
+            <q-btn flat label="Save" @click="richUpdateValue" v-close-popup></q-btn>
+          </q-card-actions>
+        </q-card>
+      </q-dialog>
+      <span v-for="(item, index) in richTextStatments">
+        <TextBox
+          :statement="item.text"
+          v-on:edit="() => (item.text ? richEditStatement(index) : {})"
+        ></TextBox>
+      </span>
+    </q-page-container>
+
+    <q-footer reveal elevated class="bg-grey-8 text-white">
+      <q-toolbar>
+        <q-toolbar-title>
+          <div>Status</div>
+        </q-toolbar-title>
+      </q-toolbar>
+    </q-footer>
+  </q-layout>
+</template>
+
+<style>
+#editor {
+  background-image: url(../assets/grid.svg);
+  background-repeat: repeat;
+  height: 100%;
+}
+</style>
--- a/src/pages/ExpressionEditor.vue
+++ b/src/pages/ExpressionEditor.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import {defineEmits, ref} from 'vue'
+import {MathStatement} from '../support/parse'
+import Katex from '../components/Katex.vue'
+import { v4 as uuidv4 } from 'uuid'
+import {StatementID} from '../types'
+
+const emit = defineEmits<{
+  (eventName: 'save', statement: MathStatement): void
+}>()
+
+const expressionPreview = ref(MathStatement.temp(''))
+const expressionPreviewKey = ref(uuidv4())
+const expressionError = ref<string|undefined>(undefined)
+const expressionValue = ref<string>('')
+
+const updateExpressionPreview = () => {
+  const previewStmt = MathStatement.temp(expressionValue.value)
+  if ( previewStmt.isValid() ) {
+    expressionPreview.value = MathStatement.temp(expressionValue.value)
+    expressionPreviewKey.value = uuidv4()
+  }
+}
+
+const validateExpression = () => {
+  const stmt = MathStatement.temp(expressionValue.value)
+  if ( !stmt.isValid() ) {
+    return 'The expression is invalid'
+  }
+
+  if ( stmt.defines().length > 0 ) {
+    return 'Expressions cannot declare variables'
+  }
+}
+
+const saveExpression = () => {
+  expressionError.value = validateExpression()
+  if ( expressionError.value ) {
+    return
+  }
+
+  emit('save', new MathStatement(
+      uuidv4() as StatementID,
+      expressionValue.value
+  ))
+}
+</script>
+
+<template>
+  <q-card>
+    <q-card-section>
+      <div style="display: flex; justify-content: center">
+        <Katex
+          :key="expressionPreviewKey"
+          :statement="expressionPreview"
+        />
+      </div>
+    </q-card-section>
+    <q-card-section v-if="expressionError">
+      <div style="color: darkred; font-weight: bold">{{ expressionError }}</div>
+    </q-card-section>
+    <q-card-section>
+      <q-input
+        v-model="expressionValue"
+        v-on:update:model-value="() => updateExpressionPreview()"
+        outlined
+        autogrow
+        type="textarea"
+        autofocus
+        label="Expression"
+      />
+    </q-card-section>
+    <q-card-actions align="right" class="text-primary">
+      <q-btn flat label="Cancel" v-close-popup></q-btn>
+      <q-btn flat label="Save" @click="() => saveExpression()"></q-btn>
+    </q-card-actions>
+  </q-card>
+</template>
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
--- a/src/pages/Scratch.vue
+++ b/src/pages/Scratch.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+  import {MathPage} from '../support/page'
+  import {v4 as uuidv4} from 'uuid'
+  import Statement from '../components/Statement.vue'
+  import {MathStatement} from '../support/parse'
+  import {onMounted, ref} from 'vue'
+  import Katex from '../components/Katex.vue'
+
+  const page = new MathPage(uuidv4())
+  const stmt1Id = page.addRaw('x = y+3/4')
+  const stmt2Id = page.addRaw('y = 9')
+  const evaluation = page.evaluate()
+
+  const stmt = page.getStatement(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()
+    }
+  }
+</script>
+
+<template>
+  <p>Scratch page for testing!</p>
+  <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>
--- a/src/pages/VarDeclEditor.vue
+++ b/src/pages/VarDeclEditor.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import {ref} from 'vue'
+import {MathStatement} from '../support/parse'
+import {v4 as uuidv4} from 'uuid'
+import Katex from '../components/Katex.vue'
+import {StatementID} from '../types'
+
+const emit = defineEmits<{
+  (eventName: 'save', statement: MathStatement): void,
+}>()
+
+const newVariablePreview = ref(MathStatement.temp('? = ?'))
+let newVariablePreviewKey = ref(uuidv4())
+const newVariableModalError = ref<string|undefined>(undefined)
+const newVariableName = ref('')
+const newVariableValue = ref('')
+
+const updateNewVariablePreview = () => {
+  const previewStmt = MathStatement.temp(`${newVariableName.value} = ${newVariableValue.value}`)
+  if ( previewStmt.isValid() ) {
+    newVariablePreview.value = MathStatement.temp(`${newVariableName.value} = ${newVariableValue.value}`)
+    newVariablePreviewKey.value = uuidv4()
+  }
+}
+
+const validateNewVariable = () => {
+  if ( !newVariableName.value ) {
+    return 'Missing variable name'
+  }
+
+  if ( !newVariableValue.value ) {
+    return 'Missing variable value'
+  }
+
+  const stmt = MathStatement.temp(`${newVariableName.value} = ${newVariableValue.value}`)
+  if ( !stmt.isValid() ) {
+    return 'Assignment is invalid'
+  }
+
+  if ( !stmt.isNotRecursive() ) {
+    return 'A variable may not reference itself'
+  }
+}
+
+const saveNewVariable = () => {
+  newVariableModalError.value = validateNewVariable()
+  if ( newVariableModalError.value ) {
+    return
+  }
+
+  emit('save', new MathStatement(
+      uuidv4() as StatementID,
+      `${newVariableName.value} = ${newVariableValue.value}`
+  ))
+}
+</script>
+
+<template>
+  <q-card>
+    <q-card-section>
+      <div style="display: flex; justify-content: center">
+        <Katex
+          :key="newVariablePreviewKey"
+          :statement="newVariablePreview"
+        />
+      </div>
+    </q-card-section>
+    <q-card-section v-if="newVariableModalError">
+      <div style="color: darkred; font-weight: bold">{{ newVariableModalError }}</div>
+    </q-card-section>
+    <q-card-section>
+      <q-input
+        v-model="newVariableName"
+        v-on:update:model-value="() => updateNewVariablePreview()"
+        outlined
+        autofocus
+        label="Variable name"
+      />
+      <br>
+      <q-input
+        v-model="newVariableValue"
+        v-on:update:model-value="() => updateNewVariablePreview()"
+        outlined
+        type="textarea"
+        autogrow
+        label="Value"
+      />
+    </q-card-section>
+    <q-card-actions align="right" class="text-primary">
+      <q-btn flat label="Cancel" v-close-popup></q-btn>
+      <q-btn flat label="Save" @click="() => saveNewVariable()"></q-btn>
+    </q-card-actions>
+  </q-card>
+</template>
--- a/src/quasar-variables.sass
+++ b/src/quasar-variables.sass
@@ -0,0 +1,10 @@
+$primary   : #1976D2
+$secondary : #26A69A
+$accent    : #9C27B0
+
+$dark      : #1D1D1D
+
+$positive  : #21BA45
+$negative  : #C10015
+$info      : #31CCEC
+$warning   : #F2C037
--- a/src/router.ts
+++ b/src/router.ts
@@ -1,5 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import Home from './components/Home.vue'
+import Home from './pages/Login.vue'

 const routes = [
    {
@@ -10,14 +10,14 @@ const routes = [
    {
        path: '/scratch',
        name: 'Scratch',
-        component: () => import(/* webpackChunkName: "scratch" */ './components/Scratch.vue'),
+        component: () => import(/* webpackChunkName: "scratch" */ './pages/Scratch.vue'),
    },
-
    {
        path: '/editor',
        name: 'Editor',
-        component: () => import(/* webpackChunkName: "scratch" */ './components/Editor.vue'),
+        component: () => import(/* webpackChunkName: "Editor" */ './pages/Editor.vue'),
    },
+
 ]

 const router = createRouter({
--- a/src/support/page.ts
+++ b/src/support/page.ts
@@ -16,6 +16,11 @@ export class MathPage {
        public readonly id: string,
    ) {}

+    /** Get all defined statements. */
+    getStatements(): MathStatement[] {
+        return Object.values(this.statements)
+    }
+
    /** Get a statement by ID if it exists. */
    getStatement(id: StatementID): Maybe<MathStatement> {
        return this.statements[id]
--- a/src/support/parse.ts
+++ b/src/support/parse.ts
@@ -300,6 +300,16 @@ export class MathStatement {
        return node
    }

+    /** Returns true if the expression is valid. */
+    isValid(): boolean {
+        try {
+            this.toHTMLString()
+            return true
+        } catch (_) {
+            return false
+        }
+    }
+
    /** Get all symbols referenced in this statement. */
    symbols(): math.SymbolNode[] {
        return (new SymbolWalk()).walk(this.parse())
@@ -314,4 +324,18 @@ export class MathStatement {
    uses(): math.SymbolNode[] {
        return (new RValSymbolWalk()).walk(this.parse())
    }
+
+    /** Returns true if the definition is correctly non-recursive. */
+    isNotRecursive(): boolean {
+        const uses = this.uses()
+        const defines = this.defines()
+
+        for ( const define of defines ) {
+            if ( uses.some(x => x.name === define.name) ) {
+                return false
+            }
+        }
+
+        return true
+    }
 }
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,10 +1,25 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import vuetify from '@vuetify/vite-plugin'
+import { quasar, transformAssetUrls } from '@quasar/vite-plugin'

 // https://vitejs.dev/config/
 export default defineConfig({
-    plugins: [vue(),
-        vuetify({ autoImport: true }), // Enabled by default
-    ],
+    server: {
+        proxy: {
+            '/api': {
+                target: 'http://localhost:8000/',
+            },
+            '/auth': {
+                target: 'http://localhost:8000/',
+            },
+        },
+    },
+    plugins: [
+        vue({
+            template: { transformAssetUrls },
+        }),
+
+        quasar({
+            sassVariables: 'src/quasar-variables.sass',
+        })],
 })
Author	SHA1	Message	Date
garrettmills	567fddfc47	Resolve merge conflicts	2022-04-09 18:07:25 -05:00
garrettmills	4a3e92b910	Implement adding expression and var decls	2022-04-09 17:48:41 -05:00
Thomas	14960831b4	forgot to stage these	2022-04-09 17:31:11 -05:00
Thomas	ad750a8959	rich editing works	2022-04-09 17:31:01 -05:00
Thomas	c94defb193	Merge branch 'main' into rich_text	2022-04-09 16:12:59 -05:00
Thomas	181b7ffbf7	working on the text feild	2022-04-09 16:12:24 -05:00
garrettmills	18252912a9	Fix build	2022-04-09 15:32:45 -05:00
garrettmills	c188487915	Merge branch 'katex'	2022-04-09 15:28:26 -05:00
garrettmills	b47159c4c9	Start implementing editor popup	2022-04-09 15:27:37 -05:00
Thomas	2e5c9e9c5f	Sidbar spacing	2022-04-09 15:08:26 -05:00
Thomas	3adadd4b9d	added Editor layout	2022-04-09 14:54:10 -05:00
Thomas	656ff28f96	resolving conficts	2022-04-09 14:34:23 -05:00
Thomas	8f534c3320	working on dragable wraper	2022-04-09 14:31:27 -05:00
garrettmills	cab432fe29	Appease the linter	2022-04-09 13:21:26 -05:00
Thomas	622a7028aa	Merge branch 'main' into new-ui	2022-04-09 13:06:43 -05:00
Thomas	724466339d	finished rough layout	2022-04-09 13:03:36 -05:00
garrettmills	cc4d659177	Add proxy for api	2022-04-09 13:02:30 -05:00
Thomas	4544aff3c7	added editor	2022-04-09 13:01:01 -05:00
Thomas	9e92c80973	inital Quazar setup	2022-04-09 12:58:31 -05:00