@heyramzi/ui 2.11.0 → 2.11.2

package/dist/canvas/pen/pen-session.js

@@ -1,3 +1,5 @@
+// One pen gesture, pointer down to up, in flow coordinates. It talks to the
+// editor through a host, so the overlay stays thin.
 import { strokesAlong } from "./eraser.js";
 import { buildStrokeNode } from "./geometry.js";
 import { addPenNode, removePenNode } from "./ops.js";
@@ -5,167 +7,156 @@ import { buildShapeNode, buildTextNode, dragBox } from "./shapes.js";
 import { strokePath } from "./stroke-path.js";
 import { PEN_DEFAULTS } from "./types.js";
 const ERASER_RADIUS = 10;
+/** Samples closer than this, in screen pixels, add nothing to a stroke. */
 const MIN_SAMPLE = 1;
 function isShapeTool(tool) {
-    return tool === "rectangle" || tool === "ellipse" || tool === "diamond";
+	return tool === "rectangle" || tool === "ellipse" || tool === "diamond";
 }
 export function createPenSession(host, getSettings) {
-    let endGesture = null;
-    let start = null;
-    let last = null;
-    let samples = [];
-    const erased = new Set();
-    function settingsNow() {
-        const settings = getSettings();
-        const fallback = settings.tool === "highlighter" ? PEN_DEFAULTS.highlighter.size : PEN_DEFAULTS.pen.size;
-        return {
-            ...settings,
-            size: settings.size ?? fallback
-        };
-    }
-    function reset() {
-        endGesture = null;
-        start = null;
-        last = null;
-        samples = [];
-        erased.clear();
-        host.onPreview?.(null);
-    }
-    function erase(from, to, radius) {
-        const remaining = host.getNodes().filter((node)=>!erased.has(node.id));
-        const ids = strokesAlong(remaining, from, to, radius);
-        if (ids.length === 0) return;
-        for (const id of ids)erased.add(id);
-        host.commit(ids.map(removePenNode));
-    }
-    function placeText(at, color) {
-        const op = addPenNode(buildTextNode(at, {
-            color
-        }));
-        host.commit([
-            op
-        ]);
-        if (op.kind === "addNode" && op.node.id) host.onTextPlaced?.(op.node.id);
-    }
-    function sampleOf(at, pressure) {
-        return pressure === undefined ? [
-            at.x,
-            at.y
-        ] : [
-            at.x,
-            at.y,
-            pressure
-        ];
-    }
-    function previewStroke(pointerDown) {
-        const { tool, color, size } = settingsNow();
-        if (tool !== "pen" && tool !== "highlighter") return;
-        const hasPressure = samples.some((point)=>point[2] !== undefined);
-        const d = strokePath(samples, {
-            size,
-            tool,
-            simulatePressure: !hasPressure
-        }, !pointerDown);
-        host.onPreview?.({
-            kind: "stroke",
-            d,
-            color,
-            tool
-        });
-    }
-    return {
-        get active () {
-            return start !== null;
-        },
-        down (at, pressure) {
-            if (start) return;
-            const { tool, color, zoom } = settingsNow();
-            if (tool === "text") {
-                placeText(at, color);
-                return;
-            }
-            endGesture = host.startGesture();
-            start = at;
-            last = at;
-            if (tool === "eraser") {
-                const radius = ERASER_RADIUS / zoom;
-                host.onPreview?.({
-                    kind: "eraser",
-                    at,
-                    radius
-                });
-                erase(at, at, radius);
-                return;
-            }
-            if (tool === "pen" || tool === "highlighter") {
-                samples = [
-                    sampleOf(at, pressure)
-                ];
-                previewStroke(true);
-            }
-        },
-        move (at, pressure) {
-            if (!start || !last) return;
-            const { tool, color, zoom } = settingsNow();
-            if (tool === "eraser") {
-                const radius = ERASER_RADIUS / zoom;
-                host.onPreview?.({
-                    kind: "eraser",
-                    at,
-                    radius
-                });
-                erase(last, at, radius);
-                last = at;
-                return;
-            }
-            if (isShapeTool(tool)) {
-                host.onPreview?.({
-                    kind: "shape",
-                    shape: tool,
-                    box: dragBox(start, at),
-                    color
-                });
-                last = at;
-                return;
-            }
-            if (Math.hypot(at.x - last.x, at.y - last.y) * zoom < MIN_SAMPLE) return;
-            samples.push(sampleOf(at, pressure));
-            last = at;
-            previewStroke(true);
-        },
-        up (at, options = {}) {
-            if (!start || !endGesture) return;
-            const { tool, color, size, zoom } = settingsNow();
-            const close = endGesture;
-            try {
-                if (tool === "pen" || tool === "highlighter") {
-                    const node = buildStrokeNode(samples, {
-                        color,
-                        size,
-                        tool,
-                        zoom
-                    });
-                    if (node) host.commit([
-                        addPenNode(node)
-                    ]);
-                } else if (isShapeTool(tool)) {
-                    const box = dragBox(start, at, options.square);
-                    host.commit([
-                        addPenNode(buildShapeNode(tool, box, {
-                            color
-                        }))
-                    ]);
-                }
-            } finally{
-                close();
-                reset();
-            }
-        },
-        cancel () {
-            if (!endGesture) return;
-            const close = endGesture;
-            close();
-            reset();
-        }
-    };
+	let endGesture = null;
+	let start = null;
+	let last = null;
+	let samples = [];
+	const erased = new Set();
+	function settingsNow() {
+		const settings = getSettings();
+		const fallback = settings.tool === "highlighter" ? PEN_DEFAULTS.highlighter.size : PEN_DEFAULTS.pen.size;
+		return {
+			...settings,
+			size: settings.size ?? fallback
+		};
+	}
+	function reset() {
+		endGesture = null;
+		start = null;
+		last = null;
+		samples = [];
+		erased.clear();
+		host.onPreview?.(null);
+	}
+	function erase(from, to, radius) {
+		const remaining = host.getNodes().filter((node) => !erased.has(node.id));
+		const ids = strokesAlong(remaining, from, to, radius);
+		if (ids.length === 0) return;
+		for (const id of ids) erased.add(id);
+		host.commit(ids.map(removePenNode));
+	}
+	function placeText(at, color) {
+		const op = addPenNode(buildTextNode(at, { color }));
+		host.commit([op]);
+		if (op.kind === "addNode" && op.node.id) host.onTextPlaced?.(op.node.id);
+	}
+	function sampleOf(at, pressure) {
+		return pressure === undefined ? [at.x, at.y] : [
+			at.x,
+			at.y,
+			pressure
+		];
+	}
+	function previewStroke(pointerDown) {
+		const { tool, color, size } = settingsNow();
+		if (tool !== "pen" && tool !== "highlighter") return;
+		const hasPressure = samples.some((point) => point[2] !== undefined);
+		const d = strokePath(samples, {
+			size,
+			tool,
+			simulatePressure: !hasPressure
+		}, !pointerDown);
+		host.onPreview?.({
+			kind: "stroke",
+			d,
+			color,
+			tool
+		});
+	}
+	return {
+		/** True while a gesture is open, so the overlay knows to keep capturing. */
+		get active() {
+			return start !== null;
+		},
+		down(at, pressure) {
+			if (start) return;
+			const { tool, color, zoom } = settingsNow();
+			if (tool === "text") {
+				placeText(at, color);
+				return;
+			}
+			endGesture = host.startGesture();
+			start = at;
+			last = at;
+			if (tool === "eraser") {
+				const radius = ERASER_RADIUS / zoom;
+				host.onPreview?.({
+					kind: "eraser",
+					at,
+					radius
+				});
+				erase(at, at, radius);
+				return;
+			}
+			if (tool === "pen" || tool === "highlighter") {
+				samples = [sampleOf(at, pressure)];
+				previewStroke(true);
+			}
+		},
+		move(at, pressure) {
+			if (!start || !last) return;
+			const { tool, color, zoom } = settingsNow();
+			if (tool === "eraser") {
+				const radius = ERASER_RADIUS / zoom;
+				host.onPreview?.({
+					kind: "eraser",
+					at,
+					radius
+				});
+				erase(last, at, radius);
+				last = at;
+				return;
+			}
+			if (isShapeTool(tool)) {
+				host.onPreview?.({
+					kind: "shape",
+					shape: tool,
+					box: dragBox(start, at),
+					color
+				});
+				last = at;
+				return;
+			}
+			if (Math.hypot(at.x - last.x, at.y - last.y) * zoom < MIN_SAMPLE) return;
+			samples.push(sampleOf(at, pressure));
+			last = at;
+			previewStroke(true);
+		},
+		/** Pointer up. Writes the node, then closes the gesture so it's one undo step. */
+		up(at, options = {}) {
+			if (!start || !endGesture) return;
+			const { tool, color, size, zoom } = settingsNow();
+			const close = endGesture;
+			try {
+				if (tool === "pen" || tool === "highlighter") {
+					const node = buildStrokeNode(samples, {
+						color,
+						size,
+						tool,
+						zoom
+					});
+					if (node) host.commit([addPenNode(node)]);
+				} else if (isShapeTool(tool)) {
+					const box = dragBox(start, at, options.square);
+					host.commit([addPenNode(buildShapeNode(tool, box, { color }))]);
+				}
+			} finally {
+				close();
+				reset();
+			}
+		},
+		/** Escape or a lost pointer. Whatever the eraser already removed stays removed. */
+		cancel() {
+			if (!endGesture) return;
+			const close = endGesture;
+			close();
+			reset();
+		}
+	};
 }

