@xyo-network/react-node-renderer 2.64.0 → 2.64.3

package/dist/node/hooks/cytoscape/usePopperListener.js

@@ -1,35 +0,0 @@
-// src/hooks/cytoscape/usePopperListener.tsx
-import { useTheme } from "@mui/material";
-import { useCallback } from "react";
-var usePopperListener = () => {
-  const theme = useTheme();
-  const popperListener = 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 == null ? void 0 : cy.on("pan zoom resize", update);
-    },
-    [theme]
-  );
-  return popperListener;
-};
-export {
-  usePopperListener
-};
-//# sourceMappingURL=usePopperListener.js.map

package/dist/node/hooks/cytoscape/usePopperListener.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/hooks/cytoscape/usePopperListener.tsx"],"sourcesContent":["import { useTheme } from '@mui/material'\nimport { Core, NodeSingular } from 'cytoscape'\nimport { useCallback } from 'react'\n\nexport const usePopperListener = () => {\n  const theme = useTheme()\n\n  const popperListener = useCallback(\n    (node: NodeSingular, hideLabels?: boolean, cy?: Core) => {\n      const div = document.createElement('div')\n      const shadowColor = theme.palette.getContrastText(theme.palette.text.primary)\n\n      const popper = node.popper({\n        content: () => {\n          div.innerHTML = node.data().name\n          div.style.opacity = '0'\n          div.style.transition = 'opacity .25s'\n          div.style.textShadow = `0 0 3px ${shadowColor}`\n\n          document.body.appendChild(div)\n\n          return div\n        },\n      })\n\n      const update = async () => {\n        await popper.update()\n      }\n\n      node.on('position', update)\n      node.on('mouseover', () => (hideLabels ? (div.style.opacity = '1') : undefined))\n      node.on('mouseout', () => (hideLabels ? (div.style.opacity = '0') : undefined))\n\n      cy?.on('pan zoom resize', update)\n    },\n    [theme],\n  )\n\n  return popperListener\n}\n"],"mappings":";AAAA,SAAS,gBAAgB;AAEzB,SAAS,mBAAmB;AAErB,IAAM,oBAAoB,MAAM;AACrC,QAAM,QAAQ,SAAS;AAEvB,QAAM,iBAAiB;AAAA,IACrB,CAAC,MAAoB,YAAsB,OAAc;AACvD,YAAM,MAAM,SAAS,cAAc,KAAK;AACxC,YAAM,cAAc,MAAM,QAAQ,gBAAgB,MAAM,QAAQ,KAAK,OAAO;AAE5E,YAAM,SAAS,KAAK,OAAO;AAAA,QACzB,SAAS,MAAM;AACb,cAAI,YAAY,KAAK,KAAK,EAAE;AAC5B,cAAI,MAAM,UAAU;AACpB,cAAI,MAAM,aAAa;AACvB,cAAI,MAAM,aAAa,WAAW,WAAW;AAE7C,mBAAS,KAAK,YAAY,GAAG;AAE7B,iBAAO;AAAA,QACT;AAAA,MACF,CAAC;AAED,YAAM,SAAS,YAAY;AACzB,cAAM,OAAO,OAAO;AAAA,MACtB;AAEA,WAAK,GAAG,YAAY,MAAM;AAC1B,WAAK,GAAG,aAAa,MAAO,aAAc,IAAI,MAAM,UAAU,MAAO,MAAU;AAC/E,WAAK,GAAG,YAAY,MAAO,aAAc,IAAI,MAAM,UAAU,MAAO,MAAU;AAE9E,+BAAI,GAAG,mBAAmB;AAAA,IAC5B;AAAA,IACA,CAAC,KAAK;AAAA,EACR;AAEA,SAAO;AACT;","names":[]}

package/src/components/ModuleGraphFlexBox.tsx

@@ -1,56 +0,0 @@
-import { Button } from '@mui/material'
-import { FlexBoxProps } from '@xylabs/react-flexbox'
-import { ModuleInstance } from '@xyo-network/module'
-import { EventObject } from 'cytoscape'
-import { useEffect } from 'react'
-
-import { useCytoscapeInstance } from '../contexts'
-import { useAddNewElements, useNewElements, usePopperListener, useRelationalGraphOptions } from '../hooks'
-import { WithExtensions } from './cytoscape-extensions'
-import { NodeRelationalGraphFlexBox } from './RelationalGraph'
-
-export interface ModuleGraphFlexBoxProps extends FlexBoxProps {
-  rootModule?: ModuleInstance | null
-}
-
-export const ModuleGraphFlexBox: React.FC<ModuleGraphFlexBoxProps> = ({ rootModule, ...props }) => {
-  const { cy } = useCytoscapeInstance(true)
-  const popperListener = usePopperListener()
-  const { handleToggleLabels, hideLabels, options } = useRelationalGraphOptions(rootModule ?? undefined)
-
-  const { newElements, setSelectedElement } = useNewElements()
-
-  useAddNewElements(newElements, hideLabels)
-
-  useEffect(() => {
-    const listener = (event: EventObject) => {
-      const element = event.target[0]
-      if (element.isNode()) setSelectedElement(element)
-    }
-    cy?.on('select', listener)
-
-    return () => {
-      cy?.off('select', listener)
-    }
-  }, [cy, setSelectedElement])
-
-  useEffect(() => {
-    cy?.ready(() => {
-      cy.nodes().forEach((node) => popperListener(node, hideLabels, cy))
-    })
-  }, [cy, hideLabels, popperListener, setSelectedElement])
-
-  return (
-    <WithExtensions>
-      <NodeRelationalGraphFlexBox
-        actions={
-          <Button size={'small'} onClick={handleToggleLabels} variant="contained">
-            Toggle Labels
-          </Button>
-        }
-        options={options}
-        {...props}
-      />
-    </WithExtensions>
-  )
-}

package/src/components/WithCola.tsx

@@ -1,13 +0,0 @@
-import { use } from 'cytoscape'
-import cola from 'cytoscape-cola'
-import { PropsWithChildren, useEffect, useState } from 'react'
-
-export const WithCola: React.FC<PropsWithChildren> = ({ children }) => {
-  const [initialized, setInitialized] = useState(false)
-  useEffect(() => {
-    use(cola)
-    setInitialized(true)
-  }, [])
-
-  return <>{initialized ? children : undefined}</>
-}

package/src/hooks/cytoscape/useAddNewElements.tsx

@@ -1,19 +0,0 @@
-import { ElementDefinition } from 'cytoscape'
-import { useEffect } from 'react'
-
-import { useCytoscapeInstance } from '../../contexts'
-import { ColaLayout } from '../../Cytoscape'
-import { usePopperListener } from './usePopperListener'
-
-export const useAddNewElements = (newElements: ElementDefinition[] = [], hideLabels?: boolean) => {
-  const { cy } = useCytoscapeInstance(true)
-  const popperListener = usePopperListener()
-
-  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])
-}

package/src/hooks/cytoscape/usePopperListener.tsx

@@ -1,40 +0,0 @@
-import { useTheme } from '@mui/material'
-import { Core, NodeSingular } from 'cytoscape'
-import { useCallback } from 'react'
-
-export const usePopperListener = () => {
-  const theme = useTheme()
-
-  const popperListener = useCallback(
-    (node: NodeSingular, hideLabels?: boolean, cy?: Core) => {
-      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') : undefined))
-      node.on('mouseout', () => (hideLabels ? (div.style.opacity = '0') : undefined))
-
-      cy?.on('pan zoom resize', update)
-    },
-    [theme],
-  )
-
-  return popperListener
-}