@vunk/graph 0.0.1

package/components/search/index.mjs

@@ -0,0 +1,218 @@
+import { useSigma } from '@vunk/graph/composables';
+import { defineComponent, ref, watch, onUnmounted, renderSlot, normalizeProps, guardReactiveProps } from 'vue';
+import { _ as _export_sfc } from '../_plugin-vue_export-helper.mjs';
+
+function defaultNodeFilter(node, attributes, query) {
+  if (!query)
+    return false;
+  return attributes.label?.toLowerCase().includes(query.toLowerCase());
+}
+function defaultEdgeFilter(edge, attributes, query) {
+  if (!query)
+    return false;
+  return attributes.label?.toLowerCase().includes(query.toLowerCase());
+}
+const props = {
+  /**
+   * 搜索关键字
+   */
+  modelValue: {
+    type: String,
+    default: ""
+  },
+  /**
+   * 节点过滤函数，返回 true 表示匹配
+   */
+  nodeFilter: {
+    type: Function,
+    default: defaultNodeFilter
+  },
+  /**
+   * 关系过滤函数，返回 true 表示匹配
+   */
+  edgeFilter: {
+    type: Function,
+    default: defaultEdgeFilter
+  },
+  /**
+   * 非高亮节点在淡出时的颜色
+   */
+  nodeFadeColor: {
+    type: String,
+    default: "rgba(0, 0, 0, 0.1)"
+  },
+  /**
+   * 非高亮边在淡出时的颜色
+   */
+  edgeFadeColor: {
+    type: String,
+    default: "rgba(0, 0, 0, 0.05)"
+  },
+  /**
+   * 是否自动高亮匹配到的结果
+   */
+  autoHighlight: {
+    type: Boolean,
+    default: true
+  }
+};
+const emits = {
+  "update:modelValue": (val) => typeof val === "string",
+  "search": (_e) => true
+};
+
+var _sfc_main = defineComponent({
+  name: "VkSearch",
+  props,
+  emits,
+  setup(props2, { emit }) {
+    const sigma = useSigma();
+    const graph = sigma.getGraph();
+    const matchedNodes = ref([]);
+    const matchedEdges = ref([]);
+    const suggestions = ref([]);
+    const neighborNodes = ref([]);
+    const neighborEdges = ref([]);
+    const edgeExtremities = ref([]);
+    let oldNodeReducer = null;
+    let oldEdgeReducer = null;
+    let isApplied = false;
+    const applyHighlights = () => {
+      if (!props2.autoHighlight || matchedNodes.value.length === 0 && matchedEdges.value.length === 0) {
+        if (isApplied) {
+          sigma.setSetting("nodeReducer", oldNodeReducer);
+          sigma.setSetting("edgeReducer", oldEdgeReducer);
+          isApplied = false;
+        }
+        return;
+      }
+      if (!isApplied) {
+        oldNodeReducer = sigma.getSetting("nodeReducer");
+        oldEdgeReducer = sigma.getSetting("edgeReducer");
+        isApplied = true;
+      }
+      const nodesToHighlight = new Set(matchedNodes.value);
+      const edgesToHighlight = new Set(matchedEdges.value);
+      const neighborsSet = new Set(neighborNodes.value);
+      const connectedEdgesSet = new Set(neighborEdges.value);
+      const extremitiesOfMatchedEdges = new Set(edgeExtremities.value);
+      sigma.setSetting("nodeReducer", (node, data) => {
+        const baseData = oldNodeReducer ? oldNodeReducer(node, data) : data;
+        if (nodesToHighlight.has(node) || extremitiesOfMatchedEdges.has(node)) {
+          return { ...baseData, zIndex: 3 };
+        }
+        if (neighborsSet.has(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 (edgesToHighlight.has(edge) || connectedEdgesSet.has(edge)) {
+          return { ...baseData, zIndex: 10 };
+        }
+        return {
+          ...baseData,
+          color: props2.edgeFadeColor,
+          label: "",
+          zIndex: 0
+        };
+      });
+    };
+    watch(() => props2.modelValue, (query) => {
+      const nodes = [];
+      const edges = [];
+      const list = [];
+      if (query) {
+        graph.forEachNode((node, attrs) => {
+          if (props2.nodeFilter(node, attrs, query)) {
+            nodes.push(node);
+            list.push({
+              id: node,
+              label: attrs.label || node,
+              type: "node",
+              attributes: attrs
+            });
+          }
+        });
+        graph.forEachEdge((edge, attrs) => {
+          if (props2.edgeFilter(edge, attrs, query)) {
+            edges.push(edge);
+            list.push({
+              id: edge,
+              label: attrs.label || edge,
+              type: "edge",
+              attributes: attrs
+            });
+          }
+        });
+      }
+      matchedNodes.value = nodes;
+      matchedEdges.value = edges;
+      suggestions.value = list;
+      const nNodes = /* @__PURE__ */ new Set();
+      const nEdges = /* @__PURE__ */ new Set();
+      nodes.forEach((nodeId) => {
+        graph.forEachNeighbor(nodeId, (neighbor) => {
+          nNodes.add(neighbor);
+        });
+        graph.forEachEdge(nodeId, (edge) => {
+          nEdges.add(edge);
+        });
+      });
+      neighborNodes.value = Array.from(nNodes);
+      neighborEdges.value = Array.from(nEdges);
+      const extremities = /* @__PURE__ */ new Set();
+      edges.forEach((edgeId) => {
+        extremities.add(graph.source(edgeId));
+        extremities.add(graph.target(edgeId));
+      });
+      edgeExtremities.value = Array.from(extremities);
+      applyHighlights();
+      emit("search", {
+        matchedNodes: nodes,
+        matchedEdges: edges,
+        suggestions: list,
+        neighborNodes: neighborNodes.value,
+        neighborEdges: neighborEdges.value,
+        edgeExtremities: edgeExtremities.value
+      });
+    }, { immediate: true });
+    watch(() => props2.autoHighlight, applyHighlights);
+    onUnmounted(() => {
+      if (isApplied) {
+        sigma.setSetting("nodeReducer", oldNodeReducer);
+        sigma.setSetting("edgeReducer", oldEdgeReducer);
+      }
+    });
+    return {
+      matchedNodes,
+      matchedEdges,
+      suggestions,
+      neighborNodes,
+      neighborEdges,
+      edgeExtremities
+    };
+  }
+});
+
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ matchedNodes: _ctx.matchedNodes, matchedEdges: _ctx.matchedEdges, suggestions: _ctx.suggestions, neighborNodes: _ctx.neighborNodes, neighborEdges: _ctx.neighborEdges, edgeExtremities: _ctx.edgeExtremities })));
+}
+var VkSearch = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+
+var types = /*#__PURE__*/Object.freeze({
+  __proto__: null
+});
+
+VkSearch.install = (app) => {
+  app.component(VkSearch.name || "VkSearch", VkSearch);
+};
+
+export { VkSearch, types as __VkSearch, VkSearch as default };

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

