Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/destinecarma/draggablesui

The module allows you to make a GuiObject draggable for SurfaceGui with any NormalId.
https://github.com/destinecarma/draggablesui
Last synced: 15 days ago
JSON representation
The module allows you to make a GuiObject draggable for SurfaceGui with any NormalId.
Host: GitHub
URL: https://github.com/destinecarma/draggablesui
Owner: DestinEcarma
License: mit
Created: 2022-12-18T11:10:38.000Z (about 2 years ago)
Default Branch: main
Last Pushed: 2022-12-18T21:58:18.000Z (about 2 years ago)
Last Synced: 2024-11-05T15:19:06.241Z (2 months ago)
Language: Lua
Homepage:
Size: 31.3 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project

README

        # Draggable For SurfaceGui

The draggable property is still usable, but it is deprecated. Thus, I created this [module](https://www.roblox.com/library/11857493050/DraggableSUI); **the module allows you to make a [GuiObject]["guiobject"] draggable for _[SurfaceGui]["surfacegui"]_ with any [NormalId]["normalid"].**

## Preview

https://user-images.githubusercontent.com/109215379/208297604-5affb9c1-1015-4200-b282-ca8db6dc73f5.mp4

The green dot is simply a representation of where the mouse point is in relation to the normal ID of the part surface GUI. **This is disabled by default.**

## Constructors

```lua

DraggableSUI.new: (guiObject: GuiObject, config: DraggableConfig?) -> Draggable

```

Creates a new object of type Draggable. The parameter `config` is a type of [DraggableConfig](#draggableconfig); this is optional. There is also a hidden parameter, which is the `_debugMode` type of [DebugModeConfig](#debugmodeconfig), which is what you saw in the [preview video](#preview).

## Special

```

DraggableSUI.DragAt :: DragAt

```

[DragAt](#dragat) is a custom enum that allows you to set where the GuiObject starts dragging, relative to the location of the mouse.

## Basic Usage

```lua

local DraggableSUI = require(game:GetService("ReplicatedStorage"):WaitForChild("DraggableSUI"))

local DraggableFrame = DraggableSUI.new(script.Parent)

```

Once you have created a draggable, you may now use the methods listed below.

## Methods

ActivateFrom

When the mouse is over the GuiObject, the draggable will be activated when mouse button 1 is down.

```lua

ActivateFrom: (self: Draggable, guiObject: GuiObject) -> ()

```

Destroy

This method disconnects all connections and destroys all signals. This method is called when the GuiObject is destroyed.

```lua

Destroy: (self: Draggable) -> ()

```

Disable

This method forces the dragging to stop and sets the Disabled property to true. **This is false by default.**

```lua

Disable: (self: Draggable) -> ()

```

DisableLimit

This allows the draggable to be dragged anywhere on the surface gui. **This is disabled by default.**

```lua

DisableLimit: (self: Draggable) -> ()

```

Enable

This method sets the Disabled property to false; if the [Disable](#disable) method is called while the draggable is active, the dragging continues. **This is true by default.**

```lua

Enable: (self: Draggable) -> ()

```

EnableLimit

This method allows you to limit the draggable, as seen in the [preview video](#preview). The parameter `config` is a type of [LimitConfig](#limitconfig); this is optional.

```lua

EnableLimit: (self: Draggable, config: LimitConfig?) -> ()

```

EventListener

This method allows you to listen for signals such as `"start"`, `"end"`, or `"move"`. The **start** fires when the client has pressed mouse button 1 while hovering over the GuiObject. The **end** fires when the client releases mouse button 1 while the draggable is active. Lastly, the **move** fires when the GuiObject has been dragged. All of this signal fires with the mouse location on the surface gui. The parameter `funcSelf` is a [table]["{}"] where the first parameter of the func is set to self, while the parameter `...any?` is for extra information for the func; this is passed after `mouseLocation`. This method returns a type of `SignalConnection`, which is similar to [RBXScriptConnection]["connection"]

```lua

EventListener: (

	self: Draggable,

	eventType: "start" | "end" | "move",

	func: (mouseLocation: Vector2, ...any?) -> (),

	funcSelf: {}?,

	...any?

) -> SignalConnection

```

ForceEndDrag

This method forces the dragging to stop. **This still triggers the "end" signal.**

```lua

ForceEndDrag: (self: Draggable) -> ()

```

ForceStartDrag

This method force activate the dragging, even without mouse button 1 being down. The parameter `dragAt` is optional; if present, it must be a type of [DragAt](#dragat); if the parameter is `DragAt.Center` the dragging starts at the center of the GuiObject relative to the location of the mouse, while `dragAtOffset` is `dragAt + offset`. **This still triggers the "start" signal.**

```lua

ForceStartDrag: (self: Draggable, dragAt: DragAt?, dragAtOffset: Vector2?) -> ()

```

Ignore

This method allows you to stop the draggable from activating when the mouse is hovering over the GuiObjects inside the parameter `list`. The parameter `protected` indicates whether to use the protected call function when looping the list.

```lua

Ignore: (self: Draggable, list: { GuiObject }, protected: boolean?) -> ()

```

IgnoreChildren

This method calls the [Ignore](#ignore) method, with list being `GuiObject:GetChildren()` and protected being true.

```lua

IgnoreChildren: (self: Draggable) -> ()

```

IgnoreDescendants

This method calls the [Ignore](#ignore) method, with list being `GuiObject:GetDescendants()` and protected being true.

```lua

IgnoreDescendants: (self: Draggable) -> ()

```

IsActive

This method allows you to identify if the draggable is active. This method returns a type of boolean.

```lua

IsActive: (self: Draggable) -> boolean

```

ListenAllEvent

This method allows you to listen to all of the available signals: `"start"`, `"end"`, and `"move"`. The **start** fires when the client has pressed mouse button 1 while hovering over the GuiObject. The **end** fires when the client releases mouse button 1 while the draggable is active. Lastly, the **move** fires when the GuiObject has been dragged. All of this signal fires with the mouse location on the surface gui. The parameter `funcSelf` is a [table]["{}"] where the first parameter of the func is set to self, while the parameter `...any?` is for extra information for the func; this is passed after `mouseLocation`. This method returns a dictionary with the indexes `"start"`, `"end"`, and `"move"` which all have the same type, `SignalConnection` which is similar to [RBXScriptConnection]["connection"].

```lua

ListenAllEvent: (

	self: Draggable,

	func: (mouseLocation: Vector2, ...any?) -> (),

	funcSelf: {}?,

	...any?

) -> {

	["start"]: SignalConnection,

	["move"]: SignalConnection,

	["end"]: SignalConnection,

}

```

SetDragAt

This method allows you to set where the dragging starts relative to the location of the mouse. The parameter `dragAt` is optional; if present, it must be a type of [DragAt](#dragat); if the parameter is `DragAt.Center` the dragging starts at the center of the GuiObject relative to the location of the mouse, while `dragAtOffset` is `dragAt + offset`. **This still triggers the "start" signal.**

```lua

SetDragAt: (self: Draggable, dragAt: DragAt?, dragAtOffset: Vector2?) -> ()

```

SetTweenInfo

This method allows you to have smooth dragging on your draggable.

```lua

SetTweenInfo: (self: Draggable, tweenInfo: TweenInfo) -> ()

```

## Types

DraggableConfig

|      Key      |                Data type                |

| :-----------: | :-------------------------------------: |

|   ByOffset:   |          [boolean]["boolean"]           |

|  CircleSize:  |           [number]["number"]            |

|   Circular:   |          [boolean]["boolean"]           |

|    DragAt:    |            [DragAt](#dragat)            |

| DragAtOffset: |          [Vector2]["vector2"]           |

|  Horizontal:  |          [boolean]["boolean"]           |

|    Ignore:    | [Array]["{}"]<[GuiObject]["guiobject"]> |

|    Limit:     |          [boolean]["boolean"]           |

| LimitNoPivot  |          [boolean]["boolean"]           |

|     Tween     |        [TweenInfo]["tweeninfo"]         |

|   Vertical    |          [boolean]["boolean"]           |

-   This data type is used in the new [constructor](#constructors) for the `config` parameter.

LimitConfig

|     Key     |      Data type       |

| :---------: | :------------------: |

| CircleSize: |  [number]["number"]  |

|  Circular:  | [boolean]["boolean"] |

|   NoPivot   | [boolean]["boolean"] |

-   This data type is used in the [EnableLimit](#enablelimit) for the `config` parameter.

DebugModeConfig

|     Key      |               Data type               |

| :----------: | :-----------------------------------: |

|    Color:    |          [Color3]["color3"]           |

|  Material:   | [Enum]["enum"].[Material]["material"] |

|    Shape     | [Enum]["enum"].[PartType]["parttype"] |

|     Size     |         [Vector3]["vector3"]          |

| Transparency |          [number]["number"]           |

-   This data type is used in the new [constructor](#constructors) for the hidden `_debugMode` parameter.

## Custom Enum

DragAt

|     Name     | Value |                   Summary                    |

| :----------: | :---: | :------------------------------------------: |

|    Center    |   4   |      Drag at the center of a GuiObject.      |

|  CenterLeft  |   3   |  Drag at at the center left of a GuiObject.  |

| CenterRight  |   5   | Drag at at the center right of a GuiObject.  |

| BottomCenter |   7   | Drag at at the bottom center of a GuiObject. |

|  BottomLeft  |   6   |  Drag at at the bottom left of a GuiObject.  |

| BottomRight  |   8   | Drag at at the bottom right of a GuiObject.  |

|  TopCenter   |   1   |  Drag at at the top center of a GuiObject.   |

|   TopLeft    |   0   |   Drag at at the top left of a GuiObject.    |

|   TopRight   |   2   |   Drag at at the top right of a GuiObject.   |

["guiobject"]: https://create.roblox.com/docs/reference/engine/classes/GuiObject

["surfacegui"]: https://create.roblox.com/docs/reference/engine/classes/SurfaceGui

["normalid"]: https://create.roblox.com/docs/reference/engine/enums/NormalId

["connection"]: https://create.roblox.com/docs/reference/engine/datatypes/RBXScriptConnection

["boolean"]: https://create.roblox.com/docs/scripting/luau/booleans

["number"]: https://create.roblox.com/docs/scripting/luau/numbers

["vector2"]: https://create.roblox.com/docs/reference/engine/datatypes/Vector2

["{}"]: https://create.roblox.com/docs/scripting/luau/tables

["tweeninfo"]: https://create.roblox.com/docs/reference/engine/datatypes/TweenInfo

["color3"]: https://create.roblox.com/docs/reference/engine/datatypes/Color3

["enum"]: https://create.roblox.com/docs/reference/engine/datatypes/Enum

["material"]: https://create.roblox.com/docs/reference/engine/enums/Material

["parttype"]: https://create.roblox.com/docs/reference/engine/enums/PartType

["vector3"]: https://create.roblox.com/docs/reference/engine/datatypes/Vector3