@svelteframe/shapes 0.0.0-stage → 0.0.1

package/dist/connect.js

@@ -0,0 +1,139 @@
+import { anchorPoint, invertMatrix, shapeMatrix, transformPoint, transformVector } from './geometry.js';
+/** The names an anchor can have, as written after the dot in `"card.bottom"`. */
+export const ANCHORS = ['top-left', 'top', 'top-right', 'left', 'center', 'right', 'bottom-left', 'bottom', 'bottom-right'];
+function checkAnchor(anchor, where) {
+    if (!ANCHORS.includes(anchor)) {
+        throw new Error(`Unknown anchor "${anchor}" in ${where}. Anchors are: ${ANCHORS.join(', ')}`);
+    }
+    return anchor;
+}
+/** Read what `from` or `to` was given as. */
+export function parseEnd(end) {
+    if (Array.isArray(end)) {
+        const [x, y] = end;
+        if (!Number.isFinite(x) || !Number.isFinite(y))
+            throw new Error(`A point must be two finite numbers, got [${x}, ${y}]`);
+        return { kind: 'point', point: [x, y] };
+    }
+    if (typeof end === 'string') {
+        const dot = end.indexOf('.');
+        const id = dot < 0 ? end : end.slice(0, dot);
+        if (id === '')
+            throw new Error(`"${end}" does not name a shape`);
+        return { kind: 'shape', id, anchor: dot < 0 ? undefined : checkAnchor(end.slice(dot + 1), `"${end}"`), dx: 0, dy: 0 };
+    }
+    if (typeof end === 'object' && end !== null && typeof end.id === 'string') {
+        const { id, anchor, dx = 0, dy = 0 } = end;
+        if (id === '' || id.includes('.'))
+            throw new Error(`"${id}" is not a shape id`);
+        if (!Number.isFinite(dx) || !Number.isFinite(dy))
+            throw new Error('dx and dy must be finite numbers');
+        return { kind: 'shape', id, anchor: anchor === undefined ? undefined : checkAnchor(anchor, `the end of "${id}"`), dx, dy };
+    }
+    throw new Error('An end must be a point [x, y], an id like "card" or "card.bottom", or { id, anchor?, dx?, dy? }');
+}
+/** The ids a shape can be found by must not contain a dot, which separates the anchor. */
+export function assertShapeId(id) {
+    if (id === '' || /[.\s]/.test(id))
+        throw new Error(`Invalid shape id "${id}": it must not be empty or contain dots or spaces`);
+}
+const matrixOf = (shape) => shapeMatrix({ ...shape.placement, width: shape.width, height: shape.height });
+/** A point of the shape's box, on the canvas. */
+export function shapeAnchorPoint(shape, anchor) {
+    return transformPoint(matrixOf(shape), anchorPoint(anchor, shape.width, shape.height));
+}
+/**
+ * How far along `direction` (from the centre) the outline is, as a multiple of `direction`.
+ * `direction` is in the shape's own coordinates, which are centred on `(width / 2, height / 2)`.
+ */
+function distanceToOutline(shape, direction) {
+    const [dx, dy] = direction;
+    const halfWidth = shape.width / 2;
+    const halfHeight = shape.height / 2;
+    switch (shape.outline.kind) {
+        case 'box': {
+            const tx = dx === 0 ? Infinity : halfWidth / Math.abs(dx);
+            const ty = dy === 0 ? Infinity : halfHeight / Math.abs(dy);
+            return Math.min(tx, ty);
+        }
+        case 'ellipse': {
+            const k = Math.hypot(dx / halfWidth, dy / halfHeight);
+            return k === 0 ? Infinity : 1 / k;
+        }
+        case 'polygon': {
+            const { points } = shape.outline;
+            const centre = [halfWidth, halfHeight];
+            let best = Infinity;
+            for (let i = 0; i < points.length; i++) {
+                const a = points[i];
+                const b = points[(i + 1) % points.length];
+                // Where the ray centre + t * direction meets the edge a + u * (b - a).
+                const ex = b[0] - a[0];
+                const ey = b[1] - a[1];
+                const denominator = dx * ey - dy * ex;
+                if (Math.abs(denominator) < 1e-12)
+                    continue;
+                const qx = a[0] - centre[0];
+                const qy = a[1] - centre[1];
+                const t = (qx * ey - qy * ex) / denominator;
+                const u = (qx * dy - qy * dx) / denominator;
+                if (t > 0 && u >= -1e-9 && u <= 1 + 1e-9)
+                    best = Math.min(best, t);
+            }
+            return best;
+        }
+    }
+}
+/**
+ * Where the line from the centre of `shape` towards `target` leaves its outline. When the target
+ * is inside the shape there is no edge to meet, and the centre is returned.
+ */
+export function boundaryToward(shape, target) {
+    const matrix = matrixOf(shape);
+    const centre = transformPoint(matrix, [shape.width / 2, shape.height / 2]);
+    const inverse = invertMatrix(matrix);
+    if (!inverse)
+        return centre;
+    const direction = transformVector(inverse, [target[0] - centre[0], target[1] - centre[1]]);
+    if (direction[0] === 0 && direction[1] === 0)
+        return centre;
+    const t = distanceToOutline(shape, direction);
+    // Past the target (it is inside the shape), or no edge found.
+    if (!Number.isFinite(t) || t >= 1)
+        return centre;
+    return transformPoint(matrix, [shape.width / 2 + direction[0] * t, shape.height / 2 + direction[1] * t]);
+}
+/** Turn the `from` and `to` of a line into points on the canvas. */
+export function resolveEnds(from, to, { find, gap = 0 }) {
+    if (!Number.isFinite(gap) || gap < 0)
+        throw new Error(`gap must be 0 or more, got ${gap}`);
+    const ends = [parseEnd(from), parseEnd(to)];
+    const shapes = ends.map((end) => (end.kind === 'shape' ? find(end.id) : undefined));
+    const missing = ends.flatMap((end, i) => (end.kind === 'shape' && !shapes[i] ? [end.id] : []));
+    if (missing.length > 0)
+        return { missing: [...new Set(missing)] };
+    // Where each end points to when the other end looks for its edge: the point itself, the
+    // chosen anchor of a shape, or the centre of one.
+    const reference = ends.map((end, i) => end.kind === 'point' ? end.point : shapeAnchorPoint(shapes[i], end.anchor ?? 'center'));
+    const resolved = ends.map((end, i) => {
+        if (end.kind === 'point')
+            return end.point;
+        const point = end.anchor === undefined ? boundaryToward(shapes[i], reference[1 - i]) : reference[i];
+        return [point[0] + end.dx, point[1] + end.dy];
+    });
+    if (gap > 0) {
+        const length = Math.hypot(resolved[1][0] - resolved[0][0], resolved[1][1] - resolved[0][1]);
+        if (length > 0) {
+            const ux = (resolved[1][0] - resolved[0][0]) / length;
+            const uy = (resolved[1][1] - resolved[0][1]) / length;
+            const attached = ends.map((end) => end.kind === 'shape');
+            const startGap = attached[0] ? gap : 0;
+            const endGap = attached[1] ? gap : 0;
+            // Never let the ends pass each other.
+            const room = Math.min(1, length / (startGap + endGap || 1));
+            resolved[0] = [resolved[0][0] + ux * startGap * room, resolved[0][1] + uy * startGap * room];
+            resolved[1] = [resolved[1][0] - ux * endGap * room, resolved[1][1] - uy * endGap * room];
+        }
+    }
+    return { points: resolved, missing: [] };
+}

