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

Example app - exception to do with touch #1376

Closed AndrewEQ closed 3 years ago

AndrewEQ commented 3 years ago

Uno 2.0.0-beta.5 + latest fuselibs (as of 28 Sep 2020)

Example App Test

Screenshot 2020-09-29 at 16 00 40

<App>
    <iOS.StatusBarConfig Style="Light" Animation="Fade" IsVisible="true" />
    <Android.StatusBarConfig Color="#000" IsVisible="true" />
    <ClientPanel>
        <Page ux:Class="PageWithTitle" ux:Name="self" HitTestMode="LocalBoundsAndChildren">
            <DockLayout />
            <float4 ux:Property="HeaderColor" />
            <float4 ux:Property="HeaderTextColor" />
            <string ux:Property="Instructions" />
            <StackPanel Dock="Top">
                <Panel Color="{Property self.HeaderColor}" Height="45">
                    <Text Value="{Property self.Title}" FontSize="22"
                          Alignment="Center" TextColor="{Property self.HeaderTextColor}"/>
                </Panel>
            </StackPanel>
            <Panel Height="10%" Color="#0008" Alignment="Bottom">
                <WhileActive Invert="true" Threshold="0.4">
                    <Move RelativeTo="Size" Y="1" Duration="0.4" Easing="CircularInOut"/>
                </WhileActive>
                <Text Value="{Property self.Instructions}" Margin="20" TextColor="#fff" Alignment="Center" />
            </Panel>
        </Page>
        <PageControl>
            <PageWithTitle Title="Basic animation" HeaderColor="#595FFF" HeaderTextColor="#fff"
                           Color="#FEFDFC" Instructions="Tap and hold the rectangle">
                <Activated>
                    <SetWindowOrientation To="LandscapeRight" />
                </Activated>
                <Panel>
                    <Rectangle ux:Name="myRectangle" Color="#4894E5" Width="80" Height="80" CornerRadius="0">
                        <WhilePressed>
                            <Rotate Degrees="45" Easing="CubicInOut" Duration="0.5" />
                            <Scale  Factor="2"   Easing="CubicInOut" Duration="0.5" />
                            <Change myRectangle.Color="#FC5185"      Duration="0.3" />
                            <Change myRectangle.CornerRadius="15"    Duration="0.3" />
                        </WhilePressed>
                    </Rectangle>
                </Panel>
            </PageWithTitle>
            <PageWithTitle Title="Logic with TypeScript" HeaderColor="#F68FD7" HeaderTextColor="#FFF" Color="#FFF"
                           Instructions="Tap the screen to add items" Model="Logic">
                <Activated>
                    <SetWindowOrientation To="Portrait" />
                </Activated>
                <Panel Tapped="{addItem}">
                    <ScrollView>
                        <Panel>
                            <ColumnLayout ColumnCount="3"/>
                            <Each Items="{items}">
                                <Rectangle ux:Name="item" Color="{color}" Height="{height}" Margin="5" CornerRadius="5">
                                    <AddingAnimation>
                                        <Change item.Opacity="0" Duration="0.3" />
                                    </AddingAnimation>
                                </Rectangle>
                            </Each>
                        </Panel>
                    </ScrollView>
                </Panel>
            </PageWithTitle>
            <PageWithTitle Title="Realtime effects" HeaderColor="#2CAE3F" HeaderTextColor="#fff"
                           Color="#FFF" Instructions="Use the slider to blur the logo">
                <Grid RowCount="2">
                    <Path Width="75%" Data="M 32.287109 -0.001953125 C 18.784609 -0.001953125 10.451172 9.6265937 10.451172 23.011719 L 10.451172 30.054688 L 0 30.054688 L 0 42.03125 L 10.451172 42.03125 L 10.451172 89.228516 L 24.65625 89.228516 L 24.65625 42.03125 L 39.091797 42.03125 L 39.097656 30.054688 L 24.65625 30.054688 L 24.65625 22.306641 C 24.65625 16.318766 27.7085 12.443359 33.109375 12.443359 C 35.71825 12.443359 37.843219 13.169297 39.433594 14.404297 L 45.648438 3.9257812 L 45.671875 3.8730469 C 42.38425 1.4067969 37.921859 -0.001953125 32.287109 -0.001953125 z M 135.74219 28.880859 C 121.18406 28.880859 112.26172 35.926766 112.26172 47.431641 C 112.26172 56.706516 118.12998 61.403766 131.63086 64.572266 C 140.20211 66.568766 143.01953 68.331016 143.01953 72.322266 C 143.01953 76.667016 139.02945 78.662109 132.68945 78.662109 C 125.87945 78.662109 120.12456 76.196328 115.89844 72.673828 L 110.0293 83.242188 C 115.19542 87.703688 123.64706 90.402344 132.57031 90.402344 C 147.83281 90.402344 157.34375 82.888625 157.34375 71.5 C 157.34375 62.577625 151.1207 56.941859 137.9707 53.771484 C 129.1657 51.659109 126.34961 50.483937 126.34961 46.492188 C 126.34961 42.382312 129.87094 40.623047 135.74219 40.623047 C 141.96469 40.623047 146.65914 42.969234 150.18164 45.787109 L 155.81836 35.339844 C 151.23961 31.464844 143.84344 28.880859 135.74219 28.880859 z M 191.64062 28.880859 C 174.61687 28.880859 162.64062 41.913062 162.64062 59.757812 C 162.64062 77.486812 174.38227 90.402344 192.69727 90.402344 C 203.61727 90.402344 211.36633 86.763625 217.23633 79.71875 L 207.49219 71.734375 C 204.79219 75.49175 199.74195 78.544922 192.81445 78.544922 C 182.95195 78.544922 177.31734 73.378953 176.96484 63.986328 L 218.76172 63.986328 L 218.76172 59.054688 C 218.76172 42.500062 209.83937 28.880859 191.64062 28.880859 z M 49.3125 30.054688 L 49.3125 64.808594 C 49.3125 80.307219 56.828078 90.402344 70.564453 90.402344 C 79.604453 90.402344 85.355531 86.764672 88.644531 82.419922 L 89.347656 89.228516 L 102.0293 89.228516 L 102.0293 30.054688 L 87.939453 30.054688 L 87.939453 68.800781 C 84.886703 73.144531 81.012687 77.019531 74.320312 77.019531 C 67.511688 77.019531 63.402344 71.734266 63.402344 64.103516 L 63.402344 30.054688 L 49.3125 30.054688 z M 191.40625 40.152344 C 199.86 40.152344 204.5557 45.787047 204.9082 53.888672 L 176.96484 53.888672 C 177.43484 45.669922 183.07 40.152344 191.40625 40.152344 z M 252.61328 63.986328 L 207.57227 139.92578 L 272.44141 139.92578 L 317.48438 63.986328 L 252.61328 63.986328 M -1.0 -10.0 l 1,1 z" Color="Black">
                        <Blur ux:Name="myBlur" Radius="0"/>
                    </Path>
                    <Slider Margin="40,0" Alignment="VerticalCenter">
                        <ProgressAnimation>
                            <Change myBlur.Radius="10" />
                        </ProgressAnimation>
                    </Slider>
                </Grid>
            </PageWithTitle>
        </PageControl>
    </ClientPanel>
</App>