diff --git a/css/ueblueprint-style.css b/css/ueblueprint-style.css index 7aeb16d..66f5078 100644 --- a/css/ueblueprint-style.css +++ b/css/ueblueprint-style.css @@ -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; } diff --git a/js/OrderedIndexArray.js b/js/OrderedIndexArray.js index 7f7237b..c8b982b 100644 --- a/js/OrderedIndexArray.js +++ b/js/OrderedIndexArray.js @@ -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 } diff --git a/js/SelectionModel.js b/js/SelectionModel.js index c52171c..bdc4c03 100644 --- a/js/SelectionModel.js +++ b/js/SelectionModel.js @@ -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) } diff --git a/js/UEBlueprint.js b/js/UEBlueprint.js index e6422e7..cbe80f2 100644 --- a/js/UEBlueprint.js +++ b/js/UEBlueprint.js @@ -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) } diff --git a/ueblueprint.html b/ueblueprint.html index e115bfe..a72616d 100644 --- a/ueblueprint.html +++ b/ueblueprint.html @@ -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 diff --git a/ueblueprint.js b/ueblueprint.js index 47222eb..15a0668 100644 --- a/ueblueprint.js +++ b/ueblueprint.js @@ -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); }