dsh-workspace-explorer 1.1.1 → 1.1.2

package/src/ui/preview-zoom.js

@@ -1,47 +1,47 @@
-const { useEffect } = react;
-
-export function usePreviewZoom(viewport, renderAtZoom) {
-  useEffect(() => {
-    const element = viewport.current;
-    let zoom = 1;
-    let settle;
-
-    function wheel(event) {
-      if (!event.ctrlKey || !event.deltaY) return;
-      event.preventDefault();
-      event.stopPropagation();
-      const unit = event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? element.clientHeight : 1;
-      const delta = Math.max(-100, Math.min(100, event.deltaY * unit));
-      const next = Math.max(0.25, Math.min(6, zoom * Math.exp(-delta * 0.002)));
-      if (next === zoom) return;
-
-      const surface = event.target instanceof Element && event.target.closest('[data-dwe-zoom-surface]');
-      const before = surface ? surface.getBoundingClientRect() : element.getBoundingClientRect();
-      const x = event.clientX - before.left;
-      const y = event.clientY - before.top;
-      const ratio = next / zoom;
-      const { scrollLeft, scrollTop } = element;
-      zoom = next;
-      element.style.setProperty('--dwe-preview-zoom', zoom);
-      if (surface) {
-        const after = surface.getBoundingClientRect();
-        element.scrollLeft += after.left + x * ratio - event.clientX;
-        element.scrollTop += after.top + y * ratio - event.clientY;
-      } else {
-        element.scrollLeft = (scrollLeft + x) * ratio - x;
-        element.scrollTop = (scrollTop + y) * ratio - y;
-      }
-
-      if (renderAtZoom) {
-        clearTimeout(settle);
-        settle = setTimeout(() => renderAtZoom(zoom), 120);
-      }
-    }
-
-    element.addEventListener('wheel', wheel, { passive: false });
-    return () => {
-      element.removeEventListener('wheel', wheel);
-      clearTimeout(settle);
-    };
-  }, [viewport, renderAtZoom]);
-}
+const { useEffect } = react;
+
+export function usePreviewZoom(viewport, renderAtZoom) {
+  useEffect(() => {
+    const element = viewport.current;
+    let zoom = 1;
+    let settle;
+
+    function wheel(event) {
+      if (!event.ctrlKey || !event.deltaY) return;
+      event.preventDefault();
+      event.stopPropagation();
+      const unit = event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? element.clientHeight : 1;
+      const delta = Math.max(-100, Math.min(100, event.deltaY * unit));
+      const next = Math.max(0.25, Math.min(6, zoom * Math.exp(-delta * 0.002)));
+      if (next === zoom) return;
+
+      const surface = event.target instanceof Element && event.target.closest('[data-dwe-zoom-surface]');
+      const before = surface ? surface.getBoundingClientRect() : element.getBoundingClientRect();
+      const x = event.clientX - before.left;
+      const y = event.clientY - before.top;
+      const ratio = next / zoom;
+      const { scrollLeft, scrollTop } = element;
+      zoom = next;
+      element.style.setProperty('--dwe-preview-zoom', zoom);
+      if (surface) {
+        const after = surface.getBoundingClientRect();
+        element.scrollLeft += after.left + x * ratio - event.clientX;
+        element.scrollTop += after.top + y * ratio - event.clientY;
+      } else {
+        element.scrollLeft = (scrollLeft + x) * ratio - x;
+        element.scrollTop = (scrollTop + y) * ratio - y;
+      }
+
+      if (renderAtZoom) {
+        clearTimeout(settle);
+        settle = setTimeout(() => renderAtZoom(zoom), 120);
+      }
+    }
+
+    element.addEventListener('wheel', wheel, { passive: false });
+    return () => {
+      element.removeEventListener('wheel', wheel);
+      clearTimeout(settle);
+    };
+  }, [viewport, renderAtZoom]);
+}

package/src/ui/thumbnail.js

