Example of using vue-svg-pan-zoom with thumbnail

[diefimov]

Hi!

I have created Vue application with webpack-simple and added the dependencies as follows:

"dependencies": {

    "vue": "^2.5.11",

    "draggable-vue-directive": "^1.1.0",

    "svg-pan-zoom": "^3.5.3",

    "vue-svg-pan-zoom": "^0.1.0",

    "postcss-import": "^12.0.1"

  }

I have created two components in src/components folder:
RawTiger.vue: copy of file from this repository
Thumbnail.vue:

<template>
    
<SvgPanZoom style="width: 880px; height: 720px; border:1px solid black; ">

        <RawTiger /> 

        <RawTiger slot="thumbnail" class="thumbViewClass" 
            style="position: absolute; width: 20%; height: 30% bottom: 5px;
            left: 5px; margin: 3px; padding: 3px;"
            /> 

    </SvgPanZoom>

</template>


<script>

    import SvgPanZoom from "vue-svg-pan-zoom";

    import RawTiger from './RawTiger.vue';

export default {

    components: {  SvgPanZoom, RawTiger },

};


</script>


<style>

    @import './../../node_modules/vue-svg-pan-zoom/dist/vue-svg-pan-zoom.css';

</style>

My App.vue looks as follows:

<template>
  <div id="app">
      <svg-thumbnail></svg-thumbnail>
  </div>
</template>

<script>
import Thumbnail from './components/Thumbnail.vue';

export default {
  name: 'app',
  components: {
    'svg-thumbnail': Thumbnail 
  },
  data () {
    return {
    }
  }
}
</script>

<style>
</style>

When I run the application, I can see the Tiger and thumbnail but I also have an error in my Console:

vue.esm.js?efeb:628 [Vue warn]: Error in mounted hook: "ReferenceError: main is not defined"

found in

---> <SvgPanZoom>
       <SvgThumbnail> at src/components/Thumbnail.vue
         <App> at src/App.vue
           <Root>

vue.esm.js?efeb:1897 ReferenceError: main is not defined
    at t.default (vue-svg-pan-zoom.js?2d4c:1)
    at VueComponent.mounted (vue-svg-pan-zoom.js?2d4c:1)
    at invokeWithErrorHandling (vue.esm.js?efeb:1863)
    at callHook (vue.esm.js?efeb:4222)
    at Object.insert (vue.esm.js?efeb:3148)
    at invokeInsertHook (vue.esm.js?efeb:6351)
    at Vue.patch [as __patch__] (vue.esm.js?efeb:6570)
    at Vue._update (vue.esm.js?efeb:3948)
    at Vue.updateComponent (vue.esm.js?efeb:4069)
    at Watcher.get (vue.esm.js?efeb:4482)

Is there some bug in the package or in my code?
Thanks!

[yanick]

I'll try to reproduce. As the thumbnail code was for generic javascript interaction with the page, I'd not be surprised if there are warnings and errors popping up here and there. But if the thumbnail shows and works, that's already good. Just... don't look too closely at your console. ;-)

[yanick]

I have released v1.0.0 that brought some extensive changes to the guts of the thumbnail component. Can you upgrade to this version and let me know if things work better for you now?

[JumboLove]

Can you update the documentation for the new thumbnail changes?
vue-svg-pan-zoom.css seems to be gone.

[yanick]

Looking, @JumboLove

Btw, the living example for the use of thumbnails resides at https://github.com/yanick/vue-svg-pan-zoom/blob/master/src/thumbnail.stories.vue

[yanick]

@JumboLove Can you have a gander at #6 and let me know if that looks good to you?

[diefimov]

@yanick Thank you very much! That works perfect now!