{"id":13714984,"url":"https://github.com/IanBellomy/Pair","last_synced_at":"2025-05-07T03:31:12.024Z","repository":{"id":168806856,"uuid":"61900633","full_name":"IanBellomy/Pair","owner":"IanBellomy","description":"A Drag and Drop module for Framer CLASSIC. ","archived":false,"fork":false,"pushed_at":"2021-02-19T21:39:03.000Z","size":2992,"stargazers_count":39,"open_issues_count":1,"forks_count":3,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-14T03:34:21.835Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"CoffeeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/IanBellomy.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-06-24T17:21:42.000Z","updated_at":"2021-02-19T21:39:06.000Z","dependencies_parsed_at":"2024-01-03T07:10:59.862Z","dependency_job_id":null,"html_url":"https://github.com/IanBellomy/Pair","commit_stats":null,"previous_names":["ianbellomy/pair"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IanBellomy%2FPair","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IanBellomy%2FPair/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IanBellomy%2FPair/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IanBellomy%2FPair/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/IanBellomy","download_url":"https://codeload.github.com/IanBellomy/Pair/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252806419,"owners_count":21807199,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T00:00:52.703Z","updated_at":"2025-05-07T03:31:07.718Z","avatar_url":"https://github.com/IanBellomy.png","language":"CoffeeScript","funding_links":[],"categories":["Modules"],"sub_categories":[],"readme":"# Pair.coffee\n\n##### Drag and drop layers.\n\nCursor-based:\n\n\u003cimg alt=\"cursor based example\" src=\"https://github.com/IanBellomy/Pair/blob/master/examples/DragAndDropFramer.gif\" width=308 height=260\u003e\n\nFrame-based:\n\n\u003cimg alt=\"frame based example\" src=\"https://github.com/IanBellomy/Pair/blob/master/examples/contactDrop.gif\" width=276 height=334\u003e\n\nFrame-based contact events without dragging:\n\n\u003cimg alt=\"frame based events with no dragging\" src=\"https://github.com/IanBellomy/Pair/blob/master/examples/contactEvent.gif\" width=229 height=381\u003e\n\n\n## Usage\n\n#### Install\u003cbr\u003e\nDownload the Pair.coffee file and place it in the modules folder of your project.\u003cbr\u003e\nIn your framer project, write:\n\n````coffeescript\nPairModule = require \"Pair\"\n````\n\nCreate a pair and enable drag and drop\n\n````coffeescript\ndragLayer = new Layer\ntargetLayer = new Layer\nmyPair = new PairModule.Pair(dragLayer,targetLayer)\nmyPair.enableDragAndDrop()\n````\n\n`dragLayer` and `targetLayer` must be Layers with the same parent. `dragLayer` will be the draggable layer, `targetLayer` will be the drag target.\n\n\n\n## Methods\nIn order of importance. \n\n\n````coffeescript\nenableDragAndDrop()\n````\n\nOnce called, the `dragLayer` will become draggable, and the pair will emit the following events: \n\n- `\"dragStart\"`\n- `\"dragEnter\"`\n- `\"dragLeave\"` \n- `\"dragOver\"`\n- `\"drop\"`\n- `\"invalidDrop\"`\n\nThe handlers will be scoped to the Pair object. (i.e. `this` will refer to the Pair.)\n\nNote, the following events are *always* emitted unless the pair is put to sleep.\n\n- `\"contactDrop\"`\n- `\"invalidContactDrop\"`\n\n\n---\n##### event handling\n````coffeeScript\nonDragStart( (dragged)-\u003e  )\n````\nWhen the mouse moves after pressing down on the `dragged`.\u003cbr\u003e\n\n\n````coffeeScript\nonDragEnter( (dragged,dropTarget)-\u003e  )\n````\nWhen the cursor enters `dropTarget` while `dragged` is being dragged.\n\n\n````coffeeScript\nonDragOver( (dragged,dropTarget)-\u003e  )\n````\nWhen the cursor moves within `dropTarget` while `dragged` is being dragged.\n\n\n````coffeeScript\nonDragLeave( (dragged,formerDropTarget)-\u003e  )\n````\nWhen the cursor leaves `formerDropTarget` while `dragged` is being dragged. \n\n\n````coffeeScript\nonInvalidDrop( (dropped)-\u003e  )\n````\nWhen the mouse is released outside of the original `targetLayer` while `dropped` was being dragged.\n\n\n\u003e`\"invalidDrop\"` events are emitted before `\"invalidContactDrop\"` or `\"contactDrop\"` events.\n\u003e A Pair may emit an `\"invalidDrop\"` event *and* a `\"contactDrop\"` or `\"invalidContactDrop\"`.\n\n````coffeeScript\nonDrop( (dropped,dropTarget)-\u003e  )\n````\nWhen the mouse is released over `dropTarget` while `dropped` is being dragged.\n\n\u003e`\"drop\"` events are emitted before `\"invalidContactDrop\"` or `\"contactDrop\"` events.\n\u003eA Pair may emit *both* a `\"drop\"` and `\"contactDrop\"` events.\n\n````coffeeScript\nonContactDrop( (dropped,dropTarget)-\u003e  )\n````\nWhen the mouse is released while the `dropped` layer frame overlaps the `dropTarget` layer frame.\n\nThis event is emitted _after_ `\"drop\"` and `\"invalidDrop\"`\n\n\n````coffeeScript\nonInvalidContactDrop( (dropped)-\u003e  )\n````\nWhen the mouse is released while the `dropped` layer frame does not overlap the `dropTarget` frame.\n\nThis event is emitted _after_ `\"drop\"` and `\"invalidDrop\"`\n\n\n---\n````coffeescript\ndisableDragAndDrop()\n````\nOnce called, the `dragLayer` will not be draggable, and any drag event listeners will be not be called. \n\n\n---\n````coffeescript\nonContactChange(startFn,endFn=-\u003e)  : returns index\n````\nAdd an event listener for when the layers' _frames_ contact starts or ends.\nThe function returns an index which can be used to remove the listener later.\n\n\u003eThese handlers will be called regardless of whether drag and drop is enabled, and regardless of whether a layer is dragged.\n\u003e\n\u003eLayers' scale and rotation does NOT affect a layers' frame! (This module does not perform pixel-based collision detection or geometric box collision detection.)\n\n\n\n---\n````coffeescript\noffContactChange(index)\n````\nOpposite of `onContactChange()` \n\n\n---\n````coffeescript\nonRangeChange(min,max,enterFn,exitFn=-\u003e)  : returns index\n````\nAdd 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 `\u003c= max`, or `\u003e= min`. Vice versa for the `exitFn`.\n\nDistance is measured from the layers' midpoints.\n\nThe function returns an index which can be used to remove the listener later.\n\n\u003eThese handlers will be called regardless of whether drag and drop is enabled, and regardless of whether a layer is dragged.\n\n---\n````coffeescript\noffRangeChange(index)\n````\nOpposite of `onRangeChange()`.\n\n\n---\n````coffeescript\ngetDistance()\n````\nReturns the distance between the midpoints of `dragLayer` and `targetLayer`.\n\n\n---\n````coffeescript\nsetDistance(value)\n````\n\nSets the distance between the two midpoints of `dragLayer` and `targetLayer` by moving `targetLayer`. Maintains the angle between the two layers. \n\n\n---\n````coffeescript\nmidPoint()  : returns [x,y]\n````\nReturns the midpoint between the mindpoints of the `dragLayer` and `targetLayer`.\n\n\n---\n````coffeescript\nsleep()\n````\nNo drag events, range events, or collision events will be emitted.\n\n\n---\n````coffeescript\nwake()\n````\nDrag events, range events, and collision events will be emitted like normal.\n\n\n---\n````coffeescript\ndestroy()\n````\nCall this if the pair is no longer needed. It will go to sleep and all event listeners will be removed. \n\n## Contact\nTwitter: @ianbellomy\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FIanBellomy%2FPair","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FIanBellomy%2FPair","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FIanBellomy%2FPair/lists"}