@zoompinch/vue 0.0.8

package/dist/components/Zoompinch.vue.d.ts

@@ -0,0 +1,71 @@
+import { Transform, Zoompinch } from '@zoompinch/core';
+type __VLS_Props = {
+    transform?: Transform;
+    offset?: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    maxScale?: number;
+    minScale?: number;
+    bounds?: boolean;
+    rotation?: boolean;
+    mouse?: boolean;
+    wheel?: boolean;
+    touch?: boolean;
+    gesture?: boolean;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+        matrix?(_: {
+            composePoint: (x: number, y: number) => [number, number];
+        }): any;
+    };
+    refs: {
+        zoompinchRef: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {
+    applyTransform: (scale: number, wrapperInnerCoords: [number, number], canvasCoords: [number, number], rotate?: number) => void;
+    composePoint: import('vue').Ref<(x: number, y: number) => [number, number], (x: number, y: number) => [number, number]>;
+    normalizeClientCoords: (clientX: number, clientY: number) => [number, number];
+    zoompinchEngine: import('vue').Ref<Zoompinch | undefined, Zoompinch | undefined>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:transform": (transform: Transform) => any;
+    dragGestureStart: (event: MouseEvent | TouchEvent | WheelEvent) => any;
+    dragGestureEnd: (event: MouseEvent | TouchEvent | WheelEvent) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:transform"?: ((transform: Transform) => any) | undefined;
+    onDragGestureStart?: ((event: MouseEvent | TouchEvent | WheelEvent) => any) | undefined;
+    onDragGestureEnd?: ((event: MouseEvent | TouchEvent | WheelEvent) => any) | undefined;
+}>, {
+    transform: Transform;
+    offset: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    maxScale: number;
+    minScale: number;
+    bounds: boolean;
+    rotation: boolean;
+    mouse: boolean;
+    wheel: boolean;
+    touch: boolean;
+    gesture: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    zoompinchRef: HTMLDivElement;
+}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { default as Zoompinch } from './components/Zoompinch.vue';

package/dist/style.css

@@ -0,0 +1 @@
+.zoompinch[data-v-46a64396]{touch-action:none;overflow:hidden;width:100%;height:100%;position:relative}.zoompinch>.canvas[data-v-46a64396]{position:absolute}.zoompinch>.matrix[data-v-46a64396]{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}

package/dist/zoompinch-vue.es.js

@@ -0,0 +1,125 @@
+import { defineComponent as G, ref as u, onMounted as x, watch as l, onUnmounted as B, createElementBlock as C, openBlock as M, createElementVNode as L, renderSlot as y, createCommentVNode as k } from "vue";
+import { Zoompinch as Z } from "@zoompinch/core";
+const N = { class: "canvas" }, P = { class: "matrix" }, W = /* @__PURE__ */ G({
+  __name: "Zoompinch",
+  props: {
+    transform: { default: () => ({ translateX: 0, translateY: 0, scale: 1, rotate: 0 }) },
+    offset: { default: () => ({ left: 0, top: 0, right: 0, bottom: 0 }) },
+    maxScale: { default: 10 },
+    minScale: { default: 0.5 },
+    bounds: { type: Boolean, default: !1 },
+    rotation: { type: Boolean, default: !0 },
+    mouse: { type: Boolean, default: !0 },
+    wheel: { type: Boolean, default: !0 },
+    touch: { type: Boolean, default: !0 },
+    gesture: { type: Boolean, default: !0 }
+  },
+  emits: ["update:transform", "dragGestureStart", "dragGestureEnd"],
+  setup(o, { expose: i, emit: r }) {
+    const a = o, d = r, v = u(), e = u(), f = u(!1);
+    window.zoompinchEngine = e;
+    const s = u(() => {
+      throw new Error("Not initialized yet");
+    });
+    x(() => {
+      v.value && (e.value = new Z(
+        v.value,
+        a.offset,
+        a.transform.translateX,
+        a.transform.translateY,
+        a.transform.scale,
+        a.transform.rotate,
+        a.minScale,
+        a.maxScale
+      ), e.value.addEventListener("update", () => {
+        if (!e.value) return;
+        const t = {
+          translateX: e.value.translateX,
+          translateY: e.value.translateY,
+          scale: e.value.scale,
+          rotate: e.value.rotate
+        };
+        (t.translateX !== a.transform.translateX || t.translateY !== a.transform.translateY || t.scale !== a.transform.scale || t.rotate !== a.transform.rotate) && d("update:transform", t), s.value = (n, c) => e.value.composePoint(n, c);
+      }), e.value.addEventListener("init", () => {
+        f.value = !0;
+      }));
+    }), l(
+      () => a.transform,
+      () => {
+        e.value && (e.value.translateX !== a.transform.translateX || e.value.translateY !== a.transform.translateY || e.value.scale !== a.transform.scale || e.value.rotate !== a.transform.rotate) && (e.value.translateX = a.transform.translateX, e.value.translateY = a.transform.translateY, e.value.scale = a.transform.scale, e.value.rotate = a.transform.rotate, e.value.update());
+      },
+      { deep: !0 }
+    ), l(
+      () => a.offset,
+      (t) => {
+        e.value && (e.value.offset = t, e.value.update());
+      },
+      { deep: !0 }
+    ), l(() => a.minScale, (t) => {
+      e.value && (e.value.minScale = t, e.value.update());
+    }), l(() => a.maxScale, (t) => {
+      e.value && (e.value.maxScale = t, e.value.update());
+    });
+    const z = (t, n, c, _) => {
+      e.value && (_ !== void 0 && (e.value.rotate = _), e.value.applyTransform(t, n, c));
+    }, S = (t) => {
+      e.value && a.wheel && e.value.handleWheel(t);
+    }, T = (t) => {
+      e.value && a.gesture && e.value.handleGesturestart(t);
+    }, m = (t) => {
+      e.value && a.gesture && e.value.handleGesturechange(t);
+    }, h = (t) => {
+      e.value && a.gesture && e.value.handleGestureend(t);
+    }, X = (t) => {
+      e.value && a.mouse && e.value.handleMousedown(t);
+    }, p = (t) => {
+      e.value && a.mouse && e.value.handleMousemove(t);
+    }, w = (t) => {
+      e.value && a.mouse && e.value.handleMouseup(t);
+    }, Y = (t) => {
+      e.value && a.touch && e.value.handleTouchstart(t);
+    }, E = (t) => {
+      e.value && a.touch && e.value.handleTouchmove(t);
+    }, g = (t) => {
+      e.value && a.touch && e.value.handleTouchend(t);
+    };
+    return window.addEventListener("gesturechange", m), window.addEventListener("gestureend", h), window.addEventListener("mousemove", p), window.addEventListener("mouseup", w), window.addEventListener("touchmove", E), window.addEventListener("touchend", g), B(() => {
+      window.removeEventListener("gesturechange", m), window.removeEventListener("gestureend", h), window.removeEventListener("mousemove", p), window.removeEventListener("mouseup", w), window.removeEventListener("touchmove", E), window.removeEventListener("touchend", g);
+    }), i({
+      applyTransform: z,
+      composePoint: s,
+      normalizeClientCoords: (t, n) => {
+        if (!e.value)
+          throw new Error("Zoompinch engine not initialized");
+        return e.value.normalizeClientCoords(t, n);
+      },
+      zoompinchEngine: e
+    }), (t, n) => (M(), C("div", {
+      ref_key: "zoompinchRef",
+      ref: v,
+      class: "zoompinch",
+      onWheel: S,
+      onGesturestart: T,
+      onMousedown: X,
+      onTouchstart: Y
+    }, [
+      L("div", N, [
+        y(t.$slots, "default", {}, void 0, !0)
+      ]),
+      L("div", P, [
+        f.value && s.value ? y(t.$slots, "matrix", {
+          key: 0,
+          composePoint: s.value
+        }, void 0, !0) : k("", !0)
+      ])
+    ], 544));
+  }
+}), $ = (o, i) => {
+  const r = o.__vccOpts || o;
+  for (const [a, d] of i)
+    r[a] = d;
+  return r;
+}, I = /* @__PURE__ */ $(W, [["__scopeId", "data-v-46a64396"]]);
+export {
+  I as Zoompinch
+};

package/dist/zoompinch-vue.umd.js

@@ -0,0 +1 @@
+(function(o,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("vue"),require("@zoompinch/core")):typeof define=="function"&&define.amd?define(["exports","vue","@zoompinch/core"],a):(o=typeof globalThis<"u"?globalThis:o||self,a(o.ZoompinchVue={},o.Vue,o.ZoompinchCore))})(this,(function(o,a,y){"use strict";const L={class:"canvas"},S={class:"matrix"},T=((s,i)=>{const l=s.__vccOpts||s;for(const[n,d]of i)l[n]=d;return l})(a.defineComponent({__name:"Zoompinch",props:{transform:{default:()=>({translateX:0,translateY:0,scale:1,rotate:0})},offset:{default:()=>({left:0,top:0,right:0,bottom:0})},maxScale:{default:10},minScale:{default:.5},bounds:{type:Boolean,default:!1},rotation:{type:Boolean,default:!0},mouse:{type:Boolean,default:!0},wheel:{type:Boolean,default:!0},touch:{type:Boolean,default:!0},gesture:{type:Boolean,default:!0}},emits:["update:transform","dragGestureStart","dragGestureEnd"],setup(s,{expose:i,emit:l}){const n=s,d=l,c=a.ref(),e=a.ref(),m=a.ref(!1);window.zoompinchEngine=e;const u=a.ref(()=>{throw new Error("Not initialized yet")});a.onMounted(()=>{c.value&&(e.value=new y.Zoompinch(c.value,n.offset,n.transform.translateX,n.transform.translateY,n.transform.scale,n.transform.rotate,n.minScale,n.maxScale),e.value.addEventListener("update",()=>{if(!e.value)return;const t={translateX:e.value.translateX,translateY:e.value.translateY,scale:e.value.scale,rotate:e.value.rotate};(t.translateX!==n.transform.translateX||t.translateY!==n.transform.translateY||t.scale!==n.transform.scale||t.rotate!==n.transform.rotate)&&d("update:transform",t),u.value=(r,f)=>e.value.composePoint(r,f)}),e.value.addEventListener("init",()=>{m.value=!0}))}),a.watch(()=>n.transform,()=>{e.value&&(e.value.translateX!==n.transform.translateX||e.value.translateY!==n.transform.translateY||e.value.scale!==n.transform.scale||e.value.rotate!==n.transform.rotate)&&(e.value.translateX=n.transform.translateX,e.value.translateY=n.transform.translateY,e.value.scale=n.transform.scale,e.value.rotate=n.transform.rotate,e.value.update())},{deep:!0}),a.watch(()=>n.offset,t=>{e.value&&(e.value.offset=t,e.value.update())},{deep:!0}),a.watch(()=>n.minScale,t=>{e.value&&(e.value.minScale=t,e.value.update())}),a.watch(()=>n.maxScale,t=>{e.value&&(e.value.maxScale=t,e.value.update())});const z=(t,r,f,_)=>{e.value&&(_!==void 0&&(e.value.rotate=_),e.value.applyTransform(t,r,f))},x=t=>{e.value&&n.wheel&&e.value.handleWheel(t)},X=t=>{e.value&&n.gesture&&e.value.handleGesturestart(t)},v=t=>{e.value&&n.gesture&&e.value.handleGesturechange(t)},h=t=>{e.value&&n.gesture&&e.value.handleGestureend(t)},Y=t=>{e.value&&n.mouse&&e.value.handleMousedown(t)},p=t=>{e.value&&n.mouse&&e.value.handleMousemove(t)},w=t=>{e.value&&n.mouse&&e.value.handleMouseup(t)},C=t=>{e.value&&n.touch&&e.value.handleTouchstart(t)},E=t=>{e.value&&n.touch&&e.value.handleTouchmove(t)},g=t=>{e.value&&n.touch&&e.value.handleTouchend(t)};return window.addEventListener("gesturechange",v),window.addEventListener("gestureend",h),window.addEventListener("mousemove",p),window.addEventListener("mouseup",w),window.addEventListener("touchmove",E),window.addEventListener("touchend",g),a.onUnmounted(()=>{window.removeEventListener("gesturechange",v),window.removeEventListener("gestureend",h),window.removeEventListener("mousemove",p),window.removeEventListener("mouseup",w),window.removeEventListener("touchmove",E),window.removeEventListener("touchend",g)}),i({applyTransform:z,composePoint:u,normalizeClientCoords:(t,r)=>{if(!e.value)throw new Error("Zoompinch engine not initialized");return e.value.normalizeClientCoords(t,r)},zoompinchEngine:e}),(t,r)=>(a.openBlock(),a.createElementBlock("div",{ref_key:"zoompinchRef",ref:c,class:"zoompinch",onWheel:x,onGesturestart:X,onMousedown:Y,onTouchstart:C},[a.createElementVNode("div",L,[a.renderSlot(t.$slots,"default",{},void 0,!0)]),a.createElementVNode("div",S,[m.value&&u.value?a.renderSlot(t.$slots,"matrix",{key:0,composePoint:u.value},void 0,!0):a.createCommentVNode("",!0)])],544))}}),[["__scopeId","data-v-46a64396"]]);o.Zoompinch=T,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@zoompinch/vue",
+  "description": "Vue wrapper for ZoomPinch - reactive pinch & zoom component",
+  "version": "0.0.8",
+  "private": false,
+  "type": "module",
+  "main": "./dist/zoompinch-vue.umd.js",
+  "module": "./dist/zoompinch-vue.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/zoompinch-vue.es.js",
+      "require": "./dist/zoompinch-vue.umd.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build"
+  },
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.4",
+    "typescript": "^5.9.3",
+    "vite": "^6.4.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vue-tsc": "^3.2.0"
+  },
+  "dependencies": {
+    "@zoompinch/core": "^0.0.8"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.26"
+  }
+}