test

exemple/elasticScrollFrame.lua

@@ -1,28 +1,31 @@
-local Quad = require(game.ReplicatedStorage:WaitForChild "Quad"); ---@module Quad.src
+local Quad = require(game.ReplicatedStorage:WaitForChild "Quad"); ---@module "Quad.src"
-local _ = Quad.init "IosUI"; local round,class,mount,store,event,tween = _.round,_.class,_.mount,_.store,_.event,_.tween;
+local _ = Quad.init "components"; local round,class,mount,store,event,tween = _.round,_.class,_.mount,_.store,_.event,_.tween;
-
--- init quad
-local scrollFrame = class.extend();
-local connection = event.new;
-
--- const
-local white = Color3.fromRGB(255,255,255);
-local scrollMut = 100;
-local elasticMut = 20;
-local fitTime = 0.22;
-local tweenTime = 0.63;
-local mouseUpMut = 42;
 local max = math.max;
 local min = math.min;
 local abs = math.abs;
 
--- base objects
+-- init quad
+local scrollFrame = class.extend();
+local connection = event.new;
 local frame = class "Frame";
 frame.BorderSizePixel = 0;
 local button = class "TextButton";
 button.BorderSizePixel = 0;
-button.Text = nil;
+button.Text = "";
+button.AutoButtonColor = false;
 local image = class "ImageLabel";
+image.BackgroundTransparency = 1;
+
+-- const
+local white = Color3.fromRGB(255,255,255);
+local scrollMut		= 100;  -- Used for multiply input when using mosue scroll
+local elasticMut	   = 20;   -- Used for multiply input when overscrolling
+local fitTime		  = 0.22; -- Used for reset overscroll when mouse scroll
+local tweenTime		= 0.63; -- Used for tween time
+local mouseUpMut	   = 18;   -- Used for multiply input when drag input ended
+local dragRestMut	  = 5;	-- Used for multiply input when reset overscroll from drag input
+local dragOverMut	  = 0.3;  -- Used for multiply input when overscrolling from drag input
+local scrollbarOverMut = 0.18; -- Used for multiply size of scrollbar when overscrolling
 
 -- tween for moving
 local out = tween.EasingDirections.Out;
@@ -33,6 +36,7 @@ local tweenData = {
 	EasingFunction = exp2;
 };
 local runTween = tween.RunTween;
+local stopTween = tween.StopTween;
 
 -- user input service
 local userInputService = game:GetService "UserInputService";
@@ -46,7 +50,7 @@ local touch = Enum.UserInputType.Touch;
 
 -- Calc Elastic
 local calcElastic do
-    local maxLogX = 32;
+	local maxLogX = 30;
 	local mlog = math.log;
 	local maxlog = mlog(maxLogX+1,2);
 	local function log(x)
@@ -70,23 +74,36 @@ function scrollFrame:init(props)
 	props.CanvasPosition = CanvasPosition;
 	self._inputIndex = -20000000;
 	self._mouseConnection = connection();
+	self._overscrollX = false;
+	self._overscrollY = false;
 	props:default("CanvasPosition",CanvasPosition);
 	props:default("CanvasSize",UDim2.fromScale(1,2));
 	props:default("Size",UDim2.new(1,0,1,0));
 	props:default("Position",UDim2.new(0,0,0,0));
-    props:default("Elastic",122);
+	props:default("Elastic",142);
 	props:default("OverscrollX",false);
 	props:default("OverscrollY",true);
-    props:default("BackgroundTransparency",1);
+	props:default("BackgroundTransparency",0);
 	props:default("ZIndex",1);
 	props:default("BackgroundColor3",white);
 	props:default("ScrollbarSizeX",2);
-    props:default("ScrollbarVisibleY",false);
+	props:default("ScrollbarPositionY","Right");
-    props:default("ScrollbarSizeX",2);
+	props:default("ScrollbarPositionX","Bottom");
+	props:default("ScrollbarVisibleY",true);
+	props:default("ScrollbarSizeY",2);
 	props:default("ScrollbarVisibleX",true);
 	props:default("ScrollbarPadding",2);
-    props:default("ScrollbarColor3",Color3.fromRGB(172, 172, 172));
+	props:default("ScrollbarColor3",Color3.fromRGB(145, 145, 145));
-    props:default("ScrollbarTransparency",0.5);
+	props:default("ScrollbarTransparency",0.3);
+	-- props "ScrollbarPadding":register(function ()
+	--	 self:fit();
+	--	 self.__prop
+	-- end);
+	-- props "ScrollbarPadding":register(function ()
+	--	 self:fit();
+	--	 self.__prop
+	-- end);
+	-- ScrollbarSizeX
 end
 
 -- Render objects
