TSignal

// the example is also available at "https://github.com/omar-azmi/tsignal_ts/blob/main/examples/3/index.tsx"
/** @jsx h */
/** @jsxFrag hf */

import { createHyperScript } from "jsr:@oazmi/tsignal/jsx-runtime"
import { Context, MemoSignal_Factory, StateSignal_Factory } from "jsr:@oazmi/tsignal"

const
    ctx = new Context(),
    createState = ctx.addClass(StateSignal_Factory),
    createMemo = ctx.addClass(MemoSignal_Factory)

/** in the esbuild build options (`BuildOptions`), you must set `jsxFactory = "h"` and `jsxFragment = "hf"` */
export const [h, hf, namespaceStack] = createHyperScript(ctx)

type TimeState = {
    hour: number
    minute: number
    second: number
}

const App = () => {
    const
        now_time = new Date(),
        today_midnight_epochtime = new Date(now_time.getFullYear(), now_time.getMonth(), now_time.getDate(), 0, 0, 0).getTime(),
        [, getEpochTime, setEpochTime] = createState<number>(0),
        [, seconds_since_midnight] = createMemo((id) => {
            return ((getEpochTime(id) - today_midnight_epochtime) / 1000) | 0
        })
    const [, currentTime] = createMemo<TimeState>((id) => {
        const s = seconds_since_midnight(id)
        return {
            second: s % (60),
            minute: ((s / 60) % 60) | 0,
            hour: ((s / (60 * 60)) % 12) | 0,
        }
    }, { equals: false })


    setInterval(() => setEpochTime(Date.now()), 500)

    // we must change the namespace to `svg`, so that hypescript picks up on it, and handles the newly created svg nodes appropriately.
    namespaceStack.push("svg")
    const svg_dom = <svg style="user-select: none;" width="200px" height="200px" viewbox="0 0 200 200">
        <g transform="translate(100, 100)">
            <circle r="100" fill="lightgrey" stroke="black" />
            <text text-anchor="middle" y="-25">Apple Watch XVII</text>
            <line transform={createMemo((id) => `rotate(${currentTime(id).second * 6})`)[1]} class="hand-seconds" y1="0" y2="-100" stroke="red" stroke-width={4} />
            <line transform={createMemo((id) => `rotate(${currentTime(id).minute * 6})`)[1]} class="hand-minutes" y1="0" y2="-100" stroke="green" stroke-width={4} />
            <line transform={createMemo((id) => `rotate(${currentTime(id).hour * 5 * 6})`)[1]} class="hand-hours" y1="0" y2="-100" stroke="blue" stroke-width={4} />
        </g>
    </svg>
    // declare that the svg namespace is now over, and switch back to html namespace
    namespaceStack.pop()
    return svg_dom
}

document.body.append(App())

// reactively compute the bounding-boxes of many nested rectangles.
// the computation should be lazy: if the bounding-box of a child-rectangle hasn't changed, then it shouldn't invoke an update in its parent-rectangle.
// if the top-most rectangle's `right` or `top` bounding-box's sides exceed `600`, then we should log `"overflow"` in the console.
// at the end of every reaction cycle, log the number of computations done in the console.

import { Context } from "jsr:@oazmi/tsignal/context"
import { StateSignal_Factory, MemoSignal_Factory, EffectSignal_Factory } from "jsr:@oazmi/tsignal/signal"
import type { Accessor, Setter } from "jsr:@oazmi/tsignal/typedefs"

/** `x` and `y` are relative to the parent-rectangle's top-left corner (which is their (x, y) position). */
interface Rect { x: number, y: number, width: number, height: number }

/** the bounding box of a `Rect` */
interface Box { left: number, top: number, right: number, bottom: number }

const signal_ctx = new Context()
const createState = signal_ctx.addClass(StateSignal_Factory)
const createMemo = signal_ctx.addClass(MemoSignal_Factory)
const createEffect = signal_ctx.addClass(EffectSignal_Factory)
const rectEqualityFn = (rect1: Rect | undefined, rect2: Rect): boolean => {
    return rect1 === undefined ? false :
        rect1.x === rect2.x &&
        rect1.y === rect2.y &&
        rect1.width === rect2.width &&
        rect1.height === rect2.height
}
const boxEqualityFn = (box1: Box | undefined, box2: Box): boolean => {
    return box1 === undefined ? false :
        box1.top === box2.top &&
        box1.left === box2.left &&
        box1.bottom === box2.bottom &&
        box1.right === box2.right
}

type RectangleObject = Rect & { children?: RectangleObject[] }

class Rectangle {
    rect: Accessor<Rect>
    setRect: Setter<Rect>
    box: Accessor<Box>
    children: Rectangle[] = []

