Mostly working
This commit is contained in:
Magnus Åhall
parent
eaf5e2fb95
commit
58ddc86635
8 changed files with 751 additions and 78 deletions
|
|
@ -3,7 +3,7 @@ import { signal } from 'preact/signals'
|
|||
import { h, Component, render, createRef } from 'preact'
|
||||
import htm from 'htm'
|
||||
import { Session } from 'session'
|
||||
import { NodeUI } from 'node'
|
||||
import { Node, NodeUI } from 'node'
|
||||
const html = htm.bind(h)
|
||||
|
||||
class App extends Component {
|
||||
|
|
@ -19,10 +19,16 @@ class App extends Component {
|
|||
this.session = new Session(this)
|
||||
this.session.initialize()
|
||||
this.login = createRef()
|
||||
this.tree = null
|
||||
this.nodeUI = createRef()
|
||||
this.nodeModified = signal(false)
|
||||
|
||||
this.startNode = null
|
||||
|
||||
this.setStartNode()
|
||||
}//}}}
|
||||
render() {//{{{
|
||||
console.log('render', 'app')
|
||||
if(!this.session.initialized) {
|
||||
return html`<div>Validating session</div>`
|
||||
}
|
||||
|
|
@ -31,7 +37,10 @@ class App extends Component {
|
|||
return html`<${Login} ref=${this.login} />`
|
||||
}
|
||||
|
||||
return html`<${NodeUI} app=${this} ref=${this.nodeUI} />`
|
||||
return html`
|
||||
<${Tree} app=${this} ref=${this.tree} />
|
||||
<${NodeUI} app=${this} ref=${this.nodeUI} />
|
||||
`
|
||||
}//}}}
|
||||
|
||||
wsLoop() {//{{{
|
||||
|
|
@ -131,6 +140,11 @@ class App extends Component {
|
|||
break;
|
||||
}
|
||||
}//}}}
|
||||
setStartNode() {//{{{
|
||||
let urlParams = new URLSearchParams(window.location.search)
|
||||
let nodeID = urlParams.get('node')
|
||||
this.startNode = new Node(this, nodeID ? parseInt(nodeID) : 0)
|
||||
}//}}}
|
||||
}
|
||||
|
||||
class Login extends Component {
|
||||
|
|
@ -168,6 +182,125 @@ class Login extends Component {
|
|||
}//}}}
|
||||
}
|
||||
|
||||
class Tree extends Component {
|
||||
constructor(props) {//{{{
|
||||
super(props)
|
||||
this.treeNodes = {}
|
||||
this.treeNodeComponents = {}
|
||||
this.treeTrunk = []
|
||||
this.selectedTreeNode = null
|
||||
|
||||
this.props.app.tree = this
|
||||
|
||||
this.props.app.request('/node/tree', { StartNodeID: 0 })
|
||||
.then(res=>{
|
||||
// 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.
|
||||
res.Nodes.forEach(nodeData=>{
|
||||
let 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.
|
||||
this.crumbsUpdateNodes()
|
||||
this.forceUpdate()
|
||||
|
||||
})
|
||||
.catch(this.responseError)
|
||||
}//}}}
|
||||
render({ app }) {//{{{
|
||||
console.log('render', 'tree')
|
||||
let 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>`
|
||||
}//}}}
|
||||
|
||||
setSelected(node) {//{{{
|
||||
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
|
||||
}//}}}
|
||||
crumbsUpdateNodes(node) {//{{{
|
||||
this.props.app.startNode.Crumbs.forEach(crumb=>{
|
||||
// Start node is loaded before the tree.
|
||||
let node = this.treeNodes[crumb.ID]
|
||||
if(node)
|
||||
node._expanded = true
|
||||
|
||||
// Tree is done before the start node.
|
||||
let 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)
|
||||
}//}}}
|
||||
}
|
||||
|
||||
class TreeNode extends Component {
|
||||
constructor(props) {//{{{
|
||||
super(props)
|
||||
this.selected = signal(props.selected)
|
||||
this.expanded = signal(this.props.node._expanded)
|
||||
}//}}}
|
||||
render({ tree, node }) {//{{{
|
||||
console.log('render', 'treenode', node.Name)
|
||||
|
||||
let 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" />`
|
||||
}
|
||||
|
||||
|
||||
let 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._app.current.nodeUI.current.goToNode(node.ID)}>${node.Name}</div>
|
||||
<div class="children ${node.Children.length > 0 && this.expanded.value ? 'expanded' : 'collapsed'}">${children}</div>
|
||||
</div>`
|
||||
}//}}}
|
||||
}
|
||||
|
||||
// Init{{{
|
||||
window._app = createRef()
|
||||
window._resourceModels = []
|
||||
|
|
|
|||
|
|
@ -7,28 +7,26 @@ export class NodeUI extends Component {
|
|||
constructor() {//{{{
|
||||
super()
|
||||
this.menu = signal(false)
|
||||
this.tree = signal(null)
|
||||
this.node = signal(null)
|
||||
this.nodeContent = createRef()
|
||||
this.upload = signal(false)
|
||||
|
||||
window.addEventListener('popstate', evt=>{
|
||||
if(evt.state && evt.state.hasOwnProperty('nodeID'))
|
||||
this.goToNode(evt.state.nodeID, true)
|
||||
else
|
||||
this.goToNode(0, true)
|
||||
})
|
||||
|
||||
window.addEventListener('keydown', evt=>this.keyHandler(evt))
|
||||
}//}}}
|
||||
render() {//{{{
|
||||
console.log('render', 'nodeUI')
|
||||
|
||||
if(this.node.value === null)
|
||||
return
|
||||
|
||||
let node = this.node.value
|
||||
let tree = this.tree.value
|
||||
|
||||
let treeHTML = html`Tree`
|
||||
if(tree !== null)
|
||||
treeHTML = this.renderTree(tree)
|
||||
|
||||
let crumbs = [
|
||||
html`<div class="crumb" onclick=${()=>this.goToNode(0)}>Start</div>`
|
||||
|
|
@ -62,12 +60,15 @@ export class NodeUI extends Component {
|
|||
${menu}
|
||||
${upload}
|
||||
<header class="${modified}" onclick=${()=>this.saveNode()}>
|
||||
<div class="tree"><img src="/images/${window._VERSION}/tree.svg" /></div>
|
||||
<div class="name">Notes</div>
|
||||
<div class="add" onclick=${evt=>this.createNode(evt)}>+</div>
|
||||
<div class="menu" onclick=${evt=>this.showMenu(evt)}>☰</div>
|
||||
</header>
|
||||
|
||||
<div class="crumbs">${crumbs}</crumbs>
|
||||
<div id="crumbs">
|
||||
<div class="crumbs">${crumbs}</crumbs>
|
||||
</div>
|
||||
|
||||
${children.length > 0 ? html`<div class="child-nodes">${children}</div>` : html``}
|
||||
|
||||
|
|
@ -80,12 +81,12 @@ export class NodeUI extends Component {
|
|||
`
|
||||
}//}}}
|
||||
componentDidMount() {//{{{
|
||||
let urlParams = new URLSearchParams(window.location.search)
|
||||
let nodeID = urlParams.get('node')
|
||||
let root = new Node(this.props.app, nodeID ? parseInt(nodeID) : 0)
|
||||
|
||||
root.retrieve(node=>{
|
||||
this.props.app.startNode.retrieve(node=>{
|
||||
this.node.value = node
|
||||
|
||||
// The tree isn't guaranteed to have loaded yet. This is also run from
|
||||
// the tree code, in case the node hasn't loaded.
|
||||
this.props.app.tree.crumbsUpdateNodes(node)
|
||||
})
|
||||
}//}}}
|
||||
|
||||
|
|
@ -138,10 +139,17 @@ export class NodeUI extends Component {
|
|||
|
||||
if(!dontPush)
|
||||
history.pushState({ nodeID }, '', `/?node=${nodeID}`)
|
||||
|
||||
// New node is fetched in order to retrieve content and files.
|
||||
// Such data is unnecessary to transfer for tree/navigational purposes.
|
||||
let node = new Node(this.props.app, nodeID)
|
||||
node.retrieve(node=>{
|
||||
this.props.app.nodeModified.value = false
|
||||
this.node.value = node
|
||||
|
||||
// Tree needs to know another node is selected, in order to render any
|
||||
// previously selected node not selected.
|
||||
this.props.app.tree.setSelected(node)
|
||||
})
|
||||
}//}}}
|
||||
createNode(evt) {//{{{
|
||||
|
|
@ -174,12 +182,6 @@ export class NodeUI extends Component {
|
|||
this.menu.value = false
|
||||
})
|
||||
}//}}}
|
||||
retrieveTree() {//{{{
|
||||
this.node.value.children(children=>this.tree.value = children)
|
||||
}//}}}
|
||||
renderTree(tree) {//{{{
|
||||
return tree.map(node=>html`<div class="node" style="margin-left: ${(node.Level+1) * 32}px">${node.Name}</div>`)
|
||||
}//}}}
|
||||
}
|
||||
|
||||
class NodeContent extends Component {
|
||||
|
|
@ -193,11 +195,14 @@ class NodeContent extends Component {
|
|||
}//}}}
|
||||
render({ content }) {//{{{
|
||||
return html`
|
||||
<textarea class="node-content" ref=${this.contentDiv} oninput=${()=>this.contentChanged()} required rows=1>${content}</textarea>
|
||||
<div class="grow-wrap">
|
||||
<textarea id="node-content" class="node-content" ref=${this.contentDiv} oninput=${()=>this.contentChanged()} required rows=1>${content}</textarea>
|
||||
</div>
|
||||
`
|
||||
}//}}}
|
||||
componentDidMount() {//{{{
|
||||
this.resize()
|
||||
window.addEventListener('resize', ()=>this.resize())
|
||||
}//}}}
|
||||
componentDidUpdate() {//{{{
|
||||
this.resize()
|
||||
|
|
@ -207,9 +212,9 @@ class NodeContent extends Component {
|
|||
this.resize()
|
||||
}//}}}
|
||||
resize() {//{{{
|
||||
let textarea = this.contentDiv.current;
|
||||
textarea.style.height = "auto";
|
||||
textarea.style.height = textarea.scrollHeight + 16 + "px";
|
||||
let textarea = document.getElementById('node-content')
|
||||
if(textarea)
|
||||
textarea.parentNode.dataset.replicatedValue = textarea.value
|
||||
}//}}}
|
||||
}
|
||||
|
||||
|
|
@ -249,17 +254,20 @@ class NodeFiles extends Component {
|
|||
}//}}}
|
||||
}
|
||||
|
||||
class Node {
|
||||
export class Node {
|
||||
constructor(app, nodeID) {//{{{
|
||||
this.app = app
|
||||
this.ID = nodeID
|
||||
this.ParentID = 0
|
||||
this.UserID = 0
|
||||
this.Name = ''
|
||||
this.Content = ''
|
||||
this.Children = []
|
||||
this.Crumbs = []
|
||||
this.Files = []
|
||||
this.app = app
|
||||
this.ID = nodeID
|
||||
this.ParentID = 0
|
||||
this.UserID = 0
|
||||
this.Name = ''
|
||||
this.Content = ''
|
||||
this.Children = []
|
||||
this.Crumbs = []
|
||||
this.Files = []
|
||||
this._expanded = false // start value for the TreeNode component,
|
||||
// it doesn't control it afterwards.
|
||||
// Used to expand the crumbs upon site loading.
|
||||
}//}}}
|
||||
retrieve(callback) {//{{{
|
||||
this.app.request('/node/retrieve', { ID: this.ID })
|
||||
|
|
@ -340,13 +348,6 @@ class Node {
|
|||
a.remove(); //afterwards we remove the element again
|
||||
})
|
||||
}//}}}
|
||||
children(callback) {//{{{
|
||||
this.app.request('/node/tree', { StartNodeID: this.ID })
|
||||
.then(res=>{
|
||||
callback(res.Nodes)
|
||||
})
|
||||
.catch(this.app.responseError)
|
||||
}//}}}
|
||||
}
|
||||
|
||||
class Menu extends Component {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue