@vunk/graph 0.0.1

package/components/graph/index.css

@@ -0,0 +1,5 @@
+.vkg-grap, .vkg-grap-x {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}

package/components/graph/index.d.ts

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

package/components/graph/index.mjs

@@ -0,0 +1,110 @@
+import { 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';
+import Graph from 'graphology';
+
+const props = {
+  /**
+   * Sigma.js 的初始化配置项
+   */
+  defaultOptions: {
+    type: Object,
+    default: () => ({})
+  }
+};
+const emits = {};
+
+const key$1 = "vunk-graph";
+function initGraph() {
+  const graph = new Graph();
+  provide(key$1, graph);
+  return graph;
+}
+function useGraph() {
+  const graph = inject(key$1);
+  if (!graph) {
+    throw new Error("Graph is not provided");
+  }
+  return graph;
+}
+
+const key = "vunk-graph-sigma";
+function provideSigma(sigma) {
+  provide(key, sigma);
+}
+function useSigma() {
+  const sigma = inject(key);
+  if (!sigma) {
+    throw new Error("Sigma is not provided");
+  }
+  return sigma;
+}
+
+const _hoisted_1 = { class: "vkg-grap-x" };
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "VkGraph"
+  },
+  __name: "index",
+  props: props,
+  emits,
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const elRef = ref();
+    const graph = initGraph();
+    const ready = ref(false);
+    onMounted(() => {
+      const sigma = new Sigma(graph, elRef.value, {
+        renderEdgeLabels: true,
+        enableEdgeEvents: true,
+        ...props.defaultOptions
+      });
+      provideSigma(sigma);
+      ready.value = true;
+      emit("load", { sigma, graph });
+      onBeforeUnmount(() => {
+        sigma.kill();
+      });
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode(
+          "div",
+          {
+            ref_key: "elRef",
+            ref: elRef,
+            class: "vkg-grap"
+          },
+          null,
+          512
+          /* NEED_PATCH */
+        ),
+        createVNode(unref(VkLabelProvider), null, {
+          default: withCtx(() => [
+            ready.value ? (openBlock(), createBlock(unref(VkPopupProvider), { key: 0 }, {
+              default: withCtx(() => [
+                renderSlot(_ctx.$slots, "default")
+              ]),
+              _: 3
+              /* FORWARDED */
+            })) : createCommentVNode("v-if", true)
+          ]),
+          _: 3
+          /* FORWARDED */
+        })
+      ]);
+    };
+  }
+});
+
+var types = /*#__PURE__*/Object.freeze({
+  __proto__: null
+});
+
+_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 };

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

@@ -0,0 +1,12 @@
+import type { PropType } from 'vue';
+import type { DefaultOptions } from './types';
+export declare const props: {
+    /**
+     * Sigma.js 的初始化配置项
+     */
+    defaultOptions: {
+        type: PropType<DefaultOptions>;
+        default: () => {};
+    };
+};
+export declare const emits: {};

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

