In my web application I work with ExtJS4 and I use an Ext.tree.Panel. For a custom drag and drop implementation I need to find the tree node by its screen coordinates.
Is there a way to find a tree node by its screen coordinate? Or is it possible to find it via its HTML element?
Thanx in advance...
It would be not very efficient to seek node by coordinates as the only way to find the node by coordinates is to walk over all nodes.
Finding node by HTML element seems like more logical approach to me. Extjs4 tree utilizes the view. So you can try the view.getRecord method:
var node = tree.view.getRecord(htmlEl);
I haven't tried this code but it should work provided you passed correct htmlEl.
One part of your question has already been answered.
If you really need to get HTML element (use it only as last resort) by screen coordinates, then you will need document.elementFromPoint.
Extra info and quirks here: http://www.quirksmode.org/blog/archives/2010/06/more_ie9_goodne.html
Related
Quite new with d3 but have been stuck on this for several weeks and figured I'd ask here
I've been trying to create a radial/flare tree using React-Flow but I'm having a really hard time with positioning the nodes. I need to use React-Flow because I'd like to use custom React components instead of the standard SVG nodes from d3 since I need a higher fidelity interaction with the nodes.
Essentially I'm looking for something like this attached image but using React-Flow:
Source: https://observablehq.com/#d3/radial-tree
I don't even need the radial curve lines- it's more of a nice to have. As long as I can get the nodes in the correct circular position, even straight lines are fine.
Would love any advice :)
Here's what I've got so far:
https://codesandbox.io/s/trusting-leavitt-b8uxi9-rf-expand-collapse-forked-fh71v8?file=/src/App.tsx:948-954
It's the collapsible tree example that the React-Flow devs gave on their website
The closest example of a radial tree using d3 using v4 or above is this: https://medium.com/analytics-vidhya/creating-a-radial-tree-using-d3-js-for-javascript-be943e23b74e
I'm trying to apply the logic that the author used in their example but the nodes aren't positioning correctly, probably due to my shallow understanding of how to use d3
There are a few other examples on here/codepen that creates a radial tree using d3 but they're all v3 or below and are focused around using SVGs as the nodes
I've also seen other radial trees from other React libraries like this: https://codesandbox.io/s/ov2jokvl1z
But they all use SVG nodes which won't work for me because I'd like to use React nodes within the graph
I have a graph data structure which can almost be called a tree except for the fact that some nodes point to other branches.
For example:
I am looking for a React package that could render this on screen and most of them don't do it as I would like.
I need to be able to create a custom node appearance, for example: a rectangle with an icon inside, instead of the regular circle.
A big plus would be for the package to be able to position the nodes automatically so that it would look something like the illustration above.
Any suggestions?
I am grouping nodes together and laying them out evenly around the circumference of a circle. I would then like to be able to remove a group of nodes, recalculate the positions of the nodes on the circle and animate them to their new positions using d3.js version 4 of the force simulation. I have this partially working but i can't seem to figure out why when i remove the nodes and recalculate the new co-ordinates they do not move to their new positions. I am hoping someone can help. I'm new to d3.js so it's probably something fairly fundamental but as this is the latest version of the api and the force layout has changed quite a bit there's not a lot of examples (that i can find) out there in the wild.
I have linked to a jsbin of the partially working example below
https://jsbin.com/yetifunoso/4/edit?html,js,output
I need to associate SceneKit Node objects with arbitrary objects in my program and am looking for an optimal solution.
Here is an example of what I mean:
Say I have a program that renders atoms in a molecule using SceneKit. I have classes Molecule and Atom that model my data. I then render the molecule using SceneKit.
When I click on a sphere node in the Scene View, I need to know which Atom object that sphere represents (the Molecule contains an array of Atoms)
I could create a Dictionary that maps Node to Atom object, but wonder if there is a way to add an Atom object reference to the sphere node. Should one use Key-Value bindings?
I am very new to Cocoa programming and am looking for a nudge in the right direction for an approach. I can then research the implementation specifics.
How about starting with a couple of different SCNNode subclasses? The first is for your Atom, the second for your Molecule. Each MoleculeNode has one or more AtomNodes as children. AtomNode and MoleculeNode have weak references back to the Atom or Molecule they represent.
Now you can move or rotate a MoleculeNode easily, and all of the AtomNodes will move with it. Each AtomNode's geometry will stay fixed, relative to the parent MoleculeNode.
Hit testing will return both AtomNodes and MoleculeNodes. You can filter that result if you want, by either the node's class, or by setting the node's name to "Atom" or "Molecule". The SCNHitTestBoundingBoxOnlyKey might be useful if you want to be lenient about the precision of clicks required.
Just as a small alternative you can you a Map from SCNNode to ModelObject.
I am working on an interactive WPF graph/tree tool and have nodes and links between them placed in a canvas. The nodes are usercontrols and the links are simply Line shapes, and currently the links go from the centre of a node to another node's centre.
The problem arise when I want the nodes to be slightly transparent and one sees the links behind the nodes.
I figured the most convenient solution would be to apply clipping or opacitymask to the lines, so they are not drawn behind the nodes, but I can't for the life of me figure out how?
Basically I can't figure out a bounding box geometry from the nodes to use as a clipping geometry for the lines. I am also interested in alternative solutions, of course!
It would seem to me like you're overthinking the solution. Why not just change the logic for the links so that the lines begin/end at the correct side of the node instead of starting from the center??? You should only need to do a little more math to accomplish this.
That said, to get the bounding box of a Visual you can use the VisualTreeHelper::GetContentBounnds helper method.
The VisualTreeHelper.GetContentBounds() method seems to return Empty everytime.
An alternative solution to this problem is answered at
Connecting two WPF canvas elements by a line, without using anchors?
that uses bounding boxes to find intersection points to draw the lines from/to.
We worked on something similar and our solution was to put links and nodes on different layers.
So if you want the nodes to appear above the links and the tips of the links to be hidden by the nodes, you just change the z-order of the layers so that the nodes layer is in front of the links-layer.
As layers we used VisualHosts (you find a VisualHost class here) an our node and link objects were DrawingVisuals.
Works fine and you don't need to hassle about finding the borders of your nodes etc.