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 0000000..b55acd7
Binary files /dev/null and b/src/ressources/zoom-11.png differ
diff --git a/src/ressources/zoom-3.png b/src/ressources/zoom-3.png
new file mode 100644
index 0000000..536e400
Binary files /dev/null and b/src/ressources/zoom-3.png differ
diff --git a/src/ressources/zoom-5.png b/src/ressources/zoom-5.png
new file mode 100644
index 0000000..403e20b
Binary files /dev/null and b/src/ressources/zoom-5.png differ
diff --git a/src/ressources/zoom-7.png b/src/ressources/zoom-7.png
new file mode 100644
index 0000000..f76de33
Binary files /dev/null and b/src/ressources/zoom-7.png differ
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 += ''
+ 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 += ` | '
+ else table += ` | '
+ }
+ 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 += ` | '
+ else table += ` | '
+ }
+ 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 += ` | '
+ else table += ` | '
+ }
+ else table += ` | '
+ }
+ table += '
'
+ }
+ 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 @@
-
-
- |
- |
- |
- |
- |
-
-
- |
- |
- |
- |
- |
-
-
- |
- |
- |
- |
- |
-
-
- |
- |
- |
- |
- |
-
-
- |
- |
- |
- |
- |
-
-
+