[WIP] Marquee: Copy & Paste

src/js/main.js

@@ -1132,6 +1132,10 @@ ipcMain.on('nextScene', (e, arg)=> {
   mainWindow.webContents.send('nextScene')
 })
 
+ipcMain.on('cut', () =>
+  mainWindow.webContents.send('cut')
+)
+
 ipcMain.on('copy', (e, arg)=> {
   mainWindow.webContents.send('copy')
 })

src/js/menu.js

@@ -210,7 +210,9 @@ AppMenu.Edit = () => ({
     {
       label: 'Cut',
       accelerator: keystrokeFor('menu:edit:cut'),
-      role: 'cut'
+      click (item, focusedWindow, event) {
+        ipcRenderer.send('cut')
+      }
     },
     {
       label: 'Copy',

src/js/window/main-window.js

@@ -4025,7 +4025,9 @@ let renderThumbnailDrawer = () => {
     contextMenu.on('copy', () => {
       copyBoards()
         .then(() => notifications.notify({
-          message: 'Copied board(s) to clipboard.', timing: 5
+          message: `Copied ${
+            store.getState().toolbar.mode === 'marquee' ? 'selection' : 'boards(s)'
+          } to clipboard.`, timing: 5
         }))
         .catch(err => {})
     })
@@ -4639,17 +4641,27 @@ window.onkeydown = (e) => {
       e.preventDefault()
       copyBoards()
         .then(() => notifications.notify({
-          message: 'Copied board(s) to clipboard.', timing: 5
+          message: `Copied ${
+            store.getState().toolbar.mode === 'marquee' ? 'selection' : 'boards(s)'
+          } to clipboard.`, timing: 5
         }))
         .catch(err => {})
 
-    } else if (isCommandPressed('menu:edit:cut')) {
-      e.preventDefault()
-      copyBoards()
-        .then(() => {
-          deleteBoards()
-          notifications.notify({ message: 'Cut board(s) to clipboard.', timing: 5 })
-        }).catch(err => {})
+    // } else if (isCommandPressed('menu:edit:cut')) {
+    //   e.preventDefault()
+    // 
+    //   cutBoards()
+    //     .then(() => {
+    //       notifications.notify({
+    //         message: `Cut ${
+    //           store.getState().toolbar.mode === 'marquee' ? 'selection' : 'boards(s)'
+    //         } to clipboard.`,
+    //         timing: 5
+    //       })
+    //     })
+    //     .catch(err => {
+    //       console.warn(err)
+    //     })
 
     } else if (isCommandPressed('menu:edit:paste')) {
       e.preventDefault()
@@ -5132,6 +5144,39 @@ ipcRenderer.on('redo', (e, arg) => {
   }
 })
 
+ipcRenderer.on('cut', event => {
+  if (remote.getCurrentWindow().webContents.isDevToolsFocused()) {
+    remote.getCurrentWindow().webContents.devToolsWebContents.executeJavaScript(
+      `document.execCommand('cut')`
+    )
+    return
+  }
+
+  if (!textInputMode && remote.getCurrentWindow().isFocused()) {
+    cutBoards()
+      .then(() => {
+        notifications.notify({
+          message: `Cut ${
+            store.getState().toolbar.mode === 'marquee' ? 'selection' : 'boards(s)'
+          } to clipboard.`,
+          timing: 5
+        })
+      })
+      .catch(err => {
+        console.warn(err)
+      })
+  } else {
+    // find the focused window (which may be main-window)
+    for (let w of remote.BrowserWindow.getAllWindows()) {
+      if (w.isFocused()) {
+        // console.log('cut to clipboard from window', w.id)
+        w.webContents.cut()
+        return
+      }
+    }
+  }
+})
+
 ipcRenderer.on('copy', event => {
   if (remote.getCurrentWindow().webContents.isDevToolsFocused()) {
     remote.getCurrentWindow().webContents.devToolsWebContents.executeJavaScript(
@@ -5144,7 +5189,9 @@ ipcRenderer.on('copy', event => {
     // console.log('copy boards')
     copyBoards()
       .then(() => notifications.notify({
-        message: 'Copied board(s) to clipboard.', timing: 5
+        message: `Copied ${
+          store.getState().toolbar.mode === 'marquee' ? 'selection' : 'boards(s)'
+        } to clipboard.`, timing: 5
       }))
       .catch(err => {
         console.error(err)
@@ -5275,11 +5322,25 @@ const importImage = async imageDataURL => {
  * of all visible layers as an 'image' to the clipboard.
  *
  */
+
+const cutBoards = async () => {
+  if (store.getState().toolbar.mode === 'marquee') {
+    storyboarderSketchPane.cutToClipboard()
+  } else {
+    await copyBoards()
+    await deleteBoards()
+  }
+}
 
 // TODO cancel token
 let copyBoards = async () => {
   if (textInputMode) return // ignore copy command in text input mode
 
+  if (store.getState().toolbar.mode === 'marquee') {
+    storyboarderSketchPane.copyToClipboard()
+    return
+  }
+
   try {
     // list the boards, using a copy of the selection indices set to determine order
     let boards = [...selections].sort(util.compareNumbers).map(n => boardData.boards[n])
@@ -5510,8 +5571,12 @@ let pasteBoards = async () => {
   if (text !== "") {
     try {
       pasted = JSON.parse(clipboard.readText())
-      if (!pasted.boards.length || pasted.boards.length < 1) throw new Error('no boards')
-      if (!pasted.layerDataByBoardIndex.length || pasted.layerDataByBoardIndex.length < 1) throw new Error('no layer data')
+      if (pasted.marquee) {
+        // it's a marquee paste
+      } else {
+        if (!pasted.boards.length || pasted.boards.length < 1) throw new Error('no boards')
+        if (!pasted.layerDataByBoardIndex.length || pasted.layerDataByBoardIndex.length < 1) throw new Error('no layer data')
+      }
     } catch (err) {
       console.log('could not parse clipboard as text')
       console.log(err)
@@ -5623,6 +5688,19 @@ let pasteBoards = async () => {
       notifications.notify({ message: `Whoops. Could not paste boards. ${err.message}`, timing: 8 })
       throw err
     }
+  } else if (pasted.marquee) {
+    if (store.getState().toolbar.mode !== 'marquee') {
+        store.dispatch({
+          type: 'TOOLBAR_MODE_SET',
+          payload: 'marquee',
+          meta: { scope: 'local' }
+        })
+        if (store.getState().toolbar.mode === 'marquee') {
+          sfx.playEffect('metal')
+        }
+    }
+    storyboarderSketchPane.pasteFromClipboard(pasted)
+
   } else {
     notifications.notify({ message: "There's nothing in the clipboard that I can paste. Are you sure you copied it right?", timing: 8 })
     sfx.error()

src/js/window/storyboarder-sketch-pane.js

@@ -2,7 +2,7 @@ const paper = require('paper')
 
 const EventEmitter = require('events').EventEmitter
 
-const { ipcRenderer, remote } = require('electron')
+const { ipcRenderer, remote, nativeImage } = require('electron')
 
 const fs = require('fs')
 const path = require('path')
@@ -296,6 +296,42 @@ class StoryboarderSketchPane extends EventEmitter {
     )
   }
 
+  cutToClipboard () {
+    if (this.strategy instanceof MarqueeStrategy && this.strategy.marqueePath) {
+      this.copyToClipboard()
+      this.sketchPane.selectedArea.erase(this.visibleLayersIndices)
+    }
+  }
+  copyToClipboard () {
+    if (this.strategy instanceof MarqueeStrategy && this.strategy.marqueePath) {
+      this.sketchPane.selectedArea.set(this.strategy.marqueePath)
+
+      let spritesByLayerId = this.sketchPane.selectedArea.copy(this.visibleLayersIndices)
+
+      // flattened image of marquee selected art
+      let sprite = this.sketchPane.selectedArea.asSprite(this.visibleLayersIndices, false)
+      let pixels = this.sketchPane.app.renderer.plugins.extract.pixels(sprite)
+      SketchPaneUtil.arrayPostDivide(pixels)
+      let image = nativeImage.createFromDataURL(
+        SketchPaneUtil.pixelsToCanvas(
+          pixels,
+          sprite.width,
+          sprite.height
+        ).toDataURL())
+
+      this.strategy.copyToClipboard(
+        this.strategy.marqueePath,
+        image,
+        spritesByLayerId
+      )
+    }
+  }
+  pasteFromClipboard (clipboardContents) {
+    if (this.strategy instanceof MarqueeStrategy && this.strategy.pasteFromClipboard) {
+      this.strategy.pasteFromClipboard(clipboardContents)
+    }
+  }
+
   onKeyDown (e) {
     if (this.isCommandPressed('drawing:scale-mode')) {
       // switch to scale strategy