@r2digisolutions/components 0.1.7 → 0.3.0

package/dist/utils/blueprintRuntime.js

@@ -0,0 +1,289 @@
+/**
+ * Lightweight Blueprint graph simulator — follows exec wires, resolves data pins
+ * (literals + pure nodes), and emits Print String lines. Not a full UE VM.
+ */
+import { defaultValueForPinType, isExecPort } from './nodeGraph.js';
+function logId() {
+    return `log-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 7)}`;
+}
+function pushLog(logs, onLog, level, text, nodeId) {
+    const entry = { id: logId(), level, text, nodeId, at: Date.now() };
+    logs.push(entry);
+    onLog?.(entry);
+    return entry;
+}
+function throwIfAborted(signal) {
+    if (signal?.aborted) {
+        const err = new Error('aborted');
+        err.name = 'AbortError';
+        throw err;
+    }
+}
+function sleep(ms, signal) {
+    return new Promise((resolve, reject) => {
+        if (signal?.aborted) {
+            reject(Object.assign(new Error('aborted'), { name: 'AbortError' }));
+            return;
+        }
+        const t = setTimeout(() => {
+            signal?.removeEventListener('abort', onAbort);
+            resolve();
+        }, ms);
+        const onAbort = () => {
+            clearTimeout(t);
+            reject(Object.assign(new Error('aborted'), { name: 'AbortError' }));
+        };
+        signal?.addEventListener('abort', onAbort, { once: true });
+    });
+}
+function findPort(node, handle, side) {
+    const list = side === 'input' ? (node.inputs ?? []) : (node.outputs ?? []);
+    if (!handle)
+        return list[0];
+    return list.find((p) => p.id === handle);
+}
+function outgoing(edges, nodeId, sourceHandle) {
+    return edges.find((e) => e.source === nodeId &&
+        (sourceHandle == null || e.sourceHandle === sourceHandle || (!e.sourceHandle && !sourceHandle)));
+}
+function incomingDataEdge(edges, nodeId, targetHandle) {
+    return edges.find((e) => e.target === nodeId && e.targetHandle === targetHandle);
+}
+function stripLiteralQuotes(raw) {
+    const t = raw.trim();
+    if ((t.startsWith('"') && t.endsWith('"')) ||
+        (t.startsWith("'") && t.endsWith("'"))) {
+        return t.slice(1, -1);
+    }
+    return t;
+}
+function coerceBool(v) {
+    if (typeof v === 'boolean')
+        return v;
+    if (typeof v === 'number')
+        return v !== 0;
+    if (typeof v === 'string') {
+        const s = v.trim().toLowerCase();
+        if (s === 'true' || s === '1' || s === 'yes')
+            return true;
+        if (s === 'false' || s === '0' || s === 'no' || s === '')
+            return false;
+        return Boolean(s);
+    }
+    return Boolean(v);
+}
+function coerceNumber(v, fallback = 0) {
+    if (typeof v === 'number' && Number.isFinite(v))
+        return v;
+    if (typeof v === 'string') {
+        const n = parseFloat(v);
+        return Number.isFinite(n) ? n : fallback;
+    }
+    return fallback;
+}
+function coerceString(v) {
+    if (v == null)
+        return '';
+    return String(v);
+}
+function initVars(variables) {
+    const map = new Map();
+    for (const v of variables ?? []) {
+        map.set(v.id, v.defaultValue !== undefined ? v.defaultValue : defaultValueForPinType(v.dataType));
+    }
+    return map;
+}
+function varsToArray(variables, state) {
+    return (variables ?? []).map((v) => ({
+        ...v,
+        defaultValue: state.has(v.id) ? state.get(v.id) : v.defaultValue
+    }));
+}
+/**
+ * Resolve a data output of a (usually pure) node.
+ */
+function evaluateNodeOutput(doc, node, outputId, vars, stack) {
+    if (stack.has(node.id))
+        return undefined;
+    stack.add(node.id);
+    try {
+        switch (node.type) {
+            case 'var_get': {
+                const vid = String(node.data?.variableId ?? '');
+                return vars.has(vid) ? vars.get(vid) : undefined;
+            }
+            case 'make_string': {
+                const label = String(node.data?.label ?? '');
+                return stripLiteralQuotes(label);
+            }
+            case 'var_set': {
+                const vid = String(node.data?.variableId ?? '');
+                return vars.has(vid) ? vars.get(vid) : undefined;
+            }
+            case 'event_tick': {
+                if (outputId === 'delta')
+                    return 0.016;
+                return undefined;
+            }
+            default: {
+                const out = findPort(node, outputId, 'output');
+                if (out && !isExecPort(out) && out.value !== undefined)
+                    return out.value;
+                return undefined;
+            }
+        }
+    }
+    finally {
+        stack.delete(node.id);
+    }
+}
+function resolveInputValue(doc, node, port, vars, stack) {
+    const edge = incomingDataEdge(doc.edges, node.id, port.id);
+    if (edge) {
+        const src = doc.nodes.find((n) => n.id === edge.source);
+        if (!src)
+            return port.value ?? defaultForPort(port);
+        return evaluateNodeOutput(doc, src, edge.sourceHandle, vars, stack);
+    }
+    if (port.value !== undefined)
+        return port.value;
+    return defaultForPort(port);
+}
+function defaultForPort(port) {
+    const dt = (port.dataType ?? 'any');
+    return defaultValueForPinType(dt);
+}
+async function followExec(doc, fromNodeId, fromHandle, ctx) {
+    throwIfAborted(ctx.signal);
+    const edge = outgoing(doc.edges, fromNodeId, fromHandle);
+    if (!edge)
+        return;
+    const node = doc.nodes.find((n) => n.id === edge.target);
+    if (!node)
+        return;
+    await executeNode(doc, node, ctx);
+}
+async function executeNode(doc, node, ctx) {
+    throwIfAborted(ctx.signal);
+    const stack = new Set();
+    const label = String(node.data?.label ?? node.type);
+    switch (node.type) {
+        case 'event_begin':
+        case 'event_tick':
+        case 'trigger': {
+            pushLog(ctx.logs, ctx.onLog, 'system', `→ ${label}`, node.id);
+            await followExec(doc, node.id, 'exec', ctx);
+            return;
+        }
+        case 'branch': {
+            const condPort = findPort(node, 'condition', 'input');
+            const cond = condPort
+                ? coerceBool(resolveInputValue(doc, node, condPort, ctx.vars, stack))
+                : false;
+            pushLog(ctx.logs, ctx.onLog, 'system', `Branch → ${cond ? 'True' : 'False'}`, node.id);
+            await followExec(doc, node.id, cond ? 'true' : 'false', ctx);
+            return;
+        }
+        case 'print_string': {
+            const strPort = findPort(node, 'in_string', 'input');
+            const durPort = findPort(node, 'duration', 'input');
+            const text = strPort
+                ? coerceString(resolveInputValue(doc, node, strPort, ctx.vars, stack))
+                : '';
+            const duration = durPort
+                ? coerceNumber(resolveInputValue(doc, node, durPort, ctx.vars, stack), 2)
+                : 2;
+            pushLog(ctx.logs, ctx.onLog, 'print', text.length ? text : '(empty string)', node.id);
+            if (duration > 0) {
+                pushLog(ctx.logs, ctx.onLog, 'system', `Print duration ${duration}s (display only)`, node.id);
+            }
+            await followExec(doc, node.id, 'exec', ctx);
+            return;
+        }
+        case 'delay_bp':
+        case 'delay': {
+            const durPort = findPort(node, 'duration', 'input');
+            const seconds = durPort
+                ? coerceNumber(resolveInputValue(doc, node, durPort, ctx.vars, stack), 0)
+                : 0;
+            const ms = Math.min(ctx.maxDelayMs, Math.max(0, seconds * 1000 * ctx.timeScale));
+            pushLog(ctx.logs, ctx.onLog, 'system', `Delay ${seconds}s…`, node.id);
+            await sleep(ms, ctx.signal);
+            throwIfAborted(ctx.signal);
+            pushLog(ctx.logs, ctx.onLog, 'system', 'Delay completed', node.id);
+            await followExec(doc, node.id, 'completed', ctx);
+            return;
+        }
+        case 'var_set': {
+            const vid = String(node.data?.variableId ?? '');
+            const valuePort = findPort(node, 'value', 'input');
+            const next = valuePort
+                ? resolveInputValue(doc, node, valuePort, ctx.vars, stack)
+                : undefined;
+            if (vid)
+                ctx.vars.set(vid, next);
+            const name = String(node.data?.variableName ?? vid);
+            pushLog(ctx.logs, ctx.onLog, 'system', `Set ${name} = ${String(next)}`, node.id);
+            await followExec(doc, node.id, 'exec', ctx);
+            return;
+        }
+        case 'return_node': {
+            pushLog(ctx.logs, ctx.onLog, 'system', 'Return', node.id);
+            return;
+        }
+        case 'action':
+        case 'construction_add': {
+            pushLog(ctx.logs, ctx.onLog, 'system', `Run ${label}`, node.id);
+            await followExec(doc, node.id, 'exec', ctx);
+            return;
+        }
+        default: {
+            // Generic: if it has an exec out named exec / Then, follow it.
+            const execOut = (node.outputs ?? []).find((p) => isExecPort(p) && p.id === 'exec') ??
+                (node.outputs ?? []).find((p) => isExecPort(p));
+            pushLog(ctx.logs, ctx.onLog, 'warn', `Unhandled node type "${node.type}"`, node.id);
+            if (execOut)
+                await followExec(doc, node.id, execOut.id, ctx);
+        }
+    }
+}
+/**
+ * Run the graph from Event BeginPlay (or `entryType`).
+ * Print String lines use level `print`; flow uses `system`.
+ */
+export async function simulateBlueprint(doc, opts = {}) {
+    const logs = [];
+    const vars = initVars(doc.variables);
+    const entryType = opts.entryType ?? 'event_begin';
+    const timeScale = opts.timeScale ?? 1;
+    const maxDelayMs = opts.maxDelayMs ?? 10_000;
+    const entry = doc.graph.nodes.find((n) => n.type === entryType);
+    if (!entry) {
+        pushLog(logs, opts.onLog, 'error', `No entry node of type "${entryType}"`);
+        return { logs, variables: varsToArray(doc.variables, vars), aborted: false };
+    }
+    pushLog(logs, opts.onLog, 'system', '—— Simulate BeginPlay ——');
+    try {
+        await executeNode(doc.graph, entry, {
+            vars,
+            logs,
+            onLog: opts.onLog,
+            signal: opts.signal,
+            timeScale,
+            maxDelayMs,
+            variables: doc.variables
+        });
+        pushLog(logs, opts.onLog, 'system', '—— Finished ——');
+        return { logs, variables: varsToArray(doc.variables, vars), aborted: false };
+    }
+    catch (e) {
+        const aborted = e instanceof Error && e.name === 'AbortError';
+        if (aborted) {
+            pushLog(logs, opts.onLog, 'warn', '—— Stopped ——');
+        }
+        else {
+            pushLog(logs, opts.onLog, 'error', e instanceof Error ? e.message : 'Simulation failed');
+        }
+        return { logs, variables: varsToArray(doc.variables, vars), aborted };
+    }
+}

package/dist/utils/canvasDocument.d.ts

@@ -0,0 +1,239 @@
+export type CanvasLayerKind = 'image' | 'video' | 'audio' | 'text' | 'rect' | 'roundRect' | 'ellipse' | 'triangle' | 'star' | 'hexagon' | 'pentagon' | 'diamond' | 'heart' | 'line' | 'arrow' | 'path' | 'sticky' | 'canvasPanel' | 'overlay' | 'border' | 'hBox' | 'vBox' | 'sizeBox' | 'scaleBox' | 'group' | 'widget' | 'namedSlot' | 'scrollBox' | 'wrapBox' | 'uniformGrid';
+export type CanvasObjectFit = 'cover' | 'contain' | 'fill';
+export type CanvasTextAlign = 'left' | 'center' | 'right';
+export type CanvasFontStyle = 'normal' | 'italic';
+export type CanvasTextDecoration = 'none' | 'underline' | 'line-through';
+export type CanvasAlign = 'left' | 'center-h' | 'right' | 'top' | 'center-v' | 'bottom' | 'center' | 'full';
+/** Normalized point inside a layer rect (0–1). */
+export interface CanvasPoint {
+    x: number;
+    y: number;
+}
+export interface CanvasLayerRect {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+/** UMG-style anchors (0–1 normalized against parent). */
+export interface CanvasAnchors {
+    minX: number;
+    minY: number;
+    maxX: number;
+    maxY: number;
+}
+/** UMG slot: anchors + offsets in px relative to anchored edges. */
+export interface CanvasSlot {
+    anchors: CanvasAnchors;
+    offsets: {
+        left: number;
+        top: number;
+        right: number;
+        bottom: number;
+    };
+    padding?: {
+        left: number;
+        top: number;
+        right: number;
+        bottom: number;
+    };
+    sizeRule?: 'auto' | 'fill' | 'fixed';
+    alignment?: {
+        x: number;
+        y: number;
+    };
+    order?: number;
+}
+export interface CanvasExposedProp {
+    id: string;
+    targetLayerId: string;
+    field: string;
+    label: string;
+    /** true = editable on instances (eye open) */
+    exposed: boolean;
+}
+export interface CanvasWidgetDefinition {
+    id: string;
+    name: string;
+    width: number;
+    height: number;
+    background?: string;
+    layers: CanvasLayer[];
+    exposed: CanvasExposedProp[];
+}
+export interface CanvasLayer {
+    id: string;
+    kind: CanvasLayerKind;
+    name: string;
+    src?: string;
+    text?: string;
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    fontSize?: number;
+    fontWeight?: number | string;
+    fontFamily?: string;
+    fontStyle?: CanvasFontStyle;
+    textDecoration?: CanvasTextDecoration;
+    letterSpacing?: number;
+    lineHeight?: number;
+    textAlign?: CanvasTextAlign;
+    color?: string;
+    /** Text box background */
+    textBackground?: string;
+    objectFit?: CanvasObjectFit;
+    borderRadius?: number;
+    rotation?: number;
+    flipX?: boolean;
+    flipY?: boolean;
+    shadowBlur?: number;
+    shadowColor?: string;
+    blur?: number;
+    /** For `path`: normalized points (0–1) relative to rect. */
+    points?: CanvasPoint[];
+    /** For `path`: close the shape into a filled polygon. */
+    closed?: boolean;
+    /** Parent layer id; null/undefined = artboard root. */
+    parentId?: string | null;
+    /** UMG slot (preferred). When missing, derived from rect + top-left anchors. */
+    slot?: CanvasSlot;
+    clipChildren?: boolean;
+    /** Gap for hBox / vBox / wrapBox / uniformGrid */
+    gap?: number;
+    /** namedSlot: public slot name exposed on the User Widget */
+    slotName?: string;
+    /** Child of a widget instance: which named slot to fill */
+    fillSlot?: string;
+    /** uniformGrid column count */
+    columns?: number;
+    /** kind === 'widget' */
+    definitionId?: string;
+    /** Exposed prop overrides on widget instances */
+    overrides?: Record<string, unknown>;
+    rect: CanvasLayerRect;
+    zIndex: number;
+    opacity: number;
+    visible: boolean;
+    locked: boolean;
+}
+export type CanvasGuideOrientation = 'horizontal' | 'vertical';
+export interface CanvasGuide {
+    id: string;
+    orientation: CanvasGuideOrientation;
+    /** X for vertical, Y for horizontal (document px). */
+    position: number;
+    locked?: boolean;
+}
+export interface CanvasDocument {
+    version: 1 | 2;
+    width: number;
+    height: number;
+    background: string;
+    layers: CanvasLayer[];
+    guides?: CanvasGuide[];
+    /** When true, all guides are locked. */
+    guidesLocked?: boolean;
+    /** Local User Widget library (v2). */
+    widgets?: CanvasWidgetDefinition[];
+}
+/** Top-left point anchors; offsets encode x/y/w/h without needing parent size. */
+export declare function defaultSlotFromRect(rect: CanvasLayerRect, anchors?: CanvasAnchors): CanvasSlot;
+/** For top-left point anchors, offsets.left/top = x/y and right/bottom = -(x+w)/-(y+h) when parent size unknown.
+ * Prefer slotFromLocalRect from canvasHierarchy when parent size is known. */
+export declare function rectFromSlot(slot: CanvasSlot, parentSize: {
+    width: number;
+    height: number;
+}): CanvasLayerRect;
+export declare function emptyCanvasDocument(partial?: Partial<Omit<CanvasDocument, 'version' | 'layers'>> & {
+    layers?: CanvasLayer[];
+    widgets?: CanvasWidgetDefinition[];
+}): CanvasDocument;
+/** Migrate v1 (flat absolute layers) → v2 (parentId + slot). */
+export declare function migrateCanvasDocument(doc: CanvasDocument | (Omit<CanvasDocument, 'version'> & {
+    version?: number;
+})): CanvasDocument;
+export declare function ensureLayerSlot(layer: CanvasLayer): CanvasLayer;
+export declare function createCanvasGuide(orientation: CanvasGuideOrientation, position: number, partial?: Partial<Omit<CanvasGuide, 'id' | 'orientation' | 'position'>>): CanvasGuide;
+export declare function createCanvasLayer(kind: CanvasLayerKind, partial?: Partial<Omit<CanvasLayer, 'id' | 'kind'>>): CanvasLayer;
+/** Scalar fields that can reset to createCanvasLayer defaults (UE-style details). */
+export type CanvasResettableField = 'opacity' | 'rotation' | 'visible' | 'locked' | 'flipX' | 'flipY' | 'blur' | 'shadowBlur' | 'shadowColor' | 'fill' | 'stroke' | 'strokeWidth' | 'fontSize' | 'fontWeight' | 'fontFamily' | 'fontStyle' | 'textDecoration' | 'letterSpacing' | 'lineHeight' | 'textAlign' | 'color' | 'textBackground' | 'objectFit' | 'borderRadius' | 'gap' | 'columns' | 'clipChildren' | 'text' | 'name';
+/** Default value for a layer field (same as createCanvasLayer would use). */
+export declare function canvasLayerFieldDefault(kind: CanvasLayerKind, field: CanvasResettableField): unknown;
+export declare function isCanvasFieldModified(layer: CanvasLayer, field: CanvasResettableField): boolean;
+export declare function resetCanvasField(layer: CanvasLayer, field: CanvasResettableField): Partial<CanvasLayer>;
+export declare function reorderCanvasLayers(layers: CanvasLayer[], orderedIds: string[]): CanvasLayer[];
+export declare function updateCanvasLayer(doc: CanvasDocument, layerId: string, updater: (l: CanvasLayer) => CanvasLayer): CanvasDocument;
+export declare function updateCanvasLayers(doc: CanvasDocument, ids: string[], updater: (l: CanvasLayer) => CanvasLayer): CanvasDocument;
+export declare function snapLayerRect(rect: CanvasLayerRect, cellSize: number, enabled: boolean, bounds: {
+    width: number;
+    height: number;
+}, minW?: number, minH?: number, guides?: Pick<CanvasGuide, 'orientation' | 'position'>[], guideThreshold?: number): CanvasLayerRect;
+/** Snap left / center / right (or top / middle / bottom) edges to guides. */
+export declare function snapRectToGuides(rect: CanvasLayerRect, guides: Pick<CanvasGuide, 'orientation' | 'position'>[], threshold?: number): CanvasLayerRect;
+export declare function alignLayerRect(rect: CanvasLayerRect, bounds: {
+    width: number;
+    height: number;
+}, align: CanvasAlign): CanvasLayerRect;
+export declare const CANVAS_PRESETS: readonly [{
+    readonly id: "hd";
+    readonly label: "HD · 1280×720";
+    readonly width: 1280;
+    readonly height: 720;
+}, {
+    readonly id: "fhd";
+    readonly label: "Full HD · 1920×1080";
+    readonly width: 1920;
+    readonly height: 1080;
+}, {
+    readonly id: "square";
+    readonly label: "Instagram · 1080×1080";
+    readonly width: 1080;
+    readonly height: 1080;
+}, {
+    readonly id: "story";
+    readonly label: "Story · 1080×1920";
+    readonly width: 1080;
+    readonly height: 1920;
+}, {
+    readonly id: "landscape";
+    readonly label: "Landscape · 1600×900";
+    readonly width: 1600;
+    readonly height: 900;
+}, {
+    readonly id: "presentation";
+    readonly label: "Presentation · 1920×1080";
+    readonly width: 1920;
+    readonly height: 1080;
+}, {
+    readonly id: "a4";
+    readonly label: "A4 · 794×1123";
+    readonly width: 794;
+    readonly height: 1123;
+}, {
+    readonly id: "twitter";
+    readonly label: "X Post · 1600×900";
+    readonly width: 1600;
+    readonly height: 900;
+}];
+export declare function presetIdForSize(width: number, height: number): string;
+/** Build a path layer from absolute document points. */
+export declare function createPathFromDocPoints(docPoints: {
+    x: number;
+    y: number;
+}[], opts?: {
+    closed?: boolean;
+    fill?: string;
+    strokeWidth?: number;
+    name?: string;
+    zIndex?: number;
+}): CanvasLayer;
+/** Recompute rect + normalized points after editing absolute doc points. */
+export declare function rebakePathLayer(layer: CanvasLayer, docPoints: {
+    x: number;
+    y: number;
+}[]): CanvasLayer;
+/** Map normalized path points → document space using an absolute (or local) rect. */
+export declare function pathPointsToDoc(layer: CanvasLayer, absRect?: Pick<CanvasLayerRect, 'x' | 'y' | 'w' | 'h'>): {
+    x: number;
+    y: number;
+}[];