Adding a 'Pen Tool' for Freehand Drawing on the Chart

[IskanVa]

I’m using KlineCharts and would like to add a “Pen Tool” for freehand drawing directly on the chart. The tool should allow users to draw arbitrary lines by simply moving the mouse while holding down the left mouse button.
I attempted to create a custom overlay using registerOverlay, but encountered difficulties implementing freehand drawing functionality. The issue is that when I click and move the mouse, the chart scrolls instead of drawing. I tried disabling scrolling and zooming features, but it didn’t resolve the problem.

I couldn’t achieve the expected result with this code. I’d greatly appreciate any recommendations or an example solution for implementing such a tool.
Here is my code for the tool:

import { registerOverlay } from "klinecharts";

const penTool = {
  name: "penTool",
  totalStep: Number.MAX_SAFE_INTEGER,
  needDefaultPointFigure: false,
  createPointFigures: ({ coordinates, overlay }) => {
    const { color = "#FF0000", lineWidth = 2 } = overlay.extendData || {};
    if (coordinates.length > 1) {
      return [
        {
          type: "polyline",
          attrs: { coordinates, stroke: color, lineWidth },
        },
      ];
    }
    return [];
  },
  onDrawStart: (event) => {
    event.chart.setZoomEnabled(false);
    event.chart.setScrollEnabled(false);
    return true;
  },
  onDrawing: (event) => {
    return true;
  },
  onDrawEnd: (event) => {
    event.chart.setZoomEnabled(true);
    event.chart.setScrollEnabled(true);
    return true;
  },
};

registerOverlay(penTool);