@r2digisolutions/components 0.1.6 → 0.2.0

package/dist/utils/marqueeSelect.js

@@ -0,0 +1,189 @@
+export function normalizeRect(x0, y0, x1, y1) {
+    const left = Math.min(x0, x1);
+    const top = Math.min(y0, y1);
+    return {
+        x: left,
+        y: top,
+        width: Math.abs(x1 - x0),
+        height: Math.abs(y1 - y0)
+    };
+}
+export function rectsIntersect(a, b) {
+    return (a.x < b.x + b.width &&
+        a.x + a.width > b.x &&
+        a.y < b.y + b.height &&
+        a.y + a.height > b.y);
+}
+export function hitTestIds(marquee, items) {
+    const ids = [];
+    for (const item of items) {
+        if (rectsIntersect(marquee, item))
+            ids.push(item.id);
+    }
+    return ids;
+}
+export function getMarqueeModifier(e) {
+    if (e.metaKey || e.ctrlKey)
+        return 'toggle';
+    if (e.shiftKey)
+        return 'add';
+    return 'replace';
+}
+export function resolveMarqueeSelection(hitIds, previousIds, modifier) {
+    if (modifier === 'replace')
+        return [...hitIds];
+    if (modifier === 'add')
+        return [...new Set([...previousIds, ...hitIds])];
+    const set = new Set(previousIds);
+    for (const id of hitIds) {
+        if (set.has(id))
+            set.delete(id);
+        else
+            set.add(id);
+    }
+    return [...set];
+}
+/** Collect `[data-marquee-id]` children in container-local (incl. scroll) coordinates. */
+export function collectMarqueeItems(container, selector = '[data-marquee-id]') {
+    const cRect = container.getBoundingClientRect();
+    const nodes = container.querySelectorAll(selector);
+    const items = [];
+    for (const node of nodes) {
+        if (!(node instanceof HTMLElement))
+            continue;
+        const id = node.getAttribute('data-marquee-id');
+        if (!id)
+            continue;
+        const r = node.getBoundingClientRect();
+        items.push({
+            id,
+            x: r.left - cRect.left + container.scrollLeft,
+            y: r.top - cRect.top + container.scrollTop,
+            width: r.width,
+            height: r.height
+        });
+    }
+    return items;
+}
+export function defaultMarqueeIgnore(target) {
+    if (!(target instanceof Element))
+        return false;
+    return Boolean(target.closest('input, textarea, select, button, a, label, [data-marquee-ignore], [role="separator"], [contenteditable="true"]'));
+}
+function pointerInContainer(e, container) {
+    const r = container.getBoundingClientRect();
+    return {
+        x: e.clientX - r.left + container.scrollLeft,
+        y: e.clientY - r.top + container.scrollTop
+    };
+}
+/**
+ * Attach Windows-style rubber-band selection to a container.
+ * Returns a disposer.
+ */
+export function attachMarqueeSelect(container, options) {
+    const threshold = options.threshold ?? 4;
+    const shouldIgnore = options.shouldIgnore ?? defaultMarqueeIgnore;
+    let originX = 0;
+    let originY = 0;
+    let active = false;
+    let dragging = false;
+    let pointerId = null;
+    function unbindWindow() {
+        window.removeEventListener('pointermove', onPointerMove);
+        window.removeEventListener('pointerup', onPointerUp);
+        window.removeEventListener('pointercancel', onPointerUp);
+    }
+    function finish(e) {
+        if (!active)
+            return;
+        active = false;
+        const wasDragging = dragging;
+        dragging = false;
+        unbindWindow();
+        if (pointerId != null) {
+            try {
+                container.releasePointerCapture(pointerId);
+            }
+            catch {
+                /* already released */
+            }
+            pointerId = null;
+        }
+        if (!wasDragging) {
+            options.onRect?.(null);
+            return;
+        }
+        const pt = pointerInContainer(e, container);
+        const rect = normalizeRect(originX, originY, pt.x, pt.y);
+        const ids = hitTestIds(rect, options.getItems());
+        const modifier = getMarqueeModifier(e);
+        options.onSelect({ rect, ids, modifier });
+        options.onRect?.(null);
+        window.getSelection()?.removeAllRanges();
+    }
+    function onPointerDown(e) {
+        if (e.button !== 0)
+            return;
+        if (shouldIgnore(e.target))
+            return;
+        const pt = pointerInContainer(e, container);
+        originX = pt.x;
+        originY = pt.y;
+        active = true;
+        dragging = false;
+        pointerId = e.pointerId;
+        // Defer capture until drag threshold so cell/row clicks still fire.
+        window.addEventListener('pointermove', onPointerMove);
+        window.addEventListener('pointerup', onPointerUp);
+        window.addEventListener('pointercancel', onPointerUp);
+    }
+    function onPointerMove(e) {
+        if (!active)
+            return;
+        if (pointerId != null && e.pointerId !== pointerId)
+            return;
+        const pt = pointerInContainer(e, container);
+        const dx = pt.x - originX;
+        const dy = pt.y - originY;
+        if (!dragging) {
+            if (Math.hypot(dx, dy) < threshold)
+                return;
+            dragging = true;
+            if (pointerId != null) {
+                try {
+                    container.setPointerCapture(pointerId);
+                }
+                catch {
+                    /* ignore */
+                }
+            }
+            e.preventDefault();
+            window.getSelection()?.removeAllRanges();
+        }
+        else {
+            e.preventDefault();
+        }
+        const rect = normalizeRect(originX, originY, pt.x, pt.y);
+        options.onRect?.(rect);
+        const ids = hitTestIds(rect, options.getItems());
+        const modifier = getMarqueeModifier(e);
+        options.onDrag?.({ rect, ids, modifier });
+    }
+    function onPointerUp(e) {
+        if (pointerId != null && e.pointerId !== pointerId)
+            return;
+        finish(e);
+    }
+    function onLostCapture(e) {
+        if (e.pointerId === pointerId)
+            finish(e);
+    }
+    container.addEventListener('pointerdown', onPointerDown);
+    container.addEventListener('lostpointercapture', onLostCapture);
+    return () => {
+        unbindWindow();
+        container.removeEventListener('pointerdown', onPointerDown);
+        container.removeEventListener('lostpointercapture', onLostCapture);
+    };
+}

