@files-preview-app/preview-file 1.3.17 → 1.3.19

package/dist/react.js

@@ -6141,7 +6141,7 @@ var ThreeDPlugin = class {
       {
         id: "fit-page",
         icon: "fit-page",
-        label: "Reset Camera View",
+        label: "Fit to Page",
         type: "button",
         group: "zoom",
         execute: () => instance.fitToPage?.()
@@ -6154,6 +6154,14 @@ var ThreeDPlugin = class {
         group: "zoom",
         execute: () => instance.resetZoom?.()
       },
+      {
+        id: "fit-width",
+        icon: "fit-width",
+        label: "Fit to Width",
+        type: "button",
+        group: "zoom",
+        execute: () => instance.fitToWidth?.()
+      },
       {
         id: "rotate-cw",
         icon: "rotate-cw",
@@ -6185,21 +6193,49 @@ var ThreeDPlugin = class {
   async render(ctx) {
     const container = ctx.container;
     container.innerHTML = "";
-    container.style.overflow = "hidden";
+    container.style.overflow = "auto";
     container.style.position = "relative";
     container.style.width = "100%";
     container.style.height = "100%";
+    container.style.padding = "0";
     container.style.background = "#1a1a1a";
-    const width = container.clientWidth || 800;
-    const height = container.clientHeight || 600;
+    let currentZoom = 1;
+    let isUserZoomed = false;
+    let baseW = Math.max(100, container.clientWidth || 800);
+    let baseH = Math.max(100, container.clientHeight || 600);
+    const updateBaseDimensions = () => {
+      baseW = Math.max(100, container.clientWidth || 800);
+      baseH = Math.max(100, container.clientHeight || 600);
+    };
+    const scrollWrapper = document.createElement("div");
+    scrollWrapper.className = "fp-3d-scroll-wrapper";
+    scrollWrapper.style.minWidth = "100%";
+    scrollWrapper.style.minHeight = "100%";
+    scrollWrapper.style.width = "max-content";
+    scrollWrapper.style.height = "max-content";
+    scrollWrapper.style.display = "flex";
+    scrollWrapper.style.flexDirection = "column";
+    scrollWrapper.style.alignItems = "center";
+    scrollWrapper.style.justifyContent = "flex-start";
+    scrollWrapper.style.boxSizing = "border-box";
+    const sizer = document.createElement("div");
+    sizer.className = "fp-3d-sizer";
+    sizer.style.position = "relative";
+    sizer.style.flexShrink = "0";
+    sizer.style.display = "flex";
+    sizer.style.justifyContent = "center";
+    sizer.style.alignItems = "center";
+    sizer.style.margin = "auto 0";
     const scene = new THREE.Scene();
     scene.background = new THREE.Color(1973796);
-    const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 2e3);
+    const camera = new THREE.PerspectiveCamera(45, baseW / baseH, 0.1, 2e3);
     const renderer = new THREE.WebGLRenderer({ antialias: true });
-    renderer.setSize(width, height);
-    renderer.setPixelRatio(window.devicePixelRatio);
+    renderer.setSize(baseW, baseH);
+    renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
     renderer.shadowMap.enabled = true;
-    container.appendChild(renderer.domElement);
+    sizer.appendChild(renderer.domElement);
+    scrollWrapper.appendChild(sizer);
+    container.appendChild(scrollWrapper);
     const controls = new OrbitControls(camera, renderer.domElement);
     controls.enableDamping = true;
     controls.dampingFactor = 0.05;
@@ -6213,7 +6249,7 @@ var ThreeDPlugin = class {
     scene.add(dirLight2);
     const grid = new THREE.GridHelper(200, 20, 4473924, 2236962);
     scene.add(grid);
-    let meshGroup = new THREE.Group();
+    const meshGroup = new THREE.Group();
     let isWireframe = false;
     const ext = ctx.metadata.extension?.toLowerCase();
     const materials = [];
@@ -6269,6 +6305,24 @@ var ThreeDPlugin = class {
       controls.update();
     };
     fitCamera();
+    const applyZoom = () => {
+      if (!isUserZoomed) {
+        updateBaseDimensions();
+      }
+      const boxW = Math.round(baseW * currentZoom);
+      const boxH = Math.round(baseH * currentZoom);
+      sizer.style.width = `${boxW}px`;
+      sizer.style.height = `${boxH}px`;
+      sizer.style.margin = boxH < container.clientHeight ? "auto 0" : "0";
+      renderer.domElement.style.width = `${boxW}px`;
+      renderer.domElement.style.height = `${boxH}px`;
+      renderer.domElement.style.maxWidth = "none";
+      renderer.domElement.style.maxHeight = "none";
+      renderer.setSize(boxW, boxH, false);
+      camera.aspect = boxW / boxH;
+      camera.updateProjectionMatrix();
+    };
+    applyZoom();
     let animId;
     const animate = () => {
       animId = requestAnimationFrame(animate);
@@ -6277,11 +6331,10 @@ var ThreeDPlugin = class {
     };
     animate();
     const resizeObserver = new ResizeObserver(() => {
-      const newWidth = container.clientWidth || 800;
-      const newHeight = container.clientHeight || 600;
-      camera.aspect = newWidth / newHeight;
-      camera.updateProjectionMatrix();
-      renderer.setSize(newWidth, newHeight);
+      if (!isUserZoomed && currentZoom === 1) {
+        updateBaseDimensions();
+        applyZoom();
+      }
     });
     resizeObserver.observe(container);
     const cleanup = () => {
@@ -6295,22 +6348,51 @@ var ThreeDPlugin = class {
           child.geometry.dispose();
         }
       });
+      scrollWrapper.remove();
       container.innerHTML = "";
     };
     ctx.signal.addEventListener("abort", cleanup);
     return {
       destroy: cleanup,
       zoomIn: () => {
-        camera.position.multiplyScalar(0.85);
-        controls.update();
+        isUserZoomed = true;
+        currentZoom = Math.min(5, Number((currentZoom * 1.25).toFixed(2)));
+        applyZoom();
       },
       zoomOut: () => {
-        camera.position.multiplyScalar(1.15);
-        controls.update();
+        currentZoom = Math.max(0.2, Number((currentZoom / 1.25).toFixed(2)));
+        if (currentZoom <= 1) {
+          isUserZoomed = false;
+        }
+        applyZoom();
+      },
+      fitToPage: () => {
+        isUserZoomed = false;
+        currentZoom = 1;
+        updateBaseDimensions();
+        applyZoom();
+        container.scrollTop = 0;
+        container.scrollLeft = 0;
+        fitCamera();
+      },
+      fitToWidth: () => {
+        isUserZoomed = false;
+        currentZoom = 1;
+        updateBaseDimensions();
+        applyZoom();
+        container.scrollTop = 0;
+        container.scrollLeft = 0;
+        fitCamera();
+      },
+      resetZoom: () => {
+        isUserZoomed = false;
+        currentZoom = 1;
+        updateBaseDimensions();
+        applyZoom();
+        container.scrollTop = 0;
+        container.scrollLeft = 0;
+        fitCamera();
       },
-      fitToPage: fitCamera,
-      fitToWidth: fitCamera,
-      resetZoom: fitCamera,
       rotateCW: () => {
         isWireframe = !isWireframe;
         materials.forEach((m) => {