@@ -1,106 +1,106 @@
-import { thumbnailType } from '../thumbnail-types.js';
-import { disks } from './workspace.js';
-
-const { createElement: h, useEffect, useRef, useState } = react;
-const pending = new Set();
-let running = 0;
-
-function startNext() {
-  while (running < 3 && pending.size) {
-    const next = pending.values().next().value;
-    pending.delete(next);
-    running++;
-    void next().finally(() => { running--; startNext(); });
-  }
-}
-
-function waitForFrame(media, event, signal) {
-  return new Promise((resolve, reject) => {
-    const handlers = new AbortController();
-    function settle(error) {
-      handlers.abort();
-      signal.removeEventListener('abort', cancel);
-      if (error) reject(error);
-      else resolve();
-    }
-    function cancel() { settle(signal.reason); }
-    if (signal.aborted) { cancel(); return; }
-    const options = { once: true, signal: handlers.signal };
-    signal.addEventListener('abort', cancel, { once: true });
-    media.addEventListener(event, () => settle(), options);
-    media.addEventListener('error', () => settle(new Error('无法解码缩略图')), options);
-  });
-}
-
-export async function makeThumbnail(path, type, signal, root, poster = false) {
-  const { url } = await disks.thumbnail(path, signal, root);
-  signal.throwIfAborted();
-  const video = type.startsWith('video/');
-  const media = document.createElement(video ? 'video' : 'img');
-  if (video) { media.preload = 'auto'; media.muted = true; }
-  try {
-    const firstFrame = waitForFrame(media, video ? 'loadeddata' : 'load', signal);
-    media.src = url;
-    await firstFrame;
-    if (video && !poster && Number.isFinite(media.duration) && media.duration > 0.2) {
-      const seeked = waitForFrame(media, 'seeked', signal);
-      media.currentTime = Math.min(0.7, media.duration * 0.12);
-      await seeked;
-    }
-    const width = video ? media.videoWidth : media.naturalWidth;
-    const height = video ? media.videoHeight : media.naturalHeight;
-    if (!width || !height) throw new Error('缩略图为空');
-    const [maxWidth, maxHeight] = poster ? [640, 360] : [192, 136];
-    const scale = Math.min(maxWidth / width, maxHeight / height, poster ? 1 : Infinity);
-    const canvas = document.createElement('canvas');
-    canvas.width = Math.max(1, Math.round(width * scale));
-    canvas.height = Math.max(1, Math.round(height * scale));
-    canvas.getContext('2d').drawImage(media, 0, 0, canvas.width, canvas.height);
-    return canvas.toDataURL('image/webp', 0.85);
-  } finally {
-    media.removeAttribute('src');
-    if (video) media.load();
-  }
-}
-
-export function Thumbnail({ path, active, fallback, root }) {
-  const slot = useRef(null);
-  const [result, setResult] = useState(null);
-  const type = thumbnailType(path);
-  const image = result?.path === path && result?.root === root ? result.image : null;
-  useEffect(() => {
-    const element = slot.current;
-    if (!element || !active || !type || image) return;
-    let job;
-    let failed = false;
-    function cancel() {
-      if (!job) return;
-      pending.delete(job.run);
-      job.controller.abort();
-      job = undefined;
-    }
-    const observer = new IntersectionObserver(([entry]) => {
-      if (!entry.isIntersecting) { cancel(); return; }
-      if (job || failed) return;
-      const controller = new AbortController();
-      const run = async () => {
-        try {
-          const signal = AbortSignal.any([controller.signal, AbortSignal.timeout(12000)]);
-          const image = await makeThumbnail(path, type, signal, root);
-          if (!signal.aborted) setResult({ path, root, image });
-        } catch {
-          if (!controller.signal.aborted) failed = true;
-        }
-      };
-      job = { controller, run };
-      pending.add(run);
-      startNext();
-    }, { root: element.closest('.dwe-list'), rootMargin: '72px 0px' });
-    observer.observe(element);
-    return () => { observer.disconnect(); cancel(); };
-  }, [active, path, type, image, root]);
-
-  return h('span', { ref: slot, className: 'dwe-thumbnail', 'aria-hidden': true },
-    image ? h('img', { src: image, alt: '', draggable: false }) : fallback,
-    image && type?.startsWith('video/') && h('span', { className: 'dwe-video-mark' }, '▶'));
+import { thumbnailType } from '../thumbnail-types.js';
+import { disks } from './workspace.js';
+
+const { createElement: h, useEffect, useRef, useState } = react;
+const pending = new Set();
+let running = 0;
+
+function startNext() {
+  while (running < 3 && pending.size) {
+    const next = pending.values().next().value;
+    pending.delete(next);
+    running++;
+    void next().finally(() => { running--; startNext(); });
+  }
+}
+
+function waitForFrame(media, event, signal) {
+  return new Promise((resolve, reject) => {
+    const handlers = new AbortController();
+    function settle(error) {
+      handlers.abort();
+      signal.removeEventListener('abort', cancel);
+      if (error) reject(error);
+      else resolve();
+    }
+    function cancel() { settle(signal.reason); }
+    if (signal.aborted) { cancel(); return; }
+    const options = { once: true, signal: handlers.signal };
+    signal.addEventListener('abort', cancel, { once: true });
+    media.addEventListener(event, () => settle(), options);
+    media.addEventListener('error', () => settle(new Error('无法解码缩略图')), options);
+  });
+}
+
+export async function makeThumbnail(path, type, signal, root, poster = false) {
+  const { url } = await disks.thumbnail(path, signal, root);
+  signal.throwIfAborted();
+  const video = type.startsWith('video/');
+  const media = document.createElement(video ? 'video' : 'img');
+  if (video) { media.preload = 'auto'; media.muted = true; }
+  try {
+    const firstFrame = waitForFrame(media, video ? 'loadeddata' : 'load', signal);
+    media.src = url;
+    await firstFrame;
+    if (video && !poster && Number.isFinite(media.duration) && media.duration > 0.2) {
+      const seeked = waitForFrame(media, 'seeked', signal);
+      media.currentTime = Math.min(0.7, media.duration * 0.12);
+      await seeked;
+    }
+    const width = video ? media.videoWidth : media.naturalWidth;
+    const height = video ? media.videoHeight : media.naturalHeight;
+    if (!width || !height) throw new Error('缩略图为空');
+    const [maxWidth, maxHeight] = poster ? [640, 360] : [192, 136];
+    const scale = Math.min(maxWidth / width, maxHeight / height, poster ? 1 : Infinity);
+    const canvas = document.createElement('canvas');
+    canvas.width = Math.max(1, Math.round(width * scale));
+    canvas.height = Math.max(1, Math.round(height * scale));
+    canvas.getContext('2d').drawImage(media, 0, 0, canvas.width, canvas.height);
+    return canvas.toDataURL('image/webp', 0.85);
+  } finally {
+    media.removeAttribute('src');
+    if (video) media.load();
+  }
+}
+
+export function Thumbnail({ path, active, fallback, root }) {
+  const slot = useRef(null);
+  const [result, setResult] = useState(null);
+  const type = thumbnailType(path);
+  const image = result?.path === path && result?.root === root ? result.image : null;
+  useEffect(() => {
+    const element = slot.current;
+    if (!element || !active || !type || image) return;
+    let job;
+    let failed = false;
+    function cancel() {
+      if (!job) return;
+      pending.delete(job.run);
+      job.controller.abort();
+      job = undefined;
+    }
+    const observer = new IntersectionObserver(([entry]) => {
+      if (!entry.isIntersecting) { cancel(); return; }
+      if (job || failed) return;
+      const controller = new AbortController();
+      const run = async () => {
+        try {
+          const signal = AbortSignal.any([controller.signal, AbortSignal.timeout(12000)]);
+          const image = await makeThumbnail(path, type, signal, root);
+          if (!signal.aborted) setResult({ path, root, image });
+        } catch {
+          if (!controller.signal.aborted) failed = true;
+        }
+      };
+      job = { controller, run };
+      pending.add(run);
+      startNext();
+    }, { root: element.closest('.dwe-list'), rootMargin: '72px 0px' });
+    observer.observe(element);
+    return () => { observer.disconnect(); cancel(); };
+  }, [active, path, type, image, root]);
+
+  return h('span', { ref: slot, className: 'dwe-thumbnail', 'aria-hidden': true },
+    image ? h('img', { src: image, alt: '', draggable: false }) : fallback,
+    image && type?.startsWith('video/') && h('span', { className: 'dwe-video-mark' }, '▶'));
 }

package/src/vendor/ui/extra-views.js

@@ -909,4 +909,4 @@ function paintKicad(canvas, doc, view) {
     if ((primitive.size || 1) * fit < 7) continue;
     ctx.fillText(String(primitive.text), mapX(primitive.x) + 2, mapY(primitive.y) - 2);
   }
-}
+}