From 1e5ce673d77e68afe2d25fc4ce7d7ca116dd10ac Mon Sep 17 00:00:00 2001
From: Igor Zinken <igor.zinken@igorski.nl>
Date: Sat, 16 Jan 2021 20:46:52 +0100
Subject: [PATCH] Added keyboard shortcut to open color picker

---
 .../ui/color-picker/color-picker.vue          |  2 ++
 src/services/keyboard-service.js              | 24 ++++++++++++-------
 src/utils/render-util.js                      | 11 ++++++---
 3 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/components/ui/color-picker/color-picker.vue b/src/components/ui/color-picker/color-picker.vue
index c1504ab..77c5b1c 100644
--- a/src/components/ui/color-picker/color-picker.vue
+++ b/src/components/ui/color-picker/color-picker.vue
@@ -68,9 +68,11 @@ export default {
             }
         });
         pickrInstance.on( "save", this.saveColor.bind( this ));
+        window.pickrInstance = pickrInstance;
     },
     destroy() {
         pickrInstance?.destroyAndRemove();
+        window.pickrInstance = null;
     },
     methods: {
         saveColor( value ) {
diff --git a/src/services/keyboard-service.js b/src/services/keyboard-service.js
index 330bbee..275ecdf 100644
--- a/src/services/keyboard-service.js
+++ b/src/services/keyboard-service.js
@@ -220,9 +220,13 @@ function handleKeyDown( event ) {
 
         case 67: // C
              // copy current selection
-             if ( hasOption && getters.activeDocument?.selection?.length > 0 ) {
-                 dispatch( "requestSelectionCopy" );
-                 preventDefault( event );
+             if ( hasOption ) {
+                 if ( getters.activeDocument?.selection?.length > 0 ) {
+                     dispatch( "requestSelectionCopy" );
+                     preventDefault( event );
+                 }
+             } else {
+                 window.pickrInstance?.show();
              }
              break;
 
@@ -273,8 +277,10 @@ function handleKeyDown( event ) {
             break;
 
         case 76: // L
-            if ( hasOption && shiftDown ) {
-                openModal( ADD_LAYER );
+            if ( hasOption ) {
+                if ( shiftDown ) {
+                    openModal( ADD_LAYER );
+                }
             } else {
                 commit( "setActiveTool", { tool: ToolTypes.LASSO })
                 setActiveTool( ToolTypes.LASSO );
@@ -337,9 +343,11 @@ function handleKeyDown( event ) {
 
         case 86: // V
             // paste current selection
-            if ( hasOption && !!state.selectionContent ) {
-                dispatch( "pasteSelection" );
-                preventDefault( event ); // override browser paste
+            if ( hasOption ) {
+                if ( !!state.selectionContent ) {
+                    dispatch( "pasteSelection" );
+                    preventDefault( event ); // override browser paste
+                }
             } else if ( getters.activeDocument ) {
                 setActiveTool( ToolTypes.DRAG );
             }
diff --git a/src/utils/render-util.js b/src/utils/render-util.js
index f3a8277..6131953 100644
--- a/src/utils/render-util.js
+++ b/src/utils/render-util.js
@@ -27,6 +27,9 @@ import { distanceBetween, angleBetween, pointBetween, translatePointerRotation }
 import { randomInRange } from "@/math/unit-math";
 import { createCanvas, resizeImage } from "@/utils/canvas-util";
 
+const { cos, sin } = Math;
+const TWO_PI = Math.PI * 2;
+
 const tempCanvas = createCanvas();
 
 export const renderCross = ( ctx, x, y, size ) => {
@@ -78,10 +81,12 @@ export const renderBrushStroke = ( sprite, brush, ctx, destinationPoint ) => {
     if ( type === BrushTypes.SPRAY ) {
         ctx.fillStyle = brush.colors[ 0 ];
         for ( let i = doubleRadius; i--; ) {
+            const angle = randomInRange( 0, TWO_PI );
+            const size  = randomInRange( 1, 3 );
             ctx.fillRect(
-                destinationPoint.x + randomInRange( -halfRadius, halfRadius ),
-                destinationPoint.y + randomInRange( -halfRadius, halfRadius ),
-                1, 1
+                destinationPoint.x + randomInRange( -halfRadius, halfRadius ) * cos( angle ),
+                destinationPoint.y + randomInRange( -halfRadius, halfRadius ) * sin( angle ),
+                size, size
             );
         }
         return ctx.restore();