@aaqu/fromcubes-portal-react 0.1.0-alpha.12 → 0.1.0-alpha.14

package/examples/005-threejs-portal-flow.json

@@ -0,0 +1,87 @@
+[
+  {
+    "id": "fc-three-flow",
+    "type": "tab",
+    "label": "Three.js Demo",
+    "disabled": false
+  },
+  {
+    "id": "fc-three-comp-box",
+    "type": "fc-portal-component",
+    "z": "fc-three-flow",
+    "compName": "Box",
+    "compCode": "import { useFrame } from '@react-three/fiber';\n\nfunction Box({ position, color = 'orange', onToggle }) {\n  const ref = useRef();\n  const [hovered, hover] = useState(false);\n  const [clicked, click] = useState(false);\n\n  useFrame((state, delta) => (ref.current.rotation.x += delta));\n\n  return (\n    <mesh\n      position={position}\n      ref={ref}\n      scale={clicked ? 1.5 : 1}\n      onClick={() => {\n        click(!clicked);\n        if (onToggle) onToggle(!clicked);\n      }}\n      onPointerOver={(e) => (e.stopPropagation(), hover(true))}\n      onPointerOut={() => hover(false)}\n    >\n      <boxGeometry args={[1, 1, 1]} />\n      <meshStandardMaterial color={hovered ? 'hotpink' : color} />\n    </mesh>\n  );\n}",
+    "compInputs": "position,color,onToggle",
+    "compOutputs": "",
+    "x": 160,
+    "y": 300,
+    "wires": []
+  },
+  {
+    "id": "fc-three-comp-statusbar",
+    "type": "fc-portal-component",
+    "z": "fc-three-flow",
+    "compName": "StatusBar",
+    "compCode": "function StatusBar({ leftColor, rightColor, clickCount }) {\n  return (\n    <div className=\"px-6 py-4 bg-zinc-900/50 border-t border-zinc-800/50 flex items-center gap-6 flex-wrap\">\n      <Stat label=\"Left box\">\n        <span className=\"w-4 h-4 rounded-full border border-zinc-700\" style={{ backgroundColor: leftColor }} />\n      </Stat>\n      <Stat label=\"Right box\">\n        <span className=\"w-4 h-4 rounded-full border border-zinc-700\" style={{ backgroundColor: rightColor }} />\n      </Stat>\n      <Stat label=\"Clicks\">\n        <span className=\"text-sm font-mono text-cyan-400\">{clickCount}</span>\n      </Stat>\n    </div>\n  );\n}",
+    "compInputs": "leftColor,rightColor,clickCount",
+    "compOutputs": "",
+    "x": 360,
+    "y": 300,
+    "wires": []
+  },
+  {
+    "id": "fc-three-inject",
+    "type": "inject",
+    "z": "fc-three-flow",
+    "name": "Tick",
+    "props": [{ "p": "payload" }],
+    "repeat": "3",
+    "payload": "{}",
+    "payloadType": "json",
+    "x": 160,
+    "y": 160,
+    "wires": [["fc-three-func"]]
+  },
+  {
+    "id": "fc-three-func",
+    "type": "function",
+    "z": "fc-three-flow",
+    "name": "Random colors",
+    "func": "const rnd = () => '#' + Math.floor(Math.random()*16777215).toString(16).padStart(6,'0');\nmsg.payload = {\n  leftColor: rnd(),\n  rightColor: rnd()\n};\nreturn msg;",
+    "outputs": 1,
+    "x": 360,
+    "y": 160,
+    "wires": [["fc-three-portal"]]
+  },
+  {
+    "id": "fc-three-portal",
+    "type": "portal-react",
+    "z": "fc-three-flow",
+    "name": "3D Portal",
+    "endpoint": "/fromcubes/3d",
+    "pageTitle": "fromcubes 3D",
+    "customHead": "",
+    "portalAuth": false,
+    "showWsStatus": false,
+    "libs": [
+      { "module": "three", "var": "THREE" },
+      { "module": "@react-three/fiber", "var": "R3F" },
+      { "module": "@react-three/drei", "var": "Drei" }
+    ],
+    "componentCode": "import { Canvas } from '@react-three/fiber';\nimport { OrbitControls } from '@react-three/drei';\n\nfunction App() {\n  const { data, send } = useNodeRed();\n  const colors = data || { leftColor: 'orange', rightColor: 'cyan' };\n  const [clickCount, setClickCount] = useState(0);\n\n  const handleToggle = useCallback((clicked) => {\n    setClickCount(prev => prev + 1);\n    send({ action: clicked ? 'clicked' : 'unclicked', clicks: clickCount + 1 }, '3d/interact');\n  }, [send, clickCount]);\n\n  return (\n    <div className=\"h-screen bg-zinc-950 text-zinc-100 flex flex-col\">\n      <Header title=\"fromcubes 3D\" subtitle=\"React Three Fiber + live Node-RED data\" />\n      <div className=\"flex-1 overflow-hidden\">\n        <Canvas style={{ width: '100%', height: '100%' }}>\n          <ambientLight intensity={Math.PI / 2} />\n          <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />\n          <pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />\n          <Box position={[-1.2, 0, 0]} color={colors.leftColor} onToggle={handleToggle} />\n          <Box position={[1.2, 0, 0]} color={colors.rightColor} onToggle={handleToggle} />\n          <OrbitControls />\n        </Canvas>\n      </div>\n      <StatusBar leftColor={colors.leftColor} rightColor={colors.rightColor} clickCount={clickCount} />\n    </div>\n  );\n}",
+    "x": 560,
+    "y": 160,
+    "wires": [["fc-three-debug"]]
+  },
+  {
+    "id": "fc-three-debug",
+    "type": "debug",
+    "z": "fc-three-flow",
+    "name": "3D output",
+    "active": true,
+    "tosidebar": true,
+    "x": 750,
+    "y": 160,
+    "wires": []
+  }
+]

