From d0e80cefac2ca63fa233da2e6138655fc524ca49 Mon Sep 17 00:00:00 2001
From: Toinane <toinane@yahoo.fr>
Date: Sun, 27 Aug 2017 18:31:20 +0200
Subject: [PATCH] feat(picker): can change zoom level

---
 src/browsers/picker.js     |   1 -
 src/events/picker.js       |   7 +++
 src/ressources/zoom-11.png | Bin 0 -> 2393 bytes
 src/ressources/zoom-3.png  | Bin 0 -> 2229 bytes
 src/ressources/zoom-5.png  | Bin 0 -> 2425 bytes
 src/ressources/zoom-7.png  | Bin 0 -> 2428 bytes
 src/storage.js             |  10 ++++-
 src/views/css/picker.css   |  15 +++----
 src/views/js/picker.js     |  85 ++++++++++++++++++++-----------------
 src/views/picker.html      |  38 +----------------
 10 files changed, 68 insertions(+), 88 deletions(-)
 create mode 100644 src/ressources/zoom-11.png
 create mode 100644 src/ressources/zoom-3.png
 create mode 100644 src/ressources/zoom-5.png
 create mode 100644 src/ressources/zoom-7.png

diff --git a/src/browsers/picker.js b/src/browsers/picker.js
index edd3c0e..5019e9b 100644
--- a/src/browsers/picker.js
+++ b/src/browsers/picker.js
@@ -25,7 +25,6 @@ module.exports = (dirname, storage) => {
     })
 
     win.loadURL(`file://${dirname}/views/picker.html`)
-    // win.openDevTools()
     win.on('closed', () => {
       win = undefined
     })
diff --git a/src/events/picker.js b/src/events/picker.js
index e790d61..aed22e2 100644
--- a/src/events/picker.js
+++ b/src/events/picker.js
@@ -23,8 +23,15 @@ module.exports = (storage, browsers) => {
   }
 
   ipcMain.on('picker-requested', event => {
+    console.log(storage.get('size', 'picker'))
+    event.sender.send('picker-size', storage.get('size', 'picker'))
     support.init()
     changePosition()
+
+    support.getWindow().on('blur', () => {
+      support.getWindow().close()
+      picker.getWindow().close()
+    })
   })
 
   ipcMain.on('supportMove', event => changePosition())
diff --git a/src/ressources/zoom-11.png b/src/ressources/zoom-11.png
new file mode 100644
index 0000000000000000000000000000000000000000..b55acd78119bf317d7e2fd28c686b0ca6617d0cd
GIT binary patch
literal 2393
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
LNkvXXu0mjfLRT>e

literal 0
HcmV?d00001

diff --git a/src/ressources/zoom-3.png b/src/ressources/zoom-3.png
new file mode 100644
index 0000000000000000000000000000000000000000..536e4004c712ef8659b8d35ef26af8991e04479a
GIT binary patch
literal 2229
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
Dq>kra

literal 0
HcmV?d00001

diff --git a/src/ressources/zoom-5.png b/src/ressources/zoom-5.png
new file mode 100644
index 0000000000000000000000000000000000000000..403e20b47a24c23b77d722935309cd2e0d4d6309
GIT binary patch
literal 2425
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

literal 0
HcmV?d00001

diff --git a/src/ressources/zoom-7.png b/src/ressources/zoom-7.png
new file mode 100644
index 0000000000000000000000000000000000000000..f76de332ee085a67b443cbc692e6dec7d08d21bc
GIT binary patch
literal 2428
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

literal 0
HcmV?d00001

diff --git a/src/storage.js b/src/storage.js
index 8de8f53..5eeac72 100644
--- a/src/storage.js
+++ b/src/storage.js
@@ -37,6 +37,12 @@ let fetch = () => (
       for(let key in defaultStorage.colorpicker) {
         if(!data.colorpicker.hasOwnProperty(key)) data.colorpicker[key] = defaultStorage.colorpicker[key]
       }
+      for(let key in defaultStorage.picker) {
+        if(!data.picker.hasOwnProperty(key)) data.picker[key] = defaultStorage.picker[key]
+      }
+      for(let key in defaultStorage.colorsbook) {
+        if(!data.colorsbook.hasOwnProperty(key)) data.colorsbook[key] = defaultStorage.colorsbook[key]
+      }
       storage = data
       resolve(true)
     })
