TypeScript pointer.coordsToEvent方法代碼示例

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 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)
}

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
//.........這裏部分代碼省略.........