mirror/pixel-editor
1
0
Fork 0
mirror of https://github.com/lospec/pixel-editor.git synced 2023-08-10 21:12:51 +03:00
Code Issues Projects Releases Wiki Activity

Added back advanced color picker support

Browse Source
This commit is contained in:
Nicola 2022-10-24 12:35:23 +02:00
parent 3b83727c73
commit dca2748a4e
1 changed files with 17 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
js/ColorModule.js
View File

@ -11,11 +11,6 @@ const ColorModule = (() => {
// Square size // Square size
const minSquareSize = 38; const minSquareSize = 38;
let squareSize = colorsMenu.children[0].getBoundingClientRect().width; let squareSize = colorsMenu.children[0].getBoundingClientRect().width;
// Buttons
let addButton = document.getElementById("cm-add");
let removeButton = document.getElementById("cm-remove");
let zoomInButton = document.getElementById("cm-zoomin");
let zoomOutButton = document.getElementById("cm-zoomout");
// Binding events to callbacks // Binding events to callbacks
document.getElementById('jscolor-hex-input').addEventListener('change',colorChanged, false); document.getElementById('jscolor-hex-input').addEventListener('change',colorChanged, false);
@ -23,20 +18,10 @@ const ColorModule = (() => {
document.getElementById('add-color-button').addEventListener('click', addColorButtonEvent, false); document.getElementById('add-color-button').addEventListener('click', addColorButtonEvent, false);
Events.on("wheel", "colors-menu", resizeSquares); Events.on("wheel", "colors-menu", resizeSquares);
Events.on("click", addButton, addColorButtonEvent); Events.on("click", document.getElementById("cm-add"), addColorButtonEvent);
Events.on("click", removeButton, deleteColor, undefined); Events.on("click", document.getElementById("cm-remove"), deleteColor, undefined);
Events.on("click", zoomInButton, resizeSquares, {altKey:true, deltaY: -1.0}); Events.on("click", document.getElementById("cm-zoomin"), resizeSquares, {altKey:true, deltaY: -1.0});
Events.on("click", zoomOutButton, resizeSquares, {altKey:true, deltaY: 1.0}); Events.on("click", document.getElementById("cm-zoomout"), resizeSquares, {altKey:true, deltaY: 1.0});
// const resizeObserver = new ResizeObserver(function(mutations) {
// console.log('mutations:', mutations);
// const h = mutations[0].contentRect.height;
// colorMenuResized(h);
// });
// resizeObserver.observe(document.getElementById('colors-menu'), {attributes:true});
// function colorMenuResized(h) {
// document.getElementById('layers-menu').style.height = `calc(100% + ${h}px - var(--top-nav-height))`;
// }
// Making the colours in the HTML menu sortable // Making the colours in the HTML menu sortable
new Sortable(document.getElementById("colors-menu"), { new Sortable(document.getElementById("colors-menu"), {
@ -145,9 +130,14 @@ const ColorModule = (() => {
e.target.parentElement.classList.add('selected'); e.target.parentElement.classList.add('selected');
if(selectedColor === clickedColor) { if(selectedColor === clickedColor) {
if (EditorState.getCurrentMode() == "Basic") {
e.target.parentElement.lastChild.classList.add('hidden'); e.target.parentElement.lastChild.classList.add('hidden');
e.target.jscolor.show(); e.target.jscolor.show();
} }
else {
Dialogue.showDialogue("palette-block");
}
}
} }
//right clicked color //right clicked color
else if (e.which == 3) { else if (e.which == 3) {
@ -162,6 +152,11 @@ const ColorModule = (() => {
* *
*/ */
function addColorButtonEvent() { function addColorButtonEvent() {
if (EditorState.getCurrentMode() == "Advanced") {
Dialogue.showDialogue("palette-block");
return;
}
//generate random color //generate random color
const newColor = new Color("hsv", Math.floor(Math.random()*360), Math.floor(Math.random()*100), Math.floor(Math.random()*100)).hex; const newColor = new Color("hsv", Math.floor(Math.random()*360), Math.floor(Math.random()*100), Math.floor(Math.random()*100)).hex;
@ -275,6 +270,7 @@ const ColorModule = (() => {
Dialogue.showDialogue("palette-block", false); Dialogue.showDialogue("palette-block", false);
}); });
colorsMenu.children[0].classList.add('selected');
return listItem; return listItem;
} }
@ -284,7 +280,6 @@ const ColorModule = (() => {
* that should be removed. * that should be removed.
*/ */
function deleteColor (color) { function deleteColor (color) {
let currentSelectedColorButton;
if (!color) if (!color)
color = getSelectedColor(); color = getSelectedColor();