Webix Tree Node Drag and Drop to CodeMirror Editor

Webix JS
1

I have CodeMirror running via the codemirror add-on component. I want to be able to drag a Webix Tree node over and drop it into the CodeMirror editor. When I drop in CodeMirror, nothing happens.

2

In the codemirror-editor prototype, I have the defaults as:

defaults:{
	mode:"javascript",
	lineNumbers:true,
	matchBrackets:true,
	theme:"default",
	drag:"target"
}

In the _render_when_ready function, I have:

	this.editor = CodeMirror.fromTextArea(this.$view.firstChild, {
		mode: this.config.mode,
		lineNumbers: this.config.lineNumbers,
		matchBrackets: this.config.matchBrackets,
		theme: this.config.theme,
		dragDrop: true,
		dragStart:function(instance,event) {
			console.log('CodeMirror: dragStart');
			console.dir(instance);
			console.dir(event);
		},
		dragEnter:function(instance,event) {
			console.log('CodeMirror: dragEnter');
			console.dir(instance);
			console.dir(event);
		},
		dragOver:function(instance,event) {
			console.log('CodeMirror: dragOver');
			console.dir(instance);
			console.dir(event);
		},
		drop:function(instance,event) {
			console.log('CodeMirror: drop');
			console.dir(instance);
			console.dir(event);
		}
	});

I also have some drag and drop Webix events on the prototype:

	onBeforeDrop: function(context, ev) {
		console.log('onBeforeDrop for CodeMirror');
		console.dir(context);
		console.dir(ev);
	}

	,onAfterDrop: function(context, ev) {
		console.log('onAfterDrop for CodeMirror');
		console.dir(context);
		console.dir(ev);
		this.editor.drop(this.editor,ev);
	}

No events are firing. There is a disconnect somewhere.

3

I have a feeling the Webix drag:“target” config is not being recognized in the protoUI for codemirror-editor. But I am not sure where it is supposed to go.

4

Please check

http://webix.com/snippet/511f5459

You need to use webix.DragControl.addDrop to enable drop-behavior for any custom view.

5

Very good… I just need to make sure when I drop onto CodeMirror, it adds to the editor where the cursor is. The snippet drop event you provided actually replaces all content in CodeMirror.

6

Third parameter of $drop is mouse event object

 $drop:function(source, target, ev) {

You can use it to get info about exact drop position
I’m not sure which API of code mirror need to be used to insert text n the specific point.

7

Regarding starting the drag from the tree, how do I isolate the actual node that is being dragged?

I am dragging tree node math expression (MathJax) to CodeMirror. I want the dragging object to render as the same MathJax. I can’t figure out how to isolate the dragging object to render it properly.

8

You can redefine $dragCreate method of the component to define your own drag-representation

http://webix.com/snippet/f6ae44f7

9

Very good.

Is any of this stuff documented anywhere? That’s why I keep coming to the forums for help.

10

Incidentally, the rendering on the tree for MathJax components still needs work. In your snippet and in my tree, the rendering screws up all the time. I am not sure if it is MathJax, Webix, or a combination of the two.

11

That return variable d in $dragCreate, how to I access that in the $drop event on the CodeMirror side? I need the div innerText.

Worst case I can just make a global variable to hold the innerText, but I want to avoid that.

12

Next one will return html element in question

webix.DragControl.getNode()
13

Very good…

Problem is that MathJax overwrites innerHTML to the MathJax Preview, so the raw math expression is lost. I am ending up using a global variable to capture the math before it is destroyed.

14

In drop handler you have info about source tree and id of source item, so you can access all its properties

http://webix.com/snippet/511f5459

In this sample it access data from datatable, but the same will work for tree as well

context.from.getItem(context.source[0]).value
  • context.from - source view
  • context.source - array of dragged IDs