package/examples/006-pixi-portal-flow.json

@@ -0,0 +1,86 @@
+[
+  {
+    "id": "fc-pixi-flow",
+    "type": "tab",
+    "label": "PixiJS Demo",
+    "disabled": false
+  },
+  {
+    "id": "fc-pixi-comp-clicksprite",
+    "type": "fc-portal-component",
+    "z": "fc-pixi-flow",
+    "compName": "ClickableSprite",
+    "compCode": "import { Assets, Texture } from 'pixi.js';\nimport { useTick } from '@pixi/react';\n\nfunction ClickableSprite({ id, x, y, tint, onClick }) {\n  const ref = useRef(null);\n  const [texture, setTexture] = useState(Texture.EMPTY);\n  const [hovered, setHovered] = useState(false);\n  const clicks = useRef(0);\n  const time = useRef(Math.random() * Math.PI * 2);\n\n  useEffect(() => {\n    if (texture === Texture.EMPTY) {\n      Assets.load('https://pixijs.com/assets/bunny.png').then(setTexture);\n    }\n  }, [texture]);\n\n  useTick((t) => {\n    if (!ref.current) return;\n    time.current += t.deltaTime * 0.03;\n    ref.current.rotation = Math.sin(time.current) * 0.15;\n  });\n\n  return (\n    <pixiSprite\n      ref={ref}\n      texture={texture}\n      anchor={0.5}\n      x={x}\n      y={y}\n      tint={tint}\n      scale={hovered ? 2.2 : 1.8}\n      eventMode=\"static\"\n      cursor=\"pointer\"\n      onPointerOver={() => setHovered(true)}\n      onPointerOut={() => setHovered(false)}\n      onClick={() => {\n        clicks.current += 1;\n        onClick({ id, x, y, clicks: clicks.current });\n      }}\n    />\n  );\n}",
+    "compInputs": "id,x,y,tint,onClick",
+    "compOutputs": "",
+    "x": 160,
+    "y": 300,
+    "wires": []
+  },
+  {
+    "id": "fc-pixi-comp-statusbar",
+    "type": "fc-portal-component",
+    "z": "fc-pixi-flow",
+    "compName": "StatusBar",
+    "compCode": "function StatusBar({ spriteCount, totalClicks, lastClicked }) {\n  return (\n    <div className=\"px-6 py-4 bg-zinc-900/50 border-t border-zinc-800/50 flex items-center gap-6 flex-wrap\">\n      <Stat label=\"Sprites\">\n        <span className=\"text-sm font-mono text-cyan-400\">{spriteCount}</span>\n      </Stat>\n      <Stat label=\"Total clicks\">\n        <span className=\"text-sm font-mono text-emerald-400\">{totalClicks}</span>\n      </Stat>\n      <Stat label=\"Last clicked\">\n        <span className=\"text-sm font-mono text-zinc-300\">{lastClicked || '\\u2014'}</span>\n      </Stat>\n    </div>\n  );\n}",
+    "compInputs": "spriteCount,totalClicks,lastClicked",
+    "compOutputs": "",
+    "x": 360,
+    "y": 300,
+    "wires": []
+  },
+  {
+    "id": "fc-pixi-inject",
+    "type": "inject",
+    "z": "fc-pixi-flow",
+    "name": "Tick",
+    "props": [{ "p": "payload" }],
+    "repeat": "5",
+    "payload": "{}",
+    "payloadType": "json",
+    "x": 160,
+    "y": 160,
+    "wires": [["fc-pixi-func"]]
+  },
+  {
+    "id": "fc-pixi-func",
+    "type": "function",
+    "z": "fc-pixi-flow",
+    "name": "Random tint",
+    "func": "const tints = [0x22d3ee, 0xa78bfa, 0x34d399, 0xfbbf24, 0xf87171, 0x60a5fa, 0xfb923c, 0xe879f9];\nmsg.payload = {\n  tint: tints[Math.floor(Math.random() * tints.length)]\n};\nreturn msg;",
+    "outputs": 1,
+    "x": 360,
+    "y": 160,
+    "wires": [["fc-pixi-portal"]]
+  },
+  {
+    "id": "fc-pixi-portal",
+    "type": "portal-react",
+    "z": "fc-pixi-flow",
+    "name": "Pixi Portal",
+    "endpoint": "/fromcubes/pixi",
+    "pageTitle": "fromcubes Pixi",
+    "customHead": "",
+    "portalAuth": false,
+    "showWsStatus": false,
+    "libs": [
+      { "module": "pixi.js", "var": "PIXI" },
+      { "module": "@pixi/react", "var": "PixiReact" }
+    ],
+    "componentCode": "import { Sprite } from 'pixi.js';\nimport { Application, extend } from '@pixi/react';\nextend({ Sprite });\n\nfunction App() {\n  const { data, send } = useNodeRed();\n  const [sprites, setSprites] = useState([]);\n  const [totalClicks, setTotalClicks] = useState(0);\n  const [lastClicked, setLastClicked] = useState(null);\n  const idRef = useRef(0);\n\n  useEffect(() => {\n    if (!data) return;\n    setSprites(prev => {\n      const next = [...prev, {\n        id: idRef.current++,\n        x: 40 + Math.random() * 520,\n        y: 40 + Math.random() * 320,\n        tint: data.tint || 0x22d3ee\n      }];\n      return next.length > 12 ? next.slice(-12) : next;\n    });\n  }, [data]);\n\n  const handleClick = useCallback((info) => {\n    setTotalClicks(c => c + 1);\n    setLastClicked('#' + info.id);\n    send({\n      action: 'clicked',\n      spriteId: info.id,\n      x: Math.round(info.x),\n      y: Math.round(info.y),\n      spriteClicks: info.clicks,\n      timestamp: Date.now()\n    }, 'pixi/click');\n  }, [send]);\n\n  return (\n    <Page>\n      <Header title=\"fromcubes Pixi\" subtitle=\"click the bunnies\" />\n      <div className=\"flex-1 flex items-center justify-center p-6\">\n        <div className=\"rounded-xl overflow-hidden border border-zinc-800\">\n          <Application width={600} height={400} background={0x18181b} antialias>\n            {sprites.map(s => (\n              <ClickableSprite key={s.id} {...s} onClick={handleClick} />\n            ))}\n          </Application>\n        </div>\n      </div>\n      <StatusBar spriteCount={sprites.length} totalClicks={totalClicks} lastClicked={lastClicked} />\n    </Page>\n  );\n}",
+    "x": 560,
+    "y": 160,
+    "wires": [["fc-pixi-debug"]]
+  },
+  {
+    "id": "fc-pixi-debug",
+    "type": "debug",
+    "z": "fc-pixi-flow",
+    "name": "Pixi output",
+    "active": true,
+    "tosidebar": true,
+    "x": 750,
+    "y": 160,
+    "wires": []
+  }
+]

