TypeScript scope.Scope類代碼示例

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 install (scope: Scope) {
  const {
    actions,
    /** @lends module:interact */
    interact,
    /** @lends Interactable */
    Interactable, // eslint-disable-line no-shadow
    interactions,
    defaults,
  } = scope

  scope.usePlugin(drag)

  interactions.signals.on('before-action-start', ({ interaction }) => {
    if (interaction.prepared.name !== 'drag') { return }

    interaction.dropState = {
      cur: {
        dropzone: null,
        element: null,
      },
      prev: {
        dropzone: null,
        element: null,
      },
      rejected: null,
      events: null,
      activeDrops: null,
    }
  })

  interactions.signals.on('after-action-start', ({ interaction, event, iEvent: dragEvent }) => {
    if (interaction.prepared.name !== 'drag') { return }

    const { dropState } = interaction

    // reset active dropzones
    dropState.activeDrops = null
    dropState.events = null
    dropState.activeDrops = getActiveDrops(scope, interaction.element)
    dropState.events = getDropEvents(interaction, event, dragEvent)

    if (dropState.events.activate) {
      fireActivationEvents(dropState.activeDrops, dropState.events.activate)
    }
  })

  // FIXME proper signal types
  interactions.signals.on('action-move', (arg) => onEventCreated(arg as any, scope))
  interactions.signals.on('action-end', (arg) => onEventCreated(arg as any, scope))

  interactions.signals.on('after-action-move', ({ interaction }) => {
    if (interaction.prepared.name !== 'drag') { return }

    fireDropEvents(interaction, interaction.dropState.events)
    interaction.dropState.events = {}
  })

  interactions.signals.on('after-action-end', ({ interaction }) => {
    if (interaction.prepared.name !== 'drag') { return }

    fireDropEvents(interaction, interaction.dropState.events)
  })

  interactions.signals.on('stop', ({ interaction }) => {
    if (interaction.prepared.name !== 'drag') { return }

    const { dropState } = interaction

    dropState.activeDrops = null
    dropState.events = null
    dropState.cur.dropzone = null
    dropState.cur.element = null
    dropState.prev.dropzone = null
    dropState.prev.element = null
    dropState.rejected = false
  })

  /**
   *
   * ```js
   * interact('.drop').dropzone({
   *   accept: '.can-drop' || document.getElementById('single-drop'),
   *   overlap: 'pointer' || 'center' || zeroToOne
   * }
   * ```
   *
   * Returns or sets whether draggables can be dropped onto this target to
   * trigger drop events
   *
   * Dropzones can receive the following events:
   *  - `dropactivate` and `dropdeactivate` when an acceptable drag starts and ends
   *  - `dragenter` and `dragleave` when a draggable enters and leaves the dropzone
   *  - `dragmove` when a draggable that has entered the dropzone is moved
   *  - `drop` when a draggable is dropped into this dropzone
   *
   * Use the `accept` option to allow only elements that match the given CSS
   * selector or element. The value can be:
   *
   *  - **an Element** - only that element can be dropped into this dropzone.
//.........這裏部分代碼省略.........

function install (scope: Scope) {
  scope.usePlugin(gesture)
  scope.usePlugin(resize)
  scope.usePlugin(drag)
  scope.usePlugin(drop)
}

function use (plugin: Interact.Plugin, options?: { [key: string]: any }) {
  scope.usePlugin(plugin, options)

  return interact
}

interact.removeDocument = (doc) => scope.removeDocument(doc)