I'm using OpenLayers to display a map and to provide some drawing features. I also added two SelectFeatures to the vector layer I want to draw on. One for highlighting a drawn feature by hover it and one for selecting a feature by clicking on it.
I used this example to realize this.
The problem is, that this solution doesn't really work (even in the given example).
If I draw a new feature I can highlight it by putting the cursor on it but can't select it with a click. (Same in the example, the given features work fine, but after drawing a new one the select-by-click function doesn't react anymore)
Is there any alternative solution to realize this except the official example?
This example was modified 4 months ago, editing toolbar was excluded due to described confusion.
I was able to get something like this working. You need to activate the controls in a specific order:
highlightControl.activate();
selectControl.activate();
dragControl.activate();
Hover events aren't handled by the Drag and Pan Controller, so they try the select controller, which doesn't use them either, passing them up to the highlight controller. Similarly, click events aren't handled by the drag controller, but are handled by the select controller. Finally, drag events are dealt with by the drag controller. The last to be activated is the first to be "consulted".
Related
The desired behaviour is that on drop on connector - we want to have this icon connected with Endpoints of others two Icons.
I don't think that there is a build solution for such behaviour in jsPlumb, but maybe I'm wrong. I see oportunity to make it programically.
At first I thought about mouseup event from documentation.
It doesn't work since actually I mouseup on this orange icon HTML element. The conector is underneath. If there is no way to have this event - also the full detail of area of connector would be helpful.
I'm working on updating data dynamically with a click while maintaining a mouseover scrubber to highlight (i.e. append) the data to text elements. I am able to get the initial data and scrubber to work based on this helpful tutorial: http://www.d3noob.org/2014/07/my-favourite-tooltip-method-for-line.html.
My next step was to update my data (i.e. paths and axis) based on a button click. I used this tutorial: http://www.d3noob.org/2013/02/update-d3js-data-dynamically-button.html. However, I am only able to update the paths and axis but the mouseover event is till capturing the old data.
Maybe I still haven't fully grasped the idea of enter, update, exit? Anyone know how to update the mouseover scrubber when the path elements update via the mouse click?
On D3js's website there are plenty of tutorials that explain very clearly how enter, update,and exit work. Personally I prefer this one.
Hope it helps.
I'm making a line chart in oCanvas, and I need to show the data of a point of the line, when the user hovers that point with his mouse! Is there like a built-in function for it do it itself, or do I have to make it myself? (I didn't find any useful info on the docs section of the website, and that's why I came here, just in case someone has done it before me and knows how to do it!). I have the data I need to display when the user hovers the point, I just can't get find a hover function. After that I need to show something like a tooltip, that's gonna contain the data. Thank you very much for your help, it is really useful to me! Here's the website: http://ocanvas.org/
oCanvas is a general purpose library, so there is no built-in feature for that. To make hover work, you need to listen to events (mouseenter and mouseleave): http://ocanvas.org/docs/Events/Mouse
When you detect mouseenter you will need to show the tooltip object in the correct position. When you later detect mouseleave you will need to hide the tooltip.
I want to add a rectangle drag to my code here is the fiddle http://jsfiddle.net/cyTUX/39/ ,what this code does is onclick it changes states, it has 3 states, so if we select a state and drag it around the table cells, the cells involved in the drag gets that state.
so, what i want is, instead of selecting and dragging in that way, what i want to do is select a state and drag like a rectangle so all the table cells in the rectangle gets that state.
Any idea or example on how to do this?
So I was writing an electron app and had the exact same problem.
Since I did not want to use jQuery I wrote something myself.
It took quite long to write it, so I made a plugin out of it that you can easily use yourself. It’s super small and does just that. I called it DragSelect and you can get it from Github.
The cool thing about this is that you have 0 dependencies and thus can use it with any framework you like.
The selection algorithm works like a charm and even gives you an independent multi-selection with modifier keys for free.
So taken from the github readme:
1. Installation
easy
Just download the file (minified) and add it to your document:
<script src="https://thibaultjanbeyer.github.io/DragSelect/ds.min.js"></script>
npm
npm install --save-dev npm-dragselect
bower
bower install --save-dev dragselect
That's it, you're ready to rock!
Of course, you can also just include the function within your code to save a request.
Usage
Now in your JavaScript you can simply pass elements to the function like so:
simple
Choose which elements can be selected:
var ds = new DragSelect({
selectables: document.getElementsByClassName('selectable-nodes')
});
There is plenty more stuff you can do so make sure to read the whole documentation on github
Enjoy
create a new div
<div style="position:absolute;border:1px solid green;display:none" id="rectangle"></div>
and then something like this
i hope you can work your way out and finish it its just and brute example how to approach this
var element = $("#rectangle");
// on mousedown
$(window).mousedown(function(e1){
// first move element on mouse location
element.show().css({top:e1.pageY, left:e1.pageX});
// resize that div so it will be resizing while moouse is still pressed
var resize = function(e2) {
// you should check for direction in here and moves with top or left
element.width(e2.pageX - e1.pageX);
element.height(e2.pageY - e1.pageY);
};
$(window).mousemove(resize);
// and finally unbind those functions when mouse click is released
var unbind = function() {
$(window).unbind(resize);
$(window).unbind(unbind);
};
$(window).mouseup(unbind);
});
like this you can drag to create rectangle but only from left to right direction, you can see example in here
http://jsfiddle.net/dXduv/1
you can take actual positions from events to calculate which divs are inside and which are outside the area
jQuery UI has the ability to handle selection, drag and drop, resizing, and selection. If you're already using jQuery, then adding jQuery UI is very easy. You'll also find it includes many pre-made UI elements which makes form creation quick and easy. Using a separate library like jQuery UI (also check out Kendo UI) is often a lot easier to do than trying to code complex Javascript features like this yourself. You'll save time and likely have a more functional product.
This example in particular from jQuery UI may be of use to you.
I have requirements to make a image map of seats in a amphitheatre selectable, much like a check box, with 3 states: selected, unselected, and disabled. I wish to know if there is a way to do this so that selected images would become serialised for database submission?
I have it working with just checkboxes, but I can not use them for the client (they like pretty things :p)
Check out my jquery plugin ImageMapster. It does exactly this: allows you to identify areas of an image map that should be highlighted and can maintain state. There are a lot of options for rendering the highlights, including using a second image as the source for the highlighted areas, as well as for identifying areas that should be ignored or fixed in a certain state. In the USA map example on that link:
Washington State is permanently selected & does not respond to
mouseover events
Oregon is permanently deselected & does not respond
to mouseover events (this is just as if it was not part of the map -
but options can be changed on the fly so there might be reasons to
include areas in the map but turn them off).
Alaska is unselectable
(but does respond to mouseover events)
You can also assign options that determine how each area highlight should appear on a per-area basis.
The full documentation is on github.
You only need a single alternate image if you use the "alternate image" option for the highlights, the plug-in draws the content from the same area of a 2nd image to create each highlight.
It works with any HTML image map as the data source.
Why don't you just use the jquery UI buttons?
http://jqueryui.com/demos/button/#icons
That probably should help and you don't have to recode anything.