I trying to achieve drag and drop functionality using RxJS. It works, almost, but the drag event gets triggered on mousedown, and I don't understand why.
Here's simplified version of the code, I'm listening on document just to make the example easier.
const down = Rx.Observable.fromEvent(document, 'mousedown');
const up = Rx.Observable.fromEvent(document, 'mouseup');
const move = Rx.Observable.fromEvent(document, 'mousemove');
const drag = down.switchMap(() => move.takeUntil(up).take(1));
const dragging = drag.switchMap(() => move.takeUntil(up));
const drop = drag.switchMap(() => up.take(1));
down, up, dragging and drop works as expected, but drag gets triggered directly on mousedown, why?
JSBin:
http://jsbin.com/rafurudofe/1/edit?js,console,output
Edit:
Seems like it works as expected in IE, but not in Chrome.
Related
I want to know that fitToView() finished completely.
Some program procedures do not work after fitToView() without setTimeout().
For example, the following code not work.
const dbid = [1141]
this.viewer.select(dbid)
this.viewer.fitToView(dbid, viewer.model)
zoom() //This will not work
//code from:
function zoom (){
var nav = viewer.navigation
var pos = nav.getPosition()
var target = nav.getTarget()
var viewdir = new THREE.Vector3()
viewdir.subVectors (pos, target).normalize()
// zooms out by 100 along the view direction
viewdir.multiplyScalar (1000)
pos.add(viewdir)
nav.setPosition(pos)
}
The following code work well.
this.viewer.fitToView(dbid, viewer.model)
setTimeout(function(){
zoom() //This will work fine
}, 2000)
However, I don't want to use the setTimeout as much as possible.
Is there a way to know that fitToView () is finished completely?
If you use version 3.2.1 of the viewer a new event Autodesk.Viewing.CAMERA_TRANSITION_COMPLETED, it will be fired while following transitions are finished:
Go Home transition
Focus / Fit to View transition
Restore State transition
Named Views transition
Any other camera transitions
// Hook the event
viewer.addEventListener(Autodesk.Viewing.CAMERA_TRANSITION_COMPLETED, function(){
console.log('camera is no longer moving');
});
// Trigger an action that will move the camera and fire the event
viewer.fitToView();
You can see more about the Viewer Version changes here.
https://developer.autodesk.com/en/docs/viewer/v2/overview/changelog/3.2.1/
I am using html5 drag and drop.
When I drag an image or link from any given webpage, the browser-window is recognizing the dragover event.
For example dragging an image over a browser tab, makes the browser switching the window. Same works for example with dragging links to bookmarks.
Now when I drag my custom draggable element, there is no reaction from the browser. Is there a way to change this behavior?
I don't understand what you want to achieve, but it seems that you want to make something happens when you move your custom element outside the document or the window.
You should try binding a handler with a dragleave or something like that. Here is an example from another question:
var dropTarget = $('.dropTarget'),
html = $('html'),
showDrag = false,
timeout = -1;
html.bind('dragenter', function () {
dropTarget.addClass('dragging');
showDrag = true;
});
html.bind('dragover', function(){
showDrag = true;
});
html.bind('dragleave', function (e) {
showDrag = false;
clearTimeout( timeout );
timeout = setTimeout( function(){
if( !showDrag ){ dropTarget.removeClass('dragging'); }
}, 200 );
});
I think that could work for you, but for further help you should extend your issue's description.
Also I ll leave some HTML5 drag and drop docs here
I'm holding the mouse down on my html element which changes the cursor. Now if user hits a key while mouse button is still pressed, I assign another cursor to the element. This works perfectly fine on Mozilla which immediately changes the cursor but NOT in chrome. In chrome, I need to move the cursor for at least one pixel to make the new cursor visible. NOTE that this happens only when the mouse button is pressed. If not, cursor switches immediately as desired. Any idea how to fix that properly?
UPDATE: I've just found that this seems to be a bug in WebKit:
https://bugs.webkit.org/show_bug.cgi?id=53341
But anyway, any idea to make it still working as there's no fix out yet?
Here's a sample of the miss-behavior: JSFiddle Sample with this code:
html:
<div id="test1" style="background:blue;width:200px;height:200px;color:white">Case #1 - cursor not changing for mousedown before moving it (Press mouse - nothing happens. Then hold mouse and move)</div>
<div id="test2" style="background:red;width:200px;height:200px;color:white">Case #2 - cursor not changing for mousedown before moving it when pressing a key (Press mouse, then click any key - Nothing happens. Then hold mouse and move)</div>
js:
var el1 = document.getElementById("test1");
var el2 = document.getElementById("test2");
el1.addEventListener("mousedown", function() {
el1.style.cursor = "move";
});
document.addEventListener("keydown", function() {
el2.style.cursor = "move";
});
This is working for me in chrome without having to move a mouse:
var el1 = document.getElementById("test1");
var el2 = document.getElementById("test2");
el1.addEventListener("mousedown", function() {
el1.className += ' cursormove';
});
document.addEventListener("keydown", function() {
el1.style.cursor = "pointer";
});
.cursormove {cursor:move;}
http://jsfiddle.net/ntdap5hf/4/
Or do i miss something?
The following code should write the inverse of true/false as found in the textbox back into the textbox when the button is clicked - but it doesn't work correctly. It will work correctly one way, but not the other (the one that works is whichever ClickHandler was defined last). I've tried using validateNotMatches too but no joy.
If I change the code so that the label's text is updated instead of the textbox's then that works fine.
I am aware of suggested workarounds such as using two buttons, but I just want to know if I'm doing something wrong or if this looks like a bug in GAS. Thanks.
function doGet(e)
{
var app = UiApp.createApplication();
var tb = app.createTextBox().setText('true');
var button = app.createButton('button');
var label = app.createLabel().setText('-');
button.addClickHandler(app.createClientHandler()
.validateMatches(tb, 'true')
//.forTargets(label).setText('false')
.forTargets(tb).setText('false')
);
button.addClickHandler(app.createClientHandler()
.validateMatches(tb, 'false')
//.forTargets(label).setText('true')
.forTargets(tb).setText('true')
);
return app.add(app.createHorizontalPanel().add(tb).add(button).add(label));
}
It's not a bug... both events fire. The validation happens on the current state of the widget, not on the state when the event was fired, so after you flip it to "false" the second handler validates and flips it back to "true".
I am trying to put a button inside of an Openlayers popup. While the button appears to display correctly with the following code, the function 'handlerFunc' does not execute when the button is clicked. The segment of code I have posted is all within another function (so handlerFunc is actually a nested function). I'm using JQuery for the button itself. Any ideas on what might be going wrong? Thanks!
var feature = new OpenLayers.Feature(presences, ll);
feature.popupClass = popupClass;
feature.data.popupContentHTML = "<button id='popupButton'>Click me</button>";
feature.data.overflow = (overflow) ? "auto" : "hidden";
feature.data.icon = markerIcon;
$('#popupButton').button();
$('#popupButton').click(handlerFunc);
function handlerFunc() {
// do something
}
Most likely reason is that your button doesn't exist when you bind to a click event. $('#popupButton') returns null. Instead of using $('#popupButton').click(handlerFunc); try $('#popupButton').live('click', handlerFunc);. That means that we bind to an event not only when DOM is built, but when object appears.