Merge pull request #1830 from ag-grid/AG-11892-color-picker-alignment

AG-11892 Update color picker to align to the toolbar color button

packages/ag-charts-community/src/chart/interaction/toolbarManager.ts

@@ -1,19 +1,22 @@
 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';
 
 type EventTypes =
  | 'button-pressed'
  | 'button-toggled'
+ | 'button-moved'
  | 'cancelled'
  | 'floating-anchor-changed'
  | 'group-toggled'
  | 'proxy-group-options';
 type ToolbarEvent =
  | ToolbarButtonPressedEvent
  | ToolbarButtonToggledEvent
+ | ToolbarButtonMovedEvent
  | ToolbarCancelledEvent
  | ToolbarFloatingAnchorChangedEvent
  | ToolbarGroupToggledEvent
@@ -49,6 +52,11 @@ export interface ToolbarButtonToggledEvent<T = any> extends Event<'button-toggle
  visible: boolean;
 }
 
+export interface ToolbarButtonMovedEvent<T = any> extends Event<'button-moved'> {
+ value: T;
+ rect: BBox;
+}
+
 export interface ToolbarProxyGroupOptionsEvent extends Event<'proxy-group-options'> {
  caller: string;
  options: Partial<NonNullable<AgToolbarOptions[ToolbarGroup]>>;
@@ -96,6 +104,10 @@ export class ToolbarManager extends BaseManager<EventTypes, ToolbarEvent> {
  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<T extends ToolbarGroup>(caller: string, group: T, options: Partial<AgToolbarOptions[T]>) {
  this.listeners.dispatch('proxy-group-options', { type: 'proxy-group-options', caller, group, options });
  }

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) {

packages/ag-charts-enterprise/src/features/annotations/annotations.ts

@@ -190,6 +190,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)
@@ -280,7 +281,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),
  });
@@ -306,6 +306,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;
 

packages/ag-charts-enterprise/src/features/color-picker/colorPicker.ts

@@ -138,6 +138,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();
  }