mirror of
https://github.com/lospec/pixel-editor.git
synced 2023-08-10 21:12:51 +03:00
Finished basic canvas resizing
Must test pivots for negative values
This commit is contained in:
unsettledgames
parent
592283321a
commit
5e2a3e46e1
@ -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);
|
||||
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,18 +1022,36 @@ 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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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<buttons.length; i++) {
|
||||
buttons[i].addEventListener("click", changePivot);
|
||||
if (buttons[i].getAttribute("value").includes("middle")) {
|
||||
currentPivotObject = buttons[i];
|
||||
}
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
function changedBorder(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) {
|
||||
let widthOffset = document.getElementById("rc-width").value - layers[0].canvasSize[0];
|
||||
let heightOffset = document.getElementById("rc-height").value - layers[0].canvasSize[1];
|
||||
|
||||
let left = Math.round(widthOffset / 2);
|
||||
let right = widthOffset - left;
|
||||
let top = Math.round(heightOffset / 2);
|
||||
let bottom = heightOffset - top;
|
||||
|
||||
document.getElementById("rc-border-left").value = left;
|
||||
document.getElementById("rc-border-right").value = right;
|
||||
document.getElementById("rc-border-top").value = top;
|
||||
document.getElementById("rc-border-bottom").value = bottom;
|
||||
|
||||
borders.left = left;
|
||||
borders.right = right;
|
||||
borders.top = top;
|
||||
borders.bottom = bottom;
|
||||
}
|
||||
|
||||
function resizeCanvas(event) {
|
||||
let imageDatas = [];
|
||||
let leftOffset = 0;
|
||||
let topOffset = 0;
|
||||
let copiedDataIndex = 0;
|
||||
|
||||
rcUpdateBorders();
|
||||
changedSize();
|
||||
|
||||
// Save all imageDatas
|
||||
for (let i=0; i<layers.length; i++) {
|
||||
@ -34,21 +82,79 @@ function resizeCanvas(event) {
|
||||
|
||||
// Resize the canvases
|
||||
for (let i=0; i<layers.length; i++) {
|
||||
layers[i].canvasSize[0] += borders.left + borders.right;
|
||||
layers[i].canvasSize[1] += borders.top + borders.bottom;
|
||||
layers[i].canvasSize[0] = parseInt(layers[i].canvasSize[0]) + borders.left + borders.right;
|
||||
layers[i].canvasSize[1] = parseInt(layers[i].canvasSize[1]) + borders.top + borders.bottom;
|
||||
|
||||
layers[i].canvas.width = layers[i].canvasSize[0];
|
||||
layers[i].canvas.height = layers[i].canvasSize[1];
|
||||
|
||||
layers[i].resize();
|
||||
layers[i].context.fillStyle = currentGlobalColor;
|
||||
}
|
||||
// Clear the canvases
|
||||
|
||||
// Regenerate the checkerboard
|
||||
fillCheckerboard();
|
||||
|
||||
// Put the imageDatas in the right position
|
||||
// Must crop the imageDatas if the canvas has being reduced
|
||||
switch (pivot)
|
||||
{
|
||||
case 'topleft':
|
||||
leftOffset = 0;
|
||||
topOffset = 0;
|
||||
break;
|
||||
case 'top':
|
||||
leftOffset = (borders.left + borders.right) / 2;
|
||||
topOffset = 0;
|
||||
break;
|
||||
case 'topright':
|
||||
leftOffset = borders.left + borders.right;
|
||||
topOffset = 0;
|
||||
break;
|
||||
case 'left':
|
||||
leftOffset = 0;
|
||||
topOffset = (borders.top + borders.bottom) / 2;
|
||||
break;
|
||||
case 'middle':
|
||||
leftOffset = (borders.left + borders.right) / 2;
|
||||
topOffset = (borders.top + borders.bottom) / 2;
|
||||
break;
|
||||
case 'right':
|
||||
leftOffset = borders.left + borders.right;
|
||||
topOffset = (borders.top + borders.bottom) / 2;
|
||||
break;
|
||||
case 'bottomleft':
|
||||
leftOffset = 0;
|
||||
topOffset = borders.top + borders.bottom;
|
||||
break;
|
||||
case 'bottom':
|
||||
leftOffset = (borders.left + borders.right) / 2;
|
||||
topOffset = borders.top + borders.bottom;
|
||||
break;
|
||||
case 'bottomright':
|
||||
leftOffset = borders.left + borders.right;
|
||||
topOffset = borders.top + borders.bottom;
|
||||
break;
|
||||
default:
|
||||
console.log('now thats a very weird pivot');
|
||||
break;
|
||||
}
|
||||
|
||||
/*
|
||||
leftOffset = Math.abs(leftOffset);
|
||||
topOffset = Math.abs(topOffset);
|
||||
*/
|
||||
|
||||
for (let i=0; i<layers.length; i++) {
|
||||
if (layers[i].menuEntry != null) {
|
||||
layers[i].context.putImageData(imageDatas[copiedDataIndex], leftOffset, topOffset);
|
||||
copiedDataIndex++;
|
||||
}
|
||||
}
|
||||
|
||||
closeDialogue();
|
||||
}
|
||||
|
||||
function rcUpdateBorders() {
|
||||
console.log(document.getElementById("rc-border-left").value);
|
||||
|
||||
// Getting input
|
||||
borders.left = document.getElementById("rc-border-left").value;
|
||||
borders.right = document.getElementById("rc-border-right").value;
|
||||
@ -60,11 +166,14 @@ function rcUpdateBorders() {
|
||||
borders.right == "" ? borders.right = 0 : borders.right = Math.round(parseInt(borders.right));
|
||||
borders.top == "" ? borders.top = 0 : borders.top = Math.round(parseInt(borders.top));
|
||||
borders.bottom == "" ? borders.bottom = 0 : borders.bottom = Math.round(parseInt(borders.bottom));
|
||||
|
||||
console.log(borders);
|
||||
}
|
||||
|
||||
function changePivot(event) {
|
||||
pivot = event.target.getAttribute("value");
|
||||
|
||||
// Setting the selected class
|
||||
currentPivotObject.classList.remove("rc-selected-pivot");
|
||||
currentPivotObject = event.target;
|
||||
currentPivotObject.classList.add("rc-selected-pivot");
|
||||
}
|
||||
|
||||
|
||||
@ -260,14 +260,31 @@
|
||||
<button class="pivot-button" value="top">{{svg "arrows/top.svg" width="20" height="20"}}</button>
|
||||
<button class="pivot-button" value="topright">{{svg "arrows/topright.svg" width="20" height="20"}}</button>
|
||||
<button class="pivot-button" value="left">{{svg "arrows/left.svg" width="20" height="20"}}</button>
|
||||
<button class="pivot-button" value="middle">{{svg "arrows/middle.svg" width="20" height="20"}}</button>
|
||||
<button class="pivot-button rc-selected-pivot" value="middle">{{svg "arrows/middle.svg" width="20" height="20"}}</button>
|
||||
<button class="pivot-button" value="right">{{svg "arrows/right.svg" width="20" height="20"}}</button>
|
||||
<button class="pivot-button" value="bottomleft">{{svg "arrows/bottomleft.svg" width="20" height="20"}}</button>
|
||||
<button class="pivot-button" value="bottom">{{svg "arrows/bottom.svg" width="20" height="20"}}</button>
|
||||
<button class="pivot-button" value="bottomright">{{svg "arrows/bottomright.svg" width="20" height="20"}}</button>
|
||||
</span>
|
||||
<!-- SIZE-->
|
||||
<span id = "rc-size-menu">
|
||||
<h2>Size</h2>
|
||||
<div>
|
||||
<span>
|
||||
Width: <input id="rc-width" type="number" default="0" step="1"
|
||||
value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
|
||||
</span>
|
||||
|
||||
<span>
|
||||
Height: <input id="rc-height" default="0" step="1" type="number"
|
||||
value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
<!--BORDERS-->
|
||||
<span id = "borders-menu">
|
||||
<h2>Borders offsets</h2>
|
||||
<div>
|
||||
<span>
|
||||
Left: <input id="rc-border-left" type="number" default="0" step="1"
|
||||
value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
|
||||
@ -287,7 +304,7 @@
|
||||
Bottom: <input id="rc-border-bottom" default="0" step="1" type="number"
|
||||
value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
<button id = "resize-canvas-confirm">Resize canvas</button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user