mirror of
https://github.com/lospec/pixel-editor.git
synced 2023-08-10 21:12:51 +03:00
Merge pull request #2 from unsettledgames/minor-changes
Merge minor changes
This commit is contained in:
Nicola
GitHub
commit
7583adb3d1
@ -947,6 +947,102 @@ svg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#resize-canvas {
|
||||
display:flex;
|
||||
position:relative;
|
||||
flex-wrap:wrap;
|
||||
}
|
||||
|
||||
#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:color(base, background);
|
||||
border:none;
|
||||
|
||||
path {
|
||||
fill:color(menu, foreground);
|
||||
}
|
||||
transition: background 150ms ease-in-out,
|
||||
transform 150ms ease;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
}
|
||||
|
||||
button:hover,
|
||||
button:focus {
|
||||
cursor:pointer;
|
||||
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: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 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@ -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]);
|
||||
|
||||
|
||||
@ -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()});
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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]];
|
||||
}
|
||||
@ -30,7 +30,5 @@ function line(x0,y0,x1,y1, brushSize) {
|
||||
err +=dx;
|
||||
y0+=sy;
|
||||
}
|
||||
|
||||
console.log(x0 + ", " + x1);
|
||||
}
|
||||
}
|
||||
@ -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?')) {
|
||||
|
||||
@ -15,25 +15,5 @@ function getCursorPosition(e) {
|
||||
x -= canvas.offsetLeft;
|
||||
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];
|
||||
}
|
||||
return [Math.round(x), Math.round(y)];
|
||||
}
|
||||
28
js/_layer.js
28
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;
|
||||
@ -219,9 +244,10 @@ class Layer {
|
||||
layer.menuEntry.classList.add("selected-layer");
|
||||
currentLayer = layer;
|
||||
}
|
||||
|
||||
/*
|
||||
canvas = currentLayer.canvas;
|
||||
context = currentLayer.context;
|
||||
*/
|
||||
}
|
||||
|
||||
toggleLock() {
|
||||
|
||||
@ -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<layers.length; i++) {
|
||||
layers[i].copyData(layers[0]);
|
||||
@ -284,7 +273,7 @@ function draw (mouseEvent) {
|
||||
}
|
||||
else if (currentTool.name == 'resizebrush' && dragging) {
|
||||
//get new brush size based on x distance from original clicking location
|
||||
var distanceFromClick = cursorLocation[0] - lastPos[0];
|
||||
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);
|
||||
@ -294,31 +283,27 @@ function draw (mouseEvent) {
|
||||
tool.pencil.brushSize = Math.max(1,newBrushSize);
|
||||
|
||||
//fix offset so the cursor stays centered
|
||||
brushPreview.style.left = lastPos[0] + currentLayer.canvas.offsetLeft - tool.pencil.brushSize * zoom / 2 + 'px';
|
||||
brushPreview.style.top = lastPos[1] + currentLayer.canvas.offsetTop - tool.pencil.brushSize * zoom / 2 + 'px';
|
||||
|
||||
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] - lastPos[0];
|
||||
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
|
||||
brushPreview.style.left = lastPos[0] + currentLayer.canvas.offsetLeft - tool.eraser.brushSize * zoom / 2 + 'px';
|
||||
brushPreview.style.top = lastPos[1] + currentLayer.canvas.offsetTop - tool.eraser.brushSize * zoom / 2 + 'px';
|
||||
|
||||
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] - lastPos[0];
|
||||
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);
|
||||
@ -327,10 +312,8 @@ function draw (mouseEvent) {
|
||||
//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
|
||||
brushPreview.style.left = lastPos[0] + currentLayer.canvas.offsetLeft - tool.rectangle.brushSize * zoom / 2 + 'px';
|
||||
brushPreview.style.top = lastPos[1] + currentLayer.canvas.offsetTop - tool.rectangle.brushSize * zoom / 2 + 'px';
|
||||
|
||||
//fix offset so the cursor stays centered
|
||||
tool.rectangle.moveBrushPreview(lastMouseClickPos);
|
||||
currentTool.updateCursor();
|
||||
}
|
||||
else if (currentTool.name == 'rectselect') {
|
||||
@ -356,25 +339,21 @@ function draw (mouseEvent) {
|
||||
}
|
||||
}
|
||||
|
||||
//mousewheel scrroll
|
||||
//mousewheel scroll
|
||||
canvasView.addEventListener("wheel", function(mouseEvent){
|
||||
|
||||
if (currentTool.name == 'zoom' || mouseEvent.altKey) {
|
||||
let mode;
|
||||
if (mouseEvent.deltaY < 0){
|
||||
mode = 'in';
|
||||
}
|
||||
else if (mouseEvent.deltaY > 0) {
|
||||
mode = 'out';
|
||||
}
|
||||
|
||||
// Changing zoom and position of the first layer
|
||||
changeZoom(layers[0], mode, getCursorPosition(mouseEvent));
|
||||
|
||||
for (let i=1; i<layers.length; i++) {
|
||||
// Copying first layer's data into the other layers
|
||||
layers[i].copyData(layers[0]);
|
||||
}
|
||||
let mode;
|
||||
if (mouseEvent.deltaY < 0){
|
||||
mode = 'in';
|
||||
}
|
||||
else if (mouseEvent.deltaY > 0) {
|
||||
mode = 'out';
|
||||
}
|
||||
|
||||
// Changing zoom and position of the first layer
|
||||
changeZoom(layers[0], mode, getCursorPosition(mouseEvent));
|
||||
|
||||
for (let i=1; i<layers.length; i++) {
|
||||
// Copying first layer's data into the other layers
|
||||
layers[i].copyData(layers[0]);
|
||||
}
|
||||
});
|
||||
@ -7,9 +7,8 @@ function newPixel (width, height, editorMode, fileContent = null) {
|
||||
if (firstPixel) {
|
||||
layerListEntry = layerList.firstElementChild;
|
||||
|
||||
// Setting up the current layer
|
||||
currentLayer = new Layer(width, height, canvas, layerListEntry);
|
||||
canvas.style.zIndex = 2;
|
||||
currentLayer.canvas.style.zIndex = 2;
|
||||
}
|
||||
else {
|
||||
let nLayers = layers.length;
|
||||
@ -40,9 +39,7 @@ function newPixel (width, height, editorMode, fileContent = null) {
|
||||
layers[1] = new Layer(width, height, layers[1].canvas, layers[1].menuEntry);
|
||||
currentLayer = layers[1];
|
||||
|
||||
canvas = currentLayer.canvas;
|
||||
context = currentLayer.context;
|
||||
canvas.style.zIndex = 2;
|
||||
currentLayer.canvas.style.zIndex = 2;
|
||||
}
|
||||
|
||||
// Adding the checkerboard behind it
|
||||
|
||||
@ -53,8 +53,6 @@ function endRectDrawing(mouseEvent) {
|
||||
startRectY = tmp;
|
||||
}
|
||||
|
||||
let hexColor = hexToRgb(currentLayer.context.fillStyle);
|
||||
|
||||
// Resetting this
|
||||
isDrawingRect = false;
|
||||
// Drawing the rect
|
||||
|
||||
46
js/_resizeCanvas.js
Normal file
46
js/_resizeCanvas.js
Normal file
@ -0,0 +1,46 @@
|
||||
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<buttons.length; i++) {
|
||||
buttons[i].addEventListener("click", changePivot);
|
||||
}
|
||||
}
|
||||
|
||||
function changePivot(event) {
|
||||
console.log("sas");
|
||||
console.log(event.target);
|
||||
}
|
||||
|
||||
// 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
|
||||
@ -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';
|
||||
}
|
||||
34
js/_tools.js
34
js/_tools.js
@ -64,6 +64,40 @@ class Tool {
|
||||
//change cursor
|
||||
this.updateCursor();
|
||||
}
|
||||
|
||||
updateCursor () {
|
||||
//switch to that tools cursor
|
||||
canvasView.style.cursor = this.cursor || 'default';
|
||||
|
||||
//if the tool uses a brush preview, make it visible and update the size
|
||||
if (this.brushPreview) {
|
||||
//console.log('brush size',this.currentBrushSize)
|
||||
brushPreview.style.display = 'block';
|
||||
brushPreview.style.width = this.currentBrushSize * zoom + 'px';
|
||||
brushPreview.style.height = this.currentBrushSize * zoom + 'px';
|
||||
}
|
||||
|
||||
//show / hide eyedropper color preview
|
||||
if (this.eyedropperPreview) eyedropperPreview.style.display = 'block';
|
||||
else eyedropperPreview.style.display = 'none';
|
||||
|
||||
//moveSelection
|
||||
if (currentTool.name == 'moveselection') {
|
||||
if (cursorInSelectedArea()) {
|
||||
canMoveSelection = true;
|
||||
canvasView.style.cursor = 'move';
|
||||
brushPreview.style.display = 'none';
|
||||
}
|
||||
else {
|
||||
canvasView.style.cursor = 'crosshair';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -1,35 +0,0 @@
|
||||
|
||||
|
||||
//set the correct cursor for the current tool
|
||||
Tool.prototype.updateCursor = function () {
|
||||
//console.log('updateCursor()', currentTool)
|
||||
|
||||
//switch to that tools cursor
|
||||
canvasView.style.cursor = this.cursor || 'default';
|
||||
|
||||
//if the tool uses a brush preview, make it visible and update the size
|
||||
if (this.brushPreview) {
|
||||
//console.log('brush size',this.currentBrushSize)
|
||||
brushPreview.style.display = 'block';
|
||||
brushPreview.style.width = this.currentBrushSize * zoom + 'px';
|
||||
brushPreview.style.height = this.currentBrushSize * zoom + 'px';
|
||||
}
|
||||
|
||||
//show / hide eyedropper color preview
|
||||
if (this.eyedropperPreview) eyedropperPreview.style.display = 'block';
|
||||
else eyedropperPreview.style.display = 'none';
|
||||
|
||||
//moveSelection
|
||||
if (currentTool.name == 'moveselection') {
|
||||
if (cursorInSelectedArea()) {
|
||||
canMoveSelection = true;
|
||||
canvasView.style.cursor = 'move';
|
||||
brushPreview.style.display = 'none';
|
||||
}
|
||||
else {
|
||||
canvasView.style.cursor = 'crosshair';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*global Tool, dragging, canvasView, brushPreview, canMoveSelection, cursorInSelectedArea, eyedropperPreview, zoom, currentTool */
|
||||
@ -1,7 +1,7 @@
|
||||
//init variables
|
||||
var canvasSize,zoom;
|
||||
var dragging = false;
|
||||
var lastPos = [0,0];
|
||||
var lastMouseClickPos = [0,0];
|
||||
var dialogueOpen = false;
|
||||
var documentCreated = false;
|
||||
var pixelEditorMode;
|
||||
@ -26,7 +26,6 @@ var popUpContainer = document.getElementById("pop-up-container");
|
||||
|
||||
// main canvas
|
||||
var canvas = document.getElementById('pixel-canvas');
|
||||
var context = canvas.getContext('2d');
|
||||
var currentGlobalColor;
|
||||
|
||||
// Layers
|
||||
|
||||
@ -44,6 +44,7 @@
|
||||
//=include _checkerboard.js
|
||||
//=include _layer.js
|
||||
//=include _copyPaste.js
|
||||
//=include _resizeCanvas.js
|
||||
|
||||
/**load file**/
|
||||
//=include _loadImage.js
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
|
||||
new Tool('rectselect', {
|
||||
cursor: 'crosshair',
|
||||
brushPreview: true,
|
||||
});
|
||||
|
||||
|
||||
|
||||
@ -52,6 +52,8 @@
|
||||
<li>
|
||||
<button>Edit</button>
|
||||
<ul>
|
||||
<li><button id="resize-canvas-button" onclick = "openResizeCanvasWindow()">Resize canvas</button></li>
|
||||
<li><button id="resize-sprite-button">Resize sprite</button></li>
|
||||
<li><button id="undo-button" class="disabled">Undo</button></li>
|
||||
<li><button id="redo-button" class="disabled">Redo</button></li>
|
||||
</ul>
|
||||
@ -187,6 +189,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- TOOL PREVIEWS -->
|
||||
<div id="eyedropper-preview"></div>
|
||||
<div id="brush-preview"></div>
|
||||
|
||||
@ -217,7 +220,8 @@
|
||||
{{svg "adjust.svg" width="20" height="20" }}
|
||||
</div>
|
||||
|
||||
<div id="pop-up-container">
|
||||
<div id="pop-up-container" id = "new-pixel-container">
|
||||
<!-- NEW PIXEL -->
|
||||
<div id="new-pixel">
|
||||
<button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
|
||||
<h1>New Pixel</h1>
|
||||
@ -245,6 +249,44 @@
|
||||
<button id="create-button" class="default">Create</button>
|
||||
</div>
|
||||
</div>
|
||||
<!--CANVAS RESIZE-->
|
||||
<div id = "resize-canvas">
|
||||
<button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
|
||||
<h1>Resize canvas</h1>
|
||||
|
||||
<!--PIVOTS-->
|
||||
<span id = "pivot-menu">
|
||||
<button class="pivot-button" value="topleft">{{svg "arrows/topleft.svg" width="20" height="20"}}</button>
|
||||
<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" 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>
|
||||
<!--BORDERS-->
|
||||
<span id = "borders-menu">
|
||||
<span>
|
||||
Left: <input id="border-left" value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
|
||||
</span>
|
||||
|
||||
<span>
|
||||
Right: <input id="border-right" value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
|
||||
</span>
|
||||
|
||||
<span>
|
||||
Top: <input id="border-top" value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
|
||||
</span>
|
||||
|
||||
<span>
|
||||
Bottom: <input id="border-bottom" value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
|
||||
</span>
|
||||
|
||||
<button id = "resize-canvas-confirm">Resize canvas</button>
|
||||
</span>
|
||||
</div>
|
||||
<div id="help">
|
||||
<button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
|
||||
<h1>Help</h1>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user