diff --git a/index.html b/index.html
index 5244d23..9721e5b 100644
--- a/index.html
+++ b/index.html
@@ -350,7 +350,7 @@
diff --git a/js/initalize/layers.populate.js b/js/initalize/layers.populate.js
index 9efd861..66a1a4b 100644
--- a/js/initalize/layers.populate.js
+++ b/js/initalize/layers.populate.js
@@ -65,12 +65,6 @@ uiCanvas.width = uiCanvas.clientWidth;
uiCanvas.height = uiCanvas.clientHeight;
const uiCtx = uiCanvas.getContext("2d", {desynchronized: true});
-/** @type {HTMLCanvasElement} */
-const uiDebugCanvas = document.getElementById("layer-debug-overlay"); // where mouse cursor renders
-uiDebugCanvas.width = uiDebugCanvas.clientWidth;
-uiDebugCanvas.height = uiDebugCanvas.clientHeight;
-const uiDebugCtx = uiDebugCanvas.getContext("2d", {desynchronized: true});
-
/**
* Here we setup canvas dynamic scaling
*/
@@ -166,68 +160,54 @@ debugLayer.hide(); // Hidden by default
* The global viewport object (may be modularized in the future). All
* coordinates given are of the center of the viewport
*
- * cx and cy are the viewport's world coordinates.
+ * cx and cy are the viewport's world coordinates, scaled to zoom level.
+ * _x and _y are actual coordinates in the DOM space
*
* The transform() function does some transforms and writes them to the
* provided element.
*/
const viewport = {
- cx: 0,
- cy: 0,
+ get cx() {
+ return this._x * this.zoom;
+ },
+
+ set cx(v) {
+ return (this._x = v / this.zoom);
+ },
+ _x: 0,
+ get cy() {
+ return this._y * this.zoom;
+ },
+ set cy(v) {
+ return (this._y = v / this.zoom);
+ },
+ _y: 0,
zoom: 1,
rotation: 0,
get w() {
- return window.innerWidth * 1;
+ return (window.innerWidth * 1) / this.zoom;
},
get h() {
- return window.innerHeight * 1;
+ return (window.innerHeight * 1) / this.zoom;
},
viewToCanvas(x, y) {
- return this.matrix.transformPoint({x, y});
return {
x: this.cx + this.w * (x / window.innerWidth - 0.5),
y: this.cy + this.h * (y / window.innerHeight - 0.5),
};
},
canvasToView(x, y) {
- return this.imatrix.transformPoint({x, y});
return {
x: window.innerWidth * ((x - this.cx) / this.w) + window.innerWidth / 2,
y: window.innerHeight * ((y - this.cy) / this.h) + window.innerHeight / 2,
};
},
-
- /**
- * The transformation matrix (vp to world)
- *
- * @type {DOMMatrix}
- */
- get matrix() {
- const matrix = new DOMMatrix();
-
- matrix.scaleSelf(1 / this.zoom);
- matrix.translateSelf(this.cx - this.w / 2, this.cy - this.h / 2);
-
- return matrix;
- },
-
- /**
- * The transformation matrix (world to vp)
- *
- * @type {DOMMatrix}
- */
- get imatrix() {
- return this.matrix.invertSelf();
- },
-
/**
* Apply transformation
*
* @param {HTMLElement} el Element to apply CSS transform to
*/
transform(el) {
- el.style.transform = this.imatrix;
- return;
el.style.transformOrigin = `${this.cx}px ${this.cy}px`;
el.style.transform = `scale(${this.zoom}) translate(${-(
this._x -
@@ -236,8 +216,8 @@ const viewport = {
},
};
-//viewport.cx = imageCollection.size.w / 2;
-//viewport.cy = imageCollection.size.h / 2;
+viewport.cx = imageCollection.size.w / 2;
+viewport.cy = imageCollection.size.h / 2;
let worldInit = null;
@@ -340,8 +320,8 @@ const cameraPaintStart = (evn) => {
const cameraPaint = (evn) => {
if (worldInit) {
- viewport.cx = worldInit.x + (evn.ix - evn.x);
- viewport.cy = worldInit.y + (evn.iy - evn.y);
+ viewport.cx = worldInit.x + (evn.ix - evn.x) / viewport.zoom;
+ viewport.cy = worldInit.y + (evn.iy - evn.y) / viewport.zoom;
// Limits
viewport.cx = Math.max(
@@ -357,6 +337,13 @@ const cameraPaint = (evn) => {
}
viewport.transform(imageCollection.element);
+ if (global.debug) {
+ debugCtx.clearRect(0, 0, debugCanvas.width, debugCanvas.height);
+ debugCtx.fillStyle = "#F0F";
+ debugCtx.beginPath();
+ debugCtx.arc(viewport.cx, viewport.cy, 5, 0, Math.PI * 2);
+ debugCtx.fill();
+ }
};
const cameraPaintEnd = (evn) => {