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

Implemented pixel grid

Browse Source 
Added settings for pixel grid, move settings to editor sub menu.
This commit is contained in:
unsettledgames 2020-09-26 12:32:31 +02:00
parent 034715fac8
commit 933b2919b4
3 changed files with 53 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
css/pixel-editor.scss
View File

@ -305,11 +305,17 @@ svg {
background: transparent;
}
#tmp-canvas {
#pixel-grid {
z-index: 3;
background: transparent;
}
#tmp-canvas {
z-index: 4;
background: transparent;
}
#vfx-canvas {
z-index: -5000;
background: transparent;
@ -855,9 +861,11 @@ svg {
color: #c0bfc1;
}
#settings-container {
.settings-entry {
display: flex;
align-items: baseline;
margin-top:10px;
label {
flex: 1;
}
@ -865,6 +873,7 @@ svg {
width: 90px !important;
display: block;
box-sizing: border-box;
float:right;
}
}

30
js/_pixelGrid.js
View File

@ -1,5 +1,33 @@
let pixelGridColor = "#0000FF";
let lineDistance = 12;
pixelGridCanvas = document.getElementById("pixel-grid");
function fillPixelGrid() {
let context = pixelGridCanvas.getContext("2d");
let originalSize = layers[0].canvasSize;
pixelGridCanvas.width = originalSize[0] * lineDistance;
pixelGridCanvas.height = originalSize[1] * lineDistance;
// OPTIMIZABLE, could probably be a bit more elegant
// Draw horizontal lines
for (let i=0; i<pixelGridCanvas.width / lineDistance; i++) {
context.strokeStyle = pixelGridColor;
context.beginPath();
context.moveTo(i * lineDistance + 0.5, 0);
context.lineTo(i * lineDistance + 0.5, originalSize[1] * lineDistance);
context.stroke();
context.closePath();
}
// Draw vertical lines
for (let i=0; i<pixelGridCanvas.height / lineDistance; i++) {
context.beginPath();
context.moveTo(0, i * lineDistance + 0.5);
context.lineTo(originalSize[0] * lineDistance, i * lineDistance + 0.5);
context.stroke();
context.closePath();
}
}

15
views/pixel-editor.hbs
View File

@ -84,13 +84,13 @@
<button>Editor</button>
<ul>
<li><button id="switch-mode-button">Switch to basic mode</button></li>
<li><button>Settings</button></li>
</ul>
</li>
<li>
<button>Help</button>
<ul>
<li><button>Settings</button></li>
<li><button>Help</button></li>
<li><button>About</button></li>
<li><button>Changelog</button></li>
@ -425,7 +425,18 @@
<h1>Settings</h1>
<div id="settings-container">
<label for="setting-numberOfHistoryStates">Number of History States</label> <input id="setting-numberOfHistoryStates" value="20" autocomplete="off" />
<h2>History</h2>
<div class = "settings-entry">
<label for="setting-numberOfHistoryStates">Number of History States</label> <input id="setting-numberOfHistoryStates" value="20" autocomplete="off" />
</div>
<h2>Pixel grid</h2>
<div class = "settings-entry">
<label for="setting-pixelGridLineDistance">Distance between pixel grid lines</label><input id="setting-pixelGridLineDistance" value="12" autocmplete="off"/>
</div>
<div class = "settings-entry">
<label for="setting-pixelGridColour">Colour of the pixel grid</label><input id="pixelGridColour" value = "#0000FF" autocomplete="off"/>
</div>
</div>
<p id="cookies-disabled-warning">Your browsers cookies are disabled, settings will be lost upon closing this page.</p>