vue-svg-pan-zoom/src/SvgPanZoom.vue

<template>
<div>
    <slot />

    <SvgPanZoomThumbnail v-if="has_thumbnail"
        :onThumbnailShown="onThumbnailShown"
        :mainSPZ="spz"
        :bus="bus"
    >
        <slot name="thumbnail" />
    </SvgPanZoomThumbnail>

</div>
</template>


<script>
import svg_pan_zoom from 'svg-pan-zoom';

import props from './props';

import { EventBus } from './EventBus';

import SvgPanZoomThumbnail from './SvgPanZoomThumbnail.vue';

export default {
    props,
    components: { SvgPanZoomThumbnail },
    computed: {
        has_thumbnail: function() { return this.$slots.thumbnail },
        options: function() {
            let options = {};

            const is_defined = k => this[k] !== undefined;

            Object.keys(props)
                .filter( is_defined )
                .forEach( k => options[k] = this[k] );

            return options;
        }
    },
    mounted: function() {
        let options = {};

        Object.keys(props).filter( k => this[k] !== undefined ).forEach( k => options[k] = this[k] );

        options.onZoom = (...args) => {
            this.bus.$emit( 'mainZoom' );
            if( this.onZoom ) this.onZoom(args);
        };

        options.onPan = (...args) => {
            this.bus.$emit( 'mainPan' );
            if( this.onPan ) this.onPan(args);
        };

        this.spz = svg_pan_zoom( this.$slots.default[0].elm , options );

        this.$emit( 'svgpanzoom', this.spz );
    },
    data: () => ({ spz: null, bus: EventBus() }),
};

</script>