Initial work on drag-and-drop

static/js/app.mjs

@@ -12,6 +12,7 @@ export class App {
 		this.crumbs = new N2Crumbs()
 		this.crumbsElement = document.getElementById('crumbs')
 		this.nodeUI = document.getElementById('note')
+		this.dragIcon = new N2DragIcon()
 
 		this.sidebar.render().then(sidebar => {
 			document.getElementById('tree').append(sidebar)
@@ -68,6 +69,7 @@ export class App {
 		})
 
 		document.querySelector('#page-root .create').addEventListener('click', () => this.createNode())
+		document.body.append(this.dragIcon)
 
 		_mbus.dispatch('SHOW_PAGE', { page: 'node' })
 
@@ -78,7 +80,6 @@ export class App {
 		// There a slight delay to initiate sync seems reasonable.
 		setTimeout(() => window._sync.run(), 1000)
 	}// }}}
-
 	keyHandler(event) {//{{{
 		let handled = true
 
@@ -151,6 +152,10 @@ export class App {
 	async saveNode() {//{{{
 
 	}//}}}
+	async moveNode(node, targetNodeUUID) {// {{{
+		node.moveToParent(targetNodeUUID)
+		await node.save()
+	}// }}}
 	async createNode(createUnderUUID) {//{{{
 		const parentUUID = createUnderUUID ? createUnderUUID : this.currentNode.UUID
 		const p = createUnderUUID ? 'Name for sibling document' : 'Name for sub-document'
@@ -239,7 +244,6 @@ class N2Crumbs extends CustomHTMLElement {
 		return this
 	}// }}}
 }
-customElements.define('n2-crumbs', N2Crumbs)
 
 class N2Crumb extends CustomHTMLElement {
 	static {// {{{
@@ -270,7 +274,6 @@ class N2Crumb extends CustomHTMLElement {
 		this.elLink.addEventListener('click', () => _mbus.dispatch("GO_TO_NODE", { nodeUUID: this.uuid, dontPush: false, dontExpand: true }))
 	}// }}}
 }
-customElements.define('n2-crumb', N2Crumb)
 
 function tmpl(html) {// {{{
 	const el = document.createElement('template')
@@ -344,4 +347,52 @@ class OpSearch extends Op {
 	}// }}}
 }
 
+class N2DragIcon extends CustomHTMLElement {
+	static {// {{{
+		this.tmpl = document.createElement('template')
+		this.tmpl.innerHTML = `
+			<style>
+				:host {
+					display: none;
+					position: absolute;
+					z-index: 16384;
+					pointer-events: none;
+				}
+			</style>
+			<img data-el="icon" src="/images/${_VERSION}/icon_drag.svg">
+		`
+	}// }}}
+	constructor() {// {{{
+		super(true)
+
+		document.addEventListener('dragover', e => {
+			this.style.left = `${e.clientX + 8}px`
+			this.style.top = `${e.clientY}px`
+		})
+
+		this.dragTarget = null
+	}// }}}
+	start() {// {{{
+		this.style.display = 'block'
+	}// }}}
+	end() {// {{{
+		this.style.display = 'none'
+	}// }}}
+	icon(name) {// {{{
+		if (name != '')
+			name = '_' + name
+		this.elIcon.setAttribute('src', `/images/${_VERSION}/icon_drag${name}.svg`)
+	}// }}}
+	setTarget(t) {// {{{
+		this.dragTarget = t
+	}// }}}
+	getTarget() {// {{{
+		return this.dragTarget
+	}// }}}
+}
+
+customElements.define('n2-crumbs', N2Crumbs)
+customElements.define('n2-crumb', N2Crumb)
+customElements.define('n2-dragicon', N2DragIcon)
+
 // vim: foldmethod=marker