OJ2/apps/web/src/shared/components/FlowchartEditor/CustomNode.vue

<template>
  <div
    class="custom-node"
    :class="{ 'is-hovered': isHovered, 'is-editing': isEditing }"
    :data-node-type="nodeType"
    :draggable="!isEditing"
    @mouseenter="handleMouseEnter"
    @mouseleave="handleMouseLeave"
    @dblclick="handleDoubleClick"
    @dragstart="handleDragStart"
    @mousedown="handleMouseDown"
  >
    <!-- 连线点 - 根据节点类型动态显示 -->
    <NodeHandles :node-type="nodeType" :node-config="nodeConfig" />

    <!-- 节点内容 -->
    <div class="node-content">
      <!-- 显示模式 -->
      <span v-if="!isEditing" class="node-label">{{ displayLabel }}</span>

      <!-- 编辑模式 -->
      <input
        v-if="isEditing"
        ref="editInput"
        v-model="editText"
        class="node-input"
        @blur="handleSaveEdit"
        @keydown.enter="handleSaveEdit"
        @keydown.escape="handleCancelEdit"
        @click.stop
      />

      <!-- 隐藏的文字用于保持尺寸 -->
      <span v-if="isEditing" class="node-label-hidden" aria-hidden="true">
        {{ displayLabel }}
      </span>
    </div>

    <!-- 悬停时显示的操作按钮 -->
    <NodeActions
      v-if="isHovered"
      @delete="handleDelete"
      @mouseenter="handleMouseEnter"
      @mouseleave="handleMouseLeave"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, onUnmounted, nextTick, computed } from "vue"
import { getNodeTypeConfig } from "./useNodeStyles"
import NodeHandles from "./NodeHandles.vue"
import NodeActions from "./NodeActions.vue"

interface NodeData {
  label: string
  color: string
  originalType: string
  customLabel?: string
}

interface Props {
  id: string
  type: string
  data: NodeData
}

interface Emits {
  delete: [nodeId: string]
  update: [nodeId: string, newLabel: string]
}

// Props 和 Emits
const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 响应式状态
const isHovered = ref(false)
const isEditing = ref(false)
const editText = ref("")
const editInput = useTemplateRef<HTMLInputElement>("editInput")

// 定时器和事件处理器
let hideTimeout: ReturnType<typeof setTimeout> | null = null
let globalClickHandler: ((event: MouseEvent) => void) | null = null

// 计算属性
const nodeType = computed(() => props.data.originalType || props.type)
const nodeConfig = computed(() => getNodeTypeConfig(nodeType.value))
const displayLabel = computed(
  () => props.data.customLabel || nodeConfig.value.label,
)

// 事件处理器
const handleDelete = () => emit("delete", props.id)

const handleMouseDown = (event: MouseEvent) => {
  const target = event.target as HTMLElement
  if (target.closest(".vue-flow__handle")) {
    event.preventDefault()
  }
}

const handleDragStart = (event: DragEvent) => {
  if (isEditing.value) return

  const target = event.target as HTMLElement
  if (target.closest(".vue-flow__handle")) {
    event.preventDefault()
    return
  }

  if (event.dataTransfer) {
    event.dataTransfer.effectAllowed = "move"
  }
}

const handleDoubleClick = (event: MouseEvent) => {
  event.stopPropagation()
  if (!isEditing.value) {
    isEditing.value = true
    editText.value = displayLabel.value
    nextTick(() => {
      editInput.value?.focus()
      editInput.value?.select()
    })
    addGlobalClickHandler()
  }
}

const handleSaveEdit = () => {
  if (isEditing.value) {
    emit("update", props.id, editText.value.trim())
    isEditing.value = false
    removeGlobalClickHandler()
  }
}

const handleCancelEdit = () => {
  isEditing.value = false
  editText.value = ""
  removeGlobalClickHandler()
}

const handleMouseEnter = () => {
  isHovered.value = true
  if (hideTimeout) {
    clearTimeout(hideTimeout)
    hideTimeout = null
  }
}

const handleMouseLeave = () => {
  if (hideTimeout) {
    clearTimeout(hideTimeout)
  }
  hideTimeout = setTimeout(() => {
    isHovered.value = false
  }, 300)
}

// 全局点击处理器
const addGlobalClickHandler = () => {
  if (globalClickHandler) return

  globalClickHandler = (event: MouseEvent) => {
    if (
      isEditing.value &&
      !(event.target as Element)?.closest(".custom-node")
    ) {
      handleSaveEdit()
    }
  }
  document.addEventListener("click", globalClickHandler, { capture: true })
}

const removeGlobalClickHandler = () => {
  if (globalClickHandler) {
    document.removeEventListener("click", globalClickHandler, { capture: true })
    globalClickHandler = null
  }
}

// 清理函数
onUnmounted(() => {
  if (hideTimeout) {
    clearTimeout(hideTimeout)
  }
  removeGlobalClickHandler()
})
</script>

<style scoped>
/* 主容器 */
.custom-node {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  transition: all 0.2s ease;
  padding: 0 20px;
}

.custom-node.is-hovered {
  z-index: 1;
}

.custom-node.is-hovered .node-content {
  filter: brightness(1.1);
}

/* 节点内容区域 */
.node-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  transition: all 0.2s ease;
}

/* 节点标签 */
.node-label {
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  display: inline-block;
  text-align: center;
  line-height: 1.2;
}

/* 编辑输入框 */
.node-input {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  border: none;
  outline: none;
  font-size: 16px;
  font-weight: 500;
  color: inherit;
  text-align: center;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  resize: none;
  font-family: inherit;
  line-height: 1.2;
}

/* 隐藏标签（用于保持尺寸） */
.node-label-hidden {
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  display: inline-block;
  visibility: hidden;
  pointer-events: none;
  text-align: center;
  line-height: 1.2;
}
</style>