search

fuse-open / fuselibs

Fuselibs is the Uno-libraries that provide the UI framework used in Fuse apps
https://npmjs.com/package/@fuse-open/fuselibs
MIT License
176 stars 72 forks source link

Enable cast from string to float4 #1424

Closed ichan-mb closed 3 years ago

ichan-mb commented 3 years ago

Enhancement on Fuse.Marshal. Enable to cast from string formatted float4 to float4, now we can convert float4 to string and vice versa ex: "1,1,1,1" to float4(1,1,1,1). This is useful for example if we try to pass the Color property value of a <Rectangle /> to <Selectable />. because Selection API (Fuse.Selection) only works with a string value.

Example:

<App>
    <Rectangle ux:Class="ColorSwatch" MinWidth="200" MinHeight="200">
        <string ux:Property="Value" />

        <Rectangle ux:Class="ColorBox" HitTestMode="LocalBounds">
            <Selectable Value="{Property this.Color}" />
            <WhileSelected>
                <Change this.StrokeColor="White" />
                <Change this.StrokeWidth="2" />
                <BringToFront />
            </WhileSelected>
            <Tapped>
                <ToggleSelection />
                <DebugAction Message="{Property this.Color}" />
            </Tapped>
        </Rectangle>

        <Selection MaxCount="1" MinCount="1" Value="{Property this.Value}" />
        <GridLayout RowCount="10" ColumnCount="12" />

        <ColorBox Color="hsvColor(0,0,1)" />
        <ColorBox Color="hsvColor(0,0,0.921569)" />
        <ColorBox Color="hsvColor(0,0,0.839216)" />
        <ColorBox Color="hsvColor(0,0,0.760784)" />
        <ColorBox Color="hsvColor(0,0,0.678431)" />
        <ColorBox Color="hsvColor(0,0,0.6)" />
        <ColorBox Color="hsvColor(0,0,0.521569)" />
        <ColorBox Color="hsvColor(0,0,0.439216)" />
        <ColorBox Color="hsvColor(0,0,0.360784)" />
        <ColorBox Color="hsvColor(0,0,0.278431)" />
        <ColorBox Color="hsvColor(0,0,0.2)" />
        <ColorBox Color="hsvColor(0,0,0)" />
        <ColorBox Color="hsvColor(0.542793,1,0.290196)" />
        <ColorBox Color="hsvColor(0.612403,0.988506,0.341176)" />
        <ColorBox Color="hsvColor(0.703704,0.915255,0.231373)" />
        <ColorBox Color="hsvColor(0.787878,0.90164,0.239216)" />
        <ColorBox Color="hsvColor(0.937107,0.883333,0.235294)" />
        <ColorBox Color="hsvColor(0.010989,0.98913,0.360784)" />
        <ColorBox Color="hsvColor(0.051852,1,0.352941)" />
        <ColorBox Color="hsvColor(0.096591,1,0.345098)" />
        <ColorBox Color="hsvColor(0.118217,1,0.337255)" />
        <ColorBox Color="hsvColor(0.158497,1,0.4)" />
        <ColorBox Color="hsvColor(0.179012,0.952941,0.333333)" />
        <ColorBox Color="hsvColor(0.251773,0.758064,0.243137)" />
        <ColorBox Color="hsvColor(0.539604,1,0.396078)" />
        <ColorBox Color="hsvColor(0.603825,0.99187,0.482353)" />
        <ColorBox Color="hsvColor(0.703704,0.878049,0.321569)" />
        <ColorBox Color="hsvColor(0.789473,0.853933,0.34902)" />
        <ColorBox Color="hsvColor(0.939614,0.811765,0.333333)" />
        <ColorBox Color="hsvColor(0.021629,1,0.513725)" />
        <ColorBox Color="hsvColor(0.055555,1,0.482353)" />
        <ColorBox Color="hsvColor(0.101093,1,0.478431)" />
        <ColorBox Color="hsvColor(0.122222,1,0.470588)" />
        <ColorBox Color="hsvColor(0.158273,0.985816,0.552941)" />
        <ColorBox Color="hsvColor(0.177469,0.915254,0.462745)" />
        <ColorBox Color="hsvColor(0.251366,0.701148,0.341176)" />
        <ColorBox Color="hsvColor(0.538732,0.993007,0.560784)" />
        <ColorBox Color="hsvColor(0.601578,1,0.662745)" />
        <ColorBox Color="hsvColor(0.719697,0.92437,0.466667)" />
        <ColorBox Color="hsvColor(0.788333,0.806452,0.486275)" />
        <ColorBox Color="hsvColor(0.938596,0.785124,0.47451)" />
        <ColorBox Color="hsvColor(0.023941,1,0.709804)" />
        <ColorBox Color="hsvColor(0.05973,1,0.678431)" />
        <ColorBox Color="hsvColor(0.102564,1,0.662745)" />
        <ColorBox Color="hsvColor(0.123232,0.993976,0.65098)" />
        <ColorBox Color="hsvColor(0.159864,1,0.768627)" />
        <ColorBox Color="hsvColor(0.177704,0.915151,0.647059)" />
        <ColorBox Color="hsvColor(0.25502,0.680328,0.478431)" />
        <ColorBox Color="hsvColor(0.537037,1,0.705882)" />
        <ColorBox Color="hsvColor(0.599688,1,0.839216)" />
        <ColorBox Color="hsvColor(0.706284,0.824324,0.580392)" />
        <ColorBox Color="hsvColor(0.785333,0.791139,0.619608)" />
        <ColorBox Color="hsvColor(0.938746,0.764707,0.6)" />
        <ColorBox Color="hsvColor(0.026549,1,0.886275)" />
        <ColorBox Color="hsvColor(0.061927,1,0.854902)" />
        <ColorBox Color="hsvColor(0.103175,0.995261,0.827451)" />
        <ColorBox Color="hsvColor(0.125,0.995215,0.819608)" />
        <ColorBox Color="hsvColor(0.160544,1,0.960784)" />
        <ColorBox Color="hsvColor(0.179211,0.889952,0.819608)" />
        <ColorBox Color="hsvColor(0.253968,0.668789,0.615686)" />
        <ColorBox Color="hsvColor(0.542438,1,0.847059)" />
        <ColorBox Color="hsvColor(0.603018,1,0.996078)" />
        <ColorBox Color="hsvColor(0.716435,0.808989,0.698039)" />
        <ColorBox Color="hsvColor(0.792237,0.776596,0.737255)" />
        <ColorBox Color="hsvColor(0.942857,0.756756,0.72549)" />
        <ColorBox Color="hsvColor(0.030627,0.917647,1)" />
        <ColorBox Color="hsvColor(0.069281,1,1)" />
        <ColorBox Color="hsvColor(0.111549,0.996078,1)" />
        <ColorBox Color="hsvColor(0.131093,1,0.992157)" />
        <ColorBox Color="hsvColor(0.164021,0.744094,0.996078)" />
        <ColorBox Color="hsvColor(0.184162,0.766949,0.92549)" />
        <ColorBox Color="hsvColor(0.260163,0.657754,0.733333)" />
        <ColorBox Color="hsvColor(0.535193,0.996032,0.988235)" />
        <ColorBox Color="hsvColor(0.60119,0.771653,0.996078)" />
        <ColorBox Color="hsvColor(0.707665,0.795745,0.921569)" />
        <ColorBox Color="hsvColor(0.786096,0.769547,0.952941)" />
        <ColorBox Color="hsvColor(0.938597,0.743478,0.901961)" />
        <ColorBox Color="hsvColor(0.017143,0.686275,1)" />
        <ColorBox Color="hsvColor(0.056466,0.717647,1)" />
        <ColorBox Color="hsvColor(0.102094,0.751968,0.996078)" />
        <ColorBox Color="hsvColor(0.122396,0.755906,0.996078)" />
        <ColorBox Color="hsvColor(0.157658,0.580392,1)" />
        <ColorBox Color="hsvColor(0.179952,0.577406,0.937255)" />
        <ColorBox Color="hsvColor(0.25431,0.549763,0.827451)" />
        <ColorBox Color="hsvColor(0.537255,0.674603,0.988235)" />
        <ColorBox Color="hsvColor(0.605516,0.545098,1)" />
        <ColorBox Color="hsvColor(0.719048,0.688976,0.996078)" />
        <ColorBox Color="hsvColor(0.790419,0.657481,0.996078)" />
        <ColorBox Color="hsvColor(0.94,0.52521,0.933333)" />
        <ColorBox Color="hsvColor(0.013333,0.490196,1)" />
        <ColorBox Color="hsvColor(0.051282,0.509804,1)" />
        <ColorBox Color="hsvColor(0.098039,0.533333,1)" />
        <ColorBox Color="hsvColor(0.120098,0.533333,1)" />
        <ColorBox Color="hsvColor(0.157321,0.419608,1)" />
        <ColorBox Color="hsvColor(0.180135,0.409091,0.94902)" />
        <ColorBox Color="hsvColor(0.256097,0.371041,0.866667)" />
        <ColorBox Color="hsvColor(0.540881,0.418972,0.992157)" />
        <ColorBox Color="hsvColor(0.607954,0.345098,1)" />
        <ColorBox Color="hsvColor(0.72076,0.448818,0.996078)" />
        <ColorBox Color="hsvColor(0.790124,0.425197,0.996078)" />
        <ColorBox Color="hsvColor(0.941667,0.327869,0.956863)" />
        <ColorBox Color="hsvColor(0.0125,0.313725,1)" />
        <ColorBox Color="hsvColor(0.051587,0.329412,1)" />
        <ColorBox Color="hsvColor(0.093869,0.341176,1)" />
        <ColorBox Color="hsvColor(0.116279,0.338582,0.996078)" />
        <ColorBox Color="hsvColor(0.157143,0.27451,1)" />
        <ColorBox Color="hsvColor(0.179687,0.259109,0.968627)" />
        <ColorBox Color="hsvColor(0.254902,0.219828,0.909804)" />
        <ColorBox Color="hsvColor(0.548077,0.203922,1)" />
        <ColorBox Color="hsvColor(0.609848,0.172549,1)" />
        <ColorBox Color="hsvColor(0.716981,0.208661,0.996078)" />
        <ColorBox Color="hsvColor(0.783019,0.207843,1)" />
        <ColorBox Color="hsvColor(0.942983,0.152611,0.976471)" />
        <ColorBox Color="hsvColor(0.012821,0.152941,1)" />
        <ColorBox Color="hsvColor(0.048781,0.160784,1)" />
        <ColorBox Color="hsvColor(0.093023,0.168627,1)" />
        <ColorBox Color="hsvColor(0.11508,0.164706,1)" />
        <ColorBox Color="hsvColor(0.156566,0.129921,0.996078)" />
        <ColorBox Color="hsvColor(0.182796,0.123999,0.980392)" />
        <ColorBox Color="hsvColor(0.26282,0.109243,0.933333)" />

    </Rectangle>

    <StackPanel ItemSpacing="10" Alignment="Center">
        <LetString ux:Name="selectedColor" />
        <Rectangle Height="100" Color="{selectedColor}" />
        <ColorSwatch  Value="{selectedColor}" />
    </StackPanel>
</App>

This PR contains: