better newline support

lib/labelmaker_web/constants.ex

@@ -9,6 +9,7 @@ defmodule LabelmakerWeb.Constants do
     link: "",
     outline: "none",
     size: "72",
+    rows: 2,
     width: ""
   }
 
@@ -75,6 +76,9 @@ defmodule LabelmakerWeb.Constants do
   @max_label_length 1024
   @max_label_error "1024-character maximum"
 
+  @rows_min 2
+  @rows_max 8
+
   @sizes 16..128
          |> Enum.to_list()
          |> Enum.take_every(8)
@@ -101,5 +105,7 @@ defmodule LabelmakerWeb.Constants do
   def permitted_gravity, do: @gravity
   def permitted_keys, do: @permitted_keys
   def preview, do: @preview
+  def rows_min, do: @rows_min
+  def rows_max, do: @rows_max
   def sizes, do: @sizes
 end

lib/labelmaker_web/controllers/label_controller.ex

@@ -87,6 +87,8 @@ defmodule LabelmakerWeb.LabelController do
   defp generate_image(args) do
     File.mkdir_p!(@label_dir)
 
+    # IO.inspect((["magick"] ++ args) |> Enum.join(" "))
+
     {_, 0} = System.cmd("magick", args)
   end
 end

lib/labelmaker_web/live/home.html.heex

@@ -5,17 +5,24 @@
   </p>
 
   <div
-    class={
+    class={"
-          "flex justify-center items-center p-4 overflow-hidden whitespace-nowrap border rounded transition duration-300 #{@preview_background} #{if @label_too_long, do: "border-danger", else: "border-primary"} #{if @label_too_long, do: "outline-danger", else: @outline != "none" && "outline-#{@outline}"}"}
+      flex justify-center items-center p-4 overflow-hidden whitespace-nowrap border rounded transition-all duration-300
-    style={"height: calc(2rem + #{@preview_height}px); color: #{if @label_too_long, do: "white", else: @color}; #{Tools.outline(@outline, @label_too_long)} font-family: #{@font}; font-size: #{@size}px; line-height: #{@size}px; background-color: #{if @preview_background == "", do: @color, else: ""}"}
+      #{@preview_background}
+      #{if @label_too_long, do: "border-danger", else: "border-primary"}
+      #{if @label_too_long, do: "outline-danger", else: @outline != "none" && "outline-#{@outline}"}
+    "}
+    style={"
+      aspect-ratio: 4 / 3;
+      color: #{if @label_too_long, do: "white", else: @color};
+      #{Tools.outline(@outline, @label_too_long)}
+      font-family: #{@font}; font-size: #{@size}px; line-height: #{@size}px;
+      background-color: #{if @preview_background == "", do: @color, else: ""}
+    "}
   >
     <%= if @label_too_long do %>
       {Constants.max_label_error()}
     <% else %>
-      <%= for {str, i} <- Enum.with_index(@preview_text) do %>
+      {raw(@preview_text)}
-        {str}
-        {if i < length(@preview_text) - 1, do: raw("<br />")}
-      <% end %>
     <% end %>
   </div>
   <div class="flex flex-row justify-end" style="margin: 5px 0 -15px;">
@@ -51,18 +58,13 @@
   >
     <div>
       <label for="label" class="block text-sm font-medium">Label</label>
-      <input
+      <textarea
-        phx-hook="EnterToNewline"
-        type="text"
         id="label"
         name="label"
-        value={@label}
+        rows={@rows + 1}
         placeholder="Enter text"
         class={"mt-1 block w-full rounded border border-gray-300 px-3 py-2 text-fg-light dark:text-fg-dark dark:border-gray-600 focus:ring-primary dark:placeholder-gray-400/50 transition duration-300 #{if @label_too_long, do: "bg-danger", else: "bg-secondary-light dark:bg-secondary-dark"}"}
-      />
+      >{@label}</textarea>
-      <p class="text-xs text-gray-600 dark:text-gray-400 m-0 ml-1">
-        <code>\n</code> or &LT;Enter&GT; for newlines
-      </p>
     </div>
 
     <div class="grid grid-cols-1 md:grid-cols-2 gap-4">

lib/labelmaker_web/tools.ex

@@ -12,6 +12,14 @@ defmodule LabelmakerWeb.Tools do
       Constants.defaults()
       |> Map.new(fn {k, v} -> {Atom.to_string(k), v} end)
       |> Map.merge(parameters)
+      |> Enum.map(fn
+        {"label", label} ->
+          {"label", process_label(label)}
+
+        pair ->
+          pair
+      end)
+      |> Map.new()
 
     parameters =
       Constants.defaults()
@@ -29,9 +37,6 @@ defmodule LabelmakerWeb.Tools do
         {:height, height} ->
           {:height, process_height(height, parameters)}
 
-        {:label, label} ->
-          {:label, process_label(label)}
-
         {:label_too_long, _} ->
           {:label_too_long, String.length(parameters["label"]) > Constants.max_label_length()}
 
@@ -39,7 +44,10 @@ defmodule LabelmakerWeb.Tools do
           {:preview_height, calculate_preview_height(parameters)}
 
         {:preview_text, _} ->
-          {:preview_text, String.split(parameters["label"], "\\n")}
+          {:preview_text, generate_preview_text(parameters["label"])}
+
+        {:rows, _} ->
+          {:rows, process_rows(parameters["label"])}
 
         {:width, width} ->
           {:width, process_width(width, parameters)}
@@ -78,11 +86,9 @@ defmodule LabelmakerWeb.Tools do
   end
 
   defp process_label(label) do
-    if String.length(label) > Constants.max_label_length() do
-      String.slice(label, 0, Constants.max_label_length())
-    else
     label
-    end
+    |> String.replace("\\n", "\n")
+    |> String.slice(0, Constants.max_label_length())
   end
 
   defp generate_link(%{height: "", label: label, width: ""} = parameters) do
@@ -93,6 +99,11 @@ defmodule LabelmakerWeb.Tools do
     ~p"/#{label}?#{Map.take(parameters, [:align, :color, :font, :height, :outline, :width])}"
   end
 
+  defp generate_preview_text(label) do
+    label
+    |> String.replace("\n", "<br />")
+  end
+
   def process_preview_background(bg) do
     case bg do
       "r" -> "bg-[linear-gradient(to_right,_black_33%,_white_67%)]"
@@ -114,9 +125,19 @@ defmodule LabelmakerWeb.Tools do
 
   defp calculate_preview_height(parameters) do
     size = parameters["size"] |> String.to_integer()
-    line_breaks = Regex.scan(~r/#{Regex.escape("\\n")}/, parameters["label"]) |> length()
+    rows = calculate_rows(parameters["label"])
 
-    size + size * line_breaks
+    size + size * rows
+  end
+
+  defp calculate_rows(label) do
+    Regex.scan(~r/#{Regex.escape("\n")}/, label) |> length()
+  end
+
+  defp process_rows(label) do
+    calculate_rows(label)
+    |> max(Constants.rows_min())
+    |> min(Constants.rows_max())
   end
 
   def outline(_, error: true), do: outline(Constants.danger(), false)