deskforge 1.0.0

package/packages/renderer/src/dirty-region.ts

@@ -0,0 +1,125 @@
+// dirty-region.ts
+// Dirty region tracking for incremental rendering optimization
+
+export interface Rect {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+/**
+ * Tracks dirty regions that need re-rendering
+ */
+export class DirtyRegionTracker {
+  private regions: Rect[] = []
+  private canvasWidth: number
+  private canvasHeight: number
+
+  constructor(width: number, height: number) {
+    this.canvasWidth = width
+    this.canvasHeight = height
+  }
+
+  /**
+   * Mark a region as dirty
+   */
+  markDirty(rect: Rect): void {
+    this.regions.push(this.clampRect(rect))
+  }
+
+  /**
+   * Mark entire canvas as dirty
+   */
+  markAllDirty(): void {
+    this.regions = [{
+      x: 0,
+      y: 0,
+      width: this.canvasWidth,
+      height: this.canvasHeight,
+    }]
+  }
+
+  /**
+   * Get merged dirty regions (optimized)
+   */
+  getDirtyRegions(): Rect[] {
+    if (this.regions.length === 0) return []
+    if (this.regions.length === 1) return this.regions
+
+    // Simple merging: if regions overlap significantly, merge them
+    return this.mergeRegions(this.regions)
+  }
+
+  /**
+   * Clear all dirty regions
+   */
+  clear(): void {
+    this.regions = []
+  }
+
+  /**
+   * Check if region needs rendering
+   */
+  isDirty(rect: Rect): boolean {
+    return this.regions.some(r => this.rectsIntersect(r, rect))
+  }
+
+  /**
+   * Resize tracker when canvas resizes
+   */
+  resize(width: number, height: number): void {
+    this.canvasWidth = width
+    this.canvasHeight = height
+    this.markAllDirty()
+  }
+
+  // Private helpers
+
+  private clampRect(rect: Rect): Rect {
+    return {
+      x: Math.max(0, rect.x),
+      y: Math.max(0, rect.y),
+      width: Math.min(this.canvasWidth - rect.x, rect.width),
+      height: Math.min(this.canvasHeight - rect.y, rect.height),
+    }
+  }
+
+  private rectsIntersect(r1: Rect, r2: Rect): boolean {
+    return !(
+      r1.x + r1.width < r2.x ||
+      r2.x + r2.width < r1.x ||
+      r1.y + r1.height < r2.y ||
+      r2.y + r2.height < r1.y
+    )
+  }
+
+  private mergeRegions(rects: Rect[]): Rect[] {
+    if (rects.length <= 1) return rects
+
+    const sorted = [...rects].sort((a, b) => a.x - b.x)
+    const merged: Rect[] = []
+
+    for (const rect of sorted) {
+      const last = merged[merged.length - 1]
+      if (last && this.rectsIntersect(last, rect)) {
+        // Merge by creating bounding box
+        const minX = Math.min(last.x, rect.x)
+        const minY = Math.min(last.y, rect.y)
+        const maxX = Math.max(last.x + last.width, rect.x + rect.width)
+        const maxY = Math.max(last.y + last.height, rect.y + rect.height)
+
+        merged[merged.length - 1] = {
+          x: minX,
+          y: minY,
+          width: maxX - minX,
+          height: maxY - minY,
+        }
+      } else {
+        merged.push(rect)
+      }
+    }
+
+    return merged
+  }
+}

package/packages/renderer/src/engine.d.ts

@@ -0,0 +1,56 @@
+import type { DFNode, DFTree } from '@deskforge/core';
+import type { Renderer } from './renderer';
+/**
+ * Configuration for the rendering engine
+ */
+interface RenderEngineConfig {
+    renderer: Renderer;
+    root: DFNode | DFTree;
+    onBeforeRender?: () => void;
+    onAfterRender?: () => void;
+    onError?: (error: Error) => void;
+}
+/**
+ * Render engine that integrates rendering with scheduling
+ */
+declare class RenderEngine {
+    private config;
+    private scheduler;
+    private root;
+    private running;
+    constructor(config: RenderEngineConfig);
+    /**
+     * Start the rendering engine
+     */
+    start(): void;
+    /**
+     * Stop the rendering engine
+     */
+    stop(): void;
+    /**
+     * Schedule a render
+     */
+    scheduleRender(): void;
+    /**
+     * Perform a render
+     */
+    private render;
+    /**
+     * Update the root node
+     */
+    setRoot(node: DFNode): void;
+    /**
+     * Update the root tree
+     */
+    setTree(tree: DFTree): void;
+    /**
+     * Get the current root node
+     */
+    getRoot(): DFNode;
+    /**
+     * Force immediate render (bypasses scheduler)
+     */
+    forceRender(): void;
+}
+export { RenderEngine };
+export type { RenderEngineConfig };

package/packages/renderer/src/engine.js

@@ -0,0 +1,95 @@
+"use strict";
+// engine.ts
+// Rendering engine — integrates renderer with scheduler
+// Handles automatic re-renders when state/props change
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderEngine = void 0;
+const core_1 = require("@deskforge/core");
+/**
+ * Render engine that integrates rendering with scheduling
+ */
+class RenderEngine {
+    constructor(config) {
+        // The scheduler that batches renders
+        this.scheduler = (0, core_1.createScheduler)();
+        // Whether the engine is running
+        this.running = false;
+        this.config = {
+            onBeforeRender: () => { },
+            onAfterRender: () => { },
+            onError: (error) => console.error('RenderEngine error:', error),
+            ...config
+        };
+        // Extract root node
+        this.root = 'root' in config.root
+            ? config.root.root
+            : config.root;
+    }
+    /**
+     * Start the rendering engine
+     */
+    start() {
+        if (this.running)
+            return;
+        this.running = true;
+        this.render();
+    }
+    /**
+     * Stop the rendering engine
+     */
+    stop() {
+        if (!this.running)
+            return;
+        this.running = false;
+    }
+    /**
+     * Schedule a render
+     */
+    scheduleRender() {
+        if (!this.running)
+            return;
+        (0, core_1.schedule)(this.scheduler, () => this.render());
+    }
+    /**
+     * Perform a render
+     */
+    render() {
+        try {
+            this.config.onBeforeRender();
+            this.config.renderer.renderNode(this.root);
+            this.config.onAfterRender();
+        }
+        catch (error) {
+            const err = error instanceof Error ? error : new Error(String(error));
+            this.config.onError(err);
+        }
+    }
+    /**
+     * Update the root node
+     */
+    setRoot(node) {
+        this.root = node;
+        this.scheduleRender();
+    }
+    /**
+     * Update the root tree
+     */
+    setTree(tree) {
+        this.root = tree.root;
+        this.scheduleRender();
+    }
+    /**
+     * Get the current root node
+     */
+    getRoot() {
+        return this.root;
+    }
+    /**
+     * Force immediate render (bypasses scheduler)
+     */
+    forceRender() {
+        this.render();
+    }
+}
+exports.RenderEngine = RenderEngine;
+//# sourceMappingURL=engine.js.map

package/packages/renderer/src/engine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"engine.js","sourceRoot":"","sources":["engine.ts"],"names":[],"mappings":";AAAA,YAAY;AACZ,wDAAwD;AACxD,uDAAuD;;;AAGvD,0CAA2D;AAuB3D;;GAEG;AACH,MAAM,YAAY;IAahB,YAAY,MAA0B;QATtC,qCAAqC;QAC7B,cAAS,GAAG,IAAA,sBAAe,GAAE,CAAA;QAKrC,gCAAgC;QACxB,YAAO,GAAY,KAAK,CAAA;QAG9B,IAAI,CAAC,MAAM,GAAG;YACZ,cAAc,EAAE,GAAG,EAAE,GAAE,CAAC;YACxB,aAAa,EAAE,GAAG,EAAE,GAAE,CAAC;YACvB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,qBAAqB,EAAE,KAAK,CAAC;YAC/D,GAAG,MAAM;SACV,CAAA;QAED,oBAAoB;QACpB,IAAI,CAAC,IAAI,GAAG,MAAM,IAAI,MAAM,CAAC,IAAI;YAC/B,CAAC,CAAE,MAAM,CAAC,IAAe,CAAC,IAAI;YAC9B,CAAC,CAAE,MAAM,CAAC,IAAe,CAAA;IAC7B,CAAC;IAED;;OAEG;IACH,KAAK;QACH,IAAI,IAAI,CAAC,OAAO;YAAE,OAAM;QACxB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA;QACnB,IAAI,CAAC,MAAM,EAAE,CAAA;IACf,CAAC;IAED;;OAEG;IACH,IAAI;QACF,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAM;QACzB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;IACtB,CAAC;IAED;;OAEG;IACH,cAAc;QACZ,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAM;QAEzB,IAAA,eAAQ,EAAC,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAA;IAC/C,CAAC;IAED;;OAEG;IACK,MAAM;QACZ,IAAI,CAAC;YACH,IAAI,CAAC,MAAM,CAAC,cAAc,EAAE,CAAA;YAC5B,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YAC1C,IAAI,CAAC,MAAM,CAAC,aAAa,EAAE,CAAA;QAC7B,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,MAAM,GAAG,GAAG,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAA;YACrE,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAA;QAC1B,CAAC;IACH,CAAC;IAED;;OAEG;IACH,OAAO,CAAC,IAAY;QAClB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;QAChB,IAAI,CAAC,cAAc,EAAE,CAAA;IACvB,CAAC;IAED;;OAEG;IACH,OAAO,CAAC,IAAY;QAClB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAA;QACrB,IAAI,CAAC,cAAc,EAAE,CAAA;IACvB,CAAC;IAED;;OAEG;IACH,OAAO;QACL,OAAO,IAAI,CAAC,IAAI,CAAA;IAClB,CAAC;IAED;;OAEG;IACH,WAAW;QACT,IAAI,CAAC,MAAM,EAAE,CAAA;IACf,CAAC;CACF;AAEQ,oCAAY"}