package/dist/ends.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type End } from './connect.js';
+import type { Point } from './geometry.js';
+/**
+ * The two ends of a line or arrow on the canvas, following the shapes they are attached to.
+ * Call while a component is created. `ends.points` is `undefined` until every shape they name
+ * exists; one that never does fails the render, naming it and the ids there are.
+ */
+export declare function useEnds(component: string, from: () => End, to: () => End, gap: () => number | undefined): {
+    readonly points: readonly [Point, Point] | undefined;
+};

package/dist/ends.svelte.js

@@ -0,0 +1,40 @@
+import { delayRender, failRender } from '@svelteframe/core';
+import { useCanvas } from './registry.svelte.js';
+import { parseEnd, resolveEnds } from './connect.js';
+/**
+ * The two ends of a line or arrow on the canvas, following the shapes they are attached to.
+ * Call while a component is created. `ends.points` is `undefined` until every shape they name
+ * exists; one that never does fails the render, naming it and the ids there are.
+ */
+export function useEnds(component, from, to, gap) {
+    const canvas = useCanvas();
+    const resolved = $derived.by(() => {
+        const [a, b] = [from(), to()];
+        if (!canvas) {
+            // Without a canvas there are no shapes to find, only points.
+            for (const end of [a, b]) {
+                const parsed = parseEnd(end);
+                if (parsed.kind === 'shape') {
+                    throw new Error(`<${component}> is attached to "${parsed.id}", which needs a <Canvas> around them to be found`);
+                }
+            }
+        }
+        return resolveEnds(a, b, { find: canvas?.find ?? (() => undefined), gap: gap() });
+    });
+    // Checked after the whole canvas is created, so a shape may come after the arrow in the markup.
+    $effect(() => {
+        const { missing } = resolved;
+        if (missing.length === 0)
+            return;
+        const known = canvas?.ids ?? [];
+        const names = missing.map((id) => `"${id}"`).join(', ');
+        const handle = delayRender(`<${component}> shapes`);
+        failRender(handle, new Error(`<${component}> is attached to ${names}, but no shape has ${missing.length === 1 ? 'that id' : 'those ids'}. ` +
+            (known.length > 0 ? `Shapes with an id: ${known.join(', ')}.` : 'No shape has an id: give one with the id prop.')));
+    });
+    return {
+        get points() {
+            return resolved.points;
+        }
+    };
+}

