Develop Reference

Mousedown won't change property and run function on range sliders

I've got two sets of range sliders on a video file that need some fine-tuning.
Clicking and dragging the slider will adjust the settings. But clicking without dragging will not change the settings, it will only move the slider.
I need the slider to adjust the settings when any point is clicked within the range. In the words, if the range is currently set to the far right and I click the far left, I'd like it to change settings.
I tested it and noticed that the line with the comment doesn't seem to activate the function handleRangeUpdate.
const ranges = player.querySelectorAll(".player__slider");
let isDragging = false;
function handleRangeUpdate() {
if (!isDragging) return;
console.log(`${this.name}: ${this.value}`);
video[this.name] = this.value;
}
ranges.forEach(range => range.addEventListener("mousemove", handleRangeUpdate));
ranges.forEach(range =>
range.addEventListener("mousedown", () => {
isDragging = true;
handleRangeUpdate; // This doesn't seem to function
})
);
ranges.forEach(range =>
range.addEventListener("mouseup", () => (isDragging = false))
);
You can find all my code on: My Github Repo

mxGraph - disable vertex selection when dragging

I'm using JS mxGraph and would like to disable the auto selection of a vertex when dragging it. Vertex should only be selected if the user clicks on it without moving it.
Thanks

Looks like the following works
mxGraphHandler.prototype.isDelayedSelection = function(cell, me) {
return true;
};
mxGraphHandler.prototype.getCells = function(initialCell) {
if (this.graph.getSelectionCells().includes(initialCell)) {
return this.graph.getMovableCells(this.graph.getSelectionCells());
}
return this.graph.getMovableCells([initialCell]);
};

How to Avoid continuous triggering of HTML5 DeviceOrientationEvent

I am trying to tilt an image based on HTML5 DeviceOrientation event. However, I am seeing that the event is getting continuously fired even when the device is stable i.e non rotating/non moving. In the following code snippet, the console log is printed continuously. What is the possible reason, how can I stop it.
I tried both capturing and bubbling,
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', function(eventData) {
var tiltLR = eventData.gamma;
console.log("tiltLR..........",tiltLR);
}, false);
}

I havent needed to use this type of event listener before so I am not familiar with the output.
However, I believe you would need to compare the old tilt with the new tilt. If the new tilt is substantially greater or less then... execute code.
if (window.DeviceOrientationEvent) {
var originalTilt = undefined,
tolerance = 5;
window.addEventListener('deviceorientation', function(eventData) {
if (eventData.gamma > originalTilt + tolerance ||
eventData.gamma < originalTilt - tolerance){
var tiltLR = eventData.gamma;
console.log("tiltLR..........",tiltLR);
originalTilt = tiltLR;
}
}, false);
}

EaselJS: add child with mousedown triggered

The basic functionality I'm going for is...
Tap (mousedown) on the stage to create and add a child at that location.
*EDIT: I'm also trying to solve for multitouch, so multiple balls can be created at the same time.
As you hold down you can drag (pressmove) that child around and it grows (using regX/regY/scaleX/scaleY) until you release (pressup), at which point it falls (using a tick cycle).
I have everything sort of working, but I've hit a snag wherein I can't add a child and have it immediately register mousedown without releasing and pressing again.
Is there a way to manually trigger mousedown after adding, or some other workaround that makes more sense? dispatchEvent doesn't seem to be working.
Here's my stage event listener and touch bits:
stage.enableMouseOver(10);
createjs.Touch.enable(stage, false, false);
stage.preventSelection = false;
stage.addEventListener("stagemousedown", spawnsnowball);
And here are my functions. The spawnsnowball one includes displayObject event listeners verging on desperate, but the only way I've been able to get the pressmove and pressup working is to click on the same snowball again. releasesnowball right now just releases all instances of them (using a 'stagemouseup' listener), but if I can get it triggering off of pressup then I'll rewrite it to target just the event target.
function spawnsnowball(evt){
var ball = new createjs.Bitmap(loader.getResult("snowball"));
ball.crossOrigin="Anonymous";
ball.name="ball";
ball.scaleX = 0.5;
ball.scaleY = ball.scaleX;
ball.regX = ball.image.width/2;
ball.regY = ball.image.height/2;
ball.x = evt.stageX;
ball.y = evt.stageY;
ball.type = balltype;
ball.holding = 1;
ball.velX = 0;
ball.velY = 0;
ball.addEventListener("pressup",releasesnowball);
ball.addEventListener("pressmove",dragsnowball);
ball.onPress = function(mouseEvent) {};
stage.addChild(ball);
ball.dispatchEvent("mousedown");
ball.dispatchEvent("pressdown");
}
function dragsnowball(evt){
evt.target.x = evt.stageX;
evt.target.y = evt.stageY;
}
function releasesnowball(evt){
for(var i=0;i<stage.getNumChildren();i++){
var shape = stage.getChildAt(i);
if(shape.type == balltype){
if(shape.holding){
shape.holding = 0;
var dX = shape.x - shape.oldX;
var dY = shape.y - shape.oldY;
if(Math.abs(dY)>8)
dY = 8*dY/Math.abs(dY);
if(Math.abs(dX)>3)
dX = 3*dX/Math.abs(dX);
}
}
}
}

