@fieldia/designer 0.0.0-stage → 0.12.0

package/src/lib/canvas-advanced.mjs

@@ -0,0 +1,242 @@
+import { findDrop } from './canvas-drop.mjs';
+import { echo } from './drop-echo.mjs';
+import { nameOf, nodeOf } from './layout-tree.mjs';
+import { speakLike } from './chrome-language.mjs';
+/** How far the pointer moves before a press becomes a drag. */
+const SLOP = 5;
+/** How long the pointer rests on a closed tab before it opens. */
+const TAB_DELAY = 450;
+/** How near the window's top or bottom something carried scrolls the page, faster the nearer; and how long it rests there first. */
+const EDGE = 48;
+const EDGE_DELAY = 250;
+/** What a toolbox tile adds, as a new part. */
+export function newPartOf(spec) {
+    const at = spec.indexOf(':');
+    const [kind, name] = [spec.slice(0, at), spec.slice(at + 1)];
+    if (kind === 'kind')
+        return { kind: name };
+    if (kind === 'model')
+        return { field: name };
+    if (kind === 'block')
+        return { block: name };
+    if (spec === 'layout:section')
+        return { block: 'group' };
+    if (spec === 'layout:tabs')
+        return { block: 'tabs' };
+    return null;
+}
+/** Where a press starts carrying a part: anywhere on one not being typed in, or on the grip of the one that is. */
+export function partPressed(target, root) {
+    if (target.closest('.fd-field-bar, .fd-simple-lock, .fd-q-option-box, input, textarea, select, [contenteditable="plaintext-only"], [contenteditable="true"]'))
+        return null;
+    const control = target.closest('button, a');
+    if (control && !control.matches('[data-grip]'))
+        return null;
+    const part = target.closest('[data-node]');
+    if (!part || !root.contains(part) || part.getAttribute('role') === 'tab')
+        return null;
+    // The field being edited moves only by its grip: pressing on it otherwise is for its words.
+    if (part.classList.contains('fd-editing') && !target.closest('[data-grip]'))
+        return null;
+    return part;
+}
+export function advancedDrag(options) {
+    const { canvas, root, designer } = options;
+    const doc = canvas.ownerDocument;
+    const rectOf = options.rectOf ?? ((element) => element.getBoundingClientRect());
+    const elementAt = options.elementAt ?? ((x, y) => doc.elementFromPoint(x, y));
+    let enabled = true;
+    let drag = null;
+    let tabTimer;
+    let tabUnder = null;
+    let edgeTimer;
+    let pointer = { x: 0, y: 0 };
+    /** Held near the window's top or bottom, the page scrolls under what is carried, so it can go to a place out of view. */
+    function edgeScroll() {
+        clearTimeout(edgeTimer);
+        edgeTimer = undefined;
+        const view = doc.defaultView;
+        if (!drag?.started || !view)
+            return;
+        const { x, y } = pointer;
+        const speed = y < EDGE ? -(EDGE - y) : y > view.innerHeight - EDGE ? EDGE - (view.innerHeight - y) : 0;
+        if (!speed)
+            return;
+        view.scrollBy(0, Math.round(speed / 2) || Math.sign(speed));
+        follow(drag, x, y);
+        edgeTimer = setTimeout(edgeScroll, 16);
+    }
+    const moving = (d) => ('node' in d.source ? d.source.node : undefined);
+    function begin(source, element, x, y) {
+        drag = { source, element, start: { x, y }, started: false, chip: null, where: null, bar: null, zone: null, drop: null };
+    }
+    function onDown(event) {
+        if (!enabled || event.button !== 0 || drag)
+            return;
+        const part = partPressed(event.target, root);
+        if (part)
+            begin({ node: part.dataset['node'] }, part, event.clientX, event.clientY);
+    }
+    /** Where a box in the window is, in the canvas: the marks are drawn in it. */
+    function inCanvas(box, element) {
+        const c = rectOf(canvas);
+        Object.assign(element.style, { left: `${box.left - c.left}px`, top: `${box.top - c.top}px`, width: `${box.width}px`, height: `${box.height}px` });
+    }
+    function lift(current) {
+        current.started = true;
+        canvas.classList.add('fd-dragging');
+        doc.getSelection()?.removeAllRanges();
+        const name = 'node' in current.source ? nameOf(designer.getPage(), nodeOf(designer.getPage(), current.source.node), designer.words) : (current.element.querySelector('.fd-tool-name')?.textContent ?? current.element.textContent ?? '').trim();
+        const chip = doc.createElement('div');
+        chip.className = 'fd-drop-chip';
+        chip.setAttribute('aria-hidden', 'true');
+        const label = doc.createElement('span');
+        label.className = 'fd-drop-name';
+        label.textContent = name || designer.words.canvas.part;
+        const where = doc.createElement('span');
+        where.className = 'fd-drop-where';
+        chip.append(label, where);
+        const bar = doc.createElement('div');
+        bar.className = 'fd-drop-bar';
+        bar.hidden = true;
+        const zone = doc.createElement('div');
+        zone.className = 'fd-drop-zone';
+        zone.hidden = true;
+        canvas.append(zone, bar, speakLike(chip, canvas));
+        Object.assign(current, { chip, where, bar, zone });
+        if ('node' in current.source)
+            current.element.classList.add('fd-drag-carried');
+    }
+    function follow(current, x, y) {
+        const chip = current.chip;
+        const c = rectOf(canvas);
+        // Beside the pointer, out of the way of the line; on its other side where it would run past the canvas's end.
+        const width = rectOf(chip).width;
+        const after = x - c.left + 16;
+        chip.style.left = `${after + width > c.width ? Math.max(0, x - c.left - 16 - width) : after}px`;
+        chip.style.top = `${y - c.top + 18}px`;
+        const page = designer.getPage();
+        const mark = findDrop({ root, page, rtl: options.rtl(), rectOf }, elementAt(x, y), x, y, moving(current));
+        const bar = current.bar;
+        const zone = current.zone;
+        const refused = mark ? designer.dropRefusal(mark.drop, moving(current)) : null;
+        current.drop = mark && !refused ? mark.drop : null;
+        chip.classList.toggle('fd-drop-refused', !current.drop);
+        current.where.textContent = !mark ? designer.words.canvas.notHere : (refused ?? designer.describeDrop(mark.drop, moving(current)));
+        bar.hidden = !current.drop;
+        zone.hidden = !current.drop || !mark?.zone;
+        // gap lane: the outline draws where it lands too.
+        echo(canvas, { source: 'canvas', drop: current.drop, moving: moving(current) });
+        if (mark && current.drop) {
+            inCanvas(mark.line, bar);
+            if (mark.zone)
+                inCanvas(mark.zone, zone);
+        }
+    }
+    /** Resting on a closed tab opens it, so a part can go into another tab. */
+    function restOnTab(x, y) {
+        const tab = elementAt(x, y)?.closest('[role="tab"]:not([aria-selected="true"])') ?? null;
+        if (tab === tabUnder)
+            return;
+        clearTimeout(tabTimer);
+        tabUnder = tab;
+        if (tab)
+            tabTimer = setTimeout(() => tab.click(), TAB_DELAY);
+    }
+    function onMove(event) {
+        if (!drag)
+            return;
+        const { clientX: x, clientY: y } = event;
+        if (!drag.started) {
+            if (Math.hypot(x - drag.start.x, y - drag.start.y) < SLOP)
+                return;
+            lift(drag);
+        }
+        event.preventDefault();
+        follow(drag, x, y);
+        restOnTab(x, y);
+        pointer = { x, y };
+        const view = doc.defaultView;
+        const nearEdge = !!view && (y < EDGE || y > view.innerHeight - EDGE);
+        if (!nearEdge) {
+            clearTimeout(edgeTimer);
+            edgeTimer = undefined;
+        }
+        else if (!edgeTimer)
+            edgeTimer = setTimeout(edgeScroll, EDGE_DELAY);
+    }
+    /** The click a real drag ends with is not a click on what was under it. */
+    function swallowNextClick() {
+        const swallow = (event) => {
+            event.stopPropagation();
+            event.preventDefault();
+            stop();
+        };
+        const stop = () => {
+            doc.removeEventListener('click', swallow, true);
+            doc.removeEventListener('pointerdown', stop, true);
+        };
+        doc.addEventListener('click', swallow, true);
+        doc.addEventListener('pointerdown', stop, true);
+        setTimeout(stop, 0);
+    }
+    function end(commit) {
+        const current = drag;
+        drag = null;
+        clearTimeout(tabTimer);
+        tabUnder = null;
+        clearTimeout(edgeTimer);
+        edgeTimer = undefined;
+        if (!current?.started)
+            return;
+        for (const mark of [current.chip, current.bar, current.zone])
+            mark?.remove();
+        echo(canvas, { source: 'canvas', drop: null });
+        current.element.classList.remove('fd-drag-carried');
+        canvas.classList.remove('fd-dragging');
+        swallowNextClick();
+        if (!commit || !current.drop)
+            return;
+        const part = 'node' in current.source ? current.source.node : newPartOf(current.source.tool);
+        if (!part)
+            return;
+        const id = designer.place(part, current.drop);
+        if (id)
+            options.placed?.(id, current.source);
+    }
+    const onUp = () => end(true);
+    const onCancel = () => end(false);
+    const onKey = (event) => {
+        if (event.key === 'Escape' && drag?.started) {
+            event.preventDefault();
+            event.stopPropagation();
+            end(false);
+        }
+    };
+    canvas.addEventListener('pointerdown', onDown);
+    doc.addEventListener('pointermove', onMove);
+    doc.addEventListener('pointerup', onUp);
+    doc.addEventListener('pointercancel', onCancel);
+    doc.addEventListener('keydown', onKey, true);
+    return {
+        press(source, event, element) {
+            if (!enabled || event.button !== 0 || drag)
+                return;
+            begin(source, element, event.clientX, event.clientY);
+        },
+        setEnabled(on) {
+            enabled = on;
+            if (!on)
+                end(false);
+        },
+        destroy() {
+            end(false);
+            canvas.removeEventListener('pointerdown', onDown);
+            doc.removeEventListener('pointermove', onMove);
+            doc.removeEventListener('pointerup', onUp);
+            doc.removeEventListener('pointercancel', onCancel);
+            doc.removeEventListener('keydown', onKey, true);
+        },
+    };
+}
+//# sourceMappingURL=canvas-advanced.mjs.map

