@nightshadeui/util 2.11.0

package/package.json

@@ -0,0 +1,12 @@
+{
+    "name": "@nightshadeui/util",
+    "version": "2.11.0",
+    "description": "Shared utility helpers for Nightshade packages",
+    "author": "Boris Okunskiy",
+    "license": "ISC",
+    "sideEffects": false,
+    "exports": {
+        ".": "./src/index.ts",
+        "./src": "./src/index.ts"
+    }
+}

package/src/DomEventProxy.ts

@@ -0,0 +1,27 @@
+type Listener = EventListenerOrEventListenerObject;
+
+interface Entry {
+    type: string;
+    listener: Listener;
+    options?: AddEventListenerOptions | boolean;
+}
+
+export class DomEventProxy {
+
+    private entries: Entry[] = [];
+
+    constructor(private target: EventTarget) {}
+
+    add(type: string, listener: Listener, options?: AddEventListenerOptions | boolean) {
+        this.target.addEventListener(type, listener, options);
+        this.entries.push({ type, listener, options });
+    }
+
+    removeAll() {
+        for (const entry of this.entries) {
+            this.target.removeEventListener(entry.type, entry.listener, entry.options);
+        }
+        this.entries = [];
+    }
+
+}

package/src/box.ts

@@ -0,0 +1,69 @@
+import { clamp } from './math.js';
+import { type Point, pointsEqual, scalePoint } from './point.js';
+
+export type Box = [Point, Point];
+
+export function boxFromPoints(a: Point, b: Point): Box {
+    const min = { x: Math.min(a.x, b.x), y: Math.min(a.y, b.y) };
+    const max = { x: Math.max(a.x, b.x), y: Math.max(a.y, b.y) };
+    return [min, max];
+}
+
+export function boxOverlap(a: Box, b: Box): boolean {
+    // https://stackoverflow.com/questions/20925818/algorithm-to-check-if-two-boxes-overlap
+    const xOverlap = a[1].x >= b[0].x && b[1].x >= a[0].x;
+    const yOverlap = a[1].y >= b[0].y && b[1].y >= a[0].y;
+    return xOverlap && yOverlap;
+}
+
+export function boxContains(box: Box, point: Point): boolean {
+    return boxOverlap(box, [point, point]);
+}
+
+export function boxCovers(boundingBox: Box, box: Box): boolean {
+    const [a, b] = boundingBox;
+    const [c, d] = box;
+    return a.x <= c.x && a.y <= c.y && b.x >= d.x && b.y >= d.y;
+}
+
+export function boxEquals(a: Box, b: Box) {
+    return pointsEqual(a[0], b[0]) && pointsEqual(a[1], b[1]);
+}
+
+export function boxScale(box: Box, scale: number) {
+    return boxFromPoints(scalePoint(box[0], scale), scalePoint(box[1], scale));
+}
+
+export function boxCenter(box: Box): Point {
+    const [min, max] = box;
+    return {
+        x: (max.x - min.x) * .5 + min.x,
+        y: (max.y - min.y) * .5 + min.y,
+    };
+}
+
+export function boundingBox(a: Box, b: Box): Box {
+    return [
+        {
+            x: Math.min(a[0].x, b[0].x),
+            y: Math.min(a[0].y, b[0].y),
+        },
+        {
+            x: Math.max(a[1].x, b[1].x),
+            y: Math.max(a[1].y, b[1].y),
+        },
+    ];
+}
+
+export function boxArea(box: Box) {
+    const a = Math.abs(box[0].x - box[1].x);
+    const b = Math.abs(box[0].y - box[1].y);
+    return a * b;
+}
+
+export function clampPointToBox(point: Point, box: Box): Point {
+    return {
+        x: clamp(point.x, box[0].x, box[1].x),
+        y: clamp(point.y, box[0].y, box[1].y),
+    };
+}

package/src/css.ts

@@ -0,0 +1,26 @@
+export function getCssVar(el: HTMLElement | null | undefined, name: string, fallback: string) {
+    const root = el ?? document.documentElement;
+    const value = getComputedStyle(root).getPropertyValue(name).trim();
+    return value || fallback;
+}
+
+export function getCssVarNumber(el: HTMLElement | null | undefined, name: string, fallback: number) {
+    const raw = getCssVar(el, name, String(fallback));
+    const parsed = Number(raw.replace(/px|em|%|vh|vw/g, ''));
+    return Number.isFinite(parsed) ? parsed : fallback;
+}
+
+export function getCssColorVar(el: HTMLElement | null | undefined, name: string, fallback: string) {
+    const root = el ?? document.documentElement;
+    const value = getCssVar(el, name, fallback);
+    const probe = document.createElement('span');
+    probe.style.position = 'absolute';
+    probe.style.visibility = 'hidden';
+    probe.style.pointerEvents = 'none';
+    probe.style.color = fallback;
+    probe.style.color = value;
+    root.appendChild(probe);
+    const resolved = getComputedStyle(probe).color.trim();
+    probe.remove();
+    return resolved || fallback;
+}

