Add key explain what IterFrame controls do

This is pretty basic. Eventually it would be nice to come up with some
fancy SVG icons, but for now having some labels is better than hoping
people will click around and just understand.

The key uses the same rendering code as the actual component, so it
should be relatively easy to keep in sync. It only shows when the frame
display is enabled.

public/style.css

@@ -6,6 +6,11 @@ h1 {
     margin-left: 2rem;
 }
 
+.command-label {
+    margin-top: 1.5rem;
+    margin-bottom: 0.5rem;
+}
+
 button {
     font-family: 'Nunito', sans-serif;
     font-size: 1rem;

src/Command.elm

@@ -6,8 +6,11 @@ module Command exposing (
     )
 
 import Html.Styled as HS
+import Html.Styled.Attributes as HSA
+import Css
 import List
 import Maybe
+import Svg.Styled as S
 
 import Space
 import Space.Content as Content
@@ -20,6 +23,7 @@ import Command.Components exposing (
       , toggle
       , choice
       , textButtonGroup
+      , commandLabel
     )
 
 {-| Interactions with the command controls outside the drawing space -}
@@ -54,6 +58,7 @@ viewBar {iterMode, baseContents}
             { incrementerDefaults | label = "# iteration frames" , min = Just 0}
             ChangeNumIterFrames
             (Content.numIterFrames baseContents)
+        ++ iterFrameKey iterMode.showIterFrames
 
 layerVisibilityControls : List (HS.Html Message)
 layerVisibilityControls
@@ -119,3 +124,25 @@ getIterFrameIDtoDrop {baseContents}
 getNewIterFrameID : Space.Model -> ID.TreeID
 getNewIterFrameID {baseContents}
     = ID.Trunk <| "f" ++ String.fromInt (1 + Content.numIterFrames baseContents)
+
+iterFrameKey
+    : Bool
+   -> List (HS.Html msg)
+iterFrameKey showIterFrames
+    = if showIterFrames
+        then
+        [
+            commandLabel "iteration frame controls"
+          , S.svg
+                [
+                    HSA.css
+                        [
+                            Css.marginLeft (Css.px 16)
+                          , Css.marginRight (Css.px 16)
+                        ]
+                ]
+                [
+                    IterFrame.showKey
+                ]
+        ]
+        else []

src/Command/Components.elm

@@ -1,6 +1,7 @@
 {- Visual components for controlling configuration -}
 module Command.Components exposing (
-        incrementer
+        commandLabel
+      , incrementer
       , IncrementerSettings
       , incrementerDefaults
       , toggle
@@ -15,6 +16,12 @@ import List
 import String
 import Css
 
+{-| Common heading for command controls -}
+commandLabel : String -> HS.Html msg
+commandLabel text =
+    HS.h4 
+        [ HSA.class "command-label" ]
+        [ HS.text text ]
 
 incrementer
     : IncrementerSettings        {- configuration -}
@@ -23,7 +30,7 @@ incrementer
    -> List (HS.Html msg)
 incrementer settings sendIncrement current
     = [
-        HS.h4 [] [HS.text settings.label]
+        commandLabel settings.label
       , HS.span [] [
             HS.button
                 (
@@ -99,7 +106,7 @@ toggle label sendToggle current
             = if current then "on" else "off"
     in
     [
-        HS.h4 [] [HS.text label]
+        commandLabel label
       , HS.button [HSE.onClick sendToggle, pressed, style] [HS.text labelText]
     ]
 
@@ -110,7 +117,7 @@ choice
    -> List (HS.Html msg)
 choice label choices
     = [
-        HS.h4 [] [HS.text label]
+        commandLabel label
       , HS.select []
             <| List.map
                 (\(choiceText, msg) ->
@@ -127,7 +134,7 @@ textButtonGroup
 textButtonGroup header buttons
     = [
         HS.div [ HSA.css [Css.marginTop (Css.px 10)] ]
-            ( HS.h4 [] [ HS.text header ]
+            (commandLabel header
                 :: List.map
                     (\(label, msg) ->
                         HS.button

src/Space/IterFrame.elm

@@ -1,6 +1,7 @@
 module Space.IterFrame exposing (
         Def
       , show
+      , showKey
       , Mode
       , initMode
       , iterateShapes
@@ -102,6 +103,23 @@ showSkewHandle frameDef ifDef atts
         (atts ++ [SA.fill "magenta"])
         (G.Circle (cornerPoint frameDef ifDef G.BottomLeftCorner) 12)
 
+{-| Show a simple IterFrame to serve as a key explaining the IterFrame controls. -}
+showKey
+    : S.Svg msg
+showKey
+    = S.g []
+        [
+            show
+                (Frame.Rectangle 36 36)
+                (\_ -> [])
+                {identityDef | offset = G.disp 62 50}
+          , S.text_ [SA.x "0", SA.y "10"] [S.text "move"]
+          , S.text_ [SA.x "84", SA.y "10"] [S.text "spin"]
+          , S.text_ [SA.x "0", SA.y "96"] [S.text "skew"]
+          , S.text_ [SA.x "84", SA.y "96"] [S.text "scale"]
+        ]
+
+
 getTransform : Def -> G.Transform
 getTransform d = G.makeAffineTransform d.xBasis d.yBasis d.offset