diff --git a/css/pick-color.css b/css/pick-color.css
index 97bee26..a7db552 100644
--- a/css/pick-color.css
+++ b/css/pick-color.css
@@ -9,4 +9,33 @@ body {
}
#optCanvas {
pointer-events: none;
+}
+
+.color-picker-close {
+ display: none;
+ z-index: 2;
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: 70px;
+ height: 70px;
+ background: #222;
+ border:0;
+ cursor: pointer;
+ outline: none;
+}
+.color-picker-close::before,
+.color-picker-close::after {
+ content: "";
+
+ width: 30px;
+ height: 3px;
+ background: #fff;
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%) rotate(45deg);
+}
+.color-picker-close::after {
+ transform: translate(-50%, -50%) rotate(-45deg);
}
\ No newline at end of file
diff --git a/js/palette.js b/js/palette.js
index 9abbb55..53d82d1 100644
--- a/js/palette.js
+++ b/js/palette.js
@@ -9,7 +9,7 @@ export const paletteElement = document.querySelector("#palette");
export const attachNewColor = function(color) {
const element = createPaletteElement(color);
- paletteElement.append(element);
+ paletteElement.prepend(element);
}
export const createPaletteElement = function(color) {
@@ -95,7 +95,6 @@ const drag = new DragDrop('#palette', {
const elements = paletteElement.querySelectorAll(".palette-element");
const palette = [...elements].map(el => el.dataset.color);
saveColorsToFile(palette);
- saveColorsToFile(palette);
},
className : "palette-element"
});
diff --git a/main.js b/main.js
index 0e3b92c..3761135 100644
--- a/main.js
+++ b/main.js
@@ -15,21 +15,15 @@ const myApp = {
mainWindow: null,
contextMenu: false,
pickedWindow: null,
- windowOpen: false,
menu: null,
tray: null, //musi byc globalne bo inaczej garbage collector sprawia ze nie mia ikonki w trayu
- toggleMainWindow() {
-
- if (this.windowOpen) {
- this.windowOpen = false;
+ toggleMainWindow(show) {
+ if (!show) {
this.mainWindow.hide();
- console.log(this.windowOpen);
} else {
- this.windowOpen = true;
this.mainWindow.show();
this.mainWindow.restore();
- console.log(this.windowOpen);
}
},
@@ -37,7 +31,7 @@ const myApp = {
const { width: screenW, height: screenH } = screen.getPrimaryDisplay().workAreaSize;
this.mainWindow = new BrowserWindow({
- icon: path.join(__dirname, '/images/icon.ico'),
+ icon: path.join(__dirname, '/images/icon.png'),
width: 360,
height: screenH,
x: screenW - 360,
@@ -53,19 +47,19 @@ const myApp = {
this.mainWindow.loadFile('index.html');
- this.mainWindow.hide();
+ //this.mainWindow.hide();
this.mainWindow.on('minimize', e => {
e.preventDefault();
this.mainWindow.hide();
});
- const imgPath = path.join(__dirname, '/images/icon.ico');
+ const imgPath = path.join(__dirname, '/images/icon.png');
this.tray = new Tray(imgPath);
this.tray.setToolTip('kolory');
this.tray.on('click', () => {
- this.toggleMainWindow();
+ this.toggleMainWindow(true);
});
Menu.setApplicationMenu(null);
@@ -96,9 +90,15 @@ const myApp = {
},
createColorPickWindow() {
+ const { width: screenW, height: screenH } = screen.getPrimaryDisplay().workAreaSize;
+
this.pickedWindow = new BrowserWindow({
- icon: path.join(__dirname, './images/icon.ico'),
+ icon: path.join(__dirname, './images/icon.png'),
fullscreen: true,
+ // x: 0,
+ // y : 0,
+ // width: screenW,
+ // height: screenH,
alwaysOnTop: true,
movable: false,
minimizable: false,
@@ -112,16 +112,24 @@ const myApp = {
}
});
+ //this.pickedWindow.webContents.openDevTools()
+
this.pickedWindow.loadFile('pick-color.html');
this.pickedWindow.once('ready-to-show', () => {
this.pickedWindow.show();
});
- //pickedWindow.webContents.openDevTools()
+ //this.pickedWindow.webContents.openDevTools()
},
bindCommunication() {
ipcMain.on('createColorPickWindow', (event, file, content) => {
this.createColorPickWindow();
+ this.mainWindow.hide();
+ });
+
+ ipcMain.on('closeColorPickWindow', (event, file, content) => {
+ this.pickedWindow.close();
+ this.toggleMainWindow(true);
});
ipcMain.on('colorPicked', (event, messages) => {
@@ -130,6 +138,9 @@ const myApp = {
},
init() {
+ app.commandLine.appendSwitch('disable-transparent-visuals');
+ app.commandLine.appendSwitch('disable-gpu');
+
app.on('ready', () => {
this.createMainWindow();
this.createContextMenu();
diff --git a/package-lock.json b/package-lock.json
index cdc8bd8..c681dc2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
{
- "name": "electron-quick-start",
+ "name": "Colors",
"version": "1.0.0",
"lockfileVersion": 1,
"requires": true,
@@ -216,8 +216,7 @@
"balanced-match": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
- "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
- "dev": true
+ "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
},
"bluebird": {
"version": "3.7.2",
@@ -261,7 +260,6 @@
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
- "dev": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@@ -426,8 +424,7 @@
"concat-map": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
- "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
- "dev": true
+ "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
},
"concat-stream": {
"version": "1.6.2",
@@ -760,6 +757,11 @@
"universalify": "^0.1.0"
}
},
+ "fs.realpath": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+ "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
+ },
"get-caller-file": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -775,6 +777,19 @@
"pump": "^3.0.0"
}
},
+ "glob": {
+ "version": "7.1.6",
+ "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+ "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+ "requires": {
+ "fs.realpath": "^1.0.0",
+ "inflight": "^1.0.4",
+ "inherits": "2",
+ "minimatch": "^3.0.4",
+ "once": "^1.3.0",
+ "path-is-absolute": "^1.0.0"
+ }
+ },
"global-agent": {
"version": "2.1.8",
"resolved": "https://registry.npmjs.org/global-agent/-/global-agent-2.1.8.tgz",
@@ -896,11 +911,19 @@
"integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
"dev": true
},
+ "inflight": {
+ "version": "1.0.6",
+ "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+ "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+ "requires": {
+ "once": "^1.3.0",
+ "wrappy": "1"
+ }
+ },
"inherits": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
- "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
- "dev": true
+ "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
},
"ini": {
"version": "1.3.5",
@@ -1128,7 +1151,6 @@
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
"integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
- "dev": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@@ -1208,7 +1230,6 @@
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
"integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
- "dev": true,
"requires": {
"wrappy": "1"
}
@@ -1269,6 +1290,11 @@
"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
"dev": true
},
+ "path-is-absolute": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+ "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
+ },
"path-parse": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
@@ -1288,6 +1314,19 @@
"dev": true,
"optional": true
},
+ "pinkie": {
+ "version": "2.0.4",
+ "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
+ "integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA="
+ },
+ "pinkie-promise": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
+ "integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=",
+ "requires": {
+ "pinkie": "^2.0.0"
+ }
+ },
"prepend-http": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz",
@@ -1429,6 +1468,14 @@
"lowercase-keys": "^1.0.0"
}
},
+ "rimraf": {
+ "version": "2.6.3",
+ "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
+ "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
+ "requires": {
+ "glob": "^7.1.3"
+ }
+ },
"roarr": {
"version": "2.15.2",
"resolved": "https://registry.npmjs.org/roarr/-/roarr-2.15.2.tgz",
@@ -1471,6 +1518,15 @@
"integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
"dev": true
},
+ "screenshot-desktop": {
+ "version": "1.12.0",
+ "resolved": "https://registry.npmjs.org/screenshot-desktop/-/screenshot-desktop-1.12.0.tgz",
+ "integrity": "sha512-LU/x3B0BmgNIugp+AOBNkJM9SvE1EWDKtSo9RPyXsTkQ55wV9H3BTDbGQGFblS9f1auA6X45vvZJ5Lj0V8tnnA==",
+ "requires": {
+ "pinkie-promise": "^2.0.1",
+ "temp": "^0.9.0"
+ }
+ },
"semver": {
"version": "7.1.3",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.1.3.tgz",
@@ -1666,6 +1722,14 @@
"has-flag": "^4.0.0"
}
},
+ "temp": {
+ "version": "0.9.1",
+ "resolved": "https://registry.npmjs.org/temp/-/temp-0.9.1.tgz",
+ "integrity": "sha512-WMuOgiua1xb5R56lE0eH6ivpVmg/lq2OHm4+LtT/xtEtPQ+sz6N3bBM6WZ5FvO1lO4IKIOb43qnhoc4qxP5OeA==",
+ "requires": {
+ "rimraf": "~2.6.2"
+ }
+ },
"temp-file": {
"version": "3.3.7",
"resolved": "https://registry.npmjs.org/temp-file/-/temp-file-3.3.7.tgz",
@@ -1847,8 +1911,7 @@
"wrappy": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
- "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
- "dev": true
+ "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
},
"write-file-atomic": {
"version": "3.0.3",
diff --git a/pick-color.html b/pick-color.html
index b4e0921..b36d575 100644
--- a/pick-color.html
+++ b/pick-color.html
@@ -7,6 +7,7 @@
+
diff --git a/renderer-pick-color.js b/renderer-pick-color.js
index 4d31e03..1e41ed7 100644
--- a/renderer-pick-color.js
+++ b/renderer-pick-color.js
@@ -2,7 +2,6 @@ const electron = require('electron');
const {ipcRenderer} = require('electron');
const remote = electron.remote;
const size = remote.getCurrentWindow().webContents.getOwnerBrowserWindow().getBounds();
-
import {ScreenCapture} from "./js/utils/ScreenCapture.js";
const canvas1 = document.querySelector("#mainCanvas");
@@ -27,43 +26,6 @@ const drawSize = {
color : 40
}
-const drawLines = function(mouseX, mouseY) {
- const size = 4;
- const fix = 0.5;
- ctx2.save();
- ctx2.strokeStyle = "rgba(100, 100, 100, 0.6)";
- //x
- ctx2.beginPath();
- ctx2.moveTo(0, mouseY);
- ctx2.lineTo(fix + mouseX - size, fix + mouseY);
- ctx2.stroke();
-
- ctx2.beginPath();
- ctx2.moveTo(fix + mouseX + size, fix + mouseY);
- ctx2.lineTo(canvas2.width, fix + mouseY);
- ctx2.stroke();
-
- //y
- ctx2.beginPath();
- ctx2.moveTo(fix + mouseX, 0);
- ctx2.lineTo(fix + mouseX, fix + mouseY - size);
- ctx2.stroke();
-
- ctx2.beginPath();
- ctx2.moveTo(fix + mouseX, fix + mouseY + size);
- ctx2.lineTo(fix + mouseX, canvas2.height);
- ctx2.stroke();
-
- //circle
- ctx2.beginPath();
- ctx2.arc(mouseX, mouseY, size, 0, 2 * Math.PI);
- ctx2.stroke();
-
- //ctx2.drawImage(img, mouseX - 2, mouseY - 30);
-
- ctx2.restore();
-}
-
const drawZoom = function(mouseX, mouseY) {
const size = drawSize.zoom;
const fix = 0.5;
@@ -157,26 +119,45 @@ const sc = new ScreenCapture();
sc.capture().then(canvasFromSC => {
ctx1.drawImage(canvasFromSC, 0, 0, canvas1.width, canvas1.height, 0, 0, canvas1.width, canvas1.height);
- canvas1.addEventListener("mousemove", e => {
- const pixelData = [...ctx1.getImageData(e.offsetX, e.offsetY, 1, 1).data];
- ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
- drawLines(e.offsetX, e.offsetY);
- drawZoom(e.offsetX, e.offsetY);
- drawColor(pixelData);
+ document.querySelector(".color-picker-close").style.display = "block"
+
+ const img = new Image();
+
+ img.addEventListener("load", e => {
+ document.addEventListener("mousemove", e => {
+ const pixelData = [...ctx1.getImageData(e.offsetX, e.offsetY, 1, 1).data];
+ ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
+ if (e.target.tagName.toLowerCase() === "canvas") {
+ ctx2.drawImage(img, e.offsetX - 2, e.offsetY - 30);
+ }
+ drawZoom(e.offsetX, e.offsetY);
+ drawColor(pixelData);
+ })
})
canvas1.addEventListener("click", e => {
const pixelData = [...ctx1.getImageData(e.offsetX, e.offsetY, 1, 1).data];
- console.log(pixelData);
ipcRenderer.send('colorPicked', pixelData );
- const window = remote.getCurrentWindow();
- window.close();
+ ipcRenderer.send('closeColorPickWindow', {});
})
- document.addEventListener("keyup", e => {
- if (e.key === "Escape") {
- const window = remote.getCurrentWindow();
- window.close();
- }
- })
-})
\ No newline at end of file
+ img.src = "images/dropper-icon.png";
+}).catch((err) => {
+ // ...
+})
+
+//close window
+const closeWindow = function() {
+ ipcRenderer.send('closeColorPickWindow', {});
+}
+
+document.addEventListener("keyup", e => {
+ if (e.key === "Escape") {
+ closeWindow();
+ }
+})
+
+const close = document.querySelector(".color-picker-close");
+close.addEventListener("click", e => {
+ closeWindow();
+});
\ No newline at end of file
diff --git a/renderer.js b/renderer.js
index 90cecac..24e1c79 100644
--- a/renderer.js
+++ b/renderer.js
@@ -9,8 +9,12 @@ const { ipcRenderer } = require("electron");
ipcRenderer.on('pickedColor', function(event , data) {
const color = data.color;
const hexColor = rgbToHex(color[0], color[1], color[2]);
+ console.log(hexColor);
attachNewColor(hexColor);
- saveColorsToFile();
+ const paletteElement = document.querySelector("#palette");
+ const elements = paletteElement.querySelectorAll(".palette-element");
+ const palette = [...elements].map(el => el.dataset.color);
+ saveColorsToFile(palette);
});
optionsPub.subscribe(() => {