xtralab 0.14.0 → 0.15.0

package/lib/fileBrowser/fileBrowser.js

@@ -1,28 +1,14 @@
 import * as React from 'react';
-import { fileIcon } from '@jupyterlab/ui-components';
-import { MimeData, PromiseDelegate } from '@lumino/coreutils';
-import { Drag } from '@lumino/dragdrop';
+import { showErrorMessage } from '@jupyterlab/apputils';
+import { renameFile } from '@jupyterlab/docmanager';
+import { nullTranslator } from '@jupyterlab/translation';
 import { Poll } from '@lumino/polling';
 import { FileTree, useFileTree } from '@pierre/trees/react';
-import { ROOT_LOAD_KEY, listDirectory, toServerPath } from './contents';
+import { ROOT_LOAD_KEY, listDirectory, parentOf, toServerPath } from './contents';
+import { computeDropMoves, computeRootDropMoves, createTreeDragAndDropConfig, useRootDropZone } from './dragAndDrop';
 import { buildIgnoredEntries, loadGitignoreMatcher } from './gitignore';
 import { loadGitStatusEntries } from './gitStatus';
 import { FILE_BROWSER_ICONS } from './icons';
-/**
- * MIME types used by the dock panel and other JupyterLab drop targets.
- * `FACTORY_MIME` is the lumino dock-panel contract: the value must be a
- * synchronous function that returns a Widget. The contents MIME types
- * mirror what the default file browser sends so other drop targets that
- * understand them (the file browser itself, custom drop zones) keep
- * working when the user drags out of xtralab.
- */
-const FACTORY_MIME = 'application/vnd.lumino.widget-factory';
-const CONTENTS_MIME = 'application/x-jupyter-icontents';
-/**
- * Threshold in pixels before a press-and-drag is treated as a drag rather
- * than a click. Matches the value used by the default JupyterLab listing.
- */
-const DRAG_THRESHOLD = 5;
 /**
  * Polling cadence for the git status decoration. Out-of-band changes (a
  * terminal `git add`, a `git pull`, a file edited outside the JupyterLab
@@ -69,7 +55,10 @@ const FILE_TREE_TAG = 'file-tree-container';
  * box unless the host carries the visibility marker set by the filter
  * bridge effect below — `@pierre/trees` always renders the box when
  * `search` is enabled, and its stylesheet lives in the shadow root where
- * outside CSS cannot reach.
+ * outside CSS cannot reach. The third rule restyles the drag-hover row:
+ * the library paints it with the selection background, which xtralab
+ * maps to a full-strength brand color that is illegible without the
+ * inverted selection foreground — hence the quieter ring.
  */
 const FILE_TREE_UNSAFE_CSS = '[data-type="item"][data-item-selected="true"] ' +
     '[data-item-section="spacing-item"] {' +
@@ -78,6 +67,10 @@ const FILE_TREE_UNSAFE_CSS = '[data-type="item"][data-item-selected="true"] ' +
     ':host(:not([data-xtralab-filter-visible])) ' +
     '[data-file-tree-search-container] {' +
     'display: none;' +
