@xyo-network/react-node-renderer 2.64.1 → 2.64.4

package/dist/browser/hooks/cytoscape/useRenderNewElements.cjs

@@ -0,0 +1,56 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/hooks/cytoscape/useRenderNewElements.tsx
+var useRenderNewElements_exports = {};
+__export(useRenderNewElements_exports, {
+  useRenderNewElements: () => useRenderNewElements
+});
+module.exports = __toCommonJS(useRenderNewElements_exports);
+var import_react = require("react");
+
+// src/contexts/CytoscapeInstance/Context.ts
+var import_react_shared = require("@xyo-network/react-shared");
+var CytoscapeInstanceContext = (0, import_react_shared.createContextEx)();
+
+// src/contexts/CytoscapeInstance/use.ts
+var import_react_shared2 = require("@xyo-network/react-shared");
+var useCytoscapeInstance = (required = false) => (0, import_react_shared2.useContextEx)(CytoscapeInstanceContext, "CytoscapeInstance", required);
+
+// src/Cytoscape/lib/layout/ColaLayout.ts
+var ColaLayout = {
+  centerGraph: false,
+  convergenceThreshold: 0.01,
+  name: "cola"
+};
+
+// src/hooks/cytoscape/useRenderNewElements.tsx
+var useRenderNewElements = (newElements = [], hideLabels) => {
+  const { cy } = useCytoscapeInstance(true);
+  const [renderedElements, setRenderedElements] = (0, import_react.useState)();
+  (0, import_react.useEffect)(() => {
+    if (newElements.length > 1) {
+      const renderedElements2 = cy?.add(newElements);
+      setRenderedElements(renderedElements2);
+      cy?.layout(ColaLayout).run();
+    }
+  }, [cy, hideLabels, newElements]);
+  return renderedElements;
+};
+//# sourceMappingURL=useRenderNewElements.cjs.map

