Merge branch 'main' into qi
This commit is contained in:
commit
faa8e21594
@ -25,10 +25,11 @@ import { ref } from "vue";
|
||||
<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>
|
||||
<q-page-container style="display: flex;padding-top: 20px;">
|
||||
<router-view />
|
||||
</q-page-container>
|
||||
</q-layout>
|
||||
|
||||
13
src/assets/grid.svg
Normal file
13
src/assets/grid.svg
Normal file
@ -0,0 +1,13 @@
|
||||
<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"/>
|
||||
</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="gray" stroke-width="1"/>
|
||||
</pattern>
|
||||
</defs>
|
||||
|
||||
<rect width="100%" height="100%" fill="url(#grid)" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 571 B |
47
src/components/ImageBox.vue
Normal file
47
src/components/ImageBox.vue
Normal file
@ -0,0 +1,47 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { RichTextBox } from "../types.ts";
|
||||
import { stepX, stepY } from "../support/const.ts";
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: RichTextBox,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Draggable
|
||||
:grid="[stepX, stepY]"
|
||||
:default-position="{ x: props.value.x, y: props.value.y }"
|
||||
>
|
||||
<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')"
|
||||
>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>
|
||||
@ -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>
|
||||
|
||||
|
||||
0
src/components/RichTextModal.vue
Normal file
0
src/components/RichTextModal.vue
Normal file
@ -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>
|
||||
|
||||
47
src/components/TextBox.vue
Normal file
47
src/components/TextBox.vue
Normal file
@ -0,0 +1,47 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { RichTextBox } from "../types.ts";
|
||||
import { stepX, stepY } from "../support/const.ts";
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: RichTextBox,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Draggable
|
||||
:grid="[stepX, stepY]"
|
||||
:default-position="{ x: props.value.x, y: props.value.y }"
|
||||
>
|
||||
<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')"
|
||||
>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>
|
||||
27
src/components/WrapperBox.vue
Normal file
27
src/components/WrapperBox.vue
Normal file
@ -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>
|
||||
@ -1,19 +1,288 @@
|
||||
<script setup lang="ts">
|
||||
import {onMounted, 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, hasOwnProperty, StatementID} from '../support/types'
|
||||
import Statement from '../components/Statement.vue'
|
||||
import VarDeclEditor from './VarDeclEditor.vue'
|
||||
import ExpressionEditor from './ExpressionEditor.vue'
|
||||
import TextBox from '../components/TextBox.vue'
|
||||
import {RichTextBox} from "../support/types";
|
||||
import { stepX, stepY } from "../support/const";
|
||||
|
||||
const math = new MathPage(uuidv4());
|
||||
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 variableListingRows = 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 updateStatements = () => {
|
||||
statements.value = math.getStatements();
|
||||
try {
|
||||
evaluation.value = math.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 {
|
||||
value = MathStatement.temp(value).toHTMLString()
|
||||
} catch (_) {}
|
||||
|
||||
variableValues.push({
|
||||
name,
|
||||
value,
|
||||
})
|
||||
}
|
||||
|
||||
variableListingRows.value = variableValues
|
||||
} catch (_) {
|
||||
evaluation.value = undefined;
|
||||
}
|
||||
statementsKey.value = uuidv4();
|
||||
};
|
||||
|
||||
onMounted(updateStatements)
|
||||
|
||||
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 makeNewRichTextBox = () => {
|
||||
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", id, richEditModal);
|
||||
};
|
||||
|
||||
const richTextStatements = ref([]);
|
||||
|
||||
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 = richTextStatements.value[richEditID.value].text;
|
||||
};
|
||||
|
||||
function richUpdateValue() {
|
||||
richTextStatements.value[richEditID.value].text = richEditExpression.value;
|
||||
}
|
||||
const removeRichTextBox = (id: number) => {
|
||||
richTextStatements.value.splice(id, 1);
|
||||
};
|
||||
</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>
|
||||
<div class="box">
|
||||
<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-btn
|
||||
@click="showNotification"
|
||||
color="primary"
|
||||
label="Show another notification"
|
||||
<q-drawer show-if-above v-model="leftDrawerOpen" side="left" bordered>
|
||||
<div class="column" style="height: 100%">
|
||||
<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"
|
||||
row-key="name"
|
||||
hide-no-data
|
||||
hide-bottom
|
||||
: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>
|
||||
</q-tr>
|
||||
</template>
|
||||
</q-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- drawer content -->
|
||||
</q-drawer>
|
||||
|
||||
<q-page-container id="editor">
|
||||
<!-- <WrapperBox />-->
|
||||
|
||||
<span v-for="statement in statements" style="display: flex">
|
||||
<Draggable :grid="[stepX, stepY]">
|
||||
<div>
|
||||
<Statement
|
||||
:key="statementsKey"
|
||||
:statement="statement"
|
||||
:evaluation="evaluation"
|
||||
/>
|
||||
</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-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="text"
|
||||
title="Add a Text Box"
|
||||
@click="() => makeNewRichTextBox()"
|
||||
/>
|
||||
</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)"
|
||||
/>
|
||||
</div>
|
||||
</Draggable>
|
||||
</div>
|
||||
</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></style>
|
||||
<style>
|
||||
#editor {
|
||||
background-image: url(../assets/grid.svg);
|
||||
background-repeat: repeat;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
78
src/pages/ExpressionEditor.vue
Normal file
78
src/pages/ExpressionEditor.vue
Normal file
@ -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>
|
||||
2
src/pages/RichTextEditor.vue
Normal file
2
src/pages/RichTextEditor.vue
Normal file
@ -0,0 +1,2 @@
|
||||
|
||||
|
||||
@ -3,6 +3,8 @@
|
||||
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')
|
||||
@ -12,10 +14,59 @@
|
||||
const stmt = page.getStatement(stmt1Id)
|
||||
console.log({page, stmt1Id})
|
||||
|
||||
const onEdit = (stmt: MathStatement) => () => console.log('edit', stmt)
|
||||
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>
|
||||
<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>
|
||||
|
||||
94
src/pages/VarDeclEditor.vue
Normal file
94
src/pages/VarDeclEditor.vue
Normal file
@ -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>
|
||||
@ -15,8 +15,9 @@ const routes = [
|
||||
{
|
||||
path: '/editor',
|
||||
name: 'Editor',
|
||||
component: () => import('./pages/Editor.vue'),
|
||||
component: () => import(/* webpackChunkName: "Editor" */ './pages/Editor.vue'),
|
||||
},
|
||||
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
|
||||
2
src/support/const.ts
Normal file
2
src/support/const.ts
Normal file
@ -0,0 +1,2 @@
|
||||
export const stepX = 5
|
||||
export const stepY = 5
|
||||
@ -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, Maybe, StatementID, VariableName} from './types'
|
||||
|
||||
/**
|
||||
* Wrapper for a page containing multiple interrelated mathematical statements.
|
||||
@ -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]
|
||||
|
||||
@ -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. */
|
||||
@ -269,6 +269,9 @@ export class MathStatement {
|
||||
|
||||
/** The raw statement input by the user. */
|
||||
public readonly raw: string,
|
||||
|
||||
public x: Number = 0,
|
||||
public y: Number = 0,
|
||||
) {}
|
||||
|
||||
/** Parse the raw statement to an AST. */
|
||||
@ -300,6 +303,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 +327,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
|
||||
}
|
||||
}
|
||||
|
||||
@ -91,3 +91,14 @@ export interface EvaluationResult {
|
||||
variables: Record<VariableName, any>
|
||||
statements: Record<StatementID, any>
|
||||
}
|
||||
|
||||
|
||||
export class RichTextBox {
|
||||
constructor(
|
||||
public text: string = '',
|
||||
public x: Number = 0,
|
||||
public y: Number = 0,
|
||||
) {
|
||||
|
||||
}
|
||||
}
|
||||
@ -9,6 +9,9 @@ export default defineConfig({
|
||||
'/api': {
|
||||
target: 'http://localhost:8000/',
|
||||
},
|
||||
'/auth': {
|
||||
target: 'http://localhost:8000/',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
@ -18,6 +21,5 @@ export default defineConfig({
|
||||
|
||||
quasar({
|
||||
sassVariables: 'src/quasar-variables.sass',
|
||||
}),
|
||||
],
|
||||
})],
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user