CrystalMath/ui
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'main' of https://github.com/hackku22/Mathy

Browse Source
This commit is contained in:
Thomas 2022-04-10 00:50:05 -05:00
commit b21594367f
16 changed files with 604 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -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"
},

43
pnpm-lock.yaml
View File

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

57
src/App.vue
View File

@ -1,14 +1,54 @@
<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";
(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: '/'})
}
</script>
<template>
@ -25,10 +65,10 @@ import { ref } from "vue";
</q-toolbar-title>
</q-toolbar>
<q-tabs align="left">
<q-tabs>
<q-route-tab to="/Scratch" label="Scratch" />
<q-route-tab to="/Editor" label="Editor" />
<q-tab v-if="status" @click="logout()" label="Logout" />
</q-tabs>
</q-header>
@ -39,12 +79,17 @@ import { ref } from "vue";
</template>
<style>
body {
margin-top: 0px;
height: 100%;
background: #1e2361;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
color: #4484c4;
margin-top: 60px;
}
</style>

97
src/components/FunctionEditor.vue Normal file
View File

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

126
src/components/Login.vue Normal file
View File

@ -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: '/Editor'})
}
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: '/Editor'})
}
onMounted(() => {
if ( checkLoggedIn() ) {
router.push({ path: '/Editor'})
}
})
</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 reigistered?' }}
<a
href="#"
@click="isRegistration = !isRegistration; checkForm()"
>{{ isRegistration ? 'Login' : 'Created an Account' }}</a>
</p>
</q-card-section>
</template>
<style>
.error {
color: red;
}
</style>

13
src/main.ts
View File

@ -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/fadeOut.css
import '@quasar/extras/animate/fadeInUp.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'
@ -50,14 +49,6 @@ app.use(Quasar, {
plugins: {}, // import Quasar plugins and add here
})
app.use(
createAuth0({
domain: 'dev-ge84r-eu.us.auth0.com',
client_id: 'zHjZGg1uPws0DkQg5bRdKcDX8m6AuTZl', // eslint-disable-line camelcase
redirect_uri: window.location.origin, // eslint-disable-line camelcase
}),
)
app.use(router)
app.use(DraggablePlugin)

168
src/pages/Editor.vue
View File