package/examples/007-webgpu-tsl-flow.json

@@ -0,0 +1,85 @@
+[
+  {
+    "id": "fc-webgpu-flow",
+    "type": "tab",
+    "label": "WebGPU TSL Demo",
+    "disabled": false
+  },
+  {
+    "id": "fc-webgpu-comp-canvas",
+    "type": "fc-portal-component",
+    "z": "fc-webgpu-flow",
+    "compName": "TSLCanvas",
+    "compCode": "import { AmbientLight, Color, Mesh, MeshStandardNodeMaterial, PerspectiveCamera, PointLight, Scene, Timer, TorusKnotGeometry, WebGPURenderer } from 'three/webgpu';\nimport { uniform, sin, cos, time, uv, vec3, mix, float, positionLocal, normalLocal } from 'three/tsl';\n\nfunction TSLCanvas({ params }) {\n  const mountRef = useRef(null);\n  const stateRef = useRef(null);\n\n  useEffect(() => {\n    const el = mountRef.current;\n    const w = el.clientWidth;\n    const h = el.clientHeight;\n\n    const scene = new Scene();\n    const camera = new PerspectiveCamera(50, w / h, 0.1, 100);\n    camera.position.z = 4;\n\n    const renderer = new WebGPURenderer({ antialias: true });\n    renderer.setSize(w, h);\n    renderer.setPixelRatio(window.devicePixelRatio);\n    el.appendChild(renderer.domElement);\n\n    scene.add(new AmbientLight(0xffffff, 0.5));\n    const point = new PointLight(0xffffff, 1.5, 100);\n    point.position.set(5, 5, 5);\n    scene.add(point);\n\n    const colorAU = uniform(new Color(0x22d3ee));\n    const colorBU = uniform(new Color(0xa78bfa));\n\n    const t = time;\n    const uvNode = uv();\n    const wave = sin(uvNode.x.mul(6.28).add(t)).mul(0.5).add(0.5);\n    const pulse = cos(t.mul(0.7)).mul(0.5).add(0.5);\n    const blend = mix(vec3(colorAU), vec3(colorBU), wave.mul(pulse));\n\n    const mat = new MeshStandardNodeMaterial();\n    mat.colorNode = blend;\n    mat.roughnessNode = float(0.3);\n    mat.metalnessNode = float(0.7);\n\n    const displaceAmount = sin(positionLocal.y.mul(4.0).add(t)).mul(0.08);\n    mat.positionNode = positionLocal.add(normalLocal.mul(displaceAmount));\n\n    const geo = new TorusKnotGeometry(1, 0.35, 128, 32);\n    const mesh = new Mesh(geo, mat);\n    scene.add(mesh);\n\n    const targetA = new Color(0x22d3ee);\n    const targetB = new Color(0xa78bfa);\n    const st = { mesh, scene, camera, renderer, colorAU, colorBU, targetA, targetB };\n    stateRef.current = st;\n\n    let raf;\n    const timer = new Timer();\n    function animate() {\n      raf = requestAnimationFrame(animate);\n      timer.update();\n      const dt = timer.getDelta();\n      mesh.rotation.x += 0.3 * dt;\n      mesh.rotation.y += 0.6 * dt;\n      st.colorAU.value.lerp(st.targetA, Math.min(1, 2.5 * dt));\n      st.colorBU.value.lerp(st.targetB, Math.min(1, 2.5 * dt));\n      renderer.render(scene, camera);\n    }\n\n    renderer.init().then(() => animate());\n\n    const onResize = () => {\n      const w2 = el.clientWidth;\n      const h2 = el.clientHeight;\n      camera.aspect = w2 / h2;\n      camera.updateProjectionMatrix();\n      renderer.setSize(w2, h2);\n    };\n    window.addEventListener('resize', onResize);\n\n    return () => {\n      cancelAnimationFrame(raf);\n      window.removeEventListener('resize', onResize);\n      renderer.dispose();\n      geo.dispose();\n      mat.dispose();\n      el.removeChild(renderer.domElement);\n    };\n  }, []);\n\n  useEffect(() => {\n    const s = stateRef.current;\n    if (!s) return;\n    s.targetA.set(params.colorA);\n    s.targetB.set(params.colorB);\n  }, [params.colorA, params.colorB]);\n\n  return <div ref={mountRef} className=\"flex-1\" />;\n}",
+    "compInputs": "params",
+    "compOutputs": "",
+    "x": 160,
+    "y": 300,
+    "wires": []
+  },
+  {
+    "id": "fc-webgpu-comp-statusbar",
+    "type": "fc-portal-component",
+    "z": "fc-webgpu-flow",
+    "compName": "TSLStatusBar",
+    "compCode": "function TSLStatusBar({ params }) {\n  return (\n    <div className=\"px-6 py-4 bg-zinc-900/50 border-t border-zinc-800/50 flex items-center gap-6 flex-wrap\">\n      <Stat label=\"Color A\">\n        <span className=\"w-4 h-4 rounded-full border border-zinc-700\" style={{backgroundColor: params.colorA}} />\n      </Stat>\n      <Stat label=\"Color B\">\n        <span className=\"w-4 h-4 rounded-full border border-zinc-700\" style={{backgroundColor: params.colorB}} />\n      </Stat>\n      <Stat label=\"Backend\">\n        <span className=\"text-xs font-mono px-2 py-0.5 rounded bg-violet-500/20 text-violet-300\">WebGPU / TSL</span>\n      </Stat>\n    </div>\n  );\n}",
+    "compInputs": "params",
+    "compOutputs": "",
+    "x": 360,
+    "y": 300,
+    "wires": []
+  },
+  {
+    "id": "fc-webgpu-inject",
+    "type": "inject",
+    "z": "fc-webgpu-flow",
+    "name": "Tick",
+    "props": [{ "p": "payload" }],
+    "repeat": "3",
+    "payload": "{}",
+    "payloadType": "json",
+    "x": 160,
+    "y": 160,
+    "wires": [["fc-webgpu-func"]]
+  },
+  {
+    "id": "fc-webgpu-func",
+    "type": "function",
+    "z": "fc-webgpu-flow",
+    "name": "Random TSL params",
+    "func": "const pairs = [\n  ['#22d3ee','#a78bfa'],\n  ['#a78bfa','#f97316'],\n  ['#34d399','#e879f9'],\n  ['#f97316','#60a5fa'],\n  ['#f87171','#34d399'],\n  ['#e879f9','#22d3ee'],\n  ['#fbbf24','#f87171']\n];\nconst p = pairs[Math.floor(Math.random() * pairs.length)];\nmsg.payload = { colorA: p[0], colorB: p[1] };\nreturn msg;",
+    "outputs": 1,
+    "x": 360,
+    "y": 160,
+    "wires": [["fc-webgpu-portal"]]
+  },
+  {
+    "id": "fc-webgpu-portal",
+    "type": "portal-react",
+    "z": "fc-webgpu-flow",
+    "name": "WebGPU Portal",
+    "endpoint": "/fromcubes/webgpu",
+    "pageTitle": "fromcubes WebGPU",
+    "customHead": "",
+    "portalAuth": false,
+    "showWsStatus": false,
+    "libs": [
+      { "module": "three", "var": "THREE" }
+    ],
+    "componentCode": "function App() {\n  const { data } = useNodeRed();\n  const params = data || { colorA: '#22d3ee', colorB: '#a78bfa' };\n\n  return (\n    <Page>\n      <Header title=\"fromcubes WebGPU\" subtitle=\"Three.js TSL + live Node-RED data\" />\n      <TSLCanvas params={params} />\n      <TSLStatusBar params={params} />\n    </Page>\n  );\n}",
+    "x": 560,
+    "y": 160,
+    "wires": [["fc-webgpu-debug"]]
+  },
+  {
+    "id": "fc-webgpu-debug",
+    "type": "debug",
+    "z": "fc-webgpu-flow",
+    "name": "WebGPU output",
+    "active": true,
+    "tosidebar": true,
+    "x": 750,
+    "y": 160,
+    "wires": []
+  }
+]