@draftably/editor 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,14 @@
+import type { DiagramSession } from './session';
+/**
+ * Where a relative link starts: `config link-base=` from the diagram's folder, else its git root.
+ * 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;

package/dist/types/src/state/session/actions.d.ts

@@ -0,0 +1,77 @@
+import { type AppearanceOverrides, type Shade, type ThemeId } from '../../model/appearance';
+import * as edits from '../../model/edits';
+import type { Diagram, IntentPlacement, IntentRole, Point, Side } from '../../model/types';
+import { type Tool } from './editor';
+import type { EditorPart } from './editor';
+import type { DocumentPart } from './document';
+import type { ScenePart } from './scene';
+import type { LayoutPart } from './layout';
+/** Inline-edit ids of the frame's title and subtitle; never valid object ids. */
+export declare const HEADING_EDIT: {
+    readonly title: string;
+    readonly subtitle: string;
+};
+export declare function createActions(s: EditorPart & DocumentPart & ScenePart & LayoutPart): {
+    inlineDraft: import("solid-js").Accessor<string>;
+    setInlineDraft: import("solid-js").Setter<string>;
+    setToolInterceptor: (fn: (tool: Tool) => boolean) => (tool: Tool) => boolean;
+    setTool: (next: Tool) => void;
+    startInlineEdit: (id: string) => void;
+    finishInlineEdit: (save?: boolean) => void;
+    addNode: (partial?: edits.NewNode, at?: Point, edit?: boolean) => string;
+    addEdge: (partial: edits.NewEdge) => string;
+    completeConnection: (targetId: string, side?: Side | "auto") => void;
+    quickExtend: ({ side, sibling, at, from, }?: {
+        side?: Side | null;
+        sibling?: boolean;
+        at?: Point | null;
+        from?: string | null;
+    }) => string | undefined;
+    insertStep: (edgeId: string, at?: Point | null) => string | undefined;
+    buildFromList: (lines: string[], options?: {
+        mode?: edits.BuildMode;
+        title?: string;
+        source?: string | null;
+        parentId?: string | null;
+    }) => string[];
+    wrapSelection: () => string;
+    drawContainer: (rect: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    }) => void;
+    deleteSelection: (deep?: boolean) => void;
+    ungroupSelection: () => void;
+    togglePin: () => void;
+    clearManualMarkers: () => void;
+    alignSelection: (kind: edits.AlignKind) => void;
+    nudgeSelection: (dx: number, dy: number) => boolean;
+    setColor: (color: Diagram["styles"][string]["color"]) => void;
+    chooseTheme: (theme: ThemeId) => void;
+    setAppearanceOverrides: (patch: Partial<AppearanceOverrides>, label?: string) => void;
+    setShade: (shade: Shade | undefined) => void;
+    fitSelectedContainer: () => void;
+    toggleCollapse: (id?: string | undefined) => void;
+    reverseSelectedEdge: () => void;
+    resetSelectedBends: () => void;
+    setLayoutIntent: (role: IntentRole, id: string | null, placement?: IntentPlacement) => void;
+    markSelectedAs: (role: IntentRole) => void;
+    addWaypointAt: (edgeId: string, point?: Point) => void;
+    removeWaypoint: (edgeId: string, index: number) => void;
+    reroute: ({ auto }?: {
+        auto?: boolean | undefined;
+    }) => void;
+    toggleTheme: () => void;
+    copySelection: () => edits.ClipboardFragment | null;
+    hasClipboard: () => boolean;
+    pasteFragment: (part?: edits.ClipboardFragment | null) => void;
+    duplicateSelection: () => void;
+    openDocument: (input: unknown, { fit, label }?: {
+        fit?: boolean | undefined;
+        label?: string | undefined;
+    }) => Diagram;
+    newDocument: () => void;
+    openSample: (id: string) => Diagram | undefined;
+};
+export type ActionsPart = ReturnType<typeof createActions>;

package/dist/types/src/state/session/canvas-text.d.ts

