morphico 0.0.1 → 0.1.0

package/dist/types/geometry.d.ts

@@ -4,6 +4,14 @@ export declare const line: (fromX: number, fromY: number, toX: number, toY: numb
 export declare const arc: (centerX: number, centerY: number, radius: number, startAngle: number, endAngle: number) => Stroke;
 export declare const cubic: (startX: number, startY: number, control1X: number, control1Y: number, control2X: number, control2Y: number, endX: number, endY: number) => Stroke;
 export declare const pointOnCircle: (centerX: number, centerY: number, radius: number, angle: number) => Point;
+/** A full ellipse as four cubic quarters, drawn counter-clockwise on screen, starting at the top. */
+export declare const ellipse: (centerX: number, centerY: number, radiusX: number, radiusY: number) => Stroke[];
+/**
+ * A polyline whose corners are rounded: straight lines joined by tangent circle arcs.
+ * `radii[index]` rounds the corner at `points[index]` (a single number rounds every corner; 0 = sharp corner).
+ * Straight-through points and reversals (going back along the same line) always stay sharp.
+ */
+export declare const roundedPolyline: (points: Point[], radii: number | number[]) => Stroke[];
 export declare const segmentCountOf: (path: PathNumbers) => number;
 export declare const toSegments: (path: PathNumbers) => CubicSegment[];
 export declare const fromSegments: (segments: CubicSegment[]) => PathNumbers;
@@ -12,6 +20,8 @@ export declare const reorderSegments: (path: PathNumbers, { startSegment, revers
 export declare const interpolate: (from: PathNumbers, to: PathNumbers, progress: number) => PathNumbers;
 /** SVG `d` attribute: `M x y` followed by one `C` per segment. */
 export declare const toPathData: (path: PathNumbers) => string;
+/** Shrinks (factor < 1) or grows the whole shape around the icon center (12, 12). */
+export declare const scaleAroundCenter: (path: PathNumbers, factor: number) => PathNumbers;
 /** Rotates the whole shape around the icon center (12, 12). */
 export declare const rotateAroundCenter: (path: PathNumbers, angle: number) => PathNumbers;
 /**

package/dist/types/icon.d.ts

@@ -0,0 +1,28 @@
+import type { IconSetName } from './iconSets.js';
+import type { MorphOptions, MorphResult } from './morph.js';
+import type { IconSet } from './types.js';
+export interface IconOptions extends MorphOptions {
+    /** A built-in set by name (default `'round'`) or a set object. */
+    set?: IconSetName | IconSet;
+    /** The state shown first (default: empty, `' '`). */
+    state?: string;
+    /** CSS width and height of the icon (default `'1em'`: it follows the font size). */
+    size?: string;
+}
+export interface ChangeOptions extends MorphOptions {
+    /** Called when the morph ends, with the same result the promise resolves to. */
+    onEnd?: (result: MorphResult) => void;
+}
+export interface Icon {
+    /** The state shown, or being morphed to. */
+    readonly state: string;
+    /**
+     * Morphs to `state` (`'0'`…`'9'`, `'-'`, or `' '` for empty). The promise resolves when the morph ends;
+     * an interrupted morph resolves with `interrupted: true`. Without animation when the user prefers reduced motion.
+     */
+    to(state: string, options?: ChangeOptions): Promise<MorphResult>;
+    /** Stops any morph and removes the icon from the page. */
+    destroy(): void;
+}
+/** Adds a morphing icon (an <svg>) to `element`. */
+export declare const icon: (element: Element, options?: IconOptions) => Icon;

package/dist/types/iconSets.d.ts

@@ -0,0 +1,11 @@
+import type { IconSet } from './types.js';
+export declare const iconSets: {
+    round: IconSet;
+    square: IconSet;
+    condensed: IconSet;
+    slim: IconSet;
+    handwritten: IconSet;
+};
+export type IconSetName = keyof typeof iconSets;
+/** A set given by name or as a set object. */
+export declare const resolveIconSet: (set?: IconSetName | IconSet) => IconSet;

package/dist/types/index.d.ts

@@ -1,2 +1,12 @@
-/** Package version, e.g. "0.0.1" (tools/build.ts replaces 'dev'). */
+export { easings } from './engine.js';
+export { icon } from './icon.js';
+export { iconSets } from './iconSets.js';
+export { text } from './text.js';
+export type { Easing } from './engine.js';
+export type { ChangeOptions, Icon, IconOptions } from './icon.js';
+export type { IconSetName } from './iconSets.js';
+export type { EasingName, MorphOptions, MorphResult } from './morph.js';
+export type { SetOptions, Text, TextOptions, TextResult } from './text.js';
+export type { IconSet, TextLayout } from './types.js';
+/** Package version, e.g. "0.1.0" (tools/build.ts replaces 'dev'). */
 export declare const version: string;

package/dist/types/morph.d.ts

@@ -0,0 +1,27 @@
+import { easings } from './engine.js';
+import type { Easing } from './engine.js';
+import type { IconSet } from './types.js';
+export type EasingName = keyof typeof easings;
+export interface MorphOptions {
+    /** Length of a morph in milliseconds (default 400). */
+    duration?: number;
+    /** An easing name or your own function `(progress) => easedProgress` (default `'easeInOutCubic'`). */
+    easing?: EasingName | Easing;
+}
+export interface MorphResult {
+    /** The state the morph was heading to. */
+    state: string;
+    /** `true` when a newer morph (or `destroy()`) took over before this one finished. */
+    interrupted: boolean;
+}
+/** The empty state: nothing is drawn. Shapes grow out of it and shrink into it while fading. */
+export declare const EMPTY_STATE = " ";
+export declare const hasState: (iconSet: IconSet, state: string) => boolean;
+export interface MorphingPath {
+    /** The state shown, or being morphed to. */
+    readonly state: string;
+    morphTo(state: string, options?: MorphOptions): Promise<MorphResult>;
+    /** Stops a running morph where it is; its promise resolves as interrupted. */
+    stop(): void;
+}
+export declare const createMorphingPath: (pathElement: SVGPathElement, iconSet: IconSet, initialState: string) => MorphingPath;

package/dist/types/sets/condensed.d.ts

@@ -0,0 +1,2 @@
+import type { IconSet } from '../types.js';
+export declare const condensedDigits: IconSet;

package/dist/types/sets/handwritten.d.ts

@@ -0,0 +1,2 @@
+import type { IconSet } from '../types.js';
+export declare const handwrittenDigits: IconSet;

package/dist/types/sets/round.d.ts

@@ -0,0 +1,2 @@
+import type { IconSet } from '../types.js';
+export declare const roundDigits: IconSet;

package/dist/types/sets/slim.d.ts

@@ -0,0 +1,2 @@
+import type { IconSet } from '../types.js';
+export declare const slimDigits: IconSet;

package/dist/types/sets/square.d.ts

@@ -0,0 +1,2 @@
+import type { IconSet } from '../types.js';
+export declare const squareDigits: IconSet;

package/dist/types/svg.d.ts

@@ -0,0 +1,4 @@
+import type { IconSet } from './types.js';
+export declare const createSvgElement: <TagName extends keyof SVGElementTagNameMap>(tagName: TagName, attributes?: Record<string, string | number>) => SVGElementTagNameMap[TagName];
+/** An <svg> drawn in the set's stroke style, coloured by the CSS `color` (currentColor). */
+export declare const createIconSvg: (iconSet: IconSet, viewBox: string) => SVGSVGElement;

package/dist/types/text.d.ts

@@ -0,0 +1,39 @@
+import type { IconSetName } from './iconSets.js';
+import type { MorphOptions } from './morph.js';
+import type { IconSet } from './types.js';
+export interface TextOptions extends MorphOptions {
+    /** A built-in set by name (default `'round'`) or a set object. */
+    set?: IconSetName | IconSet;
+    /** The text shown first (default: empty). */
+    value?: string;
+    /** CSS height of the line (default `'1em'`: it follows the font size). */
+    size?: string;
+    /** Width of a digit cell in grid units, where a digit is 16 high (default: the set's own). */
+    cellWidth?: number;
+    /** Gap between cells in grid units (default: the set's own). The CSS variable `--morphico-spacing` overrides it. */
+    spacing?: number;
+}
+export interface TextResult {
+    /** The text the change was heading to. */
+    value: string;
+    /** `true` when a newer `set()` (or `destroy()`) took over before every digit finished. */
+    interrupted: boolean;
+}
+export interface SetOptions extends MorphOptions {
+    /** Called when every changed digit has finished, with the same result the promise resolves to. */
+    onEnd?: (result: TextResult) => void;
+}
+export interface Text {
+    /** The text shown, or being morphed to (after unsupported characters were removed). */
+    readonly value: string;
+    /**
+     * Shows `value`. Unsupported characters are removed first. If the length and the places of `:` `.` `,` `/`
+     * stay the same, only the changed digits morph; otherwise the line is rebuilt without animation
+     * (pad with spaces, e.g. `String(count).padStart(3, ' ')`, to keep counters morphing).
+     */
+    set(value: string, options?: SetOptions): Promise<TextResult>;
+    /** Stops all morphs and removes the line from the page. */
+    destroy(): void;
+}
+/** Adds a line of morphing characters (a <span> of <svg> cells) to `element`. */
+export declare const text: (element: Element, options?: TextOptions) => Text;

package/dist/types/types.d.ts

@@ -48,10 +48,25 @@ export interface PairLayout {
     /** Rotate by this many degrees around the icon center (only for shapes that look the same turned). */
     rotation?: number;
 }
+/** How a set's characters sit in the narrow cells of `text()`. Numbers are in grid units (digits are 16 high). */
+export interface TextLayout {
+    /** Default width of a digit cell. */
+    cellWidth: number;
+    /** Default gap between two cells. */
+    spacing: number;
+    /** y of the line the digits stand on (stroke centre); `.` and `,` sit there and `/` spans to `24 - baselineY`. */
+    baselineY: number;
+    /** y of the two dots of `:` (the centres of the 8's loops). */
+    colonDotsY: [top: number, bottom: number];
+}
 export interface IconSet {
     /** Cubic segments per shape. The state that needs the most segments decides it. */
     segmentCount: number;
     strokeWidth: number;
+    /** SVG `stroke-linecap`: flat (`butt`) or rounded line ends. */
+    lineCap: 'butt' | 'round' | 'square';
+    /** SVG `stroke-linejoin`: sharp (`miter`) or rounded corners. */
+    lineJoin: 'miter' | 'round' | 'bevel';
     /** The strokes of each state, as one continuous line in drawing order. */
     strokes: Record<string, Stroke[]>;
     /** Alternative tracings: the same picture (with round joins) drawn in a different order. */
@@ -60,4 +75,5 @@ export interface IconSet {
     pairLayouts: Record<string, Record<string, PairLayout>>;
     /** `spins[fromState][toState]`: degrees to rotate around the icon center while morphing. */
     spins: Record<string, Record<string, number>>;
+    textLayout: TextLayout;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "morphico",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "Morphing line-art icons: smooth SVG path transitions between digits and other states. No dependencies.",
   "license": "MIT",
   "author": "Raycho Ivanov",

package/dist/types/sets/v1.d.ts

@@ -1,3 +0,0 @@
-import type { IconSet } from '../types.js';
-declare const digitsV1: IconSet;
-export default digitsV1;

package/dist/types/sets/v2.d.ts

@@ -1,3 +0,0 @@
-import type { IconSet } from '../types.js';
-declare const digitsV2: IconSet;
-export default digitsV2;

package/dist/types/sets/v3.d.ts

@@ -1,3 +0,0 @@
-import type { IconSet } from '../types.js';
-declare const digitsV3: IconSet;
-export default digitsV3;