Rotation and LayoutMaster

Bug Reports
1

Running Fuse 0.30.0 on El Capitan.

I think there are a couple of issues regarding how LayoutAnimations are performed on elements or targets that have been rotated.

Here’s a stripped down version of what I’m trying to achieve, with three issues I’ve found, followed by the code.

I’ve got a pink box for which I’m changing the LayoutMaster expecting the box to move to either the green or purple “targets” as seen below. When I rotate the panel containing the green and purple targets, essentially flipping the two, I’d expect the LayoutMaster change to still recognize the new positions of those targets and move my pink box to the right place.

file

Issue #1

If I rotate the panel containing my green and purple targets, the layout positioning seems to be screwed up (translated by width and height, it seems), as seen below.

file

Issue #2

If I set the LayoutMaster to, say, purple, but then rotate the panel containing my green and purple targets, and then try to set the LayoutMaster to purple (which is now in a different position), it doesn’t seem to recognize that it needs to move. Once I set LayoutMaster to green, things are back on track (with the exception of the positioning issue described above).

file

Issue #3

If I rotate the pink panel and then set the LayoutMaster to green or purple, it seems to move in from off-screen rather than the current location of the panel.

file

Code

Note: I’ve tried with both <Move RelativeTo="WorldPositionChange"... and <Move RelativeTo="LayoutChange"... with the same result.

<App>
  <Panel ux:Class="Button" Padding="5">
    <string ux:Property="Text" />

    <Rectangle Layer="Background" CornerRadius="5">
      <Stroke ux:Name="stroke" Width="1" Color="#000"/>
     </Rectangle>

    <Text Alignment="Center" Value="{Property Text}" />
    <WhilePressed>
      <Change stroke.Color="#f00" Duration="0.2"/>
    </WhilePressed>
  </Panel>

  <Panel>
    <Panel Width="40" Height="40" ux:Name="outpanel" Color="#fab">
      <LayoutAnimation>
        <Move RelativeTo="WorldPositionChange" X="1" Y="1" Duration="0.3" Easing="CubicInOut" />
      </LayoutAnimation>
      <Text Alignment="Center" Value="Test" />
      <Rotation ux:Name="rotation" />
    </Panel>
    <StackPanel>
      <Panel Height="150">
        <Rotation ux:Name="panelRotation" />
        <Panel ux:Name="target1" Margin="50" Width="50" Height="50" Alignment="Left" Background="#5f5" />
        <Panel ux:Name="target2" Margin="50" Width="50" Height="50" Alignment="Right" Background="#55f" />
      </Panel>
      <StackPanel Alignment="Center" ItemSpacing="20" Height="50%" Orientation="Horizontal">

        <StackPanel ItemSpacing="10">
          <Button Text="Green">
            <Clicked>
              <Set outpanel.LayoutMaster="target1" />
            </Clicked>
          </Button>
          <Button Text="Purple">
            <Clicked>
              <Set outpanel.LayoutMaster="target2" />
            </Clicked>
          </Button>
        </StackPanel>

        <StackPanel ItemSpacing="10">
          <Button Text="Rotate Targets">
            <Clicked>
              <Set panelRotation.Degrees="180" />
            </Clicked>
          </Button>
          <Button Text="Rotate Targets Back">
            <Clicked>
              <Set panelRotation.Degrees="0" />
            </Clicked>
          </Button>
        </StackPanel>

        <StackPanel ItemSpacing="10">
          <Button Text="Rotate Panel">
            <Clicked>
              <Set rotation.Degrees="180" />
            </Clicked>
          </Button>
          <Button Text="Rotate Panel Back">
            <Clicked>
              <Set rotation.Degrees="0" />
            </Clicked>
          </Button>
        </StackPanel>

      </StackPanel>
    </StackPanel>
  </Panel>
</App>
2

Thanks for the detailed and clear reproduction. I’ll be having a look at this issue.

3

Getting these types of layouts to work unforuntately requires a fairly good understanding of how the layout system is positioning items. Let me try to explain the issue with the “Rotate Targets” first.

outpanel has no Alignment, thus in this case it’ll end up using TopLeft. It also uses the TopLeft as it’s Anchor. You might wish to specify Anchor explicitly when doing such layouts, to help clarify what is happening.

The targets both have an ActualPosition. This indicates where in their parent they are situation, from the top left corner (always). LayoutMaster will use this location to position outpanel. Note where the top-left corner of those targets are when you rotate the panel! The LayoutMaster is doing as you wanted, positioning the Anchor of outpanel on the ActualPosition of the target.

LayoutMaster was never really designed to deal with rotated setups, as it becomes ambiguous as to what position/width you mean. If you just want this case to start working though, I think it’s possible by using central anchors. Let me do a few tests.

4

No, I’ve changed my mind. LayoutMaster cannot possible account for the rotation. LayoutMaster is responsible for assigning the ActualPosition and ActualSize to an element. It takes these from the ActualPosition and ActualSize of the target element. The transformation is used, but it can only adjust those two values. No other aspect of layout can be modified by a LayoutMaster.

LayoutMaster isn’t the only option though. You can also apply a Translation directly to an element.

<Panel ux:Name="outpanel">
    <Translation RelativeTo="TransformOriginOffset" RelativeNode="target1" Vector="1"/>
</Panel>

That for example positions the outpanel, on it’s TransformOrign at the transform origin of the target1 node. It can account for rotation, but not for size. You can use a Resize transform, or Scale transform to adjust the size to a new target, depending on what you want.

Do you have a concrete use-case that you wish to achieve?

5

edA-qa,

Apologies for leaving this thread open. I thought I had responded already.

The concrete use case that I was trying to achieve was to implement the top controls panel of the iOS stock camera application. The controls rotate to match the orientation of the phone, and each control opens to the left in either portrait orientation (again, dependent on orientation). So I was hoping to just rotate an element and have that element be the LayoutMaster for the opened control menu. (Hopefully that made sense…if not, try selecting ‘HDR’ on the iOS camera app in all four orientations).

Nevertheless, I was able to do it.

  • Full implementation for the UI of the iOS camera app: here
  • Specific way I addressed the issue described in this (non)-bug-report: here

Thanks for helping me through this. You may resolve this bug report as a non-issue.

-Atish