package/dist/browser/hooks/cytoscape/useRenderNewElements.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/hooks/cytoscape/useRenderNewElements.tsx","../../../../src/contexts/CytoscapeInstance/Context.ts","../../../../src/contexts/CytoscapeInstance/use.ts","../../../../src/Cytoscape/lib/layout/ColaLayout.ts"],"sourcesContent":["import { CollectionReturnValue, ElementDefinition } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\nimport { ColaLayout } from '../../Cytoscape'\n\nexport const useRenderNewElements = (newElements: ElementDefinition[] = [], hideLabels?: boolean) => {\n  const { cy } = useCytoscapeInstance(true)\n  const [renderedElements, setRenderedElements] = useState<CollectionReturnValue>()\n\n  useEffect(() => {\n    if (newElements.length > 1) {\n      const renderedElements = cy?.add(newElements)\n      setRenderedElements(renderedElements)\n      cy?.layout(ColaLayout).run()\n    }\n  }, [cy, hideLabels, newElements])\n\n  return renderedElements\n}\n","import { createContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceState } from './State'\n\nexport const CytoscapeInstanceContext = createContextEx<CytoscapeInstanceState>()\n","import { useContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceContext } from './Context'\n\nexport const useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, 'CytoscapeInstance', required)\n","export const ColaLayout = {\n  centerGraph: false,\n  convergenceThreshold: 0.01,\n  name: 'cola',\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAoC;;;ACDpC,0BAAgC;AAIzB,IAAM,+BAA2B,qCAAwC;;;ACJhF,IAAAA,uBAA6B;AAItB,IAAM,uBAAuB,CAAC,WAAW,cAAU,mCAAa,0BAA0B,qBAAqB,QAAQ;;;ACJvH,IAAM,aAAa;AAAA,EACxB,aAAa;AAAA,EACb,sBAAsB;AAAA,EACtB,MAAM;AACR;;;AHEO,IAAM,uBAAuB,CAAC,cAAmC,CAAC,GAAG,eAAyB;AACnG,QAAM,EAAE,GAAG,IAAI,qBAAqB,IAAI;AACxC,QAAM,CAAC,kBAAkB,mBAAmB,QAAI,uBAAgC;AAEhF,8BAAU,MAAM;AACd,QAAI,YAAY,SAAS,GAAG;AAC1B,YAAMC,oBAAmB,IAAI,IAAI,WAAW;AAC5C,0BAAoBA,iBAAgB;AACpC,UAAI,OAAO,UAAU,EAAE,IAAI;AAAA,IAC7B;AAAA,EACF,GAAG,CAAC,IAAI,YAAY,WAAW,CAAC;AAEhC,SAAO;AACT;","names":["import_react_shared","renderedElements"]}

package/dist/browser/hooks/cytoscape/useRenderNewElements.d.cts

@@ -0,0 +1,3 @@
+import { CollectionReturnValue, ElementDefinition } from 'cytoscape';
+export declare const useRenderNewElements: (newElements?: ElementDefinition[], hideLabels?: boolean) => CollectionReturnValue | undefined;
+//# sourceMappingURL=useRenderNewElements.d.ts.map

package/dist/browser/hooks/cytoscape/useRenderNewElements.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRenderNewElements.d.ts","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/useRenderNewElements.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAMpE,eAAO,MAAM,oBAAoB,iBAAiB,iBAAiB,EAAE,eAAoB,OAAO,sCAa/F,CAAA"}

package/dist/browser/hooks/cytoscape/useRenderNewElements.d.mts

@@ -0,0 +1,3 @@
+import { CollectionReturnValue, ElementDefinition } from 'cytoscape';
+export declare const useRenderNewElements: (newElements?: ElementDefinition[], hideLabels?: boolean) => CollectionReturnValue | undefined;
+//# sourceMappingURL=useRenderNewElements.d.ts.map

package/dist/browser/hooks/cytoscape/useRenderNewElements.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRenderNewElements.d.ts","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/useRenderNewElements.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAMpE,eAAO,MAAM,oBAAoB,iBAAiB,iBAAiB,EAAE,eAAoB,OAAO,sCAa/F,CAAA"}

package/dist/browser/hooks/cytoscape/useRenderNewElements.d.ts

@@ -0,0 +1,3 @@
+import { CollectionReturnValue, ElementDefinition } from 'cytoscape';
+export declare const useRenderNewElements: (newElements?: ElementDefinition[], hideLabels?: boolean) => CollectionReturnValue | undefined;
+//# sourceMappingURL=useRenderNewElements.d.ts.map

package/dist/browser/hooks/cytoscape/useRenderNewElements.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRenderNewElements.d.ts","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/useRenderNewElements.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAMpE,eAAO,MAAM,oBAAoB,iBAAiB,iBAAiB,EAAE,eAAoB,OAAO,sCAa/F,CAAA"}

package/dist/browser/hooks/cytoscape/useRenderNewElements.js

@@ -0,0 +1,35 @@
+// src/hooks/cytoscape/useRenderNewElements.tsx
+import { useEffect, useState } from "react";
+
+// src/contexts/CytoscapeInstance/Context.ts
+import { createContextEx } from "@xyo-network/react-shared";
+var CytoscapeInstanceContext = createContextEx();
+
+// src/contexts/CytoscapeInstance/use.ts
+import { useContextEx } from "@xyo-network/react-shared";
+var useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, "CytoscapeInstance", required);
+
+// src/Cytoscape/lib/layout/ColaLayout.ts
+var ColaLayout = {
+  centerGraph: false,
+  convergenceThreshold: 0.01,
+  name: "cola"
+};
+
+// src/hooks/cytoscape/useRenderNewElements.tsx
+var useRenderNewElements = (newElements = [], hideLabels) => {
+  const { cy } = useCytoscapeInstance(true);
+  const [renderedElements, setRenderedElements] = useState();
+  useEffect(() => {
+    if (newElements.length > 1) {
+      const renderedElements2 = cy?.add(newElements);
+      setRenderedElements(renderedElements2);
+      cy?.layout(ColaLayout).run();
+    }
+  }, [cy, hideLabels, newElements]);
+  return renderedElements;
+};
+export {
+  useRenderNewElements
+};
+//# sourceMappingURL=useRenderNewElements.js.map

