A drag-and-drop application for the HT for Web list and 3D topology components

Many visual editors have more or less drag-and-drop functionality, such as dragging a node from a list to model a topology component, and a drag-and-drop thumbnail at the mouse position during drag-and-drop.

First we need to create a ListView list, add the picture information to the list, so that the list is not so monotonous, first look.

Next we step to think of this ListView list, first to solve the next data, here I will enumerate one or two:

var products = [    {        productid:1,        ProductName: "Chai",        QuantityPerUnit: "Ten boxes X bags",        UNITPR ice:18.00,        Description: "Soft drinks, coffees, teas, beers, and Ales"    },    {        productid:2,        Productna Me: "Chang",        QuantityPerUnit: "24-12 oz bottles",        unitprice:19.00,        Description: "Soft drinks, coffee s, teas, beers, and Ales "    },    ...];

With the data, we can create the ListView component:

var listView = new Ht.widget.ListView (), var view = Listview.getview ();d ocument.body.appendChild (view);

Now that we're creating an empty ListView component that doesn't see anything on the browser, then we're going to add our defined data to the ListView component:

Products.foreach (function (product) {    var data = new HT. Data ();    DATA.A (product);    LISTVIEW.DM (). Add (data);});

It is not easy to add data, but the content displayed on the ListView component defaults to the Name property of data or the DisplayName property, and when you create data, you do not set the DisplayName or Name property on data. So this time on the page is still an empty list component, do not worry, we can not set the DisplayName or Name property to let the component display the text content, see:

Listview.getlabel = function (data) {    return data.a (' ProductName ') + '-$ ' + data.a (' UnitPrice '). toFixed (2);};

Hey, the ListView component provides the Getlabel method for user overloading to implement custom display text content, which should be able to display text content now ~

Oh no~ or nothing, is there something missing ~ Yes, forgot to add a browser-filled style to the ListView component and add the Xiamen style to the head tag:

<style>    html, body {        padding:0px;        margin:0px;    }    . Main {        margin:0px;        padding:0px;        Position:absolute;        top:0px;        bottom:0px;        left:0px;        right:0px;    } </style>

Next, you specify the ClassName property of the view:

View.classname = ' main ';

Oh ~ finally came out ~

The line height is too small, the background is too monotonous, to the same:

