Merge branch 'staging' into develop

CHANGES.md

@@ -17,7 +17,12 @@
 ## 1.17.2
 
 ### :bug: Bugs fixed
+
 - Fix invite members button text [Taiga #4794](https://tree.taiga.io/project/penpot/issue/4794)
+- Fix problem with opacity in frames [Taiga #4795](https://tree.taiga.io/project/penpot/issue/4795)
+- Fix correct behaviour for space-around and added space-evenly option
+- Fix duplicate with alt and undo only undo one step [Taiga #4746](https://tree.taiga.io/project/penpot/issue/4746)
+- Fix problem creating frames inside layout [Taiga #4844](https://tree.taiga.io/project/penpot/issue/4844)
 
 ## 1.17.2
 

common/src/app/common/geom/shapes/flex_layout/bounds.cljc

@@ -128,16 +128,19 @@
         row?            (ctl/row? parent)
         col?            (ctl/col? parent)
         space-around?   (ctl/space-around? parent)
-        content-around? (ctl/content-around? parent)
+        space-evenly?   (ctl/space-evenly? parent)
+        content-evenly? (ctl/content-evenly? parent)
         [layout-gap-row layout-gap-col] (ctl/gaps parent)
 
-        row-pad (if (or (and col? space-around?)
+        row-pad (if (or (and col? space-evenly?)
-                        (and row? content-around?))
+                        (and col? space-around?)
+                        (and row? content-evenly?))
                   layout-gap-row
                   0)
 
-        col-pad (if (or(and row? space-around?)
+        col-pad (if (or(and row? space-evenly?)
-                       (and col? content-around?))
+                       (and row? space-around?)
+                       (and col? content-evenly?))
                   layout-gap-col
                   0)
 

common/src/app/common/geom/shapes/flex_layout/lines.cljc

@@ -24,9 +24,10 @@
   "Calculates the lines basic data and accumulated values. The positions will be calculated in a different operation"
   [shape children layout-bounds]
 
-  (let [col?  (ctl/col? shape)
+  (let [col?           (ctl/col? shape)
-        row?  (ctl/row? shape)
+        row?           (ctl/row? shape)
         space-around?  (ctl/space-around? shape)
+        space-evenly?  (ctl/space-evenly? shape)
 
         wrap? (and (ctl/wrap? shape)
                    (or col? (not (ctl/auto-width? shape)))
@@ -78,18 +79,28 @@
               next-max-width   (+ child-margin-width (if fill-width? child-max-width child-width))
               next-max-height  (+ child-margin-height (if fill-height? child-max-height child-height))
 
-              total-gap-col (if space-around?
+              total-gap-col (cond
+                              space-evenly?
                               (* layout-gap-col (+ num-children 2))
+
+                              space-around?
+                              (* layout-gap-col (+ num-children 1))
+
+                              :else
                               (* layout-gap-col num-children))
 
-              total-gap-row (if space-around?
+              total-gap-row (cond
+                              space-evenly?
                               (* layout-gap-row (+ num-children 2))
+
+                              space-around?
+                              (* layout-gap-row (+ num-children 1))
+
+                              :else
                               (* layout-gap-row num-children))
 
               next-line-min-width  (+ line-min-width  next-min-width  total-gap-col)
-              next-line-min-height (+ line-min-height next-min-height total-gap-row)
+              next-line-min-height (+ line-min-height next-min-height total-gap-row)]
-
-              ]
 
           (if (and (some? line-data)
                    (or (not wrap?)
@@ -150,10 +161,11 @@
 (defn add-lines-positions
   [parent layout-bounds layout-lines]
 
-  (let [row? (ctl/row? parent)
+  (let [row?          (ctl/row? parent)
-        col? (ctl/col? parent)
+        col?          (ctl/col? parent)
-        auto-width? (ctl/auto-width? parent)
+        auto-width?   (ctl/auto-width? parent)
-        auto-height? (ctl/auto-height? parent)
+        auto-height?  (ctl/auto-height? parent)
+        space-evenly? (ctl/space-evenly? parent)
         space-around? (ctl/space-around? parent)
 
         [layout-gap-row layout-gap-col] (ctl/gaps parent)
@@ -183,10 +195,26 @@
             (->> layout-lines (reduce add-ranges [0 0 0 0]))
 
             get-layout-width (fn [{:keys [num-children]}]
-                               (let [num-gap (if space-around? (inc num-children) (dec num-children))]
+                               (let [num-gap (cond
+                                               space-evenly?
+                                               (inc num-children)
+
+                                               space-around?
+                                               num-children
+
+                                               :else
+                                               (dec num-children))]
                                  (- layout-width (* layout-gap-col num-gap))))
             get-layout-height (fn [{:keys [num-children]}]
-                                (let [num-gap (if space-around? (inc num-children) (dec num-children))]
+                                (let [num-gap (cond
+                                                space-evenly?
+                                                (inc num-children)
+
+                                                space-around?
+                                                num-children
+
+                                                :else
+                                                (dec num-children))]
                                   (- layout-height (* layout-gap-row num-gap))))
 
             num-lines (count layout-lines)
@@ -280,34 +308,47 @@
         auto-height?   (ctl/auto-height? shape)
         auto-width?    (ctl/auto-width? shape)
         space-between? (ctl/space-between? shape)
+        space-evenly?  (ctl/space-evenly? shape)
         space-around?  (ctl/space-around? shape)
 
         [layout-gap-row layout-gap-col] (ctl/gaps shape)
 
         margin-x
-        (cond (and row? space-around? (not auto-width?))
+        (cond (and row? space-evenly? (not auto-width?))
               (max layout-gap-col (/ (- width line-width) (inc num-children)))
 
-              (and row? space-around? auto-width?)
+              (and row? space-around? (not auto-width?))
+              (/ (max layout-gap-col (/ (- width line-width) num-children)) 2)
+
+              (and row? (or space-evenly? space-around?) auto-width?)
               layout-gap-col
 
               :else
               0)
 
         margin-y
-        (cond (and col? space-around? (not auto-height?))
+        (cond (and col? space-evenly? (not auto-height?))
               (max layout-gap-row (/ (- height line-height) (inc num-children)))
 
-              (and col? space-around? auto-height?)
+              (and col? space-around? (not auto-height?))
+              (/ (max layout-gap-row (/ (- height line-height) num-children)) 2)
+
+              (and col? (or space-evenly? space-around?) auto-height?)
               layout-gap-row
 
               :else
               0)
 
         layout-gap-col
-        (cond (and row? space-around?)
+        (cond (and row? space-evenly?)
               0
 
+              (and row? space-around? auto-width?)
+              0
+
+              (and row? space-around?)
+              (/ (max layout-gap-col (/ (- width line-width) num-children)) 2)
+
               (and row? space-between? (not auto-width?))
               (max layout-gap-col (/ (- width line-width) (dec num-children)))
 
@@ -315,9 +356,15 @@
               layout-gap-col)
 
         layout-gap-row
-        (cond (and col? space-around?)
+        (cond (and col? space-evenly?)
               0
 
+              (and col? space-evenly? auto-height?)
+              0
+
+              (and col? space-around?)
+              (/ (max layout-gap-row (/ (- height line-height) num-children)) 2)
+
               (and col? space-between? (not auto-height?))
               (max layout-gap-row (/ (- height line-height) (dec num-children)))
 

common/src/app/common/geom/shapes/flex_layout/positions.cljc

@@ -27,6 +27,7 @@
         center?  (or (and wrap? (ctl/content-center? parent))
                      (and (not wrap?) (ctl/align-items-center? parent)))
         around?  (and wrap? (ctl/content-around? parent))
+        evenly?  (and wrap? (ctl/content-evenly? parent))
 
         ;; Adjust the totals so it takes into account the gaps
         [layout-gap-row layout-gap-col] (ctl/gaps parent)
@@ -47,6 +48,9 @@
         (gpt/add (vv free-height-gap))
 
         around?
+        (gpt/add (vv (max lines-gap-row (/ free-height num-lines 2))))
+
+        evenly?
         (gpt/add (vv (max lines-gap-row (/ free-height (inc num-lines))))))
 
       col?
@@ -57,6 +61,9 @@
         (gpt/add (hv free-width-gap))
 
         around?
+        (gpt/add (hv (max lines-gap-col (/ free-width num-lines) 2)))
+
+        evenly?
         (gpt/add (hv (max lines-gap-col (/ free-width (inc num-lines)))))))))
 
 (defn get-next-line
@@ -78,6 +85,7 @@
         stretch? (ctl/content-stretch? parent)
         between? (ctl/content-between? parent)
         around?  (ctl/content-around? parent)
+        evenly?  (ctl/content-evenly? parent)
 
         free-width  (- layout-width total-width)
         free-height (- layout-height total-height)
@@ -94,6 +102,9 @@
           (/ free-width (dec num-lines))
 
           around?
+          (/ free-width num-lines)
+
+          evenly?
           (/ free-width (inc num-lines))
 
           :else
@@ -111,6 +122,9 @@
           (/ free-height (dec num-lines))
 
           around?
+          (/ free-height num-lines)
+
+          evenly?
           (/ free-height (inc num-lines))
 
           :else
@@ -134,6 +148,7 @@
         col?                (ctl/col? parent)
         space-between?      (ctl/space-between? parent)
         space-around?       (ctl/space-around? parent)
+        space-evenly?       (ctl/space-evenly? parent)
         h-center?           (ctl/h-center? parent)
         h-end?              (ctl/h-end? parent)
         v-center?           (ctl/v-center? parent)
@@ -159,20 +174,20 @@
         start-p
         (cond-> base-p
           ;; X AXIS
-          (and row? h-center? (not space-around?) (not space-between?))
+          (and row? h-center? (not space-around?) (not space-evenly?) (not space-between?))
           (-> (gpt/add (hv (/ layout-width 2)))
               (gpt/subtract (hv (/ (+ line-width children-gap-width) 2))))
 
-          (and row? h-end? (not space-around?) (not space-between?))
+          (and row? h-end? (not space-around?) (not space-evenly?) (not space-between?))
           (-> (gpt/add (hv layout-width))
               (gpt/subtract (hv (+ line-width children-gap-width))))
 
           ;; Y AXIS
-          (and col? v-center? (not space-around?) (not space-between?))
+          (and col? v-center? (not space-around?) (not space-evenly?) (not space-between?))
           (-> (gpt/add (vv (/ layout-height 2)))
               (gpt/subtract (vv (/ (+ line-height children-gap-height) 2))))
 
-          (and col? v-end? (not space-around?) (not space-between?))
+          (and col? v-end? (not space-around?) (not space-evenly?) (not space-between?))
           (-> (gpt/add (vv layout-height))
               (gpt/subtract (vv (+ line-height children-gap-height)))))]
 

common/src/app/common/geom/shapes/modifiers.cljc

@@ -115,13 +115,15 @@
           (if (empty? children)
             modif-tree
             (let [child-id        (first children)
-                  child           (get objects child-id)
+                  child           (get objects child-id)]
-                  child-bounds    @(get bounds child-id)
+              (if (some? child)
-                  child-modifiers (gct/calc-child-modifiers parent child modifiers ignore-constraints child-bounds parent-bounds transformed-parent-bounds)]
+                (let [child-bounds    @(get bounds child-id)
-              (recur (cond-> modif-tree
+                      child-modifiers (gct/calc-child-modifiers parent child modifiers ignore-constraints child-bounds parent-bounds transformed-parent-bounds)]
-                       (not (ctm/empty? child-modifiers))
+                  (recur (cond-> modif-tree
-                       (update-in [child-id :modifiers] ctm/add-modifiers child-modifiers))
+                           (not (ctm/empty? child-modifiers))
-                     (rest children)))))))))
+                           (update-in [child-id :modifiers] ctm/add-modifiers child-modifiers))
+                         (rest children)))
+                (recur modif-tree (rest children))))))))))
 
 (defn get-group-bounds
   [objects bounds modif-tree shape]

common/src/app/common/types/shape/layout.cljc

@@ -15,8 +15,8 @@
 ;; :layout-gap-type        ;; :simple, :multiple
 ;; :layout-gap             ;; {:row-gap number , :column-gap number}
 ;; :layout-align-items     ;; :start :end :center :stretch
-;; :layout-justify-content ;; :start :center :end :space-between :space-around
+;; :layout-justify-content ;; :start :center :end :space-between :space-around :space-evenly
-;; :layout-align-content   ;; :start :center :end :space-between :space-around :stretch (by default)
+;; :layout-align-content   ;; :start :center :end :space-between :space-around :space-evenly :stretch (by default)
 ;; :layout-wrap-type       ;; :wrap, :nowrap
 ;; :layout-padding-type    ;; :simple, :multiple
 ;; :layout-padding         ;; {:p1 num :p2 num :p3 num :p4 num} number could be negative
@@ -36,8 +36,8 @@
 (s/def ::layout-gap-type #{:simple :multiple})
 (s/def ::layout-gap ::us/safe-number)
 (s/def ::layout-align-items #{:start :end :center :stretch})
-(s/def ::layout-align-content #{:start :end :center :space-between :space-around :stretch})
+(s/def ::layout-align-content #{:start :end :center :space-between :space-around :space-evenly :stretch})
-(s/def ::layout-justify-content #{:start :center :end :space-between :space-around})
+(s/def ::layout-justify-content #{:start :center :end :space-between :space-around :space-evenly})
 (s/def ::layout-wrap-type #{:wrap :nowrap :no-wrap}) ;;TODO remove no-wrap after script
 (s/def ::layout-padding-type #{:simple :multiple})
 
@@ -286,6 +286,10 @@
   [{:keys [layout-align-content]}]
   (= :space-around layout-align-content))
 
+(defn content-evenly?
+  [{:keys [layout-align-content]}]
+  (= :space-evenly layout-align-content))
+
 (defn content-stretch?
   [{:keys [layout-align-content]}]
   (or (= :stretch layout-align-content)
@@ -320,6 +324,10 @@
   [{:keys [layout-justify-content]}]
   (= layout-justify-content :space-around))
 
+(defn space-evenly?
+  [{:keys [layout-justify-content]}]
+  (= layout-justify-content :space-evenly))
+
 (defn align-self-start? [{:keys [layout-item-align-self]}]
   (= :start layout-item-align-self))
 
@@ -349,4 +357,3 @@
                 (some (partial fill-height? objects) children-ids))
            (and (row? objects frame-id)
                 (every? (partial fill-height? objects) children-ids)))))
-

common/src/app/common/types/shape_tree.cljc

@@ -205,9 +205,8 @@
 (defn all-frames-by-position
   [objects position]
   (->> (get-frames-ids objects)
-       (sort-z-index objects)
+       (filter #(and position (gsh/has-point? (get objects %) position)))
-       (filterv #(and position (gsh/has-point? (get objects %) position)))))
+       (sort-z-index objects)))
-
 
 (defn top-nested-frame
   "Search for the top nested frame for positioning shapes when moving or creating.

frontend/resources/images/icons/align-content-column-evenly.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
+  <path d="M0 0v132.292h11.207V0Zm121.085 0v132.292h11.207V0ZM36.023 28.259c-6.487 0-11.745 5.258-11.745 11.744 0 6.487 5.258 11.745 11.745 11.745 6.486 0 11.744-5.26 11.744-11.745 0-6.486-5.258-11.744-11.744-11.744zm30.04 0c-6.486 0-11.744 5.258-11.744 11.744 0 6.487 5.258 11.745 11.744 11.745 6.487 0 11.745-5.26 11.745-11.745 0-6.486-5.259-11.744-11.745-11.744zm30.496 0c-6.487 0-11.745 5.258-11.745 11.744 0 6.487 5.258 11.745 11.745 11.745 6.486 0 11.744-5.26 11.744-11.745 0-6.486-5.258-11.744-11.744-11.744zM36.023 80.545c-6.487 0-11.745 5.26-11.745 11.745 0 6.486 5.258 11.745 11.745 11.745 6.486 0 11.744-5.259 11.744-11.745 0-6.486-5.258-11.744-11.744-11.744zm30.04 0c-6.486 0-11.744 5.26-11.744 11.745 0 6.486 5.258 11.745 11.744 11.745 6.487 0 11.745-5.259 11.745-11.745 0-6.486-5.259-11.744-11.745-11.744z"/>
+</svg>

frontend/resources/images/icons/align-content-row-evenly.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
+  <path d="M0 0v11.207h132.292V0H0zm36.567 29.029c-5.96.092-12.09 4.407-12.289 10.974 0 6.487 5.258 11.745 11.745 11.745 6.486 0 11.744-5.26 11.744-11.745-.81-7.848-5.94-11.055-11.2-10.974zm60.536 0c-5.96.092-12.09 4.407-12.289 10.974 0 6.487 5.258 11.745 11.745 11.745 6.486 0 11.744-5.26 11.744-11.745-.81-7.848-5.94-11.055-11.2-10.974zm-30.495 0c-5.96.092-12.09 4.407-12.29 10.974 0 6.487 5.259 11.745 11.745 11.745 6.487 0 11.745-5.26 11.745-11.745-.811-7.848-5.94-11.055-11.2-10.974zM36.023 80.545c-6.487 0-11.745 5.26-11.745 11.745 0 6.486 5.258 11.745 11.745 11.745 6.486 0 11.744-5.259 11.744-11.745 0-6.486-5.258-11.744-11.744-11.744zm30.04 0c-6.486 0-11.744 5.26-11.744 11.745 0 6.486 5.258 11.745 11.744 11.745 6.487 0 11.745-5.259 11.745-11.745 0-6.486-5.26-11.744-11.745-11.744zM0 121.085v11.207h132.292v-11.207H0z"/>
+</svg>

frontend/resources/images/icons/justify-content-column-evenly.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
+  <path d="M0 0v11.207h132.292V0Zm18.947 28.264V57.99h94.4V28.264zm.098 47.096v29.726h94.302V75.36ZM0 121.086v11.206h132.292v-11.207z"/>
+</svg>

frontend/resources/images/icons/justify-content-row-evenly.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
+  <path d="M0 132.292h11.207V0H0Zm28.264-18.947H57.99v-94.4H28.264zm47.096-.098h29.726V18.945H75.36Zm45.726 19.045h11.206V0h-11.207z"/>
+</svg>

frontend/resources/styles/main/partials/dashboard.scss

@@ -50,7 +50,7 @@
   }
   img {
     width: 274px;
-    margin-bottom: -41px;
+    margin-bottom: -19px;
     @media (max-width: 1200px) {
       display: none;
       width: 0;

frontend/resources/styles/main/partials/sidebar-element-options.scss

@@ -1644,6 +1644,7 @@
       font-family: "worksans", sans-serif;
 
       &.justify-content,
+      &.align-content,
       &.sizing {
         align-items: start;
         margin-top: 4px;
@@ -1658,7 +1659,8 @@
         gap: 5px;
       }
 
-      &.justify-content {
+      &.justify-content,
+      &.align-content {
         display: flex;
         flex-direction: column;
         gap: 5px;

frontend/src/app/main/data/workspace/changes.cljs

@@ -34,6 +34,23 @@
 
 (declare commit-changes)
 
+
+(defn- add-group-id
+  [changes state]
+  (let [undo          (:workspace-undo state)
+        items         (:items undo)
+        index         (or (:index undo) (dec (count items)))
+        prev-item     (when-not (or (empty? items) (= index -1))
+                                (get items index))
+        group-id      (:group-id prev-item)
+        add-group-id? (and
+                       (not (nil? group-id))
+                       (= (get-in changes [:redo-changes 0 :type]) :mod-obj)
+                       (= (get-in prev-item [:redo-changes 0 :type]) :add-obj)) ;; This is a copy-and-move with mouse+alt
+        ]
+    (cond-> changes add-group-id? (assoc :group-id group-id))))
+
+
 (def commit-changes? (ptk/type? ::commit-changes))
 
 (defn update-shapes
@@ -64,7 +81,8 @@
                         (-> (pcb/empty-changes it page-id)
                             (pcb/set-save-undo? save-undo?)
                             (pcb/with-objects objects))
-                        ids)]
+                        ids)
+             changes (add-group-id changes state)]
          (rx/concat
           (if (seq (:redo-changes changes))
             (let [changes  (cond-> changes reg-objects? (pcb/resize-parents ids))]
@@ -147,7 +165,7 @@
 
 (defn commit-changes
   [{:keys [redo-changes undo-changes
-           origin save-undo? file-id]
+           origin save-undo? file-id group-id]
     :or {save-undo? true}}]
   (log/debug :msg "commit-changes"
              :js/redo-changes redo-changes
@@ -164,7 +182,8 @@
          :changes redo-changes
          :page-id page-id
          :frames frames
-         :save-undo? save-undo?})
+         :save-undo? save-undo?
+         :group-id group-id})
 
       ptk/UpdateEvent
       (update [_ state]
@@ -212,5 +231,6 @@
 
              (when (and save-undo? (seq undo-changes))
                (let [entry {:undo-changes undo-changes
-                            :redo-changes redo-changes}]
+                            :redo-changes redo-changes
+                            :group-id group-id}]
                  (rx/of (dwu/append-undo entry)))))))))))

frontend/src/app/main/data/workspace/common.cljs

@@ -27,6 +27,7 @@
 
 (defn interrupt? [e] (= e :interrupt))
 
+(declare undo-to-index)
 
 (defn- assure-valid-current-page
   []
@@ -60,13 +61,25 @@
                 items (:items undo)
                 index (or (:index undo) (dec (count items)))]
             (when-not (or (empty? items) (= index -1))
-              (let [changes (get-in items [index :undo-changes])]
+              (let [item (get items index)
-                (rx/of (dwu/materialize-undo changes (dec index))
+                    changes (:undo-changes item)
-                       (dch/commit-changes {:redo-changes changes
+                    group-id (:group-id item)
-                                            :undo-changes []
+                    find-first-group-idx (fn ffgidx[index]
-                                            :save-undo? false
+                                           (let [item (get items index)]
-                                            :origin it})
+                                             (if (= (:group-id item) group-id)
-                       (assure-valid-current-page))))))))))
+                                               (ffgidx (dec index))
+                                               (inc index))))
+
+                    undo-group-index (when group-id
+                                       (find-first-group-idx index))]
+                (if group-id
+                  (rx/of (undo-to-index (dec undo-group-index)))
+                  (rx/of (dwu/materialize-undo changes (dec index))
+                         (dch/commit-changes {:redo-changes changes
+                                              :undo-changes []
+                                              :save-undo? false
+                                              :origin it})
+                         (assure-valid-current-page)))))))))))
 
 (def redo
   (ptk/reify ::redo
@@ -79,12 +92,24 @@
                 items (:items undo)
                 index (or (:index undo) (dec (count items)))]
             (when-not (or (empty? items) (= index (dec (count items))))
-              (let [changes (get-in items [(inc index) :redo-changes])]
+              (let [item (get items (inc index))
-                (rx/of (dwu/materialize-undo changes (inc index))
+                    changes (:redo-changes item)
-                       (dch/commit-changes {:redo-changes changes
+                    group-id (:group-id item)
-                                            :undo-changes []
+                    find-last-group-idx (fn flgidx [index]
-                                            :origin it
+                                          (let [item (get items index)]
-                                            :save-undo? false}))))))))))
+                                            (if (= (:group-id item) group-id)
+                                              (flgidx (inc index))
+                                              (dec index))))
+
+                    redo-group-index (when group-id
+                                       (find-last-group-idx (inc index)))]
+                (if group-id
+                  (rx/of (undo-to-index redo-group-index))
+                  (rx/of (dwu/materialize-undo changes (inc index))
+                         (dch/commit-changes {:redo-changes changes
+                                              :undo-changes []
+                                              :origin it
+                                              :save-undo? false})))))))))))
 
 (defn undo-to-index
   "Repeat undoing or redoing until dest-index is reached."
@@ -99,7 +124,7 @@
                 items (:items undo)
                 index (or (:index undo) (dec (count items)))]
             (when (and (some? items)
-                       (<= 0 dest-index (dec (count items))))
+                       (<= -1 dest-index (dec (count items))))
               (let [changes (vec (apply concat
                                         (cond
                                           (< dest-index index)

frontend/src/app/main/data/workspace/selection.cljs

@@ -485,7 +485,10 @@
 
         (gpt/subtract new-pos pt-obj)))))
 
-(defn duplicate-selected [move-delta?]
+(defn duplicate-selected
+  ([move-delta?]
+   (duplicate-selected move-delta? false))
+  ([move-delta? add-group-id?]
   (ptk/reify ::duplicate-selected
     ptk/WatchEvent
     (watch [it state _]
@@ -502,6 +505,8 @@
                   changes         (->> (prepare-duplicate-changes objects page selected delta it)
                                        (duplicate-changes-update-indices objects selected))
 
+                  changes         (cond-> changes add-group-id? (assoc :group-id (uuid/random)))
+
                   id-original     (first selected)
 
                   new-selected    (->> changes
@@ -525,7 +530,7 @@
                 (select-shapes new-selected)
                 (ptk/data-event :layout/update frames)
                 (memorize-duplicated id-original id-duplicated)
-                (dwu/commit-undo-transaction undo-id)))))))))
+                (dwu/commit-undo-transaction undo-id))))))))))
 
 (defn change-hover-state
   [id value]

frontend/src/app/main/data/workspace/shapes.cljs

@@ -77,7 +77,7 @@
   ([attrs]
    (add-shape attrs {}))
 
-  ([attrs {:keys [no-select?]}]
+  ([attrs {:keys [no-select? no-update-layout?]}]
    (us/verify ::shape-attrs attrs)
    (ptk/reify ::add-shape
      ptk/WatchEvent
@@ -108,7 +108,8 @@
          (rx/concat
           (rx/of (dwu/start-undo-transaction undo-id)
                  (dch/commit-changes changes)
-                 (ptk/data-event :layout/update [(:parent-id shape)])
+                 (when-not no-update-layout?
+                   (ptk/data-event :layout/update [(:parent-id shape)]))
                  (when-not no-select?
                    (dws/select-shapes (d/ordered-set id)))
                  (dwu/commit-undo-transaction undo-id))
@@ -387,8 +388,9 @@
                  undo-id (js/Symbol)]
              (rx/of
               (dwu/start-undo-transaction undo-id)
-              (add-shape shape)
+              (add-shape shape {:no-update-layout? true})
               (move-shapes-into-frame (:id shape) selected)
+              (ptk/data-event :layout/update [(:id shape)])
               (dwu/commit-undo-transaction undo-id)))))))))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -453,4 +455,3 @@
                (map (fn [[page-id frame-ids]]
                       (dch/update-shapes frame-ids #(dissoc % :use-for-thumbnail?) {:page-id page-id})))))
          (rx/of (dch/update-shapes selected #(update % :use-for-thumbnail? not))))))))
-

frontend/src/app/main/data/workspace/transforms.cljs

@@ -382,7 +382,7 @@
                     (if alt?
                       ;; When alt is down we start a duplicate+move
                       (rx/of (start-move-duplicate initial)
-                             (dws/duplicate-selected false))
+                             (dws/duplicate-selected false true))
 
                       ;; Otherwise just plain old move
                       (rx/of (start-move initial selected))))))

frontend/src/app/main/data/workspace/undo.cljs

@@ -55,10 +55,11 @@
     state))
 
 (defn- accumulate-undo-entry
-  [state {:keys [undo-changes redo-changes]}]
+  [state {:keys [undo-changes redo-changes group-id]}]
   (-> state
       (update-in [:workspace-undo :transaction :undo-changes] #(into undo-changes %))
-      (update-in [:workspace-undo :transaction :redo-changes] #(into % redo-changes))))
+      (update-in [:workspace-undo :transaction :redo-changes] #(into % redo-changes))
+      (assoc-in [:workspace-undo :transaction :group-id] group-id)))
 
 (defn append-undo
   [entry]

frontend/src/app/main/ui/icons.cljs

@@ -15,11 +15,13 @@
 (def actions (icon-xref :actions))
 (def align-bottom (icon-xref :align-bottom))
 (def align-content-column-around (icon-xref :align-content-column-around))
+(def align-content-column-evenly (icon-xref :align-content-column-evenly))
 (def align-content-column-between (icon-xref :align-content-column-between))
 (def align-content-column-center (icon-xref :align-content-column-center))
 (def align-content-column-end (icon-xref :align-content-column-end))
 (def align-content-column-start (icon-xref :align-content-column-start))
 (def align-content-row-around (icon-xref :align-content-row-around))
+(def align-content-row-evenly (icon-xref :align-content-row-evenly))
 (def align-content-row-between (icon-xref :align-content-row-between))
 (def align-content-row-center (icon-xref :align-content-row-center))
 (def align-content-row-end (icon-xref :align-content-row-end))
@@ -126,11 +128,13 @@
 (def infocard (icon-xref :infocard))
 (def interaction (icon-xref :interaction))
 (def justify-content-column-around (icon-xref  :justify-content-column-around))
+(def justify-content-column-evenly (icon-xref  :justify-content-column-evenly))
 (def justify-content-column-between (icon-xref  :justify-content-column-between))
 (def justify-content-column-center (icon-xref :justify-content-column-center))
 (def justify-content-column-end (icon-xref  :justify-content-column-end))
 (def justify-content-column-start (icon-xref  :justify-content-column-start))
 (def justify-content-row-around (icon-xref :justify-content-row-around))
+(def justify-content-row-evenly (icon-xref :justify-content-row-evenly))
 (def justify-content-row-between (icon-xref :justify-content-row-between))
 (def justify-content-row-center (icon-xref :justify-content-row-center))
 (def justify-content-row-end (icon-xref :justify-content-row-end))

frontend/src/app/main/ui/onboarding.cljs

@@ -36,7 +36,7 @@
           (next))]
     [:div.modal-container.onboarding.onboarding-v2
      [:div.modal-left.welcome
-      [:img {:src "images/onboarding-welcome.jpg" :border "0" :alt (tr "onboarding.welcome.alt")}]]
+      [:img {:src "images/onboarding-welcome.png" :border "0" :alt (tr "onboarding.welcome.alt")}]]
      [:div.modal-right
       [:div.release-container [:span.release "Version " (:main @cf/version)]]
       [:div.right-content
@@ -71,7 +71,7 @@
           (next))]
     [:div.modal-container.onboarding.onboarding-v2
      [:div.modal-left.welcome
-      [:img {:src "images/onboarding-people.jpg" :border "0" :alt (tr "onboarding.welcome.alt")}]]
+      [:img {:src "images/onboarding-people.png" :border "0" :alt (tr "onboarding.welcome.alt")}]]
      [:div.modal-right
       [:div.release-container [:span.release "Version " (:main @cf/version)]]
       [:div.right-content

frontend/src/app/main/ui/shapes/frame.cljs

@@ -124,11 +124,10 @@
   (mf/fnc frame-shape
     {::mf/wrap-props false}
     [props]
-
+    (let [shape  (unchecked-get props "shape")
-    (let [childs (unchecked-get props "childs")]
+          childs (unchecked-get props "childs")]
       [:> frame-container props
-       [:g.frame-children
+       [:g.frame-children {:opacity (:opacity shape)}
         (for [item childs]
-            [:& shape-wrapper {:key (dm/str (:id item)) :shape item}]
+          [:& shape-wrapper {:key (dm/str (:id item)) :shape item}])]])))
-            )]])))
 

frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs

@@ -21,8 +21,8 @@
    :layout-gap-type        ;; :simple, :multiple
    :layout-gap             ;; {:row-gap number , :column-gap number}
    :layout-align-items     ;; :start :end :center :stretch
-   :layout-justify-content ;; :start :center :end :space-between :space-around
+   :layout-justify-content ;; :start :center :end :space-between :space-around :space-evenly
-   :layout-align-content   ;; :start :center :end :space-between :space-around :stretch (by default)
+   :layout-align-content   ;; :start :center :end :space-between :space-around :space-evenly :stretch (by default)
    :layout-wrap-type       ;; :wrap, :nowrap
    :layout-padding-type    ;; :simple, :multiple
    :layout-padding         ;; {:p1 num :p2 num :p3 num :p4 num} number could be negative
@@ -50,12 +50,14 @@
                          :end           i/justify-content-column-end
                          :center        i/justify-content-column-center
                          :space-around  i/justify-content-column-around
+                         :space-evenly  i/justify-content-column-evenly
                          :space-between i/justify-content-column-between)
                        (case val
                          :start         i/justify-content-row-start
                          :end           i/justify-content-row-end
                          :center        i/justify-content-row-center
                          :space-around  i/justify-content-row-around
+                         :space-evenly  i/justify-content-row-evenly
                          :space-between i/justify-content-row-between))
 
     :align-content  (if is-col?
@@ -64,6 +66,7 @@
                         :end           i/align-content-column-end
                         :center        i/align-content-column-center
                         :space-around  i/align-content-column-around
+                        :space-evenly  i/align-content-column-evenly
                         :space-between i/align-content-column-between
                         :stretch nil)
 
@@ -72,6 +75,7 @@
                         :end           i/align-content-row-end
                         :center        i/align-content-row-center
                         :space-around  i/align-content-row-around
+                        :space-evenly  i/align-content-row-evenly
                         :space-between i/align-content-row-between
                         :stretch nil))
 
@@ -140,16 +144,27 @@
 
 (mf/defc align-content-row
   [{:keys [is-col? align-content set-align-content] :as props}]
-  [:div.align-content-style
+  [:*
-   (for [align [:start :center :end :space-around :space-between]]
+   [:div.align-content-style
-     [:button.align-content.tooltip
+    (for [align [:start :center :end]]
-      {:class    (dom/classnames :active  (= align-content align)
+      [:button.align-content.tooltip
-                                 :tooltip-bottom-left (not= align :start)
+       {:class    (dom/classnames :active  (= align-content align)
-                                 :tooltip-bottom (= align :start))
+                                  :tooltip-bottom-left (not= align :start)
-       :alt      (dm/str "Align content " (d/name align))
+                                  :tooltip-bottom (= align :start))
-       :on-click #(set-align-content align)
+        :alt      (dm/str "Align content " (d/name align))
-       :key      (dm/str  "align-content" (d/name align))}
+        :on-click #(set-align-content align)
-      (get-layout-flex-icon :align-content align is-col?)])])
+        :key      (dm/str  "align-content" (d/name align))}
+       (get-layout-flex-icon :align-content align is-col?)])]
+   [:div.align-content-style
+    (for [align [:space-between :space-around :space-evenly]]
+      [:button.align-content.tooltip
+       {:class    (dom/classnames :active  (= align-content align)
+                                  :tooltip-bottom-left (not= align :start)
+                                  :tooltip-bottom (= align :start))
+        :alt      (dm/str "Align content " (d/name align))
+        :on-click #(set-align-content align)
+        :key      (dm/str  "align-content" (d/name align))}
+       (get-layout-flex-icon :align-content align is-col?)])]])
 
 (mf/defc justify-content-row
   [{:keys [is-col? justify-content set-justify] :as props}]
@@ -165,7 +180,7 @@
         :key (dm/str "justify-content" (d/name justify))}
        (get-layout-flex-icon :justify-content justify is-col?)])]
    [:div.justify-content-style
-    (for [justify [:space-around :space-between]]
+    (for [justify [:space-between :space-around :space-evenly]]
       [:button.justify.tooltip
        {:class    (dom/classnames :active  (= justify-content justify)
                                   :tooltip-bottom-left (not= justify :space-around)
@@ -399,7 +414,7 @@
             (when (= :wrap wrap-type)
               [:div.layout-row
                [:div.align-content.row-title "Content"]
-               [:div.btn-wrapper
+               [:div.btn-wrapper.align-content
                 [:& align-content-row {:is-col? is-col?
                                        :align-content align-content
                                        :set-align-content set-align-content}]]])