Module:Test

Documentation for this module may be created at Module:Test/doc

-- Package definition to return to Scribunto - this allows us to define methods that can be called
-- when this module is targeted.
local p = {}

-- Type colors - RGB values to be included in the HTML output when a color is needed. This will be replaced with CSS at some point.
local typeColor = 
{
	User = '255, 128, 255',
	Impulse = '179, 255, 255',
	Bool = '115, 115, 115',
	Boolean = '115, 115, 115',
	AsyncImpulse = '204, 179, 255',
	String = '245, 31, 31',
	Dummy = '255, 0, 255',
	IFormatProvider = '168, 143, 214',
	float = '0, 255, 255',
	ColorProfile = '255, 196, 54',
	colorX = '255, 89, 0',
	Component = '112, 76, 85',
	float3 = '0, 255, 255',
	float2 = '0, 255, 255'
}

--- Method that generates the HTML output
--	@param frame A Scribunto frame instance. frame.args contains the parameters passed into the module call
function p.GenerateUI( frame )
	-- Parse the JSON input, returning an empty array if no argument was passed
	local inputs = mw.text.jsonDecode(frame.args.Inputs or '[]');
	local outputs = mw.text.jsonDecode(frame.args.Outputs or '[]');
	local globals = mw.text.jsonDecode(frame.args.Globals or '[]');
	
	-- Create an HTML div element to contain our node UI
	local protofluxContainer = mw.html.create( 'div' )
	protofluxContainer
		:cssText('color: white; background-color: #11151d; width: 256px; display: flex; flex-direction: column; align-items: stretch;' )
		:tag('div') -- HTML div to contain the node title
			:cssText('padding: 10px 0px 10px 0px; text-align:center; font-weight: bold; background-color: #1a2a36; font-size: 18pt; flex-grow: 1;')
			:wikitext(frame.args.Name)
			:done() -- Close node title div
			
	-- Calculate the larger number of rows required (either for inputs or outputs, if the node is asymmetric)
	local maxRows = math.max(#inputs, #outputs)
	
	-- Iterate over each row, and populate it with the inputs/outputs. If the node is asymmetric,
	-- the value passed for either input or output might be nil.
	for i=1,maxRows do
		CreateConnectorRow(protofluxContainer, inputs[i], outputs[i]);
	end
	
	-- Iterate over each global value in the node, and create a row. These elements take up the entire width
	-- of the node, and so don't need to be balanced in any way.
	for i=1,#globals do
		CreateGlobalsRow(protofluxContainer, globals[i]);
	end
	
	protofluxContainer
		:tag('div') -- HTML div to contain the node category footer
			:cssText('text-align: center; padding: 10px; font-size: 18pt; color: rgb(64,64,64); font-weight: bold;')
			:wikitext(frame.args.Category)
			:done() -- Close category footer div
	
	-- Return the HTML generated above, and append the category tags to the output. These might not be necessary
	-- or desired.
	return tostring(protofluxContainer) .. '[[Category:ProtoFlux]]' .. (frame.args.Category and '[[Category:ProtoFlux:' .. frame.args.Category .. ']]' or '');
end

--- Creates a new ProtoFlux connector row in the output
-- @param Container The Scribunto HTML node we'll be creating this row inside of. Should be a container of some sort.
-- @param Input Table containing a Name and Type for the input on this row. Can be nil if no input is to be placed on this row.
-- @param Output Table containing a Name and Type for the output on this row. Can be nil if no output is to be placed on this row.
function CreateConnectorRow(Container, Input, Output)
	local connectorRow = Container
		:tag('div') -- HTML div to contain the connector row. We specify a min-height of 70px for consistency.
			:cssText('display: flex; min-height: 70px;')
	
	-- Create the input (left) attachement point
	CreateConnectorAttachmentPoint(connectorRow, Input, true);
 
	connectorRow
		:tag('div') -- HTML div to contain the input and output labels in the connector row
			:cssText( 'flex-grow: 2; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;')
			:tag('div') -- HTML div to contain the input label
				:cssText('text-align: left; overflow: hidden; text-overflow: ellipsis; padding-left: 4px;  border-right: 20px solid #11151d; border-bottom: 4px solid #11151d; border-top: 4px solid #11151d; background-color:' .. GetTypeColor(Input, 0.6) .. ';')
				:wikitext( Input and Input.Name or ' ' )
				:done() -- Close input label div
			:tag('div') -- HTML div to contain the output label
				:cssText('text-align: right; overflow: hidden; text-overflow: ellipsis; padding-right: 4px; border-left: 20px solid #11151d; border-bottom: 4px solid #11151d; border-top: 4px solid #11151d; background-color: ' .. GetTypeColor(Output, 0.6) .. ';')
				:wikitext( Output and Output.Name or ' ' )
				:done() -- Close output label div
	-- Create the output (right) attachment point
	CreateConnectorAttachmentPoint(connectorRow, Output, false);

end

--- Creates a new ProtoFlux global input field row in the output
--	@param Container The Scribunto HTML node we'll be creating this row inside of. Should be a container of some sort.
--	@param Global Table containing a Name and Type for the global field on this row.
function CreateGlobalsRow(Container, Global)
	Container
		:tag( 'div' )
			:cssText('display: flex; min-height: 70px; flex-direction: column; border-left: 10px solid ' .. GetTypeColor(Global, 1.0) .. ';')
			:tag( 'div' )
				:cssText('display: flex; flex-direction: row; align-items: center; flex-grow:1; overflow: hidden;')
				:tag( 'span' )
					:cssText('text-align: center; overflow: hidden; text-overflow: ellipsis; font-size: 14pt; font-weight: bold; flex-grow:1;')
					:wikitext(Global and Global.Name or ' ')
					:done()
				:done()
			:tag( 'div' )
				:attr('style', 'display:flex; gap: 10px; flex-grow: 1;')
				:tag('div')
					:cssText('border-radius: 16px; background-color: #777; font-style: italic; text-align:center; flex-grow: 3; display: flex; flex-direction: column; justify-content: center;')
					:tag( 'span' )
						:wikitext('null')
						:done()
					:done()
				:tag( 'div')
					:cssText('border-radius: 16px; background-color: #333; text-align:center; flex-grow: 1; display: flex; flex-direction: column; justify-content: center;')
					:tag ( 'span' )
						:wikitext('∅')   
end

--- Creates a new input or output attachement point for a connector row.
--	@param Container The Scribunto HTML node we'll be creating this row inside of. Should be a container of some sort.
--	@param Connector Table containing a Name (Optional) and Type (Required) for the input/output attachment point.
--	@param isInput	True if this is an input side attachment point, false if it is an output side attachment point.
function CreateConnectorAttachmentPoint(Container, Connector, isInput)
	Container
		:tag( 'div' )
			:cssText('min-width:30px; background-color: ' .. GetTypeColor(Connector, 0.3) .. '; border: 5px solid ' .. GetTypeColor(Connector, 1.0) .. (isInput and '; border-left: none;' or '; border-right: none;'))
end

--- Returns an RGBA value representing the type color within Resonite
-- @param Connector Table containing a Name (Optional) and Type (Required) for the input/output attachment point.
-- @param Alpha The alpha to use in the RGBA value. 
function GetTypeColor(Connector, Alpha)
	return (Connector and 'rgba(' .. (typeColor[Connector.Type] or '0, 0, 0') .. ',' .. Alpha .. ')' or 'rgba(0, 0, 0, 0)')
end

return p