@deep-foundation/aframe-force-graph - npm Package Compare versions

Comparing version 0.0.8 to 0.0.9

deep.json

 {
   "package": {
     "name": "@deep-foundation/aframe-force-graph",
-    "version": "0.0.8"
+    "version": "0.0.9"
   },
@@ -10,3 +10,3 @@ "data": [
         "dependencyId": 0,
-        "containValue": "TSX"
+        "containValue": "Type"
       },
@@ -18,3 +18,3 @@ "id": 1
         "dependencyId": 1,
-        "containValue": "Type"
+        "containValue": "TSX"
       },
@@ -24,11 +24,48 @@ "id": 2
     {
+      "package": {
+        "dependencyId": 0,
+        "containValue": "Handler"
+      },
+      "id": 3
+    },
+    {
+      "package": {
+        "dependencyId": 0,
+        "containValue": "clientSupportsJs"
+      },
+      "id": 4
+    },
+    {
+      "package": {
+        "dependencyId": 0,
+        "containValue": "HandleClient"
+      },
+      "id": 5
+    },
+    {
+      "id": "Graph",
+      "type": 1
+    },
+    {
+      "id": "graphInstance",
+      "type": "Graph"
+    },
+    {
       "id": "graphtsxcode",
-      "type": 1,
+      "type": 2,
       "value": {
-        "value": "({ deep, require }) => {\n  const React = require('react');\n  const {\n    Scene,\n    Cursor,\n    Sphere,\n    Cylinder,\n    Plane,\n    Sky,\n    Entity,\n  } = require('@belivvr/aframe-react');\n  const { useSpaceId } = require('@deep-foundation/deepcase');\n  const SpriteText = require('three-spritetext');\n\n  const createLabel = (value, color = \"rgba(255, 255, 255, 1)\") => {\n    const canvas = document.createElement(\"canvas\");\n    const ctx = canvas.getContext(\"2d\");\n    ctx.font = \"Bold 200px Arial\";\n    const metrics = ctx.measureText(value);\n    const width = metrics.width;\n    const height = 200;\n    canvas.width = width;\n    canvas.height = height;\n    ctx.font = \"Bold 200px Arial\";\n    ctx.fillStyle = color;\n    ctx.fillText(value, 0, height - 30);\n    ctx.fillStyle = \"rgba(255, 255, 255, 0)\"; // Completely transparent\n    ctx.fillRect(0, 0, canvas.width, canvas.height);\n    const texture = new THREE.CanvasTexture(canvas);\n    texture.needsUpdate = true;\n\n    // Use plane geometry\n    var geometry = new THREE.PlaneGeometry(width / 27, height / 35);\n    var material = new THREE.MeshBasicMaterial({\n      map: texture,\n      transparent: true,\n      side: THREE.DoubleSide\n    });\n    return new THREE.Mesh(geometry, material);\n  }\n\n  return ({ style, link }) => {\n\n    const [spaceId, setSpaceId] = useSpaceId();\n\n    const { data: spaceLinks } = deep.useDeepSubscription({\n      up: {\n        tree_id: {\n          _eq: 40\n        },\n        parent: {\n          id: {\n            _eq: spaceId\n          },\n        }\n      }\n    });\n\n    console.log({ spaceLinks })\n\n    const spaceLinkIds = spaceLinks.map((link) => (link.id))\n    const linkTypeIds = spaceLinks.map((link) => ({ \"id\": link.id, \"type_id\": link.type_id }))\n\n    const edges = spaceLinks.filter((e) =>\n    ((e.to_id && e.from_id !== 0) &&\n      (spaceLinkIds.includes(e.to_id) &&\n        spaceLinkIds.includes(e.from_id)))).map((e) =>\n          [{ \"source\": e.from_id, \"target\": e.id }, { \"source\": e.id, \"target\": e.to_id }]\n        ).flat()\n\n    console.log({ edges })\n\n    return (<div style={{ height: 700, width: 500, ...style }}>\n      <Scene renderer=\"logarithmicDepthBuffer: true\" embedded>\n        <Entity\n          id=\"camera\"\n          camera={{ active: true, fov: 94 }}\n          look-controls={{ enabled: true, pointerLockEnabled: false }}\n          wasd-controls={{ enabled: true }}\n          position={{ x: 0, y: 2, z: 30 }}\n        >\n        </Entity>\n        <Entity\n          cursor=\"rayOrigin: mouse; mouseCursorStylesEnabled: true;\"\n          raycaster=\"objects: [forcegraph];\"\n        />\n        <Entity id=\"left\" raycaster=\"objects: [forcegraph];\" hand-tracking-controls=\"hand: left\" />\n        <Entity id=\"right\" raycaster=\"objects: [forcegraph];\" hand-tracking-controls=\"hand: right;\" />\n        <Entity\n          scale={{ x: 0.1, y: 0.1, z: 0.1 }}\n          position={{ x: 1, y: 3, z: 1 }}\n          forcegraph={{\n            nodes: JSON.stringify(linkTypeIds),\n            links: JSON.stringify(edges),\n            linkWidth: 1,\n            linkDirectionalArrowLength: 8,\n            linkDirectionalArrowRelPos: 1,\n            nodeAutoColorBy: \"type_id\",\n            nodeThreeObjectExtend: true,\n            nodeThreeObject: (node) => {}\n          }}\n        />\n      </Scene>\n    </div>);\n  }\n}\n"
+        "value": "({ deep, require }) => {\n  const React = require('react');\n  const {\n    Scene,\n    Cursor,\n    Sphere,\n    Cylinder,\n    Plane,\n    Sky,\n    Entity,\n  } = require('@belivvr/aframe-react');\n  const { useSpaceId, useFocusMethods, useRefAutofill, useBreadcrumbs, useShowExtra, useTraveler } = require('@deep-foundation/deepcase');\n  const { useMinilinksFilter } = require('@deep-foundation/deeplinks');\n  const json5 = require('json5');\n  const md5 = require('md5');\n\n  return ({ style, link }) => {\n\n    const generateLabel = (value, color = \"rgba(255, 255, 255, 1)\") => {\n      var canvas = document.createElement(\"canvas\");\n      var ctx = canvas.getContext(\"2d\");\n      ctx.font = \"Bold 200px Arial\";\n      var metrics = ctx.measureText(value);\n      var width = metrics.width;\n      var height = 200;\n      canvas.width = width;\n      canvas.height = height;\n      ctx.font = \"Bold 200px Arial\";\n      ctx.fillStyle = color;\n      ctx.fillText(value, 0, height - 30);\n      ctx.fillStyle = \"rgba(255, 255, 255, 0)\"; // Completely transparent\n      ctx.fillRect(0, 0, canvas.width, canvas.height);\n      var texture = new THREE.CanvasTexture(canvas);\n      texture.needsUpdate = true;\n\n      // Use plane geometry\n      var geometry = new THREE.PlaneGeometry(width / 40, height / 50);\n      var material = new THREE.MeshBasicMaterial({\n        map: texture,\n        transparent: true,\n        side: THREE.DoubleSide\n      });\n      return new THREE.Mesh(geometry, material);\n    }\n\n    const getColorFromId = (id) => {\n      let hash = md5(id);\n      let r = parseInt(hash.substr(0, 2), 16) % 128 + 128;\n      let g = (parseInt(hash.substr(2, 2), 16) % 128) + 64;\n      let b = parseInt(hash.substr(4, 2), 16) % 128 + 128;\n      return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}`;\n    }\n\n    const [traveler, setTraveler] = useTraveler();\n    const [extra, setExtra] = useShowExtra();\n    const [breadcrumbs, setBreadcrumbs] = useBreadcrumbs();\n    const travelerRef = useRefAutofill(traveler);\n    const [spaceId, setSpaceId] = useSpaceId();\n\n    const TravelerRef = React.useRef(0);\n\n    React.useEffect(() => {\n      (async () => {\n        TravelerRef.current = await deep.id('@deep-foundation/deepcase', 'Traveler');\n      })();\n    }, []);\n\n    const links = useMinilinksFilter(\n      deep.minilinks,\n      React.useCallback((l) => true, []),\n      React.useCallback((l, ml) => {\n        const Traveler = TravelerRef.current;\n        const traveler = travelerRef.current;\n        let result = (\n          extra\n            ? ml.links\n            : ml.links.filter(l => (\n              !!l._applies.find((a) => !!~a.indexOf('query-') || a === 'space' || a === 'breadcrumbs' || a === 'not-loaded-ends')\n            ))\n        )\n        if (Traveler && !traveler) {\n          result = result.filter(l => (\n            !(l.type_id === Traveler) // Traveler\n            &&\n            !(l.type_id === deep.idLocal('@deep-foundation/core', 'Contain') && l?.to?.type_id === Traveler) // Traveler Contain\n            &&\n            !(l.inByType?.[Traveler]?.length) // Traveler Query\n            &&\n            !(l.type_id === deep.idLocal('@deep-foundation/core', 'Contain') && l?.to?.inByType?.[Traveler]?.length) // Traveler Query Contain\n            &&\n            !(l.type_id === deep.idLocal('@deep-foundation/core', 'Active') && l?.to?.inByType?.[Traveler]?.length) // Traveler Query Active\n            &&\n            !(l.type_id === deep.idLocal('@deep-foundation/core', 'Contain') && l?.to?.type_id === deep.idLocal('@deep-foundation/core', 'Active') && l?.to?.to?.inByType?.[Traveler]?.length) // Traveler Query Active Contain\n          ));\n        }\n        return result;\n      }, [extra, breadcrumbs, traveler]),\n      1000,\n    ) || [];\n    console.log({ links });\n\n\n\n    const { initialize } = useNodeDragger();\n\n    const graphData = React.useMemo(() => {\n      return getGraphData(deep, links, spaceId);\n    }, [links])\n    console.log({ graphData });\n\n    return (<div style={{ height: 700, width: 500, ...style }}>\n      <Scene renderer=\"logarithmicDepthBuffer: true\" embedded>\n        <Entity\n          id=\"camera\"\n          camera={{ active: true, fov: 94 }}\n          look-controls={{ enabled: true, pointerLockEnabled: false }}\n          wasd-controls={{ enabled: true }}\n          position={{ x: 0, y: 2, z: 30 }}\n        >\n        </Entity>\n        <Entity\n          id=\"left\"\n          el-movement\n          raycaster=\"show-line:true; lineColor: steelblue; lineOpacity: 0.85; objects: #sphere, [forcegraph]\"\n          laser-controls={{ hand: \"left\" }}\n          hand-tracking-controls={{ hand: \"left\" }}\n        />\n        <Entity\n          id=\"right\"\n          el-movement\n          raycaster=\"show-line:true; lineColor: steelblue; lineOpacity: 0.85; objects: #sphere, [forcegraph]\"\n          laser-controls={{ hand: \"right\" }}\n          hand-tracking-controls={{ hand: \"right\" }}\n          hand-tracking-extras\n          events={{\n            loaded: () => {\n              initialize();\n            }\n          }}\n        ></Entity>\n        <Entity\n          id=\"fg\"\n          scale={{ x: 1, y: 1, z: 1 }}\n          position={{ x: 0, y: 0.5, z: 0 }}\n          forcegraph={{\n            nodes: JSON.stringify(graphData.nodes),\n            links: JSON.stringify(graphData.edges),\n            // dagMode: \"radialout\",\n            // dagNodeFilter: (node) => node.type_id === 55 ? false : true,\n            linkWidth: 0.4,\n            linkDirectionalArrowLength: 4,\n            linkDirectionalArrowRelPos: 1,\n            nodeResolution: 16,\n            nodeOpacity: 1,\n            // nodeColor: (node) => getColorFromId(node.type_id),\n            // nodeThreeObject: (node) => {\n            //   const group = new THREE.Group();\n\n            //   let nodeid = generateLabel(node.id, getColorFromId(node.type_id));\n            //   nodeid.position.set(0, 10, 0);\n            //   group.add(nodeid);\n\n            //   if (node.type) {\n            //     let nodetype = generateLabel(node.type, getColorFromId(node.type_id));\n            //     nodetype.position.set(0, 6, 0);\n            //     group.add(nodetype);\n            //   }\n\n            //   if (node.name) {\n            //     let nodename = generateLabel(node.name, getColorFromId(node.type_id));\n            //     nodename.position.set(0, -6, 0);\n            //     group.add(nodename);\n            //   }\n\n\n            //   const radius = 3; // Half the radius to make sphere smaller\n            //   const sphereGeometry = new THREE.SphereGeometry(radius, 16, 16);\n            //   const sphereMaterial = new THREE.MeshStandardMaterial({\n            //     color: getColorFromId(node.type_id),\n            //     emissive: getColorFromId(node.type_id),\n            //     emissiveIntensity: 2\n            //   });\n            //   let sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);\n            //   group.add(sphere);\n\n            //   // const camera = document.querySelector(\"[camera]\").object3D;\n            //   // // create an AudioListener and add it to the camera\n            //   // const listener = new THREE.AudioListener();\n            //   // camera.add(listener);\n\n            //   // create the PositionalAudio object (passing in the listener)\n            //   // const sound = new THREE.PositionalAudio(listener);\n\n            //   // // load a sound and set it as the PositionalAudio object's buffer\n            //   // const audioLoader = new THREE.AudioLoader();\n            //   // audioLoader.load(thq, function (buffer) {\n            //   //   sound.setBuffer(buffer);\n            //   //   sound.setRefDistance(10);\n            //   //   sound.setVolume(0.1);\n            //   //   sound.play();\n            //   // });\n            //   // group.add(sound);\n            //   return group;\n            // },\n            // onNodeHover: () => {\n            //   const sphereGeometry = new THREE.SphereGeometry(6, 16, 16);\n            //   const sphereMaterial = new THREE.MeshStandardMaterial({\n            //     color: getColorFromId(node.type_id),\n            //     emissive: getColorFromId(node.type_id),\n            //     emissiveIntensity: 2\n            //   });\n            //   let sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);\n            //   sphere.position.set(node.x, node.y, node.z)\n            // }\n          }}\n        />\n      </Scene>\n    </div>);\n  }\n\n\n\n  function getGraphData(deep, links, spaceId) {\n\n    let graphData = { nodes: [], edges: [] };\n    console.log({ links });\n    for (let i = 0; i < links.length; i++) {\n      const link = links[i];\n      const ml = deep.minilinks;\n\n      const focus = link?.inByType?.[deep.idLocal('@deep-foundation/core', 'Focus')]?.find(f => f.from_id === spaceId);\n      const isFocusSpace = (link.type_id === deep.idLocal('@deep-foundation/core', 'Focus') && link._applies.includes('space')) || (link?.to?.type_id === deep.idLocal('@deep-foundation/core', 'Focus') && link._applies.includes('space'));\n\n      let _value = '';\n      let _name = '';\n      let _type = '';\n      let _symbol = '';\n\n      if (typeof link?.value?.value !== 'undefined') {\n        let json;\n        try { json = json5.stringify(link?.value.value); } catch (error) { }\n        _value = (\n          typeof (link?.value.value) === 'object' && json\n            ? json : link?.value.value\n        );\n        if (typeof (_value) === 'string') _value = _value.split('\\n')[0];\n        if (_value.length > 20) _value = _value.slice(0, 11) + '...' + _value.slice(-9, _value.length);\n      }\n      if (link?.inByType?.[deep.idLocal('@deep-foundation/core', 'Contain')]?.[0]?.value?.value) {\n        _name = `name:${link?.inByType?.[deep.idLocal('@deep-foundation/core', 'Contain')]?.[0]?.value?.value}`;\n      }\n      if (ml.byTo[link?.type_id]?.find(l => l.type_id === deep.idLocal('@deep-foundation/core', 'Contain'))?.value?.value) {\n        _type = `type:${ml.byTo[link?.type_id]?.find(l => l.type_id === deep.idLocal('@deep-foundation/core', 'Contain'))?.value?.value}`;\n      }\n      if (ml.byTo[link?.type_id]?.find(l => l.type_id === deep.idLocal('@deep-foundation/core', 'Symbol'))?.value?.value) {\n        _symbol = ml.byTo[link?.type_id]?.find(l => l.type_id === deep.idLocal('@deep-foundation/core', 'Symbol'))?.value?.value;\n      }\n\n      const has_focus = !!focus?.value?.value?.x;\n\n      const graphNode = {\n        \"id\": link.id,\n        \"from_id\": link.from_id,\n        \"to_id\": link.to_id,\n        \"type_id\": link.type_id,\n        \"name\": (_name ? `${_name}` : undefined),\n        \"type\": (_type ? `${_type}` : undefined),\n        \"idstring\": `${link.id}`,\n        ...(has_focus ? {\n          x: focus.value.value.x,\n          y: focus.value.value.y,\n          z: focus.value.value.z,\n        } : {}),\n      };\n\n      graphData.nodes.push(graphNode);\n    }\n    const linkIds = links.map((link) => (link.id));\n    const linkTypeIds = links.map((link) => (link.type_id));\n    const spaceTypes = links.filter((link) => (link.type_id === 1)).map((link) => link.id);\n    const typedLinks = links.filter((link) => (spaceTypes.includes(link.type_id)));\n\n    const typedEdges = typedLinks.map((l) => ({ \"source\": l.id, \"target\": l.type_id, \"type\": \"type\" }));\n\n    const edges = links.filter((l) =>\n    ((l.to_id && l.from_id !== 0) &&\n      (linkIds.includes(l.to_id) &&\n        linkIds.includes(l.from_id)))).map((l) =>\n          [{ \"source\": l.from_id, \"target\": l.id, \"type\": \"from\" }, { \"source\": l.id, \"target\": l.to_id, \"type\": \"to\" }]\n        ).flat();\n\n\n    edges.push(...typedEdges);\n\n    graphData.edges = edges;\n    return graphData;\n  }\n\n  function useNodeDragger() {\n    //useMinilinksQuery\n    //useDeepSubscription\n\n    const elRef = React.useRef();\n    const raycastedObject = React.useRef();\n    const nodeObject = React.useRef();\n    const isDrag = React.useRef();\n    const startPos = React.useRef();\n    const newNodePos = React.useRef();\n    const newObjectPos = React.useRef();\n    const { focus, unfocus } = useFocusMethods();\n\n    const refRaycasterIntersection = React.useRef();\n    const refRaycasterIntersectionCleared = React.useRef();\n    const refTriggerdown = React.useRef();\n    const refTriggerup = React.useRef();\n    const refElMoved = React.useRef();\n\n    const initialize = () => {\n      let el;\n      setTimeout(() => {\n        elRef.current = el = document.getElementById(\"right\");\n\n        refRaycasterIntersection.current = function (evt) {\n          raycastedObject.current = evt.detail.intersections[0].object.parent;\n          console.log('Intersected!');\n          console.log(raycastedObject.current);\n        };\n        el.addEventListener('raycaster-intersection', refRaycasterIntersection.current);\n\n        refRaycasterIntersectionCleared.current = function (evt) {\n          if (!isDrag.current) {\n            raycastedObject.current = undefined;\n          } else console.log('Intersection cleared: ', evt.detail);\n\n        };\n        el.addEventListener('raycaster-intersection-cleared', refRaycasterIntersectionCleared.current);\n\n        refTriggerdown.current = function (evt) {\n          if (!raycastedObject.current) return;\n          isDrag.current = true;\n          startPos.current = el.getAttribute('position');\n          nodeObject.current = raycastedObject.current.__data;\n          console.log('triggerdown, controllerStartPos:');\n          console.log(startPos.current);\n        };\n        el.addEventListener('triggerdown', refTriggerdown.current);\n\n        refElMoved.current = function (evt) {\n          if (!raycastedObject.current) return;\n          if (nodeObject.current && isDrag.current && startPos.current) {\n            const pos = evt.detail.position;\n            const objectPos = raycastedObject.current.position;\n            const deltaX = startPos.current.x - pos.x;\n            const deltaY = startPos.current.y - pos.y;\n            const deltaZ = startPos.current.z - pos.z;\n            console.log('pos');\n            console.log(pos);\n            console.log(\"objectPos\");\n            console.log(objectPos);\n            // @ts-ignore\n            newNodePos.current = { x: nodeObject.current.x - deltaX, y: nodeObject.current.y - deltaY, z: nodeObject.current.z - deltaZ }\n            newObjectPos.current = { x: objectPos.x - deltaX, y: objectPos.y - deltaY, z: objectPos.z - deltaZ }\n            // console.log(newNodePos.current);\n            // raycastedObject.current.position.set(newObjectPos);\n            // @ts-ignore\n            // focus(raycastedObject.current.id, { x: raycastedObject.current.x - deltaX*3, y: raycastedObject.current.y - deltaY*3, z: raycastedObject.current.z - deltaZ*3 });\n          }\n        }\n        el.addEventListener('el-moved', refElMoved.current);\n\n        refTriggerup.current = function (evt) {\n          if (nodeObject.current && isDrag.current && newNodePos.current) {\n            // @ts-ignore\n            // focus(nodeObject.current.id, newNodePos.current);\n          }\n          isDrag.current = false;\n          console.log('triggerup');\n        };\n        el.addEventListener('triggerup', refTriggerup.current);\n      }, 1000);\n    };\n\n    React.useEffect(() => {\n      return () => {\n        const el = elRef.current;\n        if (el) {\n          el.removeEventListener('raycaster-intersection', refRaycasterIntersection.current);\n          el.removeEventListener('raycaster-intersection-cleared', refRaycasterIntersectionCleared.current);\n          el.removeEventListener('triggerdown', refTriggerdown.current);\n          el.removeEventListener('triggerup', refTriggerup.current);\n          el.removeEventListener('el-moved', refElMoved.current);\n        }\n      };\n    }, []);\n\n    // ref to store dragged object\n    // useEffect to fire and clear events\n    // inside triggerdown\n\n    return { initialize };\n  }\n}\n\n\n"
       }
     },
     {
-      "id": "Graph",
-      "type": 2
+      "id": "graphHandler",
+      "type": 3,
+      "from": 4,
+      "to": "graphtsxcode"
+    },
+    {
+      "id": "graphHandleClient",
+      "type": 5,
+      "from": "Graph",
+      "to": "graphHandler"
     }
@@ -39,10 +76,10 @@ ],
     {
-      "name": "@deep-foundation/tsx",
-      "version": "0.0.3"
+      "name": "@deep-foundation/core",
+      "version": "0.0.2"
     },
     {
-      "name": "@deep-foundation/core",
-      "version": "0.0.2"
+      "name": "@deep-foundation/tsx",
+      "version": "0.0.4"
     }
   ]
 }

package.json

@@ -6,3 +6,3 @@ {
   ],
-  "version": "0.0.8",
+  "version": "0.0.9",
   "dependencies": {
@@ -12,2 +12,2 @@ "@deep-foundation/core": "^0.0.2",
   }
-}
+}

No alert changes

Improved metrics

Total package byte prevSize

17862

increased by310.34%

Lines of code

127

increased by139.62%

No dependency changes