From 466eb0580c8307f2d8cf9446d038983cce9d04c7 Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Tue, 21 Jul 2020 16:01:00 +0200 Subject: [PATCH 01/46] Started refactoring the code - Can now zoom without selecting the zom tool - Moved updateCursor to the tool class, deleted _updateCursor.js - Removed as many references to canvas as possible, removed every global reference to context - Added methods in Tool class to move the brush preview --- js/_addColorButton.js | 2 +- js/_drawLine.js | 2 - js/_mouseEvents.js | 95 ++++++++++++++++-------------------------- js/_newPixel.js | 7 +--- js/_tools.js | 34 +++++++++++++++ js/_updateCursor.js | 35 ---------------- js/_variables.js | 3 +- js/tools/_select.js | 1 + views/pixel-editor.hbs | 1 + 9 files changed, 77 insertions(+), 103 deletions(-) delete mode 100644 js/_updateCursor.js diff --git a/js/_addColorButton.js b/js/_addColorButton.js index 16f7c56..9da3169 100644 --- a/js/_addColorButton.js +++ b/js/_addColorButton.js @@ -44,7 +44,7 @@ on('click', 'add-color-button', function(){ //add new color and make it selected var addedColor = addColor(newColor); addedColor.classList.add('selected'); - context.fillStyle = '#' + newColor; + currentLayer.context.fillStyle = '#' + newColor; //add history state //saveHistoryState({type: 'addcolor', colorValue: addedColor.firstElementChild.jscolor.toString()}); diff --git a/js/_drawLine.js b/js/_drawLine.js index a91fbe3..e7ce712 100644 --- a/js/_drawLine.js +++ b/js/_drawLine.js @@ -30,7 +30,5 @@ function line(x0,y0,x1,y1, brushSize) { err +=dx; y0+=sy; } - - console.log(x0 + ", " + x1); } } \ No newline at end of file diff --git a/js/_mouseEvents.js b/js/_mouseEvents.js index d5d818a..46bf971 100644 --- a/js/_mouseEvents.js +++ b/js/_mouseEvents.js @@ -1,5 +1,5 @@ var currentMouseEvent; -var lastMousePos; +var lastMouseMovePos; //mousedown - start drawing window.addEventListener("mousedown", function (mouseEvent) { @@ -12,7 +12,7 @@ window.addEventListener("mousedown", function (mouseEvent) { //prevent right mouse clicks and such, which will open unwanted menus //mouseEvent.preventDefault(); - lastPos = getCursorPosition(mouseEvent); + lastMouseClickPos = getCursorPosition(mouseEvent); dragging = true; //left or right click ? @@ -176,23 +176,21 @@ function setPreviewPosition(preview, cursor, size){ //mouse is moving on canvas window.addEventListener("mousemove", draw, false); function draw (mouseEvent) { - lastMousePos = getCursorPosition(mouseEvent); + lastMouseMovePos = getCursorPosition(mouseEvent); // Saving the event in case something else needs it currentMouseEvent = mouseEvent; - var cursorLocation = lastMousePos; + var cursorLocation = lastMouseMovePos; //if a document hasnt yet been created or the current layer is locked, exit this function if (!documentCreated || dialogueOpen || !currentLayer.isVisible || currentLayer.isLocked) return; - + // Moving brush preview + currentTool.moveBrushPreview(cursorLocation); + // Hiding eyedropper, will be shown if it's needed eyedropperPreview.style.display = 'none'; if (currentTool.name == 'pencil') { - //move the brush preview - brushPreview.style.left = cursorLocation[0] + currentLayer.canvas.offsetLeft - tool.pencil.brushSize * zoom / 2 + 'px'; - brushPreview.style.top = cursorLocation[1] + currentLayer.canvas.offsetTop - tool.pencil.brushSize * zoom / 2 + 'px'; - //hide brush preview outside of canvas / canvas view if (mouseEvent.target.className == 'drawingCanvas'|| mouseEvent.target.className == 'drawingCanvas') brushPreview.style.visibility = 'visible'; @@ -202,13 +200,13 @@ function draw (mouseEvent) { //draw line to current pixel if (dragging) { if (mouseEvent.target.className == 'drawingCanvas' || mouseEvent.target.className == 'drawingCanvas') { - line(Math.floor(lastPos[0]/zoom),Math.floor(lastPos[1]/zoom),Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom), tool.pencil.brushSize); - lastPos = cursorLocation; + line(Math.floor(lastMouseClickPos[0]/zoom),Math.floor(lastMouseClickPos[1]/zoom),Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom), tool.pencil.brushSize); + lastMouseClickPos = cursorLocation; } } //get lightness value of color - var selectedColor = context.getImageData(Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom),1,1).data; + var selectedColor = currentLayer.context.getImageData(Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom),1,1).data; var colorLightness = Math.max(selectedColor[0],selectedColor[1],selectedColor[2]) //for the darkest 50% of colors, change the brush preview to dark mode @@ -219,11 +217,6 @@ function draw (mouseEvent) { } // Decided to write a different implementation in case of differences between the brush and the eraser tool else if (currentTool.name == 'eraser') { - // Uses the same preview as the brush - //move the brush preview - brushPreview.style.left = cursorLocation[0] + canvas.offsetLeft - currentTool.brushSize * zoom / 2 + 'px'; - brushPreview.style.top = cursorLocation[1] + canvas.offsetTop - currentTool.brushSize * zoom / 2 + 'px'; - //hide brush preview outside of canvas / canvas view if (mouseEvent.target.className == 'drawingCanvas' || mouseEvent.target.className == 'drawingCanvas') brushPreview.style.visibility = 'visible'; @@ -233,8 +226,8 @@ function draw (mouseEvent) { //draw line to current pixel if (dragging) { if (mouseEvent.target.className == 'drawingCanvas' || mouseEvent.target.className == 'drawingCanvas') { - line(Math.floor(lastPos[0]/zoom),Math.floor(lastPos[1]/zoom),Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom), currentTool.brushSize); - lastPos = cursorLocation; + line(Math.floor(lastMouseClickPos[0]/zoom),Math.floor(lastMouseClickPos[1]/zoom),Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom), currentTool.brushSize); + lastMouseClickPos = cursorLocation; } } @@ -242,10 +235,6 @@ function draw (mouseEvent) { } else if (currentTool.name == 'rectangle') { - //move the brush preview - brushPreview.style.left = cursorLocation[0] + currentLayer.canvas.offsetLeft - currentTool.brushSize * zoom / 2 + 'px'; - brushPreview.style.top = cursorLocation[1] + currentLayer.canvas.offsetTop - currentTool.brushSize * zoom / 2 + 'px'; - //hide brush preview outside of canvas / canvas view if (mouseEvent.target.className == 'drawingCanvas'|| mouseEvent.target.className == 'drawingCanvas') brushPreview.style.visibility = 'visible'; @@ -261,7 +250,7 @@ function draw (mouseEvent) { } else if (currentTool.name == 'pan' && dragging) { // Setting first layer position - setCanvasOffset(layers[0].canvas, layers[0].canvas.offsetLeft + (cursorLocation[0] - lastPos[0]), layers[0].canvas.offsetTop + (cursorLocation[1] - lastPos[1])); + setCanvasOffset(layers[0].canvas, layers[0].canvas.offsetLeft + (cursorLocation[0] - lastMouseClickPos[0]), layers[0].canvas.offsetTop + (cursorLocation[1] - lastMouseClickPos[1])); // Copying that position to the other layers for (let i=1; i 0) { - mode = 'out'; - } - - // Changing zoom and position of the first layer - changeZoom(layers[0], mode, getCursorPosition(mouseEvent)); - - for (let i=1; i 0) { + mode = 'out'; } + // Changing zoom and position of the first layer + changeZoom(layers[0], mode, getCursorPosition(mouseEvent)); + + for (let i=1; i +
From 81cc4c890006d9866a8370147771f92c8a26ef7f Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Tue, 21 Jul 2020 22:30:46 +0200 Subject: [PATCH 02/46] Moved setCanvasOffset to layer --- js/_addColor.js | 8 -------- js/_changeZoom.js | 4 ++-- js/_getCursorPosition.js | 22 +--------------------- js/_layer.js | 25 +++++++++++++++++++++++++ js/_setCanvasOffset.js | 23 ----------------------- 5 files changed, 28 insertions(+), 54 deletions(-) delete mode 100644 js/_setCanvasOffset.js diff --git a/js/_addColor.js b/js/_addColor.js index d8e5b62..ac95af0 100644 --- a/js/_addColor.js +++ b/js/_addColor.js @@ -4,7 +4,6 @@ let currentPalette = []; //input hex color string //returns list item element function addColor (newColor) { - //add # at beginning if not present if (newColor.charAt(0) != '#') newColor = '#' + newColor; @@ -19,13 +18,6 @@ function addColor (newColor) { button.addEventListener('mouseup', clickedColor); listItem.appendChild(button); - /* - //create input to hold color value - var colorValue = document.createElement("input"); - colorValue.classList.add("color-value"); - listItem.appendChild(colorValue); - */ - //insert new listItem element at the end of the colors menu (right before add button) colorsMenu.insertBefore(listItem, colorsMenu.children[colorsMenu.children.length-1]); diff --git a/js/_changeZoom.js b/js/_changeZoom.js index d05a5b1..4dc9eff 100644 --- a/js/_changeZoom.js +++ b/js/_changeZoom.js @@ -11,7 +11,7 @@ function changeZoom (layer, direction, cursorLocation) { newHeight = canvasSize[1] * zoom; //adjust canvas position - setCanvasOffset(layer.canvas, layer.canvas.offsetLeft + (oldWidth - newWidth) *cursorLocation[0]/oldWidth, layer.canvas.offsetTop + (oldHeight - newHeight) *cursorLocation[1]/oldWidth) + layer.setCanvasOffset(layer.canvas.offsetLeft + (oldWidth - newWidth) *cursorLocation[0]/oldWidth, layer.canvas.offsetTop + (oldHeight - newHeight) *cursorLocation[1]/oldWidth); } //if you want to zoom in else if (direction == 'in' && zoom + Math.ceil(zoom/10) < window.innerHeight/4){ @@ -20,7 +20,7 @@ function changeZoom (layer, direction, cursorLocation) { newHeight = canvasSize[1] * zoom; //adjust canvas position - setCanvasOffset(layer.canvas, layer.canvas.offsetLeft - Math.round((newWidth - oldWidth)*cursorLocation[0]/oldWidth), layer.canvas.offsetTop - Math.round((newHeight - oldHeight)*cursorLocation[1]/oldHeight)) + layer.setCanvasOffset(layer.canvas.offsetLeft - Math.round((newWidth - oldWidth)*cursorLocation[0]/oldWidth), layer.canvas.offsetTop - Math.round((newHeight - oldHeight)*cursorLocation[1]/oldHeight)); } //resize canvas diff --git a/js/_getCursorPosition.js b/js/_getCursorPosition.js index da23fd6..3c28662 100644 --- a/js/_getCursorPosition.js +++ b/js/_getCursorPosition.js @@ -16,24 +16,4 @@ function getCursorPosition(e) { y -= canvas.offsetTop; return [x,y]; -} - -//get cursor position relative to canvas -function getCursorPositionRelative(e, layer) { - var x; - var y; - - if (e.pageX != undefined && e.pageY != undefined) { - x = e.pageX; - y = e.pageY; - } - else { - x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; - y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; - } - - x -= layer.canvas.offsetLeft; - y -= layer.canvas.offsetTop; - - return [x,y]; -} +} \ No newline at end of file diff --git a/js/_layer.js b/js/_layer.js index a01c15e..1ca409b 100644 --- a/js/_layer.js +++ b/js/_layer.js @@ -160,6 +160,31 @@ class Layer { this.canvas.style.width = newWidth; this.canvas.style.height = newHeight; } + + setCanvasOffset (offsetLeft, offsetTop) { + //horizontal offset + var minXOffset = -this.canvasSize[0] * zoom + 164; + var maxXOffset = window.innerWidth - 148; + + if (offsetLeft < minXOffset) + this.canvas.style.left = minXOffset +'px'; + else if (offsetLeft > maxXOffset) + this.canvas.style.left = maxXOffset +'px'; + else + this.canvas.style.left = offsetLeft +'px'; + + //vertical offset + var minYOffset = -this.canvasSize[1] * zoom + 164; + var maxYOffset = window.innerHeight - 100; + + if (offsetTop < minYOffset) + this.canvas.style.top = minYOffset +'px'; + else if (offsetTop > maxYOffset) + this.canvas.style.top = maxYOffset +'px'; + else + this.canvas.style.top = offsetTop +'px'; + } + // Copies the otherCanvas' position and size copyData(otherCanvas) { this.canvas.style.width = otherCanvas.canvas.style.width; diff --git a/js/_setCanvasOffset.js b/js/_setCanvasOffset.js deleted file mode 100644 index 695551b..0000000 --- a/js/_setCanvasOffset.js +++ /dev/null @@ -1,23 +0,0 @@ -function setCanvasOffset (canvas, offsetLeft, offsetTop) { - //horizontal offset - var minXOffset = -canvasSize[0]*zoom+ 164; - var maxXOffset = window.innerWidth - 148; - - if (offsetLeft < minXOffset) - canvas.style.left = minXOffset +'px'; - else if (offsetLeft > maxXOffset) - canvas.style.left = maxXOffset +'px'; - else - canvas.style.left = offsetLeft +'px'; - - //vertical offset - var minYOffset = -canvasSize[1]*zoom + 164; - var maxYOffset = window.innerHeight-100; - - if (offsetTop < minYOffset) - canvas.style.top = minYOffset +'px'; - else if (offsetTop > maxYOffset) - canvas.style.top = maxYOffset +'px'; - else - canvas.style.top = offsetTop +'px'; -} From d14deeb761fc38b3e0aecea039aacbc508495754 Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Tue, 21 Jul 2020 23:36:12 +0200 Subject: [PATCH 03/46] Tried to refactor more, snapped the brush preview to the pixel grid --- js/_copyPaste.js | 8 -------- js/_getCursorPosition.js | 4 +++- js/_rectangle.js | 2 -- js/_tools.js | 4 ++-- 4 files changed, 5 insertions(+), 13 deletions(-) diff --git a/js/_copyPaste.js b/js/_copyPaste.js index b3b27aa..90e2a70 100644 --- a/js/_copyPaste.js +++ b/js/_copyPaste.js @@ -6,9 +6,6 @@ let copiedStartY; let copiedEndX; let copiedEndY; -// BUG: when merging tmp layer to currentLayer there are offset problems -// FIX: maybe copy the entire tmp layer and paste it so that the merging happens at 0,0 - function copySelection() { copiedEndX = endX; copiedEndY = endY; @@ -65,9 +62,4 @@ function cutSelectionTool() { clipboardData = currentLayer.context.getImageData(startX, startY, endX - startX + 1, endY - startY + 1); currentLayer.context.clearRect(startX - 0.5, startY - 0.5, endX - startX + 1, endY - startY + 1); } - - // Moving those pixels from the current layer to the tmp layer - //TMPLayer.context.putImageData(imageDataToMove, startX + 1, startY); - - //originalDataPosition = [currentPos[0], currentPos[1]]; } \ No newline at end of file diff --git a/js/_getCursorPosition.js b/js/_getCursorPosition.js index 3c28662..d4addcc 100644 --- a/js/_getCursorPosition.js +++ b/js/_getCursorPosition.js @@ -6,6 +6,8 @@ function getCursorPosition(e) { if (e.pageX != undefined && e.pageY != undefined) { x = e.pageX; y = e.pageY; + + console.log("passato di qui"); } else { x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; @@ -15,5 +17,5 @@ function getCursorPosition(e) { x -= canvas.offsetLeft; y -= canvas.offsetTop; - return [x,y]; + return [Math.round(x), Math.round(y)]; } \ No newline at end of file diff --git a/js/_rectangle.js b/js/_rectangle.js index 63fc6b0..516f730 100644 --- a/js/_rectangle.js +++ b/js/_rectangle.js @@ -53,8 +53,6 @@ function endRectDrawing(mouseEvent) { startRectY = tmp; } - let hexColor = hexToRgb(currentLayer.context.fillStyle); - // Resetting this isDrawingRect = false; // Drawing the rect diff --git a/js/_tools.js b/js/_tools.js index 25bb839..335c09a 100644 --- a/js/_tools.js +++ b/js/_tools.js @@ -95,8 +95,8 @@ class Tool { } moveBrushPreview(cursorLocation) { - brushPreview.style.left = cursorLocation[0] + currentLayer.canvas.offsetLeft - this.currentBrushSize * zoom / 2 + 'px'; - brushPreview.style.top = cursorLocation[1] + currentLayer.canvas.offsetTop - this.currentBrushSize * zoom / 2 + 'px'; + brushPreview.style.left = (Math.ceil(cursorLocation[0] / zoom) * zoom + currentLayer.canvas.offsetLeft - this.currentBrushSize * zoom / 2 - zoom / 2) + 'px'; + brushPreview.style.top = (Math.ceil(cursorLocation[1] / zoom) * zoom + currentLayer.canvas.offsetTop - this.currentBrushSize * zoom / 2 - zoom / 2) + 'px'; } } From 1e6f719f50d343c79d1b656c0e7484bbebd3753d Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Wed, 22 Jul 2020 23:29:27 +0200 Subject: [PATCH 04/46] Started resize canvas interface --- js/_resizeCanvas.js | 29 +++++++++++++++++++++++++++++ js/pixel-editor.js | 1 + views/pixel-editor.hbs | 33 ++++++++++++++++++++++++++++++++- 3 files changed, 62 insertions(+), 1 deletion(-) create mode 100644 js/_resizeCanvas.js diff --git a/js/_resizeCanvas.js b/js/_resizeCanvas.js new file mode 100644 index 0000000..16cf7be --- /dev/null +++ b/js/_resizeCanvas.js @@ -0,0 +1,29 @@ +let resizeCanvasContainer = document.getElementById("resize-canvas"); + +function openResizeCanvasWindow() { + showDialogue('resize-canvas'); +} + +// Use a dialogue + // Let the user specify data + // Borders + // Pivot + // Apply the new sizing + // Move the images on the layers to fit what the user actually decided + +// Function to handle dropdown menu for pivots + // Open when clicking on the button + // Save the chosen pivot + // Close the menu + +// Function to retrieve data from the input field + // Store the data in the form into variables + // Call the function to resize the canvases + +// Function to actually resize the canvases + // Save all imageDatas + // Resize the canvases + // Clear the canvases + +// Function to place the imageDatas as specified in the pivot section + // Put the imageDatas in the right position \ No newline at end of file diff --git a/js/pixel-editor.js b/js/pixel-editor.js index 3b05c3e..2ca88a9 100644 --- a/js/pixel-editor.js +++ b/js/pixel-editor.js @@ -44,6 +44,7 @@ //=include _checkerboard.js //=include _layer.js //=include _copyPaste.js +//=include _resizeCanvas.js /**load file**/ //=include _loadImage.js diff --git a/views/pixel-editor.hbs b/views/pixel-editor.hbs index c0898d1..1796897 100644 --- a/views/pixel-editor.hbs +++ b/views/pixel-editor.hbs @@ -52,6 +52,8 @@
    • +
      • +
    @@ -218,7 +220,8 @@ {{svg "adjust.svg" width="20" height="20" }} -
    +
    +

    New Pixel

    @@ -246,6 +249,34 @@
    + +
    + +

    Resize canvas

    + + +

    Choose pivot:

    + + + + + +

    Borders

    + Left: + Right: + Top: + Bottom: +

    Help

    From f6104c514c5c9abd3521c41c243141ae6db6a710 Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Fri, 11 Sep 2020 13:19:14 +0200 Subject: [PATCH 05/46] Styled pivots, started styling borders menu --- css/pixel-editor.scss | 53 ++++++++++++++++++++++++++++++++++++++++++ views/pixel-editor.hbs | 49 +++++++++++++++++++++++--------------- 2 files changed, 83 insertions(+), 19 deletions(-) diff --git a/css/pixel-editor.scss b/css/pixel-editor.scss index 201d947..906984d 100644 --- a/css/pixel-editor.scss +++ b/css/pixel-editor.scss @@ -919,6 +919,59 @@ svg { display:none; } +#pivot-menu { + position: relative; + display:inline-flex; + flex-wrap:wrap; + vertical-align:middle; + text-align:center; + width:150px; + + button { + margin-right:10px; + margin-bottom:10px; + position:relative; + width:40px; + height:40px; + background:color(menu, background); + border:none; + + path { + fill:color(menu, foreground); + } + transition: background 250ms ease-in-out, + transform 150ms ease; + -webkit-appearance: none; + -moz-appearance: none; + } + + button:hover, + button:focus { + background-color: color(base, foreground); + path { + fill:color(base, foreground, bold); + } + border: 2px solid color(base, foreground); + } + button:active { + transform: scale(0.95); + } +} + +#borders-menu { + display:flex; + position:relative; + flex-wrap: wrap; + width:200px; + padding:5px; + vertical-align:middle; + + input { + width:10px; + height:10px; + } +} + #compatibility-warning { display: flex; justify-content: center; diff --git a/views/pixel-editor.hbs b/views/pixel-editor.hbs index 1796897..a3333b0 100644 --- a/views/pixel-editor.hbs +++ b/views/pixel-editor.hbs @@ -254,28 +254,39 @@

    Resize canvas

    - -

    Choose pivot:

    - - - + + + + + + + + + + + +

    Borders

    - Left: - Right: - Top: - Bottom: + + + Left: + + + + Right: + + + + Top: + + + + Bottom: + + +
    From 2da7e192e80c3a69358e9e3069d2979e14f8beb4 Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Sat, 12 Sep 2020 11:04:00 +0200 Subject: [PATCH 06/46] Finished styling canvas resize menu --- css/pixel-editor.scss | 49 +++++++++++++++++++++++++++++++++++++++--- views/pixel-editor.hbs | 21 +++++++++--------- 2 files changed, 56 insertions(+), 14 deletions(-) diff --git a/css/pixel-editor.scss b/css/pixel-editor.scss index 906984d..64d8115 100644 --- a/css/pixel-editor.scss +++ b/css/pixel-editor.scss @@ -919,6 +919,12 @@ svg { display:none; } +#resize-canvas { + display:flex; + position:relative; + flex-wrap:wrap; +} + #pivot-menu { position: relative; display:inline-flex; @@ -939,7 +945,7 @@ svg { path { fill:color(menu, foreground); } - transition: background 250ms ease-in-out, + transition: background 150ms ease-in-out, transform 150ms ease; -webkit-appearance: none; -moz-appearance: none; @@ -947,6 +953,7 @@ svg { button:hover, button:focus { + cursor:pointer; background-color: color(base, foreground); path { fill:color(base, foreground, bold); @@ -962,14 +969,50 @@ svg { display:flex; position:relative; flex-wrap: wrap; - width:200px; - padding:5px; + width:250px; + float:right; vertical-align:middle; + font-size:15px; + left:10px; + text-align:center; input { + position:relative; + margin-left:10px; width:10px; height:10px; } + + h2 { + position:relative; + display:inline-block; + } + + span { + padding-right:10px; + float:left; + position:relative; + display: flex; + vertical-align:middle; + height:40px; + } +} + +#resize-canvas-confirm { + background: color(button); + border: none; + font-size:18px; + border-radius: 4px; + color: color(button, foreground); + padding: 10px 20px; + cursor: pointer; + margin: 0 auto; + position:relative; + top:10px; + display: block; + &:hover { + background: color(button, background, hover); + } } #compatibility-warning { diff --git a/views/pixel-editor.hbs b/views/pixel-editor.hbs index a3333b0..533ff8f 100644 --- a/views/pixel-editor.hbs +++ b/views/pixel-editor.hbs @@ -266,27 +266,26 @@ - -

    Borders

    - Left: + Left: - + - Right: + Right: - + - Top: + Top: - + - Bottom: + Bottom: - - + + +
    From a56c9576a94308711893dc18683193668b2f80f1 Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Sat, 12 Sep 2020 11:45:27 +0200 Subject: [PATCH 07/46] Fixed mode switch bug --- js/_editorMode.js | 3 --- js/_layer.js | 3 ++- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/js/_editorMode.js b/js/_editorMode.js index 0b87076..e89626c 100644 --- a/js/_editorMode.js +++ b/js/_editorMode.js @@ -26,11 +26,8 @@ function switchMode(currentMode, mustConfirm = true) { //switch to basic mode else { - - //if there is a current layer (a document is active) if (currentLayer) { - //confirm with user before flattening image if (mustConfirm ) { if (!confirm('Switching to basic mode will flatten all the visible layers. Are you sure you want to continue?')) { diff --git a/js/_layer.js b/js/_layer.js index c37684e..d2bc82a 100644 --- a/js/_layer.js +++ b/js/_layer.js @@ -244,9 +244,10 @@ class Layer { layer.menuEntry.classList.add("selected-layer"); currentLayer = layer; } - +/* canvas = currentLayer.canvas; context = currentLayer.context; +*/ } toggleLock() { From d8cfd14ded163a9449b119ccce431f6f8e1e4681 Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Sun, 13 Sep 2020 11:21:23 +0200 Subject: [PATCH 08/46] Started handling pivot buttons --- css/pixel-editor.scss | 2 +- js/_getCursorPosition.js | 2 -- js/_resizeCanvas.js | 17 +++++++++++++++++ views/pixel-editor.hbs | 18 +++++++++--------- 4 files changed, 27 insertions(+), 12 deletions(-) diff --git a/css/pixel-editor.scss b/css/pixel-editor.scss index c78a388..8602d08 100644 --- a/css/pixel-editor.scss +++ b/css/pixel-editor.scss @@ -967,7 +967,7 @@ svg { position:relative; width:40px; height:40px; - background:color(menu, background); + background-color:color(base, background); border:none; path { diff --git a/js/_getCursorPosition.js b/js/_getCursorPosition.js index d4addcc..9a0d1d1 100644 --- a/js/_getCursorPosition.js +++ b/js/_getCursorPosition.js @@ -6,8 +6,6 @@ function getCursorPosition(e) { if (e.pageX != undefined && e.pageY != undefined) { x = e.pageX; y = e.pageY; - - console.log("passato di qui"); } else { x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; diff --git a/js/_resizeCanvas.js b/js/_resizeCanvas.js index 16cf7be..a1eed54 100644 --- a/js/_resizeCanvas.js +++ b/js/_resizeCanvas.js @@ -2,6 +2,23 @@ let resizeCanvasContainer = document.getElementById("resize-canvas"); function openResizeCanvasWindow() { showDialogue('resize-canvas'); + console.log("aperta"); + initButtons(); +} + +function initButtons() { + let buttons = document.getElementsByClassName("pivot-button"); + + console.log("length: " + buttons.length); + + for (let i=0; i - - - - - - - - - + + + + + + + + + From 3cf72dd9280af10448ed2a8f89c7e3078db59f9f Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Sun, 13 Sep 2020 11:58:46 +0200 Subject: [PATCH 09/46] Added input fetching and validation --- css/pixel-editor.scss | 14 +++++++++-- js/_resizeCanvas.js | 55 +++++++++++++++++++++++++++--------------- views/pixel-editor.hbs | 12 ++++++--- 3 files changed, 55 insertions(+), 26 deletions(-) diff --git a/css/pixel-editor.scss b/css/pixel-editor.scss index 8602d08..b0e05d1 100644 --- a/css/pixel-editor.scss +++ b/css/pixel-editor.scss @@ -1007,10 +1007,20 @@ svg { input { position:relative; margin-left:10px; - width:10px; - height:10px; + height:10px; + width:20px; } + input::-webkit-outer-spin-button, + input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; + } + /* Firefox */ + input[type=number] { + -moz-appearance: textfield; + } + h2 { position:relative; display:inline-block; diff --git a/js/_resizeCanvas.js b/js/_resizeCanvas.js index a1eed54..7159d35 100644 --- a/js/_resizeCanvas.js +++ b/js/_resizeCanvas.js @@ -1,46 +1,61 @@ let resizeCanvasContainer = document.getElementById("resize-canvas"); +let pivot = "middle"; +let resizeCanvasInitialized = false; +let borders = {left: 0, right: 0, top: 0, bottom: 0}; function openResizeCanvasWindow() { + if (!resizeCanvasInitialized) { + resizeCanvasInitialized = true; + initResizeCanvasInputs(); + } showDialogue('resize-canvas'); - console.log("aperta"); - initButtons(); } -function initButtons() { +function initResizeCanvasInputs() { let buttons = document.getElementsByClassName("pivot-button"); - console.log("length: " + buttons.length); - for (let i=0; i - Left: + Left: - Right: + Right: - Top: + Top: - Bottom: + Bottom: From 9c15a099758f8546b9d14474e3b94e912e06998a Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Sun, 13 Sep 2020 12:11:08 +0200 Subject: [PATCH 10/46] Added saving layers, must test canvas resizing --- js/_resizeCanvas.js | 37 +++++++++++++++++++++++-------------- 1 file changed, 23 insertions(+), 14 deletions(-) diff --git a/js/_resizeCanvas.js b/js/_resizeCanvas.js index 7159d35..672cbe1 100644 --- a/js/_resizeCanvas.js +++ b/js/_resizeCanvas.js @@ -22,10 +22,31 @@ function initResizeCanvasInputs() { } function resizeCanvas(event) { - resizeCanvasUpdateBorders(); + let imageDatas = []; + rcUpdateBorders(); + + // Save all imageDatas + for (let i=0; i Date: Sun, 13 Sep 2020 22:31:00 +0200 Subject: [PATCH 11/46] Updated readme --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 614b7d5..7a44d80 100644 --- a/README.md +++ b/README.md @@ -20,6 +20,7 @@ Suggestions / Planned features: - Move colours in palette editor - Duplicate layer - Hide non-hovered layers +- Symmetry options - Custom color picker - custom code without dependencies From 5e2a3e46e169f443044bb6901ecd5d03a9d2ec22 Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Tue, 15 Sep 2020 11:56:05 +0200 Subject: [PATCH 12/46] Finished basic canvas resizing Must test pivots for negative values --- css/pixel-editor.scss | 61 +++++++++++++------- js/_resizeCanvas.js | 125 ++++++++++++++++++++++++++++++++++++++--- views/pixel-editor.hbs | 59 ++++++++++++------- 3 files changed, 195 insertions(+), 50 deletions(-) diff --git a/css/pixel-editor.scss b/css/pixel-editor.scss index b0e05d1..557832e 100644 --- a/css/pixel-editor.scss +++ b/css/pixel-editor.scss @@ -959,19 +959,20 @@ svg { flex-wrap:wrap; vertical-align:middle; text-align:center; - width:150px; + width:130px; + float:left; button { margin-right:10px; margin-bottom:10px; position:relative; - width:40px; - height:40px; - background-color:color(base, background); - border:none; + width:32px; + height:32px; + background:$basehover; + border:none; path { - fill:color(menu, foreground); + fill:$basehovericon; } transition: background 150ms ease-in-out, transform 150ms ease; @@ -980,11 +981,12 @@ svg { } button:hover, - button:focus { + button:focus, + button.rc-selected-pivot { cursor:pointer; - background-color: color(base, foreground); + background-color: $baseicon; path { - fill:color(base, foreground, bold); + fill:$basehovericonhover; } border: 2px solid color(base, foreground); } @@ -993,13 +995,11 @@ svg { } } -#borders-menu { +#borders-menu, #rc-size-menu { display:flex; position:relative; flex-wrap: wrap; width:250px; - float:right; - vertical-align:middle; font-size:15px; left:10px; text-align:center; @@ -1007,8 +1007,9 @@ svg { input { position:relative; margin-left:10px; - height:10px; - width:20px; + height:15px; + width:40px; + padding:8px; } input::-webkit-outer-spin-button, @@ -1021,21 +1022,39 @@ svg { -moz-appearance: textfield; } - h2 { - position:relative; - display:inline-block; - } - span { padding-right:10px; float:left; position:relative; - display: flex; vertical-align:middle; - height:40px; + height:40px; + width:100px; + display: inline-flex; + align-items: center; } } +#rc-size-menu { + span { + width:115px; + } +} + +#borders-menu { + width:400px; + justify-content: center; + + div { + float: none; + width: 330px; + padding-left:50px; + + span { + padding-right:20px; + } + } +} + #resize-canvas-confirm { background: color(button); border: none; diff --git a/js/_resizeCanvas.js b/js/_resizeCanvas.js index 672cbe1..2e0460c 100644 --- a/js/_resizeCanvas.js +++ b/js/_resizeCanvas.js @@ -1,5 +1,6 @@ let resizeCanvasContainer = document.getElementById("resize-canvas"); let pivot = "middle"; +let currentPivotObject; let resizeCanvasInitialized = false; let borders = {left: 0, right: 0, top: 0, bottom: 0}; @@ -16,14 +17,61 @@ function initResizeCanvasInputs() { for (let i=0; i{{svg "arrows/top.svg" width="20" height="20"}} - + + + +

    Size

    +
    + + Width: + + + + Height: + +
    +     - - Left: - - - - Right: - - - - Top: - - - - Bottom: - - +

    Borders offsets

    +
    + + Left: + + + + Right: + + + + Top: + + + + Bottom: + +
    From 663b714b46f350feae58375793ce0555786d59f9 Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Tue, 15 Sep 2020 12:12:35 +0200 Subject: [PATCH 13/46] Updated readme --- README.md | 20 +++++++++++++------- css/pixel-editor.scss | 26 ++++++++++++++++++++++++-- js/_resizeCanvas.js | 9 ++------- 3 files changed, 39 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 7a44d80..fa561a1 100644 --- a/README.md +++ b/README.md @@ -14,12 +14,10 @@ Suggestions / Planned features: - Line tool - Resize canvas -- Snap brush preview to pixel grid -- Move selection with arrows +- Resize sprite - Load palette from LPE file -- Move colours in palette editor +- Move colours in (advanced) palette editor - Duplicate layer -- Hide non-hovered layers - Symmetry options - Custom color picker @@ -33,9 +31,6 @@ Suggestions / Planned features: - Stack colors when too many - Fix popups -- Show colors which would need to be added to palette - -- Palette option remove unused colors - Pixel Grid - Another currentLayer.canvas - Must be rescaled each zoom @@ -43,6 +38,17 @@ Suggestions / Planned features: - Possibly add collaborate function - Bug fix - Alt + scroll broken + +- Polish: + - Show colors which would need to be added to palette + - Warning windows for wrong inputs + - Hide non-hovered layers + - Snap brush preview to pixel grid + - Palette option remove unused colors + - Move selection with arrows + - Update pivot buttons when resizing canvas + - Update borders by dragging the canvas' edges with the mouse when resizing canvas + - Move the canvases so they're centered after resizing the canvas (maybe a .center() method in layer class) ## How to Contribute diff --git a/css/pixel-editor.scss b/css/pixel-editor.scss index 557832e..97ba31b 100644 --- a/css/pixel-editor.scss +++ b/css/pixel-editor.scss @@ -974,8 +974,8 @@ svg { path { fill:$basehovericon; } - transition: background 150ms ease-in-out, - transform 150ms ease; + transition: background 100ms ease-in-out, + transform 100ms ease; -webkit-appearance: none; -moz-appearance: none; } @@ -1004,6 +1004,28 @@ svg { left:10px; text-align:center; + button { + background:$basehover; + border:none; + + color: $basehovericon; + transition: background 100ms ease-in-out, + transform 100ms ease; + -webkit-appearance: none; + -moz-appearance: none; + } + + button:hover, + button:focus { + cursor:pointer; + background-color: $baseicon; + color:$basehovericonhover; + border: 2px solid color(base, foreground); + } + button:active { + transform: scale(0.95); + } + input { position:relative; margin-left:10px; diff --git a/js/_resizeCanvas.js b/js/_resizeCanvas.js index 2e0460c..cbdd56b 100644 --- a/js/_resizeCanvas.js +++ b/js/_resizeCanvas.js @@ -45,8 +45,8 @@ function changedBorder(event) { } function changedSize(event) { - let widthOffset = document.getElementById("rc-width").value - layers[0].canvasSize[0]; - let heightOffset = document.getElementById("rc-height").value - layers[0].canvasSize[1]; + let widthOffset = Math.abs(document.getElementById("rc-width").value) - layers[0].canvasSize[0]; + let heightOffset = Math.abs(document.getElementById("rc-height").value) - layers[0].canvasSize[1]; let left = Math.round(widthOffset / 2); let right = widthOffset - left; @@ -139,11 +139,6 @@ function resizeCanvas(event) { break; } - /* - leftOffset = Math.abs(leftOffset); - topOffset = Math.abs(topOffset); - */ - for (let i=0; i Date: Tue, 15 Sep 2020 13:06:31 +0200 Subject: [PATCH 14/46] Added history states for canvas resizing Must fix bug that happens when creating a new layer after resizing the canvas --- js/_getCursorPosition.js | 4 ++-- js/_history.js | 29 +++++++++++++++++++++++++++++ js/_layer.js | 16 +++++++++------- js/_resizeCanvas.js | 27 ++++++++++++++++++++++++--- js/_resizeSprite.js | 6 ++++++ js/pixel-editor.js | 1 + 6 files changed, 71 insertions(+), 12 deletions(-) create mode 100644 js/_resizeSprite.js diff --git a/js/_getCursorPosition.js b/js/_getCursorPosition.js index 9a0d1d1..0452e16 100644 --- a/js/_getCursorPosition.js +++ b/js/_getCursorPosition.js @@ -12,8 +12,8 @@ function getCursorPosition(e) { y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; } - x -= canvas.offsetLeft; - y -= canvas.offsetTop; + x -= currentLayer.canvas.offsetLeft; + y -= currentLayer.canvas.offsetTop; return [Math.round(x), Math.round(y)]; } \ No newline at end of file diff --git a/js/_history.js b/js/_history.js index f1dad5c..017d451 100644 --- a/js/_history.js +++ b/js/_history.js @@ -3,6 +3,35 @@ var redoStates = []; const undoLogStyle = 'background: #87ff1c; color: black; padding: 5px;'; +function HistoryStateResizeCanvas(newSize, oldSize, imageDatas) { + this.oldSize = oldSize; + this.newSize = newSize; + this.imageDatas = imageDatas; + + this.undo = function() { + let dataIndex = 0; + console.log("breakpoint"); + // Resizing the canvas + resizeCanvas(null, oldSize); + // Putting the image datas + for (let i=0; i Date: Wed, 16 Sep 2020 12:43:51 +0200 Subject: [PATCH 15/46] Fixed issue #18 --- js/_history.js | 2 + js/_mouseEvents.js | 305 +++++++++++++++++++++++---------------------- 2 files changed, 156 insertions(+), 151 deletions(-) diff --git a/js/_history.js b/js/_history.js index 017d451..881e373 100644 --- a/js/_history.js +++ b/js/_history.js @@ -239,9 +239,11 @@ function HistoryStateAddLayer(layerData, index) { this.undo = function() { redoStates.push(this); + layers[this.index + 1].selectLayer(); this.added.canvas.remove(); this.added.menuEntry.remove(); + layers.splice(index, 1); }; diff --git a/js/_mouseEvents.js b/js/_mouseEvents.js index 46bf971..6342030 100644 --- a/js/_mouseEvents.js +++ b/js/_mouseEvents.js @@ -176,167 +176,170 @@ function setPreviewPosition(preview, cursor, size){ //mouse is moving on canvas window.addEventListener("mousemove", draw, false); function draw (mouseEvent) { - lastMouseMovePos = getCursorPosition(mouseEvent); - // Saving the event in case something else needs it - currentMouseEvent = mouseEvent; + if (!dialogueOpen) + { + lastMouseMovePos = getCursorPosition(mouseEvent); + // Saving the event in case something else needs it + currentMouseEvent = mouseEvent; - var cursorLocation = lastMouseMovePos; + var cursorLocation = lastMouseMovePos; - //if a document hasnt yet been created or the current layer is locked, exit this function - if (!documentCreated || dialogueOpen || !currentLayer.isVisible || currentLayer.isLocked) return; + //if a document hasnt yet been created or the current layer is locked, exit this function + if (!documentCreated || dialogueOpen || !currentLayer.isVisible || currentLayer.isLocked) return; - // Moving brush preview - currentTool.moveBrushPreview(cursorLocation); - // Hiding eyedropper, will be shown if it's needed - eyedropperPreview.style.display = 'none'; + // Moving brush preview + currentTool.moveBrushPreview(cursorLocation); + // Hiding eyedropper, will be shown if it's needed + eyedropperPreview.style.display = 'none'; - if (currentTool.name == 'pencil') { - //hide brush preview outside of canvas / canvas view - if (mouseEvent.target.className == 'drawingCanvas'|| mouseEvent.target.className == 'drawingCanvas') - brushPreview.style.visibility = 'visible'; - else - brushPreview.style.visibility = 'hidden'; + if (currentTool.name == 'pencil') { + //hide brush preview outside of canvas / canvas view + if (mouseEvent.target.className == 'drawingCanvas'|| mouseEvent.target.className == 'drawingCanvas') + brushPreview.style.visibility = 'visible'; + else + brushPreview.style.visibility = 'hidden'; - //draw line to current pixel - if (dragging) { - if (mouseEvent.target.className == 'drawingCanvas' || mouseEvent.target.className == 'drawingCanvas') { - line(Math.floor(lastMouseClickPos[0]/zoom),Math.floor(lastMouseClickPos[1]/zoom),Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom), tool.pencil.brushSize); - lastMouseClickPos = cursorLocation; + //draw line to current pixel + if (dragging) { + if (mouseEvent.target.className == 'drawingCanvas' || mouseEvent.target.className == 'drawingCanvas') { + line(Math.floor(lastMouseClickPos[0]/zoom),Math.floor(lastMouseClickPos[1]/zoom),Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom), tool.pencil.brushSize); + lastMouseClickPos = cursorLocation; + } + } + + //get lightness value of color + var selectedColor = currentLayer.context.getImageData(Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom),1,1).data; + var colorLightness = Math.max(selectedColor[0],selectedColor[1],selectedColor[2]) + + //for the darkest 50% of colors, change the brush preview to dark mode + if (colorLightness>127) brushPreview.classList.remove('dark'); + else brushPreview.classList.add('dark'); + + currentLayer.updateLayerPreview(); + } + // Decided to write a different implementation in case of differences between the brush and the eraser tool + else if (currentTool.name == 'eraser') { + //hide brush preview outside of canvas / canvas view + if (mouseEvent.target.className == 'drawingCanvas' || mouseEvent.target.className == 'drawingCanvas') + brushPreview.style.visibility = 'visible'; + else + brushPreview.style.visibility = 'hidden'; + + //draw line to current pixel + if (dragging) { + if (mouseEvent.target.className == 'drawingCanvas' || mouseEvent.target.className == 'drawingCanvas') { + line(Math.floor(lastMouseClickPos[0]/zoom),Math.floor(lastMouseClickPos[1]/zoom),Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom), currentTool.brushSize); + lastMouseClickPos = cursorLocation; + } + } + + currentLayer.updateLayerPreview(); + } + else if (currentTool.name == 'rectangle') + { + //hide brush preview outside of canvas / canvas view + if (mouseEvent.target.className == 'drawingCanvas'|| mouseEvent.target.className == 'drawingCanvas') + brushPreview.style.visibility = 'visible'; + else + brushPreview.style.visibility = 'hidden'; + + if (!isDrawingRect && dragging) { + startRectDrawing(mouseEvent); + } + else if (dragging){ + updateRectDrawing(mouseEvent); } } - - //get lightness value of color - var selectedColor = currentLayer.context.getImageData(Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom),1,1).data; - var colorLightness = Math.max(selectedColor[0],selectedColor[1],selectedColor[2]) - - //for the darkest 50% of colors, change the brush preview to dark mode - if (colorLightness>127) brushPreview.classList.remove('dark'); - else brushPreview.classList.add('dark'); - - currentLayer.updateLayerPreview(); - } - // Decided to write a different implementation in case of differences between the brush and the eraser tool - else if (currentTool.name == 'eraser') { - //hide brush preview outside of canvas / canvas view - if (mouseEvent.target.className == 'drawingCanvas' || mouseEvent.target.className == 'drawingCanvas') - brushPreview.style.visibility = 'visible'; - else - brushPreview.style.visibility = 'hidden'; - - //draw line to current pixel - if (dragging) { - if (mouseEvent.target.className == 'drawingCanvas' || mouseEvent.target.className == 'drawingCanvas') { - line(Math.floor(lastMouseClickPos[0]/zoom),Math.floor(lastMouseClickPos[1]/zoom),Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom), currentTool.brushSize); - lastMouseClickPos = cursorLocation; - } - } - - currentLayer.updateLayerPreview(); - } - else if (currentTool.name == 'rectangle') - { - //hide brush preview outside of canvas / canvas view - if (mouseEvent.target.className == 'drawingCanvas'|| mouseEvent.target.className == 'drawingCanvas') - brushPreview.style.visibility = 'visible'; - else - brushPreview.style.visibility = 'hidden'; - - if (!isDrawingRect && dragging) { - startRectDrawing(mouseEvent); + else if (currentTool.name == 'pan' && dragging) { + // Setting first layer position + setCanvasOffset(layers[0].canvas, layers[0].canvas.offsetLeft + (cursorLocation[0] - lastMouseClickPos[0]), layers[0].canvas.offsetTop + (cursorLocation[1] - lastMouseClickPos[1])); + // Copying that position to the other layers + for (let i=1; i127) eyedropperPreview.classList.remove('dark'); + else eyedropperPreview.classList.add('dark'); + } + else if (currentTool.name == 'resizebrush' && dragging) { + //get new brush size based on x distance from original clicking location + var distanceFromClick = cursorLocation[0] - lastMouseClickPos[0]; + //var roundingAmount = 20 - Math.round(distanceFromClick/10); + //this doesnt work in reverse... because... it's not basing it off of the brush size which it should be + var brushSizeChange = Math.round(distanceFromClick/10); + var newBrushSize = tool.pencil.previousBrushSize + brushSizeChange; + + //set the brush to the new size as long as its bigger than 1 + tool.pencil.brushSize = Math.max(1,newBrushSize); + + //fix offset so the cursor stays centered + tool.pencil.moveBrushPreview(lastMouseClickPos); + currentTool.updateCursor(); + } + else if (currentTool.name == 'resizeeraser' && dragging) { + //get new brush size based on x distance from original clicking location + var distanceFromClick = cursorLocation[0] - lastMouseClickPos[0]; + //var roundingAmount = 20 - Math.round(distanceFromClick/10); + //this doesnt work in reverse... because... it's not basing it off of the brush size which it should be + var eraserSizeChange = Math.round(distanceFromClick/10); + var newEraserSizeChange = tool.eraser.previousBrushSize + eraserSizeChange; + + //set the brush to the new size as long as its bigger than 1 + tool.eraser.brushSize = Math.max(1,newEraserSizeChange); + + //fix offset so the cursor stays centered + tool.eraser.moveBrushPreview(lastMouseClickPos); + currentTool.updateCursor(); + } + else if (currentTool.name == 'resizerectangle' && dragging) { + //get new brush size based on x distance from original clicking location + var distanceFromClick = cursorLocation[0] - lastMouseClickPos[0]; + //var roundingAmount = 20 - Math.round(distanceFromClick/10); + //this doesnt work in reverse... because... it's not basing it off of the brush size which it should be + var rectangleSizeChange = Math.round(distanceFromClick/10); + var newRectangleSize = tool.rectangle.previousBrushSize + rectangleSizeChange; + + //set the brush to the new size as long as its bigger than 1 + tool.rectangle.brushSize = Math.max(1,newRectangleSize); + + //fix offset so the cursor stays centered + tool.rectangle.moveBrushPreview(lastMouseClickPos); + currentTool.updateCursor(); + } + else if (currentTool.name == 'rectselect') { + if (dragging && !isRectSelecting && mouseEvent.target.className == 'drawingCanvas') { + isRectSelecting = true; + startRectSelection(mouseEvent); + } + else if (dragging && isRectSelecting) { + updateRectSelection(mouseEvent); + } + else if (isRectSelecting) { + endRectSelection(); + } + } + else if (currentTool.name == 'moveselection') { + // Updating the cursor (move if inside rect, cross if not) + currentTool.updateCursor(); + + // If I'm dragging, I move the preview + if (dragging && cursorInSelectedArea()) { + updateMovePreview(getCursorPosition(mouseEvent)); + } } } - else if (currentTool.name == 'pan' && dragging) { - // Setting first layer position - setCanvasOffset(layers[0].canvas, layers[0].canvas.offsetLeft + (cursorLocation[0] - lastMouseClickPos[0]), layers[0].canvas.offsetTop + (cursorLocation[1] - lastMouseClickPos[1])); - // Copying that position to the other layers - for (let i=1; i127) eyedropperPreview.classList.remove('dark'); - else eyedropperPreview.classList.add('dark'); - } - else if (currentTool.name == 'resizebrush' && dragging) { - //get new brush size based on x distance from original clicking location - var distanceFromClick = cursorLocation[0] - lastMouseClickPos[0]; - //var roundingAmount = 20 - Math.round(distanceFromClick/10); - //this doesnt work in reverse... because... it's not basing it off of the brush size which it should be - var brushSizeChange = Math.round(distanceFromClick/10); - var newBrushSize = tool.pencil.previousBrushSize + brushSizeChange; - - //set the brush to the new size as long as its bigger than 1 - tool.pencil.brushSize = Math.max(1,newBrushSize); - - //fix offset so the cursor stays centered - tool.pencil.moveBrushPreview(lastMouseClickPos); - currentTool.updateCursor(); - } - else if (currentTool.name == 'resizeeraser' && dragging) { - //get new brush size based on x distance from original clicking location - var distanceFromClick = cursorLocation[0] - lastMouseClickPos[0]; - //var roundingAmount = 20 - Math.round(distanceFromClick/10); - //this doesnt work in reverse... because... it's not basing it off of the brush size which it should be - var eraserSizeChange = Math.round(distanceFromClick/10); - var newEraserSizeChange = tool.eraser.previousBrushSize + eraserSizeChange; - - //set the brush to the new size as long as its bigger than 1 - tool.eraser.brushSize = Math.max(1,newEraserSizeChange); - - //fix offset so the cursor stays centered - tool.eraser.moveBrushPreview(lastMouseClickPos); - currentTool.updateCursor(); - } - else if (currentTool.name == 'resizerectangle' && dragging) { - //get new brush size based on x distance from original clicking location - var distanceFromClick = cursorLocation[0] - lastMouseClickPos[0]; - //var roundingAmount = 20 - Math.round(distanceFromClick/10); - //this doesnt work in reverse... because... it's not basing it off of the brush size which it should be - var rectangleSizeChange = Math.round(distanceFromClick/10); - var newRectangleSize = tool.rectangle.previousBrushSize + rectangleSizeChange; - - //set the brush to the new size as long as its bigger than 1 - tool.rectangle.brushSize = Math.max(1,newRectangleSize); - - //fix offset so the cursor stays centered - tool.rectangle.moveBrushPreview(lastMouseClickPos); - currentTool.updateCursor(); - } - else if (currentTool.name == 'rectselect') { - if (dragging && !isRectSelecting && mouseEvent.target.className == 'drawingCanvas') { - isRectSelecting = true; - startRectSelection(mouseEvent); - } - else if (dragging && isRectSelecting) { - updateRectSelection(mouseEvent); - } - else if (isRectSelecting) { - endRectSelection(); - } - } - else if (currentTool.name == 'moveselection') { - // Updating the cursor (move if inside rect, cross if not) - currentTool.updateCursor(); - - // If I'm dragging, I move the preview - if (dragging && cursorInSelectedArea()) { - updateMovePreview(getCursorPosition(mouseEvent)); - } - } } //mousewheel scroll From f5c4b68125e08e3482bfe0bb2726299265ae4fd7 Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Wed, 16 Sep 2020 13:08:44 +0200 Subject: [PATCH 16/46] Probably fixed #19 --- js/_layer.js | 6 ++---- js/_variables.js | 3 ++- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/js/_layer.js b/js/_layer.js index 1809165..0e6ffcc 100644 --- a/js/_layer.js +++ b/js/_layer.js @@ -76,12 +76,13 @@ class Layer { // Initializes the canvas initialize() { + /* var maxHorizontalZoom = Math.floor(window.innerWidth/this.canvasSize[0]*0.75); var maxVerticalZoom = Math.floor(window.innerHeight/this.canvasSize[1]*0.75); zoom = Math.min(maxHorizontalZoom,maxVerticalZoom); if (zoom < 1) zoom = 1; - + */ //resize canvas this.canvas.width = this.canvasSize[0]; this.canvas.height = this.canvasSize[1]; @@ -584,8 +585,6 @@ function addLayer(id, saveHistory = true) { newCanvas.style.zIndex = maxZIndex; newCanvas.classList.add("drawingCanvas"); - console.log("Tela creata: " + newCanvas); - if (!layerListEntry) return console.warn('skipping adding layer because no document'); // Clone the default layer @@ -604,7 +603,6 @@ function addLayer(id, saveHistory = true) { layers.splice(index, 0, newLayer); - // Insert it before the Add layer button layerList.insertBefore(toAppend, layerList.childNodes[0]); diff --git a/js/_variables.js b/js/_variables.js index 0cfcd89..03e29a9 100644 --- a/js/_variables.js +++ b/js/_variables.js @@ -1,5 +1,6 @@ //init variables -var canvasSize,zoom; +var canvasSize; +var zoom = 3; var dragging = false; var lastMouseClickPos = [0,0]; var dialogueOpen = false; From 5974420f9319144581844dedd793a0ca04e9977d Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Wed, 16 Sep 2020 13:52:55 +0200 Subject: [PATCH 17/46] Finished canvas resizing --- js/_variables.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/_variables.js b/js/_variables.js index 03e29a9..615be88 100644 --- a/js/_variables.js +++ b/js/_variables.js @@ -1,6 +1,6 @@ //init variables var canvasSize; -var zoom = 3; +var zoom = 7; var dragging = false; var lastMouseClickPos = [0,0]; var dialogueOpen = false; From 80d97a455289422c931a60f69a2ddfde1a378ded Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Wed, 16 Sep 2020 16:10:55 +0200 Subject: [PATCH 18/46] Started duplicating layers --- js/_layer.js | 48 ++++++++++++++++++++++++++++++++++++++++++ views/pixel-editor.hbs | 7 ++++-- 2 files changed, 53 insertions(+), 2 deletions(-) diff --git a/js/_layer.js b/js/_layer.js index 0e6ffcc..a8f0ad0 100644 --- a/js/_layer.js +++ b/js/_layer.js @@ -460,6 +460,54 @@ function deleteLayer(saveHistory = true) { currentLayer.closeOptionsMenu(); } +function duplicateLayer(event) { + let layerIndex = layers.indexOf(currentLayer); + let toDuplicate = currentLayer; + + // Increasing z-indexes of the layers above + for (let i=layerIndex + 1; i
  • - +
  • - + +
    • +
  • +
  • From 96d428af905ce0f29f78e0efac3f59438f248c2e Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Thu, 17 Sep 2020 12:23:56 +0200 Subject: [PATCH 19/46] Implemented layer duplication --- js/_layer.js | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/js/_layer.js b/js/_layer.js index a8f0ad0..e875443 100644 --- a/js/_layer.js +++ b/js/_layer.js @@ -463,10 +463,11 @@ function deleteLayer(saveHistory = true) { function duplicateLayer(event) { let layerIndex = layers.indexOf(currentLayer); let toDuplicate = currentLayer; + let menuEntries = layerList.childNodes // Increasing z-indexes of the layers above - for (let i=layerIndex + 1; i0; i--) { + getLayerByID(menuEntries[i].id).canvas.style.zIndex++; } maxZIndex++; @@ -474,7 +475,7 @@ function duplicateLayer(event) { let newCanvas = document.createElement("canvas"); // Setting up the new canvas canvasView.append(newCanvas); - newCanvas.style.zIndex = currentLayer.canvas.style.zIndex; + newCanvas.style.zIndex = parseInt(currentLayer.canvas.style.zIndex) + 1; newCanvas.classList.add("drawingCanvas"); if (!layerListEntry) return console.warn('skipping adding layer because no document'); @@ -501,6 +502,7 @@ function duplicateLayer(event) { // Copy the layer content newLayer.context.putImageData(currentLayer.context.getImageData( 0, 0, currentLayer.canvasSize[0], currentLayer.canvasSize[1]), 0, 0); + newLayer.updateLayerPreview(); // Basically "if I'm not adding a layer because redo() is telling meto do so", then I can save the history /*if (saveHistory) { new HistoryStateDuplicateLayer(newLayer, index); @@ -596,6 +598,16 @@ function moveLayers(toDropLayer, staticLayer, saveHistory = true) { } } +function getMenuEntryIndex(list, entry) { + for (let i=0; i Date: Thu, 17 Sep 2020 12:36:15 +0200 Subject: [PATCH 20/46] Added history management for duplicating layers --- js/_history.js | 21 +++++++++++++++++++++ js/_layer.js | 9 ++++----- 2 files changed, 25 insertions(+), 5 deletions(-) diff --git a/js/_history.js b/js/_history.js index 881e373..ab69648 100644 --- a/js/_history.js +++ b/js/_history.js @@ -158,6 +158,27 @@ function HistoryStateRenameLayer(oldName, newName, layer) { saveHistoryState(this); } +function HistoryStateDuplicateLayer(addedLayer, copiedLayer) { + this.addedLayer = addedLayer; + this.copiedLayer = copiedLayer; + + this.undo = function() { + addedLayer.selectLayer(); + deleteLayer(false); + + redoStates.push(this); + }; + + this.redo = function() { + copiedLayer.selectLayer(); + duplicateLayer(null, false); + + undoStates.push(this); + }; + + saveHistoryState(this); +} + function HistoryStateDeleteLayer(layerData, before, index) { this.deleted = layerData; this.before = before; diff --git a/js/_layer.js b/js/_layer.js index e875443..ca0f241 100644 --- a/js/_layer.js +++ b/js/_layer.js @@ -460,7 +460,7 @@ function deleteLayer(saveHistory = true) { currentLayer.closeOptionsMenu(); } -function duplicateLayer(event) { +function duplicateLayer(event, saveHistory = true) { let layerIndex = layers.indexOf(currentLayer); let toDuplicate = currentLayer; let menuEntries = layerList.childNodes @@ -504,10 +504,9 @@ function duplicateLayer(event) { 0, 0, currentLayer.canvasSize[0], currentLayer.canvasSize[1]), 0, 0); newLayer.updateLayerPreview(); // Basically "if I'm not adding a layer because redo() is telling meto do so", then I can save the history - /*if (saveHistory) { - new HistoryStateDuplicateLayer(newLayer, index); - }*/ - + if (saveHistory) { + new HistoryStateDuplicateLayer(newLayer, currentLayer); + } } function renameLayer(event) { From c27a35590417b50baf5e50c98a22f0cf8f587408 Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Thu, 17 Sep 2020 12:41:47 +0200 Subject: [PATCH 21/46] Whops fixed bug in duplicating layers It's .children, not .childNodes, the second one also returns text elements (like \ns) --- README.md | 2 -- js/_layer.js | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/README.md b/README.md index fa561a1..c4ce210 100644 --- a/README.md +++ b/README.md @@ -13,11 +13,9 @@ The next version is mostly focused on adding missing essential features and port Suggestions / Planned features: - Line tool -- Resize canvas - Resize sprite - Load palette from LPE file - Move colours in (advanced) palette editor -- Duplicate layer - Symmetry options - Custom color picker diff --git a/js/_layer.js b/js/_layer.js index ca0f241..493aa12 100644 --- a/js/_layer.js +++ b/js/_layer.js @@ -463,7 +463,7 @@ function deleteLayer(saveHistory = true) { function duplicateLayer(event, saveHistory = true) { let layerIndex = layers.indexOf(currentLayer); let toDuplicate = currentLayer; - let menuEntries = layerList.childNodes + let menuEntries = layerList.children; // Increasing z-indexes of the layers above for (let i=getMenuEntryIndex(menuEntries, toDuplicate.menuEntry) - 1; i>0; i--) { From 37a532236bfd32a61d1777353e507077af617621 Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Thu, 17 Sep 2020 16:11:00 +0200 Subject: [PATCH 22/46] Fixed brush preview snapping --- js/_getCursorPosition.js | 2 +- js/_mouseEvents.js | 13 ++++++++++--- js/_tools.js | 10 ++++++++-- 3 files changed, 19 insertions(+), 6 deletions(-) diff --git a/js/_getCursorPosition.js b/js/_getCursorPosition.js index 0452e16..4c9cdca 100644 --- a/js/_getCursorPosition.js +++ b/js/_getCursorPosition.js @@ -2,7 +2,7 @@ function getCursorPosition(e) { var x; var y; - + if (e.pageX != undefined && e.pageY != undefined) { x = e.pageX; y = e.pageY; diff --git a/js/_mouseEvents.js b/js/_mouseEvents.js index 6342030..de0a386 100644 --- a/js/_mouseEvents.js +++ b/js/_mouseEvents.js @@ -157,16 +157,23 @@ window.addEventListener("mouseup", function (mouseEvent) { }, false); // TODO: Make it snap to the pixel grid -function setPreviewPosition(preview, cursor, size){ +function setPreviewPosition(preview, size){ + let toAdd = 0; + + // This prevents the brush to be placed in the middle of pixels + if (size % 2 == 0) { + toAdd = 0.5; + } + preview.style.left = ( currentLayer.canvas.offsetLeft + Math.floor(cursor[0]/zoom) * zoom - - Math.floor(size / 2) * zoom + - Math.floor(size / 2) * zoom + toAdd ) + 'px'; preview.style.top = ( currentLayer.canvas.offsetTop + Math.floor(cursor[1]/zoom) * zoom - - Math.floor(size / 2) * zoom + - Math.floor(size / 2) * zoom + toAdd ) + 'px'; } diff --git a/js/_tools.js b/js/_tools.js index 335c09a..3c10d70 100644 --- a/js/_tools.js +++ b/js/_tools.js @@ -95,8 +95,14 @@ class Tool { } moveBrushPreview(cursorLocation) { - brushPreview.style.left = (Math.ceil(cursorLocation[0] / zoom) * zoom + currentLayer.canvas.offsetLeft - this.currentBrushSize * zoom / 2 - zoom / 2) + 'px'; - brushPreview.style.top = (Math.ceil(cursorLocation[1] / zoom) * zoom + currentLayer.canvas.offsetTop - this.currentBrushSize * zoom / 2 - zoom / 2) + 'px'; + let toSub = 0; + // Prevents the brush to be put in the middle of pixels + if (this.currentBrushSize % 2 == 0) { + toSub = 0.5; + } + + brushPreview.style.left = (Math.ceil(cursorLocation[0] / zoom) * zoom + currentLayer.canvas.offsetLeft - this.currentBrushSize * zoom / 2 - zoom / 2 - toSub * zoom) + 'px'; + brushPreview.style.top = (Math.ceil(cursorLocation[1] / zoom) * zoom + currentLayer.canvas.offsetTop - this.currentBrushSize * zoom / 2 - zoom / 2 - toSub * zoom) + 'px'; } } From d6b292a443632331640b99ad23055fd9b2b5f4c4 Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Thu, 17 Sep 2020 19:24:23 +0200 Subject: [PATCH 23/46] Merge remote-tracking branch 'upstream/master' --- README.md | 1 - js/_createColorPalette.js | 6 +++--- js/_presets.js | 2 +- views/pixel-editor.hbs | 6 ++++++ 4 files changed, 10 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index c4ce210..d9b0ca3 100644 --- a/README.md +++ b/README.md @@ -41,7 +41,6 @@ Suggestions / Planned features: - Show colors which would need to be added to palette - Warning windows for wrong inputs - Hide non-hovered layers - - Snap brush preview to pixel grid - Palette option remove unused colors - Move selection with arrows - Update pivot buttons when resizing canvas diff --git a/js/_createColorPalette.js b/js/_createColorPalette.js index da51707..8f7352b 100644 --- a/js/_createColorPalette.js +++ b/js/_createColorPalette.js @@ -1,5 +1,5 @@ -function createColorPalette(selectedPalette, fillBackground, deletePreviousPalette = true) { +function createColorPalette(paletteColors, fillBackground, deletePreviousPalette = true) { //remove current palette if (deletePreviousPalette) { colors = document.getElementsByClassName('color-button'); @@ -11,8 +11,8 @@ function createColorPalette(selectedPalette, fillBackground, deletePreviousPalet var lightestColor = '#000000'; var darkestColor = '#ffffff'; - for (var i = 0; i < selectedPalette.length; i++) { - var newColor = selectedPalette[i]; + for (var i = 0; i < paletteColors.length; i++) { + var newColor = paletteColors[i]; var newColorElement = addColor(newColor); var newColorHex = hexToRgb(newColor); diff --git a/js/_presets.js b/js/_presets.js index bc4e02d..c0f4714 100644 --- a/js/_presets.js +++ b/js/_presets.js @@ -8,7 +8,7 @@ var presets = { 'PICO-8': { width: 128, height: 128, - palette: 'PICO-8', + palette: 'PICO-8' }, 'Commodore 64': { width: 40, diff --git a/views/pixel-editor.hbs b/views/pixel-editor.hbs index 0decec1..176b0ac 100644 --- a/views/pixel-editor.hbs +++ b/views/pixel-editor.hbs @@ -405,6 +405,12 @@ {{#specifiedPalette}} var keepUrl = true; {{/specifiedPalette}} + + // Set the default palettes + palettes["Commodore 64"] = {"name":"Commodore 64","author":"","colors":["000000","626262","898989","adadad","ffffff","9f4e44","cb7e75","6d5412","a1683c","c9d487","9ae29b","5cab5e","6abfc6","887ecb","50459b","a057a3"]} + palettes["PICO-8"] = {"name":"PICO-8","author":"","colors":["000000","1D2B53","7E2553","008751","AB5236","5F574F","C2C3C7","FFF1E8","FF004D","FFA300","FFEC27","00E436","29ADFF","83769C","FF77A8","FFCCAA"]} + palettes["Gameboy Color"] = {"name":"Nintendo Gameboy (Black Zero)","author":"","colors":["2e463d","385d49","577b46","7e8416"]} + From 8d033778a5f7da2fdb8a4b757e100da569c06ae3 Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Thu, 17 Sep 2020 19:25:00 +0200 Subject: [PATCH 24/46] Added liam's fix --- js/_layer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/_layer.js b/js/_layer.js index 493aa12..4167538 100644 --- a/js/_layer.js +++ b/js/_layer.js @@ -164,7 +164,7 @@ class Layer { setCanvasOffset (offsetLeft, offsetTop) { //horizontal offset - var minXOffset = -this.canvasSize[0] * zoom + 164; + var minXOffset = -this.canvasSize[0] * zoom + 300; var maxXOffset = window.innerWidth - 148; if (offsetLeft < minXOffset) From b6d4544cd854f9d70305a50af46736b659ccf1ee Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Fri, 18 Sep 2020 10:18:27 +0200 Subject: [PATCH 25/46] Added layer focus when it's hovered in the menu --- js/_layer.js | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/js/_layer.js b/js/_layer.js index 4167538..ff3311a 100644 --- a/js/_layer.js +++ b/js/_layer.js @@ -57,6 +57,8 @@ class Layer { if (menuEntry != null) { this.name = menuEntry.getElementsByTagName("p")[0].innerHTML; menuEntry.id = "layer" + id; + menuEntry.onmouseover = () => this.hover(); + menuEntry.onmouseout = () => this.unhover(); menuEntry.onclick = () => this.selectLayer(); menuEntry.getElementsByTagName("button")[0].onclick = () => this.toggleLock(); menuEntry.getElementsByTagName("button")[1].onclick = () => this.toggleVisibility(); @@ -100,6 +102,24 @@ class Layer { this.context.mozImageSmoothingEnabled = false; } + hover() { + // Hide all the layers but the current one + for (let i=1; i Date: Fri, 18 Sep 2020 10:26:56 +0200 Subject: [PATCH 26/46] Fixed pan bug Since setCanvasOffset is now a method of Layer, it can't be called like a global function. --- README.md | 1 - js/_mouseEvents.js | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/README.md b/README.md index d9b0ca3..005793f 100644 --- a/README.md +++ b/README.md @@ -40,7 +40,6 @@ Suggestions / Planned features: - Polish: - Show colors which would need to be added to palette - Warning windows for wrong inputs - - Hide non-hovered layers - Palette option remove unused colors - Move selection with arrows - Update pivot buttons when resizing canvas diff --git a/js/_mouseEvents.js b/js/_mouseEvents.js index de0a386..124b18a 100644 --- a/js/_mouseEvents.js +++ b/js/_mouseEvents.js @@ -259,7 +259,7 @@ function draw (mouseEvent) { } else if (currentTool.name == 'pan' && dragging) { // Setting first layer position - setCanvasOffset(layers[0].canvas, layers[0].canvas.offsetLeft + (cursorLocation[0] - lastMouseClickPos[0]), layers[0].canvas.offsetTop + (cursorLocation[1] - lastMouseClickPos[1])); + layers[0].setCanvasOffset(layers[0].canvas.offsetLeft + (cursorLocation[0] - lastMouseClickPos[0]), layers[0].canvas.offsetTop + (cursorLocation[1] - lastMouseClickPos[1])); // Copying that position to the other layers for (let i=1; i Date: Fri, 18 Sep 2020 11:11:52 +0200 Subject: [PATCH 27/46] Added duplicate layer button to top menu --- views/pixel-editor.hbs | 1 + 1 file changed, 1 insertion(+) diff --git a/views/pixel-editor.hbs b/views/pixel-editor.hbs index 176b0ac..1d560b0 100644 --- a/views/pixel-editor.hbs +++ b/views/pixel-editor.hbs @@ -62,6 +62,7 @@
      • +
      • From 09c68fd8478e86b2b60d2d9b0d016bd6e2f647b9 Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Fri, 18 Sep 2020 12:32:59 +0200 Subject: [PATCH 28/46] Fixed bug in duplicating layers --- js/_layer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/_layer.js b/js/_layer.js index ff3311a..da9853c 100644 --- a/js/_layer.js +++ b/js/_layer.js @@ -486,7 +486,7 @@ function duplicateLayer(event, saveHistory = true) { let menuEntries = layerList.children; // Increasing z-indexes of the layers above - for (let i=getMenuEntryIndex(menuEntries, toDuplicate.menuEntry) - 1; i>0; i--) { + for (let i=getMenuEntryIndex(menuEntries, toDuplicate.menuEntry) - 1; i>=0; i--) { getLayerByID(menuEntries[i].id).canvas.style.zIndex++; } maxZIndex++; From e213acea7673b4bee0e8f5cfcac6fe0bcbb018e7 Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Fri, 18 Sep 2020 15:22:10 +0200 Subject: [PATCH 29/46] Added resize sprite window opening --- js/_resizeSprite.js | 30 +++++++++++++++++++++++++- views/pixel-editor.hbs | 49 +++++++++++++++++++++++++++++++++++++++++- 2 files changed, 77 insertions(+), 2 deletions(-) diff --git a/js/_resizeSprite.js b/js/_resizeSprite.js index 2a02ed7..b5cf030 100644 --- a/js/_resizeSprite.js +++ b/js/_resizeSprite.js @@ -1,6 +1,34 @@ +let resizeSpriteInitialized = false; + // Function to show dialogue // New size // Percentage change // Keep ratio checkbox // Choose resize algorithm - // Confirm \ No newline at end of file + // Confirm + + function openResizeSpriteWindow() { + if (!resizeSpriteInitialized) { + resizeSpriteInitialized = true; + initResizeSpriteInputs(); + } + showDialogue('resize-sprite'); + } + + function initResizeSpriteInputs() { + /* + document.getElementById("rc-width").value = layers[0].canvasSize[0]; + document.getElementById("rc-height").value = layers[0].canvasSize[1]; + + document.getElementById("rc-border-left").addEventListener("change", changedBorder); + document.getElementById("rc-border-right").addEventListener("change", changedBorder); + document.getElementById("rc-border-top").addEventListener("change", changedBorder); + document.getElementById("rc-border-bottom").addEventListener("change", changedBorder); + + document.getElementById("rc-width").addEventListener("change", changedSize); + document.getElementById("rc-height").addEventListener("change", changedSize); + + document.getElementById("resize-canvas-confirm").addEventListener("click", resizeCanvas); + console.log("Pivot selezionato: " + currentPivotObject); + */ + } \ No newline at end of file diff --git a/views/pixel-editor.hbs b/views/pixel-editor.hbs index 1d560b0..6d35be9 100644 --- a/views/pixel-editor.hbs +++ b/views/pixel-editor.hbs @@ -53,7 +53,7 @@
        • -
        • +
      @@ -253,6 +253,53 @@ + +
      + +

      Resize sprite

      + + +

      New size

      +
      + + Width: + + + + Height: + +
      +       + + +

      Resize percentages

      +
      + + Left: + + + + Right: + + + + Top: + + + + Bottom: + +
      + +       +
      +
      From e9277db48c342213a43ac8edc537154d0e51188d Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Sat, 19 Sep 2020 17:04:46 +0200 Subject: [PATCH 30/46] Added resize sprite data management --- css/pixel-editor.scss | 54 ++++++++++++--- js/_resizeSprite.js | 145 ++++++++++++++++++++++++++++++++--------- views/pixel-editor.hbs | 35 +++++----- 3 files changed, 176 insertions(+), 58 deletions(-) diff --git a/css/pixel-editor.scss b/css/pixel-editor.scss index 97ba31b..f924db2 100644 --- a/css/pixel-editor.scss +++ b/css/pixel-editor.scss @@ -947,7 +947,7 @@ svg { display: none; } -#resize-canvas { +#resize-canvas, #resize-sprite { display:flex; position:relative; flex-wrap:wrap; @@ -995,7 +995,7 @@ svg { } } -#borders-menu, #rc-size-menu { +#borders-menu, #rc-size-menu, #rs-size-menu, #rs-percentage-menu { display:flex; position:relative; flex-wrap: wrap; @@ -1026,7 +1026,7 @@ svg { transform: scale(0.95); } - input { + input[type=number] { position:relative; margin-left:10px; height:15px; @@ -1034,8 +1034,8 @@ svg { padding:8px; } - input::-webkit-outer-spin-button, - input::-webkit-inner-spin-button { + input[type=number]::-webkit-outer-spin-button, + input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } @@ -1056,9 +1056,25 @@ svg { } } -#rc-size-menu { +#rs-percentage-menu { + width: 400px; span { - width:115px; + width:150px; + } +} + +#rs-size-menu { + width: 400px; + span { + width:150px; + } +} + +#rs-percentage-menu, #rs-size-menu { + justify-content: center; + + div { + float: none; } } @@ -1077,7 +1093,29 @@ svg { } } -#resize-canvas-confirm { +#rs-ratio-div { + width:400px; + justify-content: center; + padding-left:20px; + + span { + width:400px; + justify-content: center; + } +} + +#rs-keep-ratio { + background: color(button); + border: none; + font-size:14px; + color: color(button, foreground); + padding: 10px 20px; + margin: 0 auto; + position:relative; + display: block; +} + +#resize-canvas-confirm, #resize-sprite-confirm { background: color(button); border: none; font-size:18px; diff --git a/js/_resizeSprite.js b/js/_resizeSprite.js index b5cf030..c6759bd 100644 --- a/js/_resizeSprite.js +++ b/js/_resizeSprite.js @@ -1,34 +1,117 @@ let resizeSpriteInitialized = false; +let keepRatio = true; +let currentRatio; +let data = {width: 0, height: 0, widthPercentage: 100, heightPercentage: 100}; +let startData = {width: 0, height:0, widthPercentage: 100, heightPercentage: 100}; -// Function to show dialogue - // New size - // Percentage change - // Keep ratio checkbox - // Choose resize algorithm - // Confirm - - function openResizeSpriteWindow() { - if (!resizeSpriteInitialized) { - resizeSpriteInitialized = true; - initResizeSpriteInputs(); - } - showDialogue('resize-sprite'); +function openResizeSpriteWindow() { + if (!resizeSpriteInitialized) { + resizeSpriteInitialized = true; + initResizeSpriteInputs(); } - - function initResizeSpriteInputs() { - /* - document.getElementById("rc-width").value = layers[0].canvasSize[0]; - document.getElementById("rc-height").value = layers[0].canvasSize[1]; - - document.getElementById("rc-border-left").addEventListener("change", changedBorder); - document.getElementById("rc-border-right").addEventListener("change", changedBorder); - document.getElementById("rc-border-top").addEventListener("change", changedBorder); - document.getElementById("rc-border-bottom").addEventListener("change", changedBorder); - - document.getElementById("rc-width").addEventListener("change", changedSize); - document.getElementById("rc-height").addEventListener("change", changedSize); - - document.getElementById("resize-canvas-confirm").addEventListener("click", resizeCanvas); - console.log("Pivot selezionato: " + currentPivotObject); - */ - } \ No newline at end of file + + currentRatio = layers[0].canvasSize[0] / layers[0].canvasSize[1]; + + data.width = layers[0].canvasSize[0]; + data.height = layers[1].canvasSize[1]; + + startData.width = data.width; + startData.height = data.height; + + showDialogue('resize-sprite'); +} + +function initResizeSpriteInputs() { + document.getElementById("rs-width").value = layers[0].canvasSize[0]; + document.getElementById("rs-height").value = layers[0].canvasSize[1]; + + document.getElementById("rs-width-percentage").value = 100; + document.getElementById("rs-height-percentage").value = 100; + + document.getElementById("rs-keep-ratio").checked = true; + + document.getElementById("rs-width").addEventListener("change", changedWidth); + document.getElementById("rs-height").addEventListener("change", changedHeight); + document.getElementById("rs-width-percentage").addEventListener("change", changedWidthPercentage); + document.getElementById("rs-height-percentage").addEventListener("change", changedHeightPercentage); + + document.getElementById("resize-sprite-confirm").addEventListener("click", resizeSprite); + document.getElementById("rs-keep-ratio").addEventListener("click", toggleRatio); +} + +function resizeSprite() { + +} + +function changedWidth(event) { + let oldValue = data.width; + let ratio; + let percentageRatio; + data.width = event.target.value; + delta = data.width - oldValue; + + ratio = data.width / oldValue; + + if (keepRatio) { + document.getElementById("rs-height").value = data.width / currentRatio; + document.getElementById("rs-height-percentage").value = (data.width * 100) / startData.width; + } + + document.getElementById("rs-width-percentage").value = (data.width * 100) / startData.width; +} + +function changedHeight(event) { + let oldValue = data.height; + let ratio; + + data.height = event.target.value; + delta = data.height - oldValue; + + ratio = data.height / oldValue; + + if (keepRatio) { + document.getElementById("rs-width").value = data.height * currentRatio; + document.getElementById("rs-width-percentage").value = (data.height * 100) / startData.height; + } + + document.getElementById("rs-height-percentage").value = (data.height * 100) / startData.height; +} + +function changedWidthPercentage(event) { + let oldValue = data.widthPercentage; + let ratio; + + data.widthPercentage = event.target.value; + delta = data.widthPercentage - oldValue; + + ratio = data.widthPercentage / oldValue; + + if (keepRatio) { + document.getElementById("rs-height-percentage").value = data.widthPercentage / currentRatio; + document.getElementById("rs-height").value *= ratio; + } + + document.getElementById("rs-width").value *= ratio; +} + +function changedHeightPercentage(event) { + let oldValue = data.heightPercentage; + let ratio; + + data.heightPercentage = event.target.value; + delta = data.heightPercentage - oldValue; + + ratio = data.heightPercentage / oldValue; + + if (keepRatio) { + document.getElementById("rs-width-percentage").value = data.heightPercentage * currentRatio; + document.getElementById("rs-width").value *= ratio; + } + + document.getElementById("rs-height").value *= ratio; +} + +function toggleRatio(event) { + keepRatio = !keepRatio; + console.log(keepRatio); +} \ No newline at end of file diff --git a/views/pixel-editor.hbs b/views/pixel-editor.hbs index 6d35be9..08c55b2 100644 --- a/views/pixel-editor.hbs +++ b/views/pixel-editor.hbs @@ -253,13 +253,14 @@
      +

      Resize sprite

      - -

      New size

      +

      New size

      +
      Width: - -

      Resize percentages

      +

      Resize percentages

      +
      - Left: + Width % - Right: - - - - Top: - - - - Bottom: + Height %
      - +
      + + Keep current ratio + +
      + +
      From 2a9acebd2f3e3a083ae2ba1fc85d7cbfc2a2b049 Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Mon, 21 Sep 2020 10:39:37 +0200 Subject: [PATCH 31/46] Fixed bug in canvas resizing when resizing sprite --- README.md | 1 + js/_resizeCanvas.js | 24 ++++++------ js/_resizeSprite.js | 91 +++++++++++++++++++++++++++++++++++++++------ 3 files changed, 93 insertions(+), 23 deletions(-) diff --git a/README.md b/README.md index 005793f..e910a44 100644 --- a/README.md +++ b/README.md @@ -45,6 +45,7 @@ Suggestions / Planned features: - Update pivot buttons when resizing canvas - Update borders by dragging the canvas' edges with the mouse when resizing canvas - Move the canvases so they're centered after resizing the canvas (maybe a .center() method in layer class) + - Trim canvas ## How to Contribute diff --git a/js/_resizeCanvas.js b/js/_resizeCanvas.js index 78f3c6b..3f8b4c1 100644 --- a/js/_resizeCanvas.js +++ b/js/_resizeCanvas.js @@ -1,5 +1,5 @@ let resizeCanvasContainer = document.getElementById("resize-canvas"); -let pivot = "middle"; +let rcPivot = "middle"; let currentPivotObject; let resizeCanvasInitialized = false; let borders = {left: 0, right: 0, top: 0, bottom: 0}; @@ -25,26 +25,26 @@ function initResizeCanvasInputs() { document.getElementById("rc-width").value = layers[0].canvasSize[0]; document.getElementById("rc-height").value = layers[0].canvasSize[1]; - document.getElementById("rc-border-left").addEventListener("change", changedBorder); - document.getElementById("rc-border-right").addEventListener("change", changedBorder); - document.getElementById("rc-border-top").addEventListener("change", changedBorder); - document.getElementById("rc-border-bottom").addEventListener("change", changedBorder); + document.getElementById("rc-border-left").addEventListener("change", rcChangedBorder); + document.getElementById("rc-border-right").addEventListener("change", rcChangedBorder); + document.getElementById("rc-border-top").addEventListener("change", rcChangedBorder); + document.getElementById("rc-border-bottom").addEventListener("change", rcChangedBorder); - document.getElementById("rc-width").addEventListener("change", changedSize); - document.getElementById("rc-height").addEventListener("change", changedSize); + document.getElementById("rc-width").addEventListener("change", rcChangedSize); + document.getElementById("rc-height").addEventListener("change", rcChangedSize); document.getElementById("resize-canvas-confirm").addEventListener("click", resizeCanvas); console.log("Pivot selezionato: " + currentPivotObject); } -function changedBorder(event) { +function rcChangedBorder(event) { rcUpdateBorders(); document.getElementById("rc-width").value = parseInt(layers[0].canvasSize[0]) + borders.left + borders.right; document.getElementById("rc-height").value = parseInt(layers[0].canvasSize[1]) + borders.top + borders.bottom; } -function changedSize(event) { +function rcChangedSize(event) { let widthOffset = Math.abs(document.getElementById("rc-width").value) - layers[0].canvasSize[0]; let heightOffset = Math.abs(document.getElementById("rc-height").value) - layers[0].canvasSize[1]; @@ -75,7 +75,7 @@ function resizeCanvas(event, size) { document.getElementById("rc-width").value = size.x; document.getElementById("rc-height").value = size.y; - changedSize(); + rcChangedSize(); } rcUpdateBorders(); @@ -116,7 +116,7 @@ function resizeCanvas(event, size) { fillCheckerboard(); // Put the imageDatas in the right position - switch (pivot) + switch (rcPivot) { case 'topleft': leftOffset = 0; @@ -185,7 +185,7 @@ function rcUpdateBorders() { } function changePivot(event) { - pivot = event.target.getAttribute("value"); + rcPivot = event.target.getAttribute("value"); // Setting the selected class currentPivotObject.classList.remove("rc-selected-pivot"); diff --git a/js/_resizeSprite.js b/js/_resizeSprite.js index c6759bd..f870460 100644 --- a/js/_resizeSprite.js +++ b/js/_resizeSprite.js @@ -40,75 +40,144 @@ function initResizeSpriteInputs() { } function resizeSprite() { + let newWidth, newHeight; + rcPivot = "middle"; + // Updating values if the user didn't press enter + switch (document.activeElement.id) { + case "rs-width-percentage": + changedWidthPercentage(); + break; + case "rs-width": + changedWidth(); + break; + case "rs-height-percentage": + changedHeightPercentage(); + break; + case "rs-height": + changedHeight(); + break; + default: + // In this case everything has been updated correctly + break; + } + + newWidth = data.width; + newHeight = data.height; + + console.log(newWidth + ", " + newHeight); + + // Resizing the canvas + resizeCanvas(null, {x: newWidth, y: newHeight}); + // Get all the image datas + // Resize the canvases + // Resize the image datas + // Put the image datas on the new canvases + closeDialogue(); } function changedWidth(event) { let oldValue = data.width; let ratio; let percentageRatio; + let newHeight, newHeightPerc, newWidthPerc; + data.width = event.target.value; delta = data.width - oldValue; ratio = data.width / oldValue; + newHeight = data.width / currentRatio; + newHeightPerc = (newHeight * 100) / startData.height; + newWidthPerc = (data.width * 100) / startData.width; + if (keepRatio) { - document.getElementById("rs-height").value = data.width / currentRatio; - document.getElementById("rs-height-percentage").value = (data.width * 100) / startData.width; + document.getElementById("rs-height").value = newHeight; + data.height = newHeight; + + document.getElementById("rs-height-percentage").value = newHeightPerc; + data.heightPercentage = newHeightPerc; } - document.getElementById("rs-width-percentage").value = (data.width * 100) / startData.width; + document.getElementById("rs-width-percentage").value = newWidthPerc; } function changedHeight(event) { let oldValue = data.height; let ratio; + let newWidth, newWidthPerc, newHeightPerc; data.height = event.target.value; delta = data.height - oldValue; ratio = data.height / oldValue; + newWidth = data.height * currentRatio; + newWidthPerc = (newWidth * 100) / startData.width; + newHeightPerc = (data.height * 100) / startData.height; + if (keepRatio) { - document.getElementById("rs-width").value = data.height * currentRatio; - document.getElementById("rs-width-percentage").value = (data.height * 100) / startData.height; + document.getElementById("rs-width").value = newWidth; + data.width = newWidth; + + document.getElementById("rs-width-percentage").value = newWidthPerc; + data.widthPercentage = newWidthPerc; } - document.getElementById("rs-height-percentage").value = (data.height * 100) / startData.height; + document.getElementById("rs-height-percentage").value = newHeightPerc; + data.heightPercentage = newHeightPerc; } function changedWidthPercentage(event) { let oldValue = data.widthPercentage; let ratio; + let newWidth, newHeight, newHeightPerc; data.widthPercentage = event.target.value; delta = data.widthPercentage - oldValue; ratio = data.widthPercentage / oldValue; + newHeight = document.getElementById("rs-height").value * ratio; + newHeightPerc = data.widthPercentage / currentRatio; + newWidth = document.getElementById("rs-width").value * ratio; + if (keepRatio) { - document.getElementById("rs-height-percentage").value = data.widthPercentage / currentRatio; - document.getElementById("rs-height").value *= ratio; + document.getElementById("rs-height-percentage").value = newHeightPerc; + data.heightPercentage = newHeightPerc; + + document.getElementById("rs-height").value = newHeight + data.height = newHeight; } - document.getElementById("rs-width").value *= ratio; + document.getElementById("rs-width").value = newWidth; + data.width = newWidth; } function changedHeightPercentage(event) { let oldValue = data.heightPercentage; let ratio; + let newHeight, newWidth, newWidthPerc; data.heightPercentage = event.target.value; delta = data.heightPercentage - oldValue; ratio = data.heightPercentage / oldValue; + newWidth = document.getElementById("rs-width").value * ratio; + newWidthPerc = data.heightPercentage * currentRatio; + newHeight = document.getElementById("rs-height").value * ratio; + if (keepRatio) { document.getElementById("rs-width-percentage").value = data.heightPercentage * currentRatio; - document.getElementById("rs-width").value *= ratio; + data.widthPercentage = newWidthPerc; + + document.getElementById("rs-width").value = newWidth; + data.width = newWidth; } - document.getElementById("rs-height").value *= ratio; + document.getElementById("rs-height").value = newHeight; + data.height = newHeight; } function toggleRatio(event) { From 93c73f939cb71ad7a8f02a2d8f21f1a4a62339ed Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Mon, 21 Sep 2020 12:33:45 +0200 Subject: [PATCH 32/46] Implemented sprite resizing --- js/_pixelEditorUtility.js | 79 ++++++++++++++++++++++++++++++++++++++- js/_resizeSprite.js | 23 ++++++++++-- 2 files changed, 98 insertions(+), 4 deletions(-) diff --git a/js/_pixelEditorUtility.js b/js/_pixelEditorUtility.js index b87424a..5edda7c 100644 --- a/js/_pixelEditorUtility.js +++ b/js/_pixelEditorUtility.js @@ -105,4 +105,81 @@ function getElementAbsolutePosition(element) { } return [curleft,curtop]; -} \ No newline at end of file +} + +function nearestNeighbor (src, dst) { + let pos = 0 + + for (let y = 0; y < dst.height; y++) { + for (let x = 0; x < dst.width; x++) { + const srcX = Math.floor(x * src.width / dst.width) + const srcY = Math.floor(y * src.height / dst.height) + + let srcPos = ((srcY * src.width) + srcX) * 4 + + dst.data[pos++] = src.data[srcPos++] // R + dst.data[pos++] = src.data[srcPos++] // G + dst.data[pos++] = src.data[srcPos++] // B + dst.data[pos++] = src.data[srcPos++] // A + } + } +} + +function bilinearInterpolation (src, dst) { + function interpolate (k, kMin, kMax, vMin, vMax) { + return Math.round((k - kMin) * vMax + (kMax - k) * vMin) + } + + function interpolateHorizontal (offset, x, y, xMin, xMax) { + const vMin = src.data[((y * src.width + xMin) * 4) + offset] + if (xMin === xMax) return vMin + + const vMax = src.data[((y * src.width + xMax) * 4) + offset] + return interpolate(x, xMin, xMax, vMin, vMax) + } + + function interpolateVertical (offset, x, xMin, xMax, y, yMin, yMax) { + const vMin = interpolateHorizontal(offset, x, yMin, xMin, xMax) + if (yMin === yMax) return vMin + + const vMax = interpolateHorizontal(offset, x, yMax, xMin, xMax) + return interpolate(y, yMin, yMax, vMin, vMax) + } + + let pos = 0 + + for (let y = 0; y < dst.height; y++) { + for (let x = 0; x < dst.width; x++) { + const srcX = x * src.width / dst.width + const srcY = y * src.height / dst.height + + const xMin = Math.floor(srcX) + const yMin = Math.floor(srcY) + + const xMax = Math.min(Math.ceil(srcX), src.width - 1) + const yMax = Math.min(Math.ceil(srcY), src.height - 1) + + dst.data[pos++] = interpolateVertical(0, srcX, xMin, xMax, srcY, yMin, yMax) // R + dst.data[pos++] = interpolateVertical(1, srcX, xMin, xMax, srcY, yMin, yMax) // G + dst.data[pos++] = interpolateVertical(2, srcX, xMin, xMax, srcY, yMin, yMax) // B + dst.data[pos++] = interpolateVertical(3, srcX, xMin, xMax, srcY, yMin, yMax) // A + } + } +} + +function resizeImageData (image, width, height, algorithm) { + algorithm = algorithm || 'bilinear-interpolation' + + let resize + switch (algorithm) { + case 'nearest-neighbor': resize = nearestNeighbor; break + case 'bilinear-interpolation': resize = bilinearInterpolation; break + default: throw new Error(`Unknown algorithm: ${algorithm}`) + } + + const result = new ImageData(width, height) + + resize(image, result) + + return result + } \ No newline at end of file diff --git a/js/_resizeSprite.js b/js/_resizeSprite.js index f870460..3086b8a 100644 --- a/js/_resizeSprite.js +++ b/js/_resizeSprite.js @@ -41,6 +41,8 @@ function initResizeSpriteInputs() { function resizeSprite() { let newWidth, newHeight; + let imageDatas = []; + let layerIndex = 0; rcPivot = "middle"; // Updating values if the user didn't press enter @@ -67,12 +69,27 @@ function resizeSprite() { console.log(newWidth + ", " + newHeight); + // Get all the image datas + for (let i=0; i Date: Tue, 22 Sep 2020 11:34:36 +0200 Subject: [PATCH 33/46] Fixed canvas resizing bug The canvas size was not being updated after opening a png --- css/pixel-editor.scss | 20 ++++++++++++++++++++ js/_layer.js | 4 ++-- js/_newPixel.js | 7 ++++++- js/_resizeCanvas.js | 6 +----- views/pixel-editor.hbs | 7 +++++++ 5 files changed, 36 insertions(+), 8 deletions(-) diff --git a/css/pixel-editor.scss b/css/pixel-editor.scss index f924db2..2a0b4e3 100644 --- a/css/pixel-editor.scss +++ b/css/pixel-editor.scss @@ -1102,6 +1102,26 @@ svg { width:400px; justify-content: center; } + + select { + height:30px; + background-color: $basehover; + color: $basehovericon; + border:none; + position:relative; + left:10px; + + option { + background-color: $basehover; + color:$basehovericon; + padding:5px; + } + + option:checked, option:hover { + background-color: $basehovericon; + color:$basehovericonhover; + } + } } #rs-keep-ratio { diff --git a/js/_layer.js b/js/_layer.js index da9853c..75c7351 100644 --- a/js/_layer.js +++ b/js/_layer.js @@ -184,8 +184,8 @@ class Layer { setCanvasOffset (offsetLeft, offsetTop) { //horizontal offset - var minXOffset = -this.canvasSize[0] * zoom + 300; - var maxXOffset = window.innerWidth - 148; + var minXOffset = -this.canvasSize[0] * zoom; + var maxXOffset = window.innerWidth - 300; if (offsetLeft < minXOffset) this.canvas.style.left = minXOffset +'px'; diff --git a/js/_newPixel.js b/js/_newPixel.js index 06a780d..d32256f 100644 --- a/js/_newPixel.js +++ b/js/_newPixel.js @@ -39,7 +39,12 @@ function newPixel (width, height, editorMode, fileContent = null) { layers[1] = new Layer(width, height, layers[1].canvas, layers[1].menuEntry); currentLayer = layers[1]; - currentLayer.canvas.style.zIndex = 2; + currentLayer.canvas.style.zIndex = 2; + + // Updating canvas size + for (let i=0; i Keep current ratio       + + Resizing algorithm: + +
      From 29f8baf627183aee96e4efe0fbb58c8930650bde Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Tue, 22 Sep 2020 12:29:58 +0200 Subject: [PATCH 34/46] Fixed data handling bug When updating a percentage, it based it off the previous edited value (eg if I scale 2x, old value will be equal to 2x, so if you wanted to scale it 0.5x, it actually made it 4x times smaller) --- css/pixel-editor.scss | 4 ++-- js/_history.js | 16 +++++++++++++++ js/_resizeSprite.js | 44 ++++++++++++++++++++++++++++-------------- views/pixel-editor.hbs | 10 +++++----- 4 files changed, 52 insertions(+), 22 deletions(-) diff --git a/css/pixel-editor.scss b/css/pixel-editor.scss index 2a0b4e3..a6345d8 100644 --- a/css/pixel-editor.scss +++ b/css/pixel-editor.scss @@ -1118,8 +1118,8 @@ svg { } option:checked, option:hover { - background-color: $basehovericon; - color:$basehovericonhover; + box-shadow: 0 0 10px 100px $basehovericon inset; + color: $basehovericonhover; } } } diff --git a/js/_history.js b/js/_history.js index ab69648..132e7f3 100644 --- a/js/_history.js +++ b/js/_history.js @@ -3,6 +3,22 @@ var redoStates = []; const undoLogStyle = 'background: #87ff1c; color: black; padding: 5px;'; +function HistoryStateResizeSprite(newPercs, oldPercs, algo) { + this.newPercs = newPercs; + this.oldPercs = oldPercs; + this.algo = algo; + + this.undo = function() { + + }; + + this.redo = function() { + + }; + + saveHistoryState(this); +} + function HistoryStateResizeCanvas(newSize, oldSize, imageDatas) { this.oldSize = oldSize; this.newSize = newSize; diff --git a/js/_resizeSprite.js b/js/_resizeSprite.js index 3086b8a..0180413 100644 --- a/js/_resizeSprite.js +++ b/js/_resizeSprite.js @@ -1,22 +1,22 @@ -let resizeSpriteInitialized = false; + let keepRatio = true; let currentRatio; +let currentAlgo = 'nearest-neighbor'; let data = {width: 0, height: 0, widthPercentage: 100, heightPercentage: 100}; let startData = {width: 0, height:0, widthPercentage: 100, heightPercentage: 100}; function openResizeSpriteWindow() { - if (!resizeSpriteInitialized) { - resizeSpriteInitialized = true; - initResizeSpriteInputs(); - } + initResizeSpriteInputs(); currentRatio = layers[0].canvasSize[0] / layers[0].canvasSize[1]; data.width = layers[0].canvasSize[0]; data.height = layers[1].canvasSize[1]; - startData.width = data.width; - startData.height = data.height; + startData.width = parseInt(data.width); + startData.height = parseInt(data.height); + startData.heightPercentage = 100; + startData.widthPercentage = 100; showDialogue('resize-sprite'); } @@ -37,6 +37,7 @@ function initResizeSpriteInputs() { document.getElementById("resize-sprite-confirm").addEventListener("click", resizeSprite); document.getElementById("rs-keep-ratio").addEventListener("click", toggleRatio); + document.getElementById("resize-algorithm-combobox").addEventListener("change", changedAlgorithm); } function resizeSprite() { @@ -85,11 +86,19 @@ function resizeSprite() { for (let i=0; iEdit
        • -
        • +
      @@ -257,7 +257,7 @@
      -

      Resize sprite

      +

      Scale sprite

      New size

      @@ -292,14 +292,14 @@ Keep current ratio - Resizing algorithm: -
      - +
      From 9c68e541d9ba95ad4bb77a217588439fe37abe17 Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Tue, 22 Sep 2020 14:17:31 +0200 Subject: [PATCH 35/46] Added history management for sprite scaling --- js/_history.js | 27 ++++++++++++++++++++----- js/_resizeSprite.js | 48 +++++++++++++++++++++++++++++++++------------ 2 files changed, 57 insertions(+), 18 deletions(-) diff --git a/js/_history.js b/js/_history.js index 132e7f3..4cea20e 100644 --- a/js/_history.js +++ b/js/_history.js @@ -3,19 +3,36 @@ var redoStates = []; const undoLogStyle = 'background: #87ff1c; color: black; padding: 5px;'; -function HistoryStateResizeSprite(newPercs, oldPercs, algo) { - this.newPercs = newPercs; - this.oldPercs = oldPercs; +function HistoryStateResizeSprite(xRatio, yRatio, algo, oldData) { + this.xRatio = xRatio; + this.yRatio = yRatio; this.algo = algo; + this.oldData = oldData; this.undo = function() { + let layerIndex = 0; + currentAlgo = algo; + resizeSprite(null, [1 / this.xRatio, 1 / this.yRatio]); + + // Also putting the old data + for (let i=0; i Date: Fri, 25 Sep 2020 09:25:27 +0200 Subject: [PATCH 36/46] Started pixel grid --- README.md | 10 ++-------- js/_checkerboard.js | 9 +++++++++ js/_newPixel.js | 5 ++++- js/_pixelGrid.js | 1 + js/_variables.js | 15 +++++---------- js/pixel-editor.js | 1 + views/pixel-editor.hbs | 1 + 7 files changed, 23 insertions(+), 19 deletions(-) create mode 100644 js/_pixelGrid.js diff --git a/README.md b/README.md index e910a44..000e279 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ The next version is mostly focused on adding missing essential features and port Suggestions / Planned features: - Line tool -- Resize sprite +- Tiled mode - Load palette from LPE file - Move colours in (advanced) palette editor - Symmetry options @@ -28,14 +28,8 @@ Suggestions / Planned features: - Maybe rearrange UI on portrait - Stack colors when too many - Fix popups - -- Pixel Grid - - Another currentLayer.canvas - - Must be rescaled each zoom - + - Possibly add collaborate function -- Bug fix - - Alt + scroll broken - Polish: - Show colors which would need to be added to palette diff --git a/js/_checkerboard.js b/js/_checkerboard.js index adfedd0..28c28b6 100644 --- a/js/_checkerboard.js +++ b/js/_checkerboard.js @@ -1,10 +1,19 @@ // This script contains all the functions used to manage the checkboard +// Checkerboard color 1 +var firstCheckerBoardColor = 'rgba(179, 173, 182, 1)'; +// Checkerboard color 2 +var secondCheckerBoardColor = 'rgba(204, 200, 206, 1)'; +// Square size for the checkerboard +var checkerBoardSquareSize = 16; +// Checkerboard canvas +var checkerBoardCanvas = document.getElementById('checkerboard'); // Setting current colour (each square has a different colour var currentColor = firstCheckerBoardColor; // Saving number of squares filled until now var nSquaresFilled = 0; + function fillCheckerboard() { // Getting checkerboard context var context = checkerBoard.context; diff --git a/js/_newPixel.js b/js/_newPixel.js index d32256f..1a8a725 100644 --- a/js/_newPixel.js +++ b/js/_newPixel.js @@ -54,7 +54,10 @@ function newPixel (width, height, editorMode, fileContent = null) { VFXLayer = new Layer(width, height, VFXCanvas); // Tmp layer to draw previews on - TMPLayer = new Layer(width, height, TMPCanvas); + TMPLayer = new Layer(width, height, TMPCanvas); + + // Pixel grid + pixelGrid = new Layer(width, height, pixelGridCanvas); canvasSize = currentLayer.canvasSize; diff --git a/js/_pixelGrid.js b/js/_pixelGrid.js new file mode 100644 index 0000000..bdbe8ff --- /dev/null +++ b/js/_pixelGrid.js @@ -0,0 +1 @@ +pixelGridCanvas = document.getElementById("pixel-grid"); \ No newline at end of file diff --git a/js/_variables.js b/js/_variables.js index 615be88..8c01f0f 100644 --- a/js/_variables.js +++ b/js/_variables.js @@ -7,16 +7,6 @@ var dialogueOpen = false; var documentCreated = false; var pixelEditorMode; -// Checkerboard management -// Checkerboard color 1 -var firstCheckerBoardColor = 'rgba(179, 173, 182, 1)'; -// Checkerboard color 2 -var secondCheckerBoardColor = 'rgba(204, 200, 206, 1)'; -// Square size for the checkerboard -var checkerBoardSquareSize = 16; -// Checkerboard canvas -var checkerBoardCanvas = document.getElementById('checkerboard'); - //common elements var brushPreview = document.getElementById("brush-preview"); var eyedropperPreview = document.getElementById("eyedropper-preview"); @@ -43,3 +33,8 @@ var VFXCanvas = document.getElementById('vfx-canvas'); var TMPLayer; // TMP canvas var TMPCanvas = document.getElementById('tmp-canvas'); + +// Pixel grid layer +var pixelGrid; +// Pixel grid canvas +var pixelGridCanvas; \ No newline at end of file diff --git a/js/pixel-editor.js b/js/pixel-editor.js index 71d07fa..52b1f4b 100644 --- a/js/pixel-editor.js +++ b/js/pixel-editor.js @@ -42,6 +42,7 @@ //=include _deleteColor.js //=include _replaceAllOfColor.js //=include _checkerboard.js +//=include _pixelGrid.js //=include _layer.js //=include _copyPaste.js //=include _resizeCanvas.js diff --git a/views/pixel-editor.hbs b/views/pixel-editor.hbs index 5d9c2ec..4008de7 100644 --- a/views/pixel-editor.hbs +++ b/views/pixel-editor.hbs @@ -203,6 +203,7 @@ +
      From 034715fac836fbbfeb79951b715c5da57f626890 Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Sat, 26 Sep 2020 11:51:18 +0200 Subject: [PATCH 37/46] Fixed bug when undoing layer add Also created nAppLayers to save the number of layers used by the editor (and that the use can't directly with). --- js/_clickedColor.js | 2 +- js/_colorChanged.js | 2 +- js/_history.js | 14 +++++++++++--- js/_layer.js | 4 ++-- js/_newPixel.js | 6 ++++-- js/_pixelGrid.js | 6 +++++- js/_resizeCanvas.js | 2 +- js/_variables.js | 7 ++++++- 8 files changed, 31 insertions(+), 12 deletions(-) diff --git a/js/_clickedColor.js b/js/_clickedColor.js index f09ef07..d326818 100644 --- a/js/_clickedColor.js +++ b/js/_clickedColor.js @@ -8,7 +8,7 @@ function clickedColor (e){ if (selectedColor) selectedColor.classList.remove('selected'); //set current color - for (let i=1; i this.index + 1) { + layers[this.index + 1].selectLayer(); + } + else { + layers[this.index - 1].selectLayer(); + } + this.added.canvas.remove(); this.added.menuEntry.remove(); diff --git a/js/_layer.js b/js/_layer.js index 75c7351..3500c43 100644 --- a/js/_layer.js +++ b/js/_layer.js @@ -104,7 +104,7 @@ class Layer { hover() { // Hide all the layers but the current one - for (let i=1; i Date: Sat, 26 Sep 2020 12:32:31 +0200 Subject: [PATCH 38/46] Implemented pixel grid Added settings for pixel grid, move settings to editor sub menu. --- css/pixel-editor.scss | 13 +++++++++++-- js/_pixelGrid.js | 30 +++++++++++++++++++++++++++++- views/pixel-editor.hbs | 15 +++++++++++++-- 3 files changed, 53 insertions(+), 5 deletions(-) diff --git a/css/pixel-editor.scss b/css/pixel-editor.scss index a6345d8..239c2b6 100644 --- a/css/pixel-editor.scss +++ b/css/pixel-editor.scss @@ -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; } } diff --git a/js/_pixelGrid.js b/js/_pixelGrid.js index 408e560..d365110 100644 --- a/js/_pixelGrid.js +++ b/js/_pixelGrid.js @@ -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; iEditor
        • +
      • -
        • @@ -425,7 +425,18 @@

        Settings

        - +

        History

        +
        + +
        + +

        Pixel grid

        +
        + +
        +
        + +

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

        From 87a25c0137eefea87639bb89607bfd31466a3a12 Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Sat, 26 Sep 2020 12:40:03 +0200 Subject: [PATCH 39/46] Finished implementing pixel grid Added possibility to hide / show the grid. --- js/_pixelGrid.js | 19 +++++++++++++++++++ views/pixel-editor.hbs | 6 ++++++ 2 files changed, 25 insertions(+) diff --git a/js/_pixelGrid.js b/js/_pixelGrid.js index d365110..26dd600 100644 --- a/js/_pixelGrid.js +++ b/js/_pixelGrid.js @@ -1,7 +1,22 @@ let pixelGridColor = "#0000FF"; let lineDistance = 12; +let pixelGridVisible = false; pixelGridCanvas = document.getElementById("pixel-grid"); +function togglePixelGrid(event) { + let button = document.getElementById("toggle-pixelgrid-button"); + + pixelGridVisible = !pixelGridVisible; + + if (pixelGridVisible) { + button.innerHTML = "Hide pixel grid"; + pixelGridCanvas.style.display = "inline-block"; + } + else { + button.innerHTML = "Show pixel grid"; + pixelGridCanvas.style.display = "none"; + } +} function fillPixelGrid() { let context = pixelGridCanvas.getContext("2d"); @@ -30,4 +45,8 @@ function fillPixelGrid() { context.stroke(); context.closePath(); } + + if (!pixelGridVisible) { + pixelGridCanvas.style.display = 'none'; + } } \ No newline at end of file diff --git a/views/pixel-editor.hbs b/views/pixel-editor.hbs index e9d3a00..ac9d69a 100644 --- a/views/pixel-editor.hbs +++ b/views/pixel-editor.hbs @@ -58,6 +58,12 @@
      • +
    • + +
        +
        • +
      +
      • From 4223597659f07d38bbdecaf897555f696be3c7b6 Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Sat, 26 Sep 2020 13:08:43 +0200 Subject: [PATCH 40/46] Started canvas trimming --- js/_pixelEditorUtility.js | 8 ++++++++ js/_resizeCanvas.js | 42 +++++++++++++++++++++++++++++++++++++++ views/pixel-editor.hbs | 1 + 3 files changed, 51 insertions(+) diff --git a/js/_pixelEditorUtility.js b/js/_pixelEditorUtility.js index 5edda7c..77c91b9 100644 --- a/js/_pixelEditorUtility.js +++ b/js/_pixelEditorUtility.js @@ -182,4 +182,12 @@ function resizeImageData (image, width, height, algorithm) { resize(image, result) return result + } + + function getPixelPosition(index) { + let linearIndex = index / 4; + let y = linearIndex / layers[0].canvasSize[0]; + let x = linearIndex - y * layers[0].canvasSize[0]; + + return [x, y]; } \ No newline at end of file diff --git a/js/_resizeCanvas.js b/js/_resizeCanvas.js index 01042e2..fb67937 100644 --- a/js/_resizeCanvas.js +++ b/js/_resizeCanvas.js @@ -166,6 +166,48 @@ function resizeCanvas(event, size) { closeDialogue(); } +function trimCanvas() { + let minX, minY = Infinity; + let maxX, maxY = -Infinity; + + rcPivot = "middle"; + console.log("trimmo"); + + for (let i=1; i maxX) { + maxX = pixelPosition[0]; + } + else if (pixelPosition.x < minX) { + minX = pixelPosition[0]; + } + + if (pixelPosition.y > maxY) { + maxY = pixelPosition[1]; + } + else if (pixelPosition.y < minY) { + minY = pixelPosition[1]; + } + } + } + } + + console.log(maxX + ", " + minX + ", " + maxY + ", " + minY); + + borders.right = maxX - layers[0].canvasSize[0]; + borders.left = -minX; + borders.top = maxY - layers[0].canvasSize[1]; + borders.bottom = minY; + + resizeCanvas(null); +} + function rcUpdateBorders() { // Getting input borders.left = document.getElementById("rc-border-left").value; diff --git a/views/pixel-editor.hbs b/views/pixel-editor.hbs index ac9d69a..7726b00 100644 --- a/views/pixel-editor.hbs +++ b/views/pixel-editor.hbs @@ -54,6 +54,7 @@
          • +
        From c2bf2fe13145ff9577510481aa3eae819891a470 Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Sun, 27 Sep 2020 11:25:09 +0200 Subject: [PATCH 41/46] Fixed canvas undoing bug --- README.md | 1 + js/_history.js | 4 ++-- js/_pixelEditorUtility.js | 16 +++++++++------- js/_resizeCanvas.js | 33 ++++++++++++++++++++------------- 4 files changed, 32 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index 000e279..bf2c1c9 100644 --- a/README.md +++ b/README.md @@ -32,6 +32,7 @@ Suggestions / Planned features: - Possibly add collaborate function - Polish: + - ctrl + a to select everything / selection -> all, same for deselection - Show colors which would need to be added to palette - Warning windows for wrong inputs - Palette option remove unused colors diff --git a/js/_history.js b/js/_history.js index df559b6..19da676 100644 --- a/js/_history.js +++ b/js/_history.js @@ -47,9 +47,9 @@ function HistoryStateResizeCanvas(newSize, oldSize, imageDatas) { // Resizing the canvas resizeCanvas(null, oldSize); // Putting the image datas - for (let i=0; i maxX) { + if (pixelPosition[0] > maxX) { maxX = pixelPosition[0]; } - else if (pixelPosition.x < minX) { + else if (pixelPosition[0] < minX) { minX = pixelPosition[0]; } - if (pixelPosition.y > maxY) { + if (pixelPosition[1] > maxY) { maxY = pixelPosition[1]; } - else if (pixelPosition.y < minY) { + else if (pixelPosition[1] < minY) { minY = pixelPosition[1]; } } } } - console.log(maxX + ", " + minX + ", " + maxY + ", " + minY); - borders.right = maxX - layers[0].canvasSize[0]; borders.left = -minX; borders.top = maxY - layers[0].canvasSize[1]; borders.bottom = minY; + document.getElementById("rc-border-left").value = borders.left; + document.getElementById("rc-border-right").value = borders.right; + document.getElementById("rc-border-top").value = borders.top; + document.getElementById("rc-border-bottom").value = borders.bottom; + resizeCanvas(null); } From c7cacc37ca966c86852117db294417272b095817 Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Sun, 27 Sep 2020 13:08:48 +0200 Subject: [PATCH 42/46] Finally fixed friggin canvas trimming Proper history management must still be implemented. --- js/_pixelEditorUtility.js | 4 +-- js/_resizeCanvas.js | 65 +++++++++++++++++++++++++++++---------- 2 files changed, 49 insertions(+), 20 deletions(-) diff --git a/js/_pixelEditorUtility.js b/js/_pixelEditorUtility.js index eeac240..2708664 100644 --- a/js/_pixelEditorUtility.js +++ b/js/_pixelEditorUtility.js @@ -189,7 +189,5 @@ function getPixelPosition(index) { let x = linearIndex % layers[0].canvasSize[0]; let y = Math.floor(linearIndex / layers[0].canvasSize[0]); - console.log("pos: " + x + ", " + y); - - return [Math.round(x), Math.round(y)]; + return [Math.ceil(x), Math.ceil(y)]; } \ No newline at end of file diff --git a/js/_resizeCanvas.js b/js/_resizeCanvas.js index e1df23e..59a34fe 100644 --- a/js/_resizeCanvas.js +++ b/js/_resizeCanvas.js @@ -60,14 +60,14 @@ function rcChangedSize(event) { borders.bottom = bottom; } -function resizeCanvas(event, size) { +function resizeCanvas(event, size, customData) { let imageDatas = []; let leftOffset = 0; let topOffset = 0; let copiedDataIndex = 0; // If I'm undoing, I manually put the values in the window - if (size !== undefined) { + if (size != null) { document.getElementById("rc-width").value = size.x; document.getElementById("rc-height").value = size.y; @@ -154,10 +154,18 @@ function resizeCanvas(event, size) { console.log('Pivot does not exist, please report an issue at https://github.com/lospec/pixel-editor'); break; } - + for (let i=0; i= 0; i-=4) { if (!isPixelEmpty( - [imageData.data[i], imageData.data[i + 1], - -imageData.data[i + 2], imageData.data[i + 3]])) { + [imageData.data[i - 3], imageData.data[i - 2], + -imageData.data[i - 1], imageData.data[i]])) { pixelPosition = getPixelPosition(i); + // max x if (pixelPosition[0] > maxX) { maxX = pixelPosition[0]; } - else if (pixelPosition[0] < minX) { + // min x + if (pixelPosition[0] < minX) { minX = pixelPosition[0]; } - + // max y if (pixelPosition[1] > maxY) { maxY = pixelPosition[1]; } - else if (pixelPosition[1] < minY) { + // min y + if (pixelPosition[1] < minY) { minY = pixelPosition[1]; } } } } - borders.right = maxX - layers[0].canvasSize[0]; + tmp = minY; + minY = maxY; + maxY = tmp; + + minY = layers[0].canvasSize[1] - minY; + maxY = layers[0].canvasSize[1] - maxY; + + borders.right = (maxX - layers[0].canvasSize[0]) + 1; borders.left = -minX; - borders.top = maxY - layers[0].canvasSize[1]; - borders.bottom = minY; + borders.top = maxY - layers[0].canvasSize[1] + 1; + borders.bottom = -minY; + + // Saving the data + for (let i=0; i Date: Tue, 29 Sep 2020 19:10:50 +0200 Subject: [PATCH 43/46] Finished todo list for current contribution Fixed canvas trimming history, added proper setting management for the pixel grid. --- _ext/scripts/utilities/getSetValue.js | 1 + js/_history.js | 13 +++++++++++-- js/_pixelGrid.js | 2 +- js/_resizeCanvas.js | 18 +++++++++--------- js/_settings.js | 6 +++++- views/pixel-editor.hbs | 5 +---- 6 files changed, 28 insertions(+), 17 deletions(-) diff --git a/_ext/scripts/utilities/getSetValue.js b/_ext/scripts/utilities/getSetValue.js index eed10fd..f69e489 100644 --- a/_ext/scripts/utilities/getSetValue.js +++ b/_ext/scripts/utilities/getSetValue.js @@ -2,6 +2,7 @@ function getValue(elementId) { var element = (typeof elementId == 'string' ? document.getElementById(elementId) : elementId); + console.log("setting: " + elementId + ": " + element.value); return element.value; } diff --git a/js/_history.js b/js/_history.js index 19da676..652ffc6 100644 --- a/js/_history.js +++ b/js/_history.js @@ -36,10 +36,11 @@ function HistoryStateResizeSprite(xRatio, yRatio, algo, oldData) { saveHistoryState(this); } -function HistoryStateResizeCanvas(newSize, oldSize, imageDatas) { +function HistoryStateResizeCanvas(newSize, oldSize, imageDatas, trim) { this.oldSize = oldSize; this.newSize = newSize; this.imageDatas = imageDatas; + this.trim = trim; this.undo = function() { let dataIndex = 0; @@ -58,7 +59,15 @@ function HistoryStateResizeCanvas(newSize, oldSize, imageDatas) { }; this.redo = function() { - resizeCanvas(null, newSize); + console.log("trim: " + this.trim); + if (!this.trim) { + resizeCanvas(null, newSize); + undoStates.push(this); + } + else { + trimCanvas(null, false); + } + undoStates.push(this); }; diff --git a/js/_pixelGrid.js b/js/_pixelGrid.js index 26dd600..0c36c98 100644 --- a/js/_pixelGrid.js +++ b/js/_pixelGrid.js @@ -28,7 +28,7 @@ function fillPixelGrid() { // OPTIMIZABLE, could probably be a bit more elegant // Draw horizontal lines for (let i=0; iPixel grid
        - -
        -
        - +
        From 50d63026da207ccff3ef27b4f8b872cd0b1a2095 Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Tue, 29 Sep 2020 19:21:26 +0200 Subject: [PATCH 44/46] Added pivot svg icons --- _ext/svg/arrows/bottom.svg | 13 +++++++++++++ _ext/svg/arrows/bottomleft.svg | 13 +++++++++++++ _ext/svg/arrows/bottomright.svg | 13 +++++++++++++ _ext/svg/arrows/left.svg | 13 +++++++++++++ _ext/svg/arrows/middle.svg | 1 + _ext/svg/arrows/right.svg | 13 +++++++++++++ _ext/svg/arrows/top.svg | 13 +++++++++++++ _ext/svg/arrows/topleft.svg | 13 +++++++++++++ _ext/svg/arrows/topright.svg | 13 +++++++++++++ 9 files changed, 105 insertions(+) create mode 100644 _ext/svg/arrows/bottom.svg create mode 100644 _ext/svg/arrows/bottomleft.svg create mode 100644 _ext/svg/arrows/bottomright.svg create mode 100644 _ext/svg/arrows/left.svg create mode 100644 _ext/svg/arrows/middle.svg create mode 100644 _ext/svg/arrows/right.svg create mode 100644 _ext/svg/arrows/top.svg create mode 100644 _ext/svg/arrows/topleft.svg create mode 100644 _ext/svg/arrows/topright.svg diff --git a/_ext/svg/arrows/bottom.svg b/_ext/svg/arrows/bottom.svg new file mode 100644 index 0000000..af4022a --- /dev/null +++ b/_ext/svg/arrows/bottom.svg @@ -0,0 +1,13 @@ + + + + + + + + + diff --git a/_ext/svg/arrows/bottomleft.svg b/_ext/svg/arrows/bottomleft.svg new file mode 100644 index 0000000..343692d --- /dev/null +++ b/_ext/svg/arrows/bottomleft.svg @@ -0,0 +1,13 @@ + + + + + + + + + diff --git a/_ext/svg/arrows/bottomright.svg b/_ext/svg/arrows/bottomright.svg new file mode 100644 index 0000000..8cca929 --- /dev/null +++ b/_ext/svg/arrows/bottomright.svg @@ -0,0 +1,13 @@ + + + + + + + + + diff --git a/_ext/svg/arrows/left.svg b/_ext/svg/arrows/left.svg new file mode 100644 index 0000000..f7ff47a --- /dev/null +++ b/_ext/svg/arrows/left.svg @@ -0,0 +1,13 @@ + + + + + + + + + diff --git a/_ext/svg/arrows/middle.svg b/_ext/svg/arrows/middle.svg new file mode 100644 index 0000000..aa46824 --- /dev/null +++ b/_ext/svg/arrows/middle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/_ext/svg/arrows/right.svg b/_ext/svg/arrows/right.svg new file mode 100644 index 0000000..3ecd449 --- /dev/null +++ b/_ext/svg/arrows/right.svg @@ -0,0 +1,13 @@ + + + + + + + + + diff --git a/_ext/svg/arrows/top.svg b/_ext/svg/arrows/top.svg new file mode 100644 index 0000000..1d44872 --- /dev/null +++ b/_ext/svg/arrows/top.svg @@ -0,0 +1,13 @@ + + + + + + + + + diff --git a/_ext/svg/arrows/topleft.svg b/_ext/svg/arrows/topleft.svg new file mode 100644 index 0000000..9ee7f10 --- /dev/null +++ b/_ext/svg/arrows/topleft.svg @@ -0,0 +1,13 @@ + + + + + + + + + diff --git a/_ext/svg/arrows/topright.svg b/_ext/svg/arrows/topright.svg new file mode 100644 index 0000000..a845a01 --- /dev/null +++ b/_ext/svg/arrows/topright.svg @@ -0,0 +1,13 @@ + + + + + + + + + From f0fae3698d74e52ac5f9222d51475cbd0384f25b Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Tue, 29 Sep 2020 21:22:02 +0200 Subject: [PATCH 45/46] Fixed canvas resizing history bug --- js/_history.js | 5 ++--- js/_resizeCanvas.js | 11 ++++++++--- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/js/_history.js b/js/_history.js index 652ffc6..656d05d 100644 --- a/js/_history.js +++ b/js/_history.js @@ -46,7 +46,7 @@ function HistoryStateResizeCanvas(newSize, oldSize, imageDatas, trim) { let dataIndex = 0; console.log("breakpoint"); // Resizing the canvas - resizeCanvas(null, oldSize); + resizeCanvas(null, oldSize, null, false); // Putting the image datas for (let i=0; i Date: Wed, 30 Sep 2020 08:51:07 +0200 Subject: [PATCH 46/46] Fixed pixel grid being only on top of the first layer --- css/pixel-editor.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/pixel-editor.scss b/css/pixel-editor.scss index 239c2b6..98d3b9e 100644 --- a/css/pixel-editor.scss +++ b/css/pixel-editor.scss @@ -306,7 +306,7 @@ svg { } #pixel-grid { - z-index: 3; + z-index: 5000; background: transparent; }