Added buttons to colour menu

Added buttons to add, remove, zoom in and zoom out. Also implemented palette zooming
This commit is contained in:
Nicola 2022-10-24 12:11:40 +02:00
parent f31fd5b505
commit 3b83727c73
3 changed files with 70 additions and 13 deletions

View File

@ -209,4 +209,30 @@
fill: lighten($basecolor, 10%) !important; fill: lighten($basecolor, 10%) !important;
} }
} }
}
#colors-menu-settings {
width: 100%;
padding: 0px 0px 0px 0px;
position:relative;
top:0px;
button {
position:relative;
left:0px;
margin-left:0px;
padding: 2px;
height:30px;
width:45.7%;
color: $basetext;
background: $basecolor;
border:none;
&:hover {
color: $basehovertext;
background-color: $basehover;
cursor:pointer;
}
}
} }

View File

@ -8,6 +8,14 @@ const ColorModule = (() => {
const coloursList = document.getElementById("palette-list"); const coloursList = document.getElementById("palette-list");
// Reference to the colours menu // Reference to the colours menu
let colorsMenu = document.getElementById("colors-menu"); let colorsMenu = document.getElementById("colors-menu");
// Square size
const minSquareSize = 38;
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);
@ -15,6 +23,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", removeButton, deleteColor, undefined);
Events.on("click", zoomInButton, resizeSquares, {altKey:true, deltaY: -1.0});
Events.on("click", zoomOutButton, resizeSquares, {altKey:true, deltaY: 1.0});
// const resizeObserver = new ResizeObserver(function(mutations) { // const resizeObserver = new ResizeObserver(function(mutations) {
// console.log('mutations:', mutations); // console.log('mutations:', mutations);
@ -35,22 +47,14 @@ const ColorModule = (() => {
}); });
function resizeSquares(event) { function resizeSquares(event) {
for (let i=0; i< coloursList.children.length; i++) { if (!event.altKey) return;
let width = parseInt(coloursList.children[i].style.width.replace("px", ""), 10);
let newWidth = (width - 2 * Math.sign(event.deltaY)) + "px";
/* coloursList.children[i].setAttribute("style", "width: " + (width - 2 * Math.sign(event.deltaY)) + "px"); squareSize = Math.max(minSquareSize, (squareSize - 3 * Math.sign(event.deltaY)));
coloursList.children[i].setAttribute("style", "height: " + (width - 2 * Math.sign(event.deltaY)) + "px");*/
coloursList.children[i].setAttribute("style", "width: 500px");
coloursList.children[i].style.width = '500px';
coloursList.children[i].setAttribute("style", "height: 500px");
coloursList.children[i].style.height = '500px';
for (let i=0; i< colorsMenu.children.length; i++) {
colorsMenu.children[i].style.width = squareSize + 'px';
colorsMenu.children[i].style.height = squareSize + 'px';
} }
let width = coloursList.children[0].style.width;
console.log(width);
} }
/** Changes all of one color to another after being changed from the color picker /** Changes all of one color to another after being changed from the color picker
@ -167,6 +171,8 @@ const ColorModule = (() => {
//add new color and make it selected //add new color and make it selected
let addedColor = addColor(newColor); let addedColor = addColor(newColor);
addedColor.classList.add('selected'); addedColor.classList.add('selected');
addedColor.style.width = squareSize + "px";
addedColor.style.height = squareSize + "px";
updateCurrentColor(newColor); updateCurrentColor(newColor);
//add history state //add history state
@ -278,6 +284,10 @@ const ColorModule = (() => {
* that should be removed. * that should be removed.
*/ */
function deleteColor (color) { function deleteColor (color) {
let currentSelectedColorButton;
if (!color)
color = getSelectedColor();
const logStyle = 'background: #913939; color: white; padding: 5px;'; const logStyle = 'background: #913939; color: white; padding: 5px;';
//if color is a string, then find the corresponding button //if color is a string, then find the corresponding button
@ -476,6 +486,11 @@ const ColorModule = (() => {
} }
} }
function getSelectedColor() {
const currentSelectedColorButton = document.querySelector('#colors-menu li.selected .color-button');
return currentSelectedColorButton.jscolor.toString();
}
return { return {
getCurrentPalette, getCurrentPalette,
addColor, addColor,
@ -486,5 +501,6 @@ const ColorModule = (() => {
createColorPalette, createColorPalette,
createPaletteFromLayers, createPaletteFromLayers,
updateCurrentColor, updateCurrentColor,
getSelectedColor,
} }
})(); })();

View File

@ -1,3 +1,18 @@
<span id="colors-menu-settings">
<button id="cm-add">
Add color
</button>
<button id="cm-remove">
Remove color
</button>
<button id="cm-zoomin">
Zoom in
</button>
<button id="cm-zoomout">
Zoom out
</button>
</span>
<ul id="colors-menu"> <ul id="colors-menu">
<li class="noshrink"><button title="Add Current Color To Palette" id="add-color-button">{{svg "./plus.svg" width="30" height="30"}}</button></li> <li class="noshrink"><button title="Add Current Color To Palette" id="add-color-button">{{svg "./plus.svg" width="30" height="30"}}</button></li>
</ul> </ul>