The pressmove event is special because it basically stores off the target of the last mousedown event, and then remembers it for pressmove and pressup events.
This means you can't really fake the event by forcing mouse events. Dispatching a mouse event from the target will not do the trick.
Instead, consider just handling the initial drag manually. You already know what you want to be the target of the pressmove, so you can listen for the stagemousemove event, and handle it yourself:
// Listen to the stagemousemove and manually call the event.
var initialDrag = stage.on("stagemousemove", function(event) {
event.target = ball; // Re-target the event so your other method works fine.
dragsnowball(event);
});
// When done, remove the move listener.
// The off() method supports a "once" parameter so you don't have to unsubscribe that listener.
stage.on("stagemouseup", function(event) {
stage.off("stagemousemove", initialDrag);
}, null, true); // Fires one time
Here is a quick sample using your code as the base: http://jsfiddle.net/3qhmur82/
I also added some comments in the demo which might be useful.
Hope that helps!

how to trigger a drag event on click of a button jquery ui

Im attempted to integrate an image cropping tool into my website.
Im using this http://www.trepmag.ch/z/jrac/example/
While it works perfectly on the example, unfortunately Im my own site it is not so smooth.
When I drag the box across the screen, it will not always update the co-ordinates unless I drag it a tiny bit more at the end.
My plan was to simply take the co-ordinates and send them to the server, but this is holding me up as its taking incorrect co-ordinates. Even if I drag the cropping area by another pixel it at the end it updates them correctly.
My thinking was to simply trigger an automatic drag of an insignificant amount (like .1px) to get the correct co-ordinates. However I have no idea how to trigger a drag event.
I was thinking of using mousedown but I still do not know how to tell it to drag.
Here is the plugin code itself
http://www.trepmag.ch/z/jrac/jrac/jquery.jrac.js
EDIT: Here is the code of the event handling...
$('#output img').jrac({
'crop_width': 250,
'crop_height': 170,
'crop_x': 100,
'crop_y': 100,
'image_width': 400,
'viewport_onload': function() {
alert('viewport loaded');
var $viewport = this;
var inputs = $('#coordinates').find('.coords input:text');
var events = ['jrac_crop_x','jrac_crop_y','jrac_crop_width','jrac_crop_height','jrac_image_width','jrac_image_height'];
for (var i = 0; i < events.length; i++) {
var event_name = events[i];
// Register an event with an element.
$viewport.observator.register(event_name, inputs.eq(i));
// Attach a handler to that event for the element.
inputs.eq(i).bind(event_name, function(event, $viewport, value) {
$(this).val(value);
})
// Attach a handler for the built-in jQuery change event, handler
// which read user input and apply it to relevent viewport object.
.change(event_name, function(event) {
var event_name = event.data;
$viewport.$image.scale_proportion_locked = $('#coordinates').find('.coords input:checkbox').is(':checked');
$viewport.observator.set_property(event_name,$(this).val());
});
}
$viewport.$container.append('<div>Image natual size: '
+$viewport.$image.originalWidth+' x '
+$viewport.$image.originalHeight+'</div>')
}
})
// React on all viewport events.
.bind('jrac_events', function(event, $viewport) {
var inputs = $('#coordinates').find('.coords input');
inputs.css('background-color',($viewport.observator.crop_consistent())?'chartreuse':'salmon');
});