Skip to content

Commit

Permalink
Coding debug features.
Browse files Browse the repository at this point in the history
  • Loading branch information
gudaoxuri committed Sep 26, 2023
1 parent cbb4ac9 commit 69133f5
Show file tree
Hide file tree
Showing 7 changed files with 657 additions and 227 deletions.
1 change: 0 additions & 1 deletion src/components/CmWrap.vue
Original file line number Diff line number Diff line change
Expand Up @@ -486,7 +486,6 @@ const exprParamLinter = linter((view) => {
})
formulaResult.pass = diagnostics.length === 0;
emit('updateFormulaResult', formulaResult)
console.log('--------------')
return diagnostics
})
Expand Down
104 changes: 104 additions & 0 deletions src/components/Debug.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
<script setup lang="ts">
import {computed, reactive, ref, watch} from 'vue'
import {iwExecutor} from "../processes";
import {Namespace, VarInfo} from "../processes/interface";
import {VideoPlay} from "@element-plus/icons-vue";
interface Props {
materials: Namespace[]
formulaValue: string
entrance: string
}
const props = withDefaults(defineProps<Props>(), {
entrance: '$'
})
const inputParams = reactive<Map<string, any>>(new Map<string, any>())
const materialVars = computed(() => {
inputParams.clear()
return props.materials.filter((ns) => ns.isVar).map((ns) => {
let items = (ns.items as VarInfo[]).map((varInfo) => {
inputParams.set(props.entrance + '.' + ns.name + '.' + varInfo.name, varInfo.defaultValue)
return {
name: varInfo.name!,
label: varInfo.label!,
note: varInfo.note,
}
})
return {
nsLabel: ns.label,
nsName: ns.name,
items
}
})
})
const debugResult = ref<any>(null)
async function debug() {
console.log('--------------' + props.materials)
try {
debugResult.value = await iwExecutor.execute(inputParams, props.formulaValue, props.materials, props.entrance)
} catch (e) {
debugResult.value = e.message
}
}
</script>

<template>
<div class="iw-debug">
<el-form>
<el-form-item class="iw-debug__toolbar">
<el-button :icon="VideoPlay" link @click="debug">运行</el-button>
</el-form-item>
<template v-for="materialVar in materialVars">
<el-divider content-position="left">{{ materialVar.nsLabel }}</el-divider>
<template v-for="varInfo in materialVar.items">
<el-form-item :label="varInfo.label" class="iw-debug__param">
<el-input v-model="inputParams[props.entrance+'.'+materialVar.nsName+'.'+varInfo.name]"/>
</el-form-item>
</template>
</template>
<p class="iw-debug__result">结果:{{ debugResult }}</p>

</el-form>
</div>
</template>

<style lang="scss" scoped>
@import '../assets/main.scss';
@include b('debug') {
font-size: 11pt;
padding: 4px;
border-left: 1px solid var(--el-border-color);
height: 100%;
@include e('toolbar') {
background-color: var(--el-color-info-light-9);
padding: 4px;
border: 1px solid var(--el-border-color);
border-radius: 4px;
text-align: right;
}
@include e('param') {
padding: 4px;
}
@include e('result') {
border-top: 1px solid var(--el-border-color);
border-bottom: 1px solid var(--el-border-color);
padding: 4px;
}
}
</style>