@@ -137,7 +143,9 @@ defaultStorage = {
     lastColor: '#00AEEF'
   },
   colorsbook: {},
-  picker: {}
+  picker: {
+    size: 5
+  }
 }
 
 module.exports = {
diff --git a/src/views/css/picker.css b/src/views/css/picker.css
index 3758784..945c642 100644
--- a/src/views/css/picker.css
+++ b/src/views/css/picker.css
@@ -19,18 +19,15 @@ body{
 }
 
 table{
-
+  width: 100px;
+  height: 100px;
+  border-collapse: collapse;
+  display: grid;
 }
   tr{
-    display: flex;
+    display: grid;
   }
   td{
     margin: 0;
-    width: 20px;
-    height: 20px;
-    border: 0.5px solid rgba(0, 0, 0, 0.1);
+    border: 1px solid rgba(0, 0, 0, 0.02);
   }
-
-#l2-2{
-  border: 1px solid black;
-}
diff --git a/src/views/js/picker.js b/src/views/js/picker.js
index 7f39fcb..6c0755c 100644
--- a/src/views/js/picker.js
+++ b/src/views/js/picker.js
@@ -1,54 +1,59 @@
 const {screen} = require('electron')
 const robot = require('robotjs')
-let colors
+
+let pixels = 5
+let colors = {}
 let color = new Color(0, 0, 0)
 let size = screen.getPrimaryDisplay().workAreaSize
 
 document.addEventListener('DOMContentLoaded', () => ipcRenderer.send('picker-requested'), false)
 
+ipcRenderer.on('picker-size', (event, size) => {
+  pixels = size
+})
+
 setInterval(() => {
-  getColors()
-  document.querySelector('#border').style.border = `9px solid #${colors['#l2-2']}`
-  Object.keys(colors).map((key, index) => {
-    color.setColorFromHex('#' + colors[key])
-    // if (key === '#l2-2') document.querySelector(key).style.border = '1px solid ' + color.getHexFromRGB(color.getNegativeColor(color.rgb))
-    if (color.isDarkColor() && key === '#l2-2') document.querySelector(key).style.border = '1px solid white'
-    else if (key === '#l2-2') document.querySelector(key).style.border = '1px solid black'
-    document.querySelector(key).style.background = color.hex
-  })
+  let table = ''
+  let half = Math.floor(pixels / 2)
+  getColors(pixels, half)
+  for(let y = 0; y < pixels; y++) {
+    table += '<tr>'
+    for(let x = 0; x < pixels; x++) {
+      if (x === half && y === half) {
+        color.setColorFromHex(colors[`#l${y}-${x}`])
+        document.querySelector('#border').style.border = `9px solid ${colors[`#l${y}-${x}`]}`
+        if (color.isDarkColor()) table += `<td id="l${y}-${x}" style="border: 1px solid white; background: ` + colors[`#l${y}-${x}`] + '"></td>'
+        else table += `<td id="l${y}-${x}" style="border: 1px solid black; background: ` + colors[`#l${y}-${x}`] + '"></td>'
+      }
+      else if (x === half - 1 && y === half) {
+        color.setColorFromHex(colors[`#l${half}-${half}`])
+        document.querySelector('#border').style.border = `9px solid ${colors[`#l${y}-${x}`]}`
+        if (color.isDarkColor()) table += `<td id="l${y}-${x}" style="border-right: 1px solid white; background: ` + colors[`#l${y}-${x}`] + '"></td>'
+        else table += `<td id="l${y}-${x}" style="border-right: 1px solid black; background: ` + colors[`#l${y}-${x}`] + '"></td>'
+      }
+      else if (x === half && y === half - 1) {
+        color.setColorFromHex(colors[`#l${half}-${half}`])
+        document.querySelector('#border').style.border = `9px solid ${colors[`#l${y}-${x}`]}`
+        if (color.isDarkColor()) table += `<td id="l${y}-${x}" style="border-bottom: 1px solid white; background: ` + colors[`#l${y}-${x}`] + '"></td>'
+        else table += `<td id="l${y}-${x}" style="border-bottom: 1px solid black; background: ` + colors[`#l${y}-${x}`] + '"></td>'
+      }
+      else table += `<td id="l${y}-${x}" style="background: ` + colors[`#l${y}-${x}`] + '"></td>'
+    }
+    table += '</tr>'
+  }
+  document.querySelector('table').innerHTML = table
 }, 1)
 
-function getColors () {
+function getColors (size, half) {
   let mouse = robot.getMousePos()
-  if (mouse.x <= 2 || mouse.x >= size.width - 2) return colors
-  if (mouse.y <= 2 || mouse.y >= size.height) return colors
-
-  colors = {
-    '#l0-0': robot.getPixelColor(mouse.x-2, mouse.y-2),
-    '#l0-1': robot.getPixelColor(mouse.x-1, mouse.y-2),
-    '#l0-2': robot.getPixelColor(mouse.x, mouse.y-2),
-    '#l0-3': robot.getPixelColor(mouse.x+1, mouse.y-2),
-    '#l0-4': robot.getPixelColor(mouse.x+2, mouse.y-2),
-    '#l1-0': robot.getPixelColor(mouse.x-2, mouse.y-1),
-    '#l1-1': robot.getPixelColor(mouse.x-1, mouse.y-1),
-    '#l1-2': robot.getPixelColor(mouse.x, mouse.y-1),
-    '#l1-3': robot.getPixelColor(mouse.x+1, mouse.y-1),
-    '#l1-4': robot.getPixelColor(mouse.x+2, mouse.y-1),
-    '#l2-0': robot.getPixelColor(mouse.x-2, mouse.y),
-    '#l2-1': robot.getPixelColor(mouse.x-1, mouse.y),
-    '#l2-2': robot.getPixelColor(mouse.x, mouse.y),
-    '#l2-3': robot.getPixelColor(mouse.x+1, mouse.y),
-    '#l2-4': robot.getPixelColor(mouse.x+2, mouse.y),
-    '#l3-0': robot.getPixelColor(mouse.x-2, mouse.y+1),
-    '#l3-1': robot.getPixelColor(mouse.x-1, mouse.y+1),
-    '#l3-2': robot.getPixelColor(mouse.x, mouse.y+1),
-    '#l3-3': robot.getPixelColor(mouse.x+1, mouse.y+1),
-    '#l3-4': robot.getPixelColor(mouse.x+2, mouse.y+1),
-    '#l4-0': robot.getPixelColor(mouse.x-2, mouse.y+2),
-    '#l4-1': robot.getPixelColor(mouse.x-1, mouse.y+2),
-    '#l4-2': robot.getPixelColor(mouse.x, mouse.y+2),
-    '#l4-3': robot.getPixelColor(mouse.x+1, mouse.y+2),
-    '#l4-4': robot.getPixelColor(mouse.x+2, mouse.y+2)
+  if (mouse.x <= half || mouse.x >= size.width - half) return colors
+  if (mouse.y <= half || mouse.y >= size.height) return colors
+  for(let y = 0, halfY = -half; y < size; y++) {
+    for(let x = 0, halfX = -half; x < size; x++) {
+      colors[`#l${y}-${x}`] = '#' + robot.getPixelColor(mouse.x + halfX, mouse.y + halfY)
+      halfX++;
+    }
+    halfY++;
   }
   return colors
 }
diff --git a/src/views/picker.html b/src/views/picker.html
index d5e48f2..dcf7d97 100644
--- a/src/views/picker.html
+++ b/src/views/picker.html
@@ -10,43 +10,7 @@
   <body>
     <section id="border">
       <section id="picker">
-        <table>
-          <tr>
-            <td id="l0-0"></td>
-            <td id="l0-1"></td>
-            <td id="l0-2"></td>
-            <td id="l0-3"></td>
-            <td id="l0-4"></td>
-          </tr>
-          <tr>
-            <td id="l1-0"></td>
-            <td id="l1-1"></td>
-            <td id="l1-2"></td>
-            <td id="l1-3"></td>
-            <td id="l1-4"></td>
-          </tr>
-          <tr>
-            <td id="l2-0"></td>
-            <td id="l2-1"></td>
-            <td id="l2-2"></td>
-            <td id="l2-3"></td>
-            <td id="l2-4"></td>
-          </tr>
-          <tr>
-            <td id="l3-0"></td>
-            <td id="l3-1"></td>
-            <td id="l3-2"></td>
-            <td id="l3-3"></td>
-            <td id="l3-4"></td>
-          </tr>
-          <tr>
-            <td id="l4-0"></td>
-            <td id="l4-1"></td>
-            <td id="l4-2"></td>
-            <td id="l4-3"></td>
-            <td id="l4-4"></td>
-          </tr>
-        </table>
+        <table></table>
       </section>
     </section>
   </body>