package/src/lib/canvas-advanced.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-advanced.mjs","sourceRoot":"","sources":["../../../../../libs/designer/src/lib/canvas-advanced.ts"],"names":[],"mappings":"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"}

package/src/lib/canvas-blocks.d.mts

@@ -0,0 +1,21 @@
+import type { ButtonNode, DividerNode, ImageNode, SlotNode, SpacerNode, TextNode } from '@fieldia/core';
+import type { ElementFactory } from './chrome.mjs';
+import type { Designer } from './designer.mjs';
+/**
+ * The blocks between fields on the canvas — words, a button, a line, room, a
+ * picture, a slot the app fills — drawn as the viewer draws them, so they sit
+ * in the grid exactly where they will. Picked, words and a button's label are
+ * typed in where they stand; a run of typing is one undo step.
+ */
+export type BlockNode = TextNode | ButtonNode | DividerNode | SpacerNode | ImageNode | SlotNode;
+export interface BlockViews {
+    /** The block's element, made or patched; `picked` opens its words to typing. */
+    draw(node: BlockNode, picked: boolean): HTMLElement;
+    /** Let go of the views of blocks no longer drawn. */
+    keep(ids: Set<string>): void;
+}
+export declare function blockViews(options: {
+    el: ElementFactory;
+    doc: Document;
+    designer: Designer;
+}): BlockViews;

