Add support of customEventsHandler

Changes

@@ -1,5 +1,9 @@
 Release history for vue-svg-pan-zoom
 
+v2.2.0 2023-12-13
+
+- add support of customEventsHandler prop (tasiot)
+
 v2.1.0 2022-06-10
 
 - fix bug preventing to mount svgpanzoom (GH#16, KrosFire)

README.md

@@ -59,6 +59,7 @@ Currently the `SvgPanZoom` component only works with a `svg` child -- `embed` wo
 | minZoom                   | `0.5`                    |
 | maxZoom                   | `10`                     |
 | refreshRate               | `auto`                   |
+| customEventsHandler       | `null`                   |
 
 | event                     | arguments                                                  |
 | ------------------------- | ---------------------------------------------------------- |

dist/types/SvgPanZoom.vue.d.ts

@@ -42,6 +42,12 @@ export interface Props {
     contain?: boolean;
     center?: boolean;
     refreshRate?: number | "auto";
+    customEventsHandler?: CustomEventsHandler;
+}
+export interface CustomEventsHandler {
+    haltEventListeners?: Array<string>;
+    init: (options: object) => void;
+    destroy: () => void;
 }
 export interface Events {
     (event: 'beforeZoom', oldScale: number, newScale: number): void;
@@ -115,6 +121,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<Number | "auto">;
         default: string;
     };
+    customEventsHandler: {
+        type: ObjectConstructor;
+        default: null;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     beforeZoom: (oldScale: number, newScale: number) => void;
 } & {
@@ -186,6 +196,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<Number | "auto">;
         default: string;
     };
+    customEventsHandler: {
+        type: ObjectConstructor;
+        default: null;
+    };
 }>> & {
     onBeforeZoom?: ((oldScale: number, newScale: number) => any) | undefined;
     onOnZoom?: ((newScale: number) => any) | undefined;
@@ -209,5 +223,6 @@ declare const _default: import("vue").DefineComponent<{
     contain: boolean;
     center: boolean;
     refreshRate: Number | "auto";
+    customEventsHandler: Record<string, any>;
 }>;
 export default _default;

dist/vue-svg-pan-zoom.es.js

@@ -1353,7 +1353,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   }
 });
 var SvgPanZoomThumbnail = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-093287c4"]]);
-var SvgPanZoom_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => ".svg-pan-zoom{position:relative}\n")();
+var SvgPanZoom_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => ".svg-pan-zoom{position:relative}.svg-pan-zoom__default{width:100%;height:100%}\n")();
 const _hoisted_1 = { class: "svg-pan-zoom" };
 const _sfc_main = defineComponent({
   __name: "SvgPanZoom",
@@ -1413,11 +1413,16 @@ const _sfc_main = defineComponent({
     refreshRate: {
       type: [Number, String],
       default: "auto"
+    },
+    customEventsHandler: {
+      type: Object,
+      default: null
     }
   },
   emits: ["beforeZoom", "onZoom", "beforePan", "onPan", "onUpdatedCTM", "created", "thumbnailCreated"],
   setup(__props, { emit }) {
     const props = __props;
+    const defaultSlot = ref(null);
     const slots = useSlots();
     const options = ref({});
     Object.keys(props).filter((k) => props[k] !== void 0).forEach((k) => {
@@ -1427,11 +1432,12 @@ const _sfc_main = defineComponent({
     });
     const spz = ref(null);
     const getSvgSelector = (instance) => {
-      if (instance.el && instance.el.tagName === "svg")
-        return instance.el;
-      if (!instance.children || !Array.isArray(instance.children))
+      if (instance && instance.tagName === "svg")
+        return instance;
+      const children = Array.from(instance.children);
+      if (!children)
         return false;
-      for (const child of instance.children) {
+      for (const child of children) {
         const selector = getSvgSelector(child);
         if (selector)
           return selector;
@@ -1441,17 +1447,23 @@ const _sfc_main = defineComponent({
     onMounted(() => {
       options.value.onZoom = (newScale) => emit("onZoom", newScale);
       options.value.onPan = (newPan) => emit("onPan", newPan);
-      if (!slots["default"])
+      if (!(slots["default"] && defaultSlot.value))
         return;
-      const selector = getSvgSelector(slots["default"]()[0]);
+      const selector = getSvgSelector(defaultSlot.value);
       if (!selector)
         return;
       spz.value = svgPanZoom_1(selector, options.value);
       emit("created", spz.value);
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
-        renderSlot(_ctx.$slots, "default"),
+        createElementVNode("div", {
+          class: "svg-pan-zoom__default",
+          ref_key: "defaultSlot",
+          ref: defaultSlot
+        }, [
+          renderSlot(_ctx.$slots, "default")
+        ], 512),
         !!_ctx.$slots.thumbnail && !!spz.value ? (openBlock(), createBlock(SvgPanZoomThumbnail, {
           key: 0,
           onThumbnailCreated: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("thumbnailCreated", $event)),