package/dist/browser/hooks/cytoscape/useRenderNewElements.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/hooks/cytoscape/useRenderNewElements.tsx","../../../../src/contexts/CytoscapeInstance/Context.ts","../../../../src/contexts/CytoscapeInstance/use.ts","../../../../src/Cytoscape/lib/layout/ColaLayout.ts"],"sourcesContent":["import { CollectionReturnValue, ElementDefinition } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\nimport { ColaLayout } from '../../Cytoscape'\n\nexport const useRenderNewElements = (newElements: ElementDefinition[] = [], hideLabels?: boolean) => {\n  const { cy } = useCytoscapeInstance(true)\n  const [renderedElements, setRenderedElements] = useState<CollectionReturnValue>()\n\n  useEffect(() => {\n    if (newElements.length > 1) {\n      const renderedElements = cy?.add(newElements)\n      setRenderedElements(renderedElements)\n      cy?.layout(ColaLayout).run()\n    }\n  }, [cy, hideLabels, newElements])\n\n  return renderedElements\n}\n","import { createContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceState } from './State'\n\nexport const CytoscapeInstanceContext = createContextEx<CytoscapeInstanceState>()\n","import { useContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceContext } from './Context'\n\nexport const useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, 'CytoscapeInstance', required)\n","export const ColaLayout = {\n  centerGraph: false,\n  convergenceThreshold: 0.01,\n  name: 'cola',\n}\n"],"mappings":";AACA,SAAS,WAAW,gBAAgB;;;ACDpC,SAAS,uBAAuB;AAIzB,IAAM,2BAA2B,gBAAwC;;;ACJhF,SAAS,oBAAoB;AAItB,IAAM,uBAAuB,CAAC,WAAW,UAAU,aAAa,0BAA0B,qBAAqB,QAAQ;;;ACJvH,IAAM,aAAa;AAAA,EACxB,aAAa;AAAA,EACb,sBAAsB;AAAA,EACtB,MAAM;AACR;;;AHEO,IAAM,uBAAuB,CAAC,cAAmC,CAAC,GAAG,eAAyB;AACnG,QAAM,EAAE,GAAG,IAAI,qBAAqB,IAAI;AACxC,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAgC;AAEhF,YAAU,MAAM;AACd,QAAI,YAAY,SAAS,GAAG;AAC1B,YAAMA,oBAAmB,IAAI,IAAI,WAAW;AAC5C,0BAAoBA,iBAAgB;AACpC,UAAI,OAAO,UAAU,EAAE,IAAI;AAAA,IAC7B;AAAA,EACF,GAAG,CAAC,IAAI,YAAY,WAAW,CAAC;AAEhC,SAAO;AACT;","names":["renderedElements"]}

package/dist/browser/hooks/cytoscape/useSelectedElement.cjs

@@ -0,0 +1,53 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/hooks/cytoscape/useSelectedElement.tsx
+var useSelectedElement_exports = {};
+__export(useSelectedElement_exports, {
+  useSelectedElement: () => useSelectedElement
+});
+module.exports = __toCommonJS(useSelectedElement_exports);
+var import_react = require("react");
+
+// src/contexts/CytoscapeInstance/Context.ts
+var import_react_shared = require("@xyo-network/react-shared");
+var CytoscapeInstanceContext = (0, import_react_shared.createContextEx)();
+
+// src/contexts/CytoscapeInstance/use.ts
+var import_react_shared2 = require("@xyo-network/react-shared");
+var useCytoscapeInstance = (required = false) => (0, import_react_shared2.useContextEx)(CytoscapeInstanceContext, "CytoscapeInstance", required);
+
+// src/hooks/cytoscape/useSelectedElement.tsx
+var useSelectedElement = () => {
+  const { cy } = useCytoscapeInstance(true);
+  const [selectedElement, setSelectedElement] = (0, import_react.useState)();
+  (0, import_react.useEffect)(() => {
+    const listener = (event) => {
+      const element = event.target[0];
+      if (element.isNode())
+        setSelectedElement(element);
+    };
+    cy?.on("select", listener);
+    return () => {
+      cy?.off("select", listener);
+    };
+  }, [cy, setSelectedElement]);
+  return selectedElement;
+};
+//# sourceMappingURL=useSelectedElement.cjs.map

