From c9dd3644a454e179f0dee8161496484b6b681b72 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marco=20Marino=CC=80?= Date: Sat, 29 Jan 2022 11:45:47 +0100 Subject: [PATCH] vertical symmetry + refactoring --- css/_canvas.scss | 5 +++ js/File.js | 2 + js/Settings.js | 5 ++- js/Startup.js | 5 ++- js/layers/HSymmetryLayer.js | 2 - js/layers/VSymmetryLayer.js | 80 +++++++++++++++++++++++++++++++++++ js/pixel-editor.js | 1 + js/tools/BrushTool.js | 84 ++++++++++++++++++++++++++----------- views/canvases.hbs | 1 + views/main-menu.hbs | 3 +- views/popups/settings.hbs | 9 +++- 11 files changed, 165 insertions(+), 32 deletions(-) create mode 100644 js/layers/VSymmetryLayer.js diff --git a/css/_canvas.scss b/css/_canvas.scss index 1dba7fa..9a79f5a 100644 --- a/css/_canvas.scss +++ b/css/_canvas.scss @@ -47,6 +47,11 @@ background: transparent; } +#vertical-symmetric { + z-index: 6002; + background: transparent; +} + #tmp-canvas { z-index: 5; background: transparent; diff --git a/js/File.js b/js/File.js index 025820a..5ee3e30 100644 --- a/js/File.js +++ b/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) { diff --git a/js/Settings.js b/js/Settings.js index 608cad1..547dfc7 100644 --- a/js/Settings.js +++ b/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); diff --git a/js/Startup.js b/js/Startup.js index d07e051..13c7677 100644 --- a/js/Startup.js +++ b/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); } } diff --git a/js/layers/HSymmetryLayer.js b/js/layers/HSymmetryLayer.js index a75b1e9..bd98de0 100644 --- a/js/layers/HSymmetryLayer.js +++ b/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 diff --git a/js/layers/VSymmetryLayer.js b/js/layers/VSymmetryLayer.js new file mode 100644 index 0000000..601a4bd --- /dev/null +++ b/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(); + } +} \ No newline at end of file diff --git a/js/pixel-editor.js b/js/pixel-editor.js index 844fc64..81285b1 100644 --- a/js/pixel-editor.js +++ b/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 diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js index 12360d3..763f264 100644 --- a/js/tools/BrushTool.js +++ b/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 ); } diff --git a/views/canvases.hbs b/views/canvases.hbs index 9255a72..c2f6a6a 100644 --- a/views/canvases.hbs +++ b/views/canvases.hbs @@ -6,5 +6,6 @@ +
\ No newline at end of file diff --git a/views/main-menu.hbs b/views/main-menu.hbs index b994e7d..e214f43 100644 --- a/views/main-menu.hbs +++ b/views/main-menu.hbs @@ -24,7 +24,8 @@
  • diff --git a/views/popups/settings.hbs b/views/popups/settings.hbs index 3b907d6..b5483e7 100644 --- a/views/popups/settings.hbs +++ b/views/popups/settings.hbs @@ -13,10 +13,15 @@ -

    H Symmetry Axis

    +

    Horizontal Axis

    - +
    + +

    Vertical Axis

    +
    + +

    Your browsers cookies are disabled, settings will be lost upon closing this page.