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

Save sizes in the element

Browse Source
This commit is contained in:
barsdeveloper
2022-12-07 19:43:04 +01:00
parent 9e8e25d832
commit 97d4b18347
9 changed files with 57 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
dist/ueblueprint.js vendored
View File

@@ -3041,7 +3041,10 @@ class IElement extends s {
updated(changedProperties) {
super.updated(changedProperties);
this.template.updated(changedProperties);
this.#nextUpdatedCallbacks.forEach(f => f(changedProperties));
// Remember the array might change while iterating
for (const f of this.#nextUpdatedCallbacks) {
f(changedProperties);
}
this.#nextUpdatedCallbacks = [];
}
@@ -3117,12 +3120,16 @@ class IDraggableElement extends IElement {
this.sizeY = -1;
}
computeSizes() {
const bounding = this.getBoundingClientRect();
this.sizeX = bounding.width;
this.sizeY = bounding.height;
}
/** @param {Map} changedProperties */
firstUpdated(changedProperties) {
super.firstUpdated(changedProperties);
const boundaries = this.getBoundingClientRect();
this.sizeX = boundaries.width;
this.sizeY = boundaries.height;
this.computeSizes();
}
/** @param {Number[]} param0 */
@@ -4864,7 +4871,7 @@ class NodeTemplate extends ISelectableDraggableTemplate {
if (!this.#hasTargetInputNode && v.getDisplayName() === "Target") {
this.#hasTargetInputNode = true;
}
return/** @type {PinElement} */(
return /** @type {PinElement} */(
new (ElementFactory.getConstructor("ueb-pin"))(v, undefined, this.element)
)
})
@@ -5324,6 +5331,7 @@ class PinTemplate extends ITemplate {
/** @param {Map} changedProperties */
updated(changedProperties) {
super.updated(changedProperties);
if (this.element.isInput() && changedProperties.has("isLinked")) {
// When connected, an input may drop its input fields which means the node has to reflow
const node = this.element.nodeElement;
@@ -5614,11 +5622,11 @@ class NodeElement extends ISelectableDraggableElement {
super.setLocation([this.entity.NodePosX.value, this.entity.NodePosY.value]);
this.entity.subscribe("AdvancedPinDisplay", value => this.advancedPinDisplay = value);
this.entity.subscribe("Name", value => this.nodeName = value);
if (this.entity.NodeWidth) {
this.sizeX = this.entity.NodeWidth;
}
if (this.entity.NodeHeight) {
this.sizeY = this.entity.NodeHeight;
if (this.entity.NodeWidth && this.entity.NodeHeight) {
this.sizeX = this.entity.NodeWidth.value;
this.sizeY = this.entity.NodeHeight.value;
} else {
Promise.all([this.updateComplete, ...this.#pins.map(p => p.updateComplete)]).then(() => this.computeSizes());
}
}
@@ -5701,6 +5709,7 @@ class NodeElement extends ISelectableDraggableElement {
}
dispatchReflowEvent() {
this.addNextUpdatedCallbacks(() => this.computeSizes(), true);
let reflowEvent = new CustomEvent(Configuration.nodeReflowEventName);
this.dispatchEvent(reflowEvent);
}
@@ -6002,6 +6011,7 @@ class SelectorElement extends IFromToPositionedElement {
constructor() {
super({}, new SelectorTemplate());
/** @type {FastSelectionModel} */
this.selectionModel = null;
}
@@ -6019,8 +6029,7 @@ class SelectorElement extends IFromToPositionedElement {
/** @param {Number[]} finalPosition */
selectTo(finalPosition) {
/** @type {FastSelectionModel} */ (this.selectionModel)
.selectTo(finalPosition);
this.selectionModel.selectTo(finalPosition);
this.toX = finalPosition[0];
this.toY = finalPosition[1];
}
@@ -6126,16 +6135,16 @@ class Blueprint extends IElement {
headerElement
focused = false
waitingExpandUpdate = false
/** @param {NodeElement} node */
nodeBoundariesSupplier = node => {
let rect = node.getBoundingClientRect();
let gridRect = this.nodesContainerElement.getBoundingClientRect();
const scaleCorrection = 1 / this.getScale();
return /** @type {BoundariesInfo} */ {
primaryInf: (rect.left - gridRect.left) * scaleCorrection,
primarySup: (rect.right - gridRect.right) * scaleCorrection,
primaryInf: (node.leftBoundary() - gridRect.left) * scaleCorrection,
primarySup: (node.rightBoundary() - gridRect.right) * scaleCorrection,
// Counter intuitive here: the y (secondary axis is positive towards the bottom, therefore upper bound "sup" is bottom)
secondaryInf: (rect.top - gridRect.top) * scaleCorrection,
secondarySup: (rect.bottom - gridRect.bottom) * scaleCorrection
secondaryInf: (node.topBoundary() - gridRect.top) * scaleCorrection,
secondarySup: (node.bottomBoundary() - gridRect.bottom) * scaleCorrection
}
}
/** @type {(node: NodeElement, selected: Boolean) => void}} */

10
dist/ueblueprint.min.js vendored
View File

File diff suppressed because one or more lines are too long

10
js/Blueprint.js
View File

@@ -97,16 +97,16 @@ export default class Blueprint extends IElement {
headerElement
focused = false
waitingExpandUpdate = false
/** @param {NodeElement} node */
nodeBoundariesSupplier = node => {
let rect = node.getBoundingClientRect()
let gridRect = this.nodesContainerElement.getBoundingClientRect()
const scaleCorrection = 1 / this.getScale()
return /** @type {BoundariesInfo} */ {
primaryInf: (rect.left - gridRect.left) * scaleCorrection,
primarySup: (rect.right - gridRect.right) * scaleCorrection,
primaryInf: (node.leftBoundary() - gridRect.left) * scaleCorrection,
primarySup: (node.rightBoundary() - gridRect.right) * scaleCorrection,
// Counter intuitive here: the y (secondary axis is positive towards the bottom, therefore upper bound "sup" is bottom)
secondaryInf: (rect.top - gridRect.top) * scaleCorrection,
secondarySup: (rect.bottom - gridRect.bottom) * scaleCorrection
secondaryInf: (node.topBoundary() - gridRect.top) * scaleCorrection,
secondarySup: (node.bottomBoundary() - gridRect.bottom) * scaleCorrection
}
}
/** @type {(node: NodeElement, selected: Boolean) => void}} */

10
js/element/IDraggableElement.js
View File

@@ -48,12 +48,16 @@ export default class IDraggableElement extends IElement {
this.sizeY = -1
}
computeSizes() {
const bounding = this.getBoundingClientRect()
this.sizeX = bounding.width
this.sizeY = bounding.height
}
/** @param {Map} changedProperties */
firstUpdated(changedProperties) {
super.firstUpdated(changedProperties)
const boundaries = this.getBoundingClientRect()
this.sizeX = boundaries.width
this.sizeY = boundaries.height
this.computeSizes()
}
/** @param {Number[]} param0 */

5
js/element/IElement.js
View File

@@ -96,7 +96,10 @@ export default class IElement extends LitElement {
updated(changedProperties) {
super.updated(changedProperties)
this.template.updated(changedProperties)
this.#nextUpdatedCallbacks.forEach(f => f(changedProperties))
// Remember the array might change while iterating
for (const f of this.#nextUpdatedCallbacks) {
f(changedProperties)
}
this.#nextUpdatedCallbacks = []
}

11
js/element/NodeElement.js
View File

@@ -96,11 +96,11 @@ export default class NodeElement extends ISelectableDraggableElement {
super.setLocation([this.entity.NodePosX.value, this.entity.NodePosY.value])
this.entity.subscribe("AdvancedPinDisplay", value => this.advancedPinDisplay = value)
this.entity.subscribe("Name", value => this.nodeName = value)
if (this.entity.NodeWidth) {
this.sizeX = this.entity.NodeWidth
}
if (this.entity.NodeHeight) {
this.sizeY = this.entity.NodeHeight
if (this.entity.NodeWidth && this.entity.NodeHeight) {
this.sizeX = this.entity.NodeWidth.value
this.sizeY = this.entity.NodeHeight.value
} else {
Promise.all([this.updateComplete, ...this.#pins.map(p => p.updateComplete)]).then(() => this.computeSizes())
}
}
@@ -183,6 +183,7 @@ export default class NodeElement extends ISelectableDraggableElement {
}
dispatchReflowEvent() {
this.addNextUpdatedCallbacks(() => this.computeSizes(), true)
let reflowEvent = new CustomEvent(Configuration.nodeReflowEventName)
this.dispatchEvent(reflowEvent)
}

4
js/element/SelectorElement.js
View File

@@ -7,6 +7,7 @@ export default class SelectorElement extends IFromToPositionedElement {
constructor() {
super({}, new SelectorTemplate())
/** @type {FastSelectionModel} */
this.selectionModel = null
}
@@ -24,8 +25,7 @@ export default class SelectorElement extends IFromToPositionedElement {
/** @param {Number[]} finalPosition */
selectTo(finalPosition) {
/** @type {FastSelectionModel} */ (this.selectionModel)
.selectTo(finalPosition)
this.selectionModel.selectTo(finalPosition)
this.toX = finalPosition[0]
this.toY = finalPosition[1]
}

2
js/template/NodeTemplate.js
View File

@@ -153,7 +153,7 @@ export default class NodeTemplate extends ISelectableDraggableTemplate {
if (!this.#hasTargetInputNode && v.getDisplayName() === "Target") {
this.#hasTargetInputNode = true
}
return/** @type {PinElement} */(
return /** @type {PinElement} */(
new (ElementFactory.getConstructor("ueb-pin"))(v, undefined, this.element)
)
})

1
js/template/PinTemplate.js
View File

@@ -68,6 +68,7 @@ export default class PinTemplate extends ITemplate {
/** @param {Map} changedProperties */
updated(changedProperties) {
super.updated(changedProperties)
if (this.element.isInput() && changedProperties.has("isLinked")) {
// When connected, an input may drop its input fields which means the node has to reflow
const node = this.element.nodeElement