Electron — LightningChart — Drag and Drop Chart — Небезопасные встроенные проблемы?
Я новичок в JS/Электрон. Я пытаюсь создать приложение Electron, в моем приложении Electron есть несколько диаграмм, я использую LightningChart JS для построения диаграмм. API LightningChart просит my настроить таргетинг на div, а затем, по-видимому, вставляет холст в div, на котором он рисует.
Мое приложение укладывает 5-10 диаграмм в вертикальный столбец. Я хотел бы, чтобы пользователи могли перетаскивать их вверх и вниз, чтобы изменить их порядок по своему вкусу. Я пытаюсь использовать некоторый ванильный Javascript, чтобы поддержать это с помощью HTML5 Drag and Drop API.
Я получил базовое перетаскивание, работающее только с текстом в моих div, следуя этому руководству (https://web.dev/drag-and-drop/). Однако, когда я заполняю диаграмму, тег Canvas добавляется с дополнительными встроенными стилями. .
Это становится проблемой, когда мне приходится передавать innerHTML из одного элемента в другой. Electron жалуется на то, что это небезопасная встроенная функция. Я не решаюсь разрешить unsafe-inlines, поскольку когда-либо сообщение страницы/stackoverflow, которое я нахожу, говорит не делать этого, и я пытаюсь правильно разработать свое приложение.
Вопросы: Что я могу с этим сделать? Как-то разбить div и повторно создать диаграмму после перемещения?
Есть ли лучший/более простой способ изменить порядок диаграмм, чем то, что я делаю с помощью API перетаскивания?
Вот Canvas HTML, который внедряется при запуске LightningChart.
<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>
Вот как выглядит один из моих div:
<div id="ContainerDiv" draggable="true" class="chartBox">
<div id="IncAzContChart"></div>
</div>