package/dist/utils/mediaTime.d.ts

@@ -0,0 +1,16 @@
+/** Milliseconds ↔ pixels and timecode helpers for media timelines. */
+export declare function msToPx(ms: number, pxPerMs: number): number;
+export declare function pxToMs(px: number, pxPerMs: number): number;
+/** px per ms from a zoom level (1 = 0.05 px/ms ≈ 50px/s). */
+export declare function pxPerMsFromZoom(zoom: number): number;
+export declare function snapMs(ms: number, snapToMs: number): number;
+export declare function clampMs(ms: number, min?: number, max?: number): number;
+/** Format as HH:MM:SS or MM:SS.mmm when showMs. */
+export declare function formatTimecode(ms: number, opts?: {
+    showMs?: boolean;
+    fps?: number;
+}): string;
+export declare function ticksForDuration(durationMs: number, pxPerMs: number, minTickPx?: number): {
+    ms: number;
+    major: boolean;
+}[];

package/dist/utils/mediaTime.js

@@ -0,0 +1,57 @@
+/** Milliseconds ↔ pixels and timecode helpers for media timelines. */
+export function msToPx(ms, pxPerMs) {
+    return ms * pxPerMs;
+}
+export function pxToMs(px, pxPerMs) {
+    if (pxPerMs <= 0)
+        return 0;
+    return px / pxPerMs;
+}
+/** px per ms from a zoom level (1 = 0.05 px/ms ≈ 50px/s). */
+export function pxPerMsFromZoom(zoom) {
+    return Math.max(0.001, zoom) * 0.05;
+}
+export function snapMs(ms, snapToMs) {
+    if (snapToMs <= 0)
+        return ms;
+    return Math.round(ms / snapToMs) * snapToMs;
+}
+export function clampMs(ms, min = 0, max = Number.POSITIVE_INFINITY) {
+    return Math.min(max, Math.max(min, ms));
+}
+/** Format as HH:MM:SS or MM:SS.mmm when showMs. */
+export function formatTimecode(ms, opts) {
+    const showMs = opts?.showMs ?? false;
+    const fps = opts?.fps;
+    const total = Math.max(0, Math.floor(ms));
+    const hours = Math.floor(total / 3_600_000);
+    const minutes = Math.floor((total % 3_600_000) / 60_000);
+    const seconds = Math.floor((total % 60_000) / 1000);
+    const millis = total % 1000;
+    const hh = hours > 0 ? `${String(hours).padStart(2, '0')}:` : '';
+    const mm = String(minutes).padStart(2, '0');
+    const ss = String(seconds).padStart(2, '0');
+    if (fps && fps > 0) {
+        const frame = Math.floor((millis / 1000) * fps) % Math.round(fps);
+        return `${hh}${mm}:${ss}:${String(frame).padStart(2, '0')}`;
+    }
+    if (showMs) {
+        return `${hh}${mm}:${ss}.${String(millis).padStart(3, '0')}`;
+    }
+    return `${hh}${mm}:${ss}`;
+}
+export function ticksForDuration(durationMs, pxPerMs, minTickPx = 60) {
+    const candidates = [100, 250, 500, 1000, 2000, 5000, 10_000, 30_000, 60_000, 120_000, 300_000];
+    let step = candidates[candidates.length - 1];
+    for (const c of candidates) {
+        if (msToPx(c, pxPerMs) >= minTickPx) {
+            step = c;
+            break;
+        }
+    }
+    const ticks = [];
+    for (let t = 0; t <= durationMs + 0.5; t += step) {
+        ticks.push({ ms: t, major: t % (step * 2) === 0 || t === 0 });
+    }
+    return ticks;
+}

