Skip to content

Commit 2663b62

Browse files
Uldis ZeidursUldis Zeidurs
Uldis Zeidurs
authored and
Uldis Zeidurs
committed
general syntax cleanup, removed StepDegrees property that caused wraparound
1 parent bf4e648 commit 2663b62

12 files changed

+65
-77
lines changed

‎Samples/ImageViewer/Assets/Unsplash3.jpg ‎Samples/ImageViewer/Assets/image0.jpg

File renamed without changes.

‎Samples/ImageViewer/Assets/Unsplash2.jpg ‎Samples/ImageViewer/Assets/image1.jpg

File renamed without changes.

‎Samples/ImageViewer/Assets/Unsplash5.jpg ‎Samples/ImageViewer/Assets/image2.jpg

File renamed without changes.

‎Samples/ImageViewer/Assets/Unsplash6.jpg ‎Samples/ImageViewer/Assets/image3.jpg

File renamed without changes.

‎Samples/ImageViewer/Assets/Unsplash10.jpg ‎Samples/ImageViewer/Assets/image4.jpg

File renamed without changes.

‎Samples/ImageViewer/Assets/Unsplash11.jpg ‎Samples/ImageViewer/Assets/image5.jpg

File renamed without changes.

‎Samples/ImageViewer/Assets/Unsplash13.jpg ‎Samples/ImageViewer/Assets/image6.jpg

File renamed without changes.

‎Samples/ImageViewer/Assets/Unsplash20.jpg ‎Samples/ImageViewer/Assets/image7.jpg

File renamed without changes.

‎Samples/ImageViewer/Assets/Unsplash21.jpg ‎Samples/ImageViewer/Assets/image8.jpg

File renamed without changes.

‎Samples/ImageViewer/ImageViewer.unoproj

+2-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
],
88
"Projects": [],
99
"Includes": [
10-
"*"
10+
"*",
11+
"Assets/*.jpg:Bundle"
1112
]
1213
}

‎Samples/ImageViewer/MainView.ux