package/packages/renderer/src/engine.ts

@@ -0,0 +1,131 @@
+// engine.ts
+// Rendering engine — integrates renderer with scheduler
+// Handles automatic re-renders when state/props change
+
+import type { DFNode, DFTree, RenderCallback } from '@deskforge/core'
+import { createScheduler, schedule } from '@deskforge/core'
+import type { Renderer } from './renderer'
+
+/**
+ * Configuration for the rendering engine
+ */
+interface RenderEngineConfig {
+  // The renderer instance to use
+  renderer: Renderer
+  
+  // Initial node or tree to render
+  root: DFNode | DFTree
+  
+  // Called before each render
+  onBeforeRender?: () => void
+  
+  // Called after each render
+  onAfterRender?: () => void
+  
+  // Called on render errors
+  onError?: (error: Error) => void
+}
+
+/**
+ * Render engine that integrates rendering with scheduling
+ */
+class RenderEngine {
+  // Configuration
+  private config: Required<RenderEngineConfig>
+  
+  // The scheduler that batches renders
+  private scheduler = createScheduler()
+  
+  // Current root node
+  private root: DFNode
+  
+  // Whether the engine is running
+  private running: boolean = false
+  
+  constructor(config: RenderEngineConfig) {
+    this.config = {
+      onBeforeRender: () => {},
+      onAfterRender: () => {},
+      onError: (error) => console.error('RenderEngine error:', error),
+      ...config
+    }
+    
+    // Extract root node
+    this.root = 'root' in config.root 
+      ? (config.root as DFTree).root 
+      : (config.root as DFNode)
+  }
+  
+  /**
+   * Start the rendering engine
+   */
+  start(): void {
+    if (this.running) return
+    this.running = true
+    this.render()
+  }
+  
+  /**
+   * Stop the rendering engine
+   */
+  stop(): void {
+    if (!this.running) return
+    this.running = false
+  }
+  
+  /**
+   * Schedule a render
+   */
+  scheduleRender(): void {
+    if (!this.running) return
+    
+    schedule(this.scheduler, () => this.render())
+  }
+  
+  /**
+   * Perform a render
+   */
+  private render(): void {
+    try {
+      this.config.onBeforeRender()
+      this.config.renderer.renderNode(this.root)
+      this.config.onAfterRender()
+    } catch (error) {
+      const err = error instanceof Error ? error : new Error(String(error))
+      this.config.onError(err)
+    }
+  }
+  
+  /**
+   * Update the root node
+   */
+  setRoot(node: DFNode): void {
+    this.root = node
+    this.scheduleRender()
+  }
+  
+  /**
+   * Update the root tree
+   */
+  setTree(tree: DFTree): void {
+    this.root = tree.root
+    this.scheduleRender()
+  }
+  
+  /**
+   * Get the current root node
+   */
+  getRoot(): DFNode {
+    return this.root
+  }
+  
+  /**
+   * Force immediate render (bypasses scheduler)
+   */
+  forceRender(): void {
+    this.render()
+  }
+}
+
+export { RenderEngine }
+export type { RenderEngineConfig }

package/packages/renderer/src/example.ts

@@ -0,0 +1,184 @@
+// example.ts
+// Example usage of the DeskForge Skia-Canvas renderer
+
+import { Renderer } from './renderer'
+import { RenderEngine } from './engine'
+import { createCanvas } from './canvas'
+import { createNode, createTree } from '@deskforge/core'
+import type { DFNode } from '@deskforge/core'
+import type { RenderContext } from './context'
+
+/**
+ * Simple example rendering a scene with shapes
+ */
+async function exampleBasicRendering(): Promise<void> {
+  // Create a renderer with 800x600 canvas
+  const renderer = new Renderer({
+    width: 800,
+    height: 600,
+    backgroundColor: '#f0f0f0'
+  })
+  
+  // Create a simple node tree
+  const root = createNode('view', {
+    x: 0,
+    y: 0,
+    width: 800,
+    height: 600,
+    fill: '#f0f0f0'
+  }, [
+    // Red rectangle
+    createNode('rect', {
+      x: 50,
+      y: 50,
+      width: 200,
+      height: 150,
+      fill: '#ff0000',
+      stroke: '#000000'
+    }),
+    
+    // Blue circle
+    createNode('circle', {
+      x: 350,
+      y: 100,
+      radius: 75,
+      fill: '#0000ff'
+    }),
+    
+    // Text label
+    createNode('text', {
+      x: 50,
+      y: 250,
+      text: 'Hello, Skia-Canvas!',
+      fill: '#000000',
+      font: 'bold 24px sans-serif'
+    }),
+    
+    // Green line
+    createNode('line', {
+      x1: 50,
+      y1: 300,
+      x2: 750,
+      y2: 300,
+      stroke: '#00ff00',
+      width: 3
+    })
+  ])
+  
+  // Render the tree
+  renderer.renderNode(root)
+  
+  // Save the result
+  await renderer.saveAs('./output.png')
+  console.log('Rendered to output.png')
+}
+
+/**
+ * Example using the rendering engine with scheduling
+ */
+async function exampleWithEngine(): Promise<void> {
+  // Create renderer
+  const renderer = new Renderer({
+    width: 640,
+    height: 480,
+    backgroundColor: '#ffffff'
+  })
+  
+  // Create initial scene
+  const scene = createNode('view', {
+    x: 0,
+    y: 0,
+    width: 640,
+    height: 480
+  }, [
+    createNode('rect', {
+      x: 100,
+      y: 100,
+      width: 200,
+      height: 200,
+      fill: '#4CAF50'
+    })
+  ])
+  
+  // Create engine with automatic scheduling
+  const engine = new RenderEngine({
+    renderer,
+    root: scene,
+    onBeforeRender: () => console.log('Before render'),
+    onAfterRender: () => console.log('After render')
+  })
+  
+  // Start the engine
+  engine.start()
+  
+  // The engine will render and can be updated later
+  // For example, in an event loop or animation frame
+  await new Promise(resolve => setTimeout(resolve, 100))
+  
+  engine.stop()
+  await renderer.saveAs('./engine-output.png')
+  console.log('Rendered with engine to engine-output.png')
+}
+
+/**
+ * Example with custom painter for a custom component
+ */
+function exampleCustomPainter(): void {
+  const renderer = new Renderer({
+    width: 400,
+    height: 300,
+    backgroundColor: '#ffffff'
+  })
+  
+  // Register custom painter for "star" component
+  renderer.registerPainter('star', (node: DFNode, context: RenderContext) => {
+    const { x = 0, y = 0, size = 50, fill = '#FFD700' } = node.props as any
+    const { ctx } = context
+    
+    ctx.fillStyle = fill
+    ctx.beginPath()
+    
+    for (let i = 0; i < 5; i++) {
+      const angle = (i * 4 * Math.PI) / 5 - Math.PI / 2
+      const radius = i % 2 === 0 ? size : size * 0.4
+      const px = x + size + Math.cos(angle) * radius
+      const py = y + size + Math.sin(angle) * radius
+      
+      if (i === 0) ctx.moveTo(px, py)
+      else ctx.lineTo(px, py)
+    }
+    
+    ctx.closePath()
+    ctx.fill()
+  })
+  
+  // Create scene with custom star component
+  const scene = createNode('view', {
+    x: 0,
+    y: 0,
+    width: 400,
+    height: 300
+  }, [
+    createNode('star', {
+      x: 50,
+      y: 50,
+      size: 40,
+      fill: '#FFD700'
+    }),
+    createNode('star', {
+      x: 150,
+      y: 100,
+      size: 35,
+      fill: '#FFA500'
+    })
+  ])
+  
+  renderer.renderNode(scene)
+}
+
+// Export for use
+export {
+  exampleBasicRendering,
+  exampleWithEngine,
+  exampleCustomPainter
+}

