mirror of
https://github.com/penpot/penpot.git
synced 2025-03-15 17:21:17 -05:00
✨ Changes to render to support exporting
This commit is contained in:
parent
b76fef1e44
commit
f197124ee5
4 changed files with 70 additions and 23 deletions
|
@ -78,7 +78,8 @@
|
||||||
:height height
|
:height height
|
||||||
:version "1.1"
|
:version "1.1"
|
||||||
:xmlnsXlink "http://www.w3.org/1999/xlink"
|
:xmlnsXlink "http://www.w3.org/1999/xlink"
|
||||||
:xmlns "http://www.w3.org/2000/svg"}
|
:xmlns "http://www.w3.org/2000/svg"
|
||||||
|
:xmlns:penpot "https://penpot.app/xmlns"}
|
||||||
(case (:type object)
|
(case (:type object)
|
||||||
:frame [:& frame-wrapper {:shape object :view-box vbox}]
|
:frame [:& frame-wrapper {:shape object :view-box vbox}]
|
||||||
:group [:> shape-container {:shape object}
|
:group [:> shape-container {:shape object}
|
||||||
|
|
|
@ -6,11 +6,13 @@
|
||||||
|
|
||||||
(ns app.main.ui.shapes.custom-stroke
|
(ns app.main.ui.shapes.custom-stroke
|
||||||
(:require
|
(:require
|
||||||
[rumext.alpha :as mf]
|
[app.common.data :as d]
|
||||||
[app.common.uuid :as uuid]
|
|
||||||
[app.common.geom.shapes :as geom]
|
[app.common.geom.shapes :as geom]
|
||||||
|
[app.common.uuid :as uuid]
|
||||||
|
[app.main.ui.context :as muc]
|
||||||
[app.util.object :as obj]
|
[app.util.object :as obj]
|
||||||
[app.main.ui.context :as muc]))
|
[cuerdas.core :as str]
|
||||||
|
[rumext.alpha :as mf]))
|
||||||
|
|
||||||
(defn add-props
|
(defn add-props
|
||||||
[props new-props]
|
[props new-props]
|
||||||
|
@ -71,12 +73,21 @@
|
||||||
shape (obj/get props "shape")
|
shape (obj/get props "shape")
|
||||||
stroke-width (:stroke-width shape 0)
|
stroke-width (:stroke-width shape 0)
|
||||||
stroke-mask-id (str "outer-stroke-" render-id)
|
stroke-mask-id (str "outer-stroke-" render-id)
|
||||||
shape-id (str "stroke-shape-" render-id)]
|
shape-id (str "stroke-shape-" render-id)
|
||||||
|
|
||||||
|
style-str (->> (obj/get base-props "style")
|
||||||
|
(js->clj)
|
||||||
|
(mapv (fn [[k v]]
|
||||||
|
(-> (d/name k)
|
||||||
|
(str/kebab)
|
||||||
|
(str ":" v))))
|
||||||
|
(str/join ";"))]
|
||||||
|
|
||||||
[:g.outer-stroke-shape
|
[:g.outer-stroke-shape
|
||||||
[:symbol
|
[:symbol
|
||||||
[:> elem-name (-> (obj/clone base-props)
|
[:> elem-name (-> (obj/clone base-props)
|
||||||
(obj/set! "id" shape-id)
|
(obj/set! "id" shape-id)
|
||||||
|
(obj/set! "data-style" style-str)
|
||||||
(obj/without ["style"]))]]
|
(obj/without ["style"]))]]
|
||||||
|
|
||||||
[:use {:href (str "#" shape-id)
|
[:use {:href (str "#" shape-id)
|
||||||
|
|
|
@ -8,6 +8,7 @@
|
||||||
(:require
|
(:require
|
||||||
[app.common.data :as d]
|
[app.common.data :as d]
|
||||||
[app.common.uuid :as uuid]
|
[app.common.uuid :as uuid]
|
||||||
|
[app.common.geom.matrix :as gmt]
|
||||||
[app.main.ui.context :as muc]
|
[app.main.ui.context :as muc]
|
||||||
[app.main.ui.shapes.custom-stroke :as cs]
|
[app.main.ui.shapes.custom-stroke :as cs]
|
||||||
[app.main.ui.shapes.fill-image :as fim]
|
[app.main.ui.shapes.fill-image :as fim]
|
||||||
|
@ -17,6 +18,36 @@
|
||||||
[app.util.object :as obj]
|
[app.util.object :as obj]
|
||||||
[rumext.alpha :as mf]))
|
[rumext.alpha :as mf]))
|
||||||
|
|
||||||
|
(defn add-metadata
|
||||||
|
"Adds as metadata properties that we cannot deduce from the exported SVG"
|
||||||
|
[props shape]
|
||||||
|
(let [add!
|
||||||
|
(fn [props attr val]
|
||||||
|
(let [ns-attr (str "penpot:" (-> attr d/name))]
|
||||||
|
(-> props
|
||||||
|
(obj/set! ns-attr val))))
|
||||||
|
frame? (= :frame type)]
|
||||||
|
(-> props
|
||||||
|
(add! :name (-> shape :name))
|
||||||
|
(add! :blocked (-> shape (:blocked false) str))
|
||||||
|
(add! :hidden (-> shape (:hidden false) str))
|
||||||
|
(add! :type (-> shape :type d/name))
|
||||||
|
|
||||||
|
(add! :stroke-style (-> shape (:stroke-style :none) d/name))
|
||||||
|
(add! :stroke-alignment (-> shape (:stroke-alignment :center) d/name))
|
||||||
|
|
||||||
|
(add! :transform (-> shape (:transform (gmt/matrix)) str))
|
||||||
|
(add! :transform-inverse (-> shape (:transform-inverse (gmt/matrix)) str))
|
||||||
|
|
||||||
|
(cond-> (some? (:r1 shape))
|
||||||
|
(-> (add! :r1 (-> shape (:r1 0) str))
|
||||||
|
(add! :r2 (-> shape (:r2 0) str))
|
||||||
|
(add! :r3 (-> shape (:r3 0) str))
|
||||||
|
(add! :r4 (-> shape (:r4 0) str))))
|
||||||
|
|
||||||
|
(cond-> frame?
|
||||||
|
(obj/set! "xmlns:penpot" "https://penpot.app/xmlns")))))
|
||||||
|
|
||||||
(mf/defc shape-container
|
(mf/defc shape-container
|
||||||
{::mf/forward-ref true
|
{::mf/forward-ref true
|
||||||
::mf/wrap-props false}
|
::mf/wrap-props false}
|
||||||
|
@ -34,7 +65,9 @@
|
||||||
|
|
||||||
{:keys [x y width height type]} shape
|
{:keys [x y width height type]} shape
|
||||||
frame? (= :frame type)
|
frame? (= :frame type)
|
||||||
group-props (-> (obj/clone props)
|
|
||||||
|
wrapper-props
|
||||||
|
(-> (obj/clone props)
|
||||||
(obj/without ["shape" "children"])
|
(obj/without ["shape" "children"])
|
||||||
(obj/set! "ref" ref)
|
(obj/set! "ref" ref)
|
||||||
(obj/set! "id" (str "shape-" (:id shape)))
|
(obj/set! "id" (str "shape-" (:id shape)))
|
||||||
|
@ -47,11 +80,14 @@
|
||||||
(obj/set! "width" width)
|
(obj/set! "width" width)
|
||||||
(obj/set! "height" height)
|
(obj/set! "height" height)
|
||||||
(obj/set! "xmlnsXlink" "http://www.w3.org/1999/xlink")
|
(obj/set! "xmlnsXlink" "http://www.w3.org/1999/xlink")
|
||||||
(obj/set! "xmlns" "http://www.w3.org/2000/svg"))))
|
(obj/set! "xmlns" "http://www.w3.org/2000/svg")))
|
||||||
|
|
||||||
|
(add-metadata shape))
|
||||||
|
|
||||||
wrapper-tag (if frame? "svg" "g")]
|
wrapper-tag (if frame? "svg" "g")]
|
||||||
|
|
||||||
[:& (mf/provider muc/render-ctx) {:value render-id}
|
[:& (mf/provider muc/render-ctx) {:value render-id}
|
||||||
[:> wrapper-tag group-props
|
[:> wrapper-tag wrapper-props
|
||||||
[:defs
|
[:defs
|
||||||
[:& defs/svg-defs {:shape shape :render-id render-id}]
|
[:& defs/svg-defs {:shape shape :render-id render-id}]
|
||||||
[:& filters/filters {:shape shape :filter-id filter-id}]
|
[:& filters/filters {:shape shape :filter-id filter-id}]
|
||||||
|
|
|
@ -278,7 +278,6 @@
|
||||||
(let [point (gpt/transform point transform-inverse)
|
(let [point (gpt/transform point transform-inverse)
|
||||||
end-x (/ (- (:x point) x) width)
|
end-x (/ (- (:x point) x) width)
|
||||||
end-y (/ (- (:y point) y) height)
|
end-y (/ (- (:y point) y) height)
|
||||||
|
|
||||||
end-x (mth/precision end-x 2)
|
end-x (mth/precision end-x 2)
|
||||||
end-y (mth/precision end-y 2)]
|
end-y (mth/precision end-y 2)]
|
||||||
(change! {:end-x end-x :end-y end-y})))
|
(change! {:end-x end-x :end-y end-y})))
|
||||||
|
@ -287,8 +286,8 @@
|
||||||
(let [scale-factor-y (/ gradient-length (/ height 2))
|
(let [scale-factor-y (/ gradient-length (/ height 2))
|
||||||
norm-dist (/ (gpt/distance point from-p)
|
norm-dist (/ (gpt/distance point from-p)
|
||||||
(* (/ width 2) scale-factor-y))]
|
(* (/ width 2) scale-factor-y))]
|
||||||
|
(when (and norm-dist (mth/finite? norm-dist))
|
||||||
(change! {:width norm-dist})))]
|
(change! {:width norm-dist}))))]
|
||||||
|
|
||||||
(when (and gradient
|
(when (and gradient
|
||||||
(= id (:shape-id gradient))
|
(= id (:shape-id gradient))
|
||||||
|
|
Loading…
Add table
Reference in a new issue