parent
6428db667d
commit
51266861f8
@ -0,0 +1,29 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import {HTMLString} from '../types'
|
||||||
|
import {computed} from 'vue'
|
||||||
|
import {MathStatement} from '../support/parse'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
statement: MathStatement,
|
||||||
|
size?: 'big' | 'small',
|
||||||
|
}>()
|
||||||
|
|
||||||
|
let displayHtml: HTMLString = props.statement.toHTMLString()
|
||||||
|
computed(() => displayHtml = props.statement.toHTMLString())
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.big {
|
||||||
|
transform: scale(1.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.small {
|
||||||
|
transform: scale(0.9);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="big" v-if="props?.size === 'big'" v-html="displayHtml"></div>
|
||||||
|
<div class="small" v-else-if="props?.size === 'small'" v-html="displayHtml"></div>
|
||||||
|
<div v-else v-html="displayHtml"></div>
|
||||||
|
</template>
|
@ -1,7 +1,16 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import {MathPage} from '../support/page'
|
||||||
|
import {v4 as uuidv4} from 'uuid'
|
||||||
|
import Statement from './Statement.vue'
|
||||||
|
|
||||||
|
const page = new MathPage(uuidv4())
|
||||||
|
const stmt1Id = page.addRaw('x = y+3/4')
|
||||||
|
const stmt2Id = page.addRaw('y = 9')
|
||||||
|
const evaluation = page.evaluate()
|
||||||
|
console.log({page, stmt1Id})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<p>Scratch page for testing!</p>
|
<p>Scratch page for testing!</p>
|
||||||
|
<Statement :statement="page.getStatement(stmt1Id)" :evaluation="evaluation"/>
|
||||||
</template>
|
</template>
|
||||||
|
@ -0,0 +1,39 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import {EvaluationResult, Maybe} from '../types'
|
||||||
|
import {MathStatement} from '../support/parse'
|
||||||
|
import {computed} from 'vue'
|
||||||
|
import Katex from './Katex.vue'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
statement: MathStatement,
|
||||||
|
evaluation: EvaluationResult,
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const getValueStatement = (): Maybe<MathStatement> => {
|
||||||
|
const value = props.evaluation.statements[props.statement.id]
|
||||||
|
if ( value ) {
|
||||||
|
return MathStatement.temp(String(value))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let value = getValueStatement()
|
||||||
|
computed(() => value = getValueStatement())
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.math-statement {
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="math-statement">
|
||||||
|
<Katex :statement="statement" size="big"/>
|
||||||
|
<div class="result" v-if="value">
|
||||||
|
<hr v-if="value" style="border: 1px solid #ccc; border-bottom: 0">
|
||||||
|
<Katex :statement="value" size="small" style="color: #666"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
Loading…
Reference in new issue