Merge pull request #4271 from penpot/alotor-bugfix-29

Bugfixing

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
+                      (let [frame? (= :frame (:type shape))]
-                             :type :frame                  ; Old groups must be converted
+                        (assoc shape
-                             :fills (or (:fills shape) []) ; to frames and conform to spec
+                               :type :frame            ; Old groups must be converted
-                             :shapes (or (:shapes shape) [])
+                               :fills (or (:fills shape) []) ; to frames and conform to spec
-                             :hide-in-viewer (or (:hide-in-viewer shape) true)
+                               :shapes (or (:shapes shape) [])
-                             :rx (or (:rx shape) 0)
+                               :hide-in-viewer (if frame? (boolean (:hide-in-viewer shape)) true)
-                             :ry (or (:ry shape) 0))
+                               :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)

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]
+  (update
-                                (let [rc (conj (filterv (comp not #{color}) (or rc [])) color)]
+   data
-                                  (if (> (count rc) 15)
+   :recent-colors
-                                    (subvec rc 1)
+   (fn [rc]
-                                    rc)))))
+     (let [rc (->> rc (d/removev (partial ctc/eq-recent-color? color)))
+           rc (-> rc (conj color))]
+       (cond-> rc
+         (> (count rc) 15)
+         (subvec 1))))))
 
 ;; -- Media
 

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)))))

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

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)

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

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)
+           ;; When the menu is open we disable events in the dashboard. We need to force pointer events
-                          :show? (:menu-open dashboard-local)
+           ;; so the menu can be handled
-                          :left (+ 24 (:x (:menu-pos dashboard-local)))
+           [:div {:style {:pointer-events "all"}}
-                          :top (:y (:menu-pos dashboard-local))
+            [:& file-menu {:files (vals selected-files)
-                          :navigate? true
+                           :show? (:menu-open dashboard-local)
-                          :on-edit on-edit
+                           :left (+ 24 (:x (:menu-pos dashboard-local)))
-                          :on-menu-close on-menu-close
+                           :top (:y (:menu-pos dashboard-local))
-                          :origin origin
+                           :navigate? true
-                          :parent-id (str file-id "-action-menu")}])]]]]]))
+                           :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}]

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

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;
     }
   }
 

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)))

frontend/src/app/util/code_gen/style_css.cljs

@@ -35,8 +35,8 @@ body {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 2rem;
+  width: 100vw;
-  gap: 2rem;
+  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]
+  [shape objects property options]
-  (when-let [value (get-value property shape objects)]
+  (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]
+  ([objects root-shapes all-shapes]
-   (generate-style objects shapes nil))
+   (generate-style objects root-shapes all-shapes nil))
-  ([objects shapes options]
+  ([objects root-shapes all-shapes options]
-   (dm/str
+   (let [options (assoc options :root-shapes (into #{} (map :id) root-shapes))]
-    prelude
+     (dm/str
-    (->> shapes
+      prelude
-         (keep #(get-shape-css-selector % objects options))
+      (->> all-shapes
-         (str/join "\n\n")))))
+           (keep #(get-shape-css-selector % objects options))
+           (str/join "\n\n"))))))
 
 (defn shadow->css
   [shadow]

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]
+  [_ shape objects options]
-  (get-shape-size shape objects :width))
+  (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]
+  [_ shape objects options]
-  (get-shape-size shape objects :height))
+  (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))