Ma/ueblueprint
1
0
Fork 0
mirror of https://github.com/barsdeveloper/ueblueprint.git synced 2026-02-04 08:50:33 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

SelectionModel fixed

Browse Source
This commit is contained in:
barsdeveloper
2021-10-01 20:07:09 +02:00
parent 01c3147baa
commit 44355afa3e
6 changed files with 236 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
css/ueblueprint-style.css
View File

@@ -60,12 +60,12 @@ u-blueprint {
}
.ueb-grid {
--ueb-grid-line-actual-width: calc(var(--ueb-grid-line-width) / var(--ueb-grid-scale));
--ueb-grid-line-actual-width: calc(var(--ueb-grid-line-width) / var(--ueb-scale));
position : absolute;
min-width : 100%;
min-height : 100%;
width : calc((100% + var(--ueb-additional-x) * 1px) / var(--ueb-grid-scale));
height : calc((100% + var(--ueb-additional-y) * 1px) / var(--ueb-grid-scale));
width : calc((100% + var(--ueb-additional-x) * 1px) / var(--ueb-scale));
height : calc((100% + var(--ueb-additional-y) * 1px) / var(--ueb-scale));
background-color : #262626;
background-image :
/* Axis lines */
@@ -105,7 +105,7 @@ u-blueprint {
var(--ueb-grid-actual-size) var(--ueb-grid-actual-size);
background-position: calc(var(--ueb-translate-x) * 1px) calc(var(--ueb-translate-y) * 1px);
background-repeat : repeat-x, repeat-y, repeat, repeat, repeat, repeat;
transform : scale(var(--ueb-grid-scale), var(--ueb-grid-scale));
transform : scale(var(--ueb-scale), var(--ueb-scale));
transform-origin : 0 0;
overflow : hidden;
}
@@ -113,72 +113,72 @@ u-blueprint {
.ueb-zoom--.ueb,
.ueb {
/* 16/16 */
--ueb-grid-scale : 1;
--ueb-scale : 1;
--ueb-grid-actual-size: var(--ueb-grid-size);
}
.ueb-zoom--1.ueb {
/* 14/16 */
--ueb-grid-scale: 0.875
--ueb-scale: 0.875
}
.ueb-zoom--2.ueb {
/* 12/16 */
--ueb-grid-scale: 0.75
--ueb-scale: 0.75
}
.ueb-zoom--3.ueb {
/* 10.8/16 */
--ueb-grid-scale: 0.675
--ueb-scale: 0.675
}
.ueb-zoom--4.ueb {
/* 8/16 */
--ueb-grid-scale : 0.5;
--ueb-scale : 0.5;
--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 2)
}
.ueb-zoom--5.ueb {
/* 6/16 */
--ueb-grid-scale : 0.375;
--ueb-scale : 0.375;
--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 2);
}
.ueb-zoom--6.ueb {
--ueb-grid-scale : 0.333333;
--ueb-scale : 0.333333;
--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3);
}
.ueb-zoom--7.ueb {
--ueb-grid-scale : 0.3;
--ueb-scale : 0.3;
--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3);
}
.ueb-zoom--8.ueb {
--ueb-grid-scale : 0.266666;
--ueb-scale : 0.266666;
--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3);
}
.ueb-zoom--9.ueb {
--ueb-grid-scale : 0.233333;
--ueb-scale : 0.233333;
--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3);
}
.ueb-zoom--10.ueb {
/* 12/16 */
--ueb-grid-scale : 0.2;
--ueb-scale : 0.2;
--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3);
}
.ueb-zoom--11.ueb {
/* 12/16 */
--ueb-grid-scale : 0.166666;
--ueb-scale : 0.166666;
--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 6);
}
.ueb-zoom--12.ueb {
/* 12/16 */
--ueb-grid-scale : 0.133333;
--ueb-scale : 0.133333;
--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 6);
}
@@ -298,42 +298,82 @@ u-blueprint {
height : calc(max(var(--ueb-select-from-y) - var(--ueb-select-to-y), var(--ueb-select-to-y) - var(--ueb-select-from-y)) * 1px);
background-image:
/* Top */
repeating-linear-gradient(90deg, transparent, transparent 1px, white 2px, white 7px, transparent 7px, transparent 11px),
repeating-linear-gradient(90deg, black, black 8px, transparent 9px, transparent 11px),
repeating-linear-gradient(90deg,
transparent,
transparent calc(1px / var(--ueb-scale)),
white calc(2px / var(--ueb-scale)),
white calc(7px / var(--ueb-scale)),
transparent calc(7px / var(--ueb-scale)),
transparent calc(11px / var(--ueb-scale))),
repeating-linear-gradient(90deg,
black,
black calc(8px / var(--ueb-scale)),
transparent calc(9px / var(--ueb-scale)),
transparent calc(11px / var(--ueb-scale))),
/* Bottom */
repeating-linear-gradient(90deg, transparent, transparent 1px, white 2px, white 7px, transparent 7px, transparent 11px),
repeating-linear-gradient(90deg, black, black 8px, transparent 9px, transparent 11px),
repeating-linear-gradient(90deg,
transparent,
transparent calc(1px / var(--ueb-scale)),
white calc(2px / var(--ueb-scale)),
white calc(7px / var(--ueb-scale)),
transparent calc(7px / var(--ueb-scale)),
transparent calc(11px / var(--ueb-scale))),
repeating-linear-gradient(90deg,
black,
black calc(8px / var(--ueb-scale)),
transparent calc(9px / var(--ueb-scale)),
transparent calc(11px / var(--ueb-scale))),
/* Left */
repeating-linear-gradient(180deg, transparent, transparent 1px, white 1px, white 7px, transparent 7px, transparent 11px),
repeating-linear-gradient(180deg, black, black 8px, transparent 9px, transparent 11px),
repeating-linear-gradient(180deg,
transparent,
transparent calc(1px / var(--ueb-scale)),
white calc(1px / var(--ueb-scale)),
white calc(7px / var(--ueb-scale)),
transparent calc(7px / var(--ueb-scale)),
transparent calc(11px / var(--ueb-scale))),
repeating-linear-gradient(180deg,
black,
black calc(8px / var(--ueb-scale)),
transparent calc(9px / var(--ueb-scale)),
transparent calc(11px / var(--ueb-scale))),
/* Right */
repeating-linear-gradient(0deg, transparent, transparent 1px, white 2px, white 7px, transparent 7px, transparent 11px),
repeating-linear-gradient(0deg, black, black 8px, transparent 9px, transparent 11px);
repeating-linear-gradient(0deg,
transparent,
transparent calc(1px / var(--ueb-scale)),
white calc(2px / var(--ueb-scale)),
white calc(7px / var(--ueb-scale)),
transparent calc(7px / var(--ueb-scale)),
transparent calc(11px / var(--ueb-scale))),
repeating-linear-gradient(0deg,
black,
black calc(8px / var(--ueb-scale)),
transparent calc(9px / var(--ueb-scale)),
transparent calc(11px / var(--ueb-scale)));
background-size:
/* Top */
100% 1px,
100% 3px,
100% calc(1px / var(--ueb-scale)),
100% calc(3px / var(--ueb-scale)),
/* Bottom */
100% 1px,
100% 3px,
100% calc(1px / var(--ueb-scale)),
100% calc(3px / var(--ueb-scale)),
/* Left */
1px 100%,
3px 100%,
calc(1px / var(--ueb-scale)) 100%,
calc(3px / var(--ueb-scale)) 100%,
/* Right */
1px 100%,
3px 100%;
calc(1px / var(--ueb-scale)) 100%,
calc(3px / var(--ueb-scale)) 100%;
background-position:
/* Top */
0 1px,
0 calc(1px / var(--ueb-scale)),
0 0,
/* Bottom */
0 calc(100% - 1px),
0 calc(100% - 1px / var(--ueb-scale)),
0 100%,
/* Left */
1px 0,
calc(1px / var(--ueb-scale)) 0,
0 0,
/* Right */
calc(100% - 1px) 0,
calc(100% - 1px / var(--ueb-scale)) 0,
100% 0;
background-repeat: no-repeat;
}

