text alignment for widthxheight images

lib/labelmaker_web/constants.ex

@@ -1,8 +1,8 @@
 defmodule LabelmakerWeb.Constants do
   @defaults %{
+    align: "center",
     color: "black",
     font: "Helvetica",
-    align: "center",
     height: "",
     label: "",
     label_too_long: false,

lib/labelmaker_web/controllers/label_controller.ex

@@ -20,8 +20,8 @@ defmodule LabelmakerWeb.LabelController do
 
     unless File.exists?(filepath) do
       basic_settings(options)
-      |> size_settings(options)
       |> outline_settings(options)
+      |> size_settings(options)
       |> final_settings(options)
       |> generate_image()
     end
@@ -51,11 +51,11 @@ defmodule LabelmakerWeb.LabelController do
       ]
   end
 
-  defp size_settings(args, %{align: align, height: height, width: width} = options) do
+  defp size_settings(args, %{align: alignment, height: height, width: width} = options) do
     args ++
       [
         "-gravity",
-        align,
+        Tools.process_gravity(alignment),
         "-size",
         "#{width}x#{height}",
         "caption:#{String.slice(options.label, 0, Constants.max_label_length())}"
@@ -87,9 +87,6 @@ defmodule LabelmakerWeb.LabelController do
   defp generate_image(args) do
     File.mkdir_p!(@label_dir)
 
-    # IO.puts("-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-")
-    # IO.inspect(args)
-
     {_, 0} = System.cmd("magick", args)
   end
 end

lib/labelmaker_web/live/components/radio_component.ex

@@ -1,39 +1,40 @@
 defmodule LabelmakerWeb.RadioComponent do
   use Phoenix.Component
 
-  # props: class, is_dm, settings, options
   attr :class, :string, default: ""
   attr :selected, :string, required: true
   attr :options, :list, required: true
-
+  attr :event_name, :string, required: true
-  # class="mt-1 block w-full rounded border border-gray-300 px-3 py-2 bg-secondary-light text-fg-light dark:bg-secondary-dark dark:text-fg-dark dark:border-gray-600 focus:ring-primary"
 
   def radio_component(assigns) do
     ~H"""
     <fieldset class={["flex flex-col w-full", @class]}>
       <div class="inline-flex overflow-hidden rounded w-full">
         <%= for {option, index} <- Enum.with_index(@options) do %>
-          <label class={[
+          <label
-            "flex justify-center cursor-pointer w-full px-3 py-2
+            for={"radio-#{option}"}
+            class={[
+              "flex justify-center cursor-pointer w-full px-3 py-2
                text-sm font-medium capitalize border border-gray-300
                transition hover:text-primary-dark dark:hover:text-primary-light",
-            if(@selected == option,
+              if(@selected == option,
-              do:
+                do:
-                "bg-selected border-gray-600 dark:bg-selected-dark dark:text-fg-dark dark:border-gray-300 font-bold",
+                  "bg-selected-light border-gray-600 dark:bg-selected-dark dark:text-fg-dark dark:border-gray-300 font-bold",
-              else:
+                else:
-                "bg-secondary-light dark:bg-secondary-dark dark:text-fg-dark dark:border-gray-600 hover:bg-primary-dark hover:bg-primary-light"
+                  "bg-secondary-light dark:bg-secondary-dark dark:text-fg-dark dark:border-gray-600 hover:bg-primary-dark hover:bg-primary-light"
-            ),
+              ),
-            if(index == 0, do: "rounded-l", else: ""),
+              if(index == 0, do: "rounded-l", else: ""),
-            if(index == length(@options) - 1, do: "rounded-r", else: ""),
+              if(index == length(@options) - 1, do: "rounded-r", else: ""),
-            if(index != 0, do: "border-l border-gray-300", else: "")
+              if(index != 0, do: "border-l border-gray-300", else: "")
-          ]}>
+            ]}
+          >
             <input
               type="radio"
-              name="cardStyle"
+              name="radio_option"
-              value={option}
+              id={"radio-#{option}"}
               checked={@selected == option}
-              phx-change="set_card_style"
+              phx-click={@event_name}
-              phx-value-style={option}
+              phx-value-option={option}
               class="sr-only"
             />
             {option}

lib/labelmaker_web/live/home.ex

@@ -19,18 +19,6 @@ defmodule LabelmakerWeb.Home do
     }
   end
 
-  def handle_event("update_preview", %{"bg" => bg}, socket) do
-    preview_background =
-      case bg do
-        "r" -> "bg-[linear-gradient(to_right,_black_33%,_white_67%)]"
-        "b" -> "bg-[linear-gradient(to_bottom,_black_33%,_white_67%)]"
-        "c" -> ""
-        _ -> "bg-[linear-gradient(to_right,_black_33%,_white_67%)]"
-      end
-
-    {:noreply, assign(socket, :preview_background, preview_background)}
-  end
-
   def handle_event("update_label", params, socket) do
     assigns =
       socket.assigns
@@ -43,6 +31,22 @@ defmodule LabelmakerWeb.Home do
     {:noreply, assign(socket, assigns)}
   end
 
+  def handle_event("update_preview", %{"bg" => bg}, socket) do
+    preview_background =
+      case bg do
+        "r" -> "bg-[linear-gradient(to_right,_black_33%,_white_67%)]"
+        "b" -> "bg-[linear-gradient(to_bottom,_black_33%,_white_67%)]"
+        "c" -> ""
+        _ -> "bg-[linear-gradient(to_right,_black_33%,_white_67%)]"
+      end
+
+    {:noreply, assign(socket, :preview_background, preview_background)}
+  end
+
+  def handle_event("update_alignment", %{"option" => option}, socket) do
+    {:noreply, assign(socket, :align, option)}
+  end
+
   def handle_event("make_label", params, socket) do
     {:noreply, redirect(socket, to: ~p"/#{params["label"]}?#{Map.drop(params, ["label"])}")}
   end

lib/labelmaker_web/live/home.html.heex

@@ -149,12 +149,16 @@
       </div>
     </div>
 
-    <.radio_component options={Constants.permitted_alignments()} selected={@align} />
+    <.radio_component
+      options={Constants.permitted_alignments()}
+      selected={@align}
+      event_name="update_alignment"
+    />
   </form>
 
   <div class="text-center">
     <a href={@link}>
-      <button class="inline-block bg-primary text-fg-light dark:text-fg-dark px-4 py-2 rounded hover:bg-highlight focus:ring-fg-light focus:dark:ring-fg-dark">
+      <button class="inline-block bg-primary text-fg-light px-4 py-2 rounded hover:bg-highlight focus:ring-fg-light focus:dark:ring-fg-dark">
         Create
       </button>
     </a>

lib/labelmaker_web/tools.ex

@@ -21,7 +21,7 @@ defmodule LabelmakerWeb.Tools do
       |> Map.new(fn {k, v} -> {String.to_atom(k), v} end)
       |> Enum.map(fn
         {:align, align} ->
-          {:align, process_alignment(align |> String.downcase())}
+          {:align, align |> String.downcase()}
 
         {:font, font} ->
           {:font, Constants.font_map()[String.downcase(font)]}
@@ -35,9 +35,6 @@ defmodule LabelmakerWeb.Tools do
         {:label_too_long, _} ->
           {:label_too_long, String.length(parameters["label"]) > Constants.max_label_length()}
 
-        {:link, _} ->
-          {:link, generate_link(parameters)}
-
         {:preview_height, _} ->
           {:preview_height, calculate_preview_height(parameters)}
 
@@ -51,7 +48,7 @@ defmodule LabelmakerWeb.Tools do
           pair
       end)
       |> Enum.filter(fn
-        {:align, align} -> align in Constants.permitted_gravity()
+        {:align, align} -> align in Constants.permitted_alignments()
         {:color, color} -> color in Constants.colors()
         {:font, font} -> font in Map.values(Constants.font_map())
         {:outline, outline} -> outline in Constants.outlines()
@@ -60,17 +57,21 @@ defmodule LabelmakerWeb.Tools do
       end)
       |> Map.new()
 
-    Map.merge(Constants.defaults(), parameters)
+    parameters = Map.merge(Constants.defaults(), parameters)
+
+    Map.put(parameters, :link, generate_link(parameters))
   end
 
-  defp process_alignment("left"), do: "west"
+  def process_gravity("left"), do: "west"
-  defp process_alignment("middle"), do: "center"
+  def process_gravity("middle"), do: "center"
-  defp process_alignment("right"), do: "east"
+  def process_gravity("right"), do: "east"
-  defp process_alignment(alignment), do: alignment |> String.downcase()
+  def process_gravity(alignment), do: alignment |> String.downcase()
 
-  defp process_height("", parameters) do
+  defp process_height("", _parameters), do: ""
-    parameters["width"] |> String.to_integer() |> max(0) |> min(Constants.max_height())
+
-  end
+  # defp process_height("", parameters) do
+  #   parameters["width"] |> String.to_integer() |> max(0) |> min(Constants.max_height())
+  # end
 
   defp process_height(height, _parameters) do
     height |> String.to_integer() |> max(0) |> min(Constants.max_height())
@@ -84,17 +85,19 @@ defmodule LabelmakerWeb.Tools do
     end
   end
 
-  defp generate_link(%{"height" => "", "label" => label, "width" => ""} = parameters) do
+  defp generate_link(%{height: "", label: label, width: ""} = parameters) do
-    ~p"/#{label}?#{Map.take(parameters, ["color", "font", "outline", "size"])}"
+    ~p"/#{label}?#{Map.take(parameters, [:color, :font, :outline, :size])}"
   end
 
-  defp generate_link(%{"label" => label} = parameters) do
+  defp generate_link(%{label: label} = parameters) do
-    ~p"/#{label}?#{Map.take(parameters, ["color", "font", "height", "outline", "width"])}"
+    ~p"/#{label}?#{Map.take(parameters, [:align, :color, :font, :height, :outline, :width])}"
   end
 
-  defp process_width("", parameters) do
+  defp process_width("", _parameters), do: ""
-    parameters["height"] |> String.to_integer() |> max(0) |> min(Constants.max_width())
+
-  end
+  # defp process_width("", parameters) do
+  #   parameters["height"] |> String.to_integer() |> max(0) |> min(Constants.max_width())
+  # end
 
   defp process_width(width, _parameters) do
     width |> String.to_integer() |> max(0) |> min(Constants.max_width())