@downdraft/engine 0.1.1 → 0.2.0

package/dist/modules/devtools/src/graph-model.js

@@ -0,0 +1,387 @@
+// ============================================================================
+// GraphModel — Pure logic for node graph editor (no DOM dependencies).
+// Extracted from graph-editor.js for testability.
+// The browser JS file uses this same logic via a parallel implementation.
+// ============================================================================
+let _idCounter = 0;
+function uid() {
+    _idCounter++;
+    return "n_" + _idCounter.toString(36) + "_" + Math.random().toString(36).slice(2, 8);
+}
+let _connCounter = 0;
+function connId() {
+    _connCounter++;
+    return "c_" + _connCounter.toString(36) + "_" + Math.random().toString(36).slice(2, 8);
+}
+const PORT_TYPE_ANY = "any";
+const NODE_HEADER_HEIGHT = 28;
+const PORT_SPACING = 22;
+const PORT_START_Y = NODE_HEADER_HEIGHT + 14;
+// ─── GraphModel ──────────────────────────────────────────────────────
+export class GraphModel {
+    nodes = new Map();
+    connections = [];
+    nodeRegistry = {};
+    constructor(nodeTypes) {
+        if (nodeTypes)
+            this.nodeRegistry = nodeTypes;
+    }
+    registerNodeType(type, def) {
+        this.nodeRegistry[type] = def;
+    }
+    registerNodeTypes(types) {
+        for (const key in types)
+            this.nodeRegistry[key] = types[key];
+    }
+    // ─── Node management ──────────────────────────────────────────────
+    addNode(type, x, y, properties) {
+        const def = this.nodeRegistry[type];
+        if (!def)
+            return null;
+        const id = uid();
+        const node = {
+            id,
+            type,
+            category: def.category || "default",
+            label: def.label || type,
+            x,
+            y,
+            width: def.width || 160,
+            height: this._calcNodeHeight(def),
+            properties: properties || this._defaultProperties(def),
+            inputs: (def.inputs || []).map((p) => ({ ...p })),
+            outputs: (def.outputs || []).map((p) => ({ ...p })),
+        };
+        this.nodes.set(id, node);
+        return node;
+    }
+    removeNode(id) {
+        const node = this.nodes.get(id);
+        if (!node)
+            return false;
+        this.connections = this.connections.filter((c) => c.fromNode !== id && c.toNode !== id);
+        this.nodes.delete(id);
+        return true;
+    }
+    getNode(id) {
+        return this.nodes.get(id) || null;
+    }
+    getNodes() {
+        return Array.from(this.nodes.values());
+    }
+    getConnections() {
+        return this.connections.slice();
+    }
+    updateNodeProperty(nodeId, propName, value) {
+        const node = this.nodes.get(nodeId);
+        if (!node)
+            return false;
+        node.properties[propName] = value;
+        return true;
+    }
+    // ─── Connection management ────────────────────────────────────────
+    connect(fromNode, fromPort, toNode, toPort) {
+        // No self-connection
+        if (fromNode === toNode)
+            return null;
+        // Nodes must exist
+        const fromNodeData = this.nodes.get(fromNode);
+        const toNodeData = this.nodes.get(toNode);
+        if (!fromNodeData || !toNodeData)
+            return null;
+        // No duplicate connections to same input
+        for (let _i = 0, _it = this.connections, _n = _it.length; _i < _n; _i++) {
+            const c = _it[_i];
+            if (c.toNode === toNode && c.toPort === toPort)
+                return null;
+        }
+        // Type checking
+        const fromDef = this.nodeRegistry[fromNodeData.type];
+        const toDef = this.nodeRegistry[toNodeData.type];
+        if (!fromDef || !toDef)
+            return null;
+        const fromPortDef = (fromDef.outputs || []).find((p) => p.name === fromPort);
+        const toPortDef = (toDef.inputs || []).find((p) => p.name === toPort);
+        if (!fromPortDef || !toPortDef)
+            return null;
+        if (fromPortDef.type !== toPortDef.type && fromPortDef.type !== PORT_TYPE_ANY && toPortDef.type !== PORT_TYPE_ANY) {
+            return null;
+        }
+        const conn = {
+            id: connId(),
+            fromNode,
+            fromPort,
+            toNode,
+            toPort,
+        };
+        this.connections.push(conn);
+        return conn;
+    }
+    disconnect(connectionId) {
+        const len = this.connections.length;
+        this.connections = this.connections.filter((c) => c.id !== connectionId);
+        return this.connections.length < len;
+    }
+    // ─── Serialization ────────────────────────────────────────────────
+    serialize() {
+        return {
+            nodes: this.getNodes().map((n) => ({
+                id: n.id,
+                type: n.type,
+                x: n.x,
+                y: n.y,
+                properties: JSON.parse(JSON.stringify(n.properties)),
+            })),
+            connections: this.connections.map((c) => ({
+                fromNode: c.fromNode,
+                fromPort: c.fromPort,
+                toNode: c.toNode,
+                toPort: c.toPort,
+            })),
+            metadata: { version: 1, zoom: 1, panX: 0, panY: 0 },
+        };
+    }
+    load(data) {
+        this.nodes.clear();
+        this.connections = [];
+        if (data.nodes) {
+            for (let _i = 0, _it = data.nodes, _n = _it.length; _i < _n; _i++) {
+                const n = _it[_i];
+                const def = this.nodeRegistry[n.type];
+                if (!def)
+                    continue;
+                const node = {
+                    id: n.id,
+                    type: n.type,
+                    category: def.category || "default",
+                    label: def.label || n.type,
+                    x: n.x,
+                    y: n.y,
+                    width: def.width || 160,
+                    height: this._calcNodeHeight(def),
+                    properties: n.properties || this._defaultProperties(def),
+                    inputs: (def.inputs || []).map((p) => ({ ...p })),
+                    outputs: (def.outputs || []).map((p) => ({ ...p })),
+                };
+                this.nodes.set(node.id, node);
+            }
+        }
+        if (data.connections) {
+            data.connections.forEach((c) => {
+                if (this.nodes.has(c.fromNode) && this.nodes.has(c.toNode)) {
+                    this.connections.push({
+                        id: connId(),
+                        fromNode: c.fromNode,
+                        fromPort: c.fromPort,
+                        toNode: c.toNode,
+                        toPort: c.toPort,
+                    });
+                }
+            });
+        }
+    }
+    clear() {
+        this.nodes.clear();
+        this.connections = [];
+    }
+    // ─── Engine format conversion ─────────────────────────────────────
+    toEngineFormat() {
+        return {
+            nodes: this.getNodes().map((n) => ({
+                id: n.id,
+                type: n.type,
+                inputs: (n.inputs || []).map((p) => ({
+                    id: n.id + "_in_" + p.name,
+                    name: p.name,
+                    type: p.type,
+                })),
+                outputs: (n.outputs || []).map((p) => ({
+                    id: n.id + "_out_" + p.name,
+                    name: p.name,
+                    type: p.type,
+                })),
+                properties: n.properties,
+            })),
+            connections: this.connections.map((c) => ({
+                id: c.id,
+                fromNode: c.fromNode,
+                fromPort: c.fromPort,
+                toNode: c.toNode,
+                toPort: c.toPort,
+            })),
+        };
+    }
+    // ─── Validation ───────────────────────────────────────────────────
+    validate() {
+        const errors = [];
+        const warnings = [];
+        const nodes = this.getNodes();
+        const connections = this.connections;
+        // Cycle detection via DFS
+        const adj = {};
+        nodes.forEach((n) => { adj[n.id] = []; ; });
+        connections.forEach((c) => {
+            if (adj[c.fromNode])
+                adj[c.fromNode].push(c.toNode);
+        });
+        const visited = new Set();
+        const stack = new Set();
+        function dfs(nodeId) {
+            visited.add(nodeId);
+            stack.add(nodeId);
+            const neighbors = adj[nodeId] || [];
+            for (let _i = 0, _it = neighbors, _n = _it.length; _i < _n; _i++) {
+                const neighbor = _it[_i];
+                if (!visited.has(neighbor)) {
+                    if (dfs(neighbor))
+                        return true;
+                }
+                else if (stack.has(neighbor)) {
+                    return true;
+                }
+            }
+            stack.delete(nodeId);
+            return false;
+        }
+        for (let _i = 0, _it = nodes, _n = _it.length; _i < _n; _i++) {
+            const n = _it[_i];
+            if (!visited.has(n.id)) {
+                if (dfs(n.id)) {
+                    errors.push("Graph contains a cycle");
+                    break;
+                }
+            }
+        }
+        // Check disconnected non-optional inputs
+        nodes.forEach((n) => {
+            for (let _i = 0, _it = n.inputs || [], _n = _it.length; _i < _n; _i++) {
+                const inp = _it[_i];
+                if (inp.optional)
+                    continue;
+                const hasConn = connections.some((c) => c.toNode === n.id && c.toPort === inp.name);
+                if (!hasConn) {
+                    warnings.push(`Node '${n.label || n.type}' has unconnected input: ${inp.name}`);
+                }
+            }
+        });
+        // Check for orphan nodes
+        if (nodes.length > 1) {
+            nodes.forEach((n) => {
+                const hasConn = connections.some((c) => c.fromNode === n.id || c.toNode === n.id);
+                if (!hasConn) {
+                    warnings.push(`Node '${n.label || n.type}' is not connected to anything`);
+                }
+            });
+        }
+        return { errors, warnings, valid: errors.length === 0 };
+    }
+    // ─── History snapshots ────────────────────────────────────────────
+    snapshot() {
+        return this.serialize();
+    }
+    restore(data) {
+        this.load(data);
+    }
+    // ─── Coordinate conversion (pure math) ────────────────────────────
+    static screenToGraph(sx, sy, panX, panY, zoom) {
+        return {
+            x: (sx - panX) / zoom,
+            y: (sy - panY) / zoom,
+        };
+    }
+    static graphToScreen(gx, gy, panX, panY, zoom) {
+        return {
+            x: gx * zoom + panX,
+            y: gy * zoom + panY,
+        };
+    }
+    static snapToGrid(value, gridSize) {
+        return Math.round(value / gridSize) * gridSize + 0;
+    }
+    // ─── Bezier curve math ────────────────────────────────────────────
+    static bezierPoint(t, x1, y1, x2, y2, offset) {
+        const cx1 = x1 + offset;
+        const cx2 = x2 - offset;
+        const cy1 = y1;
+        const cy2 = y2;
+        const omt = 1 - t;
+        return {
+            x: omt * omt * omt * x1 + 3 * omt * omt * t * cx1 + 3 * omt * t * t * cx2 + t * t * t * x2,
+            y: omt * omt * omt * y1 + 3 * omt * omt * t * cy1 + 3 * omt * t * t * cy2 + t * t * t * y2,
+        };
+    }
+    static distToBezier(px, py, x1, y1, x2, y2, offset, steps = 20) {
+        let minDist = Infinity;
+        for (let i = 0; i <= steps; i++) {
+            const t = i / steps;
+            const pt = GraphModel.bezierPoint(t, x1, y1, x2, y2, offset);
+            const dx = px - pt.x;
+            const dy = py - pt.y;
+            const dist = Math.sqrt(dx * dx + dy * dy);
+            if (dist < minDist)
+                minDist = dist;
+        }
+        return minDist;
+    }
+    // ─── Private helpers ──────────────────────────────────────────────
+    _calcNodeHeight(def) {
+        const maxPorts = Math.max((def.inputs || []).length, (def.outputs || []).length);
+        return NODE_HEADER_HEIGHT + 14 + maxPorts * PORT_SPACING + 10;
+    }
+    _defaultProperties(def) {
+        const props = {};
+        if (def.properties) {
+            def.properties.forEach((p) => {
+                props[p.name] = p.default !== undefined ? p.default : null;
+            });
+        }
+        return props;
+    }
+}
+// ─── History manager ──────────────────────────────────────────────────
+export class GraphHistory {
+    history = [];
+    index = -1;
+    maxHistory;
+    constructor(maxHistory = 50) {
+        this.maxHistory = maxHistory;
+    }
+    push(state) {
+        this.history = this.history.slice(0, this.index + 1);
+        this.history.push(JSON.parse(JSON.stringify(state)));
+        if (this.history.length > this.maxHistory) {
+            this.history.shift();
+        }
+        else {
+            this.index++;
+        }
+    }
+    canUndo() {
+        return this.index > 0;
+    }
+    canRedo() {
+        return this.index < this.history.length - 1;
+    }
+    undo() {
+        if (!this.canUndo())
+            return null;
+        this.index--;
+        return this.history[this.index];
+    }
+    redo() {
+        if (!this.canRedo())
+            return null;
+        this.index++;
+        return this.history[this.index];
+    }
+    clear() {
+        this.history = [];
+        this.index = -1;
+    }
+    size() {
+        return this.history.length;
+    }
+    currentIndex() {
+        return this.index;
+    }
+}

