🐛 Fixes issues with export

exporter/src/app/http/export.cljs

@@ -95,8 +95,8 @@
 (defn- find-filename-candidate
   [params used]
   (loop [index 0]
-    (let [candidate (str (str/slug (:name params))
+    (let [candidate (str (:name params)
-                         (str/trim (str/blank? (:suffix params "")))
+                         (:suffix params "")
                          (when (pos? index)
                            (str "-" (inc index)))
                          (case (:type params)

exporter/src/app/http/export_bitmap.cljs

@@ -62,8 +62,8 @@
   (p/let [content (screenshot-object browser params)]
     {:content content
      :filename (or (:filename params)
-                   (str (str/slug (:name params))
+                   (str (:name params)
-                        (str/trim (:suffix params ""))
+                        (:suffix params "")
                         (case (:type params)
                           :png ".png"
                           :jpeg ".jpg")))

exporter/src/app/http/export_svg.cljs

@@ -261,8 +261,8 @@
   (p/let [content (render-object browser params)]
     {:content content
      :filename (or (:filename params)
-                   (str (str/slug (:name params))
+                   (str (:name params)
-                        (str/trim (:suffix params ""))
+                        (:suffix params "")
                         ".svg"))
      :length (alength content)
      :mime-type "image/svg+xml"}))

frontend/src/app/main/ui/handoff/attributes/image.cljs

@@ -13,6 +13,7 @@
    [cuerdas.core :as str]
    [app.config :as cfg]
    [app.util.i18n :refer [t]]
+   [app.util.dom :as dom]
    [app.main.ui.icons :as i]
    [app.util.code-gen :as cg]
    [app.main.ui.components.copy-button :refer [copy-button]]))
@@ -20,18 +21,6 @@
 (defn has-image? [shape]
   (and (= (:type shape) :image)))
 
-(defn mtype->extension [mtype]
-  ;; https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types
-  (case mtype
-    "image/apng"    "apng"
-    "image/avif"    "avif"
-    "image/gif"     "gif"
-    "image/jpeg"    "jpg"
-    "image/png"     "png"
-    "image/svg+xml" "svg"
-    "image/webp"    "webp"
-    nil))
-
 (mf/defc image-panel [{:keys [shapes locale]}]
   (let [shapes (->> shapes (filter has-image?))]
     (for [shape shapes]
@@ -52,7 +41,7 @@
 
        (let [mtype (-> shape :metadata :mtype)
              name (:name shape)
-             extension (mtype->extension mtype)]
+             extension (dom/mtype->extension mtype)]
          [:a.download-button {:target "_blank"
                               :download (if extension
                                           (str name "." extension)

frontend/src/app/main/ui/shapes/text.cljs

@@ -115,7 +115,9 @@
   (let [shape     (unchecked-get props "shape")
         grow-type (unchecked-get props "grow-type")
         embed-fonts? (mf/use-ctx muc/embed-ctx)
-        {:keys [id x y width height content]} shape]
+        {:keys [id x y width height content]} shape
+        ;; We add 8px to add a padding for the exporter
+        width (+ width 8)]
     [:foreignObject {:x x
                      :y y
                      :id (:id shape)

frontend/src/app/main/ui/workspace/sidebar/options/exports.cljs

@@ -35,11 +35,15 @@
                       :exports exports}}))
 
 (defn- trigger-download
-  [name blob]
+  [filename blob]
   (let [link (dom/create-element "a")
-        uri  (dom/create-uri blob)]
+        uri  (dom/create-uri blob)
+        extension (dom/mtype->extension (.-type ^js blob))
+        filename (if extension
+                   (str filename "." extension)
+                   filename)]
     (obj/set! link "href" uri)
-    (obj/set! link "download" (str/slug name))
+    (obj/set! link "download" filename)
     (obj/set! (.-style ^js link) "display" "none")
     (.appendChild (.-body ^js js/document) link)
     (.click link)
@@ -51,6 +55,11 @@
         exports  (:exports shape [])
         loading? (mf/use-state false)
 
+        filename (cond-> (:name shape)
+                   (and (= (count exports) 1)
+                        (not (empty (:suffix (first exports)))))
+                   (str (:suffix (first exports))))
+
         on-download
         (mf/use-callback
          (mf/deps shape)
@@ -62,7 +71,7 @@
                  (fn [{:keys [status body] :as response}]
                    (js/console.log status body)
                    (if (= status 200)
-                     (trigger-download (:name shape) body)
+                     (trigger-download filename body)
                      (st/emit! (dm/error (tr "errors.unexpected-error")))))
                  (constantly nil)
                  (fn []

frontend/src/app/util/dom.cljs

@@ -257,3 +257,15 @@
 
 (defn get-data [^js node ^string attr]
   (.getAttribute node (str "data-" attr)))
+
+(defn mtype->extension [mtype]
+  ;; https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types
+  (case mtype
+    "image/apng"    "apng"
+    "image/avif"    "avif"
+    "image/gif"     "gif"
+    "image/jpeg"    "jpg"
+    "image/png"     "png"
+    "image/svg+xml" "svg"
+    "image/webp"    "webp"
+    nil))