package/dist/browser/hooks/cytoscape/useSelectedElement.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/hooks/cytoscape/useSelectedElement.tsx","../../../../src/contexts/CytoscapeInstance/Context.ts","../../../../src/contexts/CytoscapeInstance/use.ts"],"sourcesContent":["import { EventObject, NodeSingular } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\n\nexport const useSelectedElement = () => {\n  const { cy } = useCytoscapeInstance(true)\n  const [selectedElement, setSelectedElement] = useState<NodeSingular>()\n\n  useEffect(() => {\n    const listener = (event: EventObject) => {\n      const element = event.target[0]\n      if (element.isNode()) setSelectedElement(element)\n    }\n    cy?.on('select', listener)\n\n    return () => {\n      cy?.off('select', listener)\n    }\n  }, [cy, setSelectedElement])\n\n  return selectedElement\n}\n","import { createContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceState } from './State'\n\nexport const CytoscapeInstanceContext = createContextEx<CytoscapeInstanceState>()\n","import { useContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceContext } from './Context'\n\nexport const useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, 'CytoscapeInstance', required)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAoC;;;ACDpC,0BAAgC;AAIzB,IAAM,+BAA2B,qCAAwC;;;ACJhF,IAAAA,uBAA6B;AAItB,IAAM,uBAAuB,CAAC,WAAW,cAAU,mCAAa,0BAA0B,qBAAqB,QAAQ;;;AFCvH,IAAM,qBAAqB,MAAM;AACtC,QAAM,EAAE,GAAG,IAAI,qBAAqB,IAAI;AACxC,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,uBAAuB;AAErE,8BAAU,MAAM;AACd,UAAM,WAAW,CAAC,UAAuB;AACvC,YAAM,UAAU,MAAM,OAAO,CAAC;AAC9B,UAAI,QAAQ,OAAO;AAAG,2BAAmB,OAAO;AAAA,IAClD;AACA,QAAI,GAAG,UAAU,QAAQ;AAEzB,WAAO,MAAM;AACX,UAAI,IAAI,UAAU,QAAQ;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,IAAI,kBAAkB,CAAC;AAE3B,SAAO;AACT;","names":["import_react_shared"]}

package/dist/browser/hooks/cytoscape/useSelectedElement.d.cts

@@ -0,0 +1,3 @@
+import { NodeSingular } from 'cytoscape';
+export declare const useSelectedElement: () => NodeSingular | undefined;
+//# sourceMappingURL=useSelectedElement.d.ts.map

package/dist/browser/hooks/cytoscape/useSelectedElement.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelectedElement.d.ts","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/useSelectedElement.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,YAAY,EAAE,MAAM,WAAW,CAAA;AAKrD,eAAO,MAAM,kBAAkB,gCAiB9B,CAAA"}

package/dist/browser/hooks/cytoscape/useSelectedElement.d.mts

@@ -0,0 +1,3 @@
+import { NodeSingular } from 'cytoscape';
+export declare const useSelectedElement: () => NodeSingular | undefined;
+//# sourceMappingURL=useSelectedElement.d.ts.map

package/dist/browser/hooks/cytoscape/useSelectedElement.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelectedElement.d.ts","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/useSelectedElement.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,YAAY,EAAE,MAAM,WAAW,CAAA;AAKrD,eAAO,MAAM,kBAAkB,gCAiB9B,CAAA"}

