paste over and extend right

Author: ivictbor

js/inserter.js

@@ -21,17 +21,56 @@ export default class Inserter {
           this.main.clearBackground();
           this.ctx.putImageData(tmpData, 0, 0);
           this.main.adjustSizeFull();
-          this.worklog.captureState();
           if (img.naturalWidth < oldW) {
             const offset = Math.round((oldW - img.naturalWidth) / 2);
             this.main.select.placeAt(offset, oldH, offset, 0, img);
           } else {
             this.main.select.placeAt(0, oldH, 0, 0, img);
           }
+          this.worklog.captureState();
+        },
+      },
+      extend_right: {
+        handle: (img) => {
+          this.tmpImg = img;
+          const oldH = this.main.size.h;
+          const oldW = this.main.size.w;
+          const newW = oldW + img.naturalWidth;
+          const newH = Math.max(oldH, img.naturalHeight);
+          const tmpData = this.ctx.getImageData(0, 0, this.main.size.w, this.main.size.h);
+          this.main.resize(newW, newH);
+          this.main.clearBackground();
+          this.ctx.putImageData(tmpData, 0, 0);
+          this.main.adjustSizeFull();
+          if (img.naturalHeight < oldH) {
+            const offset = Math.round((oldH - img.naturalHeight) / 2);
+            this.main.select.placeAt(oldW, offset, 0, offset, img);
+          } else {
+            this.main.select.placeAt(oldW, 0, 0, 0, img);
+          }
+          this.worklog.captureState();
+        },
+      },
+      over: {
+        handle: (img) => {
+          this.tmpImg = img;
+          const oldH = this.main.size.h;
+          const oldW = this.main.size.w;
+          if (img.naturalHeight <= oldH && img.naturalWidth <= oldW) {
+            this.main.select.placeAt(
+              0, 0,
+              oldW - img.naturalWidth,
+              oldH - img.naturalHeight, img);
+          } else if (img.naturalWidth / img.naturalHeight > oldW / oldH) {
+            const newH = oldW * (img.naturalHeight / img.naturalWidth);
+            this.main.select.placeAt(0, 0, 0, oldH - newH, img);
+          } else {
+            const newW = oldH * (img.naturalWidth / img.naturalHeight);
+            this.main.select.placeAt(0, 0, oldW - newW, 0, img);
+          }
+          this.worklog.captureState();
         },
       },
-      extend_right: {},
-      over: {},
     };
   }
 
