Skip to content

Commit 681b3f6

Browse files
jsbroksjsbroks
committed
Select tool update (#87, #81)
1 parent 14eb329 commit 681b3f6

File tree

6 files changed

+151
-50
lines changed

6 files changed

+151
-50
lines changed

‎client/src/components/annotator/Annotation.vue‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -235,6 +235,10 @@ export default {
235235
236236
this.compoundPath.data.annotationId = this.index;
237237
this.setColor();
238+
239+
this.compoundPath.onClick = () => {
240+
this.$emit("click", this.index);
241+
};
238242
},
239243
deleteAnnotation() {
240244
axios.delete("/api/annotation/" + this.annotation.id).then(() => {
@@ -259,6 +263,7 @@ export default {
259263
if (this.compoundPath == null) this.createCompoundPath();
260264
261265
let copy = this.compoundPath.clone();
266+
copy.fullySelected = false;
262267
copy.visible = false;
263268
this.pervious.push(copy);
264269
@@ -296,11 +301,14 @@ export default {
296301
297302
this.compoundPath.addChild(newPath);
298303
});
304+
305+
this.compoundPath.fullySelected = true;
299306
},
300307
undoCompound() {
301308
if (this.pervious.length == 0) return;
302309
this.compoundPath.remove();
303310
this.compoundPath = this.pervious.pop();
311+
this.compoundPath.fullySelected = this.isCurrent;
304312
},
305313
/**
306314
* Unites current annotation path with anyother path.
@@ -317,6 +325,7 @@ export default {
317325
this.compoundPath.remove();
318326
this.compoundPath = newCompound;
319327
328+
this.compoundPath.fullySelected = true;
320329
if (simplify) this.simplifyPath();
321330
},
322331
/**
@@ -392,6 +401,10 @@ export default {
392401
},
393402
annotation() {
394403
this.initAnnotation();
404+
},
405+
isCurrent() {
406+
if (this.compoundPath == null) return;
407+
this.compoundPath.fullySelected = this.isCurrent;
395408
}
396409
},
397410
computed: {

‎client/src/components/annotator/Category.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -272,6 +272,8 @@ export default {
272272
onAnnotationClick(index) {
273273
let indices = { annotation: index, category: this.index };
274274
this.selectedAnnotation = index;
275+
this.showAnnotations = true;
276+
275277
this.$emit("click", indices);
276278
},
277279
/**

‎client/src/components/annotator/tools/MagicWandTool.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export default {
2020
cursor: "crosshair",
2121
wand: {
2222
threshold: 30,
23-
blur: 5
23+
blur: 40
2424
}
2525
};
2626
},
@@ -93,9 +93,9 @@ export default {
9393
// Create shape and apply to current annotation
9494
let path = this.flood(x, y, this.wand.threshold, this.wand.blur);
9595
if (event.modifiers.shift) {
96-
this.$parent.currentAnnotation.unite(path);
96+
this.$parent.currentAnnotation.subtract(path, true);
9797
} else {
98-
this.$parent.currentAnnotation.unite(path);
98+
this.$parent.currentAnnotation.unite(path, true);
9999
}
100100
101101
if (path != null) path.remove();

‎client/src/components/annotator/tools/SelectTool.vue‎

Lines changed: 105 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,15 @@ export default {
1717
name: "Select",
1818
cursor: "pointer",
1919
movePath: false,
20+
point: null,
2021
segment: null,
2122
scaleFactor: 15,
23+
edit: {
24+
indicatorWidth: 0,
25+
indicatorSize: 0,
26+
center: null,
27+
canMove: false
28+
},
2229
hover: {
2330
showText: true,
2431
text: null,
@@ -36,7 +43,18 @@ export default {
3643
hitOptions: {
3744
segments: true,
3845
stroke: true,
39-
tolerance: 2
46+
fill: false,
47+
tolerance: 5,
48+
match: hit => {
49+
if (this.point == null) return true;
50+
if (
51+
hit.item instanceof paper.Path ||
52+
hit.item instanceof paper.CompoundPath
53+
) {
54+
return !hit.item.hasOwnProperty("indicator");
55+
}
56+
return true;
57+
}
4058
}
4159
};
4260
},
@@ -94,14 +112,15 @@ export default {
94112
this.hover.text.justification = "left";
95113
this.hover.text.fillColor = "black";
96114
this.hover.text.content = content;
115+
this.hover.text.indicator = true;
97116
98117
this.hover.text.fontSize = this.hover.fontSize;
99118
100119
this.hover.box = new paper.Path.Rectangle(
101120
this.hover.text.bounds,
102121
this.hover.rounded
103122
);
104-
123+
this.hover.box.indicator = true;
105124
this.hover.box.fillColor = "white";
106125
this.hover.box.strokeColor = "white";
107126
this.hover.box.opacity = 0.5;
@@ -120,7 +139,7 @@ export default {
120139
onMouseDown(event) {
121140
let hitResult = this.$parent.paper.project.hitTest(
122141
event.point,
123-
this.hitResult
142+
this.hitOptions
124143
);
125144
126145
if (!hitResult) return;
@@ -132,21 +151,57 @@ export default {
132151
return;
133152
}
134153
135-
this.path = hitResult.item;
154+
let path = hitResult.item;
136155
137156
if (hitResult.type === "segment") {
138157
this.segment = hitResult.segment;
139158
} else if (hitResult.type === "stroke") {
140159
let location = hitResult.location;
141-
this.segment = this.path.insert(location.index + 1, event.point);
160+
this.segment = path.insert(location.index + 1, event.point);
161+
}
162+
163+
if (this.point != null) {
164+
this.edit.canMove = this.point.contains(event.point);
165+
}
166+
},
167+
createPoint(point) {
168+
if (this.point != null) {
169+
this.point.remove();
142170
}
171+
172+
this.point = new paper.Path.Circle(point, this.edit.indicatorSize);
173+
this.point.strokeColor = "white";
174+
this.point.strokeWidth = this.edit.indicatorWidth;
175+
this.point.indicator = true;
143176
},
144177
onMouseDrag(event) {
145178
if (this.segment) {
179+
if (!this.edit.canMove) return;
180+
this.createPoint(event.point);
146181
this.segment.point = event.point;
147182
}
148183
},
149184
onMouseMove(event) {
185+
let hitResult = this.$parent.paper.project.hitTest(
186+
event.point,
187+
this.hitOptions
188+
);
189+
190+
if (hitResult) {
191+
let point = null;
192+
193+
if (hitResult.type === "segment") {
194+
point = hitResult.segment.location.point;
195+
} else if (hitResult.type === "stroke") {
196+
point = hitResult.location.point;
197+
}
198+
199+
if (point != null) {
200+
this.edit.center = point;
201+
this.createPoint(point);
202+
}
203+
}
204+
150205
this.$parent.hover.annotation = -1;
151206
this.$parent.hover.category = -1;
152207
@@ -185,7 +240,7 @@ export default {
185240
}
186241
} else {
187242
this.hover.category = null;
188-
this.hover.annotation = -1;
243+
this.hover.annotation = null;
189244
190245
if (this.hover.text != null) {
191246
this.hover.text.remove();
@@ -197,20 +252,51 @@ export default {
197252
}
198253
},
199254
watch: {
200-
scale(newScale) {
201-
this.hover.rounded = newScale * 5;
202-
this.hover.textShift = newScale * 40;
203-
this.hover.fontSize = newScale * this.scaleFactor;
255+
scale: {
256+
handler(newScale) {
257+
this.hover.rounded = newScale * 5;
258+
this.hover.textShift = newScale * 40;
259+
this.hover.fontSize = newScale * this.scaleFactor;
260+
this.edit.distance = newScale * 40;
261+
this.edit.indicatorSize = newScale * 10;
262+
this.edit.indicatorWidth = newScale * 2;
204263
205-
if (this.hover.text != null) {
206-
this.hover.text.fontSize = this.hover.fontSize;
207-
this.hover.shift =
208-
(this.hover.text.bounds.bottomRight.x -
209-
this.hover.text.bounds.bottomLeft.x) /
210-
2;
211-
let totalShift = this.hover.shift + this.hover.textShift;
212-
this.hover.text.position = this.hover.position.add(totalShift, 0);
213-
this.hover.box.bounds = this.hover.text.bounds;
264+
if (this.edit.center) {
265+
this.createPoint(this.edit.center);
266+
}
267+
268+
if (this.hover.text != null) {
269+
this.hover.text.fontSize = this.hover.fontSize;
270+
this.hover.shift =
271+
(this.hover.text.bounds.bottomRight.x -
272+
this.hover.text.bounds.bottomLeft.x) /
273+
2;
274+
let totalShift = this.hover.shift + this.hover.textShift;
275+
this.hover.text.position = this.hover.position.add(totalShift, 0);
276+
this.hover.box.bounds = this.hover.text.bounds;
277+
}
278+
},
279+
immediate: true
280+
},
281+
isActive(active) {
282+
if (active) {
283+
this.tool.activate();
284+
} else {
285+
if (this.hover.text) {
286+
this.hover.text.remove();
287+
this.hover.box.remove();
288+
289+
this.hover.box = null;
290+
this.hover.text = null;
291+
}
292+
if (this.point) {
293+
this.point.remove();
294+
this.point = null;
295+
this.segment = null;
296+
}
297+
if (this.hover.annotation) {
298+
this.hover.annotation.compoundPath.selected = false;
299+
}
214300
}
215301
}
216302
}

0 commit comments

Comments
 (0)