package/src/lib/canvas-blocks.d.ts

@@ -0,0 +1,21 @@
+import type { ButtonNode, DividerNode, ImageNode, SlotNode, SpacerNode, TextNode } from '@fieldia/core';
+import type { ElementFactory } from './chrome';
+import type { Designer } from './designer';
+/**
+ * The blocks between fields on the canvas — words, a button, a line, room, a
+ * picture, a slot the app fills — drawn as the viewer draws them, so they sit
+ * in the grid exactly where they will. Picked, words and a button's label are
+ * typed in where they stand; a run of typing is one undo step.
+ */
+export type BlockNode = TextNode | ButtonNode | DividerNode | SpacerNode | ImageNode | SlotNode;
+export interface BlockViews {
+    /** The block's element, made or patched; `picked` opens its words to typing. */
+    draw(node: BlockNode, picked: boolean): HTMLElement;
+    /** Let go of the views of blocks no longer drawn. */
+    keep(ids: Set<string>): void;
+}
+export declare function blockViews(options: {
+    el: ElementFactory;
+    doc: Document;
+    designer: Designer;
+}): BlockViews;

package/src/lib/canvas-blocks.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.blockViews = blockViews;
+/** The element a block is drawn as, and what it is called by: a kind changed means a new element. */
+function shapeOf(node) {
+    if (node.type === 'text')
+        return `text:${node.style ?? 'paragraph'}`;
+    if (node.type === 'button')
+        return `button:${node.style ?? 'secondary'}`;
+    return node.type;
+}
+function blockViews(options) {
+    const { el, doc, designer } = options;
+    const views = new Map();
+    function make(node) {
+        const id = node.id;
+        switch (node.type) {
+            case 'text': {
+                const style = node.style ?? 'paragraph';
+                const element = el(style === 'heading' ? 'h3' : 'p', { class: `fd-text-${style} fd-canvas-block`, 'data-node': id });
+                element.addEventListener('input', () => designer.updateBlock(id, { text: element.textContent ?? '' }));
+                return element;
+            }
+            case 'button': {
+                // Not a real button: on the canvas it is picked and its words typed in, not pressed.
+                const element = el('span', { class: `fd-button fd-button-${node.style ?? 'secondary'} fd-canvas-block`, 'data-node': id });
+                element.addEventListener('input', () => designer.updateBlock(id, { label: element.textContent ?? '' }));
+                return element;
+            }
+            case 'divider':
+                return el('hr', { class: 'fd-divider fd-canvas-block', 'data-node': id });
+            case 'spacer':
+                return el('div', { class: 'fd-block fd-spacer fd-canvas-block', 'data-node': id, 'aria-label': designer.words.canvas.emptyRoom });
+            case 'image':
+                return el('img', { class: 'fd-block fd-image fd-canvas-block', 'data-node': id, alt: '' });
+            case 'slot':
+                return el('div', { class: 'fd-slot fd-canvas-block', 'data-node': id });
+        }
+    }
+    /** Words typed in where they stand: kept as they are while the cursor is in them. */
+    function words(element, text, picked) {
+        if (picked)
+            element.setAttribute('contenteditable', 'plaintext-only');
+        else
+            element.removeAttribute('contenteditable');
+        if (doc.activeElement !== element && element.textContent !== text)
+            element.textContent = text;
+    }
+    return {
+        draw(node, picked) {
+            let view = views.get(node.id);
+            if (view && view.shape !== shapeOf(node)) {
+                view.element.remove();
+                view = undefined;
+            }
+            if (!view)
+                views.set(node.id, (view = { element: make(node), shape: shapeOf(node) }));
+            const element = view.element;
+            if (node.type === 'text')
+                words(element, node.text, picked);
+            else if (node.type === 'button')
+                words(element, node.label, picked);
+            else if (node.type === 'image') {
+                if (element.getAttribute('src') !== node.src)
+                    element.setAttribute('src', node.src);
+                element.setAttribute('alt', node.alt);
+                // As wide, and where in its row, as the form draws it.
+                const width = typeof node.width === 'number' ? `${node.width}px` : node.width ? { small: '160px', medium: '320px', large: '480px', full: '100%' }[node.width] : '';
+                element.style.setProperty('--fd-image-width', width || null);
+                element.style.justifySelf = node.align ?? '';
+            }
+            else if (node.type === 'slot')
+                element.textContent = node.name;
+            const span = node.type === 'divider' ? undefined : node.colspan;
+            if (span)
+                element.style.setProperty('--fd-span', String(span));
+            else
+                element.style.removeProperty('--fd-span');
+            element.classList.toggle('fd-hidden-sometimes', node.invisible !== undefined);
+            return element;
+        },
+        keep(ids) {
+            for (const [id, view] of views) {
+                if (ids.has(id))
+                    continue;
+                view.element.remove();
+                views.delete(id);
+            }
+        },
+    };
+}
+//# sourceMappingURL=canvas-blocks.js.map

