From d5b2a91bce1ac905b7cbb50ab3b3b2c41df4af3f Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Thu, 14 Mar 2024 12:42:07 +0100 Subject: [PATCH 1/6] :bug: Fix problem with fast change between numeric inputs --- frontend/src/app/main/ui/components/numeric_input.cljs | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/frontend/src/app/main/ui/components/numeric_input.cljs b/frontend/src/app/main/ui/components/numeric_input.cljs index 54965605e..134a01440 100644 --- a/frontend/src/app/main/ui/components/numeric_input.cljs +++ b/frontend/src/app/main/ui/components/numeric_input.cljs @@ -169,6 +169,13 @@ (update-input value-str) (dom/blur! node))))) + handle-change + (mf/use-fn + (mf/deps parse-value) + (fn [] + ;; Store the last value inputed + (reset! last-value* (parse-value)))) + handle-mouse-wheel (mf/use-fn (mf/deps set-delta) @@ -218,7 +225,7 @@ (obj/unset! "selectOnFocus") (obj/unset! "nillable") (obj/set! "value" mf/undefined) - (obj/set! "onChange" mf/undefined) + (obj/set! "onChange" handle-change) (obj/set! "className" class) (obj/set! "type" "text") (obj/set! "ref" ref) From 3bc6d2b0a790b6e4079d588ade07300eab141b8b Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Thu, 14 Mar 2024 13:35:56 +0100 Subject: [PATCH 2/6] :bug: Fix migrating old components should not clip the content --- backend/src/app/features/components_v2.clj | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/backend/src/app/features/components_v2.clj b/backend/src/app/features/components_v2.clj index 8c7933160..e24cbc469 100644 --- a/backend/src/app/features/components_v2.clj +++ b/backend/src/app/features/components_v2.clj @@ -806,7 +806,8 @@ :width (:width (:selrect root-shape)) :height (:height (:selrect root-shape)) :name (:name component) - :shapes [new-id]}) + :shapes [new-id] + :show-content true}) (assoc :frame-id nil :parent-id nil)) root-shape' (assoc root-shape @@ -846,13 +847,15 @@ (fix-shape [shape] (if (or (nil? (:parent-id shape)) (ctk/instance-head? shape)) - (assoc shape - :type :frame ; Old groups must be converted - :fills (or (:fills shape) []) ; to frames and conform to spec - :shapes (or (:shapes shape) []) - :hide-in-viewer (or (:hide-in-viewer shape) true) - :rx (or (:rx shape) 0) - :ry (or (:ry shape) 0)) + (let [frame? (= :frame (:type shape))] + (assoc shape + :type :frame ; Old groups must be converted + :fills (or (:fills shape) []) ; to frames and conform to spec + :shapes (or (:shapes shape) []) + :hide-in-viewer (if frame? (boolean (:hide-in-viewer shape)) true) + :show-content (if frame? (boolean (:show-content shape)) true) + :rx (or (:rx shape) 0) + :ry (or (:ry shape) 0))) shape))] (-> file-data (update :pages-index update-vals fix-container) From 6bf336342948b3470344c7f3eb8d9ee964fbeb0f Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Thu, 14 Mar 2024 14:19:55 +0100 Subject: [PATCH 3/6] :bug: Fix scroll when file menu open --- frontend/src/app/main/ui/dashboard.cljs | 4 ++++ frontend/src/app/main/ui/dashboard/grid.cljs | 21 +++++++++++--------- 2 files changed, 16 insertions(+), 9 deletions(-) diff --git a/frontend/src/app/main/ui/dashboard.cljs b/frontend/src/app/main/ui/dashboard.cljs index 29c41f8e9..4adec8d15 100644 --- a/frontend/src/app/main/ui/dashboard.cljs +++ b/frontend/src/app/main/ui/dashboard.cljs @@ -58,6 +58,9 @@ project-id (:id project) team-id (:id team) + dashboard-local (mf/deref refs/dashboard-local) + file-menu-open? (:menu-open dashboard-local) + default-project-id (mf/with-memo [projects] (->> (vals projects) @@ -83,6 +86,7 @@ [:div {:class (stl/css :dashboard-content) + :style {:pointer-events (when file-menu-open? "none")} :on-click clear-selected-fn :ref container} (case section :dashboard-projects diff --git a/frontend/src/app/main/ui/dashboard/grid.cljs b/frontend/src/app/main/ui/dashboard/grid.cljs index bb2f44b2b..6f5565611 100644 --- a/frontend/src/app/main/ui/dashboard/grid.cljs +++ b/frontend/src/app/main/ui/dashboard/grid.cljs @@ -388,15 +388,18 @@ (on-menu-click event)))} menu-icon (when (and selected? file-menu-open?) - [:& file-menu {:files (vals selected-files) - :show? (:menu-open dashboard-local) - :left (+ 24 (:x (:menu-pos dashboard-local))) - :top (:y (:menu-pos dashboard-local)) - :navigate? true - :on-edit on-edit - :on-menu-close on-menu-close - :origin origin - :parent-id (str file-id "-action-menu")}])]]]]])) + ;; When the menu is open we disable events in the dashboard. We need to force pointer events + ;; so the menu can be handled + [:div {:style {:pointer-events "all"}} + [:& file-menu {:files (vals selected-files) + :show? (:menu-open dashboard-local) + :left (+ 24 (:x (:menu-pos dashboard-local))) + :top (:y (:menu-pos dashboard-local)) + :navigate? true + :on-edit on-edit + :on-menu-close on-menu-close + :origin origin + :parent-id (str file-id "-action-menu")}]])]]]]])) (mf/defc grid [{:keys [files project origin limit library-view? create-fn] :as props}] From 5c33bc689291798e66351b40db74bbfcf087938d Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Thu, 14 Mar 2024 15:52:26 +0100 Subject: [PATCH 4/6] :bug: Make the layout boards export as responsive markup --- frontend/src/app/main/data/preview.cljs | 2 +- .../src/app/main/ui/viewer/inspect/code.cljs | 4 +- frontend/src/app/util/code_gen.cljs | 4 +- frontend/src/app/util/code_gen/style_css.cljs | 40 +++---- .../app/util/code_gen/style_css_values.cljs | 101 ++++++++++-------- 5 files changed, 82 insertions(+), 69 deletions(-) diff --git a/frontend/src/app/main/data/preview.cljs b/frontend/src/app/main/data/preview.cljs index 519ed96d3..7510fb089 100644 --- a/frontend/src/app/main/data/preview.cljs +++ b/frontend/src/app/main/data/preview.cljs @@ -76,7 +76,7 @@ (let [style-code (dm/str fontfaces-css "\n" - (-> (cg/generate-style-code objects style-type all-children) + (-> (cg/generate-style-code objects style-type [shape] all-children) (cb/format-code style-type))) markup-code diff --git a/frontend/src/app/main/ui/viewer/inspect/code.cljs b/frontend/src/app/main/ui/viewer/inspect/code.cljs index 747d06204..c1e5ebcd2 100644 --- a/frontend/src/app/main/ui/viewer/inspect/code.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/code.cljs @@ -124,11 +124,11 @@ style-code (mf/use-memo - (mf/deps fontfaces-css style-type all-children cg/generate-style-code) + (mf/deps fontfaces-css style-type shapes all-children cg/generate-style-code) (fn [] (dm/str fontfaces-css "\n" - (-> (cg/generate-style-code objects style-type all-children) + (-> (cg/generate-style-code objects style-type shapes all-children) (cb/format-code style-type))))) markup-code diff --git a/frontend/src/app/util/code_gen.cljs b/frontend/src/app/util/code_gen.cljs index e1c35d169..1c8e255b9 100644 --- a/frontend/src/app/util/code_gen.cljs +++ b/frontend/src/app/util/code_gen.cljs @@ -19,8 +19,8 @@ (generate-markup objects shapes))) (defn generate-style-code - [objects type shapes] + [objects type root-shapes all-shapes] (let [generate-style (case type "css" css/generate-style)] - (generate-style objects shapes))) + (generate-style objects root-shapes all-shapes))) diff --git a/frontend/src/app/util/code_gen/style_css.cljs b/frontend/src/app/util/code_gen/style_css.cljs index 197e883ff..5f1776044 100644 --- a/frontend/src/app/util/code_gen/style_css.cljs +++ b/frontend/src/app/util/code_gen/style_css.cljs @@ -35,8 +35,8 @@ body { display: flex; flex-direction: column; align-items: center; - padding: 2rem; - gap: 2rem; + width: 100vw; + min-height: 100vh; } * { @@ -94,6 +94,7 @@ body { :flex-direction :flex-wrap :flex + :flex-grow ;; Grid related properties :grid-template-rows @@ -117,8 +118,8 @@ body { :grid-area]) (defn shape->css-property - [shape objects property] - (when-let [value (get-value property shape objects)] + [shape objects property options] + (when-let [value (get-value property shape objects options)] [property value])) (defn shape->wrapper-css-properties @@ -155,10 +156,10 @@ body { (defn shape->css-properties "Given a shape extract the CSS properties in the format of list [property value]" - [shape objects properties] + [shape objects properties options] (->> properties (keep (fn [property] - (when-let [value (get-value property shape objects)] + (when-let [value (get-value property shape objects options)] [property value]))))) (defn format-css-value @@ -189,7 +190,7 @@ body { ([objects shape properties options] (-> shape - (shape->css-properties objects properties) + (shape->css-properties objects properties options) (format-css-properties options)))) (defn format-js-styles @@ -248,13 +249,13 @@ body { properties (-> shape - (shape->css-properties objects css-properties) + (shape->css-properties objects css-properties options) (format-css-properties options)) wrapper-properties (when wrapper? (-> (d/concat-vec - (shape->css-properties shape objects shape-wrapper-css-properties) + (shape->css-properties shape objects shape-wrapper-css-properties options) (shape->wrapper-css-properties shape objects)) (format-css-properties options))) @@ -285,7 +286,7 @@ body { ([objects shape property options] (-> shape - (shape->css-property objects property) + (shape->css-property objects property options) (format-css-property options)))) (defn get-css-value @@ -293,18 +294,19 @@ body { (get-css-value objects shape property nil)) ([objects shape property options] - (when-let [prop (shape->css-property shape objects property)] + (when-let [prop (shape->css-property shape objects property options)] (format-css-value prop options)))) (defn generate-style - ([objects shapes] - (generate-style objects shapes nil)) - ([objects shapes options] - (dm/str - prelude - (->> shapes - (keep #(get-shape-css-selector % objects options)) - (str/join "\n\n"))))) + ([objects root-shapes all-shapes] + (generate-style objects root-shapes all-shapes nil)) + ([objects root-shapes all-shapes options] + (let [options (assoc options :root-shapes (into #{} (map :id) root-shapes))] + (dm/str + prelude + (->> all-shapes + (keep #(get-shape-css-selector % objects options)) + (str/join "\n\n")))))) (defn shadow->css [shadow] 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 3659d33a2..fe2179c8d 100644 --- a/frontend/src/app/util/code_gen/style_css_values.cljs +++ b/frontend/src/app/util/code_gen/style_css_values.cljs @@ -25,10 +25,10 @@ :image fill-image}) (defmulti get-value - (fn [property _shape _objects] property)) + (fn [property _shape _objects _options] property)) (defmethod get-value :position - [_ shape objects] + [_ shape objects _] (cond (or (and (ctl/any-layout-immediate-child? objects shape) (not (ctl/position-absolute? shape)) @@ -65,15 +65,15 @@ (- shape-value parent-value)))) (defmethod get-value :left - [_ shape objects] + [_ shape objects _] (get-shape-position shape objects :x)) (defmethod get-value :top - [_ shape objects] + [_ shape objects _] (get-shape-position shape objects :y)) (defmethod get-value :flex - [_ shape objects] + [_ shape objects _] (let [parent (cfh/get-parent objects (:id shape))] (when (and (ctl/flex-layout-immediate-child? objects shape) (or (and (contains? #{:row :row-reverse} (:layout-flex-dir parent)) @@ -112,15 +112,26 @@ (get shape type)))) (defmethod get-value :width - [_ shape objects] - (get-shape-size shape objects :width)) + [_ shape objects options] + (let [root? (contains? (:root-shapes options) (:id shape))] + (if (and root? (ctl/any-layout? shape)) + :fill + (get-shape-size shape objects :width)))) (defmethod get-value :height - [_ shape objects] - (get-shape-size shape objects :height)) + [_ shape objects options] + (let [root? (contains? (:root-shapes options) (:id shape))] + (when-not (and root? (ctl/any-layout? shape)) + (get-shape-size shape objects :height)))) + +(defmethod get-value :flex-grow + [_ shape _ options] + (let [root? (contains? (:root-shapes options) (:id shape))] + (when (and root? (ctl/any-layout? shape)) + 1))) (defmethod get-value :transform - [_ shape objects] + [_ shape objects _] (if (cgc/svg-markup? shape) (let [parent (get objects (:parent-id shape)) transform @@ -145,7 +156,7 @@ transform-str)))) (defmethod get-value :background - [_ {:keys [fills] :as shape} _] + [_ {:keys [fills] :as shape} _ _] (let [single-fill? (= (count fills) 1)] (when (and (not (cgc/svg-markup? shape)) (not (cfh/group-shape? shape)) single-fill?) (fill->color (first fills))))) @@ -164,12 +175,12 @@ :width width}))) (defmethod get-value :border - [_ shape _] + [_ shape _ _] (when-not (cgc/svg-markup? shape) (get-stroke-data (first (:strokes shape))))) (defmethod get-value :border-radius - [_ {:keys [rx r1 r2 r3 r4] :as shape} _] + [_ {:keys [rx r1 r2 r3 r4] :as shape} _ _] (cond (cfh/circle-shape? shape) "50%" @@ -181,76 +192,76 @@ [r1 r2 r3 r4])) (defmethod get-value :box-shadow - [_ shape _] + [_ shape _ _] (when-not (cgc/svg-markup? shape) (:shadow shape))) (defmethod get-value :filter - [_ shape _] + [_ shape _ _] (when-not (cgc/svg-markup? shape) (get-in shape [:blur :value]))) (defmethod get-value :display - [_ shape _] + [_ shape _ _] (cond (:hidden shape) "none" (ctl/flex-layout? shape) "flex" (ctl/grid-layout? shape) "grid")) (defmethod get-value :opacity - [_ shape _] + [_ shape _ _] (when (< (:opacity shape) 1) (:opacity shape))) (defmethod get-value :overflow - [_ shape _] + [_ shape _ _] (when (and (cfh/frame-shape? shape) (not (cgc/svg-markup? shape)) (not (:show-content shape))) "hidden")) (defmethod get-value :flex-direction - [_ shape _] + [_ shape _ _] (:layout-flex-dir shape)) (defmethod get-value :align-items - [_ shape _] + [_ shape _ _] (:layout-align-items shape)) (defmethod get-value :align-content - [_ shape _] + [_ shape _ _] (:layout-align-content shape)) (defmethod get-value :justify-items - [_ shape _] + [_ shape _ _] (:layout-justify-items shape)) (defmethod get-value :justify-content - [_ shape _] + [_ shape _ _] (:layout-justify-content shape)) (defmethod get-value :flex-wrap - [_ shape _] + [_ shape _ _] (:layout-wrap-type shape)) (defmethod get-value :gap - [_ shape _] + [_ shape _ _] (let [[g1 g2] (ctl/gaps shape)] (when (and (= g1 g2) (or (not= g1 0) (not= g2 0))) [g1]))) (defmethod get-value :row-gap - [_ shape _] + [_ shape _ _] (let [[g1 g2] (ctl/gaps shape)] (when (and (not= g1 g2) (not= g1 0)) [g1]))) (defmethod get-value :column-gap - [_ shape _] + [_ shape _ _] (let [[g1 g2] (ctl/gaps shape)] (when (and (not= g1 g2) (not= g2 0)) [g2]))) (defmethod get-value :padding - [_ {:keys [layout-padding]} _] + [_ {:keys [layout-padding]} _ _] (when (some? layout-padding) (let [default-padding {:p1 0 :p2 0 :p3 0 :p4 0} {:keys [p1 p2 p3 p4]} (merge default-padding layout-padding)] @@ -258,11 +269,11 @@ [p1 p2 p3 p4])))) (defmethod get-value :grid-template-rows - [_ shape _] + [_ shape _ _] (:layout-grid-rows shape)) (defmethod get-value :grid-template-columns - [_ shape _] + [_ shape _ _] (:layout-grid-columns shape)) (defn area-cell? @@ -270,7 +281,7 @@ (and (= position :area) (d/not-empty? area-name))) (defmethod get-value :grid-template-areas - [_ shape _] + [_ shape _ _] (when (and (ctl/grid-layout? shape) (some area-cell? (vals (:layout-grid-cells shape)))) (let [result @@ -304,15 +315,15 @@ (get cell prop)))))) (defmethod get-value :grid-column - [_ shape objects] + [_ shape objects _] (get-grid-coord shape objects :column :column-span)) (defmethod get-value :grid-row - [_ shape objects] + [_ shape objects _] (get-grid-coord shape objects :row :row-span)) (defmethod get-value :grid-area - [_ shape objects] + [_ shape objects _] (when (and (ctl/grid-layout-immediate-child? objects shape) (not (ctl/position-absolute? shape))) (let [parent (get objects (:parent-id shape)) @@ -321,7 +332,7 @@ (str/replace (:area-name cell) " " "-"))))) (defmethod get-value :flex-shrink - [_ shape objects] + [_ shape objects _] (when (and (ctl/flex-layout-immediate-child? objects shape) (not (and (contains? #{:row :reverse-row} (:layout-flex-dir shape)) @@ -337,7 +348,7 @@ 0)) (defmethod get-value :margin - [_ {:keys [layout-item-margin] :as 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} @@ -346,7 +357,7 @@ [m1 m2 m3 m4])))) (defmethod get-value :z-index - [_ {:keys [layout-item-z-index] :as shape} objects] + [_ {:keys [layout-item-z-index] :as shape} objects _] (cond (cfh/root-frame? shape) 0 @@ -355,13 +366,13 @@ layout-item-z-index)) (defmethod get-value :max-height - [_ shape objects] + [_ shape objects _] (cond (ctl/any-layout-immediate-child? objects shape) (:layout-item-max-h shape))) (defmethod get-value :min-height - [_ shape objects] + [_ shape objects _] (cond (and (ctl/any-layout-immediate-child? objects shape) (some? (:layout-item-min-h shape))) (:layout-item-min-h shape) @@ -370,13 +381,13 @@ (-> shape :selrect :height))) (defmethod get-value :max-width - [_ shape objects] + [_ shape objects _] (cond (ctl/any-layout-immediate-child? objects shape) (:layout-item-max-w shape))) (defmethod get-value :min-width - [_ shape objects] + [_ shape objects _] (cond (and (ctl/any-layout-immediate-child? objects shape) (some? (:layout-item-min-w shape))) (:layout-item-min-w shape) @@ -385,7 +396,7 @@ (-> shape :selrect :width))) (defmethod get-value :align-self - [_ shape objects] + [_ shape objects _] (cond (ctl/flex-layout-immediate-child? objects shape) (:layout-item-align-self shape) @@ -397,7 +408,7 @@ (when (not= align-self :auto) align-self)))) (defmethod get-value :justify-self - [_ shape objects] + [_ shape objects _] (cond (ctl/grid-layout-immediate-child? objects shape) (let [parent (get objects (:parent-id shape)) @@ -406,10 +417,10 @@ (when (not= justify-self :auto) justify-self)))) (defmethod get-value :grid-auto-flow - [_ shape _] + [_ shape _ _] (when (and (ctl/grid-layout? shape) (= (:layout-grid-dir shape) :column)) "column")) (defmethod get-value :default - [property shape _] + [property shape _ _] (get shape property)) From 55b6df0ae4adb34e490a761885f5338d99ede447 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Thu, 14 Mar 2024 16:16:33 +0100 Subject: [PATCH 5/6] :bug: Make opacity override same color recent-color --- common/src/app/common/files/changes.cljc | 14 +++++++++----- common/src/app/common/types/color.cljc | 6 ++++++ 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/common/src/app/common/files/changes.cljc b/common/src/app/common/files/changes.cljc index c200749d8..978cc8edf 100644 --- a/common/src/app/common/files/changes.cljc +++ b/common/src/app/common/files/changes.cljc @@ -609,11 +609,15 @@ (defmethod process-change :add-recent-color [data {:keys [color]}] ;; Moves the color to the top of the list and then truncates up to 15 - (update data :recent-colors (fn [rc] - (let [rc (conj (filterv (comp not #{color}) (or rc [])) color)] - (if (> (count rc) 15) - (subvec rc 1) - rc))))) + (update + data + :recent-colors + (fn [rc] + (let [rc (->> rc (d/removev (partial ctc/eq-recent-color? color))) + rc (-> rc (conj color))] + (cond-> rc + (> (count rc) 15) + (subvec 1)))))) ;; -- Media diff --git a/common/src/app/common/types/color.cljc b/common/src/app/common/types/color.cljc index 382530ac2..7bded1492 100644 --- a/common/src/app/common/types/color.cljc +++ b/common/src/app/common/types/color.cljc @@ -358,3 +358,9 @@ (process-shape-colors shape sync-color))) +(defn eq-recent-color? + [c1 c2] + (or (= c1 c2) + (and (some? (:color c1)) + (some? (:color c2)) + (= (:color c1) (:color c2))))) From affa37f0c5dec55cc5c1b1ae353af6fd9149236b Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Thu, 14 Mar 2024 16:54:15 +0100 Subject: [PATCH 6/6] :bug: Fix problem with scroll style in windows --- .../ui/workspace/sidebar/options/menus/layout_container.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss index 62ce26e4f..a51118e29 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss @@ -113,7 +113,7 @@ .padding-simple { @extend .input-element; - width: $s-108; + max-width: $s-108; } } @@ -124,7 +124,7 @@ .padding-multiple { @extend .input-element; - width: $s-108; + max-width: $s-108; } }