@kiberon-labs/behave-graph-scene 1.0.1 → 2.0.0

package/stories/data/rotate.json

@@ -0,0 +1,402 @@
+{
+  "v": "1.0.0",
+  "name": "Untitled Graph",
+  "annotations": {},
+  "data": {},
+  "flow": {
+    "nodes": [
+      {
+        "id": "7933216f-38df-4042-994b-8c57027db3d5",
+        "type": "lifecycle/onTick",
+        "flows": {
+          "flow": {
+            "nodeId": "c647cb90-9645-4d04-9f36-ba692f947a12",
+            "socket": "flow"
+          }
+        }
+      },
+      {
+        "id": "9a2b84eb-c66f-45f0-91ba-7e69c4708952",
+        "type": "scene/get/euler",
+        "parameters": {
+          "jsonPath": {
+            "value": "cube/rotation"
+          }
+        }
+      },
+      {
+        "id": "35d25c9e-7f3a-484f-94b9-0f90d008c020",
+        "type": "math/add/euler",
+        "parameters": {
+          "b": {
+            "link": {
+              "nodeId": "43a38425-e383-44a2-b305-a79779c18589",
+              "socket": "result"
+            }
+          },
+          "a": {
+            "link": {
+              "nodeId": "9a2b84eb-c66f-45f0-91ba-7e69c4708952",
+              "socket": "value"
+            }
+          }
+        }
+      },
+      {
+        "id": "c647cb90-9645-4d04-9f36-ba692f947a12",
+        "type": "scene/set/euler",
+        "parameters": {
+          "jsonPath": {
+            "value": "cube/rotation"
+          },
+          "value": {
+            "link": {
+              "nodeId": "35d25c9e-7f3a-484f-94b9-0f90d008c020",
+              "socket": "result"
+            }
+          }
+        },
+        "flows": {
+          "flow": {
+            "nodeId": "0b3b56fe-71f0-460e-83ae-1cf04dba010a",
+            "socket": "flow"
+          }
+        }
+      },
+      {
+        "id": "43a38425-e383-44a2-b305-a79779c18589",
+        "type": "math/scale/euler",
+        "parameters": {
+          "a": {
+            "value": [
+              0,
+              1,
+              0
+            ]
+          },
+          "b": {
+            "link": {
+              "nodeId": "7933216f-38df-4042-994b-8c57027db3d5",
+              "socket": "deltaSeconds"
+            }
+          }
+        }
+      },
+      {
+        "id": "854d45c7-301c-40b8-aa3e-0ee4645f3489",
+        "type": "scene/get/euler",
+        "parameters": {
+          "jsonPath": {
+            "value": "torus/rotation"
+          }
+        }
+      },
+      {
+        "id": "73daf6b5-bfd9-4625-b719-805660217777",
+        "type": "math/add/euler",
+        "parameters": {
+          "a": {
+            "value": [
+              0.1,
+              0,
+              -0.1
+            ]
+          },
+          "b": {
+            "link": {
+              "nodeId": "854d45c7-301c-40b8-aa3e-0ee4645f3489",
+              "socket": "value"
+            }
+          }
+        }
+      },
+      {
+        "id": "0b3b56fe-71f0-460e-83ae-1cf04dba010a",
+        "type": "scene/set/euler",
+        "parameters": {
+          "jsonPath": {
+            "value": "torus/rotation"
+          },
+          "value": {
+            "link": {
+              "nodeId": "73daf6b5-bfd9-4625-b719-805660217777",
+              "socket": "result"
+            }
+          }
+        }
+      }
+    ],
+    "variables": [],
+    "customEvents": []
+  },
+  "nodes": [
+    {
+      "id": "7933216f-38df-4042-994b-8c57027db3d5",
+      "type": "behaveNode",
+      "position": {
+        "x": 126.18046192944144,
+        "y": 135.79999923706055
+      },
+      "data": {
+        "configuration": {},
+        "type": "lifecycle/onTick",
+        "ports": {}
+      },
+      "width": 120,
+      "height": 104,
+      "selected": false,
+      "dragging": false,
+      "positionAbsolute": {
+        "x": 126.18046192944144,
+        "y": 135.79999923706055
+      }
+    },
+    {
+      "id": "9a2b84eb-c66f-45f0-91ba-7e69c4708952",
+      "type": "behaveNode",
+      "position": {
+        "x": 246.50835416808889,
+        "y": 401.4752317127613
+      },
+      "data": {
+        "configuration": {},
+        "type": "scene/get/euler",
+        "ports": {
+          "jsonPath": "cube/rotation"
+        },
+        "annotations": {
+          "ui.executing": false
+        }
+      },
+      "width": 120,
+      "height": 104,
+      "selected": false,
+      "dragging": false,
+      "positionAbsolute": {
+        "x": 246.50835416808889,
+        "y": 401.4752317127613
+      }
+    },
+    {
+      "id": "35d25c9e-7f3a-484f-94b9-0f90d008c020",
+      "type": "behaveNode",
+      "position": {
+        "x": 566.7798401526775,
+        "y": 335.64361305869755
+      },
+      "data": {
+        "configuration": {},
+        "type": "math/add/euler",
+        "ports": {
+          "b": [
+            0,
+            0.1,
+            0
+          ]
+        },
+        "annotations": {
+          "ui.executing": false
+        }
+      },
+      "width": 120,
+      "height": 136,
+      "selected": false,
+      "positionAbsolute": {
+        "x": 566.7798401526775,
+        "y": 335.64361305869755
+      },
+      "dragging": false
+    },
+    {
+      "id": "c647cb90-9645-4d04-9f36-ba692f947a12",
+      "type": "behaveNode",
+      "position": {
+        "x": 695.417237582175,
+        "y": 149.76164364252836
+      },
+      "data": {
+        "configuration": {},
+        "type": "scene/set/euler",
+        "ports": {
+          "jsonPath": "cube/rotation"
+        },
+        "annotations": {
+          "ui.executing": false
+        }
+      },
+      "width": 120,
+      "height": 136,
+      "selected": false,
+      "positionAbsolute": {
+        "x": 695.417237582175,
+        "y": 149.76164364252836
+      },
+      "dragging": false
+    },
+    {
+      "id": "43a38425-e383-44a2-b305-a79779c18589",
+      "type": "behaveNode",
+      "position": {
+        "x": 349.5981634660043,
+        "y": 222.60375588848257
+      },
+      "data": {
+        "configuration": {},
+        "type": "math/scale/euler",
+        "ports": {
+          "a": [
+            0,
+            1,
+            0
+          ]
+        }
+      },
+      "width": 120,
+      "height": 136,
+      "selected": false,
+      "positionAbsolute": {
+        "x": 349.5981634660043,
+        "y": 222.60375588848257
+      },
+      "dragging": false
+    },
+    {
+      "id": "854d45c7-301c-40b8-aa3e-0ee4645f3489",
+      "type": "behaveNode",
+      "position": {
+        "x": 553.4721270320143,
+        "y": 573.7862679499057
+      },
+      "data": {
+        "configuration": {},
+        "type": "scene/get/euler",
+        "ports": {
+          "jsonPath": "torus/rotation"
+        }
+      },
+      "width": 120,
+      "height": 104,
+      "selected": false,
+      "positionAbsolute": {
+        "x": 553.4721270320143,
+        "y": 573.7862679499057
+      },
+      "dragging": false
+    },
+    {
+      "id": "73daf6b5-bfd9-4625-b719-805660217777",
+      "type": "behaveNode",
+      "position": {
+        "x": 847.4032303308832,
+        "y": 401.68187193938405
+      },
+      "data": {
+        "configuration": {},
+        "type": "math/add/euler",
+        "ports": {
+          "a": [
+            0.1,
+            0,
+            -0.1
+          ]
+        }
+      },
+      "width": 120,
+      "height": 136,
+      "selected": false,
+      "positionAbsolute": {
+        "x": 847.4032303308832,
+        "y": 401.68187193938405
+      },
+      "dragging": false
+    },
+    {
+      "id": "0b3b56fe-71f0-460e-83ae-1cf04dba010a",
+      "type": "behaveNode",
+      "position": {
+        "x": 961.4949085850494,
+        "y": 161.89597187978052
+      },
+      "data": {
+        "configuration": {},
+        "type": "scene/set/euler",
+        "ports": {
+          "jsonPath": "torus/rotation"
+        }
+      },
+      "width": 120,
+      "height": 136,
+      "selected": false,
+      "positionAbsolute": {
+        "x": 961.4949085850494,
+        "y": 161.89597187978052
+      },
+      "dragging": false
+    }
+  ],
+  "edges": [
+    {
+      "id": "c3410f8c-479e-4b27-919a-8fbbf4175923",
+      "source": "c647cb90-9645-4d04-9f36-ba692f947a12",
+      "target": "0b3b56fe-71f0-460e-83ae-1cf04dba010a",
+      "sourceHandle": "flow",
+      "targetHandle": "flow"
+    },
+    {
+      "id": "087992ae-4c68-4f8c-a907-48ba5dfc5484",
+      "source": "73daf6b5-bfd9-4625-b719-805660217777",
+      "target": "0b3b56fe-71f0-460e-83ae-1cf04dba010a",
+      "sourceHandle": "result",
+      "targetHandle": "value"
+    },
+    {
+      "id": "d89f17af-641e-4915-9a02-349a11d8beee",
+      "source": "854d45c7-301c-40b8-aa3e-0ee4645f3489",
+      "target": "73daf6b5-bfd9-4625-b719-805660217777",
+      "sourceHandle": "value",
+      "targetHandle": "b"
+    },
+    {
+      "id": "1a360ac4-d9fd-4129-ac15-cd47fc5b3dfa",
+      "source": "43a38425-e383-44a2-b305-a79779c18589",
+      "target": "35d25c9e-7f3a-484f-94b9-0f90d008c020",
+      "sourceHandle": "result",
+      "targetHandle": "b"
+    },
+    {
+      "id": "c602ec99-3292-43d4-a609-5c27ed10e539",
+      "source": "7933216f-38df-4042-994b-8c57027db3d5",
+      "target": "43a38425-e383-44a2-b305-a79779c18589",
+      "sourceHandle": "deltaSeconds",
+      "targetHandle": "b"
+    },
+    {
+      "id": "a0240d58-cc03-448a-8fc5-3169cb415ec1",
+      "source": "7933216f-38df-4042-994b-8c57027db3d5",
+      "target": "c647cb90-9645-4d04-9f36-ba692f947a12",
+      "sourceHandle": "flow",
+      "targetHandle": "flow"
+    },
+    {
+      "id": "514f084f-85ca-43cf-83b0-40569b4a00fe",
+      "source": "35d25c9e-7f3a-484f-94b9-0f90d008c020",
+      "target": "c647cb90-9645-4d04-9f36-ba692f947a12",
+      "sourceHandle": "result",
+      "targetHandle": "value"
+    },
+    {
+      "id": "672606d4-0c8a-4c36-9737-fcff4dc4d41c",
+      "source": "9a2b84eb-c66f-45f0-91ba-7e69c4708952",
+      "target": "35d25c9e-7f3a-484f-94b9-0f90d008c020",
+      "sourceHandle": "value",
+      "targetHandle": "a"
+    }
+  ],
+  "user": {
+    "viewport": {
+      "x": -80.62843345750235,
+      "y": 34.07906106637273,
+      "zoom": 0.5171279877973534
+    }
+  }
+}

