mirror of
https://github.com/penpot/penpot.git
synced 2025-03-13 00:01:51 -05: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
|
||||
|
||||
(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
|
||||
["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.main.exports :as exports]
|
||||
[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.object :as obj]
|
||||
[app.util.strings :as ust]
|
||||
[app.util.timers :as ts]
|
||||
[beicon.core :as rx]
|
||||
[clojure.set :as set]
|
||||
[cuerdas.core :as str]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
(defn- text? [{type :type}]
|
||||
(= type :text))
|
||||
(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 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]
|
||||
(cond
|
||||
|
|
@ -29,7 +358,7 @@
|
|||
:else
|
||||
[]))
|
||||
|
||||
(defn populate-images-cache
|
||||
(defn- populate-images-cache
|
||||
[objects]
|
||||
(let [images (->> objects
|
||||
(vals)
|
||||
|
|
@ -41,7 +370,7 @@
|
|||
(defn populate-fonts-cache [objects]
|
||||
(let [texts (->> objects
|
||||
(vals)
|
||||
(filterv text?)
|
||||
(filterv #(= (:type %) :text))
|
||||
(mapv :content)) ]
|
||||
|
||||
(->> (rx/from texts)
|
||||
|
|
@ -63,7 +392,7 @@
|
|||
(->> (rx/of data)
|
||||
(rx/map
|
||||
(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)))))))
|
||||
|
||||
(defn render-components
|
||||
|
|
@ -82,5 +411,5 @@
|
|||
(->> (rx/of data)
|
||||
(rx/map
|
||||
(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))))))))
|
||||
|
|
|
|||
|
|
@ -13,12 +13,11 @@
|
|||
[app.common.pages :as cp]
|
||||
[app.common.uuid :as uuid]
|
||||
[app.main.data.fonts :as df]
|
||||
[app.main.exports :as exports]
|
||||
[app.main.render :as render]
|
||||
[app.main.repo :as repo]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.context :as muc]
|
||||
[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.shape :refer [shape-container]]
|
||||
[app.util.dom :as dom]
|
||||
|
|
@ -28,11 +27,9 @@
|
|||
|
||||
(defn calc-bounds
|
||||
[object objects]
|
||||
|
||||
(let [xf-get-bounds (comp (map #(get objects %)) (map #(calc-bounds % objects)))
|
||||
padding (filters/calculate-padding object)
|
||||
obj-bounds
|
||||
(-> (filters/get-filters-bounds object)
|
||||
obj-bounds (-> (filters/get-filters-bounds object)
|
||||
(update :x - padding)
|
||||
(update :y - padding)
|
||||
(update :width + (* 2 padding))
|
||||
|
|
@ -59,8 +56,6 @@
|
|||
(:id object)
|
||||
(:frame-id object))
|
||||
|
||||
include-metadata? (mf/use-ctx ed/include-metadata-ctx)
|
||||
|
||||
modifier (-> (gpt/point (:x object) (:y object))
|
||||
(gpt/negate)
|
||||
(gmt/translate-matrix))
|
||||
|
|
@ -85,17 +80,17 @@
|
|||
frame-wrapper
|
||||
(mf/use-memo
|
||||
(mf/deps objects)
|
||||
#(exports/frame-wrapper-factory objects))
|
||||
#(render/frame-wrapper-factory objects))
|
||||
|
||||
group-wrapper
|
||||
(mf/use-memo
|
||||
(mf/deps objects)
|
||||
#(exports/group-wrapper-factory objects))
|
||||
#(render/group-wrapper-factory objects))
|
||||
|
||||
shape-wrapper
|
||||
(mf/use-memo
|
||||
(mf/deps objects)
|
||||
#(exports/shape-wrapper-factory objects))
|
||||
#(render/shape-wrapper-factory objects))
|
||||
|
||||
text-shapes
|
||||
(->> objects
|
||||
|
|
@ -115,7 +110,6 @@
|
|||
: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")
|
||||
;; Fix Chromium bug about color of html texts
|
||||
;; https://bugs.chromium.org/p/chromium/issues/detail?id=1244560#c5
|
||||
:style {:-webkit-print-color-adjust :exact}}
|
||||
|
|
@ -137,7 +131,7 @@
|
|||
:version "1.1"
|
||||
:xmlns "http://www.w3.org/2000/svg"
|
||||
: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
|
||||
[objects object-id]
|
||||
|
|
@ -151,11 +145,6 @@
|
|||
(assoc objects (:id object) object))
|
||||
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
|
||||
[{:keys [file-id page-id object-id render-texts?] :as props}]
|
||||
(let [objects (mf/use-state nil)]
|
||||
|
|
@ -194,7 +183,7 @@
|
|||
|
||||
(when @file
|
||||
[:*
|
||||
[:& exports/components-sprite-svg {:data (:data @file) :embed true}
|
||||
[:& render/components-sprite-svg {:data (:data @file) :embed true}
|
||||
|
||||
(when (some? component-id)
|
||||
[:use {:x 0 :y 0
|
||||
|
|
|
|||
|
|
@ -5,6 +5,9 @@
|
|||
;; Copyright (c) UXBOX Labs SL
|
||||
|
||||
(ns app.main.ui.shapes.export
|
||||
"Components that generates penpot specific svg nodes with
|
||||
exportation data. This xml nodes serves mainly to enable
|
||||
importation."
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.common.geom.shapes :as gsh]
|
||||
|
|
@ -128,9 +131,8 @@
|
|||
[(str "penpot:" (d/name k)) v])]
|
||||
(into {} (map prefix-entry) m)))
|
||||
|
||||
|
||||
(mf/defc export-grid-data
|
||||
[{:keys [grids]}]
|
||||
(defn- export-grid-data [{:keys [grids]}]
|
||||
(mf/html
|
||||
[:> "penpot:grids" #js {}
|
||||
(for [{:keys [type display params]} grids]
|
||||
(let [props (->> (dissoc params :color)
|
||||
|
|
@ -142,7 +144,7 @@
|
|||
(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))))]))])
|
||||
(obj/set! "penpot:display" (str display))))]))]))
|
||||
|
||||
(mf/defc export-flows
|
||||
[{:keys [flows]}]
|
||||
|
|
@ -167,8 +169,8 @@
|
|||
(when (seq flows)
|
||||
[:& export-flows {:flows flows}])]))))
|
||||
|
||||
(mf/defc export-shadow-data
|
||||
[{:keys [shadow]}]
|
||||
(defn- export-shadow-data [{:keys [shadow]}]
|
||||
(mf/html
|
||||
(for [{:keys [style hidden color offset-x offset-y blur spread]} shadow]
|
||||
[:> "penpot:shadow"
|
||||
#js {:penpot:shadow-type (d/name style)
|
||||
|
|
@ -178,22 +180,23 @@
|
|||
:penpot:offset-x (str offset-x)
|
||||
:penpot:offset-y (str offset-y)
|
||||
:penpot:blur (str blur)
|
||||
:penpot:spread (str spread)}]))
|
||||
:penpot:spread (str spread)}])))
|
||||
|
||||
(mf/defc export-blur-data [{:keys [blur]}]
|
||||
(when (some? blur)
|
||||
(let [{:keys [type hidden value]} blur]
|
||||
(defn- export-blur-data [{:keys [blur]}]
|
||||
(when-let [{:keys [type hidden value]} blur]
|
||||
(mf/html
|
||||
[:> "penpot:blur"
|
||||
#js {:penpot:blur-type (d/name type)
|
||||
:penpot:hidden (str hidden)
|
||||
:penpot:value (str value)}])))
|
||||
|
||||
(mf/defc export-exports-data [{:keys [exports]}]
|
||||
(defn export-exports-data [{:keys [exports]}]
|
||||
(mf/html
|
||||
(for [{:keys [scale suffix type]} exports]
|
||||
[:> "penpot:export"
|
||||
#js {:penpot:type (d/name type)
|
||||
:penpot:suffix suffix
|
||||
:penpot:scale (str scale)}]))
|
||||
:penpot:scale (str scale)}])))
|
||||
|
||||
(defn style->str
|
||||
[style]
|
||||
|
|
@ -201,7 +204,8 @@
|
|||
(map (fn [[key val]] (str (d/name key) ":" val)))
|
||||
(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)
|
||||
|
|
@ -235,11 +239,11 @@
|
|||
(clj->js))))]
|
||||
[:> "penpot:svg-content" props
|
||||
(for [leaf (->> shape :content :content (filter string?))]
|
||||
[:> "penpot:svg-child" {} leaf])]))])
|
||||
[:> "penpot:svg-child" {} leaf])]))]))
|
||||
|
||||
(mf/defc export-interactions-data
|
||||
[{:keys [interactions]}]
|
||||
(when-not (empty? interactions)
|
||||
(defn- export-interactions-data [{:keys [interactions]}]
|
||||
(when-let [interactions (seq interactions)]
|
||||
(mf/html
|
||||
[:> "penpot:interactions" #js {}
|
||||
(for [interaction interactions]
|
||||
[:> "penpot:interaction"
|
||||
|
|
@ -253,16 +257,17 @@
|
|||
:penpot:url (:url interaction)
|
||||
:penpot:close-click-outside ((d/nilf str) (:close-click-outside 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
|
||||
[{:keys [shape]}]
|
||||
(let [props (-> (obj/new) (add-data shape) (add-library-refs shape))]
|
||||
(js/console.log props)
|
||||
[:> "penpot:shape" props
|
||||
[:& export-shadow-data shape]
|
||||
[:& export-blur-data shape]
|
||||
[:& export-exports-data shape]
|
||||
[:& export-svg-data shape]
|
||||
[:& export-interactions-data shape]
|
||||
[:& export-grid-data 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)]))
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.main.data.viewer :as dv]
|
||||
[app.main.exports :as exports]
|
||||
[app.main.render :as render]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.dom :as dom]
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
[:div.thumbnail-item {:on-click #(on-click % index)}
|
||||
[:div.thumbnail-preview
|
||||
{:class (dom/classnames :selected selected?)}
|
||||
[:& exports/frame-svg {:frame frame :objects objects}]]
|
||||
[:& render/frame-svg {:frame frame :objects objects}]]
|
||||
[:div.thumbnail-info
|
||||
[:span.name {:title (:name frame)} (:name frame)]]])
|
||||
|
||||
|
|
|
|||
|
|
@ -20,8 +20,8 @@
|
|||
[app.main.data.workspace.state-helpers :as wsh]
|
||||
[app.main.data.workspace.texts :as dwt]
|
||||
[app.main.data.workspace.undo :as dwu]
|
||||
[app.main.exports :as exports]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.render :refer [component-svg]]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.color-bullet :as bc]
|
||||
[app.main.ui.components.context-menu :refer [context-menu]]
|
||||
|
|
@ -278,7 +278,7 @@
|
|||
:on-click #(on-asset-click % (:id component) nil)
|
||||
:on-context-menu (on-context-menu (:id 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)}]
|
||||
(let [renaming? (= renaming (:id component))]
|
||||
[:& editable-label
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@
|
|||
["react-dom/server" :as rds]
|
||||
[app.common.uri :as u]
|
||||
[app.config :as cfg]
|
||||
[app.main.exports :as exports]
|
||||
[app.main.fonts :as fonts]
|
||||
[app.main.render :as render]
|
||||
[app.util.http :as http]
|
||||
[app.worker.impl :as impl]
|
||||
[beicon.core :as rx]
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
(let [prev (get @cache ckey)]
|
||||
(if (= (:data prev) data)
|
||||
(: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)]
|
||||
(swap! cache assoc ckey {:data data :result result})
|
||||
result))))
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue