Develop Reference

How to disable dragging of viewer?

I had a feature which can get current pointer color like photoshop. I've used setMouseNavEnabled to disable drag, but it also can't scroll.
Does any way can only disable the drag event? Or enable scroll when setMouseNavEnabled = false .

Solved.
tracker = new $.MouseTracker({
element: this.viewer.canvas,
pressHandler: setMouseNavEnabled(false),
releaseHandler: setMouseNavEnabled(true),
});

There's other ways to disable dragging:
// Using viewer events
viewer.addHandler('canvas-drag', (event) => {
event.preventDefaultAction = true;
});
// Similar code can be used for the following viewer events:
// 'canvas-key', 'canvas-scroll', 'canvas-click',
// 'canvas-double-click', and 'canvas-drag'
// For specific pointer devices
viewer.gestureSettingsMouse.dragToPan = false;
viewer.gestureSettingsTouch.dragToPan = true;
viewer.gestureSettingsPen.dragToPan = true;

fabricjs change cursor for every object

I created some objects with fabric js and added different cursors for them if the user hovers with his mouse over the object. i want to add a function which changes the cursor for the whole canvas and all its objects and then changes it back to its default values (so the cursor settings for the objects and the canvas).
is there a way to do this simple? or do i have to set the cursor for every object manually?
I got a small jsFiddle for this: https://jsfiddle.net/bxgox7cr/14/
If you click on the button "change Cursor", the cursor is changed to a crosshair, but when you move your mose over the lines or circles, it is changed to their settings. I want the cursor to stay as a crosshair. After pressing "default Cursor" all the settings should be set back, so the cursor should use the special settings for lines and circles.
the main functionality is in this 2 functions:
$('#button').click(function() {
canvas.defaultCursor = 'crosshair';
});
$('#button2').click(function() {
canvas.defaultCursor = 'default';
});
I might save the default values for every object and then change them back after the click of button2, but this seems to be a difficult solution, so I'm hoping there might be an easier way.

Just add to your code this event:
canvas.on('mouse:over', function(event){
if (event.target != null)
event.target.hoverCursor = canvas.defaultCursor;
}
});
On each object you will reset 'hover' cursor what you set for whole canvas.
Updated:
If you need reset to default you have to keep track of original cursors for each object. You need something like this:
$('#button').click(function() {
changeCursor('crosshair');
});
$('#button2').click(function() {
resetCursor();
});
var cursors = {canvasDefault: canvas.defaultCursor,
canvasDefault: 'default',
object:[
{objectType: 'circle',
hoverCursor: 'move'},
{objectType: 'line',
hoverCursor: 'ns-resize'}
]
};
function changeCursor(cursor){
canvas.forEachObject(function(obj){
for (var i in cursors.object){
if (cursors.object[i].objectType == obj.type){
obj.hoverCursor = cursor;
}
}
canvas.defaultCursor = cursor;
});
}
function resetCursor(){
canvas.forEachObject(function(obj){
for (var i in cursors.object){
if (cursors.object[i].objectType == obj.type){
obj.hoverCursor = cursors.object[i].hoverCursor;
}
}
canvas.defaultCursor = cursors.canvasDefault;
});
}

Draw a circle by pressing ctrl & dragging mouse in leaflet

I'm trying to develop a function with leaflet which make user be able to draw a circle by pressing ctrl & dragging mouse, as the following
let mouseDownPos = null
let mouseUpPos = null
L.Map.CircleSelector = L.Map.Drag.extend({
_onMouseDown: function(e) {
if (!e.ctrlKey)
return
let map = this._map
map.dragging.disable()
mouseDownPos = map.containerPointToLatLng(this._point)
},
_onMouseUp: function(e) {
if (!e.ctrlKey) {
this._map.dragging.enable()
return
}
let map = this._map
mouseUpPos = map.containerPointToLatLng(this._point)
let radius = map.distance(mouseDownPos, mouseUpPos)
L.circle(mouseDownPos, {radius: radius}).addTo(map)
map.dragging.enable()
}
})
L.Map.mergeOptions({circleSelector: true})
L.Map.addInitHook('addHandler', 'circleSelector', L.Map.CircleSelector)
When I press ctrl & drag mouse on the map, it still does not work.
I've tried to print text to console at the beginning in _onMouseDown(), it shows nothing.
It seems that the event doesn't trigger.
What should I need to modify? Thank you.