<style lang="scss">
@import '../assets/main.scss';
</style>
142 changes: 89 additions & 53 deletions src/components/Editor.vue
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<script setup lang="ts">
import {ElInput} from 'element-plus'
import {reactive, ref, watch} from 'vue'
import {computed, reactive, ref} from 'vue'
import {VideoPlay, EditPen, Search} from '@element-plus/icons-vue'
import {exampleProps} from '../processes/example'
import CmWrapComp, {FormulaResult} from './CmWrap.vue'
import DebugComp from './Debug.vue'
import {EditorProps, FunInfo, VarInfo} from '../processes/interface'
import {EditorProps, FunInfo, Namespace, VarInfo} from '../processes/interface'
import {groupBy} from '../utils/basic'
const emit = defineEmits(['update:formulaValue', 'update:checkPass'])
Expand Down Expand Up @@ -33,6 +33,10 @@ const materialVars = reactive<Material[]>(findMaterials(true, ''))
const materialFuns = reactive<Material[]>(findMaterials(false, ''))
const searchMaterialVarKey = ref<string>('')
const searchMaterialFunKey = ref<string>('')
const formulaResult = reactive<FormulaResult>({
materials: [], pass: false, value: ""
})
const openDebugPanel = ref<boolean>(true)
function findMaterials(isVar: boolean, filterName: string): Material[] {
if (isVar) {
Expand Down Expand Up @@ -148,61 +152,68 @@ function insertMaterial(isLeaf: boolean, ns: string, name: string) {
isLeaf && CmWrapCompRef.value.insertMaterial(ns, name)
}
function watchFormulaResult(formulaResult: FormulaResult) {
console.log(formulaResult)
emit('update:formulaValue', formulaResult.value)
emit('update:checkPass', formulaResult.pass)
function watchFormulaResult(_formulaResult: FormulaResult) {
formulaResult.value = _formulaResult.value
formulaResult.pass = _formulaResult.pass
formulaResult.materials = _formulaResult.materials
emit('update:formulaValue', _formulaResult.value)
emit('update:checkPass', _formulaResult.pass)
}
const filterUsedMaterials = computed(() => {
let formulaMaterials = formulaResult.materials
return props.materials.map((ns) => {
let items
if (ns.isVar) {
items = (ns.items as VarInfo[]).filter((varInfo) => {
let name = props.entrance + '.' + ns.name + '.' + varInfo.name
return formulaMaterials.includes(name)
})
} else {
items = (ns.items as FunInfo[]).filter((funInfo) => {
let name = props.entrance + '.' + ns.name + '.' + funInfo.name
return formulaMaterials.includes(name)
})
}
return {
name: ns.name,
label: ns.label,
isVar: ns.isVar,
items: items
} as Namespace
})
.filter((ns) => ns.items.length > 0)
})
</script>

<template>
<div class="iw-editor">
<el-row class="iw-editor-toolbar">
<el-col :span="12">{{ props.targetVar.label }} =</el-col>
<el-col :span="12" class="iw-editor-toolbar__opt">
<el-button :icon="VideoPlay" link>调试</el-button>
<el-button :icon="EditPen" link>代码模式</el-button>
</el-col>
</el-row>
<el-row class="iw-editor-formula">
<cm-wrap-comp ref="CmWrapCompRef" class="iw-editor-formula--size" @updateFormulaResult="watchFormulaResult"
:formulaValue="props.formulaValue" :targetGuard="targetVar" :materials="materials"
:entrance="entrance"/>
</el-row>
<el-row class="iw-editor-material">
<el-col class="iw-editor-material__var-wrapper" :span="6">
<el-input placeholder="搜索变量" v-model="searchMaterialVarKey" :prefix-icon="Search"
@input="searchMaterials(true, searchMaterialVarKey)"/>
<el-tabs tab-position="bottom">
<template v-for="materialVar in materialVars">
<el-tab-pane :label="materialVar.nsLabel">
<el-tree :data="materialVar.items" node-key="id" accordion empty-text="暂无数据">
<template #default="{ node, data }">
<div class="iw-editor-material__item"
@click="insertMaterial(node.isLeaf, materialVar.nsName, data.name)">
<p class="iw-editor-material__item-tile">{{ data.name }}</p>
<p class="iw-editor-material__item-note">{{ data.label }}</p>
</div>
</template>
</el-tree>
</el-tab-pane>
</template>
</el-tabs>
</el-col>
<el-col class="iw-editor-material__func-wrapper" :span="18">
<el-row>
<el-col class="iw-editor-material__func-list" :span="10">
<el-input placeholder="搜索函数/API" v-model="searchMaterialFunKey" :prefix-icon="Search"
@input="searchMaterials(false, searchMaterialFunKey)"/>
<el-row>
<el-col class="iw-editor-main" :span="openDebugPanel?16:24">
<el-row class="iw-editor-toolbar">
<el-col :span="12">{{ props.targetVar.label }}</el-col>
<el-col :span="12" class="iw-editor-toolbar__opt">
<el-button :icon="VideoPlay" link @click="openDebugPanel=!openDebugPanel">调试</el-button>
</el-col>
</el-row>
<el-row class="iw-editor-formula">
<cm-wrap-comp ref="CmWrapCompRef" class="iw-editor-formula--size" @update-formula-result="watchFormulaResult"
:formula-value="props.formulaValue" :target-guard="targetVar" :materials="materials"
:entrance="entrance"/>
</el-row>
<el-row class="iw-editor-material">
<el-col class="iw-editor-material__var-wrapper" :span="6">
<el-input placeholder="搜索变量" v-model="searchMaterialVarKey" :prefix-icon="Search"
@input="searchMaterials(true, searchMaterialVarKey)"/>
<el-tabs tab-position="bottom">
<template v-for="materialFun in materialFuns">
<el-tab-pane :label="materialFun.nsLabel">
<el-tree :data="materialFun.items" node-key="id" accordion empty-text="暂无数据">
<template v-for="materialVar in materialVars">
<el-tab-pane :label="materialVar.nsLabel">
<el-tree :data="materialVar.items" node-key="id" accordion empty-text="暂无数据">
<template #default="{ node, data }">
<div class="iw-editor-material__item"
@click="insertMaterial(node.isLeaf, materialFun.nsName, data.name)"
@mouseenter="materialNote = data.note" @mouseleave="materialNote = ''">
@click="insertMaterial(node.isLeaf, materialVar.nsName, data.name)">
<p class="iw-editor-material__item-tile">{{ data.name }}</p>
<p class="iw-editor-material__item-note">{{ data.label }}</p>
</div>
Expand All @@ -212,15 +223,40 @@ function watchFormulaResult(formulaResult: FormulaResult) {
</template>
</el-tabs>
</el-col>
<el-col class="iw-editor-material__func-note" :span="14">
{{ materialNote }}
<el-col class="iw-editor-material__func-wrapper" :span="18">
<el-row>
<el-col class="iw-editor-material__func-list" :span="10">
<el-input placeholder="搜索函数/API" v-model="searchMaterialFunKey" :prefix-icon="Search"
@input="searchMaterials(false, searchMaterialFunKey)"/>
<el-tabs tab-position="bottom">
<template v-for="materialFun in materialFuns">
<el-tab-pane :label="materialFun.nsLabel">
<el-tree :data="materialFun.items" node-key="id" accordion empty-text="暂无数据">
<template #default="{ node, data }">
<div class="iw-editor-material__item"
@click="insertMaterial(node.isLeaf, materialFun.nsName, data.name)"
@mouseenter="materialNote = data.note" @mouseleave="materialNote = ''">
<p class="iw-editor-material__item-tile">{{ data.name }}</p>
<p class="iw-editor-material__item-note">{{ data.label }}</p>
</div>
</template>
</el-tree>
</el-tab-pane>
</template>
</el-tabs>
</el-col>
<el-col class="iw-editor-material__func-note" :span="14">
{{ materialNote }}
</el-col>
</el-row>
</el-col>
</el-row>
</el-col>
<el-col class="iw-editor-debug" :span="openDebugPanel?8:0" v-show="openDebugPanel">
<debug-comp v-model:materials="filterUsedMaterials" v-model:formula-value="formulaResult.value"
:entrance="props.entrance"/>
</el-col>
</el-row>
<!-- <el-row class="iw-editor-debug">-->
<!-- <debug-comp materials="" input-params="" :formula-value="formulaResult.value"/>-->
<!-- </el-row>-->
</div>
</template>

Expand Down
Loading

0 comments on commit 69133f5

Please sign in to comment.