Drawing event "drawingunselected" execute first

[shishima123]

Hello

I want to disable the continuous drawing feature. Everything seems to be working fine; however, when I select "Select" on the toolbar and select a drawing, then click outside, a new drawing appears on the screen before the "drawingunselected" event is executed.

How can I make the "drawingunselected" event execute first after clicking outside?

Here my code

drawingControl.events.on('click', (ev) => {
   let active = ev.target.get('active')

   activeDrawSelection(active)
})

stockChart.events.on('drawingadded', function () {
   unSelectTool()
})

stockChart.events.on('drawingselected', function (ev) {

})

stockChart.events.on('drawingunselected', function (ev) {
   unSelectTool()
   activeDrawSelection(true)
})

function selectTool(tool) {
  drawingControl.setAll({
    tool: tool.toolName
  })
}

function unSelectTool() {
  drawingControl.setAll({
    tool: null
  })
}

function activeDrawSelection(state) {
  stockChart.set('drawingSelectionEnabled', state)
  stockChart.markDirtyKey('drawingSelectionEnabled')
}

JS Fiddle

https://github.com/user-attachments/assets/52ca2b45-83ec-4c2d-ae78-9458404fcfce

[workingbuddy10]

@shishima123 You can do an alternative too, Once you completed the drawing, change the drawing tool to the anchor tool.

By this a new drawing won't appear.

[shishima123]

Thanks @workingbuddy10 Can you give me example code? Or please edit my jsfiddle

[workingbuddy10]

@shishima123 For testing purpose remove all method on drawingaddedevent and then Just add this line

stockChart.events.on('drawingadded',  () => {
drawingControl.set("tool", "anchor");
})

[shishima123]

Thank you for your reply @workingbuddy10

I have added your code, but it doesn't seem to solve the issue I'm facing.

After a drawing is selected, when clicking outside (focus out), a new drawing is still being created before the "drawingunselected" event is actually executed.

https://github.com/user-attachments/assets/41029660-8df6-4719-981d-a4e483c8a872

[martynasma]

Why not disable drawing when drawing is selected?

stockChart.events.on('drawingselected', function (ev) {
     unSelectTool();
})

stockChart.events.on('drawingunselected', function (ev) {
   activeDrawSelection(true);
})

[workingbuddy10]

Why not disable drawing when drawing is selected?

True!

That's why I have added it as an alternative!

[shishima123]

If you disable drawing when a drawing is selected, you won't be able to use features like changing color, font, line style, etc.

I want these features to still function normally when a drawing is selected

[martynasma]

Unfortunately, there's no way to disable drawing without exiting drawing mode 🙁

stockChart.events.on("drawingadded", function () {
  drawingControl.set("active", false);
});

[shishima123]

When you set drawingControl to false, the toolbar will also disappear, which is not entirely correct.

I think the drawingunselected event should be executed before the startingdrawing event or something similar

[martynasma]

We're implementing the behavior as default in the next version.

When you click on plot area, currently selected drawing will be unselected but the new one will not be added until subsequent clicks.

[martynasma]

Implemented in 5.10.5.

[5.10.5] - 2024-09-06

Added

• scrollToChild() method added to Container. Scrolls the container to the target child element if the container is scrollable and the element is currently outside of view.
• New StockChart drawing tool added: "Line Arrow".

Changed

• When a selected drawing in a StockChart is inselected by clicking on a chart's plot area the new drawing will not be added anymore.

Fixed

• Keyboard-dragging of focusable elements was not working correctly in some cases.
• Sometimes label/callout drawing text was cut temporarily while editing them on StockChart.
• Editable labels/callouts would go into edit mode when unserialized.
• If auto-saving of drawings was enabled, editing text would not always save the latest version of the label/callout text.
• Dragging a StockChart drawing while other drawing was selected, would drag the selected drawing as well.

Full change log.

Download options.

Make sure you clear your browser cache after upgrading. And feel free to contact us again if you are still experiencing this issue.