+    '}' +
+    '[data-type="item"][data-item-drag-target="true"] {' +
+    'background-color: var(--trees-bg-muted);' +
+    'box-shadow: inset 0 0 0 2px var(--trees-accent);' +
     '}';
 /**
  * Renders a `@pierre/trees` file tree backed by the Jupyter contents API.
@@ -89,14 +82,17 @@ const FILE_TREE_UNSAFE_CSS = '[data-type="item"][data-item-selected="true"] ' +
  * state map.
  */
 export function FileBrowserComponent(props) {
-    const { contentsManager, docManager, onOpenFile, widget } = props;
+    const { contentsManager, docManager, onOpenFile, translator, widget } = props;
+    const trans = React.useMemo(() => (translator !== null && translator !== void 0 ? translator : nullTranslator).load('jupyterlab'), [translator]);
+    const dropHandlerRef = React.useRef(null);
     const { model } = useFileTree({
         paths: [],
         initialExpansion: 'closed',
         search: true,
         icons: FILE_BROWSER_ICONS,
         itemHeight: 24,
-        unsafeCSS: FILE_TREE_UNSAFE_CSS
+        unsafeCSS: FILE_TREE_UNSAFE_CSS,
+        dragAndDrop: createTreeDragAndDropConfig(dropHandlerRef)
     });
     React.useEffect(() => {
         const knownDirs = new Map();
@@ -218,20 +214,6 @@ export function FileBrowserComponent(props) {
                 knownDirs.set(canonicalPath, 'unloaded');
             }
         };
-        /**
-         * Compute the canonical parent path for a given canonical path.
-         * Returns {@link ROOT_LOAD_KEY} for top-level entries.
-         */
-        const parentOf = (canonicalPath) => {
-            const trimmed = canonicalPath.endsWith('/')
-                ? canonicalPath.slice(0, -1)
-                : canonicalPath;
-            const idx = trimmed.lastIndexOf('/');
-            if (idx < 0) {
-                return ROOT_LOAD_KEY;
-            }
-            return `${trimmed.slice(0, idx)}/`;
-        };
         /**
          * Refresh every directory currently loaded into the tree. Walks down
          * from the root through the previously-expanded subdirectories so the
@@ -619,6 +601,136 @@ export function FileBrowserComponent(props) {
                 parentDir.expand();
             }
         };
+        /**
+         * Re-key the load-state mirrors after the tree model moved
+         * `fromPath` to `toPath`; a moved directory rewrites every entry
+         * under its old prefix.
+         */
+        const rekeyMirrors = (fromPath, toPath) => {
+            if (fromPath.endsWith('/')) {
+                for (const path of [...loadedPaths]) {
+                    if (path.startsWith(fromPath)) {
+                        loadedPaths.delete(path);
+                        loadedPaths.add(`${toPath}${path.slice(fromPath.length)}`);
+                    }
+                }
+                for (const [dir, state] of [...knownDirs.entries()]) {
+                    if (dir !== ROOT_LOAD_KEY && dir.startsWith(fromPath)) {
+                        knownDirs.delete(dir);
+                        knownDirs.set(`${toPath}${dir.slice(fromPath.length)}`, state);
+                    }
+                }
+            }
+            else if (loadedPaths.delete(fromPath)) {
+                loadedPaths.add(toPath);
+            }
+        };
+        /**
+         * Rename through the document manager, so collisions surface the
+         * standard overwrite dialog and open widgets follow their file.
+         * Resolves false when the move did not happen — a declined
+         * overwrite (upstream's 'File not renamed' sentinel) or a failure.
+         */
+        const renameOnServer = async (fromPath, toPath) => {
+            try {
+                await renameFile(docManager, toServerPath(fromPath), toServerPath(toPath));
+                return true;
+            }
+            catch (err) {
+                if (err !== 'File not renamed') {
+                    await showErrorMessage(trans.__('Move failed'), err);
+                }
+                return false;
+            }
+        };
+        /**
+         * Persist moves the tree model already applied. A move that did
+         * not reach the disk leaves the tree out of step, so a full
+         * refresh then restores server truth.
+         */
+        const persistDropMoves = async (moves) => {
+            let failed = false;
+            for (const move of moves) {
+                if (!(await renameOnServer(move.from, move.to))) {
+                    failed = true;
+                }
+                if (cancelled) {
+                    return;
+                }
+            }
+            if (failed) {
+                void refreshAll();
+            }
+        };
+        const completeDrop = (result) => {
+            if (cancelled) {
+                return;
+            }
+            const moves = computeDropMoves(result);
+            for (const move of moves) {
+                rekeyMirrors(move.from, move.to);
+            }
+            syncGitStatus();
+            void persistDropMoves(moves);
+        };
+        /**
+         * Server-side renames for moves the tree model did not apply; the
+         * `fileChanged` signals nudge the listing poll to reconcile.
+         */
+        const persistFallbackMoves = async (moves) => {
+            for (const move of moves) {
+                await renameOnServer(move.from, move.to);
+                if (cancelled) {
+                    return;
+                }
+            }
+        };
+        /**
+         * The tree refused the drop and left its model untouched — almost
+         * always a name collision at the destination.
+         */
+        const failedDrop = (error, context) => {
+            if (cancelled) {
+                return;
+            }
+            const moves = computeDropMoves(context);
+            if (moves.length === 0) {
+                console.error('xtralab: drop failed', error);
+                return;
+            }
+            void persistFallbackMoves(moves);
+        };
+        /**
+         * Move the dragged paths to the workspace root: apply to the model
+         * first so the rows relocate instantly, then persist. A path the
+         * model cannot move (name collision) falls back to the server-side
+         * rename and its dialog.
+         */
+        const dropOnRoot = (draggedPaths) => {
+            if (cancelled) {
+                return;
+            }
+            const applied = [];
+            const fallback = [];
+            for (const move of computeRootDropMoves(draggedPaths)) {
+                try {
+                    model.move(move.from, move.to);
+                    rekeyMirrors(move.from, move.to);
+                    applied.push(move);
+                }
+                catch (_a) {
+                    fallback.push(move);
+                }
+            }
+            if (applied.length > 0) {
+                syncGitStatus();
+                void persistDropMoves(applied);
+            }
+            if (fallback.length > 0) {
+                void persistFallbackMoves(fallback);
+            }
+        };
+        dropHandlerRef.current = { completeDrop, failedDrop, dropOnRoot };
         knownDirs.set(ROOT_LOAD_KEY, 'unloaded');
         void fetchDirectory(ROOT_LOAD_KEY);
         void refreshGitignoreMatcher();
@@ -718,6 +830,7 @@ export function FileBrowserComponent(props) {
         }
         return () => {
             cancelled = true;
+            dropHandlerRef.current = null;
             gitStatusPoll.dispose();
             contentsManager.fileChanged.disconnect(onContentsFileChanged);
             listingPoll.dispose();
@@ -740,7 +853,7 @@ export function FileBrowserComponent(props) {
                 }
             }
         };
-    }, [model, contentsManager, widget]);
+    }, [model, contentsManager, widget, docManager, trans]);
     // Bridge the tree's selection state up to the widget so command handlers
     // can read it without depending on React internals. The tree exposes its
     // selection through `getSelectedPaths()` and emits a generic notification
