Skip to content

Commit db37aef

Browse files
Christian-ToneyChristian-Toney
committed
Add error handling and fix button hover/click colors
1 parent 467dce6 commit db37aef

File tree

6 files changed

+259
-112
lines changed

6 files changed

+259
-112
lines changed

‎src/DialogueEditor/components/Paragraph/init.luau‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export type ParagraphProperties = {
1212
layoutOrder: number?;
1313
textSize: number?;
1414
children: React.ReactNode?;
15+
fontWeight: Enum.FontWeight?;
1516
}
1617

1718
local function Paragraph(properties: ParagraphProperties)
@@ -24,13 +25,14 @@ local function Paragraph(properties: ParagraphProperties)
2425
local textColor3 = if properties.textColor3 ~= nil then properties.textColor3 else colors.text;
2526
local textSize = if properties.textSize ~= nil then properties.textSize else 14;
2627
local children = properties.children;
28+
local fontWeight = if properties.fontWeight ~= nil then properties.fontWeight else Enum.FontWeight.Regular;
2729

2830
return React.createElement("TextLabel", {
2931
AutomaticSize = automaticSize;
3032
Text = text;
3133
TextColor3 = textColor3;
3234
TextWrapped = textWrapped;
33-
FontFace = Font.fromName("BuilderSans", Enum.FontWeight.Regular);
35+
FontFace = Font.fromName("BuilderSans", fontWeight);
3436
TextSize = textSize;
3537
BackgroundTransparency = 1;
3638
LayoutOrder = layoutOrder;

‎src/DialogueEditor/components/Toolbar/ToolbarButton.luau‎

Lines changed: 69 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
--!strict
22

33
local TweenService = game:GetService("TweenService");
4+
local UserInputService = game:GetService("UserInputService");
45

56
local root = script.Parent.Parent.Parent.Parent;
67
local React = require(root.roblox_packages.react);
@@ -11,34 +12,92 @@ export type ToolbarButtonProps = {
1112
text: string?;
1213
layoutOrder: number;
1314
isDisabled: boolean?;
14-
isHighlighted: boolean?;
1515
onClick: () -> ();
16+
plugin: Plugin;
1617
};
1718

1819
local function ToolbarButton(props: ToolbarButtonProps)
1920

2021
local colors = useStudioColors();
21-
local buttonRef = React.useRef(nil);
22-
local isUserHovering, setIsUserHovering = React.useState(false);
22+
local buttonRef = React.useRef(nil :: TextButton?);
23+
local plugin = props.plugin;
2324

2425
React.useEffect(function()
2526

26-
if buttonRef.current then
27-
local tween = TweenService:Create(buttonRef.current, TweenInfo.new(0.2), {
28-
BackgroundTransparency = if isUserHovering and not props.isDisabled then 0 elseif props.isHighlighted then 0.5 else 1;
27+
local button = buttonRef.current;
28+
if not button then
29+
30+
return;
31+
32+
end;
33+
34+
local isUserHovering = false;
35+
local isMouseDown = false;
36+
local function playTween()
37+
38+
local tween = TweenService:Create(button, TweenInfo.new(0.1), {
39+
BackgroundTransparency = if isMouseDown then 0.75 elseif isUserHovering then 0.25 else 1;
2940
});
41+
3042
tween:Play();
31-
end
3243

33-
end, {isUserHovering :: unknown, props.isHighlighted, props.isDisabled});
44+
end;
45+
46+
local mouseEnterConnection = button.MouseEnter:Connect(function()
47+
48+
isUserHovering = true;
49+
playTween();
50+
51+
end);
52+
53+
local mouseLeaveConnection = button.MouseLeave:Connect(function()
54+
55+
isUserHovering = false;
56+
playTween();
57+
58+
end);
59+
60+
local mouseButton1DownConnection = button.InputBegan:Connect(function(input)
61+
62+
if input.UserInputType == Enum.UserInputType.MouseButton1 and isUserHovering and not isMouseDown then
63+
64+
isMouseDown = true;
65+
playTween();
66+
67+
end;
68+
69+
end);
70+
71+
local mouseButton1UpConnection = button.InputEnded:Connect(function(input)
72+
73+
if input.UserInputType == Enum.UserInputType.MouseButton1 then
74+
75+
isMouseDown = false;
76+
playTween();
77+
78+
end;
79+
80+
end);
81+
82+
return function()
83+
84+
mouseEnterConnection:Disconnect();
85+
mouseLeaveConnection:Disconnect();
86+
mouseButton1DownConnection:Disconnect();
87+
mouseButton1UpConnection:Disconnect();
88+
89+
end;
90+
91+
end, {props.isDisabled});
3492

3593
return React.createElement("TextButton", {
3694
LayoutOrder = props.layoutOrder;
37-
BackgroundColor3 = if props.isHighlighted then colors.backgroundWarning else colors.toolbarButton;
95+
BackgroundColor3 = colors.toolbarButton;
96+
BackgroundTransparency = 1;
3897
AutoButtonColor = false;
3998
ref = buttonRef;
4099
Text = "";
41-
Size = UDim2.new(0, 0, 0, 0);
100+
Size = UDim2.new();
42101
AutomaticSize = Enum.AutomaticSize.XY;
43102
BorderSizePixel = 0;
44103
[React.Event.Activated] = function()
@@ -50,16 +109,6 @@ local function ToolbarButton(props: ToolbarButtonProps)
50109
end;
51110

52111
end;
53-
[React.Event.MouseEnter] = function()
54-
55-
setIsUserHovering(true);
56-
57-
end;
58-
[React.Event.MouseLeave] = function()
59-
60-
setIsUserHovering(false);
61-
62-
end;
63112
}, {
64113
UIPadding = React.createElement("UIPadding", {
65114
PaddingLeft = UDim.new(0, 10);

‎src/DialogueEditor/components/Toolbar/init.luau‎

Lines changed: 69 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ local Selection = game:GetService("Selection");
44

55
local root = script.Parent.Parent.Parent;
66
local React = require(root.roblox_packages.react);
7-
local useRefreshDialogueMakerScripts = require(root.DialogueEditor.hooks.useRefreshDialogueMakerScripts);
87
local ToolbarButton = require(script.ToolbarButton);
9-
local useStudioColors = require(root.DialogueEditor.hooks.useStudioColors);
10-
local useDialogueScriptType = require(root.DialogueEditor.hooks.useDialogueScriptType);
118
local useChangeHistory = require(root.DialogueEditor.hooks.useChangeHistory);
9+
local useDialogueScriptType = require(root.DialogueEditor.hooks.useDialogueScriptType);
1210
local useDynamicSize = require(root.DialogueEditor.hooks.useDynamicSize);
11+
local useRefreshDialogueMakerScripts = require(root.DialogueEditor.hooks.useRefreshDialogueMakerScripts);
12+
local useStudioColors = require(root.DialogueEditor.hooks.useStudioColors);
1313
local useStudioIcons = require(root.DialogueEditor.hooks.useStudioIcons);
1414

1515
export type ToolbarProps = {
@@ -24,6 +24,7 @@ export type ToolbarProps = {
2424
local function Toolbar(props: ToolbarProps)
2525

2626
local icons = useStudioIcons();
27+
local plugin = props.plugin;
2728
local pluginGUI = props.pluginGUI;
2829
local colors = useStudioColors();
2930
local refreshDialogueMakerScripts = useRefreshDialogueMakerScripts();
@@ -114,109 +115,94 @@ local function Toolbar(props: ToolbarProps)
114115

115116
end, {selectedScript :: unknown, refreshDialogueMakerScripts});
116117

117-
return React.createElement("Frame", {
118-
Size = UDim2.new(1, 0, 0, 40);
119-
LayoutOrder = layoutOrder;
120-
BackgroundColor3 = colors.toolbar;
121-
BorderSizePixel = 0;
122-
}, {
123-
UIListLayout = React.createElement("UIListLayout", {
124-
SortOrder = Enum.SortOrder.LayoutOrder;
125-
FillDirection = Enum.FillDirection.Horizontal;
126-
VerticalAlignment = Enum.VerticalAlignment.Center;
127-
});
128-
UIPadding = React.createElement("UIPadding", {
129-
PaddingLeft = UDim.new(0, 15);
130-
PaddingRight = UDim.new(0, 15);
131-
PaddingBottom = UDim.new(0, 5);
132-
});
133-
ViewParentButton = React.createElement(ToolbarButton, {
134-
iconImage = "rbxassetid://14098871159";
135-
text = if shouldShowLabels then "View parent" else nil;
136-
layoutOrder = 1;
137-
isDisabled = settingsTarget ~= nil or not selectedScript;
138-
onClick = function()
118+
local buttons = {};
139119

140-
if selectedScript then
120+
local viewParentButton = React.createElement(ToolbarButton, {
121+
iconImage = "rbxassetid://14098871159";
122+
text = if shouldShowLabels then "View parent" else nil;
123+
plugin = plugin;
124+
layoutOrder = #buttons + 1;
125+
key = "ViewParentButton";
126+
isDisabled = settingsTarget ~= nil or not selectedScript;
127+
onClick = function()
141128

142-
Selection:Set({selectedScript.Parent});
129+
if selectedScript then
143130

144-
end;
131+
Selection:Set({selectedScript.Parent});
132+
133+
end;
134+
135+
end;
136+
});
137+
138+
table.insert(buttons, viewParentButton);
139+
140+
if dialogueScriptType then
141+
142+
local settingsButton = React.createElement(ToolbarButton, {
143+
iconImage = icons.settings;
144+
text = if shouldShowLabels then (if settingsTarget == nil then "Settings" else "Close settings") else nil;
145+
layoutOrder = #buttons + 1;
146+
plugin = plugin;
147+
key = "SettingsButton";
148+
onClick = function()
149+
150+
setSettingsTarget(if settingsTarget then nil else selectedScript);
145151

146152
end;
147153
});
148-
SettingsButton = if dialogueScriptType then
149-
React.createElement(ToolbarButton, {
150-
iconImage = icons.settings;
151-
text = if shouldShowLabels then (if settingsTarget == nil then "Settings" else "Close settings") else nil;
152-
layoutOrder = 2;
153-
onClick = function()
154154

155-
if settingsTarget then
155+
table.insert(buttons, settingsButton);
156156

157-
setSettingsTarget(nil);
157+
end;
158158

159-
else
159+
if not selectedScript or dialogueScriptType == "Redirect" then
160160

161-
setSettingsTarget(selectedScript);
161+
for _, dialogueType in {"Conversation", "Message", "Response", "Redirect"} do
162162

163-
end;
163+
if not selectedScript and dialogueType ~= "Conversation" then
164164

165-
end;
166-
})
167-
else nil;
168-
AddConversationButton = if not selectedScript then
169-
React.createElement(ToolbarButton, {
170-
iconImage = icons.conversation;
171-
text = if shouldShowLabels then "Add conversation" else nil;
172-
layoutOrder = 3;
173-
isDisabled = settingsTarget ~= nil or #Selection:Get() ~= 1;
174-
onClick = function()
165+
continue;
175166

176-
addDialogueScript("Conversation");
167+
end;
177168

178-
end;
179-
})
180-
else nil;
181-
AddMessageButton = if selectedScript and dialogueScriptType ~= "Redirect" then
182-
React.createElement(ToolbarButton, {
183-
iconImage = icons.message;
184-
text = if shouldShowLabels then "Add message" else nil;
185-
layoutOrder = 4;
169+
local addDialogueButton = React.createElement(ToolbarButton, {
170+
iconImage = icons[dialogueType:lower()];
171+
text = if shouldShowLabels then `Add {dialogueType:lower()}` else nil;
172+
layoutOrder = #buttons + 1;
173+
plugin = plugin;
174+
key = `Add{dialogueType}Button`;
186175
isDisabled = settingsTarget ~= nil or #Selection:Get() ~= 1;
187176
onClick = function()
188177

189-
addDialogueScript("Message");
178+
addDialogueScript(dialogueType :: "Conversation" | "Message" | "Response" | "Redirect");
190179

191180
end;
192-
})
193-
else nil;
194-
AddResponseButton = if selectedScript and dialogueScriptType ~= "Redirect" then
195-
React.createElement(ToolbarButton, {
196-
iconImage = icons.response;
197-
text = if shouldShowLabels then "Add response" else nil;
198-
layoutOrder = 5;
199-
isDisabled = settingsTarget ~= nil or #Selection:Get() ~= 1;
200-
onClick = function()
181+
});
201182

202-
addDialogueScript("Response");
183+
table.insert(buttons, addDialogueButton);
203184

204-
end;
205-
})
206-
else nil;
207-
AddRedirectButton = if selectedScript and dialogueScriptType ~= "Redirect" then
208-
React.createElement(ToolbarButton, {
209-
iconImage = icons.redirect;
210-
text = if shouldShowLabels then (if shouldShowLabels then "Add redirect" else nil) else nil;
211-
layoutOrder = 6;
212-
isDisabled = settingsTarget ~= nil or #Selection:Get() ~= 1;
213-
onClick = function()
185+
end;
214186

215-
addDialogueScript("Redirect");
187+
end;
216188

217-
end;
218-
})
219-
else nil;
189+
return React.createElement("Frame", {
190+
Size = UDim2.new(1, 0, 0, 40);
191+
LayoutOrder = layoutOrder;
192+
BackgroundColor3 = colors.toolbar;
193+
BorderSizePixel = 0;
194+
}, {
195+
UIListLayout = React.createElement("UIListLayout", {
196+
SortOrder = Enum.SortOrder.LayoutOrder;
197+
FillDirection = Enum.FillDirection.Horizontal;
198+
VerticalAlignment = Enum.VerticalAlignment.Center;
199+
});
200+
UIPadding = React.createElement("UIPadding", {
201+
PaddingLeft = UDim.new(0, 15);
202+
PaddingRight = UDim.new(0, 15);
203+
PaddingBottom = UDim.new(0, 5);
204+
});
205+
Buttons = React.createElement(React.Fragment, {}, buttons);
220206
});
221207

222208
end;

‎src/DialogueEditor/init.luau‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export type DialogueEditorProperties = {
1818

1919
local function DialogueEditor(props: DialogueEditorProperties)
2020

21-
local selectedScript, conversationScript = useDialogueMakerScriptSelection();
21+
local selectedScript = useDialogueMakerScriptSelection();
2222
local settingsTarget, setSettingsTarget = React.useState(nil :: ModuleScript?);
2323
local closeDialogueEditor = props.closeDialogueEditor;
2424

0 commit comments

Comments
 (0)