小地图功能

@@ -100,6 +100,11 @@ const router = createRouter({
       name: 'adv-dnd-panel-custom',
       name: 'adv-dnd-panel-custom',
       component: () => import('../views/adv-dnd-panel/custom.vue')
       component: () => import('../views/adv-dnd-panel/custom.vue')
     },
     },
+    {
+      path: '/mini-map',
+      name: 'mini-map',
+      component: () => import('../views/mini-map/index.vue')
+    },
   ]
   ]
 })
 })
 
 

 <!--
 <!--
  * @Date: 2025-03-10 14:37:31
  * @Date: 2025-03-10 14:37:31
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-03-13 17:45:28
+ * @LastEditTime: 2025-03-13 20:52:22
  * @FilePath: /logic-flow2/src/views/home.vue
  * @FilePath: /logic-flow2/src/views/home.vue
  * @Description: 文件描述
  * @Description: 文件描述
 -->
 -->
@@ -24,6 +24,7 @@
   <el-button type="primary" @click="goTo('adv-menu')">adv-menu</el-button>
   <el-button type="primary" @click="goTo('adv-menu')">adv-menu</el-button>
   <el-button type="primary" @click="goTo('adv-dnd-panel')">adv-dnd-panel</el-button>
   <el-button type="primary" @click="goTo('adv-dnd-panel')">adv-dnd-panel</el-button>
   <el-button type="primary" @click="goTo('adv-dnd-panel-custom')">adv-dnd-panel-custom</el-button>
   <el-button type="primary" @click="goTo('adv-dnd-panel-custom')">adv-dnd-panel-custom</el-button>
+  <el-button type="primary" @click="goTo('mini-map')">mini-map</el-button>
 </template>
 </template>
 
 
 <script setup>
 <script setup>

+<!--
+ * @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>