From aa36d162f234a516f5646f466ccebee783c09844 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Tue, 7 Nov 2023 11:25:03 +0100 Subject: [PATCH 1/4] :lipstick: Show rounded corners when rulers hiden --- .../src/app/main/ui/workspace/viewport.cljs | 8 ++- .../app/main/ui/workspace/viewport/rules.cljs | 59 ++++++++++--------- 2 files changed, 36 insertions(+), 31 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs index 5814a2b0e..a4a557a2a 100644 --- a/frontend/src/app/main/ui/workspace/viewport.cljs +++ b/frontend/src/app/main/ui/workspace/viewport.cljs @@ -226,7 +226,8 @@ (not node-editing?) (or show-distances? mode-inspect?)) show-artboard-names? (contains? layout :display-artboard-names) - show-rules? (and (contains? layout :rules) (not (contains? layout :hide-ui))) + hide-ui? (contains? layout :hide-ui) + show-rules? (and (contains? layout :rules) (not hide-ui?)) disabled-guides? (or drawing-tool transform) @@ -525,14 +526,15 @@ :zoom zoom :vbox vbox}] - (when show-rules? + (when-not hide-ui? [:& rules/rules {:zoom zoom :zoom-inverse zoom-inverse :vbox vbox :selected-shapes selected-shapes :offset-x offset-x - :offset-y offset-y}]) + :offset-y offset-y + :show-rules? show-rules?}]) (when show-rules? [:& guides/viewport-guides diff --git a/frontend/src/app/main/ui/workspace/viewport/rules.cljs b/frontend/src/app/main/ui/workspace/viewport/rules.cljs index 251ded7e6..0e4420eaf 100644 --- a/frontend/src/app/main/ui/workspace/viewport/rules.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/rules.cljs @@ -156,33 +156,12 @@ (let [rules-width (* rules-width zoom-inverse) step (calculate-step-size zoom) clip-id (str "clip-rule-" (d/name axis)) - new-css-system (mf/use-ctx ctx/new-css-system) - rules-background (if new-css-system new-css-rules-background rules-background) - font-color (if new-css-system new-css-font-color font-color) - rule-area-size (/ rule-area-size zoom) - border-radius (/ new-css-canvas-border-radius zoom)] + new-css-system (mf/use-ctx ctx/new-css-system) + font-color (if new-css-system new-css-font-color font-color)] [:* (let [{:keys [x y width height]} (get-background-area vbox zoom-inverse axis)] - [:* - [:rect {:x x :y y :width width :height height :style {:fill rules-background}}] - - ;; Draw the rules' rounded corners in the viewport corners - (when new-css-system - (if (= axis :x) - [:* - [:path {:d (round-corner-path-tl (+ x rule-area-size) (+ y rule-area-size) border-radius) - :style {:fill rules-background}}] - - [:path {:d (round-corner-path-tr (+ x width (- border-radius)) (+ y rule-area-size) border-radius) - :style {:fill rules-background}}]] - - [:* - [:path {:d (round-corner-path-bl (+ x rule-area-size) (+ y height (- border-radius)) border-radius) - :style {:fill rules-background}}] - - [:path {:d (round-corner-path-br (+ x (:width vbox) (- border-radius)) (+ y height (- border-radius)) border-radius) - :style {:fill rules-background}}]]))]) + [:rect {:x x :y y :width width :height height :style {:fill rules-background}}]) [:g.rules {:clipPath (str "url(#" clip-id ")")} @@ -315,7 +294,7 @@ (mf/defc rules {::mf/wrap-props false - ::mf/wrap [#(mf/memo' % (mf/check-props ["zoom" "vbox" "selected-shapes"]))]} + ::mf/wrap [#(mf/memo' % (mf/check-props ["zoom" "vbox" "selected-shapes" "show-rules?"]))]} [props] (let [zoom (obj/get props "zoom") zoom-inverse (obj/get props "zoom-inverse") @@ -324,6 +303,11 @@ offset-y (obj/get props "offset-y") selected-shapes (-> (obj/get props "selected-shapes") (hooks/use-equal-memo)) + show-rules? (obj/get props "show-rules?") + + new-css-system (mf/use-ctx ctx/new-css-system) + rules-background (if new-css-system new-css-rules-background rules-background) + border-radius (/ new-css-canvas-border-radius zoom) selection-rect (mf/use-memo @@ -333,10 +317,29 @@ (when (some? vbox) [:g.rules {:pointer-events "none"} - [:& rules-axis {:zoom zoom :zoom-inverse zoom-inverse :vbox vbox :axis :x :offset offset-x}] - [:& rules-axis {:zoom zoom :zoom-inverse zoom-inverse :vbox vbox :axis :y :offset offset-y}] + (when show-rules? + [:* + [:& rules-axis {:zoom zoom :zoom-inverse zoom-inverse :vbox vbox :axis :x :offset offset-x}] + [:& rules-axis {:zoom zoom :zoom-inverse zoom-inverse :vbox vbox :axis :y :offset offset-y}]]) - (when (some? selection-rect) + ;; Draw the rules' rounded corners in the viewport corners + (when new-css-system + (let [{:keys [x y width height]} vbox + rule-area-size (if show-rules? (/ rule-area-size zoom) 0)] + [:* + [:path {:d (round-corner-path-tl (+ x rule-area-size) (+ y rule-area-size) border-radius) + :style {:fill rules-background}}] + + [:path {:d (round-corner-path-tr (+ x width (- border-radius)) (+ y rule-area-size) border-radius) + :style {:fill rules-background}}] + + [:path {:d (round-corner-path-bl (+ x rule-area-size) (+ y height (- border-radius)) border-radius) + :style {:fill rules-background}}] + + [:path {:d (round-corner-path-br (+ x (:width vbox) (- border-radius)) (+ y height (- border-radius)) border-radius) + :style {:fill rules-background}}]])) + + (when (and show-rules? (some? selection-rect)) [:& selection-area {:zoom zoom :zoom-inverse zoom-inverse :vbox vbox From b71ed9f6f20f3a781a4b791228e4341410240d32 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Tue, 7 Nov 2023 11:25:28 +0100 Subject: [PATCH 2/4] :bug: Fix crash when multiple typographies selected --- .../sidebar/options/menus/typography.cljs | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs index 874df130c..41ba3448c 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs @@ -377,12 +377,18 @@ :on-blur on-blur}])] [:div {:class (stl/css :font-variant-options)} - (let [basic-variant-options (map (fn [variant] - {:value (:id variant) :key (pr-str variant) :label (:name variant)}) (:variants font)) + (let [basic-variant-options (->> (:variants font) + (map (fn [variant] + {:value (:id variant) + :key (pr-str variant) + :label (:name variant)}) )) variant-options (if (= font-size :multiple) - (conj {:value :multiple :key :multiple-variants :label "--"} basic-variant-options) + (conj basic-variant-options + {:value :multiple + :key :multiple-variants + :label "--"} ) basic-variant-options)] - ;; TODO Add disabled mode + ;; TODO Add disabled mode [:& select {:class (stl/css :font-variant-select) :default-value (attr->string font-variant-id) From bec683d1efa18544d5429e04af7cfa785b078f60 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Tue, 7 Nov 2023 11:26:01 +0100 Subject: [PATCH 3/4] :bug: Fix problem resizing texts --- common/src/app/common/data.cljc | 29 ++++++++++--------- common/src/app/common/geom/modif_tree.cljc | 1 - .../app/common/geom/shapes/transforms.cljc | 2 +- .../src/app/common/geom/shapes/tree_seq.cljc | 1 - .../shapes/text/viewport_texts_html.cljs | 23 +++++++++------ 5 files changed, 31 insertions(+), 25 deletions(-) diff --git a/common/src/app/common/data.cljc b/common/src/app/common/data.cljc index adfa66189..6ac1c0013 100644 --- a/common/src/app/common/data.cljc +++ b/common/src/app/common/data.cljc @@ -250,22 +250,25 @@ #(patch-object % changes)) ([object changes] - (->> changes - (reduce-kv - (fn [object key value] - (cond - (map? value) - (update object key patch-object value) + (if object + (->> changes + (reduce-kv + (fn [object key value] + (cond + (map? value) + (let [current (get object key)] + (assoc object key (patch-object current value))) - (and (nil? value) (record? object)) - (assoc object key nil) + (and (nil? value) (record? object)) + (assoc object key nil) - (nil? value) - (dissoc object key value) + (nil? value) + (dissoc object key value) - :else - (assoc object key value))) - object)))) + :else + (assoc object key value))) + object)) + changes))) (defn remove-at-index "Takes a vector and returns a vector with an element in the diff --git a/common/src/app/common/geom/modif_tree.cljc b/common/src/app/common/geom/modif_tree.cljc index 709012d7d..e587d05c8 100644 --- a/common/src/app/common/geom/modif_tree.cljc +++ b/common/src/app/common/geom/modif_tree.cljc @@ -7,7 +7,6 @@ (ns app.common.geom.modif-tree (:require [app.common.data.macros :as dm] - [app.common.geom.shapes.min-size-layout] [app.common.pages.helpers :as cph] [app.common.types.modifiers :as ctm])) diff --git a/common/src/app/common/geom/shapes/transforms.cljc b/common/src/app/common/geom/shapes/transforms.cljc index 376cd41a7..f03d73daf 100644 --- a/common/src/app/common/geom/shapes/transforms.cljc +++ b/common/src/app/common/geom/shapes/transforms.cljc @@ -486,7 +486,7 @@ (transform-shape modifiers)))) ([shape modifiers] - (if (and (some? modifiers) (not (ctm/empty? modifiers))) + (if (and (some? shape) (some? modifiers) (not (ctm/empty? modifiers))) (let [transform (ctm/modifiers->transform modifiers)] (cond-> shape (and (some? transform) diff --git a/common/src/app/common/geom/shapes/tree_seq.cljc b/common/src/app/common/geom/shapes/tree_seq.cljc index 77932154b..bc0ee4a40 100644 --- a/common/src/app/common/geom/shapes/tree_seq.cljc +++ b/common/src/app/common/geom/shapes/tree_seq.cljc @@ -8,7 +8,6 @@ (:require [app.common.data :as d] [app.common.data.macros :as dm] - [app.common.geom.shapes.min-size-layout] [app.common.pages.helpers :as cph] [app.common.types.shape.layout :as ctl] [app.common.uuid :as uuid])) diff --git a/frontend/src/app/main/ui/workspace/shapes/text/viewport_texts_html.cljs b/frontend/src/app/main/ui/workspace/shapes/text/viewport_texts_html.cljs index 864ff8d15..7ff9f23ca 100644 --- a/frontend/src/app/main/ui/workspace/shapes/text/viewport_texts_html.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/text/viewport_texts_html.cljs @@ -30,15 +30,20 @@ [rumext.v2 :as mf])) (defn fix-position [shape] - (let [modifiers (:modifiers shape) - shape' (gsh/transform-shape shape modifiers) - ;; We need to remove the movement because the dynamic modifiers will have move it - deltav (gpt/to-vec (gpt/point (:selrect shape')) - (gpt/point (:selrect shape)))] - (-> shape - (gsh/transform-shape (ctm/move modifiers deltav)) - (mdwm/update-grow-type shape) - (dissoc :modifiers)))) + (if-let [modifiers (:modifiers shape)] + (let [shape' (gsh/transform-shape shape modifiers) + + old-sr (dm/get-prop shape :selrect) + new-sr (dm/get-prop shape' :selrect) + + ;; We need to remove the movement because the dynamic modifiers will have move it + deltav (gpt/to-vec (gpt/point new-sr) + (gpt/point old-sr))] + (-> shape + (gsh/transform-shape (ctm/move modifiers deltav)) + (mdwm/update-grow-type shape) + (dissoc :modifiers))) + shape)) (defn- update-with-editor-state "Updates the shape with the current state in the editor" From 6d5af8d6ef2af4fa720427a69ba845d1ee407141 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Tue, 7 Nov 2023 11:26:13 +0100 Subject: [PATCH 4/4] :bug: Fix problem with layout sizing --- .../geom/shapes/flex_layout/layout_data.cljc | 7 +- .../geom/shapes/grid_layout/layout_data.cljc | 6 +- .../common/geom/shapes/min_size_layout.cljc | 85 +++++++++---------- 3 files changed, 48 insertions(+), 50 deletions(-) diff --git a/common/src/app/common/geom/shapes/flex_layout/layout_data.cljc b/common/src/app/common/geom/shapes/flex_layout/layout_data.cljc index ed818c66b..9a8dafd5c 100644 --- a/common/src/app/common/geom/shapes/flex_layout/layout_data.cljc +++ b/common/src/app/common/geom/shapes/flex_layout/layout_data.cljc @@ -70,11 +70,8 @@ child-max-width (ctl/child-max-width child) child-max-height (ctl/child-max-height child) - [child-margin-top child-margin-right child-margin-bottom child-margin-left] - (ctl/child-margins child) - - child-margin-width (+ child-margin-left child-margin-right) - child-margin-height (+ child-margin-top child-margin-bottom) + child-margin-width (ctl/child-width-margin child) + child-margin-height (ctl/child-height-margin child) fill-width? (ctl/fill-width? child) fill-height? (ctl/fill-height? child) diff --git a/common/src/app/common/geom/shapes/grid_layout/layout_data.cljc b/common/src/app/common/geom/shapes/grid_layout/layout_data.cljc index 51ce068aa..fa07db760 100644 --- a/common/src/app/common/geom/shapes/grid_layout/layout_data.cljc +++ b/common/src/app/common/geom/shapes/grid_layout/layout_data.cljc @@ -61,13 +61,15 @@ (defn child-min-width [child child-bounds bounds objects] - (-child-min-width child child-bounds bounds objects)) + (+ (ctl/child-width-margin child) + (-child-min-width child child-bounds bounds objects))) (def -child-min-height nil) (defn child-min-height [child child-bounds bounds objects] - (-child-min-height child child-bounds bounds objects)) + (+ (ctl/child-height-margin child) + (-child-min-height child child-bounds bounds objects))) (defn layout-bounds [parent shape-bounds] diff --git a/common/src/app/common/geom/shapes/min_size_layout.cljc b/common/src/app/common/geom/shapes/min_size_layout.cljc index 8f1d6b6f7..ab9ca25ac 100644 --- a/common/src/app/common/geom/shapes/min_size_layout.cljc +++ b/common/src/app/common/geom/shapes/min_size_layout.cljc @@ -17,53 +17,53 @@ (defn child-min-width [child child-bounds bounds objects] - (let [min-width - (cond - (and (ctl/fill-width? child) (ctl/flex-layout? child)) - (let [children (cph/get-immediate-children objects (dm/get-prop child :id) {:remove-hidden true})] - (max (ctl/child-min-width child) - (gpo/width-points (fb/layout-content-bounds bounds child children objects)))) - - (and (ctl/fill-width? child) - (ctl/grid-layout? child)) - (let [children - (->> (cph/get-immediate-children objects (:id child) {:remove-hidden true}) - (map #(vector @(get bounds (:id %)) %))) - layout-data (gd/calc-layout-data child @(get bounds (:id child)) children bounds objects true)] - (max (ctl/child-min-width child) - (gpo/width-points (gb/layout-content-bounds bounds child layout-data)))) - - (ctl/fill-width? child) - (ctl/child-min-width child) + (cond + (and (ctl/fill-width? child) (ctl/flex-layout? child)) + (ctl/child-min-width child) + ;; Uncomment this to activate "auto" as min size + #_(let [children (cph/get-immediate-children objects (dm/get-prop child :id) {:remove-hidden true})] + (max (ctl/child-min-width child) + (gpo/width-points (fb/layout-content-bounds bounds child children objects)))) - :else - (gpo/width-points child-bounds))] - (+ min-width (ctl/child-width-margin child)))) + (and (ctl/fill-width? child) + (ctl/grid-layout? child)) + (let [children + (->> (cph/get-immediate-children objects (:id child) {:remove-hidden true}) + (map #(vector @(get bounds (:id %)) %))) + layout-data (gd/calc-layout-data child @(get bounds (:id child)) children bounds objects true)] + (max (ctl/child-min-width child) + (gpo/width-points (gb/layout-content-bounds bounds child layout-data)))) + + (ctl/fill-width? child) + (ctl/child-min-width child) + + :else + (gpo/width-points child-bounds))) (defn child-min-height [child child-bounds bounds objects] - (let [min-height - (cond - (and (ctl/fill-height? child) (ctl/flex-layout? child)) - (let [children (cph/get-immediate-children objects (dm/get-prop child :id) {:remove-hidden true})] - (max (ctl/child-min-height child) - (gpo/height-points (fb/layout-content-bounds bounds child children objects)))) - - (and (ctl/fill-height? child) (ctl/grid-layout? child)) - (let [children - (->> (cph/get-immediate-children objects (dm/get-prop child :id) {:remove-hidden true}) - (map (fn [child] [@(get bounds (:id child)) child]))) - layout-data (gd/calc-layout-data child (:points child) children bounds objects true) - auto-bounds (gb/layout-content-bounds bounds child layout-data)] - (max (ctl/child-min-height child) - (gpo/height-points auto-bounds))) - - (ctl/fill-height? child) - (ctl/child-min-height child) + (cond + (and (ctl/fill-height? child) (ctl/flex-layout? child)) + ;; Uncomment this to activate "auto" as min size + (ctl/child-min-height child) + #_(let [children (cph/get-immediate-children objects (dm/get-prop child :id) {:remove-hidden true})] + (max (ctl/child-min-height child) + (gpo/height-points (fb/layout-content-bounds bounds child children objects)))) - :else - (gpo/height-points child-bounds))] - (+ min-height (ctl/child-height-margin child)))) + (and (ctl/fill-height? child) (ctl/grid-layout? child)) + (let [children + (->> (cph/get-immediate-children objects (dm/get-prop child :id) {:remove-hidden true}) + (map (fn [child] [@(get bounds (:id child)) child]))) + layout-data (gd/calc-layout-data child (:points child) children bounds objects true) + auto-bounds (gb/layout-content-bounds bounds child layout-data)] + (max (ctl/child-min-height child) + (gpo/height-points auto-bounds))) + + (ctl/fill-height? child) + (ctl/child-min-height child) + + :else + (gpo/height-points child-bounds))) #?(:cljs (do (set! fd/-child-min-width child-min-width) @@ -80,4 +80,3 @@ (alter-var-root #'fb/-child-min-height (constantly child-min-height)) (alter-var-root #'gd/-child-min-width (constantly child-min-width)) (alter-var-root #'gd/-child-min-height (constantly child-min-height)))) -