diff --git a/js/infinity.js b/js/infinity.js deleted file mode 100644 index f1aef79..0000000 --- a/js/infinity.js +++ /dev/null @@ -1,112 +0,0 @@ -const infinity = { - _init() { - console.info("[infinity] Loading infinity lib"); - infinity._canvas_update_size(); - - // Add event handlers - window.onresize = infinity._canvas_update_size; - - // Add draw loop - infinity._draw(); - }, - _canvas_update_size() { - // TEMPORARY - // TODO: Remove this for dynamic canvas sizing - Array.from(document.getElementsByClassName("content-canvas")).forEach( - (canvas) => { - canvas.width = 2560; - canvas.height = 1440; - } - ); - - // Update canvas size - Array.from(document.getElementsByClassName("display-canvas")).forEach( - (canvas) => { - canvas.width = window.innerWidth; - canvas.height = window.innerHeight; - } - ); - }, - - // Content Canvas Information - - // Viewport information - viewports: [], - - registerViewport: (el, options = {}) => { - defaultOpt(options, { - x: 0, - y: 0, - zoom: 1, - input: true, - }); - - // Registers a canvas as a viewport - const viewport = { - id: guid(), - canvas: el, - ctx: el.getContext("2d"), - x: options.x, - y: options.y, - zoom: options.zoom, - }; - - viewport.getBoundingBox = () => { - const w = viewport.canvas.width * viewport.zoom; - const h = viewport.canvas.height * viewport.zoom; - - return { - x: viewport.x - w / 2, - y: viewport.y - h / 2, - w, - h, - }; - }; - - infinity.viewports.push(viewport); - - // Register mouse input - const offset = {x: 0, y: 0}; - const oviewport = {x: 0, y: 0}; - mouse.listen.world.middle.onpaintstart = (evn) => { - offset.x = evn.x; - offset.y = evn.y; - oviewport.x = viewport.x; - oviewport.y = viewport.y; - }; - mouse.listen.world.middle.onpaint = (evn) => { - viewport.x = oviewport.x - (evn.x - offset.x); - viewport.y = oviewport.y - (evn.y - offset.y); - }; - - return viewport; - }, - - // Draw loop - _draw: () => { - infinity.viewports.forEach((viewport) => { - try { - const bb = viewport.getBoundingBox(); - - viewport.ctx.drawImage( - bgCanvas, - bb.x, - bb.y, - bb.w, - bb.h, - 0, - 0, - bb.w, - bb.h - ); - } catch (e) {} - }); - - requestAnimationFrame(infinity._draw); - }, -}; - -//infinity._init(); -Array.from(document.getElementsByClassName("display-canvas")).forEach( - (canvas) => infinity.registerViewport(canvas) -); diff --git a/js/initalize/layers.populate.js b/js/initalize/layers.populate.js index d2280b7..6f49de7 100644 --- a/js/initalize/layers.populate.js +++ b/js/initalize/layers.populate.js @@ -1,7 +1,7 @@ // Layering const imageCollection = layers.registerCollection( "image", - {w: 2560, h: 1472}, + {w: 1536, h: 1536}, { name: "Image Layers", } @@ -132,6 +132,7 @@ viewport.transform(imageCollection.element); mouse.listen.window.onwheel.on((evn) => { if (evn.evn.ctrlKey) { + evn.evn.preventDefault(); const pcx = viewport.cx; const pcy = viewport.cy; if (evn.delta < 0) { diff --git a/js/ui/tool/dream.js b/js/ui/tool/dream.js index d69c200..d05d04b 100644 --- a/js/ui/tool/dream.js +++ b/js/ui/tool/dream.js @@ -117,8 +117,7 @@ const _generate = async (endpoint, request, bb) => { // Layer for the images const layer = imageCollection.registerLayer(null, { - bb, - after: imgLayer, + after: maskPaintLayer, }); const redraw = () => { @@ -126,7 +125,7 @@ const _generate = async (endpoint, request, bb) => { image.src = "data:image/png;base64," + images[at]; image.addEventListener("load", () => { layer.ctx.clearRect(0, 0, layer.canvas.width, layer.canvas.height); - if (images[at]) layer.ctx.drawImage(image, 0, 0); + if (images[at]) layer.ctx.drawImage(image, bb.x, bb.y); }); }; @@ -211,12 +210,17 @@ const _generate = async (endpoint, request, bb) => { acceptbtn.textContent = "Y"; acceptbtn.title = "Apply Current"; acceptbtn.addEventListener("click", async () => { - commands.runCommand("drawImage", "Image Dream", { - x: bb.x, - y: bb.y, - image: layer.canvas, + const img = new Image(); + // load the image data after defining the closure + img.src = "data:image/png;base64," + images[at]; + img.addEventListener("load", () => { + commands.runCommand("drawImage", "Image Dream", { + x: bb.x, + y: bb.y, + image: img, + }); + clean(); }); - clean(); }); imageSelectMenu.appendChild(acceptbtn);