starred/colorpicker
1
0
Fork 0
mirror of https://github.com/Toinane/colorpicker.git synced 2026-08-30 02:24:23 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(picker): can change zoom level

Browse Source
This commit is contained in:
Toinane
2017-08-27 18:31:20 +02:00
parent f30c43a56a
commit d0e80cefac
10 changed files with 68 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/browsers/picker.js
-1
View File
@@ -25,7 +25,6 @@ module.exports = (dirname, storage) => {
})
win.loadURL(`file://${dirname}/views/picker.html`)
// win.openDevTools()
win.on('closed', () => {
win = undefined
})
src/events/picker.js
+7
View File
@@ -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())
src/ressources/zoom-11.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

src/ressources/zoom-3.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

src/ressources/zoom-5.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

src/ressources/zoom-7.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

src/storage.js
+9 -1
View File
@@ -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 = {
src/views/css/picker.css
+6 -9
View File
@@ -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;
}
src/views/js/picker.js
+45 -40
View File
@@ -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
}
src/views/picker.html
+1 -37
View File
@@ -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>