Merge pull request #2614 from penpot/superalex-support-library-colors-on-library-build

🎉 Add support assets management via library

common/src/app/common/file_builder.cljc

@@ -498,15 +498,30 @@
 
 (defn add-library-color
   [file color]
-
   (let [id (or (:id color) (uuid/next))]
     (-> file
         (commit-change
          {:type :add-color
-          :id id
           :color (assoc color :id id)})
         (assoc :last-id id))))
 
+(defn update-library-color
+  [file color]
+  (let [id (uuid/uuid (:id color))]
+    (-> file
+        (commit-change
+         {:type :mod-color
+          :color (assoc color :id id)})
+        (assoc :last-id (:id color)))))
+
+(defn delete-library-color
+  [file color-id]
+  (let [id (uuid/uuid color-id)]
+    (-> file
+        (commit-change
+         {:type :del-color
+          :id id}))))
+
 (defn add-library-typography
   [file typography]
   (let [id (or (:id typography) (uuid/next))]
@@ -517,6 +532,14 @@
           :typography (assoc typography :id id)})
         (assoc :last-id id))))
 
+(defn delete-library-typography
+  [file typography-id]
+  (let [id (uuid/uuid typography-id)]
+    (-> file
+        (commit-change
+         {:type :del-typography
+          :id id}))))
+
 (defn add-library-media
   [file media]
   (let [id (or (:id media) (uuid/next))]
@@ -526,6 +549,14 @@
           :object (assoc media :id id)})
         (assoc :last-id id))))
 
+(defn delete-library-media
+  [file media-id]
+  (let [id (uuid/uuid media-id)]
+    (-> file
+        (commit-change
+         {:type :del-media
+          :id id}))))
+
 (defn start-component
   [file data]
 
@@ -646,6 +677,40 @@
               shapes)
       (dissoc $ :current-component-id))))
 
+(defn create-component-instance
+  [file data]
+  (let [component-id     (uuid/uuid (:component-id data))
+        x                (:x data)
+        y                (:y data)
+        file             (assoc file :current-component-id component-id)
+        page-id          (:current-page-id file)
+        page             (ctpl/get-page (:data file) page-id)
+        component        (ctkl/get-component (:data file) component-id)
+        ;; main-instance-id (:main-instance-id component)
+
+        [shape shapes]
+        (ctn/make-component-instance page
+                                     component
+                                     (:id file)
+                                     (gpt/point x
+                                                y)
+                                     #_{:main-instance? true
+                                      :force-id main-instance-id})]
+
+    (as-> file $
+      (reduce #(commit-change %1
+                              {:type :add-obj
+                               :id (:id %2)
+                               :page-id (:id page)
+                               :parent-id (:parent-id %2)
+                               :frame-id (:frame-id %2)
+                               :obj %2})
+              $
+              shapes)
+
+      (assoc $ :last-id (:id shape))
+      (dissoc $ :current-component-id))))
+
 (defn delete-object
   [file id]
   (let [page-id (:current-page-id file)]
@@ -672,7 +737,8 @@
          {:type :mod-obj
           :operations (reduce generate-operation [] attrs)
           :page-id page-id
-          :id (:id old-obj)}))))
+          :id (:id old-obj)})
+        (assoc :last-id (:id old-obj)))))
 
 (defn get-current-page
   [file]

frontend/src/app/libs/file_builder.cljs

@@ -8,8 +8,11 @@
   (:require
    [app.common.data :as d]
    [app.common.file-builder :as fb]
+   [app.common.media :as cm]
    [app.common.uuid :as uuid]
    [app.util.dom :as dom]
+   [app.util.json :as json]
+   [app.util.webapi :as wapi]
    [app.util.zip :as uz]
    [app.worker.export :as e]
    [beicon.core :as rx]
@@ -27,6 +30,35 @@
              key (-> key d/name str/kebab keyword)]
          [key value])) $)))
 