package/dist/canvas/pen/plugin.js

@@ -1,129 +1,132 @@
+// The pen's node kinds and ops, with no DOM, so the CLI can add strokes.
+// ui.ts adds the renderers.
 import { z } from "zod";
 import { CanvasOpError } from "../ops/ops.js";
 import { definePlugin } from "../plugin.js";
 import { buildStrokeNode } from "./geometry.js";
 import { buildShapeNode, buildTextNode } from "./shapes.js";
 import { PEN_COLORS, SHAPE_KINDS, SHAPE_NODE, STROKE_NODE, TEXT_NODE } from "./types.js";
+// =========================
+// SCHEMAS
+// =========================
 const colorSchema = z.enum(PEN_COLORS);
 const pointSchema = z.object({
-    x: z.number(),
-    y: z.number()
+	x: z.number(),
+	y: z.number()
 });
-const MAX_POINTS = 5000;
+/** A board holds a few thousand strokes at most, and one stroke past this is a scribble pasted from a file. */
+const MAX_POINTS = 5e3;
 const addStrokeOp = z.object({
-    kind: z.literal("addStroke"),
-    id: z.string().min(1).optional(),
-    points: z.array(z.tuple([
-        z.number(),
-        z.number()
-    ]).rest(z.number())).min(1).max(MAX_POINTS),
-    color: colorSchema.optional(),
-    size: z.number().positive().optional(),
-    tool: z.enum([
-        "pen",
-        "highlighter"
-    ]).optional()
+	kind: z.literal("addStroke"),
+	id: z.string().min(1).optional(),
+	/** Flow coordinates, x then y then an optional 0 to 1 pressure. Simplified on the way in. */
+	points: z.array(z.tuple([z.number(), z.number()]).rest(z.number())).min(1).max(MAX_POINTS),
+	color: colorSchema.optional(),
+	size: z.number().positive().optional(),
+	tool: z.enum(["pen", "highlighter"]).optional()
 });
 const addTextOp = z.object({
-    kind: z.literal("addText"),
-    id: z.string().min(1).optional(),
-    at: pointSchema,
-    text: z.string(),
-    color: colorSchema.optional(),
-    fontSize: z.number().positive().optional()
+	kind: z.literal("addText"),
+	id: z.string().min(1).optional(),
+	at: pointSchema,
+	text: z.string(),
+	color: colorSchema.optional(),
+	fontSize: z.number().positive().optional()
 });
 const addShapeOp = z.object({
-    kind: z.literal("addShape"),
-    id: z.string().min(1).optional(),
-    shape: z.enum(SHAPE_KINDS),
-    box: z.object({
-        x: z.number(),
-        y: z.number(),
-        width: z.number().nonnegative(),
-        height: z.number().nonnegative()
-    }),
-    color: colorSchema.optional(),
-    filled: z.boolean().optional(),
-    label: z.string().optional()
+	kind: z.literal("addShape"),
+	id: z.string().min(1).optional(),
+	shape: z.enum(SHAPE_KINDS),
+	box: z.object({
+		x: z.number(),
+		y: z.number(),
+		width: z.number().nonnegative(),
+		height: z.number().nonnegative()
+	}),
+	color: colorSchema.optional(),
+	filled: z.boolean().optional(),
+	label: z.string().optional()
 });
