Skip to content
Advertisement

Electron – LightningChart – Drag and Drop Chart – Unsafe Inline Issues?

I am new to JS/Electron. I’m trying to create an Electron App, my Electron App has several charts, I am using LightningChart JS for my charting. The LightningChart API asks my to target a div, then it apparently inserts a canvas into the div upon which it draws.

My application stacks 5-10 charts in a vertical column. I would like users to be able to drag them up and down to change their order to an order of their liking. I am attempting to use some vanilla Javascript in order to support this with the HTML5 Drag and Drop API.

I got the basic drag and drop working with just text in my divs by following this tutorial (https://web.dev/drag-and-drop/) However, when I populate the chart the Canvas tag gets added with additional inline styles.

This becomes an issue when I got to transfer the innerHTML from one element to the other. Electron complains about this being an unsafe inline. I am hesitant to allow unsafe-inlines as ever page/stackoverflow post I find says not to do that and I am trying to develop my app the right way.

Questions: What can I do about this? Strip the div and re-instantiate the chart after the move somehow?

Is there a better/simpler way to allow the to rearrange the charts than what I am doing with the Drag and Drop API?

enter image description here

Here’s the Canvas HTML that gets injected when LightningChart runs.

<div id="GammaChart" style="position: relative; box-sizing: content-box; cursor: default;"><canvas width="2896" style="position: absolute; inset: 0px; width: 100%; height: 100%; box-sizing: content-box;" height="500"></canvas></div>

Here’s what one of my divs look like:

<div id="ContainerDiv" draggable="true" class="chartBox">
   <div id="IncAzContChart"></div>
</div>

Advertisement

Answer

Perhaps instead of using the approach of moving the innerHTML content when applying the drag&drop reposition, you could use some other method, such as altering the order of DIV elements with JavaScript?

Frankly I’m not too sure where the issue here is but perhaps this could be a viable workaround solution.

So for example to swap the positions of two DIVs within the same container, you could do something like this:

container.replaceChildren(
     [...container.children].map(child =>
           // Swap positions of div1 and div2 
           child === div1 ? div2 :
           child === div2 ? div1 :
           child
     )
)
Advertisement