cover 100%

Author: Johan Junik Jo

README.md

@@ -1,16 +1,18 @@
 # vue-image-diff
-![Alt Text](example.gif)
+![Alt Text](https://github.com/whwnsdlr1/vue-image-diff/blob/master/example/example.gif)
 vue component for multiple image comparison.
+<br />
 currently supported only 8bit jpg and png format.
 
 Web-App: [https://github.com/whwnsdlr1/image-diff](https://github.com/whwnsdlr1/image-diff)
 <br />
 jsfiddle1: [https://jsfiddle.net/whwnsdlr1/xgz21e95/](https://jsfiddle.net/whwnsdlr1/xgz21e95/)
 <br />
-jsfiddle2: 44
+jsfiddle2: [https://jsfiddle.net/whwnsdlr1/84bkq2hy/](https://jsfiddle.net/whwnsdlr1/84bkq2hy/)
 <br />
 
 ## Usage
+### how to include component
 in Vue Project
 ```html
 <template>
@@ -40,6 +42,8 @@ in html
 ...
 </body>
 ```
+
+### arguments structure
 data is array of object.
 ```js
 data = [
@@ -90,7 +94,7 @@ options = {
 }
 ```
 
-options is object
+optionsToolBar is object
 ```js
 optToolBar = {
   show: true, // Bool, (optional)
@@ -113,11 +117,14 @@ optToolBar = {
   }
 }
 ```
+### functions
+- open Control panel: openControlPanel()
+![Alt Text](https://github.com/whwnsdlr1/vue-image-diff/blob/master/example/control_panel.png)
 
 ### Control
 - mouse & touch drag - panning
 - mouse wheel & pinch to zoom - zoom in / out
-- mouse doubleclick - select reference image for diff
+- mouse doubleclick - change reference image for diff
 
 ## Browser support - (tested)
 - Google Chrome 77+
@@ -151,11 +158,4 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
 - babel-eslint
 - eslint
 - eslint-plugin-vue
-<<<<<<< HEAD
 - vue-template-compiler
-=======
-- vue-template-compiler
-
-## TO-DO
-- support other image format(bmp, tiff)
->>>>>>> 178c8e43b796b7c6fef2decb6685709138db91fb

dist/vue-image-diff.common.js

@@ -207,7 +207,6 @@ export default {
                 cornerstoneImage = await Vue.$cornerstone.createCornerstoneImageRgba(undefined, image.pixelData, defWidth, defHeight)
                 resized = false
               }
-              
               framesData.push({
                 id: datum.id,
                 cornerstoneImage,
@@ -408,6 +407,20 @@ export default {
           }
 
           if (Vue.state.diff.activate == true) {
+            if (data.diff.opacity != undefined) {
+              Vue.state.diff.opacity = data.diff.opacity
+            }
+            let isChangeDiffColors = false
+            if (data.diff.colors != undefined) {
+              if (data.diff.colors.same != undefined) {
+                Vue.state.diff.colors.same = data.diff.colors.same
+                isChangeDiffColors = true
+              }
+              if (data.diff.colors.diff != undefined) {
+                Vue.state.diff.colors.diff = data.diff.colors.diff
+                isChangeDiffColors = true
+              }
+            }
             Vue.layer.message = 'check pre-cacluated diff'
             await Vue.nextTick()
             let framesData = Vue.framesData
@@ -424,6 +437,9 @@ export default {
                   frameData.cornerstoneImage.height
                 )
               }
+              if (data.diff.opacity != undefined) {
+                frameData.diff.opacity = Vue.state.diff.opacity
+              }
             }
             if (Vue.diffs == undefined) {
               let diffs = {}
@@ -474,7 +490,7 @@ export default {
               referenceFrameData.diff.pixelCount = undefined
               referenceFrameData.diff.psnr = undefined
             }
-            if (isChangeTolerance || isChangeReference) {
+            if (isChangeDiffColors || isChangeTolerance || isChangeReference) {
               const tolerance = Vue.state.diff.tolerance
               const frameId1 = Vue.framesData[Vue.framesData.map(v => v.id).indexOf(Vue.state.diff.reference.id)].id
               for (let i2 = 0; i2 < Vue.framesData.length; i2++) {
@@ -521,6 +537,16 @@ export default {
             }
           }
         }
+        if (data.style != undefined) {
+          if (data.style.borderWidth != undefined)
+            Vue.state.style.borderWidth = data.style.borderWidth
+          if (data.style.borderColor != undefined)
+            Vue.state.style.borderColor = data.style.borderColor
+          if (data.style.showOverlayText != undefined)
+            Vue.state.style.showOverlayText = data.style.showOverlayText
+          if (data.style.frameRowCount != undefined)
+            Vue.state.style.frameRowCount = data.style.frameRowCount
+        }
         Vue.layer.active = false
       })
     },