@mathstack/viz 2.1.0 → 2.2.0

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

@@ -1,214 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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/src/lib/dots/index.ts

@@ -1,10 +0,0 @@
-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

@@ -1,184 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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/src/lib/events/index.ts

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

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

@@ -1,34 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

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

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

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