@ -8,9 +8,12 @@ import Statement from '../components/Statement.vue'
import VarDeclEditor from './VarDeclEditor.vue'
import ExpressionEditor from './ExpressionEditor.vue'
import TextBox from '../components/TextBox.vue'
import FunctionEditor from '../components/FunctionEditor.vue'
import { RichTextBox } from '../support/types'
import { stepX, stepY } from '../support/const'
import { cos } from 'mathjs'
import { checkLoggedIn, loggedOut } from '../support/auth'
import router from '../router'
const math = new MathPage(uuidv4());
const statements = ref<MathStatement[]>([]);
@ -43,20 +46,35 @@ const stmOnControlledDragStop = (stmt: MathStatement) => (e: {event: MouseEvent,
const variableListingRows = ref<({ name: string, value: string })[]>([])
const functionListingColumns = [
{
name: 'value',
field: 'value',
label: 'Function',
},
]
const functionListingRows = ref<({ name: string, value: string })[]>([])
function toggleLeftDrawer() {
leftDrawerOpen.value = !leftDrawerOpen.value;
leftDrawerOpen.value = !leftDrawerOpen.value
}
const newVariableModalOpen = ref(false);
const newVariableModalOpen = ref(false)
const openNewVariableDeclModal = () => {
newVariableModalOpen.value = true;
newVariableModalOpen.value = true
};
const newExpressionModalOpen = ref(false);
const newExpressionModalOpen = ref(false)
const openNewExpressionModal = () => {
newExpressionModalOpen.value = true;
newExpressionModalOpen.value = true
};
const newFunctionModalOpen = ref(false)
const openNewFunctionModal = () => {
newFunctionModalOpen.value = true
}
const editingStatement = ref<MathStatement | undefined>()
const editExpressionModalOpen = ref(false)
const openEditExpressionModal = () => {
@ -68,6 +86,11 @@ const openEditVarDeclModal = () => {
editVarDeclModalOpen.value = true
}
const editFunctionModalOpen = ref(false)
const openEditFunctionModal = () => {
editFunctionModalOpen.value = true
}
const updateStatements = () => {
statements.value = math.getStatements();
try {
@ -81,7 +104,8 @@ const updateStatements = () => {
let value = String(evaluation.value!.variables[name] ?? '')
try {
value = MathStatement.temp(value).toHTMLString()
const stmt = MathStatement.temp(value)
value = stmt.toHTMLString()
} catch (_) { }
variableValues.push({
@ -91,32 +115,53 @@ const updateStatements = () => {
}
variableListingRows.value = variableValues
} catch (_) {
evaluation.value = undefined;
const functionValues: ({ name: string, value: string })[] = []
for (const stmt of math.functions()) {
const node = stmt.parse() as math.FunctionAssignmentNode
functionValues.push({
name: node.name,
value: stmt.toHTMLString(),
})
}
statementsKey.value = uuidv4();
functionListingRows.value = functionValues
} catch (_) {
console.error(_)
evaluation.value = undefined
}
statementsKey.value = uuidv4()
};
onMounted(updateStatements)
onMounted(() => {
updateStatements()
})
const saveNewVariable = (stmt: MathStatement) => {
math.addStatement(stmt);
newVariableModalOpen.value = false;
updateStatements();
math.addStatement(stmt)
newVariableModalOpen.value = false
updateStatements()
};
const saveNewExpression = (stmt: MathStatement) => {
math.addStatement(stmt);
newExpressionModalOpen.value = false;
updateStatements();
math.addStatement(stmt)
newExpressionModalOpen.value = false
updateStatements()
};
const saveNewFunction = (stmt: MathStatement) => {
math.addStatement(stmt)
newFunctionModalOpen.value = false
updateStatements()
}
const editStatement = (stmt: MathStatement) => {
editingStatement.value = stmt
if ( stmt.isDeclaration() ) {
console.log('editStatement', stmt)
if (stmt.isFunctionDeclaration()) {
openEditFunctionModal()
} else if (stmt.isDeclaration()) {
openEditVarDeclModal()
} else if ( stmt.isFunctionDeclaration() ) {
} else {
openEditExpressionModal()
}
@ -129,6 +174,8 @@ const removeStatement = (stmt: MathStatement) => {
const finishEditStatement = () => {
editExpressionModalOpen.value = false
editVarDeclModalOpen.value = false
editFunctionModalOpen.value = false
updateStatements()
}
@ -137,28 +184,25 @@ const finishEditStatement = () => {
*/
const makeNewRichTextBox = () => {
richTextStatements.value.push(new RichTextBox(""));
richTextStatements.value.push(new RichTextBox(''));
richEditID.value = richTextStatements.value.length - 1;
richEditExpression.value = richTextStatements.value[richEditID.value].text;
richEditModal.value = true;
console.log("editing statement",richEditID.value, richEditModal);
};
const richTextStatements = ref([new RichTextBox("Hello World")]);
const richTextStatements = ref<RichTextBox[]>([]);
const richEditModal = ref(false);
const richEditExpression = ref("");
const richEditID = ref(0);
const richEditStatement = (id: number) => {
console.log("editing Text", id, richEditModal);
richEditModal.value = true;
richEditID.value = id;
richEditExpression.value = richTextStatements.value[richEditID.value].text;
};
const moveRichTextBox = (id: number, x: number, y: number) => {
console.log("Moving Text", id, x,y);
richEditID.value = id;
richTextStatements.value[richEditID.value].x = x;
richTextStatements.value[richEditID.value].y = y;
@ -173,6 +217,31 @@ const removeRichTextBox = (id: number) => {
console.log(richTextStatements.value[id]);
richTextStatements.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: '/' })
}
})
</script>
<template>
@ -184,13 +253,13 @@ const removeRichTextBox = (id: number) => {
<q-toolbar-title>
<q-avatar>
<img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg" />
</q-avatar>
Title
</q-avatar>Title
</q-toolbar-title>
</q-toolbar>
<q-tabs align="left">
<q-tabs>
<q-route-tab to="/Scratch" label="Scratch" />
<q-route-tab to="/Editor" label="Editor" />
<q-tab v-if="status" @click="logout()" label="Logout" />
</q-tabs>
</q-header>
@ -210,9 +279,7 @@ const removeRichTextBox = (id: number) => {
>
<template v-slot:body="props">
<q-tr :props="props">
<q-td key="name" :props="props">
{{ props.row.name }}
</q-td>
<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>
@ -225,17 +292,17 @@ const removeRichTextBox = (id: number) => {
<q-table
flat
title="Functions"
:rows="functionListingRows"
:columns="functionListingColumns"
row-key="name"
hide-no-data
hide-bottom
hide-header
:pagination="{ rowsPerPage: 10000 }"
style="height: 100%; border-top: 1px solid lightgrey; border-radius: 0"
>
<template v-slot:body="props">
<q-tr :props="props">
<q-td key="name" :props="props">
{{ props.row.name }}
</q-td>
<q-td key="value" :props="props">
<div v-html="props.row.value"></div>
</q-td>
@ -279,17 +346,19 @@ const removeRichTextBox = (id: number) => {
</q-dialog>
<q-dialog v-model="editExpressionModalOpen">
<ExpressionEditor
:statement="editingStatement"
v-on:save="() => finishEditStatement()"
/>
<ExpressionEditor :statement="editingStatement" v-on:save="() => finishEditStatement()" />
</q-dialog>
<q-dialog v-model="editVarDeclModalOpen">
<VarDeclEditor
:statement="editingStatement"
v-on:save="() => finishEditStatement()"
/>
<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-page-sticky position="bottom-right" :offset="[32, 32]">
@ -307,10 +376,16 @@ const removeRichTextBox = (id: number) => {
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="text"
title="Add a Text Box"
title="Add a text box"
@click="() => makeNewRichTextBox()"
/>
</q-fab>
@ -321,12 +396,7 @@ const removeRichTextBox = (id: number) => {
<q-editor v-model="richEditExpression" min-height="5rem" />
<q-card-actions align="right" class="text-primary">
<q-btn flat label="Cancel" v-close-popup></q-btn>
<q-btn
flat
label="Save"
@click="richUpdateValue"
v-close-popup
></q-btn>
<q-btn flat label="Save" @click="richUpdateValue" v-close-popup></q-btn>
</q-card-actions>
</q-card>
</q-dialog>

4
src/pages/ExpressionEditor.vue
View File

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

46
src/pages/Home.vue Normal file
View File

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

33
src/pages/Login.vue
View File

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

3
src/pages/Scratch.vue
View File

@ -5,6 +5,8 @@
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 stmt1Id = page.addRaw('x = y+3/4')
@ -35,6 +37,7 @@
key.value = uuidv4()
}
}
</script>
<template>

5
src/pages/VarDeclEditor.vue
View File

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

2
src/router.ts
View File

@ -1,5 +1,5 @@
import { createRouter, createWebHistory } from 'vue-router'
import Home from './pages/Login.vue'
import Home from './pages/Home.vue'
const routes = [
{

10
src/support/auth.ts Normal file
View File

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

48
src/support/page.ts
View File

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

3
src/support/parse.ts
View File

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