svelte-tiler 0.2.0 → 0.3.0

package/dist/shared/constraints.d.ts

@@ -1,5 +1,5 @@
 export type ConstraintUnit = 'px' | 'weight' | '%';
-export type ConstraintType = 'maxSize' | 'minSize';
+export type ConstraintType = 'maxSize' | 'minSize' | 'collapsedSize';
 export interface Constraint {
     type: ConstraintType;
     unit: ConstraintUnit;

package/dist/shared/constraints.js

@@ -6,12 +6,14 @@ const UNIT_TO_TOTAL_SIZE = {
 const CONSTRAINT_COMBINATOR = {
     maxSize: Math.min,
     minSize: Math.max,
+    collapsedSize: Math.max,
 };
 // TODO: Handle 0 total sizes
 export function normalize(options) {
     const result = {
         maxSize: Infinity,
         minSize: 0,
+        collapsedSize: -1,
     };
     const targetTotal = options[UNIT_TO_TOTAL_SIZE[options.targetUnit]];
     for (const constraint of options.constraints) {

package/dist/tiles/leaf.svelte

@@ -2,7 +2,7 @@
   import { createContext, type Snippet } from 'svelte';
 
   import type { Registry } from '../shared/registry.js';
-  import type { TileProps, Tiles } from '../model.js';
+  import type { Tile, TileProps, Tiles } from '../model.js';
 
   declare module '../model.js' {
     interface TileRegistry {
@@ -14,7 +14,7 @@
 
   type LeafContext<N extends string = string> = Registry<
     N,
-    Snippet<[Tiles['leaf']]> | undefined
+    Snippet<[Tiles['leaf'], number, Tile | undefined]> | undefined
   >;
 
   const [getContext, setContext] = createContext<LeafContext>();
@@ -39,7 +39,7 @@
 <script lang="ts">
   const leafCtx = getContext();
 
-  let { tile = $bindable() }: TileProps<'leaf'> = $props();
+  let { tile = $bindable(), index, parent }: TileProps<'leaf'> = $props();
 </script>
 
-{@render leafCtx.get(tile.name)?.(tile)}
+{@render leafCtx.get(tile.name)?.(tile, index, parent)}

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

@@ -1,6 +1,6 @@
 import { type Snippet } from 'svelte';
 import type { Registry } from '../shared/registry.js';
-import type { TileProps, Tiles } from '../model.js';
+import type { Tile, TileProps, Tiles } from '../model.js';
 declare module '../model.js' {
     interface TileRegistry {
         leaf: {
@@ -8,7 +8,7 @@ declare module '../model.js' {
         };
     }
 }
-type LeafContext<N extends string = string> = Registry<N, Snippet<[Tiles['leaf']]> | undefined>;
+type LeafContext<N extends string = string> = Registry<N, Snippet<[Tiles['leaf'], number, Tile | undefined]> | 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;

package/dist/tiles/split.svelte

@@ -130,6 +130,28 @@
       weights,
     });
   }
+
+  interface SplitAPI {
+    isCollapsed: (index: number) => boolean;
+    collapse: (index: number) => boolean;
+    expand: (index: number) => boolean;
+  }
+
+  const API = new Map<string, SplitAPI>();
+
+  function bind<M extends keyof SplitAPI>(method: M) {
+    return (splitId: string, ...args: Parameters<SplitAPI[M]>) => {
+      const api = API.get(splitId);
+      if (!api) {
+        throw new Error(`Unable to find split with id: "${splitId}"`);
+      }
+      return api[method].apply(api, args);
+    };
+  }
+
+  export const isCollapsed = bind('isCollapsed');
+  export const collapse = bind('collapse');
+  export const expand = bind('expand');
 </script>
 
 <script lang="ts">
@@ -147,19 +169,91 @@
   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 posDiff = 0;
+  let totalSizePx = 0;
   let remaining = 0;
   let totalWeight = 0;
   let len = 0;
   let constraints: NormalizedConstraints[] = [];
 
-  let lastWeights: number[] = [];
   let nextLayout: number[] = [];
 
+  function applyNextLayout() {
+    for (let j = 0; j < len; j++) {
+      tile.weights[j] = nextLayout[j];
+    }
+  }
+
+  function sumOf(arr: number[]) {
+    let s = 0;
+    for (let i = 0; i < arr.length; i++) {
+      s += arr[i];
+    }
+    return s;
+  }
+
+  function getContainerSizePx() {
+    return (
+      (isRow ? splitEl.clientWidth : splitEl.clientHeight) -
+      (len - 1) * tile.gapPx
+    );
+  }
+
+  function expand(weight: number, j: number) {
+    const { maxSize, minSize, collapsedSize } = constraints[j];
+    if (collapsedSize >= 0 && weight < minSize) {
+      const snapThreshold = collapsedSize + (minSize - collapsedSize) * 0.5;
+      if (snapThreshold < weight + remaining) {
+        nextLayout[j] = minSize;
+        remaining -= minSize - weight;
+        weight = minSize;
+      } else {
+        return;
+      }
+    }
+    if (remaining > 0 && weight < maxSize) {
+      const available = maxSize - weight;
+      if (available < remaining) {
+        nextLayout[j] = maxSize;
+        remaining -= available;
+      } else {
+        nextLayout[j] = weight + remaining;
+        remaining = 0;
+      }
+    }
+  }
+
+  function shrink(weight: number, j: number) {
+    const { minSize, collapsedSize } = constraints[j];
+    if (weight > minSize) {
+      const available = weight - minSize;
+      if (available < remaining) {
+        nextLayout[j] = minSize;
+        remaining -= available;
+      } else {
+        nextLayout[j] = weight - remaining;
+        remaining = 0;
+      }
+    }
+    if (minSize > 0 && collapsedSize >= 0 && nextLayout[j] <= minSize) {
+      const required = minSize * 0.5;
+      if (required < remaining) {
+        remaining -= nextLayout[j] - collapsedSize;
+        nextLayout[j] = collapsedSize;
+      }
+    }
+  }
+
+  function normalizeConstraints(constraints: Constraint[]) {
+    return normalize({
+      constraints,
+      targetUnit: 'weight',
+      totalSizePercent: 100,
+      totalSizePx,
+      totalWeight,
+    });
+  }
+
   class DraggableResizer extends Draggable {
     #index = 0;
 
@@ -168,72 +262,44 @@
       this.#index = index;
     }
 
-    protected onStart(e: PointerEvent, el: HTMLElement): void {
+    protected onStart(_: 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,
-        })
-      );
+      totalSizePx = getContainerSizePx();
+      nextLayout = $state.snapshot(tile.weights);
+      totalWeight = sumOf(nextLayout);
+      len = nextLayout.length;
+      constraints = tile.constraints.map(normalizeConstraints);
     }
 
     protected onMove(e: PointerEvent) {
       const currentPos = isRow ? e.pageX : e.pageY;
-      currentDir = Math.sign(currentPos - previousPos);
-      if (currentDir === 0) {
+      const rect = resizerEl.getBoundingClientRect();
+      const lastPos = isRow
+        ? rect.x + rect.width / 2
+        : rect.y + rect.height / 2;
+      posDiff = currentPos - lastPos;
+      if (almostEqual(posDiff, 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 = currentPos;
-          this.syncWeights();
-          lastDir = currentDir;
+
+      const deltaWeight = Math.abs((posDiff * totalWeight) / totalSizePx);
+      if (deltaWeight > 0) {
+        remaining = deltaWeight;
+        this.adjustBy(shrink);
+        remaining = deltaWeight - remaining;
+        if (remaining > 0) {
+          posDiff *= -1;
+          this.adjustBy(expand);
         }
-        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];
-            }
-          }
+        if (remaining < 0) {
+          posDiff *= -1;
+          remaining = Math.abs(totalWeight - sumOf(nextLayout));
+          this.adjustBy(shrink, nextLayout);
+        }
+        if (almostEqual(totalWeight, sumOf(nextLayout))) {
+          applyNextLayout();
         }
       }
-      previousPos = currentPos;
     }
 
     protected onStop() {
@@ -242,55 +308,132 @@
       }
     }
 
-    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) {
+    private adjustBy(
+      adjust: (weight: number, index: number) => void,
+      layout = tile.weights
+    ) {
+      if (posDiff < 0) {
         let j = this.#index - 1;
         while (j >= 0 && remaining > 0) {
-          this[adjust](j--);
+          adjust(layout[j], j--);
         }
       } else {
         let j = this.#index;
         while (j < len && remaining > 0) {
-          this[adjust](j++);
+          adjust(layout[j], j++);
         }
       }
     }
+  }
+
+  function isChildCollapsed(index: number) {
+    return tile.weights[index] <= constraints[index].collapsedSize;
+  }
+
+  let indexes = $derived(tile.weights.map((_, i) => i));
+  // TODO: Implement the ability to collapse/expand
+  function redistributeWeight(pivotIndex: number, delta: number) {
+    let remaining = Math.abs(delta);
+    const isGrow = delta > 0;
+    const isCandidate = (i: number) =>
+      isGrow
+        ? nextLayout[i] < constraints[i].maxSize
+        : nextLayout[i] > constraints[i].minSize;
+
+    let candidateIndexes = indexes.filter(
+      (i) => i !== pivotIndex && isCandidate(i)
+    );
+
+    while (remaining > 0 && candidateIndexes.length > 0) {
+      const totalWeight = sumOf(candidateIndexes.map((i) => nextLayout[i]));
+      let consumed = 0;
 
-    private syncWeights() {
-      lastWeights = $state.snapshot(tile.weights);
-      nextLayout = lastWeights.slice();
+      for (const candidateIndex of candidateIndexes) {
+        const share = remaining * (nextLayout[candidateIndex] / totalWeight);
+
+        const capacity = isGrow
+          ? constraints[candidateIndex].maxSize - nextLayout[candidateIndex]
+          : nextLayout[candidateIndex] - constraints[candidateIndex].minSize;
+
+        const applied = Math.min(share, capacity);
+
+        nextLayout[candidateIndex] += isGrow ? applied : -applied;
+        consumed += applied;
+      }
+
+      remaining -= consumed;
+
+      candidateIndexes = candidateIndexes.filter(isCandidate);
     }
+
+    return remaining;
   }
+
+  let lastWeights = $derived(
+    new Array<number | undefined>(tile.weights.length)
+  );
+
+  $effect(() => {
+    const id = tile.id;
+    API.set(id, {
+      isCollapsed(index) {
+        totalWeight = sumOf(tile.weights);
+        totalSizePx = getContainerSizePx();
+        constraints[index] = normalizeConstraints(tile.constraints[index]);
+        return isChildCollapsed(index);
+      },
+      collapse(index) {
+        nextLayout = $state.snapshot(tile.weights);
+        totalWeight = sumOf(nextLayout);
+        len = nextLayout.length;
+        totalSizePx = getContainerSizePx();
+        constraints = tile.constraints.map(normalizeConstraints);
+        if (isChildCollapsed(index)) {
+          return false;
+        }
+        const rem = redistributeWeight(
+          index,
+          nextLayout[index] - constraints[index].collapsedSize
+        );
+        if (rem > 0) {
+          return false;
+        }
+        lastWeights[index] = nextLayout[index];
+        nextLayout[index] = constraints[index].collapsedSize;
+        applyNextLayout();
+        return true;
+      },
+      expand(index) {
+        nextLayout = $state.snapshot(tile.weights);
+        totalWeight = sumOf(nextLayout);
+        len = nextLayout.length;
+        totalSizePx = getContainerSizePx();
+        constraints = tile.constraints.map(normalizeConstraints);
+        if (!isChildCollapsed(index)) {
+          return false;
+        }
+        const lastWeight = lastWeights[index] ?? constraints[index].minSize;
+        let delta = constraints[index].collapsedSize - lastWeight;
+        let rem = redistributeWeight(index, delta);
+        if (rem > 0) {
+          delta += rem;
+          if (delta < 0) {
+            nextLayout = $state.snapshot(tile.weights);
+            redistributeWeight(index, delta);
+          } else {
+            return false;
+          }
+        }
+        nextLayout[index] = lastWeight;
+        lastWeights[index] = undefined;
+        applyNextLayout();
+        return true;
+      },
+    });
+    return () => {
+      API.delete(id);
+    };
+  });
 </script>
 
 <div

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

@@ -37,6 +37,9 @@ export declare function setup<R extends string>(ctx: SplitContext<R>): (options:
 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 onInsert(_ctx: TilerContext, tile: Tiles['split'], index: number, { children, constraints, weights, }: TileInsertData<'split'>): void;
+export declare const isCollapsed: (splitId: string, index: number) => boolean;
+export declare const collapse: (splitId: string, index: number) => boolean;
+export declare const expand: (splitId: string, index: number) => boolean;
 declare const Split: import("svelte").Component<TileProps<"split">, {}, "tile">;
 type Split = ReturnType<typeof Split>;
 export default Split;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-tiler",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "A small, unstyled library for building tiling user interfaces.",
   "license": "MIT",
   "homepage": "https://github.com/x0k/svelte-tiler#readme",
@@ -46,30 +46,30 @@
   "devDependencies": {
     "@changesets/changelog-github": "^0.5.2",
     "@changesets/cli": "^2.29.8",
-    "@eslint/compat": "^2.0.1",
+    "@eslint/compat": "^2.0.2",
     "@eslint/js": "^9.39.2",
-    "@iconify-json/codicon": "^1.2.41",
-    "@iconify-json/material-icon-theme": "^1.2.49",
-    "@shikijs/langs": "^3.21.0",
-    "@shikijs/themes": "^3.21.0",
+    "@iconify-json/codicon": "^1.2.43",
+    "@iconify-json/material-icon-theme": "^1.2.50",
+    "@shikijs/langs": "^3.22.0",
+    "@shikijs/themes": "^3.22.0",
     "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.50.1",
+    "@sveltejs/kit": "^2.50.2",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.4",
-    "@types/node": "^24.10.9",
+    "@types/node": "^24.10.12",
     "@vitest/browser-playwright": "^4.0.18",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-svelte": "^3.14.0",
-    "globals": "^17.2.0",
+    "globals": "^17.3.0",
     "marked": "^17.0.1",
-    "playwright": "^1.58.0",
+    "playwright": "^1.58.2",
     "prettier": "^3.8.1",
     "prettier-plugin-svelte": "^3.4.1",
     "publint": "^0.3.17",
-    "shiki": "^3.21.0",
-    "svelte": "^5.49.1",
-    "svelte-check": "^4.3.5",
+    "shiki": "^3.22.0",
+    "svelte": "^5.50.0",
+    "svelte-check": "^4.3.6",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.54.0",
     "unplugin-icons": "^23.0.1",