| |
|
|
| 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]; |
| } |
|
|
| |
| 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 ? "" : "+"); |
| } |
|
|