@@ -0,0 +1,74 @@
+import type { Ref } from 'vue';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    defaultOptions: {
+        type: import("vue").PropType<import("./types").DefaultOptions>;
+        default: () => {};
+    };
+}>, {
+    props: import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
+        defaultOptions: {
+            type: import("vue").PropType<import("./types").DefaultOptions>;
+            default: () => {};
+        };
+    }>> & Readonly<{}> & {}>;
+    emit: (event: string, ...args: any[]) => void;
+    elRef: Ref<HTMLDivElement, HTMLDivElement>;
+    graph: import("graphology").default<import("graphology-types").Attributes, import("graphology-types").Attributes, import("graphology-types").Attributes>;
+    ready: Ref<boolean, boolean>;
+    readonly VkLabelProvider: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>[], {}, {}, {}, 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;
+        };
+        closeable: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        'update:modelValue': null;
+    }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        modelValue: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        closeable: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>> & Readonly<{
+        "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    }>, {
+        modelValue: boolean;
+        closeable: boolean;
+    }, {}, {
+        VkGraphViewUi: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+            coordinates: {
+                type: import("vue").PropType<number[]>;
+                default: () => number[];
+            };
+        }>, {
+            style: Ref<import("@vunk/shared").NormalObject, import("@vunk/shared").NormalObject>;
+        }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+            coordinates: {
+                type: import("vue").PropType<number[]>;
+                default: () => number[];
+            };
+        }>> & Readonly<{}>, {
+            coordinates: number[];
+        }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+        GlobalRenderer: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }>[][], {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    defaultOptions: {
+        type: import("vue").PropType<import("./types").DefaultOptions>;
+        default: () => {};
+    };
+}>> & Readonly<{}>, {
+    defaultOptions: Partial<import("sigma/dist/declarations/src/settings").Settings<import("graphology-types").Attributes, import("graphology-types").Attributes, import("graphology-types").Attributes>> | undefined;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,7 @@
+import type Graph from 'graphology';
+import type { Sigma } from 'sigma';
+export type DefaultOptions = ConstructorParameters<typeof Sigma>[2];
+export interface LoadEvent {
+    sigma: Sigma;
+    graph: Graph;
+}

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

@@ -0,0 +1,3 @@
+import Graph from 'graphology';
+export declare function initGraph(): Graph;
+export declare function useGraph(): Graph;

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

@@ -0,0 +1,3 @@
+import type Sigma from 'sigma';
+export declare function provideSigma(sigma: Sigma): void;
+export declare function useSigma(): Sigma;

package/components/graph-view-ui/index.css

@@ -0,0 +1,8 @@
+.vkg-graph-view-ui {
+  z-index: 1;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+.vkg-graph-view-ui > * {
+  pointer-events: auto;
+}

package/components/graph-view-ui/index.d.ts

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

package/components/graph-view-ui/index.mjs

@@ -0,0 +1,81 @@
+import { useSigma } from '@vunk/graph/components/graph';
+import { defineComponent, ref, onMounted, watch, onBeforeUnmount, createElementBlock, openBlock, normalizeStyle, renderSlot } from 'vue';
+import { _ as _export_sfc } from '../_plugin-vue_export-helper.mjs';
+
+const props = {
+  /**
+   * 图表内的坐标点 [x, y]
+   */
+  coordinates: {
+    type: Array,
+    default: () => [0, 0]
+  }
+};
+const emits = {};
+
+var _sfc_main = defineComponent({
+  name: "VkGraphViewUi",
+  props,
+  emits,
+  setup(props2) {
+    const sigma = useSigma();
+    const style = ref({
+      "position": "absolute",
+      "left": "0",
+      "top": "0",
+      "display": "none",
+      "--vkg-graph-ratio": "1",
+      "--vkg-graph-spacing": "1px"
+    });
+    const updatePosition = () => {
+      if (!props2.coordinates || props2.coordinates.length < 2) {
+        style.value.display = "none";
+        return;
+      }
+      const [x, y] = props2.coordinates;
+      const pos = sigma.graphToViewport({ x, y });
+      const ratio = sigma.getCamera().ratio;
+      style.value["--vkg-graph-ratio"] = ratio.toString();
+      style.value["--vkg-graph-spacing"] = `${1 / ratio}px`;
+      style.value.left = `${pos.x}px`;
+      style.value.top = `${pos.y}px`;
+      style.value.display = "block";
+    };
+    onMounted(() => {
+      sigma.on("afterRender", updatePosition);
+      watch(() => props2.coordinates, updatePosition, { deep: true, immediate: true });
+    });
+    onBeforeUnmount(() => {
+      sigma.off("afterRender", updatePosition);
+    });
+    return {
+      style
+    };
+  }
+});
+
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock(
+    "div",
+    {
+      class: "vkg-graph-view-ui",
+      style: normalizeStyle(_ctx.style)
+    },
+    [
+      renderSlot(_ctx.$slots, "default")
+    ],
+    4
+    /* STYLE */
+  );
+}
+var VkGraphViewUi = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+
+var types = /*#__PURE__*/Object.freeze({
+  __proto__: null
+});
+
+VkGraphViewUi.install = (app) => {
+  app.component(VkGraphViewUi.name || "VkGraphViewUi", VkGraphViewUi);
+};
+
+export { VkGraphViewUi, types as __VkGraphViewUi, VkGraphViewUi as default };

package/components/graph-view-ui/src/ctx.d.ts

@@ -0,0 +1,11 @@
+import type { PropType } from 'vue';
+export declare const props: {
+    /**
+     * 图表内的坐标点 [x, y]
+     */
+    coordinates: {
+        type: PropType<number[]>;
+        default: () => number[];
+    };
+};
+export declare const emits: {};

package/components/graph-view-ui/src/index.vue.d.ts

@@ -0,0 +1,17 @@
+import type { NormalObject } from '@vunk/shared';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    coordinates: {
+        type: import("vue").PropType<number[]>;
+        default: () => number[];
+    };
+}>, {
+    style: import("vue").Ref<NormalObject, NormalObject>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    coordinates: {
+        type: import("vue").PropType<number[]>;
+        default: () => number[];
+    };
+}>> & Readonly<{}>, {
+    coordinates: number[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/components/graph-view-ui/src/types.d.ts

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

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

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

package/components/hover-edge/index.mjs

@@ -0,0 +1,179 @@
+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';
+
+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
+  },
+  /**
+   * 悬浮时高亮显示时的颜色
+   */
+  activeColor: {
+    type: String,
+    default: "#409EFF"
+  }
+};
+const emits = {
+  "update:modelValue": null,
+  "rightClick": (e) => e
+};
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "VkHoverEdge" },
+  __name: "index",
+  props: props,
+  emits,
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const sigma = useSigma();
+    const graph = useGraph();
+    const contextmenuState = reactive({
+      edge: "",
+      show: false,
+      options: {
+        x: 0,
+        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;
+        }
+      }
+    });
+    let enterTimer = null;
+    let leaveTimer = null;
+    function enterHandler({ edge }) {
+      clearTimeout(leaveTimer);
+      enterTimer = setTimeout(() => {
+        emit("update:modelValue", edge);
+      }, props.enterDelay);
+    }
+    function leaveHandler() {
+      clearTimeout(enterTimer);
+      leaveTimer = setTimeout(() => {
+        if (props.contextMenu && contextmenuState.show)
+          return;
+        emit("update:modelValue", "");
+      }, props.leaveDelay);
+    }
+    onMounted(() => {
+      sigma.on("enterEdge", enterHandler);
+      sigma.on("leaveEdge", leaveHandler);
+    });
+    onBeforeUnmount(() => {
+      clearTimeout(enterTimer);
+      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);
+      sigma.on("rightClickStage", rightClickHandler);
+    });
+    onBeforeUnmount(() => {
+      sigma.off("rightClickEdge", rightClickHandler);
+      sigma.off("rightClickStage", rightClickHandler);
+    });
+    function rightClickHandler({ event }) {
+      if (props.modelValue) {
+        const { original } = event;
+        original.preventDefault();
+        contextmenuState.show = true;
+        contextmenuState.edge = props.modelValue;
+        contextmenuState.options.x = original.x;
+        contextmenuState.options.y = original.y;
+        emit("rightClick", {
+          edge: props.modelValue,
+          original
+        });
+      }
+    }
+    function changeContextmenuShow(show) {
+      !show && leaveHandler();
+    }
+    return (_ctx, _cache) => {
+      return _ctx.contextMenu ? (openBlock(), createBlock(unref(ContextMenu), {
+        key: 0,
+        show: contextmenuState.show,
+        "onUpdate:show": [
+          _cache[0] || (_cache[0] = ($event) => contextmenuState.show = $event),
+          changeContextmenuShow
+        ],
+        options: contextmenuState.options
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default", {
+            edge: contextmenuState.edge
+          })
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 8, ["show", "options"])) : createCommentVNode("v-if", true);
+    };
+  }
+});
+
+var types = /*#__PURE__*/Object.freeze({
+  __proto__: null
+});
+
+_sfc_main.install = (app) => {
+  app.component(_sfc_main.name || "VkHoverEdge", _sfc_main);
+};
+
+export { _sfc_main as VkHoverEdge, types as __VkHoverEdge, _sfc_main as default };

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

@@ -0,0 +1,42 @@
+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;
+    };
+    /**
+     * 悬浮时高亮显示时的颜色
+     */
+    activeColor: {
+        type: StringConstructor;
+        default: string;
+    };
+};
+export declare const emits: {
+    'update:modelValue': null;
+    rightClick: (e: RightClickEvent) => RightClickEvent;
+};