From 48c3e3e00b36c00e9b5a2ffcc8a4b93c9146eaeb Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Thu, 2 Feb 2023 12:54:46 +0100 Subject: [PATCH 1/4] :bug: Fix problem with Safari canvas behavior --- .../shapes/frame/thumbnail_render.cljs | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/shapes/frame/thumbnail_render.cljs b/frontend/src/app/main/ui/workspace/shapes/frame/thumbnail_render.cljs index 46974dddd..399292f9b 100644 --- a/frontend/src/app/main/ui/workspace/shapes/frame/thumbnail_render.cljs +++ b/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)) @@ -272,9 +275,13 @@ :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")}}]] + :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)) From 7c215dc11bc3aada2fe82059864cb6cb2e9fd2c7 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Thu, 2 Feb 2023 13:24:28 +0100 Subject: [PATCH 2/4] :bug: Align-items center/end weren't respected when layout was outside bounds --- .../common/geom/shapes/flex_layout/positions.cljc | 10 +++++++--- common/src/app/common/types/shape/layout.cljc | 15 +++++++++++++++ 2 files changed, 22 insertions(+), 3 deletions(-) diff --git a/common/src/app/common/geom/shapes/flex_layout/positions.cljc b/common/src/app/common/geom/shapes/flex_layout/positions.cljc index 2e2e44bfd..77ce23d0b 100644 --- a/common/src/app/common/geom/shapes/flex_layout/positions.cljc +++ b/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) diff --git a/common/src/app/common/types/shape/layout.cljc b/common/src/app/common/types/shape/layout.cljc index 8d619cc6c..9be46671f 100644 --- a/common/src/app/common/types/shape/layout.cljc +++ b/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]}] From 3e52bef6d4896dbf250fe88d00ab3b6f82aa2373 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Thu, 2 Feb 2023 13:37:15 +0100 Subject: [PATCH 3/4] :bug: Fix problem with multiple selection of layout items --- frontend/src/app/main/refs.cljs | 9 +++++++++ .../sidebar/options/shapes/multiple.cljs | 19 ++++++++++++++----- 2 files changed, 23 insertions(+), 5 deletions(-) diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs index 262aa8139..59c91bbd6 100644 --- a/frontend/src/app/main/refs.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs index f8e76adf1..3ca283c50 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs +++ b/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?) From e8972dd80209ac840febbbb590fbafbe768a14f8 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Thu, 2 Feb 2023 15:34:35 +0100 Subject: [PATCH 4/4] :bug: Fix problem with thumbnail updating --- .../main/ui/workspace/shapes/frame/thumbnail_render.cljs | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/shapes/frame/thumbnail_render.cljs b/frontend/src/app/main/ui/workspace/shapes/frame/thumbnail_render.cljs index 399292f9b..65a1c6c88 100644 --- a/frontend/src/app/main/ui/workspace/shapes/frame/thumbnail_render.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/frame/thumbnail_render.cljs @@ -273,8 +273,8 @@ {: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 + :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" @@ -295,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