From 84de97b65ab5969087687c006daf0ab4bd910fe9 Mon Sep 17 00:00:00 2001
From: Robin Tissot <tissotrobin@gmail.com>
Date: Thu, 4 Mar 2021 17:20:02 +0100
Subject: [PATCH] Allows to edit overlapping regions by disabling cycling on
drag.
---
front/src/baseline.editor.js | 79 +++++++++++++++++++++---------------
1 file changed, 46 insertions(+), 33 deletions(-)
diff --git a/front/src/baseline.editor.js b/front/src/baseline.editor.js
index e1c1dc8a..d5764f89 100644
--- a/front/src/baseline.editor.js
+++ b/front/src/baseline.editor.js
@@ -875,8 +875,6 @@ export class Segmenter {
// this.raster.position = view.center;
// this.img.style.display = 'hidden';
- tool.onMouseDown = this.onMouseDown.bind(this);
-
// hide the tooltip on leaving the area
this.canvas.addEventListener('mouseleave', function() {
this.tooltip.style.display = 'none';
@@ -884,6 +882,8 @@ export class Segmenter {
this.tool = tool;
this.tool.activate();
+ this.resetToolEvents();
+
this.loaded = true;
}
@@ -960,14 +960,31 @@ export class Segmenter {
region.polygonPath.onMouseDown = function(event) {
if (event.event.ctrlKey ||
this.spliting ||
- this.selecting ||
+ // this.selecting ||
isRightClick(event.event) ||
this.mode != 'regions') return;
- this.selecting = region;
+
+ // if what we are clicking on is already selected,
+ // check there isn't something below
+ if (region.selected) {
+ let hit;
+ for (let i=0; i<this.regions.length; i++) {
+ if (this.regions[i] != region) {
+ hit = this.regions[i].polygonPath.hitTest(event.point);
+ if (hit) {
+ this.selecting = this.regions[i];
+ break;
+ }
+ }
+ }
+ if (!hit) this.selecting = region;
+ } else {
+ this.selecting = region;
+ }
var dragging = region.polygonPath.getNearestLocation(event.point).segment;
this.tool.onMouseDrag = function(event) {
- this.selecting = false;
+ this.selecting = region;
if (!event.event.shiftKey) {
this.movePointInView(dragging.point, event.delta);
}
@@ -986,6 +1003,7 @@ export class Segmenter {
}
}
this.tool.onMouseUp = function(event) {
+ this.onMouseUp(event);
this.resetToolEvents();
this.updateRegionsFromCanvas();
}.bind(this);
@@ -1008,6 +1026,7 @@ export class Segmenter {
this.mode != 'lines' ||
this.selecting) return;
this.selecting = line;
+
var hit = line.baselinePath.hitTest(event.point, {
segments: true,
tolerance: 20
@@ -1031,6 +1050,7 @@ export class Segmenter {
}.bind(this);
this.tool.onMouseUp = function(event) {
+ this.onMouseUp(event);
this.resetToolEvents();
line.updateDataFromCanvas();
}.bind(this);
@@ -1099,6 +1119,7 @@ export class Segmenter {
}.bind(this);
this.tool.onMouseUp = function(event) {
+ this.onMouseUp(event);
this.resetToolEvents();
line.updateDataFromCanvas();
}.bind(this);
@@ -1120,9 +1141,9 @@ export class Segmenter {
resetToolEvents() {
this.tool.onMouseDown = this.onMouseDown.bind(this);
+ this.tool.onMouseUp = null; //this.onMouseUp.bind(this);
this.tool.onMouseDrag = this.onMouseDrag.bind(this);
this.tool.onMouseMove = null;
- this.tool.onMouseUp = null;
}
attachTooltip(obj, target) {
@@ -1205,39 +1226,14 @@ export class Segmenter {
onMouseDown(event) {
if (isRightClick(event.event)) return;
- if (this.selecting) {
- if (this.mode == 'regions') {
- // if what we are selecting is already selected, check there isn't something below
- for (let i=0; i<this.regions.length; i++) {
- if (this.selecting.selected && this.regions[i] != this.selecting) {
- let hit = this.regions[i].polygonPath.hitTest(event.point);
- if (hit) {
- this.selecting = this.regions[i];
- break;
- }
- }
- }
- }
- // selection
- if (event.event.shiftKey) {
- this.selecting.toggleSelect();
- this.startLassoSelection(event);
- } else {
- this.selecting.select();
- this.purgeSelection(this.selecting);
- }
- this.trigger('baseline-editor:selection', {target: this.selecting, selection: this.selection});
- this.selecting = null;
- } else {
+ if (!this.selecting) {
if (event.event.ctrlKey) return;
if (this.spliting) {
this.startCuter(event);
} else if (event.event.shiftKey) {
// lasso selection tool
this.startLassoSelection(event);
- } else if (this.hasSelection()) {
- this.purgeSelection();
- } else if (this.mode == 'regions') {
+ } else if (this.mode == 'regions') {
this.startNewRegion(event);
} else { // mode = 'lines'
// create a new line
@@ -1246,6 +1242,23 @@ export class Segmenter {
}
}
+ onMouseUp(event) {
+ if (this.selecting) {
+ // selection
+ if (event.event.shiftKey) {
+ this.selecting.toggleSelect();
+ this.startLassoSelection(event);
+ } else {
+ this.selecting.select();
+ this.purgeSelection(this.selecting);
+ }
+ this.trigger('baseline-editor:selection', {target: this.selecting, selection: this.selection});
+ this.selecting = null;
+ } else if (this.hasSelection()) {
+ this.purgeSelection();
+ }
+ }
+
getRegionsAt(pt) {
// returns all the regions that contains the given point pt
return this.regions.filter(r => r.polygonPath.contains(pt));
--
GitLab