@painekillers/tree-builder-core 0.0.0-stage → 1.1.0

package/graph.js

@@ -0,0 +1,339 @@
+export class Node {
+    constructor(id, pa, ch, val){
+        this.id = id
+        this.pa = pa
+        this.ch = ch
+        this.val = val
+
+        this.parents = []
+        this.children = []
+    }
+}
+
+export class Graph {
+    constructor(nodes){
+        this.nodes = new Map(nodes.map(n => [n.id, n]))
+
+        if (this.nodes.size !== nodes.length) {
+            console.warn(`Duplicate node IDs`)
+        }
+
+        // resolve parent and child references
+        for (const node of this.nodes.values()) {
+            const parentIds = node.pa;
+            const childIds = node.ch;
+
+            // node says X is its parent
+            for (const parentId of parentIds) {
+                const parent = this.nodeFromId(parentId);
+                if(!parent) {
+                    console.warn(`Parent with id ${parentId} not found for node ${node.id}`);
+                    continue;
+                }
+
+                if (!node.parents.includes(parent)) {
+                node.parents.push(parent);
+                }
+
+                if (!parent.children.includes(node)) {
+                parent.children.push(node);
+                }
+            }
+
+            // node says X is its child
+            for (const childId of childIds) {
+                const child = this.nodeFromId(childId);
+                if(!child) {
+                    console.warn(`Child with id ${childId} not found for node ${node.id}`);
+                    continue;
+                }
+
+                if (!node.children.includes(child)) {
+                node.children.push(child);
+                }
+
+                if (!child.parents.includes(node)) {
+                child.parents.push(node);
+                }
+            }
+        }
+    }
+
+    nodeFromId(id) {
+        return this.nodes.get(id)
+    }
+
+}
+
+export class LayoutNode {
+    constructor(node, l, original = null) {
+        this.node = node
+        this.connected = []
+
+        this.layer = l
+        this.original = original
+    }
+
+    addConnection(c){
+        this.connected.push(c)
+    }
+}
+
+/*
+Recursion settings
+Null: No recursion
+False: Creates fake nodes when encountering recursion
+True: Connects back to existing instance of a node when recursing
+#: Real recursion to depths #
+*/
+
+/*
+Strategies
+- [X] Current BFS (First) — Layer by shortest distance from root; first discovery determines placement.
+- [X] Undirected BFS (Undirected) — Shortest distance to root; layering is on directional.
+- [X] Directed BFS, outward only (Outwards) — Follow prerequisite-to-dependent edges only.
+- [X] Furthest-parent layering (Furthest) — Place each node one layer below its deepest prerequisite.
+*/
+
+export class LayoutGraph {
+    constructor(graph, root, recurse, strategy = "First") {
+        if(strategy == "First" && typeof recurse == "number") {
+            throw new Error(`Cannot use strategy ${strategy} with numeric recursion setting`);
+        }
+
+        this.layers = new Map()
+
+        const rootNode = graph.nodeFromId(root)
+        if(!rootNode) {
+            throw new Error(`Root node with id ${root} not found in graph`);
+        }
+
+        if(recurse === 0) {
+            this.layers.set(0, [new LayoutNode(rootNode, 0)])
+            return
+        }
+
+        const visited = new Map()
+        const connections = new Set()
+
+        const addConnection = (ln, from) => {
+            const fromNode =
+                this.layers.get(from.layer)?.[from.ind]
+
+            if(!fromNode) return
+
+            const a = `${ln.layer}:${ln.ind}`
+            const b = `${from.layer}:${from.ind}`
+
+            const key = [a, b].sort().join("|")
+
+            if(connections.has(key)) {
+                return
+            }
+
+            connections.add(key)
+            ln.addConnection(from)
+        }
+
+        const queue = [{
+            node: rootNode,
+            layer: 0,
+            from: null
+        }]
+
+        let qi = 0
+
+        while (qi < queue.length) {
+            const { node, layer, from } = queue[qi++]
+
+            if(typeof recurse == "number" && Math.abs(layer) > recurse) {
+                continue
+            }
+
+            if(!this.layers.has(layer)) {
+                this.layers.set(layer, [])
+            }
+
+            const key = typeof recurse == "number"
+                ? `${node.id}|${layer}`
+                : node.id
+
+            if(visited.has(key)) {
+                if(from) {
+                    const pos = visited.get(key)
+                    const ln = this.layers.get(pos.layer)[pos.ind]
+
+                    //holy crap i cannot think bruh
+                    if(((recurse === false) || (recurse === null)) && pos.layer !== layer) { 
+                        if (
+                            recurse == null ||
+                            strategy == "Outwards" &&
+                            from !== null &&
+                            Math.abs(layer) < Math.abs(from.layer)
+                        ) { continue }
+
+                        if (
+                            strategy == "Furthest" &&
+                            (
+                                (layer > 0 && !node.parents.every(val => visited.has(val.id)))
+                                ||
+                                (layer < 0 && !node.children.every(val => visited.has(val.id)))
+                            )
+                        ) { continue }
+
+                        const fn = new LayoutNode(node, layer, this.layers.get(pos.layer)[pos.ind])
+                        this.layers.get(layer).push(fn)
+
+                        addConnection(fn, from)
+                    } else {
+                        addConnection(ln, from)
+
+                    }
+                }
+
+                continue
+            }
+
+            if (
+                strategy == "Outwards" &&
+                from !== null &&
+                Math.abs(layer) < Math.abs(from.layer)
+            ) { continue }
+
+            if (
+                strategy == "Furthest" &&
+                (
+                    (layer > 0 && !node.parents.every(val => visited.has(val.id)))
+                    ||
+                    (layer < 0 && !node.children.every(val => visited.has(val.id)))
+                )
+            ) { continue }
+
+            const ln = new LayoutNode(node, layer)
+
+            this.layers.get(layer).push(ln)
+
+            const pos = {
+                layer,
+                ind: this.layers.get(layer).length - 1
+            }
+
+            visited.set(key, pos)
+
+            if(from) {
+                addConnection(ln, from)
+            }
+
+            for (const child of node.children) {
+                queue.push({
+                    node: child,
+                    layer: layer + 1,
+                    from: pos
+                })
+            }
+
+            for (const parent of node.parents) {
+                queue.push({
+                    node: parent,
+                    layer: strategy !== "Undirected" ? layer - 1: layer + 1,
+                    from: pos
+                })
+            }
+
+        }
+    }
+}
+
+export class DrawNode {
+    constructor(layoutNode, x, y, width, height) {
+        this.layoutNode = layoutNode
+        this.x = x
+        this.y = y
+        this.width = width
+        this.height = height
+    }
+}
+
+export class DrawConnection {
+    constructor(fromNode, toNode) {
+        this.fromNode = fromNode
+        this.toNode = toNode
+
+        if (fromNode.y <= toNode.y) {
+            this.from = {
+                x: fromNode.x,
+                y: fromNode.y + fromNode.height / 2
+            }
+
+            this.to = {
+                x: toNode.x,
+                y: toNode.y - toNode.height / 2
+            }
+        } else {
+            this.from = {
+                x: fromNode.x,
+                y: fromNode.y - fromNode.height / 2
+            }
+
+            this.to = {
+                x: toNode.x,
+                y: toNode.y + toNode.height / 2
+            }
+        }
+    }
+}
+
+export class DrawGraph {
+    constructor(layoutGraph, nodeWidth, nodeHeight, layerSpacing, nodeSpacing) {
+        this.nodes = []
+        this.connections = []
+
+        const drawNodes = new Map()
+
+        const layers = Array.from(layoutGraph.layers.entries())
+            .sort((a, b) => a[0] - b[0])
+
+        for (const [layerIndex, layerNodes] of layers) {
+            const layerWidth =
+                layerNodes.length * nodeWidth +
+                (layerNodes.length - 1) * nodeSpacing
+
+            let x = -layerWidth / 2 + nodeWidth / 2
+
+            const y =
+                layerIndex * (nodeHeight + layerSpacing)
+
+            for (const layoutNode of layerNodes) {
+                const drawNode = new DrawNode(
+                    layoutNode,
+                    x,
+                    y,
+                    nodeWidth,
+                    nodeHeight
+                )
+
+                this.nodes.push(drawNode)
+                drawNodes.set(layoutNode, drawNode)
+
+                x += nodeWidth + nodeSpacing
+            }
+        }
+
+        for (const drawNode of this.nodes) {
+            for (const connection of drawNode.layoutNode.connected) {
+                const toLayoutNode =
+                    layoutGraph.layers
+                        .get(connection.layer)[connection.ind]
+
+                const toDrawNode =
+                    drawNodes.get(toLayoutNode)
+
+                if (toDrawNode) {
+                    this.connections.push(
+                        new DrawConnection(drawNode, toDrawNode)
+                    )
+                }
+            }
+        }
+    }
+}

