impr: modify internal data structure

src/Event.ts

@@ -16,7 +16,6 @@ import Nullable from './common/Nullable'
 import SyntheticEvent, { EventHandler, MouseTouchEvent, TOUCH_MIN_RADIUS } from './common/SyntheticEvent'
 import Coordinate from './common/Coordinate'
 import { UpdateLevel } from './common/Updater'
-import Bounding from './common/Bounding'
 import Crosshair from './common/Crosshair'
 import { requestAnimationFrame, cancelAnimationFrame } from './common/utils/compatible'
 
@@ -143,7 +142,7 @@ export default class Event implements EventHandler {
       if (name === WidgetNameConstants.MAIN || name === WidgetNameConstants.X_AXIS) {
         zoomCoordinate = { x: event.x, y: event.y }
       } else {
-        const bounding = this._chart.getDrawPaneById(PaneIdConstants.CANDLE)?.getBounding() as Bounding
+        const bounding = this._chart.getCandlePane().getBounding()
         zoomCoordinate = { x: bounding.width / 2, y: bounding.height / 2 }
       }
     } else {
@@ -625,7 +624,7 @@ export default class Event implements EventHandler {
     const drawPanes = this._chart.getAllDrawPanes()
 
     let pane: Nullable<DrawPane> = null
-    for (const [, p] of drawPanes) {
+    for (const p of drawPanes) {
       const bounding = p.getBounding()
       if (
         x >= bounding.left && x <= bounding.left + bounding.width &&

src/component/YAxis.ts

@@ -23,6 +23,8 @@ import { index10, log10 } from '../common/utils/number'
 import { calcTextWidth } from '../common/utils/canvas'
 import { formatPrecision, formatThousands } from '../common/utils/format'
 
+import { PaneIdConstants } from '../pane/types'
+
 interface FiguresResult {
   figures: IndicatorFigure[]
   result: any[]
@@ -192,7 +194,7 @@ export default class YAxisImp extends AxisImp implements YAxis {
    * @return {boolean}
    */
   isInCandle (): boolean {
-    return this.getParent().getName() === 'candle'
+    return this.getParent().getId() === PaneIdConstants.CANDLE
   }
 
   /**

src/pane/CandlePane.ts

@@ -19,13 +19,7 @@ import DrawPane from './DrawPane'
 import IndicatorPane from './IndicatorPane'
 import YAxis from '../component/YAxis'
 
-import { PaneNameConstants } from './types'
-
 export default class CandlePane extends IndicatorPane {
-  override getName (): string {
-    return PaneNameConstants.CANDLE
-  }
-
   override createMainWidget (container: HTMLElement): DrawWidget<DrawPane<YAxis>> {
     return new CandleWidget(container, this)
   }

src/pane/IndicatorPane.ts

@@ -22,13 +22,7 @@ import YAxis from '../component/YAxis'
 
 import DrawPane from './DrawPane'
 
-import { PaneNameConstants } from './types'
-
 export default class IndicatorPane extends DrawPane<YAxis> {
-  override getName (): string {
-    return PaneNameConstants.INDICATOR
-  }
-
   override createAxisComponent (): YAxis {
     return new YAxis(this)
   }

src/pane/Pane.ts

@@ -80,7 +80,5 @@ export default abstract class Pane implements Updater {
 
   abstract getImage (includeOverlay: boolean): HTMLCanvasElement
 
-  abstract getName (): string
-
   abstract updateImp (level: UpdateLevel, container: HTMLElement, bounding: Bounding): void
 }

src/pane/SeparatorPane.ts

@@ -16,12 +16,13 @@ import Nullable from '../common/Nullable'
 import { UpdateLevel } from '../common/Updater'
 import Bounding from '../common/Bounding'
 import { merge } from '../common/utils/typeChecks'
+import { createDom } from '../common/utils/dom'
+import { getPixelRatio } from '../common/utils/canvas'
 
 import Chart from '../Chart'
 
 import DrawPane from './DrawPane'
 import Pane from './Pane'
-import { PaneNameConstants } from './types'
 
 import SeparatorWidget from '../widget/SeparatorWidget'
 
@@ -65,22 +66,32 @@ export default class SeparatorPane extends Pane {
   getWidget (): SeparatorWidget { return this._separatorWidget }
 
   override getImage (_includeOverlay: boolean): HTMLCanvasElement {
-    throw new Error('Method not implemented.')
+    const { width, height } = this.getBounding()
+
+    const styles = this.getChart().getStyles().separator
+    const canvas = createDom('canvas', {
+      width: `${width}px`,
+      height: `${height}px`,
+      boxSizing: 'border-box'
+    })
+    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D
+    const pixelRatio = getPixelRatio(canvas)
+    canvas.width = width * pixelRatio
+    canvas.height = height * pixelRatio
+    ctx.scale(pixelRatio, pixelRatio)
+    ctx.fillStyle = styles.color
+    ctx.fillRect(0, 0, width, height)
+    return canvas
   }
 
   override updateImp (level: UpdateLevel, container: HTMLElement, bounding: Bounding): void {
     if (level === UpdateLevel.All || level === UpdateLevel.Separator) {
       const styles = this.getChart().getStyles().separator
-      const fill = styles.fill
       container.style.backgroundColor = styles.color
-      container.style.height = `${styles.size}px`
-      container.style.marginLeft = `${fill ? 0 : bounding.left}px`
-      container.style.width = fill ? '100%' : `${bounding.width}px`
+      container.style.height = `${bounding.height}px`
+      container.style.marginLeft = `${bounding.left}px`
+      container.style.width = `${bounding.width}px`
       this._separatorWidget.update(level)
     }
   }
-
-  override getName (): string {
-    return PaneNameConstants.SEPARATOR
-  }
 }

src/pane/XAxisPane.ts

@@ -18,13 +18,8 @@ import XAxisWidget from '../widget/XAxisWidget'
 import XAxis from '../component/XAxis'
 
 import DrawPane from './DrawPane'
-import { PaneNameConstants } from './types'
 
 export default class XAxisPane extends DrawPane<XAxis> {
-  override getName (): string {
-    return PaneNameConstants.X_AXIS
-  }
-
   override createAxisComponent (): XAxis {
     return new XAxis(this)
   }

src/pane/types.ts

@@ -36,13 +36,6 @@ export interface PaneOptions {
   axisOptions?: PaneAxisOptions
 }
 
-export const PaneNameConstants = {
-  CANDLE: 'candle',
-  INDICATOR: 'indicator',
-  SEPARATOR: 'separator',
-  X_AXIS: 'xAxis'
-}
-
 export const PANE_MIN_HEIGHT = 30
 
 export const PANE_DEFAULT_HEIGHT = 100

src/view/GridView.ts

@@ -12,10 +12,6 @@
  * limitations under the License.
  */
 
-import XAxis from '../component/XAxis'
-
-import { PaneIdConstants } from '../pane/types'
-
 import View from './View'
 
 export default class GridView extends View {
@@ -51,7 +47,7 @@ export default class GridView extends View {
       const verticalStyles = gridStyles.vertical
       const verticalShow = verticalStyles.show
       if (verticalShow) {
-        const xAxis = chart.getDrawPaneById(PaneIdConstants.X_AXIS)?.getAxisComponent() as XAxis
+        const xAxis = chart.getXAxisPane().getAxisComponent()
         xAxis.getTicks().forEach(tick => {
           this.createFigure(
             'line',

src/view/IndicatorTooltipView.ts

@@ -21,13 +21,10 @@ import { ActionType } from '../common/Action'
 
 import { CustomApi } from '../Options'
 
-import XAxis from '../component/XAxis'
 import YAxis from '../component/YAxis'
 
 import IndicatorImp, { eachFigures, Indicator, IndicatorFigure, IndicatorFigureStyle, IndicatorTooltipData } from '../component/Indicator'
 
-import { PaneIdConstants } from '../pane/types'
-
 import { formatPrecision, formatThousands } from '../common/utils/format'
 import { isValid, isObject } from '../common/utils/typeChecks'
 import { createFont } from '../common/utils/canvas'
@@ -333,7 +330,7 @@ export default class IndicatorTooltipView extends View<YAxis> {
         bounding: widget.getBounding(),
         crosshair,
         defaultStyles: styles,
-        xAxis: pane.getChart().getDrawPaneById(PaneIdConstants.X_AXIS)?.getAxisComponent() as XAxis,
+        xAxis: pane.getChart().getXAxisPane().getAxisComponent(),
         yAxis: pane.getAxisComponent()
       })
       if (customName !== undefined && tooltipStyles.showName) {

src/view/IndicatorView.ts

@@ -17,12 +17,8 @@ import VisibleData from '../common/VisibleData'
 import BarSpace from '../common/BarSpace'
 import { CandleType } from '../common/Styles'
 
-import { PaneIdConstants } from '../pane/types'
-
 import ChartStore from '../store/ChartStore'
 
-import Axis from '../component/Axis'
-
 import { eachFigures, IndicatorFigure, IndicatorFigureAttrs, IndicatorFigureStyle } from '../component/Indicator'
 
 import CandleBarView, { CandleBarOptions } from './CandleBarView'
@@ -70,7 +66,7 @@ export default class IndicatorView extends CandleBarView {
     const pane = widget.getPane()
     const chart = pane.getChart()
     const bounding = widget.getBounding()
-    const xAxis = chart.getDrawPaneById(PaneIdConstants.X_AXIS)?.getAxisComponent() as Axis
+    const xAxis = chart.getXAxisPane().getAxisComponent()
     const yAxis = pane.getAxisComponent()
     const chartStore = chart.getChartStore()
     const dataList = chartStore.getDataList()

src/view/OverlayView.ts

@@ -288,7 +288,7 @@ export default class OverlayView<C extends Axis = YAxis> extends View<C> {
     const paneId = pane.getId()
     const timeScaleStore = chart.getChartStore().getTimeScaleStore()
     if (this.coordinateToPointTimestampDataIndexFlag()) {
-      const xAxis = chart.getDrawPaneById(PaneIdConstants.X_AXIS)?.getAxisComponent() as Axis
+      const xAxis = chart.getXAxisPane().getAxisComponent()
       const dataIndex = xAxis.convertFromPixel(coordinate.x)
       const timestamp = timeScaleStore.dataIndexToTimestamp(dataIndex) ?? undefined
       point.dataIndex = dataIndex
@@ -374,7 +374,7 @@ export default class OverlayView<C extends Axis = YAxis> extends View<C> {
     const paneId = pane.getId()
     const chart = pane.getChart()
     const yAxis = pane.getAxisComponent() as unknown as Nullable<YAxis>
-    const xAxis = chart.getDrawPaneById(PaneIdConstants.X_AXIS)?.getAxisComponent() as Nullable<XAxis>
+    const xAxis = chart.getXAxisPane().getAxisComponent()
     const bounding = widget.getBounding()
     const chartStore = chart.getChartStore()
     const customApi = chartStore.getCustomApi()

src/widget/SeparatorWidget.ts

@@ -16,15 +16,14 @@ import Bounding from '../common/Bounding'
 import { UpdateLevel } from '../common/Updater'
 import { MouseTouchEvent } from '../common/SyntheticEvent'
 import { ActionType } from '../common/Action'
+import { createDom } from '../common/utils/dom'
+import { throttle } from '../common/utils/performance'
 
 import Widget from './Widget'
 import { WidgetNameConstants, REAL_SEPARATOR_HEIGHT } from './types'
 
 import SeparatorPane from '../pane/SeparatorPane'
 
-import { createDom } from '../common/utils/dom'
-import { getPixelRatio } from '../common/utils/canvas'
-import { throttle } from '../common/utils/performance'
 import AxisPane from '../pane/DrawPane'
 
 export default class SeparatorWidget extends Widget<SeparatorPane> {
@@ -147,23 +146,4 @@ export default class SeparatorWidget extends Widget<SeparatorPane> {
       container.style.height = `${REAL_SEPARATOR_HEIGHT}px`
     }
   }
-
-  getImage (): HTMLCanvasElement {
-    const styles = this.getPane().getChart().getStyles().separator
-    const width = this.getContainer().offsetWidth
-    const height = styles.size
-    const canvas = createDom('canvas', {
-      width: `${width}px`,
-      height: `${height}px`,
-      boxSizing: 'border-box'
-    })
-    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D
-    const pixelRatio = getPixelRatio(canvas)
-    canvas.width = width * pixelRatio
-    canvas.height = height * pixelRatio
-    ctx.scale(pixelRatio, pixelRatio)
-    ctx.fillStyle = styles.color
-    ctx.fillRect(this.getBounding().left, 0, width, height)
-    return canvas
-  }
 }