Improve rectangle selection to generally behave like a 'toggle' and avoid leaving elements behind when selection shrinks too abruptly

js/Toolbar/EditMode.js

@@ -3,6 +3,7 @@ import * as Rectangle from Geometry.Rectangle;
 import toggleWord from Scoria;
 
 var selection = {
+	words: {},
 	x: {from: null, to: null},
 	y: {from: null, to: null}
 };
@@ -37,13 +38,13 @@ function moveRectangle(e) {
 		selector.style.width = Math.abs(selection.x.to - selection.x.from) + 'px';
 		selector.style.top = Math.min(selection.y.from, selection.y.to) + 'px';
 		selector.style.height = Math.abs(selection.y.to - selection.y.from) + 'px';
-		flagAllIn(Rectangle.make(selection), page);
+		updateSelection();
 	}
 }
 
 function endRectangle(e) {
 	if(mode.value == 'edit') {
-		selection.x.from = selection.y.from = selection.x.to = selection.y.to = null;
+		selection = {words: {}, x: {from: null, to: null}, y: {from: null, to: null}};
 		selector.style.left = selector.style.top = selector.style.width =
 			selector.style.height = null;
 		selector.className = '';
@@ -51,18 +52,33 @@ function endRectangle(e) {
 	}
 }
 
-function flagAllIn(rectangle, domElem) {
-	if(domElem.classList.contains('String')) {
-		if(Rectangle.contains(rectangle, Rectangle.make(domElem))) {
-			toggleWord(domElem, true);
-		} else if(Rectangle.intersects(rectangle, Rectangle.make(domElem))) {
-			toggleWord(domElem, false);
+function updateSelection() {
+	var rectangle = Rectangle.make(selection);
+	updateSelected(rectangle, page);
+	for(var id in selection.words) {
+		if(!Rectangle.contains(rectangle, selection.words[id].rectangle)) {
+			toggleWord(selection.words[id].domElem);
+			delete selection.words[id];
 		}
+	}
+}
+
+function updateSelected(rectangle, domElem) {
+	if(domElem.classList.contains('String')) {
+		updateWord(rectangle, domElem);
 	} else {
 		for(var i = 0; i < domElem.children.length; i++) {
 			if(Rectangle.intersects(rectangle, Rectangle.make(domElem.children[i]))) {
-				flagAllIn(rectangle, domElem.children[i]);
+				updateSelected(rectangle, domElem.children[i]);
 			}
 		}
 	}
 }
+
+function updateWord(rectangle, domElem) {
+	var elemRectangle = Rectangle.make(domElem);
+	if(Rectangle.contains(rectangle, elemRectangle) && !selection.words[domElem.id]) {
+		selection.words[domElem.id] = {rectangle: elemRectangle, domElem: domElem};
+		toggleWord(domElem);
+	}
+}