magnus/datagraph
1
0
Fork 0
Code Issues 3 Pull requests Projects Releases 3 Packages Wiki Activity Actions

Connected nodes

Browse source
This commit is contained in:
Magnus Åhall 2025-07-08 20:14:28 +02:00
parent dff17cad5b
commit 2b8472bcd1
6 changed files with 280 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

134
static/js/app.mjs
View file

@ -1,5 +1,6 @@
import { Editor } from '@editor'
import { MessageBus } from '@mbus'
import { SelectType, SelectNode } from '@select_node'
export class App {
constructor() {// {{{
@ -15,6 +16,7 @@ export class App {
const events = [
'EDITOR_NODE_SAVE',
'MENU_ITEM_SELECTED',
'NODE_CONNECT',
'NODE_CREATE_DIALOG',
'NODE_DELETE',
'NODE_EDIT_NAME',
@ -38,6 +40,14 @@ export class App {
this.page(item, event.detail)
break
case 'NODE_CONNECT':
const selectnode = new SelectNode(selectedNode => {
this.nodeConnect(this.currentNode, selectedNode)
.then(() => this.edit(this.currentNode))
})
selectnode.render()
break
case 'NODE_SELECTED':
for (const n of document.querySelectorAll('#nodes .node.selected'))
n.classList.remove('selected')
@ -147,6 +157,7 @@ export class App {
case 'type':
document.getElementById('types').classList.add('show')
document.getElementById('editor-type-schema').classList.add('show')
document.getElementById('editor-node').style.display = 'none'
if (this.typesList === null)
this.typesList = new TypesList()
@ -201,7 +212,7 @@ export class App {
showError(err)
return
}
const connectedNodes = new ConnectedNodes(json.Nodes)
document.getElementById('connected-nodes').replaceChildren(connectedNodes.render())
@ -307,6 +318,27 @@ export class App {
})
.catch(err => showError(err))
}// }}}
async nodeConnect(parentNode, nodeToConnect) {
return new Promise((resolve, reject)=>{
// XXX - here
//fetch('/nodes/)
})
}
typeSort(a, b) {// {{{
if (a.Schema['x-group'] === undefined)
a.Schema['x-group'] = 'No group'
if (b.Schema['x-group'] === undefined)
b.Schema['x-group'] = 'No group'
if (a.Schema['x-group'] < b.Schema['x-group']) return -1
if (a.Schema['x-group'] > b.Schema['x-group']) return 1
if ((a.Schema.title || a.Name) < (b.Schema.title || b.Name)) return -1
if ((a.Schema.title || a.Name) > (b.Schema.title || b.Name)) return 1
return 0
}// }}}
}
class NodeCreateDialog {
@ -319,18 +351,13 @@ class NodeCreateDialog {
this.createElements()
this.fetchTypes()
.then(() => {
const st = new SelectType(this.types)
this.select.replaceChildren(st.render())
})
this.dialog.showModal()
this.select.focus()
//this.select.focus()
}// }}}
createElements() {// {{{
this.dialog = document.createElement('dialog')
this.dialog.id = 'create-type'
this.dialog.addEventListener('close', () => this.dialog.remove())
this.dialog.innerHTML = `
<div style="padding: 16px">
<select></select>
@ -339,6 +366,13 @@ class NodeCreateDialog {
</div>
`
new SelectType().render()
.then(select => {
this.select = select
this.dialog.querySelector('select').replaceWith(this.select)
this.select.focus()
})
this.dialog.querySelector('button').addEventListener('click', () => this.commit())
this.select = this.dialog.querySelector('select')
this.input = this.dialog.querySelector('input')
@ -379,51 +413,6 @@ class NodeCreateDialog {
})
.catch(err => showError(err))
}// }}}
async fetchTypes() {// {{{
return new Promise((resolve, reject) => {
fetch('/types/')
.then(data => data.json())
.then(json => {
if (!json.OK) {
showError(json.Error)
return
}
this.types = json.Types
resolve()
})
.catch(err => reject(err))
})
}// }}}
}
class SelectType {
constructor(types) {// {{{
this.types = types
}// }}}
render() {// {{{
const tmpl = document.createElement('template')
this.types.sort(typeSort)
let prevGroup = null
for (const t of this.types) {
if (t.Name == 'root_node')
continue
if (t.Schema['x-group'] != prevGroup) {
prevGroup = t.Schema['x-group']
const group = document.createElement('optgroup')
group.setAttribute('label', t.Schema['x-group'])
tmpl.content.appendChild(group)
}
const opt = document.createElement('option')
opt.setAttribute('value', t.ID)
opt.innerText = t.Schema.title || t.Name
tmpl.content.appendChild(opt)
}
return tmpl.content
}// }}}
}
export class Tree {
@ -696,7 +685,7 @@ export class TypesList {
render() {// {{{
const div = document.createElement('div')
this.types.sort(typeSort)
this.types.sort(_app.typeSort)
let prevGroup = null
@ -726,33 +715,20 @@ export class TypesList {
}// }}}
}
function typeSort(a, b) {// {{{
if (a.Schema['x-group'] === undefined)
a.Schema['x-group'] = 'No group'
if (b.Schema['x-group'] === undefined)
b.Schema['x-group'] = 'No group'
if (a.Schema['x-group'] < b.Schema['x-group']) return -1
if (a.Schema['x-group'] > b.Schema['x-group']) return 1
if ((a.Schema.title || a.Name) < (b.Schema.title || b.Name)) return -1
if ((a.Schema.title || a.Name) > (b.Schema.title || b.Name)) return 1
return 0
}// }}}
class ConnectedNodes {
constructor(nodes) {
constructor(nodes) {// {{{
this.nodes = nodes
}
render() {
}// }}}
render() {// {{{
const div = document.createElement('template')
div.innerHTML = `
<div class="label">Connected nodes</div>
<div class="add"><img src="/images/${_VERSION}/node_modules/@mdi/svg/svg/plus-box.svg" /></div>
<div class="connected-nodes"></div>
`
div.content.querySelector('.add').addEventListener('click', () => mbus.dispatch('NODE_CONNECT'))
const types = new Map()
for (const n of this.nodes) {
let typeGroup = types.get(n.TypeSchema.title)
@ -774,23 +750,21 @@ class ConnectedNodes {
}
return div.content
}
}// }}}
}
class ConnectedNode {
constructor(node) {
constructor(node) {// {{{
this.node = node
}
render() {
}// }}}
render() {// {{{
const tmpl = document.createElement('template')
tmpl.innerHTML = `
<div class="type-icon"><img src="/images/${_VERSION}/node_modules/@mdi/svg/svg/${this.node.TypeIcon}.svg" /></div>
<div class="node-name">${this.node.Name}</div>
`
return tmpl.content
}
}// }}}
}
// vim: foldmethod=marker