TypeScript utils.extend函數代碼示例

function start ({ iEvent, interaction }: Interact.SignalArg) {
  if (interaction.prepared.name !== 'resize' || !interaction.prepared.edges) {
    return
  }

  const startRect = interaction.rect
  const resizeOptions = interaction.interactable.options.resize

  /*
   * When using the `resizable.square` or `resizable.preserveAspectRatio` options, resizing from one edge
   * will affect another. E.g. with `resizable.square`, resizing to make the right edge larger will make
   * the bottom edge larger by the same amount. We call these 'linked' edges. Any linked edges will depend
   * on the active edges and the edge being interacted with.
   */
  if (resizeOptions.square || resizeOptions.preserveAspectRatio) {
    const linkedEdges = utils.extend({}, interaction.prepared.edges)

    linkedEdges.top    = linkedEdges.top    || (linkedEdges.left   && !linkedEdges.bottom)
    linkedEdges.left   = linkedEdges.left   || (linkedEdges.top    && !linkedEdges.right)
    linkedEdges.bottom = linkedEdges.bottom || (linkedEdges.right  && !linkedEdges.top)
    linkedEdges.right  = linkedEdges.right  || (linkedEdges.bottom && !linkedEdges.left)

    interaction.prepared._linkedEdges = linkedEdges
  }
  else {
    interaction.prepared._linkedEdges = null
  }

  // if using `resizable.preserveAspectRatio` option, record aspect ratio at the start of the resize
  if (resizeOptions.preserveAspectRatio) {
    interaction.resizeStartAspectRatio = startRect.width / startRect.height
  }

  interaction.resizeRects = {
    start     : startRect,
    current   : utils.extend({}, startRect),
    inverted  : utils.extend({}, startRect),
    previous  : utils.extend({}, startRect),
    delta     : {
      left: 0,
      right : 0,
      width : 0,
      top : 0,
      bottom: 0,
      height: 0,
    },
  }

  iEvent.rect = interaction.resizeRects.inverted
  ; (iEvent as ResizeEvent).deltaRect = interaction.resizeRects.delta
}

test('DropEvent constructor', (t) => {
  const interaction: any = { dropState: {} }
  const dragEvent = Object.freeze({
    interactable,
    _interaction: interaction,
    target: dragElement,
    timeStamp: 10,
  }) as InteractEvent

  utils.extend(interaction.dropState, {
    activeDrops: [
      { dropzone: dz1, element: el1 },
      { dropzone: dz2, element: el2 },
    ],
    cur : { dropzone: dz1, element: el1 },
    prev: { dropzone: dz2, element: el2 },
    events: {},
  })

  const dropmove = new DropEvent(interaction.dropState, dragEvent, 'dropmove')

  t.equal(dropmove.target, el1, 'dropmove uses dropState.cur.element')
  t.equal(dropmove.dropzone, dz1, 'dropmove uses dropState.cur.dropzone')
  t.equal(dropmove.relatedTarget, dragElement)

  const dragleave = new DropEvent(interaction.dropState, dragEvent, 'dragleave')

  t.equal(dragleave.target, el2, 'dropmove uses dropState.prev.element')
  t.equal(dragleave.dropzone, dz2, 'dropmove uses dropState.prev.dropzone')
  t.equal(dragleave.relatedTarget, dragElement)

  t.end()
})

  function resetCoords () {
    pointerUtils.copyCoords(iEvent, eventCoords)
    extend(iEvent.delta, eventCoords.delta)

    for (const prop in coords) {
      pointerUtils.copyCoords(interaction.coords[prop], coords[prop])
    }
  }

function start (arg: Interact.SignalArg) {
  const { interaction, interactable, element, rect, state, startOffset } = arg
  const { options } = state
  const offsets = []
  const origin = options.offsetWithOrigin
    ? getOrigin(arg)
    : { x: 0, y: 0 }

  let snapOffset

  if (options.offset === 'startCoords') {
    snapOffset = {
      x: interaction.coords.start.page.x,
      y: interaction.coords.start.page.y,
    }
  }
  else  {
    const offsetRect = utils.rect.resolveRectLike(options.offset, interactable, element, [interaction])

    snapOffset = utils.rect.rectToXY(offsetRect) || { x: 0, y: 0 }
    snapOffset.x += origin.x
    snapOffset.y += origin.y
  }

  const relativePoints = options.relativePoints || []

  if (rect && options.relativePoints && options.relativePoints.length) {
    for (let index = 0; index < relativePoints.length; index++) {
      const relativePoint = relativePoints[index]

      offsets.push({
        index,
        relativePoint,
        x: startOffset.left - (rect.width  * relativePoint.x) + snapOffset.x,
        y: startOffset.top  - (rect.height * relativePoint.y) + snapOffset.y,
      })
    }
  }
  else {
    offsets.push(utils.extend({
      index: 0,
      relativePoint: null,
    }, snapOffset))
  }

  state.offsets = offsets
}