@@ -0,0 +1,24 @@
+import type { Diagram } from '../../model/types';
+export type TextKind = 'title' | 'subtitle' | 'note' | 'footnote' | 'legend' | 'phase';
+export declare const textId: (kind: TextKind, key?: string | number) => string;
+/** The kind and key of a text id; undefined for an object id. */
+export declare function parseTextId(id: string | null | undefined): {
+    kind: TextKind;
+    key: string;
+} | undefined;
+/** What the Inspector, undo steps and the editor call each kind. */
+export declare const TEXT_NAMES: Record<TextKind, string>;
+/** The text's current words, or undefined when the id names nothing in `d`. */
+export declare function textValue(d: Diagram, id: string): string | undefined;
+/**
+ * Write `value` to the text `id` names. An empty note or legend row is removed; a phase keeps its
+ * old label, since a phase needs one.
+ */
+export declare function setTextValue(d: Diagram, id: string, value: string): void;
+/** Remove the text: a note, footnote or legend row goes, a title or subtitle empties; a phase stays. */
+export declare function removeText(d: Diagram, id: string): void;
+export declare function createCanvasText(): {
+    selectedText: import("solid-js").Accessor<string | null>;
+    setSelectedText: import("solid-js").Setter<string | null>;
+};
+export type CanvasTextPart = ReturnType<typeof createCanvasText>;

package/dist/types/src/state/session/document.d.ts

@@ -0,0 +1,84 @@
+import type { Camera, Diagram } from '../../model/types';
+import type { CanvasTextPart } from './canvas-text';
+import type { SessionOptions } from '.';
+export interface HistoryEntry {
+    data: string;
+    label: string;
+    /** Local brush holds before and after this step; holds are session state, not document data. */
+    holds?: {
+        before: string[];
+        after: string[];
+    };
+}
+type SaveStatus = 'saved' | 'saving' | 'preview' | 'failed';
+/**
+ * Handles every committed edit instead of the browser history while a diagram file is open, so
+ * the edit can be written to the file. Returns whether the edit was kept.
+ */
+type CommitHandler = (before: string, label: string, kind: EditKind) => boolean;
+/**
+ * `arrangement`: the edit is a drawing produced by a layout pass, a timeline step or the brush,
+ * saved as positions rather than translated move by move.
+ */
+export type EditKind = 'edit' | 'arrangement';
+/** Replaces the browser history while a diagram file is open: undo steps through its source. */
+export interface HistoryHandler {
+    undo(): void;
+    redo(): void;
+    canUndo(): boolean;
+    canRedo(): boolean;
+}
+export declare function createDocument(s: CanvasTextPart, options: SessionOptions): {
+    options: SessionOptions;
+    doc: Diagram;
+    setDoc: import("solid-js/store").SetStoreFunction<Diagram>;
+    saveStatus: import("solid-js").Accessor<SaveStatus>;
+    undoStack: import("solid-js").Accessor<HistoryEntry[]>;
+    redoStack: import("solid-js").Accessor<HistoryEntry[]>;
+    revision: import("solid-js").Accessor<number>;
+    snapshotDoc: () => Diagram;
+    snapshot: () => string;
+    selection: import("solid-js").Accessor<ReadonlySet<string>>;
+    selectedIds: () => string[];
+    isSelected: (id: string) => boolean;
+    singleSelection: () => string | undefined;
+    setSelection: (ids: Iterable<string>) => void;
+    selectItems: (ids: string[], { add, toggle }?: {
+        add?: boolean | undefined;
+        toggle?: boolean | undefined;
+    }) => void;
+    clearSelection: () => void;
+    selectText: (id: string) => void;
+    onBeforeEdit: (handler: () => void) => void;
+    prepareForEdit: () => void;
+    onSourceIdMap: (handler: (mapId: (id: string) => string) => void) => void;
+    mapSourceIds: (mapId: (id: string) => string) => void;
+    setCommitHandler: (handler: CommitHandler | null) => CommitHandler | null;
+    editsGoToFile: () => boolean;
+    commit: (before: string, label?: string, kind?: EditKind) => boolean;
+    pushUndo: (entry: HistoryEntry) => void;
+    annotateLastUndo: (holds: HistoryEntry["holds"]) => void;
+    transact: (label: string, fn: (draft: Diagram) => void, kind?: EditKind) => boolean;
+    mutate: (fn: (draft: Diagram) => void) => void;
+    restoreDocument: (next: Diagram, { keepCamera }?: {
+        keepCamera?: boolean | undefined;
+    }) => void;
+    onHistoryStep: (handler: (entry: HistoryEntry, direction: "undo" | "redo") => void) => void;
+    setHistoryHandler: (handler: HistoryHandler | null) => HistoryHandler | null;
+    undo: () => void;
+    redo: () => void;
+    canUndo: () => boolean;
+    canRedo: () => boolean;
+    setCamera: (camera: Camera) => void;
+    disableBrowserStorage: () => boolean;
+    setPersistenceBlocked: (blocked: boolean) => void;
+    persist: () => void;
+    persistNow: () => void;
+    restoreSavedDocument: () => {
+        restored: boolean;
+        notice?: string;
+    };
+    watchOtherTabs: () => () => void;
+};
+export type DocumentPart = ReturnType<typeof createDocument>;
+export {};