package/dist/geometry.d.ts

@@ -0,0 +1,102 @@
+/** A position in a shape's own coordinates, or on a `<Canvas>` (composition pixels, origin top-left). */
+export type Point = readonly [x: number, y: number];
+/** A point of a shape's box: where `x`/`y` put it, or what it rotates and scales around. */
+export type Anchor = 'top-left' | 'top' | 'top-right' | 'left' | 'center' | 'right' | 'bottom-left' | 'bottom' | 'bottom-right';
+/** Round away floating point noise, so the same input always prints the same attribute. */
+export declare const round: (value: number) => number;
+/** Where `anchor` is in a box of this size, measured from the box's top-left corner. */
+export declare function anchorPoint(anchor: Anchor | Point, width: number, height: number): Point;
+export interface TransformOptions {
+    /** Where the anchor point goes. */
+    x?: number;
+    y?: number;
+    width: number;
+    height: number;
+    /** Which point of the box goes to `x`/`y`. */
+    anchor?: Anchor | Point;
+    /** Degrees, clockwise. */
+    rotate?: number;
+    /** One factor, or one for each direction. */
+    scale?: number | readonly [x: number, y: number];
+    /** What `rotate` and `scale` are around. */
+    origin?: Anchor | Point;
+}
+/**
+ * The SVG `transform` that puts a shape's box where it belongs: the `anchor` point at `x`/`y`,
+ * then rotated and scaled around `origin`. Empty when the shape is where it is drawn.
+ */
+export declare function shapeTransform({ x, y, width, height, anchor, rotate, scale, origin }: TransformOptions): string;
+/** The vertices as an SVG `points` attribute. */
+export declare const pointsAttribute: (points: readonly Point[]) => string;
+/**
+ * A regular polygon with a vertex pointing up, in a `2 * radius` box centred at `(radius, radius)`,
+ * so the box's centre is the polygon's centre.
+ */
+export declare function regularPolygon(sides: number, radius: number): Point[];
+/** A star with a point up, in a `2 * outerRadius` box centred at `(outerRadius, outerRadius)`. */
+export declare function star(points: number, outerRadius: number, innerRadius: number): Point[];
+export declare function assertSize(name: string, value: number): void;
+/** The point `t` of the way from `a` to `b`. */
+export declare const lerpPoint: (a: Point, b: Point, t: number) => Point;
+/** The smallest box around the points: its top-left corner and its size. */
+export declare function boundsOf(points: readonly Point[]): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+/** `progress` limited to 0..1; anything that is not a number is an error. */
+export declare function clampProgress(progress: number): number;
+export type ArrowHeads = 'end' | 'start' | 'both' | 'none';
+export interface ArrowOptions {
+    /** How much of the arrow is drawn, from `from` towards `to`. */
+    progress?: number;
+    strokeWidth: number;
+    /** Length of a head along the line. Defaults to 4 times the stroke width. */
+    headLength?: number;
+    /** Width of a head across the line. Defaults to 0.8 times its length. */
+    headWidth?: number;
+    heads?: ArrowHeads;
+}
+export interface ArrowGeometry {
+    /** The visible part of the shaft, ending where its heads begin. `undefined` when nothing is drawn. */
+    shaft?: readonly [Point, Point];
+    /** Each head as a triangle: tip first. */
+    heads: Point[][];
+}
+/**
+ * The parts of an arrow from `from` to `to`. A head sits on the end of what is drawn so far, and is
+ * shortened to fit while the arrow is still short, so an arrow can grow from nothing.
+ */
+export declare function arrowGeometry(from: Point, to: Point, options: ArrowOptions): ArrowGeometry;
+export interface PaintOptions {
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    strokeLinecap?: 'butt' | 'round' | 'square';
+    strokeLinejoin?: 'miter' | 'round' | 'bevel';
+    opacity?: number;
+    /** How much of the outline is drawn, 0 to 1, from where it starts. */
+    progress?: number;
+}
+/**
+ * The presentation attributes for a shape's element. Left out when not given, so SVG's own
+ * defaults apply. `progress` draws only the first part of the outline: the element must then have
+ * `pathLength="1"`, which `needsPathLength` tells.
+ */
+export declare function paintAttributes({ progress, ...paint }: PaintOptions): Record<string, string | number>;
+/** Whether `paintAttributes` drew only part of the outline, which needs `pathLength="1"`. */
+export declare const needsPathLength: (progress: number | undefined) => boolean;
+/** An affine transform `[a, b, c, d, e, f]`, as in SVG's `matrix(a b c d e f)`. */
+export type Matrix = readonly [number, number, number, number, number, number];
+/**
+ * What `shapeTransform` stands for, as a matrix: it takes a point of the shape, in the shape's own
+ * coordinates, to its place on the canvas.
+ */
+export declare function shapeMatrix(options: TransformOptions): Matrix;
+export declare const identity: () => Matrix;
+export declare const transformPoint: ([a, b, c, d, e, f]: Matrix, [x, y]: Point) => Point;
+/** Apply only the rotation and scale: for directions, which have no position. */
+export declare const transformVector: ([a, b, c, d]: Matrix, [x, y]: Point) => Point;
+/** The matrix that undoes `matrix`, or `undefined` when it squashes the plane flat (a scale of 0). */
+export declare function invertMatrix([a, b, c, d, e, f]: Matrix): Matrix | undefined;

