npm - @zoompinch/core - Versions diffs - 0.0.1 - Mend

@zoompinch/core 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/zoompinch-core.es.js +271 -0
package/dist/zoompinch-core.umd.js +1 -0
package/package.json +25 -0

package/dist/zoompinch-core.es.js ADDED Viewed

@@ -0,0 +1,271 @@
+var x = Object.defineProperty;
+var z = (r, o, t) => o in r ? x(r, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[o] = t;
+var p = (r, o, t) => z(r, typeof o != "symbol" ? o + "" : o, t);
+function W(r) {
+  return r * Math.PI / 180;
+}
+function R(r, o, t) {
+  return Math.min(Math.max(r, o), t);
+}
+function v(r, o, t) {
+  const [s, e] = r, [a, n] = o, i = Math.cos(t) * (s - a) - Math.sin(t) * (e - n) + a, h = Math.sin(t) * (s - a) + Math.cos(t) * (e - n) + n;
+  return [i, h];
+}
+function w(r, o) {
+  const t = Math.pow(10, o);
+  return Math.round(r * t) / t;
+}
+function I(r) {
+  var o = !1;
+  return r.wheelDeltaY ? r.wheelDeltaY === r.deltaY * -3 && (o = !0) : r.deltaMode === 0 && (o = !0), o;
+}
+function C(r, o) {
+  const t = o.find((s) => r % s === 0);
+  return t ? r / t : 1;
+}
+function y(r, o, t, s, e) {
+  let a = r.left - o, n = r.top - t;
+  const i = Math.cos(-e), h = Math.sin(-e);
+  let c = a * i - n * h, l = a * h + n * i;
+  const d = r.width / s, u = r.height / s;
+  return c /= s, l /= s, { x: w(c, 4), y: w(l, 4), width: w(d, 4), height: w(u, 4) };
+}
+class E extends EventTarget {
+  constructor(t, s, e, a, n, i, h = 0.1, c = 10) {
+    super();
+    p(this, "wrapperBounds");
+    p(this, "canvasBounds");
+    p(this, "gestureStartRadians", 0);
+    p(this, "dragStart", null);
+    p(this, "dragStartFrozenX", null);
+    p(this, "dragStartFrozenY", null);
+    p(this, "touchStarts", null);
+    p(this, "touchStartTranslateX", 0);
+    p(this, "touchStartTranslateY", 0);
+    p(this, "centeredTransform", {
+      translateX: 0,
+      translateY: 0,
+      scale: 1,
+      radians: 0
+    });
+    this.element = t, this.offset = s, this.translateX = e, this.translateY = a, this.scale = n, this.rotate = i, this.minScale = h, this.maxScale = c;
+    const l = new ResizeObserver(() => {
+      const { x: u, y: f, width: g, height: S } = this.element.getBoundingClientRect();
+      this.wrapperBounds = { x: u, y: f, width: g, height: S }, this.update();
+    }), d = new ResizeObserver(() => {
+      const { x: u, y: f, width: g, height: S } = y(
+        this.canvasElement.getBoundingClientRect(),
+        this.renderingTranslateX,
+        this.renderingTranslateY,
+        this.renderinScale,
+        this.renderingRotate
+      );
+      this.canvasBounds = { x: u, y: f, width: g, height: S }, this.update();
+    });
+    requestAnimationFrame(() => {
+      this.wrapperBounds = this.element.getBoundingClientRect(), this.canvasBounds = this.canvasElement.getBoundingClientRect(), this.update();
+    }), d.observe(this.canvasElement), l.observe(this.element);
+  }
+  get canvasElement() {
+    return this.element.querySelector(".canvas");
+  }
+  get wrapperInnerX() {
+    return this.wrapperBounds.x + this.offset.left;
+  }
+  get wrapperInnerY() {
+    return this.wrapperBounds.y + this.offset.top;
+  }
+  get wrapperInnerWidth() {
+    return this.wrapperBounds.width - this.offset.left - this.offset.right;
+  }
+  get wrapperInnerHeight() {
+    return this.wrapperBounds.height - this.offset.top - this.offset.bottom;
+  }
+  // Calculate the inner ratio
+  get wrapperInnerRatio() {
+    return this.wrapperInnerWidth / this.wrapperInnerHeight;
+  }
+  get canvasNaturalRatio() {
+    return this.canvasBounds.width / this.canvasBounds.height;
+  }
+  // Get natural scale
+  get naturalScale() {
+    return this.canvasNaturalRatio >= this.wrapperInnerRatio ? this.wrapperInnerWidth / this.canvasBounds.width : this.wrapperInnerHeight / this.canvasBounds.height;
+  }
+  handleGesturestart(t) {
+    this.gestureStartRadians = this.rotate;
+  }
+  handleGesturechange(t) {
+    const { clientX: s, clientY: e } = t, a = t.rotation;
+    if (a === 0)
+      return;
+    const n = this.normalizeMatrixCoordinates(s, e);
+    this.rotateCanvas(n[0], n[1], this.gestureStartRadians + W(a));
+  }
+  handleGestureend(t) {
+  }
+  handleMousedown(t) {
+    t.preventDefault(), this.dragStart = [t.clientX, t.clientY], this.dragStartFrozenX = this.translateX, this.dragStartFrozenY = this.translateY;
+  }
+  handleMouseup(t) {
+    t.preventDefault(), this.dragStart = null, this.dragStartFrozenX = null, this.dragStartFrozenY = null;
+  }
+  handleMousemove(t) {
+    if (t.preventDefault(), this.dragStart && this.dragStartFrozenX !== null && this.dragStartFrozenY !== null) {
+      const s = t.clientX - this.dragStart[0], e = t.clientY - this.dragStart[1], a = this.dragStartFrozenX - -s, n = this.dragStartFrozenY - -e;
+      this.translateX = a, this.translateY = n, this.update();
+    }
+  }
+  handleWheel(t) {
+    let { deltaX: s, deltaY: e, ctrlKey: a } = t;
+    const n = [120, 100], i = 2;
+    I(t) || ((Math.abs(s) === 120 || Math.abs(s) === 200) && (s = s / (100 / i * C(s, n)) * Math.sign(s)), (Math.abs(e) === 120 || Math.abs(e) === 200) && (e = e / (100 / i * C(e, n)) * Math.sign(e)));
+    const h = this.scale;
+    if (a) {
+      const c = -e / 100 * h, l = R(h + c, this.minScale, this.maxScale), d = this.relativeWrapperCoordinatesFromClientCoords(t.clientX, t.clientY), [u, f] = this.calcProjectionTranslate(
+        l,
+        d,
+        this.normalizeMatrixCoordinates(t.clientX, t.clientY)
+      );
+      this.translateX = u, this.translateY = f, this.scale = l;
+    } else
+      this.translateX = this.translateX - s, this.translateY = this.translateY - e;
+    this.update(), t.preventDefault();
+  }
+  freezeTouches(t) {
+    return Array.from(t).map((s) => {
+      const e = this.clientCoordsToWrapperCoords(s.clientX, s.clientY);
+      return {
+        client: [s.clientX, s.clientY],
+        canvasRel: this.getCanvasCoordsRel(e[0], e[1])
+      };
+    });
+  }
+  handleTouchstart(t) {
+    this.touchStarts = this.freezeTouches(t.touches), this.touchStartTranslateX = this.translateX, this.touchStartTranslateY = this.translateY, t.preventDefault();
+  }
+  handleTouchmove(t) {
+    t.preventDefault();
+    const s = Array.from(t.touches).map(
+      (e) => this.clientCoordsToWrapperCoords(e.clientX, e.clientY)
+    );
+    if (this.touchStarts) {
+      if (s.length >= 2 && this.touchStarts.length >= 2) {
+        const e = [
+          this.touchStarts[0].canvasRel[0] * this.canvasBounds.width,
+          this.touchStarts[0].canvasRel[1] * this.canvasBounds.height
+        ], a = [
+          this.touchStarts[1].canvasRel[0] * this.canvasBounds.width,
+          this.touchStarts[1].canvasRel[1] * this.canvasBounds.height
+        ], n = Math.sqrt(
+          Math.pow(e[0] - a[0], 2) + Math.pow(e[1] - a[1], 2)
+        ), i = Math.sqrt(
+          Math.pow(s[0][0] - s[1][0], 2) + Math.pow(s[0][1] - s[1][1], 2)
+        ) / this.naturalScale, h = R(i / n, this.minScale, this.maxScale), c = [
+          s[0][0] / this.wrapperInnerWidth,
+          s[0][1] / this.wrapperInnerHeight
+        ], l = this.touchStarts[0].canvasRel, [d, u] = this.calcProjectionTranslate(h, c, l, 0);
+        let f = 0, g = 0, S = 0;
+        const T = Math.atan2(
+          a[1] - e[1],
+          a[0] - e[0]
+        );
+        S = Math.atan2(s[1][1] - s[0][1], s[1][0] - s[0][0]) - T;
+        const m = (M, P) => [
+          this.offset.left + this.canvasBounds.width * M * this.naturalScale * h + d,
+          this.offset.top + this.canvasBounds.height * P * this.naturalScale * h + u
+        ], Y = m(0, 0), B = m(
+          this.touchStarts[0].canvasRel[0],
+          this.touchStarts[0].canvasRel[1]
+        ), X = v(
+          Y,
+          B,
+          S
+        );
+        f = X[0] - Y[0], g = X[1] - Y[1], this.scale = h, this.rotate = S, this.translateX = d + f, this.translateY = u + g;
+      } else {
+        const e = t.touches[0].clientX - this.touchStarts[0].client[0], a = t.touches[0].clientY - this.touchStarts[0].client[1], n = this.touchStartTranslateX + e, i = this.touchStartTranslateY + a;
+        this.translateX = n, this.translateY = i;
+      }
+      this.update();
+    }
+  }
+  handleTouchend(t) {
+    t.touches.length === 0 ? this.touchStarts = null : (this.touchStarts = this.freezeTouches(t.touches), this.touchStartTranslateX = this.translateX, this.touchStartTranslateY = this.translateY);
+  }
+  calcProjectionTranslate(t, s, e, a) {
+    const n = this.canvasBounds.width * this.naturalScale, i = this.canvasBounds.height * this.naturalScale, h = e[0] * n * t, c = e[1] * i * t, l = v([h, c], [0, 0], a ?? this.rotate), d = s[0] * this.wrapperInnerWidth, u = s[1] * this.wrapperInnerHeight, f = d - l[0], g = u - l[1];
+    return [f, g];
+  }
+  applyTransform(t, s, e) {
+    const a = this.calcProjectionTranslate(t, s, e, 0);
+    this.scale = t, this.translateX = a[0], this.translateY = a[1], this.update();
+  }
+  composeRelPoint(t, s, e, a, n, i) {
+    e = e ?? this.scale, a = a ?? this.translateX, n = n ?? this.translateY, i = i ?? this.rotate;
+    const h = [this.offset.left, this.offset.top], c = [
+      this.offset.left + this.canvasBounds.width * (e * this.naturalScale) * t,
+      this.offset.top + this.canvasBounds.height * (e * this.naturalScale) * s
+    ], l = v(c, h, i);
+    return [l[0] + a, l[1] + n];
+  }
+  composePoint(t, s) {
+    const e = t / this.canvasBounds.width, a = s / this.canvasBounds.height;
+    return this.composeRelPoint(e, a);
+  }
+  getAnchorOffset(t, s, e, a, n = [0.5, 0.5]) {
+    const i = this.calcProjectionTranslate(t, n, n, 0), h = [
+      this.offset.left + i[0] + this.canvasBounds.width * (t * this.naturalScale) * n[0],
+      this.offset.top + i[1] + this.canvasBounds.height * (t * this.naturalScale) * n[1]
+    ], c = this.composeRelPoint(n[0], n[1], t, s, e, a), l = c[0] - h[0], d = c[1] - h[1];
+    return [l, d];
+  }
+  // Converts absolute inner wrapper coordinates to relative canvas coordinates (0-1, 0-1)
+  getCanvasCoordsRel(t, s) {
+    const e = [0, 0], a = [t - this.translateX, s - this.translateY], n = v(a, e, -this.rotate), i = [n[0] / this.renderinScale, n[1] / this.renderinScale];
+    return [i[0] / this.canvasBounds.width, i[1] / this.canvasBounds.height];
+  }
+  // Converts absolute client to coordinates to absolute inner-wrapper coorinates
+  clientCoordsToWrapperCoords(t, s) {
+    return [t - this.wrapperInnerX, s - this.wrapperInnerY];
+  }
+  // Converts absolute client coordinates to relative wrapper coordinates (0-1, 0-1)
+  relativeWrapperCoordinatesFromClientCoords(t, s) {
+    const [e, a] = this.clientCoordsToWrapperCoords(t, s);
+    return [e / this.wrapperInnerWidth, a / this.wrapperInnerHeight];
+  }
+  // Converts client coordinates to relative canvas coordinates (0-1, 0-1)
+  normalizeMatrixCoordinates(t, s) {
+    const e = this.clientCoordsToWrapperCoords(t, s);
+    return this.getCanvasCoordsRel(e[0], e[1]);
+  }
+  // Converts client coordinates to absolute canvas coordinates
+  normalizeClientCoords(t, s) {
+    const [e, a] = this.normalizeMatrixCoordinates(t, s);
+    return [e * this.canvasBounds.width, a * this.canvasBounds.height];
+  }
+  rotateCanvas(t, s, e) {
+    const a = this.composeRelPoint(t, s, this.scale, 0, 0, e), n = this.composeRelPoint(t, s);
+    this.translateX = n[0] - a[0], this.translateY = n[1] - a[1], this.rotate = e, this.update();
+  }
+  get renderinScale() {
+    return this.naturalScale * this.scale;
+  }
+  get renderingTranslateX() {
+    return this.offset.left + this.translateX;
+  }
+  get renderingTranslateY() {
+    return this.offset.top + this.translateY;
+  }
+  get renderingRotate() {
+    return this.rotate;
+  }
+  update() {
+    this.canvasElement.style.transformOrigin = "top left", this.canvasElement.style.transform = `translateX(${this.renderingTranslateX}px) translateY(${this.renderingTranslateY}px) scale(${this.renderinScale}) rotate(${this.renderingRotate}rad)`, this.dispatchEvent(new Event("update"));
+  }
+  destroy() {
+  }
+}
+export {
+  E as Zoompinch
+};

package/dist/zoompinch-core.umd.js ADDED Viewed

@@ -0,0 +1 @@

package/package.json ADDED Viewed

@@ -0,0 +1,25 @@
+{
+  "name": "@zoompinch/core",
+  "version": "0.0.1",
+  "private": false,
+  "type": "module",
+  "main": "./dist/zoompinch-core.umd.js",
+  "module": "./dist/zoompinch-core.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/zoompinch-core.es.js",
+      "require": "./dist/zoompinch-core.umd.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3",
+    "vite": "^6.4.1"
+  }
+}