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

vertical symmetry + refactoring

Browse Source
This commit is contained in:
Marco Marinò 2022-01-29 11:45:47 +01:00
parent 43df37dc81
commit c9dd3644a4
11 changed files with 165 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
css/_canvas.scss
View File

@ -47,6 +47,11 @@
background: transparent;
}
#vertical-symmetric {
z-index: 6002;
background: transparent;
}
#tmp-canvas {
z-index: 5;
background: transparent;

2
js/File.js
View File

@ -11,6 +11,7 @@ class File {
TMPLayer = undefined;
pixelGrid = undefined;
hSymmetricLayer = undefined;
vSymmetricLayer = undefined;
checkerBoard = undefined
// Canvas resize attributes
@ -164,6 +165,7 @@ class File {
currFile.checkerBoard.fillCheckerboard();
currFile.pixelGrid.fillPixelGrid();
currFile.hSymmetricLayer.fillAxis();
currFile.vSymmetricLayer.fillAxis();
// Put the imageDatas in the right position
switch (this.rcPivot)
{

5
js/Settings.js
View File

@ -24,7 +24,8 @@ const Settings = (() => {
numberOfHistoryStates: 256,
maxColorsOnImportedImage: 128,
pixelGridColour: '#000000',
hAxisGridColour: '#FF0000'
hAxisGridColour: '#FF0000',
vAxisGridColour: '#0000FF',
};
}
else{
@ -46,10 +47,12 @@ const Settings = (() => {
settings.numberOfHistoryStates = Util.getValue('setting-numberOfHistoryStates');
settings.pixelGridColour = Util.getValue('setting-pixelGridColour');
settings.hAxisGridColour = Util.getValue('setting-hSymmetryColor');
settings.vAxisGridColour = Util.getValue('setting-vSymmetryColor');
// Filling pixel grid again if colour changed
Events.emit("refreshPixelGrid");
// Filling symmetric axes again if colour changed
Events.emit("refreshHorizontalAxis");
Events.emit("refreshVerticalAxis");
//save settings object to cookie
let cookieValue = JSON.stringify(settings);

5
js/Startup.js
View File

@ -108,9 +108,11 @@ const Startup = (() => {
currFile.pixelGrid = new PixelGrid(width, height, "pixel-grid");
// Horizontal symmetric layer
console.log("CREATING HSymmetryAxis");
currFile.hSymmetricLayer = new HSymmetryLayer(width, height, "horizontal-symmetric");
// Vertical symmetric layer
currFile.vSymmetricLayer = new VSymmetryLayer(width, height, "vertical-symmetric");
// Creating the vfx layer on top of everything
currFile.VFXLayer = new Layer(width, height, 'vfx-canvas');
// Tmp layer to draw previews on
@ -123,6 +125,7 @@ const Startup = (() => {
currFile.layers.push(currFile.TMPLayer);
currFile.layers.push(currFile.pixelGrid);
currFile.layers.push(currFile.hSymmetricLayer);
currFile.layers.push(currFile.vSymmetricLayer);
currFile.layers.push(currFile.VFXLayer);
}
}

2
js/layers/HSymmetryLayer.js
View File

@ -1,6 +1,4 @@
class HSymmetryLayer extends Layer {
// symmetry line color
axisColor = "#FF0000";
// is hidden && enabled
isEnabled = false;
// Distance between one line and another in HTML pixels

80
js/layers/VSymmetryLayer.js Normal file
View File

@ -0,0 +1,80 @@
class VSymmetryLayer extends Layer {
// is hidden && enabled
isEnabled = false;
// Distance between one line and another in HTML pixels
lineDistance = 10;
constructor(width, height, canvas, menuEntry) {
super(width, height, canvas, menuEntry);
this.initialize();
Events.onCustom("refreshVerticalAxis", this.fillAxis.bind(this));
}
initialize() {
super.initialize();
this.fillAxis();
}
// Enable or not
disableAxis() {
// get toggle h axis button
let toggleButton = document.getElementById("toggle-v-symmetry-button");
toggleButton.innerHTML = "Show Vertical Axis";
this.isEnabled = false;
this.canvas.style.display = "none";
}
enableAxis() {
// get toggle h axis button
let toggleButton = document.getElementById("toggle-v-symmetry-button");
toggleButton.innerHTML = "Hide Vertical Axis";
this.isEnabled = true;
this.canvas.style.display = "inline-block";
}
repaint(factor) {
this.lineDistance += factor;
this.fillAxis();
}
/**
* Shows or hides axis depending on its current visibility
* (triggered by the show h symmetry button in the top menu)
*/
toggleVAxis() {
console.log("toggleVAxis");
if (this.isEnabled) {
this.disableAxis();
} else {
this.enableAxis();
}
}
/**
* It fills the canvas
*/
fillAxis() {
let originalSize = currFile.canvasSize;
this.canvas.width = originalSize[0] * Math.round(this.lineDistance);
this.canvas.height = originalSize[1] * Math.round(this.lineDistance);
this.context.strokeStyle = Settings.getCurrSettings().vAxisGridColour;
// Draw horizontal axis
this.drawVAxis();
if (!this.isEnabled) {
this.canvas.style.display = 'none';
}
}
drawVAxis() {
// Get middle y
let midX = Math.round(this.canvas.width / 2);
this.context.beginPath();
this.context.moveTo(midX, 0);
this.context.lineTo(midX, this.canvas.height);
this.context.stroke();
this.context.closePath();
}
}

1
js/pixel-editor.js
View File

@ -28,6 +28,7 @@
//=include layers/Checkerboard.js
//=include layers/PixelGrid.js
//=include layers/HSymmetryLayer.js
//=include layers/VSymmetryLayer.js
/** TOOLS **/
//=include tools/DrawingTool.js

84
js/tools/BrushTool.js
View File

@ -27,52 +27,86 @@ class BrushTool extends ResizableTool {
this.currSize
);
// If Horizontal Symmetry mode is activated
// draw specular
let midX = (currFile.canvasSize[0] / 2);
let midY = (currFile.canvasSize[1] / 2);
let prevMousePosX = Math.floor(this.prevMousePos[0] / currFile.zoom);
let prevMousePosY = Math.floor(this.prevMousePos[1] / currFile.zoom);
let currMousePosX = Math.floor(this.currMousePos[0] / currFile.zoom);
let currMousePosY = Math.floor(this.currMousePos[1] / currFile.zoom);
let mirrorPrevX, mirrorPrevY, mirrorCurrentX, mirrorCurrentY;
if (currFile.hSymmetricLayer.isEnabled) {
// if the current mouse position is over the horizontal axis
let originalSize = currFile.canvasSize;
let midY = (originalSize[1] / 2);
let prevMousePosY = Math.floor(this.prevMousePos[1] / currFile.zoom);
let currMousePosY = Math.floor(this.currMousePos[1] / currFile.zoom);
console.log("midY: " + midY);
console.log("currMouseY: " + currMousePosY);
if (currMousePosY <= midY) {
console.log("Drawing over the horizontal axis");
let mirrorPrevY = Math.floor(midY + Math.abs(midY - prevMousePosY));
let mirrorCurrentY = Math.floor(midY + Math.abs(midY - currMousePosY));
mirrorPrevY = Math.floor(midY + Math.abs(midY - prevMousePosY));
mirrorCurrentY = Math.floor(midY + Math.abs(midY - currMousePosY));
this.mirrorDraw(mirrorPrevY, mirrorCurrentY);
} else {
console.log("Drawing under the horizontal axis");
let mirrorPrevY = Math.floor(midY - Math.abs(midY - prevMousePosY));
let mirrorCurrentY = Math.floor(midY - Math.abs(midY - currMousePosY));
mirrorPrevY = Math.floor(midY - Math.abs(midY - prevMousePosY));
mirrorCurrentY = Math.floor(midY - Math.abs(midY - currMousePosY));
this.mirrorDraw(mirrorPrevY, mirrorCurrentY);
}
this.mirrorDraw(
Math.floor(this.prevMousePos[0] / currFile.zoom),
mirrorPrevY,
Math.floor(this.currMousePos[0] / currFile.zoom),
mirrorCurrentY,
true, false
);
}
if (currFile.vSymmetricLayer.isEnabled) {
// console.log("midX => " + midX);
// console.log("currMouseX => " + currMousePosX);
// if the current mouse position is over the horizontal axis
if (currMousePosX <= midX) {
mirrorPrevX = Math.floor(midX + Math.abs(midX - prevMousePosX));
mirrorCurrentX = Math.floor(midX + Math.abs(midX - currMousePosX));
} else {
mirrorPrevX = Math.floor(midX - Math.abs(midX - prevMousePosX));
mirrorCurrentX = Math.floor(midX - Math.abs(midX - currMousePosX));
}
this.mirrorDraw(
mirrorPrevX,
Math.floor(this.prevMousePos[1] / currFile.zoom),
mirrorCurrentX,
Math.floor(this.currMousePos[1] / currFile.zoom),
false, true
);
}
if (currFile.hSymmetricLayer.isEnabled && currFile.vSymmetricLayer.isEnabled) {
// Based on current mouse position we can infer which quadrant is the remaining one
this.mirrorDraw(mirrorPrevX, mirrorPrevY, mirrorCurrentX, mirrorCurrentY, true, true);
}
}
currFile.currentLayer.updateLayerPreview();
}
mirrorDraw(mirrorPrevY, mirrorCurrentY) {
mirrorDraw(prevX, prevY, currX, currY, isHorizontal, isVertical) {
let horizontalFactor = (isHorizontal) ? 1 : 0;
let verticalFactor = (isVertical) ? 1 : 0;
if (this.currSize % 2 === 0) {
currFile.currentLayer.drawLine(
Math.floor(this.prevMousePos[0] / currFile.zoom),
Math.floor(mirrorPrevY),
Math.floor(this.currMousePos[0] / currFile.zoom),
Math.floor(mirrorCurrentY),
prevX,
prevY,
currX,
currY,
this.currSize
);
} else {
currFile.currentLayer.drawLine(
Math.floor(this.prevMousePos[0] / currFile.zoom),
Math.floor(mirrorPrevY - 1),
Math.floor(this.currMousePos[0] / currFile.zoom),
Math.floor(mirrorCurrentY - 1),
prevX - verticalFactor,
prevY - horizontalFactor,
currX - verticalFactor,
currY - horizontalFactor,
this.currSize
);
}

1
views/canvases.hbs
View File

@ -6,5 +6,6 @@
<canvas id="checkerboard" class = "drawingCanvas"></canvas>
<canvas id="pixel-grid" class = "drawingCanvas"></canvas>
<canvas id="horizontal-symmetric" class="drawingCanvas"></canvas>
<canvas id="vertical-symmetric" class="drawingCanvas"></canvas>
</div>
<div id="canvas-view-shadow"></div>

3
views/main-menu.hbs
View File

@ -24,7 +24,8 @@
<button>View</button>
<ul>
<li><button id="toggle-pixelgrid-button" onclick="currFile.pixelGrid.togglePixelGrid()">Show pixel grid</button></li>
<li><button id="toggle-h-symmetry-button" onclick="currFile.hSymmetricLayer.toggleHAxis()">Show Horizontal Symmetry</button></li>
<li><button id="toggle-h-symmetry-button" onclick="currFile.hSymmetricLayer.toggleHAxis()">Show Horizontal Axis</button></li>
<li><button id="toggle-v-symmetry-button" onclick="currFile.vSymmetricLayer.toggleVAxis()">Show Vertical Axis</button></li>
</ul>
</li>
<li>

9
views/popups/settings.hbs
View File

@ -13,10 +13,15 @@
<label for="setting-pixelGridColour">Colour of the pixel grid</label><input id="setting-pixelGridColour" value = "#0000FF" autocomplete="off"/>
</div>
<h2>H Symmetry Axis</h2>
<h2>Horizontal Axis</h2>
<div class = "settings-entry">
<label for="setting-hSymmetryColor">Colour of the horizontal axis</label><input id="setting-hSymmetryColor" value = "#0000FF" autocomplete="off"/>
<label for="setting-hSymmetryColor">Colour of the horizontal axis</label><input id="setting-hSymmetryColor" value = "#FF0000" autocomplete="off"/>
</div>
<h2>Vertical Axis</h2>
<div class = "settings-entry">
<label for="setting-vSymmetryColor">Colour of the vertical axis</label><input id="setting-vSymmetryColor" 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>