package/index.js

@@ -0,0 +1,5 @@
+export { default as Bridge } from "./world/bridge.js"
+export { default as Camera } from "./world/camera.js"
+export { default as World } from "./world/world.js"
+
+export { Node, Graph } from "./graph.js"

package/package.json

@@ -1,6 +1,9 @@
 {
   "name": "@painekillers/tree-builder-core",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.1.0",
+  "type": "module",
+  "exports": {
+    ".": "./index.js",
+    "./themes/*": "./themes/*"
+  }
+}

package/themes/dark.js

@@ -0,0 +1,154 @@
+export default {
+    background: Object.assign(new Image(),
+        {
+            src: "data:image/svg+xml," + encodeURIComponent(`
+                <svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080">
+                    <defs>
+                        <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
+                            <path
+                                d="M 40 0 L 0 0 0 40"
+                                fill="none"
+                                stroke="#3f4147"
+                                stroke-width="1"
+                                opacity="0.35"
+                            />
+                        </pattern>
+                    </defs>
+
+                    <rect
+                        width="1920"
+                        height="1080"
+                        fill="#111112"
+                    />
+
+                    <rect
+                        width="1920"
+                        height="1080"
+                        fill="url(#grid)"
+                    />
+                </svg>
+            `)
+        }
+    ),
+
+    draw: {
+        line(ctx, object) {
+            ctx.save()
+
+            ctx.lineCap = "round"
+
+            ctx.beginPath()
+
+            ctx.moveTo(
+                object.from.x,
+                object.from.y
+            )
+
+            ctx.lineTo(
+                object.to.x,
+                object.to.y
+            )
+
+            ctx.lineWidth = object.width
+            ctx.strokeStyle = "#4b4d52"
+            ctx.stroke()
+
+            ctx.restore()
+        },
+
+        node(ctx, object) {
+            const pos = object.pos
+            const size = object.size
+
+            const width = size.width * object.scale
+            const height = size.height * object.scale
+
+            const x = pos.x - width / 2
+            const y = pos.y - height / 2
+
+            const radius = 10
+
+            const fake = object.drawNode.layoutNode.original !== null
+
+            ctx.save()
+
+            ctx.shadowColor = "rgba(0, 0, 0, 0.35)"
+            ctx.shadowBlur = object.hovered ? 14 : 7
+            ctx.shadowOffsetY = object.hovered ? 3 : 2
+
+            ctx.fillStyle = "#2b2d31"
+
+            ctx.beginPath()
+            ctx.roundRect(
+                x,
+                y,
+                width,
+                height,
+                radius
+            )
+            ctx.fill()
+
+            ctx.shadowColor = "transparent"
+
+            ctx.save()
+
+            ctx.beginPath()
+            ctx.roundRect(
+                x,
+                y,
+                width,
+                height,
+                radius
+            )
+            ctx.clip()
+
+            ctx.globalAlpha = object.hovered ? 1 : 0.92
+
+            ctx.drawImage(
+                object.image,
+                x,
+                y,
+                width,
+                height
+            )
+
+            ctx.restore()
+
+            ctx.beginPath()
+            ctx.roundRect(
+                x,
+                y,
+                width,
+                height,
+                radius
+            )
+
+            ctx.lineWidth = 1
+            ctx.strokeStyle = "rgba(255, 255, 255, 0.08)"
+
+            if(fake) {
+                ctx.setLineDash([4, 4])
+            }
+
+            ctx.stroke()
+            ctx.setLineDash([])
+
+            if (object.root) {
+                ctx.beginPath()
+
+                ctx.arc(
+                    x + width - 9,
+                    y + 9,
+                    3,
+                    0,
+                    Math.PI * 2
+                )
+
+                ctx.fillStyle = "rgba(255, 255, 255, 0.35)"
+                ctx.fill()
+            }
+
+            ctx.restore()
+        }
+    }
+}

