separete resize and scale, copy emulation

Author: ivictbor

css/styles.css

@@ -1,4 +1,3 @@
-/* should be first rule here for detecting stylesheet */
 .ptro-wrapper {
     position: absolute;
     top: 0;
@@ -7,6 +6,7 @@
     right: 0;
     text-align: center;
     z-index: 10;
+    font-family: "Open Sans", sans-serif;
 }
 
 .ptro-holder {
@@ -368,13 +368,12 @@
 .ptro-link {
     float: left;
     margin-right: -12px;
-    margin-top: -20px;
+    margin-top: -23px;
 }
 
 .ptro-resize-link-wrapper {
     display: inline-block;
     height: 20px;
-    padding-left: 10px;
 }
 
 

js/inserter.js

@@ -1,5 +1,5 @@
 import { tr } from './translation';
-import { genId, KEYS } from './utils';
+import { genId, KEYS, copyToClipboard } from './utils';
 
 export default class Inserter {
   constructor() {
@@ -75,6 +75,7 @@ export default class Inserter {
   }
 
   init(main) {
+    this.CLIP_DATA_MARKER = 'painterro-data:';
     this.ctx = main.ctx;
     this.main = main;
     this.worklog = main.worklog;
@@ -138,6 +139,18 @@ export default class Inserter {
     if (this.waitChoice && evt.keyCode === KEYS.esc) {
       this.cancelChoosing();
     }
+    if (!this.waitChoice && !this.main.select.imagePlaced &&
+        evt.keyCode === KEYS.c && (evt.ctrlKey || evt.metaKey)) {
+      const a = this.main.select.area;
+      const w = a.bottoml[0] - a.topl[0];
+      const h = a.bottoml[1] - a.topl[1];
+      const tmpCan = document.createElement('canvas');
+      tmpCan.width = w;
+      tmpCan.height = h;
+      const tmpCtx = tmpCan.getContext('2d');
+      tmpCtx.drawImage(this.main.canvas, -a.topl[0], -a.topl[1]);
+      copyToClipboard(`${this.CLIP_DATA_MARKER}${tmpCan.toDataURL()}`);
+    }
   }
 
   startLoading() {

js/main.js

@@ -588,6 +588,16 @@ class PainterroProc {
             const item = items[k];
             if (item.kind === 'file' && item.type.split('/')[0] === 'image') {
               this.openFile(item.getAsFile());
+            } else if (item.kind === 'string') {
+              let txt = '';
+              if (window.clipboardData && window.clipboardData.getData) { // IE
+                txt = window.clipboardData.getData('Text');
+              } else if (event.clipboardData && event.clipboardData.getData) {
+                txt = event.clipboardData.getData('text/plain');
+              }
+              if (txt.startsWith(this.inserter.CLIP_DATA_MARKER)) {
+                this.loadImage(txt.slice(this.inserter.CLIP_DATA_MARKER.length));
+              }
             }
           });
         }

js/resizer.js

@@ -11,14 +11,14 @@ export default class Resizer {
     this.linkButton = document.querySelector(`#${main.id} .ptro-resize-widget-wrapper button.ptro-link`);
     this.linkButtonIcon = document.querySelector(`#${main.id} .ptro-resize-widget-wrapper button.ptro-link i`);
     this.closeButton = document.querySelector(`#${main.id} .ptro-resize-widget-wrapper button.ptro-close`);
-    this.applyButton = document.querySelector(`#${main.id} .ptro-resize-widget-wrapper button.ptro-apply`);
-
+    this.scaleButton = document.querySelector(`#${main.id} .ptro-resize-widget-wrapper button.ptro-scale`);
+    this.resizeButton = document.querySelector(`#${main.id} .ptro-resize-widget-wrapper button.ptro-resize`);
     this.linked = true;
     this.closeButton.onclick = () => {
       this.startClose();
     };
 
-    this.applyButton.onclick = () => {
+    this.scaleButton.onclick = () => {
       const origW = this.main.size.w;
       const origH = this.main.size.h;
 
@@ -40,6 +40,20 @@ export default class Resizer {
       img.src = tmpData;
     };
 
+    this.resizeButton.onclick = () => {
+      const tmpData = this.main.canvas.toDataURL();
+      this.main.resize(this.newW, this.newH);
+      this.main.clearBackground();
+      const img = new Image();
+      img.onload = () => {
+        this.main.ctx.drawImage(img, 0, 0);
+        this.main.adjustSizeFull();
+        this.main.worklog.captureState();
+        this.startClose();
+      };
+      img.src = tmpData;
+    };
+
     this.linkButton.onclick = () => {
       this.linked = !this.linked;
       if (this.linked) {
@@ -107,15 +121,16 @@ export default class Resizer {
           '</div>' +
           '<div class="ptro-resize-link-wrapper">' +
             `<button class="ptro-icon-btn ptro-link ptro-color-control" title="${tr('keepRatio')}">` +
-              '<i class="ptro-icon ptro-icon-linked"></i>' +
+              '<i class="ptro-icon ptro-icon-linked" style="font-size: 18px;"></i>' +
             '</button>' +
           '</div>' +
-          '<div>' +
-            '<button class="ptro-named-btn ptro-apply ptro-color-control" ' +
-                  'style="margin-top: 8px;position: absolute; top: 95px; right: 75px;">' +
-                  `${tr('apply')}</button>` +
-            '<button class="ptro-named-btn ptro-close ptro-color-control" ' +
-                  'style="margin-top: 8px;position: absolute; top: 95px; right: 10px;">' +
+          '<div></div>' +
+          '<div style="margin-top: 40px;">' +
+            '<button class="ptro-named-btn ptro-resize ptro-color-control">' +
+                  `${tr('resizeResize')}</button>` +
+            '<button class="ptro-named-btn ptro-scale ptro-color-control">' +
+                  `${tr('resizeScale')}</button>` +
+            '<button class="ptro-named-btn ptro-close ptro-color-control">' +
                   `${tr('cancel')}</button>` +
           '</div>' +
         '</div>' +

js/translation.js

@@ -27,6 +27,8 @@ export class Translation {
         keepRatio: 'Keep width/height ratio',
         pixelSize: 'P:',
         pixelSizeFull: 'Pixel Size',
+        resizeScale: 'Scale',
+        resizeResize: 'Resize',
         tools: {
           crop: 'Crop image to selected area',
           pixelize: 'Pixelize selected area',
@@ -38,7 +40,7 @@ export class Translation {
           load: 'Load image',
           text: 'Put text',
           brush: 'Brush',
-          resize: 'Resize image',
+          resize: 'Resize or scale',
           open: 'Open image',
           select: 'Select area',
         },

js/utils.js

@@ -81,7 +81,35 @@ export const KEYS = {
   y: 89,
   z: 90,
   s: 83,
+  c: 67,
+  x: 88,
   enter: 13,
   esc: 27,
 };
 
+// Copies a string to the clipboard. Must be called from within an
+// event handler such as click. May return false if it failed, but
+// this is not always possible. Browser support for Chrome 43+,
+// Firefox 42+, Safari 10+, Edge and IE 10+.
+// IE: The clipboard feature may be disabled by an administrator. By
+// default a prompt is shown the first time the clipboard is
+// used (per session).
+export function copyToClipboard(text) {
+  if (window.clipboardData && window.clipboardData.setData) {
+    // IE specific code path to prevent textarea being shown while dialog is visible.
+    window.clipboardData.setData('Text', text);
+  } else if (document.queryCommandSupported && document.queryCommandSupported('copy')) {
+    const textarea = document.createElement('textarea');
+    textarea.textContent = text;
+    textarea.style.position = 'fixed'; // Prevent scrolling to bottom of page in MS Edge.
+    document.body.appendChild(textarea);
+    textarea.select();
+    try {
+      document.execCommand('copy'); // Security exception may be thrown by some browsers.
+    } catch (ex) {
+      console.warn('Copy to clipboard failed.', ex);
+    } finally {
+      document.body.removeChild(textarea);
+    }
+  }
+}