Built-in widgets

Every built-in widget — slider, number, toggle, combo, color, text — on one node, in WebGL.

{
  "version": "xenolith.v1",
  "nodes": [
    {
      "id": "controls",
      "type": "Controls",
      "position": {
        "x": 0,
        "y": 0
      },
      "render": {
        "title": "All widgets"
      },
      "state": {
        "amount": 0.6,
        "count": 8,
        "enabled": true,
        "mode": "Multiply",
        "tint": "#FCB400",
        "name": "node"
      },
      "pins": [
        {
          "id": "controls:out",
          "kind": "data",
          "direction": "out",
          "type": "any",
          "multiple": true,
          "label": "Out"
        }
      ],
      "widgets": [
        {
          "id": "amount",
          "type": "slider",
          "key": "amount",
          "label": "Amount",
          "min": 0,
          "max": 1,
          "step": 0.01,
          "freeFloating": true
        },
        {
          "id": "count",
          "type": "number",
          "key": "count",
          "label": "Count",
          "min": 0,
          "max": 100,
          "step": 1,
          "freeFloating": true
        },
        {
          "id": "enabled",
          "type": "toggle",
          "key": "enabled",
          "label": "Enabled",
          "freeFloating": true
        },
        {
          "id": "mode",
          "type": "combo",
          "key": "mode",
          "label": "Mode",
          "values": [
            "Add",
            "Subtract",
            "Multiply"
          ],
          "freeFloating": true
        },
        {
          "id": "tint",
          "type": "color",
          "key": "tint",
          "label": "Tint",
          "freeFloating": true
        },
        {
          "id": "name",
          "type": "text",
          "key": "name",
          "label": "Name",
          "freeFloating": true
        }
      ]
    }
  ],
  "edges": []
}

import { XenolithGraph } from '@xenolithengine/graph-react'
import { buildBuiltinWidgets } from '@xenolithengine/demo/builtin-widgets'
import { DemoStage } from '../Layout.js'

/** Every built-in widget type on one node — slider, number, toggle, combo, color, text — rendered in
 *  WebGL and editable inline. The node is just DATA (@xenolithengine/demo/builtin-widgets, builtin-widgets.json). */
export function BuiltinWidgetsDemo() {
  return (
    <DemoStage>
      <XenolithGraph className="xeno" resizeToWindow={false} onReady={(editor) => buildBuiltinWidgets(editor)} />
    </DemoStage>
  )
}

// Every built-in widget type on one node — slider, number, toggle, combo, color, text — rendered in
// WebGL and editable inline. No custom code: just a node with a `widgets` array, defined as DATA in
// builtin-widgets.json and loaded with editor.loadJSON.

import type { XenolithEditor } from '@xenolithengine/graph-editor'
import graph from './builtin-widgets.json'

export function buildBuiltinWidgets(editor: XenolithEditor): void {
  editor.loadJSON(graph)
  editor.fitView({ padding: 90, maxZoom: 1 })
}