@@ -896,166 +1009,7 @@ export function FileBrowserComponent(props) {
             wrapper.removeEventListener('contextmenu', handleContextMenu, true);
         };
     }, []);
-    // Drag a file row out of the tree onto the JupyterLab main area. The row
-    // lives in the `@pierre/trees` shadow DOM, so we listen to mousedown on
-    // the wrapper and walk `composedPath()` to recover the row. The drag
-    // payload uses Lumino's `FACTORY_MIME` contract: the dock panel calls the
-    // factory function on drop and adds the returned widget to its layout.
-    React.useEffect(() => {
-        const wrapper = wrapperRef.current;
-        if (wrapper === null) {
-            return;
-        }
-        let press = null;
-        let activeDrag = null;
-        const findRow = (event) => {
-            for (const target of event.composedPath()) {
-                if (!(target instanceof HTMLElement)) {
-                    continue;
-                }
-                if (target.dataset.type === 'item') {
-                    return target;
-                }
-            }
-            return null;
-        };
-        const cleanup = () => {
-            press = null;
-            document.removeEventListener('mousemove', handleMouseMove, true);
-            document.removeEventListener('mouseup', handleMouseUp, true);
-        };
-        const handleMouseDown = (event) => {
-            // Only react to the primary button. Do not interfere with right-click
-            // (handled by the contextmenu bridge) or middle-click (browser default).
-            if (event.button !== 0) {
-                return;
-            }
-            if (activeDrag !== null) {
-                return;
-            }
-            const row = findRow(event);
-            if (row === null || row.dataset.itemType !== 'file') {
-                return;
-            }
-            const itemPath = row.dataset.itemPath;
-            if (itemPath === undefined || itemPath.length === 0) {
-                return;
-            }
-            press = { x: event.clientX, y: event.clientY, path: itemPath };
-            document.addEventListener('mousemove', handleMouseMove, true);
-            document.addEventListener('mouseup', handleMouseUp, true);
-        };
-        const handleMouseMove = (event) => {
-            if (press === null) {
-                return;
-            }
-            const dx = Math.abs(event.clientX - press.x);
-            const dy = Math.abs(event.clientY - press.y);
-            if (dx < DRAG_THRESHOLD && dy < DRAG_THRESHOLD) {
-                return;
-            }
-            const startedFrom = press;
-            cleanup();
-            startDrag(startedFrom.path, event.clientX, event.clientY);
-        };
-        const handleMouseUp = () => {
-            cleanup();
-        };
-        /**
-         * Build the list of file paths to drag. If the user pressed on a row
-         * that is part of the current selection, drag every selected file.
-         * Otherwise, drag just the row that was pressed. Folders never join a
-         * drag-out — they have no docmanager widget to open.
-         */
-        const collectDragPaths = (sourcePath) => {
-            const selection = model.getSelectedPaths();
-            const sourceInSelection = selection.includes(sourcePath);
-            const candidates = sourceInSelection ? selection : [sourcePath];
-            const fileServerPaths = [];
-            for (const candidate of candidates) {
-                if (candidate.endsWith('/')) {
-                    continue;
-                }
-                fileServerPaths.push(toServerPath(candidate));
-            }
-            // The source row is always a file, so the list cannot be empty.
-            if (fileServerPaths.length === 0) {
-                fileServerPaths.push(toServerPath(sourcePath));
-            }
-            return fileServerPaths;
-        };
-        const startDrag = (sourcePath, clientX, clientY) => {
-            const paths = collectDragPaths(sourcePath);
-            const sourceServerPath = toServerPath(sourcePath);
-            const dragImage = createDragImage(paths.length);
-            const drag = new Drag({
-                dragImage,
-                mimeData: new MimeData(),
-                supportedActions: 'copy-move',
-                proposedAction: 'move'
-            });
-            drag.mimeData.setData(CONTENTS_MIME, paths);
-            // The factory is called by the lumino dock panel on drop. It must
-            // return a Widget synchronously. For multi-file drags we open the
-            // remaining files asynchronously after the first one is placed,
-            // mirroring the default file browser's behavior.
-            const otherPaths = paths.filter(p => p !== sourceServerPath);
-            drag.mimeData.setData(FACTORY_MIME, () => {
-                let widget = docManager.findWidget(sourceServerPath);
-                if (widget === undefined) {
-                    widget = docManager.open(sourceServerPath);
-                }
-                if (otherPaths.length > 0) {
-                    const firstPlaced = new PromiseDelegate();
-                    void firstPlaced.promise.then(() => {
-                        let prev = widget;
-                        for (const otherPath of otherPaths) {
-                            const opened = docManager.openOrReveal(otherPath, undefined, undefined, prev !== undefined
-                                ? { ref: prev.id, mode: 'tab-after' }
-                                : undefined);
-                            if (opened !== undefined) {
-                                prev = opened;
-                            }
-                        }
-                    });
-                    firstPlaced.resolve();
-                }
-                return widget;
-            });
-            activeDrag = drag;
-            void drag.start(clientX, clientY).then(() => {
-                activeDrag = null;
-            });
-        };
-        wrapper.addEventListener('mousedown', handleMouseDown);
-        return () => {
-            wrapper.removeEventListener('mousedown', handleMouseDown);
-            cleanup();
-            activeDrag === null || activeDrag === void 0 ? void 0 : activeDrag.dispose();
-            activeDrag = null;
-        };
-    }, [model, docManager]);
+    useRootDropZone({ model, handlerRef: dropHandlerRef, wrapperRef });
     return (React.createElement("div", { ref: wrapperRef, style: { display: 'flex', flex: '1 1 auto', minHeight: 0 } },
         React.createElement(FileTree, { model: model, style: { height: '100%', width: '100%' } })));
 }
