@quenty/radial-image 1.1.1 → 2.0.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.
 
+# [2.0.0](https://github.com/Quenty/NevermoreEngine/compare/@quenty/radial-image@1.1.1...@quenty/radial-image@2.0.0) (2022-08-14)
+
+
+### Bug Fixes
+
+* Ensure radial image doesn't have weird clipping and add Blend API ([9b00487](https://github.com/Quenty/NevermoreEngine/commit/9b0048735a3fa1e7a012f4eebf1230caf6370f8d))
+
+
+
+
+
 ## [1.1.1](https://github.com/Quenty/NevermoreEngine/compare/@quenty/radial-image@1.1.0...@quenty/radial-image@1.1.1) (2022-08-11)
 
 **Note:** Version bump only for package @quenty/radial-image

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quenty/radial-image",
-  "version": "1.1.1",
+  "version": "2.0.0",
   "description": "Quenty's radial image system",
   "keywords": [
     "Roblox",
@@ -27,13 +27,15 @@
   ],
   "dependencies": {
     "@quenty/baseobject": "^5.1.0",
-    "@quenty/blend": "^4.3.1",
+    "@quenty/blend": "^5.0.0",
     "@quenty/loader": "^5.0.0",
     "@quenty/maid": "^2.4.0",
-    "@quenty/math": "^2.2.0"
+    "@quenty/math": "^2.2.0",
+    "@quenty/rx": "^6.0.0",
+    "@quenty/valueobject": "^6.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "45ffe88b893e29690163a42c3830c983f6098a59"
+  "gitHead": "dbb62609f980983cc32da90acfef13e30ed41113"
 }

package/src/Client/RadialImage.lua

@@ -7,6 +7,9 @@ local require = require(script.Parent.loader).load(script)
 local BaseObject = require("BaseObject")
 local Blend = require("Blend")
 local Math = require("Math")
+local Observable = require("Observable")
+local Maid = require("Maid")
+local ValueObject = require("ValueObject")
 
 local RadialImage = setmetatable({}, BaseObject)
 RadialImage.ClassName = "RadialImage"
@@ -43,6 +46,9 @@ function RadialImage.new()
 	self._disabledColor.Value = Color3.new(1, 1, 1)
 	self._maid:GiveTask(self._disabledColor)
 
+	self._absoluteSize = ValueObject.new(Vector2.new(0, 0))
+	self._maid:GiveTask(self._absoluteSize)
+
 	self._maid:GiveTask(self:_render():Subscribe(function(gui)
 		self.Gui = gui
 	end))
@@ -50,6 +56,66 @@ function RadialImage.new()
 	return self
 end
 
+function RadialImage.blend(props)
+	assert(type(props) == "table", "Bad props")
+
+	return Observable.new(function(sub)
+		local maid = Maid.new()
+
+		local viewport = RadialImage.new()
+
+		local function bindObservable(propName, callback)
+			if props[propName] then
+				local observe = Blend.toPropertyObservable(props[propName])
+				if observe then
+					maid:GiveTask(observe:Subscribe(function(value)
+						callback(value)
+					end))
+				else
+					callback(props[propName])
+				end
+			end
+		end
+
+		bindObservable("Image", function(value)
+			viewport:SetImage(value)
+		end)
+
+		bindObservable("Percent", function(value)
+			viewport:SetPercent(value)
+		end)
+		bindObservable("EnabledTransparency", function(value)
+			viewport:SetEnabledTransparency(value)
+		end)
+		bindObservable("DisabledTransparency", function(value)
+			viewport:SetDisabledTransparency(value)
+		end)
+		bindObservable("EnabledColor", function(value)
+			viewport:SetEnabledColor(value)
+		end)
+		bindObservable("DisabledColor", function(value)
+			viewport:SetDisabledColor(value)
+		end)
+		bindObservable("Transparency", function(value)
+			viewport:SetTransparency(value)
+		end)
+
+		bindObservable("Size", function(value)
+			viewport.Gui.Size = value
+		end)
+		bindObservable("Position", function(value)
+			viewport.Gui.Position = value
+		end)
+		bindObservable("AnchorPoint", function(value)
+			viewport.Gui.AnchorPoint = value
+		end)
+
+		sub:Fire(viewport.Gui)
+
+		return maid
+	end)
+end
+
 --[=[
 	Sets the image to use for this radial image
 	@param image string
@@ -125,6 +191,7 @@ function RadialImage:_render()
 		Name = "RadialImage";
 		Size = UDim2.new(1, 0, 1, 0);
 		BackgroundTransparency = 1;
+		[Blend.OnChange("AbsoluteSize")] = self._absoluteSize;
 
 		[Blend.Children] = {
 			Blend.New "UIAspectRatioConstraint" {
@@ -133,7 +200,17 @@ function RadialImage:_render()
 
 			Blend.New "Frame" {
 				Name = "LeftFrame";
-				Size = UDim2.new(0.5, 0, 1, 0);
+				Size = Blend.Computed(self._absoluteSize, function(size)
+					-- hack: ensures when we're 24.5 wide or something we don't end
+					-- up with a split in the middle.
+					-- this is an issue because clips descendants tends towards floor
+					-- pixel clipping.
+					if size.x % 2 ~= 0 then
+						return UDim2.new(0.5, 1, 1, 0);
+					else
+						return UDim2.new(0.5, 0, 1, 0);
+					end
+				end);
 				Position = UDim2.new(0, 0, 0, 0);
 				BackgroundTransparency = 1;
 				ClipsDescendants = true;

package/src/Client/RadialImage.story.lua

@@ -21,7 +21,10 @@ return function(target)
 	maid:GiveTask(radialImage)
 
 	maid:GiveTask(RunService.RenderStepped:Connect(function()
-		radialImage:SetPercent((os.clock()/5) % 1)
+		-- radialImage:SetPercent((os.clock()/5) % 1)
+
+		local scale = (1 + math.sin((os.clock()/5)*math.pi*2))/2
+		radialImage.Gui.Size = UDim2.fromOffset(scale*90, scale*90)
 	end))
 
 	radialImage.Gui.Parent = target