mirror
/
pixel-editor
mirror of https://github.com/lospec/pixel-editor.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fixed #52 

The pixel grid is now disabled when the zoom level is too low; in addition, the thickness of the grid now changes depending on the zoom level.
This commit is contained in:
unsettledgames 2021-07-24 12:37:34 +02:00
parent 0a774978ef
commit 2ab45f0f66
5 changed files with 93 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
js/EditorState.js
View File

@ -1,8 +1,8 @@
const EditorState = (() => {
let pixelEditorMode = "Basic";
Events.on('click', 'switch-editor-mode-splash', function (e) {toggleMode();});
Events.on('click', 'switch-mode-button', function (e) {toggleMode();});
Events.on('click', 'switch-editor-mode-splash', chooseMode);
Events.on('click', 'switch-mode-button', toggleMode);
function getCurrentMode() {
return pixelEditorMode;
@ -10,18 +10,13 @@ const EditorState = (() => {
function switchMode(newMode) {
//switch to advanced mode
if (newMode == 'Advanced' && pixelEditorMode == 'Basic') {
// Switch to advanced ez pez lemon squez
document.getElementById('switch-mode-button').innerHTML = 'Switch to basic mode';
if (newMode == 'Advanced') {
// Show the layer menus
LayerList.getLayerListEntries().style.display = "inline-block";
document.getElementById('layer-button').style.display = 'inline-block';
// Hide the palette menu
document.getElementById('colors-menu').style.right = '200px'
//change splash text
document.querySelector('#sp-quickstart-container .mode-switcher').classList.add('advanced-mode');
pixelEditorMode = 'Advanced';
//turn pixel grid off
@ -30,7 +25,7 @@ const EditorState = (() => {
//switch to basic mode
else {
//if there is a current layer (a document is active)
if (currentLayer) {
if (Startup.documentCreated()) {
if (!confirm('Switching to basic mode will flatten all the visible layers. Are you sure you want to continue?')) {
return;
}
@ -41,9 +36,6 @@ const EditorState = (() => {
LayerList.flatten(true);
}
//change menu text
document.getElementById('switch-mode-button').innerHTML = 'Switch to advanced mode';
// Hide the layer menus
LayerList.getLayerListEntries().style.display = 'none';
document.getElementById('layer-button').style.display = 'none';
@ -51,14 +43,27 @@ const EditorState = (() => {
document.getElementById('colors-menu').style.display = 'flex';
// Move the palette menu
document.getElementById('colors-menu').style.right = '0px';
//change splash text
document.querySelector('#sp-quickstart-container .mode-switcher').classList.remove('advanced-mode');
pixelEditorMode = 'Basic';
togglePixelGrid('off');
togglePixelGrid('on');
}
}
function chooseMode() {
console.log("Here");
let prevMode = pixelEditorMode.toLowerCase();
if (pixelEditorMode === "Basic") {
pixelEditorMode = "Advanced";
}
else {
pixelEditorMode = "Basic";
}
//change splash text
document.querySelector('#sp-quickstart-container .mode-switcher').classList.remove(prevMode + '-mode');
document.querySelector('#sp-quickstart-container .mode-switcher').classList.add(pixelEditorMode.toLowerCase() + '-mode');
}
function toggleMode() {
if (pixelEditorMode == 'Advanced')

29
js/Startup.js
View File

@ -1,6 +1,7 @@
const Startup = (() => {
let firstPixel = true;
let editorMode = "Basic";
let splashPostfix = '';
Events.on('click', 'create-button', create, false);
@ -8,23 +9,16 @@ const Startup = (() => {
function create(isSplash) {
// If I'm creating from the splash menu, I append '-splash' so I get the corresponding values
if (isSplash) {
if (isSplash)
splashPostfix = '-splash';
}
else {
else
splashPostfix = '';
}
var width = Util.getValue('size-width' + splashPostfix);
var height = Util.getValue('size-height' + splashPostfix);
var selectedPalette = Util.getText('palette-button' + splashPostfix);
newPixel(width, height);
// If I'm not creating from the splash page, then this is not the first project I've created
if (!isSplash)
document.getElementById('new-pixel-warning').style.display = 'block';
resetInput();
//track google event
@ -38,7 +32,7 @@ const Startup = (() => {
* @param {*} height Start height of the canvas
* @param {*} fileContent If fileContent != null, then the newPixel is being called from the open menu
*/
function newPixel (width, height, fileContent = null) {
function newPixel (width, height, fileContent = null) {
// The palette is empty, at the beginning
ColorModule.resetPalette();
@ -57,9 +51,6 @@ const Startup = (() => {
// The user is now able to export the Pixel
document.getElementById('export-button').classList.remove('disabled');
// This is not the first Pixel anymore
firstPixel = false;
// Now, if I opened an LPE file
if (fileContent != null) {
loadFromLPE(fileContent);
@ -68,6 +59,11 @@ const Startup = (() => {
// Selecting the new one
layers[1].selectLayer();
}
console.log("Starting with mode " + EditorState.getCurrentMode());
EditorState.switchMode(EditorState.getCurrentMode());
// This is not the first Pixel anymore
firstPixel = false;
}
function initLayers(width, height) {
@ -246,10 +242,15 @@ const Startup = (() => {
return !firstPixel;
}
function splashEditorMode(mode) {
editorMode = mode;
}
return {
create,
newPixel,
newFromTemplate,
documentCreated
documentCreated,
splashEditorMode
}
})();

30
js/_changeZoom.js
View File

@ -4,13 +4,16 @@
*/
function changeZoom (direction, cursorLocation) {
// Computing current width and height
var oldWidth = canvasSize[0] * zoom;
var oldHeight = canvasSize[1] * zoom;
var newWidth, newHeight;
let oldWidth = canvasSize[0] * zoom;
let oldHeight = canvasSize[1] * zoom;
let newWidth, newHeight;
let prevZoom = zoom;
let zoomed = false;
//change zoom level
//if you want to zoom out, and the zoom isnt already at the smallest level
if (direction == 'out' && zoom > 1) {
zoomed = true;
zoom -= Math.ceil(zoom / 10);
newWidth = canvasSize[0] * zoom;
newHeight = canvasSize[1] * zoom;
@ -21,7 +24,8 @@ function changeZoom (direction, cursorLocation) {
layers[0].canvas.offsetTop + (oldHeight - newHeight) * cursorLocation[1]/oldWidth);
}
//if you want to zoom in
else if (direction == 'in' && zoom + Math.ceil(zoom/10) < window.innerHeight/4){
else if (direction == 'in' && zoom + Math.ceil(zoom/10) < window.innerHeight/4) {
zoomed = true;
zoom += Math.ceil(zoom/10);
newWidth = canvasSize[0] * zoom;
newHeight = canvasSize[1] * zoom;
@ -34,7 +38,23 @@ function changeZoom (direction, cursorLocation) {
//resize canvas
layers[0].resize();
// adjust brush size
currentTool.updateCursor();
// Adjust pixel grid thickness
if (zoomed) {
if (zoom <= 7)
disablePixelGrid();
else if (zoom >= 20 && direction == 'in') {
enablePixelGrid();
repaintPixelGrid(zoom - prevZoom);
}
else if ((prevZoom >= 20 && direction == 'out')) {
enablePixelGrid();
repaintPixelGrid(zoom - prevZoom);
}
else {
enablePixelGrid();
}
}
}

1
js/_colorPicker.js
View File

@ -501,7 +501,6 @@ function updateMiniSlider(hex) {
function updateMiniPickerSpectrum() {
let ctx = miniPickerCanvas.getContext('2d');
let hsv = new Color("hex", colourValue.value).hsv;
console.log("Spectrum hex: " + new Color("hex", colourValue.value).hex);
let white = new Color("hsv", hsv.h, 0, parseInt(miniPickerSlider.value)).rgb;
ctx.clearRect(0, 0, miniPickerCanvas.width, miniPickerCanvas.height);

40
js/_pixelGrid.js
View File

@ -4,15 +4,37 @@
let pixelGridColor = "#000000";
// Distance between one line and another in HTML pixels
let lineDistance = 12;
// The grid is visible by default
// The grid is not visible by default
let pixelGridVisible = false;
// The grid is enabled, but is disabled in order to save performance with big sprites
let pixelGridEnabled = true;
// Used to edit lineDistance depending on the zoom level
let zoomFactor = 1;
function disablePixelGrid() {
pixelGridEnabled = false;
pixelGrid.canvas.style.display = "none";
}
function enablePixelGrid() {
pixelGridEnabled = true;
pixelGrid.canvas.style.display = "inline-block";
}
function repaintPixelGrid(factor) {
lineDistance += factor;
console.log("Line distance: " + lineDistance + " zoom: " + zoom);
fillPixelGrid();
}
/** Shows or hides the pixel grid depening on its current visibility
* (triggered by the show pixel grid button in the top menu)
*
*/
function togglePixelGrid(newState) {
// Ignore the event if the grid is disabled
if (!pixelGridEnabled) return;
// Getting the button because I have to change its text
let button = document.getElementById("toggle-pixelgrid-button");
@ -42,26 +64,26 @@ function fillPixelGrid() {
// The pixelGridCanvas is lineDistance times bigger so that the lines don't take 1 canvas pixel
// (which would cover the whole canvas with the pixelGridColour), but they take 1/lineDistance canvas pixels
pixelGrid.canvas.width = originalSize[0] * lineDistance;
pixelGrid.canvas.height = originalSize[1] * lineDistance;
pixelGrid.canvas.width = originalSize[0] * Math.round(lineDistance);
pixelGrid.canvas.height = originalSize[1] * Math.round(lineDistance);
// OPTIMIZABLE, could probably be a bit more elegant
// Draw horizontal lines
for (let i=0; i<pixelGrid.canvas.width / lineDistance; i++) {
for (let i=0; i<pixelGrid.canvas.width / Math.round(lineDistance); i++) {
context.strokeStyle = settings.pixelGridColour;
context.beginPath();
context.moveTo(i * lineDistance + 0.5, 0);
context.lineTo(i * lineDistance + 0.5, originalSize[1] * lineDistance);
context.moveTo(i * Math.round(lineDistance) + 0.5, 0);
context.lineTo(i * Math.round(lineDistance) + 0.5, originalSize[1] * Math.round(lineDistance));
context.stroke();
context.closePath();
}
// Draw vertical lines
for (let i=0; i<pixelGrid.canvas.height / lineDistance; i++) {
for (let i=0; i<pixelGrid.canvas.height / Math.round(lineDistance); i++) {
context.beginPath();
context.moveTo(0, i * lineDistance + 0.5);
context.lineTo(originalSize[0] * lineDistance, i * lineDistance + 0.5);
context.moveTo(0, i * Math.round(lineDistance) + 0.5);
context.lineTo(originalSize[0] * Math.round(lineDistance), i * Math.round(lineDistance) + 0.5);
context.stroke();
context.closePath();
}