@adecore/ui 0.19.0 → 0.20.0

package/src/workspace/model.ts

@@ -0,0 +1,440 @@
+export type SplitAxis = 'horizontal' | 'vertical';
+export type SplitSide = 'left' | 'right' | 'top' | 'bottom';
+
+export interface SplitPane {
+    type: 'pane';
+    id: string;
+    views: string[];
+    active: string | null;
+}
+
+export interface SplitBranch {
+    type: 'split';
+    id: string;
+    axis: SplitAxis;
+    children: SplitNode[];
+    sizes: number[];
+}
+
+export type SplitNode = SplitPane | SplitBranch;
+
+export interface SplitLayout {
+    root: SplitNode;
+    focused: string;
+    maximized: string | null;
+}
+
+export type SplitCommand =
+    | { type: 'activate'; paneId: string; viewId: string }
+    | { type: 'focus'; paneId: string }
+    | { type: 'maximize'; paneId: string | null }
+    | { type: 'close'; viewId: string }
+    | { type: 'closePane'; paneId: string }
+    | { type: 'insert'; paneId: string; viewId: string; index?: number }
+    | { type: 'split'; paneId: string; side: SplitSide; newPane: SplitPane; splitId: string }
+    | { type: 'move'; sourceId: string; targetId: string; viewId?: string; side?: SplitSide; index?: number; newPaneId?: string; splitId?: string }
+    | { type: 'swap'; sourceId: string; targetId: string; viewId?: string }
+    | { type: 'resize'; splitId: string; sizes: number[] }
+    | { type: 'equalize'; splitId: string; index?: number }
+    | { type: 'equalizeAxis'; axis: SplitAxis; length?: number; gap?: number };
+
+export function createSplitLayout(views: string[] = [], paneId = 'main'): SplitLayout {
+    const unique = [...new Set(views)];
+    return { root: { type: 'pane', id: paneId, views: unique, active: unique[0] ?? null }, focused: paneId, maximized: null };
+}
+
+export function splitPanes(node: SplitNode): SplitPane[] {
+    return node.type === 'pane' ? [node] : node.children.flatMap(splitPanes);
+}
+
+export function findSplitNode(node: SplitNode, id: string): SplitNode | undefined {
+    if (node.id === id) {
+        return node;
+    }
+    return node.type === 'split' ? node.children.map((child) => findSplitNode(child, id)).find(Boolean) : undefined;
+}
+
+function shares(values: number[], length: number): number[] {
+    const safe = Array.from({ length }, (_, i) => (Number.isFinite(values[i]) && values[i]! > 0 ? values[i]! : 1));
+    const largest = Math.max(...safe, 1);
+    const total = safe.reduce((sum, value) => sum + value / largest, 0);
+    return safe.map((value) => value / largest / total);
+}
+
+function flattenSplits(node: SplitNode): SplitNode {
+    if (node.type === 'pane') {
+        return node;
+    }
+    const children: SplitNode[] = [];
+    const sizes: number[] = [];
+    node.children.forEach((child, i) => {
+        const next = flattenSplits(child);
+        // A divider balances neighboring tracks, not a pane against a hidden group on the same axis.
+        if (next.type === 'split' && next.axis === node.axis) {
+            children.push(...next.children);
+            sizes.push(...next.sizes.map((size) => size * node.sizes[i]!));
+        } else {
+            children.push(next);
+            sizes.push(node.sizes[i]!);
+        }
+    });
+    if (children.length === node.children.length && children.every((child, i) => child === node.children[i])) {
+        return node;
+    }
+    return { ...node, children, sizes: shares(sizes, children.length) };
+}
+
+/** Repairs persisted data at the application boundary; view payloads never enter the layout. */
+export function normalizeSplitLayout(value: unknown): SplitLayout {
+    const ids = new Set<string>();
+    const views = new Set<string>();
+    const seen = new Set<object>();
+    let serial = 0;
+    const nextId = (candidate: unknown): string => {
+        let id = typeof candidate === 'string' && candidate.length > 0 ? candidate : `pane-${serial++}`;
+        while (ids.has(id)) {
+            id = `pane-${serial++}`;
+        }
+        ids.add(id);
+        return id;
+    };
+    const read = (input: unknown, depth: number): SplitNode | null => {
+        if (input === null || typeof input !== 'object' || seen.has(input) || depth > 64) {
+            return null;
+        }
+        seen.add(input);
+        const row = input as Record<string, unknown>;
+        if (row.type === 'pane') {
+            const items = Array.isArray(row.views)
+                ? row.views.filter((view): view is string => {
+                      if (typeof view !== 'string' || view.length === 0 || views.has(view)) {
+                          return false;
+                      }
+                      views.add(view);
+                      return true;
+                  })
+                : [];
+            return {
+                type: 'pane',
+                id: nextId(row.id),
+                views: items,
+                active: typeof row.active === 'string' && items.includes(row.active) ? row.active : (items[0] ?? null)
+            };
+        }
+        if (row.type !== 'split' || !Array.isArray(row.children)) {
+            return null;
+        }
+        const children: SplitNode[] = [];
+        const sizes: number[] = [];
+        row.children.forEach((child, i) => {
+            const result = read(child, depth + 1);
+            if (result) {
+                children.push(result);
+                sizes.push(Array.isArray(row.sizes) ? Number(row.sizes[i]) : 1);
+            }
+        });
+        if (children.length < 2) {
+            return children[0] ?? null;
+        }
+        return {
+            type: 'split',
+            id: nextId(row.id),
+            axis: row.axis === 'vertical' ? 'vertical' : 'horizontal',
+            children,
+            sizes: shares(sizes, children.length)
+        };
+    };
+    const input = value !== null && typeof value === 'object' ? (value as Record<string, unknown>) : {};
+    const root = flattenSplits(read(input.root, 0) ?? createSplitLayout().root);
+    const panes = splitPanes(root);
+    return {
+        root,
+        focused: panes.find((pane) => pane.id === input.focused)?.id ?? panes[0]!.id,
+        maximized: panes.find((pane) => pane.id === input.maximized)?.id ?? null
+    };
+}
+
+function replace(node: SplitNode, id: string, transform: (node: SplitNode) => SplitNode | null): SplitNode | null {
+    if (node.id === id) {
+        return transform(node);
+    }
+    if (node.type === 'pane') {
+        return node;
+    }
+    const children: SplitNode[] = [];
+    const sizes: number[] = [];
+    node.children.forEach((child, i) => {
+        const next = replace(child, id, transform);
+        if (next) {
+            children.push(next);
+            sizes.push(node.sizes[i]!);
+        }
+    });
+    if (children.every((child, i) => child === node.children[i]) && children.length === node.children.length) {
+        return node;
+    }
+    if (children.length < 2) {
+        return children[0] ?? null;
+    }
+    return { ...node, children, sizes: shares(sizes, children.length) };
+}
+
+function finish(layout: SplitLayout, root: SplitNode | null, focus = layout.focused): SplitLayout {
+    const next = flattenSplits(root ?? createSplitLayout([], layout.focused).root);
+    const panes = splitPanes(next);
+    return {
+        root: next,
+        focused: panes.some((pane) => pane.id === focus) ? focus : panes[0]!.id,
+        maximized: panes.some((pane) => pane.id === layout.maximized) ? layout.maximized : null
+    };
+}
+
+function without(pane: SplitPane, views: string[]): SplitPane {
+    const remaining = pane.views.filter((view) => !views.includes(view));
+    const position = Math.max(0, pane.views.indexOf(pane.active ?? ''));
+    return {
+        ...pane,
+        views: remaining,
+        active: remaining.includes(pane.active ?? '') ? pane.active : (remaining[Math.min(position, remaining.length - 1)] ?? null)
+    };
+}
+
+function beside(target: SplitPane, pane: SplitPane, side: SplitSide, id: string): SplitBranch {
+    return {
+        type: 'split',
+        id,
+        axis: side === 'left' || side === 'right' ? 'horizontal' : 'vertical',
+        children: side === 'left' || side === 'top' ? [pane, target] : [target, pane],
+        sizes: [0.5, 0.5]
+    };
+}
+
+function equalizeAxis(root: SplitNode, axis: SplitAxis, length: number, gap: number): SplitNode {
+    const tracks = new Map<string, number>();
+    const measure = (node: SplitNode): number => {
+        const children = node.type === 'split' ? node.children.map(measure) : [];
+        const count = node.type === 'pane' ? 1 : node.axis === axis ? children.reduce((sum, value) => sum + value, 0) : Math.max(...children);
+        tracks.set(node.id, count);
+        return count;
+    };
+    measure(root);
+    const distribute = (node: SplitNode, extent: number): SplitNode => {
+        if (node.type === 'pane') {
+            return node;
+        }
+        if (node.axis !== axis) {
+            return { ...node, children: node.children.map((child) => distribute(child, extent)) };
+        }
+        const count = tracks.get(node.id)!;
+        const spacing = Math.min(gap, extent / (count - 1));
+        const unit = Math.max(0, extent - spacing * (count - 1)) / count;
+        // Spanning panels also occupy the gaps between their tracks.
+        const lengths = node.children.map((child) => {
+            const span = tracks.get(child.id)!;
+            return Math.max(Number.EPSILON, unit * span + spacing * (span - 1));
+        });
+        return { ...node, sizes: shares(lengths, lengths.length), children: node.children.map((child, i) => distribute(child, lengths[i]!)) };
+    };
+    return distribute(root, length);
+}
+
+/** Invalid or stale commands are no-ops. IDs for new nodes come from the caller. */
+export function updateSplitLayout(layout: SplitLayout, command: SplitCommand): SplitLayout {
+    const panes = splitPanes(layout.root);
+    const pane = 'paneId' in command ? panes.find((item) => item.id === command.paneId) : undefined;
+    switch (command.type) {
+        case 'focus':
+            return pane && layout.focused !== pane.id ? { ...layout, focused: pane.id } : layout;
+        case 'maximize':
+            return command.paneId === null || pane ? { ...layout, maximized: command.paneId, focused: pane?.id ?? layout.focused } : layout;
+        case 'activate':
+            return pane?.views.includes(command.viewId)
+                ? finish(
+                      layout,
+                      replace(layout.root, pane.id, () => ({ ...pane, active: command.viewId })),
+                      pane.id
+                  )
+                : layout;
+        case 'close': {
+            const source = panes.find((item) => item.views.includes(command.viewId));
+            if (!source) {
+                return layout;
+            }
+            const next = without(source, [command.viewId]);
+            return finish(
+                layout,
+                replace(layout.root, source.id, () => (next.views.length || panes.length === 1 ? next : null))
+            );
+        }
+        case 'closePane':
+            return pane
+                ? finish(
+                      layout,
+                      replace(layout.root, pane.id, () => null)
+                  )
+                : layout;
+        case 'insert': {
+            if (!pane) {
+                return layout;
+            }
+            const source = panes.find((item) => item.views.includes(command.viewId));
+            if (source) {
+                return updateSplitLayout(layout, { type: 'move', sourceId: source.id, targetId: pane.id, viewId: command.viewId, index: command.index });
+            }
+            const views = [...pane.views];
+            views.splice(Math.max(0, Math.min(views.length, command.index ?? views.length)), 0, command.viewId);
+            return finish(
+                layout,
+                replace(layout.root, pane.id, () => ({ ...pane, views, active: command.viewId })),
+                pane.id
+            );
+        }
+        case 'split': {
+            if (
+                !pane ||
+                findSplitNode(layout.root, command.newPane.id) ||
+                findSplitNode(layout.root, command.splitId) ||
+                command.newPane.id === command.splitId
+            ) {
+                return layout;
+            }
+            const allViews = new Set(panes.flatMap((item) => item.views));
+            if (command.newPane.views.some((view) => allViews.has(view)) || new Set(command.newPane.views).size !== command.newPane.views.length) {
+                return layout;
+            }
+            const added = {
+                ...command.newPane,
+                active: command.newPane.views.includes(command.newPane.active ?? '') ? command.newPane.active : (command.newPane.views[0] ?? null)
+            };
+            return finish(
+                { ...layout, maximized: null },
+                replace(layout.root, pane.id, () => beside(pane, added, command.side, command.splitId)),
+                added.id
+            );
+        }
+        case 'swap': {
+            const source = panes.find((item) => item.id === command.sourceId);
+            const target = panes.find((item) => item.id === command.targetId);
+            if (
+                !source ||
+                !target ||
+                source === target ||
+                source.views.length === 0 ||
+                (command.viewId !== undefined && !source.views.includes(command.viewId))
+            ) {
+                return layout;
+            }
+            if (command.viewId === undefined || source.views.length === 1) {
+                const exchange = (node: SplitNode): SplitNode => {
+                    if (node.id === source.id) {
+                        return target;
+                    }
+                    if (node.id === target.id) {
+                        return source;
+                    }
+                    return node.type === 'pane' ? node : { ...node, children: node.children.map(exchange) };
+                };
+                return finish({ ...layout, maximized: null }, exchange(layout.root), source.id);
+            }
+            const moving = command.viewId;
+            const displaced = target.active;
+            const sourceNext =
+                displaced === null
+                    ? without(source, [moving])
+                    : {
+                          ...source,
+                          views: source.views.map((view) => (view === moving ? displaced : view)),
+                          active: source.active === moving ? displaced : source.active
+                      };
+            const targetNext = {
+                ...target,
+                views: displaced === null ? [moving] : target.views.map((view) => (view === displaced ? moving : view)),
+                active: moving
+            };
+            const root = replace(layout.root, source.id, () => sourceNext)!;
+            return finish(
+                { ...layout, maximized: null },
+                replace(root, target.id, () => targetNext),
+                target.id
+            );
+        }
+        case 'move': {
+            const source = panes.find((item) => item.id === command.sourceId);
+            const target = panes.find((item) => item.id === command.targetId);
+            if (!source || !target || (command.viewId !== undefined && !source.views.includes(command.viewId))) {
+                return layout;
+            }
+            const moving = command.viewId === undefined ? source.views : [command.viewId];
+            if (!moving.length || (source === target && (command.viewId === undefined || (command.side !== undefined && source.views.length === 1)))) {
+                return layout;
+            }
+            let added: SplitPane | undefined;
+            if (command.side) {
+                const id = command.viewId === undefined ? source.id : command.newPaneId;
+                if (
+                    !id ||
+                    !command.splitId ||
+                    id === command.splitId ||
+                    findSplitNode(layout.root, command.splitId) ||
+                    (findSplitNode(layout.root, id) && !(id === source.id && command.viewId === undefined))
+                ) {
+                    return layout;
+                }
+                added = { type: 'pane', id, views: moving, active: command.viewId ?? source.active };
+            }
+            const remaining = without(source, moving);
+            const root = replace(layout.root, source.id, () => (remaining.views.length || source === target ? remaining : null));
+            if (!root) {
+                return layout;
+            }
+            const next = replace(root, target.id, (node) => {
+                if (node.type !== 'pane') {
+                    return node;
+                }
+                if (added && command.side && command.splitId) {
+                    return beside(node, added, command.side, command.splitId);
+                }
+                const gap = Math.max(0, Math.min(target.views.length, command.index ?? target.views.length));
+                const lifted = source === target ? target.views.slice(0, gap).filter((view) => moving.includes(view)).length : 0;
+                const views = [...node.views];
+                views.splice(gap - lifted, 0, ...moving);
+                return { ...node, views, active: command.viewId ?? source.active ?? views[0] ?? null };
+            });
+            return finish({ ...layout, maximized: null }, next, added?.id ?? target.id);
+        }
+        case 'equalizeAxis': {
+            const length = command.length ?? 1;
+            const gap = command.gap ?? 0;
+            if (layout.root.type === 'pane' || !Number.isFinite(length) || length <= 0 || !Number.isFinite(gap) || gap < 0) {
+                return layout;
+            }
+            return finish(layout, equalizeAxis(layout.root, command.axis, length, gap));
+        }
+        case 'resize':
+        case 'equalize': {
+            const node = findSplitNode(layout.root, command.splitId);
+            if (!node || node.type !== 'split') {
+                return layout;
+            }
+            let sizes = [...node.sizes];
+            if (command.type === 'resize') {
+                if (command.sizes.length !== node.children.length || command.sizes.some((size) => !Number.isFinite(size) || size <= 0)) {
+                    return layout;
+                }
+                sizes = shares(command.sizes, node.children.length);
+            } else if (command.index === undefined) {
+                sizes = node.children.map(() => 1 / node.children.length);
+            } else {
+                const index = command.index;
+                if (index < 0 || index >= sizes.length - 1) {
+                    return layout;
+                }
+                sizes[index] = sizes[index + 1] = (sizes[index]! + sizes[index + 1]!) / 2;
+            }
+            return finish(
+                layout,
+                replace(layout.root, node.id, () => ({ ...node, sizes }))
+            );
+        }
+    }
+}