-/**
- * Build the small badge shown next to the cursor while dragging. The
- * default file browser renders a richer image with the file's icon, but
- * we don't have a per-file icon at this layer — just the count of files
- * being dragged is enough to give the user feedback.
- */
-function createDragImage(count) {
-    const node = document.createElement('div');
-    node.className = 'jp-xtralab-DragImage';
-    const iconWrapper = document.createElement('span');
-    iconWrapper.className = 'jp-xtralab-DragImage-icon';
-    fileIcon.element({ container: iconWrapper, stylesheet: 'menuItem' });
-    node.appendChild(iconWrapper);
-    if (count > 1) {
-        const badge = document.createElement('span');
-        badge.className = 'jp-xtralab-DragImage-count';
-        badge.textContent = String(count);
-        node.appendChild(badge);
-    }
-    return node;
-}

package/lib/fileBrowser/index.js

@@ -1,10 +1,10 @@
 import { ILayoutRestorer } from '@jupyterlab/application';
-import { ICommandPalette } from '@jupyterlab/apputils';
+import { ICommandPalette, IMovableSectionRegistry } from '@jupyterlab/apputils';
 import { IDocumentManager } from '@jupyterlab/docmanager';
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
-import { ITranslator } from '@jupyterlab/translation';
+import { ITranslator, nullTranslator } from '@jupyterlab/translation';
 import { populateToolbar, registerCommands } from './commands';