package/dist/geometry.js

@@ -0,0 +1,227 @@
+/** Round away floating point noise, so the same input always prints the same attribute. */
+export const round = (value) => Math.round(value * 1e4) / 1e4;
+const FRACTIONS = {
+    'top-left': [0, 0],
+    top: [0.5, 0],
+    'top-right': [1, 0],
+    left: [0, 0.5],
+    center: [0.5, 0.5],
+    right: [1, 0.5],
+    'bottom-left': [0, 1],
+    bottom: [0.5, 1],
+    'bottom-right': [1, 1]
+};
+/** Where `anchor` is in a box of this size, measured from the box's top-left corner. */
+export function anchorPoint(anchor, width, height) {
+    if (typeof anchor !== 'string')
+        return anchor;
+    const fraction = FRACTIONS[anchor];
+    if (!fraction)
+        throw new Error(`Unknown anchor "${anchor}"`);
+    return [width * fraction[0], height * fraction[1]];
+}
+/**
+ * The SVG `transform` that puts a shape's box where it belongs: the `anchor` point at `x`/`y`,
+ * then rotated and scaled around `origin`. Empty when the shape is where it is drawn.
+ */
+export function shapeTransform({ x = 0, y = 0, width, height, anchor = 'top-left', rotate = 0, scale = 1, origin = 'center' }) {
+    for (const [name, value] of [['x', x], ['y', y], ['rotate', rotate]]) {
+        if (!Number.isFinite(value))
+            throw new Error(`${name} must be a finite number, got ${value}`);
+    }
+    const [sx, sy] = typeof scale === 'number' ? [scale, scale] : scale;
+    if (!Number.isFinite(sx) || !Number.isFinite(sy))
+        throw new Error(`scale must be finite, got ${scale}`);
+    const [ax, ay] = anchorPoint(anchor, width, height);
+    const [ox, oy] = anchorPoint(origin, width, height);
+    const parts = [];
+    const tx = x - ax;
+    const ty = y - ay;
+    if (tx !== 0 || ty !== 0)
+        parts.push(`translate(${round(tx)} ${round(ty)})`);
+    if (rotate !== 0 || sx !== 1 || sy !== 1) {
+        parts.push(`translate(${round(ox)} ${round(oy)})`);
+        if (rotate !== 0)
+            parts.push(`rotate(${round(rotate)})`);
+        if (sx !== 1 || sy !== 1)
+            parts.push(`scale(${round(sx)} ${round(sy)})`);
+        parts.push(`translate(${round(-ox)} ${round(-oy)})`);
+    }
+    return parts.join(' ');
+}
+/** The vertices as an SVG `points` attribute. */
+export const pointsAttribute = (points) => points.map(([x, y]) => `${round(x)},${round(y)}`).join(' ');
+/**
+ * A regular polygon with a vertex pointing up, in a `2 * radius` box centred at `(radius, radius)`,
+ * so the box's centre is the polygon's centre.
+ */
+export function regularPolygon(sides, radius) {
+    if (!Number.isInteger(sides) || sides < 3)
+        throw new Error(`A polygon needs 3 or more sides, got ${sides}`);
+    assertSize('radius', radius);
+    return Array.from({ length: sides }, (_, i) => {
+        const angle = (-90 + (360 * i) / sides) * (Math.PI / 180);
+        return [radius + radius * Math.cos(angle), radius + radius * Math.sin(angle)];
+    });
+}
+/** A star with a point up, in a `2 * outerRadius` box centred at `(outerRadius, outerRadius)`. */
+export function star(points, outerRadius, innerRadius) {
+    if (!Number.isInteger(points) || points < 3)
+        throw new Error(`A star needs 3 or more points, got ${points}`);
+    assertSize('outerRadius', outerRadius);
+    assertSize('innerRadius', innerRadius);
+    return Array.from({ length: points * 2 }, (_, i) => {
+        const radius = i % 2 === 0 ? outerRadius : innerRadius;
+        const angle = (-90 + (180 * i) / points) * (Math.PI / 180);
+        return [outerRadius + radius * Math.cos(angle), outerRadius + radius * Math.sin(angle)];
+    });
+}
+export function assertSize(name, value) {
+    if (!Number.isFinite(value) || value < 0)
+        throw new Error(`${name} must be 0 or more, got ${value}`);
+}
+/** The point `t` of the way from `a` to `b`. */
+export const lerpPoint = (a, b, t) => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t];
+/** The smallest box around the points: its top-left corner and its size. */
+export function boundsOf(points) {
+    const xs = points.map((p) => p[0]);
+    const ys = points.map((p) => p[1]);
+    const x = Math.min(...xs);
+    const y = Math.min(...ys);
+    return { x, y, width: Math.max(...xs) - x, height: Math.max(...ys) - y };
+}
+/** `progress` limited to 0..1; anything that is not a number is an error. */
+export function clampProgress(progress) {
+    if (Number.isNaN(progress))
+        throw new Error('progress must be a number');
+    return Math.min(1, Math.max(0, progress));
+}
+/**
+ * The parts of an arrow from `from` to `to`. A head sits on the end of what is drawn so far, and is
+ * shortened to fit while the arrow is still short, so an arrow can grow from nothing.
+ */
+export function arrowGeometry(from, to, options) {
+    const { progress = 1, strokeWidth, heads: which = 'end' } = options;
+    assertSize('strokeWidth', strokeWidth);
+    const tip = lerpPoint(from, to, clampProgress(progress));
+    const dx = tip[0] - from[0];
+    const dy = tip[1] - from[1];
+    const length = Math.hypot(dx, dy);
+    if (length === 0)
+        return { heads: [] };
+    const wanted = options.headLength ?? strokeWidth * 4;
+    const wantedWidth = options.headWidth ?? wanted * 0.8;
+    assertSize('headLength', wanted);
+    assertSize('headWidth', wantedWidth);
+    const ux = dx / length;
+    const uy = dy / length;
+    const atStart = which === 'start' || which === 'both';
+    const atEnd = which === 'end' || which === 'both';
+    // Two heads may not be longer than the line between them.
+    const headLength = Math.min(wanted, length / (atStart && atEnd ? 2 : 1));
+    const headWidth = wanted === 0 ? 0 : wantedWidth * (headLength / wanted);
+    /** A head whose tip is `at`, pointing along `(dirX, dirY)`. */
+    const head = (at, dirX, dirY) => {
+        const base = [at[0] - dirX * headLength, at[1] - dirY * headLength];
+        const nx = -dirY * (headWidth / 2);
+        const ny = dirX * (headWidth / 2);
+        return [at, [base[0] + nx, base[1] + ny], [base[0] - nx, base[1] - ny]];
+    };
+    const heads = [];
+    let start = from;
+    let end = tip;
+    if (atStart) {
+        heads.push(head(from, -ux, -uy));
+        start = [from[0] + ux * headLength, from[1] + uy * headLength];
+    }
+    if (atEnd) {
+        heads.push(head(tip, ux, uy));
+        end = [tip[0] - ux * headLength, tip[1] - uy * headLength];
+    }
+    const shaftLength = Math.hypot(end[0] - start[0], end[1] - start[1]);
+    return { shaft: shaftLength > 1e-9 ? [start, end] : undefined, heads };
+}
+/**
+ * The presentation attributes for a shape's element. Left out when not given, so SVG's own
+ * defaults apply. `progress` draws only the first part of the outline: the element must then have
+ * `pathLength="1"`, which `needsPathLength` tells.
+ */
+export function paintAttributes({ progress, ...paint }) {
+    const attributes = {};
+    const set = (name, value) => {
+        if (value !== undefined)
+            attributes[name] = value;
+    };
+    set('fill', paint.fill);
+    set('stroke', paint.stroke);
+    set('stroke-width', paint.strokeWidth);
+    set('stroke-linecap', paint.strokeLinecap);
+    set('stroke-linejoin', paint.strokeLinejoin);
+    set('opacity', paint.opacity);
+    if (progress !== undefined) {
+        const p = clampProgress(progress);
+        if (p <= 0) {
+            // Nothing drawn yet; a round or square cap would still leave a dot.
+            attributes['stroke-dasharray'] = '0 1';
+            attributes['stroke-linecap'] = 'butt';
+        }
+        else if (p < 1)
+            attributes['stroke-dasharray'] = `${round(p)} 1`;
+    }
+    return attributes;
+}
+/** Whether `paintAttributes` drew only part of the outline, which needs `pathLength="1"`. */
+export const needsPathLength = (progress) => progress !== undefined && clampProgress(progress) < 1;
+const IDENTITY = [1, 0, 0, 1, 0, 0];
+/** The transform that does `second` first and then `first`. */
+function multiply(first, second) {
+    const [a1, b1, c1, d1, e1, f1] = first;
+    const [a2, b2, c2, d2, e2, f2] = second;
+    return [
+        a1 * a2 + c1 * b2,
+        b1 * a2 + d1 * b2,
+        a1 * c2 + c1 * d2,
+        b1 * c2 + d1 * d2,
+        a1 * e2 + c1 * f2 + e1,
+        b1 * e2 + d1 * f2 + f1
+    ];
+}
+const translation = (x, y) => [1, 0, 0, 1, x, y];
+/**
+ * What `shapeTransform` stands for, as a matrix: it takes a point of the shape, in the shape's own
+ * coordinates, to its place on the canvas.
+ */
+export function shapeMatrix(options) {
+    const { x = 0, y = 0, width, height, anchor = 'top-left', rotate = 0, scale = 1, origin = 'center' } = options;
+    // The same checks as the string version.
+    shapeTransform(options);
+    const [sx, sy] = typeof scale === 'number' ? [scale, scale] : scale;
+    const [ax, ay] = anchorPoint(anchor, width, height);
+    const [ox, oy] = anchorPoint(origin, width, height);
+    const angle = (rotate * Math.PI) / 180;
+    const cos = Math.cos(angle);
+    const sin = Math.sin(angle);
+    let matrix = translation(x - ax, y - ay);
+    matrix = multiply(matrix, translation(ox, oy));
+    matrix = multiply(matrix, [cos, sin, -sin, cos, 0, 0]);
+    matrix = multiply(matrix, [sx, 0, 0, sy, 0, 0]);
+    return multiply(matrix, translation(-ox, -oy));
+}
+export const identity = () => IDENTITY;
+export const transformPoint = ([a, b, c, d, e, f], [x, y]) => [a * x + c * y + e, b * x + d * y + f];
+/** Apply only the rotation and scale: for directions, which have no position. */
+export const transformVector = ([a, b, c, d], [x, y]) => [a * x + c * y, b * x + d * y];
+/** The matrix that undoes `matrix`, or `undefined` when it squashes the plane flat (a scale of 0). */
+export function invertMatrix([a, b, c, d, e, f]) {
+    const determinant = a * d - b * c;
+    if (Math.abs(determinant) < 1e-12)
+        return undefined;
+    return [
+        d / determinant,
+        -b / determinant,
+        -c / determinant,
+        a / determinant,
+        (c * f - d * e) / determinant,
+        (b * e - a * f) / determinant
+    ];
+}

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+export { default as Arrow } from './Arrow.svelte';
+export { default as Canvas } from './Canvas.svelte';
+export { default as Circle } from './Circle.svelte';
+export { default as Ellipse } from './Ellipse.svelte';
+export { default as Line } from './Line.svelte';
+export { default as Polygon } from './Polygon.svelte';
+export { default as Rect } from './Rect.svelte';
+export { default as Star } from './Star.svelte';
+export { default as Triangle } from './Triangle.svelte';
+export { ANCHORS, boundaryToward, parseEnd, resolveEnds, shapeAnchorPoint, type End, type Outline, type ResolvedEnds, type ShapeGeometry } from './connect.js';
+export { anchorPoint, arrowGeometry, regularPolygon, shapeTransform, star, type Anchor, type ArrowGeometry, type ArrowHeads, type ArrowOptions, type Point, type TransformOptions } from './geometry.js';
+export type { ShapeProps } from './types.js';