package/dist/utils/mediaTracks.d.ts

@@ -0,0 +1,61 @@
+/** Shared track/clip types and helpers for Video / Audio editors. */
+export type MediaAssetKind = 'image' | 'video' | 'audio' | 'text';
+export interface MediaAsset {
+    id: string;
+    kind: MediaAssetKind;
+    name: string;
+    /** Object URL or remote URL */
+    src?: string;
+    durationMs?: number;
+    width?: number;
+    height?: number;
+}
+export interface MediaClip {
+    id: string;
+    trackId: string;
+    assetId?: string;
+    name: string;
+    kind: MediaAssetKind;
+    src?: string;
+    /** Timeline start */
+    startMs: number;
+    /** Timeline end */
+    endMs: number;
+    /** Source trim in */
+    trimInMs?: number;
+    /** Source trim out (absolute in source) */
+    trimOutMs?: number;
+    color?: string;
+}
+export type MediaTrackKind = 'video' | 'audio' | 'image';
+export interface MediaTrack {
+    id: string;
+    name: string;
+    kind: MediaTrackKind;
+    muted?: boolean;
+    solo?: boolean;
+    locked?: boolean;
+    armed?: boolean;
+    color?: string;
+    clips: MediaClip[];
+}
+export declare function uid(prefix?: string): string;
+export declare function createMediaClip(partial: Omit<MediaClip, 'id'> & {
+    id?: string;
+}): MediaClip;
+export declare function createMediaTrack(partial: Omit<MediaTrack, 'id' | 'clips'> & {
+    id?: string;
+    clips?: MediaClip[];
+}): MediaTrack;
+export declare function clipDurationMs(clip: MediaClip): number;
+export declare function moveClip(clip: MediaClip, newStartMs: number, durationMs?: number): MediaClip;
+export declare function trimClipStart(clip: MediaClip, newStartMs: number, minDur?: number): MediaClip;
+export declare function trimClipEnd(clip: MediaClip, newEndMs: number, minDur?: number): MediaClip;
+export declare function isClipActiveAt(clip: MediaClip, timeMs: number): boolean;
+export declare function findClipAt(tracks: MediaTrack[], timeMs: number, kind?: MediaTrackKind): MediaClip | null;
+export declare function updateClipInTracks(tracks: MediaTrack[], clipId: string, updater: (c: MediaClip) => MediaClip): MediaTrack[];
+export declare function removeClipFromTracks(tracks: MediaTrack[], clipId: string): MediaTrack[];
+export declare function createMediaAsset(partial: Omit<MediaAsset, 'id'> & {
+    id?: string;
+}): MediaAsset;
+export declare function kindFromFile(file: File): MediaAssetKind;

