Merge incoming changes
This commit is contained in:
commit
73010a2a4a
@ -1,11 +1,12 @@
|
||||
<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"/>
|
||||
<!-- <path d="M 25 0 L 0 0 0 25" fill="none" stroke="gray" stroke-width="0.5"/> -->
|
||||
<circle cx="0.5" cy=".5" r=".25" stroke="gray" fill="transparent" stroke-width="1"/>
|
||||
</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"/>
|
||||
<path d="M 250 0 L 0 0 0 250" fill="none" stroke="gray" stroke-width="2"/>
|
||||
</pattern>
|
||||
</defs>
|
||||
|
||||
|
Before Width: | Height: | Size: 571 B After Width: | Height: | Size: 673 B |
43
src/components/ImageBox.vue
Normal file
43
src/components/ImageBox.vue
Normal file
@ -0,0 +1,43 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { RichTextBox } from "../support/types";
|
||||
import { stepX, stepY } from "../support/const";
|
||||
const props = defineProps<{value: 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>
|
@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import {EvaluationResult, Maybe} from '../types'
|
||||
import {EvaluationResult, Maybe} from '../support/types'
|
||||
import {MathStatement} from '../support/parse'
|
||||
import {computed} from 'vue'
|
||||
import Katex from './Katex.vue'
|
||||
|
@ -1,12 +1,9 @@
|
||||
<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,
|
||||
},
|
||||
});
|
||||
import { RichTextBox } from "../support/types";
|
||||
import { stepX, stepY } from "../support/const";
|
||||
const props = defineProps<{value: RichTextBox}>();
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
@ -3,18 +3,18 @@ import {onMounted, ref} from 'vue'
|
||||
import { v4 as uuidv4 } from 'uuid'
|
||||
import {MathPage} from '../support/page'
|
||||
import {MathStatement} from '../support/parse'
|
||||
import {EvaluationResult, hasOwnProperty} from '../types'
|
||||
import {EvaluationResult, hasOwnProperty} 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 '../types'
|
||||
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 math = new MathPage(uuidv4());
|
||||
const statements = ref<MathStatement[]>([]);
|
||||
const evaluation = ref<EvaluationResult | undefined>();
|
||||
const statementsKey = ref<string>(uuidv4());
|
||||
const leftDrawerOpen = ref(false);
|
||||
|
||||
const variableListingColumns = [
|
||||
@ -37,15 +37,15 @@ function toggleLeftDrawer() {
|
||||
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 editingStatement = ref<MathStatement|undefined>()
|
||||
const editExpressionModalOpen = ref(false)
|
||||
@ -59,7 +59,7 @@ const openEditVarDeclModal = () => {
|
||||
}
|
||||
|
||||
const updateStatements = () => {
|
||||
statements.value = math.getStatements()
|
||||
statements.value = math.getStatements();
|
||||
try {
|
||||
evaluation.value = math.evaluate()
|
||||
const variableValues: ({name: string, value: string})[] = []
|
||||
@ -82,24 +82,24 @@ const updateStatements = () => {
|
||||
|
||||
variableListingRows.value = variableValues
|
||||
} catch (_) {
|
||||
evaluation.value = undefined
|
||||
}
|
||||
statementsKey.value = uuidv4()
|
||||
evaluation.value = undefined;
|
||||
}
|
||||
statementsKey.value = uuidv4();
|
||||
};
|
||||
|
||||
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 editStatement = (stmt: MathStatement) => {
|
||||
editingStatement.value = stmt
|
||||
@ -126,11 +126,15 @@ const finishEditStatement = () => {
|
||||
Rich Text Stuff
|
||||
*/
|
||||
|
||||
const richTextStatements = ref([
|
||||
new RichTextBox('newText'),
|
||||
new RichTextBox('newText', 0,100)
|
||||
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",richEditID.value, richEditModal);
|
||||
};
|
||||
|
||||
]);
|
||||
const richTextStatements = ref([new RichTextBox("Hello World")]);
|
||||
|
||||
const richEditModal = ref(false);
|
||||
const richEditExpression = ref("");
|
||||
@ -146,7 +150,9 @@ const richEditStatement = (id: number) => {
|
||||
function richUpdateValue() {
|
||||
richTextStatements.value[richEditID.value].text = richEditExpression.value;
|
||||
}
|
||||
|
||||
const removeRichTextBox = (id: number) => {
|
||||
richTextStatements.value.splice(id, 1);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -238,20 +244,15 @@ function richUpdateValue() {
|
||||
v-on:remove="() => removeStatement(statement)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</Draggable>
|
||||
</span>
|
||||
|
||||
<q-dialog v-model="newVariableModalOpen">
|
||||
<VarDeclEditor
|
||||
v-on:save="s => saveNewVariable(s)"
|
||||
/>
|
||||
<VarDeclEditor v-on:save="(s) => saveNewVariable(s)" />
|
||||
</q-dialog>
|
||||
|
||||
<q-dialog v-model="newExpressionModalOpen">
|
||||
<ExpressionEditor
|
||||
v-on:save="s => saveNewExpression(s)"
|
||||
/>
|
||||
<ExpressionEditor v-on:save="(s) => saveNewExpression(s)" />
|
||||
</q-dialog>
|
||||
|
||||
<q-dialog v-model="editExpressionModalOpen">
|
||||
@ -273,17 +274,22 @@ function richUpdateValue() {
|
||||
<q-fab-action
|
||||
color="secondary"
|
||||
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"
|
||||
@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-action
|
||||
color="secondary"
|
||||
icon="text"
|
||||
title="Add a Text Box"
|
||||
@click="() => makeNewRichTextBox()"
|
||||
/>
|
||||
</q-fab>
|
||||
</q-page-sticky>
|
||||
|
||||
@ -292,16 +298,22 @@ function richUpdateValue() {
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</q-page-container>
|
||||
|
||||
|
@ -3,7 +3,7 @@ import {defineEmits, onMounted, ref} from 'vue'
|
||||
import {MathStatement} from '../support/parse'
|
||||
import Katex from '../components/Katex.vue'
|
||||
import { v4 as uuidv4 } from 'uuid'
|
||||
import {StatementID} from '../types'
|
||||
import {StatementID} from '../support/types'
|
||||
|
||||
const props = defineProps<{
|
||||
statement?: MathStatement,
|
||||
|
2
src/pages/RichTextEditor.vue
Normal file
2
src/pages/RichTextEditor.vue
Normal file
@ -0,0 +1,2 @@
|
||||
|
||||
|
@ -3,7 +3,7 @@ import {onMounted, ref} from 'vue'
|
||||
import {MathStatement} from '../support/parse'
|
||||
import {v4 as uuidv4} from 'uuid'
|
||||
import Katex from '../components/Katex.vue'
|
||||
import {StatementID} from '../types'
|
||||
import {StatementID} from '../support/types'
|
||||
|
||||
const props = defineProps<{
|
||||
statement?: MathStatement,
|
||||
|
@ -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.
|
||||
|
@ -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. */
|
||||
|
@ -96,9 +96,18 @@ export interface EvaluationResult {
|
||||
export class RichTextBox {
|
||||
constructor(
|
||||
public text: string = '',
|
||||
public x: Number = 0,
|
||||
public y: Number = 0,
|
||||
) {
|
||||
public x: number = 0,
|
||||
public y: number = 0,
|
||||
) {}
|
||||
}
|
||||
|
||||
|
||||
export class ImageBox {
|
||||
constructor(
|
||||
public text: string = '',
|
||||
public x: number = 0,
|
||||
public y: number = 0,
|
||||
) {}
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user