-import { XtralabFileBrowser } from './widget';
+import { FILE_BROWSER_ID, XtralabFileBrowser } from './widget';
 const PLUGIN_ID = 'xtralab:plugin';
 /**
  * The file browser plugin. Adds a `@pierre/trees`-powered file browser to the
@@ -15,14 +15,21 @@ const plugin = {
     description: 'A path-first file browser for JupyterLab built on @pierre/trees.',
     autoStart: true,
     requires: [IDocumentManager],
-    optional: [ILayoutRestorer, ISettingRegistry, ICommandPalette, ITranslator],
-    activate: (app, docManager, restorer, settingRegistry, palette, translator) => {
+    optional: [
+        ILayoutRestorer,
+        ISettingRegistry,
+        ICommandPalette,
+        ITranslator,
+        IMovableSectionRegistry
+    ],
+    activate: (app, docManager, restorer, settingRegistry, palette, translator, movableSections) => {
         const browser = new XtralabFileBrowser({
             contentsManager: app.serviceManager.contents,
             docManager,
             onOpenFile: (serverPath) => {
                 void app.commands.execute('docmanager:open', { path: serverPath });
-            }
+            },
+            translator: translator !== null && translator !== void 0 ? translator : undefined
         });
         // Ranks just under the Terminals panel in the left sidebar. The shipped
         // `layout` setting assigns the default ranks (rank only, no area pin),
@@ -34,6 +41,32 @@ const plugin = {
         }
         registerCommands({ app, browser, docManager, palette, translator });
         populateToolbar({ app, browser });
+        if (movableSections) {
+            const label = (translator !== null && translator !== void 0 ? translator : nullTranslator)
+                .load('jupyterlab')
+                .__('Files');
+            movableSections.registerSource(FILE_BROWSER_ID, label, browser);
+            movableSections.registerTarget(FILE_BROWSER_ID, label, browser);
+            // Only a user move should switch the sidebar, not the startup restoration.
+            let settled = false;
+            void app.restored.then(() => {
+                settled = true;
+            });
+            browser.contentChanged.connect(() => {
+                if (browser.isEmpty) {
+                    if (browser.parent) {
+                        browser.parent = null;
+                    }
+                }
+                else if (!browser.parent) {
+                    app.shell.add(browser, 'left', { rank: 2 });
+                    if (settled) {
+                        app.shell.activateById(browser.id);
+                    }
+                }
+            });
+            browser.announceSections();
+        }
         if (settingRegistry) {
             settingRegistry.load(PLUGIN_ID).catch(reason => {
                 console.error('Failed to load settings for xtralab.', reason);

package/lib/fileBrowser/widget.d.ts

@@ -1,13 +1,16 @@
+import { IMovableSectionDestination, IMovableSectionSource, ISectionEntry } from '@jupyterlab/apputils';
 import { IDocumentManager } from '@jupyterlab/docmanager';
 import { Contents } from '@jupyterlab/services';
+import { ITranslator } from '@jupyterlab/translation';
 import { Toolbar } from '@jupyterlab/ui-components';
 import { ISignal } from '@lumino/signaling';
-import { Widget } from '@lumino/widgets';
+import { AccordionPanel, Widget } from '@lumino/widgets';
 export declare const FILE_BROWSER_ID = "xtralab:file-browser";
 interface IXtralabFileBrowserOptions {
     contentsManager: Contents.IManager;
     docManager: IDocumentManager;
     onOpenFile?: (serverPath: string) => void;
+    translator?: ITranslator;
 }
 /**
  * Public API of the xtralab file browser used by command handlers and other
@@ -119,13 +122,14 @@ export interface IXtralabFileBrowser {
      * Toggle the filter box above the tree.
      */
     toggleFileFilter(): void;
