Module:Test2

The Text Component

Text

persistent:

Sync<bool>

UpdateOrder:

Sync<int>

Enabled:

Sync<bool>

Font:

⤴

↑

∅

Content:

ParseRichText:

Sync<bool>

NullContent:

Size:

Sync<float>

HorizontalAlign:

Sync<TextHorizontalAlignment>

VerticalAlign:

Sync<TextVerticalAlignment>

AlignmentMode:

Sync<Elements.Assets.AlignmentMode>

Color:

Sync<colorX>

Materials:

⤴

↑

∅

LineHeight:

Sync<float>

MaskPattern:

HorizontalAutoSize:

Sync<bool>

VerticalAutoSize:

Sync<bool>

AutoSizeMin:

Sync<float>

AutoSizeMax:

Sync<float>

CaretPosition:

Sync<int>

SelectionStart:

Sync<int>

CaretColor:

Sync<colorX>

SelectionColor:

Sync<colorX>

interactionTarget:

Sync<bool>

_legacyFontMaterial:

⤴

↑

null

∅

_legacyAlign:

Sync<Alignment>

The AssetMultiplexer<ITexture2D> Component

AssetMultiplexer<ITexture2D>

persistent:

Sync<bool>

UpdateOrder:

Sync<int>

Enabled:

Sync<bool>

Target:

⤴

↑

null

∅

Index:

Sync<int>

Assets:

⤴

↑

∅

---

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

local fieldHandlers = {}

-- 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',
	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',
    ulong = '0, 255, 127',
    int = '0, 255, 0',
    Continuation = '255, 255, 178',
    Slot = '191, 255, 127'
}

--- 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 fields = mw.text.jsonDecode(frame.args.Fields or '[]')
	
	-- Create an HTML div element to contain our component UI
	local componentContainer = mw.html.create( 'div' )
	componentContainer
	    :attr('class', frame.args.Inline and '' or 'floatright')
		:cssText('color: rgb(224, 224, 224); background-color: rgb(18, 20, 28); width: 512px; display: flex; flex-direction: column; align-items: stretch; gap: 3px;')
		:tag('div') -- HTML div to contain the component title
			:cssText('color: rgb(247, 247, 112); border-radius: 10px; background-color: rgb(43, 46, 54); text-align:center; font-size: 1.25rem; font-weight: bold; flex-grow: 1;')
			:wikitext(frame.args.Name)
			:done() -- Close node title div
	
	-- 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,#fields do
		CreateField(componentContainer, fields[i])
	end
			
	-- Return the HTML generated above to the wiki page this script is invoked from.
	return tostring(componentContainer) .. '[[Category:Components:All]]'
end

--- Creates a new Component 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 Field Table containing a Name, FieldType, and Type for the field on this row.
function CreateField(Container, Field)
	local fieldContentContainer = Container
		:tag('div') -- HTML div to contain the field. We specify a min-height of 40px for consistency.
			:cssText('display: flex;')
			:tag('div') -- HTML div to contain the field
				:cssText( 'flex-grow: 2; overflow: hidden; display: flex; flex-direction: row;')
				:tag('div') -- HTML div to contain the field label
					:attr('title', Input and (Field.Name .. ' <' .. Field.Type .. '>') or '') -- Add a basic mouseover description
					:cssText('text-align: left; width:30%; overflow: hidden; text-overflow: ellipsis; padding-left: 4px;')
					:wikitext( (Field and Field.Name or '') .. ':' )
					:done() -- Close input label div
	fieldHandlers[Field.FieldType](fieldContentContainer, Field)
end

