@vunk/graph 0.0.3 → 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>;

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 = {
   /**
@@ -61,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,
@@ -69,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;
@@ -128,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/index.vue.d.ts

@@ -56,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;
@@ -64,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 }: {

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/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.3",
+  "version": "0.0.4",
   "description": "",
   "author": "",
   "license": "ISC",