@heyramzi/ui 2.11.1 → 2.11.2

package/dist/canvas/pen/shapes.js

@@ -1,80 +1,85 @@
 import { PEN_DEFAULTS, SHAPE_NODE, TEXT_NODE } from "./types.js";
+/** A shape smaller than this on both sides was a click, so it gets the default size. */
 const MIN_DRAG = 6;
 const DEFAULT_SHAPE = {
-    width: 160,
-    height: 100
+	width: 160,
+	height: 100
 };
+/** The box a drag from `from` to `to` covers. Shift keeps it square. */
 export function dragBox(from, to, square = false) {
-    let dx = to.x - from.x;
-    let dy = to.y - from.y;
-    if (square) {
-        const side = Math.max(Math.abs(dx), Math.abs(dy));
-        dx = Math.sign(dx || 1) * side;
-        dy = Math.sign(dy || 1) * side;
-    }
-    return {
-        x: Math.min(from.x, from.x + dx),
-        y: Math.min(from.y, from.y + dy),
-        width: Math.abs(dx),
-        height: Math.abs(dy)
-    };
+	let dx = to.x - from.x;
+	let dy = to.y - from.y;
+	if (square) {
+		const side = Math.max(Math.abs(dx), Math.abs(dy));
+		dx = Math.sign(dx || 1) * side;
+		dy = Math.sign(dy || 1) * side;
+	}
+	return {
+		x: Math.min(from.x, from.x + dx),
+		y: Math.min(from.y, from.y + dy),
+		width: Math.abs(dx),
+		height: Math.abs(dy)
+	};
 }
 export function buildShapeNode(shape, box, options = {}) {
-    const click = box.width < MIN_DRAG && box.height < MIN_DRAG;
-    const width = Math.round(click ? DEFAULT_SHAPE.width : Math.max(box.width, MIN_DRAG));
-    const height = Math.round(click ? DEFAULT_SHAPE.height : Math.max(box.height, MIN_DRAG));
-    const x = click ? box.x - width / 2 : box.x;
-    const y = click ? box.y - height / 2 : box.y;
-    return {
-        id: options.id,
-        type: SHAPE_NODE,
-        position: {
-            x: Math.round(x),
-            y: Math.round(y)
-        },
-        data: {
-            shape,
-            color: options.color ?? PEN_DEFAULTS.color,
-            strokeWidth: PEN_DEFAULTS.strokeWidth,
-            filled: options.filled ?? false,
-            label: options.label ?? ""
-        },
-        width,
-        height
-    };
+	const click = box.width < MIN_DRAG && box.height < MIN_DRAG;
+	const width = Math.round(click ? DEFAULT_SHAPE.width : Math.max(box.width, MIN_DRAG));
+	const height = Math.round(click ? DEFAULT_SHAPE.height : Math.max(box.height, MIN_DRAG));
+	// A click centres the default shape on the cursor.
+	const x = click ? box.x - width / 2 : box.x;
+	const y = click ? box.y - height / 2 : box.y;
+	return {
+		id: options.id,
+		type: SHAPE_NODE,
+		position: {
+			x: Math.round(x),
+			y: Math.round(y)
+		},
+		data: {
+			shape,
+			color: options.color ?? PEN_DEFAULTS.color,
+			strokeWidth: PEN_DEFAULTS.strokeWidth,
+			filled: options.filled ?? false,
+			label: options.label ?? ""
+		},
+		width,
+		height
+	};
 }
 export function buildTextNode(at, options = {}) {
-    return {
-        id: options.id,
-        type: TEXT_NODE,
-        position: {
-            x: Math.round(at.x),
-            y: Math.round(at.y)
-        },
-        data: {
-            text: options.text ?? "",
-            color: options.color ?? PEN_DEFAULTS.color,
-            fontSize: options.fontSize ?? PEN_DEFAULTS.fontSize
-        },
-        width: 120,
-        height: Math.round((options.fontSize ?? PEN_DEFAULTS.fontSize) * 1.4)
-    };
+	return {
+		id: options.id,
+		type: TEXT_NODE,
+		position: {
+			x: Math.round(at.x),
+			y: Math.round(at.y)
+		},
+		data: {
+			text: options.text ?? "",
+			color: options.color ?? PEN_DEFAULTS.color,
+			fontSize: options.fontSize ?? PEN_DEFAULTS.fontSize
+		},
+		// Text sizes itself to the words once it renders, so this is only the empty box.
+		width: 120,
+		height: Math.round((options.fontSize ?? PEN_DEFAULTS.fontSize) * 1.4)
+	};
 }
