TypeScript utils.dom類代碼示例

function getActionInfo (interaction: Interact.Interaction, pointer: Interact.PointerType, event: Interact.PointerEventType, eventTarget: Element, scope: Interact.Scope) {
  let matches = []
  let matchElements = []

  let element = eventTarget

  function pushMatches (interactable) {
    matches.push(interactable)
    matchElements.push(element)
  }

  while (utils.is.element(element)) {
    matches = []
    matchElements = []

    scope.interactables.forEachMatch(element, pushMatches)

    const actionInfo = validateMatches(interaction, pointer, event, matches, matchElements, eventTarget, scope)

    if (actionInfo.action &&
      !actionInfo.interactable.options[actionInfo.action.name].manualStart) {
      return actionInfo
    }

    element = utils.dom.parentNode(element)
  }

  return { action: null, interactable: null, element: null }
}

function collectDrops ({ interactables }, draggableElement) {
  const drops = []

  // collect all dropzones and their elements which qualify for a drop
  for (const dropzone of interactables.list) {
    if (!dropzone.options.drop.enabled) { continue }

    const accept = dropzone.options.drop.accept

    // test the draggable draggableElement against the dropzone's accept setting
    if ((utils.is.element(accept) && accept !== draggableElement) ||
        (utils.is.string(accept) &&
        !utils.dom.matchesSelector(draggableElement, accept)) ||
        (utils.is.func(accept) && !accept({ dropzone, draggableElement }))) {
      continue
    }

    // query for new elements if necessary
    const dropElements = utils.is.string(dropzone.target)
      ? dropzone._context.querySelectorAll(dropzone.target)
      : utils.is.array(dropzone.target) ? dropzone.target : [dropzone.target]

    for (const dropzoneElement of dropElements) {
      if (dropzoneElement !== draggableElement) {
        drops.push({
          dropzone,
          element: dropzoneElement,
        })
      }
    }
  }

  return drops
}

function getDrop ({ dropState, interactable: draggable, element: dragElement }: Partial<Interact.Interaction>, dragEvent, pointerEvent) {
  const validDrops = []

  // collect all dropzones and their elements which qualify for a drop
  for (const { dropzone, element: dropzoneElement, rect } of dropState.activeDrops) {
    validDrops.push(dropzone.dropCheck(dragEvent, pointerEvent, draggable, dragElement, dropzoneElement, rect)
      ? dropzoneElement
      : null)
  }

  // get the most appropriate dropzone based on DOM depth and order
  const dropIndex = utils.dom.indexOfDeepestElement(validDrops)

  return dropState.activeDrops[dropIndex] || null
}

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

  interactions.signals.on('down', ({ interaction, pointer, event, eventTarget, pointerIndex }) => {
    const timer = interaction.pointers[pointerIndex].hold
    const path = utils.dom.getPath(eventTarget)
    const signalArg = {
      interaction,
      pointer,
      event,
      eventTarget,
      type: 'hold',
      targets: [] as EventTargetList,
      path,
      element: null,
    }

    for (const element of path) {
      signalArg.element = element

      signals.fire('collect-targets', signalArg)
    }

    if (!signalArg.targets.length) { return }

    let minDuration = Infinity

    for (const target of signalArg.targets) {
      const holdDuration = target.eventable.options.holdDuration

      if (holdDuration < minDuration) {
        minDuration = holdDuration
      }
    }

    timer.duration = minDuration
    timer.timeout = setTimeout(() => {
      fire({
        interaction,
        eventTarget,
        pointer,
        event,
        type: 'hold',
      }, scope)
    }, minDuration)
  })

function collectEventTargets<T extends string> ({ interaction, pointer, event, eventTarget, type }: {
  interaction: Interaction,
  pointer: Interact.PointerType,
  event: Interact.PointerEventType,
  eventTarget: Interact.EventTarget,
  type: T
}) {
  const pointerIndex = interaction.getPointerIndex(pointer)
  const pointerInfo = interaction.pointers[pointerIndex]

  // do not fire a tap event if the pointer was moved before being lifted
  if (type === 'tap' && (interaction.pointerWasMoved ||
      // or if the pointerup target is different to the pointerdown target
      !(pointerInfo && pointerInfo.downTarget === eventTarget))) {
    return []
  }

  const path = utils.dom.getPath(eventTarget)
  const signalArg = {
    interaction,
    pointer,
    event,
    eventTarget,
    type,
    path,
    targets: [] as EventTargetList,
    element: null,
  }

  for (const element of path) {
    signalArg.element = element

    signals.fire('collect-targets', signalArg)
  }

  if (type === 'hold') {
    signalArg.targets = signalArg.targets.filter((target) =>
      target.eventable.options.holdDuration === interaction.pointers[pointerIndex].hold.duration)
  }

  return signalArg.targets
}

function checkResizeEdge (name: string, value: any, page: Interact.Point, element: Node, interactableElement: Element, rect: Interact.Rect, margin: number) {
  // false, '', undefined, null
  if (!value) { return false }

  // true value, use pointer coords and element rect
  if (value === true) {
    // if dimensions are negative, "switch" edges
    const width  = utils.is.number(rect.width) ? rect.width  : rect.right  - rect.left
    const height = utils.is.number(rect.height) ? rect.height : rect.bottom - rect.top

    // don't use margin greater than half the relevent dimension
    margin = Math.min(margin, (name === 'left' || name === 'right' ? width : height) / 2)

    if (width < 0) {
      if      (name === 'left')  { name = 'right' }
      else if (name === 'right') { name = 'left'  }
    }
    if (height < 0) {
      if      (name === 'top')    { name = 'bottom' }
      else if (name === 'bottom') { name = 'top'    }
    }

    if (name === 'left') { return page.x < ((width  >= 0 ? rect.left : rect.right) + margin) }
    if (name === 'top') { return page.y < ((height >= 0 ? rect.top : rect.bottom) + margin) }

    if (name === 'right') { return page.x > ((width  >= 0 ? rect.right : rect.left) - margin) }
    if (name === 'bottom') { return page.y > ((height >= 0 ? rect.bottom : rect.top) - margin) }
  }

  // the remaining checks require an element
  if (!utils.is.element(element)) { return false }

  return utils.is.element(value)
  // the value is an element to use as a resize handle
    ? value === element
    // otherwise check if element matches value as selector
    : utils.dom.matchesUpTo(element, value, interactableElement)
}

export function mockInteractable (props = {}) {
  return Object.assign(
    {
      _signals: new Signals(),
      _actions: {
        names: [],
        methodDict: {},
      },
      options: {
        deltaSource: 'page',
      },
      target: {},
      events: new Eventable(),
      getRect () {
        return this.element
          ? utils.dom.getElementClientRect(this.element)
          : { left: 0, top: 0, right: 0, bottom: 0 }
      },
      fire (event) {
        this.events.fire(event)
      },
    },
    props) as any
}