I am using a html label for my nodes in a force directed graph.
Label:{
type: 'HTML'
},
onCreateLabel: function (domElement, node) {
domElement.innerHTML = node.name;
var style = domElement.style;
style.border = "1px solid red"
style.fontSize = "1.5em";
style.color = "#ddd";
},
onPlaceLabel: function (domElement, node) {
var style = domElement.style;
var left = parseInt(style.left);
var top = parseInt(style.top);
var w = domElement.offsetWidth;
style.left = (left - w / 2) + 'px';
style.top = (top + 30) + 'px';
style.display = '';
}
This looks fine. However, when I try to move the nodes around the canvas...I am not able to. If place my mouse over a node, left click, and then drag, the whole graph moves -- not just the selected node. The html is placed below the node, but I am still not able to drag any specific node around the canvas any more. Any idea how I can fix this?
As a temporary workaround, I ended up creating a transparent border for the label that extended up over the node (border-top: 150px solid transparent); ...the border makes the node clickable.
Related
How do i make so that positions adapts to the new window position when i resize my window in SDL2 and with SDL_RenderSetLogicalSize?
I want to be able to hover a text and make it change color but whenever i resize the window its still in the same window cords. Is there a way to adapt the mouse?
void MainMenu::CheckHover()
{
for (std::list<MenuItem>::iterator it = menuItems.begin(); it != menuItems.end(); it++)
{
Text* text = (*it).text;
float Left = text->GetX();
float Right = text->GetX() + text->GetWidth();
float Top = text->GetY();
float Bottom = text->GetY() + text->GetHeight();
if (mouseX < Left ||
mouseX > Right ||
mouseY < Top ||
mouseY > Bottom)
{
//hover = false
text->SetTextColor(255, 255, 255);
}
else
{
//hover = true
text->SetTextColor(100, 100, 100);
}
}
}
I had a similar problem some time ago, and it was due to multiple updates of my mouse position in one SDL eventloop. I wanted to move a SDL_Texture around by dragging with the mouse but it failed after resizing, because somehow the mouse coordinates were messed up.
What I did was rearrange my code to have only one event handling the mouse position update. Also I'm not using any calls to SDL_SetWindowSize(). When the user resizes the window the renderer is resized appropriately due to SDL_RenderSetLogicalSize().
The relevant code parts look like this - some stuff is adapted to your case. I would also suggest to use a SDL_Rect to detect if the mouse is inside your text area, because the SDL_Rects will be resized internally if the the window/renderer changes size.
//Declarations
//...
SDL_Point mousePosRunning;
// Picture in picture texture I wanted to move
SDL_Rect pipRect;
// Init resizable sdl window
window = SDL_CreateWindow(
"Window",
SDL_WINDOWPOS_CENTERED_DISPLAY(displayIndex),
SDL_WINDOWPOS_CENTERED_DISPLAY(displayIndex),
defaultW, defaultH,
SDL_WINDOW_SHOWN | SDL_WINDOW_RESIZABLE );
renderer = SDL_CreateRenderer(window, -1, SDL_RENDERER_ACCELERATED);
SDL_SetHint(SDL_HINT_RENDER_SCALE_QUALITY, "linear"); // This one is optional
SDL_RenderSetLogicalSize(renderer, defaultW, defaultH);
// SDL main loop
while(SDL_PollEvent(&event) && running)
{
switch (event.type)
{
// Some event handling here
// ...
// Handle mouse motion event
case SDL_MOUSEMOTION:
// Update mouse pos
mousePosRunning.x = event.button.x;
mousePosRunning.y = event.button.y;
// Check if mouse is inside the pip region
if (SDL_EnclosePoints(&mousePosRunning, 1, &pipRect, NULL))
{
// Mouse is inside the pipRect
// do some stuff... i.e. change color
}
else
{
// Mouse left rectangle
}
break;
}
}
I'm creating a seemingly simple dojo 1.8 web page which contains an app layout div containing a tab container and an alarm panel below the tab container. They are separated by a splitter so the user can select how much of the alarms or the tabcontainer they want to see.
Here's the example on jsfiddle:
http://jsfiddle.net/bfW7u/
For the purpose of the demo, there's a timer which grows the table in the alarm panel by an entry every 2 seconds.
The problem(s):
If one doesn't do anything and just lets the table grow, no scroll bar appears in the alarm panel.
If one moves the splitter without having resized the browser window first, the splitter handle ends up in a weird location.
Resizing the browser window makes it behave like I would expect it to begin with.
Questions:
Am I doing something wrong in the way I'm setting things up and that's causing this problem?
How can I catch the splitter has been moved event (name?)
How do I resize the splitter pane to an arbitrary height? I've tried using domStyle.set("alarmPanel", "height", 300) and this indeed sets the height property... but the pane does not resize!
Any help greatly appreciated!
I forked your jsFiddle and made some modifications to it: http://jsfiddle.net/phusick/f7qL6/
Get rid of overflow: hidden in html, body and explicitly set height of alarmPanel:
.claro .demoLayout .edgePanel {
height: 150px;
}
This tricky one. You have two options: to listen to splitter's drag and drop or to listen to ContentPane.resize method invocation. Both via dojo/aspect:
// Drag and Drop
var splitter = registry.byId("appLayout").getSplitter("bottom");
var moveHandle = null;
aspect.after(splitter, "_startDrag", function() {
moveHandle = aspect.after(splitter.domNode, "onmousemove", function() {
var coords = {
x: !splitter.horizontal ? splitter.domNode.style.left : 0,
y: splitter.horizontal ? splitter.domNode.style.top : 0
}
dom.byId("dndOutput").textContent = JSON.stringify(coords);
})
});
aspect.after(splitter, "_stopDrag", function() {
moveHandle && moveHandle.remove();
});
// ContentPane.resize()
aspect.after(registry.byId("alarmPanel"), "resize", function(duno, size) {
dom.byId("resizeOutput").textContent = JSON.stringify(size);
});
Call layout() method after changing the size:
registry.byId("alarmPanel").domNode.style.height = "200px";
registry.byId("appLayout").layout();
I use Dojo Toolkit 1.7.2 from http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js
I need to show scrollable (with help touch) content inside dialog. Also, if possible, I will need to have transition between views inside dialog like at mobile too.
What I do (simplified version of code):
var dialog = new Dialog();
var view = new ScrollableView({
selected: true
});
//add some content inside view. Content heigh is greater than height of dialog.
If I do this, the dialog tries to fit the whole height of the content.
Next attempt:
var dialog = new Dialog({
style: {
width: 600,
height: 400
}
});
or
dialog.resize({w: 600, h: 400});
Now dialog has fixed height, but inner ScrollableView instance won't scroll to bottom of its content.
When I dig into the source, I find that ScrollableView inherits from dojox/mobile/_ScrollableMixin which inherits from dojox/mobile/scrollable.
The resize() function of dojox/mobile/scrollable uses window height in order to calculate scrolling functionality.
Is there some way to have what I need without implementating my own version of ScrollableView?
Solution:
var dialogRect = domGeometry.getMarginBox(dialog.domNode);
var headerRect = domGeometry.getMarginBox(dialog.titleBar);
var containerNodePaddingTop = domStyle.get(dialog.containerNode, "paddingTop");
var containerNodePaddingBottom = domStyle.get(dialog.containerNode, "paddingBottom");
var viewHeight = dialogRect.h - headerRect.h - containerNodePaddingTop - containerNodePaddingBottom;
var view = new ScrollableView({
selected: true,
height: viewHeight.toString() + "px"
});
// or
// view.set("height", viewHeight.toString() + "px");
Fixed it this way:
var Name = 'yourdialogid';
dojo.query("#"+Name+" .dijitDialogPaneContent").forEach(function(node, index, arr){
dojo.style(node,"overflow","auto");
dojo.style(node,"height",(dojo.position(dijit.byId(Name).domNode).h-80)+"px");
});
Can anyone help me with a link where I find Dojo sliding panel ? I have been searching for it but still didn't got it. I have sliding panel for jQuery, I got it from this link : http://web-kreation.com/all/implement-a-nice-clean-jquery-sliding-panel-in-wordpress-27/
You could make use of the dojo.fx.wipeIn functionality.
http://dojotoolkit.org/reference-guide/1.7/dojo/fx/wipeIn.html
So if you create two divs, one above the other, have the top one with display: none, and the other as the bit that you click to slide the panel down. Then use dojo.connect to link the clicking of the bottom panel to a wipe in of your top panel.
e.g.
// Have your main body content
var mainBody;
// Create top panel
var myPanel = document.createElement("div");
// Set visibility to none
dojo.style(myPanel, "display", "none");
// Create tab to expand your panel (or slide it down)
var expand = document.createElement("div");
expand.innerHTML = "click here to slide down";
mainBody.appendChild(myPanel);
mainBody.appendChild(expand);
var self = this;
dojo.connect(expand, "onclick", this, slidePanel);
Then you'd have your slidePanel function do something like:
// Get reference to your panel
var myPanel;
var wipeArgs = {
node: myPanel
};
// Then just wipe the panel in or out respectively
if (myPanel.style.display == "none") {
dojo.fx.wipeIn(wipeArgs).play();
} else {
dojo.fx.wipeOut(wipeArgs).play();
}
My problem is whenever I left click a dynatree node then right click another dynatree node to display my context menu the node which was left clicked remains highlighted in blue so I end up with two nodes in blue. If I then right click successive nodes the highlighting works correctly but the left clicked node remains highlighted.
The left click processing clears the previous node on mouseup. I initiate context menu processing via
document.oncontextmenu=contextMenu
which is also called on mouse up.
I have tried to capture the right button mouseup event and make the context menu node active thinking that would change the state of the left clickked node but not so.
$("#tree").mouseup(function(e){
if(e.button == 2){
e.target.setActive();// right mouse up
}
});
How should I get the last left clicked node to unhighlight when another node is right clicked ? It does not look right to have two nodes highlighted at once. I have noticed the dynatree context menu demo does not unhighlight the previously left clicked node when another node is right clicked so is this by design ?? Can you get around it ?
Thanks,
Al
OK this works
In my myfile.js after I create the dynatree I added:
var dtnode; //dynatree node Global <--ADDED
var elem; //DOM node Global <--ADDED
Function BuildTree()
//ADDED following code after the dynatree was loaded
$("#tree").mouseup(function(e){
if(e.button == 2){ //RIGHT MOUSE UP
if(!(elem == null)){
var elem2 = e.currentTarget.document.activeElement;
dtnode = tree.getDtNodeFromElement2(elem);
dtnode.deactivate();
elem = null;
}
}else{//LEFT MOUSE UP
if(!(elem == null)){
elem = null;
}
elem = e.currentTarget.document.activeElement;
}
});
//In jquery.dynatree.js
//$Version: 1.1.1$
//$Revision: 481, 2011-03-02 07:25:35$
//The following changes were made:
getSelectedNodes: function() {
return this.tree.getSelectedNodes();
},
// AFTER THE ABOVE FUNCTION THE FOLLOWING FUNCTION WAS ADDED
getDtNodeFromElement2: function() {
return this.tree.getDtNodeFromElement2();
},
//********************************************************
getSelectedNodes: function(stopOnParents) {
var nodeList = [];
this.tnRoot.visit(function(node){
if( node.bSelected ) {
nodeList.push(node);
if( stopOnParents === true ){
return "skip"; // stop processing this branch
}
}
});
return nodeList;
},
// AFTER THE ABOVE FUNCTION THE FOLLOWING FUNCTION WAS ADDED
getDtNodeFromElement2: function(elem) {
var sourceNode = getDtNodeFromElement(elem);
return sourceNode;
},
Summary:
By keeping track of the last element to be left clicked and exposing the dynatree getDtNodeFromElement method through getDtNodeFromElement2 it is possible to call the deactivate method on the last left clicked node whenever the first right click of a node occurs. This eliminates simultaneous highlighting of tree nodes.
I need to add a short method I added to jquery.dynatree.js to make it work.
//--- Class members ------------------------------------------------------------
DynaTree.prototype = {
// Constructor
// member functions
getDtNodeFromElement2: function(elem) {
var sourceNode = getDtNodeFromElement(elem);
return sourceNode;
},
I know this is old, but I just ran into the same problem. When manually trying to manage 'dynatree-active' classes on nodes to force highlighting, I was having issues with multiple nodes being selected. By using a left click along with the right click, dynatree managed all of the selecting and deselecting active nodes.
$("#tree").mouseup(function(e){
if(e.button == 2) e.target.click();
});
I struggled with this one for a bit, I hope it can save someone some pain.
One more change I found while clicking around the display
Instead of
}else{//LEFT MOUSE UP
if(!(elem == null)){
elem = null;
}
elem = e.currentTarget.document.activeElement;
}
use
}else{//LEFT MOUSE UP
if(!(elem == null)){
elem = null;
}
elem = e.currentTarget.document.activeElement;
if(elem.tagName != 'A'){
elem = e.target;
}
}
This corrects a issue where the old highlighting problem reappears of a non A element is clicked.
Al