package/src/workspace/preview.ts

@@ -0,0 +1,116 @@
+/* The gap above the indicator's tab, so it reads as a tab standing in the bar. */
+export const TAB_TOP_INSET = 4;
+
+/* The corner of the indicator's tab, and of its body, which is `rounded-sm` like the other drop indicator. */
+export const TAB_RADIUS = 6;
+export const BODY_RADIUS = 4;
+
+/* The stroke is centered on the path, so the path runs half of it inside the box to keep the outer edge on it. */
+export const DROP_STROKE = 2;
+
+/*
+ * What the drop preview draws, in the grid's coordinates. A tab and a plain rectangle are the same
+ * shape: a tab standing on a body, where the rectangle's tab has no height. `x` and `y` are the
+ * top left of the outline's box, which for a tab is the cell with its bar.
+ */
+export interface DropPreviewShape {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    /* The part of the box above the body that the tab stands in; 0 for a rectangle. */
+    barHeight: number;
+    /* The tab's left edge and the top of its box, in the same coordinates as `x` and `y`. */
+    tabLeft: number;
+    tabWidth: number;
+    tabTop: number;
+    radius: number;
+}
+
+export interface PreviewRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+
+function coordinate(value: number): string {
+    return String(Math.round(value * 100) / 100 + 0);
+}
+
+/*
+ * The preview for a split or a trade: the rectangle as a tab with no height, parked just inside its
+ * top left corner so the corner keeps its radius. It is where a tab target grows out of the rectangle.
+ */
+export function rectPreview({ x, y, width, height }: PreviewRect): DropPreviewShape {
+    return { x, y, width, height, barHeight: 0, tabLeft: x + BODY_RADIUS, tabWidth: 0, tabTop: y, radius: TAB_RADIUS };
+}
+
+/* The preview for a tab: the tab and the body of the cell it lands in, `origin` being the cell's top left in the grid. */
+export function tabPreview(drop: TabDrop, origin: { x: number; y: number }): DropPreviewShape {
+    return {
+        x: origin.x,
+        y: origin.y,
+        width: drop.width,
+        height: drop.height,
+        barHeight: drop.barHeight,
+        tabLeft: origin.x + drop.left,
+        tabWidth: drop.tabWidth,
+        tabTop: origin.y + TAB_TOP_INSET,
+        radius: TAB_RADIUS
+    };
+}
+
+/*
+ * The outline of a tab grown into the body under it, as one closed path so no line runs between the
+ * two. The commands are the same whatever the numbers are (an arc of radius 0 is a straight line), so
+ * the browser can move one outline into another with a transition on `d`. `inset` is how far the
+ * path runs inside the box, which is half the stroke, so the outer edge of the line is on the box.
+ */
+export function dropPreviewPath({ x, y, width, height, barHeight, tabLeft, tabWidth, tabTop, radius }: DropPreviewShape, inset = DROP_STROKE / 2): string {
+    const left = inset;
+    const right = width - inset;
+    const bottom = height - inset;
+    const top = barHeight + inset;
+    const tabStart = Math.max(left, Math.min(tabLeft - x + inset, right));
+    const tabEnd = Math.max(tabStart, Math.min(tabLeft - x + tabWidth - inset, right));
+    const tabY = Math.min(tabTop - y + inset, top);
+    const tabCorner = Math.max(0, Math.min(radius - inset, (tabEnd - tabStart) / 2, top - tabY));
+    const bodyCorner = Math.max(0, BODY_RADIUS - inset);
+    // A tab flush with a side of the box continues that side, so the body has no corner there.
+    const cornerLeft = Math.min(bodyCorner, tabStart - left);
+    const cornerRight = Math.min(bodyCorner, right - tabEnd);
+    const cornerBottom = Math.max(0, Math.min(bodyCorner, (right - left) / 2, (bottom - top) / 2));
+    const at = (px: number, py: number): string => `${coordinate(x + px)},${coordinate(y + py)}`;
+    const arc = (corner: number, px: number, py: number): string => `A${coordinate(corner)},${coordinate(corner)} 0 0 1 ${at(px, py)}`;
+    return [
+        `M${at(left + cornerLeft, top)}`,
+        `H${coordinate(x + tabStart)}`,
+        `V${coordinate(y + tabY + tabCorner)}`,
+        arc(tabCorner, tabStart + tabCorner, tabY),
+        `H${coordinate(x + tabEnd - tabCorner)}`,
+        arc(tabCorner, tabEnd, tabY + tabCorner),
+        `V${coordinate(y + top)}`,
+        `H${coordinate(x + right - cornerRight)}`,
+        arc(cornerRight, right, top + cornerRight),
+        `V${coordinate(y + bottom - cornerBottom)}`,
+        arc(cornerBottom, right - cornerBottom, bottom),
+        `H${coordinate(x + left + cornerBottom)}`,
+        arc(cornerBottom, left, bottom - cornerBottom),
+        `V${coordinate(y + top + cornerLeft)}`,
+        arc(cornerLeft, left + cornerLeft, top),
+        'Z'
+    ].join(' ');
+}
+
+/* Where a view dragged over a cell's bar would land as a tab, in the cell's own coordinates. */
+export interface TabDrop {
+    /* The gap in the strip it lands in, counted in tabs from the left. */
+    gap: number;
+    left: number;
+    tabWidth: number;
+    /* The cell as a whole, bar included. */
+    width: number;
+    height: number;
+    barHeight: number;
+}