quilt-vanilla 0.1.0

package/src/resize.ts

@@ -0,0 +1,65 @@
+import { bounds, DIVIDER, findNode } from 'quilt-core';
+import type { Axis, Layout, Node } from 'quilt-core';
+
+/** Resize only the branches touching a divider, preserving every farther edge. */
+export function isolatedResize(
+  layout: Layout,
+  splitId: string,
+  extent: (node: Node, axis: Axis) => number,
+) {
+  const split = findNode(layout.root, splitId);
+  if (split?.kind !== 'split') throw new Error('Split not found');
+  const axis = split.axis;
+  const sizes = new Map<string, number>();
+  const original: Record<string, number> = {};
+  function capture(node: Node) {
+    sizes.set(node.id, extent(node, axis));
+    if (node.kind === 'split') {
+      original[node.id] = node.ratio;
+      node.children.forEach(capture);
+    }
+  }
+  capture(split);
+  function limits(node: Node, start: boolean): [number, number] {
+    if (node.kind === 'group') {
+      const b = bounds(node, layout),
+        size = sizes.get(node.id)!;
+      return axis === 'horizontal'
+        ? [b.minWidth - size, b.maxWidth - size]
+        : [b.minHeight - size, b.maxHeight - size];
+    }
+    if (node.axis === axis) return limits(node.children[start ? 0 : 1], start);
+    const a = limits(node.children[0], start),
+      b = limits(node.children[1], start);
+    return [Math.max(a[0], b[0]), Math.min(a[1], b[1])];
+  }
+  const a = limits(split.children[0], false),
+    b = limits(split.children[1], true);
+  const available = sizes.get(split.id)! - (split.gap ?? DIVIDER);
+  return {
+    original,
+    ratios(ratio: number) {
+      const delta = Math.max(
+        Math.max(a[0], -b[1]),
+        Math.min(Math.min(a[1], -b[0]), available * ratio - sizes.get(split.children[0].id)!),
+      );
+      const ratios: Record<string, number> = {};
+      function adjust(node: Node, start: boolean, change: number) {
+        if (node.kind === 'group') return;
+        if (node.axis === axis) {
+          const first = sizes.get(node.children[0].id)! + (start ? change : 0);
+          const total = sizes.get(node.id)! + change - (node.gap ?? DIVIDER);
+          ratios[node.id] = Math.max(0.001, Math.min(0.999, first / total));
+          adjust(node.children[start ? 0 : 1], start, change);
+        } else node.children.forEach((child) => adjust(child, start, change));
+      }
+      ratios[split.id] = Math.max(
+        0.001,
+        Math.min(0.999, (sizes.get(split.children[0].id)! + delta) / available),
+      );
+      adjust(split.children[0], false, delta);
+      adjust(split.children[1], true, -delta);
+      return ratios;
+    },
+  };
+}

package/src/shortcuts.ts

@@ -0,0 +1,90 @@
+import type { Group } from 'quilt-core';
+import { findNode } from 'quilt-core';
+import type { LayoutOptions } from './types.js';
+import type { Scope } from './lifetime.js';
+export function shortcutEnabled(
+  options: LayoutOptions,
+  key: 'maximize' | 'middleClickClose' | 'addTab' | 'restoreClosedTab',
+) {
+  return (
+    options.shortcuts === true ||
+    (typeof options.shortcuts === 'object' && options.shortcuts[key] === true)
+  );
+}
+export function bindShortcuts(
+  root: HTMLElement,
+  options: LayoutOptions,
+  scope: Scope,
+  act: (fn: () => void) => void,
+  addTab: (group: Group) => void,
+) {
+  if (
+    !shortcutEnabled(options, 'maximize') &&
+    !shortcutEnabled(options, 'addTab') &&
+    !shortcutEnabled(options, 'restoreClosedTab')
+  )
+    return;
+  let hovered: string | undefined;
+  scope.listen(root, 'pointerover', (event) => {
+    hovered = (event.target as Element).closest<HTMLElement>('.layouts-group')?.dataset.nodeId;
+  });
+  scope.listen(root, 'pointerleave', () => {
+    hovered = undefined;
+  });
+  scope.listen(root.ownerDocument, 'keydown', (event) => {
+    const e = event as KeyboardEvent;
+    const maximizeKey = (e.altKey && e.code === 'Space') || (!e.altKey && e.key === '`');
+    const addTabKey = !e.metaKey && !e.altKey && e.key.toLowerCase() === 't';
+    const maximize = !e.metaKey && maximizeKey && shortcutEnabled(options, 'maximize');
+    const restore =
+      !e.metaKey &&
+      !e.altKey &&
+      e.key.toLowerCase() === 'r' &&
+      shortcutEnabled(options, 'restoreClosedTab');
+    const create = addTabKey && shortcutEnabled(options, 'addTab');
+    if (
+      e.isComposing ||
+      e.defaultPrevented ||
+      e.repeat ||
+      (!maximize && !create && !restore) ||
+      e.ctrlKey ||
+      e.shiftKey
+    )
+      return;
+    const target = e.target as HTMLElement | null;
+    if (
+      target?.closest(
+        'input, textarea, select, [contenteditable]:not([contenteditable="false"]), dialog',
+      ) ||
+      root.ownerDocument.querySelector('dialog[open]')
+    )
+      return;
+    if (restore) {
+      if (options.store.canRestoreClosedTab()) {
+        e.preventDefault();
+        act(() => options.store.restoreClosedTab());
+      }
+      return;
+    }
+    const focused =
+      target && root.contains(target)
+        ? target.closest<HTMLElement>('.layouts-group')?.dataset.nodeId
+        : undefined;
+    const id = create ? hovered : (hovered ?? focused);
+    const layout = options.store.getSnapshot();
+    const group = id ? findNode(layout.root, id) : undefined;
+    if (group?.kind !== 'group') return;
+    if (
+      create &&
+      (!options.tabs?.list().length ||
+        !group.panes.every((paneId) => options.store.can(paneId, 'move')))
+    )
+      return;
+    e.preventDefault();
+    act(() =>
+      create
+        ? addTab(group)
+        : options.store.maximize(layout.maximized === group.id ? null : group.id),
+    );
+  });
+}