+/** The outline of a shape inside a width by height box, as an SVG path. */
 export function shapeOutline(shape, width, height, inset) {
-    const left = inset;
-    const top = inset;
-    const right = Math.max(width - inset, left);
-    const bottom = Math.max(height - inset, top);
-    if (shape === "diamond") {
-        const midX = (left + right) / 2;
-        const midY = (top + bottom) / 2;
-        return `M${midX},${top} L${right},${midY} L${midX},${bottom} L${left},${midY} Z`;
-    }
-    if (shape === "ellipse") {
-        const rx = (right - left) / 2;
-        const ry = (bottom - top) / 2;
-        const cy = (top + bottom) / 2;
-        return `M${left},${cy} a${rx},${ry} 0 1,0 ${rx * 2},0 a${rx},${ry} 0 1,0 ${-rx * 2},0 Z`;
-    }
-    return `M${left},${top} H${right} V${bottom} H${left} Z`;
+	const left = inset;
+	const top = inset;
+	const right = Math.max(width - inset, left);
+	const bottom = Math.max(height - inset, top);
+	if (shape === "diamond") {
+		const midX = (left + right) / 2;
+		const midY = (top + bottom) / 2;
+		return `M${midX},${top} L${right},${midY} L${midX},${bottom} L${left},${midY} Z`;
+	}
+	if (shape === "ellipse") {
+		const rx = (right - left) / 2;
+		const ry = (bottom - top) / 2;
+		const cy = (top + bottom) / 2;
+		return `M${left},${cy} a${rx},${ry} 0 1,0 ${rx * 2},0 a${rx},${ry} 0 1,0 ${-rx * 2},0 Z`;
+	}
+	return `M${left},${top} H${right} V${bottom} H${left} Z`;
 }

package/dist/canvas/pen/stroke-path.js

@@ -1,37 +1,39 @@
+// A stroke's points become one SVG path through perfect-freehand. The editor,
+// the headless export and the tests all call this, so they draw the same shape.
 import { getStroke } from "perfect-freehand";
 function average(a, b) {
-    return (a + b) / 2;
+	return (a + b) / 2;
 }
+/** Quadratic smoothing through the outline's midpoints, the way perfect-freehand's README does it. */
 export function outlineToPath(outline) {
-    if (outline.length < 4) return "";
-    const first = outline[0];
-    const second = outline[1];
-    const third = outline[2];
-    let path = `M${first[0].toFixed(2)},${first[1].toFixed(2)} ` + `Q${second[0].toFixed(2)},${second[1].toFixed(2)} ` + `${average(second[0], third[0]).toFixed(2)},${average(second[1], third[1]).toFixed(2)} T`;
-    for(let i = 2; i < outline.length - 1; i++){
-        const a = outline[i];
-        const b = outline[i + 1];
-        path += `${average(a[0], b[0]).toFixed(2)},${average(a[1], b[1]).toFixed(2)} `;
-    }
-    return `${path}Z`;
+	if (outline.length < 4) return "";
+	const first = outline[0];
+	const second = outline[1];
+	const third = outline[2];
+	let path = `M${first[0].toFixed(2)},${first[1].toFixed(2)} ` + `Q${second[0].toFixed(2)},${second[1].toFixed(2)} ` + `${average(second[0], third[0]).toFixed(2)},${average(second[1], third[1]).toFixed(2)} T`;
+	for (let i = 2; i < outline.length - 1; i++) {
+		const a = outline[i];
+		const b = outline[i + 1];
+		path += `${average(a[0], b[0]).toFixed(2)},${average(a[1], b[1]).toFixed(2)} `;
+	}
+	return `${path}Z`;
 }
+/** `last` is false while the pen is still down, so the live tip isn't tapered to a point. */
 export function strokePath(points, shape, last = true) {
-    if (points.length === 0) return "";
-    const highlighter = shape.tool === "highlighter";
-    const outline = getStroke(points.map((point)=>point[2] === undefined ? [
-            point[0],
-            point[1]
-        ] : [
-            point[0],
-            point[1],
-            point[2]
-        ]), {
-        size: shape.size,
-        thinning: highlighter ? 0 : 0.55,
-        smoothing: 0.6,
-        streamline: highlighter ? 0.7 : 0.5,
-        simulatePressure: shape.simulatePressure && !highlighter,
-        last
-    });
-    return outlineToPath(outline);
+	if (points.length === 0) return "";
+	const highlighter = shape.tool === "highlighter";
+	const outline = getStroke(points.map((point) => point[2] === undefined ? [point[0], point[1]] : [
+		point[0],
+		point[1],
+		point[2]
+	]), {
+		size: shape.size,
+		// Flat ink for the highlighter: no pressure taper, a straight sweep.
+		thinning: highlighter ? 0 : .55,
+		smoothing: .6,
+		streamline: highlighter ? .7 : .5,
+		simulatePressure: shape.simulatePressure && !highlighter,
+		last
+	});
+	return outlineToPath(outline);
 }

