@draftably/editor 0.1.0 → 0.3.0

package/dist/types/src/cli/raster-fonts.d.ts

@@ -0,0 +1,3 @@
+import type { FaceId } from '../model/fonts';
+/** Each face's TrueType file, written once to a folder named by the fonts' content. */
+export declare function fontFiles(): Record<FaceId, string>;

package/dist/types/src/components/controls.d.ts

@@ -1,6 +1,6 @@
 /** Small form and button primitives shared by panels, menus and dialogs. */
 import { type JSX } from 'solid-js';
-import { type CommandId } from '../state/commands';
+import type { Command } from '../state/canvas-commands';
 /** Attributes that give an element the shared tooltip. See `Tips`. */
 export declare const tip: (label: string, keys?: string, hint?: string) => {
     'data-tip': string;
@@ -20,12 +20,15 @@ export declare function IconButton(props: {
     pressed?: boolean;
     variant?: 'ghost' | 'primary';
 } & Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, 'children'>): JSX.Element;
-/** An icon button that runs a command and explains itself from the command's own words. */
-export declare function CommandButton(props: {
-    command: CommandId;
+/**
+ * An icon button for one table of commands: it runs a command and explains itself from the
+ * command's own words.
+ */
+export declare const commandButton: <Id extends string>(table: Record<Id, Command>, run: (id: Id) => void, enabled: (id: Id) => boolean) => (props: {
+    command: Id;
     label?: string;
     pressed?: boolean;
-}): JSX.Element;
+}) => JSX.Element;
 /** Text with each word of a query marked where it matches. */
 export declare function Highlight(props: {
     text: string;

package/dist/types/src/dsl/compile.d.ts

@@ -1,5 +1,6 @@
 import { type ResolvedAppearance } from '../model/appearance';
 import type { CellsChrome, Lane, SequenceLayout } from '../model/types';
+import { type Planned } from './corridors';
 import { GROUP_HEADER, GROUP_INSET, contentOrigin } from './frame';
 import { type Model, type ModelEdge, type ModelLayout, type ModelObject } from './syntax';
 /** The single render context. Browser window size changes the camera, never the layout. */
@@ -44,6 +45,8 @@ export interface Diagnostic {
 /** A connection as the file declares it, plus the lane a fold's wrap edge returns along. */
 export interface SceneEdge extends ModelEdge {
     lane?: Lane;
+    /** A forward line's route, planned from its scope's ranks and corridors (`planRoutes`). */
+    plan?: Planned;
     /** A sequence message: the height of its row; it is drawn straight between lifelines there. */
     row?: number;
 }
@@ -149,6 +152,16 @@ export declare function crossings(paths: Array<Array<{
 }>>): number;
 /** The order of up to six items that scores fewest crossings; the first such, from `items`. */
 export declare function fewestCrossings<T>(items: T[], score: (order: T[]) => number): T[];
+/**
+ * The corridors a `flow` scope keeps for lines that skip ranks: the ranks with their stand-ins,
+ * each line's stand-ins by its index in the scope's pairs, and each stand-in's place across the
+ * run, in the scope's coordinates.
+ */
+export interface Corridors {
+    order: string[][];
+    chains: Map<number, string[]>;
+    across: Map<string, number>;
+}
 /**
  * Lay out a model. `arranged` holds world positions from layout engines; scopes that an engine
  * governs take their children's relative placement from it instead of their built-in recipe.

package/dist/types/src/dsl/corridors.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Routes for a `flow` scope's forward lines, planned from its ranks as a layered layout routes its
+ * edges: out of the source's trailing side, along a track in each gap the line turns in, down a
+ * corridor through each rank it skips, and into the target's leading side. The ranks' order already
+ * keeps crossings few, so the plan only has to place ports and order each gap's tracks. The router
+ * takes a planned route as it is when it clears every box.
+ */
+import type { Point, Rect } from '../model/types';
+export interface PlanLine {
+    id: string;
+    /** Source, the stand-ins of the ranks it skips, target. */
+    chain: string[];
+}
+export interface Planned {
+    points: Point[];
+    fromOffset: number;
+    toOffset: number;
+}
+/**
+ * Space between ports on one side and between neighbouring tracks in a gap, as the router keeps
+ * them: ports `max(portGap, edgeGap)` apart and tracks `edgeGap` apart.
+ */
+export interface Spacing {
+    port: number;
+    track: number;
+}
+/**
+ * Plans each line of `lines`. `order` is the ranks with stand-ins, `box` each real member's drawn
+ * box and `across` each stand-in's place across the run, all in drawing coordinates. Lines that
+ * cannot be planned (a member without a box) are left out.
+ */
+export declare function planRoutes(axis: 'down' | 'right', order: string[][], lines: PlanLine[], box: (id: string) => Rect | undefined, across: (id: string) => number | undefined, spacing?: Spacing): Map<string, Planned>;
+/**
+ * The room each gap between ranks needs for the tracks `planRoutes` lays in it: a standoff from
+ * the boxes either side and a pitch between tracks, by gap index; a gap with no track is absent.
+ * `box` may be a member's slot: only its place across the run counts.
+ */
+export declare function trackRoom(axis: 'down' | 'right', order: string[][], lines: PlanLine[], box: (id: string) => Rect | undefined, across: (id: string) => number | undefined, spacing?: Spacing): number[];

package/dist/types/src/model/types.d.ts

@@ -93,6 +93,15 @@ export interface EdgeLayout {
     toOffset?: number;
     /** A sequence message: drawn straight between the two lifelines at this height, not routed. */
     row?: number;
+    /**
+     * Set by the compiler for a forward line in a `flow` scope: its route planned from the ranks.
+     * The quick router takes it as it is when it clears every box.
+     */
+    plan?: {
+        points: Point[];
+        fromOffset: number;
+        toOffset: number;
+    };
 }
 /**
  * A channel between two bands of a fold: a level line at `y`, or an upright one at `x`. With

package/dist/types/src/state/canvas-commands.d.ts

@@ -0,0 +1,169 @@
+export interface Command {
+    label: string;
+    /** Shortcut shown in menus. */
+    keys?: string;
+    icon?: string;
+    /** What it does, in a sentence: shown in tooltips and the palette. */
+    hint?: string;
+    run: () => unknown;
+    /** Allowed while a timeline preview is open. */
+    duringTimeline?: boolean;
+    /** Exits the brush before running. */
+    endsBrush?: boolean;
+    enabled?: () => boolean;
+    /** Why this cannot work here, shown instead of running it. */
+    blocked?: () => string | null;
+}
+declare function undoCommand(): void;
+declare function redoCommand(): void;
+export declare const hasSelection: () => boolean;
+export declare const canvasCommands: {
+    undo: {
+        hint: string;
+        label: string;
+        keys: string;
+        icon: string;
+        run: typeof undoCommand;
+        duringTimeline: true;
+        enabled: () => boolean;
+    };
+    redo: {
+        hint: string;
+        label: string;
+        keys: string;
+        icon: string;
+        run: typeof redoCommand;
+        enabled: () => boolean;
+    };
+    'add-node': {
+        hint: string;
+        label: string;
+        keys: string;
+        icon: string;
+        run: () => void;
+    };
+    'add-connected': {
+        hint: string;
+        label: string;
+        keys: string;
+        icon: string;
+        run: () => string | undefined;
+    };
+    duplicate: {
+        hint: string;
+        enabled: () => boolean;
+        label: string;
+        keys: string;
+        icon: string;
+        run: () => void;
+    };
+    group: {
+        hint: string;
+        enabled: () => boolean;
+        label: string;
+        keys: string;
+        icon: string;
+        run: () => string;
+    };
+    ungroup: {
+        hint: string;
+        enabled: () => boolean;
+        label: string;
+        keys: string;
+        run: () => void;
+    };
+    pin: {
+        hint: string;
+        enabled: () => boolean;
+        label: string;
+        keys: string;
+        icon: string;
+        run: () => void;
+    };
+    delete: {
+        hint: string;
+        label: string;
+        enabled: () => boolean;
+        keys: string;
+        icon: string;
+        run: () => void;
+    };
+    'delete-deep': {
+        label: string;
+        keys: string;
+        run: () => void;
+    };
+    layout: {
+        hint: string;
+        label: string;
+        keys: string;
+        icon: string;
+        run: () => Promise<import("./session/layout").LayoutOutcome>;
+        blocked: () => string | null;
+        endsBrush: true;
+    };
+    'layout-rebuild': {
+        hint: string;
+        label: string;
+        keys: string;
+        run: () => Promise<import("./session/layout").LayoutOutcome>;
+        blocked: () => string | null;
+        endsBrush: true;
+    };
+    'layout-accept': {
+        label: string;
+        run: () => void;
+    };
+    'layout-discard': {
+        label: string;
+        run: () => void;
+    };
+    reroute: {
+        hint: string;
+        label: string;
+        keys: string;
+        icon: string;
+        run: () => void;
+    };
+    'auto-ports': {
+        hint: string;
+        label: string;
+        keys: string;
+        run: () => void;
+    };
+    fit: {
+        hint: string;
+        label: string;
+        keys: string;
+        icon: string;
+        run: () => void;
+        duringTimeline: true;
+    };
+    'zoom-in': {
+        label: string;
+        keys: string;
+        icon: string;
+        run: () => void;
+        duringTimeline: true;
+    };
+    'zoom-out': {
+        label: string;
+        keys: string;
+        icon: string;
+        run: () => void;
+        duringTimeline: true;
+    };
+    'reset-camera': {
+        label: string;
+        keys: string;
+        run: () => void;
+        duringTimeline: true;
+    };
+};
+export type CanvasCommandId = keyof typeof canvasCommands;
+/** Run `command` unless a timeline preview or its own check blocks it, reporting failures. */
+export declare function runChecked(id: string, command: Command): undefined;
+export declare const checkedEnabled: (command: Command) => boolean;
+export declare const runCanvasCommand: (id: CanvasCommandId) => undefined;
+export declare const canvasCommandEnabled: (id: CanvasCommandId) => boolean;
+export {};

package/dist/types/src/state/canvas-keyboard.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Canvas shortcuts and shape copy and paste for the active session. The app runs its own keys
+ * around these in `keyboard.ts`; an embedded editor uses them as they are.
+ */
+export declare const isEditable: (el: EventTarget | null) => boolean;
+/**
+ * Run the canvas shortcut for `e`. True when the key was used, or belongs to a field, so the host
+ * should not act on it. `closeMenu` lets Escape close the host's open menu, before it clears the
+ * selection; it returns true when it closed one.
+ */
+export declare function handleCanvasKey(e: KeyboardEvent, closeMenu?: () => boolean): boolean;
+export declare function handleKeyUp(e: KeyboardEvent): void;
+export declare function copyShapes(e: ClipboardEvent): void;
+/** Paste copied shapes: from the clipboard text, or the session's own copy when it is empty. */
+export declare function pasteShapes(e: ClipboardEvent): void;

package/dist/types/src/state/links.d.ts

@@ -4,8 +4,11 @@ import type { DiagramSession } from './session';
  * Null when no file on disk is open.
  */
 export declare function linkBase(s: DiagramSession): string | null;
+/** `href` joined to a URL `link-base`, or null. */
+export declare const joined: (s: DiagramSession, href: string) => string | null;
 /** What opening `href` does, for a tooltip or the Inspector. */
 export declare function describeLink(s: DiagramSession, href: string): string;
+/** A path inside the served folder, relative to it, or null. */
+export declare function servedPath(file: string): string | null;
 /** A link as an exported SVG carries it: file paths from the diagram's folder, URLs as written. */
 export declare function exportHref(s: DiagramSession, href: string): string;
-export declare function openLink(s: DiagramSession, href: string): void;

package/dist/types/src/state/workspace.d.ts

@@ -0,0 +1,3 @@
+import type { WorkspaceInfo } from '../server/workspace';
+/** The served folder, or null on the static site and in an embedded editor. */
+export declare const workspace: import("solid-js").Accessor<WorkspaceInfo | null>, setWorkspace: import("solid-js").Setter<WorkspaceInfo | null>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftably/editor",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "The Draftably diagram editor: drag boxes and lines, and get the .draft source back.",
   "license": "MIT",
   "type": "module",