Make rotation arrow Flex 4-compatible.
authorRichard Fairhurst <richard@systemeD.net>
Mon, 12 Sep 2011 16:37:08 +0000 (17:37 +0100)
committerRichard Fairhurst <richard@systemeD.net>
Mon, 12 Sep 2011 16:37:08 +0000 (17:37 +0100)
Good news: the code is very very simple!
The bad news: the rotated arrow looks like shit, and there's still a border around the button. Fixing this is left as an exercise for the read^H^H^H^Hdeveloper, but I suspect the easiest way will be to Sparkify the whole of Toolbox.mxml (we're going to do it some day anyway...).

embedded/Arrow.fxg [new file with mode: 0644]
net/systemeD/potlatch2/Toolbox.mxml

diff --git a/embedded/Arrow.fxg b/embedded/Arrow.fxg
new file mode 100644 (file)
index 0000000..3391a06
--- /dev/null
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- fxg/comps/ArrowAbsolute.fxg -->
+<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">    
+    <!-- Use Use compact syntax with absolute coordinates. -->
+    <Path data="
+        M 10 1
+               L 18 7
+               L 12 7
+               L 12 20
+               L 8 20
+               L 8 7
+               L 2 7
+               z">
+         <stroke>
+              <SolidColorStroke color="#000000"/>
+         </stroke>
+         <fill>
+              <SolidColor color="#000000"/>
+         </fill>
+    </Path>
+</Graphic>
index 61b5672..504bba8 100644 (file)
@@ -2,16 +2,11 @@
 <mx:Panel
     xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:mx="library://ns.adobe.com/flex/mx"
 <mx:Panel
     xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:mx="library://ns.adobe.com/flex/mx"
+       xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:potlatch2="net.systemeD.potlatch2.*"
        height="76" width="129" layout="absolute"
        styleName="theToolBox">
 
        xmlns:potlatch2="net.systemeD.potlatch2.*"
        height="76" width="129" layout="absolute"
        styleName="theToolBox">
 
-        <fx:Declarations>
-        <!-- the animation effect that controls the rotation of the reverse arrow.
-              We could get more fancy by using previous angle in angleFrom, and a longer duration, to give a nice animated effect -->
-        <mx:Rotate id="rotate" angleFrom="{angle-1}" angleTo="{angle}" target="{arrowBox}" originX="{arrowBox.width/2}" originY="{arrowBox.height/2}" duration="4"/>
-        </fx:Declarations>
-
                <mx:Image data="@Embed('../../../embedded/close_small.png')"
                        includeInLayout="false" id="toolboxClose" click="toggle();" 
                        y="-6" x="115" />
                <mx:Image data="@Embed('../../../embedded/close_small.png')"
                        includeInLayout="false" id="toolboxClose" click="toggle();" 
                        y="-6" x="115" />
                        toolTip="{deleteToolTipText()}" 
                        width="28" height="28" textAlign="left" y="4" x="6" paddingLeft="6" paddingRight="0" />
 
                        toolTip="{deleteToolTipText()}" 
                        width="28" height="28" textAlign="left" y="4" x="6" paddingLeft="6" paddingRight="0" />
 
-        <mx:HBox id="reverseButton" width="28" height="28" y="4" x="36" borderStyle="solid" cornerRadius="4"
-                  click="reverseClicked();" horizontalAlign="center" verticalAlign="middle" toolTip="Reverse direction (V)">
+               <mx:HBox id="reverseButton" width="28" height="28" y="4" x="36" borderStyle="solid" cornerRadius="4"
+                         click="reverseClicked();" horizontalAlign="center" verticalAlign="middle" toolTip="Reverse direction (V)">
             <mx:ViewStack id="rotateButtonStack" creationPolicy="all">
             <mx:ViewStack id="rotateButtonStack" creationPolicy="all">
-                <mx:HBox id="arrowBoxWrapper"><!-- changing the viewstack back onto a rotated hbox causes positioning glitches, hence this wrapper -->
-                    <!-- I can totally recommend adding borderStyle="solid" to arrowBox when debugging -->
-                    <mx:HBox id="arrowBox" horizontalAlign="center" verticalAlign="middle" width="24" height="24" borderStyle="solid" >
-                        <mx:Image id="arrow" source="@Embed('../../../embedded/arrow.svg')"
-                            alpha="{getAlpha('reverseDirection')}"
-                            width="22" height="22"/>
-                    </mx:HBox>
+                <mx:HBox id="arrowBoxWrapper">
+                                       <s:NavigatorContent width="22" height="22">
+                                               <s:Button id="arrow" icon="{Arrow}" width="22" height="22" alpha="{getAlpha('reverseDirection')}" />
+                                       </s:NavigatorContent>
                 </mx:HBox>
                 <mx:HBox id="clockwiseBox" horizontalAlign="center" verticalAlign="middle">
                     <mx:Image id="clockwise" source="@Embed('../../../embedded/clockwise.svg')"
                 </mx:HBox>
                 <mx:HBox id="clockwiseBox" horizontalAlign="center" verticalAlign="middle">
                     <mx:Image id="clockwise" source="@Embed('../../../embedded/clockwise.svg')"
                import net.systemeD.halcyon.connection.actions.*;
                import net.systemeD.potlatch2.controller.*;
                import net.systemeD.potlatch2.tools.*;
                import net.systemeD.halcyon.connection.actions.*;
                import net.systemeD.potlatch2.controller.*;
                import net.systemeD.potlatch2.tools.*;
+               import embedded.*;      // for FXG icons
 
                private var controller:EditController;
 
 
                private var controller:EditController;
 
                         w.clockwise? rotateButtonStack.selectedChild = antiClockwiseBox : rotateButtonStack.selectedChild = clockwiseBox;
                     } else {
                         rotateButtonStack.selectedChild = arrowBoxWrapper;
                         w.clockwise? rotateButtonStack.selectedChild = antiClockwiseBox : rotateButtonStack.selectedChild = clockwiseBox;
                     } else {
                         rotateButtonStack.selectedChild = arrowBoxWrapper;
-                        // reset and reposition back to the starting point relative to its parent
-                        rotate.end();
-                        angle = 0;
-                        rotate.play();
-                        arrowBox.x = 0;
-                        arrowBox.y = 0;
-
-                        // move
-                        rotate.end();
-                        angle = w.angle;
-                        rotate.play();
+                        arrow.iconDisplay.rotation=w.angle;
                     }
                 }
             }
                     }
                 }
             }