add the :direction option to the Dropdown component

Author: boydm

changelist.md

@@ -11,6 +11,7 @@
   an inconsistency where sometimes the incoming point would be in local coordinate
   space and sometimes it would be global. If you want to capture that sort of input, either
   cover the space with a clear rect, or capture the input.
+* Add the `:direction` option to the `Dropdown` component so can can go either up or down.
 
 ### 0.7.0
 * First public release

lib/scenic/component/input/dropdown.ex

@@ -15,19 +15,22 @@ defmodule Scenic.Component.Input.Dropdown do
 
   @default_width 160
   @default_height 30
+  @default_direction :down
 
   @default_font :roboto
   @default_font_size 20
 
   @drop_click_window_ms 400
 
-  @carat {{0, 0}, {12, 0}, {6, 6}}
+  @caret {{0, 0}, {12, 0}, {6, 6}}
   @text_id :__dropbox_text__
-  @carat_id :__carat__
+  @caret_id :__caret__
   @dropbox_id :__dropbox__
   @button_id :__dropbox_btn__
 
-  @rad :math.pi() / 2
+  @rotate_neutral :math.pi() / 2
+  @rotate_down 0
+  @rotate_up :math.pi()
 
   # --------------------------------------------------------
   def info(data) do
@@ -83,6 +86,21 @@ defmodule Scenic.Component.Input.Dropdown do
     item_count = Enum.count(items)
     drop_height = item_count * height
 
+    # get the drop direction
+    direction = styles[:direction] || @default_direction
+
+    # calculate the where to put the drop box. Depends on the direction
+    translate_menu = case direction do
+      :down -> {0, height + 1}
+      :up -> {0, height * -item_count - 1}
+    end
+
+    # get the direction to rotate the caret
+    rotate_caret = case direction do
+      :down -> @rotate_down
+      :up -> -@rotate_up
+    end
+
     graph =
       Graph.build(font: font, font_size: font_size)
       |> rect({width, height}, fill: theme.background, stroke: {2, theme.border})
@@ -92,12 +110,12 @@ defmodule Scenic.Component.Input.Dropdown do
         text_align: :left,
         id: @text_id
       )
-      |> triangle(@carat,
+      |> triangle(@caret,
         fill: theme.text,
         translate: {width - 18, height * 0.5},
         pin: {6, 0},
-        rotate: @rad,
-        id: @carat_id
+        rotate: @rotate_neutral,
+        id: @caret_id
       )
 
       # an invisible rect for hit-test purposes
@@ -132,7 +150,7 @@ defmodule Scenic.Component.Input.Dropdown do
 
           g
         end,
-        translate: {0, height + 1},
+        translate: translate_menu,
         id: @dropbox_id,
         hidden: true
       )
@@ -145,7 +163,8 @@ defmodule Scenic.Component.Input.Dropdown do
       down: false,
       hover_id: nil,
       items: items,
-      drop_time: 0
+      drop_time: 0,
+      rotate_caret: rotate_caret
     }
 
     push_graph(graph)
@@ -170,15 +189,15 @@ defmodule Scenic.Component.Input.Dropdown do
   def handle_input(
         {:cursor_button, {:left, :press, _, _}},
         %{id: @button_id} = context,
-        %{down: false, graph: graph} = state
+        %{down: false, graph: graph, rotate_caret: rotate_caret } = state
       ) do
     # capture input
     ViewPort.capture_input(context, [:cursor_button, :cursor_pos])
 
     # drop the menu
     graph =
       graph
-      |> Graph.modify(@carat_id, &update_opts(&1, rotate: 0))
+      |> Graph.modify(@caret_id, &update_opts(&1, rotate: rotate_caret))
       |> Graph.modify(@dropbox_id, &update_opts(&1, hidden: false))
       |> push_graph()
 
@@ -228,7 +247,12 @@ defmodule Scenic.Component.Input.Dropdown do
   def handle_input(
         {:cursor_button, {:left, :press, _, _}},
         %{id: nil} = context,
-        %{down: true, items: items, theme: theme, selected_id: selected_id} = state
+        %{
+          down: true,
+          items: items,
+          theme: theme,
+          selected_id: selected_id
+        } = state
       ) do
     # release the input capture
     ViewPort.release_input(context, [:cursor_button, :cursor_pos])
@@ -238,7 +262,7 @@ defmodule Scenic.Component.Input.Dropdown do
       # restore standard highliting
       |> update_highlighting(items, selected_id, nil, theme)
       # raise the dropdown
-      |> Graph.modify(@carat_id, &update_opts(&1, rotate: @rad))
+      |> Graph.modify(@caret_id, &update_opts(&1, rotate: @rotate_neutral))
       |> Graph.modify(@dropbox_id, &update_opts(&1, hidden: true))
       # push to the viewport
       |> push_graph()
@@ -268,7 +292,7 @@ defmodule Scenic.Component.Input.Dropdown do
       graph =
         graph
         |> update_highlighting(items, selected_id, nil, theme)
-        |> Graph.modify(@carat_id, &update_opts(&1, rotate: @rad))
+        |> Graph.modify(@caret_id, &update_opts(&1, rotate: @rotate_neutral))
         |> Graph.modify(@dropbox_id, &update_opts(&1, hidden: true))
         |> push_graph()
 
@@ -284,7 +308,12 @@ defmodule Scenic.Component.Input.Dropdown do
   def handle_input(
         {:cursor_button, {:left, :release, _, _}},
         %{id: nil} = context,
-        %{down: true, items: items, theme: theme, selected_id: selected_id} = state
+        %{
+          down: true,
+          items: items,
+          theme: theme,
+          selected_id: selected_id
+        } = state
       ) do
     # release the input capture
     ViewPort.release_input(context, [:cursor_button, :cursor_pos])
@@ -294,7 +323,7 @@ defmodule Scenic.Component.Input.Dropdown do
       # restore standard highliting
       |> update_highlighting(items, selected_id, nil, theme)
       # raise the dropdown
-      |> Graph.modify(@carat_id, &update_opts(&1, rotate: @rad))
+      |> Graph.modify(@caret_id, &update_opts(&1, rotate: @rotate_neutral))
       |> Graph.modify(@dropbox_id, &update_opts(&1, hidden: true))
       # push to the viewport
       |> push_graph()
@@ -307,7 +336,12 @@ defmodule Scenic.Component.Input.Dropdown do
   def handle_input(
         {:cursor_button, {:left, :release, _, _}},
         %{id: item_id} = context,
-        %{down: true, id: id, items: items, theme: theme} = state
+        %{
+          down: true,
+          id: id,
+          items: items,
+          theme: theme
+        } = state
       ) do
     # release the input capture
     ViewPort.release_input(context, [:cursor_button, :cursor_pos])
@@ -325,7 +359,7 @@ defmodule Scenic.Component.Input.Dropdown do
       # restore standard highliting
       |> update_highlighting(items, item_id, nil, theme)
       # raise the dropdown
-      |> Graph.modify(@carat_id, &update_opts(&1, rotate: @rad))
+      |> Graph.modify(@caret_id, &update_opts(&1, rotate: @rotate_neutral))
       |> Graph.modify(@dropbox_id, &update_opts(&1, hidden: true))
       # push to the viewport
       |> push_graph()

lib/scenic/components.ex

@@ -293,6 +293,7 @@ defmodule Scenic.Components do
   Buttons honor the following list of additional styles.
   * `:width` - pass in a number to set the width of the button.
   * `:height` - pass in a number to set the height of the button.
+  * `:direction` - what direction should the menu drop. Can be either `:down` or `:up`. The default is `:down`.
 
   ## Theme