+// =========================
+// HANDLERS
+// =========================
 function appendNode(state, node, opIndex) {
-    const id = node.id ?? crypto.randomUUID();
-    if (state.nodes.some((existing)=>existing.id === id)) {
-        throw new CanvasOpError(`Node id already exists: ${id}`, opIndex);
-    }
-    state.nodes = [
-        ...state.nodes,
-        {
-            ...node,
-            id
-        }
-    ];
+	const id = node.id ?? crypto.randomUUID();
+	if (state.nodes.some((existing) => existing.id === id)) {
+		throw new CanvasOpError(`Node id already exists: ${id}`, opIndex);
+	}
+	state.nodes = [...state.nodes, {
+		...node,
+		id
+	}];
 }
 function applyAddStroke(state, op, opIndex) {
-    const node = buildStrokeNode(op.points, {
-        id: op.id,
-        color: op.color,
-        size: op.size,
-        tool: op.tool
-    });
-    if (!node) throw new CanvasOpError("addStroke needs at least one point", opIndex);
-    appendNode(state, node, opIndex);
+	const node = buildStrokeNode(op.points, {
+		id: op.id,
+		color: op.color,
+		size: op.size,
+		tool: op.tool
+	});
+	if (!node) throw new CanvasOpError("addStroke needs at least one point", opIndex);
+	appendNode(state, node, opIndex);
 }
 function applyAddText(state, op, opIndex) {
-    appendNode(state, buildTextNode(op.at, {
-        id: op.id,
-        text: op.text,
-        color: op.color,
-        fontSize: op.fontSize
-    }), opIndex);
+	appendNode(state, buildTextNode(op.at, {
+		id: op.id,
+		text: op.text,
+		color: op.color,
+		fontSize: op.fontSize
+	}), opIndex);
 }
 function applyAddShape(state, op, opIndex) {
-    appendNode(state, buildShapeNode(op.shape, op.box, {
-        id: op.id,
-        color: op.color,
-        filled: op.filled,
-        label: op.label
-    }), opIndex);
+	appendNode(state, buildShapeNode(op.shape, op.box, {
+		id: op.id,
+		color: op.color,
+		filled: op.filled,
+		label: op.label
+	}), opIndex);
 }
