Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-12 15:51:37 -05:00
Code Issues Activity

✨ Improved codegen

Browse source
This commit is contained in:
alonso.torres 2023-06-27 10:59:14 +02:00
parent 30d78554c2
commit ac184a7c8f
4 changed files with 59 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
common/src/app/common/types/shape.cljc
View file

@ -437,4 +437,3 @@
(make-minimal-group uuid/zero geom-props (:name attrs)))
(setup-shape geom-props)
(merge attrs)))

78
frontend/src/app/util/code_gen/markup_html.cljs
View file

@ -50,49 +50,51 @@
([objects shape level]
(let [indent (str/repeat " " level)
maybe-reverse (if (ctl/any-layout? shape) reverse identity)]
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))
shape-html
(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>"
indent
(cgc/shape->selector shape)
text-shape-html
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>"
indent
(cgc/shape->selector shape)
text-shape-html
indent))
(cph/image-shape? shape)
(let [data (or (:metadata shape) (:fill-image shape))
image-url (cfg/resolve-file-media data)]
(dm/fmt "%<img src=\"%\" class=\"%\">\n%</img>"
indent
image-url
(cgc/shape->selector shape)
indent))
(cph/image-shape? shape)
(let [data (or (:metadata shape) (:fill-image shape))
image-url (cfg/resolve-file-media data)]
(dm/fmt "%<img src=\"%\" class=\"%\">\n%</img>"
indent
image-url
(cgc/shape->selector shape)
indent))
(empty? (:shapes shape))
(dm/fmt "%<div class=\"%\">\n%</div>"
indent
(cgc/shape->selector shape)
indent)
(empty? (:shapes shape))
(dm/fmt "%<div class=\"%\">\n%</div>"
indent
(cgc/shape->selector shape)
indent)
:else
(dm/fmt "%<div class=\"%\">\n%\n%</div>"
indent
(cgc/shape->selector shape)
(->> (:shapes shape)
(maybe-reverse)
(map #(generate-html objects (get objects %) (inc level)))
(str/join "\n"))
indent)))))
:else
(dm/fmt "%<div class=\"%\">\n%\n%</div>"
indent
(cgc/shape->selector shape)
(->> (:shapes shape)
(maybe-reverse)
(map #(generate-html objects (get objects %) (inc level)))
(str/join "\n"))
indent))]
(dm/fmt "%<!-- % -->\n%" indent (dm/str (d/name (:type shape)) ": " (:name shape)) shape-html))))
(defn generate-markup
[objects shapes]

5
frontend/src/app/util/code_gen/style_css.cljs
View file

@ -22,10 +22,10 @@
(def prelude "
html, body {
background-color: #E8E9EA;
height: 100%;
margin: 0;
min-height: 100%;
min-width: 100%;
padding: 0;
width: 100%;
}
body {
@ -33,6 +33,7 @@ body {
flex-direction: column;
align-items: center;
padding: 2rem;
gap: 2rem;
}
svg {

30
frontend/src/app/util/code_gen/style_css_values.cljs
View file

@ -26,10 +26,11 @@
(defmethod get-value :position
[_ shape objects]
(cond
(and (ctl/any-layout-immediate-child? objects shape)
(not (ctl/layout-absolute? shape))
(or (cph/group-shape? shape)
(cph/frame-shape? shape)))
(or (and (ctl/any-layout-immediate-child? objects shape)
(not (ctl/layout-absolute? shape))
(or (cph/group-shape? shape)
(cph/frame-shape? shape)))
(cph/root-frame? shape))
:relative
(and (ctl/any-layout-immediate-child? objects shape)
@ -83,7 +84,7 @@
(:layout-item-v-sizing shape))]
(cond
(or (and (ctl/any-layout? shape) (= sizing :auto))
(and (ctl/any-layout-immediate-child? shape objects) (= sizing :fill)))
(and (ctl/any-layout-immediate-child? objects shape) (= sizing :fill)))
sizing
(some? (:selrect shape))
@ -102,20 +103,21 @@
(defmethod get-value :transform
[_ shape objects]
(let [parent (get objects (:parent-id shape))
(when-not (svg-markup? shape)
(let [parent (get objects (:parent-id shape))
transform
(gmt/multiply (:transform shape (gmt/matrix))
(:transform-inverse parent (gmt/matrix)))]
(when-not (gmt/unit? transform)
transform)))
transform
(gmt/multiply (:transform shape (gmt/matrix))
(:transform-inverse parent (gmt/matrix)))]
(when-not (gmt/unit? transform)
transform))))
(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-markup? shape)) single-fill? gradient?)
(when (and (not (svg-markup? shape)) (not (cph/group-shape? shape)) single-fill? gradient?)
(fill->color ffill))))
(defmethod get-value :background-color
@ -123,12 +125,12 @@
(let [single-fill? (= (count fills) 1)
ffill (first fills)
gradient? (some? (:fill-color-gradient ffill))]
(when (and (not (svg-markup? shape)) single-fill? (not gradient?))
(when (and (not (svg-markup? shape)) (not (cph/group-shape? shape)) single-fill? (not gradient?))
(fill->color ffill))))
(defmethod get-value :background-image
[_ {:keys [fills] :as shape} _]
(when (and (not (svg-markup? shape)) (> (count fills) 1))
(when (and (not (svg-markup? shape)) (not (cph/group-shape? shape)) (> (count fills) 1))
(->> fills
(map fill->color))))