@@ -138,14 +155,24 @@ function scrollFrame:render(props)
 			mouseConnection:add(inputChanged:Connect(function (input)
 				if input.UserInputType == mouseMovement then
 					local position = input.Position;
-                    local x = position.X;
+					local x,y = position.X,position.Y;
-                    local y = position.Y;
+					local overscrollX,overscrollY = self._overscrollX,self._overscrollY;
-                    local inputIndex = self:update(self._targetX + x - downX,self._targetY - y + downY);
+
-                    delay(fitTime,function ()
+					local xIns = downX - x;
-                        if inputIndex == self._inputIndex then
+					if overscrollX and ((overscrollX == -1 and xIns > 0) or (overscrollX == 1 and xIns < 0)) then
-                            self:fit();
+						xIns = xIns * dragRestMut;
+					elseif overscrollX and ((overscrollX == -1 and xIns < 0) or (overscrollX == 1 and xIns > 0)) then
+						xIns = xIns * dragOverMut;
 					end
-                    end);
+
+					local yIns = downY - y;
+					if overscrollY and ((overscrollY == -1 and yIns > 0) or (overscrollY == 1 and yIns < 0)) then
+						yIns = yIns * dragRestMut;
+					elseif overscrollY and ((overscrollY == -1 and yIns < 0) or (overscrollY == 1 and yIns > 0)) then
+						yIns = yIns * dragOverMut;
+					end
+
+					self:update(self._targetX + xIns,self._targetY + yIns);
 					downX,downY = x,y;
 				end
 			end));
@@ -163,21 +190,47 @@ function scrollFrame:render(props)
 			end;
 		};
 		button {
-            Visible = props "ScrollbarVisibleY";
+			AnchorPoint = props "ScrollbarPositionY":with(function (_,value)
-            Size = props "ScrollbarPadding,ScrollbarSizeX":with(function (store)
+				return value == "Right" and Vector2.new(1,0) or Vector2.new(0,0);
-                self:fit();
 			end);
+			[event.createdSync] = function (this)
+				self._scrollbarY = this;
+			end;
+			Position = props.ScrollbarPositionY == "Right" and UDim2.new(1,0,0,0) or UDim2.new(0,0,0,0);
+			BackgroundTransparency = 1;
+			Visible = props "ScrollbarVisibleY";
+			image {
+				roundSize = 2000;
+				ImageColor3 = props "ScrollbarColor3";
+				ImageTransparency = props "ScrollbarTransparency";
+				Size = props "ScrollbarSizeY,ScrollbarPadding":with(function (store)
+					return UDim2.new(0,store.ScrollbarSizeY,1,store.ScrollbarPadding * -2);
+				end);
+				Position = UDim2.fromScale(0.5,0.5);
+				AnchorPoint = Vector2.new(0.5,0.5);
+			};
+		};
+		button {
+			AnchorPoint = props "ScrollbarPositionX":with(function (_,value)
+				return value == "Top" and Vector2.new(0,0) or Vector2.new(0,1);
+			end);
+			[event.createdSync] = function (this)
+				self._scrollbarX = this;
+			end;
+			Position = props.ScrollbarPositionX == "Top" and UDim2.new(0,0,0,0) or UDim2.new(0,0,1,0);
+			BackgroundTransparency = 1;
+			Visible = props "ScrollbarVisibleX";
 			image {
 				roundSize = 2000;
 				ImageColor3 = props "ScrollbarColor3";
 				ImageTransparency = props "ScrollbarTransparency";
 				Size = props "ScrollbarSizeX,ScrollbarPadding":with(function (store)
-                    return UDim2.new(0,store.ScrollbarSizeX,1,store.ScrollbarPadding * 2);
+					return UDim2.new(1,store.ScrollbarPadding * -2,0,store.ScrollbarSizeX);
 				end);
 				Position = UDim2.fromScale(0.5,0.5);
 				AnchorPoint = Vector2.new(0.5,0.5);
 			};
-        }
+		};
 	};
 end
 
@@ -190,18 +243,29 @@ function scrollFrame:update(x,y)
 	local holder = self._holder;
 	local holderAbsSize = holder.AbsoluteSize;
 	local objectAbsSize = self.__object.AbsoluteSize;