+// =========================
+// PLUGIN
+// =========================
+/** No `palette` on any kind: the tool bar's pen tools create these, not the card palette. */
 export const penPlugin = definePlugin({
-    id: "pen",
-    nodes: [
-        {
-            type: STROKE_NODE,
-            label: "Stroke"
-        },
-        {
-            type: TEXT_NODE,
-            label: "Text",
-            sizing: "content-sized",
-            size: {
-                width: 120
-            }
-        },
-        {
-            type: SHAPE_NODE,
-            label: "Shape",
-            size: {
-                width: 160,
-                height: 100
-            }
-        }
-    ],
-    ops: [
-        {
-            kind: "addStroke",
-            schema: addStrokeOp,
-            apply: applyAddStroke
-        },
-        {
-            kind: "addText",
-            schema: addTextOp,
-            apply: applyAddText
-        },
-        {
-            kind: "addShape",
-            schema: addShapeOp,
-            apply: applyAddShape
-        }
-    ]
+	id: "pen",
+	nodes: [
+		{
+			type: STROKE_NODE,
+			label: "Stroke"
+		},
+		{
+			type: TEXT_NODE,
+			label: "Text",
+			sizing: "content-sized",
+			size: { width: 120 }
+		},
+		{
+			type: SHAPE_NODE,
+			label: "Shape",
+			size: {
+				width: 160,
+				height: 100
+			}
+		}
+	],
+	ops: [
+		{
+			kind: "addStroke",
+			schema: addStrokeOp,
+			apply: applyAddStroke
+		},
+		{
+			kind: "addText",
+			schema: addTextOp,
+			apply: applyAddText
+		},
+		{
+			kind: "addShape",
+			schema: addShapeOp,
+			apply: applyAddShape
+		}
+	]
 });