package/dist/modules/devtools/src/grid-renderer.js

@@ -0,0 +1,145 @@
+import { calculateViewProj, createValidatedShaderModule, DEPTH_FORMAT, MSAA_SAMPLE_COUNT } from "@downdraft/engine";
+const GRID_WGSL = /* wgsl */ `
+struct Uniforms {
+  viewProj: mat4x4<f32>,
+  cameraPos: vec3<f32>,
+  _pad: f32,
+};
+@group(0) @binding(0) var<uniform> uniforms: Uniforms;
+
+struct VertexOutput {
+  @builtin(position) clipPos: vec4<f32>,
+  @location(0) worldPos: vec3<f32>,
+};
+
+@vertex
+fn vs_main(@location(0) position: vec3<f32>) -> VertexOutput {
+  var output: VertexOutput;
+  output.clipPos = uniforms.viewProj * vec4<f32>(position, 1.0);
+  output.worldPos = position;
+  return output;
+}
+
+@fragment
+fn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {
+  let dist = length(input.worldPos.xz);
+  let fade = 1.0 - smoothstep(15.0, 45.0, dist);
+
+  // 1m grid lines: distance to nearest integer on each axis.
+  // abs(fract(x + 0.5) - 0.5) is 0 at integers, 0.5 at half-integers.
+  let dx1 = abs(fract(input.worldPos.x + 0.5) - 0.5);
+  let dz1 = abs(fract(input.worldPos.z + 0.5) - 0.5);
+  let lineDist = min(dx1, dz1);
+  let line = 1.0 - smoothstep(0.0, 0.03, lineDist);
+
+  // 5m major lines: same pattern scaled by 1/5, remapped to world units.
+  let dx5 = abs(fract(input.worldPos.x / 5.0 + 0.5) - 0.5) * 5.0;
+  let dz5 = abs(fract(input.worldPos.z / 5.0 + 0.5) - 0.5) * 5.0;
+  let majorDist = min(dx5, dz5);
+  let majorLine = 1.0 - smoothstep(0.0, 0.03, majorDist);
+
+  let minorColor = vec3<f32>(0.24, 0.24, 0.30);
+  let majorColor = vec3<f32>(0.42, 0.42, 0.56);
+  let color = mix(minorColor, majorColor, majorLine);
+  let intensity = max(line, majorLine);
+  return vec4<f32>(color * intensity * fade, fade * 0.85);
+}
+`;
+export class GridRenderer {
+    device;
+    format;
+    pipeline = null;
+    uniformBuffer = null;
+    bindGroup = null;
+    vertexBuffer = null;
+    vertexCount = 0;
+    constructor(device, format) {
+        this.device = device;
+        this.format = format;
+    }
+    init() {
+        // Grid vertices — lines from -50 to +50 at 1-meter spacing.
+        // Wide enough for large true-scale models; the shader fades out the
+        // distant lines so the visible area stays focused on the model.
+        const verts = [];
+        const range = 50;
+        const step = 1;
+        for (let i = -range; i <= range; i += step) {
+            // X-axis lines
+            verts.push(-range, 0, i, range, 0, i);
+            // Z-axis lines
+            verts.push(i, 0, -range, i, 0, range);
+        }
+        this.vertexCount = verts.length / 3;
+        this.vertexBuffer = this.device.createBuffer({
+            size: verts.length * 4,
+            usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+        });
+        this.device.queue.writeBuffer(this.vertexBuffer, 0, new Float32Array(verts));
+        this.uniformBuffer = this.device.createBuffer({
+            size: 256,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+        });
+        const shaderModule = createValidatedShaderModule(this.device, { code: GRID_WGSL, label: "GridRenderer" });
+        const bindGroupLayout = this.device.createBindGroupLayout({
+            entries: [{
+                    binding: 0,
+                    visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+                    buffer: { type: "uniform" },
+                }],
+        });
+        this.bindGroup = this.device.createBindGroup({
+            layout: bindGroupLayout,
+            entries: [{ binding: 0, resource: { buffer: this.uniformBuffer } }],
+        });
+        this.pipeline = this.device.createRenderPipeline({
+            layout: this.device.createPipelineLayout({ bindGroupLayouts: [bindGroupLayout] }),
+            vertex: {
+                module: shaderModule,
+                entryPoint: "vs_main",
+                buffers: [{
+                        arrayStride: 12,
+                        attributes: [{ shaderLocation: 0, offset: 0, format: "float32x3" }],
+                    }],
+            },
+            fragment: {
+                module: shaderModule,
+                entryPoint: "fs_main",
+                targets: [{
+                        format: this.format,
+                        blend: {
+                            color: { srcFactor: "src-alpha", dstFactor: "one-minus-src-alpha" },
+                            alpha: { srcFactor: "src-alpha", dstFactor: "one-minus-src-alpha" },
+                        },
+                    }],
+            },
+            primitive: { topology: "line-list" },
+            multisample: { count: MSAA_SAMPLE_COUNT },
+            depthStencil: {
+                format: DEPTH_FORMAT,
+                depthWriteEnabled: false,
+                depthCompare: "less",
+            },
+        });
+    }
+    render(passEncoder, camera) {
+        if (!this.pipeline || !this.bindGroup || !this.uniformBuffer || !this.vertexBuffer)
+            return;
+        const viewProj = calculateViewProj(camera);
+        const uniforms = new Float32Array(16 + 4);
+        for (let i = 0; i < 16; i++)
+            uniforms[i] = viewProj[i];
+        uniforms[16] = camera.position[0];
+        uniforms[17] = camera.position[1];
+        uniforms[18] = camera.position[2];
+        this.device.queue.writeBuffer(this.uniformBuffer, 0, uniforms);
+        passEncoder.setPipeline(this.pipeline);
+        passEncoder.setBindGroup(0, this.bindGroup);
+        passEncoder.setVertexBuffer(0, this.vertexBuffer);
+        passEncoder.draw(this.vertexCount);
+    }
+    destroy() {
+        this.vertexBuffer?.destroy();
+        this.uniformBuffer?.destroy();
+    }
+}