yanick
/
vue-svg-pan-zoom
1
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

add build script

zoom
Yanick Champoux 2018-01-22 19:58:11 -05:00
parent 9a27d2b23b
commit 6aa0ac97ca
3 changed files with 114 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
README.mkd
View File

@ -3,7 +3,8 @@
This module is a very simple [Vue][] component providing the
goodness of [SVG-Pan-Zoom][] for SVG elements.
/!\ WARNING: the module is young, basic, and likely to have
/!\ WARNING: the module is young, basic, probably will have its
API change with no notice, and likely to have
bugs. Use at your own risk, send patches for my eternal gratitude.
## Basic Use
@ -38,29 +39,29 @@ In a Single File Component:
* `SvgPanZoom` accepts as attributes all `svg-pan-zoom` options:
| attribute | default |
| --------- | -------- |
|zoomEnabled | true |
|controlIconsEnabled | false |
|fit | true |
|panEnabled | true |
|dblClickZoomEnabled | true |
|mouseWheelZoomEnabled | true |
|preventMouseEventsDefault |true |
|contain | false |
|center | true |
|viewportSelector | .svg-pan-zoom_viewport |
|zoomScaleSensitivity | 0.2 |
|minZoom | 0.5 |
|maxZoom | 10 |
|refreshRate | auto |
|beforeZoom | |
|onZoom | |
|beforePan | |
|onPan | |
|onUpdatedCTM | |
|customEventsHandler | |
|eventsListenerElement | |
| attribute | default |
| --------- | -------- |
| zoomEnabled | true |
| controlIconsEnabled | false |
| fit | true |
| panEnabled | true |
| dblClickZoomEnabled | true |
| mouseWheelZoomEnabled | true |
| preventMouseEventsDefault | true |
| contain | false |
| center | true |
| viewportSelector | .svg-pan-zoom_viewport |
| zoomScaleSensitivity | 0.2 |
| minZoom | 0.5 |
| maxZoom | 10 |
| refreshRate | auto |
| beforeZoom | |
| onZoom | |
| beforePan | |
| onPan | |
| onUpdatedCTM | |
| customEventsHandler | |
| eventsListenerElement | |
## Use with thumbnails
@ -71,30 +72,38 @@ In a Single File Component:
style="width: 300px; height: 500px; border:1px solid black; "
>
<svg> ... </svg>
<SvgPanZoomThumbnail>
<svg> ... </svg>
</SvgPanZoomThumbnail>
<svg slot="thumbnail" class="thumbViewClass">
...
</svg>
</SvgPanZoom>
</template>
<script>
import { SvgPanZoom, SvgPanZoomThumbnail } from 'vue-svg-pan-zoom';
import SvgPanZoom from 'vue-svg-pan-zoom';
export default {
components: { SvgPanZoom, SvgPanZoomThumbnail },
components: { SvgPanZoom },
};
</script>
<style>
@import 'vue-svg-pan-zoom/dist/vue-svg-pan-zoom.css';
</style>
Note that for the css import to work, you'll have to have
[postcss-import](https://github.com/postcss/postcss-import)
installed as a dep.
### Notes
* Just like the `SvgPanZoom`component, `SvgPanZoomThumbnail` only accepts
a `svg` child -- `embed` won't work.
* Just like the main `SvgPanZoom`component, the `thumbnail` slot needs to
be assigned to a `svg` node -- `embed` won't work.
### Storybook demos
To run [Storybook][] stories duplicating the demos of
To run [Storybook][https://github.com/storybooks/storybook] stories duplicating the demos of
the main `SVG-Pan-Zoom` project, do
$ yarn install --dev

3
package.json
View File

@ -2,7 +2,7 @@
"name": "vue-svg-pan-zoom",
"version": "0.0.1",
"description": "Vue component for svg-pan-zoom",
"main": "index.js",
"main": "dist/vue-svg-pan-zoom.js",
"author": "Yanick Champoux",
"license": "MIT",
"devDependencies": {
@ -23,6 +23,7 @@
"svg-pan-zoom": "^3.5.3"
},
"scripts": {
"build": "poi build src/index.js --format cjs --library",
"storybook": "start-storybook -p 9009 -s public",
"build-storybook": "build-storybook -s public"
}

71
src/index.vue Normal file
View File

@ -0,0 +1,71 @@
<template>
<div>
<slot />
<SvgPanZoomThumbnail v-if="has_thumbnail">
<slot name="thumbnail" />
</SvgPanZoomThumbnail>
</div>
</template>
<script>
import svg_pan_zoom from 'svg-pan-zoom';
import SvgPanZoomThumbnail from './SvgPanZoomThumbnail.vue';
export { SvgPanZoomThumbnail } from './SvgPanZoomThumbnail.vue';
import thumbnailViewer from './thumbnailViewer';
let props = {
'zoomEnabled': { type: Boolean, default: true },
'controlIconsEnabled': { type: Boolean, default: false },
'fit': { type: Boolean, default: true },
'panEnabled': { type: Boolean, default: true },
'dblClickZoomEnabled': { type: Boolean, default: true },
'mouseWheelZoomEnabled': { type: Boolean, default: true },
'preventMouseEventsDefault': { type: Boolean, default: true },
'contain': { type: Boolean, default: false },
'center': { type: Boolean, default: true },
viewportSelector: { default: '.svg-pan-zoom_viewport' }
, zoomScaleSensitivity: { default: 0.2}
, minZoom: { default: 0.5}
, maxZoom: { default: 10}
, refreshRate: { default: 'auto'}
, beforeZoom: { }
, onZoom: { }
, beforePan: { }
, onPan: { }
, onUpdatedCTM: { }
, customEventsHandler: { }
, eventsListenerElement: { }
};
export const SvgPanZoom = {
props,
components: { SvgPanZoomThumbnail },
computed: {
has_thumbnail: function() { return this.$slots.thumbnail }
},
mounted: function() {
let options = {};
Object.keys(props).filter( k => this[k] !== undefined ).forEach( k => options[k] = this[k] );
console.log(options);
if( this.has_thumbnail ) {
console.log( this.$slots.default[0].elm.id );
console.log( this.$slots.thumbnail );
thumbnailViewer({
mainViewId: this.$slots.default[0].elm.id,
thumbViewId: 'thumbView',
});
}
else {
svg_pan_zoom( this.$slots.default[0].elm , options );
}
// svg_pan_zoom( '#mainView', options );
},
};
export default SvgPanZoom;
</script>