@dosgato/dialog 0.0.19 → 0.0.21

package/tree/treestore.js

@@ -0,0 +1,336 @@
+import { ActiveStore, derivedStore } from '@txstate-mws/svelte-store';
+import { keyby } from 'txstate-utils';
+export const TREE_STORE_CONTEXT = {};
+export class TreeStore extends ActiveStore {
+    fetchChildren;
+    treeElement;
+    rootItems = derivedStore(this, 'rootItems');
+    draggable = derivedStore(this, v => v.draggable && !v.loading);
+    dragging = derivedStore(this, 'dragging');
+    selectedUndraggable = derivedStore(this, 'selectedUndraggable');
+    selected = derivedStore(this, 'selected');
+    focused = derivedStore(this, 'focused');
+    copied = derivedStore(this, 'copied');
+    headerOverride = derivedStore(this, 'headerWidthOverrides');
+    moveHandler;
+    copyHandler;
+    dragEligibleHandler;
+    dropEffectHandler;
+    singleSelect;
+    refreshPromise;
+    constructor(fetchChildren, { moveHandler, copyHandler, dragEligible, dropEffect, singleSelect } = {}) {
+        super({ itemsById: {}, selected: new Map(), selectedItems: [], copied: new Map(), dragging: false, draggable: !!moveHandler, headerWidthOverrides: {} });
+        this.fetchChildren = fetchChildren;
+        this.moveHandler = moveHandler;
+        this.copyHandler = copyHandler;
+        this.dragEligibleHandler = dragEligible;
+        this.dropEffectHandler = dropEffect;
+        this.singleSelect = singleSelect;
+    }
+    async visit(item, cb) {
+        await cb(item);
+        await Promise.all((item.children ?? []).map(async (child) => await this.visit(child, cb)));
+    }
+    visitSync(item, cb) {
+        cb(item);
+        for (const child of item.children ?? [])
+            this.visitSync(child, cb);
+    }
+    addLookup(items) {
+        for (const item of items) {
+            this.visitSync(item, itm => {
+                this.value.itemsById[itm.id] = itm;
+                if (this.value.selected.has(itm.id))
+                    this.value.selected.set(itm.id, itm);
+            });
+        }
+        this.cleanSelected();
+    }
+    cleanSelected() {
+        for (const selected of this.value.selected.values()) {
+            if (!this.value.itemsById[selected.id])
+                this.value.selected.delete(selected.id);
+        }
+        this.determineDraggable();
+    }
+    determineDraggable() {
+        this.value.selectedItems = Array.from(this.value.selected.values());
+        this.value.selectedUndraggable = !this.dragEligible(this.value.selectedItems, true) && !this.dragEligible(this.value.selectedItems, false);
+    }
+    trigger() {
+        this.set(this.value);
+    }
+    async fetch(item) {
+        const children = await this.fetchChildren(item);
+        for (const child of children) {
+            child.level = (item?.level ?? 0) + 1;
+            child.parent = item;
+        }
+        return children;
+    }
+    async #refresh(item, skipNotify = false) {
+        if (item)
+            item.loading = true;
+        else
+            this.value.loading = true;
+        this.trigger();
+        try {
+            const children = await this.fetch(item);
+            // re-open any open children
+            await Promise.all(children.map(async (child) => await this.visit(child, async (child) => {
+                child.open = this.value.itemsById[child.id]?.open;
+                if (child.open) {
+                    child.children = await this.fetch(child);
+                    child.hasChildren = child.children.length > 0;
+                    if (!child.hasChildren)
+                        child.open = false;
+                }
+            })));
+            if (item) {
+                this.visitSync(item, itm => { if (itm.id !== item.id)
+                    this.value.itemsById[itm.id] = undefined; });
+                item.children = children;
+                item.hasChildren = children.length > 0;
+                if (!item.hasChildren)
+                    item.open = false;
+            }
+            else {
+                this.value.itemsById = {};
+                for (const child of children)
+                    child.level = 1;
+                this.value.rootItems = children;
+            }
+            this.addLookup(children);
+            // if the focused item disappeared in the refresh, we need to replace it,
+            // as without a focus the tree becomes invisible to keyboard nav
+            if (!this.value.itemsById[this.value.focused?.id])
+                this.focus(this.value.selectedItems.slice(-1)[0] ?? this.value.rootItems?.[0], true);
+        }
+        finally {
+            if (item)
+                item.loading = false;
+            this.value.loading = false;
+            if (!skipNotify)
+                this.trigger();
+        }
+    }
+    async refresh(item, skipNotify = false) {
+        this.refreshPromise ??= this.#refresh(item, skipNotify);
+        await this.refreshPromise;
+        this.refreshPromise = undefined;
+    }
+    focus(item, notify = true) {
+        this.value.focused = item;
+        if (notify)
+            this.trigger();
+    }
+    select(item, { clear = false, notify = true, toggle = false }) {
+        const selected = this.isSelected(item);
+        const numSelected = this.value.selected.size;
+        if (this.singleSelect)
+            clear = true;
+        if (clear) {
+            this.value.selected.clear();
+            this.focus(item, false);
+        }
+        if (toggle && selected && (!clear || numSelected === 1))
+            this.value.selected.delete(item.id);
+        else
+            this.value.selected.set(item.id, item);
+        this.determineDraggable();
+        if (notify)
+            this.trigger();
+    }
+    selectById(id, { clear = false, notify = true, toggle = false }) {
+        const item = this.value.itemsById[id];
+        if (item)
+            this.select(item, { clear, notify, toggle });
+    }
+    deselect(notify = true) {
+        this.value.selected.clear();
+        this.determineDraggable();
+        if (notify)
+            this.trigger();
+    }
+    isSelected(item) {
+        return this.value.selected.has(item.id);
+    }
+    async open(item, notify = true) {
+        if (item.open || item.hasChildren === false)
+            return;
+        await this.openAndRefresh(item, notify);
+    }
+    async openAndRefresh(item, notify = true) {
+        await this.refresh(item, true);
+        item.open = !!item.children?.length;
+        if (notify)
+            this.trigger();
+    }
+    close(item) {
+        for (const child of item.children ?? [])
+            this.value.itemsById[child.id] = undefined;
+        this.cleanSelected();
+        item.children = undefined;
+        item.open = false;
+        this.trigger();
+    }
+    async toggle(item) {
+        if (item.open)
+            this.close(item);
+        else
+            await this.open(item);
+    }
+    async viewUnder(item) {
+        if (item)
+            await this.open(item);
+        this.trigger();
+    }
+    dragStart(item) {
+        if (this.value.dragging || !this.value.draggable)
+            return;
+        if (!this.value.selected.has(item.id)) {
+            this.select(item, { clear: true, notify: false });
+        }
+        this.value.dragging = true;
+        this.trigger();
+    }
+    async _drop(item, droppedItems, above, userWantsCopy, userWantsRecursive) {
+        const dropEffect = this._dropEffect(item, droppedItems, above, userWantsCopy);
+        if (dropEffect === 'none')
+            return false;
+        this.value.dragging = false;
+        this.value.loading = true;
+        this.trigger();
+        const selectedItems = Array.from(droppedItems.values());
+        const commonparent = this.findCommonParent([...selectedItems, item]);
+        try {
+            const result = dropEffect === 'move'
+                ? await this.moveHandler(selectedItems, item, above)
+                : await this.copyHandler(selectedItems, item, above, userWantsRecursive);
+            await this.openAndRefresh(item);
+            await this.refresh(commonparent);
+            return result;
+        }
+        catch (e) {
+            console.error(e);
+        }
+        finally {
+            this.update(v => ({ ...v, loading: false }));
+        }
+        return true;
+    }
+    async drop(item, above, userWantsCopy) {
+        const ret = await this._drop(item, this.value.selected, above, userWantsCopy, undefined);
+        return ret;
+    }
+    collectAncestors(item) {
+        const ret = [];
+        let itm = item;
+        while (itm.parent) {
+            ret.push(itm.parent);
+            itm = itm.parent;
+        }
+        return ret;
+    }
+    root(item) {
+        let root = item;
+        while (root.parent)
+            root = root.parent;
+        return root;
+    }
+    findCommonParent(items) {
+        if (items.length <= 1)
+            return;
+        const [first, ...rest] = items;
+        const ancestors = [first, ...this.collectAncestors(first)];
+        const lookup = keyby(ancestors, 'id');
+        const depthById = ancestors.reduce((depthById, a, i) => { depthById[a.id] = i; return depthById; }, {});
+        let idx = -1;
+        for (const item of rest) {
+            const itemAncestors = this.collectAncestors(item);
+            const firstcommon = itemAncestors.find(a => lookup[a.id]);
+            if (!firstcommon)
+                return;
+            const found = depthById[firstcommon.id];
+            if (found > idx)
+                idx = found;
+        }
+        return ancestors[idx];
+    }
+    dragEligible(selectedItems, userWantsCopy) {
+        return !this.dragEligibleHandler || this.dragEligibleHandler(selectedItems, userWantsCopy);
+    }
+    _dropEffect(item, droppedItems, above, userWantsCopy) {
+        const handlerAnswer = this.dropEffectHandler?.(Array.from(droppedItems.values()), item, above, userWantsCopy) ?? 'move';
+        if (handlerAnswer === 'none')
+            return 'none';
+        if (handlerAnswer === 'move') {
+            // I could make the user's dropEffectHandler check this, but it's pretty universal that you
+            // can't move a thing into itself or one of its own descendants
+            // and it would be super weird to just automagically turn it into a copy, not to mention it would
+            // mean placing it back on itself would feel like canceling the move but make a copy instead
+            if (droppedItems.has(item.id))
+                return 'none';
+            for (const ancestor of this.collectAncestors(item)) {
+                if (droppedItems.has(ancestor.id))
+                    return 'none';
+            }
+        }
+        if (handlerAnswer === 'move' && !this.moveHandler)
+            return 'none';
+        if (handlerAnswer === 'copy' && !this.copyHandler)
+            return 'none';
+        return handlerAnswer;
+    }
+    dropEffect(item, above, userWantsCopy) {
+        return this._dropEffect(item, this.value.selected, above, userWantsCopy);
+    }
+    cut() {
+        if (!this.cutEligible())
+            return;
+        this.value.copied = new Map(this.value.selected);
+        this.value.cut = true;
+        this.trigger();
+    }
+    copy() {
+        if (!this.copyEligible())
+            return;
+        this.value.copied = new Map(this.value.selected);
+        this.value.cut = false;
+        this.trigger();
+    }
+    cutEligible() {
+        return this.moveHandler && this.dragEligible(this.value.selectedItems, false);
+    }
+    copyEligible() {
+        return this.copyHandler && this.dragEligible(this.value.selectedItems, true);
+    }
+    cancelCopy() {
+        this.value.copied = new Map();
+        this.value.cut = undefined;
+        this.trigger();
+    }
+    pasteEligible(above = false) {
+        return this.value.copied.size && this.pasteEffect(above) !== 'none';
+    }
+    pasteEffect(above = false) {
+        return this._dropEffect(this.value.selectedItems[0], this.value.copied, above, !this.value.cut);
+    }
+    async paste(above = false, userWantsRecursive = false) {
+        if (this.pasteEffect(above) === 'none')
+            return;
+        const copied = this.value.copied;
+        const cut = this.value.cut;
+        this.value.copied = new Map();
+        this.value.cut = undefined;
+        return await this._drop(this.value.selectedItems[0], copied, above, !cut, userWantsRecursive);
+    }
+    setHeaderOverride(id, width) {
+        this.value.headerWidthOverrides[id] = `max(20px, ${width})`;
+        this.trigger();
+    }
+    resetHeaderOverride() {
+        this.value.headerWidthOverrides = {};
+        this.trigger();
+    }
+}

