Powerful-517/yys-editor
3
0
Fork 0
mirror of https://github.com/Powerful-517/yys-editor.git synced 2025-08-23 08:04:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

重新实现拖动功能，其他组件适配

Browse Source
This commit is contained in:
rookie4show
2025-07-17 16:37:29 +08:00
parent f083f8065b
commit 5ede390132
6 changed files with 100 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/flow/ComponentsPanel.vue
View File

@@ -1,8 +1,6 @@
<script setup lang="ts">
import { ref } from 'vue';
import useDragAndDrop from '@/ts/useDnD';
const { onDragStart } = useDragAndDrop();
import { getLogicFlowInstance } from '@/ts/useLogicFlow';
// 使用嵌套结构定义组件分组
const componentGroups = [
@@ -107,25 +105,28 @@ const componentGroups = [
}
}
]
}
},
// 可以轻松添加新的游戏组件组
// {
// id: 'other-game',
// title: '其他游戏',
// components: []
// }
{
id: 'other-game',
title: '其他游戏',
components: []
}
];
// 处理组件点击 - 直接使用 onDragStart 的数据格式
// 处理组件点击 - 可选：可直接创建节点
const handleComponentClick = (component) => {
const nodeData = {
type: component.type,
label: component.name,
position: { x: 100, y: 100 },
data: component.data
};
// 可选：实现点击直接添加节点到画布
};
onDragStart({ dataTransfer: { setData: () => {} } } as DragEvent, nodeData);
const handleMouseDown = (e, component) => {
e.preventDefault(); // 阻止文字选中
const lf = getLogicFlowInstance();
if (!lf) return;
lf.dnd.startDrag({
type: component.type,
properties: component.data
});
};
</script>
@@ -145,12 +146,7 @@ const handleComponentClick = (component) => {
:key="component.id"
class="component-item"
@click="handleComponentClick(component)"
draggable="true"
@dragstart="(e) => onDragStart(e, {
type: component.type,
label: component.name,
data: component.data
})"
@mousedown="(e) => handleMouseDown(e, component)"
>
<div class="component-icon">
<i class="el-icon-plus"></i>

14
src/components/flow/FlowEditor.vue
View File

@@ -32,7 +32,8 @@ import PropertySelectNode from './nodes/yys/PropertySelectNode.vue';
// import ImageNode from './nodes/common/ImageNode.vue';
// import TextNode from './nodes/common/TextNode.vue';
import PropertyPanel from './PropertyPanel.vue';
import {useFilesStore} from "@/ts/useStore";
import { useFilesStore } from "@/ts/useStore";
import { setLogicFlowInstance, destroyLogicFlowInstance } from '@/ts/useLogicFlow';
const props = defineProps<{
nodes: any[];
@@ -74,7 +75,7 @@ onMounted(() => {
});
registerNodes(lf.value);
renderFlow();
filesStore.setLogicFlowInstance(lf.value);
setLogicFlowInstance(lf.value);
// 监听节点点击事件，更新 selectedNode
lf.value.on(EventType.NODE_CLICK, ({ data }) => {
@@ -88,18 +89,16 @@ onMounted(() => {
// 节点属性改变，如果当前节点是选中节点，则同步更新 selectedNode
lf.value.on(EventType.NODE_PROPERTIES_CHANGE, (data) => {
const nodeId = data.id || (data.value && data.value.id);
const nodeId = data.id;
if (selectedNode.value && nodeId === selectedNode.value.id) {
if (data.value) {
selectedNode.value = data.value;
} else if (data.properties) {
if (data.properties) {
selectedNode.value = {
...selectedNode.value,
properties: data.properties
};
}
}
});
});
// 右键事件
lf.value.on('node:contextmenu', handleNodeContextMenu);
@@ -110,6 +109,7 @@ onMounted(() => {
onBeforeUnmount(() => {
lf.value?.destroy();
lf.value = null;
destroyLogicFlowInstance();
});
// 响应式更新 nodes/edges

72
src/components/flow/PropertyPanel.vue
View File

@@ -1,38 +1,31 @@
<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { useVueFlow } from '@vue-flow/core';
import { computed } from 'vue';
import type LogicFlow from '@logicflow/core';
// import { useVueFlow } from '@vue-flow/core';
import { QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import { useDialogs } from '../../ts/useDialogs';
import { useFilesStore } from '@/ts/useStore';
import { getLogicFlowInstance } from '@/ts/useLogicFlow';
const props = defineProps({
height: {
type: String,
default: '100%'
},
node: {
type: Object,
default: null
}
});
// 使用VueFlow的store获取当前选中的节点
const { findNode, getNodes, updateNode } = useVueFlow();
const filesStore = useFilesStore();
const { openDialog } = useDialogs();
// getNodes是一个ref对象，而不是函数
const nodes = getNodes;
const selectedNode = computed(() => props.node);
// 当前选中的节点
const selectedNode = ref(null);
// 监听节点变化
watch(nodes, (newNodes) => {
// 查找选中的节点
const selected = newNodes.find(node => node.selected);
selectedNode.value = selected || null;
}, { deep: true });
// 计算属性：节点是否选中
const hasNodeSelected = computed(() => !!selectedNode.value);
// 计算属性：节点类型
const nodeType = computed(() => {
if (!selectedNode.value) return '';
return selectedNode.value.type || 'default';
@@ -40,16 +33,21 @@ const nodeType = computed(() => {
// 通用的弹窗处理方法
const handleOpenDialog = (type: 'shikigami' | 'yuhun' | 'property') => {
if (selectedNode.value) {
const lf = getLogicFlowInstance();
if (selectedNode.value && lf) {
const node = selectedNode.value;
const currentData = node.data && node.data[type] ? node.data[type] : undefined;
// 取 properties 下的 type 字段
const currentData = node.properties && node.properties[type] ? node.properties[type] : undefined;
openDialog(
type,
currentData,
node,
(updatedData, nodeToUpdate) => {
updateNode(nodeToUpdate.id, { data: { ...nodeToUpdate.data, [type]: updatedData } });
(updatedData) => {
lf.setProperties(node.id, {
...node.properties,
[type]: updatedData
});
}
);
}
@@ -60,18 +58,11 @@ const handleImageUpload = (e) => {
if (!file) return;
const reader = new FileReader();
reader.onload = (evt) => {
updateNodeData('url', evt.target.result);
// updateNodeData('url', evt.target.result);
};
reader.readAsDataURL(file);
};
const updateNodeData = (key, value) => {
if (!selectedNode.value) return;
const node = findNode(selectedNode.value.id);
if (node) {
node.data = { ...node.data, [key]: value };
}
};
const quillToolbar = [
[{ header: 1 }, { header: 2 }],
@@ -110,6 +101,7 @@ const quillToolbar = [
<div v-if="nodeType === 'shikigamiSelect'" class="property-section">
<div class="section-header">式神属性</div>
<div class="property-item">
<span>当前选择式神：{{ selectedNode.properties?.shikigami?.name || '未选择' }}</span>
<el-button
type="primary"
@click="handleOpenDialog('shikigami')"
@@ -153,8 +145,8 @@ const quillToolbar = [
<div class="section-header">图片设置</div>
<div class="property-item">
<input type="file" accept="image/*" @change="handleImageUpload" />
<div v-if="selectedNode.data && selectedNode.data.url" style="margin-top:8px;">
<img :src="selectedNode.data.url" alt="预览" style="max-width:100%;max-height:100px;" />
<div v-if="selectedNode.value.properties && selectedNode.value.properties.url" style="margin-top:8px;">
<img :src="selectedNode.value.properties.url" alt="预览" style="max-width:100%;max-height:100px;" />
</div>
</div>
</div>
@@ -163,14 +155,14 @@ const quillToolbar = [
<div v-if="nodeType === 'textNode'" class="property-section">
<div class="section-header">文本编辑</div>
<div class="property-item">
<QuillEditor
v-model:content="selectedNode.data.html"
contentType="html"
:toolbar="quillToolbar"
theme="snow"
style="height:120px;"
@update:content="val => updateNodeData('html', val)"
/>
<!-- <QuillEditor-->
<!-- v-model:content="selectedNode.value.properties.html"-->
<!-- contentType="html"-->
<!-- :toolbar="quillToolbar"-->
<!-- theme="snow"-->
<!-- style="height:120px;"-->
<!-- @update:content="val => updateNodeData('html', val)"-->
<!-- />-->
</div>
</div>
</div>

1
src/components/flow/nodes/yys/ShikigamiSelectNode.vue
View File

@@ -41,6 +41,7 @@ onMounted(() => {
:src="currentShikigami.avatar"
:alt="currentShikigami.name"
class="shikigami-image"
draggable="false"
/>
<div v-else class="placeholder-text">点击选择式神</div>
<div class="name-text">{{ currentShikigami.name }}</div>

1
src/components/flow/nodes/yys/YuhunSelectNode.vue
View File

@@ -32,6 +32,7 @@ onMounted(() => {
:src="currentYuhun.avatar"
:alt="currentYuhun.name"
class="yuhun-image"
draggable="false"
/>
<div v-else class="placeholder-text">点击选择御魂</div>
<div class="name-text">{{ currentYuhun.name }}</div>

16
src/ts/useLogicFlow.ts Normal file
View File

@@ -0,0 +1,16 @@
import type LogicFlow from '@logicflow/core';
let logicFlowInstance: LogicFlow | null = null;
export function setLogicFlowInstance(lf: LogicFlow) {
logicFlowInstance = lf;
}
export function getLogicFlowInstance(): LogicFlow | null {
return logicFlowInstance;
}
export function destroyLogicFlowInstance() {
logicFlowInstance?.destroy();
logicFlowInstance = null;
}