@vunk/graph 0.0.2 → 0.0.4

package/components/graph/index.d.ts

@@ -1,6 +1,8 @@
 import VkGraph from './src/index.vue';
 export * as __VkGraph from './src/types';
+export { useEdgeReducer } from './src/useEdgeReducer';
 export { useGraph } from './src/useGraph';
+export { useNodeReducer } from './src/useNodeReducer';
 export { useSigma } from './src/useSigma';
 export { VkGraph, };
 export default VkGraph;

package/components/graph/index.mjs

@@ -1,4 +1,4 @@
-import { provide, inject, defineComponent, ref, onMounted, onBeforeUnmount, createElementBlock, openBlock, createElementVNode, createVNode, unref, withCtx, createBlock, createCommentVNode, renderSlot } from 'vue';
+import { shallowReactive, provide, inject, defineComponent, ref, onMounted, onBeforeUnmount, createElementBlock, openBlock, createElementVNode, createVNode, unref, withCtx, createBlock, createCommentVNode, renderSlot } from 'vue';
 import { VkLabelProvider } from '@vunk/graph/components/label';
 import { VkPopupProvider } from '@vunk/graph/components/popup';
 import Sigma from 'sigma';
@@ -17,20 +17,96 @@ const emits = {
   load: (e) => e
 };
 
-const key$1 = "vunk-graph";
+const key$3 = "vunk-graph-edge_reducer";
+function initEdgeReducer() {
+  const middlewares = shallowReactive([]);
+  function addMiddleware(middleware) {
+    middlewares.push(middleware);
+  }
+  function removeMiddleware(middleware) {
+    const index = middlewares.indexOf(middleware);
+    if (index > -1) {
+      middlewares.splice(index, 1);
+    }
+  }
+  function edgeReducer(edge, data) {
+    let currentData = { ...data };
+    for (const middleware of middlewares) {
+      const res = middleware(edge, currentData);
+      if (res) {
+        currentData = { ...currentData, ...res };
+      }
+    }
+    return currentData;
+  }
+  const context = {
+    edgeReducer,
+    addMiddleware,
+    removeMiddleware
+  };
+  provide(key$3, context);
+  return context;
+}
+function useEdgeReducer() {
+  const edgeReducerContext = inject(key$3);
+  if (!edgeReducerContext) {
+    throw new Error("EdgeReducer is not provided");
+  }
+  return edgeReducerContext;
+}
+
+const key$2 = "vunk-graph";
 function initGraph() {
   const graph = new Graph();
-  provide(key$1, graph);
+  provide(key$2, graph);
   return graph;
 }
 function useGraph() {
-  const graph = inject(key$1);
+  const graph = inject(key$2);
   if (!graph) {
     throw new Error("Graph is not provided");
   }
   return graph;
 }
 
+const key$1 = "vunk-graph-node_reducer";
+function initNodeReducer() {
+  const middlewares = shallowReactive([]);
+  function addMiddleware(middleware) {
+    middlewares.push(middleware);
+  }
+  function removeMiddleware(middleware) {
+    const index = middlewares.indexOf(middleware);
+    if (index > -1) {
+      middlewares.splice(index, 1);
+    }
+  }
+  function nodeReducer(node, data) {
+    let currentData = { ...data };
+    for (const middleware of middlewares) {
+      const res = middleware(node, currentData);
+      if (res) {
+        currentData = { ...currentData, ...res };
+      }
+    }
+    return currentData;
+  }
+  const context = {
+    nodeReducer,
+    addMiddleware,
+    removeMiddleware
+  };
+  provide(key$1, context);
+  return context;
+}
+function useNodeReducer() {
+  const nodeReducerContext = inject(key$1);
+  if (!nodeReducerContext) {
+    throw new Error("NodeReducer is not provided");
+  }
+  return nodeReducerContext;
+}
+
 const key = "vunk-graph-sigma";
 function provideSigma(sigma) {
   provide(key, sigma);
@@ -54,6 +130,8 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    const { nodeReducer } = initNodeReducer();
+    const { edgeReducer } = initEdgeReducer();
     const elRef = ref();
     const graph = initGraph();
     const ready = ref(false);
@@ -61,6 +139,8 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       const sigma = new Sigma(graph, elRef.value, {
         renderEdgeLabels: true,
         enableEdgeEvents: true,
+        nodeReducer,
+        edgeReducer,
         ...props.defaultOptions
       });
       provideSigma(sigma);
@@ -109,4 +189,4 @@ _sfc_main.install = (app) => {
   app.component(_sfc_main.name || "VkGraph", _sfc_main);
 };
 
-export { _sfc_main as VkGraph, types as __VkGraph, _sfc_main as default, useGraph, useSigma };
+export { _sfc_main as VkGraph, types as __VkGraph, _sfc_main as default, useEdgeReducer, useGraph, useNodeReducer, useSigma };

package/components/graph/src/index.vue.d.ts

@@ -14,6 +14,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         onLoad?: ((e: import("./types").LoadEvent) => any) | undefined;
     }> & {}>;
     emit: (event: "load", e: import("./types").LoadEvent) => void;
+    nodeReducer: (node: string, data: any) => Partial<import("sigma/types").NodeDisplayData>;
+    edgeReducer: (edge: string, data: any) => Partial<import("sigma/types").EdgeDisplayData>;
     elRef: Ref<HTMLDivElement, HTMLDivElement>;
     graph: import("graphology").default<import("graphology-types").Attributes, import("graphology-types").Attributes, import("graphology-types").Attributes>;
     ready: Ref<boolean, boolean>;
@@ -22,29 +24,29 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }>[], {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     readonly VkPopupProvider: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         modelValue: {
-            type: BooleanConstructor;
-            default: boolean;
+            type: StringConstructor;
+            default: undefined;
         };
-        closeable: {
-            type: BooleanConstructor;
-            default: boolean;
+        trigger: {
+            type: import("vue").PropType<"hover" | "click" | "none">;
+            default: string;
         };
     }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
         'update:modelValue': null;
     }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
         modelValue: {
-            type: BooleanConstructor;
-            default: boolean;
+            type: StringConstructor;
+            default: undefined;
         };
-        closeable: {
-            type: BooleanConstructor;
-            default: boolean;
+        trigger: {
+            type: import("vue").PropType<"hover" | "click" | "none">;
+            default: string;
         };
     }>> & Readonly<{
         "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     }>, {
-        modelValue: boolean;
-        closeable: boolean;
+        modelValue: string;
+        trigger: "none" | "click" | "hover";
     }, {}, {
         VkGraphViewUi: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
             coordinates: {

package/components/graph/src/useEdgeReducer.d.ts

@@ -0,0 +1,13 @@
+import type { EdgeDisplayData } from 'sigma/types';
+type Middleware = (edge: string, data: any) => Partial<EdgeDisplayData> | null;
+export declare function initEdgeReducer(): {
+    edgeReducer: (edge: string, data: any) => Partial<EdgeDisplayData>;
+    addMiddleware: (middleware: Middleware) => void;
+    removeMiddleware: (middleware: Middleware) => void;
+};
+export declare function useEdgeReducer(): {
+    edgeReducer: (edge: string, data: any) => Partial<EdgeDisplayData> | null;
+    addMiddleware: (middleware: Middleware) => void;
+    removeMiddleware: (middleware: Middleware) => void;
+};
+export {};

package/components/graph/src/useNodeReducer.d.ts

@@ -0,0 +1,13 @@
+import type { NodeDisplayData } from 'sigma/types';
+type Middleware = (node: string, data: any) => Partial<NodeDisplayData> | null;
+export declare function initNodeReducer(): {
+    nodeReducer: (node: string, data: any) => Partial<NodeDisplayData>;
+    addMiddleware: (middleware: Middleware) => void;
+    removeMiddleware: (middleware: Middleware) => void;
+};
+export declare function useNodeReducer(): {
+    nodeReducer: (node: string, data: any) => Partial<NodeDisplayData> | null;
+    addMiddleware: (middleware: Middleware) => void;
+    removeMiddleware: (middleware: Middleware) => void;
+};
+export {};

package/components/hover-edge/index.mjs

@@ -1,6 +1,6 @@
 import { defineComponent, reactive, watch, onMounted, onBeforeUnmount, createBlock, createCommentVNode, openBlock, unref, withCtx, renderSlot } from 'vue';
 import { ContextMenu } from '@vunk/graph/components/context-menu';
-import { useSigma, useGraph } from '@vunk/graph/components/graph';
+import { useSigma, useGraph, useEdgeReducer } from '@vunk/graph/components/graph';
 
 const props = {
   /**
@@ -37,6 +37,13 @@ const props = {
   activeColor: {
     type: String,
     default: "#409EFF"
+  },
+  /**
+   * before leave 当返回 false 时阻止隐藏
+   */
+  beforeLeave: {
+    type: Function,
+    default: void 0
   }
 };
 const emits = {
@@ -54,6 +61,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     const emit = __emit;
     const sigma = useSigma();
     const graph = useGraph();
+    const { addMiddleware, removeMiddleware } = useEdgeReducer();
     const contextmenuState = reactive({
       edge: "",
       show: false,
@@ -62,34 +70,25 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         y: 0
       }
     });
-    let oldNodeReducer = null;
-    let oldEdgeReducer = null;
-    let isApplied = false;
-    watch(() => props.modelValue, (edgeId) => {
-      if (edgeId && graph.hasEdge(edgeId)) {
-        if (!isApplied) {
-          oldNodeReducer = sigma.getSetting("nodeReducer");
-          oldEdgeReducer = sigma.getSetting("edgeReducer");
-          isApplied = true;
-        }
-        sigma.setSetting("edgeReducer", (edge, data) => {
-          const baseData = oldEdgeReducer ? oldEdgeReducer(edge, data) : data;
-          if (edge === edgeId) {
-            const res = { ...baseData, zIndex: 10, forceLabel: true };
-            if (props.activeColor) {
-              res.color = props.activeColor;
-            }
-            return res;
-          }
-          return baseData;
-        });
-      } else {
-        if (isApplied) {
-          sigma.setSetting("nodeReducer", oldNodeReducer);
-          sigma.setSetting("edgeReducer", oldEdgeReducer);
-          isApplied = false;
+    function edgeMiddleware(edge) {
+      const edgeId = props.modelValue;
+      if (edgeId && graph.hasEdge(edgeId) && edge === edgeId) {
+        const res = { zIndex: 10, forceLabel: true };
+        if (props.activeColor) {
+          res.color = props.activeColor;
         }
+        return res;
       }
+      return null;
+    }
+    watch(() => props.modelValue, () => {
+      sigma.refresh();
+    });
+    onMounted(() => {
+      addMiddleware(edgeMiddleware);
+    });
+    onBeforeUnmount(() => {
+      removeMiddleware(edgeMiddleware);
     });
     let enterTimer = null;
     let leaveTimer = null;
@@ -104,6 +103,11 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       leaveTimer = setTimeout(() => {
         if (props.contextMenu && contextmenuState.show)
           return;
+        if (props.beforeLeave) {
+          const v = props.beforeLeave();
+          if (v === false)
+            return;
+        }
         emit("update:modelValue", "");
       }, props.leaveDelay);
     }
@@ -116,10 +120,6 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       clearTimeout(leaveTimer);
       sigma.off("enterEdge", enterHandler);
       sigma.off("leaveEdge", leaveHandler);
-      if (isApplied) {
-        sigma.setSetting("nodeReducer", oldNodeReducer);
-        sigma.setSetting("edgeReducer", oldEdgeReducer);
-      }
     });
     onMounted(() => {
       sigma.on("rightClickEdge", rightClickHandler);

package/components/hover-edge/src/ctx.d.ts

@@ -1,3 +1,5 @@
+import type { AnyFunc } from '@vunk/shared';
+import type { PropType } from 'vue';
 import type { RightClickEvent } from './types';
 export declare const props: {
     /**
@@ -35,6 +37,13 @@ export declare const props: {
         type: StringConstructor;
         default: string;
     };
+    /**
+     * before leave 当返回 false 时阻止隐藏
+     */
+    beforeLeave: {
+        type: PropType<AnyFunc>;
+        default: undefined;
+    };
 };
 export declare const emits: {
     'update:modelValue': null;

package/components/hover-edge/src/index.vue.d.ts

@@ -19,6 +19,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: StringConstructor;
         default: string;
     };
+    beforeLeave: {
+        type: import("vue").PropType<import("@vunk/shared").AnyFunc>;
+        default: undefined;
+    };
 }>, {
     props: import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
         contextMenu: {
@@ -41,6 +45,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             type: StringConstructor;
             default: string;
         };
+        beforeLeave: {
+            type: import("vue").PropType<import("@vunk/shared").AnyFunc>;
+            default: undefined;
+        };
     }>> & Readonly<{
         onRightClick?: ((e: import("./types").RightClickEvent) => any) | undefined;
         "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -48,6 +56,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     emit: ((event: "rightClick", e: import("./types").RightClickEvent) => void) & ((event: "update:modelValue", ...args: any[]) => void);
     sigma: import("sigma").default<import("graphology-types").Attributes, import("graphology-types").Attributes, import("graphology-types").Attributes>;
     graph: import("graphology").default<import("graphology-types").Attributes, import("graphology-types").Attributes, import("graphology-types").Attributes>;
+    addMiddleware: (middleware: (edge: string, data: any) => Partial<import("sigma/types").EdgeDisplayData> | null) => void;
+    removeMiddleware: (middleware: (edge: string, data: any) => Partial<import("sigma/types").EdgeDisplayData> | null) => void;
     contextmenuState: {
         edge: string;
         show: boolean;
@@ -56,9 +66,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             y: number;
         };
     };
-    oldNodeReducer: any;
-    oldEdgeReducer: any;
-    isApplied: boolean;
+    edgeMiddleware: (edge: string) => any;
     enterTimer: any;
     leaveTimer: any;
     enterHandler: ({ edge }: {
@@ -181,6 +189,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: StringConstructor;
         default: string;
     };
+    beforeLeave: {
+        type: import("vue").PropType<import("@vunk/shared").AnyFunc>;
+        default: undefined;
+    };
 }>> & Readonly<{
     onRightClick?: ((e: import("./types").RightClickEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -190,5 +202,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     leaveDelay: number;
     enterDelay: number;
     activeColor: string;
+    beforeLeave: import("@vunk/shared").AnyFunc;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/components/hover-highlight/index.mjs

@@ -1,4 +1,4 @@
-import { useSigma } from '@vunk/graph/composables';
+import { useSigma, useNodeReducer, useEdgeReducer } from '@vunk/graph/composables';
 import { defineComponent, watch, onMounted, onUnmounted, renderSlot } from 'vue';
 import { _ as _export_sfc } from '../_plugin-vue_export-helper.mjs';
 
@@ -43,52 +43,49 @@ var _sfc_main = defineComponent({
   setup(props2, { emit }) {
     const sigma = useSigma();
     const graph = sigma.getGraph();
-    let oldNodeReducer = null;
-    let oldEdgeReducer = null;
-    let isApplied = false;
-    watch(() => props2.modelValue, (nodeId) => {
-      if (nodeId) {
-        if (!isApplied) {
-          oldNodeReducer = sigma.getSetting("nodeReducer");
-          oldEdgeReducer = sigma.getSetting("edgeReducer");
-          isApplied = true;
-        }
-        const hoveredColor = sigma.getNodeDisplayData(nodeId)?.color || "";
-        sigma.setSetting("nodeReducer", (node, data) => {
-          const baseData = oldNodeReducer ? oldNodeReducer(node, data) : data;
-          if (node === nodeId) {
-            return { ...baseData, zIndex: 3 };
-          }
-          if (graph.hasEdge(node, nodeId) || graph.hasEdge(nodeId, node)) {
-            return { ...baseData, zIndex: 2 };
-          }
-          return {
-            ...baseData,
-            zIndex: 0,
-            label: "",
-            color: props2.nodeFadeColor,
-            highlighted: false
-          };
-        });
-        sigma.setSetting("edgeReducer", (edge, data) => {
-          const baseData = oldEdgeReducer ? oldEdgeReducer(edge, data) : data;
-          if (graph.hasExtremity(edge, nodeId)) {
-            return { ...baseData, color: hoveredColor, zIndex: 10 };
-          }
-          return {
-            ...baseData,
-            color: props2.edgeFadeColor,
-            label: "",
-            zIndex: 0
-          };
-        });
-      } else {
-        if (isApplied) {
-          sigma.setSetting("nodeReducer", oldNodeReducer);
-          sigma.setSetting("edgeReducer", oldEdgeReducer);
-          isApplied = false;
-        }
+    const { addMiddleware: addNodeMiddleware, removeMiddleware: removeNodeMiddleware } = useNodeReducer();
+    const { addMiddleware: addEdgeMiddleware, removeMiddleware: removeEdgeMiddleware } = useEdgeReducer();
+    const nodeMiddleware = (node) => {
+      const nodeId = props2.modelValue;
+      if (!nodeId)
+        return null;
+      if (node === nodeId) {
+        return { zIndex: 3 };
       }
+      if (graph.hasEdge(node, nodeId) || graph.hasEdge(nodeId, node)) {
+        return { zIndex: 2 };
+      }
+      return {
+        zIndex: 0,
+        label: "",
+        color: props2.nodeFadeColor,
+        highlighted: false
+      };
+    };
+    const edgeMiddleware = (edge) => {
+      const nodeId = props2.modelValue;
+      if (!nodeId)
+        return null;
+      const hoveredColor = sigma.getNodeDisplayData(nodeId)?.color || "";
+      if (graph.hasExtremity(edge, nodeId)) {
+        return { color: hoveredColor, zIndex: 10 };
+      }
+      return {
+        color: props2.edgeFadeColor,
+        label: "",
+        zIndex: 0
+      };
+    };
+    watch(() => props2.modelValue, () => {
+      sigma.refresh();
+    });
+    onMounted(() => {
+      addNodeMiddleware(nodeMiddleware);
+      addEdgeMiddleware(edgeMiddleware);
+    });
+    onUnmounted(() => {
+      removeNodeMiddleware(nodeMiddleware);
+      removeEdgeMiddleware(edgeMiddleware);
     });
     let timer = null;
     const enterHandler = ({ node }) => {
@@ -108,10 +105,8 @@ var _sfc_main = defineComponent({
       clearTimeout(timer);
       sigma.off("enterNode", enterHandler);
       sigma.off("leaveNode", leaveHandler);
-      if (isApplied) {
-        sigma.setSetting("nodeReducer", oldNodeReducer);
-        sigma.setSetting("edgeReducer", oldEdgeReducer);
-      }
+      removeNodeMiddleware(nodeMiddleware);
+      removeEdgeMiddleware(edgeMiddleware);
     });
     return {};
   }

package/components/hover-node/index.mjs

@@ -4,6 +4,20 @@ import { defineComponent, reactive, onMounted, onBeforeUnmount, resolveComponent
 import { _ as _export_sfc } from '../_plugin-vue_export-helper.mjs';
 
 const props = {
+  /**
+   * 是否启用popup功能
+   */
+  popup: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 触发方式，可选值有 click 和 hover
+   */
+  popupTrigger: {
+    type: String,
+    default: "hover"
+  },
   /**
    * 是否启用右键菜单功能
    */
@@ -31,6 +45,13 @@ const props = {
   enterDelay: {
     type: Number,
     default: 0
+  },
+  /**
+   * before leave 当返回 false 时阻止隐藏
+   */
+  beforeLeave: {
+    type: Function,
+    default: void 0
   }
 };
 const emits = {
@@ -68,6 +89,11 @@ var _sfc_main = defineComponent({
       leaveTimer = setTimeout(() => {
         if (props2.contextMenu && contextmenuState.show)
           return;
+        if (props2.beforeLeave) {
+          const v = props2.beforeLeave();
+          if (v === false)
+            return;
+        }
         emit("update:modelValue", "");
       }, props2.leaveDelay);
     };

package/components/hover-node/src/ctx.d.ts

@@ -1,5 +1,21 @@
+import type { AnyFunc } from '@vunk/shared';
+import type { PropType } from 'vue';
 import type { RightClickEvent } from './types';
 export declare const props: {
+    /**
+     * 是否启用popup功能
+     */
+    popup: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * 触发方式，可选值有 click 和 hover
+     */
+    popupTrigger: {
+        type: PropType<"click" | "hover">;
+        default: string;
+    };
     /**
      * 是否启用右键菜单功能
      */
@@ -28,6 +44,13 @@ export declare const props: {
         type: NumberConstructor;
         default: number;
     };
+    /**
+     * before leave 当返回 false 时阻止隐藏
+     */
+    beforeLeave: {
+        type: PropType<AnyFunc>;
+        default: undefined;
+    };
 };
 export declare const emits: {
     'update:modelValue': null;

package/components/hover-node/src/index.vue.d.ts

@@ -1,4 +1,12 @@
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    popup: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    popupTrigger: {
+        type: import("vue").PropType<"click" | "hover">;
+        default: string;
+    };
     contextMenu: {
         type: BooleanConstructor;
         default: boolean;
@@ -15,6 +23,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: NumberConstructor;
         default: number;
     };
+    beforeLeave: {
+        type: import("vue").PropType<import("@vunk/shared").AnyFunc>;
+        default: undefined;
+    };
 }>, {
     changeContextmenuShow: (show: boolean) => void;
     contextmenuState: {
@@ -29,6 +41,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     'update:modelValue': null;
     rightClick: (e: import("./types").RightClickEvent) => import("./types").RightClickEvent;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    popup: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    popupTrigger: {
+        type: import("vue").PropType<"click" | "hover">;
+        default: string;
+    };
     contextMenu: {
         type: BooleanConstructor;
         default: boolean;
@@ -45,6 +65,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: NumberConstructor;
         default: number;
     };
+    beforeLeave: {
+        type: import("vue").PropType<import("@vunk/shared").AnyFunc>;
+        default: undefined;
+    };
 }>> & Readonly<{
     onRightClick?: ((e: import("./types").RightClickEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -53,6 +77,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     modelValue: string;
     leaveDelay: number;
     enterDelay: number;
+    beforeLeave: import("@vunk/shared").AnyFunc;
+    popup: boolean;
+    popupTrigger: "click" | "hover";
 }, {}, {
     ContextMenu: {
         new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{

package/components/popup/index.d.ts

@@ -1,5 +1,6 @@
+import VkPopupEdge from './src/edge.vue';
 import VkPopup from './src/index.vue';
 import VkPopupProvider from './src/provider.vue';
 export * as __VkPopup from './src/types';
-export { VkPopup, VkPopupProvider, };
+export { VkPopup, VkPopupEdge, VkPopupProvider, };
 export default VkPopup;

package/components/popup/index.mjs

@@ -1,5 +1,6 @@
-import { defineComponent, shallowRef, ref, computed, onMounted, onBeforeUnmount, createBlock, openBlock, unref, withCtx, createElementVNode, mergeProps, renderSlot, resolveComponent, withDirectives, createVNode, resolveDynamicComponent, vShow } from 'vue';
+import { defineComponent, shallowRef, ref, computed, watch, onBeforeUnmount, createBlock, openBlock, unref, withCtx, createElementVNode, mergeProps, renderSlot, resolveComponent, withDirectives, createVNode, resolveDynamicComponent, vShow } from 'vue';
 import { useSigma, useGraph } from '@vunk/graph/composables';
+import { useModelComputed } from '@vunk/core/composables';
 import { createGlobalRenderer } from '@vunk/core/components/global-renderer';
 import { VkGraphViewUi } from '@vunk/graph/components/graph-view-ui';
 import { _ as _export_sfc } from '../_plugin-vue_export-helper.mjs';
@@ -10,22 +11,129 @@ const {
 } = createGlobalRenderer("vunk-graph-popup");
 
 const props = {
+  /**
+   * 当前激活的node或edge
+   */
   modelValue: {
-    type: Boolean,
-    default: false
+    type: String,
+    default: void 0
   },
   /**
-   * @description 是否显示关闭按钮
+   * 触发方式
    */
-  closeable: {
-    type: Boolean,
-    default: false
+  trigger: {
+    type: String,
+    default: "click"
   }
 };
 const emits = {
   "update:modelValue": null
 };
 
+var _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "VkPopupEdge",
+    inheritAttrs: false
+  },
+  __name: "edge",
+  props: props,
+  emits,
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const model = useModelComputed({
+      default: "",
+      key: "modelValue"
+    }, props, emit);
+    const sigma = useSigma();
+    const graph = useGraph();
+    const coordinates = shallowRef([0, 0]);
+    const currentEdge = ref("");
+    const attributes = ref({});
+    const state = computed(() => ({
+      edge: currentEdge.value,
+      attributes: attributes.value,
+      visible: !!model.value,
+      coordinates: coordinates.value
+    }));
+    watch(() => props.modelValue, (edge) => {
+      if (edge) {
+        const source = graph.source(edge);
+        const target = graph.target(edge);
+        const sourceAttrs = graph.getNodeAttributes(source);
+        const targetAttrs = graph.getNodeAttributes(target);
+        if (typeof sourceAttrs.x === "number" && typeof sourceAttrs.y === "number" && typeof targetAttrs.x === "number" && typeof targetAttrs.y === "number") {
+          const x = (sourceAttrs.x + targetAttrs.x) / 2;
+          const y = (sourceAttrs.y + targetAttrs.y) / 2;
+          currentEdge.value = edge;
+          attributes.value = graph.getEdgeAttributes(edge);
+          coordinates.value = [x, y];
+        }
+      } else {
+        currentEdge.value = "";
+        attributes.value = {};
+      }
+    }, { immediate: true });
+    function onClickEdge(e) {
+      model.value = e.edge;
+    }
+    function onEnterEdge(e) {
+      model.value = e.edge;
+    }
+    function onLeaveEdge() {
+      model.value = "";
+    }
+    function onClickStage() {
+      model.value = "";
+    }
+    watch(() => props.trigger, (val) => {
+      sigma.off("clickEdge", onClickEdge);
+      sigma.off("enterEdge", onEnterEdge);
+      sigma.off("leaveEdge", onLeaveEdge);
+      sigma.off("clickStage", onClickStage);
+      if (val === "click") {
+        sigma.on("clickEdge", onClickEdge);
+        sigma.on("clickStage", onClickStage);
+      } else if (val === "hover") {
+        sigma.on("enterEdge", onEnterEdge);
+        sigma.on("leaveEdge", onLeaveEdge);
+        sigma.on("clickStage", onClickStage);
+      }
+    }, { immediate: true });
+    onBeforeUnmount(() => {
+      sigma.off("clickEdge", onClickEdge);
+      sigma.off("enterEdge", onEnterEdge);
+      sigma.off("leaveEdge", onLeaveEdge);
+      sigma.off("clickStage", onClickStage);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(GlobalRendererTemplate), {
+        active: state.value.visible,
+        data: state.value
+      }, {
+        default: withCtx(() => [
+          createElementVNode(
+            "div",
+            mergeProps({ class: "vkg-popup" }, _ctx.$attrs),
+            [
+              renderSlot(_ctx.$slots, "default", {
+                edge: state.value.edge,
+                attributes: state.value.attributes,
+                coordinates: state.value.coordinates,
+                visible: state.value.visible
+              })
+            ],
+            16
+            /* FULL_PROPS */
+          )
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 8, ["active", "data"]);
+    };
+  }
+});
+
 var _sfc_main$1 = /* @__PURE__ */ defineComponent({
   ...{
     name: "VkPopup",
@@ -39,39 +147,67 @@ var _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const emit = __emit;
     const sigma = useSigma();
     const graph = useGraph();
+    const model = useModelComputed({
+      default: "",
+      key: "modelValue"
+    }, props, emit);
     const coordinates = shallowRef([0, 0]);
     const currentNode = ref("");
     const attributes = ref({});
     const state = computed(() => ({
       node: currentNode.value,
       attributes: attributes.value,
-      visible: props.modelValue,
+      visible: !!model.value,
       coordinates: coordinates.value
     }));
+    watch(model, (node) => {
+      if (node) {
+        const attrs = graph.getNodeAttributes(node);
+        if (typeof attrs.x === "number" && typeof attrs.y === "number") {
+          currentNode.value = node;
+          attributes.value = attrs;
+          coordinates.value = [attrs.x, attrs.y];
+        }
+      } else {
+        currentNode.value = "";
+        attributes.value = {};
+      }
+    }, { immediate: true });
     function onClickNode(e) {
-      const { node } = e;
-      const attrs = graph.getNodeAttributes(node);
-      if (typeof attrs.x !== "number" || typeof attrs.y !== "number")
-        return;
-      currentNode.value = node;
-      attributes.value = attrs;
-      coordinates.value = [attrs.x, attrs.y];
-      emit("update:modelValue", true);
+      model.value = e.node;
+    }
+    function onEnterNode(e) {
+      model.value = e.node;
+    }
+    function onLeaveNode() {
+      model.value = "";
     }
     function onClickStage() {
-      emit("update:modelValue", false);
+      model.value = "";
     }
-    onMounted(() => {
-      sigma.on("clickNode", onClickNode);
-      sigma.on("clickStage", onClickStage);
-    });
+    watch(() => props.trigger, (val) => {
+      sigma.off("clickNode", onClickNode);
+      sigma.off("enterNode", onEnterNode);
+      sigma.off("leaveNode", onLeaveNode);
+      sigma.off("clickStage", onClickStage);
+      if (val === "click") {
+        sigma.on("clickNode", onClickNode);
+        sigma.on("clickStage", onClickStage);
+      } else if (val === "hover") {
+        sigma.on("enterNode", onEnterNode);
+        sigma.on("leaveNode", onLeaveNode);
+        sigma.on("clickStage", onClickStage);
+      }
+    }, { immediate: true });
     onBeforeUnmount(() => {
       sigma.off("clickNode", onClickNode);
+      sigma.off("enterNode", onEnterNode);
+      sigma.off("leaveNode", onLeaveNode);
       sigma.off("clickStage", onClickStage);
     });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(GlobalRendererTemplate), {
-        active: _ctx.modelValue,
+        active: state.value.visible,
         data: state.value
       }, {
         default: withCtx(() => [
@@ -150,8 +286,4 @@ var types = /*#__PURE__*/Object.freeze({
   __proto__: null
 });
 
-_sfc_main$1.install = (app) => {
-  app.component(_sfc_main$1.name || "VkPopup", _sfc_main$1);
-};
-
-export { _sfc_main$1 as VkPopup, provider as VkPopupProvider, types as __VkPopup, _sfc_main$1 as default };
+export { _sfc_main$1 as VkPopup, _sfc_main$2 as VkPopupEdge, provider as VkPopupProvider, types as __VkPopup, _sfc_main$1 as default };

package/components/popup/src/ctx.d.ts

@@ -1,14 +1,18 @@
+import type { PropType } from 'vue';
 export declare const props: {
+    /**
+     * 当前激活的node或edge
+     */
     modelValue: {
-        type: BooleanConstructor;
-        default: boolean;
+        type: StringConstructor;
+        default: undefined;
     };
     /**
-     * @description 是否显示关闭按钮
+     * 触发方式
      */
-    closeable: {
-        type: BooleanConstructor;
-        default: boolean;
+    trigger: {
+        type: PropType<"hover" | "click" | "none">;
+        default: string;
     };
 };
 export declare const emits: {

package/components/popup/src/edge.vue.d.ts

@@ -0,0 +1,84 @@
+import type { NormalObject } from '@vunk/shared';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    trigger: {
+        type: import("vue").PropType<"hover" | "click" | "none">;
+        default: string;
+    };
+}>, {
+    props: import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
+        modelValue: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        trigger: {
+            type: import("vue").PropType<"hover" | "click" | "none">;
+            default: string;
+        };
+    }>> & Readonly<{
+        "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    }> & {}>;
+    emit: (event: "update:modelValue", ...args: any[]) => void;
+    model: import("vue").WritableComputedRef<string, string>;
+    sigma: import("sigma").default<import("graphology-types").Attributes, import("graphology-types").Attributes, import("graphology-types").Attributes>;
+    graph: import("graphology").default<import("graphology-types").Attributes, import("graphology-types").Attributes, import("graphology-types").Attributes>;
+    coordinates: import("vue").ShallowRef<number[], number[]>;
+    currentEdge: import("vue").Ref<string, string>;
+    attributes: import("vue").Ref<NormalObject, NormalObject>;
+    state: import("vue").ComputedRef<{
+        edge: string;
+        attributes: NormalObject;
+        visible: boolean;
+        coordinates: number[];
+    }>;
+    onClickEdge: (e: {
+        edge: string;
+    }) => void;
+    onEnterEdge: (e: {
+        edge: string;
+    }) => void;
+    onLeaveEdge: () => void;
+    onClickStage: () => void;
+    readonly GlobalRendererTemplate: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        active: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        data: {
+            type: import("vue").PropType<import("@vunk/graph/entry").NormalObject>;
+            default: () => {};
+        };
+    }>, () => any, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        active: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        data: {
+            type: import("vue").PropType<import("@vunk/graph/entry").NormalObject>;
+            default: () => {};
+        };
+    }>> & Readonly<{}>, {
+        data: import("@vunk/graph/entry").NormalObject;
+        active: boolean;
+    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'update:modelValue': null;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    trigger: {
+        type: import("vue").PropType<"hover" | "click" | "none">;
+        default: string;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    modelValue: string;
+    trigger: "none" | "click" | "hover";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/components/popup/src/index.vue.d.ts

@@ -1,21 +1,21 @@
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     modelValue: {
-        type: BooleanConstructor;
-        default: boolean;
+        type: StringConstructor;
+        default: undefined;
     };
-    closeable: {
-        type: BooleanConstructor;
-        default: boolean;
+    trigger: {
+        type: import("vue").PropType<"hover" | "click" | "none">;
+        default: string;
     };
 }>, {
     props: import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
         modelValue: {
-            type: BooleanConstructor;
-            default: boolean;
+            type: StringConstructor;
+            default: undefined;
         };
-        closeable: {
-            type: BooleanConstructor;
-            default: boolean;
+        trigger: {
+            type: import("vue").PropType<"hover" | "click" | "none">;
+            default: string;
         };
     }>> & Readonly<{
         "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -23,6 +23,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     emit: (event: "update:modelValue", ...args: any[]) => void;
     sigma: import("sigma").default<import("graphology-types").Attributes, import("graphology-types").Attributes, import("graphology-types").Attributes>;
     graph: import("graphology").default<import("graphology-types").Attributes, import("graphology-types").Attributes, import("graphology-types").Attributes>;
+    model: import("vue").WritableComputedRef<string, string>;
     coordinates: import("vue").ShallowRef<number[], number[]>;
     currentNode: import("vue").Ref<string, string>;
     attributes: import("vue").Ref<{}, {}>;
@@ -35,6 +36,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onClickNode: (e: {
         node: string;
     }) => void;
+    onEnterNode: (e: {
+        node: string;
+    }) => void;
+    onLeaveNode: () => void;
     onClickStage: () => void;
     readonly GlobalRendererTemplate: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         active: {
@@ -62,17 +67,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     'update:modelValue': null;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
-        type: BooleanConstructor;
-        default: boolean;
+        type: StringConstructor;
+        default: undefined;
     };
-    closeable: {
-        type: BooleanConstructor;
-        default: boolean;
+    trigger: {
+        type: import("vue").PropType<"hover" | "click" | "none">;
+        default: string;
     };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
-    modelValue: boolean;
-    closeable: boolean;
+    modelValue: string;
+    trigger: "none" | "click" | "hover";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/components/popup/src/provider.vue.d.ts

@@ -1,28 +1,28 @@
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     modelValue: {
-        type: BooleanConstructor;
-        default: boolean;
+        type: StringConstructor;
+        default: undefined;
     };
-    closeable: {
-        type: BooleanConstructor;
-        default: boolean;
+    trigger: {
+        type: import("vue").PropType<"hover" | "click" | "none">;
+        default: string;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     'update:modelValue': null;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
-        type: BooleanConstructor;
-        default: boolean;
+        type: StringConstructor;
+        default: undefined;
     };
-    closeable: {
-        type: BooleanConstructor;
-        default: boolean;
+    trigger: {
+        type: import("vue").PropType<"hover" | "click" | "none">;
+        default: string;
     };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
-    modelValue: boolean;
-    closeable: boolean;
+    modelValue: string;
+    trigger: "none" | "click" | "hover";
 }, {}, {
     VkGraphViewUi: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         coordinates: {

package/composables/index.d.ts

@@ -1 +1 @@
-export { useGraph, useSigma } from '@vunk/graph/components/graph';
+export { useEdgeReducer, useGraph, useNodeReducer, useSigma } from '@vunk/graph/components/graph';

package/composables/index.mjs

@@ -1 +1 @@
-export { useGraph, useSigma } from '@vunk/graph/components/graph';
+export { useEdgeReducer, useGraph, useNodeReducer, useSigma } from '@vunk/graph/components/graph';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vunk/graph",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "",
   "author": "",
   "license": "ISC",