From 4d4157aa72ef9166a3b431a9228c823283d8379d Mon Sep 17 00:00:00 2001 From: Yanick Champoux Date: Mon, 15 Jan 2018 18:32:25 -0500 Subject: [PATCH 1/5] add a README --- README.mkd | 102 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 102 insertions(+) create mode 100644 README.mkd diff --git a/README.mkd b/README.mkd new file mode 100644 index 0000000..226c233 --- /dev/null +++ b/README.mkd @@ -0,0 +1,102 @@ +# vue-svg-pan-zoom : Vue component for SVG-Pan-Zoom + +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 +bugs. Use at your own risk, send patches for my eternal gratitude. + +## Basic Use + +In a Single File Component: + + + + + +### Notes + +* currently the `SvgPanZoom` component only works with a `svg` child -- `embed` won't work. + +* `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 | | + +## Use with thumbnails + +In a Single File Component: + + + + + + +### Notes + +* Just like the `SvgPanZoom`component, `SvgPanZoomThumbnail` only accepts +a `svg` child -- `embed` won't work. + +### Storybook demos + +To run [Storybook][] stories duplicating the demos of +the main `SVG-Pan-Zoom` project, do + + $ yarn install --dev + $ yarn storybook + From 6ca74bd28263cf4f77cc7dd18f1715d934d91457 Mon Sep 17 00:00:00 2001 From: Yanick Champoux Date: Mon, 15 Jan 2018 18:40:59 -0500 Subject: [PATCH 2/5] movie javascript code around --- src/SvgPanZoom.vue | 24 ++++++++++++++++++++++++ src/index.js | 4 ++++ src/layers.stories.vue | 2 +- src/{index.vue => props.js} | 23 +---------------------- src/stories.js | 2 +- src/thumbnail.stories.vue | 2 +- 6 files changed, 32 insertions(+), 25 deletions(-) create mode 100644 src/SvgPanZoom.vue create mode 100644 src/index.js rename src/{index.vue => props.js} (75%) diff --git a/src/SvgPanZoom.vue b/src/SvgPanZoom.vue new file mode 100644 index 0000000..bf732f5 --- /dev/null +++ b/src/SvgPanZoom.vue @@ -0,0 +1,24 @@ + + + + diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..e7ef74c --- /dev/null +++ b/src/index.js @@ -0,0 +1,4 @@ +import SvgPanZoom from './SvgPanZoom.vue'; + +export { SvgPanZoom }; +export default SvgPanZoom; diff --git a/src/layers.stories.vue b/src/layers.stories.vue index 7cf8acf..9ed745a 100644 --- a/src/layers.stories.vue +++ b/src/layers.stories.vue @@ -30,7 +30,7 @@ diff --git a/src/stories.js b/src/stories.js index 193ca70..d6a2590 100644 --- a/src/stories.js +++ b/src/stories.js @@ -1,6 +1,6 @@ import { storiesOf } from '@storybook/vue'; import { withKnobs, text, number, boolean } from '@storybook/addon-knobs'; -import SvgPanZoom from './index.vue'; +import SvgPanZoom from './index'; import RawTiger from './RawTiger.vue'; diff --git a/src/thumbnail.stories.vue b/src/thumbnail.stories.vue index 11952f7..d7c8322 100644 --- a/src/thumbnail.stories.vue +++ b/src/thumbnail.stories.vue @@ -11,7 +11,7 @@ diff --git a/src/stories.js b/src/stories.js index d6a2590..f81dcb8 100644 --- a/src/stories.js +++ b/src/stories.js @@ -6,32 +6,13 @@ import RawTiger from './RawTiger.vue'; import LayerStory from './layers.stories.vue'; import ThumbnailStory from './thumbnail.stories.vue'; +import SingleStory from './single.stories.vue'; const stories = storiesOf('SvgPanZoom', module) .addDecorator( withKnobs ) -.add('single inline SVG', () => { - return { - components: { SvgPanZoom, RawTiger }, - template: ` - - - ` - }} +.add('single inline SVG', + () => SingleStory ) -.add( 'layers', () => { - return { - components: { LayerStory }, - template: '
' - }; -}) -.add( 'thumbnail', () => { - return { - components: { ThumbnailStory }, - template: '
', - }; -}); +.add( 'layers', () => LayerStory ) +.add( 'thumbnail', () => ThumbnailStory ) +; From d78020a6bdc5238e317589c0a17e674c13d22d82 Mon Sep 17 00:00:00 2001 From: Yanick Champoux Date: Mon, 15 Jan 2018 18:57:05 -0500 Subject: [PATCH 5/5] refactor the code a wee bit --- src/SvgPanZoom.vue | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/src/SvgPanZoom.vue b/src/SvgPanZoom.vue index bf732f5..3176834 100644 --- a/src/SvgPanZoom.vue +++ b/src/SvgPanZoom.vue @@ -12,12 +12,21 @@ import props from './props'; export default { props, - mounted: function() { - let options = {}; + computed: { + options: function() { + let options = {}; - Object.keys(props).filter( k => this[k] !== undefined ).forEach( k => options[k] = this[k] ); - console.log(options); - svg_pan_zoom( this.$slots.default[0].elm , options ); + const is_defined = k => this[k] !== undefined; + + Object.keys(props) + .filter( is_defined ) + .forEach( k => options[k] = this[k] ); + + return options; + } + }, + mounted: function() { + svg_pan_zoom( this.$slots.default[0].elm , this.options ); }, };