I've built an interactive web app where I'm using snap.svg to create a perspective grid and accompanying UI elements.
See this codepen of a stripped down version of the web app:
codepen URL
https://codepen.io/reubenlara/pen/dxoJWK?editors=0010
I'm using snap.svg for dragging the UI circle elements and d3 for zooming/panning the grid (couldn't find a stable snap.svg zoom/pan solution). Works perfectly on desktop, but on mobile (iPad), my snap.svg circle elements won't respond to touch events. They do drag around fine without the d3 zoom implementation, but as soon as d3 zoom is applied to the grid, they stop responding to touch. Any reason why?
I'm hoping to get the circle UI elements to drag around using touch events just like they do with the mouse on the desktop. Keep in mind that they do respond to touch when d3 zoom is removed from the equation. Thanks!
Related
I am using a network graph in my SAPUI5 application. In the Graph tag I set the 'enableWheelZoom'-property to true, which allows the user to zoom in/out using the mouse wheel.
Is there a way to adjust or customize the zoom-in velocity? Without further adjustments the zoom happens quite quickly, though I'm scrolling slowly. I would want the zoom to be smoother/slower.
Many thanks in advance! :)
I'm using the highcharts library, it's related plugins and using the perfect scrollbar for scrolling. The chart is extended with plugin for "zooming out" and "zooming in" (on mouse wheel event) and it is placed under the parent DIV element (on which the perfect scrollbar is implemented).
Note that this is how it should work:
when user mouse is hovering the chart and user is scrolling the mouse wheel, the chart is "zoomed out" / "zoomed in" (the events from the highchart plugin is applied);
if user is not hovering the chart with the mouse and if is scrolling the mouse wheel, then the parent DIV is scrolled down;
The mentioned scenario is already implemented in the following jsfiddle and this works on Chrome browser: https://jsfiddle.net/delux123/4kh5zbxv/68/
But the problem is that this is not working on Mozilla Firefox browser. There, the chart is not "zooming out" / "zooming in" for the cases when user mouse is above the chart;
I'm was not able to detect which one of these two libraries is causing the issue, but the mouse wheel event is somehow included in the issue. I tried many combinations here, but was not able to make it working as expected in the both browsers.
EDIT:
Here is the solution based on the #User863 answer below:
https://jsfiddle.net/delux123/4kh5zbxv/73/
The problem is delta calculated is always -1 in Firefox
Instead, you can use deltaY directly from the event
let delta = e.deltaY;
https://jsfiddle.net/aswinkumar863/085nvLad/
Without using perfectScrollbar
From version 64, firefox having scrollbar-width, scrollbar-color property. So you can style scrollbar also
https://jsfiddle.net/aswinkumar863/nf4y3qeh/
I have mxgraph application with default panning behavior (no settings from code). Chart can be moved in desktop browsers using right mouse.
On mobile browsers there is no right mouse button, so I cannot find a way to move (pan) mxgraph and only small part of chart is visible.
What do I need to set for mxgraph to allow scrolling/panning to see other parts of chart?
I find a way to pan chart using setting for left mouse button. In this case on mobile screens it works fine.
graph.setPanning(true);
graph.panningHandler.useLeftButtonForPanning = true;
I'm using D3 v4 to achieve the zoom functionality and everything works perfectly on FireFox, Chrome browsers.
Quite different behavior with Safari browser (my version is Version 10.0.1 (12602.2.14.0.7)). Wheel zoom works for g element and doesn't work for svg element. Note: that dbClick zoom works for svg element.
I've created simple fiddle example where tried to reproduce the issue.
If you try wheel zoom over red rect - it will work, outside of rect - not work, but works for other browsers.
I was looking for official examples like https://bl.ocks.org/mbostock/db6b4335bf1662b413e7968910104f0f where everything works and I could not find a problem with my example...
Here is a zones where zoom works (madness is that left and top zone in the svg has working zoom):
I got answer from mbostock:
PROBLEM:
As shown in the https://jsfiddle.net/vbabenko/5shshq97/7/ , this is a Safari bug (or if you like, an alternative interpretation of the specification). Safari does not dispatch wheel events to the SVG when there is no SVG content under the pointer; the events get sent to whatever is underneath the SVG element (the body in this case). In contrast other browsers dispatch wheel events to the SVG element anywhere inside its bounding rect.
SOLUTION:
If you want the SVG to receive the event on all browsers, you must put some content in the SVG to capture the wheel event. Here is a fixed test case: https://bl.ocks.org/mbostock/9e3fed7a5904991e7973a87628d9f84d
ORIGINAL DISCUSSION:
https://github.com/d3/d3/issues/3035
Currently what I'm trying to do is rotate an image such as a chair or a table and when user
touch the image and drag upward or downward, they will be able to see the top and bottom of
that chair or table. Can someone give me a solution or any reference which can help me to
fulfill this task? Thank you very much in advance!
If you are using jQuery Mobile (I'm assuming you are because of the tags you applied to your post), try to play with Touch events. Specifically, try taphold.
jQuery mobile >
For the touch and drag, you can use touchstart/touchmove/touchend events. You can easily find documents of touch events from Apple's developer website. Both iOS and Android support touch events.
Because touch and drag is a gesture, you might want to see if there is any library implemented this gesture. A gesture is a combination of touches with restrictions. Of course you can define a gesture with touch events and a lot of JavaScript code, but it would be easier to reuse what's been written and tested by others. See if you can find anything useful in jQuery Mobile, Sencha, or Pointer.js.
Image rotation can be done with CSS3 transform. You can easily get information about transform property from Apple's developer website or just a Google search. Use 3D transform instead of 2D when available, because in most devices 3D transform is hardware accelerated while 2D is not.