package/stories/index.stories.tsx

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import {
+  kitchenSinkPlugin,
+  GraphProvider,
+  LayoutController,
+  localGraphRunnerPlugin,
+  System,
+  SystemProvider
+} from '@kiberon-labs/behave-graph-flow';
+import {
+  DefaultLogger,
+  ManualLifecycleEventEmitter,
+  registerCoreProfile
+} from '@kiberon-labs/behave-graph';
+import { registerSceneProfile } from '@/registerSceneProfile';
+import { DemoScene } from './components/DemoScene';
+import { sceneViewerPlugin } from './plugin/sceneViewerPlugin';
+import { Vec3Control } from '@/ui/controls/vec3';
+import rotate from './data/rotate.json';
+
+const meta: Meta<typeof LayoutController> = {
+  component: LayoutController,
+  title: 'Apex/default',
+  decorators: [(Story) => <Story />],
+  parameters: {
+    layout: 'fullscreen'
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// Create a demo scene instance
+const demoScene = new DemoScene();
+
+// Create the old-style registry for node definitions
+const coreRegistry = registerSceneProfile(
+  registerCoreProfile({
+    nodes: {},
+    values: {},
+    dependencies: {
+      IScene: demoScene,
+      ILifecycleEventEmitter: new ManualLifecycleEventEmitter(),
+      ILogger: new DefaultLogger()
+    }
+  })
+);
+
+// Convert to INodeRegistry
+const nodeRegistry = {
+  values: coreRegistry.values,
+  specs: []
+};
+
+const defaultSys = new System(nodeRegistry);
+const defaultSession = defaultSys.createSession('graph');
+
+defaultSys.controlStore.getState().registerControl('color', Vec3Control);
+defaultSys.controlStore.getState().registerControl('vec3', Vec3Control);
+defaultSys.controlStore.getState().registerControl('euler', Vec3Control);
+
+defaultSession.graph.deseralize(rotate);
+defaultSession.flowStore.getState().setGraph(rotate.flow, { skipLayout: true });
+
+defaultSys.registerPlugin(kitchenSinkPlugin);
+defaultSys.registerPlugin(localGraphRunnerPlugin, {
+  registry: coreRegistry,
+  // Use RAF-based tick strategy for smooth animation frame sync
+  tickStrategy: async () => {
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+  }
+});
+defaultSys.registerPlugin(sceneViewerPlugin, {
+  scene: demoScene,
+  addMenuItem: true
+});
+
+export const Default: Story = {
+  render: () => {
+    return (
+      <SystemProvider value={defaultSys}>
+        <GraphProvider value={defaultSession}>
+          <LayoutController />
+        </GraphProvider>
+      </SystemProvider>
+    );
+  },
+  args: {}
+};

package/stories/plugin/sceneViewerPlugin.tsx

@@ -0,0 +1,88 @@
+import { MenuItemElement, plugin } from '@kiberon-labs/behave-graph-flow';
+import type { System } from '@kiberon-labs/behave-graph-flow';
+import type { DemoScene } from '../components/DemoScene';
+import { SceneViewerPanel } from '../components/SceneViewerPanel';
+
+interface SceneViewerPluginOptions {
+  scene: DemoScene;
+  addMenuItem?: boolean;
+}
+
+/**
+ * Plugin loader function that adds a 3D Scene Viewer tab to the system
+ */
+const sceneViewerPluginLoader = (
+  system: System,
+  options?: SceneViewerPluginOptions
+) => {
+  const scene = options?.scene;
+
+  // Register the scene viewer tab
+  system.tabLoader.register('sceneViewer', () => {
+    return {
+      id: 'sceneViewer',
+      closable: true,
+      title: '3D Scene Viewer',
+      group: 'default',
+      content: () =>
+        scene ? (
+          <SceneViewerPanel scene={scene} />
+        ) : (
+          <div style={{ padding: 8 }}>No scene provided to the viewer.</div>
+        )
+    };
+  });
+
+  // Add menu item to Window menu (unless disabled)
+  if (options?.addMenuItem !== false) {
+    const menuStore = system.menubarStore;
+
+    const currentItems = menuStore.getState().items;
+    const windowMenu = currentItems.find((menu) => menu.name === 'window');
+
+    if (windowMenu) {
+      // Check if item already exists
+      const existingItem = windowMenu.items?.find(
+        (item) => 'name' in item && item.name === 'sceneViewer'
+      );
+
+      if (!existingItem) {
+        const newMenuItem = {
+          name: 'sceneViewer',
+          render: function SceneViewerMenuItem() {
+            return (
+              <MenuItemElement
+                onClick={() =>
+                  system.tabStore.getState().openTab('sceneViewer')
+                }
+              >
+                3D Scene Viewer
+              </MenuItemElement>
+            );
+          }
+        };
+
+        menuStore.setState({
+          items: currentItems.map((menu) =>
+            menu.name === 'window'
+              ? { ...menu, items: [...(menu.items || []), newMenuItem] }
+              : menu
+          )
+        });
+      }
+    }
+  }
+
+  // Automatically open the scene viewer tab
+  setTimeout(() => {
+    system.tabStore.getState().openTab('sceneViewer');
+  }, 100);
+};
+
+/**
+ * Plugin that adds a 3D Scene Viewer tab to the system
+ */
+export const sceneViewerPlugin = plugin<SceneViewerPluginOptions>(
+  sceneViewerPluginLoader,
+  { name: 'sceneViewerPlugin' }
+);

package/tests/manifest.test.ts

@@ -0,0 +1,65 @@
+import {
+  ContributionKind,
+  parseManifest,
+  runManifestSource
+} from '@kiberon-labs/behave-graph';
+import manifestSource from '../src/manifest.source.js';
+import { describe, test, expect } from 'vitest';
+
+describe('scene package manifest', () => {
+  test('generates a valid manifest from the source (no IScene driver, no node exec)', async () => {
+    const manifest = await runManifestSource(manifestSource);
+    expect(parseManifest(manifest).ok).toBe(true);
+    expect(manifest.package.name).toBe('@kiberon-labs/behave-graph-scene');
+    expect(manifest.categories).toEqual(['effect']);
+    expect(manifest.runtime).toBe('./index.js');
+    expect(manifest.nodes.length).toBeGreaterThan(100);
+  });
+
+  test('carries every scene value type with function-free JSON defaults', async () => {
+    const manifest = await runManifestSource(manifestSource);
+    const byName = Object.fromEntries(
+      manifest.values.map((v) => [v.name, v.defaultJSON])
+    );
+    expect(Object.keys(byName).sort()).toEqual([
+      'color',
+      'euler',
+      'mat3',
+      'mat4',
+      'quat',
+      'vec2',
+      'vec3',
+      'vec4'
+    ]);
+    expect(byName.vec3).toEqual([0, 0, 0]);
+    // identity matrix
+    expect(byName.mat4).toEqual([
+      1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1
+    ]);
+    // No functions leak into the manifest.
+    manifest.values.forEach((v) =>
+      Object.values(v).forEach((field) =>
+        expect(typeof field).not.toBe('function')
+      )
+    );
+  });
+
+  test('declares the vec3 control and a value-type contribution per scene type', async () => {
+    const manifest = await runManifestSource(manifestSource);
+    const control = manifest.contributions.find(
+      (c) => c.kind === ContributionKind.Control
+    );
+    expect(control?.export).toBe('./ui/controls/vec3.js#Vec3Control');
+    expect(control?.bind?.controlName).toBe('vec3');
+
+    const valueTypeContribs = manifest.contributions.filter(
+      (c) => c.kind === ContributionKind.ValueType
+    );
+    expect(valueTypeContribs).toHaveLength(8);
+    // Every declared value-type contribution binds to a value the manifest carries.
+    const valueNames = new Set(manifest.values.map((v) => v.name));
+    valueTypeContribs.forEach((c) =>
+      expect(valueNames.has(c.bind?.valueType ?? '')).toBe(true)
+    );
+  });
+});

package/tests/readSceneGraphs.test.ts

@@ -9,17 +9,24 @@ import {
   validateGraphLinks,
   registerCoreProfile,
   validateGraphAcyclic,
+  DefaultLogger,
+  ManualLifecycleEventEmitter,
   type IRegistry,
   type GraphInstance,
   type GraphJSON
 } from '@kiberon-labs/behave-graph';
 import { registerSceneProfile } from '@/registerSceneProfile.js';
+import { DummyScene } from '@/Abstractions/Drivers/DummyScene.js';
 import { describe, test, expect } from 'vitest';
 
 let registry: IRegistry = {
   nodes: {},
   values: {},
-  dependencies: {}
+  dependencies: {
+    ILogger: new DefaultLogger(),
+    ILifecycleEventEmitter: new ManualLifecycleEventEmitter(),
+    IScene: new DummyScene()
+  }
 };
 registry = registerCoreProfile(registry);
 registry = registerSceneProfile(registry);

package/tests/registerSceneProfile.test.ts

@@ -1,11 +1,13 @@
 import {
   validateValueRegistry,
   registerCoreProfile,
-  validateNodeRegistry,
+  DefaultLogger,
+  ManualLifecycleEventEmitter,
   type IRegistry
 } from '@kiberon-labs/behave-graph';
 
 import { registerSceneProfile } from '../src/registerSceneProfile.js';
+import { DummyScene } from '../src/Abstractions/Drivers/DummyScene.js';
 import { describe, test, expect } from 'vitest';
 
 describe('scene profile', () => {
@@ -13,15 +15,14 @@ describe('scene profile', () => {
     nodes: {},
     values: {},
     dependencies: {
-      IScene: null
+      ILogger: new DefaultLogger(),
+      ILifecycleEventEmitter: new ManualLifecycleEventEmitter(),
+      IScene: new DummyScene()
     }
   };
   registry = registerCoreProfile(registry);
   registry = registerSceneProfile(registry);
 
-  test('validate node registry', () => {
-    expect(validateNodeRegistry(registry)).toHaveLength(0);
-  });
   test('validate value registry', () => {
     expect(validateValueRegistry(registry.values)).toHaveLength(0);
   });