How to disable only zoom interactions in arction lightning chart - javascript

I would like to disable only the zoom interaction on the LightningChartJs but would still like to tap into the drag and other events.
But when I disable it(setMouseInteractionRectangleZoom) other interactions like drag dont run too.
Thanks in advance.

There is no issue with the library and was a flaw in my implementation
I was dynamically enabling and disabling zoom and other functionalities with state variables and the create chart function was inside useCallback hook and thus the chart had become unfunctional as the useCallback on change of state variables rerenders the function.
Apollogies to the team of LightningChartJs.

Related

React Implementation of Pannable and Zoomable element with Draggable Component inside it

I am trying to build a react application that can create a card component and connect them, and they also can pan and zoom the screen also drag those cards. Like the building window in Figma or Adobe XD. Can anyone suggest to me any popular and effective solution or packages for it. I have been doing some research for a few days now and I could not get a proper solution for it.
You can use drag&drop functionality, basically you need to handle callbacks when drag&drop events happen (onDragStart, onDragEnd, onDragEnter ...), you get data from the event parameter. When something is dropped, you update the state accordingly (add/remove item from list), and render them with map function. Some sample: https://codesandbox.io/s/reactdrag-and-drop-iq89y?file=/src/components/TaskList.jsx

How to make a button that allows a WebGL model to go back to its initial orientation?

I am building a plugin for Grafana. In this plugin, I load a model with a .fbx extension, using threejs, orbitcontrols and FBXLoader. The plugin gets data from Grafana and uses this to update the Roll, Pitch and Yaw of the model.
However, because I have added controls, it is possible to zoom in/zoom out or to look at the model from a different angle.
Now I want to create a button that gets the model back to its initial orientation when it is clicked on. I think I have to make a button that calls a function backToInitial() or something, and then this function has to change the position and rotation of the camera (so not from the model itself?) to its initial state. I have tried multiple things, but nothing has worked yet. I am having the most trouble with putting the button in the right place and adding an event listener that reacts when the button is clicked (because the html and js are in separate files).
Does anyone know if this idea is logical and how to do this?
Thanks a lot in advance!

D3 data binding with slider and play/pause

I am looking to implement a map with a 'play/pause' feature that will overlay items as the time scale progresses. However, I also wanted to give users the ability to set the time themselves. Very similar to
Mike's work here
Any ideas on the best way to implement this? I would like to avoid html element sliders because of a lack of styling options (as far as filling up the bar with different colors, it gets messy overlaying SVG). There is also d3.slider (independent open source on git), but the documentation is lacking. Is using a brush handler the best option?
Thank you!

Issue with jquery-ui .draggable and jqQuery events on a Marionette App

I have made a small app that allows the user to create rectangles, and drag them around.
The implementational details are that the "green" workspace area you see is a Marionette CollectionView
and when you are drawing boxes, you're essentially instantiating new rectangle models and rendering views for them. HTML-wise, the rectangles are child nodes of #workspace.
Here's a working demo (on dropbox since jsfiddle keeps failing me all the time)
From what I know,in order to avoid the creation of a new rectangle while I'm moving around an already existing one, I need to stopPropagation of the mousedown/mousemove/mouseup events (That's what I'm using in the first place to determine if the user is dragging, to acquire mouse pointer position, calculate rectangle properties, and append the rectangle view on mouseup)
The problem is that although I stopPropagation for mousedown/mousemove/mouseup, apparently the mouseup event doesn't fire and the rectangle keeps following the cursor even after the mouse button has been released.
Also dragging a rectangle around is not as smooth as I would expect, but a bit glitchy. I'm suspecting that there must be either something horrible that I've done (most likely), or a conflict between how I'm handling events and how jQuery and jQuery UI are. (I need to comply, but I don't know how).
Please enlighten me!
In the end I've decided to write a short jQuery UI plugin that would take care of all the calculations and would allow me better control over event handling.
For more information about what I ended up doing check this post

Reacting to changes in a draggable PowerCharts graph

I'm using the drag-able line chart from the FusionCharts PowerCharts package.
I need to get the data of the graph and send it to server-side for further processing after user has moved a draggable point. This is easy to do with the Submit-button built in to the graph but I want this to happen without the user having to click the Submit button.
Based on the documentation (especially on the the events) it seems that the chart will not fire any events when the user has moved a point in the graph.
So now I'm trying to figure out the best way to get notified of the user-made changes to the graph?
One option would be to periodically call a JS function that would get the graph's data and check if it has changed since the last check. However this feels pretty ugly and inefficient and I don't currently know how to implement the continuous polling in JS.
I'm now leaning towards just to listening for a mouse up event on the element where the graph is and then check changes to previous state of the graph. This should work although the user will probably often click on the graph without actually dragging a point in it.
Am I missing some other obvious solutions here?
There are a couple of things I would like to put forward before we reach solution:
Polling is always a bad idea. And polling at a short interval is worse. However, if you do not need to react spontaneously on drag of the data-point, a high-interval polling will do. For your information, polling is done on JavaScript either by using setInterval function or by using recursive setTimeout.
In case you want to track mouse events, keep a note that in case you are rendering Flash charts, you need to ensure that the wMode (window mode) parameter of the chart is NOT set to "window". In "window" wMode, the browser does not track mouse-events when hovered over the chart. To change wMode of a chart, ensure you execute chartInstance.setTransparent(false) or chartInstance.setTransparent(true) before rendering the chart.
The mouse-event method that you have planned will not help you since you will not know whether user had clicked on the data-point. Hence this method is ruled out.
Thus, you are left with polling. :(
Update (after the first comment by Janne):
Using a combination of both to check for data change when drag event occurs on chart is the right solution.

Categories

Resources