Listview.setrowheight (Listview.drawrowbackground = function (g, data, selected, X, y, width, height) {    if ( this.isselected (data) {        G.fillstyle = ' #87A6CB ';    }    else if (this.getrowindex (data)% 2 = = = 0) {        g.fillstyle = ' #F1F4F7 ';    }    else{        g.fillstyle = ' #FAFAFA ';    }    G.beginpath ();    G.rect (x, y, width, height);    G.fill ();};

Set the row height through the Setrowheight () method and draw the cross background by overloading the Drawrowbackground () method.

Hey, a little look, and getting closer ~ Then the icon is poor.

Ht. Default.setimage (' 1 ', max., ' Data:image/jpeg;base64,... '); Ht. Default.setimage (' 2 ', ' Max, Max, ' data:image/jpeg;base64,... '), ... listview.setindent; listview.geticon = function ( Data) {    return data.a (' ProductId ');};

Through HT. The Default.setimage () method defines the ProductID corresponding picture resource, ProductID as an alias for the picture, then defines the icon position size of 60, The GetIcon method of the overloaded ListView returns the ProductID attribute defined in the data, so you can see the icon.

Not yet, the picture shown is round, so what is the good? Don't worry, we have a universal vector, on the kind of graphics are difficult to fail us:

Ht. Default.setimage (' Producticon ', {    width:50,    height:50,    clip:function (g, width, height) {        G.beginpath ();        G.arc (WIDTH/2, HEIGHT/2, math.min (width, height)/2-3, 0, Math.PI * 2, true);        G.clip ();    },    comps: [        {            type: ' Image ',            stretch: ' Uniform ',            rect: [0, 0, +],            name: {func:function (data) {return data.a (' ProductId ');}}    ]});

In the code we define a vector called Producticon, which defines the crop area through the clip attribute in the vector, and the effect is that the content outside of the crop area will be hidden. Now that the vector is defined, we only need to return our defined vector names in the ListView GetIcon () method to implement the circular icon:

Listview.geticon = function (data) {    return ' Producticon ';};

Here, and the effect is exactly the same ~ then we should create a 3D topology component, to see:

It's easy to put two cubes in a 3D topology:

var g3d = new Ht.graph3d.Graph3dView (); var node = new ht. Node (); Node.s3 (NODE.P3 ( -30, 0), node.s (' All.color ', ' #87A6CB '), g3d.dm (). Add (node), node = new ht. Node (); node.s3 (0, NODE.P3); NODE.S (' All.color ', ' #87A6CB '); node.setelevation (); g3d.dm (). Add ( node);

This is what you will find that there is no grid effect as shown in, and the viewing angle is not right, okay, just wait for me to add a few properties:

G3d.seteye ( -100, +); G3d.setgridvisible (true); G3d.setgridcolor (' #F1F4F7 ');

So it's just the same

The ListView and 3D topologies are two separate components, how do we combine the two components together? At this point, I thought of the borderpane component, put the list component on the left, and put the component on the right side:

var borderpane = new Ht.widget.BorderPane (); Borderpane.setleftview (ListView); Borderpane.setcenterview (g3d);

See, successfully merged two components together, not far from success. Next is the play of today, how to implement drag and drop the list on the node to the 3D topology, and the implementation of the node's icon to the 3D topology of the elements, I give you thin way.

First to understand the next ListView Handledraganddrop () method, Draganddrop altogether has 4 states: Prepare, begin, between and end, can be more of these 4 different states to do different business processing.

The first step is to implement the effect of the icon attached to the mouse, and when dragging the node of the ListView, add a thumbnail of the node below the mouse:

The idea is this:

1. Gets the ProductID property of the current drag node in the prepare state, and by calling Ht. The Default.tocanvas () method obtains a canvas object by combining the current drag-and-drop node with the vector Producticon;

2. At the begin state, set the left and top properties of the canvas object according to the current position of the mouse and add it to the DOM tree;

3. In the between state, the left and top properties of the canvas object are reset according to the mouse position information, so that the canvas object moves with the mouse.

4. In the end state, remove the canvas object from the DOM tree.

var dragimage = null, productId = Null;listview.handledraganddrop = function (E, state) {if (state = = = ' Prepare ') {        var data = Listview.getdataat (e);        Listview.sm (). SS (data);        if (dragimage && dragimage.parentnode) {document.body.removeChild (dragimage); } dragimage = Ht.        Default.tocanvas (' Producticon ', +, ' uniform ', data);    ProductId = data.a (' productId '); } else if (state = = = ' begin ') {if (dragimage) {var pagepoint = ht.            Default.getpagepoint (e);            DragImage.style.left = pagepoint.x-dragimage.width/2 + ' px ';            DragImage.style.top = pagepoint.y-dragimage.height/2 + ' px ';        Document.body.appendChild (Dragimage); }} else if (state = = = ' between ') {if (dragimage) {var pagepoint = ht.            Default.getpagepoint (e);            DragImage.style.left = pagepoint.x-dragimage.width/2 + ' px '; DragImage.style.top = Pagepoint.y-draGIMAGE.HEIGHT/2 + ' px '; }} else {if (dragimage) {if (Dragimage.parentnode) {Document.body.removeChild (d            Ragimage);            } dragimage = null;        ProductId = null; }    }};

This way, when dragging the ListView node, you can see that a small icon has been moving with the mouse.

OK, next to solve the element adsorption function, when the mouse drag the ListView node to the 3D topology of the entity is, the icon of the node is set to the entity when the previous map.

The idea is this:

1. In the between state, through HT. The Default.containedinview () method determines whether the front mouse is on a 3D topological component;

2. If the mouse in the 3D topology, then through the G3d.gethitfaceinfo () method, according to the current mouse information to obtain the current mouse entity surface information;

3. If the current mouse on a surface of the entity, then save the element surface information map, and then set the current element surface map as a drag node corresponding to the picture, and finally the current element surface information cache, when the mouse left the surface, the restoration of the map element;

4. In the end state, if the current mouse position is on an entity surface, the corresponding picture of the current dragged node is mapped to the current element surface.

Then you need to make a slight change to the Handledraganddrop () method of the ListView component.

Listview.handledraganddrop = function (E, state) {if (state = = = ' Prepare ') {var data = Listview.getdataat (e);        Listview.sm (). SS (data);        if (dragimage && dragimage.parentnode) {document.body.removeChild (dragimage); } dragimage = Ht.        Default.tocanvas (' Producticon ', +, ' uniform ', data);    ProductId = data.a (' productId '); } else if (state = = = ' begin ') {if (dragimage) {var pagepoint = ht.            Default.getpagepoint (e);            DragImage.style.left = pagepoint.x-dragimage.width/2 + ' px ';            DragImage.style.top = pagepoint.y-dragimage.height/2 + ' px ';        Document.body.appendChild (Dragimage); }} else if (state = = = ' between ') {if (dragimage) {var pagepoint = ht.            Default.getpagepoint (e);            DragImage.style.left = pagepoint.x-dragimage.width/2 + ' px ';            DragImage.style.top = pagepoint.y-dragimage.height/2 + ' px '; if (hT.default.containedinview (E, g3d)) {if (lastfaceinfo) {LASTFACEINFO.DATA.S (lastfaceinf                    O.face + '. Image ', lastfaceinfo.oldvalue);                Lastfaceinfo = null;                } var faceinfo = G3d.gethitfaceinfo (e);                    if (faceinfo) {faceinfo.oldvalue = FACEINFO.DATA.S (Faceinfo.face + '. Image ');                    FACEINFO.DATA.S (Faceinfo.face + '. Image ', productId);                Lastfaceinfo = Faceinfo; }}}} else {if (dragimage) {if (lastfaceinfo) {lastfaceinfo.                DATA.S (Lastfaceinfo.face + '. Image ', lastfaceinfo.oldvalue);            Lastfaceinfo = null; } if (HT.                Default.containedinview (E, g3d)) {var faceinfo = G3d.gethitfaceinfo (e);                if (faceinfo) {faceinfo.data.s (Faceinfo.face + '. Image ', productId);         }            }   if (Dragimage.parentnode) {document.body.removeChild (dragimage);            } dragimage = null;        ProductId = null; }    }};

Today, it will be a bit more content, related to the HT for Web knowledge point is also more, the following attached to the source code of the demo, interested friends can take down to see, but also welcome you to message questions.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

A drag-and-drop application for the HT for Web list and 3D topology components