🐛 Fix inconsistent representation of rectangles

CHANGES.md

@@ -35,6 +35,7 @@
 
 ### :bug: Bugs fixed
 
+- Fix inconsistent representation of rectangles [Taiga #3977](https://tree.taiga.io/project/penpot/issue/3977)
 - Fix recent fonts info [Taiga #3953](https://tree.taiga.io/project/penpot/issue/3953)
 - Fix clipped elements affect boards and centering [Taiga #3666](https://tree.taiga.io/project/penpot/issue/3666)
 - Fix intro action in multi input [Taiga #3541](https://tree.taiga.io/project/penpot/issue/3541)

common/src/app/common/path/shapes_to_path.cljc

@@ -224,7 +224,11 @@
              #_:else (rect->path shape))
 
            ;; Apply the transforms that had the shape
-           transform (:transform shape)
+           transform
+           (cond-> (:transform shape (gmt/matrix))
+             (:flip-x shape) (gmt/scale (gpt/point -1 1))
+             (:flip-y shape) (gmt/scale (gpt/point 1 -1)))
+
            new-content (cond-> new-content
                          (some? transform)
                          (gsp/transform-content (gmt/transform-in (gsc/center-shape shape) transform)))]

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

@@ -87,11 +87,17 @@
 
 (defn set-radius-4
   [shape attr value]
-  (cond-> shape
+  (let [attr (cond->> attr
-    (:rx shape)
+               (:flip-x shape)
-    (-> (dissoc :rx :rx)
+               (get {:r1 :r2 :r2 :r1 :r3 :r4 :r4 :r3})
-        (assoc :r1 0 :r2 0 :r3 0 :r4 0))
 
-    :always
+               (:flip-y shape)
-    (assoc attr value)))
+               (get {:r1 :r4 :r2 :r3 :r3 :r2 :r4 :r1}))]
 
+    (cond-> shape
+      (:rx shape)
+      (-> (dissoc :rx :rx)
+          (assoc :r1 0 :r2 0 :r3 0 :r4 0))
+
+      :always
+      (assoc attr value))))

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

@@ -19,7 +19,7 @@
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
-   [clojure.set :refer [union]]
+   [clojure.set :refer [rename-keys union]]
    [rumext.alpha :as mf]))
 
 (def measure-attrs
@@ -46,10 +46,26 @@
    :svg-raw #{:size :position :rotation}
    :text    #{:size :position :rotation}})
 
+(defn select-measure-keys
+  "Consider some shapes can be drawn from bottom to top or from left to right"
+  [shape]
+  (let [shape (cond
+                (and (:flip-x shape) (:flip-y shape))
+                (rename-keys shape {:r1 :r3 :r2 :r4 :r3 :r1 :r4 :r2})
+
+                (:flip-x shape)
+                (rename-keys shape {:r1 :r2 :r2 :r1 :r3 :r4 :r4 :r3})
+
+                (:flip-y shape)
+                (rename-keys shape {:r1 :r4 :r2 :r3 :r3 :r2 :r4 :r1})
+
+                :else
+                shape)]
+    (select-keys shape measure-attrs)))
+
 ;; -- User/drawing coords
 (mf/defc measures-menu
   [{:keys [ids ids-with-children values type all-types shape] :as props}]
-
   (let [options (if (= type :multiple)
                   (reduce #(union %1 %2) (map #(get type->options %) all-types))
                   (get type->options type))
@@ -221,7 +237,7 @@
              (st/emit! (dch/update-shapes ids (fn [shape] (assoc shape :hide-in-viewer (not value))))))))
 
         select-all #(-> % (dom/get-target) (.select))]
-    
+
     (mf/use-layout-effect
      (mf/deps radius-mode @radius-multi?)
      (fn []

frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs

@@ -21,11 +21,11 @@
    [app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]]
    [app.main.ui.workspace.sidebar.options.menus.layout :refer [layout-attrs layout-menu]]
    [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]]
-   [app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
+   [app.main.ui.workspace.sidebar.options.menus.measures :refer [select-measure-keys measure-attrs measures-menu]]
    [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-attrs shadow-menu]]
    [app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu]]
    [app.main.ui.workspace.sidebar.options.menus.text :as ot]
-   [rumext.alpha :as mf]))
+      [rumext.alpha :as mf]))
 
 ;; Define how to read each kind of attribute depending on the shape type:
 ;;   - shape: read the attribute directly from the shape.
@@ -197,8 +197,10 @@
               :shape    (let [;; Get the editable attrs from the shape, ensuring that all attributes
                               ;; are present, with value nil if they are not present in the shape.
                               shape-values (merge
-                                             (into {} (map #(vector % nil)) editable-attrs)
+                                            (into {} (map #(vector % nil)) editable-attrs)
-                                             (select-keys shape editable-attrs))]
+                                            (cond
+                                              (= attr-group :measure) (select-measure-keys shape)
+                                              :else (select-keys shape editable-attrs)))]
                           [(conj ids id)
                            (merge-attrs values shape-values)])
 

frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs

@@ -12,7 +12,7 @@
    [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]]
    [app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]]
    [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]]
-   [app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
+   [app.main.ui.workspace.sidebar.options.menus.measures :refer [select-measure-keys measures-menu]]
    [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
    [app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu]]
    [app.main.ui.workspace.sidebar.options.menus.svg-attrs :refer [svg-attrs-menu]]
@@ -23,7 +23,7 @@
   [{:keys [shape] :as props}]
   (let [ids [(:id shape)]
         type (:type shape)
-        measure-values (select-keys shape measure-attrs)
+        measure-values (select-measure-keys shape)
         layer-values (select-keys shape layer-attrs)
         constraint-values (select-keys shape constraint-attrs)
         fill-values (select-keys shape fill-attrs)