TypeScript utils.pointer類代碼示例

export function testEnv ({
  plugins = [],
  target,
  rect = {  top: 0, left: 0, bottom: 0, right: 0  },
}: {
  plugins?: Interact.Plugin[],
  target?: Interact.Target,
  rect?: Interact.Rect,
} = {}) {
  const scope: Interact.Scope = mockScope()

  for (const plugin of plugins) {
    scope.usePlugin(plugin)
  }

  target = target || scope.document.body

  const interaction = scope.interactions.new({})
  const interactable = scope.interactables.new(target)
  const coords = utils.pointer.newCoords() as MockCoords

  coords.target = target
  const event = utils.pointer.coordsToEvent(coords)

  interactable.rectChecker(() => ({ ...rect }))

  return {
    scope,
    interaction,
    target,
    interactable,
    coords,
    event,
  }
}

test('autoStart', (t) => {
  const scope: Interact.Scope = helpers.mockScope()

  scope.usePlugin(autoStart)
  scope.usePlugin(drag)

  const interaction = scope.interactions.new({})
  const element = scope.document.body
  const interactable = scope.interactables.new(element).draggable(true)
  const event = utils.pointer.coordsToEvent(utils.pointer.newCoords())
  const rect = { top: 100, left: 200, bottom: 300, right: 400 }
  interactable.rectChecker(() => ({ ...rect }))

  interaction.pointerDown(event, event, element)

  t.deepEqual(
    interaction.prepared,
    { name: 'drag', axis: 'xy', edges: undefined },
    'prepares action'
  )

  t.deepEqual(
    interaction.rect,
    rect as any,
    'set interaction.rect'
  )

  t.end()
})

function resume (
  { interaction, event, pointer, eventTarget }: Interact.SignalArg,
  scope: Interact.Scope
) {
  const state = interaction.inertia

  // Check if the down event hits the current inertia target
  if (state.active) {
    let element = eventTarget

    // climb up the DOM tree from the event target
    while (utils.is.element(element)) {
      // if interaction element is the current inertia target element
      if (element === interaction.element) {
        // stop inertia
        raf.cancel(state.timeout)
        state.active = false
        interaction.simulation = null

        // update pointers to the down event's coordinates
        interaction.updatePointer(pointer, event, eventTarget, true)
        utils.pointer.setCoords(
          interaction.coords.cur,
          interaction.pointers.map((p) => p.pointer),
          interaction._now()
        )

        // fire appropriate signals
        const signalArg = {
          interaction,
        }

        scope.interactions.signals.fire('action-resume', signalArg)

        // fire a reume event
        const resumeEvent = new scope.InteractEvent(
          interaction, event, interaction.prepared.name, EventPhase.Resume, interaction.element)

        interaction._fireEvent(resumeEvent)

        utils.pointer.copyCoords(interaction.coords.prev, interaction.coords.cur)
        break
      }

      element = utils.dom.parentNode(element)
    }
  }
}

function dropCheckMethod (
  interactable: Interact.Interactable,
  dragEvent: InteractEvent,
  event: Interact.PointerEventType,
  draggable: Interact.Interactable,
  draggableElement: Element,
  dropElement: Element,
  rect: any
) {
  let dropped = false

  // if the dropzone has no rect (eg. display: none)
  // call the custom dropChecker or just return false
  if (!(rect = rect || interactable.getRect(dropElement))) {
    return (interactable.options.drop.checker
      ? interactable.options.drop.checker(dragEvent, event, dropped, interactable, dropElement, draggable, draggableElement)
      : false)
  }

  const dropOverlap = interactable.options.drop.overlap

  if (dropOverlap === 'pointer') {
    const origin = utils.getOriginXY(draggable, draggableElement, 'drag')
    const page = utils.pointer.getPageXY(dragEvent)

    page.x += origin.x
    page.y += origin.y

    const horizontal = (page.x > rect.left) && (page.x < rect.right)
    const vertical   = (page.y > rect.top) && (page.y < rect.bottom)

    dropped = horizontal && vertical
  }

  const dragRect = draggable.getRect(draggableElement)

  if (dragRect && dropOverlap === 'center') {
    const cx = dragRect.left + dragRect.width  / 2
    const cy = dragRect.top  + dragRect.height / 2

    dropped = cx >= rect.left && cx <= rect.right && cy >= rect.top && cy <= rect.bottom
  }

  if (dragRect && utils.is.number(dropOverlap)) {
    const overlapArea  = (Math.max(0, Math.min(rect.right, dragRect.right) - Math.max(rect.left, dragRect.left)) *
                          Math.max(0, Math.min(rect.bottom, dragRect.bottom) - Math.max(rect.top, dragRect.top)))

    const overlapRatio = overlapArea / (dragRect.width * dragRect.height)

    dropped = overlapRatio >= dropOverlap
  }

  if (interactable.options.drop.checker) {
    dropped = interactable.options.drop.checker(dragEvent, event, dropped, interactable, dropElement, draggable, draggableElement)
  }

  return dropped
}

