<!--
 * @Date: 2025-03-10 16:52:35
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-03-13 21:05:08
 * @FilePath: /logic-flow2/src/views/mini-map/index.vue
 * @Description: 小地图
-->
<template>
  <div class="container">
    <div ref="container" class="flow-container"></div>
    <div class="mini-map-container">
      <el-button type="primary" @click="toggleVisible">
        {{ visible ? "隐藏" : "显示" }}
      </el-button>
      <el-button type="primary" @click="handleReset">重置</el-button>
      <el-button type="primary" @click="updatePositionWithObject1">
        左上角
      </el-button>
      <el-button type="primary" @click="updatePositionWithObject2">
        右下角
      </el-button>
    </div>
  </div>
</template>

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

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

const miniMapOptions = {
  isShowHeader: false,
  isShowCloseIcon: true,
  headerTitle: "MiniMap",
  width: 200,
  height: 120,
  rightPosition: 100,
  bottomPosition: 100,
};

const visible = ref(false);
const position = ref(false);

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

  lf.on("miniMap:close", () => {
    visible.value = false;
  });

  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" }],
  });
});

const toggleVisible = () => {
  if (lf) {
    const miniMap = lf.extension.miniMap;
    if (visible.value) {
      miniMap.hide();
    } else {
      miniMap.show();
    }
    visible.value = !visible.value;
  }
};

const handleReset = () => {
  if (lf) {
    lf.extension.miniMap.reset();
  }
};

const updatePosition = (position) => {
  if (lf) {
    const miniMap = lf.extension.miniMap;
    miniMap.updatePosition(position);
    position.value = position;
  }
};

const updatePositionWithObject1 = () => {
  (lf?.extension.miniMap).updatePosition({
    left: 100,
    top: 100,
  });
};

const updatePositionWithObject2 = () => {
  (lf?.extension.miniMap).updatePosition({
    right: 100,
    bottom: 100,
  });
};
</script>

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

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

.mini-map-container {
  position: absolute;
  bottom: 20px;
  right: 20px;
}
</style>