package/src/lib/canvas-blocks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-blocks.js","sourceRoot":"","sources":["../../../../../libs/designer/src/lib/canvas-blocks.ts"],"names":[],"mappings":"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"}

package/src/lib/canvas-blocks.mjs

@@ -0,0 +1,89 @@
+/** The element a block is drawn as, and what it is called by: a kind changed means a new element. */
+function shapeOf(node) {
+    if (node.type === 'text')
+        return `text:${node.style ?? 'paragraph'}`;
+    if (node.type === 'button')
+        return `button:${node.style ?? 'secondary'}`;
+    return node.type;
+}
+export function blockViews(options) {
+    const { el, doc, designer } = options;
+    const views = new Map();
+    function make(node) {
+        const id = node.id;
+        switch (node.type) {
+            case 'text': {
+                const style = node.style ?? 'paragraph';
+                const element = el(style === 'heading' ? 'h3' : 'p', { class: `fd-text-${style} fd-canvas-block`, 'data-node': id });
+                element.addEventListener('input', () => designer.updateBlock(id, { text: element.textContent ?? '' }));
+                return element;
+            }
+            case 'button': {
+                // Not a real button: on the canvas it is picked and its words typed in, not pressed.
+                const element = el('span', { class: `fd-button fd-button-${node.style ?? 'secondary'} fd-canvas-block`, 'data-node': id });
+                element.addEventListener('input', () => designer.updateBlock(id, { label: element.textContent ?? '' }));
+                return element;
+            }
+            case 'divider':
+                return el('hr', { class: 'fd-divider fd-canvas-block', 'data-node': id });
+            case 'spacer':
+                return el('div', { class: 'fd-block fd-spacer fd-canvas-block', 'data-node': id, 'aria-label': designer.words.canvas.emptyRoom });
+            case 'image':
+                return el('img', { class: 'fd-block fd-image fd-canvas-block', 'data-node': id, alt: '' });
+            case 'slot':
+                return el('div', { class: 'fd-slot fd-canvas-block', 'data-node': id });
+        }
+    }
+    /** Words typed in where they stand: kept as they are while the cursor is in them. */
+    function words(element, text, picked) {
+        if (picked)
+            element.setAttribute('contenteditable', 'plaintext-only');
+        else
+            element.removeAttribute('contenteditable');
+        if (doc.activeElement !== element && element.textContent !== text)
+            element.textContent = text;
+    }
+    return {
+        draw(node, picked) {
+            let view = views.get(node.id);
+            if (view && view.shape !== shapeOf(node)) {
+                view.element.remove();
+                view = undefined;
+            }
+            if (!view)
+                views.set(node.id, (view = { element: make(node), shape: shapeOf(node) }));
+            const element = view.element;
+            if (node.type === 'text')
+                words(element, node.text, picked);
+            else if (node.type === 'button')
+                words(element, node.label, picked);
+            else if (node.type === 'image') {
+                if (element.getAttribute('src') !== node.src)
+                    element.setAttribute('src', node.src);
+                element.setAttribute('alt', node.alt);
+                // As wide, and where in its row, as the form draws it.
+                const width = typeof node.width === 'number' ? `${node.width}px` : node.width ? { small: '160px', medium: '320px', large: '480px', full: '100%' }[node.width] : '';
+                element.style.setProperty('--fd-image-width', width || null);
+                element.style.justifySelf = node.align ?? '';
+            }
+            else if (node.type === 'slot')
+                element.textContent = node.name;
+            const span = node.type === 'divider' ? undefined : node.colspan;
+            if (span)
+                element.style.setProperty('--fd-span', String(span));
+            else
+                element.style.removeProperty('--fd-span');
+            element.classList.toggle('fd-hidden-sometimes', node.invisible !== undefined);
+            return element;
+        },
+        keep(ids) {
+            for (const [id, view] of views) {
+                if (ids.has(id))
+                    continue;
+                view.element.remove();
+                views.delete(id);
+            }
+        },
+    };
+}
+//# sourceMappingURL=canvas-blocks.mjs.map

