<template>
  <div class="container">
    <div ref="container" class="flow-container"></div>
    <div class="control-panel">
      <el-button
        @click="handleOpenSelectionSelectOnce"
        :disabled="isSelectionSelectOpen"
      >单次框选</el-button>
      <el-button
        @click="handleOpenSelectionSelect"
        :disabled="isSelectionSelectOpen"
      >开启框选</el-button>
      <el-button
        @click="handleCloseSelectionSelect"
        :disabled="!isSelectionSelectOpen"
      >关闭框选</el-button>
      <el-checkbox v-model="isWholeEdge">边全选</el-checkbox>
      <el-checkbox v-model="isWholeNode">节点全选</el-checkbox>
    </div>
  </div>
</template>

<script setup>
import LogicFlow from '@logicflow/core';
import { SelectionSelect } from "@logicflow/extension";

const container = ref(null);
let lf = null;

const isSelectionSelectOpen = ref(false);
const isWholeEdge = ref(true);
const isWholeNode = ref(true);

// 监听全选模式变化
watch([isWholeEdge, isWholeNode], () => {
  if (lf) {
    const selectionSelect = lf.extension.selectionSelect;
    selectionSelect.setSelectionSense(isWholeEdge.value, isWholeNode.value);
  }
});

// 单次框选
const handleOpenSelectionSelectOnce = () => {
  if (lf) {
    const selectionSelect = lf.extension.selectionSelect;
    // 开启框选功能
    selectionSelect.openSelectionSelect();
    isSelectionSelectOpen.value = true;
    // 添加全局样式
    document.body.style.cursor = 'crosshair';
    // 框选操作结束后关闭框选功能
    lf.once('selection:selected', () => {
      selectionSelect.closeSelectionSelect();
      isSelectionSelectOpen.value = false;
      // 移除全局样式
      document.body.style.cursor = 'default';
    });
  }
};

// 开启框选
const handleOpenSelectionSelect = () => {
  if (lf) {
    const selectionSelect = lf.extension.selectionSelect;
    selectionSelect.openSelectionSelect();
    isSelectionSelectOpen.value = true;
    // 添加全局样式
    document.body.style.cursor = 'crosshair';
  }
};

// 关闭框选
const handleCloseSelectionSelect = () => {
  if (lf) {
    const selectionSelect = lf.extension.selectionSelect;
    selectionSelect.closeSelectionSelect();
    isSelectionSelectOpen.value = false;
    // 移除全局样式
    document.body.style.cursor = 'default';
  }
};

onMounted(() => {
  lf = new LogicFlow({
    container: container.value,
    grid: true,
    plugins: [SelectionSelect],
  });

  lf.on('selection:selected-area', ({ topLeft, bottomRight }) => {
    console.log('get selection area:', topLeft, bottomRight);
  });

  lf.render({
    nodes: [
      { id: 'node1', type: 'rect', x: 200, y: 200 },
      { id: 'node2', type: 'circle', x: 400, y: 200 },
    ],
    edges: [{ id: 'edge1', sourceNodeId: 'node1', targetNodeId: 'node2' }],
  });
});
</script>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.flow-container {
  flex: 1;
  width: 100%;
  height: 100%;
}

.control-panel {
  position: absolute;
  top: 20px;
  left: 20px;
  display: flex;
  gap: 10px;
}

/* 添加新的全局样式类 */
:global(.lf-selection-select) {
  cursor: crosshair !important;
}

/* 确保框选区域也使用相同的鼠标样式 */
:global(.lf-selection-select-rect) {
  cursor: crosshair !important;
}
</style>