mirror of
https://github.com/penpot/penpot.git
synced 2025-07-27 01:37:19 +02:00
✨ Improved code gen
This commit is contained in:
parent
ecc3b29996
commit
cb502fc70d
5 changed files with 80 additions and 48 deletions
|
@ -7,6 +7,7 @@
|
|||
(ns app.util.code-gen.markup-html
|
||||
(:require
|
||||
["react-dom/server" :as rds]
|
||||
[app.common.data :as d]
|
||||
[app.common.data.macros :as dm]
|
||||
[app.common.pages.helpers :as cph]
|
||||
[app.common.types.shape.layout :as ctl]
|
||||
|
@ -17,6 +18,32 @@
|
|||
[cuerdas.core :as str]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(defn svg-markup?
|
||||
"Function to determine whether a shape is rendered in HTML+CSS or is rendered
|
||||
through a SVG"
|
||||
[shape]
|
||||
(or
|
||||
;; path and path-like shapes
|
||||
(cph/path-shape? shape)
|
||||
(cph/bool-shape? shape)
|
||||
|
||||
;; imported SVG images
|
||||
(cph/svg-raw-shape? shape)
|
||||
(some? (:svg-attrs shape))
|
||||
|
||||
;; CSS masks are not enough we need to delegate to SVG
|
||||
(cph/mask-shape? shape)
|
||||
|
||||
;; Texts with shadows or strokes we render in SVG
|
||||
(and (cph/text-shape? shape)
|
||||
(or (d/not-empty? (:shadow shape))
|
||||
(d/not-empty? (:strokes shape))))
|
||||
|
||||
;; When a shape has several strokes or the stroke is not a "border"
|
||||
(or (> (count (:strokes shape)) 1)
|
||||
(and (= (count (:strokes shape)) 1)
|
||||
(not= (-> shape :strokes first :stroke-alignment) :center)))))
|
||||
|
||||
(defn generate-html
|
||||
([objects shape]
|
||||
(generate-html objects shape 0))
|
||||
|
@ -26,6 +53,14 @@
|
|||
maybe-reverse (if (ctl/any-layout? shape) reverse identity)]
|
||||
|
||||
(cond
|
||||
(svg-markup? shape)
|
||||
(let [svg-markup (generate-svg objects shape)]
|
||||
(dm/fmt "%<div class=\"%\">\n%\n%</div>"
|
||||
indent
|
||||
(cgc/shape->selector shape)
|
||||
svg-markup
|
||||
indent))
|
||||
|
||||
(cph/text-shape? shape)
|
||||
(let [text-shape-html (rds/renderToStaticMarkup (mf/element text/text-shape #js {:shape shape :code? true}))]
|
||||
(dm/fmt "%<div class=\"%\">\n%\n%</div>"
|
||||
|
@ -43,18 +78,6 @@
|
|||
(cgc/shape->selector shape)
|
||||
indent))
|
||||
|
||||
(or (cph/path-shape? shape)
|
||||
(cph/mask-shape? shape)
|
||||
(cph/bool-shape? shape)
|
||||
(cph/svg-raw-shape? shape)
|
||||
(some? (:svg-attrs shape)))
|
||||
(let [svg-markup (generate-svg objects shape)]
|
||||
(dm/fmt "%<div class=\"%\">\n%\n%</div>"
|
||||
indent
|
||||
(cgc/shape->selector shape)
|
||||
svg-markup
|
||||
indent))
|
||||
|
||||
(empty? (:shapes shape))
|
||||
(dm/fmt "%<div class=\"%\">\n%</div>"
|
||||
indent
|
||||
|
|
|
@ -46,8 +46,7 @@ svg {
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.text-node { background-clip: text;
|
||||
-webkit-background-clip: text; }
|
||||
.text-node { background-clip: text !important; -webkit-background-clip: text !important; }
|
||||
|
||||
")
|
||||
|
||||
|
|
|
@ -11,15 +11,8 @@
|
|||
[app.common.geom.matrix :as gmt]
|
||||
[app.common.geom.shapes :as gsh]
|
||||
[app.common.pages.helpers :as cph]
|
||||
[app.common.types.shape.layout :as ctl]))
|
||||
|
||||
(defn svg-render?
|
||||
[shape]
|
||||
(or (cph/path-shape? shape)
|
||||
(cph/mask-shape? shape)
|
||||
(cph/bool-shape? shape)
|
||||
(cph/svg-raw-shape? shape)
|
||||
(some? (:svg-attrs shape))))
|
||||
[app.common.types.shape.layout :as ctl]
|
||||
[app.util.code-gen.markup-html :refer [svg-markup?]]))
|
||||
|
||||
(defn fill->color
|
||||
[{:keys [fill-color fill-opacity fill-color-gradient]}]
|
||||
|
@ -107,21 +100,17 @@
|
|||
(get-shape-size shape :height))
|
||||
|
||||
(defmethod get-value :transform
|
||||
[_ {:keys [transform] :as shape} objects]
|
||||
(let [transform
|
||||
(->> (cph/get-parents objects (:id shape))
|
||||
(reduce (fn [mtx {:keys [transform-inverse]}]
|
||||
(gmt/multiply transform-inverse mtx))
|
||||
transform))]
|
||||
(when (and (some? transform) (not (gmt/unit? transform)))
|
||||
(dm/str transform))))
|
||||
[_ shape objects]
|
||||
(let [parent (get objects (:parent-id shape))]
|
||||
(dm/str (gmt/multiply (:transform shape (gmt/matrix))
|
||||
(:transform-inverse parent (gmt/matrix))))))
|
||||
|
||||
(defmethod get-value :background
|
||||
[_ {:keys [fills] :as shape} _]
|
||||
(let [single-fill? (= (count fills) 1)
|
||||
ffill (first fills)
|
||||
gradient? (some? (:fill-color-gradient ffill))]
|
||||
(when (and (not (svg-render? shape)) single-fill? gradient?)
|
||||
(when (and (not (svg-markup? shape)) single-fill? gradient?)
|
||||
(fill->color ffill))))
|
||||
|
||||
(defmethod get-value :background-color
|
||||
|
@ -129,12 +118,12 @@
|
|||
(let [single-fill? (= (count fills) 1)
|
||||
ffill (first fills)
|
||||
gradient? (some? (:fill-color-gradient ffill))]
|
||||
(when (and (not (svg-render? shape)) single-fill? (not gradient?))
|
||||
(when (and (not (svg-markup? shape)) single-fill? (not gradient?))
|
||||
(fill->color ffill))))
|
||||
|
||||
(defmethod get-value :background-image
|
||||
[_ {:keys [fills] :as shape} _]
|
||||
(when (and (not (svg-render? shape)) (> (count fills) 1))
|
||||
(when (and (not (svg-markup? shape)) (> (count fills) 1))
|
||||
(->> fills
|
||||
(map fill->color))))
|
||||
|
||||
|
@ -153,7 +142,7 @@
|
|||
|
||||
(defmethod get-value :border
|
||||
[_ shape _]
|
||||
(when-not (svg-render? shape)
|
||||
(when-not (svg-markup? shape)
|
||||
(get-stroke-data (first (:strokes shape)))))
|
||||
|
||||
(defmethod get-value :border-radius
|
||||
|
@ -170,11 +159,13 @@
|
|||
|
||||
(defmethod get-value :box-shadow
|
||||
[_ shape _]
|
||||
(:shadow shape))
|
||||
(when-not (svg-markup? shape)
|
||||
(:shadow shape)))
|
||||
|
||||
(defmethod get-value :filter
|
||||
[_ shape _]
|
||||
(get-in shape [:blur :value]))
|
||||
(when-not (svg-markup? shape)
|
||||
(get-in shape [:blur :value])))
|
||||
|
||||
(defmethod get-value :display
|
||||
[_ shape _]
|
||||
|
@ -226,13 +217,13 @@
|
|||
|
||||
(defmethod get-value :row-gap
|
||||
[_ shape _]
|
||||
(let [[g1 _] (ctl/gaps shape)]
|
||||
(when (not= g1 0) [g1])))
|
||||
(let [[g1 g2] (ctl/gaps shape)]
|
||||
(when (and (not= g1 g2) (not= g1 0)) [g1])))
|
||||
|
||||
(defmethod get-value :column-gap
|
||||
[_ shape _]
|
||||
(let [[_ g2] (ctl/gaps shape)]
|
||||
(when (not= g2 0) [g2])))
|
||||
(let [[g1 g2] (ctl/gaps shape)]
|
||||
(when (and (not= g1 g2) (not= g2 0)) [g2])))
|
||||
|
||||
(defmethod get-value :padding
|
||||
[_ {:keys [layout-padding]} _]
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue