@vunk/graph 0.0.1

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

@@ -0,0 +1,194 @@
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    contextMenu: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    leaveDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    enterDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    activeColor: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {
+    props: import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
+        contextMenu: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        modelValue: {
+            type: StringConstructor;
+            default: string;
+        };
+        leaveDelay: {
+            type: NumberConstructor;
+            default: number;
+        };
+        enterDelay: {
+            type: NumberConstructor;
+            default: number;
+        };
+        activeColor: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>> & Readonly<{
+        onRightClick?: ((e: import("./types").RightClickEvent) => any) | undefined;
+        "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    }> & {}>;
+    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>;
+    contextmenuState: {
+        edge: string;
+        show: boolean;
+        options: {
+            x: number;
+            y: number;
+        };
+    };
+    oldNodeReducer: any;
+    oldEdgeReducer: any;
+    isApplied: boolean;
+    enterTimer: any;
+    leaveTimer: any;
+    enterHandler: ({ edge }: {
+        edge: string;
+    }) => void;
+    leaveHandler: () => void;
+    rightClickHandler: ({ event }: any) => void;
+    changeContextmenuShow: (show: boolean) => void;
+    readonly ContextMenu: {
+        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
+            options: {
+                type: import("vue").PropType<import("@vunk/graph/components/context-menu").MenuOptions>;
+                default: null;
+            };
+            show: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+        }>> & {
+            onClose?: ((...args: any[]) => any) | undefined;
+            "onUpdate:show"?: ((...args: any[]) => any) | undefined;
+        }, {
+            closeMenu: () => void;
+            isClosed: () => boolean;
+            getMenuRef: () => import("@vunk/graph/components/context-menu").ContextSubMenuInstance | undefined;
+            getMenuDimensions: () => {
+                width: number;
+                height: number;
+            };
+        }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+            close: (...args: any[]) => void;
+            "update:show": (...args: any[]) => void;
+        }, import("vue").PublicProps, {
+            options: import("@vunk/graph/components/context-menu").MenuOptions;
+            show: boolean;
+        }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import("vue").ExtractPropTypes<{
+            options: {
+                type: import("vue").PropType<import("@vunk/graph/components/context-menu").MenuOptions>;
+                default: null;
+            };
+            show: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+        }>> & {
+            onClose?: ((...args: any[]) => any) | undefined;
+            "onUpdate:show"?: ((...args: any[]) => any) | undefined;
+        }, {
+            closeMenu: () => void;
+            isClosed: () => boolean;
+            getMenuRef: () => import("@vunk/graph/components/context-menu").ContextSubMenuInstance | undefined;
+            getMenuDimensions: () => {
+                width: number;
+                height: number;
+            };
+        }, {}, {}, {}, {
+            options: import("@vunk/graph/components/context-menu").MenuOptions;
+            show: boolean;
+        }>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+        options: {
+            type: import("vue").PropType<import("@vunk/graph/components/context-menu").MenuOptions>;
+            default: null;
+        };
+        show: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>> & {
+        onClose?: ((...args: any[]) => any) | undefined;
+        "onUpdate:show"?: ((...args: any[]) => any) | undefined;
+    }, {
+        closeMenu: () => void;
+        isClosed: () => boolean;
+        getMenuRef: () => import("@vunk/graph/components/context-menu").ContextSubMenuInstance | undefined;
+        getMenuDimensions: () => {
+            width: number;
+            height: number;
+        };
+    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        close: (...args: any[]) => void;
+        "update:show": (...args: any[]) => void;
+    }, string, {
+        options: import("@vunk/graph/components/context-menu").MenuOptions;
+        show: boolean;
+    }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+        $slots: Partial<Record<number, (_: any) => any>>;
+    });
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'update:modelValue': null;
+    rightClick: (e: import("./types").RightClickEvent) => import("./types").RightClickEvent;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    contextMenu: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    leaveDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    enterDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    activeColor: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    onRightClick?: ((e: import("./types").RightClickEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    contextMenu: boolean;
+    modelValue: string;
+    leaveDelay: number;
+    enterDelay: number;
+    activeColor: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,4 @@
+export interface RightClickEvent {
+    edge: string;
+    original: MouseEvent;
+}

package/components/hover-highlight/index.d.ts

@@ -0,0 +1,4 @@
+import VkHoverHighlight from './src/index.vue';
+export * as __VkHoverHighlight from './src/types';
+export { VkHoverHighlight, };
+export default VkHoverHighlight;

package/components/hover-highlight/index.mjs

@@ -0,0 +1,133 @@
+import { useSigma } from '@vunk/graph/composables';
+import { defineComponent, watch, onMounted, onUnmounted, renderSlot } from 'vue';
+import { _ as _export_sfc } from '../_plugin-vue_export-helper.mjs';
+
+const props = {
+  /**
+   * 当前高亮的节点 ID。支持 v-model。
+   */
+  modelValue: {
+    type: String,
+    default: ""
+  },
+  /**
+   * 鼠标悬浮触发高亮的延迟时间 (ms)
+   */
+  delay: {
+    type: Number,
+    default: 500
+  },
+  /**
+   * 非高亮节点在淡出时的颜色（通常为带透明度的背景色）
+   */
+  nodeFadeColor: {
+    type: String,
+    default: "rgba(0, 0, 0, 0.1)"
+  },
+  /**
+   * 非高亮边在淡出时的颜色
+   */
+  edgeFadeColor: {
+    type: String,
+    default: "rgba(0, 0, 0, 0.05)"
+  }
+};
+const emits = {
+  "update:modelValue": null
+};
+
+var _sfc_main = defineComponent({
+  name: "VkHoverHighlight",
+  props,
+  emits,
+  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;
+        }
+      }
+    });
+    let timer = null;
+    const enterHandler = ({ node }) => {
+      timer = setTimeout(() => {
+        emit("update:modelValue", node);
+      }, props2.delay);
+    };
+    const leaveHandler = () => {
+      clearTimeout(timer);
+      emit("update:modelValue", "");
+    };
+    onMounted(() => {
+      sigma.on("enterNode", enterHandler);
+      sigma.on("leaveNode", leaveHandler);
+    });
+    onUnmounted(() => {
+      clearTimeout(timer);
+      sigma.off("enterNode", enterHandler);
+      sigma.off("leaveNode", leaveHandler);
+      if (isApplied) {
+        sigma.setSetting("nodeReducer", oldNodeReducer);
+        sigma.setSetting("edgeReducer", oldEdgeReducer);
+      }
+    });
+    return {};
+  }
+});
+
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return renderSlot(_ctx.$slots, "default");
+}
+var VkHoverHighlight = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+
+var types = /*#__PURE__*/Object.freeze({
+  __proto__: null
+});
+
+VkHoverHighlight.install = (app) => {
+  app.component(VkHoverHighlight.name || "VkHoverHighlight", VkHoverHighlight);
+};
+
+export { VkHoverHighlight, types as __VkHoverHighlight, VkHoverHighlight as default };

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