package/src/lib/canvas-blocks.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-blocks.mjs","sourceRoot":"","sources":["../../../../../libs/designer/src/lib/canvas-blocks.ts"],"names":[],"mappings":"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"}

package/src/lib/canvas-drag.d.mts

@@ -0,0 +1,64 @@
+import type { DesignerWords } from './designer-words.mjs';
+/**
+ * Dragging on the canvas: a field to another place, in its section or
+ * another, or a tile from the toolbox onto the page. What is carried leaves
+ * its place, and a gap of its size opens where it would land, the fields
+ * around it moving aside — so where it goes is seen, not guessed; a small
+ * chip with its name follows the pointer. Let go over a section, it lands in
+ * the gap as one edit; let go anywhere else, or press Escape, and nothing
+ * changes. Resting on a closed tab opens it, so a field can go into another
+ * tab. Held at the window's top or bottom edge, the page scrolls.
+ *
+ * The gap moves only when the pointer crosses the middle of another field —
+ * over the gap itself nothing moves — so the fields moving aside never chase
+ * the pointer into a flicker.
+ *
+ * A list's columns, side by side, take the same drag: their row carries
+ * `data-drop-flow="row"`, and a line down the whole table shows the place,
+ * as a table's columns cannot make room the way a grid's fields do.
+ *
+ * A press that does not move is a click, left to the click handlers; the
+ * click that ends a real drag is swallowed. Places are read from where things
+ * are on screen, not hit-tested, so a field's own widget — inert on the
+ * canvas — never gets in the way.
+ */
+interface Rect {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+}
+/** How many of the fields, in reading order, come before a point: where one let go there would go. */
+export declare function dropIndex(cards: readonly Rect[], x: number, y: number): number;
+/** What is carried: a field on the canvas, or what a toolbox tile adds. */
+export type DragSource = {
+    node: string;
+} | {
+    tool: string;
+};
+export interface CanvasDragOptions {
+    /** The designer's words, for what a carried thing is called when it shows none. English unless given. */
+    words?: DesignerWords;
+    /**
+     * The canvas: its sections carry `data-drop-section` — and `data-drop-flow="column"`
+     * where they are one column, as a survey's page is — its fields `.fd-canvas-field[data-node]`.
+     * A section's fields sit in its `[data-drop-grid]`, or in the section itself.
+     */
+    canvas: HTMLElement;
+    /** What can be carried, when not the screen's fields: a survey's questions, say. */
+    cards?: string;
+    /** What counts as a place in a section, when more than what can be carried: the screen's blocks and groups between its fields. */
+    parts?: string;
+    drop(source: DragSource, sectionId: string, index: number): void;
+    /** Whether it carries anything now: off while the Advanced canvas carries instead. On by default. */
+    enabled?(): boolean;
+    /** Where an element is on screen; the browser's own by default. */
+    rectOf?: (element: Element) => DOMRect;
+}
+export interface CanvasDrag {
+    /** A toolbox tile was pressed: carry it if the pointer moves. */
+    press(source: DragSource, event: PointerEvent, element: HTMLElement): void;
+    destroy(): void;
+}
+export declare function canvasDrag(options: CanvasDragOptions): CanvasDrag;
+export {};

