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

File-browser and outliner UI for the web

import { ShockDragDrop, signal } from "@benev/slate";
export class Dropzone {
    group;
    #drag_drop = new ShockDragDrop({
        handle_drop: (_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.grabbed;
    }
    get hovering() {
        return this.#drag_drop.hovering ?? this.#hovering.value;
    }
    dragenter = (e, target) => {
        e.preventDefault();
        this.#drag_drop.dropzone.dragenter()(e);
        this.#hovering.value = target;
    };
    dragleave = (e) => {
        this.#drag_drop.dropzone.dragleave()(e);
        this.#hovering.value = undefined;
    };
    dragstart = (e, n) => {
        e.stopPropagation();
        this.#drag_drop.dragzone.dragstart(n)(e);
    };
    dragover = (e, n) => {
        e.preventDefault();
        this.#drag_drop.dropzone.dragover(n)(e);
    };
    dragend = (e) => {
        this.#drag_drop.dragzone.dragend()(e);
        this.#hovering.value = 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.drop(target)(e);
        this.#hovering.value = 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