misc work

src/SvgPanZoom.vue

@@ -1,6 +1,9 @@
 <template>
     <div>
         <slot />
+        <SvgPanZoomThumbnail v-if="has_thumbnail">
+            <slot name="thumbnail" />
+        </SvgPanZoomThumbnail>
     </div>
 </template>
 
@@ -10,9 +13,14 @@ import svg_pan_zoom from 'svg-pan-zoom';
 
 import props from './props';
 
+import thumbnailViewer from './thumbnailViewer';
+import SvgPanZoomThumbnail from './SvgPanZoomThumbnail.vue';
+
 export default {
     props,
+    components: { SvgPanZoomThumbnail },
     computed: {
+        has_thumbnail: function() { return this.$slots.thumbnail },
         options: function() {
             let options = {};
 
@@ -26,7 +34,20 @@ export default {
         }
     },
     mounted: function() {
-        svg_pan_zoom( this.$slots.default[0].elm , this.options );
+        let options = {};
+
+        Object.keys(props).filter( k => this[k] !== undefined ).forEach( k => options[k] = this[k] );
+
+        if( this.has_thumbnail ) {
+            this.$slots.thumbnail[0].elm.id  = 'thumbView';
+            thumbnailViewer({
+                mainViewId: this.$slots.default[0].elm.id,
+                thumbViewId: 'thumbView',
+            });
+        }
+        else {
+            svg_pan_zoom( this.$slots.default[0].elm , options );
+        }
     },
 };
 

src/SvgPanZoomThumbnail.vue

@@ -7,7 +7,7 @@
           <line id="line2" stroke="red" stroke-width="2px" x1="0" y1="0" x2="0" y2="0"/>
         </g>
       </svg>
-      <slot />
+        <slot />
 </div>
 </template>
 

src/index.js

@@ -1,4 +1,5 @@
 import SvgPanZoom from './SvgPanZoom.vue';
+import SvgPanZoomThumbnail from './SvgPanZoomThumbnail.vue';
 
 export { SvgPanZoom };
 export default SvgPanZoom;

src/stories.js

@@ -14,5 +14,5 @@ const stories = storiesOf('SvgPanZoom', module)
     () => SingleStory
 )
 .add( 'layers', () => LayerStory )
-.add( 'thumbnail', () => ThumbnailStory )
+.add( 'thumbnail -- needs to be first story loaded to work', () => ThumbnailStory )
 ;

src/thumbnail.stories.vue

@@ -1,9 +1,9 @@
 <template>
     <SvgPanZoom
-        style="width: 300px; height: 500px; border:1px solid black; "
+        style="width: 880px; height: 720px; border:1px solid black; "
     >
         <RawTiger /> 
-        <RawTiger slot="thumbnail" id="thumbView" class="thumbViewClass" 
+        <RawTiger slot="thumbnail" class="thumbViewClass" 
             style="position: absolute; width: 20%; height: 30% bottom: 5px;
             left: 5px; margin: 3px; padding: 3px;"
             /> 
@@ -12,7 +12,7 @@
 
 
 <script>
-import { SvgPanZoom, SvgPanZoomThumbnail } from './index.vue';
+import { SvgPanZoom, SvgPanZoomThumbnail } from './index';
 import RawTiger from './RawTiger.vue';