package/themes/default.js

@@ -0,0 +1,240 @@
+const animate = node => {
+    if(node.animation) return
+
+    const animate = () => {
+        const target = node.hovered ? 1.04 : 1
+        const difference = target - node.scale
+
+        if(Math.abs(difference) < 0.001) {
+            node.scale = target
+            node.animation = null
+            node.world.update()
+            return
+        }
+
+        node.scale += difference * 0.18
+
+        node.world.update()
+
+        node.animation = requestAnimationFrame(animate)
+    }
+
+    node.animation = requestAnimationFrame(animate)
+}
+
+export default {
+    background: Object.assign(new Image(),
+        {src: "data:image/svg+xml," + encodeURIComponent(`
+            <svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080">
+                <defs>
+                    <linearGradient id="base" x1="0" y1="0" x2="0" y2="1">
+                        <stop offset="0%" stop-color="#f4f5f7"/>
+                        <stop offset="100%" stop-color="#e8eaed"/>
+                    </linearGradient>
+
+                    <radialGradient id="light" cx="50%" cy="42%" r="65%">
+                        <stop offset="0%" stop-color="#ffffff" stop-opacity="0.9"/>
+                        <stop offset="60%" stop-color="#ffffff" stop-opacity="0.3"/>
+                        <stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
+                    </radialGradient>
+
+                    <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
+                        <path
+                            d="M 40 0 L 0 0 0 40"
+                            fill="none"
+                            stroke="#9da3ad"
+                            stroke-width="1"
+                            opacity="0.28"
+                        />
+                    </pattern>
+
+                    <radialGradient id="fade" cx="50%" cy="50%" r="70%">
+                        <stop offset="60%" stop-color="#ffffff" stop-opacity="0"/>
+                        <stop offset="100%" stop-color="#c8ccd3" stop-opacity="0.2"/>
+                    </radialGradient>
+                </defs>
+
+                <rect width="1920" height="1080" fill="url(#base)"/>
+                <rect width="1920" height="1080" fill="url(#light)"/>
+                <rect width="1920" height="1080" fill="url(#grid)"/>
+                <rect width="1920" height="1080" fill="url(#fade)"/>
+            </svg>
+        `)}
+    ),
+
+    focusButton: `
+        <svg viewBox="0 0 24 24">
+            <circle cx="12" cy="12" r="7"/>
+            <circle cx="12" cy="12" r="2"/>
+            <path d="M12 2V5"/>
+            <path d="M12 19V22"/>
+            <path d="M2 12H5"/>
+            <path d="M19 12H22"/>
+        </svg>
+    `,
+
+    rootButton: `
+        <svg viewBox="0 0 24 24">
+            <circle cx="12" cy="5" r="2.5"/>
+            <circle cx="6" cy="19" r="2.5"/>
+            <circle cx="18" cy="19" r="2.5"/>
+            <path d="M12 7.5V12"/>
+            <path d="M12 12L6 16.5"/>
+            <path d="M12 12L18 16.5"/>
+        </svg>
+    `,
+
+    searchButton: `
+        <svg viewBox="0 0 24 24">
+            <circle cx="11" cy="11" r="6.5"></circle>
+            <line x1="16" y1="16" x2="21" y2="21"></line>
+        </svg>
+    `,
+
+    themeButton: `
+        <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+        >
+            <circle cx="13.5" cy="6.5" r=".5"></circle>
+            <circle cx="17.5" cy="10.5" r=".5"></circle>
+            <circle cx="8.5" cy="7.5" r=".5"></circle>
+            <circle cx="6.5" cy="12.5" r=".5"></circle>
+            <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"></path>
+        </svg>
+    `,
+
+    draw: {
+        line(ctx, object) {
+            ctx.save()
+
+            ctx.lineCap = "round"
+
+            ctx.shadowColor = "rgba(0, 0, 0, 0.12)"
+            ctx.shadowBlur = 4
+            ctx.shadowOffsetY = 1
+
+            ctx.beginPath()
+
+            ctx.moveTo(
+                object.from.x,
+                object.from.y
+            )
+
+            ctx.lineTo(
+                object.to.x,
+                object.to.y
+            )
+
+            ctx.lineWidth = object.width
+            ctx.strokeStyle = "#999"
+            ctx.stroke()
+
+            ctx.restore()
+        },
+
+        node(ctx, object) {
+            const pos = object.pos
+            const size = object.size
+
+            const width = size.width * object.scale
+            const height = size.height * object.scale
+
+            const x = pos.x - width / 2
+            const y = pos.y - height / 2
+
+            const radius = 10
+
+            const fake = object.drawNode.layoutNode.original !== null
+
+            ctx.save()
+
+            ctx.shadowColor = "rgba(0, 0, 0, 0.14)"
+            ctx.shadowBlur = object.hovered ? 16 : 8
+            ctx.shadowOffsetY = object.hovered ? 4 : 2
+
+            ctx.fillStyle = "#f8f8f8"
+
+            ctx.beginPath()
+            ctx.roundRect(x, y, width, height, radius)
+            ctx.fill()
+
+            ctx.shadowColor = "transparent"
+
+            ctx.save()
+
+            ctx.beginPath()
+            ctx.roundRect(x, y, width, height, radius)
+            ctx.clip()
+
+            ctx.globalAlpha = object.hovered ? 1 : 0.92
+
+            ctx.drawImage(
+                object.image,
+                x,
+                y,
+                width,
+                height
+            )
+
+            ctx.restore()
+
+            ctx.beginPath()
+            ctx.roundRect(x, y, width, height, radius)
+
+            ctx.lineWidth = 1
+            ctx.strokeStyle = "rgba(0, 0, 0, 0.08)"
+
+            if(fake) {
+                ctx.setLineDash([4, 4])
+            }
+
+            ctx.stroke()
+            ctx.setLineDash([])
+
+            if(object.root) {
+                ctx.beginPath()
+                ctx.arc(
+                    x + width - 9,
+                    y + 9,
+                    3,
+                    0,
+                    Math.PI * 2
+                )
+
+                ctx.fillStyle = "rgba(0, 0, 0, 0.25)"
+                ctx.fill()
+            }
+
+            ctx.restore()
+        }
+    },
+
+    focus(node) {
+        setTimeout(() => {
+            node.hovered = true
+            animate(node)
+
+            setTimeout(() => {
+                if(node.world.hover !== node) {
+                    node.hovered = false
+                    animate(node)
+                }
+            }, 600)
+        }, 150)
+    },
+
+    mouseEnter(node) {
+        node.hovered = true
+        animate(node)
+    },
+
+    mouseLeave(node) {
+        node.hovered = false
+        animate(node)
+    }
+}