function inertiaTick (interaction: Interact.Interaction) {
  updateInertiaCoords(interaction)
  utils.pointer.setCoordDeltas(interaction.coords.delta, interaction.coords.prev, interaction.coords.cur)
  utils.pointer.setCoordVelocity(interaction.coords.velocity, interaction.coords.delta)

  const state = interaction.inertia
  const options = getOptions(interaction)
  const lambda = options.resistance
  const t = interaction._now() / 1000 - state.t0

  if (t < state.te) {
    const progress =  1 - (Math.exp(-lambda * t) - state.lambda_v0) / state.one_ve_v0

    if (state.modifiedXe === state.xe && state.modifiedYe === state.ye) {
      state.sx = state.xe * progress
      state.sy = state.ye * progress
    }
    else {
      const quadPoint = utils.getQuadraticCurvePoint(
        0, 0,
        state.xe, state.ye,
        state.modifiedXe, state.modifiedYe,
        progress)

      state.sx = quadPoint.x
      state.sy = quadPoint.y
    }

    interaction.move()

    state.timeout = raf.request(() => inertiaTick(interaction))
  }
  else {
    state.sx = state.modifiedXe
    state.sy = state.modifiedYe

    interaction.move()
    interaction.end(state.startEvent)
    state.active = false
    interaction.simulation = null
  }

  utils.pointer.copyCoords(interaction.coords.prev, interaction.coords.cur)
}

function reflow (interactable: Interactable, action: ActionProps, scope: Scope): Promise<Interactable> {
  const elements = is.string(interactable.target)
    ? arr.from(interactable._context.querySelectorAll(interactable.target))
    : [interactable.target]

  // tslint:disable-next-line variable-name
  const Promise = (win.window as any).Promise
  const promises: Array<Promise<null>> | null = Promise ? [] : null

  for (const element of elements) {
    const rect = interactable.getRect(element)

    if (!rect) { break }

    const runningInteraction = arr.find(
      scope.interactions.list,
      (interaction: Interaction) => {
        return interaction.interacting() &&
          interaction.interactable === interactable &&
          interaction.element === element &&
          interaction.prepared.name === action.name
      })
    let reflowPromise: Promise<null>

    if (runningInteraction) {
      runningInteraction.move()

      if (promises) {
        reflowPromise = runningInteraction._reflowPromise || new Promise((resolve: any) => {
          runningInteraction._reflowResolve = resolve
        })
      }
    }
    else {
      const xywh = rectUtils.tlbrToXywh(rect)
      const coords = {
        page     : { x: xywh.x, y: xywh.y },
        client   : { x: xywh.x, y: xywh.y },
        timeStamp: scope.now(),
      }

      const event = pointerUtils.coordsToEvent(coords)
      reflowPromise = startReflow(scope, interactable, element, action, event)
    }

    if (promises) {
      promises.push(reflowPromise)
    }
  }

  return promises && Promise.all(promises).then(() => interactable)
}

function updateInertiaCoords (interaction: Interact.Interaction) {
  const state = interaction.inertia

  // return if inertia isn't running
  if (!state.active) { return }

  const pageUp   = state.upCoords.page
  const clientUp = state.upCoords.client

  utils.pointer.setCoords(interaction.coords.cur, [ {
    pageX  : pageUp.x   + state.sx,
    pageY  : pageUp.y   + state.sy,
    clientX: clientUp.x + state.sx,
    clientY: clientUp.y + state.sy,
  } ], interaction._now())
}

function updateGestureProps ({ interaction, iEvent, event, phase }: GestureSignalArg) {
  if (interaction.prepared.name !== 'gesture') { return }

  const pointers = interaction.pointers.map((p) => p.pointer)
  const starting = phase === 'start'
  const ending = phase === 'end'
  const deltaSource = interaction.interactable.options.deltaSource

  iEvent.touches = [pointers[0], pointers[1]]

  if (starting) {
    iEvent.distance = utils.pointer.touchDistance(pointers, deltaSource)
    iEvent.box      = utils.pointer.touchBBox(pointers)
    iEvent.scale    = 1
    iEvent.ds       = 0
    iEvent.angle    = utils.pointer.touchAngle(pointers, deltaSource)
    iEvent.da       = 0

    interaction.gesture.startDistance = iEvent.distance
    interaction.gesture.startAngle = iEvent.angle
  }
  else if (ending || event instanceof InteractEvent) {
    const prevEvent = interaction.prevEvent as GestureEvent

    iEvent.distance = prevEvent.distance
    iEvent.box      = prevEvent.box
    iEvent.scale    = prevEvent.scale
    iEvent.ds       = 0
    iEvent.angle    = prevEvent.angle
    iEvent.da       = 0
  }
  else {
    iEvent.distance = utils.pointer.touchDistance(pointers, deltaSource)
    iEvent.box      = utils.pointer.touchBBox(pointers)
    iEvent.scale    = iEvent.distance / interaction.gesture.startDistance
    iEvent.angle    = utils.pointer.touchAngle(pointers, deltaSource)

    iEvent.ds = iEvent.scale - interaction.gesture.scale
    iEvent.da = iEvent.angle - interaction.gesture.angle
  }

  interaction.gesture.distance = iEvent.distance
  interaction.gesture.angle = iEvent.angle

  if (utils.is.number(iEvent.scale) &&
      iEvent.scale !== Infinity &&
      !isNaN(iEvent.scale)) {
    interaction.gesture.scale = iEvent.scale
  }
}

test('devTools', (t) => {
  const scope: Interact.Scope = helpers.mockScope()
  const logs: Array<{ args: any[], type: keyof Logger }> = []

  function log (args, type) {
    logs.push({ args, type })
  }

  scope.usePlugin(devTools, {
    logger: {
      warn (...args) { log(args, 'warn') },
      log (...args) { log(args, 'log') },
      error (...args) { log(args, 'error') },
    },
  })

  scope.usePlugin(drag)
  scope.usePlugin(resize)

  const element = scope.document.body.appendChild(scope.document.createElement('div'))
  const event = utils.pointer.coordsToEvent(utils.pointer.newCoords())
  const interactable = scope.interactables.new(element)
    .draggable(true)
    .resizable({ onmove: () => {} })
  const interaction = scope.interactions.new({})

  interaction.pointerDown(event, event, element)
  interaction.start({ name: 'drag' }, interactable, element)

  t.deepEqual(
    logs[0],
    { args: [devTools.touchActionMessage, element, devTools.links.touchAction], type: 'warn' },
    'warning about missing touchAction')

  t.deepEqual(
    logs[1],
    { args: [devTools.noListenersMessage, 'drag', interactable], type: 'warn' },
    'warning about missing move listeners')

  interaction.stop()

  // resolve touchAction
  element.style.touchAction = 'none'
  // resolve missing listeners
  interactable.on('dragmove', () => {})

  interaction.start({ name: 'resize' }, interactable, element)
  interaction.pointerMove(event, event, element)
  interaction.end()

  t.deepEqual(
    logs[2],
    { args: [devTools.boxSizingMessage, element, devTools.links.boxSizing], type: 'warn' },
    'warning about resizing without "box-sizing: none"')

  // resolve boxSizing
  element.style.boxSizing = 'border-box'

  interaction.start({ name: 'resize' }, interactable, element)
  interaction.move({ event, pointer: event })
  interaction.end()

  interaction.start({ name: 'drag' }, interactable, element)
  interaction.pointerMove(event, event, element)
  interaction.end()

  t.equal(
    logs.length,
    3,
    'no warnings when issues are resolved')

  t.end()
})

test('Interactable.gesturable method', (t) => {
  const scope: Interact.Scope = helpers.mockScope()

  scope.usePlugin(gesture)

  const interaction = scope.interactions.new({})
  const element = scope.document.body
  const interactable = scope.interactables.new(element).gesturable(true)
  const rect = Object.freeze({ top: 100, left: 200, bottom: 300, right: 400 })
  const touches = [
    utils.pointer.coordsToEvent(utils.pointer.newCoords()),
    utils.pointer.coordsToEvent(utils.pointer.newCoords()),
  ].map(
    (touch, index) => Object.assign(touch.coords, {
      pointerId: index,
      client: touch.page,
    }) && touch
  )
  const events: Interact.GestureEvent[] = []

  interactable.rectChecker(() => ({ ...rect }))
  interactable.on('gesturestart gesturemove gestureend', (event: Interact.GestureEvent) => {
    events.push(event)
  })

  // 0 --> 1
  utils.extend(touches[0].page, { x: 0, y: 0 })
  utils.extend(touches[1].page, { x: 100, y: 0 })

  interaction.pointerDown(touches[0], touches[0], element)

  t.notOk(
    gesture.checker(touches[0], touches[0], interactable, element, interaction),
    'not allowed with 1 pointer',
  )

  interaction.pointerDown(touches[1], touches[1], element)

  t.ok(
    gesture.checker(touches[1], touches[1], interactable, element, interaction),
    'allowed with 2 pointers',
  )

  interaction.start({ name: ActionName.Gesture }, interactable, element)

  t.deepEqual(
    interaction.gesture,
    {
      angle: 0,
      distance: 100,
      scale: 1,
      startAngle: 0,
      startDistance: 100,
    },
    'start interaction properties are correct')

  t.deepEqual(
    getGestureProps(events[0]),
    {
      type: 'gesturestart',
      angle: 0,
      distance: 100,
      scale: 1,
      ds: 0,
      da: 0,
    },
    'start event properties are correct')

  // 0
  // |
  // v
  // 1
  utils.extend(touches[1].page, { x: 0, y: 50 })

  interaction.pointerMove(touches[1], touches[1], element)

  t.deepEqual(
    interaction.gesture,
    {
      angle: 90,
      distance: 50,
      scale: 0.5,
      startAngle: 0,
      startDistance: 100,
    },
    'move interaction properties are correct')

  t.deepEqual(
    getGestureProps(events[1]),
    {
      type: 'gesturemove',
      angle: 90,
      distance: 50,
      scale: 0.5,
      ds: -0.5,
      da: 90,
    },
    'move event properties are correct')

  // 1 <-- 0
//.........這裏部分代碼省略.........