1 <template src='./template.html'></template> |
1 <template src='./template.html'></template> |
|
2 <style scoped src='./style.css'></style> |
|
3 |
2 <script> |
4 <script> |
|
5 |
|
6 import ModalPanel from '../modalpanel/ModalPanel.vue' |
|
7 |
|
8 |
3 export default { |
9 export default { |
4 props: ["close-with-escape"], |
10 components: { 'modalpanel': ModalPanel }, |
|
11 mounted: function () {}, |
|
12 props: ['transform-matrix', 'image-path', 'image-height', 'image-width'], |
5 data () { |
13 data () { |
|
14 |
6 return { |
15 return { |
7 display: false |
16 diffText: "", |
|
17 tagMode: false, |
|
18 textMode: false, |
|
19 fragmentMode: false, |
|
20 originalPath: "", |
|
21 modifiedPath: "", |
|
22 tags: [] |
|
23 } |
|
24 }, |
|
25 |
|
26 mounted () { return false; }, |
|
27 |
|
28 computed: { |
|
29 matrixTransform: function () { |
|
30 var matrixTransform = ""; |
|
31 if (this.transformMatrix) { |
|
32 matrixTransform = "matrix(" + this.transformMatrix + ")"; |
|
33 } |
|
34 return matrixTransform; |
8 } |
35 } |
9 }, |
36 }, |
10 |
37 |
11 methods: { |
38 methods: { |
12 close: function () { |
39 |
13 this.display = false; |
40 setContent: function (content) { |
|
41 this.$refs.modalcontent.appendChild(content); |
|
42 }, |
|
43 |
|
44 switchMode: function (mode) { |
|
45 var availableMode = ["tagMode", "textMode", "fragmentMode"]; |
|
46 this.tagMode = false; |
|
47 this.textMode = false; |
|
48 this.fragmentMode = false; |
|
49 if (availableMode.indexOf(mode) !== -1) { |
|
50 this[mode] = true; |
|
51 } |
|
52 }, |
|
53 |
|
54 |
|
55 showTagDiff: function (tags, editedTags) { |
|
56 this.switchMode("tagMode"); |
|
57 //si le label a changé considé qu'il a été effacé. |
|
58 var diff = iconolab.JsonDiff.diff(tags, editedTags); |
|
59 var tagsToRender = []; |
|
60 |
|
61 tags.forEach(function(tag, i) { |
|
62 |
|
63 var tag = JSON.parse(JSON.stringify(tag)); |
|
64 var deletedDiff = diff["_"+i]; |
|
65 var currentDiff = diff[i]; |
|
66 |
|
67 if (!deletedDiff && !currentDiff) { |
|
68 tagsToRender.push(tag); //render this tag |
|
69 } |
|
70 |
|
71 if (Array.isArray(deletedDiff)) { |
|
72 tag.action = "del"; |
|
73 tagsToRender.push(tag); |
|
74 return true; |
|
75 } |
|
76 |
|
77 if (currentDiff && (currentDiff.tag_label || currentDiff.relevancy || currentDiff.accuracy)) { |
|
78 tag.action = (currentDiff.tag_label) ? "replace" : "update"; |
|
79 tag.new_label = editedTags[i].tag_label; |
|
80 tag.new_accuracy = editedTags[i].accuracy; |
|
81 tag.new_relevancy = editedTags[i].relevancy; |
|
82 tagsToRender.push(tag); |
|
83 return true; |
|
84 } |
|
85 if (Array.isArray(currentDiff)) { |
|
86 tag.action = "add"; |
|
87 tagsToRender.push(editedTags[i]); |
|
88 return true; |
|
89 } |
|
90 }); |
|
91 /* deal with remain */ |
|
92 if (tags.length < editedTags.length) { |
|
93 var remainedTags = editedTags.slice(tags.length); |
|
94 remainedTags.forEach(function (tag, i) { |
|
95 tag.action = "add"; |
|
96 tagsToRender.push(tag); |
|
97 }); |
|
98 } |
|
99 this.tags = tagsToRender; |
|
100 }, |
|
101 |
|
102 showTextDiff: function (original, mod) { |
|
103 this.switchMode("textMode"); |
|
104 var diff = iconolab.JsDiff.diffWords(original, mod); |
|
105 var fragment = document.createDocumentFragment(); |
|
106 for (var i=0; i < diff.length; i++) { |
|
107 |
|
108 if (diff[i].added && diff[i + 1] && diff[i + 1].removed) { |
|
109 var swap = diff[i]; |
|
110 diff[i] = diff[i + 1]; |
|
111 diff[i + 1] = swap; |
|
112 } |
|
113 |
|
114 var node; |
|
115 if (diff[i].removed) { |
|
116 node = document.createElement('del'); |
|
117 node.appendChild(document.createTextNode(diff[i].value)); |
|
118 } else if (diff[i].added) { |
|
119 node = document.createElement('ins'); |
|
120 node.appendChild(document.createTextNode(diff[i].value)); |
|
121 } else { |
|
122 node = document.createTextNode(diff[i].value); |
|
123 } |
|
124 |
|
125 fragment.appendChild(node); |
|
126 } |
|
127 |
|
128 this.diffText = jQuery('<div>').append(fragment).html(); |
|
129 }, |
|
130 |
|
131 showFragmentDiff: function (originalPath, modifiedPath) { |
|
132 this.switchMode("fragmentMode"); |
|
133 this.originalPath = originalPath; |
|
134 this.modifiedPath = modifiedPath; |
14 }, |
135 }, |
15 |
136 |
16 show: function () { |
137 show: function () { |
17 this.display = true; |
138 this.$refs.panel.show(); |
|
139 }, |
|
140 |
|
141 hide: function () { |
|
142 this.$refs.panel.hide(); |
18 } |
143 } |
19 } |
144 } |
20 } |
145 } |
21 |
146 |
22 </script> |
147 </script> |