You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
146 lines
3.9 KiB
146 lines
3.9 KiB
<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'
|
|
|
|
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()
|
|
}
|
|
|
|
</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>
|
|
<!-- <WrapperBox />-->
|
|
|
|
<Draggable
|
|
v-for="statement in statements"
|
|
:grid="[25, 25]"
|
|
>
|
|
<Statement
|
|
:key="statementsKey"
|
|
:statement="statement"
|
|
:evaluation="evaluation"
|
|
/>
|
|
</Draggable>
|
|
|
|
<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-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>
|