What's the best way to style a custom shape?

[trading-peter]

Hi! I'm experimenting with custom shapes. In particular drawing boxes over specific areas.

I came up with this code and it works so far:

import { checkCoordinateInRect } from 'klinecharts/lib/shape/shapeHelper';

// Expects two points { timestamp: ..., value: ... }
export const box = {
  name:'box',
  totalStep: 3,

  checkEventCoordinateOnShape: ({ dataSource, eventCoordinate }) => {
    return checkCoordinateInRect(dataSource[0], dataSource[1], eventCoordinate)
  },

  drawExtend({ ctx, dataSource, styles }) {
    const { p1, p2 } = dataSource[0];

    console.log(styles);

    ctx.beginPath();
    ctx.lineWidth = '1';
    ctx.strokeStyle = styles.box.line || 'rgba(255, 0, 0, 0.9)';
    ctx.fillStyle = styles.box.background || 'rgba(255, 0, 0, 0.3)';
    ctx.rect(p1.x, p1.y, Math.abs(p2.x - p1.x), Math.abs(p2.y - p1.y));
    ctx.fill();
    ctx.stroke();
  },

  // Create shape information
  createShapeDataSource({ step, points, coordinates }) {
    if (coordinates.length === 2) {
      return [
        { p1: coordinates[0], p2: coordinates[1] },
      ]
    }
    return []
  }
};

To create a box on the chart I call:

this.chart.createShape(
      {
        name: 'box',
        points: [
          { timestamp: 1657008000000, value: 20192 },
          { timestamp: 1657036800000, value: 19500 },
        ],
        styles: {
         // I was expecting to have this available in "drawExtend"
          box: { background: 'rgba(255, 0, 0, 0.1)', line: 'rgba(255, 0, 0, 0.5)' }
        }
      },
      'candle_pane',
    );

I was expecting to have the values from "styles" available in "drawExtend" but the "box" key is simply thrown out and there are only the default stylings for "arc", "line" and so on in the object. I checked the "merge" function in "typeChecks.js" and it's filtering out my custom key "box". How else would I do this?

Thanks you so much for this library btw. It's the best one I've come across so far.

[Swoorup]

Did you find an answer @trading-peter ? Possible problematic line: https://github.com/liihuu/KLineChart/blob/7d3c4eb5fb/src/component/overlay/Overlay.js#L62

[liihuu]

The style format of the shape should be consistent with the general configuration.

[Swoorup]

The style format of the shape should be consistent with the general configuration.

Wouldn't that rather be a bug, if the merging code (default styles with custom styles) isn't working as expected?
I haven't tested it, though.

https://github.com/liihuu/KLineChart/blob/7d3c4eb5fb/src/component/overlay/Overlay.js#L55-L64

[liihuu]

It is merged on the default style, and only the same key as the default style will be overwritten.