From 723c14bef2fa473759d4f9c7bd4f9b407ffd4144 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Fri, 22 Sep 2023 14:22:40 +0200 Subject: [PATCH] :bug: Fix problems with code generation --- common/src/app/common/geom/shapes/bounds.cljc | 2 +- .../geom/shapes/grid_layout/positions.cljc | 8 +- frontend/src/app/main/ui/shapes/frame.cljs | 3 +- .../sidebar/options/menus/layout_item.cljs | 4 +- frontend/src/app/util/code_gen/common.cljs | 22 +++--- .../src/app/util/code_gen/markup_html.cljs | 17 +++-- frontend/src/app/util/code_gen/style_css.cljs | 1 + .../app/util/code_gen/style_css_formats.cljs | 3 + .../app/util/code_gen/style_css_values.cljs | 76 ++++++++++--------- 9 files changed, 78 insertions(+), 58 deletions(-) diff --git a/common/src/app/common/geom/shapes/bounds.cljc b/common/src/app/common/geom/shapes/bounds.cljc index ba6f4c50c6..4b35744d30 100644 --- a/common/src/app/common/geom/shapes/bounds.cljc +++ b/common/src/app/common/geom/shapes/bounds.cljc @@ -154,7 +154,7 @@ (empty? (:shapes shape)) [(calculate-base-bounds shape)] - (:masked-group shape) + (or (:masked-group shape) (= :bool (:type shape))) [(calculate-base-bounds shape)] (and (cph/frame-shape? shape) (not (:show-content shape))) diff --git a/common/src/app/common/geom/shapes/grid_layout/positions.cljc b/common/src/app/common/geom/shapes/grid_layout/positions.cljc index 6f73edb886..435d662187 100644 --- a/common/src/app/common/geom/shapes/grid_layout/positions.cljc +++ b/common/src/app/common/geom/shapes/grid_layout/positions.cljc @@ -142,7 +142,9 @@ :center [(gpt/add origin-h (hv (/ child-width 2))) - (gpo/project-point cell-bounds :h (gpo/center cell-bounds))] + (-> (gpo/project-point cell-bounds :h (gpo/center cell-bounds)) + (gpt/add (hv (/ left-m 2))) + (gpt/subtract (hv (/ right-m 2))))] [origin-h (gpt/add (first cell-bounds) (hv left-m))]) @@ -155,7 +157,9 @@ :center [(gpt/add origin-v (vv (/ child-height 2))) - (gpo/project-point cell-bounds :v (gpo/center cell-bounds))] + (-> (gpo/project-point cell-bounds :v (gpo/center cell-bounds)) + (gpt/add (vv top-m)) + (gpt/subtract (vv bottom-m)))] [origin-v (gpt/add (first cell-bounds) (vv top-m))])] diff --git a/frontend/src/app/main/ui/shapes/frame.cljs b/frontend/src/app/main/ui/shapes/frame.cljs index ae7fddc771..893fc33b9d 100644 --- a/frontend/src/app/main/ui/shapes/frame.cljs +++ b/frontend/src/app/main/ui/shapes/frame.cljs @@ -168,8 +168,7 @@ is-component? (mf/use-ctx muc/is-component?) childs (cond-> childs (ctl/any-layout? shape) - (cph/sort-layout-children-z-index)) - ] + (cph/sort-layout-children-z-index))] [:> frame-container props [:g.frame-children {:opacity (:opacity shape)} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs index 7f88b351f7..a9187e95cb 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs @@ -519,8 +519,7 @@ :on-change-behaviour-v-refactor on-change-behaviour-v :on-change on-change-behaviour}] (when is-absolute? - [:div {:class (stl/css-case :z-index-wrapper true - :disabled (not is-absolute?)) + [:div {:class (stl/css-case :z-index-wrapper true) :title "z-index"} [:span {:class (stl/css :icon-text)} @@ -653,7 +652,6 @@ :on-focus #(dom/select-target %) :on-change #(on-change-z-index %) :nillable true - :disabled (not is-absolute?) :value (:layout-item-z-index values)}]]]]) [:* diff --git a/frontend/src/app/util/code_gen/common.cljs b/frontend/src/app/util/code_gen/common.cljs index 1cddbf506c..aa4719c626 100644 --- a/frontend/src/app/util/code_gen/common.cljs +++ b/frontend/src/app/util/code_gen/common.cljs @@ -11,13 +11,15 @@ (defn shape->selector [shape] - (let [name (-> (:name shape) - (subs 0 (min 10 (count (:name shape)))) - (str/replace #"[^a-zA-Z0-9\s\:]+" "")) - ;; selectors cannot start with numbers - name (if (re-matches #"^\d.*" name) (dm/str "c-" name) name) - id (-> (dm/str (:id shape)) - (subs 24 36)) - selector (str/css-selector (dm/str name " " id)) - selector (if (str/starts-with? selector "-") (subs selector 1) selector)] - selector)) + (if shape + (let [name (-> (:name shape) + (subs 0 (min 10 (count (:name shape)))) + (str/replace #"[^a-zA-Z0-9\s\:]+" "")) + ;; selectors cannot start with numbers + name (if (re-matches #"^\d.*" name) (dm/str "c-" name) name) + id (-> (dm/str (:id shape)) + (subs 24 36)) + selector (str/css-selector (dm/str name " " id)) + selector (if (str/starts-with? selector "-") (subs selector 1) selector)] + selector) + "")) diff --git a/frontend/src/app/util/code_gen/markup_html.cljs b/frontend/src/app/util/code_gen/markup_html.cljs index db7f27d4b6..4c5fdf0c5c 100644 --- a/frontend/src/app/util/code_gen/markup_html.cljs +++ b/frontend/src/app/util/code_gen/markup_html.cljs @@ -42,7 +42,7 @@ ;; 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))))) + (not= (-> shape :strokes first :stroke-alignment) :inner))))) (defn generate-html ([objects shape] @@ -58,7 +58,8 @@ (let [svg-markup (generate-svg objects shape)] (dm/fmt "%
\n%\n%
" indent - (cgc/shape->selector shape) + (dm/str "shape " (d/name (:type shape)) " " + (cgc/shape->selector shape)) svg-markup indent)) @@ -66,7 +67,8 @@ (let [text-shape-html (rds/renderToStaticMarkup (mf/element text/text-shape #js {:shape shape :code? true}))] (dm/fmt "%
\n%\n%
" indent - (cgc/shape->selector shape) + (dm/str "shape " (d/name (:type shape)) " " + (cgc/shape->selector shape)) text-shape-html indent)) @@ -76,19 +78,22 @@ (dm/fmt "%\n%" indent image-url - (cgc/shape->selector shape) + (dm/str "shape " (d/name (:type shape)) " " + (cgc/shape->selector shape)) indent)) (empty? (:shapes shape)) (dm/fmt "%
\n%
" indent - (cgc/shape->selector shape) + (dm/str "shape " (d/name (:type shape)) " " + (cgc/shape->selector shape)) indent) :else (dm/fmt "%
\n%\n%
" indent - (cgc/shape->selector shape) + (dm/str (d/name (:type shape)) " " + (cgc/shape->selector shape)) (->> (:shapes shape) (maybe-reverse) (map #(generate-html objects (get objects %) (inc level))) diff --git a/frontend/src/app/util/code_gen/style_css.cljs b/frontend/src/app/util/code_gen/style_css.cljs index 18dab1a592..1a71e0a493 100644 --- a/frontend/src/app/util/code_gen/style_css.cljs +++ b/frontend/src/app/util/code_gen/style_css.cljs @@ -78,6 +78,7 @@ svg { :column-gap :row-gap :padding + :z-index ;; Flex related properties :flex-direction diff --git a/frontend/src/app/util/code_gen/style_css_formats.cljs b/frontend/src/app/util/code_gen/style_css_formats.cljs index 440868be75..83ce8580c3 100644 --- a/frontend/src/app/util/code_gen/style_css_formats.cljs +++ b/frontend/src/app/util/code_gen/style_css_formats.cljs @@ -17,6 +17,8 @@ :top :position :width :size :height :size + :min-width :size + :min-height :size :background :color :background-color :color :background-image :color-array @@ -28,6 +30,7 @@ :row-gap :size-array :column-gap :size-array :padding :size-array + :margin :size-array :grid-template-rows :tracks :grid-template-columns :tracks :transform :matrix diff --git a/frontend/src/app/util/code_gen/style_css_values.cljs b/frontend/src/app/util/code_gen/style_css_values.cljs index 53805f28f2..67c35856f7 100644 --- a/frontend/src/app/util/code_gen/style_css_values.cljs +++ b/frontend/src/app/util/code_gen/style_css_values.cljs @@ -28,8 +28,9 @@ (cond (or (and (ctl/any-layout-immediate-child? objects shape) (not (ctl/layout-absolute? shape)) - (or (cph/group-shape? shape) - (cph/frame-shape? shape))) + (or (cph/group-like-shape? shape) + (cph/frame-shape? shape) + (svg-markup? shape))) (cph/root-frame? shape)) :relative @@ -42,32 +43,20 @@ (defn get-shape-position [shape objects coord] - (let [ - parent (get objects (:parent-id shape)) - parent-value (dm/get-in parent [:selrect coord]) - [selrect _ _] - (-> (:points shape) - (gsh/transform-points (gsh/shape->center parent) (:transform-inverse parent)) - (gsh/calculate-geometry)) - - ;;shape (gsh/transform-shape) - shape-value (get selrect coord) - ] - (when (and (not (cph/root-frame? shape)) - (or (not (ctl/any-layout-immediate-child? objects shape)) - (ctl/layout-absolute? shape))) - (- shape-value parent-value)))) - -#_(defn get-shape-position - [shape objects coord] - (when-not (or (cph/root-frame? shape) - (and (ctl/any-layout-immediate-child? objects shape) - (not (ctl/layout-absolute? shape)))) + (when (and (not (cph/root-frame? shape)) + (or (not (ctl/any-layout-immediate-child? objects shape)) + (ctl/layout-absolute? shape))) (let [parent (get objects (:parent-id shape)) - bounds (gpo/parent-coords-bounds (:points shape) (:points parent)) - vv (gpt/to-vec (first (:points parent)) (first bounds))] - (get vv coord)))) + parent-value (dm/get-in parent [:selrect coord]) + + [selrect _ _] + (-> (:points shape) + (gsh/transform-points (gsh/shape->center parent) (:transform-inverse parent)) + (gsh/calculate-geometry)) + + shape-value (get selrect coord)] + (- shape-value parent-value)))) (defmethod get-value :left [_ shape objects] @@ -250,7 +239,8 @@ (defn get-grid-coord [shape objects prop span-prop] - (when (ctl/grid-layout-immediate-child? objects shape) + (when (and (ctl/grid-layout-immediate-child? objects shape) + (not (ctl/layout-absolute? shape))) (let [parent (get objects (:parent-id shape)) cell (ctl/get-cell-by-shape-id parent (:id shape))] (if (> (get cell span-prop) 1) @@ -275,10 +265,22 @@ 0)) (defmethod get-value :margin - [_ shape objects] + [_ {:keys [layout-item-margin] :as shape} objects] + + (when (ctl/any-layout-immediate-child? objects shape) + (let [default-margin {:m1 0 :m2 0 :m3 0 :m4 0} + {:keys [m1 m2 m3 m4]} (merge default-margin layout-item-margin)] + (when (or (not= m1 0) (not= m2 0) (not= m3 0) (not= m4 0)) + [m1 m2 m3 m4])))) + +(defmethod get-value :z-index + [_ {:keys [layout-item-z-index] :as shape} objects] (cond - (ctl/flex-layout-immediate-child? objects shape) - (:layout-item-margin shape))) + (cph/root-frame? shape) + 0 + + (ctl/any-layout-immediate-child? objects shape) + layout-item-z-index)) (defmethod get-value :max-height [_ shape objects] @@ -289,8 +291,11 @@ (defmethod get-value :min-height [_ shape objects] (cond - (ctl/flex-layout-immediate-child? objects shape) - (:layout-item-min-h shape))) + (and (ctl/flex-layout-immediate-child? objects shape) (some? (:layout-item-min-h shape))) + (:layout-item-min-h shape) + + (and (ctl/auto-height? shape) (cph/frame-shape? shape) (not (:show-content shape))) + (-> shape :selrect :height))) (defmethod get-value :max-width [_ shape objects] @@ -301,8 +306,11 @@ (defmethod get-value :min-width [_ shape objects] (cond - (ctl/flex-layout-immediate-child? objects shape) - (:layout-item-min-w shape))) + (and (ctl/flex-layout-immediate-child? objects shape) (some? (:layout-item-min-w shape))) + (:layout-item-min-w shape) + + (and (ctl/auto-width? shape) (cph/frame-shape? shape) (not (:show-content shape))) + (-> shape :selrect :width))) (defmethod get-value :align-self [_ shape objects]