Generated by XState Viz: https://xstate.js.org/viz

machine.js

const pinchMachine = Machine({
  id: 'pinch',
  initial: 'idle',
  context: {
    onPinch: () => {},
    onPan: ([dx, dy]) => {},
    finishPinch: () => {},
    onSingleTouch: {
      touchStart: (currentPoint) => {},
      touchMove: (currentPoint) => {},
      touchEnd: () => {}
    },
    initTouches: {}
  },
  states: {
    idle: {
      on: {
        touchstart: [
          {
            cond: 'touchEventHasOnlyOneTouch',
            actions: 'setInitTouches',
            target: 'single_touch'
          },
          {
            cond: 'touchEventHasMoreThanOneTouch',
            actions: 'setInitTouches',
            target: 'non_rotatable_pinch'
          }
        ]
      }
    },
    single_touch: {
      entry: 'forwardSingleTouchStart',
      on: {
        touchstart: {
          actions: 'addSecondTouch',
          target: 'non_rotatable_pinch'
        },
        touchmove: {
          actions: 'forwardSingleTouchMove'
        },
        touchend: {
          actions: [
            'clearInitTouches',
            'forwardSingleTouchEnd'
          ],
          target: 'idle'
        }
      }
    },
    non_rotatable_pinch: {
      on: {
        touchmove: [

          { // 沒超過 10 度
            cond: 'rotateLessThanThreshold',
            actions: 'nonRotatablePinch'
          },
          { // 超過 10 度，把目前的 touches 當成新的 initTouches
            actions: 'updateInitTouches',
            target: 'rotatable_pinch'
          }
        ],
        touchend: [
          { // initTouch 只剩一個 touch
            cond: 'activeTouchCountIsOne',
            actions: 'updateInitTouches',
            target: 'pan'
          },
          {
            cond: 'touchEventHasNoTouch',
            actions: 'clearInitTouches',
            target: 'idle'
          }
        ]
      },
      exit: 'commitMatrix'
    },
    rotatable_pinch: {
      on: {
        touchmove: {
          actions: 'rotatablePinch'
        },
        touchend: [
          {
            cond: 'activeTouchCountIsOne',
            actions: 'updateInitTouches',
            target: 'pan'
          },
          {
            cond: 'touchEventHasNoTouch',
            actions: 'clearInitTouches',
            target: 'idle'
          }
        ]
      },
      exit: 'commitMatrix'
    },
    pan: {
      on: {
        touchstart: {
          actions: 'addSecondTouch',
          target: 'rotatable_pinch'
        },
        touchmove: {
          actions: 'onPan'
        },
        touchend: {
          actions: 'clearInitTouches',
          target: 'idle'
        }
      },
      exit: 'commitMatrix'
    }
  },
  on: {
    // 更新 props 時傳進來 machine
    UPDATE: { actions: assign((ctx, evt) => ({ ...ctx, ...evt.content })) }
  }
})