@twick/2d 0.11.0

package/src/lib/utils/diff.test.ts

@@ -0,0 +1,453 @@
+import {describe, expect, it} from 'vitest';
+import {applyTransformDiff, getTransformDiff} from './diff';
+
+describe('diff', () => {
+  it('Insert single item', () => {
+    const from = [
+      {
+        id: '1',
+      },
+      {
+        id: '2',
+      },
+      {
+        id: '3',
+      },
+    ];
+    const to = [
+      {
+        id: '1',
+      },
+      {
+        id: '4',
+      },
+      {
+        id: '2',
+      },
+      {
+        id: '3',
+      },
+    ];
+    const diff = getTransformDiff(from, to);
+    applyTransformDiff(from, diff, ({id}) => ({id}));
+    expect(from).toEqual(to);
+  });
+
+  it('Insert single item when contain have two item with equal', () => {
+    const from = [
+      {
+        id: '1',
+      },
+      {
+        id: '2',
+      },
+      {
+        id: '1',
+      },
+      {
+        id: '3',
+      },
+      {
+        id: '1',
+      },
+    ];
+    const to = [
+      {
+        id: '1',
+      },
+      {
+        id: '2',
+      },
+      {
+        id: '1',
+      },
+      {
+        id: '4',
+      },
+      {
+        id: '3',
+      },
+      {
+        id: '1',
+      },
+    ];
+    const diff = getTransformDiff(from, to);
+    applyTransformDiff(from, diff, ({id}) => ({id}));
+    expect(from).toEqual(to);
+  });
+  it('Insert multiple item', () => {
+    const from = [
+      {
+        id: '1',
+      },
+      {
+        id: '2',
+      },
+      {
+        id: '1',
+      },
+      {
+        id: '3',
+      },
+      {
+        id: '1',
+      },
+    ];
+    const to = [
+      {
+        id: '1',
+      },
+      {
+        id: '7',
+      },
+      {
+        id: '2',
+      },
+      {
+        id: '1',
+      },
+      {
+        id: '4',
+      },
+      {
+        id: '3',
+      },
+      {
+        id: '1',
+      },
+      {
+        id: '9',
+      },
+    ];
+    const diff = getTransformDiff(from, to);
+    applyTransformDiff(from, diff, ({id}) => ({id}));
+    expect(from).toEqual(to);
+  });
+  it('Insert single item with equal id', () => {
+    const from = [
+      {
+        id: '1',
+      },
+      {
+        id: '2',
+      },
+      {
+        id: '3',
+      },
+    ];
+    const to = [
+      {
+        id: '1',
+      },
+      {
+        id: '2',
+      },
+      {
+        id: '1',
+      },
+      {
+        id: '3',
+      },
+    ];
+    const diff = getTransformDiff(from, to);
+    expect(diff.inserted).toEqual([]);
+    applyTransformDiff(from, diff, ({id}) => ({id}));
+    expect(from).toEqual(to);
+  });
+  it('Insert multiple item with equal id', () => {
+    const from = [
+      {
+        id: '1',
+      },
+      {
+        id: '2',
+      },
+      {
+        id: '3',
+      },
+    ];
+    const to = [
+      {
+        id: '1',
+      },
+      {
+        id: '2',
+      },
+      {
+        id: '1',
+      },
+      {
+        id: '3',
+      },
+      {
+        id: '1',
+      },
+      {
+        id: '1',
+      },
+    ];
+    const diff = getTransformDiff(from, to);
+    expect(diff.inserted).toEqual([]);
+    applyTransformDiff(from, diff, ({id}) => ({id}));
+    expect(from).toEqual(to);
+  });
+  it('Delete single item', () => {
+    const from = [
+      {
+        id: '1',
+      },
+      {
+        id: '2',
+      },
+      {
+        id: '3',
+      },
+    ];
+    const to = [
+      {
+        id: '1',
+      },
+      {
+        id: '3',
+      },
+    ];
+    const diff = getTransformDiff(from, to);
+    expect(diff.deleted.map(({current}) => current)).toEqual([
+      {
+        id: '2',
+      },
+    ]);
+  });
+  it('Delete multiple item', () => {
+    const from = [
+      {
+        id: '1',
+      },
+      {
+        id: '2',
+      },
+      {
+        id: '3',
+      },
+    ];
+    const to = [
+      {
+        id: '1',
+      },
+    ];
+    const diff = getTransformDiff(from, to);
+    expect(diff.deleted.map(({current}) => current)).toEqual([
+      {
+        id: '2',
+      },
+      {
+        id: '3',
+      },
+    ]);
+  });
+  it('Delete single item with equal id', () => {
+    const from = [
+      {
+        id: '1',
+      },
+      {
+        id: '2',
+      },
+      {
+        id: '3',
+      },
+      {
+        id: '1',
+      },
+    ];
+    const to = [
+      {
+        id: '1',
+      },
+      {
+        id: '2',
+      },
+      {
+        id: '3',
+      },
+    ];
+    const diff = getTransformDiff(from, to);
+    expect(diff.deleted).toEqual([]);
+    expect(diff.transformed).toContainEqual({
+      from: {
+        before: {
+          id: '3',
+        },
+        beforeIdIndex: 0,
+        current: {
+          id: '1',
+        },
+        currentIndex: 3,
+      },
+      insert: false,
+      remove: true,
+      to: {
+        before: undefined,
+        beforeIdIndex: -1,
+        current: {
+          id: '1',
+        },
+        currentIndex: 0,
+      },
+    });
+  });
+  it('Delete single item with equal id', () => {
+    const from = [
+      {
+        id: '1',
+      },
+      {
+        id: '2',
+      },
+      {
+        id: '1',
+      },
+      {
+        id: '3',
+      },
+      {
+        id: '1',
+      },
+    ];
+    const to = [
+      {
+        id: '1',
+      },
+      {
+        id: '2',
+      },
+      {
+        id: '3',
+      },
+    ];
+    const diff = getTransformDiff(from, to);
+    expect(diff.deleted).toEqual([]);
+    expect(diff.transformed).toContainEqual({
+      from: {
+        before: {
+          id: '2',
+        },
+        beforeIdIndex: 0,
+        current: {
+          id: '1',
+        },
+        currentIndex: 2,
+      },
+      insert: false,
+      remove: true,
+      to: {
+        before: undefined,
+        beforeIdIndex: -1,
+        current: {
+          id: '1',
+        },
+        currentIndex: 0,
+      },
+    });
+    expect(diff.transformed).toContainEqual({
+      from: {
+        before: {
+          id: '3',
+        },
+        beforeIdIndex: 0,
+        current: {
+          id: '1',
+        },
+        currentIndex: 4,
+      },
+      insert: false,
+      remove: true,
+      to: {
+        before: undefined,
+        beforeIdIndex: -1,
+        current: {
+          id: '1',
+        },
+        currentIndex: 0,
+      },
+    });
+  });
+
+  it('Insert single item with moving', () => {
+    const from = [
+      {
+        id: '1',
+      },
+      {
+        id: '2',
+      },
+      {
+        id: '3',
+      },
+    ];
+    const to = [
+      {
+        id: '1',
+      },
+      {
+        id: '3',
+      },
+      {
+        id: '5',
+      },
+      {
+        id: '2',
+      },
+    ];
+    const diff = getTransformDiff(from, to);
+    applyTransformDiff(from, diff, ({id}) => ({id}));
+    expect(from).toEqual([
+      {
+        id: '1',
+      },
+      {
+        id: '2',
+      },
+      {
+        id: '3',
+      },
+      {
+        id: '5',
+      },
+    ]);
+  });
+
+  it('Insert item after transformed insert', () => {
+    const from = [
+      {
+        id: '1',
+      },
+      {
+        id: '2',
+      },
+      {
+        id: '3',
+      },
+    ];
+    const to = [
+      {
+        id: '1',
+      },
+      {
+        id: '2',
+      },
+      {
+        id: '1',
+      },
+      {
+        id: '4',
+      },
+      {
+        id: '3',
+      },
+    ];
+    const diff = getTransformDiff(from, to);
+    applyTransformDiff(from, diff, ({id}) => ({id}));
+    expect(from).toEqual(to);
+  });
+});

package/src/lib/utils/diff.ts

@@ -0,0 +1,148 @@
+interface TransformDiff<T> {
+  inserted: TransformDiffItem<T>[];
+  deleted: TransformDiffItem<T>[];
+  transformed: TransformDiffItemTransformed<T>[];
+}
+
+interface TransformDiffItem<T> {
+  before?: T;
+  beforeIdIndex: number;
+  current: T;
+  currentIndex: number;
+}
+
+interface TransformDiffItemTransformed<T> {
+  insert: boolean;
+  remove: boolean;
+  from: TransformDiffItem<T>;
+  to: TransformDiffItem<T>;
+}
+
+interface ApplyTransformInserted<T> {
+  item: TransformDiffItem<T>;
+  order: number;
+}
+
+interface ApplyTransformResult<T> {
+  inserted: ApplyTransformInserted<T>[];
+}
+
+interface Idable {
+  id: string;
+}
+
+function getIdMap<T extends Idable>(list: T[]) {
+  const map = new Map<string, TransformDiffItem<T>[]>();
+  let before: T | undefined = undefined;
+  for (const [index, current] of list.entries()) {
+    const currentArray = map.get(current.id) ?? [];
+    if (!map.has(current.id)) {
+      map.set(current.id, currentArray);
+    }
+
+    currentArray.push({
+      before,
+      current,
+      beforeIdIndex: before ? map.get(before.id)!.length - 1 : -1,
+      currentIndex: index,
+    });
+    before = current;
+  }
+  return map;
+}
+
+export function getTransformDiff<T extends Idable>(
+  from: T[],
+  to: T[],
+): TransformDiff<T> {
+  const diff: TransformDiff<T> = {
+    inserted: [],
+    deleted: [],
+    transformed: [],
+  };
+
+  const fromMap = getIdMap(from);
+  const toMap = getIdMap(to);
+
+  for (const [key, fromItem] of fromMap.entries()) {
+    const toItem = toMap.get(key);
+    if (toItem) {
+      toMap.delete(key);
+      for (let i = 0; i < Math.max(fromItem.length, toItem.length); i++) {
+        const insert = i >= fromItem.length;
+        const remove = i >= toItem.length;
+
+        const fromNode = !insert ? fromItem[i] : fromItem[fromItem.length - 1];
+        const toNode = !remove ? toItem[i] : toItem[toItem.length - 1];
+
+        diff.transformed.push({
+          insert,
+          remove,
+          from: fromNode,
+          to: toNode,
+        });
+      }
+    } else {
+      for (const node of fromItem) {
+        diff.deleted.push(node);
+      }
+    }
+  }
+
+  for (const toItem of toMap.values()) {
+    for (const node of toItem) {
+      diff.inserted.push(node);
+    }
+  }
+
+  return diff;
+}
+
+export function applyTransformDiff<T extends Idable>(
+  current: T[],
+  diff: TransformDiff<T>,
+  cloner: (original: T) => T,
+): ApplyTransformResult<T> {
+  function insert(item: TransformDiffItem<T>) {
+    let idIndex = -1;
+    const index = item.before
+      ? current.findIndex(({id}) => {
+          if (id === item.before?.id) {
+            idIndex++;
+            if (idIndex === item.beforeIdIndex) return true;
+          }
+          return false;
+        })
+      : 0;
+    current.splice(index + 1, 0, item.current);
+  }
+
+  const result: ApplyTransformResult<T> = {
+    inserted: diff.inserted.map(item => ({
+      item,
+      order: item.currentIndex,
+    })),
+  };
+
+  for (const item of diff.transformed) {
+    if (!item.insert) continue;
+
+    const from = item.from;
+    item.from = {
+      ...item.to,
+      current: cloner(from.current),
+    };
+    result.inserted.push({
+      item: item.from,
+      order: item.to.currentIndex,
+    });
+  }
+
+  result.inserted.sort((a, b) => a.order - b.order);
+
+  for (const item of result.inserted) {
+    insert(item.item);
+  }
+
+  return result;
+}

package/src/lib/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './CanvasUtils';
+export * from './is';

package/src/lib/utils/is.ts

@@ -0,0 +1,11 @@
+/**
+ * Create a predicate that checks if the given object is an instance of the
+ * given class.
+ *
+ * @param klass - The class to check against.
+ */
+export function is<T>(
+  klass: new (...args: any[]) => T,
+): (object: any) => object is T {
+  return (object): object is T => object instanceof klass;
+}

package/src/lib/utils/makeSignalExtensions.ts

@@ -0,0 +1,30 @@
+import type {SignalExtensions} from '@twick/core';
+import {capitalize} from '@twick/core';
+import type {PropertyMetadata} from '../decorators';
+
+export function makeSignalExtensions<TSetterValue, TValue extends TSetterValue>(
+  meta: Partial<PropertyMetadata<TValue>> = {},
+  owner?: any,
+  name?: string,
+) {
+  const extensions: Partial<SignalExtensions<TSetterValue, TValue>> = {};
+
+  if (name && owner) {
+    const setter = meta.setter ?? owner?.[`set${capitalize(name)}`];
+    if (setter) {
+      extensions.setter = setter.bind(owner);
+    }
+
+    const getter = meta.getter ?? owner?.[`get${capitalize(name)}`];
+    if (getter) {
+      extensions.getter = getter.bind(owner);
+    }
+
+    const tweener = meta.tweener ?? owner?.[`tween${capitalize(name)}`];
+    if (tweener) {
+      extensions.tweener = tweener.bind(owner);
+    }
+  }
+
+  return extensions;
+}

package/src/lib/utils/video/declarations.d.ts

@@ -0,0 +1 @@
+declare module 'mp4box';

package/src/lib/utils/video/ffmpeg-client.ts

@@ -0,0 +1,50 @@
+export class ImageCommunication {
+  public constructor() {
+    if (!import.meta.hot) {
+      throw new Error('FfmpegVideoFrame can only be used with HMR.');
+    }
+  }
+
+  public async getFrame(
+    id: string,
+    src: string,
+    time: number,
+    duration: number,
+    fps: number,
+  ) {
+    const response = await fetch('/twick-ffmpeg-decoder/video-frame', {
+      method: 'POST',
+      headers: {
+        // eslint-disable-next-line
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        id,
+        filePath: src,
+        startTime: time,
+        duration,
+        fps,
+      }),
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    const width = parseInt(response.headers.get('X-Frame-Width') || '1080', 10);
+    const height = parseInt(
+      response.headers.get('X-Frame-Height') || '1920',
+      10,
+    );
+
+    const arrayBuffer = await response.arrayBuffer();
+
+    const imageData = new ImageData(
+      new Uint8ClampedArray(arrayBuffer),
+      width,
+      height,
+    );
+
+    return createImageBitmap(imageData);
+  }
+}