3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-14 18:26:38 +02:00
Code Issues Projects Releases Packages Wiki 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
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))) (make-minimal-group uuid/zero geom-props (:name attrs)))
(setup-shape geom-props) (setup-shape geom-props)
(merge attrs))) (merge attrs)))

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

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

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

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

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

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