@rbxts/uiblox 0.1.53 → 0.2.0-alpha.1

package/out/ui/packages/colorPicker/components/ColorSequenceEditor.luau

@@ -0,0 +1,190 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useRef = _react.useRef
+local useState = _react.useState
+local canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "components", "activation").canActivate
+local ColorPicker = TS.import(script, script.Parent, "ColorPicker").default
+local useColorPickerStyles = TS.import(script, script.Parent, "ColorPicker.styles").default
+local _sequenceValue = TS.import(script, script.Parent, "sequenceValue")
+local hitStop = _sequenceValue.hitStop
+local insertColorStop = _sequenceValue.insertColorStop
+local patchColorStop = _sequenceValue.patchColorStop
+local readColorStops = _sequenceValue.readColorStops
+local removeColorStop = _sequenceValue.removeColorStop
+local writeColorStops = _sequenceValue.writeColorStops
+local function ColorSequenceEditor(props)
+	local _binding = props
+	local value = _binding.value
+	local onChange = _binding.onChange
+	local disabled = _binding.disabled
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local styles = useColorPickerStyles()
+	local active = canActivate(disabled)
+	local stops = readColorStops(value)
+	local selected, setSelected = useState(0)
+	local dragging = useRef(false)
+	local index = math.clamp(selected, 0, math.max(0, #stops - 1))
+	local current = stops[index + 1] or {
+		t = 0,
+		color = Color3.new(),
+	}
+	local commit = function(updated)
+		return onChange(writeColorStops(updated))
+	end
+	local atAlpha = function(rbx, position)
+		local width = rbx.AbsoluteSize.X
+		if width <= 0 then
+			return 0
+		end
+		return math.clamp((position.X - rbx.AbsolutePosition.X) / width, 0, 1)
+	end
+	local _attributes = {}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "ColorSequenceEditor"
+	end
+	_attributes.key = _condition
+	_attributes.ref = ref
+	for _k, _v in styles.root do
+		_attributes[_k] = _v
+	end
+	if className then
+		for _k, _v in className do
+			_attributes[_k] = _v
+		end
+	end
+	if sx then
+		for _k, _v in sx do
+			_attributes[_k] = _v
+		end
+	end
+	_attributes.Selectable = false
+	local _attributes_1 = table.clone(styles.column)
+	setmetatable(_attributes_1, nil)
+	local _exp = React.createElement("uilistlayout", _attributes_1)
+	local _attributes_2 = {
+		key = "Bar",
+	}
+	for _k, _v in styles.hue do
+		_attributes_2[_k] = _v
+	end
+	_attributes_2.LayoutOrder = 1
+	_attributes_2.Active = active
+	_attributes_2.Event = {
+		InputBegan = function(rbx, input)
+			if not active or input.UserInputType ~= Enum.UserInputType.MouseButton1 then
+				return nil
+			end
+			local alpha = atAlpha(rbx, input.Position)
+			-- ▼ ReadonlyArray.map ▼
+			local _newValue = table.create(#stops)
+			local _callback = function(stop)
+				return stop.t
+			end
+			for _k, _v in stops do
+				_newValue[_k] = _callback(_v, _k - 1, stops)
+			end
+			-- ▲ ReadonlyArray.map ▲
+			local hit = hitStop(_newValue, alpha, 0.04)
+			if hit >= 0 then
+				setSelected(hit)
+				dragging.current = hit > 0 and hit < #stops - 1
+				return nil
+			end
+			local updated = insertColorStop(stops, alpha)
+			commit(updated)
+			-- ▼ ReadonlyArray.map ▼
+			local _newValue_1 = table.create(#updated)
+			local _callback_1 = function(stop)
+				return stop.t
+			end
+			for _k, _v in updated do
+				_newValue_1[_k] = _callback_1(_v, _k - 1, updated)
+			end
+			-- ▲ ReadonlyArray.map ▲
+			setSelected(hitStop(_newValue_1, alpha, 1))
+		end,
+		InputChanged = function(rbx, input)
+			if not dragging.current or input.UserInputType ~= Enum.UserInputType.MouseMovement then
+				return nil
+			end
+			commit(patchColorStop(stops, index, {
+				t = atAlpha(rbx, input.Position),
+			}))
+		end,
+		InputEnded = function()
+			dragging.current = false
+		end,
+	}
+	local _attributes_3 = table.clone(styles.corner)
+	setmetatable(_attributes_3, nil)
+	local _exp_1 = React.createElement("uicorner", _attributes_3)
+	local _exp_2 = React.createElement("uigradient", {
+		Color = value,
+	})
+	-- ▼ ReadonlyArray.map ▼
+	local _newValue = table.create(#stops)
+	local _callback = function(stop, stopIndex)
+		local _attributes_4 = {
+			key = `Stop-{stopIndex}`,
+		}
+		for _k, _v in styles.hueKnob do
+			_attributes_4[_k] = _v
+		end
+		_attributes_4.BackgroundColor3 = stop.color
+		_attributes_4.Position = UDim2.fromScale(stop.t, 0.5)
+		_attributes_4.ZIndex = if stopIndex == index then 2 else 1
+		local _attributes_5 = table.clone(styles.corner)
+		setmetatable(_attributes_5, nil)
+		return React.createElement("frame", _attributes_4, React.createElement("uicorner", _attributes_5), React.createElement("uistroke", {
+			Thickness = if stopIndex == index then 2 else 1,
+			Color = Color3.new(1, 1, 1),
+		}))
+	end
+	for _k, _v in stops do
+		_newValue[_k] = _callback(_v, _k - 1, stops)
+	end
+	-- ▲ ReadonlyArray.map ▲
+	local _exp_3 = React.createElement("frame", _attributes_2, _exp_1, _exp_2, _newValue)
+	local _exp_4 = React.createElement(ColorPicker, {
+		key = "StopColor",
+		value = current.color,
+		disabled = disabled,
+		onChange = function(color)
+			return commit(patchColorStop(stops, index, {
+				color = color,
+			}))
+		end,
+	})
+	local _condition_1 = #stops > 2 and index > 0 and index < #stops - 1
+	if _condition_1 then
+		local _attributes_4 = {
+			key = "Remove",
+		}
+		for _k, _v in styles.link do
+			_attributes_4[_k] = _v
+		end
+		_attributes_4.Text = "Remove stop"
+		_attributes_4.LayoutOrder = 3
+		_attributes_4.Event = {
+			Activated = function()
+				if not active then
+					return nil
+				end
+				commit(removeColorStop(stops, index))
+				setSelected(math.max(0, index - 1))
+			end,
+		}
+		_condition_1 = (React.createElement("textbutton", _attributes_4))
+	end
+	return React.createElement("frame", _attributes, _exp, _exp_3, _exp_4, _condition_1)
+end
+local default = ColorSequenceEditor
+return {
+	default = default,
+}

package/out/ui/packages/colorPicker/components/NumberSequenceEditor.d.ts

@@ -0,0 +1,8 @@
+import { CustomizedProps } from "../../../../theme/index";
+export interface NumberSequenceEditorProps {
+    value: NumberSequence;
+    onChange: (value: NumberSequence) => void;
+    disabled?: boolean;
+}
+declare function NumberSequenceEditor(props: CustomizedProps<Frame, NumberSequenceEditorProps>): JSX.Element;
+export default NumberSequenceEditor;

package/out/ui/packages/colorPicker/components/NumberSequenceEditor.luau

@@ -0,0 +1,240 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useRef = _react.useRef
+local useState = _react.useState
+local canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "components", "activation").canActivate
+local NumberInput = TS.import(script, script.Parent.Parent.Parent, "numberInput").NumberInput
+local useColorPickerStyles = TS.import(script, script.Parent, "ColorPicker.styles").default
+local _sequenceValue = TS.import(script, script.Parent, "sequenceValue")
+local hitStop = _sequenceValue.hitStop
+local insertNumberStop = _sequenceValue.insertNumberStop
+local patchNumberStop = _sequenceValue.patchNumberStop
+local readNumberStops = _sequenceValue.readNumberStops
+local removeNumberStop = _sequenceValue.removeNumberStop
+local writeNumberStops = _sequenceValue.writeNumberStops
+local function NumberSequenceEditor(props)
+	local _binding = props
+	local value = _binding.value
+	local onChange = _binding.onChange
+	local disabled = _binding.disabled
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local styles = useColorPickerStyles()
+	local active = canActivate(disabled)
+	local stops = readNumberStops(value)
+	local selected, setSelected = useState(0)
+	local dragging = useRef(false)
+	local index = math.clamp(selected, 0, math.max(0, #stops - 1))
+	local current = stops[index + 1] or {
+		t = 0,
+		value = 0,
+		envelope = 0,
+	}
+	local commit = function(updated)
+		return onChange(writeNumberStops(updated))
+	end
+	local atAlpha = function(rbx, position)
+		local width = rbx.AbsoluteSize.X
+		if width <= 0 then
+			return 0
+		end
+		return math.clamp((position.X - rbx.AbsolutePosition.X) / width, 0, 1)
+	end
+	local _attributes = {}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "NumberSequenceEditor"
+	end
+	_attributes.key = _condition
+	_attributes.ref = ref
+	for _k, _v in styles.root do
+		_attributes[_k] = _v
+	end
+	if className then
+		for _k, _v in className do
+			_attributes[_k] = _v
+		end
+	end
+	if sx then
+		for _k, _v in sx do
+			_attributes[_k] = _v
+		end
+	end
+	_attributes.Selectable = false
+	local _attributes_1 = table.clone(styles.column)
+	setmetatable(_attributes_1, nil)
+	local _exp = React.createElement("uilistlayout", _attributes_1)
+	local _attributes_2 = {
+		key = "Bar",
+	}
+	for _k, _v in styles.hue do
+		_attributes_2[_k] = _v
+	end
+	_attributes_2.BackgroundColor3 = Color3.new(0.2, 0.2, 0.2)
+	_attributes_2.LayoutOrder = 1
+	_attributes_2.Active = active
+	_attributes_2.Event = {
+		InputBegan = function(rbx, input)
+			if not active or input.UserInputType ~= Enum.UserInputType.MouseButton1 then
+				return nil
+			end
+			local alpha = atAlpha(rbx, input.Position)
+			-- ▼ ReadonlyArray.map ▼
+			local _newValue = table.create(#stops)
+			local _callback = function(stop)
+				return stop.t
+			end
+			for _k, _v in stops do
+				_newValue[_k] = _callback(_v, _k - 1, stops)
+			end
+			-- ▲ ReadonlyArray.map ▲
+			local hit = hitStop(_newValue, alpha, 0.04)
+			if hit >= 0 then
+				setSelected(hit)
+				dragging.current = hit > 0 and hit < #stops - 1
+				return nil
+			end
+			local updated = insertNumberStop(stops, alpha)
+			commit(updated)
+			-- ▼ ReadonlyArray.map ▼
+			local _newValue_1 = table.create(#updated)
+			local _callback_1 = function(stop)
+				return stop.t
+			end
+			for _k, _v in updated do
+				_newValue_1[_k] = _callback_1(_v, _k - 1, updated)
+			end
+			-- ▲ ReadonlyArray.map ▲
+			setSelected(hitStop(_newValue_1, alpha, 1))
+		end,
+		InputChanged = function(rbx, input)
+			if not dragging.current or input.UserInputType ~= Enum.UserInputType.MouseMovement then
+				return nil
+			end
+			commit(patchNumberStop(stops, index, {
+				t = atAlpha(rbx, input.Position),
+			}))
+		end,
+		InputEnded = function()
+			dragging.current = false
+		end,
+	}
+	local _attributes_3 = table.clone(styles.corner)
+	setmetatable(_attributes_3, nil)
+	local _exp_1 = React.createElement("uicorner", _attributes_3)
+	local _exp_2 = React.createElement("uigradient", {
+		Transparency = value,
+	})
+	-- ▼ ReadonlyArray.map ▼
+	local _newValue = table.create(#stops)
+	local _callback = function(stop, stopIndex)
+		local _attributes_4 = {
+			key = `Stop-{stopIndex}`,
+		}
+		for _k, _v in styles.hueKnob do
+			_attributes_4[_k] = _v
+		end
+		_attributes_4.Position = UDim2.fromScale(stop.t, 0.5)
+		_attributes_4.ZIndex = if stopIndex == index then 2 else 1
+		local _attributes_5 = table.clone(styles.corner)
+		setmetatable(_attributes_5, nil)
+		return React.createElement("frame", _attributes_4, React.createElement("uicorner", _attributes_5))
+	end
+	for _k, _v in stops do
+		_newValue[_k] = _callback(_v, _k - 1, stops)
+	end
+	-- ▲ ReadonlyArray.map ▲
+	local _exp_3 = React.createElement("frame", _attributes_2, _exp_1, _exp_2, _newValue)
+	local _attributes_4 = {
+		key = "Fields",
+	}
+	for _k, _v in styles.row do
+		_attributes_4[_k] = _v
+	end
+	_attributes_4.LayoutOrder = 2
+	_attributes_4.Size = UDim2.new(1, 0, 0, 0)
+	_attributes_4.AutomaticSize = Enum.AutomaticSize.Y
+	local _attributes_5 = table.clone(styles.rowLayout)
+	setmetatable(_attributes_5, nil)
+	local _exp_4 = React.createElement("uilistlayout", _attributes_5)
+	local _attributes_6 = {
+		key = "Value",
+	}
+	for _k, _v in styles.channel do
+		_attributes_6[_k] = _v
+	end
+	local _attributes_7 = table.clone(styles.rowLayout)
+	setmetatable(_attributes_7, nil)
+	local _exp_5 = React.createElement("uilistlayout", _attributes_7)
+	local _attributes_8 = table.clone(styles.label)
+	setmetatable(_attributes_8, nil)
+	_attributes_8.Text = "V"
+	local _exp_6 = React.createElement("textlabel", _attributes_8)
+	local _attributes_9 = table.clone(styles.channelField)
+	setmetatable(_attributes_9, nil)
+	local _exp_7 = React.createElement("frame", _attributes_6, _exp_5, _exp_6, React.createElement("frame", _attributes_9, React.createElement(NumberInput, {
+		value = current.value,
+		disabled = disabled,
+		width = UDim.new(1, 0),
+		onChange = function(amount)
+			return commit(patchNumberStop(stops, index, {
+				value = amount,
+			}))
+		end,
+	})))
+	local _attributes_10 = {
+		key = "Envelope",
+	}
+	for _k, _v in styles.channel do
+		_attributes_10[_k] = _v
+	end
+	local _attributes_11 = table.clone(styles.rowLayout)
+	setmetatable(_attributes_11, nil)
+	local _exp_8 = React.createElement("uilistlayout", _attributes_11)
+	local _attributes_12 = table.clone(styles.label)
+	setmetatable(_attributes_12, nil)
+	_attributes_12.Text = "E"
+	local _exp_9 = React.createElement("textlabel", _attributes_12)
+	local _attributes_13 = table.clone(styles.channelField)
+	setmetatable(_attributes_13, nil)
+	local _exp_10 = React.createElement("frame", _attributes_4, _exp_4, _exp_7, React.createElement("frame", _attributes_10, _exp_8, _exp_9, React.createElement("frame", _attributes_13, React.createElement(NumberInput, {
+		value = current.envelope,
+		disabled = disabled,
+		width = UDim.new(1, 0),
+		onChange = function(amount)
+			return commit(patchNumberStop(stops, index, {
+				envelope = amount,
+			}))
+		end,
+	}))))
+	local _condition_1 = #stops > 2 and index > 0 and index < #stops - 1
+	if _condition_1 then
+		local _attributes_14 = {
+			key = "Remove",
+		}
+		for _k, _v in styles.link do
+			_attributes_14[_k] = _v
+		end
+		_attributes_14.Text = "Remove stop"
+		_attributes_14.LayoutOrder = 3
+		_attributes_14.Event = {
+			Activated = function()
+				if not active then
+					return nil
+				end
+				commit(removeNumberStop(stops, index))
+				setSelected(math.max(0, index - 1))
+			end,
+		}
+		_condition_1 = (React.createElement("textbutton", _attributes_14))
+	end
+	return React.createElement("frame", _attributes, _exp, _exp_3, _exp_10, _condition_1)
+end
+local default = NumberSequenceEditor
+return {
+	default = default,
+}

package/out/ui/packages/colorPicker/components/colorValue.d.ts

@@ -0,0 +1,22 @@
+export interface Hsv {
+    h: number;
+    s: number;
+    v: number;
+}
+export declare function channelToByte(unit: number): number;
+export declare function byteToUnit(byte: number): number;
+export declare function rgbToHsv(r: number, g: number, b: number): Hsv;
+export declare function hsvToRgb(h: number, s: number, v: number): {
+    r: number;
+    g: number;
+    b: number;
+};
+export declare function hsvToColor3(h: number, s: number, v: number): Color3;
+export declare function colorToHex(color: Color3): string;
+export declare function parseHex(text: string): Color3 | undefined;
+export declare function parseByte(text: string): number | undefined;
+export declare function sameColor(a: Color3, b: Color3): boolean;
+export declare function resolveHsv(color: Color3, previous?: Hsv): Hsv;
+export declare function rememberColor(color: Color3): void;
+export declare function recentColors(): Color3[];
+export declare function colorBytes(color: Color3): string;

package/out/ui/packages/colorPicker/components/colorValue.luau

@@ -0,0 +1,157 @@
+-- Compiled with roblox-ts v3.0.0
+local function finite(value)
+	return value == value and value ~= math.huge and value ~= -math.huge
+end
+local function channelToByte(unit)
+	return math.clamp(math.floor(unit * 255 + 0.5), 0, 255)
+end
+local function byteToUnit(byte)
+	return math.clamp(byte, 0, 255) / 255
+end
+local function rgbToHsv(r, g, b)
+	local max = math.max(r, g, b)
+	local min = math.min(r, g, b)
+	local delta = max - min
+	local h = 0
+	if delta ~= 0 then
+		if max == r then
+			h = ((g - b) / delta) % 6
+		elseif max == g then
+			h = (b - r) / delta + 2
+		else
+			h = (r - g) / delta + 4
+		end
+		h /= 6
+		if h < 0 then
+			h += 1
+		end
+	end
+	return {
+		h = h,
+		s = if max == 0 then 0 else delta / max,
+		v = max,
+	}
+end
+local function hsvToRgb(h, s, v)
+	local hue = ((h % 1) + 1) % 1
+	local c = v * s
+	local x = c * (1 - math.abs(((hue * 6) % 2) - 1))
+	local m = v - c
+	local r = 0
+	local g = 0
+	local b = 0
+	local sector = math.floor(hue * 6)
+	if sector == 0 then
+		r = c
+		g = x
+	elseif sector == 1 then
+		r = x
+		g = c
+	elseif sector == 2 then
+		g = c
+		b = x
+	elseif sector == 3 then
+		g = x
+		b = c
+	elseif sector == 4 then
+		r = x
+		b = c
+	else
+		r = c
+		b = x
+	end
+	return {
+		r = r + m,
+		g = g + m,
+		b = b + m,
+	}
+end
+local function hsvToColor3(h, s, v)
+	local rgb = hsvToRgb(h, s, v)
+	return Color3.new(rgb.r, rgb.g, rgb.b)
+end
+local function colorToHex(color)
+	local r = string.format("%02X", channelToByte(color.R))
+	local g = string.format("%02X", channelToByte(color.G))
+	local b = string.format("%02X", channelToByte(color.B))
+	return `#{r}{g}{b}`
+end
+local function parseHex(text)
+	local raw = text
+	if string.sub(raw, 1, 1) == "#" then
+		raw = string.sub(raw, 2)
+	end
+	if #raw == 3 then
+		local r = string.sub(raw, 1, 1)
+		local g = string.sub(raw, 2, 2)
+		local b = string.sub(raw, 3, 3)
+		raw = `{r}{r}{g}{g}{b}{b}`
+	end
+	if #raw ~= 6 then
+		return nil
+	end
+	local value = tonumber(raw, 16)
+	if value == nil or not finite(value) then
+		return nil
+	end
+	local r = math.floor(value / 65536) % 256
+	local g = math.floor(value / 256) % 256
+	local b = value % 256
+	return Color3.new(byteToUnit(r), byteToUnit(g), byteToUnit(b))
+end
+local function parseByte(text)
+	local value = tonumber(text)
+	if value == nil or not finite(value) then
+		return nil
+	end
+	if value < 0 or value > 255 or value % 1 ~= 0 then
+		return nil
+	end
+	return value
+end
+local function sameColor(a, b)
+	return a.R == b.R and a.G == b.G and a.B == b.B
+end
+local function resolveHsv(color, previous)
+	local hsv = rgbToHsv(color.R, color.G, color.B)
+	if hsv.s == 0 and previous ~= nil then
+		return {
+			h = previous.h,
+			s = hsv.s,
+			v = hsv.v,
+		}
+	end
+	return hsv
+end
+local RECENT_CAP = 8
+local recent = {}
+local function rememberColor(color)
+	local remembered = { color }
+	for _, existing in recent do
+		if not sameColor(existing, color) and #remembered < RECENT_CAP then
+			table.insert(remembered, existing)
+		end
+	end
+	recent = remembered
+end
+local function recentColors()
+	return recent
+end
+local function colorBytes(color)
+	return `{channelToByte(color.R)}, {channelToByte(color.G)}, {channelToByte(color.B)}`
+end
+return {
+	channelToByte = channelToByte,
+	byteToUnit = byteToUnit,
+	rgbToHsv = rgbToHsv,
+	hsvToRgb = hsvToRgb,
+	hsvToColor3 = hsvToColor3,
+	colorToHex = colorToHex,
+	parseHex = parseHex,
+	parseByte = parseByte,
+	sameColor = sameColor,
+	resolveHsv = resolveHsv,
+	rememberColor = rememberColor,
+	recentColors = recentColors,
+	colorBytes = colorBytes,
+}

package/out/ui/packages/colorPicker/components/sequenceValue.d.ts

@@ -0,0 +1,26 @@
+export interface ColorStop {
+    t: number;
+    color: Color3;
+}
+export interface NumberStop {
+    t: number;
+    value: number;
+    envelope: number;
+}
+export declare function lerpColor(a: Color3, b: Color3, alpha: number): Color3;
+export declare function readColorStops(sequence: ColorSequence): ColorStop[];
+export declare function writeColorStops(stops: ColorStop[]): ColorSequence;
+export declare function sampleColor(stops: ColorStop[], time: number): Color3;
+export declare function insertColorStop(stops: ColorStop[], time: number): ColorStop[];
+export declare function patchColorStop(stops: ColorStop[], index: number, patch: Partial<ColorStop>): ColorStop[];
+export declare function removeColorStop(stops: ColorStop[], index: number): ColorStop[];
+export declare function readNumberStops(sequence: NumberSequence): NumberStop[];
+export declare function writeNumberStops(stops: NumberStop[]): NumberSequence;
+export declare function sampleNumber(stops: NumberStop[], time: number): {
+    value: number;
+    envelope: number;
+};
+export declare function insertNumberStop(stops: NumberStop[], time: number): NumberStop[];
+export declare function patchNumberStop(stops: NumberStop[], index: number, patch: Partial<NumberStop>): NumberStop[];
+export declare function removeNumberStop(stops: NumberStop[], index: number): NumberStop[];
+export declare function hitStop(times: number[], alpha: number, threshold: number): number;