Finally I extend leaflet.draw to approach my goal.
Refer to the source code of L.Draw.Circle, I extend my selector from L.Draw.Circle. The mainly modified part is in _onMouseUp, as the following
L.Map.CircleSelector = L.Draw.SimpleShape.extend({
_onMouseUp: function (e) {
// TODO
// 1. Get the circle center & radius
// 2. Calculate distances between center & markers
// 3. If the distance in step 2 <= radius, it is in the circle
// 4. Anything you'd like to do......
}
})
The rest code of the event can be referred to L.Draw.Circle, e.g., addHooks, _onMouseMove......

Chart Area and Legend Area automatically updates

I have a chart and implemented seriesClick event. When User clicks it loads dataA, when user click again it loads dataB. It is fully implemented and it is functional. However my question is how to fix chart area and legend area.
Legend length differs in dataA and dataB, therefore when user click on series, chart is not stay stable, it adjusts automatically. I do not want my chart to adjust automatically.
my SeriesClick event implementation is as follows:
function clickEvent (e) {
if (!isHover) {
chart.options.series = dataSeries2;
chart.redraw();
isHover = true;
}
else if (isHover) {
var chart = $("#chart").data("kendoChart");
chart.options.series = dataSeries;
chart.redraw();
isHover = false;
}
}
Here is the jsfiddle:
http://jsfiddle.net/3yhbyy2g/72/

There is no API yet for setting plot area to have fixed width, all you can do right now is give an escape character (\n) in your legend label.
stats = stats.map(function(x) {
return { x: x[0], y: x[1], k: x[2],name:"my title\nis too\nlengty" };
});
I found this in their forum, hope that will help you out.

Flot - Detect left-click and right-click

I'm drawing a line graph using Flot. It's updated in real-time and has multiple series. I want to be able to detect left and right mouse clicks on individual series in the graph.
Currently, I can detect a left mouse click, but right-click just brings up my browser's right-click menu.
Here's what I've got so far:
function myClick(event, pos, obj) {
if (!obj) {
return;
}
alert('clicked!');
}
var placeholder = $("#placeholder");
// setup plot
var options = {
...
grid: {clickable: true, hoverable: true},
...
};
var initialData = getMyData();
var plot = $.plot(placeholder, initialData , options);
placeholder.bind("plotclick", myClick);
Is there a way to detect right-clicks on a series in the graph?

Looking at the flot source, this is not a built-in feature. It is coded to handle only the mousemove, mouseleave, and click events on the grid. If I were you I would look into modifying the flot source directly and replacing the click event with the mousedown event. Once you do that it should be easy to handle left vs right vs center clicks.
EDITS
I realize this is an old answer but a thought occurred to me. A work around for this, without modifying the source, is to use the plothover to monitor whether the mouse is over a point and then bind a generic mousedown handler to the plot div.
var currentPoint = null;
$("#placeholder").bind("plothover", function (event, pos, item) {
if (item) {
currentPoint = item;
} else {
currentPoint = null;
}
});
$('#placeholder').mousedown(function(event) {
if (currentPoint)
{
switch (event.which) {
case 1:
alert('Left mouse button pressed on ' + currentPoint.series.label);
break;
case 2:
alert('Middle mouse button pressed on ' + currentPoint.series.label);
break;
case 3:
alert('Right mouse button pressed on ' + currentPoint.series.label);
break;
default:
alert('You have a strange mouse on ' + currentPoint.series.label);
}
}
});
See fiddle here.