3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-25 12:06:11 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Include advanced interactions and flows in import/export

Browse source
This commit is contained in:
Andrés Moya 2021-10-07 17:09:16 +02:00 • committed by Alonso Torres
parent a6dfa6bbbd
commit 09d1c958ce
5 changed files with 146 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

75
common/src/app/common/file_builder.cljc
View file

@ -374,21 +374,76 @@
(-> file (-> file
(update :parent-stack pop))) (update :parent-stack pop)))
(defn- read-classifier
[interaction-src]
(select-keys interaction-src [:event-type :action-type]))
(defmulti read-event-opts :event-type)
(defmethod read-event-opts :after-delay
[interaction-src]
(select-keys interaction-src [:delay]))
(defmethod read-event-opts :default
[_]
{})
(defmulti read-action-opts :action-type)
(defmethod read-action-opts :navigate
[interaction-src]
(select-keys interaction-src [:destination]))
(defmethod read-action-opts :open-overlay
[interaction-src]
(select-keys interaction-src [:destination
:overlay-position
:overlay-pos-type
:close-click-outside
:background-overlay]))
(defmethod read-action-opts :toggle-overlay
[interaction-src]
(select-keys interaction-src [:destination
:overlay-position
:overlay-pos-type
:close-click-outside
:background-overlay]))
(defmethod read-action-opts :close-overlay
[interaction-src]
(select-keys interaction-src [:destination]))
(defmethod read-action-opts :prev-screen
[_]
{})
(defmethod read-action-opts :open-url
[interaction-src]
(select-keys interaction-src [:url]))
(defn add-interaction (defn add-interaction
[file from-id {:keys [action-type event-type destination]}] [file from-id interaction-src]
(assert (some? (lookup-shape file from-id)) (str "Cannot locate shape with id " from-id)) (assert (some? (lookup-shape file from-id)) (str "Cannot locate shape with id " from-id))
(assert (some? (lookup-shape file destination)) (str "Cannot locate shape with id " destination))
(let [interactions (->> (lookup-shape file from-id) (let [{:keys [event-type action-type]} (read-classifier interaction-src)
:interactions {:keys [delay]} (read-event-opts interaction-src)
(filterv #(or (not= (:action-type %) action-type) {:keys [destination overlay-pos-type overlay-position url
(not= (:event-type %) event-type)))) close-click-outside background-overlay]} (read-action-opts interaction-src)
interactions (-> interactions
interactions (-> (lookup-shape file from-id)
:interactions
(conjv (conjv
{:action-type action-type (d/without-nils {:event-type event-type
:event-type event-type :action-type action-type
:destination destination}))] :delay delay
:destination destination
:overlay-pos-type overlay-pos-type
:overlay-position overlay-position
:url url
:close-click-outside close-click-outside
:background-overlay background-overlay})))]
(commit-change (commit-change
file file
{:type :mod-obj {:type :mod-obj

6
common/src/app/common/types/page_options.cljc
View file

@ -12,11 +12,11 @@
;; --- Grid options ;; --- Grid options
(s/def :artboard-grid.color/value ::us/string) (s/def :artboard-grid.color/color ::us/string)
(s/def :artboard-grid.color/opacity ::us/safe-number) (s/def :artboard-grid.color/opacity ::us/safe-number)
(s/def :artboard-grid/size ::us/safe-integer) (s/def :artboard-grid/size ::us/safe-integer)
(s/def :artboard-grid/color (s/keys :req-un [:artboard-grid.color/value (s/def :artboard-grid/color (s/keys :req-un [:artboard-grid.color/color
:artboard-grid.color/opacity])) :artboard-grid.color/opacity]))
(s/def :artboard-grid/type #{:stretch :left :center :right}) (s/def :artboard-grid/type #{:stretch :left :center :right})
(s/def :artboard-grid/item-length (s/nilable ::us/safe-integer)) (s/def :artboard-grid/item-length (s/nilable ::us/safe-integer))
@ -38,7 +38,7 @@
(s/def :artboard-grid/row :artboard-grid/column) (s/def :artboard-grid/row :artboard-grid/column)
(s/def ::saved-grids (s/def ::saved-grids
(s/keys :req-un [:artboard-grid/square (s/keys :opt-un [:artboard-grid/square
:artboard-grid/row :artboard-grid/row
:artboard-grid/column])) :artboard-grid/column]))

68
frontend/src/app/main/ui/shapes/export.cljs
View file

@ -131,30 +131,41 @@
(mf/defc export-grid-data (mf/defc export-grid-data
[{:keys [grids]}] [{:keys [grids]}]
(when-not (empty? grids) [:> "penpot:grids" #js {}
[:> "penpot:grids" #js {} (for [{:keys [type display params]} grids]
(for [{:keys [type display params]} grids] (let [props (->> (d/without-keys params [:color])
(let [props (->> (d/without-keys params [:color]) (prefix-keys)
(prefix-keys) (clj->js))]
(clj->js))] [:> "penpot:grid"
[:> "penpot:grid" (-> props
(-> props (obj/set! "penpot:color" (get-in params [:color :color]))
(obj/set! "penpot:color" (get-in params [:color :color])) (obj/set! "penpot:opacity" (get-in params [:color :opacity]))
(obj/set! "penpot:opacity" (get-in params [:color :opacity])) (obj/set! "penpot:type" (d/name type))
(obj/set! "penpot:type" (d/name type)) (cond-> (some? display)
(cond-> (some? display) (obj/set! "penpot:display" (str 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 (mf/defc export-page
[{:keys [options]}] [{:keys [options]}]
(let [saved-grids (get options :saved-grids)] (let [saved-grids (get options :saved-grids)
(when-not (empty? saved-grids) flows (get options :flows)]
(let [parse-grid (when (or (seq saved-grids) (seq flows))
(fn [[type params]] (let [parse-grid
{:type type :params params}) (fn [[type params]]
grids (->> saved-grids (mapv parse-grid))] {:type type :params params})
[:> "penpot:page" #js {} grids (->> saved-grids (mapv parse-grid))]
[:& export-grid-data {:grids grids}]])))) [:> "penpot:page" #js {}
(when (seq saved-grids)
[:& export-grid-data {:grids grids}])
(when (seq flows)
[:& export-flows {:flows flows}])]))))
(mf/defc export-shadow-data (mf/defc export-shadow-data
[{:keys [shadow]}] [{:keys [shadow]}]
@ -220,11 +231,18 @@
[{:keys [interactions]}] [{:keys [interactions]}]
(when-not (empty? interactions) (when-not (empty? interactions)
[:> "penpot:interactions" #js {} [:> "penpot:interactions" #js {}
(for [{:keys [action-type destination event-type]} interactions] (for [interaction interactions]
[:> "penpot:interaction" [:> "penpot:interaction"
#js {:penpot:action-type (d/name action-type) #js {:penpot:event-type (d/name (:event-type interaction))
:penpot:destination (str destination) :penpot:action-type (d/name (:action-type interaction))
:penpot:event-type (d/name event-type)}])])) :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 (mf/defc export-data
[{:keys [shape]}] [{:keys [shape]}]

42
frontend/src/app/util/import/parser.cljs
View file

@ -477,7 +477,6 @@
:suffix (get-meta node :suffix) :suffix (get-meta node :suffix)
:scale (get-meta node :scale d/parse-double)}) :scale (get-meta node :scale d/parse-double)})
(defn parse-grid-node [node] (defn parse-grid-node [node]
(let [attrs (-> node :attrs remove-penpot-prefix) (let [attrs (-> node :attrs remove-penpot-prefix)
color {:color (:color attrs) color {:color (:color attrs)
@ -494,8 +493,18 @@
:params params})) :params params}))
(defn parse-grids [node] (defn parse-grids [node]
(let [grid-node (get-data node :penpot:grids)] (let [grids-node (get-data node :penpot:grids)]
(->> grid-node :content (mapv parse-grid-node)))) (->> 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 (defn extract-from-data
([node tag] ([node tag]
@ -725,24 +734,35 @@
(defn parse-page-data (defn parse-page-data
[node] [node]
(let [style (parse-style (get-in node [:attrs :style])) (let [style (parse-style (get-in node [:attrs :style]))
background (:background style) background (:background style)
grids (->> (parse-grids node) grids (->> (parse-grids node)
(group-by :type) (group-by :type)
(d/mapm (fn [_ v] (-> v first :params))))] (d/mapm (fn [_ v] (-> v first :params))))
flows (parse-flows node)]
(cond-> {} (cond-> {}
(some? background) (some? background)
(assoc-in [:options :background] background) (assoc-in [:options :background] background)
(d/not-empty? grids) (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 (defn parse-interactions
[node] [node]
(let [interactions-node (get-data node :penpot:interactions)] (let [interactions-node (get-data node :penpot:interactions)]
(->> (find-all-nodes interactions-node :penpot:interaction) (->> (find-all-nodes interactions-node :penpot:interaction)
(mapv (fn [node] (mapv (fn [node]
{:destination (get-meta node :destination uuid/uuid) {:event-type (get-meta node :event-type keyword)
:action-type (get-meta node :action-type keyword) :action-type (get-meta node :action-type keyword)
:event-type (get-meta node :event-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)})))))

5
frontend/src/app/worker/import.cljs
View file

@ -315,7 +315,10 @@
page-data (-> (cip/parse-page-data content) page-data (-> (cip/parse-page-data content)
(assoc :name page-name) (assoc :name page-name)
(assoc :id (resolve page-id))) (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/from nodes)
(rx/filter cip/shape?) (rx/filter cip/shape?)
(rx/mapcat (partial resolve-media context file-id)) (rx/mapcat (partial resolve-media context file-id))