Fix comments dragging nodes

This commit is contained in:
barsdeveloper
2022-12-15 21:00:20 +01:00
parent 4bc87263f1
commit 69d274e9cf
18 changed files with 151 additions and 114 deletions

View File

@@ -32,14 +32,6 @@ export default class CommentNodeTemplate extends IResizeableTemplate {
return this.element.querySelector(".ueb-node-top")
}
/** @param {Map} changedProperties */
willUpdate(changedProperties) {
super.willUpdate(changedProperties)
if (changedProperties.has("sizeX") || changedProperties.has("sizeY")) {
this.manageNodesBind()
}
}
render() {
return html`
<div class="ueb-node-border">
@@ -53,15 +45,19 @@ export default class CommentNodeTemplate extends IResizeableTemplate {
}
manageNodesBind() {
this.element.blueprint
.getNodes(false, [
this.element.topBoundary(),
this.element.rightBoundary(),
this.element.bottomBoundary(),
this.element.leftBoundary(),
])
.filter(node => !node.boundComments.includes(this.element))
.forEach(node => node.bindToComment(this.element))
let nodes = this.element.blueprint.getNodes()
for (let node of nodes) {
if (
node.topBoundary() >= this.element.topBoundary()
&& node.rightBoundary() <= this.element.rightBoundary()
&& node.bottomBoundary() <= this.element.bottomBoundary()
&& node.leftBoundary() >= this.element.leftBoundary()
) {
node.bindToComment(this.element)
} else {
node.unbindFromComment(this.element)
}
}
}
/** @param {Number} value */
@@ -83,4 +79,8 @@ export default class CommentNodeTemplate extends IResizeableTemplate {
}
return false
}
endResize() {
this.manageNodesBind()
}
}

View File

@@ -61,29 +61,33 @@ export default class IResizeableTemplate extends NodeTemplate {
onDrag: (location, movement) => {
movement[1] = location[1] - this.element.topBoundary()
if (this.setSizeY(this.element.sizeY - movement[1])) {
this.element.addLocation([0, movement[1]])
this.element.addLocation([0, movement[1]], false)
}
}
},
onEndDrag : () => this.endResize(),
}),
new MouseClickDrag(this.#RHandler, this.element.blueprint, {
onDrag: (location, movement) => {
movement[0] = location[0] - this.element.rightBoundary()
this.setSizeX(this.element.sizeX + movement[0])
}
},
onEndDrag : () => this.endResize(),
}),
new MouseClickDrag(this.#BHandler, this.element.blueprint, {
onDrag: (location, movement) => {
movement[1] = location[1] - this.element.bottomBoundary()
this.setSizeY(this.element.sizeY + movement[1])
}
},
onEndDrag : () => this.endResize(),
}),
new MouseClickDrag(this.#LHandler, this.element.blueprint, {
onDrag: (location, movement) => {
movement[0] = location[0] - this.element.leftBoundary()
if (this.setSizeX(this.element.sizeX - movement[0])) {
this.element.addLocation([movement[0], 0])
this.element.addLocation([movement[0], 0], false)
}
}
},
onEndDrag : () => this.endResize(),
}),
new MouseClickDrag(this.#TRHandler, this.element.blueprint, {
onDrag: (location, movement) => {
@@ -91,9 +95,10 @@ export default class IResizeableTemplate extends NodeTemplate {
movement[1] = location[1] - this.element.topBoundary()
this.setSizeX(this.element.sizeX + movement[0])
if (this.setSizeY(this.element.sizeY - movement[1])) {
this.element.addLocation([0, movement[1]])
this.element.addLocation([0, movement[1]], false)
}
}
},
onEndDrag : () => this.endResize(),
}),
new MouseClickDrag(this.#BRHandler, this.element.blueprint, {
onDrag: (location, movement) => {
@@ -101,29 +106,32 @@ export default class IResizeableTemplate extends NodeTemplate {
movement[1] = location[1] - this.element.bottomBoundary()
this.setSizeX(this.element.sizeX + movement[0])
this.setSizeY(this.element.sizeY + movement[1])
}
},
onEndDrag : () => this.endResize(),
}),
new MouseClickDrag(this.#BLHandler, this.element.blueprint, {
onDrag: (location, movement) => {
movement[0] = location[0] - this.element.leftBoundary()
movement[1] = location[1] - this.element.bottomBoundary()
if (this.setSizeX(this.element.sizeX - movement[0])) {
this.element.addLocation([movement[0], 0])
this.element.addLocation([movement[0], 0], false)
}
this.setSizeY(this.element.sizeY + movement[1])
}
},
onEndDrag : () => this.endResize(),
}),
new MouseClickDrag(this.#TLHandler, this.element.blueprint, {
onDrag: (location, movement) => {
movement[0] = location[0] - this.element.leftBoundary()
movement[1] = location[1] - this.element.topBoundary()
if (this.setSizeX(this.element.sizeX - movement[0])) {
this.element.addLocation([movement[0], 0])
this.element.addLocation([movement[0], 0], false)
}
if (this.setSizeY(this.element.sizeY - movement[1])) {
this.element.addLocation([0, movement[1]])
this.element.addLocation([0, movement[1]], false)
}
}
},
onEndDrag : () => this.endResize(),
}),
]
}
@@ -139,4 +147,6 @@ export default class IResizeableTemplate extends NodeTemplate {
this.element.setNodeHeight(value)
return true
}
endResize() {}
}

View File

@@ -129,7 +129,7 @@ export default class NodeTemplate extends ISelectableDraggableTemplate {
firstUpdated(changedProperties) {
super.firstUpdated(changedProperties)
this.setupPins()
Promise.all(this.element.getPinElements().map(n => n.updateComplete)).then(() => this.element.acknowledgeReflow())
this.element.updateComplete.then(() => this.element.acknowledgeReflow())
}
setupPins() {