package/chooser/Asset.svelte

@@ -1,83 +0,0 @@
-<script>import { modifierKey } from '@txstate-mws/svelte-components';
-import { createEventDispatcher, getContext } from 'svelte';
-import { hashid } from 'txstate-utils';
-import { CHOOSER_STORE_CONTEXT } from './ChooserStore';
-import FileIcon from '../FileIcon.svelte';
-export let asset;
-export let level;
-export let posinset;
-export let setsize;
-export let next;
-export let prev;
-export let parent = undefined;
-const store = getContext(CHOOSER_STORE_CONTEXT);
-$: id = hashid(asset.id);
-$: haveFocus = $store?.focus === asset.id;
-$: isPreview = $store.preview?.id === asset.id;
-const dispatch = createEventDispatcher();
-function onKeyDown(e) {
-    if (modifierKey(e))
-        return;
-    if (['Enter', ' '].includes(e.key)) {
-        onClick(e);
-    }
-    else if (e.key === 'ArrowDown') {
-        e.preventDefault();
-        e.stopPropagation();
-        if (next) {
-            store.setFocus(next);
-            document.getElementById(hashid(next.id)).focus();
-        }
-    }
-    else if (e.key === 'ArrowUp') {
-        e.preventDefault();
-        e.stopPropagation();
-        const anyprev = prev;
-        const myprev = anyprev?.open && anyprev.children?.length && anyprev.path === asset.path ? anyprev.children[anyprev.children.length - 1] : prev;
-        if (myprev) {
-            store.setFocus(myprev);
-            document.getElementById(hashid(myprev.id)).focus();
-        }
-    }
-    else if (e.key === 'ArrowLeft') {
-        e.preventDefault();
-        e.stopPropagation();
-        if (parent) {
-            store.setFocus(parent);
-            document.getElementById(hashid(parent.id)).focus();
-        }
-    }
-}
-function onClick(e) {
-    e.preventDefault();
-    e.stopPropagation();
-    // if the id was already the same as the one that was clicked, the user
-    // has clicked it twice, so we should choose the item and end the modal
-    if ($store.preview?.id === asset.id)
-        dispatch('choose', asset);
-    else
-        store.preview(asset);
-}
-</script>
-
-<li
-  {id}
-  role="treeitem"
-  tabindex={haveFocus ? 0 : -1}
-  aria-setsize={setsize}
-  aria-posinset={posinset}
-  aria-level={level}
-  aria-selected={isPreview}
-  class="dialog-asset-file"
-  class:isPreview
-  on:keydown={onKeyDown}
-  on:click={onClick}
->
-  <FileIcon mime={asset.mime} inline /> {asset.name}
-</li>
-
-<style>
-  li {
-    cursor: pointer;
-  }
-</style>