package/dist/index.js

@@ -0,0 +1,11 @@
+export { default as Arrow } from './Arrow.svelte';
+export { default as Canvas } from './Canvas.svelte';
+export { default as Circle } from './Circle.svelte';
+export { default as Ellipse } from './Ellipse.svelte';
+export { default as Line } from './Line.svelte';
+export { default as Polygon } from './Polygon.svelte';
+export { default as Rect } from './Rect.svelte';
+export { default as Star } from './Star.svelte';
+export { default as Triangle } from './Triangle.svelte';
+export { ANCHORS, boundaryToward, parseEnd, resolveEnds, shapeAnchorPoint } from './connect.js';
+export { anchorPoint, arrowGeometry, regularPolygon, shapeTransform, star } from './geometry.js';

package/dist/registry.svelte.d.ts

@@ -0,0 +1,20 @@
+import { type ShapeGeometry } from './connect.js';
+/**
+ * The shapes of a `<Canvas>` that have an `id`, so lines and arrows can attach to them. A shape is
+ * registered as soon as it is created, from its props alone, so an arrow is right on the first
+ * frame, wherever in the markup the shape is.
+ */
+export declare class Registry {
+    #private;
+    /** `geometry` is read again whenever what it reads changes, so a moving shape is followed. */
+    register(id: string, geometry: () => ShapeGeometry): void;
+    /** Forget a shape, unless another one has taken its id since. */
+    unregister(id: string, geometry: () => ShapeGeometry): void;
+    find: (id: string) => ShapeGeometry | undefined;
+    /** The ids there are now. */
+    get ids(): string[];
+}
+/** Provided by `<Canvas>`: shapes inside it are placed in composition pixels. */
+export declare function setCanvas(): Registry;
+/** The enclosing `<Canvas>`'s shapes, or `undefined` outside one. */
+export declare function useCanvas(): Registry | undefined;