package/src/grid.ts

@@ -0,0 +1,76 @@
+export function createGridLinesSvg(
+    cellSize: number,
+    subdivisions: number,
+    majorColor: string,
+    minorColor: string,
+) {
+    const subdivCoords = getSubdivCoords(cellSize, subdivisions)
+        .map(_ => _ + 1);
+    const lines = [
+        `<svg xmlns="http://www.w3.org/2000/svg"
+        width="${cellSize}"
+        height="${cellSize}"
+        viewBox="0 0 ${cellSize} ${cellSize}">`
+    ];
+    // Minor lines
+    for (const c of subdivCoords) {
+        lines.push(
+            `<path d="M0,${c} H ${cellSize}" stroke="${minorColor}" stroke-width="1"/>`
+        );
+        lines.push(
+            `<path d="M${c},0 V ${cellSize}" stroke="${minorColor}" stroke-width="1"/>`
+        );
+    }
+    // Major lines
+    lines.push(`<path d="M0,1 H ${cellSize}" stroke="${majorColor}" stroke-width="1"/>`);
+    lines.push(`<path d="M1,0 V ${cellSize}" stroke="${majorColor}" stroke-width="1"/>`);
+    lines.push('</svg>');
+    return lines.join('');
+}
+
+export function createGridDotsSvg(
+    cellSize: number,
+    subdivisions: number,
+    majorColor: string,
+    majorRadius = 2,
+    minorColor: string,
+    minorRadius = 1,
+) {
+    const minorCoords = [0, ...getSubdivCoords(cellSize, subdivisions), cellSize];
+    const majorCoords = [0, cellSize];
+    const lines = [
+        `<svg xmlns="http://www.w3.org/2000/svg"
+        width="${cellSize}"
+        height="${cellSize}"
+        viewBox="0 0 ${cellSize} ${cellSize}">`,
+    ];
+    if (minorRadius) {
+        for (const x of minorCoords) {
+            for (const y of minorCoords) {
+                lines.push(
+                    `<circle cx="${x}" cy="${y}" r="${minorRadius}" fill="${minorColor}"/>`
+                );
+            }
+        }
+    }
+    if (majorRadius) {
+        for (const x of majorCoords) {
+            for (const y of majorCoords) {
+                lines.push(
+                    `<circle cx="${x}" cy="${y}" r="${majorRadius}" fill="${majorColor}"/>`
+                );
+            }
+        }
+    }
+    lines.push('</svg>');
+    return lines.join('');
+}
+
+function getSubdivCoords(cellSize: number, subdivisions: number) {
+    const subdivCoords: number[] = [];
+    const k = Math.round(cellSize / subdivisions);
+    for (let i = 1; i < subdivisions; i++) {
+        subdivCoords.push(k * i);
+    }
+    return subdivCoords;
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+export * from './box.js';
+export * from './css.js';
+export * from './DomEventProxy.js';
+export * from './grid.js';
+export * from './math.js';
+export * from './point.js';

package/src/math.ts

@@ -0,0 +1,3 @@
+export function clamp(value: number, min: number, max: number) {
+    return Math.max(min, Math.min(max, value));
+}

package/src/point.ts

@@ -0,0 +1,44 @@
+export interface Point {
+    x: number;
+    y: number;
+}
+
+export function pointsEqual(a: Point, b: Point, threshold = 0) {
+    return Math.abs(a.x - b.x) <= threshold && Math.abs(a.y - b.y) <= threshold;
+}
+
+export function clonePoint(point: Point): Point {
+    return { x: point.x, y: point.y };
+}
+
+export function addPoints(a: Point, b: Point): Point {
+    return {
+        x: a.x + b.x,
+        y: a.y + b.y,
+    };
+}
+
+export function subtractPoints(a: Point, b: Point): Point {
+    return {
+        x: a.x - b.x,
+        y: a.y - b.y,
+    };
+}
+
+export function scalePoint(p: Point, fac: number): Point {
+    return {
+        x: p.x * fac,
+        y: p.y * fac,
+    };
+}
+
+export function normalizePoint(p: Point): Point {
+    const l = Math.hypot(p.x, p.y);
+    if (l === 0) {
+        return { x: 0, y: 0 };
+    }
+    return {
+        x: p.x / l,
+        y: p.y / l,
+    };
+}

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+    "extends": "../../tsconfig.base.json",
+    "include": [
+        "**/*.ts"
+    ],
+    "compilerOptions": {
+        "rootDir": "src",
+        "lib": [
+            "ES2022",
+            "DOM",
+            "DOM.Iterable"
+        ],
+        "noEmit": true
+    }
+}