package/chooser/Asset.svelte.d.ts

@@ -1,25 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { UIAsset, UIFolder, AnyUIItem } from './ChooserStore';
-declare const __propDef: {
-    props: {
-        asset: UIAsset;
-        level: number;
-        posinset: number;
-        setsize: number;
-        next: AnyUIItem | undefined;
-        prev: AnyUIItem | undefined;
-        parent?: UIFolder | undefined;
-    };
-    events: {
-        choose: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type AssetProps = typeof __propDef.props;
-export declare type AssetEvents = typeof __propDef.events;
-export declare type AssetSlots = typeof __propDef.slots;
-export default class Asset extends SvelteComponentTyped<AssetProps, AssetEvents, AssetSlots> {
-}
-export {};

package/chooser/AssetFolder.svelte

@@ -1,127 +0,0 @@
-<script>import folderOutline from '@iconify-icons/mdi/folder-outline.js';
-import folderOpenOutline from '@iconify-icons/mdi/folder-open-outline.js';
-import folderSyncOutline from '@iconify-icons/mdi/folder-sync-outline.js';
-import { modifierKey } from '@txstate-mws/svelte-components';
-import { createEventDispatcher, getContext } from 'svelte';
-import { hashid } from 'txstate-utils';
-import { CHOOSER_STORE_CONTEXT } from './ChooserStore';
-import Asset from './Asset.svelte';
-import Icon from '../Icon.svelte';
-export let folder;
-export let level;
-export let posinset;
-export let setsize;
-export let next;
-export let prev;
-export let parent = undefined;
-const store = getContext(CHOOSER_STORE_CONTEXT);
-$: open = folder.open && folder.children?.length;
-$: nextlevel = level + 1;
-$: id = hashid(folder.id);
-$: haveFocus = $store.focus === folder.id;
-$: isPreview = $store.preview?.id === folder.id;
-const dispatch = createEventDispatcher();
-function onKeyDown(e) {
-    if (modifierKey(e))
-        return;
-    if (['Enter', ' '].includes(e.key)) {
-        onClick(e);
-    }
-    else if (e.key === 'ArrowRight') {
-        e.preventDefault();
-        e.stopPropagation();
-        if (folder.open && folder.children?.length) {
-            const child = folder.children[0];
-            store.setFocus(child);
-            document.getElementById(hashid(child.id)).focus();
-        }
-        else {
-            store.open(folder);
-        }
-    }
-    else if (e.key === 'ArrowLeft') {
-        e.preventDefault();
-        e.stopPropagation();
-        if (folder.open) {
-            store.close(folder);
-        }
-        else if (parent) {
-            store.setFocus(parent);
-            document.getElementById(hashid(parent.id)).focus();
-        }
-    }
-    else if (e.key === 'ArrowDown') {
-        e.preventDefault();
-        e.stopPropagation();
-        const mynext = open ? folder.children[0] : next;
-        if (mynext) {
-            store.setFocus(mynext);
-            document.getElementById(hashid(mynext.id)).focus();
-        }
-    }
-    else if (e.key === 'ArrowUp') {
-        e.preventDefault();
-        e.stopPropagation();
-        const anyprev = prev;
-        const myprev = anyprev?.open && anyprev.children?.length && anyprev.path === folder.path ? anyprev.children[anyprev.children.length - 1] : prev;
-        if (myprev) {
-            store.setFocus(myprev);
-            document.getElementById(hashid(myprev.id)).focus();
-        }
-    }
-}
-function onClick(e) {
-    e.preventDefault();
-    e.stopPropagation();
-    // if the id was already the same as the one that was clicked, the user
-    // has clicked it twice, so we should choose the item and end the modal
-    if ($store.preview?.id === folder.id)
-        dispatch('choose', folder);
-    else {
-        store.preview(folder);
-        store.toggle(folder);
-    }
-}
-</script>
-
-<li
-  {id}
-  role="treeitem"
-  class:isPreview
-  aria-expanded={!!folder.open}
-  aria-selected={isPreview}
-  aria-level={level}
-  aria-setsize={setsize}
-  aria-posinset={posinset}
-  aria-busy={folder.loading}
-  tabindex={haveFocus ? 0 : -1}
-  on:keydown={onKeyDown}
-  on:click={onClick}
->
-  <Icon icon={folder.open ? folderOpenOutline : (folder.loading ? folderSyncOutline : folderOutline)} inline /> {folder.name}
-</li>
-{#if open}
-  <ul role="group" class="dialog-asset-sublist">
-    {#each folder.children as child, i (child.id)}
-      {@const setsize = folder.children.length}
-      {@const posinset = i + 1}
-      {@const subprev = i === 0 ? folder : folder.children[i - 1]}
-      {@const subnext = i === setsize - 1 ? next : folder.children[i + 1]}
-      {#if child.type === 'folder'}
-        <svelte:self folder={child} {setsize} {posinset} level={nextlevel} prev={subprev} next={subnext} parent={folder} on:choose />
-      {:else}
-        <Asset asset={child} {setsize} {posinset} level={nextlevel} prev={subprev} next={subnext} parent={folder} on:choose />
-      {/if}
-    {/each}
-  </ul>
-{/if}
-
-<style>
-  .dialog-asset-sublist {
-    list-style: none;
-    padding-left: 1em;
-  }
-  li {
-    cursor: pointer;
-  }
-</style>

package/chooser/AssetFolder.svelte.d.ts

@@ -1,25 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { UIFolder, AnyUIItem } from './ChooserStore';
-declare const __propDef: {
-    props: {
-        folder: UIFolder;
-        level: number;
-        posinset: number;
-        setsize: number;
-        next: AnyUIItem | undefined;
-        prev: AnyUIItem | undefined;
-        parent?: UIFolder | undefined;
-    };
-    events: {
-        choose: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type AssetFolderProps = typeof __propDef.props;
-export declare type AssetFolderEvents = typeof __propDef.events;
-export declare type AssetFolderSlots = typeof __propDef.slots;
-export default class AssetFolder extends SvelteComponentTyped<AssetFolderProps, AssetFolderEvents, AssetFolderSlots> {
-}
-export {};