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

idk

Browse Source
This commit is contained in:
Thomas 2022-04-09 19:58:38 -05:00
parent 5bcb05e0f6
commit 30603ac3f6
6 changed files with 128 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/ImageBox.vue Normal file
View 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>

143
src/pages/Editor.vue
View File

@ -1,69 +1,73 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from "vue";
import { v4 as uuidv4 } from 'uuid' import { v4 as uuidv4 } from "uuid";
import WrapperBox from '../components/WrapperBox.vue' import WrapperBox from "../components/WrapperBox.vue";
import {MathPage} from '../support/page' import { MathPage } from "../support/page";
import {MathStatement} from '../support/parse' import { MathStatement } from "../support/parse";
import Katex from '../components/Katex.vue' import Katex from "../components/Katex.vue";
import {EvaluationResult, StatementID} from '../types' import { EvaluationResult, StatementID } from "../types";
import Statement from '../components/Statement.vue' import Statement from "../components/Statement.vue";
import VarDeclEditor from './VarDeclEditor.vue' import VarDeclEditor from "./VarDeclEditor.vue";
import ExpressionEditor from './ExpressionEditor.vue' import ExpressionEditor from "./ExpressionEditor.vue";
import TextBox from '../components/TextBox.vue' import TextBox from "../components/TextBox.vue";
import {RichTextBox} from "../types.ts"; import { RichTextBox } from "../types.ts";
import { stepX, stepY } from "../support/const.ts"; import { stepX, stepY } from "../support/const.ts";
const math = new MathPage(uuidv4()) const math = new MathPage(uuidv4());
const statements = ref<MathStatement[]>([]) const statements = ref<MathStatement[]>([]);
const evaluation = ref<EvaluationResult|undefined>() const evaluation = ref<EvaluationResult | undefined>();
const statementsKey = ref<string>(uuidv4()) const statementsKey = ref<string>(uuidv4());
const leftDrawerOpen = ref(false); const leftDrawerOpen = ref(false);
function toggleLeftDrawer() { function toggleLeftDrawer() {
leftDrawerOpen.value = !leftDrawerOpen.value; leftDrawerOpen.value = !leftDrawerOpen.value;
} }
const newVariableModalOpen = ref(false) const newVariableModalOpen = ref(false);
const openNewVariableDeclModal = () => { const openNewVariableDeclModal = () => {
newVariableModalOpen.value = true newVariableModalOpen.value = true;
} };
const newExpressionModalOpen = ref(false) const newExpressionModalOpen = ref(false);
const openNewExpressionModal = () => { const openNewExpressionModal = () => {
newExpressionModalOpen.value = true newExpressionModalOpen.value = true;
} };
const updateStatements = () => { const updateStatements = () => {
statements.value = math.getStatements() statements.value = math.getStatements();
try { try {
evaluation.value = math.evaluate() evaluation.value = math.evaluate();
} catch (_) { } catch (_) {
evaluation.value = undefined evaluation.value = undefined;
} }
statementsKey.value = uuidv4() statementsKey.value = uuidv4();
} };
const saveNewVariable = (stmt: MathStatement) => { const saveNewVariable = (stmt: MathStatement) => {
math.addStatement(stmt) math.addStatement(stmt);
newVariableModalOpen.value = false newVariableModalOpen.value = false;
updateStatements() updateStatements();
} };
const saveNewExpression = (stmt: MathStatement) => { const saveNewExpression = (stmt: MathStatement) => {
math.addStatement(stmt) math.addStatement(stmt);
newExpressionModalOpen.value = false newExpressionModalOpen.value = false;
updateStatements() updateStatements();
} };
/* /*
Rich Text Stuff Rich Text Stuff
*/ */
const richTextStatements = ref([ const makeNewRichTextBox = () => {
new RichTextBox('newText'), richTextStatements.value.push(new RichTextBox(""));
new RichTextBox('newText', 0,100) 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 richEditModal = ref(false);
const richEditExpression = ref(""); const richEditExpression = ref("");
@ -79,6 +83,9 @@ const richEditStatement = (id: number) => {
function richUpdateValue() { function richUpdateValue() {
richTextStatements.value[richEditID.value].text = richEditExpression.value; richTextStatements.value[richEditID.value].text = richEditExpression.value;
} }
const removeRichTextBox = (id: number) => {
richTextStatements.value.splice(id, 1);
};
</script> </script>
<template> <template>
@ -112,52 +119,50 @@ function richUpdateValue() {
<!-- drawer content --> <!-- drawer content -->
</q-drawer> </q-drawer>
<q-page-container id="editor" > <q-page-container id="editor">
<!-- <WrapperBox />--> <!-- <WrapperBox />-->
<span v-for="statement in statements" style="display: flex"> <span v-for="statement in statements" style="display: flex">
<Draggable <Draggable :grid="[stepX, stepY]">
:grid="[stepX, stepY]" <div>
> <Statement
<div> :key="statementsKey"
<Statement :statement="statement"
:key="statementsKey" :evaluation="evaluation"
:statement="statement" />
:evaluation="evaluation" </div>
/>
</div>
</Draggable> </Draggable>
</span> </span>
<q-dialog v-model="newVariableModalOpen"> <q-dialog v-model="newVariableModalOpen">
<VarDeclEditor <VarDeclEditor v-on:save="(s) => saveNewVariable(s)" />
v-on:save="s => saveNewVariable(s)"
/>
</q-dialog> </q-dialog>
<q-dialog v-model="newExpressionModalOpen"> <q-dialog v-model="newExpressionModalOpen">
<ExpressionEditor <ExpressionEditor v-on:save="(s) => saveNewExpression(s)" />
v-on:save="s => saveNewExpression(s)"
/>
</q-dialog> </q-dialog>
<q-page-sticky position="bottom-right" :offset="[32, 32]"> <q-page-sticky position="bottom-right" :offset="[32, 32]">
<q-fab color="primary" icon="add" direction="left"> <q-fab color="primary" icon="add" direction="left">
<q-fab-action <q-fab-action
color="secondary" color="secondary"
label="x" label="x"
label-style="font-family: serif; font-size: 1.4em; padding: 0" label-style="font-family: serif; font-size: 1.4rem; padding: 0"
title="Add a variable declaration" title="Add a variable declaration"
@click="() => openNewVariableDeclModal()" @click="() => openNewVariableDeclModal()"
/> />
<q-fab-action <q-fab-action
color="secondary" color="secondary"
icon="code" icon="code"
label-style="font-family: serif; font-size: 1.4em; padding: 0"
title="Add an expression" title="Add an expression"
@click="() => openNewExpressionModal()" @click="() => openNewExpressionModal()"
/> />
<q-fab-action
color="secondary"
icon="text"
title="Add a Text Box"
@click="() => makeNewRichTextBox()"
/>
</q-fab> </q-fab>
</q-page-sticky> </q-page-sticky>
@ -166,16 +171,22 @@ function richUpdateValue() {
<q-editor v-model="richEditExpression" min-height="5rem" /> <q-editor v-model="richEditExpression" min-height="5rem" />
<q-card-actions align="right" class="text-primary"> <q-card-actions align="right" class="text-primary">
<q-btn flat label="Cancel" v-close-popup></q-btn> <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-actions>
</q-card> </q-card>
</q-dialog> </q-dialog>
<div v-for="(item, index) in richTextStatements" style="display: flex"> <div v-for="(item, index) in richTextStatements" style="display: flex">
<TextBox <TextBox
:value="item" :value="item"
v-on:edit="() => (item.text ? richEditStatement(index) : {})" v-on:edit="() => (item.text ? richEditStatement(index) : {})"
v-on:remove="() => removeRichTextBox(index)"
/> />
</div> </div>
</q-page-container> </q-page-container>

2
src/pages/RichTextEditor.vue Normal file
View File

@ -0,0 +1,2 @@

2
src/support/page.ts
View File

@ -2,7 +2,7 @@ import {MathStatement} from './parse'
import * as math from 'mathjs' import * as math from 'mathjs'
import {DepGraph} from 'dependency-graph' import {DepGraph} from 'dependency-graph'
import { v4 as uuidv4 } from 'uuid' 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. * Wrapper for a page containing multiple interrelated mathematical statements.

2
src/support/parse.ts
View File

@ -1,6 +1,6 @@
import * as math from 'mathjs' import * as math from 'mathjs'
import katex from 'katex' import katex from 'katex'
import {HTMLString, LaTeXString, StatementID} from '../types' import {HTMLString, LaTeXString, StatementID} from './types'
import {v4 as uuidv4} from 'uuid' import {v4 as uuidv4} from 'uuid'
/** Base class for walks over MathNode trees. */ /** Base class for walks over MathNode trees. */

0
src/types.ts → src/support/types.ts
View File