mirror of
https://github.com/penpot/penpot.git
synced 2025-06-10 21:51:38 +02:00
♻️ Minor reorganization on export & render namespaces.
This commit is contained in:
Andrey Antukh
Alonso Torres
parent
13dd1cb6b6
commit
6f5916e334
7 changed files with 466 additions and 476 deletions
|
|
@ -1,333 +0,0 @@
|
||||||
;; This Source Code Form is subject to the terms of the Mozilla Public
|
|
||||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
||||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
||||||
;;
|
|
||||||
;; Copyright (c) UXBOX Labs SL
|
|
||||||
|
|
||||||
(ns app.main.exports
|
|
||||||
"The main logic for SVG export functionality."
|
|
||||||
(:require
|
|
||||||
[app.common.colors :as clr]
|
|
||||||
[app.common.geom.align :as gal]
|
|
||||||
[app.common.geom.matrix :as gmt]
|
|
||||||
[app.common.geom.point :as gpt]
|
|
||||||
[app.common.geom.shapes :as gsh]
|
|
||||||
[app.common.math :as mth]
|
|
||||||
[app.common.pages :as cp]
|
|
||||||
[app.common.uuid :as uuid]
|
|
||||||
[app.main.ui.shapes.bool :as bool]
|
|
||||||
[app.main.ui.shapes.circle :as circle]
|
|
||||||
[app.main.ui.shapes.embed :as embed]
|
|
||||||
[app.main.ui.shapes.export :as use]
|
|
||||||
[app.main.ui.shapes.frame :as frame]
|
|
||||||
[app.main.ui.shapes.group :as group]
|
|
||||||
[app.main.ui.shapes.image :as image]
|
|
||||||
[app.main.ui.shapes.path :as path]
|
|
||||||
[app.main.ui.shapes.rect :as rect]
|
|
||||||
[app.main.ui.shapes.shape :refer [shape-container]]
|
|
||||||
[app.main.ui.shapes.svg-raw :as svg-raw]
|
|
||||||
[app.main.ui.shapes.text :as text]
|
|
||||||
[app.main.ui.shapes.text.fontfaces :as ff]
|
|
||||||
[app.util.object :as obj]
|
|
||||||
[app.util.strings :as ust]
|
|
||||||
[app.util.timers :as ts]
|
|
||||||
[cuerdas.core :as str]
|
|
||||||
[rumext.alpha :as mf]))
|
|
||||||
|
|
||||||
(def ^:const viewbox-decimal-precision 3)
|
|
||||||
(def ^:private default-color clr/canvas)
|
|
||||||
|
|
||||||
(mf/defc background
|
|
||||||
[{:keys [vbox color]}]
|
|
||||||
[:rect
|
|
||||||
{:x (:x vbox)
|
|
||||||
:y (:y vbox)
|
|
||||||
:width (:width vbox)
|
|
||||||
:height (:height vbox)
|
|
||||||
:fill color}])
|
|
||||||
|
|
||||||
(defn- calculate-dimensions
|
|
||||||
[{:keys [objects] :as data} vport]
|
|
||||||
(let [shapes (cp/select-toplevel-shapes objects {:include-frames? true
|
|
||||||
:include-frame-children? false})
|
|
||||||
to-finite (fn [val fallback] (if (not (mth/finite? val)) fallback val))
|
|
||||||
rect (cond->> (gsh/selection-rect shapes)
|
|
||||||
(some? vport)
|
|
||||||
(gal/adjust-to-viewport vport))]
|
|
||||||
(-> rect
|
|
||||||
(update :x to-finite 0)
|
|
||||||
(update :y to-finite 0)
|
|
||||||
(update :width to-finite 100000)
|
|
||||||
(update :height to-finite 100000))))
|
|
||||||
|
|
||||||
(declare shape-wrapper-factory)
|
|
||||||
|
|
||||||
(defn frame-wrapper-factory
|
|
||||||
[objects]
|
|
||||||
(let [shape-wrapper (shape-wrapper-factory objects)
|
|
||||||
frame-shape (frame/frame-shape shape-wrapper)]
|
|
||||||
(mf/fnc frame-wrapper
|
|
||||||
[{:keys [shape] :as props}]
|
|
||||||
(let [childs (mapv #(get objects %) (:shapes shape))
|
|
||||||
shape (gsh/transform-shape shape)]
|
|
||||||
[:> shape-container {:shape shape}
|
|
||||||
[:& frame-shape {:shape shape :childs childs}]]))))
|
|
||||||
|
|
||||||
(defn group-wrapper-factory
|
|
||||||
[objects]
|
|
||||||
(let [shape-wrapper (shape-wrapper-factory objects)
|
|
||||||
group-shape (group/group-shape shape-wrapper)]
|
|
||||||
(mf/fnc group-wrapper
|
|
||||||
[{:keys [shape] :as props}]
|
|
||||||
(let [childs (mapv #(get objects %) (:shapes shape))]
|
|
||||||
[:& group-shape {:shape shape
|
|
||||||
:is-child-selected? true
|
|
||||||
:childs childs}]))))
|
|
||||||
|
|
||||||
(defn bool-wrapper-factory
|
|
||||||
[objects]
|
|
||||||
(let [shape-wrapper (shape-wrapper-factory objects)
|
|
||||||
bool-shape (bool/bool-shape shape-wrapper)]
|
|
||||||
(mf/fnc bool-wrapper
|
|
||||||
[{:keys [shape] :as props}]
|
|
||||||
(let [childs (->> (cp/get-children (:id shape) objects)
|
|
||||||
(select-keys objects))]
|
|
||||||
[:& bool-shape {:shape shape
|
|
||||||
:childs childs}]))))
|
|
||||||
|
|
||||||
(defn svg-raw-wrapper-factory
|
|
||||||
[objects]
|
|
||||||
(let [shape-wrapper (shape-wrapper-factory objects)
|
|
||||||
svg-raw-shape (svg-raw/svg-raw-shape shape-wrapper)]
|
|
||||||
(mf/fnc svg-raw-wrapper
|
|
||||||
[{:keys [shape] :as props}]
|
|
||||||
(let [childs (mapv #(get objects %) (:shapes shape))]
|
|
||||||
(if (and (map? (:content shape))
|
|
||||||
(or (= :svg (get-in shape [:content :tag]))
|
|
||||||
(contains? shape :svg-attrs)))
|
|
||||||
[:> shape-container {:shape shape}
|
|
||||||
[:& svg-raw-shape {:shape shape
|
|
||||||
:childs childs}]]
|
|
||||||
|
|
||||||
[:& svg-raw-shape {:shape shape
|
|
||||||
:childs childs}])))))
|
|
||||||
|
|
||||||
(defn shape-wrapper-factory
|
|
||||||
[objects]
|
|
||||||
(mf/fnc shape-wrapper
|
|
||||||
[{:keys [frame shape] :as props}]
|
|
||||||
(let [group-wrapper (mf/use-memo (mf/deps objects) #(group-wrapper-factory objects))
|
|
||||||
svg-raw-wrapper (mf/use-memo (mf/deps objects) #(svg-raw-wrapper-factory objects))
|
|
||||||
bool-wrapper (mf/use-memo (mf/deps objects) #(bool-wrapper-factory objects))
|
|
||||||
frame-wrapper (mf/use-memo (mf/deps objects) #(frame-wrapper-factory objects))]
|
|
||||||
(when (and shape (not (:hidden shape)))
|
|
||||||
(let [shape (gsh/transform-shape shape)
|
|
||||||
opts #js {:shape shape}
|
|
||||||
svg-raw? (= :svg-raw (:type shape))]
|
|
||||||
(if-not svg-raw?
|
|
||||||
[:> shape-container {:shape shape}
|
|
||||||
(case (:type shape)
|
|
||||||
:text [:> text/text-shape opts]
|
|
||||||
:rect [:> rect/rect-shape opts]
|
|
||||||
:path [:> path/path-shape opts]
|
|
||||||
:image [:> image/image-shape opts]
|
|
||||||
:circle [:> circle/circle-shape opts]
|
|
||||||
:frame [:> frame-wrapper {:shape shape}]
|
|
||||||
:group [:> group-wrapper {:shape shape :frame frame}]
|
|
||||||
:bool [:> bool-wrapper {:shape shape :frame frame}]
|
|
||||||
nil)]
|
|
||||||
|
|
||||||
;; Don't wrap svg elements inside a <g> otherwise some can break
|
|
||||||
[:> svg-raw-wrapper {:shape shape :frame frame}]))))))
|
|
||||||
|
|
||||||
(defn format-viewbox
|
|
||||||
"Format a viewbox given a rectangle"
|
|
||||||
[{:keys [x y width height] :or {x 0 y 0 width 100 height 100}}]
|
|
||||||
(str/join
|
|
||||||
" "
|
|
||||||
(->> [x y width height]
|
|
||||||
(map #(ust/format-precision % viewbox-decimal-precision)))))
|
|
||||||
|
|
||||||
(mf/defc page-svg
|
|
||||||
{::mf/wrap [mf/memo]}
|
|
||||||
[{:keys [data width height thumbnails? embed? include-metadata?] :as props
|
|
||||||
:or {embed? false include-metadata? false}}]
|
|
||||||
(let [objects (:objects data)
|
|
||||||
root (get objects uuid/zero)
|
|
||||||
shapes
|
|
||||||
(->> (:shapes root)
|
|
||||||
(map #(get objects %)))
|
|
||||||
|
|
||||||
root-children
|
|
||||||
(->> shapes
|
|
||||||
(filter #(not= :frame (:type %)))
|
|
||||||
(mapcat #(cp/get-object-with-children (:id %) objects)))
|
|
||||||
|
|
||||||
vport (when (and (some? width) (some? height))
|
|
||||||
{:width width :height height})
|
|
||||||
dim (calculate-dimensions data vport)
|
|
||||||
vbox (format-viewbox dim)
|
|
||||||
background-color (get-in data [:options :background] default-color)
|
|
||||||
frame-wrapper
|
|
||||||
(mf/use-memo
|
|
||||||
(mf/deps objects)
|
|
||||||
#(frame-wrapper-factory objects))
|
|
||||||
|
|
||||||
shape-wrapper
|
|
||||||
(mf/use-memo
|
|
||||||
(mf/deps objects)
|
|
||||||
#(shape-wrapper-factory objects))]
|
|
||||||
[:& (mf/provider embed/context) {:value embed?}
|
|
||||||
[:& (mf/provider use/include-metadata-ctx) {:value include-metadata?}
|
|
||||||
[:svg {:view-box vbox
|
|
||||||
:version "1.1"
|
|
||||||
:xmlns "http://www.w3.org/2000/svg"
|
|
||||||
:xmlnsXlink "http://www.w3.org/1999/xlink"
|
|
||||||
:xmlns:penpot (when include-metadata? "https://penpot.app/xmlns")
|
|
||||||
:style {:width "100%"
|
|
||||||
:height "100%"
|
|
||||||
:background background-color}}
|
|
||||||
|
|
||||||
[:& use/export-page {:options (:options data)}]
|
|
||||||
[:& ff/fontfaces-style {:shapes root-children}]
|
|
||||||
(for [item shapes]
|
|
||||||
(let [frame? (= (:type item) :frame)]
|
|
||||||
(cond
|
|
||||||
(and frame? thumbnails? (some? (:thumbnail item)))
|
|
||||||
[:> shape-container {:shape item}
|
|
||||||
[:& frame/frame-thumbnail {:shape item}]]
|
|
||||||
|
|
||||||
frame?
|
|
||||||
[:& frame-wrapper {:shape item
|
|
||||||
:key (:id item)}]
|
|
||||||
:else
|
|
||||||
[:& shape-wrapper {:shape item
|
|
||||||
:key (:id item)}])))]]]))
|
|
||||||
|
|
||||||
(mf/defc frame-svg
|
|
||||||
{::mf/wrap [mf/memo]}
|
|
||||||
[{:keys [objects frame zoom] :or {zoom 1} :as props}]
|
|
||||||
(let [modifier (-> (gpt/point (:x frame) (:y frame))
|
|
||||||
(gpt/negate)
|
|
||||||
(gmt/translate-matrix))
|
|
||||||
|
|
||||||
frame-id (:id frame)
|
|
||||||
|
|
||||||
include-metadata? (mf/use-ctx use/include-metadata-ctx)
|
|
||||||
|
|
||||||
modifier-ids (concat [frame-id] (cp/get-children frame-id objects))
|
|
||||||
update-fn #(assoc-in %1 [%2 :modifiers :displacement] modifier)
|
|
||||||
objects (reduce update-fn objects modifier-ids)
|
|
||||||
frame (assoc-in frame [:modifiers :displacement] modifier)
|
|
||||||
|
|
||||||
width (* (:width frame) zoom)
|
|
||||||
height (* (:height frame) zoom)
|
|
||||||
vbox (format-viewbox {:width (:width frame 0) :height (:height frame 0)})
|
|
||||||
|
|
||||||
wrapper (mf/use-memo
|
|
||||||
(mf/deps objects)
|
|
||||||
#(frame-wrapper-factory objects))]
|
|
||||||
|
|
||||||
[:svg {:view-box vbox
|
|
||||||
:width (ust/format-precision width viewbox-decimal-precision)
|
|
||||||
:height (ust/format-precision height viewbox-decimal-precision)
|
|
||||||
:version "1.1"
|
|
||||||
:xmlns "http://www.w3.org/2000/svg"
|
|
||||||
:xmlnsXlink "http://www.w3.org/1999/xlink"
|
|
||||||
:xmlns:penpot (when include-metadata? "https://penpot.app/xmlns")}
|
|
||||||
[:& wrapper {:shape frame :view-box vbox}]]))
|
|
||||||
|
|
||||||
(mf/defc component-svg
|
|
||||||
{::mf/wrap [mf/memo #(mf/deferred % ts/idle-then-raf)]}
|
|
||||||
[{:keys [objects group zoom] :or {zoom 1} :as props}]
|
|
||||||
(let [modifier (-> (gpt/point (:x group) (:y group))
|
|
||||||
(gpt/negate)
|
|
||||||
(gmt/translate-matrix))
|
|
||||||
|
|
||||||
group-id (:id group)
|
|
||||||
|
|
||||||
include-metadata? (mf/use-ctx use/include-metadata-ctx)
|
|
||||||
|
|
||||||
modifier-ids (concat [group-id] (cp/get-children group-id objects))
|
|
||||||
|
|
||||||
update-fn #(assoc-in %1 [%2 :modifiers :displacement] modifier)
|
|
||||||
modifiers (reduce update-fn {} modifier-ids)
|
|
||||||
objects (gsh/merge-modifiers objects modifiers)
|
|
||||||
|
|
||||||
group (get objects group-id)
|
|
||||||
|
|
||||||
|
|
||||||
width (* (:width group) zoom)
|
|
||||||
height (* (:height group) zoom)
|
|
||||||
vbox (format-viewbox {:width (:width group 0)
|
|
||||||
:height (:height group 0)})
|
|
||||||
|
|
||||||
group-wrapper
|
|
||||||
(mf/use-memo
|
|
||||||
(mf/deps objects)
|
|
||||||
#(group-wrapper-factory objects))]
|
|
||||||
|
|
||||||
[:svg {:view-box vbox
|
|
||||||
:width (ust/format-precision width viewbox-decimal-precision)
|
|
||||||
:height (ust/format-precision height viewbox-decimal-precision)
|
|
||||||
:version "1.1"
|
|
||||||
:xmlns "http://www.w3.org/2000/svg"
|
|
||||||
:xmlnsXlink "http://www.w3.org/1999/xlink"
|
|
||||||
:xmlns:penpot (when include-metadata? "https://penpot.app/xmlns")}
|
|
||||||
[:> shape-container {:shape group}
|
|
||||||
[:& group-wrapper {:shape group :view-box vbox}]]]))
|
|
||||||
|
|
||||||
(mf/defc component-symbol
|
|
||||||
[{:keys [id data] :as props}]
|
|
||||||
|
|
||||||
(let [{:keys [name path objects]} data
|
|
||||||
root (get objects id)
|
|
||||||
|
|
||||||
{:keys [width height]} (:selrect root)
|
|
||||||
vbox (format-viewbox {:width width :height height})
|
|
||||||
|
|
||||||
modifier (-> (gpt/point (:x root) (:y root))
|
|
||||||
(gpt/negate)
|
|
||||||
(gmt/translate-matrix))
|
|
||||||
|
|
||||||
modifier-ids (concat [id] (cp/get-children id objects))
|
|
||||||
update-fn #(assoc-in %1 [%2 :modifiers :displacement] modifier)
|
|
||||||
objects (reduce update-fn objects modifier-ids)
|
|
||||||
root (assoc-in root [:modifiers :displacement] modifier)
|
|
||||||
|
|
||||||
group-wrapper
|
|
||||||
(mf/use-memo
|
|
||||||
(mf/deps objects)
|
|
||||||
#(group-wrapper-factory objects))]
|
|
||||||
|
|
||||||
[:> "symbol" #js {:id (str id)
|
|
||||||
:viewBox vbox
|
|
||||||
"penpot:path" path}
|
|
||||||
[:title name]
|
|
||||||
[:> shape-container {:shape root}
|
|
||||||
[:& group-wrapper {:shape root :view-box vbox}]]]))
|
|
||||||
|
|
||||||
(mf/defc components-sprite-svg
|
|
||||||
{::mf/wrap-props false}
|
|
||||||
[props]
|
|
||||||
|
|
||||||
(let [data (obj/get props "data")
|
|
||||||
children (obj/get props "children")
|
|
||||||
embed? (obj/get props "embed?")
|
|
||||||
include-metadata? (obj/get props "include-metadata?")]
|
|
||||||
[:& (mf/provider embed/context) {:value embed?}
|
|
||||||
[:& (mf/provider use/include-metadata-ctx) {:value include-metadata?}
|
|
||||||
[:svg {:version "1.1"
|
|
||||||
:xmlns "http://www.w3.org/2000/svg"
|
|
||||||
:xmlnsXlink "http://www.w3.org/1999/xlink"
|
|
||||||
:xmlns:penpot (when include-metadata? "https://penpot.app/xmlns")
|
|
||||||
:style {:width "100vw"
|
|
||||||
:height "100vh"
|
|
||||||
:display (when-not (some? children) "none")}}
|
|
||||||
[:defs
|
|
||||||
(for [[component-id component-data] (:components data)]
|
|
||||||
[:& component-symbol {:id component-id
|
|
||||||
:key (str component-id)
|
|
||||||
:data component-data}])]
|
|
||||||
|
|
||||||
children]]]))
|
|
||||||
|
|
@ -5,18 +5,347 @@
|
||||||
;; Copyright (c) UXBOX Labs SL
|
;; Copyright (c) UXBOX Labs SL
|
||||||
|
|
||||||
(ns app.main.render
|
(ns app.main.render
|
||||||
|
"Rendering utilities and components for penpot SVG.
|
||||||
|
|
||||||
|
NOTE: This namespace is used from worker and from many parts of the
|
||||||
|
workspace; we need to be careful when adding new requires because
|
||||||
|
this can cause to import too many deps on worker bundle."
|
||||||
|
|
||||||
(:require
|
(:require
|
||||||
["react-dom/server" :as rds]
|
["react-dom/server" :as rds]
|
||||||
|
[app.common.colors :as clr]
|
||||||
|
[app.common.geom.align :as gal]
|
||||||
|
[app.common.geom.matrix :as gmt]
|
||||||
|
[app.common.geom.point :as gpt]
|
||||||
|
[app.common.geom.shapes :as gsh]
|
||||||
|
[app.common.math :as mth]
|
||||||
|
[app.common.pages :as cp]
|
||||||
|
[app.common.uuid :as uuid]
|
||||||
[app.config :as cfg]
|
[app.config :as cfg]
|
||||||
[app.main.exports :as exports]
|
|
||||||
[app.main.fonts :as fonts]
|
[app.main.fonts :as fonts]
|
||||||
|
[app.main.ui.shapes.bool :as bool]
|
||||||
|
[app.main.ui.shapes.circle :as circle]
|
||||||
|
[app.main.ui.shapes.embed :as embed]
|
||||||
|
[app.main.ui.shapes.export :as export]
|
||||||
|
[app.main.ui.shapes.frame :as frame]
|
||||||
|
[app.main.ui.shapes.group :as group]
|
||||||
|
[app.main.ui.shapes.image :as image]
|
||||||
|
[app.main.ui.shapes.path :as path]
|
||||||
|
[app.main.ui.shapes.rect :as rect]
|
||||||
|
[app.main.ui.shapes.shape :refer [shape-container]]
|
||||||
|
[app.main.ui.shapes.svg-raw :as svg-raw]
|
||||||
|
[app.main.ui.shapes.text :as text]
|
||||||
|
[app.main.ui.shapes.text.fontfaces :as ff]
|
||||||
[app.util.http :as http]
|
[app.util.http :as http]
|
||||||
|
[app.util.object :as obj]
|
||||||
|
[app.util.strings :as ust]
|
||||||
|
[app.util.timers :as ts]
|
||||||
[beicon.core :as rx]
|
[beicon.core :as rx]
|
||||||
[clojure.set :as set]
|
[clojure.set :as set]
|
||||||
|
[cuerdas.core :as str]
|
||||||
[rumext.alpha :as mf]))
|
[rumext.alpha :as mf]))
|
||||||
|
|
||||||
(defn- text? [{type :type}]
|
(def ^:const viewbox-decimal-precision 3)
|
||||||
(= type :text))
|
(def ^:private default-color clr/canvas)
|
||||||
|
|
||||||
|
(mf/defc background
|
||||||
|
[{:keys [vbox color]}]
|
||||||
|
[:rect
|
||||||
|
{:x (:x vbox)
|
||||||
|
:y (:y vbox)
|
||||||
|
:width (:width vbox)
|
||||||
|
:height (:height vbox)
|
||||||
|
:fill color}])
|
||||||
|
|
||||||
|
(defn- calculate-dimensions
|
||||||
|
[{:keys [objects] :as data} vport]
|
||||||
|
(let [shapes (cp/select-toplevel-shapes objects {:include-frames? true
|
||||||
|
:include-frame-children? false})
|
||||||
|
to-finite (fn [val fallback] (if (not (mth/finite? val)) fallback val))
|
||||||
|
rect (cond->> (gsh/selection-rect shapes)
|
||||||
|
(some? vport)
|
||||||
|
(gal/adjust-to-viewport vport))]
|
||||||
|
(-> rect
|
||||||
|
(update :x to-finite 0)
|
||||||
|
(update :y to-finite 0)
|
||||||
|
(update :width to-finite 100000)
|
||||||
|
(update :height to-finite 100000))))
|
||||||
|
|
||||||
|
(declare shape-wrapper-factory)
|
||||||
|
|
||||||
|
(defn frame-wrapper-factory
|
||||||
|
[objects]
|
||||||
|
(let [shape-wrapper (shape-wrapper-factory objects)
|
||||||
|
frame-shape (frame/frame-shape shape-wrapper)]
|
||||||
|
(mf/fnc frame-wrapper
|
||||||
|
[{:keys [shape] :as props}]
|
||||||
|
(let [childs (mapv #(get objects %) (:shapes shape))
|
||||||
|
shape (gsh/transform-shape shape)]
|
||||||
|
[:> shape-container {:shape shape}
|
||||||
|
[:& frame-shape {:shape shape :childs childs}]]))))
|
||||||
|
|
||||||
|
(defn group-wrapper-factory
|
||||||
|
[objects]
|
||||||
|
(let [shape-wrapper (shape-wrapper-factory objects)
|
||||||
|
group-shape (group/group-shape shape-wrapper)]
|
||||||
|
(mf/fnc group-wrapper
|
||||||
|
[{:keys [shape] :as props}]
|
||||||
|
(let [childs (mapv #(get objects %) (:shapes shape))]
|
||||||
|
[:& group-shape {:shape shape
|
||||||
|
:is-child-selected? true
|
||||||
|
:childs childs}]))))
|
||||||
|
|
||||||
|
(defn bool-wrapper-factory
|
||||||
|
[objects]
|
||||||
|
(let [shape-wrapper (shape-wrapper-factory objects)
|
||||||
|
bool-shape (bool/bool-shape shape-wrapper)]
|
||||||
|
(mf/fnc bool-wrapper
|
||||||
|
[{:keys [shape] :as props}]
|
||||||
|
(let [childs (->> (cp/get-children (:id shape) objects)
|
||||||
|
(select-keys objects))]
|
||||||
|
[:& bool-shape {:shape shape
|
||||||
|
:childs childs}]))))
|
||||||
|
|
||||||
|
(defn svg-raw-wrapper-factory
|
||||||
|
[objects]
|
||||||
|
(let [shape-wrapper (shape-wrapper-factory objects)
|
||||||
|
svg-raw-shape (svg-raw/svg-raw-shape shape-wrapper)]
|
||||||
|
(mf/fnc svg-raw-wrapper
|
||||||
|
[{:keys [shape] :as props}]
|
||||||
|
(let [childs (mapv #(get objects %) (:shapes shape))]
|
||||||
|
(if (and (map? (:content shape))
|
||||||
|
(or (= :svg (get-in shape [:content :tag]))
|
||||||
|
(contains? shape :svg-attrs)))
|
||||||
|
[:> shape-container {:shape shape}
|
||||||
|
[:& svg-raw-shape {:shape shape
|
||||||
|
:childs childs}]]
|
||||||
|
|
||||||
|
[:& svg-raw-shape {:shape shape
|
||||||
|
:childs childs}])))))
|
||||||
|
|
||||||
|
(defn shape-wrapper-factory
|
||||||
|
[objects]
|
||||||
|
(mf/fnc shape-wrapper
|
||||||
|
[{:keys [frame shape] :as props}]
|
||||||
|
(let [group-wrapper (mf/use-memo (mf/deps objects) #(group-wrapper-factory objects))
|
||||||
|
svg-raw-wrapper (mf/use-memo (mf/deps objects) #(svg-raw-wrapper-factory objects))
|
||||||
|
bool-wrapper (mf/use-memo (mf/deps objects) #(bool-wrapper-factory objects))
|
||||||
|
frame-wrapper (mf/use-memo (mf/deps objects) #(frame-wrapper-factory objects))]
|
||||||
|
(when (and shape (not (:hidden shape)))
|
||||||
|
(let [shape (gsh/transform-shape shape)
|
||||||
|
opts #js {:shape shape}
|
||||||
|
svg-raw? (= :svg-raw (:type shape))]
|
||||||
|
(if-not svg-raw?
|
||||||
|
[:> shape-container {:shape shape}
|
||||||
|
(case (:type shape)
|
||||||
|
:text [:> text/text-shape opts]
|
||||||
|
:rect [:> rect/rect-shape opts]
|
||||||
|
:path [:> path/path-shape opts]
|
||||||
|
:image [:> image/image-shape opts]
|
||||||
|
:circle [:> circle/circle-shape opts]
|
||||||
|
:frame [:> frame-wrapper {:shape shape}]
|
||||||
|
:group [:> group-wrapper {:shape shape :frame frame}]
|
||||||
|
:bool [:> bool-wrapper {:shape shape :frame frame}]
|
||||||
|
nil)]
|
||||||
|
|
||||||
|
;; Don't wrap svg elements inside a <g> otherwise some can break
|
||||||
|
[:> svg-raw-wrapper {:shape shape :frame frame}]))))))
|
||||||
|
|
||||||
|
(defn format-viewbox
|
||||||
|
"Format a viewbox given a rectangle"
|
||||||
|
[{:keys [x y width height] :or {x 0 y 0 width 100 height 100}}]
|
||||||
|
(str/join
|
||||||
|
" "
|
||||||
|
(->> [x y width height]
|
||||||
|
(map #(ust/format-precision % viewbox-decimal-precision)))))
|
||||||
|
|
||||||
|
(mf/defc page-svg
|
||||||
|
{::mf/wrap [mf/memo]}
|
||||||
|
[{:keys [data width height thumbnails? embed? include-metadata?] :as props
|
||||||
|
:or {embed? false include-metadata? false}}]
|
||||||
|
(let [objects (:objects data)
|
||||||
|
root (get objects uuid/zero)
|
||||||
|
shapes
|
||||||
|
(->> (:shapes root)
|
||||||
|
(map #(get objects %)))
|
||||||
|
|
||||||
|
root-children
|
||||||
|
(->> shapes
|
||||||
|
(filter #(not= :frame (:type %)))
|
||||||
|
(mapcat #(cp/get-object-with-children (:id %) objects)))
|
||||||
|
|
||||||
|
vport (when (and (some? width) (some? height))
|
||||||
|
{:width width :height height})
|
||||||
|
|
||||||
|
dim (calculate-dimensions data vport)
|
||||||
|
vbox (format-viewbox dim)
|
||||||
|
background-color (get-in data [:options :background] default-color)
|
||||||
|
|
||||||
|
frame-wrapper
|
||||||
|
(mf/use-memo
|
||||||
|
(mf/deps objects)
|
||||||
|
#(frame-wrapper-factory objects))
|
||||||
|
|
||||||
|
shape-wrapper
|
||||||
|
(mf/use-memo
|
||||||
|
(mf/deps objects)
|
||||||
|
#(shape-wrapper-factory objects))]
|
||||||
|
|
||||||
|
[:& (mf/provider embed/context) {:value embed?}
|
||||||
|
[:& (mf/provider export/include-metadata-ctx) {:value include-metadata?}
|
||||||
|
[:svg {:view-box vbox
|
||||||
|
:version "1.1"
|
||||||
|
:xmlns "http://www.w3.org/2000/svg"
|
||||||
|
:xmlnsXlink "http://www.w3.org/1999/xlink"
|
||||||
|
:xmlns:penpot (when include-metadata? "https://penpot.app/xmlns")
|
||||||
|
:style {:width "100%"
|
||||||
|
:height "100%"
|
||||||
|
:background background-color}}
|
||||||
|
|
||||||
|
[:& export/export-page {:options (:options data)}]
|
||||||
|
[:& ff/fontfaces-style {:shapes root-children}]
|
||||||
|
(for [item shapes]
|
||||||
|
(let [frame? (= (:type item) :frame)]
|
||||||
|
(cond
|
||||||
|
(and frame? thumbnails? (some? (:thumbnail item)))
|
||||||
|
[:> shape-container {:shape item}
|
||||||
|
[:& frame/frame-thumbnail {:shape item}]]
|
||||||
|
|
||||||
|
frame?
|
||||||
|
[:& frame-wrapper {:shape item
|
||||||
|
:key (:id item)}]
|
||||||
|
:else
|
||||||
|
[:& shape-wrapper {:shape item
|
||||||
|
:key (:id item)}])))]]]))
|
||||||
|
|
||||||
|
(mf/defc frame-svg
|
||||||
|
{::mf/wrap [mf/memo]}
|
||||||
|
[{:keys [objects frame zoom] :or {zoom 1} :as props}]
|
||||||
|
(let [modifier (-> (gpt/point (:x frame) (:y frame))
|
||||||
|
(gpt/negate)
|
||||||
|
(gmt/translate-matrix))
|
||||||
|
|
||||||
|
frame-id (:id frame)
|
||||||
|
|
||||||
|
include-metadata? (mf/use-ctx export/include-metadata-ctx)
|
||||||
|
|
||||||
|
modifier-ids (concat [frame-id] (cp/get-children frame-id objects))
|
||||||
|
update-fn #(assoc-in %1 [%2 :modifiers :displacement] modifier)
|
||||||
|
objects (reduce update-fn objects modifier-ids)
|
||||||
|
frame (assoc-in frame [:modifiers :displacement] modifier)
|
||||||
|
|
||||||
|
width (* (:width frame) zoom)
|
||||||
|
height (* (:height frame) zoom)
|
||||||
|
vbox (format-viewbox {:width (:width frame 0) :height (:height frame 0)})
|
||||||
|
|
||||||
|
wrapper (mf/use-memo
|
||||||
|
(mf/deps objects)
|
||||||
|
#(frame-wrapper-factory objects))]
|
||||||
|
|
||||||
|
[:svg {:view-box vbox
|
||||||
|
:width (ust/format-precision width viewbox-decimal-precision)
|
||||||
|
:height (ust/format-precision height viewbox-decimal-precision)
|
||||||
|
:version "1.1"
|
||||||
|
:xmlns "http://www.w3.org/2000/svg"
|
||||||
|
:xmlnsXlink "http://www.w3.org/1999/xlink"
|
||||||
|
:xmlns:penpot (when include-metadata? "https://penpot.app/xmlns")}
|
||||||
|
[:& wrapper {:shape frame :view-box vbox}]]))
|
||||||
|
|
||||||
|
(mf/defc component-svg
|
||||||
|
{::mf/wrap [mf/memo #(mf/deferred % ts/idle-then-raf)]}
|
||||||
|
[{:keys [objects group zoom] :or {zoom 1} :as props}]
|
||||||
|
(let [modifier (-> (gpt/point (:x group) (:y group))
|
||||||
|
(gpt/negate)
|
||||||
|
(gmt/translate-matrix))
|
||||||
|
|
||||||
|
group-id (:id group)
|
||||||
|
|
||||||
|
include-metadata? (mf/use-ctx export/include-metadata-ctx)
|
||||||
|
|
||||||
|
modifier-ids (concat [group-id] (cp/get-children group-id objects))
|
||||||
|
|
||||||
|
update-fn #(assoc-in %1 [%2 :modifiers :displacement] modifier)
|
||||||
|
modifiers (reduce update-fn {} modifier-ids)
|
||||||
|
objects (gsh/merge-modifiers objects modifiers)
|
||||||
|
|
||||||
|
group (get objects group-id)
|
||||||
|
width (* (:width group) zoom)
|
||||||
|
height (* (:height group) zoom)
|
||||||
|
vbox (format-viewbox {:width (:width group 0)
|
||||||
|
:height (:height group 0)})
|
||||||
|
group-wrapper
|
||||||
|
(mf/use-memo
|
||||||
|
(mf/deps objects)
|
||||||
|
#(group-wrapper-factory objects))]
|
||||||
|
|
||||||
|
[:svg {:view-box vbox
|
||||||
|
:width (ust/format-precision width viewbox-decimal-precision)
|
||||||
|
:height (ust/format-precision height viewbox-decimal-precision)
|
||||||
|
:version "1.1"
|
||||||
|
:xmlns "http://www.w3.org/2000/svg"
|
||||||
|
:xmlnsXlink "http://www.w3.org/1999/xlink"
|
||||||
|
:xmlns:penpot (when include-metadata? "https://penpot.app/xmlns")}
|
||||||
|
[:> shape-container {:shape group}
|
||||||
|
[:& group-wrapper {:shape group :view-box vbox}]]]))
|
||||||
|
|
||||||
|
(mf/defc component-symbol
|
||||||
|
[{:keys [id data] :as props}]
|
||||||
|
|
||||||
|
(let [{:keys [name path objects]} data
|
||||||
|
root (get objects id)
|
||||||
|
|
||||||
|
{:keys [width height]} (:selrect root)
|
||||||
|
vbox (format-viewbox {:width width :height height})
|
||||||
|
|
||||||
|
modifier (-> (gpt/point (:x root) (:y root))
|
||||||
|
(gpt/negate)
|
||||||
|
(gmt/translate-matrix))
|
||||||
|
|
||||||
|
modifier-ids (concat [id] (cp/get-children id objects))
|
||||||
|
update-fn #(assoc-in %1 [%2 :modifiers :displacement] modifier)
|
||||||
|
objects (reduce update-fn objects modifier-ids)
|
||||||
|
root (assoc-in root [:modifiers :displacement] modifier)
|
||||||
|
|
||||||
|
group-wrapper
|
||||||
|
(mf/use-memo
|
||||||
|
(mf/deps objects)
|
||||||
|
#(group-wrapper-factory objects))]
|
||||||
|
|
||||||
|
[:> "symbol" #js {:id (str id)
|
||||||
|
:viewBox vbox
|
||||||
|
"penpot:path" path}
|
||||||
|
[:title name]
|
||||||
|
[:> shape-container {:shape root}
|
||||||
|
[:& group-wrapper {:shape root :view-box vbox}]]]))
|
||||||
|
|
||||||
|
(mf/defc components-sprite-svg
|
||||||
|
{::mf/wrap-props false}
|
||||||
|
[props]
|
||||||
|
|
||||||
|
(let [data (obj/get props "data")
|
||||||
|
children (obj/get props "children")
|
||||||
|
embed? (obj/get props "embed?")
|
||||||
|
include-metadata? (obj/get props "include-metadata?")]
|
||||||
|
[:& (mf/provider embed/context) {:value embed?}
|
||||||
|
[:& (mf/provider export/include-metadata-ctx) {:value include-metadata?}
|
||||||
|
[:svg {:version "1.1"
|
||||||
|
:xmlns "http://www.w3.org/2000/svg"
|
||||||
|
:xmlnsXlink "http://www.w3.org/1999/xlink"
|
||||||
|
:xmlns:penpot (when include-metadata? "https://penpot.app/xmlns")
|
||||||
|
:style {:width "100vw"
|
||||||
|
:height "100vh"
|
||||||
|
:display (when-not (some? children) "none")}}
|
||||||
|
[:defs
|
||||||
|
(for [[component-id component-data] (:components data)]
|
||||||
|
[:& component-symbol {:id component-id
|
||||||
|
:key (str component-id)
|
||||||
|
:data component-data}])]
|
||||||
|
|
||||||
|
children]]]))
|
||||||
|
|
||||||
|
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||||
|
;; RENDERING
|
||||||
|
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||||
|
|
||||||
(defn- get-image-data [shape]
|
(defn- get-image-data [shape]
|
||||||
(cond
|
(cond
|
||||||
|
|
@ -29,7 +358,7 @@
|
||||||
:else
|
:else
|
||||||
[]))
|
[]))
|
||||||
|
|
||||||
(defn populate-images-cache
|
(defn- populate-images-cache
|
||||||
[objects]
|
[objects]
|
||||||
(let [images (->> objects
|
(let [images (->> objects
|
||||||
(vals)
|
(vals)
|
||||||
|
|
@ -41,7 +370,7 @@
|
||||||
(defn populate-fonts-cache [objects]
|
(defn populate-fonts-cache [objects]
|
||||||
(let [texts (->> objects
|
(let [texts (->> objects
|
||||||
(vals)
|
(vals)
|
||||||
(filterv text?)
|
(filterv #(= (:type %) :text))
|
||||||
(mapv :content)) ]
|
(mapv :content)) ]
|
||||||
|
|
||||||
(->> (rx/from texts)
|
(->> (rx/from texts)
|
||||||
|
|
@ -63,7 +392,7 @@
|
||||||
(->> (rx/of data)
|
(->> (rx/of data)
|
||||||
(rx/map
|
(rx/map
|
||||||
(fn [data]
|
(fn [data]
|
||||||
(let [elem (mf/element exports/page-svg #js {:data data :embed? true :include-metadata? true})]
|
(let [elem (mf/element page-svg #js {:data data :embed? true :include-metadata? true})]
|
||||||
(rds/renderToStaticMarkup elem)))))))
|
(rds/renderToStaticMarkup elem)))))))
|
||||||
|
|
||||||
(defn render-components
|
(defn render-components
|
||||||
|
|
@ -82,5 +411,5 @@
|
||||||
(->> (rx/of data)
|
(->> (rx/of data)
|
||||||
(rx/map
|
(rx/map
|
||||||
(fn [data]
|
(fn [data]
|
||||||
(let [elem (mf/element exports/components-sprite-svg #js {:data data :embed? true :include-metadata? true})]
|
(let [elem (mf/element components-sprite-svg #js {:data data :embed? true :include-metadata? true})]
|
||||||
(rds/renderToStaticMarkup elem))))))))
|
(rds/renderToStaticMarkup elem))))))))
|
||||||
|
|
|
||||||
|
|
@ -13,12 +13,11 @@
|
||||||
[app.common.pages :as cp]
|
[app.common.pages :as cp]
|
||||||
[app.common.uuid :as uuid]
|
[app.common.uuid :as uuid]
|
||||||
[app.main.data.fonts :as df]
|
[app.main.data.fonts :as df]
|
||||||
[app.main.exports :as exports]
|
[app.main.render :as render]
|
||||||
[app.main.repo :as repo]
|
[app.main.repo :as repo]
|
||||||
[app.main.store :as st]
|
[app.main.store :as st]
|
||||||
[app.main.ui.context :as muc]
|
[app.main.ui.context :as muc]
|
||||||
[app.main.ui.shapes.embed :as embed]
|
[app.main.ui.shapes.embed :as embed]
|
||||||
[app.main.ui.shapes.export :as ed]
|
|
||||||
[app.main.ui.shapes.filters :as filters]
|
[app.main.ui.shapes.filters :as filters]
|
||||||
[app.main.ui.shapes.shape :refer [shape-container]]
|
[app.main.ui.shapes.shape :refer [shape-container]]
|
||||||
[app.util.dom :as dom]
|
[app.util.dom :as dom]
|
||||||
|
|
@ -28,15 +27,13 @@
|
||||||
|
|
||||||
(defn calc-bounds
|
(defn calc-bounds
|
||||||
[object objects]
|
[object objects]
|
||||||
|
(let [xf-get-bounds (comp (map #(get objects %)) (map #(calc-bounds % objects)))
|
||||||
(let [xf-get-bounds (comp (map #(get objects %)) (map #(calc-bounds % objects)))
|
padding (filters/calculate-padding object)
|
||||||
padding (filters/calculate-padding object)
|
obj-bounds (-> (filters/get-filters-bounds object)
|
||||||
obj-bounds
|
(update :x - padding)
|
||||||
(-> (filters/get-filters-bounds object)
|
(update :y - padding)
|
||||||
(update :x - padding)
|
(update :width + (* 2 padding))
|
||||||
(update :y - padding)
|
(update :height + (* 2 padding)))]
|
||||||
(update :width + (* 2 padding))
|
|
||||||
(update :height + (* 2 padding)))]
|
|
||||||
|
|
||||||
(cond
|
(cond
|
||||||
(and (= :group (:type object))
|
(and (= :group (:type object))
|
||||||
|
|
@ -59,8 +56,6 @@
|
||||||
(:id object)
|
(:id object)
|
||||||
(:frame-id object))
|
(:frame-id object))
|
||||||
|
|
||||||
include-metadata? (mf/use-ctx ed/include-metadata-ctx)
|
|
||||||
|
|
||||||
modifier (-> (gpt/point (:x object) (:y object))
|
modifier (-> (gpt/point (:x object) (:y object))
|
||||||
(gpt/negate)
|
(gpt/negate)
|
||||||
(gmt/translate-matrix))
|
(gmt/translate-matrix))
|
||||||
|
|
@ -85,17 +80,17 @@
|
||||||
frame-wrapper
|
frame-wrapper
|
||||||
(mf/use-memo
|
(mf/use-memo
|
||||||
(mf/deps objects)
|
(mf/deps objects)
|
||||||
#(exports/frame-wrapper-factory objects))
|
#(render/frame-wrapper-factory objects))
|
||||||
|
|
||||||
group-wrapper
|
group-wrapper
|
||||||
(mf/use-memo
|
(mf/use-memo
|
||||||
(mf/deps objects)
|
(mf/deps objects)
|
||||||
#(exports/group-wrapper-factory objects))
|
#(render/group-wrapper-factory objects))
|
||||||
|
|
||||||
shape-wrapper
|
shape-wrapper
|
||||||
(mf/use-memo
|
(mf/use-memo
|
||||||
(mf/deps objects)
|
(mf/deps objects)
|
||||||
#(exports/shape-wrapper-factory objects))
|
#(render/shape-wrapper-factory objects))
|
||||||
|
|
||||||
text-shapes
|
text-shapes
|
||||||
(->> objects
|
(->> objects
|
||||||
|
|
@ -115,7 +110,6 @@
|
||||||
:version "1.1"
|
:version "1.1"
|
||||||
:xmlns "http://www.w3.org/2000/svg"
|
:xmlns "http://www.w3.org/2000/svg"
|
||||||
:xmlnsXlink "http://www.w3.org/1999/xlink"
|
:xmlnsXlink "http://www.w3.org/1999/xlink"
|
||||||
:xmlns:penpot (when include-metadata? "https://penpot.app/xmlns")
|
|
||||||
;; Fix Chromium bug about color of html texts
|
;; Fix Chromium bug about color of html texts
|
||||||
;; https://bugs.chromium.org/p/chromium/issues/detail?id=1244560#c5
|
;; https://bugs.chromium.org/p/chromium/issues/detail?id=1244560#c5
|
||||||
:style {:-webkit-print-color-adjust :exact}}
|
:style {:-webkit-print-color-adjust :exact}}
|
||||||
|
|
@ -137,7 +131,7 @@
|
||||||
:version "1.1"
|
:version "1.1"
|
||||||
:xmlns "http://www.w3.org/2000/svg"
|
:xmlns "http://www.w3.org/2000/svg"
|
||||||
:xmlnsXlink "http://www.w3.org/1999/xlink"}
|
:xmlnsXlink "http://www.w3.org/1999/xlink"}
|
||||||
[:& shape-wrapper {:shape (-> object (assoc :x 0 :y 0))}]]]))]))
|
[:& shape-wrapper {:shape (assoc object :x 0 :y 0)}]]]))]))
|
||||||
|
|
||||||
(defn- adapt-root-frame
|
(defn- adapt-root-frame
|
||||||
[objects object-id]
|
[objects object-id]
|
||||||
|
|
@ -151,11 +145,6 @@
|
||||||
(assoc objects (:id object) object))
|
(assoc objects (:id object) object))
|
||||||
objects))
|
objects))
|
||||||
|
|
||||||
|
|
||||||
;; NOTE: for now, it is ok download the entire file for render only
|
|
||||||
;; single page but in a future we need consider to add a specific
|
|
||||||
;; backend entry point for download only the data of single page.
|
|
||||||
|
|
||||||
(mf/defc render-object
|
(mf/defc render-object
|
||||||
[{:keys [file-id page-id object-id render-texts?] :as props}]
|
[{:keys [file-id page-id object-id render-texts?] :as props}]
|
||||||
(let [objects (mf/use-state nil)]
|
(let [objects (mf/use-state nil)]
|
||||||
|
|
@ -194,7 +183,7 @@
|
||||||
|
|
||||||
(when @file
|
(when @file
|
||||||
[:*
|
[:*
|
||||||
[:& exports/components-sprite-svg {:data (:data @file) :embed true}
|
[:& render/components-sprite-svg {:data (:data @file) :embed true}
|
||||||
|
|
||||||
(when (some? component-id)
|
(when (some? component-id)
|
||||||
[:use {:x 0 :y 0
|
[:use {:x 0 :y 0
|
||||||
|
|
|
||||||
|
|
@ -5,14 +5,17 @@
|
||||||
;; Copyright (c) UXBOX Labs SL
|
;; Copyright (c) UXBOX Labs SL
|
||||||
|
|
||||||
(ns app.main.ui.shapes.export
|
(ns app.main.ui.shapes.export
|
||||||
(:require
|
"Components that generates penpot specific svg nodes with
|
||||||
[app.common.data :as d]
|
exportation data. This xml nodes serves mainly to enable
|
||||||
[app.common.geom.shapes :as gsh]
|
importation."
|
||||||
[app.util.json :as json]
|
(:require
|
||||||
[app.util.object :as obj]
|
[app.common.data :as d]
|
||||||
[app.util.svg :as usvg]
|
[app.common.geom.shapes :as gsh]
|
||||||
[cuerdas.core :as str]
|
[app.util.json :as json]
|
||||||
[rumext.alpha :as mf]))
|
[app.util.object :as obj]
|
||||||
|
[app.util.svg :as usvg]
|
||||||
|
[cuerdas.core :as str]
|
||||||
|
[rumext.alpha :as mf]))
|
||||||
|
|
||||||
(def include-metadata-ctx (mf/create-context false))
|
(def include-metadata-ctx (mf/create-context false))
|
||||||
|
|
||||||
|
|
@ -128,21 +131,20 @@
|
||||||
[(str "penpot:" (d/name k)) v])]
|
[(str "penpot:" (d/name k)) v])]
|
||||||
(into {} (map prefix-entry) m)))
|
(into {} (map prefix-entry) m)))
|
||||||
|
|
||||||
|
(defn- export-grid-data [{:keys [grids]}]
|
||||||
(mf/defc export-grid-data
|
(mf/html
|
||||||
[{:keys [grids]}]
|
[:> "penpot:grids" #js {}
|
||||||
[:> "penpot:grids" #js {}
|
(for [{:keys [type display params]} grids]
|
||||||
(for [{:keys [type display params]} grids]
|
(let [props (->> (dissoc params :color)
|
||||||
(let [props (->> (dissoc 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
|
(mf/defc export-flows
|
||||||
[{:keys [flows]}]
|
[{:keys [flows]}]
|
||||||
|
|
@ -167,33 +169,34 @@
|
||||||
(when (seq flows)
|
(when (seq flows)
|
||||||
[:& export-flows {:flows flows}])]))))
|
[:& export-flows {:flows flows}])]))))
|
||||||
|
|
||||||
(mf/defc export-shadow-data
|
(defn- export-shadow-data [{:keys [shadow]}]
|
||||||
[{:keys [shadow]}]
|
(mf/html
|
||||||
(for [{:keys [style hidden color offset-x offset-y blur spread]} shadow]
|
(for [{:keys [style hidden color offset-x offset-y blur spread]} shadow]
|
||||||
[:> "penpot:shadow"
|
[:> "penpot:shadow"
|
||||||
#js {:penpot:shadow-type (d/name style)
|
#js {:penpot:shadow-type (d/name style)
|
||||||
:penpot:hidden (str hidden)
|
:penpot:hidden (str hidden)
|
||||||
:penpot:color (str (:color color))
|
:penpot:color (str (:color color))
|
||||||
:penpot:opacity (str (:opacity color))
|
:penpot:opacity (str (:opacity color))
|
||||||
:penpot:offset-x (str offset-x)
|
:penpot:offset-x (str offset-x)
|
||||||
:penpot:offset-y (str offset-y)
|
:penpot:offset-y (str offset-y)
|
||||||
:penpot:blur (str blur)
|
:penpot:blur (str blur)
|
||||||
:penpot:spread (str spread)}]))
|
:penpot:spread (str spread)}])))
|
||||||
|
|
||||||
(mf/defc export-blur-data [{:keys [blur]}]
|
(defn- export-blur-data [{:keys [blur]}]
|
||||||
(when (some? blur)
|
(when-let [{:keys [type hidden value]} blur]
|
||||||
(let [{:keys [type hidden value]} blur]
|
(mf/html
|
||||||
[:> "penpot:blur"
|
[:> "penpot:blur"
|
||||||
#js {:penpot:blur-type (d/name type)
|
#js {:penpot:blur-type (d/name type)
|
||||||
:penpot:hidden (str hidden)
|
:penpot:hidden (str hidden)
|
||||||
:penpot:value (str value)}])))
|
:penpot:value (str value)}])))
|
||||||
|
|
||||||
(mf/defc export-exports-data [{:keys [exports]}]
|
(defn export-exports-data [{:keys [exports]}]
|
||||||
(for [{:keys [scale suffix type]} exports]
|
(mf/html
|
||||||
[:> "penpot:export"
|
(for [{:keys [scale suffix type]} exports]
|
||||||
#js {:penpot:type (d/name type)
|
[:> "penpot:export"
|
||||||
:penpot:suffix suffix
|
#js {:penpot:type (d/name type)
|
||||||
:penpot:scale (str scale)}]))
|
:penpot:suffix suffix
|
||||||
|
:penpot:scale (str scale)}])))
|
||||||
|
|
||||||
(defn style->str
|
(defn style->str
|
||||||
[style]
|
[style]
|
||||||
|
|
@ -201,68 +204,70 @@
|
||||||
(map (fn [[key val]] (str (d/name key) ":" val)))
|
(map (fn [[key val]] (str (d/name key) ":" val)))
|
||||||
(str/join "; ")))
|
(str/join "; ")))
|
||||||
|
|
||||||
(mf/defc export-svg-data [shape]
|
(defn- export-svg-data [shape]
|
||||||
[:*
|
(mf/html
|
||||||
(when (contains? shape :svg-attrs)
|
[:*
|
||||||
(let [svg-transform (get shape :svg-transform)
|
(when (contains? shape :svg-attrs)
|
||||||
svg-attrs (->> shape :svg-attrs keys (mapv d/name) (str/join ",") )
|
(let [svg-transform (get shape :svg-transform)
|
||||||
svg-defs (->> shape :svg-defs keys (mapv d/name) (str/join ","))]
|
svg-attrs (->> shape :svg-attrs keys (mapv d/name) (str/join ",") )
|
||||||
[:> "penpot:svg-import"
|
svg-defs (->> shape :svg-defs keys (mapv d/name) (str/join ","))]
|
||||||
#js {:penpot:svg-attrs (when-not (empty? svg-attrs) svg-attrs)
|
[:> "penpot:svg-import"
|
||||||
;; Style and filter are special properties so we need to save it otherwise will be indistingishible from
|
#js {:penpot:svg-attrs (when-not (empty? svg-attrs) svg-attrs)
|
||||||
;; standard properties
|
;; Style and filter are special properties so we need to save it otherwise will be indistingishible from
|
||||||
:penpot:svg-style (when (contains? (:svg-attrs shape) :style) (style->str (get-in shape [:svg-attrs :style])))
|
;; standard properties
|
||||||
:penpot:svg-filter (when (contains? (:svg-attrs shape) :filter) (get-in shape [:svg-attrs :filter]))
|
:penpot:svg-style (when (contains? (:svg-attrs shape) :style) (style->str (get-in shape [:svg-attrs :style])))
|
||||||
:penpot:svg-defs (when-not (empty? svg-defs) svg-defs)
|
:penpot:svg-filter (when (contains? (:svg-attrs shape) :filter) (get-in shape [:svg-attrs :filter]))
|
||||||
:penpot:svg-transform (when svg-transform (str svg-transform))
|
:penpot:svg-defs (when-not (empty? svg-defs) svg-defs)
|
||||||
:penpot:svg-viewbox-x (get-in shape [:svg-viewbox :x])
|
:penpot:svg-transform (when svg-transform (str svg-transform))
|
||||||
:penpot:svg-viewbox-y (get-in shape [:svg-viewbox :y])
|
:penpot:svg-viewbox-x (get-in shape [:svg-viewbox :x])
|
||||||
:penpot:svg-viewbox-width (get-in shape [:svg-viewbox :width])
|
:penpot:svg-viewbox-y (get-in shape [:svg-viewbox :y])
|
||||||
:penpot:svg-viewbox-height (get-in shape [:svg-viewbox :height])}
|
:penpot:svg-viewbox-width (get-in shape [:svg-viewbox :width])
|
||||||
(for [[def-id def-xml] (:svg-defs shape)]
|
:penpot:svg-viewbox-height (get-in shape [:svg-viewbox :height])}
|
||||||
[:> "penpot:svg-def" #js {:def-id def-id}
|
(for [[def-id def-xml] (:svg-defs shape)]
|
||||||
[:& render-xml {:xml def-xml}]])]))
|
[:> "penpot:svg-def" #js {:def-id def-id}
|
||||||
|
[:& render-xml {:xml def-xml}]])]))
|
||||||
|
|
||||||
(when (= (:type shape) :svg-raw)
|
(when (= (:type shape) :svg-raw)
|
||||||
(let [props
|
(let [props
|
||||||
(-> (obj/new)
|
(-> (obj/new)
|
||||||
(obj/set! "penpot:x" (:x shape))
|
(obj/set! "penpot:x" (:x shape))
|
||||||
(obj/set! "penpot:y" (:y shape))
|
(obj/set! "penpot:y" (:y shape))
|
||||||
(obj/set! "penpot:width" (:width shape))
|
(obj/set! "penpot:width" (:width shape))
|
||||||
(obj/set! "penpot:height" (:height shape))
|
(obj/set! "penpot:height" (:height shape))
|
||||||
(obj/set! "penpot:tag" (-> (get-in shape [:content :tag]) d/name))
|
(obj/set! "penpot:tag" (-> (get-in shape [:content :tag]) d/name))
|
||||||
(obj/merge! (-> (get-in shape [:content :attrs])
|
(obj/merge! (-> (get-in shape [:content :attrs])
|
||||||
(clj->js))))]
|
(clj->js))))]
|
||||||
[:> "penpot:svg-content" props
|
[:> "penpot:svg-content" props
|
||||||
(for [leaf (->> shape :content :content (filter string?))]
|
(for [leaf (->> shape :content :content (filter string?))]
|
||||||
[:> "penpot:svg-child" {} leaf])]))])
|
[:> "penpot:svg-child" {} leaf])]))]))
|
||||||
|
|
||||||
(mf/defc export-interactions-data
|
(defn- export-interactions-data [{:keys [interactions]}]
|
||||||
[{:keys [interactions]}]
|
(when-let [interactions (seq interactions)]
|
||||||
(when-not (empty? interactions)
|
(mf/html
|
||||||
[:> "penpot:interactions" #js {}
|
[:> "penpot:interactions" #js {}
|
||||||
(for [interaction interactions]
|
(for [interaction interactions]
|
||||||
[:> "penpot:interaction"
|
[:> "penpot:interaction"
|
||||||
#js {:penpot:event-type (d/name (:event-type interaction))
|
#js {:penpot:event-type (d/name (:event-type interaction))
|
||||||
:penpot:action-type (d/name (:action-type interaction))
|
:penpot:action-type (d/name (:action-type interaction))
|
||||||
:penpot:delay ((d/nilf str) (:delay interaction))
|
:penpot:delay ((d/nilf str) (:delay interaction))
|
||||||
:penpot:destination ((d/nilf str) (:destination interaction))
|
:penpot:destination ((d/nilf str) (:destination interaction))
|
||||||
:penpot:overlay-pos-type ((d/nilf d/name) (:overlay-pos-type 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-x ((d/nilf get-in) interaction [:overlay-position :x])
|
||||||
:penpot:overlay-position-y ((d/nilf get-in) interaction [:overlay-position :y])
|
:penpot:overlay-position-y ((d/nilf get-in) interaction [:overlay-position :y])
|
||||||
:penpot:url (:url interaction)
|
:penpot:url (:url interaction)
|
||||||
:penpot:close-click-outside ((d/nilf str) (:close-click-outside interaction))
|
:penpot:close-click-outside ((d/nilf str) (:close-click-outside interaction))
|
||||||
:penpot:background-overlay ((d/nilf str) (:background-overlay interaction))
|
:penpot:background-overlay ((d/nilf str) (:background-overlay interaction))
|
||||||
:penpot:preserve-scroll ((d/nilf str) (:preserve-scroll interaction))}])]))
|
:penpot:preserve-scroll ((d/nilf str) (:preserve-scroll interaction))}])])))
|
||||||
|
|
||||||
(mf/defc export-data
|
(mf/defc export-data
|
||||||
[{:keys [shape]}]
|
[{:keys [shape]}]
|
||||||
(let [props (-> (obj/new) (add-data shape) (add-library-refs shape))]
|
(let [props (-> (obj/new) (add-data shape) (add-library-refs shape))]
|
||||||
|
(js/console.log props)
|
||||||
[:> "penpot:shape" props
|
[:> "penpot:shape" props
|
||||||
[:& export-shadow-data shape]
|
(export-shadow-data shape)
|
||||||
[:& export-blur-data shape]
|
(export-blur-data shape)
|
||||||
[:& export-exports-data shape]
|
(export-exports-data shape)
|
||||||
[:& export-svg-data shape]
|
(export-svg-data shape)
|
||||||
[:& export-interactions-data shape]
|
(export-interactions-data shape)
|
||||||
[:& export-grid-data shape]]))
|
(export-grid-data shape)]))
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
(:require
|
(:require
|
||||||
[app.common.data :as d]
|
[app.common.data :as d]
|
||||||
[app.main.data.viewer :as dv]
|
[app.main.data.viewer :as dv]
|
||||||
[app.main.exports :as exports]
|
[app.main.render :as render]
|
||||||
[app.main.store :as st]
|
[app.main.store :as st]
|
||||||
[app.main.ui.icons :as i]
|
[app.main.ui.icons :as i]
|
||||||
[app.util.dom :as dom]
|
[app.util.dom :as dom]
|
||||||
|
|
@ -77,7 +77,7 @@
|
||||||
[:div.thumbnail-item {:on-click #(on-click % index)}
|
[:div.thumbnail-item {:on-click #(on-click % index)}
|
||||||
[:div.thumbnail-preview
|
[:div.thumbnail-preview
|
||||||
{:class (dom/classnames :selected selected?)}
|
{:class (dom/classnames :selected selected?)}
|
||||||
[:& exports/frame-svg {:frame frame :objects objects}]]
|
[:& render/frame-svg {:frame frame :objects objects}]]
|
||||||
[:div.thumbnail-info
|
[:div.thumbnail-info
|
||||||
[:span.name {:title (:name frame)} (:name frame)]]])
|
[:span.name {:title (:name frame)} (:name frame)]]])
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -20,8 +20,8 @@
|
||||||
[app.main.data.workspace.state-helpers :as wsh]
|
[app.main.data.workspace.state-helpers :as wsh]
|
||||||
[app.main.data.workspace.texts :as dwt]
|
[app.main.data.workspace.texts :as dwt]
|
||||||
[app.main.data.workspace.undo :as dwu]
|
[app.main.data.workspace.undo :as dwu]
|
||||||
[app.main.exports :as exports]
|
|
||||||
[app.main.refs :as refs]
|
[app.main.refs :as refs]
|
||||||
|
[app.main.render :refer [component-svg]]
|
||||||
[app.main.store :as st]
|
[app.main.store :as st]
|
||||||
[app.main.ui.components.color-bullet :as bc]
|
[app.main.ui.components.color-bullet :as bc]
|
||||||
[app.main.ui.components.context-menu :refer [context-menu]]
|
[app.main.ui.components.context-menu :refer [context-menu]]
|
||||||
|
|
@ -278,8 +278,8 @@
|
||||||
:on-click #(on-asset-click % (:id component) nil)
|
:on-click #(on-asset-click % (:id component) nil)
|
||||||
:on-context-menu (on-context-menu (:id component))
|
:on-context-menu (on-context-menu (:id component))
|
||||||
:on-drag-start (partial on-drag-start component)}
|
:on-drag-start (partial on-drag-start component)}
|
||||||
[:& exports/component-svg {:group (get-in component [:objects (:id component)])
|
[:& component-svg {:group (get-in component [:objects (:id component)])
|
||||||
:objects (:objects component)}]
|
:objects (:objects component)}]
|
||||||
(let [renaming? (= renaming (:id component))]
|
(let [renaming? (= renaming (:id component))]
|
||||||
[:& editable-label
|
[:& editable-label
|
||||||
{:class-name (dom/classnames
|
{:class-name (dom/classnames
|
||||||
|
|
|
||||||
|
|
@ -9,8 +9,8 @@
|
||||||
["react-dom/server" :as rds]
|
["react-dom/server" :as rds]
|
||||||
[app.common.uri :as u]
|
[app.common.uri :as u]
|
||||||
[app.config :as cfg]
|
[app.config :as cfg]
|
||||||
[app.main.exports :as exports]
|
|
||||||
[app.main.fonts :as fonts]
|
[app.main.fonts :as fonts]
|
||||||
|
[app.main.render :as render]
|
||||||
[app.util.http :as http]
|
[app.util.http :as http]
|
||||||
[app.worker.impl :as impl]
|
[app.worker.impl :as impl]
|
||||||
[beicon.core :as rx]
|
[beicon.core :as rx]
|
||||||
|
|
@ -50,7 +50,7 @@
|
||||||
(let [prev (get @cache ckey)]
|
(let [prev (get @cache ckey)]
|
||||||
(if (= (:data prev) data)
|
(if (= (:data prev) data)
|
||||||
(:result prev)
|
(:result prev)
|
||||||
(let [elem (mf/element exports/page-svg #js {:data data :width "290" :height "150" :thumbnails? true})
|
(let [elem (mf/element render/page-svg #js {:data data :width "290" :height "150" :thumbnails? true})
|
||||||
result (rds/renderToStaticMarkup elem)]
|
result (rds/renderToStaticMarkup elem)]
|
||||||
(swap! cache assoc ckey {:data data :result result})
|
(swap! cache assoc ckey {:data data :result result})
|
||||||
result))))
|
result))))
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue