Improved code gen

This commit is contained in:
alonso.torres 2023-06-23 12:36:36 +02:00
parent ecc3b29996
commit cb502fc70d
5 changed files with 80 additions and 48 deletions

View file

@ -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

View file

@ -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; }
")

View file

@ -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]} _]