package/dist/types/src/state/session/editor.d.ts

@@ -0,0 +1,81 @@
+import type { NodeGeometry, Point, PortSide, Rect } from '../../model/types';
+import type { DocumentPart } from './document';
+import type { ScenePart } from './scene';
+export type Tool = 'select' | 'pan' | 'box' | 'diamond' | 'circle' | 'text' | 'container' | 'connect' | 'brush';
+export declare const DRAW_TOOLS: readonly ["box", "diamond", "circle", "text", "container"];
+export type DrawTool = (typeof DRAW_TOOLS)[number];
+export declare const isDrawTool: (tool: Tool) => tool is DrawTool;
+export interface Guide {
+    axis: 'x' | 'y';
+    value: number;
+    from: number;
+    to: number;
+}
+/** Visual feedback for the gesture in progress. */
+export interface DragFeedback {
+    kind: string;
+    marquee?: Rect;
+    draw?: Rect;
+    guides?: Guide[];
+    dropTargetId?: string | null;
+    resizingContainer?: boolean;
+    /** A note being dragged: its box, and the object it would sit beside if dropped. */
+    text?: {
+        rect: Rect;
+        near?: string;
+    };
+}
+export declare const MIN_ZOOM = 0.08;
+export declare const MAX_ZOOM = 4;
+export { NodeGeometry };
+export declare function createEditor(s: DocumentPart & ScenePart): {
+    tool: import("solid-js").Accessor<Tool>;
+    setToolSignal: import("solid-js").Setter<Tool>;
+    connectFrom: import("solid-js").Accessor<{
+        id: string;
+        side: PortSide;
+    } | null>;
+    setConnectFrom: import("solid-js").Setter<{
+        id: string;
+        side: PortSide;
+    } | null>;
+    pointer: import("solid-js").Accessor<Point | null>;
+    setPointer: import("solid-js").Setter<Point | null>;
+    drag: import("solid-js").Accessor<DragFeedback | null>;
+    setDrag: import("solid-js").Setter<DragFeedback | null>;
+    inlineEditId: import("solid-js").Accessor<string | null>;
+    setInlineEditId: import("solid-js").Setter<string | null>;
+    spaceHeld: import("solid-js").Accessor<boolean>;
+    setSpaceHeld: import("solid-js").Setter<boolean>;
+    measuredStageSize: import("solid-js").Accessor<{
+        width: number;
+        height: number;
+    }>;
+    setMeasuredStageSize: import("solid-js").Setter<{
+        width: number;
+        height: number;
+    }>;
+    reducedMotion: import("solid-js").Accessor<boolean>;
+    setReducedMotion: import("solid-js").Setter<boolean>;
+    registerCanvas: (el: SVGSVGElement) => SVGSVGElement;
+    canvasElement: () => SVGSVGElement | undefined;
+    focusCanvas: () => void | undefined;
+    stageSize: () => {
+        width: number;
+        height: number;
+    };
+    screenToWorld: (clientX: number, clientY: number) => Point;
+    canvasCenter: () => Point;
+    zoomAt: (factor: number, clientX?: number, clientY?: number) => void;
+    panBy: (dx: number, dy: number) => void;
+    setStageSize: (size: {
+        width: number;
+        height: number;
+    }) => void;
+    fitView: () => void;
+    diagramClipped: () => boolean;
+    fitRects: (rects: Rect[], reservedBottom?: number) => void;
+    revealObject: (id: string) => void;
+    centerSelection: () => void;
+};
+export type EditorPart = ReturnType<typeof createEditor>;

package/dist/types/src/state/session/emphasis.d.ts

@@ -0,0 +1,11 @@
+import type { DocumentPart } from './document';
+export declare function createEmphasis(s: DocumentPart): {
+    states: () => import("../../model/appearance").EmphasisState[];
+    activeState: () => string | null;
+    gridOpen: import("solid-js").Accessor<boolean>;
+    setGridOpen: import("solid-js").Setter<boolean>;
+    showState: (id: string | null) => void;
+    stepState: (by: 1 | -1) => boolean;
+    drawnDoc: () => import("../../model/types").Diagram;
+};
+export type EmphasisPart = ReturnType<typeof createEmphasis>;

package/dist/types/src/state/session/file-session.d.ts

