Merge pull request #1072 from penpot/import-export-improvements

Import export improvements

CHANGES.md

@@ -11,6 +11,7 @@
 - Headers button sets and menus review [Taiga #1663](https://tree.taiga.io/project/penpot/us/1663).
 - Preserve components if possible, when pasted into a different file [Taiga #1063](https://tree.taiga.io/project/penpot/issue/1063).
 - Add the ability to offload file data to a cheaper storage when file becomes inactive.
+- Import/Export Penpot files from dashboard.
 
 ### :bug: Bugs fixed
 

backend/src/app/migrations/sql/0062-fix-metadata-media.sql

@@ -0,0 +1,8 @@
+-- Fix problem with content-type inconherence
+
+UPDATE storage_object so
+SET metadata = jsonb_set(metadata, '{~:content-type}', to_jsonb(fmo.mtype))
+FROM file_media_object fmo
+WHERE so.id = fmo.media_id and
+      so.metadata->>'~:content-type' != fmo.mtype;
+

common/src/app/common/file_builder.cljc

@@ -393,6 +393,7 @@
 
   (let [selrect init/empty-selrect
         name (:name data)
+        path (:path data)
         obj (-> (init/make-minimal-group nil selrect name)
                 (merge data)
                 (check-name file :group)
@@ -402,6 +403,7 @@
          {:type :add-component
           :id (:id obj)
           :name name
+          :path path
           :shapes [obj]})
 
         (assoc :last-id (:id obj))

frontend/src/app/main/exports.cljs

@@ -247,7 +247,7 @@
 (mf/defc component-symbol
   [{:keys [id data] :as props}]
 
-  (let [{:keys [name objects]} data
+  (let [{:keys [name path objects]} data
         root (get objects id)
 
         {:keys [width height]} (:selrect root)
@@ -267,8 +267,9 @@
          (mf/deps objects)
          #(group-wrapper-factory objects))]
 
-    [:symbol {:id (str id)
-              :viewBox vbox}
+    [:> "symbol" #js {:id (str id)
+                      :viewBox vbox
+                      "penpot:path" path}
      [:title name]
      [:> shape-container {:shape root}
       [:& group-wrapper {:shape root :view-box vbox}]]]))

frontend/src/app/main/ui/dashboard/import.cljs

@@ -22,6 +22,8 @@
 
 (log/set-level! :debug)
 
+(def ^:const emit-delay 1000)
+
 (defn use-import-file
   [project-id on-finish-import]
   (mf/use-callback
@@ -201,7 +203,7 @@
            (->> (uw/ask-many!
                  {:cmd :analyze-import
                   :files (->> files (mapv :uri))})
-                (rx/delay-emit 1000)
+                (rx/delay-emit emit-delay)
                 (rx/subs
                  (fn [{:keys [uri data error] :as msg}]
                    (log/debug :msg msg)
@@ -216,7 +218,7 @@
                  {:cmd :import-files
                   :project-id project-id
                   :files files})
-                (rx/delay-emit 1000)
+                (rx/delay-emit emit-delay)
                 (rx/subs
                  (fn [{:keys [file-id status] :as msg}]
                    (log/debug :msg msg)

frontend/src/app/main/ui/workspace/header.cljs

@@ -236,13 +236,13 @@
          [:li {:on-click on-add-shared}
           [:span (tr "dashboard.add-shared")]])
 
+       [:li.export-file {:on-click on-export-files}
+        [:span (tr "dashboard.export-single")]]
+
        (when cfg/feedback-enabled
          [:li.feedback {:on-click (st/emitf (rt/nav :settings-feedback))}
           [:span (tr "labels.give-feedback")]
           [:span.primary-badge "ALPHA"]])
-
-       [:li.export-file {:on-click on-export-files}
-        [:span (tr "dashboard.export-single")]]
        ]]]))
 
 ;; --- Header Component

frontend/src/app/util/import/parser.cljs

@@ -73,8 +73,10 @@
 
 (defn get-id
   [node]
-  (when-let [id (re-find uuid-regex (get-in node [:attrs :id]))]
-    (uuid/uuid id)))
+  (let [attr-id (get-in node [:attrs :id])
+        id (when (string? attr-id) (re-find uuid-regex attr-id))]
+    (when (some? id)
+      (uuid/uuid id))))
 
 (defn str->bool
   [val]

frontend/src/app/worker/export.cljs

@@ -82,14 +82,14 @@
                      [(-> k str/camel) v]))))))
 
 (def ^:const color-keys
-  [:name :color :opacity :gradient])
+  [:name :color :opacity :gradient :path])
 
 (def ^:const typography-keys
   [:name :font-family :font-id :font-size :font-style :font-variant-id :font-weight
-   :letter-spacing :line-height :text-transform])
+   :letter-spacing :line-height :text-transform :path])
 
 (def ^:const media-keys
-  [:name :mtype :width :height])
+  [:name :mtype :width :height :path])
 
 (defn collect-color
   [result color]

frontend/src/app/worker/import.cljs

@@ -21,7 +21,10 @@
    [app.worker.impl :as impl]
    [beicon.core :as rx]
    [cuerdas.core :as str]
-   [tubax.core :as tubax]))
+   [tubax.core :as tubax]
+   [app.util.logging :as log]))
+
+(log/set-level! :trace)
 
 ;; Upload changes batches size
 (def change-batch-size 100)
@@ -46,20 +49,23 @@
                                 (str file-id "/media/" id "." ext))
                 :components   (str file-id "/components.svg"))
 
-         svg?    (str/ends-with? path "svg")
-         json?   (str/ends-with? path "json")
-         other?  (not (or svg? json?))
+         parse-svg?  (and (not= type :media) (str/ends-with? path "svg"))
+         parse-json? (and (not= type :media) (str/ends-with? path "json"))
+         no-parse?   (or (= type :media)
+                         (not (or parse-svg? parse-json?)))
 
-         file-type (if other? "blob" "text")]
+         file-type (if (or parse-svg? parse-json?) "text" "blob")]
+
+     (log/debug :action "parsing" :path path)
 
      (cond->> (uz/get-file (:zip context) path file-type)
-       svg?
+       parse-svg?
        (rx/map (comp tubax/xml->clj :content))
 
-       json?
+       parse-json?
        (rx/map (comp json/decode :content))
 
-       other?
+       no-parse?
        (rx/map :content)))))
 
 (defn resolve-factory
@@ -138,6 +144,9 @@
 (defn upload-media-files
   "Upload a image to the backend and returns its id"
   [file-id name data-uri]
+
+  (log/debug :action "uploading" :file-id file-id :name name)
+
   (->> (http/send!
         {:uri data-uri
          :response-type :blob
@@ -156,11 +165,18 @@
     (->> node
          (ct/transform-nodes
           (fn [item]
-            (-> item
-                (d/update-when :fill-color-ref-id resolve)
-                (d/update-when :fill-color-ref-file resolve)
-                (d/update-when :typography-ref-id resolve)
-                (d/update-when :typography-ref-file resolve)))))))
+            (cond-> item
+              (uuid? (get item :fill-color-ref-id))
+              (d/update-when :fill-color-ref-id resolve)
+
+              (uuid? (get item :fill-color-ref-file))
+              (d/update-when :fill-color-ref-file resolve)
+
+              (uuid? (get item :typography-ref-id))
+              (d/update-when :typography-ref-id resolve)
+
+              (uuid? (get item :typography-ref-file))
+              (d/update-when :typography-ref-file resolve)))))))
 
 (defn resolve-data-ids
   [data type context]
@@ -273,7 +289,9 @@
         file-id      (:id file)
         old-id       (cip/get-id node)
         id           (resolve old-id)
+        path         (get-in node [:attrs :penpot:path] "")
         data         (-> (cip/parse-data :group content)
+                         (assoc :path path)
                          (assoc :id id))
 
         file         (-> file (fb/start-component data))