@@ -1,18 +1,14 @@
|
||||
<template>
|
||||
<div
|
||||
class="custom-node"
|
||||
:class="{
|
||||
'is-hovered': isHovered,
|
||||
'is-editing': isEditing,
|
||||
readonly: readonly,
|
||||
}"
|
||||
:class="{ 'is-hovered': isHovered, 'is-editing': isEditing }"
|
||||
:data-node-type="nodeType"
|
||||
:draggable="!isEditing && !readonly"
|
||||
@mouseenter="!readonly ? (isHovered = true) : undefined"
|
||||
@mouseleave="!readonly ? handleMouseLeave : undefined"
|
||||
@dblclick="!readonly ? handleDoubleClick : undefined"
|
||||
@dragstart="!readonly ? handleDragStart : undefined"
|
||||
@mousedown="!readonly ? handleMouseDown : undefined"
|
||||
:draggable="!isEditing"
|
||||
@mouseenter="isHovered = true"
|
||||
@mouseleave="handleMouseLeave"
|
||||
@dblclick="handleDoubleClick"
|
||||
@dragstart="handleDragStart"
|
||||
@mousedown="handleMouseDown"
|
||||
>
|
||||
<!-- 连线点 - 根据节点类型动态显示 -->
|
||||
<NodeHandles :node-type="nodeType" :node-config="nodeConfig" />
|
||||
@@ -43,7 +39,7 @@
|
||||
|
||||
<!-- 悬停时显示的操作按钮 -->
|
||||
<NodeActions
|
||||
v-if="isHovered && !readonly"
|
||||
v-if="isHovered"
|
||||
@delete="handleDelete"
|
||||
@mouseenter="handleMouseEnter"
|
||||
@mouseleave="handleMouseLeave"
|
||||
@@ -62,7 +58,6 @@ interface Props {
|
||||
id: string
|
||||
type: string
|
||||
data: any
|
||||
readonly?: boolean
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
@@ -71,9 +66,7 @@ interface Emits {
|
||||
}
|
||||
|
||||
// Props 和 Emits
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
readonly: false,
|
||||
})
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
// 响应式状态
|
||||
@@ -222,14 +215,6 @@ onUnmounted(() => {
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
.custom-node.readonly {
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.custom-node.readonly .node-content {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* 节点内容区域 */
|
||||
.node-content {
|
||||
|
||||
@@ -22,12 +22,10 @@ import CustomNode from "./CustomNode.vue"
|
||||
import { useProblemStore } from "oj/store/problem"
|
||||
|
||||
interface Props {
|
||||
readonly?: boolean
|
||||
height?: string
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
readonly: false,
|
||||
height: "calc(100vh - 133px)",
|
||||
})
|
||||
|
||||
@@ -183,12 +181,11 @@ defineExpose({
|
||||
<VueFlow
|
||||
v-model:nodes="nodes"
|
||||
v-model:edges="edges"
|
||||
:readonly="readonly"
|
||||
@dragover="!readonly ? handleDragOver : undefined"
|
||||
@dragleave="!readonly ? handleDragLeave : undefined"
|
||||
@drop="!readonly ? handleDrop : undefined"
|
||||
@connect="!readonly ? handleConnect : undefined"
|
||||
@edge-click="!readonly ? handleEdgeClick : undefined"
|
||||
@dragover="handleDragOver"
|
||||
@dragleave="handleDragLeave"
|
||||
@drop="handleDrop"
|
||||
@connect="handleConnect"
|
||||
@edge-click="handleEdgeClick"
|
||||
:default-edge-options="{
|
||||
type: 'step',
|
||||
style: {
|
||||
@@ -211,7 +208,7 @@ defineExpose({
|
||||
markerEnd: 'url(#connection-arrow)',
|
||||
filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.1))',
|
||||
}"
|
||||
:fit-view-on-init="readonly"
|
||||
:fit-view-on-init="false"
|
||||
:connect-on-click="false"
|
||||
:multi-selection-key-code="null"
|
||||
:delete-key-code="null"
|
||||
@@ -240,17 +237,14 @@ defineExpose({
|
||||
:id="id"
|
||||
:type="type"
|
||||
:data="data"
|
||||
:readonly="readonly"
|
||||
@delete="handleNodeDelete"
|
||||
@update="handleNodeUpdate"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<Background variant="lines" :gap="20" :size="1" />
|
||||
<Controls v-if="!readonly" />
|
||||
<Controls />
|
||||
<Toolbar
|
||||
v-if="!readonly"
|
||||
r
|
||||
:can-undo="canUndo"
|
||||
:can-redo="canRedo"
|
||||
:is-saving="isSaving"
|
||||
|
||||
Reference in New Issue
Block a user