From 619b557c80e90109cec4ddbd11f85a01c95490c5 Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Thu, 15 Feb 2024 16:39:09 +0100
Subject: [PATCH 01/19] :bug: Fix anonymous access to shared prototypes

---
 backend/src/app/rpc/commands/files.clj | 1 +
 frontend/src/app/main/data/viewer.cljs | 6 ++++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/backend/src/app/rpc/commands/files.clj b/backend/src/app/rpc/commands/files.clj
index 3f7313291..38aba8f30 100644
--- a/backend/src/app/rpc/commands/files.clj
+++ b/backend/src/app/rpc/commands/files.clj
@@ -351,6 +351,7 @@
 (sv/defmethod ::get-file-fragment
   "Retrieve a file fragment by its ID. Only authenticated users."
   {::doc/added "1.17"
+   ::rpc/auth false
    ::sm/params schema:get-file-fragment
    ::sm/result schema:file-fragment}
   [{:keys [::db/pool] :as cfg} {:keys [::rpc/profile-id file-id fragment-id share-id]}]
diff --git a/frontend/src/app/main/data/viewer.cljs b/frontend/src/app/main/data/viewer.cljs
index af8401d8a..a698e567c 100644
--- a/frontend/src/app/main/data/viewer.cljs
+++ b/frontend/src/app/main/data/viewer.cljs
@@ -74,9 +74,11 @@
           (assoc-in [:viewer-local :interactions-show?] interactions-show?)))
 
     ptk/WatchEvent
-    (watch [_ _ _]
+    (watch [_ state _]
       (rx/of (fetch-bundle (d/without-nils params))
-             (fetch-comment-threads params)))
+             ;; Only fetch threads for logged-in users
+             (when (some? (:profile state))
+               (fetch-comment-threads params))))
 
     ptk/EffectEvent
     (effect [_ _ _]

From 74e57c00af0d3481ee070e1bdf3f7903725ce142 Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Thu, 15 Feb 2024 17:16:59 +0100
Subject: [PATCH 02/19] :bug: Fix create interactions with nested frames

---
 frontend/src/app/main/data/workspace/interactions.cljs | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/main/data/workspace/interactions.cljs b/frontend/src/app/main/data/workspace/interactions.cljs
index a8e2fe284..2bdc9f2e1 100644
--- a/frontend/src/app/main/data/workspace/interactions.cljs
+++ b/frontend/src/app/main/data/workspace/interactions.cljs
@@ -208,7 +208,10 @@
         from-frame-id (if (cfh/frame-shape? from-shape)
                         from-id (:frame-id from-shape))
 
-        target-frame (ctst/get-frame-by-position objects position)]
+        target-frame
+        (->> (ctst/get-frames-by-position objects position)
+             (remove :hide-in-viewer)
+             (last))]
 
     (when (and (not= (:id target-frame) uuid/zero)
                (not= (:id target-frame) from-frame-id))

From 4c81ac43862c34431df336039e4c08ea81a81d9c Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Fri, 16 Feb 2024 09:43:38 +0100
Subject: [PATCH 03/19] :bug: Fix problem with strokes exporting images

---
 common/src/app/common/geom/shapes/bounds.cljc | 81 ++++++++++---------
 frontend/src/app/main/render.cljs             |  2 +-
 .../src/app/main/ui/shapes/custom_stroke.cljs |  5 +-
 3 files changed, 45 insertions(+), 43 deletions(-)

diff --git a/common/src/app/common/geom/shapes/bounds.cljc b/common/src/app/common/geom/shapes/bounds.cljc
index c60840d7a..854d24440 100644
--- a/common/src/app/common/geom/shapes/bounds.cljc
+++ b/common/src/app/common/geom/shapes/bounds.cljc
@@ -15,8 +15,8 @@
 (defn shape-stroke-margin
   [shape stroke-width]
   (if (cfh/path-shape? shape)
-    ;; TODO: Calculate with the stroke offset (not implemented yet
-    (mth/sqrt (* 2 stroke-width stroke-width))
+    ;; TODO: Calculate with the stroke offset (not implemented yet)
+    (+ stroke-width (mth/sqrt (* 2 stroke-width stroke-width)))
     (- (mth/sqrt (* 2 stroke-width stroke-width)) stroke-width)))
 
 (defn- apply-filters
@@ -104,7 +104,7 @@
                       0))
               (reduce d/max 0))
 
-         margin
+         stroke-margin
          (if ignore-margin?
            0
            (shape-stroke-margin shape stroke-width))
@@ -124,9 +124,8 @@
                       :drop-shadow (+ (mth/abs (:offset-y %)) (* (:spread %) 2) (* (:blur %) 2) 10)
                       0))
               (reduce d/max 0))]
-
-     {:horizontal (mth/ceil (+ stroke-width margin shadow-width))
-      :vertical (mth/ceil (+ stroke-width margin shadow-height))})))
+     {:horizontal (mth/ceil (+ stroke-margin shadow-width))
+      :vertical (mth/ceil (+ stroke-margin shadow-height))})))
 
 (defn- add-padding
   [bounds padding]
@@ -143,47 +142,51 @@
         (update :height + (* 2 v-padding)))))
 
 (defn calculate-base-bounds
-  [shape]
-  (-> (get-shape-filter-bounds shape)
-      (add-padding (calculate-padding shape true))))
+  ([shape]
+   (calculate-base-bounds shape true))
+  ([shape ignore-margin?]
+   (-> (get-shape-filter-bounds shape)
+       (add-padding (calculate-padding shape ignore-margin?)))))
 
 (defn get-object-bounds
-  [objects shape]
-  (let [base-bounds (calculate-base-bounds shape)
-        bounds
-        (cond
-          (or (empty? (:shapes shape))
-              (or (:masked-group shape) (= :bool (:type shape)))
-              (and (cfh/frame-shape? shape) (not (:show-content shape))))
-          [base-bounds]
+  ([objects shape]
+   (get-object-bounds objects shape nil))
+  ([objects shape {:keys [ignore-margin?] :or {ignore-margin? true}}]
+   (let [base-bounds (calculate-base-bounds shape ignore-margin?)
+         bounds
+         (cond
+           (or (empty? (:shapes shape))
+               (or (:masked-group shape) (= :bool (:type shape)))
+               (and (cfh/frame-shape? shape) (not (:show-content shape))))
+           [base-bounds]
 
-          :else
-          (cfh/reduce-objects
-           objects
+           :else
+           (cfh/reduce-objects
+            objects
 
-           (fn [shape]
-             (and (not (:hidden shape))
-                  (d/not-empty? (:shapes shape))
-                  (or (not (cfh/frame-shape? shape))
-                      (:show-content shape))
+            (fn [shape]
+              (and (not (:hidden shape))
+                   (d/not-empty? (:shapes shape))
+                   (or (not (cfh/frame-shape? shape))
+                       (:show-content shape))
 
-                  (or (not (cfh/group-shape? shape))
-                      (not (:masked-group shape)))))
-           (:id shape)
+                   (or (not (cfh/group-shape? shape))
+                       (not (:masked-group shape)))))
+            (:id shape)
 
-           (fn [result child]
-             (cond-> result
-               (not (:hidden child))
-               (conj (calculate-base-bounds child))))
+            (fn [result child]
+              (cond-> result
+                (not (:hidden child))
+                (conj (calculate-base-bounds child))))
 
-           [base-bounds]))
+            [base-bounds]))
 
-        children-bounds
-        (cond->> (grc/join-rects bounds)
-          (not (cfh/frame-shape? shape)) (or (:children-bounds shape)))
+         children-bounds
+         (cond->> (grc/join-rects bounds)
+           (not (cfh/frame-shape? shape)) (or (:children-bounds shape)))
 
-        filters (shape->filters shape)
-        blur-value (or (-> shape :blur :value) 0)]
+         filters (shape->filters shape)
+         blur-value (or (-> shape :blur :value) 0)]
 
-    (get-rect-filter-bounds children-bounds filters blur-value)))
+     (get-rect-filter-bounds children-bounds filters blur-value))))
 
diff --git a/frontend/src/app/main/render.cljs b/frontend/src/app/main/render.cljs
index 0a19c8a84..be312cae2 100644
--- a/frontend/src/app/main/render.cljs
+++ b/frontend/src/app/main/render.cljs
@@ -449,7 +449,7 @@
                  (assoc :fills []))
 
 
-        {:keys [width height] :as bounds} (gsb/get-object-bounds objects object)
+        {:keys [width height] :as bounds} (gsb/get-object-bounds objects object {:ignore-margin? false})
         vbox (format-viewbox bounds)
         fonts (ff/shape->fonts object objects)
 
diff --git a/frontend/src/app/main/ui/shapes/custom_stroke.cljs b/frontend/src/app/main/ui/shapes/custom_stroke.cljs
index 6366c42e0..fa27d4e52 100644
--- a/frontend/src/app/main/ui/shapes/custom_stroke.cljs
+++ b/frontend/src/app/main/ui/shapes/custom_stroke.cljs
@@ -13,6 +13,7 @@
    [app.common.geom.shapes :as gsh]
    [app.common.geom.shapes.bounds :as gsb]
    [app.common.geom.shapes.text :as gst]
+   [app.common.math :as mth]
    [app.config :as cf]
    [app.main.ui.context :as muc]
    [app.main.ui.shapes.attrs :as attrs]
@@ -47,7 +48,7 @@
                          :center (/ (:stroke-width stroke 0) 2)
                          :outer (:stroke-width stroke 0)
                          0)
-        margin         (gsb/shape-stroke-margin stroke stroke-width)
+        stroke-margin  (gsb/shape-stroke-margin shape stroke-width)
 
         ;; NOTE: for performance reasons we may can delimit a bit the
         ;; dependencies to really useful shape attrs instead of using
@@ -57,8 +58,6 @@
                           (gst/shape->rect shape)
                           (grc/points->rect (:points shape))))
 
-        stroke-margin (+ stroke-width margin)
-
         x             (- (dm/get-prop selrect :x) stroke-margin)
         y             (- (dm/get-prop selrect :y) stroke-margin)
         w             (+ (dm/get-prop selrect :width) (* 2 stroke-margin))

From 330c0ac9f900b6513d0eeac00833d3d8582a7e9e Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Fri, 16 Feb 2024 13:32:32 +0100
Subject: [PATCH 04/19] :bug: Fix problem with text proportion lock

---
 common/src/app/common/geom/proportions.cljc        | 2 +-
 frontend/src/app/main/ui/shapes/custom_stroke.cljs | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/common/src/app/common/geom/proportions.cljc b/common/src/app/common/geom/proportions.cljc
index d6f37c216..7afaeef4d 100644
--- a/common/src/app/common/geom/proportions.cljc
+++ b/common/src/app/common/geom/proportions.cljc
@@ -40,6 +40,6 @@
     (cond
       (= type :svg-raw) (setup-proportions-size shape)
       (= type :image)   (setup-proportions-image shape)
-      image-fill?       (setup-proportions-size shape)
       (= type :text)    shape
+      image-fill?       (setup-proportions-size shape)
       :else             (setup-proportions-const shape))))
diff --git a/frontend/src/app/main/ui/shapes/custom_stroke.cljs b/frontend/src/app/main/ui/shapes/custom_stroke.cljs
index fa27d4e52..e855405a1 100644
--- a/frontend/src/app/main/ui/shapes/custom_stroke.cljs
+++ b/frontend/src/app/main/ui/shapes/custom_stroke.cljs
@@ -13,7 +13,6 @@
    [app.common.geom.shapes :as gsh]
    [app.common.geom.shapes.bounds :as gsb]
    [app.common.geom.shapes.text :as gst]
-   [app.common.math :as mth]
    [app.config :as cf]
    [app.main.ui.context :as muc]
    [app.main.ui.shapes.attrs :as attrs]

From 5573f467b73b80325bfe1ebcb161c0c5f9f0e7fa Mon Sep 17 00:00:00 2001
From: Andrey Antukh <niwi@niwi.nz>
Date: Mon, 19 Feb 2024 14:28:39 +0100
Subject: [PATCH 05/19] :paperclip: Increase devenv limits for multipart
 requests

---
 backend/scripts/repl           | 3 +++
 backend/scripts/start-dev      | 3 +++
 backend/src/app/binfile/v1.clj | 6 +++++-
 backend/src/app/http.clj       | 4 ++--
 docker/devenv/files/nginx.conf | 2 +-
 5 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/backend/scripts/repl b/backend/scripts/repl
index f521f2bff..4e454b761 100755
--- a/backend/scripts/repl
+++ b/backend/scripts/repl
@@ -36,6 +36,9 @@ export PENPOT_FLAGS="\
 # Setup default upload media file size to 100MiB
 export PENPOT_MEDIA_MAX_FILE_SIZE=104857600
 
+# Setup default multipart upload size to 300MiB
+export PENPOT_HTTP_SERVER_MAX_MULTIPART_BODY_SIZE=314572800
+
 # export PENPOT_DATABASE_URI="postgresql://172.17.0.1:5432/penpot"
 # export PENPOT_DATABASE_USERNAME="penpot"
 # export PENPOT_DATABASE_PASSWORD="penpot"
diff --git a/backend/scripts/start-dev b/backend/scripts/start-dev
index 8fecd79af..89df83d96 100755
--- a/backend/scripts/start-dev
+++ b/backend/scripts/start-dev
@@ -37,6 +37,9 @@ export OPTIONS="
 # Setup default upload media file size to 100MiB
 export PENPOT_MEDIA_MAX_FILE_SIZE=104857600
 
+# Setup default multipart upload size to 300MiB
+export PENPOT_HTTP_SERVER_MAX_MULTIPART_BODY_SIZE=314572800
+
 # Setup HEAP
 # export OPTIONS="$OPTIONS -J-Xms50m -J-Xmx1024m"
 # export OPTIONS="$OPTIONS -J-Xms1100m -J-Xmx1100m -J-XX:+AlwaysPreTouch"
diff --git a/backend/src/app/binfile/v1.clj b/backend/src/app/binfile/v1.clj
index 8597254c7..d2b7cdf7f 100644
--- a/backend/src/app/binfile/v1.clj
+++ b/backend/src/app/binfile/v1.clj
@@ -65,7 +65,11 @@
 
 (def ^:const buffer-size (:xnio/buffer-size yt/defaults))
 (def ^:const penpot-magic-number 800099563638710213)
-(def ^:const max-object-size (* 1024 1024 100)) ; Only allow 100MiB max file size.
+
+
+;; A maximum (storage) object size allowed: 100MiB
+(def ^:const max-object-size
+  (* 1024 1024 100))
 
 (def ^:dynamic *position* nil)
 
diff --git a/backend/src/app/http.clj b/backend/src/app/http.clj
index 599225827..1e605cdb0 100644
--- a/backend/src/app/http.clj
+++ b/backend/src/app/http.clj
@@ -52,8 +52,8 @@
   [_ cfg]
   (merge {::port 6060
           ::host "0.0.0.0"
-          ::max-body-size (* 1024 1024 30)             ; 30 MiB
-          ::max-multipart-body-size (* 1024 1024 120)} ; 120 MiB
+          ::max-body-size (* 1024 1024 30)             ; default 30 MiB
+          ::max-multipart-body-size (* 1024 1024 120)} ; default 120 MiB
          (d/without-nils cfg)))
 
 (defmethod ig/pre-init-spec ::server [_]
diff --git a/docker/devenv/files/nginx.conf b/docker/devenv/files/nginx.conf
index d291512c8..24a0f2ddf 100644
--- a/docker/devenv/files/nginx.conf
+++ b/docker/devenv/files/nginx.conf
@@ -49,7 +49,7 @@ http {
         listen 3449 default_server;
         server_name _;
 
-        client_max_body_size 100M;
+        client_max_body_size 300M;
         charset utf-8;
 
         proxy_http_version 1.1;

From dc2b4ddebc4eb767ab7fcaccea363fb13e745725 Mon Sep 17 00:00:00 2001
From: Andrey Antukh <niwi@niwi.nz>
Date: Mon, 19 Feb 2024 14:38:50 +0100
Subject: [PATCH 06/19] :arrow_up: Update devenv dockerfile

Mainly version bump for node, kondo and jvm
---
 docker/devenv/Dockerfile | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/docker/devenv/Dockerfile b/docker/devenv/Dockerfile
index ef47e54b6..5e1aaffcb 100644
--- a/docker/devenv/Dockerfile
+++ b/docker/devenv/Dockerfile
@@ -3,10 +3,10 @@ LABEL maintainer="Andrey Antukh <niwi@niwi.nz>"
 
 ARG DEBIAN_FRONTEND=noninteractive
 
-ENV NODE_VERSION=v20.10.0 \
-    CLOJURE_VERSION=1.11.1.1429 \
-    CLJKONDO_VERSION=2023.12.15 \
-    BABASHKA_VERSION=1.3.187 \
+ENV NODE_VERSION=v20.11.1 \
+    CLOJURE_VERSION=1.11.1.1435 \
+    CLJKONDO_VERSION=2024.02.12 \
+    BABASHKA_VERSION=1.3.188 \
     CLJFMT_VERSION=0.12.0 \
     LANG=en_US.UTF-8 \
     LC_ALL=en_US.UTF-8
@@ -105,12 +105,12 @@ RUN set -eux; \
     ARCH="$(dpkg --print-architecture)"; \
     case "${ARCH}" in \
        aarch64|arm64) \
-         ESUM='aa43295803595f78d73e9c7c02866301c9729377277144e2829f54a58e5f6d21'; \
-         BINARY_URL='https://corretto.aws/downloads/resources/21.0.1.12.1/amazon-corretto-21.0.1.12.1-linux-aarch64.tar.gz'; \
+         ESUM='3ce6a2b357e2ef45fd6b53d6587aa05bfec7771e7fb982f2c964f6b771b7526a'; \
+         BINARY_URL='https://github.com/adoptium/temurin21-binaries/releases/download/jdk-21.0.2%2B13/OpenJDK21U-jdk_aarch64_linux_hotspot_21.0.2_13.tar.gz'; \
          ;; \
        amd64|x86_64) \
