File size: 3,876 Bytes
df84e45 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | // Small DOM and maths helpers shared by every module.
export function h(tag, attrs = {}, ...children) {
const el = document.createElement(tag);
for (const [k, v] of Object.entries(attrs || {})) {
if (v === undefined || v === null || v === false) continue;
if (k === "class") el.className = v;
else if (k === "style" && typeof v === "object") Object.assign(el.style, v);
else if (k === "html") el.innerHTML = v;
else if (k === "dataset") Object.assign(el.dataset, v);
else if (k.startsWith("on") && typeof v === "function") el.addEventListener(k.slice(2).toLowerCase(), v);
else if (v === true) el.setAttribute(k, "");
else el.setAttribute(k, v);
}
for (const c of children.flat(Infinity)) {
if (c === undefined || c === null || c === false) continue;
el.append(c instanceof Node ? c : document.createTextNode(String(c)));
}
return el;
}
export const $ = (sel, root = document) => root.querySelector(sel);
export const $$ = (sel, root = document) => Array.from(root.querySelectorAll(sel));
export const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
export const round2 = (v) => Math.round(v * 100) / 100;
export function fmt(v, digits = 0) {
if (v === null || v === undefined || Number.isNaN(v)) return "";
const r = Number(v.toFixed(digits));
return String(Object.is(r, -0) ? 0 : r);
}
export function debounce(fn, ms) {
let t = null;
return (...args) => {
clearTimeout(t);
t = setTimeout(() => fn(...args), ms);
};
}
export class Emitter {
constructor() { this._h = new Map(); }
on(evt, fn) {
if (!this._h.has(evt)) this._h.set(evt, new Set());
this._h.get(evt).add(fn);
return () => this._h.get(evt).delete(fn);
}
emit(evt, ...args) {
for (const fn of this._h.get(evt) || []) {
try { fn(...args); } catch (e) { console.error(e); }
}
}
}
export const rad = (deg) => (deg * Math.PI) / 180;
export const deg = (r) => (r * 180) / Math.PI;
export function rotate(px, py, a) {
const c = Math.cos(a), s = Math.sin(a);
return [px * c - py * s, px * s + py * c];
}
// Axis-aligned bounds of an element's rotated box, in canvas pixels.
export function bounds(el) {
if (!el.angle) return { x0: el.x, y0: el.y, x1: el.x + el.width, y1: el.y + el.height };
const cx = el.x + el.width / 2, cy = el.y + el.height / 2;
const a = rad(el.angle);
const hw = (Math.abs(el.width * Math.cos(a)) + Math.abs(el.height * Math.sin(a))) / 2;
const hh = (Math.abs(el.width * Math.sin(a)) + Math.abs(el.height * Math.cos(a))) / 2;
return { x0: cx - hw, y0: cy - hh, x1: cx + hw, y1: cy + hh };
}
export function unionBounds(els) {
const bs = els.map(bounds);
return {
x0: Math.min(...bs.map((b) => b.x0)), y0: Math.min(...bs.map((b) => b.y0)),
x1: Math.max(...bs.map((b) => b.x1)), y1: Math.max(...bs.map((b) => b.y1)),
};
}
export function cssColor(hex) {
if (!hex) return "transparent";
if (hex.length === 9) {
const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16), a = parseInt(hex.slice(7, 9), 16) / 255;
return `rgba(${r}, ${g}, ${b}, ${a.toFixed(3)})`;
}
return hex;
}
export function elementLabel(el) {
if (el.name) return el.name;
if (el.kind === "text") {
const t = (el.text || "").replace(/\s+/g, " ").trim();
return t.length > 28 ? t.slice(0, 26) + "…" : t || "Text";
}
if (el.kind === "shape") return el.shape === "ellipse" ? "Ellipse" : "Rectangle";
return `Image ${el.asset_id}`;
}
export function isMac() {
return /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
}
export function shortcut(s) {
if (!s) return "";
const mac = isMac();
return s.replace(/Mod/g, mac ? "⌘" : "Ctrl").replace(/Shift/g, mac ? "⇧" : "Shift")
.replace(/Alt/g, mac ? "⌥" : "Alt").replace(/\+/g, mac ? "" : "+");
}
|