Browse Source

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

better-rectangles
Tissevert 11 months ago
parent
commit
09eb3bc61b
  1. 34
      js/Toolbar/EditMode.js

34
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);
}
}
Loading…
Cancel
Save