test
This commit is contained in:
parent
b59a3b2586
commit
79a603dfcb
1 changed files with 333 additions and 183 deletions
|
|
@ -1,28 +1,31 @@
|
|||
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;
|
||||
|
||||
-- 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 Quad = require(game.ReplicatedStorage:WaitForChild "Quad"); ---@module "Quad.src"
|
||||
local _ = Quad.init "components"; local round,class,mount,store,event,tween = _.round,_.class,_.mount,_.store,_.event,_.tween;
|
||||
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("ScrollbarSizeX",2);
|
||||
props:default("ScrollbarPositionY","Right");
|
||||
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("ScrollbarTransparency",0.5);
|
||||
props:default("ScrollbarColor3",Color3.fromRGB(145, 145, 145));
|
||||
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 y = position.Y;
|
||||
local inputIndex = self:update(self._targetX + x - downX,self._targetY - y + downY);
|
||||
delay(fitTime,function ()
|
||||
if inputIndex == self._inputIndex then
|
||||
self:fit();
|
||||
local x,y = position.X,position.Y;
|
||||
local overscrollX,overscrollY = self._overscrollX,self._overscrollY;
|
||||
|
||||
local xIns = downX - x;
|
||||
if overscrollX and ((overscrollX == -1 and xIns > 0) or (overscrollX == 1 and xIns < 0)) then
|
||||
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";
|
||||
Size = props "ScrollbarPadding,ScrollbarSizeX":with(function (store)
|
||||
self:fit();
|
||||
AnchorPoint = props "ScrollbarPositionY":with(function (_,value)
|
||||
return value == "Right" and Vector2.new(1,0) or Vector2.new(0,0);
|
||||
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 maxY = holderAbsSize.Y - objectAbsSize.Y;
|
||||
local holderX,holderY = holderAbsSize.X,holderAbsSize.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,{
|
||||
Position = UDim2.fromOffset(x,-y);
|
||||
local overflowX = (x<0 and -1) or (x>maxX and 1);
|
||||
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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue