@mathstack/viz 1.1.5 → 2.1.0

package/src/lib/dots/events/dots-events.directive.ts

@@ -0,0 +1,214 @@
+import { Directive, EventEmitter, inject, Input, Output } from '@angular/core';
+import { select } from 'd3';
+import { map, Observable } from 'rxjs';
+import {
+  DEFAULT_TOOLTIP_Y_OFFSET,
+  EventAction,
+  EventsDirective,
+  EventType,
+  HoverMoveAction,
+  InputEventAction,
+  MarksHost,
+  UnlistenFunction,
+} from '../../events';
+import { TooltipPosition } from '../../tooltips';
+import { DotDatum, DOTS, DotsComponent } from '../dots.component';
+import { DotsInteractionOutput } from './dots-interaction-output';
+import { DotsTooltipPositioner } from './dots-tooltip-positioner';
+
+export interface DotsHost<
+  Datum,
+  TDotsComponent extends DotsComponent<Datum> = DotsComponent<Datum>,
+> extends MarksHost<DotsInteractionOutput<Datum>, TDotsComponent> {
+  getDotDatum(): DotDatum | null;
+}
+
+@Directive({
+  selector: '[vicDotsEvents]',
+})
+export class DotsEventsDirective<
+  Datum,
+  TDotsComponent extends DotsComponent<Datum> = DotsComponent<Datum>,
+> extends EventsDirective<DotsHost<Datum>> {
+  @Input()
+  hoverActions:
+    | EventAction<DotsHost<Datum>, DotsInteractionOutput<Datum>>[]
+    | null;
+  @Input()
+  hoverMoveActions:
+    | HoverMoveAction<DotsHost<Datum>, DotsInteractionOutput<Datum>>[]
+    | null;
+  @Input()
+  clickActions:
+    | EventAction<DotsHost<Datum>, DotsInteractionOutput<Datum>>[]
+    | null;
+  @Input()
+  inputEventActions: InputEventAction<
+    DotsHost<Datum>,
+    DotsInteractionOutput<Datum>
+  >[];
+  @Output() interactionOutput = new EventEmitter<
+    DotsInteractionOutput<Datum>
+  >();
+
+  dotDatum: DotDatum;
+  origin: SVGCircleElement;
+
+  public dots = inject<TDotsComponent>(DOTS);
+
+  get marks(): DotsComponent<Datum> {
+    return this.dots;
+  }
+
+  getElements(): Observable<Element[]> {
+    return this.dots.dots$.pipe(map((sel) => sel.nodes()));
+  }
+
+  getDotDatum(): DotDatum | null {
+    return this.dotDatum;
+  }
+
+  setupListeners(elements: Element[]): UnlistenFunction[] {
+    if (this.inputEventActions?.length && this.inputEvent$) {
+      this.events.push(EventType.Input);
+    }
+
+    return this.bindEventListeners(
+      elements,
+      this.buildInteractionListeners({
+        hover: this.hoverActions?.length && {
+          pointerenter: (e, el) => this.onEnter(e, el),
+          pointerleave: (e, el) => this.onLeave(e, el),
+        },
+        hoverMove: this.hoverMoveActions?.length && {
+          pointerenter: (e, el) => this.onEnter(e, el),
+          pointermove: (e, el) => this.onMove(e, el),
+          pointerleave: (e, el) => this.onLeave(e, el),
+        },
+        click: this.clickActions?.length && {
+          click: (e, el) => this.onClick(e, el),
+        },
+      })
+    );
+  }
+
+  onEnter(_: PointerEvent, el: Element): void {
+    this.initFromElement(el);
+    if (this.isEventAllowed(EventType.Hover)) {
+      this.setPositionsFromElement();
+      this.runActions(this.hoverActions, (a) => a.onStart(this));
+    } else if (this.isEventAllowed(EventType.HoverMove)) {
+      this.runActions(this.hoverMoveActions, (a) => {
+        if (a.initialize) {
+          a.initialize(this);
+        }
+      });
+    }
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  onMove(event: PointerEvent, _: Element): void {
+    if (this.isEventAllowed(EventType.HoverMove)) {
+      this.setPositionsFromPointer(event);
+      this.hoverMoveActions.forEach((action) => action.onStart(this));
+    }
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  onLeave(_: PointerEvent, __: Element): void {
+    if (this.isEventAllowed(EventType.Hover)) {
+      this.hoverActions.forEach((action) => action.onEnd(this));
+    } else if (this.isEventAllowed(EventType.HoverMove)) {
+      this.hoverMoveActions.forEach((action) => action.onEnd(this));
+    }
+    this.resetDirective();
+  }
+
+  onClick(event: PointerEvent, el: Element): void {
+    this.initFromElement(el);
+    if (!this.preventAction.click) {
+      if (this.hasEvent(EventType.Hover)) {
+        this.setPositionsFromElement();
+      } else {
+        this.setPositionsFromPointer(event);
+      }
+      this.runActions(this.clickActions, (a) => a.onStart(this));
+    }
+  }
+
+  onClickRemove(): void {
+    if (!this.preventAction.click) {
+      this.runActions(this.clickActions, (a) => a.onEnd(this));
+      this.resetDirective();
+    }
+  }
+
+  onInputEvent(inputValue: unknown): void {
+    if (this.isEventAllowed(EventType.Input)) {
+      if (inputValue === null || inputValue === undefined) {
+        this.inputEventActions.forEach((action) =>
+          action.onEnd(this, inputValue)
+        );
+      } else {
+        this.inputEventActions.forEach((action) =>
+          action.onStart(this, inputValue)
+        );
+      }
+    }
+  }
+
+  initFromElement(el: Element): void {
+    this.origin = el as SVGCircleElement;
+    this.dotDatum = select(el as SVGCircleElement).datum() as DotDatum;
+  }
+
+  setPositionsFromElement(): void {
+    const dotRect = this.origin.getBoundingClientRect();
+    this.positionX = dotRect.width / 2;
+    this.positionY = dotRect.height / 2;
+  }
+
+  getInteractionOutput(type: EventType): DotsInteractionOutput<Datum> {
+    const tooltipData = this.dotDatum
+      ? this.dots.getTooltipData(this.dotDatum)
+      : undefined;
+    const position = new DotsTooltipPositioner({
+      x: this.positionX,
+      y: this.positionY,
+    });
+
+    return {
+      ...tooltipData,
+      origin: this.origin,
+      anchor: {
+        x: this.positionX,
+        y: this.positionY,
+      },
+      defaultPosition: position.fromAnchor({
+        x: 0,
+        y: DEFAULT_TOOLTIP_Y_OFFSET,
+      }),
+      fromAnchor: (offset?: Partial<{ x: number; y: number }>) => {
+        return position.fromAnchor({
+          x: offset?.x ?? 0,
+          y: offset?.y ?? DEFAULT_TOOLTIP_Y_OFFSET,
+        });
+      },
+      customPosition: (positions: TooltipPosition[]) => {
+        return position.customPosition(positions);
+      },
+      type,
+    };
+  }
+
+  emitInteractionOutput(output: DotsInteractionOutput<Datum>): void {
+    this.interactionOutput.emit(output);
+  }
+
+  private resetDirective(): void {
+    this.dotDatum = undefined;
+    this.origin = undefined;
+    this.positionX = undefined;
+    this.positionY = undefined;
+  }
+}

package/src/lib/dots/events/dots-interaction-output.ts

@@ -0,0 +1,15 @@
+import { InteractionOutput } from '../../events/interaction-output';
+import { HtmlTooltipCdkManagedPosition } from '../../tooltips';
+import { DotsTooltipDatum } from '../dots.component';
+
+export interface DotsInteractionOutput<Datum>
+  extends DotsTooltipDatum<Datum>, InteractionOutput {
+  /**
+   * A method that returns a position for the tooltip above the pointer for HoverMove or Click actions or above the center of the dot for Hover actions.
+   *
+   * @param yOffset - Optional offset from the pointer's y position.
+   */
+  fromAnchor: (
+    offset?: Partial<{ x: number; y: number }>
+  ) => HtmlTooltipCdkManagedPosition;
+}

package/src/lib/dots/events/dots-tooltip-positioner.ts

@@ -0,0 +1,24 @@
+import { TooltipPositioner } from '../../events/tooltip-positioner';
+import { HtmlTooltipCdkManagedPosition } from '../../tooltips';
+import { TooltipPositionBuilder } from '../../tooltips/html-tooltip/config/position/tooltip-position-builder';
+
+const DEFAULT_POSITIONS = [
+  new TooltipPositionBuilder().fromCenter().attachBottomCenter().getPosition(),
+  new TooltipPositionBuilder().fromCenter().attachBottomLeft().getPosition(),
+  new TooltipPositionBuilder().fromCenter().attachBottomRight().getPosition(),
+];
+
+export class DotsTooltipPositioner extends TooltipPositioner {
+  constructor(private anchor: { x: number; y: number }) {
+    super();
+  }
+
+  fromAnchor(offset: { x: number; y: number }): HtmlTooltipCdkManagedPosition {
+    const positionsWithOffsets = new TooltipPositionBuilder().applyOffsets(
+      DEFAULT_POSITIONS,
+      this.anchor.x + offset.x,
+      this.anchor.y - offset.y
+    );
+    return new HtmlTooltipCdkManagedPosition(positionsWithOffsets);
+  }
+}

package/{lib/dots/index.d.ts → src/lib/dots/index.ts}

@@ -1,9 +1,10 @@
-export * from './config/dots-builder';
-export * from './config/dots-config';
-export * from './config/dots-options';
-export * from './dots.component';
-export * from './dots.module';
-export * from './events/actions/dots-hover-actions';
-export * from './events/actions/dots-hover-move-actions';
-export * from './events/dots-events.directive';
-export * from './events/dots-interaction-output';
+export * from './config/dots-builder';
+export * from './config/dots-config';
+export * from './config/dots-options';
+export * from './dots.component';
+export * from './dots.module';
+export * from './events/actions/dots-hover-actions';
+export * from './events/actions/dots-hover-move-actions';
+export * from './events/dots-events.directive';
+export * from './events/dots-interaction-output';
+export * from './events/dots-tooltip-positioner';

package/src/lib/events/events.directive.ts

@@ -0,0 +1,184 @@
+import {
+  AfterViewInit,
+  DestroyRef,
+  Directive,
+  inject,
+  Input,
+  OnDestroy,
+  Renderer2,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { pointer } from 'd3';
+import { Observable } from 'rxjs';
+import {
+  ActionHost,
+  EventAction,
+  EventType,
+  UnlistenFunction,
+} from './events.types';
+
+@Directive()
+export abstract class EventsDirective<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Host extends ActionHost<unknown> = any,
+>
+  implements AfterViewInit, OnDestroy
+{
+  @Input() clickRemoveEvent$: Observable<void>;
+  @Input() inputEvent$: Observable<unknown>;
+  protected destroyRef = inject(DestroyRef);
+  protected renderer = inject(Renderer2);
+
+  protected abstract getElements(): Observable<Element[]>;
+  protected abstract onClickRemove(): void;
+  protected abstract onInputEvent(inputValue: unknown): void;
+  protected abstract setPositionsFromElement(): void;
+  protected abstract setupListeners(elements: Element[]): UnlistenFunction[];
+
+  protected unlistenFns: UnlistenFunction[] = [];
+  protected events: EventType[] = [];
+  preventAction: Record<EventType, boolean> = {
+    click: false,
+    hover: false,
+    hoverMove: false,
+    input: false,
+  };
+  positionX: number;
+  positionY: number;
+
+  ngAfterViewInit(): void {
+    this.getElements()
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((els) => {
+        this.unlistenFns.forEach((fn) => fn());
+        this.unlistenFns = this.setupListeners(els);
+      });
+
+    if (this.clickRemoveEvent$) {
+      this.clickRemoveEvent$
+        .pipe(takeUntilDestroyed(this.destroyRef))
+        .subscribe(() => this.onClickRemove());
+    }
+
+    if (this.inputEvent$) {
+      this.inputEvent$
+        .pipe(takeUntilDestroyed(this.destroyRef))
+        .subscribe((event) => this.onInputEvent(event));
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.unlistenFns.forEach((fn) => fn());
+  }
+
+  protected buildInteractionListeners(
+    handlers: Partial<
+      Record<
+        EventType,
+        Partial<{
+          pointerenter: (e: PointerEvent, el: Element) => void;
+          pointermove: (e: PointerEvent, el: Element) => void;
+          pointerleave: (e: PointerEvent, el: Element) => void;
+          click: (e: PointerEvent, el: Element) => void;
+        }>
+      >
+    >
+  ): Record<string, (e: PointerEvent, el: Element) => void> {
+    const listeners: Record<string, (e: PointerEvent, el: Element) => void> =
+      {};
+
+    for (const eventType of Object.keys(handlers) as EventType[]) {
+      const handler = handlers[eventType];
+      if (!handler) continue;
+
+      this.events.push(eventType);
+
+      for (const [domEvent, fn] of Object.entries(handler)) {
+        listeners[domEvent] = fn;
+      }
+    }
+
+    return listeners;
+  }
+
+  protected bindEventListeners(
+    elements: Element[],
+    handlers: Partial<{
+      pointerenter: (event: PointerEvent, el: Element) => void;
+      pointermove: (event: PointerEvent, el: Element) => void;
+      pointerleave: (event: PointerEvent, el: Element) => void;
+      click: (event: PointerEvent, el: Element) => void;
+    }>
+  ): UnlistenFunction[] {
+    return elements.map((el) => {
+      const unlistenFns: UnlistenFunction[] = [];
+
+      if (handlers.pointerenter)
+        unlistenFns.push(
+          this.renderer.listen(el, 'pointerenter', (e) =>
+            handlers.pointerenter(e, el)
+          )
+        );
+      if (handlers.pointermove)
+        unlistenFns.push(
+          this.renderer.listen(el, 'pointermove', (e) =>
+            handlers.pointermove(e, el)
+          )
+        );
+      if (handlers.pointerleave)
+        unlistenFns.push(
+          this.renderer.listen(el, 'pointerleave', (e) =>
+            handlers.pointerleave(e, el)
+          )
+        );
+      if (handlers.click)
+        unlistenFns.push(
+          this.renderer.listen(el, 'click', (e) => handlers.click(e, el))
+        );
+
+      return () => unlistenFns.forEach((fn) => fn());
+    });
+  }
+
+  disableOtherActions(eventType: EventType): void {
+    Object.keys(this.preventAction).forEach((key) => {
+      if (key !== eventType) {
+        this.preventAction[key as EventType] = true;
+      }
+    });
+  }
+
+  resumeOtherActions(eventType: EventType, cancelCurrentActions = true): void {
+    Object.keys(this.preventAction).forEach((key) => {
+      const isCurrent = key === eventType;
+      const shouldResume = !isCurrent || cancelCurrentActions;
+      if (shouldResume) {
+        this.preventAction[key as EventType] = false;
+      }
+    });
+  }
+
+  setPositionsFromPointer(event: PointerEvent): void {
+    [this.positionX, this.positionY] = pointer(event);
+  }
+
+  protected runActions<T extends EventAction<Host>>(
+    actions: T[] | null | undefined,
+    fn: (action: T) => void
+  ): void {
+    if (!actions?.length) return;
+    actions.forEach(fn);
+  }
+
+  protected hasEvent(event: EventType): boolean {
+    return this.events.includes(event);
+  }
+
+  protected isEventAllowed(event: EventType): boolean {
+    return this.hasEvent(event) && !this.preventAction[event];
+  }
+
+  protected asHost(): Host {
+    return this as unknown as Host;
+  }
+}

package/src/lib/events/events.types.ts

@@ -0,0 +1,57 @@
+import { Renderer2 } from '@angular/core';
+
+export type UnlistenFunction = () => void;
+export type ListenElement = HTMLElement | SVGElement;
+
+export enum EventType {
+  Click = 'click',
+  Hover = 'hover',
+  HoverMove = 'hoverMove',
+  Input = 'input',
+}
+
+export interface EventAction<
+  Host extends ActionHost<Output>,
+  Output = unknown,
+> {
+  onStart: (host: Host) => void;
+  onEnd: (host: Host) => void;
+}
+
+export interface HoverMoveAction<
+  Host extends ActionHost<Output>,
+  Output = unknown,
+> extends EventAction<Host> {
+  initialize?: (host: Host) => void;
+}
+
+export interface InputEventAction<
+  Host extends ActionHost<Output>,
+  Output = unknown,
+> {
+  onStart: (host: Host, ...args) => void;
+  onEnd: (host: Host, ...args) => void;
+}
+
+export interface ActionHost<Output> {
+  getInteractionOutput(type: EventType): Output;
+  setPositionsFromElement(): void;
+  setPositionsFromPointer(event: PointerEvent): void;
+  disableOtherActions(eventType: EventType): void;
+  resumeOtherActions(
+    eventType: EventType,
+    cancelCurrentActions?: boolean
+  ): void;
+  emitInteractionOutput(output: Output): void;
+}
+
+export interface MarksHost<
+  Output,
+  MarksComponent = unknown,
+> extends ActionHost<Output> {
+  marks: MarksComponent;
+}
+
+export interface EventStrategy {
+  bindTo(elements: Element[], renderer: Renderer2): UnlistenFunction[];
+}

package/{lib/events/index.d.ts → src/lib/events/index.ts}

@@ -1,4 +1,4 @@
-export * from './events.directive';
-export * from './events.types';
-export * from './interaction-output';
-export * from './tooltip-positioner';
+export * from './events.directive';
+export * from './events.types';
+export * from './interaction-output';
+export * from './tooltip-positioner';

package/src/lib/events/interaction-output.ts

@@ -0,0 +1,34 @@
+import { EventType } from '../events';
+import { HtmlTooltipCdkManagedPosition, TooltipPosition } from '../tooltips';
+
+export interface InteractionOutput<Anchor = { x: number; y: number }> {
+  /**
+   * If used with Hover actions, the coordinates of the center of the origin element relative to the top left corner of the origin.
+   *
+   * If used with HoverMove actions, the position of the pointer relative to the top left corner of the origin element.
+   */
+  anchor: Anchor;
+  /**
+   * The origin element of the tooltip.
+   */
+  origin: SVGGraphicsElement;
+  /**
+   * The type of the event that triggered the interaction.
+   */
+  type: EventType;
+  /**
+   * The default position of the tooltip.
+   */
+  defaultPosition: HtmlTooltipCdkManagedPosition;
+  /**
+   * A method that positions the tooltip with a user specified offset from the tooltip's anchor point.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  fromAnchor: (...args: any[]) => HtmlTooltipCdkManagedPosition;
+  /**
+   * A method that allows a user to provide custom positions for the tooltip.
+   */
+  customPosition: (
+    positions: TooltipPosition[]
+  ) => HtmlTooltipCdkManagedPosition;
+}

package/src/lib/events/tooltip-positioner.ts

@@ -0,0 +1,15 @@
+import {
+  HtmlTooltipCdkManagedPosition,
+  TooltipPosition,
+} from '../tooltips/html-tooltip/config/position/tooltip-position';
+
+export const DEFAULT_TOOLTIP_Y_OFFSET = 2;
+
+export abstract class TooltipPositioner {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  abstract fromAnchor(...args: any): HtmlTooltipCdkManagedPosition;
+
+  customPosition(positions: TooltipPosition[]): HtmlTooltipCdkManagedPosition {
+    return new HtmlTooltipCdkManagedPosition(positions);
+  }
+}

package/src/lib/fill-definitions/fill-definitions.ts

@@ -0,0 +1,4 @@
+export interface FillDefinition<Datum> {
+  defId: string;
+  shouldApply: (d: Datum) => boolean;
+}

package/{lib/fill-definitions/index.d.ts → src/lib/fill-definitions/index.ts}

@@ -1 +1 @@
-export * from './fill-definitions';
+export * from './fill-definitions';