Skip to content

Commit

Permalink
Merge branch 'feature'
Browse files Browse the repository at this point in the history
  • Loading branch information
@liihuu
liihuu committed Apr 14, 2023
2 parents 9ebf17f + 8d61f85 commit c627f1a
Show file tree
Hide file tree
Showing 6 changed files with 69 additions and 5,355 deletions.
4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "klinecharts",
"version": "9.1.2",
"version": "9.1.3",
"description": "Lightweight k-line chart built with html5 canvas",
"main": "./dist/klinecharts.min.js",
"module": "index.js",
Expand Down Expand Up @@ -78,6 +78,6 @@
"rollup-plugin-progress": "^1.1.2",
"tslib": "^2.5.0",
"typescript": "^4.8.3",
"vitepress": "^1.0.0-alpha.60"
"vitepress": "^1.0.0-alpha.65"
}
}
5,307 changes: 0 additions & 5,307 deletions pnpm-lock.yaml
View file

This file was deleted.

6 changes: 6 additions & 0 deletions src/component/Overlay.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,8 @@ export interface OverlayCreateFiguresCallbackParams {
}

export interface OverlayEvent extends Partial<MouseTouchEvent> {
figureKey?: string
figureIndex?: number
overlay: Overlay
}

Expand Down Expand Up @@ -256,6 +258,10 @@ export type OverlayConstructor = new () => OverlayImp
const OVERLAY_DRAW_STEP_START = 1
const OVERLAY_DRAW_STEP_FINISHED = -1

export const OVERLAY_ID_PREFIX = 'overlay_'

export const OVERLAY_FIGURE_KEY_PREFIX = 'overlay_figure_'

