mirror of
https://github.com/penpot/penpot.git
synced 2025-06-04 01:41:39 +02:00
✨ Process interactions on import
This commit is contained in:
alonso.torres
parent
4e909dc369
commit
4d0dcc5876
4 changed files with 192 additions and 95 deletions
|
|
@ -91,20 +91,22 @@
|
|||
[(str "penpot:" (d/name k)) v])]
|
||||
(into {} (map prefix-entry) m)))
|
||||
|
||||
|
||||
(mf/defc export-grid-data
|
||||
[{:keys [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))))]))])
|
||||
(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))))]))]))
|
||||
|
||||
(mf/defc export-page
|
||||
[{:keys [options]}]
|
||||
|
|
@ -117,62 +119,85 @@
|
|||
[:> "penpot:page" #js {}
|
||||
[:& export-grid-data {:grids grids}]]))))
|
||||
|
||||
(mf/defc export-shadow-data
|
||||
[{:keys [shadow]}]
|
||||
(for [{:keys [style hidden color offset-x offset-y blur spread]} shadow]
|
||||
[:> "penpot:shadow"
|
||||
#js {:penpot:shadow-type (d/name style)
|
||||
:penpot:hidden (str hidden)
|
||||
:penpot:color (str (:color color))
|
||||
:penpot:opacity (str (:opacity color))
|
||||
:penpot:offset-x (str offset-x)
|
||||
:penpot:offset-y (str offset-y)
|
||||
:penpot:blur (str blur)
|
||||
:penpot:spread (str spread)}]))
|
||||
|
||||
(mf/defc export-blur-data [{:keys [blur]}]
|
||||
(when (some? blur)
|
||||
(let [{:keys [type hidden value]} blur]
|
||||
[:> "penpot:blur"
|
||||
#js {:penpot:blur-type (d/name type)
|
||||
:penpot:hidden (str hidden)
|
||||
:penpot:value (str value)}])))
|
||||
|
||||
(mf/defc export-exports-data [{:keys [exports]}]
|
||||
(for [{:keys [scale suffix type]} exports]
|
||||
[:> "penpot:export"
|
||||
#js {:penpot:type (d/name type)
|
||||
:penpot:suffix suffix
|
||||
:penpot:scale (str scale)}]))
|
||||
|
||||
(mf/defc export-svg-data [shape]
|
||||
[:*
|
||||
(when (contains? shape :svg-attrs)
|
||||
(let [svg-transform (get shape :svg-transform)
|
||||
svg-attrs (->> shape :svg-attrs keys (mapv d/name) (str/join ",") )
|
||||
svg-defs (->> shape :svg-defs keys (mapv d/name) (str/join ","))]
|
||||
[:> "penpot:svg-import"
|
||||
#js {:penpot:svg-attrs (when-not (empty? svg-attrs) svg-attrs)
|
||||
:penpot:svg-defs (when-not (empty? svg-defs) svg-defs)
|
||||
:penpot:svg-transform (when svg-transform (str svg-transform))
|
||||
:penpot:svg-viewbox-x (get-in shape [:svg-viewbox :x])
|
||||
:penpot:svg-viewbox-y (get-in shape [:svg-viewbox :y])
|
||||
:penpot:svg-viewbox-width (get-in shape [:svg-viewbox :width])
|
||||
:penpot:svg-viewbox-height (get-in shape [:svg-viewbox :height])}
|
||||
(for [[def-id def-xml] (:svg-defs shape)]
|
||||
[:> "penpot:svg-def" #js {:def-id def-id}
|
||||
[:& render-xml {:xml def-xml}]])]))
|
||||
|
||||
(when (= (:type shape) :svg-raw)
|
||||
(let [props
|
||||
(-> (obj/new)
|
||||
(obj/set! "penpot:x" (:x shape))
|
||||
(obj/set! "penpot:y" (:y shape))
|
||||
(obj/set! "penpot:width" (:width shape))
|
||||
(obj/set! "penpot:height" (:height shape))
|
||||
(obj/set! "penpot:tag" (-> (get-in shape [:content :tag]) d/name))
|
||||
(obj/merge! (-> (get-in shape [:content :attrs])
|
||||
(clj->js))))]
|
||||
[:> "penpot:svg-content" props
|
||||
(for [leaf (->> shape :content :content (filter string?))]
|
||||
[:> "penpot:svg-child" {} leaf])]))])
|
||||
|
||||
(mf/defc export-interactions-data
|
||||
[{:keys [interactions]}]
|
||||
(when-not (empty? interactions)
|
||||
[:> "penpot:interactions" #js {}
|
||||
(for [{:keys [action-type destination event-type]} interactions]
|
||||
[:> "penpot:interaction"
|
||||
#js {:penpot:action-type (d/name action-type)
|
||||
:penpot:destination (str destination)
|
||||
:penpot:event-type (d/name event-type)}])]))
|
||||
|
||||
(mf/defc export-data
|
||||
[{:keys [shape]}]
|
||||
(let [props (-> (obj/new)
|
||||
(add-data shape))]
|
||||
(let [props (-> (obj/new) (add-data shape))
|
||||
frame? (= (:type shape) :frame)]
|
||||
[:> "penpot:shape" props
|
||||
(for [{:keys [style hidden color offset-x offset-y blur spread]} (:shadow shape)]
|
||||
[:> "penpot:shadow" #js {:penpot:shadow-type (d/name style)
|
||||
:penpot:hidden (str hidden)
|
||||
:penpot:color (str (:color color))
|
||||
:penpot:opacity (str (:opacity color))
|
||||
:penpot:offset-x (str offset-x)
|
||||
:penpot:offset-y (str offset-y)
|
||||
:penpot:blur (str blur)
|
||||
:penpot:spread (str spread)}])
|
||||
|
||||
(when (some? (:blur shape))
|
||||
(let [{:keys [type hidden value]} (:blur shape)]
|
||||
[:> "penpot:blur" #js {:penpot:blur-type (d/name type)
|
||||
:penpot:hidden (str hidden)
|
||||
:penpot:value (str value)}]))
|
||||
|
||||
(for [{:keys [scale suffix type]} (:exports shape)]
|
||||
[:> "penpot:export" #js {:penpot:type (d/name type)
|
||||
:penpot:suffix suffix
|
||||
:penpot:scale (str scale)}])
|
||||
|
||||
(when (contains? shape :svg-attrs)
|
||||
(let [svg-transform (get shape :svg-transform)
|
||||
svg-attrs (->> shape :svg-attrs keys (mapv d/name) (str/join ",") )
|
||||
svg-defs (->> shape :svg-defs keys (mapv d/name) (str/join ","))]
|
||||
[:> "penpot:svg-import" #js {:penpot:svg-attrs (when-not (empty? svg-attrs) svg-attrs)
|
||||
:penpot:svg-defs (when-not (empty? svg-defs) svg-defs)
|
||||
:penpot:svg-transform (when svg-transform (str svg-transform))
|
||||
:penpot:svg-viewbox-x (get-in shape [:svg-viewbox :x])
|
||||
:penpot:svg-viewbox-y (get-in shape [:svg-viewbox :y])
|
||||
:penpot:svg-viewbox-width (get-in shape [:svg-viewbox :width])
|
||||
:penpot:svg-viewbox-height (get-in shape [:svg-viewbox :height])}
|
||||
(for [[def-id def-xml] (:svg-defs shape)]
|
||||
[:> "penpot:svg-def" #js {:def-id def-id}
|
||||
[:& render-xml {:xml def-xml}]])]))
|
||||
|
||||
(when (= (:type shape) :svg-raw)
|
||||
(let [props (-> (obj/new)
|
||||
(obj/set! "penpot:x" (:x shape))
|
||||
(obj/set! "penpot:y" (:y shape))
|
||||
(obj/set! "penpot:width" (:width shape))
|
||||
(obj/set! "penpot:height" (:height shape))
|
||||
(obj/set! "penpot:tag" (-> (get-in shape [:content :tag]) d/name))
|
||||
(obj/merge! (-> (get-in shape [:content :attrs])
|
||||
(clj->js))))]
|
||||
[:> "penpot:svg-content" props
|
||||
(for [leaf (->> shape :content :content (filter string?))]
|
||||
[:> "penpot:svg-child" {} leaf])]))
|
||||
|
||||
|
||||
(when (and (= (:type shape) :frame)
|
||||
(seq (:grids shape)))
|
||||
[:& export-grid-data {:grids (:grids shape)}])]))
|
||||
[:& export-shadow-data shape]
|
||||
[:& export-blur-data shape]
|
||||
[:& export-exports-data shape]
|
||||
[:& export-svg-data shape]
|
||||
[:& export-interactions-data shape]
|
||||
[:& export-grid-data shape]]))
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue