<!--
 * @Date: 2025-03-10 16:52:35
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-03-10 17:16:39
 * @FilePath: /logic-flow2/src/views/control.vue
 * @Description: 拖拽面板
-->
<template>
  <div class="container">
    <div ref="container" class="flow-container"></div>
  </div>
</template>

<script setup>
import LogicFlow from '@logicflow/core';
import { MiniMap } from "@logicflow/extension";
const container = ref(null);
let lf = null;

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

  lf.extension.control.addItem({
    key: 'mini-map',
    iconClass: 'custom-minimap',
    title: '',
    text: '导航',
    onMouseEnter: (lf, ev) => {
      const position = lf.getPointByClient(ev.x, ev.y)
      lf.extension.miniMap.show(
        position.domOverlayPosition.x - 120,
        position.domOverlayPosition.y + 35,
      )
    },
    onClick: (lf, ev) => {
      const position = lf.getPointByClient(ev.x, ev.y)
      lf.extension.miniMap.show(
        position.domOverlayPosition.x - 120,
        position.domOverlayPosition.y + 35,
      )
    },
  });

  // lf.extension.control.removeItem('mini-map')

  lf.render({
    nodes: [
      { id: 'node1', type: 'rect', x: 200, y: 100 },
      { id: 'node2', type: 'circle', x: 400, y: 100 },
    ],
    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%;
}
</style>