package/dist/browser/hooks/cytoscape/useSelectedElement.d.ts

@@ -0,0 +1,3 @@
+import { NodeSingular } from 'cytoscape';
+export declare const useSelectedElement: () => NodeSingular | undefined;
+//# sourceMappingURL=useSelectedElement.d.ts.map

package/dist/browser/hooks/cytoscape/useSelectedElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelectedElement.d.ts","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/useSelectedElement.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,YAAY,EAAE,MAAM,WAAW,CAAA;AAKrD,eAAO,MAAM,kBAAkB,gCAiB9B,CAAA"}

package/dist/browser/hooks/cytoscape/useSelectedElement.js

@@ -0,0 +1,32 @@
+// src/hooks/cytoscape/useSelectedElement.tsx
+import { useEffect, useState } from "react";
+
+// src/contexts/CytoscapeInstance/Context.ts
+import { createContextEx } from "@xyo-network/react-shared";
+var CytoscapeInstanceContext = createContextEx();
+
+// src/contexts/CytoscapeInstance/use.ts
+import { useContextEx } from "@xyo-network/react-shared";
+var useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, "CytoscapeInstance", required);
+
+// src/hooks/cytoscape/useSelectedElement.tsx
+var useSelectedElement = () => {
+  const { cy } = useCytoscapeInstance(true);
+  const [selectedElement, setSelectedElement] = useState();
+  useEffect(() => {
+    const listener = (event) => {
+      const element = event.target[0];
+      if (element.isNode())
+        setSelectedElement(element);
+    };
+    cy?.on("select", listener);
+    return () => {
+      cy?.off("select", listener);
+    };
+  }, [cy, setSelectedElement]);
+  return selectedElement;
+};
+export {
+  useSelectedElement
+};
+//# sourceMappingURL=useSelectedElement.js.map

package/dist/browser/hooks/cytoscape/useSelectedElement.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/hooks/cytoscape/useSelectedElement.tsx","../../../../src/contexts/CytoscapeInstance/Context.ts","../../../../src/contexts/CytoscapeInstance/use.ts"],"sourcesContent":["import { EventObject, NodeSingular } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\n\nexport const useSelectedElement = () => {\n  const { cy } = useCytoscapeInstance(true)\n  const [selectedElement, setSelectedElement] = useState<NodeSingular>()\n\n  useEffect(() => {\n    const listener = (event: EventObject) => {\n      const element = event.target[0]\n      if (element.isNode()) setSelectedElement(element)\n    }\n    cy?.on('select', listener)\n\n    return () => {\n      cy?.off('select', listener)\n    }\n  }, [cy, setSelectedElement])\n\n  return selectedElement\n}\n","import { createContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceState } from './State'\n\nexport const CytoscapeInstanceContext = createContextEx<CytoscapeInstanceState>()\n","import { useContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceContext } from './Context'\n\nexport const useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, 'CytoscapeInstance', required)\n"],"mappings":";AACA,SAAS,WAAW,gBAAgB;;;ACDpC,SAAS,uBAAuB;AAIzB,IAAM,2BAA2B,gBAAwC;;;ACJhF,SAAS,oBAAoB;AAItB,IAAM,uBAAuB,CAAC,WAAW,UAAU,aAAa,0BAA0B,qBAAqB,QAAQ;;;AFCvH,IAAM,qBAAqB,MAAM;AACtC,QAAM,EAAE,GAAG,IAAI,qBAAqB,IAAI;AACxC,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAuB;AAErE,YAAU,MAAM;AACd,UAAM,WAAW,CAAC,UAAuB;AACvC,YAAM,UAAU,MAAM,OAAO,CAAC;AAC9B,UAAI,QAAQ,OAAO;AAAG,2BAAmB,OAAO;AAAA,IAClD;AACA,QAAI,GAAG,UAAU,QAAQ;AAEzB,WAAO,MAAM;AACX,UAAI,IAAI,UAAU,QAAQ;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,IAAI,kBAAkB,CAAC;AAE3B,SAAO;AACT;","names":[]}

