canvas-compositor/index.ts

import Node from "./Compositor/Node";
import Canvas from "./Compositor/Canvas"
import CanvasBuffer from "./Compositor/CanvasBuffer";

let container = new Node("Box");
container.handleDrawBefore(function(){
    this.width = 400;
    this.height = 400;
    this.padding = {
        left: 2,
        right: 2,
        top: 2,
        bottom: 2
    };
});

let scroll = 2;
container.handleDraw(function(canvasBuffer,area){
    let ctx = canvasBuffer.context;
    ctx.beginPath();
    ctx.lineWidth = 1;
    ctx.strokeStyle = "red";
    ctx.rect(2,2,area.width - 2,area.height - 2);
    ctx.stroke();
    ctx.closePath();
    let offscreen = new CanvasBuffer(area.width - 8, area.height - 8);
    for (const child of this.ChildNodes)
    {
        this.DrawChild(offscreen, child, offscreen.width - 8, offscreen.height - 8);
    };
    offscreen.writeTo(
        ctx,
        0,0, area.width, area.height,
        4,4, area.width, area.height
    );
});

class Button extends Node
{
    public color : string = "#00ff00";
    constructor(x: number, y:number, name: string){
        super();
        this.x = x;
        this.y = y;
        this.name = name;
        this.handleDrawBefore(function(area){
            this.width = 50;
            this.height = 50;
        });
        this.handleDraw(function(canvasBuffer,area){
            let ctx = canvasBuffer.context;
            ctx.beginPath();
            ctx.lineWidth = 1;
            ctx.fillStyle = this.color;
            ctx.fillRect(0,0,area.width - 4,area.height - 4);
            ctx.closePath();
            return true;
        });
        this.on("mouse",(event) => {
            switch(event.type)
            {
                case "mouse:down":{
                    event.stoppedBubbling = true;
                    this.color = "#007700";
                    this.update();
                    break;
                }
                case "mouse:up":{
                    event.stoppedBubbling = true;
                    this.color = "#00dd00";
                    this.update();
                    break;
                }
                case "mouse:enter":{
                    event.stoppedBubbling = true;
                    this.color = "#00dd00";
                    this.update();
                    break;
                }
                case "mouse:leave":{
                    event.stoppedBubbling = true;
                    this.color = "#00ff00";
                    this.update();
                    break;
                }
            }
        });
    }
};
class TextNode extends Node
{
    public color : string = "#00ff00";
    public textSize: TextMetrics;
    public text: string;
    public fontSize : number = 24;
    constructor(text: string){
        super();
        this.text = text;
        this.context.context.font = "system-ui "+this.fontSize+"px";
        this.textSize = this.context.context.measureText(text);

        this.handleDrawBefore(function(){
            this.width = this.textSize.width;
            this.height = 50;
        });
        this.handleDraw(function(canvasBuffer,area){
            let ctx = canvasBuffer.context;
            ctx.beginPath();
            ctx.lineWidth = 1;
            ctx.fillStyle = this.color;
            ctx.fillRect(2,2,area.width - 2,area.height - 2);
            ctx.closePath();
        });
    }
};

for(let a = 0; a < 500; a += 50)
{
    for(let b = 0; b < 500; b += 50)
    {
        container.addNode(new Button(a,b,"Box A"));
    }
}


let t = new Canvas();
t.init();
t.addNode(container);

t.canvas.addEventListener("wheel",function(event){
    event.preventDefault();
    event.stopPropagation();
    
    let delta = event.deltaY < 0 ? -5 : +5;
    
    scroll = Math.max(scroll + delta, 0);

    container.update();
    
});