-         ESUM='3e718a86cfa6c1173c469f5e9d6b07fa37381a28ebb1f80593250cc380baf22f'; \
-         BINARY_URL='https://corretto.aws/downloads/resources/21.0.1.12.1/amazon-corretto-21.0.1.12.1-linux-x64.tar.gz'; \
+         ESUM='454bebb2c9fe48d981341461ffb6bf1017c7b7c6e15c6b0c29b959194ba3aaa5'; \
+         BINARY_URL='https://github.com/adoptium/temurin21-binaries/releases/download/jdk-21.0.2%2B13/OpenJDK21U-jdk_x64_linux_hotspot_21.0.2_13.tar.gz'; \
          ;; \
        *) \
          echo "Unsupported arch: ${ARCH}"; \

From 32e8098a6d4dde311c24bb278d7de68b6bb50eb1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= <belen@hey.com>
Date: Mon, 19 Feb 2024 16:21:04 +0100
Subject: [PATCH 07/19] :bug: Fix opacity field size

---
 .../main/ui/workspace/sidebar/options/rows/color_row.scss   | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss
index f02cf1aeb..0eb672b73 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss
@@ -20,15 +20,13 @@
 .color-info {
   --detach-icon-foreground-color: none;
 
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr auto;
   align-items: center;
   gap: $s-2;
   border-radius: $s-8;
   background-color: var(--input-details-color);
   height: $s-32;
-  width: 100%;
-  flex-grow: 1;
-  min-width: 0;
 
   &:hover {
     --detach-icon-foreground-color: var(--input-foreground-color-active);

From 610f5dc5f7c913c03e34fcb4baa3732b891d61ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= <belen@hey.com>
Date: Mon, 19 Feb 2024 16:39:07 +0100
Subject: [PATCH 08/19] :bug: Add ellipsis to layer title text when inspecting
 shape

---
 frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss b/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss
index 5d9646ab6..2610509b9 100644
--- a/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss
+++ b/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss
@@ -28,7 +28,8 @@
 }
 
 .shape-row {
-  display: flex;
+  display: grid;
+  grid-template-columns: auto 1fr;
   gap: $s-8;
   align-items: center;
   height: $s-32;
@@ -46,6 +47,7 @@
 
 .layer-title {
   @include titleTipography;
+  @include text-ellipsis;
   height: $s-32;
   padding: $s-8 0;
   color: var(--assets-item-name-foreground-color-rest);

From 8c657e4172afeaee18df30b8aec6a2615b9d9e6b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= <belen@hey.com>
Date: Mon, 19 Feb 2024 17:43:17 +0100
Subject: [PATCH 09/19] :bug: Fix color picker gradient for light theme

---
 frontend/resources/styles/common/refactor/design-tokens.scss   | 3 +++
 .../src/app/main/ui/workspace/colorpicker/slider_selector.scss | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss
index 799195f84..f9c6f84b6 100644
--- a/frontend/resources/styles/common/refactor/design-tokens.scss
+++ b/frontend/resources/styles/common/refactor/design-tokens.scss
@@ -273,6 +273,7 @@
   --colorpicker-details-color: var(--color-background-quaternary);
   --colorpicker-details-color-selected: var(--color-accent-primary);
   --colorpicker-handlers-color: var(--color-foreground-primary);
+  --colorpicker-background-color: var(--color-foreground-primary);
 
   // COMMENTS
   --comment-title-color: var(--color-foreground-primary);
@@ -400,4 +401,6 @@
 
   --text-editor-selection-background-color: var(--la-tertiary-70);
   --expand-button-icon-border-width-selected: 2px;
+
+  --colorpicker-background-color: var(--color-background-primary);
 }
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.scss b/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.scss
index 65d2ae287..aef415df5 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.scss
+++ b/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.scss
@@ -93,7 +93,7 @@
 }
 
 .opacity-wrapper {
-  background-color: var(--colorpicker-handlers-color);
+  background-color: var(--colorpicker-background-color);
   border-radius: $br-8;
 }
 

From 710a357a6ec0946158d51da66e02292c7afd7fea Mon Sep 17 00:00:00 2001
From: Andrey Antukh <niwi@niwi.nz>
Date: Thu, 15 Feb 2024 18:03:25 +0100
Subject: [PATCH 10/19] :zap: Optimize the `margin-section` react component

---
 .../sidebar/options/menus/layout_item.cljs    | 292 +++++++++++-------
 1 file changed, 178 insertions(+), 114 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
index 6929eb505..8e8a2de0b 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
@@ -8,7 +8,6 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data :as d]
-   [app.common.data.macros :as dm]
    [app.common.types.shape.layout :as ctl]
    [app.main.data.workspace :as udw]
    [app.main.data.workspace.shape-layout :as dwsl]
@@ -36,123 +35,188 @@
    :layout-item-absolute
    :layout-item-z-index])
 