@@ -0,0 +1,98 @@
+import { type Diagnostic, type Scene } from '../../dsl/compile';
+import { type ShapeChange, UnstorableLayout } from '../../dsl/layout-edits';
+import type { RoutingResult } from '../../engines/routing-engine.js';
+import type { Diagram, LayoutSettings, RoutingSettings } from '../../model/types';
+import type { DocumentPart } from './document';
+import type { CanvasTextPart } from './canvas-text';
+export interface FileSessionInfo {
+    name: string;
+    path: string;
+    source: string;
+    revision: string;
+    /** Where the file's relative links start (files only). */
+    root?: string;
+    /** Set for an example: its id. The source is never written to disk. */
+    example?: string;
+    /** The file's path relative to the served folder (files only). */
+    file?: string;
+}
+export type FileStatus = 'saved' | 'saving' | 'invalid' | 'conflict' | 'failed' | 'offline';
+/** The id of the blank draft that New opens: a scratch copy with no example behind it. */
+export declare const DRAFT_ID = "untitled";
+/** The source scope a layout scope maps to: `root`, a group, or null for a loose selection. */
+export declare function sourceScope(scope: {
+    scope: string;
+    containerId?: string;
+}): string | null;
+export { UnstorableLayout };
+export declare function createFileSession(s: DocumentPart & CanvasTextPart): {
+    openSource: (source: string, onChange?: (source: string) => void) => Promise<void>;
+    receiveSource: (source: string) => Promise<void>;
+    liveSource: import("solid-js").Accessor<string>;
+    sourceDraft: import("solid-js").Accessor<string | null>;
+    fileSession: import("solid-js").Accessor<FileSessionInfo | null>;
+    fileMode: () => boolean;
+    exampleMode: () => boolean;
+    scratchName: () => "Draft" | "Example";
+    exampleEdited: () => boolean;
+    leaveAgreed: () => boolean;
+    agreeToLeave: () => undefined;
+    fileStatus: import("solid-js").Accessor<FileStatus>;
+    sourceError: import("solid-js").Accessor<{
+        message: string;
+        line: number;
+    } | null>;
+    fileScene: import("solid-js").Accessor<Scene | null>;
+    fileDiagnostics: () => Diagnostic[];
+    conflictProposal: import("solid-js").Accessor<string | null>;
+    movedByChange: import("solid-js").Accessor<string[]>;
+    fileCompiling: import("solid-js").Accessor<boolean>;
+    exampleRestored: () => boolean;
+    currentSource: () => string;
+    setRouteSink: (sink: {
+        adopt: (routes: {
+            fingerprint: string;
+            result: RoutingResult;
+        }) => void;
+        quick: (on: boolean) => void;
+        /** A shown revision's full routes are still on their way from the worker. */
+        awaiting: (on: boolean) => void;
+    }) => {
+        adopt: (routes: {
+            fingerprint: string;
+            result: RoutingResult;
+        }) => void;
+        quick: (on: boolean) => void;
+        /** A shown revision's full routes are still on their way from the worker. */
+        awaiting: (on: boolean) => void;
+    };
+    showSource: (source: string, selection?: string[] | (() => string[]), mapId?: (id: string) => string) => Promise<Scene | null>;
+    keepDiskVersion: () => void;
+    saveProposalOverDisk: () => void;
+    retrySave: () => undefined;
+    typeSource: (next: string, burst: number) => Promise<null | undefined>;
+    commitSource: (next: string, label: string, message: string) => Promise<boolean>;
+    fileBlocked: () => string | null;
+    sourceWithRecipe: (scope: string, settings: LayoutSettings, direction?: "right" | "down") => {
+        source: string;
+        removed: number;
+    };
+    sourceWithShape: (scope: string, change: ShapeChange) => {
+        source: string;
+        removed: number;
+    };
+    changedLines: (source: string) => string[];
+    changedLine: (source: string) => string;
+    sourceWithRouting: (routing: RoutingSettings, base?: string) => string;
+    projectSource: (source: string) => Promise<Diagram>;
+    reflowSelectedGroup: (id: string) => void;
+    openFileSession: (file: string) => Promise<boolean>;
+    prefetchFile: (file: string) => Promise<void>;
+    settleSave: () => Promise<void>;
+    closeFileSession: () => void;
+    openExampleSession: (id: string, title: string, source: string, key?: string) => Promise<void>;
+    resetExample: () => void;
+    markExampleSaved: () => void;
+    fileStatusText: () => string;
+};
+export type FileSessionPart = ReturnType<typeof createFileSession>;