package/dist/canvas/pen/types.js

@@ -1,30 +1,30 @@
+// The pen layer's node shapes. A stroke, a text and a shape are ordinary xyflow
+// nodes, so undo, copy and save come from the node diffing the editor already does.
 export const STROKE_NODE = "stroke";
 export const TEXT_NODE = "text";
 export const SHAPE_NODE = "shape";
+/** Colours are token names, never hex, so a board drawn in light reads in dark. */
 export const PEN_COLORS = [
-    "ink",
-    "red",
-    "blue",
-    "green",
-    "amber",
-    "violet",
-    "indigo",
-    "terra"
+	"ink",
+	"red",
+	"blue",
+	"green",
+	"amber",
+	"violet",
+	"indigo",
+	"terra"
 ];
 export const SHAPE_KINDS = [
-    "rectangle",
-    "ellipse",
-    "diamond"
+	"rectangle",
+	"ellipse",
+	"diamond"
 ];
 export const PEN_DEFAULTS = {
-    pen: {
-        size: 4
-    },
-    highlighter: {
-        size: 20
-    },
-    strokeWidth: 3,
-    fontSize: 20,
-    color: "ink"
+	pen: { size: 4 },
+	highlighter: { size: 20 },
+	strokeWidth: 3,
+	fontSize: 20,
+	color: "ink"
 };
-export const HIGHLIGHTER_OPACITY = 0.38;
+/** Highlighter ink is drawn at this opacity so what's under it still shows. */
+export const HIGHLIGHTER_OPACITY = .38;

package/dist/canvas/pen/ui.js

@@ -1,3 +1,5 @@
+// The browser registers `penUiPlugin`, and a server registers `penPlugin`.
+// Never both, because a kind has one owner.
 import { definePlugin } from "../plugin.js";
 import PenOverlay from "../../../src/canvas/pen/PenOverlay.svelte";
 import { penPlugin } from "./plugin.js";
@@ -7,14 +9,14 @@ import TextNode from "../../../src/canvas/pen/TextNode.svelte";
 import { SHAPE_NODE, STROKE_NODE, TEXT_NODE } from "./types.js";
 export { PenOverlay, ShapeNode, StrokeNode, TextNode };
 const components = {
-    [STROKE_NODE]: StrokeNode,
-    [TEXT_NODE]: TextNode,
-    [SHAPE_NODE]: ShapeNode
+	[STROKE_NODE]: StrokeNode,
+	[TEXT_NODE]: TextNode,
+	[SHAPE_NODE]: ShapeNode
 };
 export const penUiPlugin = definePlugin({
-    ...penPlugin,
-    nodes: (penPlugin.nodes ?? []).map((kind)=>({
-            ...kind,
-            component: components[kind.type]
-        }))
+	...penPlugin,
+	nodes: (penPlugin.nodes ?? []).map((kind) => ({
+		...kind,
+		component: components[kind.type]
+	}))
 });

package/dist/canvas/plugin.js

@@ -1,51 +1,51 @@
 import { z } from "zod";
+/** Identity, so a plugin file gets its types checked where it is written. */
 export function definePlugin(plugin) {
-    return plugin;
+	return plugin;
 }
