✨ Import components

common/src/app/common/file_builder.cljc

@@ -265,7 +265,11 @@
               :id group-id
               :operations
               [{:type :set :attr :selrect :val (:selrect group')}
-               {:type :set :attr :points  :val (:points group')}]}
+               {:type :set :attr :points  :val (:points group')}
+               {:type :set :attr :x       :val (-> group' :selrect :x)}
+               {:type :set :attr :y       :val (-> group' :selrect :y)}
+               {:type :set :attr :width   :val (-> group' :selrect :width)}
+               {:type :set :attr :height  :val (-> group' :selrect :height)}]}
 
              {:add-container? true})))]
 
@@ -442,7 +446,11 @@
               :id component-id
               :operations
               [{:type :set :attr :selrect :val (:selrect component')}
-               {:type :set :attr :points  :val (:points component')}]}
+               {:type :set :attr :points  :val (:points component')}
+               {:type :set :attr :x      :val (-> component' :selrect :x)}
+               {:type :set :attr :y      :val (-> component' :selrect :y)}
+               {:type :set :attr :width  :val (-> component' :selrect :width)}
+               {:type :set :attr :height :val (-> component' :selrect :height)}]}
 
              {:add-container? true})))]
 

frontend/src/app/main/data/dashboard.cljs

@@ -40,7 +40,6 @@
   (s/keys :req-un [::id
                    ::name
                    ::team-id
-                   ::profile-id
                    ::created-at
                    ::modified-at
                    ::is-pinned]))

frontend/src/app/main/exports.cljs

@@ -74,11 +74,10 @@
     (mf/fnc group-wrapper
       [{:keys [shape frame] :as props}]
       (let [childs (mapv #(get objects %) (:shapes shape))]
-        [:& shape-container {:shape shape}
         [:& group-shape {:frame frame
                          :shape shape
                          :is-child-selected? true
-                          :childs childs}]]))))
+                         :childs childs}]))))
 
 (defn svg-raw-wrapper-factory
   [objects]
@@ -87,7 +86,9 @@
     (mf/fnc svg-raw-wrapper
       [{:keys [shape frame] :as props}]
       (let [childs (mapv #(get objects %) (:shapes shape))]
-        (if (and (contains? shape :svg-attrs) (map? (:content shape)))
+        (if (and (contains? shape :svg-attrs)
+                 (map? (:content shape))
+                 (not= :svg (get-in shape [:content :tag])))
           [:> shape-container {:shape shape}
            [:& svg-raw-shape {:frame frame
                               :shape shape
@@ -108,9 +109,8 @@
         (let [shape (-> (gsh/transform-shape shape)
                         (gsh/translate-to-frame frame))
               opts #js {:shape shape}
-              svg-element? (and (= :svg-raw (:type shape))
+              svg-raw? (= :svg-raw (:type shape))]
-                                (not= :svg (get-in shape [:content :tag])))]
+          (if-not svg-raw?
-          (if-not svg-element?
             [:> shape-container {:shape shape}
              (case (:type shape)
                :text    [:> text/text-shape opts]
@@ -120,7 +120,6 @@
                :circle  [:> circle/circle-shape opts]
                :frame   [:> frame-wrapper {:shape shape}]
                :group   [:> group-wrapper {:shape shape :frame frame}]
-               :svg-raw [:> svg-raw-wrapper {:shape shape :frame frame}]
                nil)]
 
             ;; Don't wrap svg elements inside a <g> otherwise some can break
@@ -271,7 +270,8 @@
     [:symbol {:id (str id)
               :viewBox vbox}
      [:title name]
-     [:& group-wrapper {:shape root :view-box vbox}]]))
+     [:> shape-container {:shape root}
+      [:& group-wrapper {:shape root :view-box vbox}]]]))
 
 (mf/defc components-sprite-svg
   {::mf/wrap-props false}

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

@@ -173,6 +173,10 @@
              (map #(:attrs %))
              (reduce add-attrs node-attrs)))
 
+      (= type :frame)
+      (let [svg-node (->> node :content (d/seek #(= "frame-background" (get-in % [:attrs :class]))))]
+        (merge (add-attrs {} (:attrs svg-node)) node-attrs))
+
       (= type :svg-raw)
       (->> node :content last)
 

frontend/src/app/worker/import.cljs

@@ -18,7 +18,6 @@
    [app.util.zip :as uz]
    [app.worker.impl :as impl]
    [beicon.core :as rx]
-   [cuerdas.core :as str]
    [tubax.core :as tubax]))
 
 ;; Upload changes batches size
@@ -141,10 +140,17 @@
         (dissoc :id-mapping :interactions))))
 
 (defn merge-reduce [f seed ob]
+  (let [current-acc (atom seed)]
     (->> (rx/concat
           (rx/of seed)
-        (rx/merge-scan f seed ob))
+          (->> ob
-       (rx/last)))
+               (rx/mapcat #(f @current-acc %))
+               (rx/tap #(reset! current-acc %))))
+         (rx/last))))
+
+(defn skip-last
+  [n ob]
+  (.pipe ob (.skipLast js/rxjsOperators (int n))))
 
 (defn resolve-media
   [file-id node]
@@ -233,7 +239,6 @@
 
 (defn process-library-media
   [file file-id file-desc zip]
-  (rx/of file)
   (if (:has-media file-desc)
     (let [add-media
           (fn [file media]
@@ -263,9 +268,32 @@
 
     (rx/of file)))
 
+(defn add-component [file content]
+  (let [content      (cip/find-node content :g)
+        data         (cip/parse-data :group content)
+        file         (-> file (fb/start-component data))
+        id           (-> (get-in content [:attrs :id]) (uuid/uuid))
+        component-id (:last-id file)
+        file         (assoc file [:library-mapping id] component-id)
+        nodes        (cip/node-seq content)]
+
+    (->> (rx/from nodes)
+         (rx/filter cip/shape?)
+         (rx/skip 1)
+         (skip-last 1)
+         (rx/mapcat (partial resolve-media (:id file)))
+         (rx/reduce add-shape-file file)
+         (rx/map #(fb/finish-component %)))))
+
 (defn process-library-components
   [file file-id file-desc zip]
-  (rx/of file))
+  (if (:has-components file-desc)
+    (let [path (str (d/name file-id) "/components.svg")]
+      (->> (uz/get-file zip path)
+           (rx/map (comp tubax/xml->clj :content))
+           (rx/flat-map (fn [content] (->> (cip/node-seq content) (filter #(= :symbol (:tag %))))))
+           (merge-reduce add-component file)))
+    (rx/of file)))
 
 (defn process-file
   [file file-id file-desc zip]