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

Fix comments dragging nodes

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

12
js/Blueprint.js
View File

@@ -290,7 +290,7 @@ export default class Blueprint extends IElement {
|| l > Number.MIN_SAFE_INTEGER
) {
result = result.filter(n => {
return n.topBoundary() > t && n.rightBoundary() < r && n.bottomBoundary() < b && n.leftBoundary() > l
return n.topBoundary() >= t && n.rightBoundary() <= r && n.bottomBoundary() <= b && n.leftBoundary() >= l
})
}
return result
@@ -379,11 +379,6 @@ export default class Blueprint extends IElement {
this.nodes.push(element)
nodeElements.push(element)
this.nodesContainerElement?.appendChild(element)
if (element.getType() == Configuration.nodeType.comment) {
element.addNextUpdatedCallbacks(() =>
/** @type {CommentNodeTemplate} */(element.template).manageNodesBind()
)
}
} else if (element instanceof LinkElement && !this.links.includes(element)) {
this.links.push(element)
if (this.linksContainerElement && !this.linksContainerElement.contains(element)) {
@@ -394,6 +389,11 @@ export default class Blueprint extends IElement {
graphElements.filter(element => element instanceof NodeElement).forEach(
node => /** @type {NodeElement} */(node).sanitizeLinks(graphElements)
)
graphElements
.filter(element => element instanceof NodeElement && element.getType() == Configuration.nodeType.comment)
.forEach(element => element.updateComplete.then(() =>
/** @type {CommentNodeTemplate} */(element.template).manageNodesBind()
))
}
/** @param {...IElement} graphElements */

10
js/element/IDraggableElement.js
View File

@@ -62,26 +62,26 @@ export default class IDraggableElement extends IElement {
}
/** @param {Number[]} param0 */
setLocation([x, y]) {
setLocation([x, y], acknowledge = true) {
const d = [x - this.locationX, y - this.locationY]
this.locationX = x
this.locationY = y
if (this.blueprint) {
if (this.blueprint && acknowledge) {
// @ts-expect-error
const dragLocalEvent = new CustomEvent(this.constructor.dragEventName, {
detail: {
value: d,
},
bubbles: false,
cancelable: true
cancelable: true,
})
this.dispatchEvent(dragLocalEvent)
}
}
/** @param {Number[]} param0 */
addLocation([x, y]) {
this.setLocation([this.locationX + x, this.locationY + y])
addLocation([x, y], acknowledge = true) {
this.setLocation([this.locationX + x, this.locationY + y], acknowledge)
}
/** @param {Number[]} value */

3
js/element/LinkElement.js
View File

@@ -199,7 +199,8 @@ export default class LinkElement extends IFromToPositionedElement {
if (location == null) {
const self = this
if (!this.hasUpdated || !this.destinationPin.hasUpdated) {
Promise.all([this.updateComplete, this.destinationPin.updateComplete]).then(() => self.setDestinationLocation())
Promise.all([this.updateComplete, this.destinationPin.updateComplete])
.then(() => self.setDestinationLocation())
return
}
location = this.destinationPin.template.getLinkLocation()

12
js/element/NodeElement.js
View File

@@ -111,7 +111,7 @@ export default class NodeElement extends ISelectableDraggableElement {
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())
this.updateComplete.then(() => this.computeSizes())
}
}
@@ -132,9 +132,13 @@ export default class NodeElement extends ISelectableDraggableElement {
return new NodeElement(entity)
}
getUpdateComplete() {
return Promise.all([super.getUpdateComplete(), ...this.#pins.map(pin => pin.updateComplete)]).then(() => true)
}
/** @param {NodeElement} commentNode */
bindToComment(commentNode) {
if (!this.boundComments.includes(commentNode)) {
if (commentNode != this && !this.boundComments.includes(commentNode)) {
commentNode.addEventListener(Configuration.nodeDragEventName, this.#commentDragHandler)
this.boundComments.push(commentNode)
}
@@ -219,13 +223,13 @@ export default class NodeElement extends ISelectableDraggableElement {
return this.entity.CustomProperties.filter(v => v instanceof PinEntity)
}
setLocation(value = [0, 0]) {
setLocation(value = [0, 0], acknowledge = true) {
let nodeConstructor = this.entity.NodePosX.constructor
// @ts-expect-error
this.entity.NodePosX = new nodeConstructor(value[0])
// @ts-expect-error
this.entity.NodePosY = new nodeConstructor(value[1])
super.setLocation(value)
super.setLocation(value, acknowledge)
}
acknowledgeDelete() {

2
js/entity/LinearColorEntity.js
View File

@@ -9,7 +9,7 @@ export default class LinearColorEntity extends IEntity {
R: RealUnitEntity,
G: RealUnitEntity,
B: RealUnitEntity,
A: new TypeInitialization(RealUnitEntity, true, () => new RealUnitEntity(1), false, true),
A: new TypeInitialization(RealUnitEntity, true, () => new RealUnitEntity(1), false, false),
H: new TypeInitialization(RealUnitEntity, true, undefined, false, true),
S: new TypeInitialization(RealUnitEntity, true, undefined, false, true),
V: new TypeInitialization(RealUnitEntity, true, undefined, false, true),

2
js/input/common/Paste.js
View File

@@ -45,7 +45,6 @@ export default class Paste extends IInput {
if (nodes.length > 0) {
this.blueprint.unselectAll()
}
this.blueprint.addGraphElement(...nodes)
let mousePosition = this.blueprint.mousePosition
nodes.forEach(node => {
const locationOffset = [
@@ -56,6 +55,7 @@ export default class Paste extends IInput {
node.snapToGrid()
node.setSelected(true)
})
this.blueprint.addGraphElement(...nodes)
return true
}
}

2
js/input/mouse/MouseMoveNodes.js
View File

@@ -30,7 +30,7 @@ export default class MouseMoveNodes extends MouseMoveDraggable {
.filter(comment => !node.isInsideComment(comment))
.forEach(comment => node.unbindFromComment(comment))
)
this.blueprint.getCommentNodes(true).forEach(comment =>
this.blueprint.getCommentNodes().forEach(comment =>
/** @type {CommentNodeTemplate} */(comment.template).manageNodesBind()
)
}

34
js/template/CommentNodeTemplate.js
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()
}
}

38
js/template/IResizeableTemplate.js
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() {}
}

2
js/template/NodeTemplate.js
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() {