1. bug fix

2. expose new api

Author: whwnsdlr1

README.md

@@ -1,6 +1,6 @@
 # vue-image-diff
 
-![](https://github.com/whwnsdlr1/vue-image-diff/blob/master/example/example.gif?raw=true)
+![](https://github.com/whwnsdlr1/vue-image-diff/blob/master/example/example.png?raw=true)
 <br />
 vue component for multiple image comparison.
 <br />
@@ -121,13 +121,19 @@ optToolBar = {
 ```
 ### functions
 ![](https://github.com/whwnsdlr1/vue-image-diff/blob/master/example/control_panel.png?raw=true)
-- open Control panel: openControlPanel()
+- openControlPanel(): open Control panel.
+- resetState(): reset to initial state.
+- setState(): set new state.
+- getState(): get current state.
 
+### event
+- onstatechange: vue-event raised when state change with state object. you can catch using <vue-image-diff ... @onstatechange="listener" ... />
 
 ### Control
-- mouse & touch drag - panning
+- left mouse & touch drag - panning
 - mouse wheel & pinch to zoom - zoom in / out
 - mouse doubleclick - change reference image for diff
+- right mouse drag - adjust brightness and contrast
 
 ## Browser support - (tested)
 - Google Chrome 77+
@@ -162,3 +168,7 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
 - eslint
 - eslint-plugin-vue
 - vue-template-compiler
+
+## TO DO
+- support tiff, bmp and 16bit png format.
+- reduce library size.

dist/vue-image-diff.common.js

@@ -1,6 +1,6 @@
 {
   "name": "vue-image-diff",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "description": "vue component for multiple image diff",
   "keywords": [
     "image-diff",

dist/vue-image-diff.common.js.map

@@ -55,11 +55,12 @@ export default {
     'options'
   ],
   data: function () {
+    const Vue = this
     return {
-      x: undefined,
-      y: undefined,
-      zoom: undefined,
-      tolerance: undefined
+      x: Vue.state.coord.x,
+      y: Vue.state.coord.y,
+      zoom: Vue.state.zoom,
+      tolerance: Vue.state.diff.tolerance
     }
   },
   methods: {
@@ -197,18 +198,18 @@ export default {
 
               if (dom.querySelector('.zoom') != undefined) {
                 const value = dom.querySelector('.zoom').value
-                if (value != Vue.state.zoom)
+                if (value != Vue.state.zoom && isNaN(value) == false && `${value}`.length > 0)
                   putValue(newState, ['zoom'], Number(value))
               }
 
               if (dom.querySelector('.voi-window-center') != undefined) {
-                const value = dom.querySelector('.voi-window-center').value
-                if (value != Vue.state.voi.windowCenter)
+                const value = Number(dom.querySelector('.voi-window-center').value)
+                if (value != Vue.state.voi.windowCenter && isNaN(value) == false)
                   putValue(newState, ['voi', 'windowCenter'], Math.min(255, Math.max(0, Number(value))))
               }
               if (dom.querySelector('.voi-window-width') != undefined) {
-                const value = dom.querySelector('.voi-window-width').value
-                if (value != Vue.state.voi.windowWidth)
+                const value = Number(dom.querySelector('.voi-window-width').value)
+                if (value != Vue.state.voi.windowWidth && isNaN(value) == false)
                   putValue(newState, ['voi', 'windowWidth'], Math.min(256, Math.max(1, Number(value))))
               }
               if (newState.voi != undefined) {
@@ -221,7 +222,7 @@ export default {
               if (dom.querySelector('.predefined-image-size-width') != undefined && dom.querySelector('.predefined-image-size-height') != undefined) {
                 const width = Number(dom.querySelector('.predefined-image-size-width').value)
                 const height = Number(dom.querySelector('.predefined-image-size-height').value)
-                if ((width != newState.predefinedImageSize.width || height != newState.predefinedImageSize.height) && width > 0 && height > 0) {
+                if ((width != Vue.state.predefinedImageSize.width || height != Vue.state.predefinedImageSize.height) && width > 0 && height > 0) {
                   putValue(newState, ['predefinedImageSize', 'width'], width)
                   putValue(newState, ['predefinedImageSize', 'height'], height)
                 }
@@ -285,10 +286,11 @@ export default {
               }
               if (dom.querySelector('.style-frame-row-count') != undefined) {
                 const value = dom.querySelector('.style-frame-row-count').value
-                if (value != Vue.state.style.frameRowCount && isNaN(value) == false)
+                if (value != Vue.state.style.frameRowCount && isNaN(value) == false && `${value}`.length > 0)
                   putValue(newState, ['style', 'frameRowCount'], Math.max(1, value))
               }
-              Vue.$emit('state-tochange', newState)
+              if (Object.keys(newState).length > 0)
+                Vue.$emit('state-tochange', newState)
             }
           }
         ],