From 6f5916e334796b8ed181051ccb3e2b1c40b375d8 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Tue, 18 Jan 2022 14:03:11 +0100 Subject: [PATCH] :recycle: Minor reorganization on export & render namespaces. --- frontend/src/app/main/exports.cljs | 333 ----------------- frontend/src/app/main/render.cljs | 343 +++++++++++++++++- frontend/src/app/main/ui/render.cljs | 37 +- frontend/src/app/main/ui/shapes/export.cljs | 215 +++++------ .../src/app/main/ui/viewer/thumbnails.cljs | 4 +- .../app/main/ui/workspace/sidebar/assets.cljs | 6 +- frontend/src/app/worker/thumbnails.cljs | 4 +- 7 files changed, 466 insertions(+), 476 deletions(-) delete mode 100644 frontend/src/app/main/exports.cljs diff --git a/frontend/src/app/main/exports.cljs b/frontend/src/app/main/exports.cljs deleted file mode 100644 index a702d522d..000000000 --- a/frontend/src/app/main/exports.cljs +++ /dev/null @@ -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 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]]])) diff --git a/frontend/src/app/main/render.cljs b/frontend/src/app/main/render.cljs index ffe3452d0..eb31598aa 100644 --- a/frontend/src/app/main/render.cljs +++ b/frontend/src/app/main/render.cljs @@ -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 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)))))))) diff --git a/frontend/src/app/main/ui/render.cljs b/frontend/src/app/main/ui/render.cljs index d7c552c1b..db8802a25 100644 --- a/frontend/src/app/main/ui/render.cljs +++ b/frontend/src/app/main/ui/render.cljs @@ -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,15 +27,13 @@ (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) - (update :x - padding) - (update :y - padding) - (update :width + (* 2 padding)) - (update :height + (* 2 padding)))] + (let [xf-get-bounds (comp (map #(get objects %)) (map #(calc-bounds % objects))) + padding (filters/calculate-padding object) + obj-bounds (-> (filters/get-filters-bounds object) + (update :x - padding) + (update :y - padding) + (update :width + (* 2 padding)) + (update :height + (* 2 padding)))] (cond (and (= :group (:type object)) @@ -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 diff --git a/frontend/src/app/main/ui/shapes/export.cljs b/frontend/src/app/main/ui/shapes/export.cljs index f794f687d..0e1b0efde 100644 --- a/frontend/src/app/main/ui/shapes/export.cljs +++ b/frontend/src/app/main/ui/shapes/export.cljs @@ -5,14 +5,17 @@ ;; Copyright (c) UXBOX Labs SL (ns app.main.ui.shapes.export - (:require - [app.common.data :as d] - [app.common.geom.shapes :as gsh] - [app.util.json :as json] - [app.util.object :as obj] - [app.util.svg :as usvg] - [cuerdas.core :as str] - [rumext.alpha :as mf])) + "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] + [app.util.json :as json] + [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)) @@ -128,21 +131,20 @@ [(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 (->> (dissoc 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))))]))]) +(defn- export-grid-data [{:keys [grids]}] + (mf/html + [:> "penpot:grids" #js {} + (for [{:keys [type display params]} grids] + (let [props (->> (dissoc params :color) + (prefix-keys) + (clj->js))] + [:> "penpot:grid" + (-> props + (obj/set! "penpot:color" (get-in params [:color :color])) + (obj/set! "penpot:opacity" (get-in params [:color :opacity])) + (obj/set! "penpot:type" (d/name type)) + (cond-> (some? display) + (obj/set! "penpot:display" (str display))))]))])) (mf/defc export-flows [{:keys [flows]}] @@ -167,33 +169,34 @@ (when (seq flows) [:& export-flows {:flows flows}])])))) -(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)}])) +(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) + :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)}]))) +(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]}] - (for [{:keys [scale suffix type]} exports] - [:> "penpot:export" - #js {:penpot:type (d/name type) - :penpot:suffix suffix - :penpot:scale (str scale)}])) +(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)}]))) (defn style->str [style] @@ -201,68 +204,70 @@ (map (fn [[key val]] (str (d/name key) ":" val))) (str/join "; "))) -(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) - ;; Style and filter are special properties so we need to save it otherwise will be indistingishible from - ;; standard properties - :penpot:svg-style (when (contains? (:svg-attrs shape) :style) (style->str (get-in shape [:svg-attrs :style]))) - :penpot:svg-filter (when (contains? (:svg-attrs shape) :filter) (get-in shape [:svg-attrs :filter])) - :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}]])])) +(defn- export-svg-data [shape] + (mf/html + [:* + (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) + ;; Style and filter are special properties so we need to save it otherwise will be indistingishible from + ;; standard properties + :penpot:svg-style (when (contains? (:svg-attrs shape) :style) (style->str (get-in shape [:svg-attrs :style]))) + :penpot:svg-filter (when (contains? (:svg-attrs shape) :filter) (get-in shape [:svg-attrs :filter])) + :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 (= (: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 [interaction interactions] - [:> "penpot:interaction" - #js {:penpot:event-type (d/name (:event-type interaction)) - :penpot:action-type (d/name (:action-type interaction)) - :penpot:delay ((d/nilf str) (:delay interaction)) - :penpot:destination ((d/nilf str) (:destination interaction)) - :penpot:overlay-pos-type ((d/nilf d/name) (:overlay-pos-type interaction)) - :penpot:overlay-position-x ((d/nilf get-in) interaction [:overlay-position :x]) - :penpot:overlay-position-y ((d/nilf get-in) interaction [:overlay-position :y]) - :penpot:url (:url interaction) - :penpot:close-click-outside ((d/nilf str) (:close-click-outside interaction)) - :penpot:background-overlay ((d/nilf str) (:background-overlay interaction)) - :penpot:preserve-scroll ((d/nilf str) (:preserve-scroll interaction))}])])) +(defn- export-interactions-data [{:keys [interactions]}] + (when-let [interactions (seq interactions)] + (mf/html + [:> "penpot:interactions" #js {} + (for [interaction interactions] + [:> "penpot:interaction" + #js {:penpot:event-type (d/name (:event-type interaction)) + :penpot:action-type (d/name (:action-type interaction)) + :penpot:delay ((d/nilf str) (:delay interaction)) + :penpot:destination ((d/nilf str) (:destination interaction)) + :penpot:overlay-pos-type ((d/nilf d/name) (:overlay-pos-type interaction)) + :penpot:overlay-position-x ((d/nilf get-in) interaction [:overlay-position :x]) + :penpot:overlay-position-y ((d/nilf get-in) interaction [:overlay-position :y]) + :penpot:url (:url interaction) + :penpot:close-click-outside ((d/nilf str) (:close-click-outside interaction)) + :penpot:background-overlay ((d/nilf str) (:background-overlay interaction)) + :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)])) diff --git a/frontend/src/app/main/ui/viewer/thumbnails.cljs b/frontend/src/app/main/ui/viewer/thumbnails.cljs index 52082e516..c383149a0 100644 --- a/frontend/src/app/main/ui/viewer/thumbnails.cljs +++ b/frontend/src/app/main/ui/viewer/thumbnails.cljs @@ -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)]]]) diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs index 3a4cc69a1..13b650696 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs @@ -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,8 +278,8 @@ :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)]) - :objects (:objects component)}] + [:& component-svg {:group (get-in component [:objects (:id component)]) + :objects (:objects component)}] (let [renaming? (= renaming (:id component))] [:& editable-label {:class-name (dom/classnames diff --git a/frontend/src/app/worker/thumbnails.cljs b/frontend/src/app/worker/thumbnails.cljs index 606f72ec4..a6da0d73c 100644 --- a/frontend/src/app/worker/thumbnails.cljs +++ b/frontend/src/app/worker/thumbnails.cljs @@ -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))))