export default abstract class OverlayImp implements Overlay {
id: string
groupId: string
Expand Down
24 changes: 13 additions & 11 deletions src/store/OverlayStore.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,16 +18,14 @@ import { MouseTouchEvent } from '../common/SyntheticEvent'

import { createId } from '../common/utils/id'

import OverlayImp, { OverlayConstructor, OverlayCreate, OverlayRemove } from '../component/Overlay'
import OverlayImp, { OVERLAY_ID_PREFIX, OverlayConstructor, OverlayCreate, OverlayRemove } from '../component/Overlay'

import { getOverlayClass } from '../extension/overlay/index'

import ChartStore from './ChartStore'

import { PaneIdConstants } from '../pane/Pane'

const OVERLAY_ID_PREFIX = 'overlay_'

export interface ProgressOverlayInfo {
paneId: string
instance: OverlayImp
Expand All @@ -42,6 +40,7 @@ export interface EventOverlayInfo {
paneId: string
instance: Nullable<OverlayImp>
figureType: EventOverlayInfoFigureType
figureKey: string
figureIndex: number
attrsIndex: number
}
Expand All @@ -63,6 +62,7 @@ export default class OverlayStore {
paneId: '',
instance: null,
figureType: EventOverlayInfoFigureType.None,
figureKey: '',
figureIndex: -1,
attrsIndex: -1
}
Expand All @@ -74,6 +74,7 @@ export default class OverlayStore {
paneId: '',
instance: null,
figureType: EventOverlayInfoFigureType.None,
figureKey: '',
figureIndex: -1,
attrsIndex: -1
}
Expand All @@ -85,6 +86,7 @@ export default class OverlayStore {
paneId: '',
instance: null,
figureType: EventOverlayInfoFigureType.None,
figureKey: '',
figureIndex: -1,
attrsIndex: -1
}
Expand Down Expand Up @@ -308,7 +310,7 @@ export default class OverlayStore {

const updatePaneIds: string[] = []
if (this._progressInstanceInfo !== null) {
const instance = this._progressInstanceInfo.instance
const { instance } = this._progressInstanceInfo
if (
overlayRemove === undefined ||
(overlayRemove !== undefined && match(overlayRemove, instance))
Expand Down Expand Up @@ -364,16 +366,16 @@ export default class OverlayStore {
}

setHoverInstanceInfo (info: EventOverlayInfo, event: MouseTouchEvent): void {
const { instance, figureType, figureIndex } = this._hoverInstanceInfo
const { instance, figureType, figureKey, figureIndex } = this._hoverInstanceInfo
if (
instance?.id !== info.instance?.id ||
figureType !== info.figureType ||
figureIndex !== info.figureIndex
) {
this._hoverInstanceInfo = info
if (instance?.id !== info.instance?.id) {
instance?.onMouseLeave?.({ overlay: instance, ...event })
info.instance?.onMouseEnter?.({ overlay: info.instance, ...event })
instance?.onMouseLeave?.({ overlay: instance, figureKey, figureIndex, ...event })
info.instance?.onMouseEnter?.({ overlay: info.instance, figureKey: info.figureKey, figureIndex: info.figureIndex, ...event })
}
}
}
Expand All @@ -383,15 +385,15 @@ export default class OverlayStore {
}

setClickInstanceInfo (info: EventOverlayInfo, event: MouseTouchEvent): void {
const { paneId, instance, figureType, figureIndex } = this._clickInstanceInfo
const { paneId, instance, figureType, figureKey, figureIndex } = this._clickInstanceInfo
if (!(info.instance?.isDrawing() ?? false)) {
info.instance?.onClick?.({ overlay: info.instance, ...event })
info.instance?.onClick?.({ overlay: info.instance, figureKey: info.figureKey, figureIndex: info.figureIndex, ...event })
}
if (instance?.id !== info.instance?.id || figureType !== info.figureType || figureIndex !== info.figureIndex) {
this._clickInstanceInfo = info
if (instance?.id !== info.instance?.id) {
instance?.onDeselected?.({ overlay: instance, ...event })
info.instance?.onSelected?.({ overlay: info.instance, ...event })
instance?.onDeselected?.({ overlay: instance, figureKey, figureIndex, ...event })
info.instance?.onSelected?.({ overlay: info.instance, figureKey: info.figureKey, figureIndex: info.figureIndex, ...event })
const chart = this._chartStore.getChart()
chart.updatePane(UpdateLevel.Overlay, info.paneId)
if (paneId !== info.paneId) {
Expand Down
81 changes: 46 additions & 35 deletions src/view/OverlayView.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import { isBoolean } from '../common/utils/typeChecks'
import Axis from '../component/Axis'
import XAxis from '../component/XAxis'
import YAxis from '../component/YAxis'
import Overlay, { OverlayFigure, OverlayFigureIgnoreEventType, OverlayMode, getAllOverlayFigureIgnoreEventTypes } from '../component/Overlay'
import Overlay, { OVERLAY_FIGURE_KEY_PREFIX, OverlayFigure, OverlayFigureIgnoreEventType, OverlayMode, getAllOverlayFigureIgnoreEventTypes } from '../component/Overlay'

import OverlayStore, { ProgressOverlayInfo, EventOverlayInfo, EventOverlayInfoFigureType } from '../store/OverlayStore'
import TimeScaleStore from '../store/TimeScaleStore'
Expand Down Expand Up @@ -55,19 +55,22 @@ export default class OverlayView<C extends Axis = YAxis> extends View<C> {
overlayStore.updateProgressInstanceInfo(paneId)
progressInstancePaneId = paneId
}
const index = overlay.points.length - 1
const key = `${OVERLAY_FIGURE_KEY_PREFIX}point_${index}`
if (overlay.isDrawing() && progressInstancePaneId === paneId) {
overlay.eventMoveForDrawing(this._coordinateToPoint(progressInstanceInfo.instance, event))
overlay.onDrawing?.({ overlay, ...event })
overlay.onDrawing?.({ overlay, figureKey: key, figureIndex: index, ...event })
}
return this._figureMouseMoveEvent(
progressInstanceInfo.instance,
overlay,
EventOverlayInfoFigureType.Point,
progressInstanceInfo.instance.points.length - 1,
key,
index,
0
)(event)
}
overlayStore.setHoverInstanceInfo({
paneId, instance: null, figureType: EventOverlayInfoFigureType.None, figureIndex: -1, attrsIndex: -1
paneId, instance: null, figureType: EventOverlayInfoFigureType.None, figureKey: '', figureIndex: -1, attrsIndex: -1
}, event)
return false
}).registerEvent('mouseClickEvent', (event: MouseTouchEvent) => {
Expand All @@ -79,24 +82,27 @@ export default class OverlayView<C extends Axis = YAxis> extends View<C> {
overlayStore.updateProgressInstanceInfo(paneId, true)
progressInstancePaneId = paneId
}
const index = overlay.points.length - 1
const key = `${OVERLAY_FIGURE_KEY_PREFIX}point_${index}`
if (overlay.isDrawing() && progressInstancePaneId === paneId) {
overlay.eventMoveForDrawing(this._coordinateToPoint(overlay, event))
overlay.onDrawing?.({ overlay, ...event })
overlay.onDrawing?.({ overlay, figureKey: key, figureIndex: index, ...event })
overlay.nextStep()
if (!overlay.isDrawing()) {
overlayStore.progressInstanceComplete()
overlay.onDrawEnd?.({ overlay, ...event })
overlay.onDrawEnd?.({ overlay, figureKey: key, figureIndex: index, ...event })
}
}
return this._figureMouseClickEvent(
overlay,
EventOverlayInfoFigureType.Point,
overlay.points.length - 1,
key,
index,
0
)(event)
}
overlayStore.setClickInstanceInfo({
paneId, instance: null, figureType: EventOverlayInfoFigureType.None, figureIndex: -1, attrsIndex: -1
paneId, instance: null, figureType: EventOverlayInfoFigureType.None, figureKey: '', figureIndex: -1, attrsIndex: -1
}, event)
return false
}).registerEvent('mouseDoubleClickEvent', (event: MouseTouchEvent) => {
Expand All @@ -108,7 +114,9 @@ export default class OverlayView<C extends Axis = YAxis> extends View<C> {
overlay.forceComplete()
if (!overlay.isDrawing()) {
overlayStore.progressInstanceComplete()
overlay.onDrawEnd?.({ overlay, ...event })
const index = overlay.points.length - 1
const key = `${OVERLAY_FIGURE_KEY_PREFIX}point_${index}`
overlay.onDrawEnd?.({ overlay, figureKey: key, figureIndex: index, ...event })
}
}
return true
Expand All @@ -119,29 +127,31 @@ export default class OverlayView<C extends Axis = YAxis> extends View<C> {
if (progressInstanceInfo !== null) {
const overlay = progressInstanceInfo.instance
if (overlay.isDrawing()) {
const index = overlay.points.length - 1
return this._figureMouseRightClickEvent(
overlay,
EventOverlayInfoFigureType.Point,
overlay.points.length - 1,
`${OVERLAY_FIGURE_KEY_PREFIX}point_${index}`,
index,
0
)(event)
}
}
return false
}).registerEvent('mouseUpEvent', (event: MouseTouchEvent) => {
const { instance } = overlayStore.getPressedInstanceInfo()
const { instance, figureIndex, figureKey } = overlayStore.getPressedInstanceInfo()
if (instance !== null) {
instance.onPressedMoveEnd?.({ overlay: instance, ...event })
instance.onPressedMoveEnd?.({ overlay: instance, figureKey, figureIndex, ...event })
}
overlayStore.setPressedInstanceInfo({
paneId, instance: null, figureType: EventOverlayInfoFigureType.None, figureIndex: -1, attrsIndex: -1
paneId, instance: null, figureType: EventOverlayInfoFigureType.None, figureKey: '', figureIndex: -1, attrsIndex: -1
})
return false
}).registerEvent('pressedMouseMoveEvent', (event: MouseTouchEvent) => {
const { instance, figureType, figureIndex } = overlayStore.getPressedInstanceInfo()
const { instance, figureType, figureIndex, figureKey } = overlayStore.getPressedInstanceInfo()
if (instance !== null) {
if (!instance.lock) {
if (!(instance.onPressedMoving?.({ overlay: instance, ...event }) ?? false)) {
if (!(instance.onPressedMoving?.({ overlay: instance, figureIndex, figureKey, ...event }) ?? false)) {
const point = this._coordinateToPoint(instance, event)
if (figureType === EventOverlayInfoFigureType.Point) {
instance.eventPressedPointMove(point, figureIndex)
Expand All @@ -159,6 +169,7 @@ export default class OverlayView<C extends Axis = YAxis> extends View<C> {
private _createFigureEvents (
overlay: Overlay,
figureType: EventOverlayInfoFigureType,
figureKey: string,
figureIndex: number,
attrsIndex: number,
ignoreEvent?: boolean | OverlayFigureIgnoreEventType[]
Expand All @@ -177,10 +188,10 @@ export default class OverlayView<C extends Axis = YAxis> extends View<C> {
}
if (eventTypes.length === 0) {
return {
mouseMoveEvent: this._figureMouseMoveEvent(overlay, figureType, figureIndex, attrsIndex),
mouseDownEvent: this._figureMouseDownEvent(overlay, figureType, figureIndex, attrsIndex),
mouseClickEvent: this._figureMouseClickEvent(overlay, figureType, figureIndex, attrsIndex),
mouseRightClickEvent: this._figureMouseRightClickEvent(overlay, figureType, figureIndex, attrsIndex)
mouseMoveEvent: this._figureMouseMoveEvent(overlay, figureType, figureKey, figureIndex, attrsIndex),
mouseDownEvent: this._figureMouseDownEvent(overlay, figureType, figureKey, figureIndex, attrsIndex),
mouseClickEvent: this._figureMouseClickEvent(overlay, figureType, figureKey, figureIndex, attrsIndex),
mouseRightClickEvent: this._figureMouseRightClickEvent(overlay, figureType, figureKey, figureIndex, attrsIndex)
}
}
eventHandler = {}
Expand All @@ -189,57 +200,57 @@ export default class OverlayView<C extends Axis = YAxis> extends View<C> {
// 'touchStartEvent', 'mouseMoveEvent', 'touchMoveEvent'
// ]
if (!eventTypes.includes('mouseMoveEvent') && !eventTypes.includes('touchMoveEvent')) {
eventHandler.mouseMoveEvent = this._figureMouseMoveEvent(overlay, figureType, figureIndex, attrsIndex)
eventHandler.mouseMoveEvent = this._figureMouseMoveEvent(overlay, figureType, figureKey, figureIndex, attrsIndex)
}
if (!eventTypes.includes('mouseDownEvent') && !eventTypes.includes('touchStartEvent')) {
eventHandler.mouseDownEvent = this._figureMouseDownEvent(overlay, figureType, figureIndex, attrsIndex)
eventHandler.mouseDownEvent = this._figureMouseDownEvent(overlay, figureType, figureKey, figureIndex, attrsIndex)
}
if (!eventTypes.includes('mouseClickEvent') && !eventTypes.includes('tapEvent')) {
eventHandler.mouseClickEvent = this._figureMouseClickEvent(overlay, figureType, figureIndex, attrsIndex)
eventHandler.mouseClickEvent = this._figureMouseClickEvent(overlay, figureType, figureKey, figureIndex, attrsIndex)
}
if (!eventTypes.includes('mouseRightClickEvent')) {
eventHandler.mouseRightClickEvent = this._figureMouseRightClickEvent(overlay, figureType, figureIndex, attrsIndex)
eventHandler.mouseRightClickEvent = this._figureMouseRightClickEvent(overlay, figureType, figureKey, figureIndex, attrsIndex)
}
}
return eventHandler
}

private _figureMouseMoveEvent (overlay: Overlay, figureType: EventOverlayInfoFigureType, figureIndex: number, attrsIndex: number): MouseTouchEventCallback {
private _figureMouseMoveEvent (overlay: Overlay, figureType: EventOverlayInfoFigureType, figureKey: string, figureIndex: number, attrsIndex: number): MouseTouchEventCallback {
return (event: MouseTouchEvent) => {
const pane = this.getWidget().getPane()
const overlayStore = pane.getChart().getChartStore().getOverlayStore()
overlayStore.setHoverInstanceInfo(
{ paneId: pane.getId(), instance: overlay, figureType, figureIndex, attrsIndex }, event
{ paneId: pane.getId(), instance: overlay, figureType, figureKey, figureIndex, attrsIndex }, event
)
return true
}
}

private _figureMouseDownEvent (overlay: Overlay, figureType: EventOverlayInfoFigureType, figureIndex: number, attrsIndex: number): MouseTouchEventCallback {
private _figureMouseDownEvent (overlay: Overlay, figureType: EventOverlayInfoFigureType, figureKey: string, figureIndex: number, attrsIndex: number): MouseTouchEventCallback {
return (event: MouseTouchEvent) => {
const pane = this.getWidget().getPane()
const paneId = pane.getId()
const overlayStore = pane.getChart().getChartStore().getOverlayStore()
overlay.startPressedMove(this._coordinateToPoint(overlay, event))
overlay.onPressedMoveStart?.({ overlay, ...event })
overlayStore.setPressedInstanceInfo({ paneId, instance: overlay, figureType, figureIndex, attrsIndex })
overlay.onPressedMoveStart?.({ overlay, figureIndex, figureKey, ...event })
overlayStore.setPressedInstanceInfo({ paneId, instance: overlay, figureType, figureKey, figureIndex, attrsIndex })
return true
}
}

private _figureMouseClickEvent (overlay: Overlay, figureType: EventOverlayInfoFigureType, figureIndex: number, attrsIndex: number): MouseTouchEventCallback {
private _figureMouseClickEvent (overlay: Overlay, figureType: EventOverlayInfoFigureType, figureKey: string, figureIndex: number, attrsIndex: number): MouseTouchEventCallback {
return (event: MouseTouchEvent) => {
const pane = this.getWidget().getPane()
const paneId = pane.getId()
const overlayStore = pane.getChart().getChartStore().getOverlayStore()
overlayStore.setClickInstanceInfo({ paneId, instance: overlay, figureType, figureIndex, attrsIndex }, event)
overlayStore.setClickInstanceInfo({ paneId, instance: overlay, figureType, figureKey, figureIndex, attrsIndex }, event)
return true
}
}

private _figureMouseRightClickEvent (overlay: Overlay, _figureType: EventOverlayInfoFigureType, _figureIndex: number, _attrsIndex: number): MouseTouchEventCallback {
private _figureMouseRightClickEvent (overlay: Overlay, _figureType: EventOverlayInfoFigureType, figureKey: string, figureIndex: number, _attrsIndex: number): MouseTouchEventCallback {
return (event: MouseTouchEvent) => {
if (!(overlay.onRightClick?.({ overlay, ...event }) ?? false)) {
if (!(overlay.onRightClick?.({ overlay, figureIndex, figureKey, ...event }) ?? false)) {
const pane = this.getWidget().getPane()
const overlayStore = pane.getChart().getChartStore().getOverlayStore()
overlayStore.removeInstance(overlay)
Expand Down Expand Up @@ -440,7 +451,7 @@ export default class OverlayView<C extends Axis = YAxis> extends View<C> {
const { type, styles, attrs, ignoreEvent } = figure
const attrsArray = [].concat(attrs)
attrsArray.forEach((ats, attrsIndex) => {
const evnets = this._createFigureEvents(overlay, EventOverlayInfoFigureType.Other, figureIndex, attrsIndex, ignoreEvent)
const evnets = this._createFigureEvents(overlay, EventOverlayInfoFigureType.Other, figure.key ?? '', figureIndex, attrsIndex, ignoreEvent)
const ss = { ...defaultStyles[type], ...overlay.styles?.[type], ...styles }
this.createFigure(
type, ats, ss, evnets
Expand Down Expand Up @@ -514,7 +525,7 @@ export default class OverlayView<C extends Axis = YAxis> extends View<C> {
'circle',
{ x, y, r: radius + borderSize },
{ color: borderColor },
this._createFigureEvents(overlay, EventOverlayInfoFigureType.Point, index, 0)
this._createFigureEvents(overlay, EventOverlayInfoFigureType.Point, `${OVERLAY_FIGURE_KEY_PREFIX}point_${index}`, index, 0)
)?.draw(ctx)
this.createFigure(
'circle',
Expand Down
2 changes: 2 additions & 0 deletions types/index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -703,6 +703,8 @@ export interface OverlayCreateFiguresCallbackParams {
yAxis: Nullable<YAxis>;
}
export interface OverlayEvent extends Partial<MouseTouchEvent> {
figureKey?: string;
figureIndex?: number;
overlay: Overlay;
}
export type OverlayEventCallback = (event: OverlayEvent) => boolean;
Expand Down

0 comments on commit c627f1a

Please sign in to comment.