+(defn data-uri->blob
+  [data-uri]
+  (let [[mtype b64-data] (str/split data-uri ";base64,")
+        mtype   (subs mtype (inc (str/index-of mtype ":")))
+        decoded (.atob js/window b64-data)
+        size    (.-length ^js decoded)
+        content (js/Uint8Array. size)]
+
+    (doseq [i (range 0 size)]
+      (aset content i (.charCodeAt decoded i)))
+
+    (wapi/create-blob content mtype)))
+
+(defn parse-library-media
+  [[file-id media]]
+  (rx/merge
+   (let [markup
+         (->> (vals media)
+              (reduce e/collect-media {})
+              (json/encode))]
+     (rx/of (vector (str file-id "/media.json") markup)))
+
+   (->> (rx/from (vals media))
+        (rx/map #(assoc % :file-id file-id))
+        (rx/flat-map
+         (fn [media]
+           (let [file-path (str/concat file-id "/media/" (:id media) (cm/mtype->extension (:mtype media)))
+                 blob (data-uri->blob (:uri media))]
+             (rx/of (vector file-path blob))))))))
 
 (defn export-file
   [file]
@@ -51,6 +83,34 @@
              (rx/observe-on :async)
              (rx/flat-map e/get-page-data)
              (rx/share))
+
+        colors-stream
+        (->> files-stream
+             (rx/flat-map vals)
+             (rx/map #(vector (:id %) (get-in % [:data :colors])))
+             (rx/filter #(d/not-empty? (second %)))
+             (rx/map e/parse-library-color))
+
+        typographies-stream
+        (->> files-stream
+             (rx/flat-map vals)
+             (rx/map #(vector (:id %) (get-in % [:data :typographies])))
+             (rx/filter #(d/not-empty? (second %)))
+             (rx/map e/parse-library-typographies))
+
+        media-stream
+        (->> files-stream
+             (rx/flat-map vals)
+             (rx/map #(vector (:id %) (get-in % [:data :media])))
+             (rx/filter #(d/not-empty? (second %)))
+             (rx/flat-map parse-library-media))
+
+        components-stream
+        (->> files-stream
+             (rx/flat-map vals)
+             (rx/filter #(d/not-empty? (get-in % [:data :components])))
+             (rx/flat-map e/parse-library-components))
+
         pages-stream
         (->> render-stream
              (rx/map e/collect-page))]
@@ -64,7 +124,11 @@
 
      (->> (rx/merge
            manifest-stream
-           pages-stream)
+           pages-stream
+           components-stream
+           media-stream
+           colors-stream
+           typographies-stream)
           (rx/reduce conj [])
           (rx/with-latest-from files-stream)
           (rx/flat-map (fn [[data _]]
@@ -133,16 +197,66 @@
   (closeSVG [_]
     (set! file (fb/close-svg-raw file)))
 
+  (addLibraryColor [_ data]
+    (set! file (fb/add-library-color file (parse-data data)))
+    (str (:last-id file)))
+
+  (updateLibraryColor [_ data]
+    (set! file (fb/update-library-color file (parse-data data)))
+    (str (:last-id file)))
+
+  (deleteLibraryColor [_ data]
+    (set! file (fb/delete-library-color file (parse-data data)))
+    (str (:last-id file)))
+
+  (addLibraryMedia [_ data]
+    (set! file (fb/add-library-media file (parse-data data)))
+    (str (:last-id file)))
+
+  (deleteLibraryMedia [_ data]
+    (set! file (fb/delete-library-media file (parse-data data)))
+    (str (:last-id file)))
+
+  (addLibraryTypography [_ data]
+    (set! file (fb/add-library-typography file (parse-data data)))
+    (str (:last-id file)))
+
+  (deleteLibraryTypography [_ data]
+    (set! file (fb/delete-library-typography file (parse-data data)))
+    (str (:last-id file)))
+
+  (startComponent [_ data]
+    (set! file (fb/start-component file (parse-data data)))
+    (str (:current-component-id file)))
+
+  (finishComponent [_]
+    (set! file (fb/finish-component file)))
+
+  (createComponentInstance [_ data]
+    (set! file (fb/create-component-instance file (parse-data data)))
+    (str (:last-id file)))
+
+  (lookupShape [_ shape-id]
+    (clj->js (fb/lookup-shape file (uuid/uuid shape-id))))
+
+  (updateObject [_ id new-obj]
+    (let [old-obj (fb/lookup-shape file (uuid/uuid id))
+          new-obj (d/deep-merge old-obj (parse-data new-obj))]
+      (set! file (fb/update-object file old-obj new-obj))))
+
+  (deleteObject [_ id]
+    (set! file (fb/delete-object file (uuid/uuid id))))
+
   (asMap [_]
     (clj->js file))
 
   (export [_]
-     (->> (export-file file)
+    (->> (export-file file)
-          (rx/subs
+         (rx/subs
-           (fn [value]
+          (fn [value]
-             (when  (not (contains? value :type))
+            (when  (not (contains? value :type))
-               (let [[file export-blob] value]
+              (let [[file export-blob] value]
-                 (dom/trigger-download (:name file) export-blob))))))))
+                (dom/trigger-download (:name file) export-blob))))))))
 
 (defn create-file-export [^string name]
   (File. (fb/create-file name)))