package/packages/renderer/src/filters.d.ts

@@ -0,0 +1,22 @@
+export type BlendMode = 'source-over' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten' | 'color-dodge' | 'color-burn' | 'hard-light' | 'soft-light' | 'difference' | 'exclusion';
+export interface FilterOptions {
+    blur?: number;
+    brightness?: number;
+    contrast?: number;
+    saturation?: number;
+    hueRotate?: number;
+    invert?: boolean;
+    sepia?: boolean;
+}
+/**
+ * Apply CSS filter string to canvas context
+ */
+export declare function applyFilter(ctx: CanvasRenderingContext2D, filter: FilterOptions): string;
+/**
+ * Set blend mode on canvas context
+ */
+export declare function setBlendMode(ctx: CanvasRenderingContext2D, mode: BlendMode): void;
+/**
+ * Reset to default blend mode
+ */
+export declare function resetBlendMode(ctx: CanvasRenderingContext2D): void;

package/packages/renderer/src/filters.js

@@ -0,0 +1,41 @@
+"use strict";
+// filters.ts
+// Rendering filters and blend modes for advanced visual effects
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyFilter = applyFilter;
+exports.setBlendMode = setBlendMode;
+exports.resetBlendMode = resetBlendMode;
+/**
+ * Apply CSS filter string to canvas context
+ */
+function applyFilter(ctx, filter) {
+    const parts = [];
+    if (filter.blur)
+        parts.push(`blur(${filter.blur}px)`);
+    if (filter.brightness)
+        parts.push(`brightness(${filter.brightness})`);
+    if (filter.contrast)
+        parts.push(`contrast(${filter.contrast})`);
+    if (filter.saturation)
+        parts.push(`saturate(${filter.saturation})`);
+    if (filter.hueRotate)
+        parts.push(`hue-rotate(${filter.hueRotate}deg)`);
+    if (filter.invert)
+        parts.push(`invert(1)`);
+    if (filter.sepia)
+        parts.push(`sepia(1)`);
+    return parts.join(' ');
+}
+/**
+ * Set blend mode on canvas context
+ */
+function setBlendMode(ctx, mode) {
+    ctx.globalCompositeOperation = mode;
+}
+/**
+ * Reset to default blend mode
+ */
+function resetBlendMode(ctx) {
+    ctx.globalCompositeOperation = 'source-over';
+}
+//# sourceMappingURL=filters.js.map

package/packages/renderer/src/filters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filters.js","sourceRoot":"","sources":["filters.ts"],"names":[],"mappings":";AAAA,aAAa;AACb,gEAAgE;;AA6BhE,kCAeC;AAKD,oCAKC;AAKD,wCAEC;AAnCD;;GAEG;AACH,SAAgB,WAAW,CACzB,GAA6B,EAC7B,MAAqB;IAErB,MAAM,KAAK,GAAa,EAAE,CAAA;IAE1B,IAAI,MAAM,CAAC,IAAI;QAAE,KAAK,CAAC,IAAI,CAAC,QAAQ,MAAM,CAAC,IAAI,KAAK,CAAC,CAAA;IACrD,IAAI,MAAM,CAAC,UAAU;QAAE,KAAK,CAAC,IAAI,CAAC,cAAc,MAAM,CAAC,UAAU,GAAG,CAAC,CAAA;IACrE,IAAI,MAAM,CAAC,QAAQ;QAAE,KAAK,CAAC,IAAI,CAAC,YAAY,MAAM,CAAC,QAAQ,GAAG,CAAC,CAAA;IAC/D,IAAI,MAAM,CAAC,UAAU;QAAE,KAAK,CAAC,IAAI,CAAC,YAAY,MAAM,CAAC,UAAU,GAAG,CAAC,CAAA;IACnE,IAAI,MAAM,CAAC,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,cAAc,MAAM,CAAC,SAAS,MAAM,CAAC,CAAA;IACtE,IAAI,MAAM,CAAC,MAAM;QAAE,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;IAC1C,IAAI,MAAM,CAAC,KAAK;QAAE,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;IAExC,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AACxB,CAAC;AAED;;GAEG;AACH,SAAgB,YAAY,CAC1B,GAA6B,EAC7B,IAAe;IAEf,GAAG,CAAC,wBAAwB,GAAG,IAAgC,CAAA;AACjE,CAAC;AAED;;GAEG;AACH,SAAgB,cAAc,CAAC,GAA6B;IAC1D,GAAG,CAAC,wBAAwB,GAAG,aAAa,CAAA;AAC9C,CAAC"}