package/world/bridge.js

@@ -0,0 +1,150 @@
+import { LayoutGraph, DrawGraph } from "../graph.js"
+import { NodeInstance, Line } from "./objects.js"
+
+export default class Bridge {
+    constructor(graph, world) {
+        this.graph = graph
+        this.world = world
+
+        this.layout = null
+        this.draw = null
+        this.obj = null
+        this.toObj = null
+        this.toNode = null
+
+        this.root = null
+    }
+
+    #cleanWorld() {
+        if(this.obj) {
+            this.world.bulkRemove(obj => this.obj.includes(obj))
+
+            this.obj = null
+            this.toObj = null
+            this.toNode = null
+        }
+    }
+
+    calculateLayout(root, recurse, strategy = "First"){ // Real maxdepth, since we cant actually make it infinite
+        this.layout = new LayoutGraph(this.graph, root, recurse, strategy)
+        // Since JS is goofy like this ill just have recurse be a number when we want recursive
+        this.root = this.graph.nodes.get(root)
+
+        // Invalidate everything else
+        this.draw = null
+        this.#cleanWorld()
+    }
+
+    calculateDraw(width, height, padX, padY){
+        if(!this.layout){
+            console.warn("calculateLayout must be called prior to this")
+            return
+        }
+
+        this.draw = new DrawGraph(this.layout, width, height, padX, padY)
+        this.#cleanWorld()
+    }
+
+    createObjects(maxDepth){
+        if(!this.draw){
+            console.warn("calculateDraw must be called prior to this")
+            return
+        }
+
+        this.#cleanWorld()
+        
+        this.obj = []
+        this.toObj = new Map()
+        this.toNode = new Map()
+
+        // Add edges first so nodes render on top
+        for (const connection of this.draw.connections) {
+            if(
+                maxDepth !== null &&
+                (
+                    Math.abs(connection.fromNode.layoutNode.layer) > maxDepth ||
+                    Math.abs(connection.toNode.layoutNode.layer) > maxDepth
+                )
+            ){
+                continue
+            }
+
+            let obj = new Line(
+                this.world,
+                connection.from,
+                connection.to,
+                2
+            )
+
+            this.obj.push(obj)
+            this.world.addObject(obj)
+        }
+
+        // Add nodes
+        for (const drawNode of this.draw.nodes) {
+            if(
+                maxDepth !== null &&
+                Math.abs(drawNode.layoutNode.layer) > maxDepth
+            ){
+                continue
+            }
+
+            let obj = new NodeInstance(
+                this.world,
+                drawNode.x,
+                drawNode.y,
+                drawNode.width,
+                drawNode.height,
+                drawNode.layoutNode.node,
+                drawNode.layoutNode.node.val?.icon,
+                drawNode
+            )
+
+            obj.root =
+                drawNode.layoutNode.node === this.root
+
+            this.obj.push(obj)
+
+            if (drawNode.layoutNode.original === null) {
+                this.toNode.set(
+                    obj,
+                    drawNode.layoutNode.node
+                )
+
+                this.toObj.set(
+                    drawNode.layoutNode.node,
+                    obj
+                )
+            }
+
+            this.world.addObject(obj)
+        }
+
+        this.focus(this.root)
+    }
+
+    focus(node) {
+        if(!this.toObj) {
+            console.warn("createObjects must be called prior to this")
+            return
+        }
+
+        const obj = this.toObj.get(node)
+
+        if(!obj) {
+            console.warn(`Node ${node.id} is not currently visible`)
+            return
+        }
+
+        this.world.camera.pos = [
+            obj.pos.x,
+            obj.pos.y
+        ]
+
+        this.world.camera.zoom = 1.5
+
+        obj.focus()
+
+        this.world.update?.()
+    }
+}

