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

Using web components

Browse Source
This commit is contained in:
barsdeveloper
2021-07-25 19:52:25 +02:00
parent cd475caeda
commit 4017d6ab64
13 changed files with 689 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
js/UEBlueprintObject.js
View File

@@ -16,39 +16,49 @@ export default class UEBlueprintObject extends UEBlueprintDraggableObject {
static classInFlow = false
static classOutFlow = false
static className = 'Empty node'
static domTemplate(obj) {
header() {
return `
<div class="ueb-node ${obj.selected ? 'ueb-selected' : ''}"
style="--ueb-position-x:${obj.location[0]}; --ueb-position-y:${obj.location[1]}">
<div class="ueb-node-border">
<div class="ueb-node-content">
<div class="ueb-node-header">
<span class="ueb-node-name">
<span class="ueb-node-symbol"></span>
<span class="ueb-node-text">${obj.constructor.className}</span>
<span class="ueb-node-text">${this.constructor.className}</span>
</span>
</div>
`
}
body() {
return `
<div class="ueb-node-body">
<div class="ueb-node-inputs">
${obj.constructor.classInputs.forEach((input, index) => `
${this.constructor.classInputs.forEach((input, index) => `
<div class="ueb-node-input ueb-node-value-${input.type}">
<span class="ueb-node-value-icon ${obj.inputs[index].connected ? 'ueb-node-value-fill' : ''}"></span>
<span class="ueb-node-value-icon ${this.inputs[index].connected ? 'ueb-node-value-fill' : ''}"></span>
${input.name}
</div>
`) ?? ''}
</div>
<div class="ueb-node-outputs">
${obj.constructor.classOutputs.forEach((output, index) => `
${this.constructor.classOutputs.forEach((output, index) => `
<div class="ueb-node-output ueb-node-value-${output.type}">
${output.name}
<span class="ueb-node-value-icon ${obj.outputs[index].connected ? 'ueb-node-value-fill' : ''}"></span>
<span class="ueb-node-value-icon ${this.outputs[index].connected ? 'ueb-node-value-fill' : ''}"></span>
</div>
`) ?? ''}
</div>
</div>
</div>
</div>
</div>
`
}
render() {
return `
<div class="ueb-node-border">
<div class="ueb-node-content">
${this.header()}
${this.body()}
</div>
</div>
`
}
@@ -67,6 +77,20 @@ export default class UEBlueprintObject extends UEBlueprintDraggableObject {
})
}
connectedCallback() {
super.connectedCallback()
this.classList.add('ueb-node')
if (this.selected) {
this.classList.add('ueb-selected')
}
this.style.setProperty('--ueb-position-x', this.location[0])
this.style.setProperty('--ueb-position-y', this.location[1])
let aDiv = document.createElement('div');
aDiv.innerHTML = this.render()
this.appendChild(aDiv.firstElementChild)
}
isSelected() {
return this.selected
}
@@ -75,3 +99,5 @@ export default class UEBlueprintObject extends UEBlueprintDraggableObject {
this.selected = value
}
}
customElements.define('u-object', UEBlueprintObject)