46
js/OrderedIndexArray.js
View File

@@ -8,7 +8,7 @@ export default class OrderedIndexArray {
this.array = new Uint32Array(value)
this.comparisonValueSupplier = comparisonValueSupplier
this.length = 0
this.current = 0
this.currentPosition = 0
}
/**
@@ -47,20 +47,17 @@ export default class OrderedIndexArray {
return l
}
currentIsInside() {
return this.current > 0 && this.current < this.array.length
}
/**
* Inserts the element in the array.
* @param array {number[]} The array to insert into.
* @param value {number} The value to insert into 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 position = this.getPosition(element)
if (position < this.current || comparisonValue != null && position == this.current && this.comparisonValueSupplier(element) < comparisonValue) {
++this.current
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)
@@ -76,7 +73,7 @@ export default class OrderedIndexArray {
* @param {number} value The value of the element to be remove.
*/
remove(element) {
let position = this.getPosition(element)
let position = this.getPosition(this.comparisonValueSupplier(element))
if (this.array[position] == element) {
this.removeAt(position)
}
@@ -87,27 +84,42 @@ export default class OrderedIndexArray {
* @param {number} position The index of the element to be remove.
*/
removeAt(position) {
if (position < this.current) {
--this.current
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
return position
}
getNext() {
if (this.current >= 0 && this.current < this.array.length) {
return this.comparisonValueSupplier(this.get(this.current))
if (this.currentPosition >= 0 && this.currentPosition < this.array.length) {
return this.get(this.currentPosition)
}
return null
}
getNextValue() {
if (this.currentPosition >= 0 && this.currentPosition < this.array.length) {
return this.comparisonValueSupplier(this.get(this.currentPosition))
} else {
return Number.MAX_SAFE_INTEGER
}
}
getPrev() {
if (this.current > 0) {
return this.comparisonValueSupplier(this.get(this.current - 1))
if (this.currentPosition > 0) {
return this.get(this.currentPosition - 1)
}
return null
}
getPrevValue() {
if (this.currentPosition > 0) {
return this.comparisonValueSupplier(this.get(this.currentPosition - 1))
} else {
return Number.MIN_SAFE_INTEGER
}

75
js/SelectionModel.js
View File

@@ -36,9 +36,10 @@ export default class SelectionModel {
let rectangleMetadata = {
primaryBoundary: this.initialPosition[0],
secondaryBoundary: this.initialPosition[1],
rectangle: index, // used to move both directions inside the this.metadata array
rectangle: index, // used to move both expandings inside the this.metadata array
onSecondaryAxis: false
}
this.metadata[index] = rectangleMetadata
selectToggleFunction(rect, false) // Initially deselected (Eventually)
const rectangleBoundaries = boundariesFunc(rect)
if (this.initialPosition[0] < rectangleBoundaries.primaryInf) { // Initial position is before the rectangle
@@ -62,50 +63,62 @@ export default class SelectionModel {
} else {
rectangleMetadata.onSecondaryAxis = true
}
this.metadata[index] = rectangleMetadata
})
this.primaryOrder.current = this.primaryOrder.getPosition(this.initialPosition[0])
this.secondaryOrder.current = this.secondaryOrder.getPosition(this.initialPosition[1])
this.primaryOrder.currentPosition = this.primaryOrder.getPosition(this.initialPosition[0])
this.secondaryOrder.currentPosition = this.secondaryOrder.getPosition(this.initialPosition[1])
this.computeBoundaries(this.initialPosition)
}
computeBoundaries() {
this.boundaries = {
// Primary axis negative direction
// Primary axis negative expanding
primaryN: {
'value': this.primaryOrder.getPrev(),
'index': this.primaryOrder.current - 1
'value': this.primaryOrder.getPrevValue(),
'index': this.primaryOrder.getPrev()
},
primaryP: {
'value': this.primaryOrder.getNext(),
'index': this.primaryOrder.current
'value': this.primaryOrder.getNextValue(),
'index': this.primaryOrder.getNext()
},
// Secondary axis negative direction
// Secondary axis negative expanding
secondaryN: {
'value': this.secondaryOrder.getPrev(),
'index': this.secondaryOrder.current - 1
'value': this.secondaryOrder.getPrevValue(),
'index': this.secondaryOrder.getPrev()
},
// Secondary axis positive direction
// Secondary axis positive expanding
secondaryP: {
'value': this.secondaryOrder.getNext(),
'index': this.secondaryOrder.current
'value': this.secondaryOrder.getNextValue(),
'index': this.secondaryOrder.getNext()
}
}
}
selectTo(finalPosition) {
const primaryBoundaryCrossed = (index, extended) => {
if (extended) {
this.primaryOrder.current += Math.sign(finalPosition[0] - this.initialPosition[0])
if (this.metadata[index].onSecondaryAxis) {
this.selectToggleFunction(this.rectangles[index], true)
} else {
this.secondaryOrder.insert(index, this.initialPosition[1])
}
const direction = [
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)
if (this.metadata[index].onSecondaryAxis) {
this.selectToggleFunction(this.rectangles[index], expanding)
} else {
this.primaryOrder.current -= Math.sign(finalPosition[0] - this.initialPosition[0])
this.secondaryOrder.remove(index)
this.selectToggleFunction(this.rectangles[index], false)
if (expanding) {
this.secondaryOrder.insert(index, finalPosition[1])
const secondaryBoundary = this.metadata[index].secondaryBoundary
if (
// If inserted before the current position
Math.sign(finalPosition[1] - secondaryBoundary) == direction[1]
// And after initial position
&& Math.sign(secondaryBoundary - this.initialPosition[1]) == direction[1]
) {
// Secondary axis is already satisfied then
this.selectToggleFunction(this.rectangles[index], true)
}
} else {
this.selectToggleFunction(this.rectangles[index], false)
this.secondaryOrder.remove(index)
}
}
this.computeBoundaries(finalPosition)
this.selectTo(finalPosition)
@@ -118,13 +131,9 @@ export default class SelectionModel {
}
const secondaryBoundaryCrossed = (index, extended) => {
if (extended) {
this.secondaryOrder.current += Math.sign(finalPosition[1] - this.initialPosition[1])
} else {
this.secondaryOrder.current -= Math.sign(finalPosition[1] - this.initialPosition[1])
}
this.selectToggleFunction(this.rectangles[index], extended)
const secondaryBoundaryCrossed = (index, expanding) => {
this.secondaryOrder.currentPosition += direction[1] * (expanding ? 1 : -1)
this.selectToggleFunction(this.rectangles[index], expanding)
this.computeBoundaries(finalPosition)
this.selectTo(finalPosition)
}

9
js/UEBlueprint.js
View File

@@ -314,7 +314,7 @@ export default class UEBlueprint extends HTMLElement {
}
getScale() {
return parseFloat(getComputedStyle(this.gridElement).getPropertyValue('--ueb-grid-scale'))
return parseFloat(getComputedStyle(this.gridElement).getPropertyValue('--ueb-scale'))
}
compensateTranslation(position) {
@@ -360,7 +360,12 @@ export default class UEBlueprint extends HTMLElement {
* @param {...UEBlueprintObject} blueprintNodes
*/
addNode(...blueprintNodes) {
[...blueprintNodes].reduce((s, e) => s.push(e), this.nodes)
[...blueprintNodes].reduce(
(s, e) => {
s.push(e)
return s
},
this.nodes)
if (this.nodesContainerElement) {
this.nodesContainerElement.append(...blueprintNodes)
}

4
ueblueprint.html
View File

@@ -18,7 +18,9 @@
let blueprint = new UEBlueprint()
let node1 = new UEBlueprintObject()
node1.setLocation([400, 200])
blueprint.addNode(node1)
let node2 = new UEBlueprintObject()
node2.setLocation([300, 100])
blueprint.addNode(node1, node2)
document.querySelector('body').appendChild(blueprint)
let a = 123
</script>

130
ueblueprint.js
View File

@@ -181,7 +181,7 @@ class OrderedIndexArray {
this.array = new Uint32Array(value);
this.comparisonValueSupplier = comparisonValueSupplier;
this.length = 0;
this.current = 0;
this.currentPosition = 0;
}
/**
@@ -220,20 +220,17 @@ class OrderedIndexArray {
return l
}
currentIsInside() {
return this.current > 0 && this.current < this.array.length
}
/**
* Inserts the element in the array.
* @param array {number[]} The array to insert into.
* @param value {number} The value to insert into 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 position = this.getPosition(element);
if (position < this.current || comparisonValue != null && position == this.current && this.comparisonValueSupplier(element) < comparisonValue) {
++this.current;
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);
@@ -249,7 +246,7 @@ class OrderedIndexArray {
* @param {number} value The value of the element to be remove.
*/
remove(element) {
let position = this.getPosition(element);
let position = this.getPosition(this.comparisonValueSupplier(element));
if (this.array[position] == element) {
this.removeAt(position);
}
@@ -260,27 +257,42 @@ class OrderedIndexArray {
* @param {number} position The index of the element to be remove.
*/
removeAt(position) {
if (position < this.current) {
--this.current;
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;
return position
}
getNext() {
if (this.current >= 0 && this.current < this.array.length) {
return this.comparisonValueSupplier(this.get(this.current))
if (this.currentPosition >= 0 && this.currentPosition < this.array.length) {
return this.get(this.currentPosition)
}
return null
}
getNextValue() {
if (this.currentPosition >= 0 && this.currentPosition < this.array.length) {
return this.comparisonValueSupplier(this.get(this.currentPosition))
} else {
return Number.MAX_SAFE_INTEGER
}
}
getPrev() {
if (this.current > 0) {
return this.comparisonValueSupplier(this.get(this.current - 1))
if (this.currentPosition > 0) {
return this.get(this.currentPosition - 1)
}
return null
}
getPrevValue() {
if (this.currentPosition > 0) {
return this.comparisonValueSupplier(this.get(this.currentPosition - 1))
} else {
return Number.MIN_SAFE_INTEGER
}
@@ -323,9 +335,10 @@ class SelectionModel {
let rectangleMetadata = {
primaryBoundary: this.initialPosition[0],
secondaryBoundary: this.initialPosition[1],
rectangle: index, // used to move both directions inside the this.metadata array
rectangle: index, // used to move both expandings inside the this.metadata array
onSecondaryAxis: false
};
this.metadata[index] = rectangleMetadata;
selectToggleFunction(rect, false); // Initially deselected (Eventually)
const rectangleBoundaries = boundariesFunc(rect);
if (this.initialPosition[0] < rectangleBoundaries.primaryInf) { // Initial position is before the rectangle
@@ -349,50 +362,62 @@ class SelectionModel {
} else {
rectangleMetadata.onSecondaryAxis = true;
}
this.metadata[index] = rectangleMetadata;
});
this.primaryOrder.current = this.primaryOrder.getPosition(this.initialPosition[0]);
this.secondaryOrder.current = this.secondaryOrder.getPosition(this.initialPosition[1]);
this.primaryOrder.currentPosition = this.primaryOrder.getPosition(this.initialPosition[0]);
this.secondaryOrder.currentPosition = this.secondaryOrder.getPosition(this.initialPosition[1]);
this.computeBoundaries(this.initialPosition);
}
computeBoundaries() {
this.boundaries = {
// Primary axis negative direction
// Primary axis negative expanding
primaryN: {
'value': this.primaryOrder.getPrev(),
'index': this.primaryOrder.current - 1
'value': this.primaryOrder.getPrevValue(),
'index': this.primaryOrder.getPrev()
},
primaryP: {
'value': this.primaryOrder.getNext(),
'index': this.primaryOrder.current
'value': this.primaryOrder.getNextValue(),
'index': this.primaryOrder.getNext()
},
// Secondary axis negative direction
// Secondary axis negative expanding
secondaryN: {
'value': this.secondaryOrder.getPrev(),
'index': this.secondaryOrder.current - 1
'value': this.secondaryOrder.getPrevValue(),
'index': this.secondaryOrder.getPrev()
},
// Secondary axis positive direction
// Secondary axis positive expanding
secondaryP: {
'value': this.secondaryOrder.getNext(),
'index': this.secondaryOrder.current
'value': this.secondaryOrder.getNextValue(),
'index': this.secondaryOrder.getNext()
}
};
}
selectTo(finalPosition) {
const primaryBoundaryCrossed = (index, extended) => {
if (extended) {
this.primaryOrder.current += Math.sign(finalPosition[0] - this.initialPosition[0]);
if (this.metadata[index].onSecondaryAxis) {
this.selectToggleFunction(this.rectangles[index], true);
} else {
this.secondaryOrder.insert(index, this.initialPosition[1]);
}
const direction = [
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);
if (this.metadata[index].onSecondaryAxis) {
this.selectToggleFunction(this.rectangles[index], expanding);
} else {
this.primaryOrder.current -= Math.sign(finalPosition[0] - this.initialPosition[0]);
this.secondaryOrder.remove(index);
this.selectToggleFunction(this.rectangles[index], false);
if (expanding) {
this.secondaryOrder.insert(index, finalPosition[1]);
const secondaryBoundary = this.metadata[index].secondaryBoundary;
if (
// If inserted before the current position
Math.sign(finalPosition[1] - secondaryBoundary) == direction[1]
// And after initial position
&& Math.sign(secondaryBoundary - this.initialPosition[1]) == direction[1]
) {
// Secondary axis is already satisfied then
this.selectToggleFunction(this.rectangles[index], true);
}
} else {
this.selectToggleFunction(this.rectangles[index], false);
this.secondaryOrder.remove(index);
}
}
this.computeBoundaries(finalPosition);
this.selectTo(finalPosition);
@@ -405,13 +430,9 @@ class SelectionModel {
}
const secondaryBoundaryCrossed = (index, extended) => {
if (extended) {
this.secondaryOrder.current += Math.sign(finalPosition[1] - this.initialPosition[1]);
} else {
this.secondaryOrder.current -= Math.sign(finalPosition[1] - this.initialPosition[1]);
}
this.selectToggleFunction(this.rectangles[index], extended);
const secondaryBoundaryCrossed = (index, expanding) => {
this.secondaryOrder.currentPosition += direction[1] * (expanding ? 1 : -1);
this.selectToggleFunction(this.rectangles[index], expanding);
this.computeBoundaries(finalPosition);
this.selectTo(finalPosition);
};
@@ -737,7 +758,7 @@ class UEBlueprint extends HTMLElement {
}
getScale() {
return parseFloat(getComputedStyle(this.gridElement).getPropertyValue('--ueb-grid-scale'))
return parseFloat(getComputedStyle(this.gridElement).getPropertyValue('--ueb-scale'))
}
compensateTranslation(position) {
@@ -783,7 +804,12 @@ class UEBlueprint extends HTMLElement {
* @param {...UEBlueprintObject} blueprintNodes
*/
addNode(...blueprintNodes) {
[...blueprintNodes].reduce((s, e) => s.push(e), this.nodes);
[...blueprintNodes].reduce(
(s, e) => {
s.push(e);
return s
},
this.nodes);
if (this.nodesContainerElement) {
this.nodesContainerElement.append(...blueprintNodes);
}