diff --git a/package.json b/package.json
index 5e35781..97a4e4e 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
"@types/katex": "^0.14.0",
"@types/uuid": "^8.3.4",
"@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",
@@ -28,6 +29,7 @@
"quasar": "^2.6.6",
"uuid": "^8.3.2",
"vue": "^3.2.25",
+ "vue-chart-3": "^3.1.8",
"vue-router": "^4.0.14",
"vuetify": "3.0.0-beta.0"
},
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 992a4ae..ca6e784 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,6 +12,7 @@ specifiers:
'@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
@@ -23,6 +24,7 @@ specifiers:
uuid: ^8.3.2
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
@@ -33,6 +35,7 @@ dependencies:
'@types/katex': 0.14.0
'@types/uuid': 8.3.4
'@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
@@ -40,6 +43,7 @@ dependencies:
quasar: 2.6.6
uuid: 8.3.2
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
@@ -1069,6 +1073,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 +1222,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 +2459,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
@@ -3907,6 +3923,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'}
diff --git a/src/components/FunctionEditor.vue b/src/components/FunctionEditor.vue
new file mode 100644
index 0000000..b993f0a
--- /dev/null
+++ b/src/components/FunctionEditor.vue
@@ -0,0 +1,97 @@
+
+
+
+
+
+
+
+
+
+
+ {{ functionError }}
+
+
+
+
+
+
+ saveFunction()">
+
+
+
diff --git a/src/pages/Editor.vue b/src/pages/Editor.vue
index 620f874..f56f229 100644
--- a/src/pages/Editor.vue
+++ b/src/pages/Editor.vue
@@ -10,6 +10,7 @@ import ExpressionEditor from './ExpressionEditor.vue'
import TextBox from '../components/TextBox.vue'
import {RichTextBox} from '../support/types'
import { stepX, stepY } from '../support/const'
+import FunctionEditor from '../components/FunctionEditor.vue'
const math = new MathPage(uuidv4());
const statements = ref([]);
@@ -33,20 +34,35 @@ const variableListingColumns = [
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()
const editExpressionModalOpen = ref(false)
const openEditExpressionModal = () => {
@@ -58,6 +74,11 @@ const openEditVarDeclModal = () => {
editVarDeclModalOpen.value = true
}
+const editFunctionModalOpen = ref(false)
+const openEditFunctionModal = () => {
+ editFunctionModalOpen.value = true
+}
+
const updateStatements = () => {
statements.value = math.getStatements();
try {
@@ -71,7 +92,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({
@@ -81,32 +103,51 @@ const updateStatements = () => {
}
variableListingRows.value = variableValues
+
+ 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(),
+ })
+ }
+
+ functionListingRows.value = functionValues
} catch (_) {
- evaluation.value = undefined;
+ console.error(_)
+ evaluation.value = undefined
}
- statementsKey.value = uuidv4();
+ 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 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()
}
@@ -119,6 +160,8 @@ const removeStatement = (stmt: MathStatement) => {
const finishEditStatement = () => {
editExpressionModalOpen.value = false
+ editVarDeclModalOpen.value = false
+ editFunctionModalOpen.value = false
updateStatements()
}
@@ -134,7 +177,7 @@ const makeNewRichTextBox = () => {
console.log("editing statement",richEditID.value, richEditModal);
};
-const richTextStatements = ref([new RichTextBox("Hello World")]);
+const richTextStatements = ref([]);
const richEditModal = ref(false);
const richEditExpression = ref("");
@@ -205,17 +248,17 @@ const removeRichTextBox = (id: number) => {
-
- {{ props.row.name }}
-
@@ -269,6 +312,19 @@ const removeRichTextBox = (id: number) => {
/>
+
+
+
+
+
+
+
+
{
@click="() => openNewVariableDeclModal()"
/>
openNewExpressionModal()"
+ color="secondary"
+ icon="code"
+ title="Add an expression"
+ @click="() => openNewExpressionModal()"
+ />
+ openNewFunctionModal()"
/>
makeNewRichTextBox()"
/>
diff --git a/src/pages/ExpressionEditor.vue b/src/pages/ExpressionEditor.vue
index 77efc7c..ec32278 100644
--- a/src/pages/ExpressionEditor.vue
+++ b/src/pages/ExpressionEditor.vue
@@ -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'
}
}
diff --git a/src/pages/VarDeclEditor.vue b/src/pages/VarDeclEditor.vue
index 79b323e..2c6f8d7 100644
--- a/src/pages/VarDeclEditor.vue
+++ b/src/pages/VarDeclEditor.vue
@@ -1,4 +1,5 @@