Powerful-517/yys-editor
3
0
Fork 0
mirror of https://github.com/Powerful-517/yys-editor.git synced 2026-03-05 15:05:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: 简化 TextNode 实现，完全依赖 LogicFlow 原生文本节点能力

Browse Source 
- 移除自定义文本编辑逻辑，交由 LogicFlow 和 TextNodeModel 处理
- TextNode.vue 简化为空容器，LogicFlow 自动渲染文本内容
- 保留 TextNodeModel.ts 用于配置文本样式和编辑行为
- 采用模型-视图分离架构，符合 LogicFlow 设计模式
This commit is contained in:
rookie4show
2026-02-14 23:47:31 +08:00
parent 4a4a55110b
commit eb26deff72
5 changed files with 95 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/components/flow/nodes/common/TextNode.vue
View File

@@ -1,51 +1,30 @@
<!--<script setup lang="ts">-->
<!--import { ref, watch } from 'vue';-->
<!--import { Handle, useVueFlow } from '@vue-flow/core';-->
<!--import { NodeResizer } from '@vue-flow/node-resizer';-->
<!--import '@vue-flow/node-resizer/dist/style.css';-->
<script setup lang="ts">
// LogicFlow 会自动处理文本节点的渲染和编辑
</script>
<!--const props = defineProps({-->
<!-- data: Object,-->
<!-- id: String,-->
<!-- selected: Boolean-->
<!--});-->
<template>
<div class="text-content">
<!-- LogicFlow 会自动渲染 text 内容 -->
</div>
</template>
<!--const nodeWidth = ref(200);-->
<!--const nodeHeight = ref(120);-->
<!--const html = ref('');-->
<style scoped>
.text-content {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
outline: none;
word-break: break-word;
padding: 4px;
box-sizing: border-box;
cursor: text;
}
<!--watch(() => props.data, (newData) => {-->
<!-- if (newData && newData.html !== undefined) html.value = newData.html;-->
<!-- if (newData && newData.width) nodeWidth.value = newData.width;-->
<!-- if (newData && newData.height) nodeHeight.value = newData.height;-->
<!--}, { immediate: true });-->
<!--</script>-->
<!--<template>-->
<!-- <div class="text-node" :style="{ width: `${nodeWidth}px`, height: `${nodeHeight}px` }">-->
<!-- <NodeResizer v-if="selected" :min-width="80" :min-height="40" :max-width="400" :max-height="400" />-->
<!-- <Handle type="target" position="left" :id="`${id}-target`" />-->
<!-- <div class="text-content" v-html="html"></div>-->
<!-- <Handle type="source" position="right" :id="`${id}-source`" />-->
<!-- </div>-->
<!--</template>-->
<!--<style scoped>-->
<!--.text-node {-->
<!-- background: #fff;-->
<!-- border: 1px solid #dcdfe6;-->
<!-- border-radius: 4px;-->
<!-- display: flex;-->
<!-- flex-direction: column;-->
<!-- align-items: center;-->
<!-- justify-content: center;-->
<!-- overflow: hidden;-->
<!--}-->
<!--.text-content {-->
<!-- width: 100%;-->
<!-- height: 100%;-->
<!-- padding: 8px;-->
<!-- font-size: 15px;-->
<!-- color: #333;-->
<!-- word-break: break-all;-->
<!-- overflow: auto;-->
<!--}-->
<!--</style>-->
.text-content:focus {
background: rgba(64, 158, 255, 0.1);
border-radius: 2px;
}
</style>