@@ -0,0 +1,53 @@
+import type { PropType } from 'vue';
+import type { EdgeFilter, NodeFilter, SearchEvent } from './types';
+declare function defaultNodeFilter(node: string, attributes: any, query: string): boolean;
+declare function defaultEdgeFilter(edge: string, attributes: any, query: string): boolean;
+export declare const props: {
+    /**
+     * 搜索关键字
+     */
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * 节点过滤函数，返回 true 表示匹配
+     */
+    nodeFilter: {
+        type: PropType<NodeFilter>;
+        default: typeof defaultNodeFilter;
+    };
+    /**
+     * 关系过滤函数，返回 true 表示匹配
+     */
+    edgeFilter: {
+        type: PropType<EdgeFilter>;
+        default: typeof defaultEdgeFilter;
+    };
+    /**
+     * 非高亮节点在淡出时的颜色
+     */
+    nodeFadeColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * 非高亮边在淡出时的颜色
+     */
+    edgeFadeColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * 是否自动高亮匹配到的结果
+     */
+    autoHighlight: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+};
+export declare const emits: {
+    'update:modelValue': (val: string) => boolean;
+    search: (_e: SearchEvent) => boolean;
+};
+export {};

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

@@ -0,0 +1,83 @@
+import type { Suggestion } from './types';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    nodeFilter: {
+        type: import("vue").PropType<import("./types").NodeFilter>;
+        default: (node: string, attributes: any, query: string) => boolean;
+    };
+    edgeFilter: {
+        type: import("vue").PropType<import("./types").EdgeFilter>;
+        default: (edge: string, attributes: any, query: string) => boolean;
+    };
+    nodeFadeColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    edgeFadeColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    autoHighlight: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {
+    matchedNodes: import("vue").Ref<string[], string[]>;
+    matchedEdges: import("vue").Ref<string[], string[]>;
+    suggestions: import("vue").Ref<{
+        id: string;
+        label: string;
+        type: "node" | "edge";
+        attributes: any;
+    }[], Suggestion[] | {
+        id: string;
+        label: string;
+        type: "node" | "edge";
+        attributes: any;
+    }[]>;
+    neighborNodes: import("vue").Ref<string[], string[]>;
+    neighborEdges: import("vue").Ref<string[], string[]>;
+    edgeExtremities: import("vue").Ref<string[], string[]>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'update:modelValue': (val: string) => boolean;
+    search: (_e: import("./types").SearchEvent) => boolean;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    nodeFilter: {
+        type: import("vue").PropType<import("./types").NodeFilter>;
+        default: (node: string, attributes: any, query: string) => boolean;
+    };
+    edgeFilter: {
+        type: import("vue").PropType<import("./types").EdgeFilter>;
+        default: (edge: string, attributes: any, query: string) => boolean;
+    };
+    nodeFadeColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    edgeFadeColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    autoHighlight: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onSearch?: ((_e: import("./types").SearchEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((val: string) => any) | undefined;
+}>, {
+    modelValue: string;
+    nodeFadeColor: string;
+    edgeFadeColor: string;
+    nodeFilter: import("./types").NodeFilter;
+    edgeFilter: import("./types").EdgeFilter;
+    autoHighlight: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,16 @@
+export interface Suggestion {
+    id: string;
+    label: string;
+    type: 'node' | 'edge';
+    attributes: any;
+}
+export interface SearchEvent {
+    matchedNodes: string[];
+    matchedEdges: string[];
+    suggestions: Suggestion[];
+    neighborNodes: string[];
+    neighborEdges: string[];
+    edgeExtremities: string[];
+}
+export type NodeFilter = (node: string, attributes: any, query: string) => boolean;
+export type EdgeFilter = (edge: string, attributes: any, query: string) => boolean;

package/composables/index.d.ts

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

package/composables/index.mjs

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

package/index.css

@@ -0,0 +1,90 @@
+:root{--vue-scroll-rect-scrollbar-thumb-color: rgba(122,122,122, .3);--vue-scroll-rect-scrollbar-thumb-color-light: rgba(122, 122, 122, .5);--vue-scroll-rect-scrollbar-thumb-color-pressed: rgba(112, 112, 112, .2);--vue-scroll-rect-scrollbar-thumb-radius: 5px;--vue-scroll-rect-scrollbar-thumb-margin: 0px;--vue-scroll-rect-scrollbar-size: 8px}.vue-scroll-rect{position:relative;width:100%;height:100%;margin:0;overflow:hidden}.vue-scroll-rect>.scroll-content{position:relative;max-width:100%;max-height:100%;scrollbar-width:none;-ms-overflow-style:none}.vue-scroll-rect>.scroll-content::-webkit-scrollbar{width:0;height:0}.vue-scroll-rect>.scroll-content::-ms-scrollbar{width:0;height:0}.vue-scroll-rect>.scroll-content.both{overflow:scroll}.vue-scroll-rect>.scroll-content.horizontal{overflow-x:scroll}.vue-scroll-rect>.scroll-content.vertical{overflow-y:scroll}.vue-scroll-rect:hover>.scrollbar{opacity:1;transition:opacity .1s}.vue-scroll-rect.always-show-scrollbar>.scrollbar,.vue-scroll-rect .dragging>.scrollbar{opacity:1}.vue-scroll-rect.background-clickable>.scrollbar{pointer-events:all}.vue-scroll-rect>.scrollbar{position:absolute;opacity:0;transition:opacity 1.5s;pointer-events:none}.vue-scroll-rect>.scrollbar:hover{opacity:1}.vue-scroll-rect>.scrollbar .thumb{position:absolute;background-color:var(--vue-scroll-rect-scrollbar-thumb-color);border-radius:var(--vue-scroll-rect-scrollbar-thumb-radius);pointer-events:all}.vue-scroll-rect>.scrollbar .thumb:hover{background-color:var(--vue-scroll-rect-scrollbar-thumb-color-light)}.vue-scroll-rect>.scrollbar .thumb:active{background-color:var(--vue-scroll-rect-scrollbar-thumb-color-pressed)}.vue-scroll-rect>.scrollbar.horizontal{left:0;bottom:0;right:0;height:var(--vue-scroll-rect-scrollbar-size)}.vue-scroll-rect>.scrollbar.horizontal .thumb{top:var(--vue-scroll-rect-scrollbar-thumb-margin);bottom:var(--vue-scroll-rect-scrollbar-thumb-margin)}.vue-scroll-rect>.scrollbar.vertical{top:0;bottom:0;right:0;width:var(--vue-scroll-rect-scrollbar-size)}.vue-scroll-rect>.scrollbar.vertical .thumb{left:var(--vue-scroll-rect-scrollbar-thumb-margin);right:var(--vue-scroll-rect-scrollbar-thumb-margin)}:root{--mx-menu-backgroud: #fff;--mx-menu-hover-backgroud: #f1f1f1;--mx-menu-active-backgroud: #dfdfdf;--mx-menu-open-backgroud: #f1f1f1;--mx-menu-open-hover-backgroud: #f1f1f1;--mx-menu-divider: #f0f0f0;--mx-menu-text: #2e2e2e;--mx-menu-hover-text: #2e2e2e;--mx-menu-active-text: #2e2e2e;--mx-menu-open-text: #2e2e2e;--mx-menu-open-hover-text: #2e2e2e;--mx-menu-disabled-text: #c9c8c8;--mx-menu-icon-size: 16px;--mx-menu-shadow-color: rgba(0, 0, 0, .1);--mx-menu-backgroud-radius: 10px;--mx-menu-scrollbar-thumb-color: rgba(0, 0, 0, .2);--mx-menu-scrollbar-thumb-color-light: rgba(0, 0, 0, .3);--mx-menu-scrollbar-thumb-color-pressed: rgba(0, 0, 0, .1);--mx-menu-shortcut-backgroud: #ebebeb;--mx-menu-shortcut-backgroud-hover:#ebebeb;--mx-menu-shortcut-backgroud-active:#ebebeb;--mx-menu-shortcut-backgroud-open:#ebebeb;--mx-menu-shortcut-backgroud-disabled:#fdfdfd;--mx-menu-shortcut-text: #424242;--mx-menu-shortcut-text-hover: #424242;--mx-menu-shortcut-text-active: #424242;--mx-menu-shortcut-text-open: #424242;--mx-menu-shortcut-text-disabled: #a5a5a5;--mx-menu-placeholder-width: 24px}.mx-context-menu{pointer-events:all;display:inline-block;overflow:visible;position:absolute;background-color:var(--mx-menu-backgroud);border-radius:var(--mx-menu-backgroud-radius);padding:12px 0;box-shadow:0 10px 40px 10px var(--mx-menu-shadow-color);opacity:1;transition:opacity .2s ease-in-out;--vue-scroll-rect-scrollbar-thumb-color: var(--mx-menu-scrollbar-thumb-color);--vue-scroll-rect-scrollbar-thumb-color-light: var(--mx-menu-scrollbar-thumb-color-light);--vue-scroll-rect-scrollbar-thumb-color-pressed: var(--mx-menu-scrollbar-thumb-color-pressed)}.mx-context-menu-items{position:relative;overflow:visible}.mx-context-menu-scroll{overscroll-behavior:contain}.mx-context-menu-item{display:flex;flex-direction:row;justify-content:space-between;align-items:center;position:relative;padding:6px 15px;-webkit-user-select:none;user-select:none;overflow:visible;white-space:nowrap;text-overflow:ellipsis;color:var(--mx-menu-text)}.mx-context-menu-item .mx-right-arrow,.mx-context-menu-item .mx-checked-mark{fill:var(--mx-menu-text)}.mx-context-menu-item:hover{background-color:var(--mx-menu-hover-backgroud);color:var(--mx-menu-hover-text)}.mx-context-menu-item:hover .mx-right-arrow,.mx-context-menu-item:hover .mx-checked-mark{fill:var(--mx-menu-hover-text)}.mx-context-menu-item:hover .mx-shortcut{background-color:var(--mx-menu-shortcut-backgroud-hover);color:var(--mx-menu-shortcut-text-hover)}.mx-context-menu-item:active{background-color:var(--mx-menu-active-backgroud);color:var(--mx-menu-active-text)}.mx-context-menu-item:active .mx-right-arrow,.mx-context-menu-item:active .mx-checked-mark{fill:var(--mx-menu-active-text)}.mx-context-menu-item:active .mx-shortcut{background-color:var(--mx-menu-shortcut-backgroud-active);color:var(--mx-menu-shortcut-text-active)}.mx-context-menu-item.open{background-color:var(--mx-menu-open-backgroud);color:var(--mx-menu-open-text)}.mx-context-menu-item.open:hover{background-color:var(--mx-menu-open-hover-backgroud);color:var(--mx-menu-open-hover-text)}.mx-context-menu-item.open .mx-right-arrow,.mx-context-menu-item.open .mx-checked-mark{fill:var(--mx-menu-open-text)}.mx-context-menu-item.open .mx-shortcut{background-color:var(--mx-menu-shortcut-backgroud-open);color:var(--mx-menu-shortcut-text-open)}.mx-context-menu-item.keyboard-focus{background-color:var(--mx-menu-active-backgroud)}.mx-context-menu-item.disabled{color:var(--mx-menu-disabled-text);cursor:not-allowed}.mx-context-menu-item.disabled:hover,.mx-context-menu-item.disabled:active{background-color:transparent}.mx-context-menu-item.disabled .mx-right-arrow,.mx-context-menu-item.disabled .mx-checked-mark{fill:var(--mx-menu-disabled-text)}.mx-context-menu-item.disabled .mx-shortcut{background-color:var(--mx-menu-shortcut-backgroud-disabled);color:var(--mx-menu-shortcut-text-second)}.mx-context-menu-item .mx-item-row{display:flex;flex-direction:row;align-items:center;max-width:100%}.mx-context-menu-item .mx-icon-placeholder{position:relative;display:flex;flex-direction:row;align-items:center;height:auto;overflow:hidden}.mx-context-menu-item .mx-icon-placeholder.preserve-width{width:var(--mx-menu-placeholder-width)}.mx-context-menu-item .icon{display:inline-block;font-size:var(--mx-menu-icon-size)}.mx-context-menu-item .icon.svg{width:var(--mx-menu-icon-size);height:var(--mx-menu-icon-size)}.mx-context-menu-item .label{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline-end:16px}.mx-context-menu-item-wrapper{position:relative}.mx-context-menu-item-sperator{display:block;padding:5px 0;background-color:var(--mx-menu-backgroud)}.mx-context-menu-item-sperator:after{display:block;content:"";background-color:var(--mx-menu-divider);height:1px}.mx-right-arrow{width:14px;height:14px}.mx-checked-mark{width:var(--mx-menu-icon-size);height:var(--mx-menu-icon-size)}.mx-shortcut{position:relative;justify-self:flex-end;font-size:11.5px;padding:2px 4px;background-color:var(--mx-menu-shortcut-backgroud);color:var(--mx-menu-shortcut-text)}.mx-menu-bar.dark,.mx-context-menu.dark{--mx-menu-backgroud: #303031;--mx-menu-hover-backgroud: #636363;--mx-menu-active-backgroud: #555555;--mx-menu-open-backgroud: #636363;--mx-menu-open-hover-backgroud: #636363;--mx-menu-divider: #464646;--mx-menu-text: #ffffff;--mx-menu-hover-text: #ffffff;--mx-menu-active-text: #ffffff;--mx-menu-open-text: #ffffff;--mx-menu-open-hover-text: #ffffff;--mx-menu-disabled-text: #9c9c9c;--mx-menu-shadow-color: rgba(51, 51, 51, .2);--mx-menu-scrollbar-thumb-color: rgba(255, 255, 255, .3);--mx-menu-scrollbar-thumb-color-light: rgba(255, 255, 255, .5);--mx-menu-scrollbar-thumb-color-pressed: rgba(255, 255, 255, .2);--mx-menu-shortcut-backgroud: #505050;--mx-menu-shortcut-backgroud-hover:#505050;--mx-menu-shortcut-backgroud-active:#505050;--mx-menu-shortcut-backgroud-open:#505050;--mx-menu-shortcut-backgroud-disabled:#444444;--mx-menu-shortcut-text: #f1f1f1;--mx-menu-shortcut-text-hover: #ffffff;--mx-menu-shortcut-text-active: #ffffff;--mx-menu-shortcut-text-open: #ffffff;--mx-menu-shortcut-text-disabled: #9d9d9d}.mx-menu-bar.flat,.mx-context-menu.flat{border-radius:0;padding:7px 0;box-shadow:0 1px 2px 1px var(--mx-menu-shadow-color)}.mx-menu-bar.flat .mx-context-menu-item,.mx-context-menu.flat .mx-context-menu-item{padding:3px 12px}.mx-menu-bar.win10,.mx-context-menu.win10{border-radius:0;padding:8px 0;border:1px solid var(--mx-menu-border-color);box-shadow:2px 2px 1px 0 var(--mx-menu-shadow-color)}.mx-menu-bar.win10,.mx-context-menu.win10{--mx-menu-backgroud: #eeeeee;--mx-menu-hover-backgroud: #d8d8d8;--mx-menu-active-backgroud: #dfdfdf;--mx-menu-open-backgroud: #f1f1f1;--mx-menu-open-hover-backgroud: #d8d8d8;--mx-menu-divider: #aaaaaa;--mx-menu-border-color: #b1b1b1;--mx-menu-shortcut-backgroud: transparent;--mx-menu-shortcut-backgroud-hover: transparent;--mx-menu-shortcut-backgroud-active: transparent;--mx-menu-shortcut-backgroud-open: transparent;--mx-menu-shortcut-backgroud-disabled:transparent;--mx-menu-shortcut-text: #272727;--mx-menu-shortcut-text-hover: #272727;--mx-menu-shortcut-text-active: #272727;--mx-menu-shortcut-text-open: #272727;--mx-menu-shortcut-text-disabled: #6b6b6b}.mx-menu-bar.win10 .mx-context-menu-item,.mx-context-menu.win10 .mx-context-menu-item{padding:2px 4px;margin:0 4px}.mx-menu-bar.win10 .mx-context-menu-item-sperator,.mx-context-menu.win10 .mx-context-menu-item-sperator{margin:0 4px}.mx-menu-bar.win10.dark,.mx-context-menu.win10.dark{--mx-menu-backgroud: #303031;--mx-menu-hover-backgroud: #636363;--mx-menu-active-backgroud: #555555;--mx-menu-open-backgroud: #636363;--mx-menu-open-hover-backgroud: #636363;--mx-menu-divider: #808080;--mx-menu-border-color: #656565;--mx-menu-shortcut-backgroud: #505050;--mx-menu-shortcut-backgroud-hover:#505050;--mx-menu-shortcut-backgroud-active:#505050;--mx-menu-shortcut-backgroud-open:#505050;--mx-menu-shortcut-backgroud-disabled:#444444;--mx-menu-shortcut-text: #f1f1f1;--mx-menu-shortcut-text-hover: #ffffff;--mx-menu-shortcut-text-active: #ffffff;--mx-menu-shortcut-text-open: #ffffff;--mx-menu-shortcut-text-disabled: #9d9d9d;padding:8px 0}.mx-menu-bar.win10.dark .mx-context-menu-item,.mx-context-menu.win10.dark .mx-context-menu-item{padding:6px 12px;margin:0}.mx-menu-bar.win10.dark .mx-context-menu-item-sperator,.mx-context-menu.win10.dark .mx-context-menu-item-sperator{margin:0 7px}.mx-menu-bar.mac,.mx-context-menu.mac{padding:8px 0;box-shadow:0 5px 7px 1px var(--mx-menu-shadow-color);border:1px solid var(--mx-menu-border-color)}.mx-menu-bar.mac,.mx-context-menu.mac{--mx-menu-backgroud: #ececec;--mx-menu-hover-backgroud: #0165e1;--mx-menu-active-backgroud: #0165e1;--mx-menu-open-backgroud: #858585;--mx-menu-open-hover-backgroud: #0165e1;--mx-menu-divider: #d2d2d2;--mx-menu-text: #232323;--mx-menu-hover-text: #fff;--mx-menu-active-text: #fff;--mx-menu-open-text: #fff;--mx-menu-open-hover-text: #fff;--mx-menu-disabled-text: #bbbbbb;--mx-menu-shadow-color: rgba(0, 0, 0, .1);--mx-menu-backgroud-radius: 10px;--mx-menu-shortcut-backgroud: transparent;--mx-menu-shortcut-backgroud-hover:transparent;--mx-menu-shortcut-backgroud-active:transparent;--mx-menu-shortcut-backgroud-open:transparent;--mx-menu-shortcut-backgroud-disabled:transparent;--mx-menu-shortcut-text: #424242;--mx-menu-shortcut-text-hover: #fff;--mx-menu-shortcut-text-active: #fff;--mx-menu-shortcut-text-open: #fff;--mx-menu-shortcut-text-disabled: #a5a5a5;--mx-menu-border-color: #bbbbbb}.mx-menu-bar.mac.dark,.mx-context-menu.mac.dark{--mx-menu-backgroud: #333333;--mx-menu-hover-backgroud: #0153d2;--mx-menu-active-backgroud: #0153d2;--mx-menu-open-hover-backgroud: #0153d2;--mx-menu-open-backgroud: #414346;--mx-menu-divider: #575757;--mx-menu-text: #dcdcdc;--mx-menu-hover-text: #fff;--mx-menu-active-text: #fff;--mx-menu-open-text: #fff;--mx-menu-open-hover-text: #fff;--mx-menu-disabled-text: #6a6a6a;--mx-menu-shadow-color: rgba(0, 0, 0, .1);--mx-menu-backgroud-radius: 10px;--mx-menu-shortcut-backgroud: transparent;--mx-menu-shortcut-backgroud-hover:transparent;--mx-menu-shortcut-backgroud-active:transparent;--mx-menu-shortcut-backgroud-open:transparent;--mx-menu-shortcut-backgroud-disabled:transparent;--mx-menu-shortcut-text: #dadada;--mx-menu-shortcut-text-hover: #fff;--mx-menu-shortcut-text-active: #fff;--mx-menu-shortcut-text-open: #fff;--mx-menu-shortcut-text-disabled: #6a6a6a;--mx-menu-border-color: #222}.mx-menu-bar.mac .mx-context-menu-item,.mx-context-menu.mac .mx-context-menu-item{border-radius:5px;margin:0 6px;padding:3px 6px}.mx-menu-bar.mac .mx-context-menu-item.keyboard-focus,.mx-context-menu.mac .mx-context-menu-item.keyboard-focus{background-color:var(--mx-menu-active-backgroud);color:var(--mx-menu-active-text);outline:none}.mx-menu-bar.mac .mx-context-menu-item.keyboard-focus .mx-right-arrow,.mx-menu-bar.mac .mx-context-menu-item.keyboard-focus .mx-checked-mark,.mx-context-menu.mac .mx-context-menu-item.keyboard-focus .mx-right-arrow,.mx-context-menu.mac .mx-context-menu-item.keyboard-focus .mx-checked-mark{fill:var(--mx-menu-active-text)}.mx-menu-bar.mac .mx-context-menu-item.keyboard-focus .mx-shortcut,.mx-context-menu.mac .mx-context-menu-item.keyboard-focus .mx-shortcut{background-color:var(--mx-menu-shortcut-backgroud-active);color:var(--mx-menu-shortcut-text-active)}.mx-menu-bar.mac .mx-context-menu-item-sperator,.mx-context-menu.mac .mx-context-menu-item-sperator{margin:0 12px}.mx-context-menu .vue-scroll-rect>.scroll-content{overflow-y:scroll;height:100%;width:auto;position:relative!important}.mx-menu-ghost-host{position:absolute;left:0;bottom:0;right:0;top:0;overflow:hidden;pointer-events:none}.mx-menu-ghost-host.fullscreen{position:fixed}.mx-menu-bar{flex:1;display:flex;flex-direction:row;align-items:center;background-color:var(--mx-menu-backgroud);padding:5px 0}.mx-menu-bar.mini{flex-grow:0}.mx-menu-bar .mx-menu-bar-content{display:flex;flex-direction:row;align-items:center}.mx-menu-bar .mx-menu-bar-item{padding:2px 8px;border-radius:5px;-webkit-user-select:none;user-select:none;background-color:var(--mx-menu-backgroud);color:var(--mx-menu-text)}.mx-menu-bar .mx-menu-bar-item:hover{background-color:var(--mx-menu-hover-backgroud);color:var(--mx-menu-hover-text)}.mx-menu-bar .mx-menu-bar-item:hover .mx-menu-bar-icon-menu{fill:var(--mx-menu-hover-text)}.mx-menu-bar .mx-menu-bar-item:active,.mx-menu-bar .mx-menu-bar-item.active{background-color:var(--mx-menu-active-backgroud);color:var(--mx-menu-active-text)}.mx-menu-bar .mx-menu-bar-item:active .mx-menu-bar-icon-menu,.mx-menu-bar .mx-menu-bar-item.active .mx-menu-bar-icon-menu{fill:var(--mx-menu-active-text)}.mx-menu-bar .mx-menu-bar-icon-menu{fill:var(--mx-menu-text);width:var(--mx-menu-icon-size);height:var(--mx-menu-icon-size)}.mx-menu-bar.flat .mx-menu-bar-item{border-radius:0}
+
+.vkg-grap, .vkg-grap-x {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.vkg-graph-view-ui {
+  z-index: 1;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+.vkg-graph-view-ui > * {
+  pointer-events: auto;
+}
+
+.vkg-label-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.vkg-label-item{
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 4px 0;
+  transition: opacity 0.2s;
+}
+.vkg-label-item:hover {
+  opacity: 0.8;
+}
+.vkg-label-item.is-hidden {
+  opacity: 0.4;
+}
+.vkg-label-dot {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  margin-right: 0.8em;
+  flex-shrink: 0;
+}
+.vkg-label-text {
+  font-size: 14px;
+  user-select: none;
+}
+
+.vkg-link-guide {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 9999;
+}
+
+.vkg-popup-global {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  /* VkGraphViewUi 默认居中 (translate -50%, -50%) */
+  /* 向上再平移 50% 使其底部对齐坐标点，再加 10px 避开节点 */
+  transform: translateY(calc(-50% - 10px));
+}
+.vkg-popup-global__inner {
+  background-color: #fff;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  padding: 6px 10px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  font-size: 13px;
+  color: #303133;
+  white-space: nowrap;
+  position: relative;
+  z-index: 2;
+}
+.vkg-popup-global__tip {
+  width: 8px;
+  height: 8px;
+  background-color: #fff;
+  border-right: 1px solid #e4e7ed;
+  border-bottom: 1px solid #e4e7ed;
+  transform: rotate(45deg);
+  margin-top: -4.5px;
+  position: relative;
+  z-index: 1;
+  box-shadow: 2px 2px 3px -1px rgba(0, 0, 0, 0.05);
+}

package/index.d.ts

@@ -0,0 +1,10 @@
+export * from '@vunk/graph/components/context-menu';
+export * from '@vunk/graph/components/graph';
+export * from '@vunk/graph/components/graph-view-ui';
+export * from '@vunk/graph/components/hover-edge';
+export * from '@vunk/graph/components/hover-highlight';
+export * from '@vunk/graph/components/hover-node';
+export * from '@vunk/graph/components/label';
+export * from '@vunk/graph/components/link-guide';
+export * from '@vunk/graph/components/popup';
+export * from '@vunk/graph/components/search';

package/index.esm.js

@@ -0,0 +1,10 @@
+export * from '@vunk/graph/components/context-menu';
+export * from '@vunk/graph/components/graph';
+export * from '@vunk/graph/components/graph-view-ui';
+export * from '@vunk/graph/components/hover-edge';
+export * from '@vunk/graph/components/hover-highlight';
+export * from '@vunk/graph/components/hover-node';
+export * from '@vunk/graph/components/label';
+export * from '@vunk/graph/components/link-guide';
+export * from '@vunk/graph/components/popup';
+export * from '@vunk/graph/components/search';

package/package.json

@@ -0,0 +1,108 @@
+{
+  "name": "@vunk/graph",
+  "version": "0.0.1",
+  "description": "",
+  "author": "",
+  "license": "ISC",
+  "keywords": [],
+  "main": "index.esm.js",
+  "scripts": {
+    "build": "gulp -f gulpfile.ts"
+  },
+  "module": "index.esm.js",
+  "exports": {
+    ".": {
+      "import": "./index.esm.js",
+      "types": "./index.d.ts"
+    },
+    "./stores": {
+      "import": "./stores/index.mjs",
+      "types": "./stores/index.d.ts"
+    },
+    "./shared": {
+      "import": "./shared/index.mjs",
+      "types": "./shared/index.d.ts"
+    },
+    "./shared/graph": {
+      "import": "./shared/graph/index.mjs",
+      "types": "./shared/graph/index.d.ts"
+    },
+    "./composables": {
+      "import": "./composables/index.mjs",
+      "types": "./composables/index.d.ts"
+    },
+    "./components/search": {
+      "import": "./components/search/index.mjs",
+      "types": "./components/search/index.d.ts"
+    },
+    "./components/popup": {
+      "import": "./components/popup/index.mjs",
+      "types": "./components/popup/index.d.ts"
+    },
+    "./components/link-guide": {
+      "import": "./components/link-guide/index.mjs",
+      "types": "./components/link-guide/index.d.ts"
+    },
+    "./components/layout-forceatlas2": {
+      "import": "./components/layout-forceatlas2/index.mjs",
+      "types": "./components/layout-forceatlas2/index.d.ts"
+    },
+    "./components/label": {
+      "import": "./components/label/index.mjs",
+      "types": "./components/label/index.d.ts"
+    },
+    "./components/hover-node": {
+      "import": "./components/hover-node/index.mjs",
+      "types": "./components/hover-node/index.d.ts"
+    },
+    "./components/hover-highlight": {
+      "import": "./components/hover-highlight/index.mjs",
+      "types": "./components/hover-highlight/index.d.ts"
+    },
+    "./components/hover-edge": {
+      "import": "./components/hover-edge/index.mjs",
+      "types": "./components/hover-edge/index.d.ts"
+    },
+    "./components/graph-view-ui": {
+      "import": "./components/graph-view-ui/index.mjs",
+      "types": "./components/graph-view-ui/index.d.ts"
+    },
+    "./components/graph": {
+      "import": "./components/graph/index.mjs",
+      "types": "./components/graph/index.d.ts"
+    },
+    "./components/context-menu": {
+      "import": "./components/context-menu/index.mjs",
+      "types": "./components/context-menu/index.d.ts"
+    },
+    "./api": {
+      "import": "./api/index.mjs",
+      "types": "./api/index.d.ts"
+    },
+    "./api/user": {
+      "import": "./api/user/index.mjs",
+      "types": "./api/user/index.d.ts"
+    },
+    "./index.css": {
+      "import": "./index.css"
+    },
+    "./components/popup/index.css": {
+      "import": "./components/popup/index.css"
+    },
+    "./components/link-guide/index.css": {
+      "import": "./components/link-guide/index.css"
+    },
+    "./components/label/index.css": {
+      "import": "./components/label/index.css"
+    },
+    "./components/graph-view-ui/index.css": {
+      "import": "./components/graph-view-ui/index.css"
+    },
+    "./components/graph/index.css": {
+      "import": "./components/graph/index.css"
+    },
+    "./components/context-menu/index.css": {
+      "import": "./components/context-menu/index.css"
+    }
+  }
+}

package/shared/graph/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 计算节点大小
+ */
+export declare function calculateNodeSize(totalWeight?: number, nodeSize?: {
+    min: number;
+    max: number;
+    base: number;
+    weightMultiplier: number;
+}): number;
+/**
+ * 计算链接宽度
+ */
+export declare function calculateLinkWidth(weight?: number, linkWidth?: {
+    min: number;
+    max: number;
+    weightDivider: number;
+}): number;

package/shared/graph/index.mjs

@@ -0,0 +1,19 @@
+function calculateNodeSize(totalWeight = 1, nodeSize = {
+  min: 4,
+  max: 14,
+  base: 4,
+  weightMultiplier: 0.3
+}) {
+  const { min, max, base, weightMultiplier } = nodeSize;
+  return Math.min(max, Math.max(min, base + Math.sqrt(totalWeight) * weightMultiplier));
+}
+function calculateLinkWidth(weight = 1, linkWidth = {
+  min: 0.1,
+  max: 0.6,
+  weightDivider: 0.3
+}) {
+  const { min, max, weightDivider } = linkWidth;
+  return Math.min(max, Math.max(min, weight / weightDivider));
+}
+
+export { calculateLinkWidth, calculateNodeSize };

package/shared/index.mjs

@@ -0,0 +1 @@
+

package/stores/index.mjs

@@ -0,0 +1 @@
+