package/world/camera.js

@@ -0,0 +1,54 @@
+export default class Camera {
+    #world
+
+    #x = 0
+    #y = 0
+    #width = 0
+    #height = 0
+    #zoom = 1
+
+    constructor(world) {
+        this.#world = world
+    }
+
+    set pos(p){
+        if (this.#world.paused) return
+
+        this.#x = p[0]
+        this.#y = p[1]
+        this.#world.update()
+    }
+
+    set viewport(v){
+        if (this.#world.paused) return
+
+        this.#width = v[0]
+        this.#height = v[1]
+        this.#world.update()
+    }
+
+    set zoom(val) {
+        if (this.#world.paused) return
+
+        this.#zoom = val
+        this.#world.update()
+    }
+
+    get pos(){
+        return {
+            x: this.#x,
+            y: this.#y
+        }
+    }
+
+    get viewport(){
+        return {
+            width: this.#width,
+            height: this.#height
+        }
+    }
+    
+    get zoom(){
+        return this.#zoom
+    }
+}

package/world/objects.js

@@ -0,0 +1,175 @@
+class Object {
+    #world
+
+    constructor(world) {
+        this.#world = world
+    }
+
+    get world() {
+        return this.#world
+    }
+}
+
+class PSInstance extends Object {
+    #x
+    #y
+
+    #width
+    #height
+
+    constructor(world, x, y, width, height) {
+        super(world)
+
+        this.#x = x
+        this.#y = y
+        this.#width = width
+        this.#height = height
+    }
+
+    set pos(p) {
+        this.#x = p[0]
+        this.#y = p[1]
+        this.world.update()
+    }
+
+    set size(s) {
+        this.#width = s[0]
+        this.#height = s[1]
+        this.world.update()
+    }
+
+    get pos() {
+        return {
+            x: this.#x,
+            y: this.#y
+        }
+    }
+
+    get size() {
+        return {
+            width: this.#width,
+            height: this.#height
+        }
+    }
+}
+
+/*export class test extends PSInstance {
+    constructor(world, x, y, width, height, value) {
+        super(world, x, y, width, height)
+
+        this.value = value
+    }
+
+    draw(ctx) {
+        let pos = this.pos
+        let size = this.size
+
+        ctx.fillStyle = "red"
+        ctx.fillRect(
+            pos.x - size.width / 2,
+            pos.y - size.height / 2,
+            size.width,
+            size.height
+        )
+
+        ctx.fillStyle = "white"
+        ctx.textAlign = "center"
+        ctx.textBaseline = "middle"
+        ctx.font = "16px sans-serif"
+        ctx.fillText(
+            this.value,
+            pos.x,
+            pos.y
+        )
+    }
+}*/
+
+const placeholder = new Image()
+
+placeholder.src = "data:image/svg+xml," + encodeURIComponent(`
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+    <text x="100" y="105"
+        text-anchor="middle"
+        font-family="sans-serif"
+        font-size="20"
+        fill="#b0b0b5">
+        No Image
+    </text>
+</svg>
+`)
+
+export class ImageInstance extends PSInstance {
+    #image
+
+    constructor(world, x, y, width, height, image) {
+        super(world, x, y, width, height)
+
+        this.image = image
+    }
+
+    set image(img) {
+        this.#image = img
+        this.world.update()
+    }
+
+    get image() {
+        return this.#image ?? placeholder
+    }
+
+    draw(ctx, p, s) {
+        let pos = p || this.pos
+        let size = s || this.size
+
+        ctx.drawImage(
+            this.image,
+            pos.x - size.width / 2,
+            pos.y - size.height / 2,
+            size.width,
+            size.height
+        )
+    }
+}
+
+export class Line extends Object {
+    constructor(world, from, to, width = 2) {
+        super(world)
+
+        this.from = from
+        this.to = to
+        this.width = width
+    }
+
+    draw(ctx) {
+        this.world.theme.draw.line(ctx, this)
+    }
+}
+
+export class NodeInstance extends ImageInstance {
+    constructor(world, x, y, width, height, node, image, drawNode) {
+        super(world, x, y, width, height, image)
+
+        this.node = node
+        this.hovered = false
+        this.scale = 1
+        this.animation = null
+        this.root = false
+
+        this.drawNode = drawNode
+    }
+
+    focus() {
+        this.world.theme.focus(this)
+    }
+
+    mouseEnter() {
+        this.world.theme.mouseEnter(this)
+    }
+
+    mouseLeave() {
+        this.world.theme.mouseLeave(this)
+    }
+
+    draw(ctx) {
+        this.world.theme.draw.node(ctx, this)
+    }
+}

package/world/world.js

@@ -0,0 +1,240 @@
+export default class World {
+    /** @type {HTMLCanvasElement} */
+    #canvas
+    #ctx
+
+    #camera
+    #theme
+
+    #paused = false
+
+    updateRate = 1/60
+
+    #objects = []
+    #background
+
+    constructor(canvas, theme) {
+        this.#theme = theme
+        this.#canvas = canvas
+        this.#ctx = canvas.getContext("2d")
+
+    }
+
+    set paused(value) {
+        this.#paused = value
+
+        if (value) {
+            this.#hoveredObject?.mouseLeave?.()
+            this.#hoveredObject = null
+        }
+    }
+
+    get paused() {
+        return this.#paused
+    }
+
+    set theme(value) {
+        this.#theme = value
+        this.update()
+    }
+
+    get theme() {
+        return this.#theme
+    }
+
+    set camera(cam) {
+        this.#camera = cam
+        this.update()
+    }
+
+    get camera() {
+        return this.#camera
+    }
+
+    set background(bg) {
+        this.#background = bg
+        this.update()
+    }
+
+    get hover() {
+        return this.#hoveredObject
+    }
+
+    addObject(obj) {
+        if (this.#paused) return
+
+        let index = this.#objects.findIndex(e => e.z > obj.z)
+
+        if (index === -1) {
+            this.#objects.push(obj)
+        } else {
+            this.#objects.splice(index, 0, obj)
+        }
+
+        this.update()
+    }
+
+    removeObject(obj) {
+        if (this.#paused) return
+
+        const index = this.#objects.indexOf(obj)
+
+        if (index !== -1) {
+            this.#objects.splice(index, 1)
+        }
+
+        if (this.#hoveredObject === obj) {
+            this.#hoveredObject = null
+        }
+
+        this.update()
+    }
+
+    bulkRemove(func) {
+        if (this.#paused) return
+
+        this.#objects = this.#objects.filter(obj => {
+            if (func(obj)) {
+                if (this.#hoveredObject === obj) {
+                    this.#hoveredObject = null
+                }
+                return false
+            }
+
+            return true
+        })
+
+        this.update()
+    }
+
+    clear() {
+        if (this.#paused) return
+
+        this.#objects = []
+        this.#hoveredObject = null
+
+        this.update()
+    }
+
+    get objects() {
+        return this.#objects
+    }
+
+    #draw() {
+        this.#ctx.clearRect(
+            0,
+            0,
+            this.#canvas.width,
+            this.#canvas.height
+        )
+
+        if (this.#background) {
+            this.#ctx.drawImage(
+                this.#background,
+                0,
+                0,
+                this.#canvas.width,
+                this.#canvas.height
+            )
+        }
+
+        this.#ctx.save()
+
+        const cpos = this.#camera.pos
+
+        this.#ctx.translate(
+            this.#canvas.width / 2,
+            this.#canvas.height / 2
+        )
+
+        this.#ctx.scale(
+            this.#camera.zoom,
+            this.#camera.zoom
+        )
+
+        this.#ctx.translate(
+            -cpos.x,
+            -cpos.y
+        )
+
+        this.#objects.forEach(e => e.draw(this.#ctx))
+
+        this.#ctx.restore()
+    }
+
+    #frameRequested = false
+
+    update() {
+        if (this.#paused) return
+        if (this.#frameRequested) return
+
+        this.#frameRequested = true
+
+        requestAnimationFrame(() => {
+            this.#frameRequested = false
+
+            this.#draw()
+        })
+    }
+
+    resize(width, height) {
+        this.#canvas.width = width
+        this.#canvas.height = height
+        
+        this.#draw()
+
+        this.#camera.viewport = [width, height]
+    }
+
+    #hoveredObject = null
+
+    mouseWorldPosition(e) {
+        if (!e) {
+            return {
+                x: null,
+                y: null
+            }
+        }
+
+        const rect = this.#canvas.getBoundingClientRect()
+
+        const x =
+            e.clientX -
+            rect.left -
+            this.#canvas.width / 2
+
+        const y =
+            e.clientY -
+            rect.top -
+            this.#canvas.height / 2
+
+        return {
+            x: x / this.#camera.zoom + this.#camera.pos.x,
+            y: y / this.#camera.zoom + this.#camera.pos.y
+        }
+    }
+
+    objectAt(x, y) {
+        for (let i = this.#objects.length - 1; i >= 0; i--) {
+            const object = this.#objects[i]
+
+            if (!object.pos || !object.size) {
+                continue
+            }
+
+            const pos = object.pos
+            const size = object.size
+
+            if (
+                x >= pos.x - size.width / 2 &&
+                x <= pos.x + size.width / 2 &&
+                y >= pos.y - size.height / 2 &&
+                y <= pos.y + size.height / 2
+            ) {
+                return object
+            }
+        }
+
+        return null
+    }
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.