Merge pull request #43 from catdad-experiments/#40-image-positioning

setting canvas style size to allow for correct positioning

Author: catdad

src/image.js

@@ -8,6 +8,8 @@ const orientations = {
   '8': 270
 };
 
+const RENDER_RATIO = 0.96;
+
 const getBlob = (canvas, { mime = 'image/png', quality = 1 } = {}) => {
   return new Promise((resolve, reject) => {
     try {
@@ -40,6 +42,7 @@ export default async ({ events, mover, load }) => {
     load('./image-draw.js')
   ]);
 
+  const mainDisplay = document.querySelector('.main');
   const renderer = document.querySelector('.renderer');
   const hiddenImg = document.querySelector('.hidden-image');
   const canvas = document.querySelector('#canvas');
@@ -49,6 +52,22 @@ export default async ({ events, mover, load }) => {
   let width;
   let height;
 
+  const onUpdateSize = () => {
+    const mainBB = mainDisplay.getBoundingClientRect();
+    const widthMax = Math.min(canvas.width, mainBB.width * RENDER_RATIO);
+    const heightMax = Math.min(canvas.height, mainBB.height * RENDER_RATIO);
+
+    if (canvas.height * widthMax / canvas.width > heightMax) {
+      canvas.style.height = `${heightMax}px`;
+      canvas.style.width = 'auto';
+    } else if (widthMax < canvas.width) {
+      canvas.style.height = 'auto';
+      canvas.style.width = `${widthMax}px`;
+    } else {
+      canvas.style.width = canvas.style.height = 'auto';
+    }
+  };
+
   const onUpdate = (() => {
     let url;
 
@@ -58,6 +77,8 @@ export default async ({ events, mover, load }) => {
         url = null;
       }
 
+      onUpdateSize();
+
       try {
         url = URL.createObjectURL(await getBlob(canvas, exportQuality));
         await loadUrl(hiddenImg, url);
@@ -217,6 +238,7 @@ export default async ({ events, mover, load }) => {
   events.on('controls-done', onDone);
   events.on('controls-cancel', onCancel);
   events.on('controls-undo', onUndo);
+  events.on('window-resize', onUpdateSize);
 
   return function destroy() {
     events.off('file-load', onFile);
@@ -229,5 +251,6 @@ export default async ({ events, mover, load }) => {
     events.off('controls-done', onDone);
     events.off('controls-cancel', onCancel);
     events.off('controls-undo', onUndo);
+    events.off('window-resize', onUpdateSize);
   };
 };

src/style.css

@@ -137,8 +137,6 @@ html, body {
 .renderer {
   display: block;
   position: relative;
-  max-width: 96%;
-  max-height: 96%;
 }
 
 .hidden-image {

src/window-size.js

@@ -1,9 +1,9 @@
-export default () => {
+export default ({ events }) => {
   // vh style hack for smartphone address bar issues
   // https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
   let height = 0;
 
-  const onResize = () => {
+  const setVh = () => {
     const temp = window.innerHeight;
 
     if (height !== temp) {
@@ -12,7 +12,12 @@ export default () => {
     }
   };
 
-  onResize();
+  const onResize = () => {
+    setVh();
+    events.emit('window-resize');
+  };
+
+  setVh();
 
   window.addEventListener('resize', onResize);