@e280/quay/x/logic/aspects/dropzone.js

File-browser and outliner UI for the web

import { loot } from "@e280/sly/loot";
import { signal } from "@e280/strata";
export class Dropzone {
    group;
    #drag_drop = new loot.DragAndDrops({
        acceptDrop: (_e, grabbed, hovering) => this.group.move(grabbed, hovering)
    });
    constructor(group) {
        this.group = group;
    }
    // to make drop file to import ui work
    #hovering = signal(undefined);
    get grabbed() {
        return this.#drag_drop.dragging;
    }
    get hovering() {
        return this.#drag_drop.hovering ?? this.#hovering();
    }
    dragenter = (e, target) => {
        e.preventDefault();
        this.#drag_drop.dropzone(() => target).dragenter(e);
        this.#hovering(target);
    };
    dragleave = (e) => {
        const hovering = this.hovering;
        if (hovering)
            this.#drag_drop.dropzone(() => hovering).dragleave(e);
        this.#hovering(undefined);
    };
    dragstart = (e, n) => {
        e.stopPropagation();
        this.#drag_drop.dragzone(() => n).dragstart(e);
    };
    dragover = (e, n) => {
        e.preventDefault();
        this.#drag_drop.dropzone(() => n).dragover(e);
    };
    dragend = (e) => {
        this.#drag_drop.$draggy(undefined);
        this.#drag_drop.$droppy(undefined);
        this.#hovering(undefined);
    };
    drop = (e, target) => {
        e.preventDefault();
        const files = Array.from(e.dataTransfer?.files || []);
        if (files.length) {
            this.group.upload(files, target);
        }
        const same = this.grabbed?.id === this.hovering?.id;
        const child = this.grabbed?.children.some(c => this.hovering?.id === c.id);
        const parent = this.grabbed?.parent?.id === this.hovering?.id;
        if (!same && !child && !parent)
            this.#drag_drop.dropzone(() => target).drop(e);
        this.#hovering(undefined);
    };
    change = (e, targetFolder) => {
        const input = e.currentTarget;
        const files = Array.from(input.files ?? []);
        if (files.length) {
            this.group.upload(files, targetFolder);
        }
    };
}
//# sourceMappingURL=dropzone.js.map