package/dist/utils/mediaTracks.js

@@ -0,0 +1,102 @@
+/** Shared track/clip types and helpers for Video / Audio editors. */
+export function uid(prefix = 'id') {
+    return `${prefix}_${Math.random().toString(36).slice(2, 10)}`;
+}
+export function createMediaClip(partial) {
+    return {
+        id: partial.id ?? uid('clip'),
+        trackId: partial.trackId,
+        assetId: partial.assetId,
+        name: partial.name,
+        kind: partial.kind,
+        src: partial.src,
+        startMs: partial.startMs,
+        endMs: Math.max(partial.startMs + 1, partial.endMs),
+        trimInMs: partial.trimInMs,
+        trimOutMs: partial.trimOutMs,
+        color: partial.color
+    };
+}
+export function createMediaTrack(partial) {
+    return {
+        id: partial.id ?? uid('track'),
+        name: partial.name,
+        kind: partial.kind,
+        muted: partial.muted ?? false,
+        solo: partial.solo ?? false,
+        locked: partial.locked ?? false,
+        armed: partial.armed ?? false,
+        color: partial.color,
+        clips: partial.clips ?? []
+    };
+}
+export function clipDurationMs(clip) {
+    return Math.max(0, clip.endMs - clip.startMs);
+}
+export function moveClip(clip, newStartMs, durationMs) {
+    const dur = durationMs ?? clipDurationMs(clip);
+    const startMs = Math.max(0, newStartMs);
+    return { ...clip, startMs, endMs: startMs + dur };
+}
+export function trimClipStart(clip, newStartMs, minDur = 50) {
+    const endMs = clip.endMs;
+    const startMs = Math.min(Math.max(0, newStartMs), endMs - minDur);
+    const delta = startMs - clip.startMs;
+    return {
+        ...clip,
+        startMs,
+        trimInMs: (clip.trimInMs ?? 0) + delta
+    };
+}
+export function trimClipEnd(clip, newEndMs, minDur = 50) {
+    const startMs = clip.startMs;
+    const endMs = Math.max(startMs + minDur, newEndMs);
+    return { ...clip, endMs };
+}
+export function isClipActiveAt(clip, timeMs) {
+    return timeMs >= clip.startMs && timeMs < clip.endMs;
+}
+export function findClipAt(tracks, timeMs, kind) {
+    const list = kind ? tracks.filter((t) => t.kind === kind) : tracks;
+    for (const track of [...list].reverse()) {
+        if (track.muted && !track.solo)
+            continue;
+        for (const clip of track.clips) {
+            if (isClipActiveAt(clip, timeMs))
+                return clip;
+        }
+    }
+    return null;
+}
+export function updateClipInTracks(tracks, clipId, updater) {
+    return tracks.map((t) => ({
+        ...t,
+        clips: t.clips.map((c) => (c.id === clipId ? updater(c) : c))
+    }));
+}
+export function removeClipFromTracks(tracks, clipId) {
+    return tracks.map((t) => ({
+        ...t,
+        clips: t.clips.filter((c) => c.id !== clipId)
+    }));
+}
+export function createMediaAsset(partial) {
+    return {
+        id: partial.id ?? uid('asset'),
+        kind: partial.kind,
+        name: partial.name,
+        src: partial.src,
+        durationMs: partial.durationMs,
+        width: partial.width,
+        height: partial.height
+    };
+}
+export function kindFromFile(file) {
+    if (file.type.startsWith('image/'))
+        return 'image';
+    if (file.type.startsWith('video/'))
+        return 'video';
+    if (file.type.startsWith('audio/'))
+        return 'audio';
+    return 'text';
+}