function fieldHandlers.Sync(Container, Field)
	if Field.Type == 'Bool' then
		Container
			:tag('div')
				:cssText('display:flex; flex-direction: column; align-items:center; justify-content: center;')
				:tag('div')
					:cssText('background-color: rgb(43, 46, 54); border-radius: 6px; width: 1.5rem; height: 1.5rem;')
	elseif Field.Type == 'Int' or Field.Type == 'String' then
		Container
			:tag('div')
				:cssText('display:flex; flex-direction: column; align-items:stretch; flex-grow:1;')
				:tag('div')
					:cssText('border: 2px solid rgb(43, 46, 54); border-radius: 6px; background: rgb(30, 33, 38); flex-grow:1;')
	elseif Field.Type == "ColorX" then
		Container
			:tag('div')
				:cssText('display:flex; height: 1.5rem; flex-direction: row; align-items:stretch; flex-grow:1; gap: 4px;')
				:wikitext('R')
				:tag('div')
					:cssText('background: rgb(43, 46, 54); border-radius: 8px; flex-grow:1; display:flex; justify-content: center; align-items:center;')
					:wikitext('0')
					:done()
				:wikitext('G')
				:tag('div')
					:cssText('background: rgb(43, 46, 54); border-radius: 8px; flex-grow:1; display:flex; justify-content: center; align-items:center;')
					:wikitext('0')
					:done()
				:wikitext('B')
				:tag('div')
					:cssText('background: rgb(43, 46, 54); border-radius: 8px; flex-grow:1; display:flex; justify-content: center; align-items:center;')
					:wikitext('0')
					:done()
				:wikitext('A')
				:tag('div')
					:cssText('background: rgb(43, 46, 54); border-radius: 8px; flex-grow:1; display:flex; justify-content: center; align-items:center;')
					:wikitext('0')
					:done()
				:tag('div')
					:cssText('background: rgb(43, 46, 54); border-radius: 8px; flex-grow:2; display:flex; justify-content: center; align-items:center;')
					:done()
	else
		Container
			:wikitext( Field.FieldType .. '<' .. Field.Type .. '>')
	end
end

function fieldHandlers.SyncRef(Container,Field)
	Container
	:tag('div')
		:cssText('display:flex; height: 1.5rem; flex-direction: row; align-items:stretch; flex-grow:1; gap: 4px;')
		:tag('div')
			:cssText('width: 1.5rem; background-color: rgb(43, 46, 54); border-radius: 8px; flex-grow:0; display:flex; justify-content: center; align-items:center;')
			:wikitext('⤴')
			:done()
		:tag('div')
			:cssText('width: 1.5rem; background-color: rgb(43, 46, 54); border-radius: 8px; flex-grow:0; display:flex; justify-content: center; align-items:center;')
			:wikitext('↑')
			:done()
		:tag('div')
			:cssText('background: rgb(43, 46, 54); border-radius: 8px; flex-grow:1; display:flex; justify-content: center; align-items:center; font-style:italic;')
			:wikitext('null')
			:done()
		:tag('div')
			:cssText('width: 1.5rem; background-color: rgb(43, 46, 54); border-radius: 8px; flex-grow:0; display:flex; justify-content: center; align-items:center;')
			:wikitext('∅')
			:done()
end

function fieldHandlers.SyncAssetList(Container,Field)
	Container
	:tag('div')
		:cssText('display:flex; height: 1.5rem; flex-direction: row; align-items:stretch; flex-grow:1; gap: 4px;')
		:tag('div')
			:cssText('width: 1.5rem; background-color: rgb(43, 46, 54); border-radius: 8px; flex-grow:0; display:flex; justify-content: center; align-items:center;')
			:wikitext('⤴')
			:done()
		:tag('div')
			:cssText('width: 1.5rem; background-color: rgb(43, 46, 54); border-radius: 8px; flex-grow:0; display:flex; justify-content: center; align-items:center;')
			:wikitext('↑')
			:done()
		:tag('div')
			:cssText('border: 2px solid rgb(43, 46, 54); border-radius: 8px; background: rgb(30, 33, 38); flex-grow:1;')
			:done()
		:tag('div')
			:cssText('width: 1.5rem; background-color: rgb(43, 46, 54); border-radius: 8px; flex-grow:0; display:flex; justify-content: center; align-items:center;')
			:wikitext('∅')
			:done()
end

function fieldHandlers.AssetRef(Container,Field)
	Container
	:tag('div')
		:cssText('display:flex; height: 1.5rem; flex-direction: row; align-items:stretch; flex-grow:1; gap: 4px;')
		:tag('div')
			:cssText('width: 1.5rem; background-color: rgb(43, 46, 54); border-radius: 8px; flex-grow:0; display:flex; justify-content: center; align-items:center;')
			:wikitext('⤴')
			:done()
		:tag('div')
			:cssText('width: 1.5rem; background-color: rgb(43, 46, 54); border-radius: 8px; flex-grow:0; display:flex; justify-content: center; align-items:center;')
			:wikitext('↑')
			:done()
		:tag('div')
			:cssText('border: 2px solid rgb(43, 46, 54); border-radius: 8px; background: rgb(30, 33, 38); flex-grow:1;')
			:done()
		:tag('div')
			:cssText('width: 1.5rem; background-color: rgb(43, 46, 54); border-radius: 8px; flex-grow:0; display:flex; justify-content: center; align-items:center;')
			:wikitext('∅')
			:done()
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