@@ -0,0 +1,33 @@
+export declare const props: {
+    /**
+     * 当前高亮的节点 ID。支持 v-model。
+     */
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * 鼠标悬浮触发高亮的延迟时间 (ms)
+     */
+    delay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * 非高亮节点在淡出时的颜色（通常为带透明度的背景色）
+     */
+    nodeFadeColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * 非高亮边在淡出时的颜色
+     */
+    edgeFadeColor: {
+        type: StringConstructor;
+        default: string;
+    };
+};
+export declare const emits: {
+    'update:modelValue': null;
+};

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

@@ -0,0 +1,45 @@
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    delay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    nodeFadeColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    edgeFadeColor: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'update:modelValue': null;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    delay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    nodeFadeColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    edgeFadeColor: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    modelValue: string;
+    delay: number;
+    nodeFadeColor: string;
+    edgeFadeColor: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/components/hover-highlight/src/types.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,4 @@
+import VkHoverNode from './src/index.vue';
+export * as __VkHoverNode from './src/types';
+export { VkHoverNode, };
+export default VkHoverNode;

package/components/hover-node/index.mjs

@@ -0,0 +1,146 @@
+import { ContextMenu } from '@vunk/graph/components/context-menu';
+import { useSigma } from '@vunk/graph/composables';
+import { defineComponent, reactive, onMounted, onBeforeUnmount, resolveComponent, createBlock, createCommentVNode, openBlock, withCtx, renderSlot } from 'vue';
+import { _ as _export_sfc } from '../_plugin-vue_export-helper.mjs';
+
+const props = {
+  /**
+   * 是否启用右键菜单功能
+   */
+  contextMenu: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 当前悬浮的节点 ID。支持 v-model。
+   */
+  modelValue: {
+    type: String,
+    default: ""
+  },
+  /**
+   * 移除时的延迟时间 (ms)
+   */
+  leaveDelay: {
+    type: Number,
+    default: 100
+  },
+  /**
+   * 进入时的延迟时间 (ms)
+   */
+  enterDelay: {
+    type: Number,
+    default: 0
+  }
+};
+const emits = {
+  "update:modelValue": null,
+  "rightClick": (e) => e
+};
+
+var _sfc_main = defineComponent({
+  name: "VkHoverNode",
+  components: {
+    ContextMenu
+  },
+  props,
+  emits,
+  setup(props2, { emit }) {
+    const sigma = useSigma();
+    const contextmenuState = reactive({
+      node: "",
+      show: false,
+      options: {
+        x: 0,
+        y: 0
+      }
+    });
+    let enterTimer = null;
+    let leaveTimer = null;
+    const enterHandler = ({ node }) => {
+      clearTimeout(leaveTimer);
+      enterTimer = setTimeout(() => {
+        emit("update:modelValue", node);
+      }, props2.enterDelay);
+    };
+    const leaveHandler = () => {
+      clearTimeout(enterTimer);
+      leaveTimer = setTimeout(() => {
+        if (props2.contextMenu && contextmenuState.show)
+          return;
+        emit("update:modelValue", "");
+      }, props2.leaveDelay);
+    };
+    onMounted(() => {
+      sigma.on("enterNode", enterHandler);
+      sigma.on("leaveNode", leaveHandler);
+    });
+    onBeforeUnmount(() => {
+      clearTimeout(enterTimer);
+      clearTimeout(leaveTimer);
+      sigma.off("enterNode", enterHandler);
+      sigma.off("leaveNode", leaveHandler);
+    });
+    onMounted(() => {
+      sigma.on("rightClickNode", rightClickHandler);
+      sigma.on("rightClickStage", rightClickHandler);
+    });
+    onBeforeUnmount(() => {
+      sigma.off("rightClickNode", rightClickHandler);
+      sigma.off("rightClickStage", rightClickHandler);
+    });
+    function rightClickHandler({ event }) {
+      if (props2.modelValue) {
+        const { original } = event;
+        original.preventDefault();
+        contextmenuState.show = true;
+        contextmenuState.node = props2.modelValue;
+        contextmenuState.options.x = original.x;
+        contextmenuState.options.y = original.y;
+        emit("rightClick", {
+          node: props2.modelValue,
+          original
+        });
+      }
+    }
+    function changeContextmenuShow(show) {
+      !show && leaveHandler();
+    }
+    return {
+      changeContextmenuShow,
+      contextmenuState
+    };
+  }
+});
+
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ContextMenu = resolveComponent("ContextMenu");
+  return _ctx.contextMenu ? (openBlock(), createBlock(_component_ContextMenu, {
+    key: 0,
+    show: _ctx.contextmenuState.show,
+    "onUpdate:show": [
+      _cache[0] || (_cache[0] = ($event) => _ctx.contextmenuState.show = $event),
+      _ctx.changeContextmenuShow
+    ],
+    options: _ctx.contextmenuState.options
+  }, {
+    default: withCtx(() => [
+      renderSlot(_ctx.$slots, "default", {
+        node: _ctx.contextmenuState.node
+      })
+    ]),
+    _: 3
+    /* FORWARDED */
+  }, 8, ["show", "options", "onUpdate:show"])) : createCommentVNode("v-if", true);
+}
+var VkHoverNode = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+
+var types = /*#__PURE__*/Object.freeze({
+  __proto__: null
+});
+
+VkHoverNode.install = (app) => {
+  app.component(VkHoverNode.name || "VkHoverNode", VkHoverNode);
+};
+
+export { VkHoverNode, types as __VkHoverNode, VkHoverNode as default };

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

@@ -0,0 +1,35 @@
+import type { RightClickEvent } from './types';
+export declare const props: {
+    /**
+     * 是否启用右键菜单功能
+     */
+    contextMenu: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * 当前悬浮的节点 ID。支持 v-model。
+     */
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * 移除时的延迟时间 (ms)
+     */
+    leaveDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * 进入时的延迟时间 (ms)
+     */
+    enterDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
+};
+export declare const emits: {
+    'update:modelValue': null;
+    rightClick: (e: RightClickEvent) => RightClickEvent;
+};