svelte-tiler 0.0.1

package/dist/shared/spatial.js

@@ -0,0 +1,22 @@
+export function getEdgePart(a, b, x, ratio) {
+    if (x < a || x > b) {
+        return undefined;
+    }
+    x -= a;
+    const len = b - a;
+    const start = len * ratio;
+    if (x < start) {
+        return 'start';
+    }
+    const end = len * (1 - ratio);
+    if (x > end) {
+        return 'end';
+    }
+    return 'center';
+}
+export function getRectParts(rect, x, y, ratio) {
+    return {
+        hpart: getEdgePart(rect.left, rect.right, x, ratio),
+        vpart: getEdgePart(rect.top, rect.bottom, y, ratio),
+    };
+}

package/dist/tiler.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import {
+    setTilerContext,
+    TilerContext,
+    type TilerContextOptions,
+  } from './context.svelte.js';
+  import type { Tile } from './model.js';
+  import Panel from './panel.svelte';
+
+  let {
+    layout = $bindable(),
+    ...rest
+  }: { layout: Tile | undefined } & TilerContextOptions = $props();
+
+  setTilerContext(new TilerContext(rest));
+</script>
+
+<Panel bind:layout />

package/dist/tiler.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type TilerContextOptions } from './context.svelte.ts';
+import type { Tile } from './model.js';
+type $$ComponentProps = {
+    layout: Tile | undefined;
+} & TilerContextOptions;
+declare const Tiler: import("svelte").Component<$$ComponentProps, {}, "layout">;
+type Tiler = ReturnType<typeof Tiler>;
+export default Tiler;

package/dist/tiles/leaf.svelte

@@ -0,0 +1,43 @@
+<script lang="ts" module>
+  import { createContext, type Snippet } from 'svelte';
+
+  import type { Registry } from '../shared/registry.js';
+  import type { TileProps, Tiles } from '../model.js';
+
+  declare module '../model.js' {
+    interface TileRegistry {
+      leaf: {
+        name: string;
+      };
+    }
+  }
+
+  type LeafContext<N extends string = string> = Registry<
+    N,
+    Snippet<[Tiles['leaf']]> | undefined
+  >;
+
+  const [getContext, setContext] = createContext<LeafContext>();
+
+  export function setup<N extends string>(leafs: LeafContext<N>) {
+    setContext(leafs);
+    return (name: N): Tiles['leaf'] => ({
+      id: crypto.randomUUID(),
+      type: 'leaf',
+      name,
+      children: [],
+    });
+  }
+
+  export function onRemoveChild() {}
+
+  export function onClear() {}
+</script>
+
+<script lang="ts">
+  const leafCtx = getContext();
+
+  let { tile = $bindable() }: TileProps<'leaf'> = $props();
+</script>
+
+{@render leafCtx.get(tile.name)?.(tile)}

package/dist/tiles/leaf.svelte.d.ts

@@ -0,0 +1,17 @@
+import { type Snippet } from 'svelte';
+import type { Registry } from '../shared/registry.js';
+import type { TileProps, Tiles } from '../model.js';
+declare module '../model.js' {
+    interface TileRegistry {
+        leaf: {
+            name: string;
+        };
+    }
+}
+type LeafContext<N extends string = string> = Registry<N, Snippet<[Tiles['leaf']]> | undefined>;
+export declare function setup<N extends string>(leafs: LeafContext<N>): (name: N) => Tiles["leaf"];
+export declare function onRemoveChild(): void;
+export declare function onClear(): void;
+declare const Leaf: import("svelte").Component<TileProps<"leaf">, {}, "tile">;
+type Leaf = ReturnType<typeof Leaf>;
+export default Leaf;

package/dist/tiles/split.svelte

