vertical symmetry + refactoring

css/_canvas.scss

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

js/File.js

@@ -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)
         {

js/Settings.js

@@ -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);

js/Startup.js

@@ -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);
         }
     }

js/layers/HSymmetryLayer.js

@@ -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

js/layers/VSymmetryLayer.js

@@ -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();
+    }
+}

js/pixel-editor.js

@@ -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

js/tools/BrushTool.js

@@ -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
             );
         }

views/canvases.hbs

@@ -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>

views/main-menu.hbs

@@ -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>

views/popups/settings.hbs

@@ -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>