diff --git a/js/ui/floating/layers.js b/js/ui/floating/layers.js index ba2fdd3..ebed104 100644 --- a/js/ui/floating/layers.js +++ b/js/ui/floating/layers.js @@ -298,23 +298,13 @@ const uil = { canvas.width = bb.w; canvas.height = bb.h; if (options.includeBg) - ctx.drawImage( - bgLayer.canvas, - bb.x + bgLayer.origin.x, - bb.y + bgLayer.origin.y, - bb.w, - bb.h, - 0, - 0, - bb.w, - bb.h - ); + ctx.drawImage(bgLayer.canvas, bb.x, bb.y, bb.w, bb.h, 0, 0, bb.w, bb.h); this.layers.forEach((layer) => { if (!layer.hidden) ctx.drawImage( layer.layer.canvas, - bb.x + layer.layer.origin.x, - bb.y + layer.layer.origin.y, + bb.x, + bb.y, bb.w, bb.h, 0, diff --git a/js/ui/tool/dream.js b/js/ui/tool/dream.js index 70859bc..a0ef261 100644 --- a/js/ui/tool/dream.js +++ b/js/ui/tool/dream.js @@ -44,7 +44,7 @@ const _monitorProgress = (bb, oncheck = null) => { layer.ctx.fillRect(1, 1, bb.w * data.progress, 10); // Draw Progress Text - layer.ctx.clearRect(0, 11, expanded.w, 40); + layer.clear(); layer.ctx.fillStyle = "#FFF"; layer.ctx.fillRect(0, 15, 60, 25); @@ -295,8 +295,7 @@ const _generate = async (endpoint, request, bb, options = {}) => { }); const redraw = (url = images[at]) => { - if (url === null) - layer.ctx.clearRect(0, 0, layer.canvas.width, layer.canvas.height); + if (url === null) layer.clear(); if (!url) return; const img = new Image(); diff --git a/js/ui/tool/interrogate.js b/js/ui/tool/interrogate.js index 209ec71..2818196 100644 --- a/js/ui/tool/interrogate.js +++ b/js/ui/tool/interrogate.js @@ -4,10 +4,8 @@ const interrogateTool = () => "Interrogate", (state, opt) => { // Draw new cursor immediately - ovCtx.clearRect(0, 0, ovCanvas.width, ovCanvas.height); - state.mousemovecb({ - ...mouse.coords.world.pos, - }); + ovLayer.clear(); + state.redraw(); // Start Listeners mouse.listen.world.onmousemove.on(state.mousemovecb); @@ -37,8 +35,7 @@ const interrogateTool = () => state.invertMask = false; state.overMaskPx = 0; - state.erasePrevReticle = () => - ovCtx.clearRect(0, 0, ovCanvas.width, ovCanvas.height); + state.erasePrevReticle = () => ovLayer.clear(); state.mousemovecb = (evn) => { state.erasePrevReticle(); diff --git a/js/ui/tool/select.js b/js/ui/tool/select.js index 7def02e..dd228f3 100644 --- a/js/ui/tool/select.js +++ b/js/ui/tool/select.js @@ -4,7 +4,7 @@ const selectTransformTool = () => "Select Image", (state, opt) => { // Draw new cursor immediately - ovCtx.clearRect(0, 0, ovCanvas.width, ovCanvas.height); + ovLayer.clear(); state.movecb(mouse.coords.world.pos); // Canvas left mouse handlers @@ -46,7 +46,7 @@ const selectTransformTool = () => state.reset(); // Resets cursor - ovCtx.clearRect(0, 0, ovCanvas.width, ovCanvas.height); + ovLayer.clear(); // Clears overlay imageCollection.inputElement.style.cursor = "auto"; @@ -80,7 +80,7 @@ const selectTransformTool = () => state.lastMouseMove = null; state.redraw = () => { - ovCtx.clearRect(0, 0, ovCanvas.width, ovCanvas.height); + ovLayer.clear(); state.movecb(state.lastMouseMove); }; @@ -186,7 +186,7 @@ const selectTransformTool = () => // Mouse move handler. As always, also renders cursor state.movecb = (evn) => { - ovCtx.clearRect(0, 0, ovCanvas.width, ovCanvas.height); + ovLayer.clear(); uiCtx.clearRect(0, 0, uiCanvas.width, uiCanvas.height); imageCollection.inputElement.style.cursor = "auto"; state.lastMouseTarget = evn.target;