✨ Include advanced interactions and flows in import/export

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

@@ -131,30 +131,41 @@
 
 (mf/defc export-grid-data
   [{:keys [grids]}]
-  (when-not  (empty? grids)
-    [:> "penpot:grids" #js {}
-     (for [{:keys [type display params]} grids]
-       (let [props (->> (d/without-keys params [:color])
-                        (prefix-keys)
-                        (clj->js))]
-         [:> "penpot:grid"
-          (-> props
-              (obj/set! "penpot:color" (get-in params [:color :color]))
-              (obj/set! "penpot:opacity" (get-in params [:color :opacity]))
-              (obj/set! "penpot:type" (d/name type))
-              (cond-> (some? display)
-                (obj/set! "penpot:display" (str display))))]))]))
+  [:> "penpot:grids" #js {}
+   (for [{:keys [type display params]} grids]
+     (let [props (->> (d/without-keys params [:color])
+                      (prefix-keys)
+                      (clj->js))]
+       [:> "penpot:grid"
+        (-> props
+            (obj/set! "penpot:color" (get-in params [:color :color]))
+            (obj/set! "penpot:opacity" (get-in params [:color :opacity]))
+            (obj/set! "penpot:type" (d/name type))
+            (cond-> (some? display)
+              (obj/set! "penpot:display" (str display))))]))])
+
+(mf/defc export-flows
+  [{:keys [flows]}]
+  [:> "penpot:flows" #js {}
+    (for [{:keys [id name starting-frame]} flows]
+      [:> "penpot:flow" #js {:id id
+                             :name name
+                             :starting-frame starting-frame}])])
 
 (mf/defc export-page
   [{:keys [options]}]
-  (let [saved-grids (get options :saved-grids)]
-    (when-not (empty? saved-grids)
-      (let [parse-grid
-            (fn [[type params]]
-              {:type type :params params})
-            grids (->> saved-grids (mapv parse-grid))]
-        [:> "penpot:page" #js {}
-         [:& export-grid-data {:grids grids}]]))))
+  (let [saved-grids (get options :saved-grids)
+        flows       (get options :flows)]
+    (when (or (seq saved-grids) (seq flows))
+       (let [parse-grid
+             (fn [[type params]]
+               {:type type :params params})
+             grids (->> saved-grids (mapv parse-grid))]
+         [:> "penpot:page" #js {}
+          (when (seq saved-grids)
+            [:& export-grid-data {:grids grids}])
+          (when (seq flows)
+            [:& export-flows {:flows flows}])]))))
 
 (mf/defc export-shadow-data
   [{:keys [shadow]}]
@@ -220,11 +231,18 @@
   [{:keys [interactions]}]
   (when-not (empty? interactions)
     [:> "penpot:interactions" #js {}
-     (for [{:keys [action-type destination event-type]} interactions]
+     (for [interaction interactions]
        [:> "penpot:interaction"
-        #js {:penpot:action-type (d/name action-type)
-             :penpot:destination (str destination)
-             :penpot:event-type (d/name event-type)}])]))
+        #js {:penpot:event-type (d/name (:event-type interaction))
+             :penpot:action-type (d/name (:action-type interaction))
+             :penpot:delay ((d/nilf str) (:delay interaction))
+             :penpot:destination ((d/nilf str) (:destination interaction))
+             :penpot:overlay-pos-type ((d/nilf d/name) (:overlay-pos-type interaction))
+             :penpot:overlay-position-x ((d/nilf get-in) interaction [:overlay-position :x])
+             :penpot:overlay-position-y ((d/nilf get-in) interaction [:overlay-position :y])
+             :penpot:url (:url interaction)
+             :penpot:close-click-outside ((d/nilf str) (:close-click-outside interaction))
+             :penpot:background-overlay ((d/nilf str) (:background-overlay interaction))}])]))
 
 (mf/defc export-data
   [{:keys [shape]}]

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

@@ -477,7 +477,6 @@
    :suffix (get-meta node :suffix)
    :scale  (get-meta node :scale d/parse-double)})
 
-
 (defn parse-grid-node [node]
   (let [attrs (-> node :attrs remove-penpot-prefix)
         color {:color (:color attrs)
@@ -494,8 +493,18 @@
      :params  params}))
 
 (defn parse-grids [node]
-  (let [grid-node (get-data node :penpot:grids)]
-    (->> grid-node :content (mapv parse-grid-node))))
+  (let [grids-node (get-data node :penpot:grids)]
+    (->> grids-node :content (mapv parse-grid-node))))
+
+(defn parse-flow-node [node]
+  (let [attrs (-> node :attrs remove-penpot-prefix)]
+    {:id             (uuid/next)
+     :name           (-> attrs :name)
+     :starting-frame (-> attrs :starting-frame uuid)}))
+
+(defn parse-flows [node]
+  (let [flows-node (get-data node :penpot:flows)]
+    (->> flows-node :content (mapv parse-flow-node))))
 
 (defn extract-from-data
   ([node tag]
@@ -725,24 +734,35 @@
 
 (defn parse-page-data
   [node]
-  (let [style (parse-style (get-in node [:attrs :style]))
+  (let [style      (parse-style (get-in node [:attrs :style]))
         background (:background style)
-        grids  (->> (parse-grids node)
-                    (group-by :type)
-                    (d/mapm (fn [_ v] (-> v first :params))))]
+        grids      (->> (parse-grids node)
+                        (group-by :type)
+                        (d/mapm (fn [_ v] (-> v first :params))))
+        flows      (parse-flows node)]
     (cond-> {}
       (some? background)
       (assoc-in [:options :background] background)
 
       (d/not-empty? grids)
-      (assoc-in [:options :saved-grids] grids))))
+      (assoc-in [:options :saved-grids] grids)
+
+      (d/not-empty? flows)
+      (assoc-in [:options :flows] flows))))
 
 (defn parse-interactions
   [node]
   (let [interactions-node (get-data node :penpot:interactions)]
     (->> (find-all-nodes interactions-node :penpot:interaction)
          (mapv (fn [node]
-                 {:destination (get-meta node :destination uuid/uuid)
-                  :action-type (get-meta node :action-type keyword)
-                  :event-type  (get-meta node :event-type keyword)})))))
+                 {:event-type          (get-meta node :event-type keyword)
+                  :action-type         (get-meta node :action-type keyword)
+                  :delay               (get-meta node :delay d/parse-double)
+                  :destination         (get-meta node :destination uuid/uuid)
+                  :overlay-pos-type    (get-meta node :overlay-pos-type keyword)
+                  :overlay-position-x  (get-meta node :overlay-position-x d/parse-double)
+                  :overlay-position-y  (get-meta node :overlay-position-x d/parse-double)
+                  :url                 (get-meta node :url str)
+                  :close-click-outside (get-meta node :close-click-outside str->bool)
+                  :background-overlay  (get-meta node :background-overlay str->bool)})))))
 

frontend/src/app/worker/import.cljs

@@ -315,7 +315,10 @@
         page-data (-> (cip/parse-page-data content)
                       (assoc :name page-name)
                       (assoc :id (resolve page-id)))
-        file (-> file (fb/add-page page-data))]
+        flows     (->> (get-in page-data [:options :flows])
+                       (mapv #(update % :starting-frame resolve)))
+        page-data (d/assoc-in-when page-data [:options :flows] flows)
+        file      (-> file (fb/add-page page-data))]
     (->> (rx/from nodes)
          (rx/filter cip/shape?)
          (rx/mapcat (partial resolve-media context file-id))