package/dist/browser/hooks/index.cjs

@@ -20,25 +20,20 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/hooks/index.ts
 var hooks_exports = {};
 __export(hooks_exports, {
-  useAddNewElements: () => useAddNewElements,
   useCytoscapeElements: () => useCytoscapeElements,
   useCytoscapeOptions: () => useCytoscapeOptions,
+  useHoveredNode: () => useHoveredNode,
   useNewElements: () => useNewElements,
-  usePopperListener: () => usePopperListener,
-  useRelationalGraphOptions: () => useRelationalGraphOptions
+  useRelationalGraphOptions: () => useRelationalGraphOptions,
+  useRenderNewElements: () => useRenderNewElements,
+  useSelectedElement: () => useSelectedElement
 });
 module.exports = __toCommonJS(hooks_exports);
 
-// src/hooks/cytoscape/useAddNewElements.tsx
-var import_react2 = require("react");
-
-// src/contexts/CytoscapeInstance/Context.ts
-var import_react_shared = require("@xyo-network/react-shared");
-var CytoscapeInstanceContext = (0, import_react_shared.createContextEx)();
-
-// src/contexts/CytoscapeInstance/use.ts
-var import_react_shared2 = require("@xyo-network/react-shared");
-var useCytoscapeInstance = (required = false) => (0, import_react_shared2.useContextEx)(CytoscapeInstanceContext, "CytoscapeInstance", required);
+// src/hooks/cytoscape/useCytoscapeElements.ts
+var import_react_async_effect = require("@xylabs/react-async-effect");
+var import_node_model3 = require("@xyo-network/node-model");
+var import_react = require("react");
 
 // src/Cytoscape/CytoscapeElements.ts
 var import_node_model2 = require("@xyo-network/node-model");
@@ -241,57 +236,9 @@ var EdgeStyled = (lineColor, targetArrowColor) => ({
   }
 });
 
-// src/hooks/cytoscape/usePopperListener.tsx
-var import_material = require("@mui/material");
-var import_react = require("react");
-var usePopperListener = () => {
-  const theme = (0, import_material.useTheme)();
-  const popperListener = (0, import_react.useCallback)(
-    (node, hideLabels, cy) => {
-      const div = document.createElement("div");
-      const shadowColor = theme.palette.getContrastText(theme.palette.text.primary);
-      const popper = node.popper({
-        content: () => {
-          div.innerHTML = node.data().name;
-          div.style.opacity = "0";
-          div.style.transition = "opacity .25s";
-          div.style.textShadow = `0 0 3px ${shadowColor}`;
-          document.body.appendChild(div);
-          return div;
-        }
-      });
-      const update = async () => {
-        await popper.update();
-      };
-      node.on("position", update);
-      node.on("mouseover", () => hideLabels ? div.style.opacity = "1" : void 0);
-      node.on("mouseout", () => hideLabels ? div.style.opacity = "0" : void 0);
-      cy?.on("pan zoom resize", update);
-    },
-    [theme]
-  );
-  return popperListener;
-};
-
-// src/hooks/cytoscape/useAddNewElements.tsx
-var useAddNewElements = (newElements = [], hideLabels) => {
-  const { cy } = useCytoscapeInstance(true);
-  const popperListener = usePopperListener();
-  (0, import_react2.useEffect)(() => {
-    if (newElements.length > 1) {
-      const renderedElements = cy?.add(newElements);
-      renderedElements?.nodes().forEach((node) => popperListener(node, hideLabels, cy));
-      cy?.layout(ColaLayout).run();
-    }
-  }, [cy, hideLabels, newElements, popperListener]);
-};
-
 // src/hooks/cytoscape/useCytoscapeElements.ts
-var import_react_async_effect = require("@xylabs/react-async-effect");
-var import_node_model3 = require("@xyo-network/node-model");
-var import_react3 = require("react");
 var useCytoscapeElements = (module2) => {
-  const [elements, setElements] = (0, import_react3.useState)([]);
+  const [elements, setElements] = (0, import_react.useState)([]);
   (0, import_react_async_effect.useAsyncEffect)(
     // eslint-disable-next-line react-hooks/exhaustive-deps
     async () => {
@@ -302,7 +249,7 @@ var useCytoscapeElements = (module2) => {
     },
     [module2]
   );
-  (0, import_react3.useEffect)(() => {
+  (0, import_react.useEffect)(() => {
     let attachedListener = void 0;
     let detachedListener = void 0;
     if (module2 && (0, import_node_model3.isNodeInstance)(module2)) {
@@ -324,19 +271,19 @@ var useCytoscapeElements = (module2) => {
 };
 
 // src/hooks/cytoscape/useCytoscapeOptions.ts
-var import_react6 = require("react");
+var import_react4 = require("react");
 
 // src/hooks/cytoscape/useCytoscapeStyle.tsx
-var import_material3 = require("@mui/material");
-var import_react5 = require("react");
+var import_material2 = require("@mui/material");
+var import_react3 = require("react");
 
 // src/hooks/cytoscape/useIcons.tsx
-var import_material2 = require("@mui/material");
-var import_react4 = require("react");
+var import_material = require("@mui/material");
+var import_react2 = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 var useIcons = () => {
-  const theme = (0, import_material2.useTheme)();
-  const icons = (0, import_react4.useMemo)(() => {
+  const theme = (0, import_material.useTheme)();
+  const icons = (0, import_react2.useMemo)(() => {
     const iconMap = generateIconMap();
     return Object.entries(CyIconSet).reduce((acc, [name, IconComponent]) => {
       const icon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconComponent, { fontSize: "small" });
@@ -349,9 +296,9 @@ var useIcons = () => {
 
 // src/hooks/cytoscape/useCytoscapeStyle.tsx
 var useCytoscapeStyle = (hideLabels = false) => {
-  const theme = (0, import_material3.useTheme)();
+  const theme = (0, import_material2.useTheme)();
   const icons = useIcons();
-  const style = (0, import_react5.useMemo)(
+  const style = (0, import_react3.useMemo)(
     () => [
       NodeIdStyles(theme.palette.text.primary, theme.palette.getContrastText(theme.palette.text.primary)),
       NodeStyled(icons, theme.palette.primary.main, hideLabels),
@@ -365,47 +312,118 @@ var useCytoscapeStyle = (hideLabels = false) => {
 // src/hooks/cytoscape/useCytoscapeOptions.ts
 var useCytoscapeOptions = (elements, style, layout) => {
   const defaultStyle = useCytoscapeStyle();
-  const options = (0, import_react6.useMemo)(() => {
-    if (elements && layout && style) {
+  const resolvedLayout = layout ?? ConcentricLayout;
+  const resolvedStyle = style ?? defaultStyle;
+  const options = (0, import_react4.useMemo)(() => {
+    if (elements && resolvedLayout && resolvedStyle) {
       return {
         elements,
-        layout: layout ?? ConcentricLayout,
-        style: style ?? defaultStyle
+        layout: resolvedLayout,
+        style: resolvedStyle
       };
     }
   }, [elements, layout, style]);
   return options;
 };
 
+// src/hooks/cytoscape/useHoveredNode.tsx
+var import_react5 = require("react");
+
+// src/contexts/CytoscapeInstance/Context.ts
+var import_react_shared = require("@xyo-network/react-shared");
+var CytoscapeInstanceContext = (0, import_react_shared.createContextEx)();
+
+// src/contexts/CytoscapeInstance/use.ts
+var import_react_shared2 = require("@xyo-network/react-shared");
+var useCytoscapeInstance = (required = false) => (0, import_react_shared2.useContextEx)(CytoscapeInstanceContext, "CytoscapeInstance", required);
+
+// src/hooks/cytoscape/useHoveredNode.tsx
+var useHoveredNode = (renderedElements) => {
+  const { cy } = useCytoscapeInstance(true);
+  const [hoveredNode, setHoveredNode] = (0, import_react5.useState)();
+  const nodeListener = (0, import_react5.useCallback)((node) => {
+    node.on("mouseover tap", () => {
+      setHoveredNode(node);
+    });
+    node.on("mouseout", () => {
+      setHoveredNode(void 0);
+    });
+  }, []);
+  (0, import_react5.useEffect)(() => {
+    if (renderedElements) {
+      renderedElements.nodes().forEach(nodeListener);
+    }
+  }, [nodeListener, renderedElements]);
+  (0, import_react5.useEffect)(() => {
+    cy?.ready(() => {
+      cy.nodes().forEach(nodeListener);
+    });
+  }, [cy, nodeListener]);
+  return hoveredNode;
+};
+
 // src/hooks/cytoscape/useNewElements.tsx
 var import_react_node = require("@xyo-network/react-node");
-var import_react7 = require("react");
-var useNewElements = () => {
+var import_react6 = require("react");
+var useNewElements = (selectedElement) => {
   const { cy } = useCytoscapeInstance(true);
-  const [selectedElement, setSelectedElement] = (0, import_react7.useState)();
   const { address: selectedAddress } = selectedElement?.data() ?? {};
   const [module2] = (0, import_react_node.useModuleFromNode)(selectedAddress);
   const newElements = useCytoscapeElements(module2);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (selectedAddress) {
       const element = cy?.$(`node[id="${selectedAddress}"]`);
       if (element?.length)
         cy?.center(element);
     }
   }, [cy, selectedAddress]);
-  return { newElements, setSelectedElement };
+  return newElements;
 };
 
 // src/hooks/cytoscape/useRelationalGraphOptions.tsx
-var import_react8 = require("react");
+var import_react7 = require("react");
 var useRelationalGraphOptions = (module2) => {
-  const [hideLabels, setHideLabels] = (0, import_react8.useState)(false);
+  const [hideLabels, setHideLabels] = (0, import_react7.useState)(true);
   const handleToggleLabels = () => {
     setHideLabels((oldValue) => !oldValue);
   };
   const elements = useCytoscapeElements(module2);
   const style = useCytoscapeStyle(hideLabels);
-  const options = useCytoscapeOptions(elements, style, ColaLayout);
+  const options = useCytoscapeOptions(elements, style, ConcentricLayout);
   return { handleToggleLabels, hideLabels, options };
 };
+
+// src/hooks/cytoscape/useRenderNewElements.tsx
+var import_react8 = require("react");
+var useRenderNewElements = (newElements = [], hideLabels) => {
+  const { cy } = useCytoscapeInstance(true);
+  const [renderedElements, setRenderedElements] = (0, import_react8.useState)();
+  (0, import_react8.useEffect)(() => {
+    if (newElements.length > 1) {
+      const renderedElements2 = cy?.add(newElements);
+      setRenderedElements(renderedElements2);
+      cy?.layout(ColaLayout).run();
+    }
+  }, [cy, hideLabels, newElements]);
+  return renderedElements;
+};
+
+// src/hooks/cytoscape/useSelectedElement.tsx
+var import_react9 = require("react");
+var useSelectedElement = () => {
+  const { cy } = useCytoscapeInstance(true);
+  const [selectedElement, setSelectedElement] = (0, import_react9.useState)();
+  (0, import_react9.useEffect)(() => {
+    const listener = (event) => {
+      const element = event.target[0];
+      if (element.isNode())
+        setSelectedElement(element);
+    };
+    cy?.on("select", listener);
+    return () => {
+      cy?.off("select", listener);
+    };
+  }, [cy, setSelectedElement]);
+  return selectedElement;
+};
 //# sourceMappingURL=index.cjs.map