Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071import type { Action } from "svelte/action";
// port of the appview's `fragments/resizable` ResizablePanel: a grip that drags// a sibling panel's width, and resets it on double clickexport interface ResizableOptions { // the panel this grip sizes; looked up lazily so it can mount after the grip target: () => HTMLElement | null | undefined; // `before` when the panel sits left of the grip, `after` when it sits right direction?: "before" | "after"; min?: number; max?: number;}
export const resizable: Action<HTMLElement, ResizableOptions> = (node, options) => { let current = options; let startX = 0; let startWidth = 0; let panel: HTMLElement | null | undefined;
const move = (event: MouseEvent) => { if (!panel) return; const delta = current.direction === "after" ? startX - event.clientX : event.clientX - startX; const width = startWidth + delta; if (width < (current.min ?? 100) || width > (current.max ?? Infinity)) return; panel.style.width = `${width}px`; panel.style.flexShrink = "0"; };
const up = () => { node.classList.remove("resizing"); document.body.style.cursor = ""; document.body.style.userSelect = ""; document.removeEventListener("mousemove", move); document.removeEventListener("mouseup", up); };
const down = (event: MouseEvent) => { panel = current.target(); if (!panel) return; event.preventDefault(); node.classList.add("resizing"); document.body.style.cursor = "col-resize"; document.body.style.userSelect = "none"; startX = event.clientX; startWidth = panel.offsetWidth; document.addEventListener("mousemove", move); document.addEventListener("mouseup", up); };
const reset = (event: MouseEvent) => { const element = current.target(); if (!element) return; event.preventDefault(); element.style.width = ""; element.style.flexShrink = ""; };
node.addEventListener("mousedown", down); node.addEventListener("dblclick", reset);
return { update: (next: ResizableOptions) => (current = next), destroy: () => { node.removeEventListener("mousedown", down); node.removeEventListener("dblclick", reset); up(); } };};