@@ -58,8 +97,8 @@ export default class Inserter {
   }
 
   insert(x, y, w, h) {
-    console.log("inserting ", this.tmpImg, x, y, w, h);
     this.main.ctx.drawImage(this.tmpImg, x, y, w, h);
+    this.main.worklog.reCaptureState();
   }
 
   loaded(img) {

js/main.js

@@ -4,7 +4,7 @@ import '../css/icons/iconfont.css';
 
 import PainterroSelecter from './selecter';
 import WorkLog from './worklog';
-import { genId, addDocumentObjectHelpers } from './utils';
+import { genId, addDocumentObjectHelpers, KEYS } from './utils';
 import PrimitiveTool from './primitive';
 import ColorPicker from './colorPicker';
 import setDefaults from './params';
@@ -280,13 +280,15 @@ class PainterroProc {
       right: true,
       activate: () => {
         this.closeActiveTool();
-        document.getElementById('ptro-file-input').click();
-        document.getElementById('ptro-file-input').onchange = (event) => {
+        const input = document.getElementById('ptro-file-input');
+        input.click();
+        input.onchange = (event) => {
           const files = event.target.files || event.dataTransfer.files;
           if (!files.length) {
             return;
           }
           this.openFile(files[0]);
+          input.value = ''; // to allow reopen
         };
       },
     }, {
@@ -382,12 +384,10 @@ class PainterroProc {
     this.primitiveTool = new PrimitiveTool(this);
     this.primitiveTool.setLineWidth(this.params.defaultLineWidth);
     this.primitiveTool.setPixelSize(this.params.defaultPixelSize);
-    this.worklog = new WorkLog(this, {
-      changedHandler() {
-        if (this.saveBtn) {
-          this.saveBtn.removeAttribute('disabled');
-        }
-      },
+    this.worklog = new WorkLog(this, () => {
+      if (this.saveBtn) {
+        this.saveBtn.removeAttribute('disabled');
+      }
     });
     this.inserter.init(this);
     this.textTool = new TextTool(this);
@@ -564,16 +564,17 @@ class PainterroProc {
       keydown: (e) => {
         if (this.shown) {
           const evt = window.event ? event : e;
+          this.handleToolEvent('handleKeyDown', evt);
           if (
-            (evt.keyCode === 89 && evt.ctrlKey) || // 89 is 'y' key
-            (evt.keyCode === 90 && evt.ctrlKey && evt.shiftKey)) { // 90 is 'z' key
+            (evt.keyCode === KEYS.y && evt.ctrlKey) ||
+            (evt.keyCode === KEYS.z && evt.ctrlKey && evt.shiftKey)) {
             this.worklog.redoState();
-          } else if (evt.keyCode === 90 && evt.ctrlKey) {
+          } else if (evt.keyCode === KEYS.z && evt.ctrlKey) {
             this.worklog.undoState();
           }
 
           if (this.saveBtn) {
-            if (evt.keyCode === 83 && evt.ctrlKey) { // 's' key pressed
+            if (evt.keyCode === KEYS.s && evt.ctrlKey) {
               this.save();
               evt.preventDefault();
             }

js/selecter.js

@@ -1,4 +1,4 @@
-import { clearSelection } from './utils';
+import { clearSelection, KEYS } from './utils';
 
 export default class PainterroSelecter {
   constructor(main, selectionCallback) {
@@ -148,6 +148,23 @@ export default class PainterroSelecter {
       this.area.bottoml[1] - this.area.topl[1]);
   }
 
+  cancelPlacing() {
+    this.imagePlaced = false;
+    this.main.select.area.rect.style['background-image'] = 'none';
+    this.hide();
+    this.main.worklog.undoState();
+  }
+
+  handleKeyDown(evt) {
+    if (this.shown && this.imagePlaced) {
+      if (evt.keyCode === KEYS.enter) {
+        this.finishPlacing();
+      } else if (evt.keyCode === KEYS.esc) {
+        this.cancelPlacing();
+      }
+    }
+  }
+
   handleMouseDown(event) {
     const mainClass = event.target.classList[0];
     const mousDownCallbacks = {
@@ -386,6 +403,9 @@ export default class PainterroSelecter {
   }
 
   close() {
+    if (this.imagePlaced) {
+      this.finishPlacing();
+    }
     this.area.activated = false;
     this.hide();
   }

js/utils.js

@@ -76,3 +76,12 @@ export function distance(p1, p2) {
 export function trim() {
   return String(this).replace(/^\s+|\s+$/g, '');
 }
+
+export const KEYS = {
+  y: 89,
+  z: 90,
+  s: 83,
+  enter: 13,
+  esc: 27,
+};
+

js/worklog.js

@@ -1,5 +1,5 @@
 export default class WorkLog {
-  constructor(main, { changedHandler } = {}) {
+  constructor(main, changedHandler) {
     this.main = main;
     this.current = null;
     this.changedHandler = changedHandler;
@@ -30,12 +30,20 @@ export default class WorkLog {
     }
   }
 
+  reCaptureState() {
+    if (this.current.prev !== null) {
+      this.current = this.current.prev;
+    }
+    this.captureState();
+  }
+
   applyState(state) {
     const img = new Image();
     img.onload = () => {
       this.main.resize(state.sizew, state.sizeh);
       this.main.ctx.drawImage(img, 0, 0);
       this.main.adjustSizeFull();
+      this.main.select.hide();
     };
     img.src = state.data;
   }