From 8c94a951e29203263dac9a5d5f8f1a52e8c148d6 Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Wed, 4 Mar 2020 15:46:25 +0100 Subject: [PATCH] Started implementing preview rect At the moment there's a bug in the getCursorPos function, may have something to do with offsets. The rect is correctly drawn, but with a weird offset. Added vfx canvas for tools previews. --- css/pixel-editor.scss | 4 +- js/_consts.js | 2 + js/_getCursorPosition.js | 23 +++++++++ js/{_canvas.js => _layer.js} | 94 ++++++++++++++++++------------------ js/_mouseEvents.js | 6 +-- js/_newPixel.js | 6 +-- js/_rectSelect.js | 42 ++++++++++++++-- js/_variables.js | 3 +- js/pixel-editor.js | 3 +- 9 files changed, 120 insertions(+), 63 deletions(-) create mode 100644 js/_consts.js rename js/{_canvas.js => _layer.js} (95%) diff --git a/css/pixel-editor.scss b/css/pixel-editor.scss index dabc005..f22330f 100644 --- a/css/pixel-editor.scss +++ b/css/pixel-editor.scss @@ -63,8 +63,8 @@ svg { background:transparent; } -#pixel-canvas { - z-index:1000; +#vfx-canvas { + z-index:-5000; background:transparent; } diff --git a/js/_consts.js b/js/_consts.js new file mode 100644 index 0000000..de4fe38 --- /dev/null +++ b/js/_consts.js @@ -0,0 +1,2 @@ +const MIN_Z_INDEX = -5000; +const MAX_Z_INDEX = 5000; \ No newline at end of file diff --git a/js/_getCursorPosition.js b/js/_getCursorPosition.js index b8d0715..6aa3bc0 100644 --- a/js/_getCursorPosition.js +++ b/js/_getCursorPosition.js @@ -2,6 +2,7 @@ function getCursorPosition(e) { var x; var y; + if (e.pageX != undefined && e.pageY != undefined) { x = e.pageX; y = e.pageY; @@ -14,5 +15,27 @@ function getCursorPosition(e) { x -= canvas.offsetLeft; y -= canvas.offsetTop; + return [x,y]; +} + +// TODO: apply the function below to every getCursorPosition call + +//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/_canvas.js b/js/_layer.js similarity index 95% rename from js/_canvas.js rename to js/_layer.js index dafb44a..f975a22 100644 --- a/js/_canvas.js +++ b/js/_layer.js @@ -1,48 +1,48 @@ -/** Handler class for a single canvas (a single layer) - * - * @param width Canvas width - * @param height Canvas height - * @param canvas HTML canvas element - */ -function Canvas(width, height, canvas) { - this.canvasSize = [width, height], - this.canvas = canvas, - this.context = this.canvas.getContext("2d"), - // Initializes the canvas - this.initialize = function() { - 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]; - this.canvas.style.width = (this.canvas.width*zoom)+'px'; - this.canvas.style.height = (this.canvas.height*zoom)+'px'; - - //unhide canvas - this.canvas.style.display = 'block'; - - //center canvas in window - this.canvas.style.left = 64+canvasView.clientWidth/2-(this.canvasSize[0]*zoom/2)+'px'; - this.canvas.style.top = 48+canvasView.clientHeight/2-(this.canvasSize[1]*zoom/2)+'px'; - }, - // Resizes canvas - this.resize = function() { - let newWidth = (this.canvas.width * zoom) + 'px'; - let newHeight = (this.canvas.height *zoom)+ 'px'; - - this.canvas.style.width = newWidth; - this.canvas.style.height = newHeight; - }, - // Copies the otherCanvas' position and size - this.copyData = function(otherCanvas) { - this.canvas.style.width = otherCanvas.canvas.style.width; - this.canvas.style.height = otherCanvas.canvas.style.height; - - this.canvas.style.left = otherCanvas.canvas.style.left; - this.canvas.style.top = otherCanvas.canvas.style.top; - } +/** Handler class for a single canvas (a single layer) + * + * @param width Canvas width + * @param height Canvas height + * @param canvas HTML canvas element + */ +function Layer(width, height, canvas) { + this.canvasSize = [width, height], + this.canvas = canvas, + this.context = this.canvas.getContext("2d"), + // Initializes the canvas + this.initialize = function() { + 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]; + this.canvas.style.width = (this.canvas.width*zoom)+'px'; + this.canvas.style.height = (this.canvas.height*zoom)+'px'; + + //unhide canvas + this.canvas.style.display = 'block'; + + //center canvas in window + this.canvas.style.left = 64+canvasView.clientWidth/2-(this.canvasSize[0]*zoom/2)+'px'; + this.canvas.style.top = 48+canvasView.clientHeight/2-(this.canvasSize[1]*zoom/2)+'px'; + }, + // Resizes canvas + this.resize = function() { + let newWidth = (this.canvas.width * zoom) + 'px'; + let newHeight = (this.canvas.height *zoom)+ 'px'; + + this.canvas.style.width = newWidth; + this.canvas.style.height = newHeight; + }, + // Copies the otherCanvas' position and size + this.copyData = function(otherCanvas) { + this.canvas.style.width = otherCanvas.canvas.style.width; + this.canvas.style.height = otherCanvas.canvas.style.height; + + this.canvas.style.left = otherCanvas.canvas.style.left; + this.canvas.style.top = otherCanvas.canvas.style.top; + } } \ No newline at end of file diff --git a/js/_mouseEvents.js b/js/_mouseEvents.js index b04116f..8e658e1 100644 --- a/js/_mouseEvents.js +++ b/js/_mouseEvents.js @@ -110,7 +110,7 @@ window.addEventListener("mouseup", function (mouseEvent) { } } else if (currentTool == 'rectselect') { - endRectSelection(); + endRectSelection(mouseEvent); } dragging = false; @@ -241,10 +241,10 @@ function draw (mouseEvent) { else if (currentTool == 'rectselect') { if (dragging && !isRectSelecting) { isRectSelecting = true; - startRectSelection(); + startRectSelection(mouseEvent); } else if (dragging && isRectSelecting) { - updateRectSelection(); + updateRectSelection(mouseEvent); } } } diff --git a/js/_newPixel.js b/js/_newPixel.js index cd352ed..6bffd8a 100644 --- a/js/_newPixel.js +++ b/js/_newPixel.js @@ -1,15 +1,15 @@ function newPixel (width, height, palette) { // Setting the current layer - currentLayer = new Canvas(width, height, canvas); + currentLayer = new Layer(width, height, canvas); currentLayer.initialize(); // Adding the checkerboard behind it - checkerBoard = new Canvas(width, height, checkerBoardCanvas); + checkerBoard = new Layer(width, height, checkerBoardCanvas); checkerBoard.initialize(); // Creating the vfx layer on top of everything - VFXLayer = new Canvas(width, height, VFXCanvas); + VFXLayer = new Layer(width, height, VFXCanvas); VFXLayer.initialize(); canvasSize = currentLayer.canvasSize; diff --git a/js/_rectSelect.js b/js/_rectSelect.js index 3b795c7..2f8b8da 100644 --- a/js/_rectSelect.js +++ b/js/_rectSelect.js @@ -1,13 +1,45 @@ var isRectSelecting = false; +let startX; +let startY; -function startRectSelection() { +function startRectSelection(mouseEvent) { + // Putting the vfx layer on top of everything + VFXCanvas.style.zIndex = MAX_Z_INDEX; console.log("Started selecting"); + // Saving the start coords of the rect + cursorPos = getCursorPositionRelative(mouseEvent, VFXCanvas) + startX = cursorPos[0]; + startY = cursorPos[1]; + + // Drawing the rect + drawRect(startX, startY); } -function updateRectSelection() { - console.log("Editing selecting"); +function updateRectSelection(mouseEvent) { + pos = getCursorPositionRelative(mouseEvent, VFXCanvas); + + // Drawing the rect + drawRect(pos[0], pos[1]); } -function endRectSelection() { +function endRectSelection(mouseEvent) { console.log("Finished selecting"); -} \ No newline at end of file + // Putting the vfx layer behind everything + //VFXCanvas.style.zIndex = MIN_Z_INDEX; + isRectSelecting = false; +} + +function drawRect(x, y) { + console.log("Currently selecting"); + // Getting the vfx context + let vfxContext = VFXCanvas.getContext("2d"); + + // Clearing the vfx canvas + vfxContext.clearRect(0, 0, VFXCanvas.width, VFXCanvas.height); + // Drawing the rect + vfxContext.beginPath(); + vfxContext.rect(startX, startY, x - startX, y - startY); + vfxContext.stroke(); +} + +// TODO: esc to exit selection mode \ No newline at end of file diff --git a/js/_variables.js b/js/_variables.js index 23450ba..b822756 100644 --- a/js/_variables.js +++ b/js/_variables.js @@ -41,5 +41,4 @@ var currentLayer; // VFX layer used to draw previews of the selection and things like that var VFXLayer; // VFX canvas -var VFXCanvas = document.getElementById("vfx-canvas"); - +var VFXCanvas = document.getElementById("vfx-canvas"); \ No newline at end of file diff --git a/js/pixel-editor.js b/js/pixel-editor.js index 6556a3e..06fa35b 100644 --- a/js/pixel-editor.js +++ b/js/pixel-editor.js @@ -17,6 +17,7 @@ /**init**/ +//=include _consts.js //=include _variables.js //=include _settings.js @@ -42,7 +43,7 @@ //=include _deleteColor.js //=include _replaceAllOfColor.js //=include _checkerboard.js -//=include _canvas.js +//=include _layer.js /**load file**/