misc work
This commit is contained in:
parent
6aa0ac97ca
commit
d9fb3bc67c
@ -1,6 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<slot />
|
<slot />
|
||||||
|
<SvgPanZoomThumbnail v-if="has_thumbnail">
|
||||||
|
<slot name="thumbnail" />
|
||||||
|
</SvgPanZoomThumbnail>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -10,9 +13,14 @@ import svg_pan_zoom from 'svg-pan-zoom';
|
|||||||
|
|
||||||
import props from './props';
|
import props from './props';
|
||||||
|
|
||||||
|
import thumbnailViewer from './thumbnailViewer';
|
||||||
|
import SvgPanZoomThumbnail from './SvgPanZoomThumbnail.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props,
|
props,
|
||||||
|
components: { SvgPanZoomThumbnail },
|
||||||
computed: {
|
computed: {
|
||||||
|
has_thumbnail: function() { return this.$slots.thumbnail },
|
||||||
options: function() {
|
options: function() {
|
||||||
let options = {};
|
let options = {};
|
||||||
|
|
||||||
@ -26,7 +34,20 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted: function() {
|
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 );
|
||||||
|
}
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
import SvgPanZoom from './SvgPanZoom.vue';
|
import SvgPanZoom from './SvgPanZoom.vue';
|
||||||
|
import SvgPanZoomThumbnail from './SvgPanZoomThumbnail.vue';
|
||||||
|
|
||||||
export { SvgPanZoom };
|
export { SvgPanZoom };
|
||||||
export default SvgPanZoom;
|
export default SvgPanZoom;
|
||||||
|
@ -14,5 +14,5 @@ const stories = storiesOf('SvgPanZoom', module)
|
|||||||
() => SingleStory
|
() => SingleStory
|
||||||
)
|
)
|
||||||
.add( 'layers', () => LayerStory )
|
.add( 'layers', () => LayerStory )
|
||||||
.add( 'thumbnail', () => ThumbnailStory )
|
.add( 'thumbnail -- needs to be first story loaded to work', () => ThumbnailStory )
|
||||||
;
|
;
|
||||||
|
@ -1,9 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<SvgPanZoom
|
<SvgPanZoom
|
||||||
style="width: 300px; height: 500px; border:1px solid black; "
|
style="width: 880px; height: 720px; border:1px solid black; "
|
||||||
>
|
>
|
||||||
<RawTiger />
|
<RawTiger />
|
||||||
<RawTiger slot="thumbnail" id="thumbView" class="thumbViewClass"
|
<RawTiger slot="thumbnail" class="thumbViewClass"
|
||||||
style="position: absolute; width: 20%; height: 30% bottom: 5px;
|
style="position: absolute; width: 20%; height: 30% bottom: 5px;
|
||||||
left: 5px; margin: 3px; padding: 3px;"
|
left: 5px; margin: 3px; padding: 3px;"
|
||||||
/>
|
/>
|
||||||
@ -12,7 +12,7 @@
|
|||||||
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { SvgPanZoom, SvgPanZoomThumbnail } from './index.vue';
|
import { SvgPanZoom, SvgPanZoomThumbnail } from './index';
|
||||||
import RawTiger from './RawTiger.vue';
|
import RawTiger from './RawTiger.vue';
|
||||||
|
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user