function startReflow (scope: Scope, interactable: Interactable, element: Element, action: ActionProps, event: any) {
  const interaction = scope.interactions.new({ pointerType: 'reflow' })
  const signalArg = {
    interaction,
    event,
    pointer: event,
    eventTarget: element,
    phase: EventPhase.Reflow,
  }

  interaction.interactable = interactable
  interaction.element = element
  interaction.prepared = extend({}, action)
  interaction.prevEvent = event
  interaction.updatePointer(event, event, element, true)

  interaction._doPhase(signalArg)

  const reflowPromise = (win.window as unknown as any).Promise
    ? new (win.window as unknown as any).Promise((resolve: any) => {
      interaction._reflowResolve = resolve
    })
    : null

  interaction._reflowPromise = reflowPromise
  interaction.start(action, interactable, element)

  if (interaction._interacting) {
    interaction.move(signalArg)
    interaction.end(event)
  }
  else {
    interaction.stop()
  }

  interaction.removePointer(event, event)
  interaction.pointerIsDown = false

  return reflowPromise
}

function install (scope: Interact.Scope) {
  const {
    interact,
    interactions,
    defaults,
  } = scope

  scope.usePlugin(InteractableMethods)

  // set cursor style on mousedown
  interactions.signals.on('down', ({ interaction, pointer, event, eventTarget }) => {
    if (interaction.interacting()) { return }

    const actionInfo = getActionInfo(interaction, pointer, event, eventTarget, scope)
    prepare(interaction, actionInfo, scope)
  })

  // set cursor style on mousemove
  interactions.signals.on('move', ({ interaction, pointer, event, eventTarget }) => {
    if (interaction.pointerType !== 'mouse' ||
        interaction.pointerIsDown ||
        interaction.interacting()) { return }

    const actionInfo = getActionInfo(interaction, pointer, event, eventTarget, scope)
    prepare(interaction, actionInfo, scope)
  })

  interactions.signals.on('move', (arg) => {
    const { interaction } = arg

    if (!interaction.pointerIsDown ||
        interaction.interacting() ||
        !interaction.pointerWasMoved ||
        !interaction.prepared.name) {
      return
    }

    scope.autoStart.signals.fire('before-start', arg)

    const { interactable } = interaction

    if (interaction.prepared.name && interactable) {
      // check manualStart and interaction limit
      if (interactable.options[interaction.prepared.name].manualStart ||
          !withinInteractionLimit(interactable, interaction.element, interaction.prepared, scope)) {
        interaction.stop()
      }
      else {
        interaction.start(interaction.prepared, interactable, interaction.element)
      }
    }
  })

  interactions.signals.on('stop', ({ interaction }) => {
    const { interactable } = interaction

    if (interactable && interactable.options.styleCursor) {
      setCursor(interaction.element as HTMLElement, '', scope)
    }
  })

  defaults.base.actionChecker = null
  defaults.base.styleCursor = true

  utils.extend(defaults.perAction, {
    manualStart: false,
    max: Infinity,
    maxPerElement: 1,
    allowFrom:  null,
    ignoreFrom: null,

    // only allow left button by default
    // see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons#Return_value
    mouseButtons: 1,
  })

  /**
   * Returns or sets the maximum number of concurrent interactions allowed.  By
   * default only 1 interaction is allowed at a time (for backwards
   * compatibility). To allow multiple interactions on the same Interactables and
   * elements, you need to enable it in the draggable, resizable and gesturable
   * `'max'` and `'maxPerElement'` options.
   *
   * @alias module:interact.maxInteractions
   *
   * @param {number} [newValue] Any number. newValue <= 0 means no interactions.
   */
  interact.maxInteractions = (newValue) => maxInteractions(newValue, scope)

  scope.autoStart = {
    // Allow this many interactions to happen simultaneously
    maxInteractions: Infinity,
    withinInteractionLimit,
    cursorElement: null,
    signals: new utils.Signals(),
  }
}

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

 (modifierStatus) => utils.extend({}, modifierStatus)

function release<T extends Interact.ActionName> (
  { interaction, event, noPreEnd }: Interact.SignalArg,
  scope: Interact.Scope
) {
  const state = interaction.inertia

  if (!interaction.interacting() ||
    (interaction.simulation && interaction.simulation.active) ||
  noPreEnd) {
    return null
  }

  const options = getOptions(interaction)

  const now = interaction._now()
  const { client: velocityClient } = interaction.coords.velocity
  const pointerSpeed = utils.hypot(velocityClient.x, velocityClient.y)

  let smoothEnd = false
  let modifierResult: ReturnType<typeof modifiers.setAll>

  // check if inertia should be started
  const inertiaPossible = (options && options.enabled &&
                     interaction.prepared.name !== 'gesture' &&
                     event !== state.startEvent)

  const inertia = (inertiaPossible &&
    (now - interaction.coords.cur.timeStamp) < 50 &&
    pointerSpeed > options.minSpeed &&
    pointerSpeed > options.endSpeed)

  const modifierArg = {
    interaction,
    pageCoords: utils.extend({}, interaction.coords.cur.page),
    states: inertiaPossible && interaction.modifiers.states.map(
      (modifierStatus) => utils.extend({}, modifierStatus)
    ),
    preEnd: true,
    prevCoords: undefined,
    requireEndOnly: null,
  }

  // smoothEnd
  if (inertiaPossible && !inertia) {
    modifierArg.prevCoords = interaction.prevEvent.page
    modifierArg.requireEndOnly = false
    modifierResult = modifiers.setAll(modifierArg)

    if (modifierResult.changed) {
      smoothEnd = true
    }
  }

  if (!(inertia || smoothEnd)) { return null }

  utils.pointer.copyCoords(state.upCoords, interaction.coords.cur)

  interaction.pointers[0].pointer = state.startEvent = new scope.InteractEvent(
    interaction,
    event,
    // FIXME add proper typing Action.name
    interaction.prepared.name as T,
    EventPhase.InertiaStart,
    interaction.element,
  )

  state.t0 = now

  state.active = true
  state.allowResume = options.allowResume
  interaction.simulation = state

  interaction.interactable.fire(state.startEvent)

  if (inertia) {
    state.vx0 = interaction.coords.velocity.client.x
    state.vy0 = interaction.coords.velocity.client.y
    state.v0 = pointerSpeed

    calcInertia(interaction, state)

    utils.extend(modifierArg.pageCoords, interaction.coords.cur.page)

    modifierArg.pageCoords.x += state.xe
    modifierArg.pageCoords.y += state.ye
    modifierArg.prevCoords = undefined
    modifierArg.requireEndOnly = true

    modifierResult = modifiers.setAll(modifierArg)

    state.modifiedXe += modifierResult.delta.x
    state.modifiedYe += modifierResult.delta.y

    state.timeout = raf.request(() => inertiaTick(interaction))
  }
  else {
    state.smoothEnd = true
    state.xe = modifierResult.delta.x
    state.ye = modifierResult.delta.y

//.........這裏部分代碼省略.........

function set (arg: Interact.SignalArg) {
  const { interaction, coords, state } = arg
  const { options, offsets } = state

  const origin = utils.getOriginXY(interaction.interactable, interaction.element, interaction.prepared.name)
  const page = utils.extend({}, coords)
  const targets = []
  let target

  if (!options.offsetWithOrigin) {
    page.x -= origin.x
    page.y -= origin.y
  }

  state.realX = page.x
  state.realY = page.y

  for (const offset of offsets) {
    const relativeX = page.x - offset.x
    const relativeY = page.y - offset.y

    for (let index = 0, len = options.targets.length; index < len; index++) {
      const snapTarget = options.targets[index]
      if (utils.is.func(snapTarget)) {
        target = snapTarget(relativeX, relativeY, interaction, offset, index)
      }
      else {
        target = snapTarget
      }

      if (!target) { continue }

      targets.push({
        x: (utils.is.number(target.x) ? target.x : relativeX) + offset.x,
        y: (utils.is.number(target.y) ? target.y : relativeY) + offset.y,

        range: utils.is.number(target.range) ? target.range : options.range,
      })
    }
  }

  const closest = {
    target: null,
    inRange: false,
    distance: 0,
    range: 0,
    dx: 0,
    dy: 0,
  }

  for (let i = 0, len = targets.length; i < len; i++) {
    target = targets[i]

    const range = target.range
    const dx = target.x - page.x
    const dy = target.y - page.y
    const distance = utils.hypot(dx, dy)
    let inRange = distance <= range

    // Infinite targets count as being out of range
    // compared to non infinite ones that are in range
    if (range === Infinity && closest.inRange && closest.range !== Infinity) {
      inRange = false
    }

    if (!closest.target || (inRange
      // is the closest target in range?
      ? (closest.inRange && range !== Infinity
        // the pointer is relatively deeper in this target
        ? distance / range < closest.distance / closest.range
        // this target has Infinite range and the closest doesn't
        : (range === Infinity && closest.range !== Infinity) ||
          // OR this target is closer that the previous closest
          distance < closest.distance)
      // The other is not in range and the pointer is closer to this target
      : (!closest.inRange && distance < closest.distance))) {
      closest.target = target
      closest.distance = distance
      closest.range = range
      closest.inRange = inRange
      closest.dx = dx
      closest.dy = dy

      state.range = range
    }
  }

  if (closest.inRange) {
    coords.x = closest.target.x
    coords.y = closest.target.y
  }

  state.closest = closest
}