+    readonly sectionNode: HTMLElement;
 }
 /**
- * Lumino widget that hosts the React-based `@pierre/trees` file browser.
- * The widget is laid out with a JupyterLab `Toolbar` on top and the tree
- * filling the remaining space.
+ * Lumino widget hosting the React-based `@pierre/trees` file browser. The tree
+ * and its toolbar form one movable "Files" section, and sections from other
+ * panels can be moved in below it.
  */
-export declare class XtralabFileBrowser extends Widget implements IXtralabFileBrowser {
+export declare class XtralabFileBrowser extends Widget implements IXtralabFileBrowser, IMovableSectionSource, IMovableSectionDestination {
     constructor(options: IXtralabFileBrowserOptions);
     get contentsManager(): Contents.IManager;
     get toolbar(): Toolbar;
@@ -150,9 +154,39 @@ export declare class XtralabFileBrowser extends Widget implements IXtralabFileBr
     collapseAll(): void;
     setFileFilterVisible(visible: boolean): void;
     toggleFileFilter(): void;
+    get sectionNode(): HTMLElement;
+    get isEmpty(): boolean;
+    get contentChanged(): ISignal<this, void>;
+    get sectionAdded(): ISignal<this, ISectionEntry>;
+    get accordionPanel(): AccordionPanel | null;
+    get sections(): ReadonlyArray<Widget>;
+    /**
+     * The toolbar is the section's title node: it is the tree's header row at
+     * home, and an accordion host renders it inside the section title.
+     */
+    getSections(): ReadonlyArray<ISectionEntry>;
+    removeSectionById(sectionId: string): Widget | null;
+    reinsertSection(widget: Widget): void;
+    /**
+     * The move plugin reconciles persisted moves only against sections announced
+     * after `registerSource`, and this panel builds its section in the constructor.
+     */
+    announceSections(): void;
+    /**
+     * The first hosted section moves the tree into an accordion.
+     */
+    addSection(widget: Widget): void;
+    removeSectionWidget(widget: Widget): void;
+    private _isSectionHome;
+    /**
+     * An accordion host moves the toolbar node into the section title and leaves
+     * it orphaned on detach; re-parenting makes the layout attach it again.
+     */
+    private _restoreToolbar;
     private _contentsManager;
     private _docManager;
     private _onOpenFile;
+    private _translator;
     private _selectedPaths;
     private _selectionChanged;
     private _refreshRequested;
@@ -164,5 +198,10 @@ export declare class XtralabFileBrowser extends Widget implements IXtralabFileBr
     private _fileFilterVisibleChanged;
     private _toolbar;
     private _content;
+    private _section;
+    private _panelLayout;
+    private _accordion;
+    private _contentChanged;
+    private _sectionAdded;
 }
 export {};