Notes2/static/js/notes2.mjs

import { h, Component, createRef } from 'preact'
import { signal } from 'preact/signals'
import htm from 'htm'
import { Node, NodeUI } from 'node'
import { ROOT_NODE } from 'node_store'
const html = htm.bind(h)

export class Notes2 extends Component {
	constructor() {//{{{
		super()
		this.nodeUI = createRef()
		this.reloadTree = signal(0)
		this.state = {
			startNode: null,
		}

		window._sync = new Sync()
		window._sync.run()

		this.getStartNode()
	}//}}}
	render(_props, { startNode }) {//{{{
		console.log('notes2 render')
		const treeKey = `tree-${this.reloadTree}`
		console.log('treeKey', treeKey)

		if (startNode === null)
			return

		return html`
			<${Tree} app=${this} key=${treeKey} startNode=${startNode} />

			<div id="nodeui">
				<${NodeUI} app=${this} ref=${this.nodeUI} startNode=${startNode} />
			</div>
		`
	}//}}}
	getStartNode() {//{{{
		let nodeUUID = ROOT_NODE

		// Is a UUID provided on the URI as an anchor?
		const parts = document.URL.split('#')
		if (parts[1]?.match(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i))
			nodeUUID = parts[1]

		nodeStore.get(nodeUUID).then(node => {
			this.setState({ startNode: node })
		})
	}//}}}
	async goToNode(nodeUUID, dontPush, dontExpand) {//{{{
		if (nodeUUID === null || nodeUUID === undefined)
			return

		// Don't switch notes until saved.
		if (this.nodeUI.current.nodeModified.value) {
			if (!confirm("Changes not saved. Do you want to discard changes?"))
				return
		}

		if (!dontPush)
			history.pushState({ nodeUUID }, '', `/notes2#${nodeUUID}`)

		// New node is fetched in order to retrieve content and files.
		// Such data is unnecessary to transfer for tree/navigational purposes.
		const node = nodeStore.node(nodeUUID)
		const ancestors = await nodeStore.getNodeAncestry(node)
		this.nodeUI.current.setNode(node)
		this.nodeUI.current.setCrumbs(ancestors)
		this.tree.setSelected(node, dontExpand)
	}//}}}
	logout() {//{{{
		localStorage.removeItem('session.UUID')
		location.href = '/'
	}//}}}
}

class Tree extends Component {
	constructor(props) {//{{{
		super(props)
		console.log('new tree')
		this.treeNodeComponents = {}
		this.treeTrunk = []
		this.selectedNode = null
		this.expandedNodes = {} // keyed on UUID
		this.treeDiv = createRef()

		this.props.app.tree = this

		this.populateFirstLevel()
	}//}}}
	render({ app }) {//{{{
		const renderedTreeTrunk = this.treeTrunk.map(node => {
			this.treeNodeComponents[node.UUID] = createRef()
			return html`<${TreeNode} key=${`treenode_${node.UUID}`} tree=${this} node=${node} ref=${this.treeNodeComponents[node.UUID]} selected=${node.UUID === app.state.startNode?.UUID} />`
		})
		return html`
			<div id="tree" ref=${this.treeDiv} tabindex="0">
				<div id="logo" onclick=${() => _notes2.current.goToNode(ROOT_NODE)}><img src="/images/${_VERSION}/logo.svg" /></div>
				<div class="icons">
					<img src="/images/${_VERSION}/icon_refresh.svg" />
				</div>
				${renderedTreeTrunk}
			</div>`
	}//}}}
	componentDidMount() {//{{{
		this.treeDiv.current.addEventListener('keydown', event => this.keyHandler(event))

		// This will show and select the treenode that is selected in the node UI.
		const node = _notes2.current?.nodeUI.current?.node.value
		if (node === null)
			return
		_notes2.current.tree.expandToTrunk(node)
		this.setSelected(node)
	}//}}}

	populateFirstLevel(callback = null) {//{{{
		nodeStore.get(ROOT_NODE)
			.then(node => node.fetchChildren())
			.then(children => {
				this.treeNodeComponents = {}
				this.treeTrunk = []
				for (const node of children) {
					// The root node isn't supposed to be shown in the tree.
					if (node.UUID === ROOT_NODE)
						continue
					if (node.ParentUUID === '')
						this.treeTrunk.push(node)
				}
				this.forceUpdate()
				if (callback)
					callback()

			})
			.catch(e => { console.log(e); console.log(e.type, e.error); alert(e.error) })
	}//}}}
	setSelected(node, dontExpand) {//{{{
		// The previously selected node, if any, needs to be rerendered
		// to not retain its 'selected' class.
		const prevUUID = this.selectedNode?.UUID
		this.selectedNode = node
		if (prevUUID)
			this.treeNodeComponents[prevUUID]?.current.forceUpdate()

		// And now the newly selected node is rerendered.
		this.treeNodeComponents[node.UUID]?.current.forceUpdate()

		if (!dontExpand)
			this.setNodeExpanded(node.UUID, true)
	}//}}}
	isSelected(node) {//{{{
		return this.selectedNode?.UUID === node.UUID
	}//}}}
	async expandToTrunk(node) {//{{{
		// Get all ancestors from a certain node up to the highest grandparent.
		const ancestry = await nodeStore.getNodeAncestry(node, [])
		for (const i in ancestry) {
			await nodeStore.node(ancestry[i].UUID).fetchChildren()
			this.setNodeExpanded(ancestry[i].UUID, true)
		}

		// Already a top node, no need to expand anything.
		if (ancestry.length === 0)
			return

		// Start the chain of by expanding the top node.
		this.setNodeExpanded(ancestry[ancestry.length - 1].UUID, true)
	}//}}}
	getNodeExpanded(UUID) {//{{{
		if (this.expandedNodes[UUID] === undefined)
			this.expandedNodes[UUID] = signal(false)
		return this.expandedNodes[UUID].value
	}//}}}
	setNodeExpanded(UUID, value) {//{{{
		// Creating a default value if it doesn't exist already.
		this.getNodeExpanded(UUID)
		this.expandedNodes[UUID].value = value
	}//}}}
	getParentNodeWithNextSibling(node) {//{{{
		let currNode = node
		while (currNode !== null && currNode.UUID !== ROOT_NODE && currNode.getSiblingAfter() === null) {
			currNode = currNode.getParent()
		}
		return currNode?.getSiblingAfter()
	}//}}}

