Class PagePinching

apps/client/src/code/pages/page/camera/pinching.ts:13–128

}

export class PagePinching {
  readonly page: Page;

  readonly react: UnwrapNestedRefs<IPinchingReact>;

  displayCenterPos!: Vec2;
  displayDistance!: number;

  unwatchActive?: WatchStopHandle;

  constructor(input: { page: Page }) {
    this.page = input.page;

    this.react = reactive({
      pointers: {},

      active: computed(() => {
        return Object.keys(this.react.pointers).length >= 2;
      }),
    });

    this.unwatchActive = watch(
      () => this.react.active,
      () => {
        if (this.react.active) {
          this.page.panning.cancel();
          this.page.dragging.cancel();
          this.page.boxSelection.cancel();

          this.page.selection.clear();

          const { displayCenterPos, displayDistance } =
            this._getCenterAndDistance();

          this.displayCenterPos = displayCenterPos;
          this.displayDistance = displayDistance;

          document.addEventListener('pointermove', this._update);
        } else {
          document.removeEventListener('pointermove', this._update);
        }
      },
    );
  }

  destroy() {
    this.unwatchActive?.();
  }

  private _getCenterAndDistance() {
    const pointers = Object.values(this.react.pointers);

    const displayCenterPos = pointers[0].lerp(pointers[1], 0.5);
    const displayDistance = pointers[0].sub(pointers[1]).length();

    return { displayCenterPos, displayDistance };
  }