From dbff7a2c5fecce63b8ecfcf2f5cc8a28e88ea742 Mon Sep 17 00:00:00 2001 From: barsdeveloper Date: Sun, 3 Oct 2021 00:41:25 +0200 Subject: [PATCH] Selection fixed, SimpleSelectionModel added --- ...electionModel.js => FastSelectionModel.js} | 53 +++++--- js/OrderedIndexArray.js | 48 ++++++- js/SimpleSelectionModel.js | 44 ++++++ js/UEBlueprint.js | 7 +- js/UEBlueprintObject.js | 3 + ueblueprint.html | 7 +- ueblueprint.js | 126 +++++++++++++----- 7 files changed, 219 insertions(+), 69 deletions(-) rename js/{SelectionModel.js => FastSelectionModel.js} (81%) create mode 100644 js/SimpleSelectionModel.js diff --git a/js/SelectionModel.js b/js/FastSelectionModel.js similarity index 81% rename from js/SelectionModel.js rename to js/FastSelectionModel.js index bdc4c03..99b0dec 100644 --- a/js/SelectionModel.js +++ b/js/FastSelectionModel.js @@ -1,6 +1,6 @@ import OrderedIndexArray from "./OrderedIndexArray.js" -export default class SelectionModel { +export default class FastSelectionModel { /** * @typedef {{ @@ -31,6 +31,8 @@ export default class SelectionModel { this.secondaryOrder = new OrderedIndexArray((element) => this.metadata[element].secondaryBoundary) this.selectToggleFunction = selectToggleFunction this.rectangles = rectangles + this.primaryOrder.reserve(this.rectangles.length) + this.secondaryOrder.reserve(this.rectangles.length) rectangles.forEach((rect, index) => { /** @type Metadata */ let rectangleMetadata = { @@ -42,6 +44,16 @@ export default class SelectionModel { this.metadata[index] = rectangleMetadata selectToggleFunction(rect, false) // Initially deselected (Eventually) const rectangleBoundaries = boundariesFunc(rect) + + // Secondary axis first because it may be inserted in this.secondaryOrder during the primary axis check + if (this.initialPosition[1] < rectangleBoundaries.secondaryInf) { // Initial position is before the rectangle + rectangleMetadata.secondaryBoundary = rectangleBoundaries.secondaryInf + } else if (rectangleBoundaries.secondarySup < this.initialPosition[1]) { // Initial position is after the rectangle + rectangleMetadata.secondaryBoundary = rectangleBoundaries.secondarySup + } else { + rectangleMetadata.onSecondaryAxis = true + } + if (this.initialPosition[0] < rectangleBoundaries.primaryInf) { // Initial position is before the rectangle rectangleMetadata.primaryBoundary = rectangleBoundaries.primaryInf this.primaryOrder.insert(index) @@ -56,13 +68,6 @@ export default class SelectionModel { selectToggleFunction(rect, true) } } - if (this.initialPosition[1] < rectangleBoundaries.secondaryInf) { // Initial position is before the rectangle - rectangleMetadata.secondaryBoundary = rectangleBoundaries.secondaryInf - } else if (rectangleBoundaries.secondarySup < this.initialPosition[1]) { // Initial position is after the rectangle - rectangleMetadata.secondaryBoundary = rectangleBoundaries.secondarySup - } else { - rectangleMetadata.onSecondaryAxis = true - } }) this.primaryOrder.currentPosition = this.primaryOrder.getPosition(this.initialPosition[0]) this.secondaryOrder.currentPosition = this.secondaryOrder.getPosition(this.initialPosition[1]) @@ -98,12 +103,11 @@ export default class SelectionModel { Math.sign(finalPosition[0] - this.initialPosition[0]), Math.sign(finalPosition[1] - this.initialPosition[1]) ] - const primaryBoundaryCrossed = (index, expanding) => { - this.primaryOrder.currentPosition += direction[0] * (expanding ? 1 : -1) + const primaryBoundaryCrossed = (index, added) => { if (this.metadata[index].onSecondaryAxis) { - this.selectToggleFunction(this.rectangles[index], expanding) + this.selectToggleFunction(this.rectangles[index], added) } else { - if (expanding) { + if (added) { this.secondaryOrder.insert(index, finalPosition[1]) const secondaryBoundary = this.metadata[index].secondaryBoundary if ( @@ -125,23 +129,34 @@ export default class SelectionModel { } if (finalPosition[0] < this.boundaries.primaryN.value) { - primaryBoundaryCrossed(this.boundaries.primaryN.index, finalPosition[0] < this.initialPosition[0]) + --this.primaryOrder.currentPosition + primaryBoundaryCrossed( + this.boundaries.primaryN.index, + this.initialPosition[0] > this.boundaries.primaryN.value && finalPosition[0] < this.initialPosition[0]) } else if (finalPosition[0] > this.boundaries.primaryP.value) { - primaryBoundaryCrossed(this.boundaries.primaryP.index, this.initialPosition[0] < finalPosition[0]) + ++this.primaryOrder.currentPosition + primaryBoundaryCrossed( + this.boundaries.primaryP.index, + this.initialPosition[0] < this.boundaries.primaryP.value && this.initialPosition[0] < finalPosition[0]) } - const secondaryBoundaryCrossed = (index, expanding) => { - this.secondaryOrder.currentPosition += direction[1] * (expanding ? 1 : -1) - this.selectToggleFunction(this.rectangles[index], expanding) + const secondaryBoundaryCrossed = (index, added) => { + this.selectToggleFunction(this.rectangles[index], added) this.computeBoundaries(finalPosition) this.selectTo(finalPosition) } if (finalPosition[1] < this.boundaries.secondaryN.value) { - secondaryBoundaryCrossed(this.boundaries.secondaryN.index, finalPosition[1] < this.initialPosition[1]); + --this.secondaryOrder.currentPosition + secondaryBoundaryCrossed( + this.boundaries.secondaryN.index, + this.initialPosition[1] > this.boundaries.secondaryN.value && finalPosition[1] < this.initialPosition[1]); } else if (finalPosition[1] > this.boundaries.secondaryP.value) { - secondaryBoundaryCrossed(this.boundaries.secondaryP.index, this.initialPosition[1] < finalPosition[1]); + ++this.secondaryOrder.currentPosition + secondaryBoundaryCrossed( + this.boundaries.secondaryP.index, + this.initialPosition[1] < this.boundaries.secondaryP.value && this.initialPosition[1] < finalPosition[1]); } this.finalPosition = finalPosition } diff --git a/js/OrderedIndexArray.js b/js/OrderedIndexArray.js index c8b982b..51d3f3b 100644 --- a/js/OrderedIndexArray.js +++ b/js/OrderedIndexArray.js @@ -17,7 +17,10 @@ export default class OrderedIndexArray { * @returns The element of the array */ get(index) { - return this.array[index] + if (index >= 0 && index < this.length) { + return this.array[index] + } + return null } /** @@ -35,7 +38,7 @@ export default class OrderedIndexArray { */ getPosition(value) { let l = 0 - let r = this.array.length + let r = this.length while (l < r) { let m = Math.floor((l + r) / 2) if (this.comparisonValueSupplier(this.array[m]) < value) { @@ -47,24 +50,46 @@ export default class OrderedIndexArray { return l } + reserve(length) { + if (this.array.length < length) { + let newArray = new Uint32Array(length) + newArray.set(this.array) + this.array = newArray + } + } + /** * Inserts the element in the array. * @param element {number} The value to insert into the array. * @returns {number} The position into occupied by value into the array. */ insert(element, comparisonValue = null) { + let i = 0; + for (i = 0; i < this.length; ++i) { + if (element == this.array[i]) { + console.log("error"); + break; + } + } let position = this.getPosition(this.comparisonValueSupplier(element)) if ( position < this.currentPosition || comparisonValue != null && position == this.currentPosition && this.comparisonValueSupplier(element) < comparisonValue) { ++this.currentPosition } + /* let newArray = new Uint32Array(this.array.length + 1) newArray.set(this.array.subarray(0, position), 0) newArray[position] = element newArray.set(this.array.subarray(position), position + 1) this.array = newArray - this.length = this.array.length + */ + this.shiftRight(position) + this.array[position] = element + ++this.length + if (this.length > this.array.length) { + console.log("error2") + } return position } @@ -87,23 +112,26 @@ export default class OrderedIndexArray { if (position < this.currentPosition) { --this.currentPosition } + /* let newArray = new Uint32Array(this.array.length - 1) newArray.set(this.array.subarray(0, position), 0) newArray.set(this.array.subarray(position + 1), position) this.array = newArray - this.length = this.array.length + */ + this.shiftLeft(position) + --this.length return position } getNext() { - if (this.currentPosition >= 0 && this.currentPosition < this.array.length) { + if (this.currentPosition >= 0 && this.currentPosition < this.length) { return this.get(this.currentPosition) } return null } getNextValue() { - if (this.currentPosition >= 0 && this.currentPosition < this.array.length) { + if (this.currentPosition >= 0 && this.currentPosition < this.length) { return this.comparisonValueSupplier(this.get(this.currentPosition)) } else { return Number.MAX_SAFE_INTEGER @@ -124,4 +152,12 @@ export default class OrderedIndexArray { return Number.MIN_SAFE_INTEGER } } + + shiftLeft(leftLimit, steps = 1) { + this.array.set(this.array.subarray(leftLimit + steps), leftLimit) + } + + shiftRight(leftLimit, steps = 1) { + this.array.set(this.array.subarray(leftLimit, -steps), leftLimit + steps) + } } diff --git a/js/SimpleSelectionModel.js b/js/SimpleSelectionModel.js new file mode 100644 index 0000000..5e0e5cf --- /dev/null +++ b/js/SimpleSelectionModel.js @@ -0,0 +1,44 @@ +export default class SimpleSelectionModel { + + /** + * @typedef {{ + * primaryInf: number, + * primarySup: number, + * secondaryInf: number, + * secondarySup: number + * }} BoundariesInfo + * @typedef {numeric} Rectangle + * @param {number[]} initialPosition Coordinates of the starting point of selection [primaryAxisValue, secondaryAxisValue]. + * @param {Rectangle[]} rectangles Rectangles that can be selected by this object. + * @param {(rect: Rectangle) => BoundariesInfo} boundariesFunc A function that, given a rectangle, it provides the boundaries of such rectangle. + * @param {(rect: Rectangle, selected: bool) => void} selectToggleFunction A function that selects or deselects individual rectangles. + */ + constructor(initialPosition, rectangles, boundariesFunc, selectToggleFunction) { + this.initialPosition = initialPosition + this.finalPosition = initialPosition + this.boundariesFunc = boundariesFunc + this.selectToggleFunction = selectToggleFunction + this.rectangles = rectangles + } + + selectTo(finalPosition) { + let primaryInf = Math.min(finalPosition[0], this.initialPosition[0]) + let primarySup = Math.max(finalPosition[0], this.initialPosition[0]) + let secondaryInf = Math.min(finalPosition[1], this.initialPosition[1]) + let secondarySup = Math.max(finalPosition[1], this.initialPosition[1]) + this.finalPosition = finalPosition + this.rectangles.forEach(rect => { + let boundaries = this.boundariesFunc(rect) + if ( + Math.max(boundaries.primaryInf, primaryInf) < Math.min(boundaries.primarySup, primarySup) + && Math.max(boundaries.secondaryInf, secondaryInf) < Math.min(boundaries.secondarySup, secondarySup) + ) { + this.selectToggleFunction(rect, true) + } else { + + this.selectToggleFunction(rect, false) + } + }) + } + +} \ No newline at end of file diff --git a/js/UEBlueprint.js b/js/UEBlueprint.js index cbe80f2..3ccd455 100644 --- a/js/UEBlueprint.js +++ b/js/UEBlueprint.js @@ -1,7 +1,8 @@ import Utility from "./Utility.js" import UEBlueprintDragScroll from "./UEBlueprintDragScroll.js" import UEBlueprintSelect from "./UEBlueprintSelect.js" -import SelectionModel from "./SelectionModel.js" +import FastSelectionModel from "./FastSelectionModel.js" +import SimpleSelectionModel from "./SimpleSelectionModel.js" /** * @typedef {import("./UEBlueprintObject.js").default} UEBlueprintObject @@ -72,7 +73,7 @@ export default class UEBlueprint extends HTMLElement { this.zoom = 0 /** @type {HTMLElement} */ this.headerElement = null - /** @type {SelectionModel} */ + /** @type {FastSelectionModel} */ this.selectionModel = null /** @type {(node: UEBlueprintObject) => BoundariesInfo} */ this.nodeBoundariesSupplier = (node) => { @@ -336,7 +337,7 @@ export default class UEBlueprint extends HTMLElement { this.selectorElement.style.setProperty('--ueb-select-to-x', initialPosition[0]) this.selectorElement.style.setProperty('--ueb-select-to-y', initialPosition[1]) this.selectorElement.dataset.selecting = "true" - this.selectionModel = new SelectionModel(initialPosition, this.nodes, this.nodeBoundariesSupplier, this.nodeSelectToggleFunction) + this.selectionModel = new FastSelectionModel(initialPosition, this.nodes, this.nodeBoundariesSupplier, this.nodeSelectToggleFunction) } finishSelecting() { diff --git a/js/UEBlueprintObject.js b/js/UEBlueprintObject.js index 36d28a3..5ad1bea 100644 --- a/js/UEBlueprintObject.js +++ b/js/UEBlueprintObject.js @@ -96,6 +96,9 @@ export default class UEBlueprintObject extends UEBlueprintDraggableObject { } setSelected(value = true) { + if (this.selected == value) { + return + } this.selected = value if (value) { this.classList.add('ueb-selected') diff --git a/ueblueprint.html b/ueblueprint.html index a72616d..3eb9aa7 100644 --- a/ueblueprint.html +++ b/ueblueprint.html @@ -16,11 +16,8 @@ diff --git a/ueblueprint.js b/ueblueprint.js index 15a0668..e2ba4b8 100644 --- a/ueblueprint.js +++ b/ueblueprint.js @@ -190,7 +190,10 @@ class OrderedIndexArray { * @returns The element of the array */ get(index) { - return this.array[index] + if (index >= 0 && index < this.length) { + return this.array[index] + } + return null } /** @@ -208,7 +211,7 @@ class OrderedIndexArray { */ getPosition(value) { let l = 0; - let r = this.array.length; + let r = this.length; while (l < r) { let m = Math.floor((l + r) / 2); if (this.comparisonValueSupplier(this.array[m]) < value) { @@ -220,24 +223,46 @@ class OrderedIndexArray { return l } + reserve(length) { + if (this.array.length < length) { + let newArray = new Uint32Array(length); + newArray.set(this.array); + this.array = newArray; + } + } + /** * Inserts the element in the array. * @param element {number} The value to insert into the array. * @returns {number} The position into occupied by value into the array. */ insert(element, comparisonValue = null) { + let i = 0; + for (i = 0; i < this.length; ++i) { + if (element == this.array[i]) { + console.log("error"); + break; + } + } let position = this.getPosition(this.comparisonValueSupplier(element)); if ( position < this.currentPosition || comparisonValue != null && position == this.currentPosition && this.comparisonValueSupplier(element) < comparisonValue) { ++this.currentPosition; } - let newArray = new Uint32Array(this.array.length + 1); - newArray.set(this.array.subarray(0, position), 0); - newArray[position] = element; - newArray.set(this.array.subarray(position), position + 1); - this.array = newArray; - this.length = this.array.length; + /* + let newArray = new Uint32Array(this.array.length + 1) + newArray.set(this.array.subarray(0, position), 0) + newArray[position] = element + newArray.set(this.array.subarray(position), position + 1) + this.array = newArray + */ + this.shiftRight(position); + this.array[position] = element; + ++this.length; + if (this.length > this.array.length) { + console.log("error2"); + } return position } @@ -260,23 +285,26 @@ class OrderedIndexArray { if (position < this.currentPosition) { --this.currentPosition; } - let newArray = new Uint32Array(this.array.length - 1); - newArray.set(this.array.subarray(0, position), 0); - newArray.set(this.array.subarray(position + 1), position); - this.array = newArray; - this.length = this.array.length; + /* + let newArray = new Uint32Array(this.array.length - 1) + newArray.set(this.array.subarray(0, position), 0) + newArray.set(this.array.subarray(position + 1), position) + this.array = newArray + */ + this.shiftLeft(position); + --this.length; return position } getNext() { - if (this.currentPosition >= 0 && this.currentPosition < this.array.length) { + if (this.currentPosition >= 0 && this.currentPosition < this.length) { return this.get(this.currentPosition) } return null } getNextValue() { - if (this.currentPosition >= 0 && this.currentPosition < this.array.length) { + if (this.currentPosition >= 0 && this.currentPosition < this.length) { return this.comparisonValueSupplier(this.get(this.currentPosition)) } else { return Number.MAX_SAFE_INTEGER @@ -297,9 +325,17 @@ class OrderedIndexArray { return Number.MIN_SAFE_INTEGER } } + + shiftLeft(leftLimit, steps = 1) { + this.array.set(this.array.subarray(leftLimit + steps), leftLimit); + } + + shiftRight(leftLimit, steps = 1) { + this.array.set(this.array.subarray(leftLimit, -steps), leftLimit + steps); + } } -class SelectionModel { +class FastSelectionModel { /** * @typedef {{ @@ -330,6 +366,8 @@ class SelectionModel { this.secondaryOrder = new OrderedIndexArray((element) => this.metadata[element].secondaryBoundary); this.selectToggleFunction = selectToggleFunction; this.rectangles = rectangles; + this.primaryOrder.reserve(this.rectangles.length); + this.secondaryOrder.reserve(this.rectangles.length); rectangles.forEach((rect, index) => { /** @type Metadata */ let rectangleMetadata = { @@ -341,6 +379,16 @@ class SelectionModel { this.metadata[index] = rectangleMetadata; selectToggleFunction(rect, false); // Initially deselected (Eventually) const rectangleBoundaries = boundariesFunc(rect); + + // Secondary axis first because it may be inserted in this.secondaryOrder during the primary axis check + if (this.initialPosition[1] < rectangleBoundaries.secondaryInf) { // Initial position is before the rectangle + rectangleMetadata.secondaryBoundary = rectangleBoundaries.secondaryInf; + } else if (rectangleBoundaries.secondarySup < this.initialPosition[1]) { // Initial position is after the rectangle + rectangleMetadata.secondaryBoundary = rectangleBoundaries.secondarySup; + } else { + rectangleMetadata.onSecondaryAxis = true; + } + if (this.initialPosition[0] < rectangleBoundaries.primaryInf) { // Initial position is before the rectangle rectangleMetadata.primaryBoundary = rectangleBoundaries.primaryInf; this.primaryOrder.insert(index); @@ -355,13 +403,6 @@ class SelectionModel { selectToggleFunction(rect, true); } } - if (this.initialPosition[1] < rectangleBoundaries.secondaryInf) { // Initial position is before the rectangle - rectangleMetadata.secondaryBoundary = rectangleBoundaries.secondaryInf; - } else if (rectangleBoundaries.secondarySup < this.initialPosition[1]) { // Initial position is after the rectangle - rectangleMetadata.secondaryBoundary = rectangleBoundaries.secondarySup; - } else { - rectangleMetadata.onSecondaryAxis = true; - } }); this.primaryOrder.currentPosition = this.primaryOrder.getPosition(this.initialPosition[0]); this.secondaryOrder.currentPosition = this.secondaryOrder.getPosition(this.initialPosition[1]); @@ -397,12 +438,11 @@ class SelectionModel { Math.sign(finalPosition[0] - this.initialPosition[0]), Math.sign(finalPosition[1] - this.initialPosition[1]) ]; - const primaryBoundaryCrossed = (index, expanding) => { - this.primaryOrder.currentPosition += direction[0] * (expanding ? 1 : -1); + const primaryBoundaryCrossed = (index, added) => { if (this.metadata[index].onSecondaryAxis) { - this.selectToggleFunction(this.rectangles[index], expanding); + this.selectToggleFunction(this.rectangles[index], added); } else { - if (expanding) { + if (added) { this.secondaryOrder.insert(index, finalPosition[1]); const secondaryBoundary = this.metadata[index].secondaryBoundary; if ( @@ -424,23 +464,34 @@ class SelectionModel { }; if (finalPosition[0] < this.boundaries.primaryN.value) { - primaryBoundaryCrossed(this.boundaries.primaryN.index, finalPosition[0] < this.initialPosition[0]); + --this.primaryOrder.currentPosition; + primaryBoundaryCrossed( + this.boundaries.primaryN.index, + this.initialPosition[0] > this.boundaries.primaryN.value && finalPosition[0] < this.initialPosition[0]); } else if (finalPosition[0] > this.boundaries.primaryP.value) { - primaryBoundaryCrossed(this.boundaries.primaryP.index, this.initialPosition[0] < finalPosition[0]); + ++this.primaryOrder.currentPosition; + primaryBoundaryCrossed( + this.boundaries.primaryP.index, + this.initialPosition[0] < this.boundaries.primaryP.value && this.initialPosition[0] < finalPosition[0]); } - const secondaryBoundaryCrossed = (index, expanding) => { - this.secondaryOrder.currentPosition += direction[1] * (expanding ? 1 : -1); - this.selectToggleFunction(this.rectangles[index], expanding); + const secondaryBoundaryCrossed = (index, added) => { + this.selectToggleFunction(this.rectangles[index], added); this.computeBoundaries(finalPosition); this.selectTo(finalPosition); }; if (finalPosition[1] < this.boundaries.secondaryN.value) { - secondaryBoundaryCrossed(this.boundaries.secondaryN.index, finalPosition[1] < this.initialPosition[1]); + --this.secondaryOrder.currentPosition; + secondaryBoundaryCrossed( + this.boundaries.secondaryN.index, + this.initialPosition[1] > this.boundaries.secondaryN.value && finalPosition[1] < this.initialPosition[1]); } else if (finalPosition[1] > this.boundaries.secondaryP.value) { - secondaryBoundaryCrossed(this.boundaries.secondaryP.index, this.initialPosition[1] < finalPosition[1]); + ++this.secondaryOrder.currentPosition; + secondaryBoundaryCrossed( + this.boundaries.secondaryP.index, + this.initialPosition[1] < this.boundaries.secondaryP.value && this.initialPosition[1] < finalPosition[1]); } this.finalPosition = finalPosition; } @@ -516,7 +567,7 @@ class UEBlueprint extends HTMLElement { this.zoom = 0; /** @type {HTMLElement} */ this.headerElement = null; - /** @type {SelectionModel} */ + /** @type {FastSelectionModel} */ this.selectionModel = null; /** @type {(node: UEBlueprintObject) => BoundariesInfo} */ this.nodeBoundariesSupplier = (node) => { @@ -780,7 +831,7 @@ class UEBlueprint extends HTMLElement { this.selectorElement.style.setProperty('--ueb-select-to-x', initialPosition[0]); this.selectorElement.style.setProperty('--ueb-select-to-y', initialPosition[1]); this.selectorElement.dataset.selecting = "true"; - this.selectionModel = new SelectionModel(initialPosition, this.nodes, this.nodeBoundariesSupplier, this.nodeSelectToggleFunction); + this.selectionModel = new FastSelectionModel(initialPosition, this.nodes, this.nodeBoundariesSupplier, this.nodeSelectToggleFunction); } finishSelecting() { @@ -946,6 +997,9 @@ class UEBlueprintObject extends UEBlueprintDraggableObject { } setSelected(value = true) { + if (this.selected == value) { + return + } this.selected = value; if (value) { this.classList.add('ueb-selected');