    constructor(initial_rect: Rect) {
        const [idRect, getRect, setRect] = createState(initial_rect, { equals: rectEqualityFn })
        const [idBox, getBox] = createMemo<Box>((id) => {
            const { x, y, width, height } = getRect(id)
            const children_boxes = this.children.map((child) => child.box(idBox))
            const
                top = Math.min(y, ...children_boxes.map((child_box) => child_box.top)),
                left = Math.min(x, ...children_boxes.map((child_box) => child_box.left)),
                bottom = Math.max(y + height, ...children_boxes.map((child_box) => y + child_box.bottom)),
                right = Math.max(x + width, ...children_boxes.map((child_box) => x + child_box.right))
            return { top, left, bottom, right }
        }, { equals: boxEqualityFn })

        this.rect = getRect
        this.setRect = setRect
        this.box = getBox
    }

    render(ctx: CanvasRenderingContext2D) {
        const { x, y, width, height } = this.rect()
        const { top, left, bottom, right } = this.box()
        const children = this.children
        ctx.fillStyle = get_next_fillcolor()
        ctx.strokeStyle = get_next_strokecolor()
        ctx.fillRect(x, y, width, height)
        ctx.strokeRect(left, top, right - left, bottom - top)
        ctx.translate(x, y)
        for (const child of children) {
            child.render(ctx)
        }
        ctx.translate(-x, -y)
    }

    static fromObject(object: RectangleObject): Rectangle {
        const { children, ...rect } = object
        const instance = new Rectangle(rect)
        const children_instances = children?.map(Rectangle.fromObject) ?? []
        instance.children.push(...children_instances)
        return instance
    }
}

let color_idx = 0
const fillcolors = ["blue", "cyan", "goldenrod", "gray", "green", "khaki", "magenta", "orange", "orchid", "red", "salmon", "seagreen", "turquoise", "violet",]
const strokecolors = fillcolors.map((color) => "dark" + color)
const get_next_fillcolor = () => { return fillcolors[color_idx++ % fillcolors.length] }
const get_next_strokecolor = () => { return strokecolors[color_idx++ % strokecolors.length] }

const all_rectangles = Rectangle.fromObject({
    x: 10, y: 20, width: 70, height: 80, children: [
        {
            x: 15, y: 25, width: 50, height: 60, children: [
                {
                    x: 20, y: 30, width: 40, height: 50, children: [
                        {
                            x: 25, y: 35, width: 30, height: 40, children: [
                                { x: 30, y: 40, width: 20, height: 30 },
                                { x: 35, y: 45, width: 10, height: 20 }
                            ]
                        },
                        { x: 40, y: 50, width: 10, height: 20 }
                    ]
                },
                {
                    x: 45, y: 55, width: 10, height: 15, children: [
                        { x: 0, y: 40, width: 30, height: 50 },
                        { x: 70, y: 80, width: 50, height: 20 }
                    ]
                }
            ]
        },
        { x: 50, y: 60, width: 40, height: 30 }
    ]
})

const canvas = document.createElement("canvas")
const ctx = canvas.getContext("2d")!
document.body.appendChild(canvas)

const [idRedraw, awaitRedraw, fireRedraw] = createEffect((id) => {
    // add dependence on all rectangles
    const add_dependence = (rect_object: Rectangle) => {
        rect_object.rect(id)
        rect_object.box(id)
        rect_object.children.forEach(add_dependence)
    }
    add_dependence(all_rectangles)

    color_idx = 0
    ctx.reset()
    ctx.scale(2, 2)
    all_rectangles.render(ctx)
})

fireRedraw()

// try the following lines in your console (one by one) to witness reactivity:
// all_rectangles.children[0].children[0].children[0].setRect({x:10, y:10, width: 20, height: 50})
// all_rectangles.children[0].children[1].setRect({x:50, y:50, width: 100, height: 50})

MyGraph = [
    Signal_A -> [Signal_B, Signal_C],
    Signal_B -> [Signal_D, Signal_F],
    Signal_C -> [Signal_E, Signal_F, Signal_H],
    ...
]

graph = [ A->[B, C] , B->[D, F] , C->[E, F, H] , D->[F, G] , E->[F, H] , F->[I] , G->[I] , H->[I] , I->[J] ]

nodes_sorted = [ A, B, D, G, C, E, H, F, I, J ]

graph = [ A->[B, C] , B->[D, F] , C->[E, F, H] , D->[F, G] , E->[F, H] , F->[I] , G->[I] , H->[I] , I->[J] ]
topological_ids = [ A, B, D, G, C, E, H, F, I, J ]
source_ids = [ A, ]