The Text Component
Text
The RelativePositioner Component
Lua error at line 65: attempt to call field '?' (a nil value).
The AssetMultiplexer<ITexture2D> Component
AssetMultiplexer<ITexture2D>
-- 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;')
fieldHandlers[Field.FieldType](fieldContentContainer, Field)
end
function fieldHandlers.Sync(Container, Field)
Container
:tag('div') -- HTML div to contain the field label
:attr('title', Field 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 field label div
if Field.Type == 'Bool' then
CreateUICheckbox(Container, '')
elseif Field.Type == 'Int' or Field.Type == 'String' then
CreateUIInputBox(Container, '0')
elseif Field.Type == 'Float' or Field.Type == 'Double' then
Container
:tag('div')
:cssText('display:flex; flex-direction: row; align-items:center; flex-grow:1; gap: 4px;')
:tag('div')
:cssText('height: 0.5rem; border-radius: 8px; background: rgb(43, 46, 54); flex-grow:5;')
:tag('div')
:cssText('height:1em; width: 1em; position:relative; top: -0.25rem; border-radius: 1em; background-color:white;')
:done()
:done()
:tag('div')
:cssText('height: 1.5rem; border: 2px solid rgb(43, 46, 54); border-radius: 8px; background: rgb(30, 33, 38); flex-grow:1; display:flex; justify-content: center; align-items:center;')
:wikitext('0')
elseif Field.Type == "TextHorizontalAlignment" then
CreateUIForwardBackwards(Container, "Left")
elseif Field.Type == "TextVerticalAlignment" then
CreateUIForwardBackwards(Container, "Top")
elseif Field.Type == "Elements.Assets.AlignmentMode" then
CreateUIForwardBackwards(Container, "Geometric")
elseif Field.Type == "Alignment" then
CreateUIForwardBackwards(Container, "TopLeft")
elseif Field.Type == "ColorX" then
local c = Container
:tag('div')
:cssText('display:flex; flex-direction: column; align-items:stretch; flex-grow:1; gap: 4px;')
CreateUIColor(c)
local c2 = c:tag('div')
:cssText('display:flex; flex-direction: row; align-items: stretch; flex-grow: 1; gap: 4px;')
:tag('div')
:cssText('display:flex; justify-content: center; align-items:center;')
:wikitext('Profile:')
:done()
CreateUIForwardBackwards(c2, "sRGB")
else
Container
:wikitext( Field.FieldType .. '<' .. Field.Type .. '>')
end
end
function CreateUIColor(Container)
local c = Container
:tag('div')
:cssText('display:flex; height: 1.5rem; flex-direction: row; align-items:stretch; flex-grow:1; gap: 4px;')
CreateUIBasicText(c, 'R')
CreateUIInputBox(c, '0')
CreateUIBasicText(c, 'G')
CreateUIInputBox(c, '0')
CreateUIBasicText(c, 'B')
CreateUIInputBox(c, '0')
CreateUIBasicText(c, 'A')
CreateUIInputBox(c, '0')
c:tag('div')
:cssText('display:flex; height: 1.5rem; flex-direction: row; align-items:stretch; flex-grow:1;')
:tag('div')
:cssText('background-color: black; flex-grow: 1;')
:done()
:tag('div')
:cssText('background-color: white; flex-grow: 1;')
:done()
:done()
end
function CreateUIBasicText(Container, Text)
Container
:wikitext(Text)
:done()
return Container;
end
function CreateUIForwardBackwards(Container, Text)
local c = Container
:tag('div')
:cssText('display:flex; height: 1.5rem; flex-direction: row; align-items:stretch; flex-grow:1; gap: 4px;')
CreateUISmallButton(c, '<<')
:tag('div')
:cssText('border-radius: 8px; background: rgb(8, 8, 10); flex-grow:1; display:flex; justify-content: center; align-items:center;')
:wikitext(Text)
:done()
CreateUISmallButton(c, '>>')
return Container
end
function CreateUICheckbox(Container, Checked)
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: 8px; width: 1.5rem; height: 1.5rem;')
end
function CreateUISmallButton(Container, Text)
Container
:tag('div')
:cssText('display:flex; flex-direction: column; align-items:center; justify-content: center;')
:tag('div')
:cssText('width: 1.5rem; height: 1.5rem; background-color: rgb(43, 46, 54); border-radius: 8px; flex-grow:0; display:flex; justify-content: center; align-items:center;')
:wikitext(Text)
:done()
return Container
end
function CreateUIButton(Container, Text)
Container
:tag('div')
:cssText('display:flex; flex-direction: column; align-items:stretch; justify-content: center;')
:tag('div')
:cssText('height: 1.5rem; background-color: rgb(43, 46, 54); border-radius: 8px; flex-grow:0; display:flex; justify-content: center; align-items:center;')
:wikitext(Text)
:done()
return Container
end
function CreateUIInputBox(Container, Text)
Container
:tag('div')
:cssText('height: 1.5em; border: 2px solid rgb(43, 46, 54); border-radius: 8px; background: rgb(30, 33, 38); flex-grow:1; display:flex; justify-content: center; align-items:center;')
:wikitext(Text)
:done()
end
function CreateUIRefInputBox(Container, Text, Italics)
Container
:tag('div')
:cssText('height: 1.5em; background: rgb(43, 46, 54); border-radius: 8px; flex-grow:1; display:flex; justify-content: center; align-items:center;' .. (Italics and 'font-style:italic;' or ''))
:wikitext(Text)
:done()
return Container
end
function CreateUISyncRefEditor(Container, Text)
local c = Container
:tag('div')
:cssText('display:flex; flex-direction: row; align-items:stretch; flex-grow:1; gap: 4px;')
CreateUISmallButton(c, '⤴')
CreateUISmallButton(c, '↑')
CreateUIRefInputBox(c, Text or 'null', true)
CreateUISmallButton(c, '∅')
end
function fieldHandlers.SyncRef(Container,Field)
Container
:tag('div') -- HTML div to contain the field label
:attr('title', Field 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 field label div
CreateUISyncRefEditor(Container, 'null')
end
function fieldHandlers.SyncAssetList(Container,Field)
local c = Container
:tag('div')
:cssText('display: flex; flex-direction: column; flex-grow: 1; gap: 4px;')
:tag('div') -- HTML div to contain the field label
:attr('title', Field and (Field.Name .. ' <' .. Field.Type .. '>') or '') -- Add a basic mouseover description
:cssText('text-align: center;')
:wikitext( (Field and Field.Name or '') .. '(list):' )
:done() -- Close field label div
CreateUISyncRefEditor(c, 'null')
CreateUIButton(c, 'Add')
end
function fieldHandlers.AssetRef(Container,Field)
Container
:tag('div') -- HTML div to contain the field label
:attr('title', Field 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 field label div
CreateUISyncRefEditor(Container, 'null')
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