未加星标

Working references with drag and drop

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

Fun step forward today even if it isn't much to demo. Added support for pointers to other nodes in the tree from any component. The goal is to continue borrowing this Node and Component data model from Unity . You have Nodes in a tree, and Nodes have Components on them. In my case a Component can be any Go struct, ideally without anything special about it. Fields with pointers should be allowed to be references to a Component of another Node.


Working references with drag and drop

As with Unity, making this reference in the Inspector would just involve dragging a Node to the field and it would find the appropriate Component and set the pointer to it. To start, I'm just trying to get pointers to other Nodes and then I can make it lookup specific Components later.

I started with drag and drop. html5 has a drag and drop API, which is nice to finally have (I know we've had it for a bit). First I added a separate drag and drop demo just to get used to the API. Then I had to figure out how to integrate with the jsTree drag and drop plugin. It turns out to not use the HTML5 drag and drop, but it has an option to integrate with it. I got jsTree nodes to be draggable to my demo drop area and pass the node ID.

From an ID, given the root Node I could find the particular Node in that tree. However, I did not have a reference to the root Node from where I needed. And since the root Node lives in the TreeView component, which is a sibling to the Inspector element, references their parent has to either were not available to bind. Instead I passed a lookup callback down and it turned out to give a reference to the root Node.

From here it was pretty easy. When a drop event happens I grab the Node ID, use the root Node to get a reference to the actual Node, and set the field to it. When the input renders, it looks up the Node and grabs its friendly name for the input value. This becomes more complex when you can reference Components instead of Nodes, but it would be the same interaction and behavior.

One weird problem I ran into was that I couldn't get data out of dataTransfer on the drag event from Go. This is how the Node ID is passed with the drag. I figured maybe something is doing a shallow copy or dataTransfer is just magical for some reason. I'll have to investigate more, but I was able just assign some handlers written in javascript that write the dataTransfer data to a data attribute. Then it triggers a different event in Go where it can read the data off the data attribute.


Working references with drag and drop

So it works right?! Well, yes. But. A new problem. When we serialize the data, Go's JSON marshaler follows pointers and serializes their value. So any reference to another part of the tree is going to make a copy of the subtree. And setting the field to the Node its on will cause a call stack exceeded panic.

I have a plan, though. Since we already have to wrap Components to serialize their type, we can walk the Component value to find references to Nodes in the tree and store their ID in the Component wrapper. Then on unmarshal we look them up and set them in the right place using reflection. But that's a task for another time.

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

代码区博客精选文章
分页:12
转载请注明
本文标题:Working references with drag and drop
本站链接:https://www.codesec.net/view/611060.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(80)