+(defn- select-margins
+  [m1? m2? m3? m4?]
+  (st/emit! (udw/set-margins-selected {:m1 m1? :m2 m2? :m3 m3? :m4 m4?})))
+
+(defn- select-margin
+  [prop]
+  (select-margins (= prop :m1) (= prop :m2) (= prop :m3) (= prop :m4)))
+
+(mf/defc margin-simple
+  {::mf/props :obj}
+  [{:keys [values on-change on-blur]}]
+  (let [m1 (:m1 values)
+        m2 (:m2 values)
+        m3 (:m3 values)
+        m4 (:m4 values)
+
+        m1 (when (and (not= values :multiple) (= m1 m3)) m1)
+        m2 (when (and (not= values :multiple) (= m2 m4)) m2)
+
+        on-focus
+        (mf/use-fn
+         (fn [event]
+           (let [attr (-> (dom/get-current-target event)
+                          (dom/get-data "name")
+                          (keyword))]
+             (case attr
+               :m1 (select-margins true false true false)
+               :m2 (select-margins false true false true))
+
+             (dom/select-target event))))
+
+        on-change'
+        (mf/use-fn
+         (mf/deps on-change)
+         (fn [value event]
+           (let [attr (-> (dom/get-current-target event)
+                          (dom/get-data "name")
+                          (keyword))]
+             (on-change :simple attr value))))]
+
+
+    [:div {:class (stl/css :margin-simple)}
+     [:div {:class (stl/css :vertical-margin)
+            :title "Vertical margin"}
+      [:span {:class (stl/css :icon)}
+       i/margin-top-bottom-refactor]
+      [:> numeric-input* {:class (stl/css :numeric-input)
+                          :placeholder "--"
+                          :data-name "m1"
+                          :on-focus on-focus
+                          :on-change on-change'
+                          :on-blur on-blur
+                          :nillable true
+                          :value m1}]]
+
+     [:div {:class (stl/css :horizontal-margin)
+            :title "Horizontal margin"}
+      [:span {:class (stl/css :icon)}
+       i/margin-left-right-refactor]
+      [:> numeric-input* {:class (stl/css :numeric-input)
+                          :placeholder "--"
+                          :data-name "m2"
+                          :on-focus on-focus
+                          :on-change on-change'
+                          :on-blur on-blur
+                          :nillable true
+                          :value m2}]]]))
+
+(mf/defc margin-multiple
+  {::mf/props :obj}
+  [{:keys [values on-change on-blur]}]
+  (let [margin (:layout-item-margin values)
+        m1     (:m1 margin)
+        m2     (:m2 margin)
+        m3     (:m3 margin)
+        m4     (:m4 margin)
+
+        on-focus
+        (mf/use-fn
+         (fn [event]
+           (let [attr (-> (dom/get-current-target event)
+                          (dom/get-data "name")
+                          (keyword))]
+             (select-margin attr)
+             (dom/select-target event))))
+
+        on-change'
+        (mf/use-fn
+         (mf/deps on-change)
+         (fn [value event]
+           (let [attr (-> (dom/get-current-target event)
+                          (dom/get-data "name")
+                          (keyword))]
+             (on-change :multiple attr value))))]
+
+    [:div {:class (stl/css :margin-multiple)}
+     [:div {:class (stl/css :top-margin)
+            :title "Top margin"}
+      [:span {:class (stl/css :icon)}
+       i/margin-top-refactor]
+      [:> numeric-input* {:class (stl/css :numeric-input)
+                          :placeholder "--"
+                          :data-name "m1"
+                          :on-focus on-focus
+                          :on-change on-change'
+                          :on-blur on-blur
+                          :nillable true
+                          :value m1}]]
+     [:div {:class (stl/css :right-margin)
+            :title "Right margin"}
+      [:span {:class (stl/css :icon)}
+       i/margin-right-refactor]
+      [:> numeric-input* {:class (stl/css :numeric-input)
+                          :placeholder "--"
+                          :data-name "m2"
+                          :on-focus on-focus
+                          :on-change on-change'
+                          :on-blur on-blur
+                          :nillable true
+                          :value m2}]]
+
+     [:div {:class (stl/css :bottom-margin)
+            :title "Bottom margin"}
+      [:span {:class (stl/css :icon)}
+       i/margin-bottom-refactor]
+      [:> numeric-input* {:class (stl/css :numeric-input)
+                          :placeholder "--"
+                          :data-name "m3"
+                          :on-focus on-focus
+                          :on-change on-change'
+                          :on-blur on-blur
+                          :nillable true
+                          :value m3}]]
+
+     [:div {:class (stl/css :left-margin)
+            :title "Left margin"}
+      [:span {:class (stl/css :icon)}
+       i/margin-left-refactor]
+      [:> numeric-input* {:class (stl/css :numeric-input)
+                          :placeholder "--"
+                          :data-name "m4"
+                          :on-focus on-focus
+                          :on-change on-change'
+                          :on-blur on-blur
+                          :nillable true
+                          :value m4}]]]))
+
+
 (mf/defc margin-section
-  [{:keys [values change-margin-style on-margin-change] :as props}]
+  {::mf/props :obj
+   ::mf/private true
+   ::mf/expected-props #{:values :type :on-type-change :on-change}}
+  [{:keys [type on-type-change] :as props}]
+  (let [type       (d/nilv type :simple)
+        on-blur    (mf/use-fn #(select-margins false false false false))
+        props      (mf/spread-obj props {:on-blur on-blur})
 
-  (let [margin-type    (or (:layout-item-margin-type values) :simple)
-        m1             (when (and (not (= :multiple (:layout-item-margin values)))
-                                  (= (dm/get-in values [:layout-item-margin :m1])
-                                     (dm/get-in values [:layout-item-margin :m3])))
-                         (dm/get-in values [:layout-item-margin :m1]))
+        on-type-change'
+        (mf/use-fn
+         (mf/deps type on-type-change)
+         (fn [_]
+           (if (= type :multiple)
+             (on-type-change :simple)
+             (on-type-change :multiple))))]
 
-        m2             (when (and (not (= :multiple (:layout-item-margin values)))
-                                  (= (dm/get-in values [:layout-item-margin :m2])
-                                     (dm/get-in values [:layout-item-margin :m4])))
-                         (dm/get-in values [:layout-item-margin :m2]))
-        select-margins
-        (fn [m1? m2? m3? m4?]
-          (st/emit! (udw/set-margins-selected {:m1 m1? :m2 m2? :m3 m3? :m4 m4?})))
-
-        select-margin #(select-margins (= % :m1) (= % :m2) (= % :m3) (= % :m4))]
-
-    (mf/use-effect
-     (fn []
-       (fn []
-         ;;on destroy component
-         (select-margins false false false false))))
+    (mf/with-effect []
+      (fn [] (on-blur)))
 
     [:div {:class (stl/css :margin-row)}
      [:div {:class (stl/css :inputs-wrapper)}
       (cond
-        (= margin-type :simple)
-        [:div {:class (stl/css :margin-simple)}
-         [:div {:class (stl/css :vertical-margin)
-                :title "Vertical margin"}
-          [:span {:class (stl/css :icon)}
-           i/margin-top-bottom-refactor]
-          [:> numeric-input* {:className (stl/css :numeric-input)
-                              :placeholder "--"
-                              :nillable true
-                              :value m1
-                              :on-focus (fn [event]
-                                          (select-margins true false true false)
-                                          (dom/select-target event))
-                              :on-change  (partial on-margin-change :simple :m1)
-                              :on-blur #(select-margins false false false false)}]]
+        (= type :simple)
+        [:> margin-simple props]
 
-         [:div {:class (stl/css :horizontal-margin)
-                :title "Horizontal margin"}
-          [:span {:class (stl/css :icon)}
-           i/margin-left-right-refactor]
-          [:> numeric-input* {:className (stl/css :numeric-input)
-                              :placeholder "--"
-                              :on-focus (fn [event]
-                                          (select-margins false true false true)
-                                          (dom/select-target event))
-                              :on-change (partial on-margin-change :simple :m2)
-                              :on-blur #(select-margins false false false false)
-                              :nillable true
-                              :value m2}]]]
+        (= type :multiple)
+        [:> margin-multiple props])]
 
-        (= margin-type :multiple)
-        [:div {:class (stl/css :margin-multiple)}
-         [:div {:class (stl/css :top-margin)
-                :title "Top margin"}
-          [:span {:class (stl/css :icon)}
-           i/margin-top-refactor]
-          [:> numeric-input* {:className (stl/css :numeric-input)
-                              :placeholder "--"
-                              :on-focus (fn [event]
-                                          (select-margin :m1)
-                                          (dom/select-target event))
-                              :on-change (partial on-margin-change :multiple :m1)
-                              :on-blur #(select-margins false false false false)
-                              :nillable true
-                              :value (:m1 (:layout-item-margin values))}]]
-         [:div {:class (stl/css :right-margin)
-                :title "Right margin"}
-          [:span {:class (stl/css :icon)}
-           i/margin-right-refactor]
-          [:> numeric-input* {:className (stl/css :numeric-input)
-                              :placeholder "--"
-                              :on-focus (fn [event]
-                                          (select-margin :m2)
-                                          (dom/select-target event))
-                              :on-change (partial on-margin-change :multiple :m2)
-                              :on-blur #(select-margins false false false false)
-                              :nillable true
-                              :value (:m2 (:layout-item-margin values))}]]
-
-         [:div {:class (stl/css :bottom-margin)
-                :title "Bottom margin"}
-          [:span {:class (stl/css :icon)}
-           i/margin-bottom-refactor]
-          [:> numeric-input* {:className (stl/css :numeric-input)
-                              :placeholder "--"
-                              :on-focus (fn [event]
-                                          (select-margin :m3)
-                                          (dom/select-target event))
-                              :on-change (partial on-margin-change :multiple :m3)
-                              :on-blur #(select-margins false false false false)
-                              :nillable true
-                              :value (:m3 (:layout-item-margin values))}]]
-         [:div {:class (stl/css :left-margin)
-                :title "Left margin"}
-          [:span {:class (stl/css :icon)}
-           i/margin-left-refactor]
-          [:> numeric-input* {:className (stl/css :numeric-input)
-                              :placeholder "--"
-                              :on-focus (fn [event]
-                                          (select-margin :m4)
-                                          (dom/select-target event))
-                              :on-change (partial on-margin-change :multiple :m4)
-                              :on-blur #(select-margins false false false false)
-                              :nillable true
-                              :value (:m4 (:layout-item-margin values))}]]])]
-     [:button {:class (stl/css-case :margin-mode true
-                                    :selected (= margin-type :multiple))
+     [:button {:class (stl/css-case
+                       :margin-mode true
+                       :selected (= type :multiple))
                :title "Margin - multiple"
-               :on-click #(change-margin-style (if (= margin-type :multiple) :simple :multiple))}
+               :on-click on-type-change'}
       i/margin-refactor]]))
 
 (mf/defc element-behaviour-horizontal
@@ -297,7 +361,7 @@
 
         ;; Margin
 
-        change-margin-style
+        on-change-margin-type
         (fn [type]
           (st/emit! (dwsl/update-layout-child ids {:layout-item-margin-type type})))
 
@@ -418,9 +482,10 @@
 
         (when is-layout-child?
           [:div {:class (stl/css :row)}
-           [:& margin-section {:values values
-                               :change-margin-style change-margin-style
-                               :on-margin-change on-margin-change}]])
+           [:& margin-section {:values (:layout-item-margin values)
+                               :type (:layout-item-margin-type values)
+                               :on-type-change on-change-margin-type
+                               :on-change on-margin-change}]])
 
         (when (or (= (:layout-item-h-sizing values) :fill)
                   (= (:layout-item-v-sizing values) :fill))
@@ -446,8 +511,7 @@
 
                [:div {:class (stl/css :layout-item-max-w)
                       :title (tr "workspace.options.layout-item.layout-item-max-w")}
-                [:span {:class (stl/css :icon-text)}
-                 "MAX W"]
+                [:span {:class (stl/css :icon-text)} "MAX W"]
                 [:> numeric-input*
                  {:className (stl/css :numeric-input)
                   :no-validate true

From c7582e7887764f291b0385b2bfa420b00b7880fc Mon Sep 17 00:00:00 2001
From: Andrey Antukh <niwi@niwi.nz>
Date: Fri, 16 Feb 2024 10:34:25 +0100
Subject: [PATCH 11/19] :zap: Optimize the `element-behaviour-horizontal` react
 component

---
 .../sidebar/options/menus/layout_item.cljs      | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
index 8e8a2de0b..e9bc26945 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
@@ -220,11 +220,12 @@
       i/margin-refactor]]))
 
 (mf/defc element-behaviour-horizontal
-  [{:keys [auto? fill? layout-item-sizing on-change] :as props}]
+  {::mf/props :obj}
+  [{:keys [^boolean auto ^boolean fill layout-item-sizing on-change]}]
   [:div {:class (stl/css-case :horizontal-behaviour true
-                              :one-element (and (not fill?) (not auto?))
-                              :two-element (or fill? auto?)
-                              :three-element (and fill? auto?))}
+                              :one-element (and (not fill) (not auto))
+                              :two-element (or fill auto)
+                              :three-element (and fill auto))}
    [:& radio-buttons {:selected  (d/name layout-item-sizing)
                       :on-change on-change
                       :wide      true
@@ -233,12 +234,12 @@
                       :icon  i/fixed-width-refactor
                       :title "Fix width"
                       :id    "behaviour-h-fix"}]
-    (when fill?
+    (when fill
       [:& radio-button {:value "fill"
                         :icon  i/fill-content-refactor
                         :title "Width 100%"
                         :id    "behaviour-h-fill"}])
-    (when auto?
+    (when auto
       [:& radio-button {:value "auto"
                         :icon  i/hug-content-refactor
                         :title "Fit content"
@@ -281,8 +282,8 @@
            on-change-behaviour-v-refactor] :as props}]
   [:div {:class (stl/css-case :behaviour-menu true
                               :wrap (and fill? auto?))}
-   [:& element-behaviour-horizontal {:auto? auto?
-                                     :fill? fill?
+   [:& element-behaviour-horizontal {:auto auto?
+                                     :fill fill?
                                      :layout-item-sizing layout-item-h-sizing
                                      :on-change on-change-behaviour-h-refactor}]
    [:& element-behaviour-vertical {:auto? auto?

From ed336724a0c74edc91402b8e604440a575878da0 Mon Sep 17 00:00:00 2001
From: Andrey Antukh <niwi@niwi.nz>
Date: Fri, 16 Feb 2024 10:36:56 +0100
Subject: [PATCH 12/19] :zap: Optimize the `element-behaviour-vertical` react
 component

---
 .../sidebar/options/menus/layout_item.cljs      | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
index e9bc26945..2a217f4ad 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
@@ -246,11 +246,12 @@
                         :id    "behaviour-h-auto"}])]])
 
 (mf/defc element-behaviour-vertical
-  [{:keys [auto? fill? layout-item-sizing on-change] :as props}]
+  {::mf/props :obj}
+  [{:keys [^boolean auto ^boolean fill layout-item-sizing on-change]}]
   [:div {:class (stl/css-case :vertical-behaviour true
-                              :one-element (and (not fill?) (not auto?))
-                              :two-element (or fill? auto?)
-                              :three-element (and fill? auto?))}
+                              :one-element (and (not fill) (not auto))
+                              :two-element (or fill auto)
+                              :three-element (and fill auto))}
    [:& radio-buttons {:selected  (d/name layout-item-sizing)
                       :on-change on-change
                       :wide      true
@@ -260,13 +261,13 @@
                       :icon-class (stl/css :rotated)
                       :title      "Fix height"
                       :id         "behaviour-v-fix"}]
-    (when fill?
+    (when fill
       [:& radio-button {:value      "fill"
                         :icon       i/fill-content-refactor
                         :icon-class (stl/css :rotated)
                         :title      "Height 100%"
                         :id         "behaviour-v-fill"}])
-    (when auto?
+    (when auto
       [:& radio-button {:value      "auto"
                         :icon       i/hug-content-refactor
                         :icon-class (stl/css :rotated)
@@ -286,8 +287,8 @@
                                      :fill fill?
                                      :layout-item-sizing layout-item-h-sizing
                                      :on-change on-change-behaviour-h-refactor}]
-   [:& element-behaviour-vertical {:auto? auto?
-                                   :fill? fill?
+   [:& element-behaviour-vertical {:auto auto?
+                                   :fill fill?
                                    :layout-item-sizing layout-item-v-sizing
                                    :on-change on-change-behaviour-v-refactor}]])
 

From 71681532cdc08e8f47812d61d8c74b913d9480cf Mon Sep 17 00:00:00 2001
From: Andrey Antukh <niwi@niwi.nz>
Date: Fri, 16 Feb 2024 11:36:51 +0100
Subject: [PATCH 13/19] :zap: Optimize the `element-behaviour` react component

---
 .../sidebar/options/menus/layout_item.cljs    | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
index 2a217f4ad..28b0075c4 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
@@ -275,20 +275,20 @@
                         :id         "behaviour-v-auto"}])]])
 
 (mf/defc element-behaviour
-  [{:keys [auto?
-           fill?
+  {::mf/props :obj}
+  [{:keys [^boolean auto ^boolean fill
            layout-item-h-sizing
            layout-item-v-sizing
            on-change-behaviour-h-refactor
-           on-change-behaviour-v-refactor] :as props}]
+           on-change-behaviour-v-refactor]}]
   [:div {:class (stl/css-case :behaviour-menu true
-                              :wrap (and fill? auto?))}
-   [:& element-behaviour-horizontal {:auto auto?
-                                     :fill fill?
+                              :wrap (and fill auto))}
+   [:& element-behaviour-horizontal {:auto auto
+                                     :fill fill
                                      :layout-item-sizing layout-item-h-sizing
                                      :on-change on-change-behaviour-h-refactor}]
-   [:& element-behaviour-vertical {:auto auto?
-                                   :fill fill?
+   [:& element-behaviour-vertical {:auto auto
+                                   :fill fill
                                    :layout-item-sizing layout-item-v-sizing
                                    :on-change on-change-behaviour-v-refactor}]])
 
@@ -468,8 +468,8 @@
               :value (:layout-item-z-index values)}]]])
 
         [:div {:class (stl/css :row)}
-         [:& element-behaviour {:fill? is-layout-child?
-                                :auto? is-layout-container?
+         [:& element-behaviour {:fill is-layout-child?
+                                :auto is-layout-container?
                                 :layout-item-v-sizing (or (:layout-item-v-sizing values) :fix)
                                 :layout-item-h-sizing (or (:layout-item-h-sizing values) :fix)
                                 :on-change-behaviour-h-refactor on-change-behaviour-h

From 46fca11b380e75adfb9a8701c3ee06e21c34f553 Mon Sep 17 00:00:00 2001
From: Andrey Antukh <niwi@niwi.nz>
Date: Fri, 16 Feb 2024 11:39:17 +0100
Subject: [PATCH 14/19] :zap: Optimize the `align-self-row` react component

---
 .../workspace/sidebar/options/menus/layout_item.cljs  | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
index 28b0075c4..927f17765 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
@@ -293,21 +293,22 @@
                                    :on-change on-change-behaviour-v-refactor}]])
 
 (mf/defc align-self-row
-  [{:keys [is-col? align-self on-change] :as props}]
+  {::mf/props :obj}
+  [{:keys [^boolean is-col align-self on-change]}]
   [:& radio-buttons {:selected (d/name align-self)
                      :on-change on-change
                      :name "flex-align-self"
                      :allow-empty true}
    [:& radio-button {:value "start"
-                     :icon  (get-layout-flex-icon :align-self :start is-col?)
+                     :icon  (get-layout-flex-icon :align-self :start is-col)
                      :title "Align self start"
                      :id     "align-self-start"}]
    [:& radio-button {:value "center"
-                     :icon  (get-layout-flex-icon :align-self :center is-col?)
+                     :icon  (get-layout-flex-icon :align-self :center is-col)
                      :title "Align self center"
                      :id    "align-self-center"}]
    [:& radio-button {:value "end"
-                     :icon  (get-layout-flex-icon :align-self :end is-col?)
+                     :icon  (get-layout-flex-icon :align-self :end is-col)
                      :title "Align self end"
                      :id    "align-self-end"}]])
 
@@ -478,7 +479,7 @@
 
         (when (and is-layout-child? is-flex-parent?)
           [:div {:class (stl/css :row)}
-           [:& align-self-row {:is-col? is-col?
+           [:& align-self-row {:is-col is-col?
                                :align-self align-self
                                :on-change set-align-self}]])
 

From a1a9519cf5e010d0a0233b662351ea84a1226034 Mon Sep 17 00:00:00 2001
From: Andrey Antukh <niwi@niwi.nz>
Date: Fri, 16 Feb 2024 12:06:26 +0100
Subject: [PATCH 15/19] :zap: Optimize the `layout-item-menu` react component

---
 .../sidebar/options/menus/layout_item.cljs    | 64 ++++++++++++-------
 1 file changed, 42 insertions(+), 22 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
index 927f17765..7e14f7a15 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
@@ -313,36 +313,52 @@
                      :id    "align-self-end"}]])
 
 (mf/defc layout-item-menu
-  {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type" "is-layout-child?" "is-grid-parent?" "is-flex-parent?"]))]}
-  [{:keys [ids values is-layout-child? is-layout-container? is-grid-parent? is-flex-parent? is-flex-layout? is-grid-layout?] :as props}]
+  {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type" "is-layout-child?" "is-grid-parent?" "is-flex-parent?"]))]
+   ::mf/props :obj}
+  [{:keys [ids values
+           ^boolean is-layout-child?
+           ^boolean is-layout-container?
+           ^boolean is-grid-parent?
+           ^boolean is-flex-parent?
+           ^boolean is-flex-layout?
+           ^boolean is-grid-layout?]}]
 
   (let [selection-parents-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))
         selection-parents     (mf/deref selection-parents-ref)
 
         is-absolute?          (:layout-item-absolute values)
 
-        is-col? (every? ctl/col? selection-parents)
+        is-col?               (every? ctl/col? selection-parents)
 
-        is-layout-child? (and is-layout-child? (not is-absolute?))
+        is-layout-child?      (and is-layout-child? (not is-absolute?))
 
-        state*                 (mf/use-state true)
-        open?                  (deref state*)
-        toggle-content         (mf/use-fn #(swap! state* not))
-        has-content?           (or is-layout-child? is-flex-parent? is-grid-parent? is-layout-container?)
+        state*                (mf/use-state true)
+        open?                 (deref state*)
+
+        toggle-content        (mf/use-fn #(swap! state* not))
+        has-content?          (or ^boolean is-layout-child?
+                                  ^boolean is-flex-parent?
+                                  ^boolean is-grid-parent?
+                                  ^boolean is-layout-container?)
 
         ;; Align self
 
-        align-self         (:layout-item-align-self values)
+        align-self           (:layout-item-align-self values)
 
         title
         (cond
-          (and is-layout-container? (not is-layout-child?) is-flex-layout?)
+          (and is-layout-container?
+               is-flex-layout?
+               (not is-layout-child?))
           "Flex board"
 
-          (and is-layout-container? (not is-layout-child?) is-grid-layout?)
+          (and is-layout-container?
+               is-grid-layout?
+               (not is-layout-child?))
           "Grid board"
 
-          (and is-layout-container? (not is-layout-child?))
+          (and is-layout-container?
+               (not is-layout-child?))
           "Layout board"
 
           is-flex-parent?
@@ -365,20 +381,24 @@
         ;; Margin
 
         on-change-margin-type
-        (fn [type]
-          (st/emit! (dwsl/update-layout-child ids {:layout-item-margin-type type})))
+        (mf/use-fn
+         (mf/deps ids)
+         (fn [type]
+           (st/emit! (dwsl/update-layout-child ids {:layout-item-margin-type type}))))
 
         on-margin-change
-        (fn [type prop val]
-          (cond
-            (and (= type :simple) (= prop :m1))
-            (st/emit! (dwsl/update-layout-child ids {:layout-item-margin {:m1 val :m3 val}}))
+        (mf/use-fn
+         (mf/deps ids)
+         (fn [type prop val]
+           (cond
+             (and (= type :simple) (= prop :m1))
+             (st/emit! (dwsl/update-layout-child ids {:layout-item-margin {:m1 val :m3 val}}))
 
-            (and (= type :simple) (= prop :m2))
-            (st/emit! (dwsl/update-layout-child ids {:layout-item-margin {:m2 val :m4 val}}))
+             (and (= type :simple) (= prop :m2))
+             (st/emit! (dwsl/update-layout-child ids {:layout-item-margin {:m2 val :m4 val}}))
 
-            :else
-            (st/emit! (dwsl/update-layout-child ids {:layout-item-margin {prop val}}))))
+             :else
+             (st/emit! (dwsl/update-layout-child ids {:layout-item-margin {prop val}})))))
 
         ;; Behaviour
 

From 1e7a2b575faa376375f927cbda1dea0c75476384 Mon Sep 17 00:00:00 2001
From: Andrey Antukh <niwi@niwi.nz>
Date: Fri, 16 Feb 2024 13:32:04 +0100
Subject: [PATCH 16/19] :lipstick: Add mostly cosmetic changes to `layout-item`
 ns code

---
 .../sidebar/options/menus/layout_item.cljs    | 221 +++++++++---------
 1 file changed, 111 insertions(+), 110 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
index 7e14f7a15..c72bd4adb 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
@@ -221,76 +221,94 @@
 
 (mf/defc element-behaviour-horizontal
   {::mf/props :obj}
-  [{:keys [^boolean auto ^boolean fill layout-item-sizing on-change]}]
+  [{:keys [^boolean is-auto ^boolean has-fill item-sizing on-change]}]
   [:div {:class (stl/css-case :horizontal-behaviour true
-                              :one-element (and (not fill) (not auto))
-                              :two-element (or fill auto)
-                              :three-element (and fill auto))}
-   [:& radio-buttons {:selected  (d/name layout-item-sizing)
-                      :on-change on-change
-                      :wide      true
-                      :name      "flex-behaviour-h"}
-    [:& radio-button {:value "fix"
-                      :icon  i/fixed-width-refactor
-                      :title "Fix width"
-                      :id    "behaviour-h-fix"}]
-    (when fill
-      [:& radio-button {:value "fill"
-                        :icon  i/fill-content-refactor
-                        :title "Width 100%"
-                        :id    "behaviour-h-fill"}])
-    (when auto
-      [:& radio-button {:value "auto"
-                        :icon  i/hug-content-refactor
-                        :title "Fit content"
-                        :id    "behaviour-h-auto"}])]])
+                              :one-element (and (not has-fill) (not is-auto))
+                              :two-element (or has-fill is-auto)
+                              :three-element (and has-fill is-auto))}
+   [:& radio-buttons
+    {:selected  (d/name item-sizing)
+     :on-change on-change
+     :wide      true
+     :name      "flex-behaviour-h"}
+
+    [:& radio-button
+     {:value "fix"
+      :icon  i/fixed-width-refactor
+      :title "Fix width"
+      :id    "behaviour-h-fix"}]
+
+    (when has-fill
+      [:& radio-button
+       {:value "fill"
+        :icon  i/fill-content-refactor
+        :title "Width 100%"
+        :id    "behaviour-h-fill"}])
+    (when is-auto
+      [:& radio-button
+       {:value "auto"
+        :icon  i/hug-content-refactor
+        :title "Fit content"
+        :id    "behaviour-h-auto"}])]])
 
 (mf/defc element-behaviour-vertical
   {::mf/props :obj}
-  [{:keys [^boolean auto ^boolean fill layout-item-sizing on-change]}]
+  [{:keys [^boolean is-auto ^boolean has-fill item-sizing on-change]}]
   [:div {:class (stl/css-case :vertical-behaviour true
-                              :one-element (and (not fill) (not auto))
-                              :two-element (or fill auto)
-                              :three-element (and fill auto))}
-   [:& radio-buttons {:selected  (d/name layout-item-sizing)
-                      :on-change on-change
-                      :wide      true
-                      :name      "flex-behaviour-v"}
-    [:& radio-button {:value      "fix"
-                      :icon       i/fixed-width-refactor
-                      :icon-class (stl/css :rotated)
-                      :title      "Fix height"
-                      :id         "behaviour-v-fix"}]
-    (when fill
-      [:& radio-button {:value      "fill"
-                        :icon       i/fill-content-refactor
-                        :icon-class (stl/css :rotated)
-                        :title      "Height 100%"
-                        :id         "behaviour-v-fill"}])
-    (when auto
-      [:& radio-button {:value      "auto"
-                        :icon       i/hug-content-refactor
-                        :icon-class (stl/css :rotated)
-                        :title      "Fit content"
-                        :id         "behaviour-v-auto"}])]])
+                              :one-element (and (not has-fill) (not is-auto))
+                              :two-element (or has-fill is-auto)
+                              :three-element (and has-fill is-auto))}
+   [:& radio-buttons
+    {:selected  (d/name item-sizing)
+     :on-change on-change
+     :wide      true
+     :name      "flex-behaviour-v"}
+
+    [:& radio-button
+     {:value      "fix"
+      :icon       i/fixed-width-refactor
+      :icon-class (stl/css :rotated)
+      :title      "Fix height"
+      :id         "behaviour-v-fix"}]
+
+    (when has-fill
+      [:& radio-button
+       {:value      "fill"
+        :icon       i/fill-content-refactor
+        :icon-class (stl/css :rotated)
+        :title      "Height 100%"
+        :id         "behaviour-v-fill"}])
+    (when is-auto
+      [:& radio-button
+       {:value      "auto"
+        :icon       i/hug-content-refactor
+        :icon-class (stl/css :rotated)
+        :title      "Fit content"
+        :id         "behaviour-v-auto"}])]])
 
 (mf/defc element-behaviour
-  {::mf/props :obj}
-  [{:keys [^boolean auto ^boolean fill
-           layout-item-h-sizing
-           layout-item-v-sizing
-           on-change-behaviour-h-refactor
-           on-change-behaviour-v-refactor]}]
-  [:div {:class (stl/css-case :behaviour-menu true
-                              :wrap (and fill auto))}
-   [:& element-behaviour-horizontal {:auto auto
-                                     :fill fill
-                                     :layout-item-sizing layout-item-h-sizing
-                                     :on-change on-change-behaviour-h-refactor}]
-   [:& element-behaviour-vertical {:auto auto
-                                   :fill fill
-                                   :layout-item-sizing layout-item-v-sizing
-                                   :on-change on-change-behaviour-v-refactor}]])
+  {::mf/props :obj
+   ::mf/private true}
+  [{:keys [^boolean is-auto
+           ^boolean has-fill
+           item-h-sizing
+           item-v-sizing
+           on-h-change
+           on-v-change]}]
+  [:div {:class (stl/css-case
+                 :behaviour-menu true
+                 :wrap (and has-fill is-auto))}
+
+   [:& element-behaviour-horizontal
+    {:is-auto is-auto
+     :has-fill has-fill
+     :item-sizing item-h-sizing
+     :on-change on-h-change}]
+   [:& element-behaviour-vertical
+    {:is-auto is-auto
+     :has-fill has-fill
+     :item-sizing item-v-sizing
+     :on-change on-v-change}]])
 
 (mf/defc align-self-row
   {::mf/props :obj}
@@ -323,27 +341,29 @@
            ^boolean is-flex-layout?
            ^boolean is-grid-layout?]}]
 