@@ -0,0 +1,334 @@
+<script lang="ts" module>
+  import { getContext, setContext, tick, type Snippet } from 'svelte';
+
+  import type { Registry } from '../shared/registry.js';
+  import { DndContext, Draggable } from '../shared/dnd.svelte.js';
+  import {
+    normalize,
+    type Constraint,
+    type NormalizedConstraints,
+  } from '../shared/constraints.js';
+  import type { Direction } from '../shared/spatial.js';
+  import { almostEqual } from '../shared/math.js';
+  import type { Tile, TileProps, Tiles } from '../model.js';
+  import type { TilerContext } from '../context.svelte.js';
+  import { TileDroppable } from '../dnd.js';
+
+  declare module '../model.js' {
+    interface TileRegistry {
+      split: {
+        constraints: Array<Constraint[]>;
+        weights: number[];
+        direction: Direction;
+        resizer?: string;
+        gapPx: number;
+      };
+    }
+  }
+
+  export interface SplitTileOptions {
+    constraints?: Constraint[];
+    weight?: number;
+    tile: Tile;
+  }
+
+  export interface SplitOptions<R extends string> {
+    children: SplitTileOptions[];
+    resizer?: R;
+    /** @default "row" */
+    direction?: Direction;
+    /** @default 0 */
+    gapPx?: number;
+  }
+
+  export function create<R extends string>(
+    options: SplitOptions<R>
+  ): Tiles['split'] {
+    const children: Tile[] = [];
+    const weights: number[] = [];
+    const constraints: Array<Constraint[]> = [];
+    for (const c of options.children) {
+      children.push(c.tile);
+      weights.push(c.weight ?? 1);
+      constraints.push(c.constraints ?? []);
+    }
+    return {
+      id: crypto.randomUUID(),
+      type: 'split',
+      children,
+      weights,
+      constraints,
+      direction: options.direction ?? 'row',
+      resizer: options.resizer,
+      gapPx: options.gapPx ?? 0,
+    };
+  }
+
+  const SPLIT_CONTEXT_KEY = Symbol('split-context-key');
+
+  type SplitContext<R extends string = string> = {
+    resizer?: Registry<
+      R,
+      Snippet<[Draggable, Tiles['split'], number]> | undefined
+    >;
+  };
+
+  export function setup<R extends string>(ctx: SplitContext<R>) {
+    setContext(SPLIT_CONTEXT_KEY, ctx);
+    return create<R>;
+  }
+
+  export function onRemoveChild(
+    ctx: TilerContext,
+    tile: Tiles['split'],
+    i: number
+  ) {
+    if (tile.children.length === 2) {
+      const droppable =
+        ctx.dnd.targetId && ctx.dnd.droppables.get(ctx.dnd.targetId);
+      if (
+        !droppable ||
+        (droppable instanceof TileDroppable &&
+          tile.children.every((c) => c.id !== droppable.targetTileId))
+      ) {
+        tick().then(() => {
+          ctx.replaceWith(tile, tile.children[1 - i]);
+        });
+        return;
+      }
+    }
+    if (tile.children.length > 1) {
+      tile.children.splice(i, 1);
+      tile.weights.splice(i, 1);
+      tile.constraints.splice(i, 1);
+      return;
+    }
+    ctx.destroy(tile);
+  }
+
+  export function onClear(ctx: TilerContext, tile: Tiles['split']) {
+    if (tile.children.length > 0) {
+      ctx.replaceWith(tile, tile.children[0]);
+    }
+  }
+
+  export function insertTile(
+    node: Tiles['split'],
+    index: number,
+    { tile, constraints = [], weight = 1 }: SplitTileOptions
+  ) {
+    node.children.splice(index, 0, tile);
+    node.constraints.splice(index, 0, constraints);
+    node.weights.splice(index, 0, weight);
+  }
+</script>
+
+<script lang="ts">
+  let { tile = $bindable(), child }: TileProps<'split'> = $props();
+
+  const splitCtx = getContext<SplitContext | undefined>(SPLIT_CONTEXT_KEY);
+  const dndCtx = new DndContext();
+
+  const resizerSnippet = $derived(
+    (tile.resizer !== undefined && splitCtx?.resizer?.get(tile.resizer)) ||
+      undefined
+  );
+
+  let splitEl: HTMLDivElement;
+  let resizerEl: HTMLElement;
+
+  const isRow = $derived(tile.direction === 'row');
+  let currentDir = 0;
+  let lastDir = 0;
+  let startPos = 0;
+  let previousPos = 0;
+  let containerSize = 0;
+  let remaining = 0;
+  let totalWeight = 0;
+  let len = 0;
+  let constraints: NormalizedConstraints[] = [];
+
+  let lastWeights: number[] = [];
+  let nextLayout: number[] = [];
+
+  class DraggableResizer extends Draggable {
+    #index = 0;
+
+    constructor(ctx: DndContext, index: number) {
+      super(ctx);
+      this.#index = index;
+    }
+
+    protected onStart(e: PointerEvent, el: HTMLElement): void {
+      resizerEl = el;
+      currentDir = 0;
+      lastDir = 0;
+      startPos = isRow ? e.pageX : e.pageY;
+      previousPos = startPos;
+      this.syncWeights();
+      remaining = 0;
+      totalWeight = tile.weights.reduce((a, b) => a + b);
+      len = tile.weights.length;
+
+      containerSize =
+        (isRow ? splitEl.clientWidth : splitEl.clientHeight) -
+        (len - 1) * tile.gapPx;
+      constraints = tile.constraints.map((constraints) =>
+        normalize({
+          constraints,
+          targetUnit: 'weight',
+          totalSizePercent: 100,
+          totalSizePx: containerSize,
+          totalWeight: totalWeight,
+        })
+      );
+    }
+
+    protected onMove(e: PointerEvent) {
+      const currentPos = isRow ? e.pageX : e.pageY;
+      currentDir = Math.sign(currentPos - previousPos);
+      if (currentDir === 0) {
+        return;
+      }
+      const resizerRect = resizerEl.getBoundingClientRect();
+      if (
+        isRow
+          ? currentDir < 0
+            ? currentPos < resizerRect.right
+            : currentPos > resizerRect.left
+          : currentDir < 0
+            ? currentPos < resizerRect.bottom
+            : currentPos > resizerRect.top
+      ) {
+        if (currentDir !== lastDir) {
+          startPos = previousPos;
+          this.syncWeights();
+          lastDir = currentDir;
+        }
+        const deltaWeight = Math.abs(
+          ((currentPos - startPos) * totalWeight) / containerSize
+        );
+        if (deltaWeight > 0) {
+          remaining = deltaWeight;
+          this.adjustBy('shrink');
+          remaining = deltaWeight - remaining;
+          if (remaining > 0) {
+            currentDir *= -1;
+            this.adjustBy('expand');
+          }
+          const total = nextLayout.reduce((a, b) => a + b);
+          if (almostEqual(totalWeight, total)) {
+            for (let j = 0; j < len; j++) {
+              tile.weights[j] = nextLayout[j];
+            }
+          }
+        }
+      }
+      previousPos = currentPos;
+    }
+
+    protected onStop() {
+      for (let j = 0; j < len; j++) {
+        tile.weights[j] = Number.parseFloat(tile.weights[j].toFixed(3));
+      }
+    }
+
+    private expand(j: number) {
+      const weight = lastWeights[j];
+      const maxWeight = constraints[j].maxSize;
+      if (weight < maxWeight) {
+        const available = maxWeight - weight;
+        if (available < remaining) {
+          nextLayout[j] = maxWeight;
+          remaining -= available;
+        } else {
+          nextLayout[j] = weight + remaining;
+          remaining = 0;
+        }
+      }
+    }
+
+    private shrink(j: number) {
+      const minWeight = constraints[j].minSize;
+      const weight = lastWeights[j];
+      if (weight > minWeight) {
+        const available = weight - minWeight;
+        if (available < remaining) {
+          nextLayout[j] = minWeight;
+          remaining -= available;
+        } else {
+          nextLayout[j] = weight - remaining;
+          remaining = 0;
+        }
+      }
+    }
+
+    private adjustBy(adjust: 'expand' | 'shrink') {
+      if (currentDir < 0) {
+        let j = this.#index - 1;
+        while (j >= 0 && remaining > 0) {
+          this[adjust](j--);
+        }
+      } else {
+        let j = this.#index;
+        while (j < len && remaining > 0) {
+          this[adjust](j++);
+        }
+      }
+    }
+
+    private syncWeights() {
+      lastWeights = $state.snapshot(tile.weights);
+      nextLayout = lastWeights.slice();
+    }
+  }
+</script>
+
+<div
+  bind:this={splitEl}
+  data-split
+  style="--gap: {tile.gapPx}px;"
+  data-dir={tile.direction}
+>
+  {#each tile.children as t, i (t.id)}
+    {@const draggable = new DraggableResizer(dndCtx, i)}
+    <div data-split-item style="--grow: {tile.weights[i]}">
+      {#if i > 0}
+        <div
+          data-split-resizer
+          {@attach draggable.register}
+          data-dragged={draggable.isDragged}
+        >
+          {@render resizerSnippet?.(draggable, tile, i)}
+        </div>
+      {/if}
+      {@render child(i)}
+    </div>
+  {/each}
+</div>
+
+<style>
+  [data-split] {
+    display: flex;
+    overflow: hidden;
+    gap: var(--gap);
+
+    [data-split-item] {
+      position: relative;
+      flex: var(--grow) 1 0;
+      min-width: 0;
+      min-height: 0;
+    }
+
+    [data-split-resizer] {
+      position: absolute;
+    }
+
+    &[data-dir='row'] {
+      flex-direction: row;
+    }
+    &[data-dir='column'] {
+      flex-direction: column;
+    }
+  }
+</style>

package/dist/tiles/split.svelte.d.ts

@@ -0,0 +1,42 @@
+import { type Snippet } from 'svelte';
+import type { Registry } from '../shared/registry.js';
+import { Draggable } from '../shared/dnd.svelte.js';
+import { type Constraint } from '../shared/constraints.js';
+import type { Direction } from '../shared/spatial.js';
+import type { Tile, TileProps, Tiles } from '../model.js';
+import type { TilerContext } from '../context.svelte.js';
+declare module '../model.js' {
+    interface TileRegistry {
+        split: {
+            constraints: Array<Constraint[]>;
+            weights: number[];
+            direction: Direction;
+            resizer?: string;
+            gapPx: number;
+        };
+    }
+}
+export interface SplitTileOptions {
+    constraints?: Constraint[];
+    weight?: number;
+    tile: Tile;
+}
+export interface SplitOptions<R extends string> {
+    children: SplitTileOptions[];
+    resizer?: R;
+    /** @default "row" */
+    direction?: Direction;
+    /** @default 0 */
+    gapPx?: number;
+}
+export declare function create<R extends string>(options: SplitOptions<R>): Tiles['split'];
+type SplitContext<R extends string = string> = {
+    resizer?: Registry<R, Snippet<[Draggable, Tiles['split'], number]> | undefined>;
+};
+export declare function setup<R extends string>(ctx: SplitContext<R>): (options: SplitOptions<R>) => Tiles["split"];
+export declare function onRemoveChild(ctx: TilerContext, tile: Tiles['split'], i: number): void;
+export declare function onClear(ctx: TilerContext, tile: Tiles['split']): void;
+export declare function insertTile(node: Tiles['split'], index: number, { tile, constraints, weight }: SplitTileOptions): void;
+declare const Split: import("svelte").Component<TileProps<"split">, {}, "tile">;
+type Split = ReturnType<typeof Split>;
+export default Split;