Merge branch 'alessiocarrafa-master'

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

Changes

@@ -1,5 +1,9 @@
 Release history for vue-svg-pan-zoom
 
+$NEXT
+
+- exposes some of svg-pan-zoom api. (alessiocarrafa, GH#7)
+
 v1.0.1 2019-05-26
 
 - corrects the thumbnail docs in the README. (GH#6)

package.json

@@ -14,25 +14,25 @@
     "url": "https://github.com/yanick/vue-svg-pan-zoom/issues"
   },
   "devDependencies": {
-    "@babel/cli": "^7.4.3",
+    "@babel/cli": "7.4.3",
-    "@babel/core": "^7.4.3",
+    "@babel/core": "7.4.3",
-    "@babel/preset-env": "^7.4.3",
+    "@babel/preset-env": "7.4.3",
-    "@storybook/addon-actions": "^5.0.10",
+    "@storybook/addon-actions": "5.0.10",
-    "@storybook/addon-knobs": "^5.0.10",
+    "@storybook/addon-knobs": "5.0.10",
-    "@storybook/addons": "^5.0.10",
+    "@storybook/addons": "5.0.10",
-    "@storybook/vue": "^5.0.10",
+    "@storybook/vue": "5.0.10",
-    "babel-loader": "^8.0.5",
+    "babel-loader": "8.0.5",
-    "babel-preset-vue": "^2.0.2",
+    "babel-preset-vue": "2.0.2",
-    "poi": "^12.6.6",
+    "poi": "12.6.6",
-    "vue": "^2.5.13",
+    "vue": "2.5.13",
-    "vue-loader": "^15.7.0",
+    "vue-loader": "15.7.0",
-    "vue-template-compiler": "^2.5.13"
+    "vue-template-compiler": "2.5.13"
   },
   "dependencies": {
-    "svg-pan-zoom": "^3.6.0"
+    "svg-pan-zoom": "3.6.0"
   },
   "scripts": {
-    "build": "poi src/index.js --format cjs -d dist/ --target node",
+    "build": "poi src/index.js --format cjs -d dist/",
     "storybook": "start-storybook -p 9009 -s public",
     "build-storybook": "build-storybook -s public"
   }

src/Scope.vue

@@ -4,9 +4,30 @@
   </svg>
 </template>
 
-<script>
+<style scoped>
+  .scope {
+    fill: red;
+    fill-opacity: 0.1;
+    stroke: red;
+    stroke-width: 2px;
+  }
 
-function updateScope(){
+  svg.thumbViewClass {
+    border: 1px solid black;
+    position: absolute;
+    bottom: 5px;
+    left: 5px;
+    width: 20%;
+    height: 30%;
+    margin: 3px;
+    padding: 3px;
+    overflow: hidden;
+    z-index: 120;
+  }
+</style>
+
+<script>
+  function updateScope(){
     let main = this.mainSPZ;
     let thumb = this.thumbnailSPZ;
 
@@ -32,10 +53,10 @@ function updateScope(){
     this.y = scopeY + 1;
     this.width = scopeWidth - 2;
     this.height = scopeHeight - 2;
-};
+  };
 
 
-function updateMainViewPan(evt){
+  function updateMainViewPan(evt){
     if(evt.which == 0 && evt.button == 0){
       return false;
     }
@@ -56,9 +77,9 @@ function updateMainViewPan(evt){
     var mainPanX = - thumbPanX * mainZoom / thumbZoom;
     var mainPanY = - thumbPanY * mainZoom / thumbZoom;
     main.pan({x:mainPanX, y:mainPanY});
-}
+  }
 
-export default {
+  export default {
     props: [ 'bus', 'mainSPZ', 'thumbnailSPZ' ],
     data: () => ({ x: 0, y: 0, width: 0, height: 0 }),
     watch: {
@@ -67,35 +88,11 @@ export default {
     },
     mounted() {
       const up = updateScope.bind(this);
-        [ 'mainZoom', 'mainPan', 'thumbnailCreated' ].forEach( event => this.bus.$on( event, up )
+      [ 'mainZoom', 'mainPan', 'thumbnailCreated' ].forEach( event => this.bus.$on( event, up ) );
-        );
       up();
     },
     methods: {
       updateMainViewPan
     }
-};
+  };
-
 </script>
-
-<style scoped>
-    .scope {
-        fill: red;
-        fill-opacity: 0.1;
-        stroke: red;
-        stroke-width: 2px;
-    }
-
-    svg.thumbViewClass {
-        border: 1px solid black;
-        position: absolute;
-        bottom: 5px;
-        left: 5px;
-        width: 20%;
-        height: 30%;
-        margin: 3px;
-        padding: 3px;
-        overflow: hidden;
-        z-index: 120;
-      }
-</style>

src/SvgPanZoom.vue

@@ -23,9 +23,11 @@ import { EventBus } from './EventBus';
 
 import SvgPanZoomThumbnail from './SvgPanZoomThumbnail.vue';
 
+import { SvgPanZoomApi } from './SvgPanZoomApi';
+
 export default {
-    props,
   components: { SvgPanZoomThumbnail },
+  props,
   computed: {
     has_thumbnail: function() { return this.$slots.thumbnail },
     options: function() {
@@ -40,6 +42,10 @@ export default {
       return options;
     }
   },
+  data: () => ({
+    spz: null,
+    bus: EventBus()
+  }),
   mounted: function() {
     let options = {};
 
@@ -59,7 +65,14 @@ export default {
 
     this.$emit( 'svgpanzoom', this.spz );
   },
-    data: () => ({ spz: null, bus: EventBus() }),
+  methods: {
+    zoom: function( v ){
+      this.spz.zoom( v );
+    },
+    zoomBy: function( v ){
+      this.spz.zoomBy( v );
+    }
+  }
 };
 
 </script>

src/SvgPanZoomApi.js

@@ -0,0 +1,6 @@
+export const SvgPanZoomApi = ( SvgPanZoomInstance ) => ({
+  zoom: function( v ){
+    SvgPanZoomInstance.zoom( v );
+  },
+  zoomBy: ( v ) => SvgPanZoomInstance.zoomBy( v )
+});

src/SvgPanZoomThumbnail.vue

@@ -11,39 +11,10 @@
       <slot class="thumbnail" />
     </SPZ>
     <Scope :bus="bus" :mainSPZ="mainSPZ" :thumbnailSPZ="thumbnailSPZ" />
-</div>
+  </div>
 </template>
 
-<script>
-import Scope from './Scope.vue';
-
-export default {
-    props: [ 'onThumbnailShown', 'mainSPZ', 'bus' ],
-    beforeCreate: function () {
-       this.$options.components.SPZ = require('./SvgPanZoom.vue').default
-    },
-    methods: {
-        zoomMain(evt) {
-            this.mainSPZ[ event.deltaY < 0 ? 'zoomIn' : 'zoomOut' ]();
-        },
-        thumbnailSPZcreated(spz) {
-            this.thumbnailSPZ = spz;
-            this.bus.$emit( 'thumbnailCreated', spz );
-        },
-    },
-    mounted() {
-        if( this.onThumbnailShown ) {
-           this.onThumbnailShown();
-        }
-    },
-    components: { Scope },
-    data: () => ({ thumbnailSPZ: null })
-};
-
-</script>
-
 <style>
-
   .thumbView {
     z-index: 110;
     background: white;
@@ -65,5 +36,31 @@ export default {
     width: 100% !important;
     height: 100% !important;
   }
-
 </style>
+
+<script>
+import Scope from './Scope.vue';
+
+export default {
+  components: { Scope },
+  props: [ 'onThumbnailShown', 'mainSPZ', 'bus' ],
+  data: () => ({ thumbnailSPZ: null }),
+  beforeCreate: function () {
+    this.$options.components.SPZ = require('./SvgPanZoom.vue').default
+  },
+  methods: {
+    zoomMain(evt) {
+      this.mainSPZ[ event.deltaY < 0 ? 'zoomIn' : 'zoomOut' ]();
+    },
+    thumbnailSPZcreated(spz) {
+      this.thumbnailSPZ = spz;
+      this.bus.$emit( 'thumbnailCreated', spz );
+    },
+  },
+  mounted() {
+    if( this.onThumbnailShown ) {
+      this.onThumbnailShown();
+    }
+  }
+};
+</script>

src/props.js

@@ -1,25 +1,25 @@
 export default {
-        'zoomEnabled':               { type: Boolean, default: true },
+  zoomEnabled:                { type: Boolean, default: true },
-        'controlIconsEnabled':       { type: Boolean, default: false },
+  controlIconsEnabled:        { type: Boolean, default: false },
-        'fit':                       { type: Boolean, default: true },
+  fit:                        { type: Boolean, default: true },
-        'panEnabled':                { type: Boolean, default: true },
+  panEnabled:                 { type: Boolean, default: true },
-        'dblClickZoomEnabled':       { type: Boolean, default: true },
+  dblClickZoomEnabled:        { type: Boolean, default: true },
-        'mouseWheelZoomEnabled':     { type: Boolean, default: true },
+  mouseWheelZoomEnabled:      { type: Boolean, default: true },
-        'preventMouseEventsDefault': { type: Boolean, default: true },
+  preventMouseEventsDefault:  { type: Boolean, default: true },
-        'contain':                   { type: Boolean, default: false },
+  contain:                    { type: Boolean, default: false },
-        'center':                    { type: Boolean, default: true },
+  center:                     { type: Boolean, default: true },
-        viewportSelector:            { default: '.svg-pan-zoom_viewport' }
+  viewportSelector:           { default: '.svg-pan-zoom_viewport' },
-        , zoomScaleSensitivity:      { default: 0.2}
+  zoomScaleSensitivity:       { default: 0.2 },
-        , minZoom:                   { default: 0.5}
+  minZoom:                    { default: 0.5 },
-        , maxZoom:                   { default: 10}
+  maxZoom:                    { default: 10 },
-        , refreshRate:               { default: 'auto'}
+  refreshRate:                { default: 'auto' },
-        , beforeZoom:                { }
+  beforeZoom:                 { },
-        , onZoom:                    { }
+  onZoom:                     { },
-        , beforePan:                 { }
+  beforePan:                  { },
-        , onPan:                     { }
+  onPan:                      { },
-        , onUpdatedCTM:              { }
+  onUpdatedCTM:               { },
-        , customEventsHandler:   { }
+  customEventsHandler:        { },
-        , eventsListenerElement: {  },
+  eventsListenerElement:      { },
   onThumbnailShown:           { },
 };