@colijnit/inphoto 300.1.2 → 300.1.3

package/fesm2022/colijnit-inphoto.mjs

@@ -1398,16 +1398,24 @@ class InphotoSceneService {
         this.camera.position.set(0, 0, 5);
         this._prepLights();
         this.renderer = new WebGLRenderer({ antialias: true });
-        this.renderer.setSize(width, height);
         this.renderer.setPixelRatio(window.devicePixelRatio);
         this.renderer.outputColorSpace = SRGBColorSpace;
         this.renderer.toneMapping = ACESFilmicToneMapping;
         this.renderer.toneMappingExposure = 1.0;
         this.renderer.localClippingEnabled = true;
+        this.resize(width, height);
         this.container.nativeElement.appendChild(this.renderer.domElement);
         this.needsRender = true;
         this._animate();
     }
+    resize(width, height) {
+        this.imageWidth = width;
+        this.imageHeight = height;
+        this.renderer.setSize(width, height);
+        this.camera.aspect = width / height;
+        this.camera.updateProjectionMatrix();
+        this.needsRender = true;
+    }
     getSceneAsImage() {
         this.renderer.render(this.scene, this.camera);
         return this.renderer.domElement.toDataURL("image/png");
@@ -3121,23 +3129,6 @@ class EditCanvasComponent {
         this._saveCanvas();
         this.dataService.canvasHasMask = this.dataService.hasAnyMask();
     }
-    _syncLayersFromData() {
-        if (!this.ctx) {
-            return;
-        }
-        const activeColors = new Set(this.dataService.progressingData.map(d => d.maskColor));
-        this._maskLayers.forEach((_layer, color) => {
-            if (!activeColors.has(color)) {
-                this._maskLayers.delete(color);
-            }
-            else {
-                this._replayColor(color);
-            }
-        });
-        this._render();
-        this._saveCanvas();
-        this.dataService.canvasHasMask = this.dataService.hasAnyMask();
-    }
     clearCanvas() {
         this._maskLayers.forEach((layer, color) => {
             layer.ctx.clearRect(0, 0, layer.canvas.width, layer.canvas.height);
@@ -3152,9 +3143,7 @@ class EditCanvasComponent {
     loadBackground() {
         const img = new Image();
         img.onload = () => {
-            const canvas = this.canvas.nativeElement;
-            canvas.width = img.naturalWidth;
-            canvas.height = img.naturalHeight;
+            this._applyCanvasSize(img.naturalWidth, img.naturalHeight);
             this._backgroundImage = img;
             this._resizeAndReplayLayers();
             this._render();
@@ -3162,6 +3151,36 @@ class EditCanvasComponent {
         img.crossOrigin = 'anonymous';
         img.src = this._image;
     }
+    _applyCanvasSize(nativeWidth, nativeHeight) {
+        const canvas = this.canvas.nativeElement;
+        canvas.width = nativeWidth;
+        canvas.height = nativeHeight;
+        const containerW = canvas.parentElement.clientWidth ? canvas.parentElement.clientWidth : nativeWidth;
+        const maxW = Math.min(nativeWidth, containerW, window.innerWidth);
+        const maxH = Math.min(nativeHeight, window.innerHeight);
+        const scale = Math.min(maxW / nativeWidth, maxH / nativeHeight);
+        const displayW = nativeWidth * scale;
+        const displayH = nativeHeight * scale;
+        canvas.style.width = `${displayW}px`;
+        canvas.style.height = `${displayH}px`;
+    }
+    _syncLayersFromData() {
+        if (!this.ctx) {
+            return;
+        }
+        const activeColors = new Set(this.dataService.progressingData.map(d => d.maskColor));
+        this._maskLayers.forEach((_layer, color) => {
+            if (!activeColors.has(color)) {
+                this._maskLayers.delete(color);
+            }
+            else {
+                this._replayColor(color);
+            }
+        });
+        this._render();
+        this._saveCanvas();
+        this.dataService.canvasHasMask = this.dataService.hasAnyMask();
+    }
     _getLayer(color) {
         const canvasEl = this.canvas.nativeElement;
         let layer = this._maskLayers.get(color);
@@ -3178,8 +3197,8 @@ class EditCanvasComponent {
         const canvasEl = this.canvas.nativeElement;
         this._maskLayers.forEach((layer, color) => {
             if (layer.canvas.width !== canvasEl.width || layer.canvas.height !== canvasEl.height) {
-                layer.canvas.width = canvasEl.width; // note: resizing clears the layer
-                layer.canvas.height = canvasEl.height; // hence the replay below
+                layer.canvas.width = canvasEl.width;
+                layer.canvas.height = canvasEl.height;
             }
             this._replayColor(color);
         });
@@ -3273,8 +3292,6 @@ class EditCanvasComponent {
       <div class="canvas-container">
         <canvas
           #canvas
-          width="800"
-          height="500"
           (mousedown)="startDrawing($event)"
           (mousemove)="draw($event)"
           (mouseup)="stopDrawing()"
@@ -3293,8 +3310,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       <div class="canvas-container">
         <canvas
           #canvas
-          width="800"
-          height="500"
           (mousedown)="startDrawing($event)"
           (mousemove)="draw($event)"
           (mouseup)="stopDrawing()"
@@ -7091,6 +7106,7 @@ class InphotoThreedSceneComponent {
             const calculatedHeight = planeData.cameraData.imageHeight * widthRatio;
             this._sceneService.imageWidth = canvasCurrentWidth;
             this._sceneService.imageHeight = calculatedHeight;
+            this._sceneService.resize(canvasCurrentWidth, calculatedHeight);
             CameraUtils.updateCamera(this._sceneService.camera, this._sceneService.renderer, planeData.cameraData, canvasCurrentWidth);
             const floorMesh = FloorUtils.createFloor(planeData.floorGeometry);
             this._sceneService.addFloorToScene(floorMesh);
@@ -7104,6 +7120,15 @@ class InphotoThreedSceneComponent {
         const loader = new THREE.TextureLoader();
         loader.load(url, (texture) => {
             texture.colorSpace = THREE.SRGBColorSpace;
+            const imgW = texture.image.width;
+            const imgH = texture.image.height;
+            const containerW = this.container.nativeElement.clientWidth;
+            const targetW = Math.min(imgW, containerW);
+            const targetH = targetW * (imgH / imgW);
+            this._sceneService.renderer.setSize(targetW, targetH);
+            this._sceneService.imageWidth = targetW;
+            this._sceneService.imageHeight = targetH;
+            CameraUtils.updateCamera(this._sceneService.camera, this._sceneService.renderer, this.room.floorPlaneMap.cameraData, targetW);
             this._sceneService.scene.background = texture;
             this._sceneService.needsRender = true;
         });