[WIP] feat: Add timeline graph animations

src/animations/GraphTimeline.ts

@@ -0,0 +1,222 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+
+import EASING from '@/constants/easings';
+import { MinPriorityQueue } from '@/data';
+import {
+  AnimationSettings,
+  EdgeDataType,
+  TimelineAnimationSettings
+} from '@/types/animations';
+import { VertexData } from '@/types/data';
+import { isEdgeData, isVertexData } from '@/utils/models';
+
+import { DirectedGraph, UndirectedGraph } from '..';
+
+// TODO - implement config support
+type SequenceAnimationConfig = {
+  delay?: number;
+  paused?: boolean;
+  repeat?: number;
+  repeatDelay?: number;
+  yoyo?: boolean;
+  onComplete?: () => void;
+  onRepeat?: () => void;
+  onReverseComplete?: () => void;
+  onStart: () => void;
+  onUpdate?: () => void;
+};
+
+type AnimationStep = {
+  fn: () => void;
+  delay: number;
+};
+
+export default class GraphTimeline<
+  V,
+  E,
+  G extends DirectedGraph<V, E> | UndirectedGraph<V, E>
+> {
+  private readonly steps: MinPriorityQueue<AnimationStep> =
+    new MinPriorityQueue();
+  private maxStartDelay = 0;
+  private maxEndDelay = 0;
+
+  constructor(
+    private readonly graph: G,
+    private readonly config?: SequenceAnimationConfig
+  ) {}
+
+  insertVertex(
+    data: VertexData<V>,
+    duration: number,
+    settings?: TimelineAnimationSettings
+  ) {
+    return this.addStep(
+      this.graph.insertVertex.bind(this.graph),
+      data,
+      duration,
+      this.maxEndDelay,
+      settings
+    );
+  }
+
+  removeVertex(
+    key: string,
+    duration: number,
+    settings?: TimelineAnimationSettings
+  ) {
+    return this.addStep(
+      this.graph.removeVertex.bind(this.graph),
+      key,
+      duration,
+      this.maxEndDelay,
+      settings
+    );
+  }
+
+  insertEdge(
+    data: EdgeDataType<G, V, E>,
+    duration: number,
+    settings?: TimelineAnimationSettings
+  ) {
+    return this.addStep(
+      this.graph.insertEdge.bind(this.graph),
+      data,
+      duration,
+      this.maxEndDelay,
+      settings
+    );
+  }
+
+  removeEdge(
+    key: string,
+    duration: number,
+    settings?: TimelineAnimationSettings
+  ) {
+    return this.addStep(
+      this.graph.removeEdge.bind(this.graph),
+      key,
+      duration,
+      this.maxEndDelay,
+      settings
+    );
+  }
+
+  insertSimultaneous(
+    data: Array<VertexData<V> | EdgeDataType<V, E, G>>,
+    duration: number,
+    settings?: TimelineAnimationSettings
+  ) {
+    const edges = data.filter(isEdgeData);
+    const vertices = data.filter(isVertexData);
+    this.addStep(
+      this.graph.insertBatch.bind(this.graph),
+      { edges, vertices },
+      duration,
+      this.maxEndDelay,
+      settings
+    );
+  }
+
+  insertSequential(
+    data:
+      | Array<VertexData<V> | EdgeDataType<V, E, G>>
+      | Array<Array<VertexData<V> | EdgeDataType<V, E, G>>>,
+    duration: number,
+    settings?: TimelineAnimationSettings
+  ) {
+    const minDelay = this.maxEndDelay;
+    data.forEach((d, i) => {
+      if (Array.isArray(d)) {
+        this.addStep(
+          this.graph.insertBatch.bind(this.graph),
+          {
+            edges: d.filter(isEdgeData),
+            vertices: d.filter(isVertexData)
+          },
+          duration,
+          minDelay + (i * duration) / data.length,
+          settings
+        );
+        return;
+      }
+      if (isEdgeData(d)) {
+        this.addStep(
+          this.graph.insertEdge.bind(this.graph),
+          d,
+          duration,
+          minDelay + (i * duration) / data.length,
+          settings
+        );
+      } else {
+        this.addStep(
+          this.graph.insertVertex.bind(this.graph),
+          d,
+          duration,
+          minDelay + (i * duration) / data.length,
+          settings
+        );
+      }
+    });
+    return this;
+  }
+
+  removeSimultaneous(
+    keys: Array<string>,
+    duration: number,
+    settings?: TimelineAnimationSettings
+  ) {
+    // TODO - implement
+    return this;
+  }
+
+  removeSequential(
+    keys: Array<string>,
+    duration: number,
+    settings?: TimelineAnimationSettings
+  ) {
+    // TODO - implement
+    return this;
+  }
+
+  async play() {
+    let currentDelay = 0;
+    while (!this.steps.isEmpty()) {
+      const { fn, delay } = this.steps.dequeue()!;
+      // eslint-disable-next-line no-await-in-loop
+      await this.sleep(delay - currentDelay);
+      currentDelay = delay;
+      fn();
+    }
+  }
+
+  private sleep(ms: number) {
+    // eslint-disable-next-line no-promise-executor-return
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+
+  private addStep<D>(
+    fn: (data: D, settings?: AnimationSettings) => void,
+    data: D,
+    duration: number,
+    delay: number,
+    settings?: TimelineAnimationSettings
+  ) {
+    this.maxStartDelay = Math.max(this.maxStartDelay, delay);
+    this.maxEndDelay = Math.max(this.maxEndDelay, delay + duration);
+    this.steps.enqueue(
+      {
+        fn: () => {
+          fn(data, {
+            duration,
+            easing: settings?.easing || EASING.bounce,
+            onComplete: settings?.onComplete
+          });
+        },
+        delay
+      },
+      delay
+    );
+    return this;
+  }
+}

src/data/index.ts

@@ -0,0 +1,3 @@
+export { default as LinkedList } from './lists/LinkedList';
+export { default as MinPriorityQueue } from './queues/MinPriorityQueue';
+export { default as Queue } from './queues/Queue';

src/data/LinkedList.ts → src/data/lists/LinkedList.ts

@@ -1,19 +1,19 @@
 class Node<T> {
-  public next: Node<T> | null = null;
+  next: Node<T> | null = null;
 
   constructor(public value: T) {}
 }
 
 export default class LinkedList<T> {
-  public head: Node<T> | null = null;
-  public tail: Node<T> | null = null;
+  head: Node<T> | null = null;
+  tail: Node<T> | null = null;
   private length$ = 0;
 
-  public get length(): number {
+  get length(): number {
     return this.length$;
   }
 
-  public append(value: T): void {
+  append(value: T): void {
     const node = new Node(value);
 
     if (!this.tail) {
@@ -27,7 +27,7 @@ export default class LinkedList<T> {
     this.length$++;
   }
 
-  public prepend(value: T): void {
+  prepend(value: T): void {
     const node = new Node(value);
 
     if (!this.head) {
@@ -41,7 +41,7 @@ export default class LinkedList<T> {
     this.length$++;
   }
 
-  public popLeft(): T | null {
+  popLeft(): T | null {
     if (!this.head) {
       return null;
     }

src/data/queues/MinPriorityQueue.ts

@@ -0,0 +1,7 @@
+import PriorityQueue from './PriorityQueue';
+
+export default class MinPriorityQueue<T> extends PriorityQueue<T> {
+  constructor() {
+    super((a, b) => a - b);
+  }
+}

src/data/queues/PriorityQueue.ts

@@ -0,0 +1,117 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+export default class PriorityQueue<T> {
+  private readonly heap: Array<{ data: T; priority: number }> = [];
+
+  constructor(private readonly comparator: (a: number, b: number) => number) {}
+
+  get length(): number {
+    return this.heap.length;
+  }
+
+  isEmpty(): boolean {
+    return this.length === 0;
+  }
+
+  getItems(): Array<T> {
+    const pqCopy = new PriorityQueue(this.comparator);
+    pqCopy.heap.push(...this.heap);
+
+    const items: Array<T> = [];
+    while (pqCopy.length > 0) {
+      items.push(pqCopy.dequeue() as T);
+    }
+
+    return items;
+  }
+
+  enqueue(data: T, priority: number) {
+    this.heap.push({ data, priority });
+    this.siftUp(this.heap.length - 1);
+  }
+
+  enqueueMany(items: Array<{ item: T; priority: number }>) {
+    items.forEach(({ item, priority }) => this.enqueue(item, priority));
+  }
+
+  dequeue(): T | undefined {
+    if (this.heap.length === 0) return undefined;
+
+    const top = this.heap[0]!.data;
+    const bottom = this.heap.pop()!;
+
+    if (this.heap.length > 0) {
+      this.heap[0] = bottom;
+      this.siftDown(0);
+    }
+
+    return top;
+  }
+
+  private siftUp(idx: number) {
+    while (idx > 0) {
+      const parentIdx = this.parentIndex(idx);
+
+      if (
+        this.comparator(
+          this.heap[idx]!.priority,
+          this.heap[parentIdx]!.priority
+        ) >= 0
+      ) {
+        break;
+      }
+
+      this.swap(idx, parentIdx);
+      idx = parentIdx;
+    }
+  }
+
+  private siftDown(idx: number) {
+    // eslint-disable-next-line no-constant-condition
+    while (true) {
+      const leftIdx = this.leftChildIndex(idx);
+      const rightIdx = this.rightChildIndex(idx);
+      let smallestIdx = idx;
+
+      if (leftIdx < this.heap.length) {
+        if (
+          this.comparator(
+            this.heap[leftIdx]!.priority,
+            this.heap[smallestIdx]!.priority
+          ) < 0
+        ) {
+          smallestIdx = leftIdx;
+        }
+        if (
+          rightIdx < this.heap.length &&
+          this.comparator(
+            this.heap[rightIdx]!.priority,
+            this.heap[smallestIdx]!.priority
+          ) < 0
+        ) {
+          smallestIdx = rightIdx;
+        }
+      }
+
+      if (smallestIdx === idx) break;
+
+      this.swap(idx, smallestIdx);
+      idx = smallestIdx;
+    }
+  }
+
+  private parentIndex(index: number): number {
+    return Math.floor((index - 1) / 2);
+  }
+
+  private leftChildIndex(index: number): number {
+    return index * 2 + 1;
+  }
+
+  private rightChildIndex(index: number): number {
+    return index * 2 + 2;
+  }
+
+  private swap(a: number, b: number) {
+    [this.heap[a], this.heap[b]] = [this.heap[b]!, this.heap[a]!];
+  }
+}