+61-74
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,107 @@
1-
<App ux:Class="MyApp" ClearColor="0,0,0,1">
1+
<App Background="#000">
22
<ClientPanel>
33
<JavaScript>
4-
var Observable = require("FuseJS/Observable")
5-
6-
exports.birds = Observable()
7-
//repeat several to show scrolling + transition
8-
for (var i=0; i < 50; ++i) {
9-
exports.birds.add({
10-
image: "image" + (i % 9)
11-
})
4+
var Observable = require("FuseJS/Observable");
5+
var birds = Observable();
6+
7+
// repeat several to show scrolling + transition
8+
for (var i = 0; i < 50; ++i) {
9+
birds.add({image: "Assets/image" + (i % 9) + ".jpg"});
1210
}
11+
12+
module.exports = {
13+
birds: birds
14+
};
1315
</JavaScript>
14-
<Image ux:Class="ZoomImage"/>
16+
17+
<Image ux:Class="ZoomImage" />
1518

16-
<Panel ux:Name="TheViewer" Visibility="Hidden" HitTestMode="LocalBoundsAndChildren">
17-
<SolidColor Color="0,0,0,0" ux:Name="BlockColor"/>
19+
<Panel ux:Name="theViewer" Visibility="Hidden" HitTestMode="LocalBoundsAndChildren">
20+
<SolidColor ux:Name="blockColor" Color="#0000" />
1821

1922
<Panel Alignment="TopRight" Padding="5" ux:Name="CloseButton" Margin="5">
20-
<Translation Vector="1.5,-1.5,0" RelativeTo="Size" ux:Name="TheTrans"/>
21-
<Rectangle Layer="Background" Fill="1,1,1,0.8" CornerRadius="5"/>
22-
<Image File="Assets/cancel.png" Color="0,0.1,0.2,1"/>
23+
<Translation ux:Name="theTrans" Vector="1.5,-1.5,0" RelativeTo="Size" />
24+
<Rectangle Layer="Background" Color="#fffc" CornerRadius="5" />
25+
<Image File="Assets/cancel.png" Color="#023f" />
2326
<Clicked>
24-
<Set ViewerVisible.Value="false"/>
27+
<Set viewerVisible.Value="false"/>
2528
</Clicked>
2629
</Panel>
2730

2831
<!-- reset transform -->
2932
<DoubleTapped>
30-
<Set TheZoomer.Value="1"/>
31-
<Set ThePanner.Value="0,0"/>
32-
<Set TheRotater.Value="0"/>
33+
<Set theZoomer.Value="1" />
34+
<Set thePanner.Value="0,0" />
35+
<Set theRotater.Value="0" />
3336
</DoubleTapped>
3437

3538
<!-- close when it gets small enough -->
36-
<WhileFloat Value="{ReadProperty TheTransform.ZoomFactor}" LessThan="0.7">
39+
<WhileFloat Value="{ReadProperty theTransform.ZoomFactor}" LessThan="0.7">
3740
<!-- the gestures will be active at this time, so we must explicitly cancel them -->
38-
<CancelInteractions/>
39-
<Set ViewerVisible.Value="false"/>
41+
<CancelInteractions />
42+
<Set viewerVisible.Value="false" />
4043
</WhileFloat>
4144

42-
<WhileTrue ux:Name="ViewerVisible">
43-
<Change BlockColor.Color="0,0.1,0.2,0.8" Duration="0.2" Easing="QuadraticInOut"/>
44-
<Change TheViewer.Visibility="Visible"/>
45-
<Change TheTrans.Vector="0" Duration="0.3" Easing="QuadraticInOut"/>
46-
<PulseForward Target="ZoomTo" Direction="Backward"/>
45+
<WhileTrue ux:Name="viewerVisible">
46+
<Change blockColor.Color="#023c" Duration="0.2" Easing="QuadraticInOut" />
47+
<Change theViewer.Visibility="Visible" />
48+
<Change theTrans.Vector="0" Duration="0.3" Easing="QuadraticInOut" />
49+
<PulseForward Target="zoomTo" When="Backward" />
4750

4851
<!-- reset transform so animation gets close to target size -->
49-
<Set TheZoomer.Value="1" Direction="Backward"/>
50-
<Set ThePanner.Value="0,0" Direction="Backward"/>
51-
<Set TheRotater.Value="0" Direction="Backward"/>
52+
<Set theZoomer.Value="1" When="Backward" />
53+
<Set thePanner.Value="0,0" When="Backward" />
54+
<Set theRotater.Value="0" When="Backward" />
5255
</WhileTrue>
5356

54-
<ZoomGesture Target="TheTransform" Minimum="1" Maximum="3" ux:Name="TheZoom"/>
55-
<Attractor Target="TheTransform.ZoomFactor" ux:Name="TheZoomer" TimeMultiplier="2"
56-
Type="Elastic" Unit="Normalized"/>
57+
<ZoomGesture Target="theTransform" Minimum="1" Maximum="3" />
58+
<Attractor ux:Name="theZoomer" Target="theTransform.ZoomFactor" TimeMultiplier="2" Type="Elastic" Unit="Normalized" />
5759

58-
<RotateGesture Target="TheTransform" ux:Name="TheRotate" StepDegrees="30"/>
59-
<Attractor Target="TheTransform.Rotation" ux:Name="TheRotater" TimeMultiplier="0.5"
60-
Type="Elastic" Unit="Radians"/>
60+
<RotateGesture Target="theTransform" />
61+
<Attractor ux:Name="theRotater" Target="theTransform.Rotation" TimeMultiplier="0.5" Type="Elastic" Unit="Radians" />
6162

62-
<PanGesture Target="TheTransform" Constraint="TheViewerImage" ux:Name="ThePan"/>
63-
<Attractor Target="TheTransform.Translation" ux:Name="ThePanner"
64-
Type="Elastic" Unit="Points"/>
63+
<PanGesture Target="theTransform" Constraint="theViewerImage" />
64+
<Attractor ux:Name="thePanner" Target="theTransform.Translation" Type="Elastic" Unit="Points" />
6565

6666
<!-- the user might start interacting while the attractors are still running, stop that -->
6767
<WhileInteracting>
6868
<!-- Fix will be released soon -->
69-
<Change Target="TheZoomer.IsEnabled" Value="false"/>
70-
<Change Target="TheRotater.IsEnabled" Value="false"/>
71-
<Change Target="ThePanner.IsEnabled" Value="false"/>
69+
<Change Target="theZoomer.IsEnabled" Value="false" />
70+
<Change Target="thePanner.IsEnabled" Value="false" />
71+
<Change Target="theRotater.IsEnabled" Value="false" />
7272
</WhileInteracting>
7373

7474
<!-- A wrapping panel to ensure the InteractiveTransform and layout transforms don't
7575
interfere with each other (it is not supported to have them both on the same node) -->
7676
<Panel>
77-
<ZoomImage ux:Name="TheViewerImage">
78-
<InteractiveTransform ux:Name="TheTransform"/>
77+
<ZoomImage ux:Name="theViewerImage">
78+
<InteractiveTransform ux:Name="theTransform" />
7979
</ZoomImage>
80-
<Timeline ux:Name="ZoomTo">
81-
<Move RelativeTo="PositionOffset" Vector="1" Duration="0.3" ux:Name="ZoomToPos"
82-
Easing="QuadraticInOut"/>
83-
<Resize RelativeTo="Size" Vector="1" Duration="0.3" ux:Name="ZoomToSize"
84-
Easing="QuadraticInOut"/>
80+
<Timeline ux:Name="zoomTo">
81+
<Move ux:Name="zoomToPos" RelativeTo="PositionOffset" Vector="1" Duration="0.3" Easing="QuadraticInOut" />
82+
<Resize ux:Name="zoomToSize" RelativeTo="Size" Vector="1" Duration="0.3" Easing="QuadraticInOut" />
8583
</Timeline>
8684
</Panel>
8785
</Panel>
8886

89-
<ScrollView AllowedScrollDirections="Horizontal" ux:Name="TheScroll">
87+
<ScrollView ux:Name="theScroll" AllowedScrollDirections="Horizontal">
9088
<Panel Margin="7">
91-
<ColumnLayout ColumnSize="100" Orientation="Horizontal" Sizing="Fill"
92-
ColumnSpacing="7" ItemSpacing="7" ux:Name="TheColumns"/>
89+
<ColumnLayout ux:Name="theColumns" ColumnSize="100" Orientation="Horizontal" Sizing="Fill" ColumnSpacing="7" ItemSpacing="7" />
9390

9491
<Each Items="{birds}">
95-
<Panel ux:Name="self">
96-
<Image Source="{DataToResource image}" ux:Name="selfImage"/>
92+
<Panel>
93+
<Image ux:Name="selfImage" File="{image}" />
9794
<Tapped>
98-
<Set Target="TheViewerImage.Source" Value="{DataToResource image}"/>
99-
<Set ViewerVisible.Value="true"/>
95+
<Set Target="theViewerImage.File" Value="{image}" />
96+
<Set viewerVisible.Value="true" />
10097

101-
<Set TheTransform.ZoomFactor="1"/>
102-
<Set TheTransform.Rotation="0"/>
103-
<Set TheTransform.Translation="0"/>
98+
<Set theTransform.ZoomFactor="1" />
99+
<Set theTransform.Rotation="0" />
100+
<Set theTransform.Translation="0" />
104101

105-
<Set ZoomToPos.RelativeNode="selfImage"/>
106-
<Set ZoomToSize.RelativeNode="selfImage"/>
107-
<PulseBackward Target="ZoomTo"/>
102+
<Set zoomToPos.RelativeNode="selfImage" />
103+
<Set zoomToSize.RelativeNode="selfImage" />
104+
<PulseBackward Target="zoomTo" />
108105
</Tapped>
109106
</Panel>
110107
</Each>
@@ -113,19 +110,9 @@
113110
</ScrollView>
114111

115112
<WhileWindowPortrait>
116-
<Change TheScroll.AllowedScrollDirections="Vertical"/>
117-
<Change TheColumns.Orientation="Vertical"/>
113+
<Change theScroll.AllowedScrollDirections="Vertical" />
114+
<Change theColumns.Orientation="Vertical" />
118115
</WhileWindowPortrait>
119116
</ClientPanel>
120117

121-
<!-- a few with different aspect ratios -->
122-
<FileImageSource ux:Key="image0" File="Assets/Unsplash2.jpg"/>
123-
<FileImageSource ux:Key="image1" File="Assets/Unsplash20.jpg"/>
124-
<FileImageSource ux:Key="image2" File="Assets/Unsplash21.jpg"/>
125-
<FileImageSource ux:Key="image3" File="Assets/Unsplash3.jpg"/>
126-
<FileImageSource ux:Key="image4" File="Assets/Unsplash5.jpg"/>
127-
<FileImageSource ux:Key="image5" File="Assets/Unsplash6.jpg"/>
128-
<FileImageSource ux:Key="image6" File="Assets/Unsplash10.jpg"/>
129-
<FileImageSource ux:Key="image7" File="Assets/Unsplash11.jpg"/>
130-
<FileImageSource ux:Key="image8" File="Assets/Unsplash13.jpg"/>
131118
</App>

‎Samples/ImageViewer/README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ This demo creates a simple image viewer that uses `ZoomGesture`, `RotateGesture`
44

55
The central type to these gestures is the `InteractiveTransform`. This contains the values that the gestures will actually be modifying. It also works as an actual transform on the element. The properties of `InteractiveTransform` are two-way bindable and thus can be used in multiple locations and read/written from JavaScript as well (not done in this demo).
66

7-
Beside each gesture we also use an `Attractor`. This allows a fluid animation on the image when it needs to reset it's viewing size. This is used in two places: in the `DoubleTapped` trigger which resets the transform properties; and in the `WhileTrue ux:Name="ViewerVisible`, which resets when leaving the full-screen view.
7+
Beside each gesture we also use an `Attractor`. This allows a fluid animation on the image when it needs to reset it's viewing size. This is used in two places: in the `DoubleTapped` trigger which resets the transform properties; and in the `WhileTrue ux:Name="viewerVisible`, which resets when leaving the full-screen view.
88

99
`WhileFloat` is used to implement a shrink-to-dismiss mechanism. Note the use of `CancelInteractions` here. This is a special action with limited purpose. Here it is used because we know the user will be in the middle of a zooming operation when this trigger applies, thus we need to cancel the active gestures.
1010

1111
A gallery to full-screen animation effect is achieved with the `Timeline` trigger and `PulseBackward` action. Notice the two `Set` actions just prior to the `PulseBackward` which configure the transition.
1212

13-
The `WhileWindowPortrait` adjusts the layout based on the device's orientation. Note the sizing of the images int his demo are targetted towards a phone device -- the layout may appear crowded with a large display area.
13+
The `WhileWindowPortrait` adjusts the layout based on the device's orientation. Note the sizing of the images in this demo are targetted towards a phone device -- the layout may appear crowded with a large display area.

0 commit comments

Comments
 (0)