-    local maxX = holderAbsSize.X - objectAbsSize.X;
+	local holderX,holderY = holderAbsSize.X,holderAbsSize.Y;
-    local maxY = holderAbsSize.Y - objectAbsSize.Y;
+	local objectX,objectY = objectAbsSize.X,objectAbsSize.Y;
+	local maxX = holderX - objectX;
+	local maxY = holderY - objectY;
 
 	local elastic = self.Elastic;
 	x = self.OverscrollX and calcElastic(elastic,x,maxX) or max(min(maxX,x),0);
 	y = self.OverscrollY and calcElastic(elastic,y,maxY) or max(min(maxY,y),0);
 
-    runTween(self._holder,tweenData,{
+	local overflowX = (x<0 and -1) or (x>maxX and 1);
-        Position = UDim2.fromOffset(x,-y);
+	local overflowY = (y<0 and -1) or (y>maxY and 1);
+	self._overscrollX = overflowX;
+	self._overscrollY = overflowY;
+
+	runTween(holder,tweenData,{
+		Position = UDim2.fromOffset(-x,-y);
 	});
 	self._targetX,self._targetY = x,y;
-    self:updateScrollbar(x,y);
+	self:updateScrollbar(
+		x,y,objectX,objectY,holderX,holderY,elastic,
+		(overflowX == -1 and abs(x)) or (overflowX == 1 and x-maxX),
+		(overflowY == -1 and abs(y)) or (overflowY == 1 and y-maxY)
+	);
 	return inputIndex;
 end
 
@@ -239,4 +303,90 @@ function scrollFrame:fit()
 	end
 end
 
+-- update scrollbar
+function scrollFrame:updateScrollbar(x,y,objectX,objectY,holderX,holderY,elastic,overflowX,overflowY)
+	local scrollbarY = self._scrollbarY;
+	local scrollbarX = self._scrollbarX;
+
+	local objectSize;
+	if not objectY then
+		objectSize = self.__object.AbsoluteSize;
+		objectY = objectSize.Y;
+	end
+	if not objectX then
+		if not objectSize then
+			objectSize = self.__object.AbsoluteSize;
+		end
+		objectX = objectSize.X;
+	end
+
+	local holderSize;
+	if not holderY then
+		holderSize = self._holder.AbsoluteSize;
+		holderY = holderSize.Y;
+	end
+	if not holderX then
+		if not holderSize then
+			holderSize = self._holder.AbsoluteSize;
+		end
+		holderX = holderSize.X;
+	end
+
+	elastic = elastic or self.Elastic;
+	if scrollbarY then
+		local size;
+		if objectY >= holderY then
+			size = 0;
+		else
+			size = objectY / holderY;
+			if overflowY then
+				size = size * (1-overflowY/elastic) * scrollbarOverMut;
+			end
+		end
+		local sizeUdim = UDim2.new(0,self.ScrollbarSizeY+(self.ScrollbarPadding*2),size,0);
+		local pos = 0;
+		if size ~= 0 then
+			pos = (1-size)*(min(max(y/(holderY-objectY),0),1));
+		end
+		local posUdim = UDim2.new(self.ScrollbarPositionY == "Right" and 1 or 0,0,pos,0);
+		if self._mouseDown then
+			stopTween(scrollbarY);
+			scrollbarY.Position = posUdim;
+			scrollbarY.Size = sizeUdim;
+		else
+			runTween(scrollbarY,tweenData,{
+				Position = posUdim;
+				Size = sizeUdim;
+			});
+		end
+	end
+	if scrollbarX then
+		local size;
+		if objectX >= holderX then
+			size = 0;
+		else
+			size = objectX / holderX;
+			if overflowX then
+				size = size * (1-overflowX/elastic) * scrollbarOverMut;
+			end
+		end
+		local sizeUdim = UDim2.new(size,0,0,self.ScrollbarSizeX+(self.ScrollbarPadding*2));
+		local pos = 0;
+		if size ~= 0 then
+			pos = (1-size)*(min(max(x/(holderX-objectX),0),1));
+		end
+		local posUdim = UDim2.new(pos,0,self.ScrollbarPositionX == "Top" and 0 or 1,0);
+		if self._mouseDown then
+			stopTween(scrollbarX);
+			scrollbarX.Position = posUdim;
+			scrollbarX.Size = sizeUdim;
+		else
+			runTween(scrollbarX,tweenData,{
+				Position = posUdim;
+				Size = sizeUdim;
+			});
+		end
+	end
+end
+
 return scrollFrame;