From 2507c2b1a037b562c4fbb050082023b45dc2e7b9 Mon Sep 17 00:00:00 2001 From: lihu Date: Sat, 10 Sep 2022 01:32:47 +0800 Subject: [PATCH] opt: opt id --- src/component/overlay/Annotation.js | 19 +++++-------------- src/component/overlay/Overlay.js | 10 +++++++++- src/component/overlay/Shape.js | 13 ++----------- src/component/overlay/Tag.js | 9 ++++----- src/pane/ChartPane.js | 20 ++++++++++++-------- src/store/AnnotationStore.js | 9 +++++---- src/utils/id.js | 24 ++++++++++++++++++++++++ 7 files changed, 61 insertions(+), 43 deletions(-) create mode 100644 src/utils/id.js diff --git a/src/component/overlay/Annotation.js b/src/component/overlay/Annotation.js index e77363b35..f68586489 100644 --- a/src/component/overlay/Annotation.js +++ b/src/component/overlay/Annotation.js @@ -35,10 +35,9 @@ import { */ export default class Annotation extends Overlay { constructor ({ - id, point, chartStore, xAxis, yAxis, styles + id, point = {}, chartStore, xAxis, yAxis, styles }) { - super({ id, chartStore, xAxis, yAxis }) - this._point = point + super({ id, chartStore, points: point, xAxis, yAxis }) this._symbolCoordinate = {} this.setStyles(styles, chartStore.styleOptions().annotation) } @@ -85,7 +84,7 @@ export default class Annotation extends Overlay { ctx.save() this.drawCustomSymbol({ ctx, - point: this._point, + point: this._points, coordinate: this._symbolCoordinate, viewport: { width: this._xAxis.width(), @@ -110,7 +109,7 @@ export default class Annotation extends Overlay { let y = 0 switch (styles.position) { case OverlayPosition.POINT: { - y = this._yAxis.convertToPixel(this._point.value) + y = this._yAxis.convertToPixel(this._points.value) break } case OverlayPosition.TOP: { @@ -129,7 +128,7 @@ export default class Annotation extends Overlay { ctx.save() this.drawExtend({ ctx, - point: this._point, + point: this._points, coordinate: this._symbolCoordinate, viewport: { width: this._xAxis.width(), @@ -204,14 +203,6 @@ export default class Annotation extends Overlay { this._symbolCoordinate = { x: x + offset[1] } } - /** - * 获取点 - * @return {*} - */ - points () { - return this._point - } - /** * 检查鼠标点是否在自定义标识内 * @param eventCoordinate diff --git a/src/component/overlay/Overlay.js b/src/component/overlay/Overlay.js index 2d387ba4f..0f09c6d1f 100644 --- a/src/component/overlay/Overlay.js +++ b/src/component/overlay/Overlay.js @@ -32,10 +32,11 @@ export function perfectOverlayFunc (overlay, funcs) { */ export default class Overlay { constructor ({ - id, chartStore, xAxis, yAxis + id, chartStore, points, xAxis, yAxis }) { this._id = id this._chartStore = chartStore + this._points = points this._xAxis = xAxis this._yAxis = yAxis this._styles = null @@ -79,6 +80,13 @@ export default class Overlay { return this._styles } + /** + * 获取点信息 + */ + points () { + return this._points + } + /** * 设置y轴 * @param yAxis diff --git a/src/component/overlay/Shape.js b/src/component/overlay/Shape.js index 4b1fc7033..39e044194 100644 --- a/src/component/overlay/Shape.js +++ b/src/component/overlay/Shape.js @@ -93,9 +93,9 @@ export default class Shape extends Overlay { constructor ({ id, name, totalStep, chartStore, xAxis, yAxis, - points, styles, lock, mode, data + points = [], styles, lock, mode, data }) { - super({ id, chartStore, xAxis, yAxis }) + super({ id, chartStore, points, xAxis, yAxis }) this._name = name this._totalStep = totalStep this._lock = lock @@ -103,7 +103,6 @@ export default class Shape extends Overlay { this.setMode(mode) this._data = data this._drawStep = SHAPE_DRAW_STEP_START - this._points = [] this.setPoints(points) this.setStyles(styles, chartStore.styleOptions().shape) this._prevPressPoint = null @@ -495,14 +494,6 @@ export default class Shape extends Overlay { return this._data } - /** - * 获取点 - * @return {[]} - */ - points () { - return this._points - } - /** * 是否在绘制中 * @return {boolean} diff --git a/src/component/overlay/Tag.js b/src/component/overlay/Tag.js index 4ff5ccbcd..e33dda0b9 100644 --- a/src/component/overlay/Tag.js +++ b/src/component/overlay/Tag.js @@ -22,10 +22,9 @@ import { renderText } from '../../renderer/text' export default class Tag extends Overlay { constructor ({ - id, point, text, mark, chartStore, xAxis, yAxis, styles + id, point = {}, text, mark, chartStore, xAxis, yAxis, styles }) { - super({ id, chartStore, xAxis, yAxis }) - this._point = point || {} + super({ id, chartStore, points: point, xAxis, yAxis }) this._text = text this._mark = mark this.setStyles(styles, chartStore.styleOptions().tag) @@ -42,7 +41,7 @@ export default class Tag extends Overlay { update ({ point, text, mark, styles }) { let success = false if (isObject(point)) { - this._point = point + this._points = point success = true } if (isValid(text)) { @@ -300,7 +299,7 @@ export default class Tag extends Overlay { return this._yAxis.height() + offset } default: { - return this._yAxis.convertToNicePixel(this._point.value) + offset + return this._yAxis.convertToNicePixel(this._points.value) + offset } } } diff --git a/src/pane/ChartPane.js b/src/pane/ChartPane.js index b0c5b5ed3..57b490693 100644 --- a/src/pane/ChartPane.js +++ b/src/pane/ChartPane.js @@ -18,7 +18,10 @@ import CandlePane from './CandlePane' import XAxisPane from './XAxisPane' import { YAxisPosition } from '../options/styleOptions' + import { isArray, isBoolean, isFunction, isValid, isNumber } from '../utils/typeChecks' +import { createId } from '../utils/id' + import TechnicalIndicatorPane from './TechnicalIndicatorPane' import SeparatorPane from './SeparatorPane' @@ -34,14 +37,17 @@ import ActionType from '../enum/ActionType' import InvalidateLevel from '../enum/InvalidateLevel' // 默认技术指标窗口高度 -const DEFAULT_TECHNICAL_INDICATOR_PANE_HEIGHT = 100 +const DEFAULT_TECH_PANE_HEIGHT = 100 // 技术指标窗口id前缀 -const TECHNICAL_INDICATOR_PANE_ID_PREFIX = 'technical_indicator_pane_' +const TECH_PANE_ID_PREFIX = 'tech_pane_' // 图形id前缀 const SHAPE_ID_PREFIX = 'shape_' +// 注解id前缀 +const ANNOTATION_ID_PREFIX = 'an_' + // 蜡烛图窗口id export const CANDLE_PANE_ID = 'candle_pane' @@ -51,8 +57,6 @@ const XAXIS_PANE_ID = 'x_axis_pane' export default class ChartPane { constructor (container, styleOptions) { this._initChartContainer(container) - this._shapeBaseId = 0 - this._paneBaseId = 0 this._separatorDragStartTopPaneHeight = 0 this._separatorDragStartBottomPaneHeight = 0 this._chartStore = new ChartStore(styleOptions, { @@ -436,7 +440,7 @@ export default class ChartPane { } return options.id } - const id = options.id || `${TECHNICAL_INDICATOR_PANE_ID_PREFIX}${++this._paneBaseId}` + const id = options.id || createId(TECH_PANE_ID_PREFIX) const dragEnabled = isBoolean(options.dragEnabled) ? options.dragEnabled : true this._separators.set(id, new SeparatorPane( this._chartContainer, @@ -454,7 +458,7 @@ export default class ChartPane { chartStore: this._chartStore, xAxis: this._xAxisPane.xAxis(), id, - height: options.height || DEFAULT_TECHNICAL_INDICATOR_PANE_HEIGHT, + height: options.height || DEFAULT_TECH_PANE_HEIGHT, minHeight: options.minHeight }) this._panes.set(id, pane) @@ -482,7 +486,7 @@ export default class ChartPane { onMouseEnter, onMouseLeave, onRemove } = shapeOptions - const shapeId = id || `${SHAPE_ID_PREFIX}${++this._shapeBaseId}` + const shapeId = id || createId(SHAPE_ID_PREFIX) if (!this._chartStore.shapeStore().hasInstance(shapeId)) { let yAxis = null if (this.hasPane(paneId)) { @@ -543,7 +547,7 @@ export default class ChartPane { }) => { if (point && point.timestamp) { const annotationInstance = new Annotation({ - id: point.timestamp, + id: createId(ANNOTATION_ID_PREFIX), chartStore: this._chartStore, point, xAxis: this._xAxisPane.xAxis(), diff --git a/src/store/AnnotationStore.js b/src/store/AnnotationStore.js index b739d38a5..aff0ce6b8 100644 --- a/src/store/AnnotationStore.js +++ b/src/store/AnnotationStore.js @@ -82,11 +82,12 @@ export default class AnnotationStore { this._annotations.set(paneId, new Map()) } annotations.forEach(annotation => { - const idAnnotations = this._annotations.get(paneId) - if (idAnnotations.has(annotation.id())) { - idAnnotations.get(annotation.id()).push(annotation) + const timestampAnnotations = this._annotations.get(paneId) + const timestamp = annotation.points().timestamp + if (timestampAnnotations.has(timestamp)) { + timestampAnnotations.get(timestamp).push(annotation) } else { - idAnnotations.set(annotation.id(), [annotation]) + timestampAnnotations.set(timestamp, [annotation]) } }) this.createVisibleAnnotations() diff --git a/src/utils/id.js b/src/utils/id.js new file mode 100644 index 000000000..305f89b75 --- /dev/null +++ b/src/utils/id.js @@ -0,0 +1,24 @@ +class ID { + constructor () { + this._baseId = 1 + } + + next (prefix = '') { + const timestamp = new Date().getTime() + if (timestamp === this._prevIdTimestamp) { + ++this._baseId + } else { + this._baseId = 1 + } + this._prevIdTimestamp = timestamp + return `${prefix}${timestamp}_${this._baseId}` + } +} + +const id = new ID() + +function createId (prefix) { + return id.next(prefix) +} + +export { createId }