Implement position overlay api

[Basttyy]

Implement position/order overlay api

Summary

This PR implements highly customizable and easy to use order overlay with simple api.

Changes Made

1. created order overlay template

2. exposed simple sophisticated API for customizing the overlay

3. Implemented types for the order overlay

4. Implement simple base style for overlays

Usage Example

const line = chart.createOrderLine({ disableUndo: true })

line.setPrice(100.20)
    .setLineStyle('dashed')
    .setLineWidth(1)
    .setLineDashedValue([6, 2])
    .setText('Buystop Line')
    .setLineColor('#FF0000')
    .setBodyBackgroundColor('#ff00000c')
    .setBodyTextColor('#0f0e0eff')
    .setBodyBorderColor('#0d76e0ff')
    .setBodyFontWeight('medium')
    .setBorderSize(1)
    .setBorderRadius(0)
    .setBorderStyle('solid')
    .setCancelButtonFontWeight('thin')
    .setCancelButtonIconColor('#ff0000ff')
    .setCancelButtonBorderColor('#ff0000ff')
    .setCancelButtonBackgroundColor('#ff00000c')
    .setQuantityColor('#ffffffff')
    .setQuantityBackgroundColor('#0d76e0ff')
    .setQuantityBorderColor('#0073ffff')
    .onCancel(cancelMessage, (message) => {
      if (window.confirm(message)) {
        chart.removeOverlay({ id: line.id })
      }
    })
    .onModify(modifyMessage, (message) => {
      if (window.confirm(message)) {
        const pos = Math.floor(Math.random() * 150) + 1
        originalPosition = pos
        line.setPrice(datafeed.firstData[datafeed.firstData.length - originalPosition].close)
      }
    })
    .onMove({}, (p, e) => {
      console.info(p)
      if (e) {
        // Sample of what can be done with event data
        // const price = (e.chart.convertFromPixel([{ y: e.y, x: e.x }], { paneId: 'candle_pane' }) as Partial<Point>).value
      }
      // Reset the line to original position if you don't want it to be moveable or draggable.
      // Uncomment the next line to see it in action
      // line.setPrice(datafeed.firstData[datafeed.firstData.length - originalPosition].close)
    })
    .onMoveStart({}, (p, e) => {
      console.info(p)
      if (e) {
        // Sample of what can be done with event data
        // const price = (e.chart.convertFromPixel([{ y: e.y, x: e.x }], { paneId: 'candle_pane' }) as Partial<Point>).value
      }
      // Reset the line to original position if you don't want it to be moveable or draggable.
      // Uncomment the next line to see it in action
      // line.setPrice(datafeed.firstData[datafeed.firstData.length - originalPosition].close)
    })
    .onMoveEnd({}, (p, e) => {
      console.info(p)
      if (e) {
        // Sample of what can be done with event data
        // const price = (e.chart.convertFromPixel([{ y: e.y, x: e.x }], { paneId: 'candle_pane' }) as Partial<Point>).value
      }
      // Reset the line to original position if you don't want it to be moveable or draggable.
      // Uncomment the next line to see it in action
      line.setPrice(datafeed.firstData[datafeed.firstData.length - originalPosition].close)
    })

Benefits

People can now draw professional looking orderline with any color(s) on the chart directly using this api

Testing

✅ TypeScript compilation successful
✅ Build passes (ES and UMD modules)
✅ Type definitions generated correctly
✅ Manual testing carried out on sample project
✅ No breaking changes to existing API

Breaking Changes

None. This is a non-breaking additive change.

Sample Video

Screencast.from.10-28-2025.05.52.07.PM.webm