package/src/lib/canvas-drag.d.ts

@@ -0,0 +1,64 @@
+import type { DesignerWords } from './designer-words';
+/**
+ * Dragging on the canvas: a field to another place, in its section or
+ * another, or a tile from the toolbox onto the page. What is carried leaves
+ * its place, and a gap of its size opens where it would land, the fields
+ * around it moving aside — so where it goes is seen, not guessed; a small
+ * chip with its name follows the pointer. Let go over a section, it lands in
+ * the gap as one edit; let go anywhere else, or press Escape, and nothing
+ * changes. Resting on a closed tab opens it, so a field can go into another
+ * tab. Held at the window's top or bottom edge, the page scrolls.
+ *
+ * The gap moves only when the pointer crosses the middle of another field —
+ * over the gap itself nothing moves — so the fields moving aside never chase
+ * the pointer into a flicker.
+ *
+ * A list's columns, side by side, take the same drag: their row carries
+ * `data-drop-flow="row"`, and a line down the whole table shows the place,
+ * as a table's columns cannot make room the way a grid's fields do.
+ *
+ * A press that does not move is a click, left to the click handlers; the
+ * click that ends a real drag is swallowed. Places are read from where things
+ * are on screen, not hit-tested, so a field's own widget — inert on the
+ * canvas — never gets in the way.
+ */
+interface Rect {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+}
+/** How many of the fields, in reading order, come before a point: where one let go there would go. */
+export declare function dropIndex(cards: readonly Rect[], x: number, y: number): number;
+/** What is carried: a field on the canvas, or what a toolbox tile adds. */
+export type DragSource = {
+    node: string;
+} | {
+    tool: string;
+};
+export interface CanvasDragOptions {
+    /** The designer's words, for what a carried thing is called when it shows none. English unless given. */
+    words?: DesignerWords;
+    /**
+     * The canvas: its sections carry `data-drop-section` — and `data-drop-flow="column"`
+     * where they are one column, as a survey's page is — its fields `.fd-canvas-field[data-node]`.
+     * A section's fields sit in its `[data-drop-grid]`, or in the section itself.
+     */
+    canvas: HTMLElement;
+    /** What can be carried, when not the screen's fields: a survey's questions, say. */
+    cards?: string;
+    /** What counts as a place in a section, when more than what can be carried: the screen's blocks and groups between its fields. */
+    parts?: string;
+    drop(source: DragSource, sectionId: string, index: number): void;
+    /** Whether it carries anything now: off while the Advanced canvas carries instead. On by default. */
+    enabled?(): boolean;
+    /** Where an element is on screen; the browser's own by default. */
+    rectOf?: (element: Element) => DOMRect;
+}
+export interface CanvasDrag {
+    /** A toolbox tile was pressed: carry it if the pointer moves. */
+    press(source: DragSource, event: PointerEvent, element: HTMLElement): void;
+    destroy(): void;
+}
+export declare function canvasDrag(options: CanvasDragOptions): CanvasDrag;
+export {};