Skip to content

Latest commit

 

History

History
215 lines (143 loc) · 5.32 KB

readme.md

File metadata and controls

215 lines (143 loc) · 5.32 KB
Raw

Pair.coffee

Drag and drop layers.

Cursor-based:

cursor based example

Frame-based:

frame based example

Frame-based contact events without dragging:

frame based events with no dragging

Usage

Install

Download the Pair.coffee file and place it in the modules folder of your project.
In your framer project, write:

PairModule = require "Pair"

Create a pair and enable drag and drop

dragLayer = new Layer
targetLayer = new Layer
myPair = new PairModule.Pair(dragLayer,targetLayer)
myPair.enableDragAndDrop()

dragLayer and targetLayer must be Layers with the same parent. dragLayer will be the draggable layer, targetLayer will be the drag target.

Methods

In order of importance.

enableDragAndDrop()

Once called, the dragLayer will become draggable, and the pair will emit the following events:

  • "dragStart"
  • "dragEnter"
  • "dragLeave"
  • "dragOver"
  • "drop"
  • "invalidDrop"

The handlers will be scoped to the Pair object. (i.e. this will refer to the Pair.)

Note, the following events are always emitted unless the pair is put to sleep.

  • "contactDrop"
  • "invalidContactDrop"
event handling
onDragStart( (dragged)->  )

When the mouse moves after pressing down on the dragged.

onDragEnter( (dragged,dropTarget)->  )

When the cursor enters dropTarget while dragged is being dragged.

onDragOver( (dragged,dropTarget)->  )

When the cursor moves within dropTarget while dragged is being dragged.

onDragLeave( (dragged,formerDropTarget)->  )

When the cursor leaves formerDropTarget while dragged is being dragged.

onInvalidDrop( (dropped)->  )

When the mouse is released outside of the original targetLayer while dropped was being dragged.

"invalidDrop" events are emitted before "invalidContactDrop" or "contactDrop" events. A Pair may emit an "invalidDrop" event and a "contactDrop" or "invalidContactDrop".

onDrop( (dropped,dropTarget)->  )

When the mouse is released over dropTarget while dropped is being dragged.

"drop" events are emitted before "invalidContactDrop" or "contactDrop" events. A Pair may emit both a "drop" and "contactDrop" events.

onContactDrop( (dropped,dropTarget)->  )

When the mouse is released while the dropped layer frame overlaps the dropTarget layer frame.

This event is emitted after "drop" and "invalidDrop"

onInvalidContactDrop( (dropped)->  )

When the mouse is released while the dropped layer frame does not overlap the dropTarget frame.

This event is emitted after "drop" and "invalidDrop"

disableDragAndDrop()

Once called, the dragLayer will not be draggable, and any drag event listeners will be not be called.

onContactChange(startFn,endFn=->)  : returns index

Add an event listener for when the layers' frames contact starts or ends. The function returns an index which can be used to remove the listener later.

These handlers will be called regardless of whether drag and drop is enabled, and regardless of whether a layer is dragged.

Layers' scale and rotation does NOT affect a layers' frame! (This module does not perform pixel-based collision detection or geometric box collision detection.)

offContactChange(index)

Opposite of onContactChange()

onRangeChange(min,max,enterFn,exitFn=->)  : returns index

Add event handlers for when the distance between layers enters a specific range. The range is defined by min and max. The enterFn function is called when distance becomes <= max, or >= min. Vice versa for the exitFn.

Distance is measured from the layers' midpoints.

The function returns an index which can be used to remove the listener later.

These handlers will be called regardless of whether drag and drop is enabled, and regardless of whether a layer is dragged.

offRangeChange(index)

Opposite of onRangeChange().

getDistance()

Returns the distance between the midpoints of dragLayer and targetLayer.

setDistance(value)

Sets the distance between the two midpoints of dragLayer and targetLayer by moving targetLayer. Maintains the angle between the two layers.

midPoint()  : returns [x,y]

Returns the midpoint between the mindpoints of the dragLayer and targetLayer.

sleep()

No drag events, range events, or collision events will be emitted.

wake()

Drag events, range events, and collision events will be emitted like normal.

destroy()

Call this if the pair is no longer needed. It will go to sleep and all event listeners will be removed.

Contact

Twitter: @ianbellomy