Merge remote-tracking branch 'origin/staging' into develop

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

@@ -651,20 +651,20 @@
     (-> (pcb/empty-changes it page-id)
         (pcb/with-objects objects)
 
-        ; Move the shapes
+        ;; Move the shapes
         (pcb/change-parent parent-id
                            shapes
                            to-index)
 
-        ; Remove empty groups
+        ;; Remove empty groups
         (pcb/remove-objects groups-to-delete)
 
-        ; Unmask groups whose mask have moved outside
+        ;; Unmask groups whose mask have moved outside
         (pcb/update-shapes groups-to-unmask
                            (fn [shape]
                              (assoc shape :masked-group? false)))
 
-        ; Detach shapes moved out of their component
+        ;; Detach shapes moved out of their component
         (pcb/update-shapes shapes-to-detach
                            (fn [shape]
                              (assoc shape :component-id nil
@@ -674,17 +674,17 @@
                                     :shape-ref nil
                                     :touched nil)))
 
-        ; Make non root a component moved inside another one
+        ;; Make non root a component moved inside another one
         (pcb/update-shapes shapes-to-deroot
                            (fn [shape]
                              (assoc shape :component-root? nil)))
 
-        ; Make root a subcomponent moved outside its parent component
+        ;; Make root a subcomponent moved outside its parent component
         (pcb/update-shapes shapes-to-reroot
                            (fn [shape]
                              (assoc shape :component-root? true)))
 
-        ; Reset constraints depending on the new parent
+        ;; Reset constraints depending on the new parent
         (pcb/update-shapes shapes-to-unconstraint
                            (fn [shape]
                              (let [parent      (get objects parent-id)
@@ -699,7 +699,19 @@
                                       :constraints-v (gsh/default-constraints-v moved-shape))))
                            {:ignore-touched true})
 
-        ; Resize parent containers that need to
+        ;; Fix the sizing when moving a shape
+        (pcb/update-shapes parents
+                           (fn [parent]
+                             (if (ctl/layout? parent)
+                               (cond-> parent
+                                 (ctl/change-h-sizing? (:id parent) objects (:shapes parent))
+                                 (assoc :layout-item-h-sizing :fix)
+
+                                 (ctl/change-v-sizing? (:id parent) objects (:shapes parent))
+                                 (assoc :layout-item-v-sizing :fix))
+                               parent)))
+
+        ;; Resize parent containers that need to
         (pcb/resize-parents parents))))
 
 (defn relocate-shapes
@@ -719,9 +731,9 @@
 
             ;; If we try to move a parent into a child we remove it
             ids      (filter #(not (cph/is-parent? objects parent-id %)) ids)
-            parents  (if ignore-parents?
-                       #{parent-id}
-                       (into #{parent-id} (map #(cph/get-parent-id objects %)) ids))
+
+            all-parents (into #{parent-id} (map #(cph/get-parent-id objects %)) ids)
+            parents  (if ignore-parents? #{parent-id} all-parents)
 
             groups-to-delete
             (loop [current-id  (first parents)
@@ -814,17 +826,12 @@
                                              shapes-to-reroot
                                              shapes-to-deroot
                                              ids)
-
-            layouts-to-update
-            (into #{}
-                  (filter (partial ctl/layout? objects))
-                  (concat [parent-id] (cph/get-parent-ids objects parent-id)))
             undo-id (js/Symbol)]
 
         (rx/of (dwu/start-undo-transaction undo-id)
                (dch/commit-changes changes)
                (dwco/expand-collapse parent-id)
-               (ptk/data-event :layout/update layouts-to-update)
+               (ptk/data-event :layout/update (concat all-parents ids))
                (dwu/commit-undo-transaction undo-id))))))
 
 (defn relocate-selected-shapes

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

@@ -174,42 +174,62 @@
         modif-tree)))
 
 (defn build-change-frame-modifiers
-  [modif-tree objects selected target-frame drop-index]
+  [modif-tree objects selected target-frame-id drop-index]
 
   (let [origin-frame-ids (->> selected (group-by #(get-in objects [% :frame-id])))
-        child-set (set (get-in objects [target-frame :shapes]))
-        layout? (ctl/layout? objects target-frame)
+        child-set (set (get-in objects [target-frame-id :shapes]))
+
+        target-frame (get objects target-frame-id)
+        target-layout? (ctl/layout? target-frame)
+
+        children-ids (concat (:shapes target-frame) selected)
 
         set-parent-ids
-        (fn [modif-tree shapes target-frame]
+        (fn [modif-tree shapes target-frame-id]
           (reduce
            (fn [modif-tree id]
              (update-in
               modif-tree
               [id :modifiers]
               #(-> %
-                   (ctm/change-property :frame-id target-frame)
-                   (ctm/change-property :parent-id target-frame))))
+                   (ctm/change-property :frame-id target-frame-id)
+                   (ctm/change-property :parent-id target-frame-id))))
            modif-tree
            shapes))
 
         update-frame-modifiers
         (fn [modif-tree [original-frame shapes]]
-          (let [shapes (->> shapes (d/removev #(= target-frame %)))
+          (let [shapes (->> shapes (d/removev #(= target-frame-id %)))
                 shapes (cond->> shapes
-                         (and layout? (= original-frame target-frame))
+                         (and target-layout? (= original-frame target-frame-id))
                          ;; When movining inside a layout frame remove the shapes that are not immediate children
-                         (filterv #(contains? child-set %)))]
+                         (filterv #(contains? child-set %)))
+                children-ids (->> (dm/get-in objects [original-frame :shapes])
+                                  (remove (set selected)))
+
+                h-sizing? (ctl/change-h-sizing? original-frame objects children-ids)
+                v-sizing? (ctl/change-v-sizing? original-frame objects children-ids)]
             (cond-> modif-tree
-              (not= original-frame target-frame)
+              (not= original-frame target-frame-id)
               (-> (modifier-remove-from-parent objects shapes)
-                  (update-in [target-frame :modifiers] ctm/add-children shapes drop-index)
-                  (set-parent-ids shapes target-frame))
+                  (update-in [target-frame-id :modifiers] ctm/add-children shapes drop-index)
+                  (set-parent-ids shapes target-frame-id)
+                  (cond-> h-sizing?
+                    (update-in [original-frame :modifiers] ctm/change-property :layout-item-h-sizing :fix))
+                  (cond-> v-sizing?
+                    (update-in [original-frame :modifiers] ctm/change-property :layout-item-v-sizing :fix)))
 
-              (and layout? (= original-frame target-frame))
-              (update-in [target-frame :modifiers] ctm/add-children shapes drop-index))))]
+              (and target-layout? (= original-frame target-frame-id))
+              (update-in [target-frame-id :modifiers] ctm/add-children shapes drop-index))))]
 
-    (reduce update-frame-modifiers modif-tree origin-frame-ids)))
+    (as-> modif-tree $
+      (reduce update-frame-modifiers $ origin-frame-ids)
+      (cond-> $
+        (ctl/change-h-sizing? target-frame-id objects children-ids)
+        (update-in [target-frame-id :modifiers] ctm/change-property :layout-item-h-sizing :fix))
+      (cond-> $
+        (ctl/change-v-sizing? target-frame-id objects children-ids)
+        (update-in [target-frame-id :modifiers] ctm/change-property :layout-item-v-sizing :fix)))))
 
 (defn modif->js
      [modif-tree objects]

frontend/src/app/main/ui/shapes/text/styles.cljs

@@ -84,7 +84,9 @@
                               :color (if show-text? text-color "transparent")
                               :caretColor (or text-color "black")
                               :overflowWrap "initial"
-                              :lineBreak "auto"}
+                              :lineBreak "auto"
+                              :whiteSpace "break-spaces"
+                              :textRendering "geometricPrecision"}
          fills
          (cond
            (some? (:fills data))

frontend/src/app/main/ui/workspace/left_toolbar.cljs

@@ -49,8 +49,8 @@
              (st/emit! (dwm/upload-media-workspace params)))))]
 
     [:li
-     [:button.tooltip.tooltip-right
-      {:alt (tr "workspace.toolbar.image" (sc/get-tooltip :insert-image))
+     [:button
+      {:title (tr "workspace.toolbar.image" (sc/get-tooltip :insert-image))
        :aria-label (tr "workspace.toolbar.image" (sc/get-tooltip :insert-image))
        :on-click on-click}
       [:*
@@ -73,8 +73,8 @@
     [:aside.left-toolbar
      [:ul.left-toolbar-options
       [:li
-       [:button.tooltip.tooltip-right
-        {:alt (tr "workspace.toolbar.move"  (sc/get-tooltip :move))
+       [:button
+        {:title (tr "workspace.toolbar.move"  (sc/get-tooltip :move))
          :aria-label (tr "workspace.toolbar.move"  (sc/get-tooltip :move))
          :class (when (and (nil? selected-drawtool)
                            (not edition)) "selected")
@@ -83,32 +83,32 @@
       (when-not workspace-read-only?
         [:*
          [:li
-          [:button.tooltip.tooltip-right
-           {:alt (tr "workspace.toolbar.frame" (sc/get-tooltip :draw-frame))
+          [:button
+           {:title (tr "workspace.toolbar.frame" (sc/get-tooltip :draw-frame))
             :aria-label (tr "workspace.toolbar.frame" (sc/get-tooltip :draw-frame))
             :class (when (= selected-drawtool :frame) "selected")
             :on-click (partial select-drawtool :frame)
             :data-test "artboard-btn"}
            i/artboard]]
          [:li
-          [:button.tooltip.tooltip-right
-           {:alt (tr "workspace.toolbar.rect" (sc/get-tooltip :draw-rect))
+          [:button
+           {:title (tr "workspace.toolbar.rect" (sc/get-tooltip :draw-rect))
             :aria-label (tr "workspace.toolbar.rect" (sc/get-tooltip :draw-rect))
             :class (when (= selected-drawtool :rect) "selected")
             :on-click (partial select-drawtool :rect)
             :data-test "rect-btn"}
            i/box]]
          [:li
-          [:button.tooltip.tooltip-right
-           {:alt (tr "workspace.toolbar.ellipse" (sc/get-tooltip :draw-ellipse))
+          [:button
+           {:title (tr "workspace.toolbar.ellipse" (sc/get-tooltip :draw-ellipse))
             :aria-label (tr "workspace.toolbar.ellipse" (sc/get-tooltip :draw-ellipse))
             :class (when (= selected-drawtool :circle) "selected")
             :on-click (partial select-drawtool :circle)
             :data-test "ellipse-btn"}
            i/circle]]
          [:li
-          [:button.tooltip.tooltip-right
-           {:alt (tr "workspace.toolbar.text" (sc/get-tooltip :draw-text))
+          [:button
+           {:title (tr "workspace.toolbar.text" (sc/get-tooltip :draw-text))
             :aria-label (tr "workspace.toolbar.text" (sc/get-tooltip :draw-text))
             :class (when (= selected-drawtool :text) "selected")
             :on-click (partial select-drawtool :text)}
@@ -117,16 +117,16 @@
          [:& image-upload]
 
          [:li
-          [:button.tooltip.tooltip-right
-           {:alt (tr "workspace.toolbar.curve" (sc/get-tooltip :draw-curve))
+          [:button
+           {:title  (tr "workspace.toolbar.curve" (sc/get-tooltip :draw-curve))
             :aria-label (tr "workspace.toolbar.curve" (sc/get-tooltip :draw-curve))
             :class (when (= selected-drawtool :curve) "selected")
             :on-click (partial select-drawtool :curve)
             :data-test "curve-btn"}
            i/pencil]]
          [:li
-          [:button.tooltip.tooltip-right
-           {:alt (tr "workspace.toolbar.path" (sc/get-tooltip :draw-path))
+          [:button
+           {:title (tr "workspace.toolbar.path" (sc/get-tooltip :draw-path))
             :aria-label (tr "workspace.toolbar.path" (sc/get-tooltip :draw-path))
             :class (when (= selected-drawtool :path) "selected")
             :on-click (partial select-drawtool :path)
@@ -134,8 +134,8 @@
            i/pen]]])
 
       [:li
-       [:button.tooltip.tooltip-right
-        {:alt (tr "workspace.toolbar.comments" (sc/get-tooltip :add-comment))
+       [:button
+        {:title (tr "workspace.toolbar.comments" (sc/get-tooltip :add-comment))
          :aria-label (tr "workspace.toolbar.comments" (sc/get-tooltip :add-comment))
          :class (when (= selected-drawtool :comments) "selected")
          :on-click (partial select-drawtool :comments)}
@@ -145,8 +145,8 @@
       (when-not workspace-read-only?
         [:*
          [:li
-          [:button.tooltip.tooltip-right
-           {:alt (tr "workspace.toolbar.text-palette" (sc/get-tooltip :toggle-textpalette))
+          [:button
+           {:title (tr "workspace.toolbar.text-palette" (sc/get-tooltip :toggle-textpalette))
             :aria-label (tr "workspace.toolbar.text-palette" (sc/get-tooltip :toggle-textpalette))
             :class (when (contains? layout :textpalette) "selected")
             :on-click (fn []
@@ -158,8 +158,8 @@
            "Ag"]]
 
          [:li
-          [:button.tooltip.tooltip-right
-           {:alt (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-colorpalette))
+          [:button
+           {:title (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-colorpalette))
             :aria-label (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-colorpalette))
             :class (when (contains? layout :colorpalette) "selected")
             :on-click (fn []
@@ -170,8 +170,8 @@
                                                         (vary-meta assoc ::ev/origin "workspace-left-toolbar")))))}
            i/palette]]])
       [:li
-       [:button.tooltip.tooltip-right.separator
-        {:alt (tr "workspace.toolbar.shortcuts" (sc/get-tooltip :show-shortcuts))
+       [:button
+        {:title (tr "workspace.toolbar.shortcuts" (sc/get-tooltip :show-shortcuts))
          :aria-label (tr "workspace.toolbar.shortcuts" (sc/get-tooltip :show-shortcuts))
          :class (when (contains? layout :shortcuts) "selected")
          :on-click (fn []
@@ -183,8 +183,8 @@
         i/shortcut]
 
        (when *assert*
-         [:button.tooltip.tooltip-right
-          {:alt "Debugging tool"
+         [:button
+          {:title "Debugging tool"
            :class (when (contains? layout :debug-panel) "selected")
            :on-click (fn []
                        (let [is-sidebar-closed? (contains? layout :collapse-left-sidebar)]