Merge pull request #2897 from penpot/alotor-pro-fixes

Fixes

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

@@ -20,9 +20,13 @@
         hv            (partial gpo/start-hv layout-bounds)
         vv            (partial gpo/start-vv layout-bounds)
 
-        end?     (ctl/content-end? parent)
-        center?  (ctl/content-center? parent)
-        around?  (ctl/content-around? parent)
+        wrap?    (ctl/wrap? parent)
+
+        end?     (or (and wrap? (ctl/content-end? parent))
+                     (and (not wrap?) (ctl/align-items-end? parent)))
+        center?  (or (and wrap? (ctl/content-center? parent))
+                     (and (not wrap?) (ctl/align-items-center? parent)))
+        around?  (and wrap? (ctl/content-around? parent))
 
         ;; Adjust the totals so it takes into account the gaps
         [layout-gap-row layout-gap-col] (ctl/gaps parent)

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

@@ -275,6 +275,21 @@
   (or (= :stretch layout-align-content)
       (nil? layout-align-content)))
 
+(defn align-items-center?
+  [{:keys [layout-align-items]}]
+  (= layout-align-items :center))
+
+(defn align-items-start?
+  [{:keys [layout-align-items]}]
+  (= layout-align-items :start))
+
+(defn align-items-end?
+  [{:keys [layout-align-items]}]
+  (= layout-align-items :end))
+
+(defn align-items-stretch?
+  [{:keys [layout-align-items]}]
+  (= layout-align-items :stretch))
 
 (defn reverse?
   [{:keys [layout-flex-dir]}]

frontend/src/app/main/refs.cljs

@@ -484,6 +484,15 @@
           (some (partial ctl/layout-immediate-child? objects))))
    workspace-page-objects))
 
+(defn all-layout-child?
+  [ids]
+  (l/derived
+   (fn [objects]
+     (->> ids
+          (map (d/getf objects))
+          (every? (partial ctl/layout-immediate-child? objects))))
+   workspace-page-objects))
+
 (defn get-flex-child-viewer
   [ids page-id]
   (l/derived

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

@@ -93,6 +93,10 @@
         thumbnail-data-ref (mf/use-memo (mf/deps page-id id) #(refs/thumbnail-frame-data page-id id))
         thumbnail-data     (mf/deref thumbnail-data-ref)
 
+        ;; We only need the zoom level in Safari. For other browsers we don't want to activate this because
+        ;; will render for every zoom change
+        zoom (when (cf/check-browser? :safari) (mf/deref refs/selected-zoom))
+
         prev-thumbnail-data (hooks/use-previous thumbnail-data)
 
         ;; State to indicate to the parent that should render the frame
@@ -110,8 +114,7 @@
            (let [canvas-node (mf/ref-val frame-canvas-ref)
                  img-node    (mf/ref-val frame-image-ref)]
              (when (draw-thumbnail-canvas! canvas-node img-node)
-               (when-not (cf/check-browser? :safari)
-                 (reset! image-url nil))
+               (reset! image-url nil)
 
                (when @show-frame-thumbnail
                  (reset! show-frame-thumbnail false))
@@ -270,11 +273,15 @@
          {:key (dm/str "thumbnail-canvas-" (:id shape))
           :ref frame-canvas-ref
           :data-object-id (dm/str page-id (:id shape))
-          :width fixed-width
-          :height fixed-height
-          ;; DEBUG
-          :style {:filter (when (and (not (cf/check-browser? :safari)) (debug? :thumbnails)) "invert(1)")
-                  :display (when (cf/check-browser? :safari) "none")}}]]
+          :width width
+          :height height
+          :style {;; Safari has a problem with the positioning of the canvas. All this is to fix Safari behavior
+                  ;; https://bugs.webkit.org/show_bug.cgi?id=23113
+                  :position "fixed"
+                  :transform-origin "top left"
+                  :transform (when (cf/check-browser? :safari) (dm/fmt "scale(%)" zoom))
+                  ;; DEBUG
+                  :filter (when (debug? :thumbnails) "invert(1)")}}]]
 
        ;; Safari don't support filters so instead we add a rectangle around the thumbnail
        (when (and (cf/check-browser? :safari) (debug? :thumbnails))
@@ -288,8 +295,8 @@
        (when (some? @image-url)
          [:foreignObject {:x x
                           :y y
-                          :width width
-                          :height height}
+                          :width fixed-width
+                          :height fixed-height}
           [:img {:ref frame-image-ref
                  :src @image-url
                  :width fixed-width

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

@@ -11,6 +11,7 @@
    [app.common.geom.shapes :as gsh]
    [app.common.pages.common :as cpc]
    [app.common.text :as txt]
+   [app.common.types.shape.layout :as ctl]
    [app.main.data.workspace.texts :as dwt]
    [app.main.refs :as refs]
    [app.main.ui.hooks :as hooks]
@@ -26,7 +27,7 @@
    [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.v2 :as mf]))
+   [rumext.v2 :as mf]))
 
 ;; Define how to read each kind of attribute depending on the shape type:
 ;;   - shape: read the attribute directly from the shape.
@@ -298,6 +299,13 @@
 
         has-text? (contains? all-types :text)
 
+        has-layout-container? (->> shapes (some ctl/layout?))
+
+        all-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/all-layout-child? ids))
+        all-layout-child? (mf/deref all-layout-child-ref)
+
+        all-layout-container? (->> shapes (every? ctl/layout?))
+
         [measure-ids    measure-values]    (get-attrs shapes objects :measure)
 
         [layer-ids            layer-values
@@ -332,14 +340,15 @@
      (when-not (empty? measure-ids)
        [:& measures-menu {:type type :all-types all-types :ids measure-ids :values measure-values :shape shapes}])
 
-     [:& layout-container-menu {:type type :ids layout-container-ids :values layout-container-values :multiple true}]
+     (when has-layout-container?
+       [:& layout-container-menu {:type type :ids layout-container-ids :values layout-container-values :multiple true}])
 
-     (when is-layout-child?
+     (when (or is-layout-child? has-layout-container?)
        [:& layout-item-menu
         {:type type
          :ids layout-item-ids
-         :is-layout-child? true
-         :is-layout-container? true
+         :is-layout-child? all-layout-child?
+         :is-layout-container? all-layout-container?
          :values layout-item-values}])
 
      (when-not (or (empty? constraint-ids) is-layout-child?)