+/** Collects plugins into one lookup. A node type or op kind two plugins both claim is an error. */
 export function createRegistry(plugins) {
-    const nodes = new Map();
-    const ops = new Map();
-    const layouts = [];
-    const owner = new Map();
-    const claim = (key, pluginId)=>{
-        const first = owner.get(key);
-        if (first) throw new Error(`"${key}" is claimed by both "${first}" and "${pluginId}"`);
-        owner.set(key, pluginId);
-    };
-    for (const plugin of plugins){
-        for (const kind of plugin.nodes ?? []){
-            claim(`node:${kind.type}`, plugin.id);
-            nodes.set(kind.type, kind);
-        }
-        for (const op of plugin.ops ?? []){
-            claim(`op:${op.kind}`, plugin.id);
-            ops.set(op.kind, op);
-        }
-        layouts.push(...plugin.layouts ?? []);
-    }
-    const typesWhere = (sizing)=>new Set([
-            ...nodes.values()
-        ].filter((k)=>k.sizing === sizing).map((k)=>k.type));
-    return {
-        plugins,
-        nodes,
-        ops,
-        layouts,
-        nodeTypes () {
-            const out = {};
-            for (const kind of nodes.values())if (kind.component) out[kind.type] = kind.component;
-            return out;
-        },
-        contentSizedTypes: ()=>typesWhere("content-sized"),
-        layoutOwnedTypes: ()=>typesWhere("layout-owned"),
-        parseOp (input) {
-            const kind = input?.kind;
-            const def = typeof kind === "string" ? ops.get(kind) : undefined;
-            if (!def) throw new Error(`Unknown op kind: ${String(kind)}`);
-            return def.schema.parse(input);
-        },
-        pickLayout (data, options = {}) {
-            return layouts.find((pass)=>pass.matches(data, options)) ?? null;
-        }
-    };
+	const nodes = new Map();
+	const ops = new Map();
+	const layouts = [];
+	const owner = new Map();
+	const claim = (key, pluginId) => {
+		const first = owner.get(key);
+		if (first) throw new Error(`"${key}" is claimed by both "${first}" and "${pluginId}"`);
+		owner.set(key, pluginId);
+	};
+	for (const plugin of plugins) {
+		for (const kind of plugin.nodes ?? []) {
+			claim(`node:${kind.type}`, plugin.id);
+			nodes.set(kind.type, kind);
+		}
+		for (const op of plugin.ops ?? []) {
+			claim(`op:${op.kind}`, plugin.id);
+			ops.set(op.kind, op);
+		}
+		layouts.push(...plugin.layouts ?? []);
+	}
+	const typesWhere = (sizing) => new Set([...nodes.values()].filter((k) => k.sizing === sizing).map((k) => k.type));
+	return {
+		plugins,
+		nodes,
+		ops,
+		layouts,
+		nodeTypes() {
+			const out = {};
+			for (const kind of nodes.values()) if (kind.component) out[kind.type] = kind.component;
+			return out;
+		},
+		contentSizedTypes: () => typesWhere("content-sized"),
+		layoutOwnedTypes: () => typesWhere("layout-owned"),
+		parseOp(input) {
+			const kind = input?.kind;
+			const def = typeof kind === "string" ? ops.get(kind) : undefined;
+			if (!def) throw new Error(`Unknown op kind: ${String(kind)}`);
+			return def.schema.parse(input);
+		},
+		pickLayout(data, options = {}) {
+			return layouts.find((pass) => pass.matches(data, options)) ?? null;
+		}
+	};
 }

package/dist/canvas/screen/glyphs.js

@@ -1,3 +1,4 @@
+// The card's small drawings, as files a CSS mask paints in the current colour.
 import header from "../../../src/canvas/screen/glyphs/header.svg";
 import button from "../../../src/canvas/screen/glyphs/button.svg";
 import input from "../../../src/canvas/screen/glyphs/input.svg";
@@ -10,15 +11,15 @@ import close from "../../../src/canvas/screen/glyphs/close.svg";
 import plus from "../../../src/canvas/screen/glyphs/plus.svg";
 import hills from "../../../src/canvas/screen/glyphs/hills.svg";
 export const GLYPHS = {
-    header,
-    button,
-    input,
-    image,
-    list,
-    modal,
-    up,
-    down,
-    close,
-    plus,
-    hills
+	header,
+	button,
+	input,
+	image,
+	list,
+	modal,
+	up,
+	down,
+	close,
+	plus,
+	hills
 };

package/dist/canvas/screen/labels.js

@@ -1,24 +1,24 @@
 export const DEFAULT_SCREEN_LABELS = {
-    name: "Screen",
-    mode: "Mode",
-    modes: {
-        wireframe: "Wireframe",
-        mockup: "Mockup"
-    },
-    kinds: {
-        header: "Header",
-        button: "Button",
-        input: "Input",
-        image: "Image",
-        list: "List",
-        modal: "Modal"
-    },
-    addPart: "Add part",
-    moveUp: "Move up",
-    moveDown: "Move down",
-    remove: "Remove",
-    primary: "Primary",
-    secondary: "Secondary",
-    addItem: "Add item",
-    removeItem: "Remove item"
+	name: "Screen",
+	mode: "Mode",
+	modes: {
+		wireframe: "Wireframe",
+		mockup: "Mockup"
+	},
+	kinds: {
+		header: "Header",
+		button: "Button",
+		input: "Input",
+		image: "Image",
+		list: "List",
+		modal: "Modal"
+	},
+	addPart: "Add part",
+	moveUp: "Move up",
+	moveDown: "Move down",
+	remove: "Remove",
+	primary: "Primary",
+	secondary: "Secondary",
+	addItem: "Add item",
+	removeItem: "Remove item"
 };