wip
This commit is contained in:
Magnus Åhall
parent
04c101982f
commit
13d0b15fd9
15 changed files with 507 additions and 1246 deletions
|
|
@ -1,188 +0,0 @@
|
|||
import { h, Component, createRef } from 'preact'
|
||||
import { signal } from 'preact/signals'
|
||||
import htm from 'htm'
|
||||
import { API } from 'api'
|
||||
import { Node, NodeUI } from 'node'
|
||||
const html = htm.bind(h)
|
||||
|
||||
export class Notes2 {
|
||||
constructor() {//{{{
|
||||
this.startNode = null
|
||||
this.tree = null
|
||||
this.nodeUI = createRef()
|
||||
this.nodeModified = signal(false)
|
||||
this.setStartNode()
|
||||
}//}}}
|
||||
render() {//{{{
|
||||
return html`
|
||||
<${Tree} ref=${this.tree} app=${this} />
|
||||
<div class="nodeui">
|
||||
<${NodeUI} app=${this} ref=${this.nodeUI} />
|
||||
</div>
|
||||
`
|
||||
}//}}}
|
||||
setStartNode() {//{{{
|
||||
/*
|
||||
const urlParams = new URLSearchParams(window.location.search)
|
||||
const nodeID = urlParams.get('node')
|
||||
*/
|
||||
|
||||
const parts = document.URL.split('#')
|
||||
const nodeID = parts[1]
|
||||
|
||||
this.startNode = new Node(this, nodeID ? Number.parseInt(nodeID) : 0)
|
||||
}//}}}
|
||||
|
||||
treeGet() {//{{{
|
||||
const req = {}
|
||||
API.query('POST', '/node/tree', req)
|
||||
.then(response => {
|
||||
console.log(response.Nodes)
|
||||
nodeStore.add(response.Nodes)
|
||||
})
|
||||
.catch(e => console.log(e.type, e.error))
|
||||
}//}}}
|
||||
}
|
||||
|
||||
class Tree extends Component {
|
||||
constructor(props) {//{{{
|
||||
super(props)
|
||||
this.treeNodes = {}
|
||||
this.treeNodeComponents = {}
|
||||
this.treeTrunk = []
|
||||
this.selectedTreeNode = null
|
||||
this.props.app.tree = this
|
||||
|
||||
this.retrieve()
|
||||
}//}}}
|
||||
render({ app }) {//{{{
|
||||
const renderedTreeTrunk = this.treeTrunk.map(node => {
|
||||
this.treeNodeComponents[node.ID] = createRef()
|
||||
return html`<${TreeNode} key=${`treenode_${node.ID}`} tree=${this} node=${node} ref=${this.treeNodeComponents[node.ID]} selected=${node.ID === app.startNode.ID} />`
|
||||
})
|
||||
return html`<div id="tree">${renderedTreeTrunk}</div>`
|
||||
}//}}}
|
||||
|
||||
retrieve(callback = null) {//{{{
|
||||
nodeStore.getTreeNodes()
|
||||
.then(res => {
|
||||
this.treeNodes = {}
|
||||
this.treeNodeComponents = {}
|
||||
this.treeTrunk = []
|
||||
this.selectedTreeNode = null
|
||||
|
||||
// A tree of nodes is built. This requires the list of nodes
|
||||
// returned from the server to be sorted in such a way that
|
||||
// a parent node always appears before a child node.
|
||||
// The server uses a recursive SQL query delivering this.
|
||||
for (const nodeData of res) {
|
||||
const node = new Node(
|
||||
this,
|
||||
nodeData.ID,
|
||||
)
|
||||
node.Children = []
|
||||
node.Crumbs = []
|
||||
node.Files = []
|
||||
node.Level = nodeData.Level
|
||||
node.Name = nodeData.Name
|
||||
node.ParentID = nodeData.ParentID
|
||||
node.Updated = nodeData.Updated
|
||||
node.UserID = nodeData.UserID
|
||||
|
||||
this.treeNodes[node.ID] = node
|
||||
|
||||
if (node.ParentID === 0)
|
||||
this.treeTrunk.push(node)
|
||||
else if (this.treeNodes[node.ParentID] !== undefined)
|
||||
this.treeNodes[node.ParentID].Children.push(node)
|
||||
}
|
||||
// When starting with an explicit node value, expanding all nodes
|
||||
// on its path gives the user a sense of location. Not necessarily working
|
||||
// as the start node isn't guaranteed to have returned data yet.
|
||||
// XXX this.crumbsUpdateNodes()
|
||||
this.forceUpdate()
|
||||
|
||||
if (callback)
|
||||
callback()
|
||||
|
||||
})
|
||||
.catch(e => { console.log(e); console.log(e.type, e.error); alert(e.error) })
|
||||
}//}}}
|
||||
setSelected(node) {//{{{
|
||||
return // TODO
|
||||
if (this.selectedTreeNode)
|
||||
this.selectedTreeNode.selected.value = false
|
||||
|
||||
this.selectedTreeNode = this.treeNodeComponents[node.ID].current
|
||||
this.selectedTreeNode.selected.value = true
|
||||
this.selectedTreeNode.expanded.value = true
|
||||
this.expandToTrunk(node.ID)
|
||||
}//}}}
|
||||
crumbsUpdateNodes(node) {//{{{
|
||||
console.log('crumbs', this.props.app.startNode.Crumbs)
|
||||
for (const crumb in this.props.app.startNode.Crumbs) {
|
||||
// Start node is loaded before the tree.
|
||||
const node = this.treeNodes[crumb.ID]
|
||||
if (node)
|
||||
node._expanded = true
|
||||
|
||||
// Tree is done before the start node.
|
||||
const component = this.treeNodeComponents[crumb.ID]
|
||||
if (component?.component.current)
|
||||
component.current.expanded.value = true
|
||||
}
|
||||
|
||||
// Will be undefined when called from tree initialization
|
||||
// (as tree nodes aren't rendered yet)
|
||||
if (node !== undefined)
|
||||
this.setSelected(node)
|
||||
}//}}}
|
||||
expandToTrunk(nodeID) {//{{{
|
||||
let node = this.treeNodes[nodeID]
|
||||
if (node === undefined)
|
||||
return
|
||||
|
||||
node = this.treeNodes[node.ParentID]
|
||||
while (node !== undefined) {
|
||||
this.treeNodeComponents[node.ID].current.expanded.value = true
|
||||
node = this.treeNodes[node.ParentID]
|
||||
}
|
||||
}//}}}
|
||||
}
|
||||
|
||||
class TreeNode extends Component {
|
||||
constructor(props) {//{{{
|
||||
super(props)
|
||||
this.selected = signal(props.selected)
|
||||
this.expanded = signal(this.props.node._expanded)
|
||||
}//}}}
|
||||
render({ tree, node }) {//{{{
|
||||
|
||||
const children = node.Children.map(node => {
|
||||
tree.treeNodeComponents[node.ID] = createRef()
|
||||
return html`<${TreeNode} key=${`treenode_${node.ID}`} tree=${tree} node=${node} ref=${tree.treeNodeComponents[node.ID]} selected=${node.ID === tree.props.app.startNode.ID} />`
|
||||
})
|
||||
|
||||
let expandImg = ''
|
||||
if (node.Children.length === 0)
|
||||
expandImg = html`<img src="/images/${window._VERSION}/leaf.svg" />`
|
||||
else {
|
||||
if (this.expanded.value)
|
||||
expandImg = html`<img src="/images/${window._VERSION}/expanded.svg" />`
|
||||
else
|
||||
expandImg = html`<img src="/images/${window._VERSION}/collapsed.svg" />`
|
||||
}
|
||||
|
||||
|
||||
const selected = (this.selected.value ? 'selected' : '')
|
||||
|
||||
return html`
|
||||
<div class="node">
|
||||
<div class="expand-toggle" onclick=${() => { this.expanded.value ^= true }}>${expandImg}</div>
|
||||
<div class="name ${selected}" onclick=${() => window._notes2.current.nodeUI.current.goToNode(node.ID)}>${node.Name}</div>
|
||||
<div class="children ${node.Children.length > 0 && this.expanded.value ? 'expanded' : 'collapsed'}">${children}</div>
|
||||
</div>`
|
||||
}//}}}
|
||||
}
|
||||
|
||||
// vim: foldmethod=marker
|
||||
Loading…
Add table
Add a link
Reference in a new issue