Made PixelGrid child of the Layer class
This commit is contained in:
unsettledgames
parent
aed5f45e64
commit
07ed24cc6b
|
|
@ -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');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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
17
js/Tool.js
|
|
@ -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';
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
}
|
||||
}
|
||||
|
|
@ -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)
|
||||
{
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue