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

Made PixelGrid child of the Layer class

Browse Source
This commit is contained in:
unsettledgames 2021-11-12 00:09:20 +01:00
parent aed5f45e64
commit 07ed24cc6b
10 changed files with 124 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
js/EditorState.js
View File

@ -21,7 +21,7 @@ const EditorState = (() => {
document.getElementById("switch-mode-button").innerHTML = 'Switch to basic mode';
//turn pixel grid off
togglePixelGrid('off');
pixelGrid.togglePixelGrid('off');
}
//switch to basic mode
else {
@ -47,7 +47,7 @@ const EditorState = (() => {
pixelEditorMode = 'Basic';
document.getElementById("switch-mode-button").innerHTML = 'Switch to advanced mode';
togglePixelGrid('on');
pixelGrid.togglePixelGrid('on');
}
}

2
js/Settings.js
View File

@ -45,7 +45,7 @@ const Settings = (() => {
settings.numberOfHistoryStates = Util.getValue('setting-numberOfHistoryStates');
settings.pixelGridColour = Util.getValue('setting-pixelGridColour');
// Filling pixel grid again if colour changed
fillPixelGrid();
pixelGrid.fillPixelGrid();
//save settings object to cookie
var cookieValue = JSON.stringify(settings);

7
js/Startup.js
View File

@ -39,8 +39,6 @@ const Startup = (() => {
initLayers(width, height);
initPalette();
fillPixelGrid();
// Closing the "New Pixel dialogue"
Dialogue.closeDialogue();
// Updating the cursor of the current tool
@ -110,15 +108,14 @@ const Startup = (() => {
// Adding the checkerboard behind it
checkerBoard = new Checkerboard(width, height, null);
// Pixel grid
pixelGrid = new PixelGrid(width, height, "pixel-grid");
// Creating the vfx layer on top of everything
VFXLayer = new Layer(width, height, 'vfx-canvas');
// Tmp layer to draw previews on
TMPLayer = new Layer(width, height, 'tmp-canvas');
// Pixel grid
pixelGrid = new Layer(width, height, "pixel-grid");
// Setting the general canvasSize
canvasSize = currentLayer.canvasSize;

17
js/Tool.js
View File

@ -22,6 +22,7 @@ class Tool {
mainButton = undefined;
biggerButton = undefined;
smallerButton = undefined;
brushPreview = document.getElementById("brush-preview");
constructor (name, options) {
this.name = name;
@ -51,9 +52,9 @@ class Tool {
}
updateCursor() {
brushPreview.style.display = 'block';
brushPreview.style.width = this.currSize * zoom + 'px';
brushPreview.style.height = this.currSize * zoom + 'px';
this.brushPreview.style.display = 'block';
this.brushPreview.style.width = this.currSize * zoom + 'px';
this.brushPreview.style.height = this.currSize * zoom + 'px';
}
onMouseWheel(mousePos, mode) {}
@ -70,16 +71,16 @@ class Tool {
toSub = 0.5;
}
brushPreview.style.left = (Math.floor(cursorLocation[0] / zoom) * zoom + currentLayer.canvas.offsetLeft - this.currSize * zoom / 2 - zoom / 2 + toSub * zoom) + 'px';
brushPreview.style.top = (Math.floor(cursorLocation[1] / zoom) * zoom + currentLayer.canvas.offsetTop - this.currSize * zoom / 2 - zoom / 2 + toSub * zoom) + 'px';
this.brushPreview.style.left = (Math.floor(cursorLocation[0] / zoom) * zoom + currentLayer.canvas.offsetLeft - this.currSize * zoom / 2 - zoom / 2 + toSub * zoom) + 'px';
this.brushPreview.style.top = (Math.floor(cursorLocation[1] / zoom) * zoom + currentLayer.canvas.offsetTop - this.currSize * zoom / 2 - zoom / 2 + toSub * zoom) + 'px';
if (this.cursorType.type == 'html') {
if (cursorTarget.className == 'drawingCanvas'|| cursorTarget.className == 'drawingCanvas') {
brushPreview.style.visibility = 'visible';
this.brushPreview.style.visibility = 'visible';
canvasView.style.cursor = 'none';
}
else {
brushPreview.style.visibility = 'hidden';
this.brushPreview.style.visibility = 'hidden';
canvasView.style.cursor = 'default';
}
}
@ -90,7 +91,7 @@ class Tool {
this.mainButton.parentElement.classList.remove("selected");
this.isSelected = false;
brushPreview.style.visibility = 'hidden';
this.brushPreview.style.visibility = 'hidden';
canvasView.style.cursor = 'default';
}

93
js/_pixelGrid.js
View File

@ -1,93 +0,0 @@
// REFACTOR: inherit from Layer, override init method (call super as well)
// OPTIMIZABLE: only draw the grid for the current viewport. The grid should be refreshed
// everytime the user pans the view
// Start colour of the pixel grid (can be changed in the preferences)
let pixelGridColor = "#000000";
// Distance between one line and another in HTML pixels
let lineDistance = 11;
// 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;
function disablePixelGrid() {
pixelGridEnabled = false;
pixelGrid.canvas.style.display = "none";
}
function enablePixelGrid() {
pixelGridEnabled = true;
pixelGrid.canvas.style.display = "inline-block";
}
function repaintPixelGrid(factor) {
lineDistance += factor;
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");
//Set the state based on the passed newState variable, otherwise just toggle it
if (newState == 'on') pixelGridVisible = true;
else if (newState == 'off') pixelGridVisible = false;
else pixelGridVisible = !pixelGridVisible;
// If it was visible, I hide it
if (pixelGridVisible) {
button.innerHTML = "Hide pixel grid";
pixelGrid.canvas.style.display = "inline-block";
}
// Otherwise, I show it
else {
button.innerHTML = "Show pixel grid";
pixelGrid.canvas.style.display = "none";
}
}
/** Fills the pixelGridCanvas with the pixelgrid
*
*/
function fillPixelGrid() {
let context = pixelGrid.context;
let originalSize = layers[0].canvasSize;
// 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] * Math.round(lineDistance);
pixelGrid.canvas.height = originalSize[1] * Math.round(lineDistance);
context.strokeStyle = Settings.getCurrSettings().pixelGridColour;
// OPTIMIZABLE, could probably be a bit more elegant
// Draw horizontal lines
for (let i=0; i<pixelGrid.canvas.width / Math.round(lineDistance); i++) {
context.beginPath();
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 / Math.round(lineDistance); i++) {
context.beginPath();
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();
}
if (!pixelGridVisible) {
pixelGrid.canvas.style.display = 'none';
}
}

2
js/_resizeCanvas.js
View File

@ -141,7 +141,7 @@ function resizeCanvas(event, size, customData, saveHistory = true) {
// Regenerate the checkerboard
checkerBoard.fillCheckerboard();
fillPixelGrid();
pixelGrid.fillPixelGrid();
// Put the imageDatas in the right position
switch (rcPivot)
{

12
js/data/variables.js
View File

@ -3,11 +3,6 @@ var canvasSize; // REFACTOR: Canvas class / getCanvasSize method
var zoom = 7; // REFACTOR: EditorState class/IIFE? Leave this one for later
var lastMouseClickPos = [0,0]; // REFACTOR: Input IIFE via getter? <- probably editor state as it is changed by tools
//common elements
// REFACTOR: put brush and eyedropper preview in the respective tool implementations
// REFACTOR: this should be in ResizableTool
var brushPreview = document.getElementById("brush-preview");
// REFACTOR: File class?
var canvasView = document.getElementById("canvas-view");
@ -26,10 +21,7 @@ var TMPLayer;
// Pixel grid layer
// REFACTOR: File class
var pixelGrid;
// REFACTOR: I was thinking that the special layers (pixel grid, checkerboard ecc) could be an extension
// or a variatin of the standard Layer class? I wonder if we can use inheritance or something to
// recycle stuff
let pixelGrid;
// REFACTOR: File class
let checkerBoard;

100
js/layers/PixelGrid.js
View File

@ -0,0 +1,100 @@
// OPTIMIZABLE: render the grid only for the current viewport
class PixelGrid extends Layer {
// Start colour of the pixel grid (can be changed in the preferences)
pixelGridColor = "#000000";
// Distance between one line and another in HTML pixels
lineDistance = 11;
// The grid is not visible by default
pixelGridVisible = false;
// The grid is enabled, but is disabled in order to save performance with big sprites
pixelGridEnabled = true;
constructor(width, height, canvas, menuEntry) {
super(width, height, canvas, menuEntry);
this.initialize();
}
initialize() {
super.initialize();
this.fillPixelGrid();
}
disablePixelGrid() {
this.pixelGridEnabled = false;
this.canvas.style.display = "none";
}
enablePixelGrid() {
this.pixelGridEnabled = true;
this.canvas.style.display = "inline-block";
}
repaintPixelGrid(factor) {
this.lineDistance += factor;
this.fillPixelGrid();
}
/** Shows or hides the pixel grid depening on its current visibility
* (triggered by the show pixel grid button in the top menu)
*
*/
togglePixelGrid(newState) {
// Getting the button because I have to change its text
let button = document.getElementById("toggle-pixelgrid-button");
//Set the state based on the passed newState variable, otherwise just toggle it
if (newState == 'on') this.pixelGridVisible = true;
else if (newState == 'off') this.pixelGridVisible = false;
else this.pixelGridVisible = !this.pixelGridVisible;
// If it was visible, I hide it
if (this.pixelGridVisible) {
button.innerHTML = "Hide pixel grid";
this.canvas.style.display = "inline-block";
}
// Otherwise, I show it
else {
button.innerHTML = "Show pixel grid";
this.canvas.style.display = "none";
}
}
/** Fills the pixelGridCanvas with the pixelgrid
*
*/
fillPixelGrid() {
let originalSize = this.canvasSize;
// 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
this.canvas.width = originalSize[0] * Math.round(this.lineDistance);
this.canvas.height = originalSize[1] * Math.round(this.lineDistance);
this.context.strokeStyle = Settings.getCurrSettings().pixelGridColour;
// OPTIMIZABLE, could probably be a bit more elegant
// Draw horizontal lines
for (let i=0; i<this.canvas.width / Math.round(this.lineDistance); i++) {
this.context.beginPath();
this.context.moveTo(i * Math.round(this.lineDistance) + 0.5, 0);
this.context.lineTo(i * Math.round(this.lineDistance) + 0.5,
originalSize[1] * Math.round(this.lineDistance));
this.context.stroke();
this.context.closePath();
}
// Draw vertical lines
for (let i=0; i<this.canvas.height / Math.round(this.lineDistance); i++) {
this.context.beginPath();
this.context.moveTo(0, i * Math.round(this.lineDistance) + 0.5);
this.context.lineTo(originalSize[0] * Math.round(this.lineDistance),
i * Math.round(this.lineDistance) + 0.5);
this.context.stroke();
this.context.closePath();
}
if (!this.pixelGridVisible) {
this.canvas.style.display = 'none';
}
}
}

12
js/tools/ZoomTool.js
View File

@ -61,17 +61,17 @@ class ZoomTool extends Tool {
// Adjust pixel grid thickness
if (zoomed) {
if (zoom <= 7)
disablePixelGrid();
pixelGrid.disablePixelGrid();
else if (zoom >= 20 && mode == 'in') {
enablePixelGrid();
repaintPixelGrid((zoom - prevZoom) * 0.6);
pixelGrid.enablePixelGrid();
pixelGrid.repaintPixelGrid((zoom - prevZoom) * 0.6);
}
else if (prevZoom >= 20 && mode == 'out') {
enablePixelGrid();
repaintPixelGrid((zoom - prevZoom) * 0.6);
pixelGrid.enablePixelGrid();
pixelGrid.repaintPixelGrid((zoom - prevZoom) * 0.6);
}
else {
enablePixelGrid();
pixelGrid.enablePixelGrid();
}
}

2
views/main-menu.hbs
View File

@ -23,7 +23,7 @@
<li>
<button>View</button>
<ul>
<li><button id="toggle-pixelgrid-button" onclick="togglePixelGrid()">Show pixel grid</button></li>
<li><button id="toggle-pixelgrid-button" onclick="pixelGrid.togglePixelGrid()">Show pixel grid</button></li>
</ul>
</li>
<li>