@quenty/colorpicker 10.4.0 → 10.4.1-canary.472.c5ee856.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.4.1-canary.472.c5ee856.0](https://github.com/Quenty/NevermoreEngine/compare/@quenty/colorpicker@10.4.0...@quenty/colorpicker@10.4.1-canary.472.c5ee856.0) (2024-05-13)
+
+
+### Bug Fixes
+
+* Fix drag model in color picker code ([a46b6fd](https://github.com/Quenty/NevermoreEngine/commit/a46b6fd06a7a385cdbca1ec6e6102becd499e579))
+
+
+
+
+
 # [10.4.0](https://github.com/Quenty/NevermoreEngine/compare/@quenty/colorpicker@10.3.0...@quenty/colorpicker@10.4.0) (2024-05-09)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quenty/colorpicker",
-  "version": "10.4.0",
+  "version": "10.4.1-canary.472.c5ee856.0",
   "description": "Color picking UI system for Roblox.",
   "keywords": [
     "Roblox",
@@ -28,17 +28,17 @@
     "access": "public"
   },
   "dependencies": {
-    "@quenty/baseobject": "^10.3.0",
-    "@quenty/basicpane": "^13.3.0",
-    "@quenty/blend": "^12.3.0",
-    "@quenty/buttondragmodel": "^1.1.0",
-    "@quenty/color3utils": "^11.3.0",
-    "@quenty/inputobjectutils": "^4.4.0",
-    "@quenty/instanceutils": "^13.3.0",
-    "@quenty/loader": "^10.3.0",
-    "@quenty/maid": "^3.2.0",
-    "@quenty/math": "^2.7.0",
-    "@quenty/valueobject": "^13.3.0"
+    "@quenty/baseobject": "10.3.0",
+    "@quenty/basicpane": "13.3.0",
+    "@quenty/blend": "12.3.0",
+    "@quenty/buttondragmodel": "1.1.1-canary.472.c5ee856.0",
+    "@quenty/color3utils": "11.3.0",
+    "@quenty/inputobjectutils": "4.4.0",
+    "@quenty/instanceutils": "13.3.0",
+    "@quenty/loader": "10.3.0",
+    "@quenty/maid": "3.2.0",
+    "@quenty/math": "2.7.0",
+    "@quenty/valueobject": "13.3.0"
   },
-  "gitHead": "3fd5cdca3128bf34c8d9dfae1e92d62533b6e6f5"
+  "gitHead": "c5ee856d8d75948a21e30b90872bbad28d09e23f"
 }

package/src/Client/Cursor/ColorPickerCursorPreview.lua

@@ -20,23 +20,12 @@ ColorPickerCursorPreview.__index = ColorPickerCursorPreview
 function ColorPickerCursorPreview.new()
 	local self = setmetatable(BasicPane.new(), ColorPickerCursorPreview)
 
-	self._backgroundColorHint = ValueObject.new(Color3.new(0, 0, 0), "Color3")
-	self._maid:GiveTask(self._backgroundColorHint)
-
-	self._heightAbs = ValueObject.new(60, "number")
-	self._maid:GiveTask(self._heightAbs)
-
-	self._offsetAbs = ValueObject.new(-20, "number")
-	self._maid:GiveTask(self._offsetAbs)
-
-	self._position = ValueObject.new(Vector2.zero, "Vector2")
-	self._maid:GiveTask(self._position)
-
-	self._transparency = ValueObject.new(0, "number")
-	self._maid:GiveTask(self._transparency)
-
-	self._colorValue = ValueObject.new(Color3.new(0, 0, 0), "Color3")
-	self._maid:GiveTask(self._colorValue)
+	self._backgroundColorHint = self._maid:Add(ValueObject.new(Color3.new(0, 0, 0), "Color3"))
+	self._heightAbs = self._maid:Add(ValueObject.new(60, "number"))
+	self._offsetAbs = self._maid:Add(ValueObject.new(-20, "number"))
+	self._position = self._maid:Add(ValueObject.new(Vector2.zero, "Vector2"))
+	self._transparency = self._maid:Add(ValueObject.new(0, "number"))
+	self._colorValue = self._maid:Add(ValueObject.new(Color3.new(0, 0, 0), "Color3"))
 
 	self._maid:GiveTask(self:_render():Subscribe(function(gui)
 		self.Gui = gui
@@ -99,43 +88,43 @@ function ColorPickerCursorPreview:_render()
 			return UDim2.new(pos.x, 0, pos.y, offsetAbs - heightAbs/2)
 		end);
 		ZIndex = 3;
-		[Blend.Children] = {
-			Blend.New "UIAspectRatioConstraint" {
-				AspectRatio = 1;
+
+		Blend.New "UIAspectRatioConstraint" {
+			AspectRatio = 1;
+		};
+
+		Blend.New "Frame" {
+			BackgroundTransparency = transparency;
+			BackgroundColor3 = self._colorValue;
+			AnchorPoint = Vector2.new(0.5, 0.5);
+			Position = UDim2.fromScale(0.5, 0.5);
+			Size = UDim2.fromScale(1, 1);
+
+			Blend.New "UIScale" {
+				Scale = percentVisible;
 			};
 
-			Blend.New "Frame" {
-				BackgroundTransparency = transparency;
-				BackgroundColor3 = self._colorValue;
-				AnchorPoint = Vector2.new(0.5, 0.5);
-				Position = UDim2.fromScale(0.5, 0.5);
-				Size = UDim2.fromScale(1, 1);
-				[Blend.Children] = {
-					Blend.New "UIScale" {
-						Scale = percentVisible;
-					};
-					Blend.New "UICorner" {
-						CornerRadius = UDim.new(1, 0);
-					};
-					Blend.New "UIStroke" {
-						Color = Blend.Spring(Blend.Computed(
-							self._colorValue,
-							self._backgroundColorHint,
-							isOutlineVisible,
-							function(color, backingColor, needed)
-								if needed then
-									return ColorPickerUtils.getOutlineWithContrast(color, backingColor)
-								else
-									return color
-								end
-							end), 20);
-						Transparency = transparency;
-						Thickness = Blend.Computed(percentVisible, function(percent)
-							return percent*3
-						end);
-					};
-				};
-			}
+			Blend.New "UICorner" {
+				CornerRadius = UDim.new(1, 0);
+			};
+
+			Blend.New "UIStroke" {
+				Color = Blend.Spring(Blend.Computed(
+					self._colorValue,
+					self._backgroundColorHint,
+					isOutlineVisible,
+					function(color, backingColor, needed)
+						if needed then
+							return ColorPickerUtils.getOutlineWithContrast(color, backingColor)
+						else
+							return color
+						end
+					end), 20);
+				Transparency = transparency;
+				Thickness = Blend.Computed(percentVisible, function(percent)
+					return percent*3
+				end);
+			};
 		}
 	}
 end

package/src/Client/Cursor/ColorPickerTriangle.lua

@@ -1,4 +1,6 @@
 --[=[
+	Color picker triangle
+
 	@class ColorPickerTriangle
 ]=]
 
@@ -16,17 +18,10 @@ ColorPickerTriangle.__index = ColorPickerTriangle
 function ColorPickerTriangle.new()
 	local self = setmetatable(BaseObject.new(), ColorPickerTriangle)
 
-	self._transparency = ValueObject.new(0, "number")
-	self._maid:GiveTask(self._transparency)
-
-	self._backgroundColorHint = ValueObject.new(Color3.new(0, 0, 0), "Color3")
-	self._maid:GiveTask(self._backgroundColorHint)
-
-	self._color = ValueObject.new(Color3.new(1, 1, 1), "Color3")
-	self._maid:GiveTask(self._color)
-
-	self._sizeValue = ValueObject.new(Vector2.new(0.05, 0.1), "Vector2")
-	self._maid:GiveTask(self._sizeValue)
+	self._transparency = self._maid:Add(ValueObject.new(0, "number"))
+	self._backgroundColorHint = self._maid:Add(ValueObject.new(Color3.new(0, 0, 0), "Color3"))
+	self._color = self._maid:Add(ValueObject.new(Color3.new(1, 1, 1), "Color3"))
+	self._sizeValue = self._maid:Add(ValueObject.new(Vector2.new(0.05, 0.1), "Vector2"))
 
 	self._maid:GiveTask(self:_render():Subscribe(function(gui)
 		self.Gui = gui
@@ -62,26 +57,26 @@ function ColorPickerTriangle:_render()
 		Name = "ColorPickerTriangle";
 		Size = UDim2.new(1, 0, 1, 0);
 		BackgroundTransparency = 1;
-		[Blend.Children] = {
-			Blend.New "ImageLabel" {
-				BackgroundTransparency = 1;
-				Size = UDim2.new(1, 0, 1, 0);
-				ImageColor3 = Blend.Computed(self._color, self._backgroundColorHint, function(color, backingColor)
-					return ColorPickerUtils.getOutlineWithContrast(color, backingColor)
-				end);
-				ImageTransparency = self._transparency;
-				Image = "rbxassetid://9291514809";
-			};
-			Blend.New "UIAspectRatioConstraint" {
-				AspectRatio = Blend.Computed(self._sizeValue, function(size)
-					if size.x <= 0 or size.y <= 0 then
-						return 1
-					else
-						return size.x/size.y
-					end
-				end);
-			};
-		}
+
+		Blend.New "ImageLabel" {
+			BackgroundTransparency = 1;
+			Size = UDim2.new(1, 0, 1, 0);
+			ImageColor3 = Blend.Computed(self._color, self._backgroundColorHint, function(color, backingColor)
+				return ColorPickerUtils.getOutlineWithContrast(color, backingColor)
+			end);
+			ImageTransparency = self._transparency;
+			Image = "rbxassetid://9291514809";
+		};
+
+		Blend.New "UIAspectRatioConstraint" {
+			AspectRatio = Blend.Computed(self._sizeValue, function(size)
+				if size.x <= 0 or size.y <= 0 then
+					return 1
+				else
+					return size.x/size.y
+				end
+			end);
+		};
 	}
 end
 

package/src/Client/Cursor/HSColorPickerCursor.lua

@@ -106,47 +106,41 @@ function HSColorPickerCursor:_render()
 			return UDim2.fromScale(pos.x, pos.y)
 		end);
 
-		[Blend.Children] = {
-			Blend.New "UIAspectRatioConstraint" {
-				AspectRatio = 1;
-			};
+		Blend.New "UIAspectRatioConstraint" {
+			AspectRatio = 1;
+		};
 
-			Blend.New "Frame" {
-				AnchorPoint = Vector2.new(0.5, 0.5);
-				Position = UDim2.fromScale(0.5, 0.5);
-				Visible = self._horizontalHairVisible;
-				Size = Blend.Computed(self._crossHairWidthAbs, function(width)
-					return UDim2.new(1, 0, 0, width)
-				end);
-				BackgroundColor3 = Blend.Computed(self._backgroundColorHint, function(backingColor)
-					return ColorPickerUtils.getOutlineWithContrast(Color3.new(0, 0, 0), backingColor)
-				end);
-				BackgroundTransparency = self._transparency;
-
-				[Blend.Children] = {
-					Blend.New "UICorner" {
-						CornerRadius = UDim.new(1, 0);
-					};
-				};
+		Blend.New "Frame" {
+			AnchorPoint = Vector2.new(0.5, 0.5);
+			Position = UDim2.fromScale(0.5, 0.5);
+			Visible = self._horizontalHairVisible;
+			Size = Blend.Computed(self._crossHairWidthAbs, function(width)
+				return UDim2.new(1, 0, 0, width)
+			end);
+			BackgroundColor3 = Blend.Computed(self._backgroundColorHint, function(backingColor)
+				return ColorPickerUtils.getOutlineWithContrast(Color3.new(0, 0, 0), backingColor)
+			end);
+			BackgroundTransparency = self._transparency;
+
+			Blend.New "UICorner" {
+				CornerRadius = UDim.new(1, 0);
 			};
+		};
 
-			Blend.New "Frame" {
-				AnchorPoint = Vector2.new(0.5, 0.5);
-				Position = UDim2.fromScale(0.5, 0.5);
-				Visible = self._verticalHairVisible;
-				Size = Blend.Computed(self._crossHairWidthAbs, function(width)
-					return UDim2.new(0, width, 1, 0)
-				end);
-				BackgroundColor3 = Blend.Spring(Blend.Computed(self._backgroundColorHint, function(backingColor)
-					return ColorPickerUtils.getOutlineWithContrast(Color3.new(0, 0, 0), backingColor)
-				end), 20);
-				BackgroundTransparency = self._transparency;
-
-				[Blend.Children] = {
-					Blend.New "UICorner" {
-						CornerRadius = UDim.new(1, 0);
-					};
-				};
+		Blend.New "Frame" {
+			AnchorPoint = Vector2.new(0.5, 0.5);
+			Position = UDim2.fromScale(0.5, 0.5);
+			Visible = self._verticalHairVisible;
+			Size = Blend.Computed(self._crossHairWidthAbs, function(width)
+				return UDim2.new(0, width, 1, 0)
+			end);
+			BackgroundColor3 = Blend.Spring(Blend.Computed(self._backgroundColorHint, function(backingColor)
+				return ColorPickerUtils.getOutlineWithContrast(Color3.new(0, 0, 0), backingColor)
+			end), 20);
+			BackgroundTransparency = self._transparency;
+
+			Blend.New "UICorner" {
+				CornerRadius = UDim.new(1, 0);
 			};
 		};
 	};

package/src/Client/HSV/HSColorPicker.lua

@@ -2,6 +2,7 @@
 	Picker for hue and Saturation in HSV. See [HSVColorPicker] for the full color picker,
 	which also allows you to select "Value".
 
+	@client
 	@class HSColorPicker
 ]=]
 
@@ -9,8 +10,8 @@ local require = require(script.Parent.loader).load(script)
 
 local BaseObject = require("BaseObject")
 local Blend = require("Blend")
-local ColorPickerCursorPreview = require("ColorPickerCursorPreview")
 local ButtonDragModel = require("ButtonDragModel")
+local ColorPickerCursorPreview = require("ColorPickerCursorPreview")
 local HSColorPickerCursor = require("HSColorPickerCursor")
 local ValueObject = require("ValueObject")
 
@@ -18,6 +19,9 @@ local HSColorPicker = setmetatable({}, BaseObject)
 HSColorPicker.ClassName = "HSColorPicker"
 HSColorPicker.__index = HSColorPicker
 
+--[=[
+	@return HSColorPicker
+]=]
 function HSColorPicker.new()
 	local self = setmetatable(BaseObject.new(), HSColorPicker)
 
@@ -59,7 +63,7 @@ function HSColorPicker.new()
 	end))
 
 	-- Setup preview
-	self._maid:GiveTask(self._dragModel:ObserveIsDragging():Subscribe(function(isDragging)
+	self._maid:GiveTask(self._dragModel:ObserveIsPressed():Subscribe(function(isDragging)
 		self._preview:SetVisible(isDragging)
 	end))
 	self._maid:GiveTask(self._cursor.PositionChanged:Connect(function()
@@ -175,27 +179,27 @@ function HSColorPicker:_render()
 		Active = true;
 		Image = "rbxassetid://9290917908";
 		ImageTransparency = self._transparency;
+
 		[Blend.Instance] = function(inst)
 			self._dragModel:SetButton(inst)
 		end;
-		[Blend.Children] = {
-			Blend.New "UIAspectRatioConstraint" {
-				AspectRatio = Blend.Computed(self._sizeValue, function(size)
-					if size.x <= 0 or size.y <= 0 then
-						return 1
-					else
-						return size.x/size.y
-					end
-				end);
-			};
-
-			Blend.New "UICorner" {
-				CornerRadius = UDim.new(0, 4);
-			};
-
-			self._preview.Gui;
-			self._cursor.Gui;
+
+		Blend.New "UIAspectRatioConstraint" {
+			AspectRatio = Blend.Computed(self._sizeValue, function(size)
+				if size.x <= 0 or size.y <= 0 then
+					return 1
+				else
+					return size.x/size.y
+				end
+			end);
+		};
+
+		Blend.New "UICorner" {
+			CornerRadius = UDim.new(0, 4);
 		};
+
+		self._preview.Gui;
+		self._cursor.Gui;
 	};
 end
 

package/src/Client/HSV/HSColorPicker.story.lua

@@ -10,13 +10,12 @@ local HSColorPicker = require("HSColorPicker")
 return function(target)
 	local maid = Maid.new()
 
-	local picker = HSColorPicker.new()
+	local picker = maid:Add(HSColorPicker.new())
 	picker:SetColor(Color3.new(1, 1, 1))
 	picker.Gui.AnchorPoint = Vector2.new(0.5, 0.5)
 	picker.Gui.Position = UDim2.fromScale(0.5, 0.5);
 	picker.Gui.Size = UDim2.fromScale(0.8, 0.8)
 	picker.Gui.Parent = target
-	maid:GiveTask(picker)
 
 	return function()
 		maid:DoCleaning()

package/src/Client/HSV/HSVColorPicker.lua

@@ -2,6 +2,7 @@
 	A HSV color picker component which can be used to select colors using
 	an interface standard to Roblox Studio.
 
+	@client
 	@class HSVColorPicker
 ]=]
 
@@ -10,8 +11,8 @@ local require = require(script.Parent.loader).load(script)
 local BaseObject = require("BaseObject")
 local Blend = require("Blend")
 local HSColorPicker = require("HSColorPicker")
-local ValueColorPicker = require("ValueColorPicker")
 local Maid = require("Maid")
+local ValueColorPicker = require("ValueColorPicker")
 local ValueObject = require("ValueObject")
 
 local HSVColorPicker = setmetatable({}, BaseObject)
@@ -32,27 +33,15 @@ HSVColorPicker.__index = HSVColorPicker
 function HSVColorPicker.new()
 	local self = setmetatable(BaseObject.new(), HSVColorPicker)
 
-	self._hsvColorValue = Instance.new("Vector3Value")
-	self._hsvColorValue.Value = Vector3.zero
-	self._maid:GiveTask(self._hsvColorValue)
+	self._hsvColorValue = self._maid:Add(ValueObject.new(Vector3.zero, "Vector3"))
+	self._sizeValue = self._maid:Add(ValueObject.new(Vector2.new(6, 4), "Vector2"))
+	self._innerPadding = self._maid:Add(ValueObject.new(0.2, "number"))
+	self._transparency = self._maid:Add(ValueObject.new(0, "number"))
+	self._hueSaturationPicker = self._maid:Add(HSColorPicker.new())
+	self._valuePicker = self._maid:Add(ValueColorPicker.new())
 
 	self.ColorChanged = self._hsvColorValue.Changed
 
-	self._sizeValue = ValueObject.new(Vector2.new(6, 4), "Vector2")
-	self._maid:GiveTask(self._sizeValue)
-
-	self._innerPadding = ValueObject.new(0.2, "number")
-	self._maid:GiveTask(self._innerPadding)
-
-	self._transparency = ValueObject.new(0, "number")
-	self._maid:GiveTask(self._transparency)
-
-	self._hueSaturationPicker = HSColorPicker.new()
-	self._maid:GiveTask(self._hueSaturationPicker)
-
-	self._valuePicker = ValueColorPicker.new()
-	self._maid:GiveTask(self._valuePicker)
-
 	self._maid:GiveTask(self:_render():Subscribe(function(gui)
 		self.Gui = gui
 	end))
@@ -226,28 +215,11 @@ function HSVColorPicker:_render()
 			ZIndex = Blend.Computed(picker:ObserveIsPressed(), function(isPressed)
 				return isPressed and 2 or 1
 			end);
-			[Blend.Children] = {
-				picker.Gui;
-				Blend.New "UIAspectRatioConstraint" {
-					AspectRatio = Blend.Computed(picker:GetSizeValue(), function(size)
-						if size.x <= 0 or size.y <= 0 then
-							return 1
-						else
-							return size.x/size.y
-						end
-					end);
-				};
-			};
-		};
-	end
 
-	return Blend.New "Frame" {
-		Name = "HSVColorPicker";
-		Size = UDim2.new(1, 0, 1, 0);
-		BackgroundTransparency = 1;
-		[Blend.Children] = {
+			picker.Gui;
+
 			Blend.New "UIAspectRatioConstraint" {
-				AspectRatio = Blend.Computed(self._sizeValue, function(size)
+				AspectRatio = Blend.Computed(picker:GetSizeValue(), function(size)
 					if size.x <= 0 or size.y <= 0 then
 						return 1
 					else
@@ -255,16 +227,33 @@ function HSVColorPicker:_render()
 					end
 				end);
 			};
+		};
+	end
+
+	return Blend.New "Frame" {
+		Name = "HSVColorPicker";
+		Size = UDim2.new(1, 0, 1, 0);
+		BackgroundTransparency = 1;
 
-			container(self._hueSaturationPicker, {
-				AnchorPoint = Vector2.zero;
-				Position = UDim2.fromScale(0, 0);
-			});
-			container(self._valuePicker, {
-				AnchorPoint = Vector2.new(1, 0);
-				Position = UDim2.fromScale(1, 0);
-			});
+		Blend.New "UIAspectRatioConstraint" {
+			AspectRatio = Blend.Computed(self._sizeValue, function(size)
+				if size.x <= 0 or size.y <= 0 then
+					return 1
+				else
+					return size.x/size.y
+				end
+			end);
 		};
+
+		container(self._hueSaturationPicker, {
+			AnchorPoint = Vector2.zero;
+			Position = UDim2.fromScale(0, 0);
+		});
+
+		container(self._valuePicker, {
+			AnchorPoint = Vector2.new(1, 0);
+			Position = UDim2.fromScale(1, 0);
+		});
 	};
 end
 

package/src/Client/HSV/HSVColorPicker.story.lua

@@ -10,13 +10,12 @@ local HSVColorPicker = require("HSVColorPicker")
 return function(target)
 	local maid = Maid.new()
 
-	local picker = HSVColorPicker.new()
+	local picker = maid:Add(HSVColorPicker.new())
 	picker:SetColor(Color3.new(0.5, 0.8, 0.3))
 	picker.Gui.AnchorPoint = Vector2.new(0.5, 0.5)
 	picker.Gui.Position = UDim2.fromScale(0.5, 0.5);
 	picker.Gui.Size = UDim2.fromScale(0.8, 0.8)
 	picker.Gui.Parent = target
-	maid:GiveTask(picker)
 
 	return function()
 		maid:DoCleaning()

package/src/Client/HSV/ValueColorPicker.lua

@@ -1,5 +1,7 @@
 --[=[
-	Picker for value in HSV. See [HSVColorPicker]
+	Picker for value in HSV. See [HSVColorPicker] for usage.
+
+	@client
 	@class ValueColorPicker
 ]=]
 
@@ -35,13 +37,11 @@ function ValueColorPicker.new()
 	-- self._cursor:SetPosition(Vector3.new(0.5, 0, 1))
 	-- self._maid:GiveTask(self._cursor)
 
-	self._triangle = ColorPickerTriangle.new()
+	self._triangle = self._maid:Add(ColorPickerTriangle.new())
 	self._triangle.Gui.AnchorPoint = Vector2.new(0, 0.5)
 	self._triangle.Gui.Position = UDim2.fromScale(0, 1)
-	self._maid:GiveTask(self._triangle)
 
-	self._preview = ColorPickerCursorPreview.new()
-	self._maid:GiveTask(self._preview)
+	self._preview = self._maid:Add(ColorPickerCursorPreview.new())
 
 	self._maid:GiveTask(self:_render():Subscribe(function(gui)
 		self.Gui = gui
@@ -72,7 +72,7 @@ function ValueColorPicker.new()
 	end))
 
 	-- Setup preview
-	self._maid:GiveTask(self._dragModel:ObserveIsDragging():Subscribe(function(isDragging)
+	self._maid:GiveTask(self._dragModel:ObserveIsPressed():Subscribe(function(isDragging)
 		self._preview:SetVisible(isDragging)
 	end))
 	self._maid:GiveTask(self._hsvColorValue.Changed:Connect(function()
@@ -102,58 +102,64 @@ function ValueColorPicker.new()
 	return self
 end
 
+--[=[
+	Sets the size (height) of the value color picker
+
+	@param height number
+]=]
 function ValueColorPicker:SetSize(height)
 	assert(type(height) == "number", "Bad height")
 
 	self:_updateSize(height)
 end
 
-function ValueColorPicker:HintBackgroundColor(color)
-	self._backgroundColorHint.Value = color
-end
-
-function ValueColorPicker:_updatePreviewPosition()
-	self._preview:SetPosition(Vector2.new(0.5, 1 - self._hsvColorValue.Value.z))
-end
-
-function ValueColorPicker:_updateSize(newHeight)
-	local triangleSize = self._triangle:GetSizeValue().Value
-	local width = self._leftWidth.Value + triangleSize.y
-	local height = newHeight or self._sizeValue.Value.y
-
-	self._sizeValue.Value = Vector2.new(width, height)
-end
-
-function ValueColorPicker:_updateHintedColors()
-	local current = self._hsvColorValue.Value
-	local h, s, v = current.x, current.y, current.z
-	local color = Color3.fromHSV(h, s, v)
+--[=[
+	Hints what the background color should be to ensure contrast
 
-	-- self._cursor:HintBackgroundColor(color)
-	self._preview:HintBackgroundColor(color)
-	self._preview:SetColor(color)
+	@param color
+]=]
+function ValueColorPicker:HintBackgroundColor(color: Color3)
+	self._backgroundColorHint.Value = color
 end
 
 function ValueColorPicker:ObserveIsPressed()
 	return self._dragModel:ObserveIsPressed()
 end
 
-function ValueColorPicker:SetHSVColor(hsvColor)
+--[=[
+	Sets the HSV Color for the value picker
+
+	@param hsvColor
+]=]
+function ValueColorPicker:SetHSVColor(hsvColor: Vector3)
 	assert(typeof(hsvColor) == "Vector3", "Bad hsvColor")
 
 	self._hsvColorValue.Value = hsvColor
 end
 
+--[=[
+	Returns the HSV color3
+
+	@return Vector3
+]=]
 function ValueColorPicker:GetHSVColor()
 	return self._hsvColorValue.Value
 end
 
-function ValueColorPicker:SetColor(color)
+--[=[
+	Setes the current color
+
+	@param color
+]=]
+function ValueColorPicker:SetColor(color: Color3)
 	local h, s, v = Color3.toHSV(color)
 	self._hsvColorValue.Value = Vector3.new(h, s, v)
 end
 
-function ValueColorPicker:GetColor()
+--[=[
+	Gets the current color
+]=]
+function ValueColorPicker:GetColor(): Color3
 	local current = self._hsvColorValue.Value
 	local h, s, v = current.x, current.y, current.z
 	return Color3.fromHSV(h, s, v)
@@ -173,71 +179,91 @@ function ValueColorPicker:SetTransparency(transparency)
 	self._transparency.Value = transparency
 end
 
+function ValueColorPicker:_updatePreviewPosition()
+	self._preview:SetPosition(Vector2.new(0.5, 1 - self._hsvColorValue.Value.z))
+end
+
+function ValueColorPicker:_updateSize(newHeight)
+	local triangleSize = self._triangle:GetSizeValue().Value
+	local width = self._leftWidth.Value + triangleSize.y
+	local height = newHeight or self._sizeValue.Value.y
+
+	self._sizeValue.Value = Vector2.new(width, height)
+end
+
+function ValueColorPicker:_updateHintedColors()
+	local current = self._hsvColorValue.Value
+	local h, s, v = current.x, current.y, current.z
+	local color = Color3.fromHSV(h, s, v)
+
+	-- self._cursor:HintBackgroundColor(color)
+	self._preview:HintBackgroundColor(color)
+	self._preview:SetColor(color)
+end
+
 function ValueColorPicker:_render()
 	return Blend.New "ImageButton" {
 		Name = "HSColorPicker";
 		Size = UDim2.new(1, 0, 1, 0);
 		BackgroundTransparency = 1;
 		Active = true;
+
 		[Blend.Instance] = function(inst)
 			self._dragModel:SetButton(inst)
 		end;
-		[Blend.Children] = {
-			Blend.New "UIAspectRatioConstraint" {
-				AspectRatio = Blend.Computed(self._sizeValue, function(size)
-					if size.x <= 0 or size.y <= 0 then
-						return 1
-					else
-						return size.x/size.y
-					end
-				end);
-			};
 
-			Blend.New "Frame" {
-				BackgroundColor3 = Color3.new(1, 1, 1);
-				BackgroundTransparency = self._transparency;
-				Size = Blend.Computed(self._leftWidth, self._sizeValue, function(width, sizeValue)
-					if sizeValue.x == 0 then
-						return UDim2.new(0, 0, 1, 0)
-					end
+		Blend.New "UIAspectRatioConstraint" {
+			AspectRatio = Blend.Computed(self._sizeValue, function(size)
+				if size.x <= 0 or size.y <= 0 then
+					return 1
+				else
+					return size.x/size.y
+				end
+			end);
+		};
 
-					return UDim2.new(width/sizeValue.x, 0, 1, 0)
+		Blend.New "Frame" {
+			BackgroundColor3 = Color3.new(1, 1, 1);
+			BackgroundTransparency = self._transparency;
+			Size = Blend.Computed(self._leftWidth, self._sizeValue, function(width, sizeValue)
+				if sizeValue.x == 0 then
+					return UDim2.new(0, 0, 1, 0)
+				end
+
+				return UDim2.new(width/sizeValue.x, 0, 1, 0)
+			end);
+
+			Blend.New "UIGradient" {
+				Color = Blend.Computed(self._hsvColorValue, function(color)
+					local h, s = color.x, color.y
+					local start = Color3.fromHSV(h, s, 0)
+					local finish = Color3.fromHSV(h, s, 1)
+					return ColorSequence.new(start, finish)
 				end);
-				[Blend.Children] = {
-					Blend.New "UIGradient" {
-						Color = Blend.Computed(self._hsvColorValue, function(color)
-							local h, s = color.x, color.y
-							local start = Color3.fromHSV(h, s, 0)
-							local finish = Color3.fromHSV(h, s, 1)
-							return ColorSequence.new(start, finish)
-						end);
-						Rotation = -90;
-					};
-					Blend.New "UICorner" {
-						CornerRadius = UDim.new(0, 4);
-					};
-
-					self._preview.Gui;
-					-- self._cursor.Gui;
-				}
+				Rotation = -90;
+			};
+			Blend.New "UICorner" {
+				CornerRadius = UDim.new(0, 4);
 			};
 
-			Blend.New "Frame" {
-				BackgroundTransparency = 1;
-				Position = UDim2.fromScale(1, 0);
-				AnchorPoint = Vector2.new(1, 0);
-				Size = Blend.Computed(self._leftWidth, self._sizeValue, function(width, sizeValue)
-					if sizeValue.x == 0 then
-						return UDim2.new(0, 0, 1, 0)
-					end
-
-					return UDim2.new((sizeValue.x - width)/sizeValue.x, 0, 1, 0)
-				end);
-				[Blend.Children] = {
-					self._triangle.Gui;
-				};
-			}
+			self._preview.Gui;
+			-- self._cursor.Gui;
 		};
+
+		Blend.New "Frame" {
+			BackgroundTransparency = 1;
+			Position = UDim2.fromScale(1, 0);
+			AnchorPoint = Vector2.new(1, 0);
+			Size = Blend.Computed(self._leftWidth, self._sizeValue, function(width, sizeValue)
+				if sizeValue.x == 0 then
+					return UDim2.new(0, 0, 1, 0)
+				end
+
+				return UDim2.new((sizeValue.x - width)/sizeValue.x, 0, 1, 0)
+			end);
+
+			self._triangle.Gui;
+		}
 	};
 end
 

package/src/Client/HSV/ValueColorPicker.story.lua

@@ -10,13 +10,12 @@ local ValueColorPicker = require("ValueColorPicker")
 return function(target)
 	local maid = Maid.new()
 
-	local picker = ValueColorPicker.new()
+	local picker = maid:Add(ValueColorPicker.new())
 	picker:SetHSVColor(Vector3.new(1, 0.5, 1))
 	picker.Gui.AnchorPoint = Vector2.new(0.5, 0.5)
 	picker.Gui.Position = UDim2.fromScale(0.5, 0.5);
 	picker.Gui.Size = UDim2.fromScale(0.8, 0.8)
 	picker.Gui.Parent = target
-	maid:GiveTask(picker)
 
 	return function()
 		maid:DoCleaning()

package/src/Client/Story/ColorPickerStoryUtils.lua

@@ -11,18 +11,16 @@ local ValueObject = require("ValueObject")
 local ColorPickerStoryUtils = {}
 
 function ColorPickerStoryUtils.createPicker(maid, valueSync, labelText, currentVisible)
-	local picker = HSVColorPicker.new()
+	local picker = maid:Add(HSVColorPicker.new())
 	picker.Gui.AnchorPoint = Vector2.new(0.5, 1)
 	picker.Gui.Position = UDim2.new(0.5, 0, 1, 0)
 	picker.Gui.Size = UDim2.new(0, 150, 1, -30);
 	picker.Gui.ZIndex = 2;
-	maid:GiveTask(picker)
 
 	maid:GiveTask(picker:SyncValue(valueSync))
 
-	local visible = Instance.new("BoolValue")
+	local visible = maid:Add(Instance.new("BoolValue"))
 	visible.Value = false
-	maid:GiveTask(visible)
 
 	maid:GiveTask(visible.Changed:Connect(function()
 		if visible.Value then
@@ -51,49 +49,47 @@ function ColorPickerStoryUtils.createPicker(maid, valueSync, labelText, currentV
 		[Blend.OnEvent "Activated"] = function()
 			visible.Value = not visible.Value
 		end;
-		[Blend.Children] = {
-			picker.Gui;
-			Blend.New "TextLabel" {
-				BackgroundTransparency = 1;
-				Text = labelText;
-				Position = UDim2.new(0, 35, 0, 5);
-				Size = UDim2.new(1, -40, 0, 20);
-				Font = Enum.Font.FredokaOne;
-				TextXAlignment = Enum.TextXAlignment.Left;
-				TextScaled = true;
-				TextColor3 = Color3.new(1, 1, 1);
-				ZIndex = 0;
-			};
 
-			Blend.New "Frame" {
-				BackgroundColor3 = valueSync;
-				Size = UDim2.new(0, 20, 0, 20);
-				Position = UDim2.new(0, 5, 0, 5);
-				[Blend.Children] = {
-					Blend.New "UICorner" {
-						CornerRadius = UDim.new(0, 10);
-					};
+		picker.Gui;
+		Blend.New "TextLabel" {
+			BackgroundTransparency = 1;
+			Text = labelText;
+			Position = UDim2.new(0, 35, 0, 5);
+			Size = UDim2.new(1, -40, 0, 20);
+			Font = Enum.Font.FredokaOne;
+			TextXAlignment = Enum.TextXAlignment.Left;
+			TextScaled = true;
+			TextColor3 = Color3.new(1, 1, 1);
+			ZIndex = 0;
+		};
+
+		Blend.New "Frame" {
+			BackgroundColor3 = valueSync;
+			Size = UDim2.new(0, 20, 0, 20);
+			Position = UDim2.new(0, 5, 0, 5);
+			[Blend.Children] = {
+				Blend.New "UICorner" {
+					CornerRadius = UDim.new(0, 10);
 				};
 			};
+		};
 
-			Blend.New "UIPadding" {
-				PaddingTop = UDim.new(0, 10);
-				PaddingBottom = UDim.new(0, 10);
-				PaddingLeft = UDim.new(0, 10);
-				PaddingRight = UDim.new(0, 10);
-			};
+		Blend.New "UIPadding" {
+			PaddingTop = UDim.new(0, 10);
+			PaddingBottom = UDim.new(0, 10);
+			PaddingLeft = UDim.new(0, 10);
+			PaddingRight = UDim.new(0, 10);
+		};
 
-			Blend.New "UICorner" {
-				CornerRadius = UDim.new(0, 10);
-			};
+		Blend.New "UICorner" {
+			CornerRadius = UDim.new(0, 10);
 		};
 	}
 
 end
 
 function ColorPickerStoryUtils.create(maid, buildPickers)
-	local currentVisible = ValueObject.new()
-	maid:GiveTask(currentVisible)
+	local currentVisible = maid:Add(ValueObject.new())
 
 	local built = {}
 
@@ -103,22 +99,21 @@ function ColorPickerStoryUtils.create(maid, buildPickers)
 
 	local function pickerGroup(pickers)
 		return Blend.New "Frame" {
-				Size = UDim2.new(1, 0, 0, 0);
-				AnchorPoint = Vector2.new(0.5, 0.5);
-				Position = UDim2.fromScale(0.5, 0.5);
-				BackgroundTransparency = 1;
-				AutomaticSize = Enum.AutomaticSize.Y;
-				[Blend.Children] = {
-					Blend.New "UIListLayout" {
-						Padding = UDim.new(0, 10);
-						HorizontalAlignment = Enum.HorizontalAlignment.Left;
-						VerticalAlignment = Enum.VerticalAlignment.Top;
-						FillDirection = Enum.FillDirection.Horizontal;
-					};
-
-					pickers;
-				};
+			Size = UDim2.new(1, 0, 0, 0);
+			AnchorPoint = Vector2.new(0.5, 0.5);
+			Position = UDim2.fromScale(0.5, 0.5);
+			BackgroundTransparency = 1;
+			AutomaticSize = Enum.AutomaticSize.Y;
+
+			Blend.New "UIListLayout" {
+				Padding = UDim.new(0, 10);
+				HorizontalAlignment = Enum.HorizontalAlignment.Left;
+				VerticalAlignment = Enum.VerticalAlignment.Top;
+				FillDirection = Enum.FillDirection.Horizontal;
 			};
+
+			pickers;
+		};
 	end
 
 	local groups = {}
@@ -152,16 +147,14 @@ function ColorPickerStoryUtils.create(maid, buildPickers)
 			end
 		end;
 
-		[Blend.Children] = {
-			Blend.New "UIListLayout" {
-				Padding = UDim.new(0, 10);
-				HorizontalAlignment = Enum.HorizontalAlignment.Center;
-				VerticalAlignment = Enum.VerticalAlignment.Top;
-				FillDirection = Enum.FillDirection.Vertical;
-			};
-
-			groups;
+		Blend.New "UIListLayout" {
+			Padding = UDim.new(0, 10);
+			HorizontalAlignment = Enum.HorizontalAlignment.Center;
+			VerticalAlignment = Enum.VerticalAlignment.Top;
+			FillDirection = Enum.FillDirection.Vertical;
 		};
+
+		groups;
 	};
 end