	async keyHandler(event) {//{{{
		let handled = true
		let nodeExpanded = false
		let siblingBefore = null
		let siblingExpanded = false
		let parent = null
		const n = this.selectedNode

		switch (event.key) {
			case 'j':
			case 'ArrowDown':
				nodeExpanded = this.getNodeExpanded(n.UUID)

				// Last node, not expanded, so it matters not whether it has children or not.
				// Traverse upward to nearest parent with next sibling.
				if (!nodeExpanded && n.isLastSibling()) {
					const wantedNode = this.getParentNodeWithNextSibling(n)
					if (wantedNode?.UUID === ROOT_NODE)
						break
					await _notes2.current.goToNode(wantedNode?.UUID, true, true)
					break
				}

				if (nodeExpanded && n.isLastSibling() && !n.hasChildren()) {
					const wantedNode = this.getParentNodeWithNextSibling(n)
					await _notes2.current.goToNode(wantedNode?.UUID, true, true)
					break
				}
				// Node not expanded. Go to this node's next sibling.
				// GoToNode will abort if given null.
				if (!nodeExpanded || !n.hasChildren()) {
					await _notes2.current.goToNode(n.getSiblingAfter()?.UUID, true, true)
					break
				}

				// Node is expanded.
				// Children will be visually beneath this node, if any.
				if (nodeExpanded && n.hasChildren()) {
					await _notes2.current.goToNode(n.Children[0].UUID, true, true)
					break
				}
				break

			case 'k':
			case 'ArrowUp':
				siblingBefore = n.getSiblingBefore()
				if (siblingBefore !== null)
					siblingExpanded = this.getNodeExpanded(siblingBefore.UUID)

				if (n.isFirstSibling()) {
					parent = n.getParent()
					if (parent?.UUID === ROOT_NODE)
						break
					await _notes2.current.goToNode(parent?.UUID, true, true)
					break
				}

				if (siblingBefore !== null && siblingExpanded && siblingBefore.hasChildren()) {
					await _notes2.current.goToNode(siblingBefore.Children[siblingBefore.Children.length - 1]?.UUID, true, true)
					break
				}

				if (siblingBefore) {
					await _notes2.current.goToNode(siblingBefore.UUID, true, true)
					break
				}
				break

			case 'h':
			case 'ArrowLeft':
				break

			default:
				handled = false
		}

		if (handled) {
			event.preventDefault()
			event.stopPropagation()
		}
	}//}}}
}

class TreeNode extends Component {
	constructor(props) {//{{{
		super(props)
		this.children_populated = signal(false)
		if (this.props.node.Level === 0 || this.props.tree.getNodeExpanded(this.props.node.UUID))
			this.fetchChildren()
	}//}}}
	render({ tree, node, parent }) {//{{{
		// Fetch the next level of children if the parent tree node is expanded and our children thus will be visible.
		const selected = tree.isSelected(node) ? 'selected' : ''

		if (!this.children_populated.value && tree.getNodeExpanded(parent?.props.node.UUID))
			this.fetchChildren()

		const children = node.Children.map(node => {
			tree.treeNodeComponents[node.UUID] = createRef()
			return html`<${TreeNode} key=${`treenode_${node.UUID}`} tree=${tree} node=${node} parent=${this} ref=${tree.treeNodeComponents[node.UUID]} selected=${node.UUID === tree.props.app.startNode?.UUID} />`
		})

		let expandImg = ''
		if (node.Children.length === 0)
			expandImg = html`<img src="/images/${window._VERSION}/leaf.svg" />`
		else {
			if (tree.getNodeExpanded(node.UUID))
				expandImg = html`<img src="/images/${window._VERSION}/expanded.svg" />`
			else
				expandImg = html`<img src="/images/${window._VERSION}/collapsed.svg" />`
		}

		return html`
			<div class="node">
				<div class="expand-toggle" onclick=${() => { tree.setNodeExpanded(node.UUID, !tree.getNodeExpanded(node.UUID)) }}>${expandImg}</div>
				<div class="name ${selected}" onclick=${() => window._notes2.current.goToNode(node.UUID)}>${node.get('Name')}</div>
				<div class="children ${node.Children.length > 0 && tree.getNodeExpanded(node.UUID) ? 'expanded' : 'collapsed'}">${children}</div>
			</div>`
	}//}}}
	async fetchChildren() {//{{{
		await this.props.node.fetchChildren()
		this.children_populated.value = true
	}//}}}
}

// vim: foldmethod=marker