diff --git a/src/Panels/DragHandle.luau b/src/Panels/DragHandle.luau index f8765ff4..19c6b2ee 100644 --- a/src/Panels/DragHandle.luau +++ b/src/Panels/DragHandle.luau @@ -1,9 +1,11 @@ local RunService = game:GetService("RunService") -local PluginContext = require("@root/Plugin/PluginContext") local React = require("@pkg/React") local Sift = require("@pkg/Sift") + +local PluginContext = require("@root/Plugin/PluginContext") local types = require("@root/Panels/types") +local useTheme = require("@root/Common/useTheme") local defaultProps = { size = 8, -- px @@ -21,6 +23,7 @@ type InternalProps = Props & typeof(defaultProps) local function DragHandle(providedProps: Props) local props: InternalProps = Sift.Dictionary.merge(defaultProps, providedProps) + local theme = useTheme() local plugin = React.useContext(PluginContext.Context) local isDragging, setIsDragging = React.useState(false) @@ -28,12 +31,14 @@ local function DragHandle(providedProps: Props) local mouseInput: InputObject?, setMouseInput = React.useState(nil :: InputObject?) local getHandleProperties = React.useCallback(function() - local size: UDim2 + local hitboxSize: UDim2 + local highlightSize: UDim2 local position: UDim2 local anchorPoint: Vector2 if props.handle == "Right" or props.handle == "Left" then - size = UDim2.new(0, props.size, 1, 0) + hitboxSize = UDim2.new(0, props.size, 1, 0) + highlightSize = UDim2.new(0, props.size / 4, 1, 0) if props.handle == "Right" then position = UDim2.fromScale(1, 0) @@ -43,7 +48,8 @@ local function DragHandle(providedProps: Props) anchorPoint = Vector2.new(0, 0) end elseif props.handle == "Top" or props.handle == "Bottom" then - size = UDim2.new(1, 0, 0, props.size) + hitboxSize = UDim2.new(1, 0, 0, props.size) + highlightSize = UDim2.new(1, 0, 0, props.size / 4) if props.handle == "Bottom" then position = UDim2.fromScale(0, 1) @@ -54,7 +60,7 @@ local function DragHandle(providedProps: Props) end end - return size, position, anchorPoint + return hitboxSize, highlightSize, position, anchorPoint end, { props.handle, props.size } :: { unknown }) local onInputBegan = React.useCallback(function(_rbx, input: InputObject) @@ -85,7 +91,7 @@ local function DragHandle(providedProps: Props) setIsHovered(false) end, {}) - local size, position, anchorPoint = getHandleProperties() + local hitboxSize, highlightSize, position, anchorPoint = getHandleProperties() React.useEffect(function(): any if mouseInput and isDragging then @@ -125,7 +131,7 @@ local function DragHandle(providedProps: Props) end, { plugin, isDragging, isHovered } :: { unknown }) return React.createElement("ImageButton", { - Size = size, + Size = hitboxSize, Position = position, AnchorPoint = anchorPoint, BackgroundTransparency = 1, @@ -133,6 +139,13 @@ local function DragHandle(providedProps: Props) [React.Event.InputEnded] = onInputEnded, [React.Event.MouseEnter] = onMouseEnter :: any, [React.Event.MouseLeave] = onMouseLeave :: any, + }, { + Highlght = React.createElement("Frame", { + Size = highlightSize, + BorderSizePixel = 0, + BackgroundTransparency = if isHovered or isDragging then 0 else 1, + BackgroundColor3 = theme.selection, + }), }) end