@blocklet/editor 2.5.46 → 2.5.48

package/lib/main/nodes/ImageComponent.js

@@ -34,6 +34,7 @@ import { useMediumZoom } from '../hooks/medium-zoom';
 import { FrameMockup, isDeviceFrame } from '../ui/FrameMockup';
 import { useSafeArea } from '../../ext/SafeAreaPlugin';
 import { UPDATE_BUSY_COMMAND } from '../../ext/BusyPlugin';
+import { getDevicePixelRatio } from '../utils/images';
 const ImageAnnotation = lazy(() => import('../ui/ImageEnhancer').then((module) => ({ default: module.ImageAnnotation })));
 const ImageAnnotationView = lazy(() => import('../ui/ImageEnhancer').then((module) => ({ default: module.ImageAnnotationView })));
 const ImageEnhancer = lazy(() => import('../ui/ImageEnhancer').then((module) => ({ default: module.ImageEnhancer })));
@@ -362,6 +363,7 @@ function formatFileSize(size) {
 function SimpleImageComponent({ src, altText = '', width, height, }) {
     const [loaded, setLoaded] = useState(false);
     const imageRef = useRef(null);
+    const containerRef = useRef(null);
     const hasFixedSize = typeof width === 'number' && typeof height === 'number' && width > 0 && height > 0;
     const { maxContentWidth } = useEditorConfig();
     const displaySrc = useMemo(() => {
@@ -369,18 +371,39 @@ function SimpleImageComponent({ src, altText = '', width, height, }) {
             return src;
         try {
             const qs = getQuery(src);
+            const dpr = getDevicePixelRatio();
             if (qs?.imageFilter)
                 return src;
             // 图片剪裁，限制最大宽度
             return withQuery(src, {
                 imageFilter: 'resize',
-                w: maxContentWidth,
+                w: Math.round(maxContentWidth * dpr),
             });
         }
         catch {
             return src;
         }
     }, [src, maxContentWidth]);
+    // 当图片出现在 viewport 中时，预加载原图
+    useEffect(() => {
+        if (!containerRef.current || displaySrc === src)
+            return;
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    const preloadImg = new Image();
+                    preloadImg.src = src;
+                    observer.disconnect();
+                }
+            });
+        }, {
+            rootMargin: '50px',
+        });
+        observer.observe(containerRef.current);
+        return () => {
+            observer.disconnect();
+        };
+    }, [src, displaySrc]);
     useMediumZoom(imageRef);
     const renderSkeleton = () => {
         if (hasFixedSize) {
@@ -388,7 +411,7 @@ function SimpleImageComponent({ src, altText = '', width, height, }) {
         }
         return _jsx(Skeleton, { variant: "rectangular", animation: "wave", sx: { width: 300, height: 200, borderRadius: 1 } });
     };
-    return (_jsxs(_Fragment, { children: [!loaded && renderSkeleton(), _jsx(Box, { sx: {
+    return (_jsxs(_Fragment, { children: [!loaded && renderSkeleton(), _jsx(Box, { ref: containerRef, sx: {
                     p: 1,
                     border: 1,
                     borderColor: 'divider',

package/lib/main/utils/images.d.ts

@@ -7,3 +7,4 @@ export declare const scaleImage: ({ width, height, maxSize }: {
     height: number;
     scaleFactor: number;
 };
+export declare function getDevicePixelRatio(): number;

package/lib/main/utils/images.js

@@ -11,3 +11,6 @@ export const scaleImage = ({ width, height, maxSize }) => {
     }
     return { width: newWidth, height: newHeight, scaleFactor };
 };
+export function getDevicePixelRatio() {
+    return window?.devicePixelRatio || 1;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/editor",
-  "version": "2.5.46",
+  "version": "2.5.48",
   "main": "lib/index.js",
   "sideEffects": false,
   "publishConfig": {
@@ -73,7 +73,7 @@
     "ufo": "^1.5.4",
     "url-join": "^4.0.1",
     "zustand": "^4.5.5",
-    "@blocklet/pdf": "2.5.46"
+    "@blocklet/pdf": "2.5.48"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",