dsh-workspace-explorer 1.0.1 → 1.1.1

package/src/ui/explorer.js

@@ -1,5 +1,5 @@
 import { joinPath, move, parentOf, renamePath, resourceAddress, underPath, visit, windowsPath } from './navigation.js';
-import { Preview, PreviewBoundary } from './preview.js';
+import { formatSize, Preview, PreviewBoundary } from './preview.js';
 import { disks } from './workspace.js';
 import { useComposerDrop } from './composer-drop.js';
 import { Thumbnail } from './thumbnail.js';
@@ -80,14 +80,6 @@ function selectNames(current, name, entries, shift, ctrl) {
   return { names, anchor: name };
 }
 
-function formatSize(bytes) {
-  if (typeof bytes !== 'number') return '—';
-  if (bytes < 1024) return bytes + ' B';
-  if (bytes < 1024 ** 2) return (bytes / 1024).toFixed(1) + ' KB';
-  if (bytes < 1024 ** 3) return (bytes / 1024 ** 2).toFixed(1) + ' MB';
-  return (bytes / 1024 ** 3).toFixed(1) + ' GB';
-}
-
 function entryType(entry) {
   if (entry.type === 'drive') return '磁盘';
   if (entry.type === 'directory') return '文件夹';
@@ -138,8 +130,10 @@ const clampSplit = ratio => Math.min(splitMax, Math.max(splitMin, ratio));
 
 function PreviewDivider({ root, ratio, setRatio }) {
   const grabOffset = useRef(0);
+  const [dragging, setDragging] = useState(false);
   return h('div', {
     className: 'dwe-divider', role: 'separator', tabIndex: 0,
+    'data-dragging': dragging || undefined,
     'aria-label': '调整文件预览分栏高度', 'aria-orientation': 'horizontal',
     'aria-valuemin': splitMin * 100, 'aria-valuemax': splitMax * 100,
     'aria-valuenow': Math.round(ratio * 100),
@@ -147,16 +141,18 @@ function PreviewDivider({ root, ratio, setRatio }) {
       if (event.button !== 0) return;
       event.preventDefault();
       const divider = event.currentTarget;
-      grabOffset.current = event.clientY - divider.getBoundingClientRect().top;
+      const bounds = divider.getBoundingClientRect();
+      grabOffset.current = event.clientY - (bounds.top + bounds.height / 2);
       divider.focus();
       divider.setPointerCapture(event.pointerId);
     },
+    onGotPointerCapture: () => setDragging(true),
+    onLostPointerCapture: () => setDragging(false),
     onPointerMove: event => {
       const divider = event.currentTarget;
       if (!divider.hasPointerCapture(event.pointerId)) return;
       const bounds = root.current.getBoundingClientRect();
-      const available = bounds.height - divider.offsetHeight;
-      if (available > 0) setRatio(clampSplit((event.clientY - bounds.top - grabOffset.current) / available));
+      if (bounds.height > 0) setRatio(clampSplit((event.clientY - bounds.top - grabOffset.current) / bounds.height));
     },
     onKeyDown: event => {
       if (event.key === 'ArrowUp') setRatio(value => clampSplit(value - 0.05));
@@ -171,21 +167,19 @@ function PreviewDivider({ root, ratio, setRatio }) {
 }
 
 export function Explorer({
-  cwd, sessionId, initialPath, bindFileActions, getTarget, onPath, openLocal, openFolderTab,
+  cwd, sessionId, initialPath, bindFileActions, getTarget, onPath, openLocal, openDocument, openFolderTab,
   refreshDirectories, updateRenamedPath,
 }) {
   const workspace = windowsPath(cwd);
   const [localHistory, setLocalHistory] = useState(() => firstPath(initialPath ?? workspace));
   const [scoped, setScoped] = useState(null);
   const workspaceMode = scoped !== null;
-  const root = workspaceMode ? (sessionId ? workspace : scoped.root) : null;
-  const history = workspaceMode ? (root === scoped.root ? scoped.history : firstPath(root)) : localHistory;
+  const root = scoped?.root ?? null;
+  const history = scoped?.history ?? localHistory;
   const changeHistory = useCallback(change => {
-    if (workspaceMode) setScoped(current => current && {
-      root, history: change(current.root === root ? current.history : firstPath(root)),
-    });
+    if (workspaceMode) setScoped(current => current && { ...current, history: change(current.history) });
     else setLocalHistory(change);
-  }, [workspaceMode, root]);
+  }, [workspaceMode]);
   const [revision, setRevision] = useState(0);
   const [listing, setListing] = useState(null);
   const [selection, setSelection] = useState(emptySelection);
@@ -240,7 +234,7 @@ export function Explorer({
       if (!current) return current;
       const absolute = renamePath(current.absolute, from, to);
       return absolute === current.absolute ? current
-        : { absolute, name: absolute.split('\\').at(-1), address: resourceAddress(absolute) };
+        : { ...current, absolute, name: absolute.split('\\').at(-1), address: resourceAddress(absolute) };
     });
   }, []);
   const closeMenu = useCallback((restore = false) => {
@@ -291,12 +285,6 @@ export function Explorer({
     setScoped(workspaceMode ? null : { root: workspace, history: firstPath(workspace) });
   }
 
-  useLayoutEffect(() => {
-    if (!workspaceMode || !root || root === scoped.root) return;
-    resetNavigation();
-    setScoped({ root, history: firstPath(root) });
-  }, [workspaceMode, root, scoped?.root, resetNavigation]);
-
   useLayoutEffect(() => { onPath(path); }, [onPath, path]);
 
   useEffect(() => {
@@ -327,7 +315,6 @@ export function Explorer({
   }, [root, term, revision, sessionId]);
 
   useEffect(() => () => pathRequest.current?.abort(), []);
-  useLayoutEffect(() => bindFileActions({ refresh, rename }), [bindFileActions, refresh, rename]);
   useLayoutEffect(() => { scroll.current.scrollTop = 0; }, [path, term]);
   useLayoutEffect(() => {
     const result = resultToReveal.current;
@@ -352,20 +339,33 @@ export function Explorer({
     changeHistory(value => move(value, delta));
   }
 
-  function openPreview(absolute, name) {
-    setPreview(current => current?.absolute === absolute ? current : {
-      name, absolute, address: resourceAddress(absolute),
+  const openPreview = useCallback((absolute, name, size, line) => {
+    const targetLine = Number.isSafeInteger(line) && line > 0 ? line : undefined;
+    setPreview(current => current?.absolute === absolute && !targetLine ? current : {
+      name, absolute, size, line: targetLine, address: resourceAddress(absolute),
     });
-  }
+  }, []);
 
-  function openSearchHit(match) {
-    if (!underPath(match.path, root)) return;
-    const folder = parentOf(match.path);
-    navigate(folder);
-    resultToReveal.current = { folder, name: match.name };
-    setSelection(singleSelection(match.name));
-    openPreview(match.path, match.name);
+  const revealFile = useCallback((absolute, name, size, line) => {
+    const folder = parentOf(absolute);
+    if (workspaceMode && !underPath(folder, root)) {
+      resetNavigation();
+      setScoped(null);
+      setLocalHistory(history => visit(history, folder));
+    } else {
+      navigate(folder);
+      if (folder === path && ready && !ready.entries.some(entry => entry.name === name)) refresh();
+    }
+    resultToReveal.current = { folder, name };
+    setSelection(singleSelection(name));
+    openPreview(absolute, name, size, line);
     setPreviewOpen(true);
+  }, [workspaceMode, root, path, ready, resetNavigation, navigate, refresh, openPreview]);
+
+  useLayoutEffect(() => bindFileActions({ refresh, rename, reveal: revealFile }), [bindFileActions, refresh, rename, revealFile]);
+
+  function openSearchHit(match) {
+    if (underPath(match.path, root)) revealFile(match.path, match.name);
   }
 
   function select(event, entry) {
@@ -374,7 +374,7 @@ export function Explorer({
     setSelection(current => selectNames(current, entry.name, entries, shiftKey, ctrlKey));
     setActionError('');
     setActionNotice('');
-    if (!shiftKey && !ctrlKey && entry.type === 'file') openPreview(joinPath(path, entry.name), entry.name);
+    if (!shiftKey && !ctrlKey && entry.type === 'file') openPreview(joinPath(path, entry.name), entry.name, entry.size);
   }
 
   async function openWithWindows(path) {
@@ -507,7 +507,7 @@ export function Explorer({
       if (target.type === 'directory') navigate(windowsPath(target.path));
       else {
         closeEditor();
-        openPreview(target.path, target.name);
+        openPreview(target.path, target.name, target.size);
       }
       scroll.current.focus();
     } catch (error) {
@@ -525,7 +525,9 @@ export function Explorer({
     if (!target || !shownPreview) return;
     try {
       if (root) await disks.locate(shownPreview.absolute, undefined, root);
-      if (getTarget() === target) target.actions.openResource(resourceAddress(shownPreview.absolute, target.sessionId));
+      if (getTarget() === target) openDocument(resourceAddress(shownPreview.absolute, target.sessionId), {
+        paneId: target.paneId, params: shownPreview.line ? { line: shownPreview.line } : undefined,
+      });
     } catch (error) {
       setActionError(error?.message || String(error));
     }
@@ -582,6 +584,7 @@ export function Explorer({
           tool('home', workspaceMode ? '返回工作区根目录' : '返回此电脑', () => navigate(root), path === root),
           tool('workspace', '跳转至工作区', () => navigate(workspace), !workspace || path === workspace || workspaceMode)),
         h('div', { className: 'dwe-nav' },
+          h('span', { className: 'dwe-v-divider', 'aria-hidden': true }),
           tool('copy', '复制', () => runAction('copy', selectedEntries), !modifySelected),
           tool('cut', '剪切', () => runAction('cut', selectedEntries), !modifySelected),
           tool('paste', '粘贴', () => runAction('paste'), !path || working),
@@ -647,20 +650,23 @@ export function Explorer({
                 !grid && h('span', { className: 'dwe-meta' }, entryType(entry)),
                 !grid && h('span', { className: 'dwe-meta' }, formatSize(entry.size))))))),
       h('footer', { className: 'dwe-status-bar' },
+        h('div', { className: 'dwe-nav', role: 'group', 'aria-label': '文件视图' },
+          tool('list', '列表', () => changeView('list'), false, !grid),
+          tool('grid', '大图标', () => changeView('grid'), false, grid)),
+        h('span', { className: 'dwe-v-divider', 'aria-hidden': true }),
         h('span', { className: 'dwe-status', role: 'status', title: actionNotice },
           term ? found?.matches ? found.matches.length + ' 个结果' + (found.truncated ? ' · 请缩小关键词' : '') : ' '
             : actionNotice || (selectedEntries.length > 1 ? '已选择 ' + selectedEntries.length + ' 项'
               : ready?.entries ? ready.entries.length + ' 个项目' + (ready.truncated ? ' · 列表已截断' : '') : ' ')),
-        h('div', { className: 'dwe-nav', role: 'group', 'aria-label': '视图与预览' },
-          tool('list', '列表', () => changeView('list'), false, !grid),
-          tool('grid', '大图标', () => changeView('grid'), false, grid),
-          tool('preview', '预览窗格', () => setPreviewOpen(open => !open), false, previewOpen)))),
+        tool('preview', '预览窗格', () => setPreviewOpen(open => !open), false, previewOpen))),
     previewOpen && h(PreviewDivider, { root: layout, ratio: splitRatio, setRatio: setSplitRatio }),
     previewOpen && h('section', { className: 'dwe-preview', 'aria-label': '文件预览' },
       h('header', { className: 'dwe-preview-bar' },
         h('span', { className: 'dwe-preview-label' }, '预览'),
         shownPreview && h('span', { className: 'dwe-preview-name', title: shownPreview.absolute },
-          fileIcon(shownPreview.name, 'file'), h('span', null, shownPreview.name)),
+          fileIcon(shownPreview.name, 'file'),
+          h('span', null, shownPreview.name),
+          tool('close', '关闭当前文件预览', () => setPreview(null))),
         shownPreview && tool('external', '在 DSH 文档预览中打开', openNative)),
       h('div', { className: 'dwe-preview-body' },
         shownPreview ? h(PreviewBoundary, { key: JSON.stringify([shownPreview.absolute, root]) }, h(Preview, { file: shownPreview, root }))

package/src/ui/favorites.js

@@ -1,125 +1,177 @@
-import { renamePath, underPath, windowsPath } from './navigation.js';
-
-const key = 'dsh-workspace-explorer.favorites';
-const { createElement: h, useLayoutEffect, useRef, useSyncExternalStore } = react;
-const listeners = new Set();
-
-function unique(paths) {
-  const seen = new Set();
-  return paths.filter(path => {
-    const id = path.toLowerCase();
-    if (seen.has(id)) return false;
-    seen.add(id);
-    return true;
-  });
-}
-
-function read() {
-  try {
-    const paths = JSON.parse(localStorage.getItem(key));
-    return Array.isArray(paths) ? unique(paths.map(windowsPath).filter(Boolean)) : [];
-  } catch { return []; }
-}
-
-let folders = read();
-
-function update(next, persist = true) {
-  if (next.length === folders.length && next.every((path, index) => path === folders[index])) return;
-  folders = next;
-  if (persist) {
-    try { localStorage.setItem(key, JSON.stringify(folders)); } catch { /* Keep the current window's favorites. */ }
-  }
-  for (const listener of listeners) listener();
-}
-
-function storageChanged(event) {
-  if (event.key === key || event.key === null) update(read(), false);
-}
-
-function subscribe(listener) {
-  if (!listeners.size) window.addEventListener('storage', storageChanged);
-  listeners.add(listener);
-  return () => {
-    listeners.delete(listener);
-    if (!listeners.size) window.removeEventListener('storage', storageChanged);
-  };
-}
-
-export function useFavorites() {
-  return useSyncExternalStore(subscribe, () => folders);
-}
-
-export function removeFavorite(path) {
-  update(folders.filter(folder => folder.toLowerCase() !== path.toLowerCase()));
-}
-
-export function toggleFavorite(path) {
-  if (folders.some(folder => folder.toLowerCase() === path.toLowerCase())) removeFavorite(path);
-  else update([...folders, path]);
-}
-
-export function clearFavorites() {
-  update([]);
-}
-
-export function renameFavorites(from, to) {
-  update(unique(folders.map(path => renamePath(path, from, to))));
-}
-
-export function Favorites({ anchor, close, folders, navigate, currentPath, removeIcon, workspaceMode, root }) {
-  const panel = useRef(null);
-  useLayoutEffect(() => {
-    const popup = panel.current;
-    const button = anchor.current;
-    const parent = popup.offsetParent;
-    if (!button || !parent) return;
-
-    function position() {
-      const bounds = parent.getBoundingClientRect();
-      const trigger = button.getBoundingClientRect();
-      popup.style.left = Math.max(4, Math.min(trigger.right - bounds.left - popup.offsetWidth,
-        bounds.width - popup.offsetWidth - 4)) + 'px';
-      popup.style.top = trigger.bottom - bounds.top + 4 + 'px';
-    }
-
-    const observer = new ResizeObserver(position);
-    observer.observe(parent);
-    observer.observe(popup);
-    position();
-    const lifetime = new AbortController();
-    const options = { capture: true, signal: lifetime.signal };
-    function outside(event) {
-      if (popup.contains(event.target) || button.contains(event.target)) return;
-      close();
-    }
-    for (const event of ['pointerdown', 'click', 'wheel', 'focusin']) {
-      document.addEventListener(event, outside, options);
-    }
-    window.addEventListener('blur', close, { signal: lifetime.signal });
-    document.addEventListener('keydown', event => {
-      if (event.key === 'Escape') {
-        if (popup.contains(document.activeElement)) button.focus({ preventScroll: true });
-        close();
-      } else outside(event);
-    }, options);
-    return () => { observer.disconnect(); lifetime.abort(); };
-  }, [anchor, close]);
-
-  return h('section', { ref: panel, className: 'dwe-favorites', 'aria-label': '收藏夹' },
-    h('header', null, h('strong', null, '收藏夹'),
-      h('button', { type: 'button', className: 'dwe-clear-favorites', disabled: !folders.length, onClick: clearFavorites }, '清空收藏')),
-    folders.length ? h('ul', null, ...folders.map(path => {
-      const name = path.length === 3 ? path.slice(0, 2) : path.split('\\').at(-1);
-      return h('li', { key: path },
-        h('button', {
-          type: 'button', className: 'dwe-favorite-location', title: path, onClick: () => navigate(path),
-          disabled: workspaceMode && !underPath(path, root),
-          'aria-current': currentPath?.toLowerCase() === path.toLowerCase() ? 'location' : undefined,
-        }, h(primitives.FileTypeIcon, { kind: 'folder', size: 16 }),
-        h('span', { className: 'dwe-favorite-text' }, name)),
-        h('button', {
-          type: 'button', className: 'dwe-tool', title: '移除收藏', 'aria-label': '移除收藏 ' + name,
-          onClick: () => removeFavorite(path),
-        }, removeIcon));
-    })) : h('p', null, '点击地址栏右侧的星标收藏当前文件夹。'));
+import { renamePath, underPath, windowsPath } from './navigation.js';
+
+const key = 'dsh-workspace-explorer.favorites';
+const dragType = 'application/x-dwe-favorite';
+const { createElement: h, useLayoutEffect, useRef, useSyncExternalStore } = react;
+const listeners = new Set();
+
+function unique(paths) {
+  const seen = new Set();
+  return paths.filter(path => {
+    const id = path.toLowerCase();
+    if (seen.has(id)) return false;
+    seen.add(id);
+    return true;
+  });
+}
+
+function read() {
+  try {
+    const paths = JSON.parse(localStorage.getItem(key));
+    return Array.isArray(paths) ? unique(paths.map(windowsPath).filter(Boolean)) : [];
+  } catch { return []; }
+}
+
+let folders = read();
+
+function update(next, persist = true) {
+  if (next.length === folders.length && next.every((path, index) => path === folders[index])) return;
+  folders = next;
+  if (persist) {
+    try { localStorage.setItem(key, JSON.stringify(folders)); } catch { /* Keep the current window's favorites. */ }
+  }
+  for (const listener of listeners) listener();
+}
+
+function storageChanged(event) {
+  if (event.key === key || event.key === null) update(read(), false);
+}
+
+function subscribe(listener) {
+  if (!listeners.size) window.addEventListener('storage', storageChanged);
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+    if (!listeners.size) window.removeEventListener('storage', storageChanged);
+  };
+}
+
+export function useFavorites() {
+  return useSyncExternalStore(subscribe, () => folders);
+}
+
+export function removeFavorite(path) {
+  update(folders.filter(folder => folder.toLowerCase() !== path.toLowerCase()));
+}
+
+export function toggleFavorite(path) {
+  if (folders.some(folder => folder.toLowerCase() === path.toLowerCase())) removeFavorite(path);
+  else update([...folders, path]);
+}
+
+export function clearFavorites() {
+  update([]);
+}
+
+export function renameFavorites(from, to) {
+  update(unique(folders.map(path => renamePath(path, from, to))));
+}
+
+function moveFavorite(from, to, after) {
+  if (from === to || !folders.includes(from) || !folders.includes(to)) return;
+  const next = folders.filter(path => path !== from);
+  next.splice(next.indexOf(to) + Number(after), 0, from);
+  update(next);
+}
+
+export function Favorites({ anchor, close, folders, navigate, currentPath, removeIcon, workspaceMode, root }) {
+  const panel = useRef(null);
+  const dragged = useRef(null);
+  const dropRow = useRef(null);
+
+  function clearDropRow() {
+    if (dropRow.current) delete dropRow.current.dataset.dweFavoriteDrop;
+    dropRow.current = null;
+  }
+
+  function resetDrag() {
+    dragged.current = null;
+    clearDropRow();
+  }
+
+  function isAfter(event) {
+    const bounds = event.currentTarget.getBoundingClientRect();
+    return event.clientY >= bounds.top + bounds.height / 2;
+  }
+
+  useLayoutEffect(() => {
+    const popup = panel.current;
+    const button = anchor.current;
+    const parent = popup.offsetParent;
+    if (!button || !parent) return;
+
+    function position() {
+      const bounds = parent.getBoundingClientRect();
+      const trigger = button.getBoundingClientRect();
+      popup.style.left = Math.max(4, Math.min(trigger.right - bounds.left - popup.offsetWidth,
+        bounds.width - popup.offsetWidth - 4)) + 'px';
+      popup.style.top = trigger.bottom - bounds.top + 4 + 'px';
+    }
+
+    const observer = new ResizeObserver(position);
+    observer.observe(parent);
+    observer.observe(popup);
+    position();
+    const lifetime = new AbortController();
+    const options = { capture: true, signal: lifetime.signal };
+    function outside(event) {
+      if (popup.contains(event.target) || button.contains(event.target)) return;
+      close();
+    }
+    for (const event of ['pointerdown', 'click', 'wheel', 'focusin']) {
+      document.addEventListener(event, outside, options);
+    }
+    window.addEventListener('blur', close, { signal: lifetime.signal });
+    document.addEventListener('keydown', event => {
+      if (event.key === 'Escape') {
+        if (popup.contains(document.activeElement)) button.focus({ preventScroll: true });
+        close();
+      } else outside(event);
+    }, options);
+    return () => { observer.disconnect(); lifetime.abort(); };
+  }, [anchor, close]);
+
+  return h('section', { ref: panel, className: 'dwe-favorites', 'aria-label': '收藏夹' },
+    h('header', null, h('strong', null, '收藏夹'),
+      h('button', { type: 'button', className: 'dwe-clear-favorites', disabled: !folders.length, onClick: clearFavorites }, '清空收藏')),
+    folders.length ? h('ul', { onDragLeave: event => {
+      if (!event.currentTarget.contains(event.relatedTarget)) clearDropRow();
+    } }, ...folders.map(path => {
+      const name = path.length === 3 ? path.slice(0, 2) : path.split('\\').at(-1);
+      return h('li', {
+        key: path, draggable: true,
+        onDragStart: event => {
+          dragged.current = path;
+          event.dataTransfer.effectAllowed = 'move';
+          event.dataTransfer.setData(dragType, path);
+        },
+        onDragOver: event => {
+          if (!dragged.current || !event.dataTransfer.types.includes(dragType)) return;
+          if (dropRow.current !== event.currentTarget) clearDropRow();
+          if (dragged.current === path) return;
+          event.preventDefault();
+          event.dataTransfer.dropEffect = 'move';
+          dropRow.current = event.currentTarget;
+          dropRow.current.dataset.dweFavoriteDrop = isAfter(event) ? 'after' : 'before';
+        },
+        onDrop: event => {
+          const from = dragged.current;
+          if (!from || event.dataTransfer.getData(dragType) !== from) return;
+          event.preventDefault();
+          resetDrag();
+          moveFavorite(from, path, isAfter(event));
+        },
+        onDragEnd: resetDrag,
+      },
+        h('button', {
+          type: 'button', className: 'dwe-favorite-location', title: path, onClick: () => navigate(path),
+          disabled: workspaceMode && !underPath(path, root),
+          'aria-current': currentPath?.toLowerCase() === path.toLowerCase() ? 'location' : undefined,
+        }, h(primitives.FileTypeIcon, { kind: 'folder', size: 16 }),
+        h('span', { className: 'dwe-favorite-text' }, name)),
+        h('button', {
+          type: 'button', className: 'dwe-tool', title: '移除收藏', 'aria-label': '移除收藏 ' + name,
+          onClick: () => removeFavorite(path),
+        }, removeIcon));
+    })) : h('p', null, '点击地址栏右侧的星标收藏当前文件夹。'));
 }