package/dist/registry.svelte.js

@@ -0,0 +1,39 @@
+import { getContext, setContext } from 'svelte';
+import { SvelteMap } from 'svelte/reactivity';
+import { assertShapeId } from './connect.js';
+/**
+ * The shapes of a `<Canvas>` that have an `id`, so lines and arrows can attach to them. A shape is
+ * registered as soon as it is created, from its props alone, so an arrow is right on the first
+ * frame, wherever in the markup the shape is.
+ */
+export class Registry {
+    #shapes = new SvelteMap();
+    /** `geometry` is read again whenever what it reads changes, so a moving shape is followed. */
+    register(id, geometry) {
+        assertShapeId(id);
+        if (this.#shapes.has(id))
+            throw new Error(`Two shapes have the id "${id}": ids must be unique within a <Canvas>`);
+        this.#shapes.set(id, geometry);
+    }
+    /** Forget a shape, unless another one has taken its id since. */
+    unregister(id, geometry) {
+        if (this.#shapes.get(id) === geometry)
+            this.#shapes.delete(id);
+    }
+    find = (id) => this.#shapes.get(id)?.();
+    /** The ids there are now. */
+    get ids() {
+        return [...this.#shapes.keys()];
+    }
+}
+const CANVAS_KEY = Symbol('svelteframe.shapes.canvas');
+/** Provided by `<Canvas>`: shapes inside it are placed in composition pixels. */
+export function setCanvas() {
+    const registry = new Registry();
+    setContext(CANVAS_KEY, registry);
+    return registry;
+}
+/** The enclosing `<Canvas>`'s shapes, or `undefined` outside one. */
+export function useCanvas() {
+    return getContext(CANVAS_KEY);
+}

package/dist/types.d.ts

@@ -0,0 +1,33 @@
+import type { Anchor, Point } from './geometry.js';
+/** What every shape takes. */
+export interface ShapeProps {
+    /**
+     * A name that lines and arrows in the same `<Canvas>` can attach to, as `from="id"` or
+     * `from="id.bottom"`. Unique, without dots or spaces; read once.
+     */
+    id?: string;
+    /**
+     * In a `<Canvas>`, where the `anchor` of the shape goes, in composition pixels. Elsewhere the
+     * shape is an ordinary element and CSS places it, so these are ignored.
+     */
+    x?: number;
+    y?: number;
+    /** The point of the shape's box that `x`/`y` position. Defaults to the top-left corner. */
+    anchor?: Anchor | Point;
+    /** Degrees, clockwise. */
+    rotate?: number;
+    /** One factor, or one for each direction. */
+    scale?: number | readonly [x: number, y: number];
+    /** What `rotate` and `scale` are around. Defaults to the centre of the shape. */
+    origin?: Anchor | Point;
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    strokeLinecap?: 'butt' | 'round' | 'square';
+    strokeLinejoin?: 'miter' | 'round' | 'bevel';
+    opacity?: number;
+    /** Draw only this much of the outline, 0 to 1, as when a line draws itself. The fill is unaffected. */
+    progress?: number;
+    class?: string;
+    style?: string;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};