Added copy/paste

README.md

@@ -71,7 +71,9 @@ Ronin helpers are keywords that facilitates adding coordinates from the canvas i
 - `(center)` Returns a position of the center of the frame.
 - `(resize ~w)` Resizes the canvas to target w and h, returns the rect.
 - `(rescale w h)` Rescales the canvas to target ratio of w and h, returns the rect.
-- `(crop rect)` Crop canvas to rect.
+- `(crop ~rect)` Crop canvas to rect.
+- `(copy ~rect)` Copy a section of the canvas.
+- `(paste copy ~rect)` Paste a section of the canvas.
 - `(clone a b)` 
 - `(drag ~rect)` Drag a part of the canvas.
 - `(view a b)` View a part of the canvas.

desktop/sources/scripts/library.js

@@ -170,10 +170,18 @@ function Library (ronin) {
     return ronin.surface.draw(b, rect)
   }
 
-  this.crop = async (rect) => { // Crop canvas to rect.
+  this.crop = async (rect = this.frame()) => { // Crop canvas to rect.
     return ronin.surface.crop(rect)
   }
 
+  this.copy = async (rect = this.frame()) => { // Copy a section of the canvas.
+    return ronin.surface.copy(rect)
+  }
+
+  this.paste = async (copy, rect = this.frame()) => { // Paste a section of the canvas.
+    return ronin.surface.paste(copy, rect)
+  }
+
   this.clone = (a, b) => {
     ronin.surface.clone(a, b)
     return [a, b]
@@ -181,7 +189,7 @@ function Library (ronin) {
 
   this.drag = (rect = this.frame(), line = this.line()) => { // Drag a part of the canvas.
     const pos = { x: line.b.x - line.a.x, y: line.b.y - line.a.y }
-    const crop = ronin.surface.getCrop(rect)
+    const crop = ronin.surface.copy(rect)
     ronin.surface.clear(rect)
     this.guide({ a: { x: rect.x, y: rect.y }, b: { x: pos.x + rect.x, y: pos.y + rect.y } })
     this.guide(rect)
@@ -193,7 +201,7 @@ function Library (ronin) {
     this.guide({ a: { x: a.x, y: a.y }, b: { x: b.x, y: b.y } })
     this.guide(a)
     this.guide(b)
-    ronin.surface.context.drawImage(ronin.surface.getCrop(a), b.x, b.y, b.w, b.h)
+    ronin.surface.context.drawImage(ronin.surface.copy(a), b.x, b.y, b.w, b.h)
   }
 
   this.pick = (shape = this.frame()) => { // Returns the color of a pixel at pos, or of the average of the pixels in rect.

desktop/sources/scripts/surface.js

@@ -183,7 +183,7 @@ function Surface (ronin) {
 
   this.crop = function (rect) {
     ronin.log(`Crop ${rect.w}x${rect.h} from ${rect.x}x${rect.y}`)
-    const crop = this.getCrop(rect)
+    const crop = this.copy(rect)
     this.resize(rect, true)
     this.context.drawImage(crop, 0, 0)
   }
@@ -261,7 +261,7 @@ function Surface (ronin) {
     ronin.log(`resize ${f.w}x${f.h}`)
   }
 
-  this.getCrop = function (rect) {
+  this.copy = function (rect) {
     const newCanvas = document.createElement('canvas')
     newCanvas.width = rect.w
     newCanvas.height = rect.h
@@ -269,6 +269,11 @@ function Surface (ronin) {
     return newCanvas
   }
 
+  this.paste = function (copy, rect) {
+    console.log('paste')
+    return this.context.drawImage(copy, 0, 0, rect.w, rect.h, rect.x, rect.y, rect.w, rect.h)
+  }
+
   this.resizeImage = function (src, dst, type = 'image/png', quality = 1.0) {
     return new Promise(resolve => {
       const tmp = new Image()