-  (let [selection-parents-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))
-        selection-parents     (mf/deref selection-parents-ref)
+  (let [selection-parents* (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))
+        selection-parents  (mf/deref selection-parents*)
 
-        is-absolute?          (:layout-item-absolute values)
+        ^boolean
+        is-absolute?       (:layout-item-absolute values)
 
-        is-col?               (every? ctl/col? selection-parents)
+        ^boolean
+        is-col?            (every? ctl/col? selection-parents)
 
-        is-layout-child?      (and is-layout-child? (not is-absolute?))
+        ^boolean
+        is-layout-child?   (and is-layout-child? (not is-absolute?))
 
-        state*                (mf/use-state true)
-        open?                 (deref state*)
+        state*             (mf/use-state true)
+        open?              (deref state*)
 
-        toggle-content        (mf/use-fn #(swap! state* not))
-        has-content?          (or ^boolean is-layout-child?
-                                  ^boolean is-flex-parent?
-                                  ^boolean is-grid-parent?
-                                  ^boolean is-layout-container?)
+        toggle-content     (mf/use-fn #(swap! state* not))
+        has-content?       (or is-layout-child?
+                               is-flex-parent?
+                               is-grid-parent?
+                               is-layout-container?)
 
         ;; Align self
-
-        align-self           (:layout-item-align-self values)
+        align-self         (:layout-item-align-self values)
 
         title
         (cond
@@ -401,21 +421,6 @@
              (st/emit! (dwsl/update-layout-child ids {:layout-item-margin {prop val}})))))
 
         ;; Behaviour
-
-        on-change-behaviour
-        (mf/use-fn
-         (mf/deps ids)
-         (fn [event]
-           (let [value (-> (dom/get-current-target event)
-                           (dom/get-data "value")
-                           (keyword))
-                 dir (-> (dom/get-current-target event)
-                         (dom/get-data "direction")
-                         (keyword))]
-             (if (= dir :h)
-               (st/emit! (dwsl/update-layout-child ids {:layout-item-h-sizing value}))
-               (st/emit! (dwsl/update-layout-child ids {:layout-item-v-sizing value}))))))
-
         on-change-behaviour-h
         (mf/use-fn
          (mf/deps ids)
@@ -481,7 +486,7 @@
             [:span {:class (stl/css :icon-text)}
              "Z"]
             [:> numeric-input*
-             {:className (stl/css :numeric-input)
+             {:class (stl/css :numeric-input)
               :placeholder "--"
               :on-focus #(dom/select-target %)
               :on-change #(on-change-z-index %)
@@ -489,13 +494,12 @@
               :value (:layout-item-z-index values)}]]])
 
         [:div {:class (stl/css :row)}
-         [:& element-behaviour {:fill is-layout-child?
-                                :auto is-layout-container?
-                                :layout-item-v-sizing (or (:layout-item-v-sizing values) :fix)
-                                :layout-item-h-sizing (or (:layout-item-h-sizing values) :fix)
-                                :on-change-behaviour-h-refactor on-change-behaviour-h
-                                :on-change-behaviour-v-refactor on-change-behaviour-v
-                                :on-change on-change-behaviour}]]
+         [:& element-behaviour {:has-fill is-layout-child?
+                                :is-auto is-layout-container?
+                                :item-v-sizing (:layout-item-v-sizing values)
+                                :item-h-sizing (:layout-item-h-sizing values)
+                                :on-h-change on-change-behaviour-h
+                                :on-v-change on-change-behaviour-v}]]
 
         (when (and is-layout-child? is-flex-parent?)
           [:div {:class (stl/css :row)}
@@ -519,10 +523,9 @@
                [:div {:class (stl/css :layout-item-min-w)
                       :title (tr "workspace.options.layout-item.layout-item-min-w")}
 
-                [:span {:class (stl/css :icon-text)}
-                 "MIN W"]
+                [:span {:class (stl/css :icon-text)} "MIN W"]
                 [:> numeric-input*
-                 {:className (stl/css :numeric-input)
+                 {:class (stl/css :numeric-input)
                   :no-validate true
                   :min 0
                   :data-wrap true
@@ -536,7 +539,7 @@
                       :title (tr "workspace.options.layout-item.layout-item-max-w")}
                 [:span {:class (stl/css :icon-text)} "MAX W"]
                 [:> numeric-input*
-                 {:className (stl/css :numeric-input)
+                 {:class (stl/css :numeric-input)
                   :no-validate true
                   :min 0
                   :data-wrap true
@@ -550,10 +553,9 @@
                [:div {:class (stl/css :layout-item-min-h)
                       :title (tr "workspace.options.layout-item.layout-item-min-h")}
 
-                [:span {:class (stl/css :icon-text)}
-                 "MIN H"]
+                [:span {:class (stl/css :icon-text)} "MIN H"]
                 [:> numeric-input*
-                 {:className (stl/css :numeric-input)
+                 {:class (stl/css :numeric-input)
                   :no-validate true
                   :min 0
                   :data-wrap true
@@ -566,10 +568,9 @@
                [:div {:class (stl/css :layout-item-max-h)
                       :title (tr "workspace.options.layout-item.layout-item-max-h")}
 
-                [:span {:class (stl/css :icon-text)}
-                 "MAX H"]
+                [:span {:class (stl/css :icon-text)} "MAX H"]
                 [:> numeric-input*
-                 {:className (stl/css :numeric-input)
+                 {:class (stl/css :numeric-input)
                   :no-validate true
                   :min 0
                   :data-wrap true

From 00961808b48c64aef17aa48ff70c11d6341564ea Mon Sep 17 00:00:00 2001
From: Andrey Antukh <niwi@niwi.nz>
Date: Fri, 16 Feb 2024 14:24:12 +0100
Subject: [PATCH 17/19] :zap: Optimize the `layout-item-menu` react component

---
 .../sidebar/options/menus/layout_item.cljs    | 87 ++++++++++---------
 1 file changed, 47 insertions(+), 40 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
index c72bd4adb..1aaf1b949 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
@@ -45,14 +45,14 @@
 
 (mf/defc margin-simple
   {::mf/props :obj}
-  [{:keys [values on-change on-blur]}]
-  (let [m1 (:m1 values)
-        m2 (:m2 values)
-        m3 (:m3 values)
-        m4 (:m4 values)
+  [{:keys [margin on-change on-blur]}]
+  (let [m1 (:m1 margin)
+        m2 (:m2 margin)
+        m3 (:m3 margin)
+        m4 (:m4 margin)
 
-        m1 (when (and (not= values :multiple) (= m1 m3)) m1)
-        m2 (when (and (not= values :multiple) (= m2 m4)) m2)
+        m1 (when (and (not= margin :multiple) (= m1 m3)) m1)
+        m2 (when (and (not= margin :multiple) (= m2 m4)) m2)
 
         on-focus
         (mf/use-fn
@@ -105,9 +105,8 @@
 
 (mf/defc margin-multiple
   {::mf/props :obj}
-  [{:keys [values on-change on-blur]}]
-  (let [margin (:layout-item-margin values)
-        m1     (:m1 margin)
+  [{:keys [margin on-change on-blur]}]
+  (let [m1     (:m1 margin)
         m2     (:m2 margin)
         m3     (:m3 margin)
         m4     (:m4 margin)
@@ -186,7 +185,7 @@
 (mf/defc margin-section
   {::mf/props :obj
    ::mf/private true
-   ::mf/expected-props #{:values :type :on-type-change :on-change}}
+   ::mf/expected-props #{:margin :type :on-type-change :on-change}}
   [{:keys [type on-type-change] :as props}]
   (let [type       (d/nilv type :simple)
         on-blur    (mf/use-fn #(select-margins false false false false))
@@ -221,13 +220,13 @@
 
 (mf/defc element-behaviour-horizontal
   {::mf/props :obj}
-  [{:keys [^boolean is-auto ^boolean has-fill item-sizing on-change]}]
+  [{:keys [^boolean is-auto ^boolean has-fill sizing on-change]}]
   [:div {:class (stl/css-case :horizontal-behaviour true
                               :one-element (and (not has-fill) (not is-auto))
                               :two-element (or has-fill is-auto)
                               :three-element (and has-fill is-auto))}
    [:& radio-buttons
-    {:selected  (d/name item-sizing)
+    {:selected  (d/name sizing)
      :on-change on-change
      :wide      true
      :name      "flex-behaviour-h"}
@@ -253,13 +252,13 @@
 
 (mf/defc element-behaviour-vertical
   {::mf/props :obj}
-  [{:keys [^boolean is-auto ^boolean has-fill item-sizing on-change]}]
+  [{:keys [^boolean is-auto ^boolean has-fill sizing on-change]}]
   [:div {:class (stl/css-case :vertical-behaviour true
                               :one-element (and (not has-fill) (not is-auto))
                               :two-element (or has-fill is-auto)
                               :three-element (and has-fill is-auto))}
    [:& radio-buttons
-    {:selected  (d/name item-sizing)
+    {:selected  (d/name sizing)
      :on-change on-change
      :wide      true
      :name      "flex-behaviour-v"}
@@ -291,8 +290,8 @@
    ::mf/private true}
   [{:keys [^boolean is-auto
            ^boolean has-fill
-           item-h-sizing
-           item-v-sizing
+           h-sizing
+           v-sizing
            on-h-change
            on-v-change]}]
   [:div {:class (stl/css-case
@@ -302,12 +301,12 @@
    [:& element-behaviour-horizontal
     {:is-auto is-auto
      :has-fill has-fill
-     :item-sizing item-h-sizing
+     :sizing h-sizing
      :on-change on-h-change}]
    [:& element-behaviour-vertical
     {:is-auto is-auto
      :has-fill has-fill
-     :item-sizing item-v-sizing
+     :sizing v-sizing
      :on-change on-v-change}]])
 
 (mf/defc align-self-row
@@ -364,6 +363,8 @@
 
         ;; Align self
         align-self         (:layout-item-align-self values)
+        h-sizing           (:layout-item-h-sizing values)
+        v-sizing           (:layout-item-v-sizing values)
 
         title
         (cond
@@ -399,7 +400,6 @@
              (st/emit! (dwsl/update-layout-child ids {:layout-item-align-self (keyword value)})))))
 
         ;; Margin
-
         on-change-margin-type
         (mf/use-fn
          (mf/deps ids)
@@ -428,7 +428,6 @@
            (let [value (keyword value)]
              (st/emit! (dwsl/update-layout-child ids {:layout-item-h-sizing value})))))
 
-
         on-change-behaviour-v
         (mf/use-fn
          (mf/deps ids)
@@ -437,10 +436,14 @@
              (st/emit! (dwsl/update-layout-child ids {:layout-item-v-sizing value})))))
 
         ;; Size and position
-
         on-size-change
-        (fn [measure value]
-          (st/emit! (dwsl/update-layout-child ids {measure value})))
+        (mf/use-fn
+         (mf/deps ids)
+         (fn [value event]
+           (let [attr (-> (dom/get-current-target event)
+                          (dom/get-data "attr")
+                          (keyword))]
+             (st/emit! (dwsl/update-layout-child ids {attr value})))))
 
         on-change-position
         (mf/use-fn
@@ -483,8 +486,7 @@
            [:div {:class (stl/css :z-index-wrapper)
                   :title "z-index"}
 
-            [:span {:class (stl/css :icon-text)}
-             "Z"]
+            [:span {:class (stl/css :icon-text)} "Z"]
             [:> numeric-input*
              {:class (stl/css :numeric-input)
               :placeholder "--"
@@ -496,8 +498,8 @@
         [:div {:class (stl/css :row)}
          [:& element-behaviour {:has-fill is-layout-child?
                                 :is-auto is-layout-container?
-                                :item-v-sizing (:layout-item-v-sizing values)
-                                :item-h-sizing (:layout-item-h-sizing values)
+                                :v-sizing (:layout-item-v-sizing values)
+                                :h-sizing (:layout-item-h-sizing values)
                                 :on-h-change on-change-behaviour-h
                                 :on-v-change on-change-behaviour-v}]]
 
@@ -509,13 +511,13 @@
 
         (when is-layout-child?
           [:div {:class (stl/css :row)}
-           [:& margin-section {:values (:layout-item-margin values)
+           [:& margin-section {:margin (:layout-item-margin values)
                                :type (:layout-item-margin-type values)
                                :on-type-change on-change-margin-type
                                :on-change on-margin-change}]])
 
-        (when (or (= (:layout-item-h-sizing values) :fill)
-                  (= (:layout-item-v-sizing values) :fill))
+        (when (or (= h-sizing :fill)
+                  (= v-sizing :fill))
           [:div {:class (stl/css :row)}
            [:div {:class (stl/css :advanced-options)}
             (when (= (:layout-item-h-sizing values) :fill)
@@ -530,8 +532,9 @@
                   :min 0
                   :data-wrap true
                   :placeholder "--"
-                  :on-focus #(dom/select-target %)
-                  :on-change (partial on-size-change :layout-item-min-w)
+                  :data-attr "layout-item-min-w"
+                  :on-focus dom/select-target
+                  :on-change on-size-change
                   :value (get values :layout-item-min-w)
                   :nillable true}]]
 
@@ -544,11 +547,13 @@
                   :min 0
                   :data-wrap true
                   :placeholder "--"
-                  :on-focus #(dom/select-target %)
-                  :on-change (partial on-size-change :layout-item-max-w)
+                  :data-attr "layout-item-max-w"
+                  :on-focus dom/select-target
+                  :on-change on-size-change
                   :value (get values :layout-item-max-w)
                   :nillable true}]]])
-            (when (= (:layout-item-v-sizing values) :fill)
+
+            (when (= v-sizing :fill)
               [:div {:class (stl/css :vertical-fill)}
                [:div {:class (stl/css :layout-item-min-h)
                       :title (tr "workspace.options.layout-item.layout-item-min-h")}
@@ -560,8 +565,9 @@
                   :min 0
                   :data-wrap true
                   :placeholder "--"
-                  :on-focus #(dom/select-target %)
-                  :on-change (partial on-size-change :layout-item-min-h)
+                  :data-attr "layout-item-min-h"
+                  :on-focus dom/select-target
+                  :on-change on-size-change
                   :value (get values :layout-item-min-h)
                   :nillable true}]]
 
@@ -575,7 +581,8 @@
                   :min 0
                   :data-wrap true
                   :placeholder "--"
-                  :on-focus #(dom/select-target %)
-                  :on-change (partial on-size-change :layout-item-max-h)
+                  :data-attr "layout-item-max-h"
+                  :on-focus dom/select-target
+                  :on-change on-size-change
                   :value (get values :layout-item-max-h)
                   :nillable true}]]])]])])]))

From 541052fee713d207bd99292b0e9f67eb7fe6b468 Mon Sep 17 00:00:00 2001
From: Andrey Antukh <niwi@niwi.nz>
Date: Tue, 20 Feb 2024 09:46:53 +0100
Subject: [PATCH 18/19] :arrow_up: Update rumext (new syntax features)

---
 frontend/deps.edn                                          | 4 ++--
 .../ui/workspace/sidebar/options/menus/layout_item.cljs    | 7 ++++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/frontend/deps.edn b/frontend/deps.edn
index 9e686a3f1..a626ecbd9 100644
--- a/frontend/deps.edn
+++ b/frontend/deps.edn
@@ -19,8 +19,8 @@
    :git/url "https://github.com/funcool/beicon.git"}
 
   funcool/rumext
-  {:git/tag "v2.9.4"
-   :git/sha "af08e55"
+  {:git/tag "v2.10"
+   :git/sha "d96ea18"
    :git/url "https://github.com/funcool/rumext.git"}
 
   instaparse/instaparse {:mvn/version "1.4.12"}
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
index 1aaf1b949..dff99e0a9 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
@@ -20,7 +20,8 @@
    [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [get-layout-flex-icon]]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
-   [rumext.v2 :as mf]))
+   [rumext.v2 :as mf]
+   [rumext.v2.props :as-alias mf.props]))
 
 (def layout-item-attrs
   [:layout-item-margin      ;; {:m1 0 :m2 0 :m3 0 :m4 0}
@@ -185,7 +186,7 @@
 (mf/defc margin-section
   {::mf/props :obj
    ::mf/private true
-   ::mf/expected-props #{:margin :type :on-type-change :on-change}}
+   ::mf.props/expect #{:margin :type :on-type-change :on-change}}
   [{:keys [type on-type-change] :as props}]
   (let [type       (d/nilv type :simple)
         on-blur    (mf/use-fn #(select-margins false false false false))
@@ -330,7 +331,7 @@
                      :id    "align-self-end"}]])
 
 (mf/defc layout-item-menu
-  {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type" "is-layout-child?" "is-grid-parent?" "is-flex-parent?"]))]
+  {::mf/memo #{:ids :values :type :is-layout-child? :is-grid-parent :is-flex-parent?}
    ::mf/props :obj}
   [{:keys [ids values
            ^boolean is-layout-child?

From cf950c426f0eadaaf10e46dbac581240fc189b75 Mon Sep 17 00:00:00 2001
From: Andrey Antukh <niwi@niwi.nz>
Date: Tue, 20 Feb 2024 10:17:15 +0100
Subject: [PATCH 19/19] :bug: Fix unexpected exception on copy/paste

The exception is caused by a regression introduced in the
refactor of migrations.
---
 frontend/src/app/main/data/workspace.cljs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/app/main/data/workspace.cljs b/frontend/src/app/main/data/workspace.cljs
index 0249bf2ca..31c2f20be 100644
--- a/frontend/src/app/main/data/workspace.cljs
+++ b/frontend/src/app/main/data/workspace.cljs
@@ -1618,7 +1618,7 @@
 
                   file-id  (:current-file-id state)
                   frame-id (cfh/common-parent-frame objects selected)
-                  version  (dm/get-in state [:workspace-data :version])
+                  version  (dm/get-in state [:workspace-file :version])
 
                   initial  {:type :copied-shapes
                             :features features