From c61da204d57d6ad096223d7e88d05719e1c8106b Mon Sep 17 00:00:00 2001 From: Laurence Roberts Date: Fri, 21 Jun 2024 14:59:08 +0100 Subject: [PATCH] AG-11892 Update color picker to align to the toolbar color button --- .../src/chart/interaction/toolbarManager.ts | 12 +++++++++++ .../src/chart/toolbar/toolbar.ts | 20 ++++++++++++++++++- .../src/features/annotations/annotations.ts | 7 ++++++- .../src/features/color-picker/colorPicker.ts | 8 ++++++++ 4 files changed, 45 insertions(+), 2 deletions(-) diff --git a/packages/ag-charts-community/src/chart/interaction/toolbarManager.ts b/packages/ag-charts-community/src/chart/interaction/toolbarManager.ts index 8a9a75af8b..b789c1a622 100644 --- a/packages/ag-charts-community/src/chart/interaction/toolbarManager.ts +++ b/packages/ag-charts-community/src/chart/interaction/toolbarManager.ts @@ -1,5 +1,6 @@ import type { AgToolbarOptions } from 'ag-charts-types'; +import type { BBox } from '../../scene/bbox'; import { BaseManager } from '../baseManager'; import type { DOMManager } from '../dom/domManager'; import { TOOLBAR_POSITIONS, type ToolbarGroup } from '../toolbar/toolbarTypes'; @@ -7,6 +8,7 @@ import { TOOLBAR_POSITIONS, type ToolbarGroup } from '../toolbar/toolbarTypes'; type EventTypes = | 'button-pressed' | 'button-toggled' + | 'button-moved' | 'cancelled' | 'floating-anchor-changed' | 'group-toggled' @@ -14,6 +16,7 @@ type EventTypes = type ToolbarEvent = | ToolbarButtonPressedEvent | ToolbarButtonToggledEvent + | ToolbarButtonMovedEvent | ToolbarCancelledEvent | ToolbarFloatingAnchorChangedEvent | ToolbarGroupToggledEvent @@ -49,6 +52,11 @@ export interface ToolbarButtonToggledEvent extends Event<'button-toggle visible: boolean; } +export interface ToolbarButtonMovedEvent extends Event<'button-moved'> { + value: T; + rect: BBox; +} + export interface ToolbarProxyGroupOptionsEvent extends Event<'proxy-group-options'> { caller: string; options: Partial>; @@ -96,6 +104,10 @@ export class ToolbarManager extends BaseManager { this.listeners.dispatch('floating-anchor-changed', { type: 'floating-anchor-changed', group, anchor }); } + buttonMoved(group: ToolbarGroup, value: any, rect: BBox) { + this.listeners.dispatch('button-moved', { type: 'button-moved', group, value, rect }); + } + proxyGroupOptions(caller: string, group: T, options: Partial) { this.listeners.dispatch('proxy-group-options', { type: 'proxy-group-options', caller, group, options }); } diff --git a/packages/ag-charts-community/src/chart/toolbar/toolbar.ts b/packages/ag-charts-community/src/chart/toolbar/toolbar.ts index a59be31ec9..035b7be2dc 100644 --- a/packages/ag-charts-community/src/chart/toolbar/toolbar.ts +++ b/packages/ag-charts-community/src/chart/toolbar/toolbar.ts @@ -3,7 +3,7 @@ import type { AgToolbarGroupPosition } from 'ag-charts-types'; import type { ModuleInstance } from '../../module/baseModule'; import { BaseModuleInstance } from '../../module/module'; import type { ModuleContext } from '../../module/moduleContext'; -import type { BBox } from '../../scene/bbox'; +import { BBox } from '../../scene/bbox'; import { setAttribute } from '../../util/attributeUtil'; import { createElement } from '../../util/dom'; import { initToolbarKeyNav, makeAccessibleClickListener } from '../../util/keynavUtil'; @@ -237,8 +237,26 @@ export class Toolbar extends BaseModuleInstance implements ModuleInstance { if (!this.positions[ToolbarPosition.Floating].has(group)) return; const element = this.elements[ToolbarPosition.Floating]; + if (element.classList.contains(styles.modifiers.hidden)) return; + element.style.top = `${anchor.y - element.offsetHeight - this.margin}px`; element.style.left = `${anchor.x - element.offsetWidth / 2}px`; + + for (const button of this.groupButtons[group]) { + if (button.classList.contains(styles.modifiers.button.hiddenToggled)) return; + + const parent = button.offsetParent as HTMLElement | null; + this.ctx.toolbarManager.buttonMoved( + group, + button.dataset.toolbarValue, + new BBox( + button.offsetLeft - button.offsetWidth + (parent?.offsetLeft ?? 0), + button.offsetTop + (parent?.offsetTop ?? 0), + button.offsetWidth, + button.offsetWidth + ) + ); + } } private onProxyGroupOptions(event: ToolbarProxyGroupOptionsEvent) { diff --git a/packages/ag-charts-enterprise/src/features/annotations/annotations.ts b/packages/ag-charts-enterprise/src/features/annotations/annotations.ts index 5942fdb443..0a726d71d2 100644 --- a/packages/ag-charts-enterprise/src/features/annotations/annotations.ts +++ b/packages/ag-charts-enterprise/src/features/annotations/annotations.ts @@ -197,6 +197,7 @@ export class Annotations extends _ModuleSupport.BaseModuleInstance implements _M ...otherRegions.map((region) => region.addListener('click', this.onCancel.bind(this), All)), ctx.annotationManager.addListener('restore-annotations', this.onRestoreAnnotations.bind(this)), ctx.toolbarManager.addListener('button-pressed', this.onToolbarButtonPress.bind(this)), + ctx.toolbarManager.addListener('button-moved', this.onToolbarButtonMoved.bind(this)), ctx.toolbarManager.addListener('cancelled', this.onToolbarCancelled.bind(this)), ctx.layoutService.addListener('layout-complete', this.onLayoutComplete.bind(this)), () => ctx.domManager.removeStyles(DEFAULT_ANNOTATION_AXIS_BUTTON_CLASS) @@ -290,7 +291,6 @@ export class Annotations extends _ModuleSupport.BaseModuleInstance implements _M switch (event.value) { case 'line-color': this.colorPicker.show({ - anchor: this.annotations.nodes()[active]?.getAnchor(), color: this.getTypedDatum(annotationData[active])?.stroke, onChange: this.onColorPickerChange.bind(this), }); @@ -316,6 +316,11 @@ export class Annotations extends _ModuleSupport.BaseModuleInstance implements _M this.update(); } + private onToolbarButtonMoved(event: _ModuleSupport.ToolbarButtonMovedEvent) { + const { rect } = event; + this.colorPicker.setAnchor(Vec2.add(rect, Vec2.from(0, rect.height + 4))); + } + private onColorPickerChange(color: string) { const { active, annotationData } = this; diff --git a/packages/ag-charts-enterprise/src/features/color-picker/colorPicker.ts b/packages/ag-charts-enterprise/src/features/color-picker/colorPicker.ts index 770a6d8092..83ff7704f8 100644 --- a/packages/ag-charts-enterprise/src/features/color-picker/colorPicker.ts +++ b/packages/ag-charts-enterprise/src/features/color-picker/colorPicker.ts @@ -136,6 +136,14 @@ export class ColorPicker extends _ModuleSupport.BaseModuleInstance implements _M }); } + setAnchor(anchor: { x: number; y: number }) { + const colorPicker = this.element.firstElementChild?.firstElementChild as HTMLDivElement | undefined; + if (colorPicker) { + colorPicker.style.setProperty('left', `${anchor.x}px`); + colorPicker.style.setProperty('top', `${anchor.y}px`); + } + } + hide() { this.element.replaceChildren(); }