From ea1b3bd05859585fe553656bfac19eef97aa40f0 Mon Sep 17 00:00:00 2001 From: Eva Date: Tue, 24 Jan 2023 10:44:14 +0100 Subject: [PATCH] :bug: Fix missing flex props on code generation --- frontend/src/app/main/ui/formats.cljs | 10 +- .../main/ui/viewer/inspect/attributes.cljs | 2 +- .../ui/viewer/inspect/attributes/layout.cljs | 20 +-- .../inspect/attributes/layout_flex.cljs | 24 ++-- frontend/src/app/util/code_gen.cljs | 133 ++++++++++++------ 5 files changed, 121 insertions(+), 68 deletions(-) diff --git a/frontend/src/app/main/ui/formats.cljs b/frontend/src/app/main/ui/formats.cljs index f972bda81..d26e7652a 100644 --- a/frontend/src/app/main/ui/formats.cljs +++ b/frontend/src/app/main/ui/formats.cljs @@ -55,7 +55,7 @@ {:p1 p1 :p2 p2 :p3 p3 :p4 p4} (and (= p1 p3) (= p2 p4)) - {:p1 p1 :p3 p3} + {:p1 p1 :p2 p2} (and (not= p1 p3) (= p2 p4)) {:p1 p1 :p2 p2 :p3 p3} @@ -67,9 +67,11 @@ (let [sizing (if (= type :width) (:layout-item-h-sizing shape) (:layout-item-v-sizing shape))] - (if (= sizing :fill) - "100%" - (str (format-pixels value))))) + (if (string? value) + value + (if (= sizing :fill) + "100%" + (str (format-pixels value)))))) (defn format-padding [padding-values type] diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes.cljs index cb43f937b..830a65cca 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes.cljs @@ -27,7 +27,7 @@ :group [:layout :svg :layout-flex-item] :rect [:layout :fill :stroke :shadow :blur :svg :layout-flex-item] :circle [:layout :fill :stroke :shadow :blur :svg :layout-flex-item] - :path [:layout :fill :stroke :shadow :blur :svg] + :path [:layout :fill :stroke :shadow :blur :svg :layout-flex-item] :image [:image :layout :fill :stroke :shadow :blur :svg :layout-flex-item] :text [:layout :text :shadow :blur :stroke :layout-flex-item]}) diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/layout.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/layout.cljs index cdcc1c356..f1d4490a2 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/layout.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/layout.cljs @@ -23,31 +23,31 @@ :rx "border-radius" :r1 "border-radius"} :format {:rotation #(str/fmt "rotate(%sdeg)" %) - :r1 #(apply str/fmt "%spx, %spx, %spx, %spx" %) - :width (partial fmt/format-size :width) - :height (partial fmt/format-size :height)} + :r1 #(apply str/fmt "%spx, %spx, %spx, %spx" %) + :width #(cg/get-size :width %) + :height #(cg/get-size :height %)} :multi {:r1 [:r1 :r2 :r3 :r4]}}) (defn copy-data ([shape] (apply copy-data shape properties)) - ([shape & properties] + ([shape & properties] (cg/generate-css-props shape properties params))) (mf/defc layout-block [{:keys [shape]}] (let [selrect (:selrect shape) - {:keys [x y]} selrect] + {:keys [x y width height]} selrect] [:* [:div.attributes-unit-row [:div.attributes-label (tr "inspect.attributes.layout.width")] - [:div.attributes-value (fmt/format-size :width (:width shape) shape)] - [:& copy-button {:data (copy-data shape :width)}]] + [:div.attributes-value (fmt/format-size :width width shape)] + [:& copy-button {:data (copy-data selrect :width)}]] [:div.attributes-unit-row [:div.attributes-label (tr "inspect.attributes.layout.height")] - [:div.attributes-value (fmt/format-size :height (:height shape) shape)] - [:& copy-button {:data (copy-data shape :height)}]] + [:div.attributes-value (fmt/format-size :height height shape)] + [:& copy-button {:data (copy-data selrect :height)}]] (when (not= (:x shape) 0) [:div.attributes-unit-row @@ -73,7 +73,7 @@ [:div.attributes-value (fmt/format-number (:r1 shape)) ", " (fmt/format-number (:r2 shape)) ", " - (fmt/format-number (:r3 shape))", " + (fmt/format-number (:r3 shape)) ", " (fmt/format-pixels (:r4 shape))] [:& copy-button {:data (copy-data shape :r1)}]]) diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/layout_flex.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/layout_flex.cljs index 1cc404df8..e667b33ee 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/layout_flex.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/layout_flex.cljs @@ -39,10 +39,10 @@ :layout-gap "gap" :layout-padding "padding"} :format {:layout name - :layout-flex-dir name + :layout-flex-dir cg/get-layout-direction :layout-align-items name :layout-justify-content name - :layout-wrap-type name + :layout-wrap-type cg/get-layout-orientation :layout-gap fm/format-gap :layout-padding fm/format-padding}}) @@ -72,7 +72,7 @@ (for [[k v] values] [:span.items {:key (str type "-" k "-" v)} v "px"])])) -(mf/defc layout-block +(mf/defc layout-flex-block [{:keys [shape]}] [:* [:div.attributes-unit-row @@ -82,7 +82,7 @@ [:div.attributes-unit-row [:div.attributes-label "Direction"] - [:div.attributes-value (str/capital (d/name (:layout-flex-dir shape)))] + [:div.attributes-value (str/capital (cg/get-layout-direction (:layout-flex-dir shape)))] [:& copy-button {:data (copy-data shape :layout-flex-dir)}]] [:div.attributes-unit-row @@ -97,7 +97,7 @@ [:div.attributes-unit-row [:div.attributes-label "Flex wrap"] - [:div.attributes-value (str/capital (d/name (:layout-wrap-type shape)))] + [:div.attributes-value (str/capital (cg/get-layout-orientation (:layout-wrap-type shape)))] [:& copy-button {:data (copy-data shape :layout-wrap-type)}]] (when (= :wrap (:layout-wrap-type shape)) @@ -129,11 +129,11 @@ (let [shapes (->> shapes (filter has-flex?))] (when (seq shapes) [:div.attributes-block - [:div.attributes-block-title - [:div.attributes-block-title-text "Layout"] - (when (= (count shapes) 1) - [:& copy-button {:data (copy-data (first shapes))}])] + [:div.attributes-block-title + [:div.attributes-block-title-text "Layout"] + (when (= (count shapes) 1) + [:& copy-button {:data (copy-data (first shapes))}])] - (for [shape shapes] - [:& layout-block {:shape shape - :key (:id shape)}])]))) + (for [shape shapes] + [:& layout-flex-block {:shape shape + :key (:id shape)}])]))) diff --git a/frontend/src/app/util/code_gen.cljs b/frontend/src/app/util/code_gen.cljs index 9a95a580c..532cfe02f 100644 --- a/frontend/src/app/util/code_gen.cljs +++ b/frontend/src/app/util/code_gen.cljs @@ -41,6 +41,33 @@ (when-not (= :none (:stroke-style shape)) (str/format "%spx %s %s" width style (uc/color->background color))))) +(defn get-size + [type values] + (let [value (cond + (number? values) values + (string? values) values + (type values) (type values) + :else (type (:selrect values)))] + + (if (= :width type) + (fmt/format-size :width value values) + (fmt/format-size :heigth value values)))) + +(defn get-layout-orientation + [value] + (if (= :wrap value) + "wrap" + "nowrap")) + +(defn get-layout-direction + [value] + (case value + :row "row" + :reverse-row "row-reverse" + :column "column" + :reverse-column "column-reverse" + "row")) + (def styles-data {:layout {:props [:width :height :x :y :radius :rx :r1] :to-prop {:x "left" @@ -49,9 +76,9 @@ :rx "border-radius" :r1 "border-radius"} :format {:rotation #(str/fmt "rotate(%sdeg)" %) - :r1 #(apply str/fmt "%spx, %spx, %spx, %spx" %) - :width (partial fmt/format-size :width) - :height (partial fmt/format-size :height)} + :r1 #(apply str/fmt "%spx, %spx, %spx, %spx" %) + :width #(get-size :width %) + :height #(get-size :height %)} :multi {:r1 [:r1 :r2 :r3 :r4]}} :fill {:props [:fill-color :fill-color-gradient] :to-prop {:fill-color "background" :fill-color-gradient "background"} @@ -66,8 +93,8 @@ :to-prop {:blur "filter"} :format {:blur #(str/fmt "blur(%spx)" (:value %))}} :layout-flex {:props [:layout - :layout-align-items :layout-flex-dir + :layout-align-items :layout-justify-content :layout-gap :layout-padding @@ -80,10 +107,10 @@ :layout-gap "gap" :layout-padding "padding"} :format {:layout name - :layout-flex-dir name + :layout-flex-dir get-layout-direction :layout-align-items name :layout-justify-content name - :layout-wrap-type name + :layout-wrap-type get-layout-orientation :layout-gap format-gap :layout-padding fmt/format-padding}}}) @@ -98,9 +125,9 @@ :text-transform] :to-prop {:fill-color "color"} :format {:font-family #(str "'" % "'") - :font-style #(str "'" % "'") + :font-style #(str %) :font-size #(str % "px") - :line-height #(str % "px") + :line-height #(str %) :letter-spacing #(str % "px") :text-decoration name :text-transform name @@ -126,6 +153,25 @@ :layout-item-min-w #(str % "px") :layout-item-align-self name}}) +(def layout-align-content + {:props [:layout-align-content] + :to-prop {:layout-align-content "align-content"} + :format {:layout-align-content name}}) + +(defn get-specific-value + [values prop] + (let [result (if (get values prop) + (get values prop) + (get (:selrect values) prop)) + result (if (= :width prop) + (get-size :width values) + result) + result (if (= :height prop) + (get-size :height values) + result)] + + result)) + (defn generate-css-props ([values properties] (generate-css-props values properties nil)) @@ -150,7 +196,7 @@ get-value (fn [prop] (if-let [props (prop multi)] (map #(get values %) props) - (get values prop))) + (get-specific-value values prop))) null? (fn [value] (if (coll? value) @@ -178,20 +224,19 @@ ;; it will come with a vector of flex-items if any. ;; If there are none it will continue as usual. flex-items (:flex-items shape) - props (->> styles-data vals (mapcat :props)) to-prop (->> styles-data vals (map :to-prop) (reduce merge)) format (->> styles-data vals (map :format) (reduce merge)) multi (->> styles-data vals (map :multi) (reduce merge)) - props (if (seq flex-items) - (concat props (:props layout-flex-item-params)) - props) - to-prop (if (seq flex-items) - (merge to-prop (:to-prop layout-flex-item-params)) - to-prop) - format (if (seq flex-items) - (merge format (:format layout-flex-item-params)) - format)] + props (cond-> props + (seq flex-items) (concat (:props layout-flex-item-params)) + (= :wrap (:layout-wrap-type shape)) (concat (:props layout-align-content))) + to-prop (cond-> to-prop + (seq flex-items) (merge (:to-prop layout-flex-item-params)) + (= :wrap (:layout-wrap-type shape)) (merge (:to-prop layout-align-content))) + format (cond-> format + (seq flex-items) (merge (:format layout-flex-item-params)) + (= :wrap (:layout-wrap-type shape)) (merge (:format layout-align-content)))] (generate-css-props shape props {:to-prop to-prop :format format :multi multi @@ -208,40 +253,48 @@ (defn parse-style-text-blocks [node attrs] (letfn - [(rec-style-text-map [acc node style] - (let [node-style (merge style (select-keys node attrs)) - head (or (-> acc first) [{} ""]) - [head-style head-text] head + [(rec-style-text-map [acc node style] + (let [node-style (merge style (select-keys node attrs)) + head (or (-> acc first) [{} ""]) + [head-style head-text] head - new-acc - (cond - (:children node) - (reduce #(rec-style-text-map %1 %2 node-style) acc (:children node)) + new-acc + (cond + (:children node) + (reduce #(rec-style-text-map %1 %2 node-style) acc (:children node)) - (not= head-style node-style) - (cons [node-style (:text node "")] acc) + (not= head-style node-style) + (cons [node-style (:text node "")] acc) - :else - (cons [node-style (str head-text "" (:text node))] (rest acc))) + :else + (cons [node-style (str head-text "" (:text node))] (rest acc))) ;; We add an end-of-line when finish a paragraph - new-acc - (if (= (:type node) "paragraph") - (let [[hs ht] (first new-acc)] - (cons [hs (str ht "\n")] (rest new-acc))) - new-acc)] - new-acc))] + new-acc + (if (= (:type node) "paragraph") + (let [[hs ht] (first new-acc)] + (cons [hs (str ht "\n")] (rest new-acc))) + new-acc)] + new-acc))] (-> (rec-style-text-map [] node {}) reverse))) (defn text->properties [shape] - (let [text-shape-style (select-keys styles-data [:layout :shadow :blur]) + (let [flex-items (:flex-items shape) + text-shape-style (select-keys styles-data [:layout :shadow :blur]) shape-props (->> text-shape-style vals (mapcat :props)) shape-to-prop (->> text-shape-style vals (map :to-prop) (reduce merge)) shape-format (->> text-shape-style vals (map :format) (reduce merge)) + shape-props (cond-> shape-props + (seq flex-items) (concat (:props layout-flex-item-params))) + shape-to-prop (cond-> shape-to-prop + (seq flex-items) (merge (:to-prop layout-flex-item-params))) + shape-format (cond-> shape-format + (seq flex-items) (merge (:format layout-flex-item-params))) + text-values (->> (search-text-attrs (:content shape) (conj (:props style-text) :fill-color-gradient :fill-opacity)) @@ -257,9 +310,7 @@ (:props style-text) {:to-prop (:to-prop style-text) :format (:format style-text) - :tab-size 2})])) - - ) + :tab-size 2})]))) (defn generate-css [shape] (let [name (:name shape)