V2.0.0 (#3)

* Added Events & ResetPosition

* Added SnapdragonController to exports

* SnapdragonController now OOP, other changes

* SnapdragonController now exported

* Legacy controller moved to LEGACY_createDragController

* Fixed SnapdragonController return value

* Add refs for Roact usage

* Update constructors to accept refs

* DragOptions should accept SnapdragonRef too

* Add SnapdragonRef.Update

* Changed casing of options

* Updates to readme, add rotriever.toml

* Added FAQs

* Update README.md

* Options unified to one argument, legacy controller removed

* Changed to support PluginGui as well

* Fix check for options.DragGui

* Add window examples

* Add parent constraint example

* Add examples readme

* Added DragGridSize + slider example

* Add DragPositionMode

Defaults to Scale now.

* Basic docs

.npmignore

@@ -0,0 +1,4 @@
+*
+!*.d.ts
+!src/*.lua
+!src/**/*.lua

README.md

@@ -1,66 +1,50 @@
-Snapdragon
-=============
-A controller that makes draggable GuiObjects with snapping capabilities.
+<div align="center">
+	<img src="https://assets.vorlias.com/i1/snapdragon.png"/>
 
 
-API
--------------
-```ts
-declare interface SnapdragonController {
-  Disconnect(): void
-}
-namespace Snapdragon {
-  type SnapMargin = { Vertical?: Vector2; Horizontal?: Vector2 };
+</div>
+<div align="center">
+  	<h1>Snapdragon</h1>
+	<a href="https://www.npmjs.com/package/@rbxts/snapdragon">
+		<img src="https://badge.fury.io/js/%40rbxts%2Fsnapdragon.svg"></img>
+	</a>
+</div>
 
-  interface SnapProps {
-    SnapEnabled: boolean | undefined;
-    SnapIgnoresOffset: boolean | undefined;
-    SnapMargin: SnapMargin | undefined;
-    SnapThresholdMargin?: SnapMargin;
-  }
+Library for UI dragging support, with snapping capabilities in Roblox.
 
-  interface DraggingOptions {
-	/**
-	 * Overrides which object when dragged, will drag this object.
-	 * 
-	 * Useful for things like titlebars
-	 */
-    dragGui?: GuiObject;
-  }
 
-  interface DraggingSnapOptions {
-    /**
-     * The margin to the edges of the parent container
-     */
-    snapMargin?: SnapMargin;
+# Basic Usage
+```ts
+// Typescript
+import { createDragController } from "@rbxts/snapdragon";
+const controller = createDragController(gui, undefined, {SnapEnabled: true});
+controller.Connect() // Attaches the controller to the gui you specify
 
-    /**
-     * The threshold margin for snapping to edges.
-     * 
-     * It's additive to the snapMargin, so a margin of 20 + a snap threshold of 20 = total snapThreshold of 40.
-     * 
-     * That means if the dragged object comes within 40 pixels, it will snap to the edge.
-     */
-    snapThreshold?: SnapMargin;
+controller.Disconnect() // Will disconnect the drag controller from the Gui
+```
 
-    /**
-     * Whether or not the snapping behaviour is enabled
-     * 
-     * (true by default)
-     */
-    snapEnabled?: boolean;
-  }
+```lua
+-- Lua
+local Snapdragon = require(snapdragonModule)
+local controller = Snapdragon.createDragController(gui, nil, {SnapEnabled = true})
+controller:Connect() -- Attaches the controller to the gui you specify
 
- /**
- *
- * @param gui The gui that ends up being dragged
- * @param dragOptions Options relating to the dragging
- * @param dragSnapOptions Options relating to the snapping behaviour
- */
-  export function createDragController(
-	  gui: GuiObject,
-	  dragOptions?: DraggingOptions,
-	  dragSnapOptions?: DraggingSnapOptions,
-  ): SnapdragonController;
-}
+controller:Disconnect() -- Will disconnect the drag controller from the Gui
 ```
+
+## Usage with Roact
+If you want to use Snapdragon with Roact, simply use `Roact.Ref` with the object you want to be draggable, and create and assign a controller in the `didMount` method to the ref's instance.
+
+# FAQ
+## Why not just use `GuiObject.Draggable`?
+`Draggable` is deprecated. It never worked well and isn't flexible - as discussed [here](https://devforum.roblox.com/t/draggable-property-is-hidden-on-gui-objects/107689/5?u=vorlias).
+
+This library aims to add the ability to make your UI draggable without the extra work on your part, as well as make it more flexible with snapping capabilities and constraints (soon&trade;)
+
+## What about controller support?
+I would like to add the ability for controllers to drag UI elements at some point. Some console games actually have a faux-mouse type dragging system, it would function in a similar fashion.
+
+# API
+The API for Snapdragon can be found [here](index.d.ts)
+
+There will eventually&trade; be proper docs for this library.

docs/basic-usage.md

@@ -0,0 +1,44 @@
+!!! info "Before you continue"
+	Make sure you've installed Snapdragon for [TypeScript](../robloxts-install) or [Lua](../lua-install)
+
+
+# Basic Usage, Part 1
+To begin with, the main function you will be using with Snapdragon is `createDragController`.
+
+`createDragController` takes two arguments - the gui that you want to be dragged around, and the options for the drag controller.
+
+A basic example with a draggable GUI with default dragging options is as follows:
+
+```Lua tab="" linenums="1"
+local Snapdragon = require(snapdragonModule)
+
+local connector = Snapdragon.createDragController(dragGui)
+connector:Connect()
+```
+
+```ts tab="TypeScript" linenums="1"
+import Snapdragon from "@rbxts/snapdragon";
+
+const connector = Snapdragon.createDragController(dragGui);
+connector.Connect();
+```
+
+Then when you want to disconnect or destroy the controller, you can do the following:
+
+```lua tab="Lua" linenums="1"
+-- Will just stop Snapdragon from making this draggable
+connector:Disconnect();
+
+-- Will fully destroy the controller + detach events, etc.
+connector:Destroy();
+```
+
+```ts tab="TypeScript" linenums="1"
+// Will just stop Snapdragon from making this draggable
+connector.Disconnect();
+
+// Will fully destroy the controller + detach events, etc.
+connector.Destroy();
+```
+
+`Disconnect` will only stop the controller being active on the gui, `Destroy` will fully destroy the controller (including disconnecting it), making it further unusable.

docs/index.md

@@ -0,0 +1,12 @@
+<div align="center">
+	<img src="https://assets.vorlias.com/i1/snapdragon.png"/>
+
+</div>
+<div align="center">
+  	<h1>Snapdragon</h1>
+	<a href="https://www.npmjs.com/package/@rbxts/snapdragon">
+		<img src="https://badge.fury.io/js/%40rbxts%2Fsnapdragon.svg"></img>
+	</a>
+</div>
+
+Library for UI dragging support, with snapping capabilities in Roblox. 

docs/lua-install.md

@@ -0,0 +1,21 @@
+title: Lua Install
+
+Git Submodule
+------------
+
+!!! info
+	This process requires knowledge of [rojo](https://github.com/rojo-rbx/rojo).
+
+To use Snapdragon as a git submodule, you need to do the following:
+
+Run the command
+
+```
+git submodule add https://github.com/roblox-aurora/rbx-snapdragon.git <targetfolder>
+```
+e.g. if you wanted it in modules/snapdragon: 
+```
+git submodule add https://github.com/roblox-aurora/rbx-snapdragon.git modules/snapdragon
+```
+
+Then in your `*.project.json` folder, simply point it to `<targetfolder>` for the Lua output (e.g. in the above example, `modules/snapdragon`.

docs/robloxts-install.md

@@ -0,0 +1,33 @@
+title: TypeScript Install
+
+!!! info
+	The TypeScript binding for Snapdragon uses [roblox-ts](https://roblox-ts.github.io/). To use the TypeScript version of Snapdragon, you must install it first.
+
+
+NPM
+----
+Snapdragon is available on NPM. To install it to your roblox-ts project, type the following in command line/terminal
+
+```
+npm i @rbxts/snapdragon
+```
+
+
+
+GitHub
+----
+Snapdragon can also be installed as a module from GitHub
+
+```
+npm install git://github.com/roblox-aurora/rbx-snapdragon.git
+```
+(It is recommended to install it through NPM, however)
+
+Usage
+----
+
+Once you have the module installed, you can then use it in code by importing it as such:
+
+```TypeScript tab=
+import Snapdragon from "@rbxts/snapdragon";
+```

examples/README.md

@@ -0,0 +1,2 @@
+# Examples
+This directory contains examples for how you can use Snapdragon in your projects.

examples/parent-constraint/README.md

@@ -0,0 +1,4 @@
+# Parent Constraint
+In this example, the draggable GUI is constrained to being dragged inside the parent frame.
+
+This is achieved through `DragRelativeTo = "Parent"` rather than `DragRelativeTo = "LayerCollector"`

examples/parent-constraint/client/main.client.lua

@@ -0,0 +1,31 @@
+local ReplicatedStorage = game:GetService("ReplicatedStorage")
+local Snapdragon = require(ReplicatedStorage:WaitForChild("Snapdragon"))
+
+
+local screenGui = Instance.new("ScreenGui")
+local hostFrame = Instance.new("Frame")
+hostFrame.Size = UDim2.new(0.5, 0, 0.5, 0)
+hostFrame.Position = UDim2.new(0.25, 0, 0.25, 0)
+hostFrame.Parent = screenGui
+screenGui.Parent = game.Players.LocalPlayer:WaitForChild("PlayerGui")
+
+-- Basic Example
+do
+	-- create "Child"
+	local windowFrame = Instance.new("TextLabel")
+	windowFrame.Size = UDim2.new(0, 200, 0, 200)
+	windowFrame.Text = "I will only drag inside parent frame"
+	windowFrame.TextWrapped = true
+	windowFrame.BackgroundColor3 = Color3.fromRGB(255, 0, 0)
+	windowFrame.Parent = hostFrame
+
+	-- attach dragger to window
+	local controller = Snapdragon.createDragController(windowFrame, {
+		SnapEnabled = true,
+		DragRelativeTo = "Parent"
+	});
+	controller:Connect()
+end
+
+
+

examples/parent-constraint/default.project.json

@@ -0,0 +1,73 @@
+{
+	"name": "window",
+	"tree": {
+	  "$className": "DataModel",
+	  "HttpService": {
+		"$className": "HttpService",
+		"$properties": {
+		  "HttpEnabled": true
+		}
+	  },
+	  "Lighting": {
+		"$className": "Lighting",
+		"$properties": {
+		  "Brightness": 2.0,
+		  "GlobalShadows": true,
+		  "Ambient": [
+			0.0,
+			0.0,
+			0.0
+		  ],
+		  "Outlines": false,
+		  "Technology": "Voxel"
+		}
+	  },
+	  "StarterPlayer": {
+		  "$className": "StarterPlayer",
+		  "StarterPlayerScripts": {
+			  "$className": "StarterPlayerScripts",
+			  "$path": "./client"
+		  }
+	  },
+	  "ReplicatedStorage": {
+		"$className": "ReplicatedStorage",
+		"Snapdragon": {
+			"$path": "../../src"
+		}
+	  },
+	  "SoundService": {
+		"$className": "SoundService",
+		"$properties": {
+		  "RespectFilteringEnabled": true
+		}
+	  },
+	  "Workspace": {
+		"$className": "Workspace",
+		"$properties": {
+		  "FilteringEnabled": true
+		},
+		"Baseplate": {
+		  "$className": "Part",
+		  "$properties": {
+			"Anchored": true,
+			"Color": [
+			  0.38823,
+			  0.37254,
+			  0.38823
+			],
+			"Size": [
+			  512.0,
+			  20.0,
+			  512.0
+			],
+			"Locked": true,
+			"Position": [
+			  0.0,
+			  -10.0,
+			  0.0
+			]
+		  }
+		}
+	  }
+	}
+  }

examples/slider/README.md

@@ -0,0 +1,6 @@
+# Slider
+Creates two sliders, both only allowing dragging on the X axis.
+
+The first slider, will allow you to freely drag the GUI within the parent frame's boundaries.
+
+The second slider, will allow you to drag the GUI within the parent frame's boundaries every 20 pixels.