From 00450565c86c7511aeb4b5f494a3b59ca4840e9c Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Wed, 5 Jul 2023 15:13:44 +0200 Subject: [PATCH 1/5] :bug: Makes height priority for the rows/columns grids --- CHANGES.md | 2 +- frontend/src/app/util/geom/grid.cljs | 21 ++++++++++++--------- 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 58e10a3648..3edd755555 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -43,7 +43,7 @@ - Fix validation on team name input [Taiga #5510](https://tree.taiga.io/project/penpot/issue/5510) - Fix incorrect uri generation issues on share-link modal [Taiga #5564](https://tree.taiga.io/project/penpot/issue/5564) - Fix cache issues with share-links [Taiga #5559](https://tree.taiga.io/project/penpot/issue/5559) - +- Makes height priority for the rows/columns grids [#2774](https://github.com/penpot/penpot/issues/2774) ### :arrow_up: Deps updates diff --git a/frontend/src/app/util/geom/grid.cljs b/frontend/src/app/util/geom/grid.cljs index 29aece8017..dea9569ad8 100644 --- a/frontend/src/app/util/geom/grid.cljs +++ b/frontend/src/app/util/geom/grid.cljs @@ -25,28 +25,31 @@ (mth/floor (/ frame-length-no-margins (+ item-length gutter))))) (defn- calculate-generic-grid - [v width {:keys [size gutter margin item-length type]}] + [v total-length {:keys [size gutter margin item-length type]}] (let [size (if (number? size) size - (calculate-size width item-length margin gutter)) - parts (/ width size) + (calculate-size total-length item-length margin gutter)) - width' (min (or item-length ##Inf) (+ parts (- gutter) (/ gutter size) (- (/ (* margin 2) size)))) + parts (/ total-length size) + + item-length (if (number? item-length) + item-length + (+ parts (- gutter) (/ gutter size) (- (/ (* margin 2) size)))) offset (case type - :right (- width (* width' size) (* gutter (dec size)) margin) - :center (/ (- width (* width' size) (* gutter (dec size))) 2) + :right (- total-length (* item-length size) (* gutter (dec size)) margin) + :center (/ (- total-length (* item-length size) (* gutter (dec size))) 2) margin) gutter (if (= :stretch type) - (let [gutter (/ (- width (* width' size) (* margin 2)) (dec size))] + (let [gutter (max 0 gutter (/ (- total-length (* item-length size) (* margin 2)) (dec size)))] (if (d/num? gutter) gutter 0)) gutter) next-v (fn [cur-val] - (+ offset v (* (+ width' gutter) cur-val)))] + (+ offset v (* (+ item-length gutter) cur-val)))] - [size width' next-v gutter])) + [size item-length next-v gutter])) (defn- calculate-column-grid [{:keys [width height x y] :as frame} params] From dd9f637f0235245ba02a1aacaead5cb7b8171ac8 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Wed, 5 Jul 2023 15:59:50 +0200 Subject: [PATCH 2/5] :bug: Fix problem with comments mode not staying --- CHANGES.md | 1 + frontend/src/app/main/ui/workspace/left_toolbar.cljs | 6 +++++- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/CHANGES.md b/CHANGES.md index 3edd755555..0530a0bcf7 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -44,6 +44,7 @@ - Fix incorrect uri generation issues on share-link modal [Taiga #5564](https://tree.taiga.io/project/penpot/issue/5564) - Fix cache issues with share-links [Taiga #5559](https://tree.taiga.io/project/penpot/issue/5559) - Makes height priority for the rows/columns grids [#2774](https://github.com/penpot/penpot/issues/2774) +- Fix problem with comments mode not staying [#3363](https://github.com/penpot/penpot/issues/3363) ### :arrow_up: Deps updates diff --git a/frontend/src/app/main/ui/workspace/left_toolbar.cljs b/frontend/src/app/main/ui/workspace/left_toolbar.cljs index 6728f863ba..c0b4bce216 100644 --- a/frontend/src/app/main/ui/workspace/left_toolbar.cljs +++ b/frontend/src/app/main/ui/workspace/left_toolbar.cljs @@ -81,7 +81,11 @@ (let [tool (-> (dom/get-current-target event) (dom/get-data "tool") (keyword))] - (st/emit! :interrupt (dw/select-for-drawing tool))))) + (st/emit! :interrupt + dw/clear-edition-mode) + + ;; Delay so anything that launched :interrupt can finish + (st/emit! 100 (dw/select-for-drawing tool))))) toggle-text-palette (mf/use-fn From 647beec1e8c1398febd3563d96a821ac3df385b6 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Thu, 6 Jul 2023 09:29:54 +0200 Subject: [PATCH 3/5] :bug: Fix problem with comments when user left the team --- CHANGES.md | 1 + frontend/src/app/main/data/comments.cljs | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGES.md b/CHANGES.md index 0530a0bcf7..c16729c428 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -45,6 +45,7 @@ - Fix cache issues with share-links [Taiga #5559](https://tree.taiga.io/project/penpot/issue/5559) - Makes height priority for the rows/columns grids [#2774](https://github.com/penpot/penpot/issues/2774) - Fix problem with comments mode not staying [#3363](https://github.com/penpot/penpot/issues/3363) +- Fix problem with comments when user left the team [Taiga #5562](https://tree.taiga.io/project/penpot/issue/5562) ### :arrow_up: Deps updates diff --git a/frontend/src/app/main/data/comments.cljs b/frontend/src/app/main/data/comments.cljs index e85e04f3ac..ce58747df3 100644 --- a/frontend/src/app/main/data/comments.cljs +++ b/frontend/src/app/main/data/comments.cljs @@ -282,7 +282,7 @@ (fetched [[users comments] state] (let [state (-> state (assoc :comment-threads (d/index-by :id comments)) - (assoc :current-file-comments-users (d/index-by :id users)))] + (update :current-file-comments-users merge (d/index-by :id users)))] (reduce set-comment-threds state comments)))] (ptk/reify ::retrieve-comment-threads From 7a499bfc9090740eda444d957e4b87f677084b92 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Thu, 6 Jul 2023 11:41:05 +0200 Subject: [PATCH 4/5] :bug: Fix problem with images patterns repeating --- CHANGES.md | 1 + frontend/src/app/main/ui/shapes/fills.cljs | 25 +++++++++++++++++----- 2 files changed, 21 insertions(+), 5 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index c16729c428..6334e4f3d7 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -46,6 +46,7 @@ - Makes height priority for the rows/columns grids [#2774](https://github.com/penpot/penpot/issues/2774) - Fix problem with comments mode not staying [#3363](https://github.com/penpot/penpot/issues/3363) - Fix problem with comments when user left the team [Taiga #5562](https://tree.taiga.io/project/penpot/issue/5562) +- Fix problem with images patterns repeating [#3372](https://github.com/penpot/penpot/issues/3372) ### :arrow_up: Deps updates diff --git a/frontend/src/app/main/ui/shapes/fills.cljs b/frontend/src/app/main/ui/shapes/fills.cljs index 668ba8c399..de37f15609 100644 --- a/frontend/src/app/main/ui/shapes/fills.cljs +++ b/frontend/src/app/main/ui/shapes/fills.cljs @@ -16,6 +16,8 @@ [app.util.object :as obj] [rumext.v2 :as mf])) +(def no-repeat-padding 1.05) + (mf/defc fills {::mf/wrap-props false} [props] @@ -71,7 +73,10 @@ (let [fill-id (dm/str "fill-" shape-index "-" render-id)] [:> :pattern (-> (obj/clone pattern-attrs) - (obj/set! "id" fill-id)) + (obj/set! "id" fill-id) + (cond-> has-image? + (-> (obj/set! "width" (* width no-repeat-padding)) + (obj/set! "height" (* height no-repeat-padding))))) [:g (for [[fill-index value] (-> (d/enumerate (:fills shape [])) reverse)] [:> :rect (-> (attrs/extract-fill-attrs value render-id fill-index type) @@ -80,7 +85,17 @@ (obj/set! "height" height))]) (when has-image? - [:image {:href (or (:data-uri shape) (get embed uri uri)) - :preserveAspectRatio "none" - :width width - :height height}])]])]))))) + [:g + ;; We add this shape to add a padding so the patter won't repeat + ;; Issue: https://tree.taiga.io/project/penpot/issue/5583 + [:rect {:x 0 + :y 0 + :width (* width no-repeat-padding) + :height (* height no-repeat-padding) + :fill "none"}] + [:image {:href (or (:data-uri shape) (get embed uri uri)) + :preserveAspectRatio "none" + :x 0 + :y 0 + :width width + :height height}]])]])]))))) From 996a614ed759d2fb16abbc5d8141ffa00776209c Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Thu, 6 Jul 2023 15:50:02 +0200 Subject: [PATCH 5/5] :bug: Fix grid not being cutted in frames --- CHANGES.md | 1 + common/src/app/common/geom/shapes/rect.cljc | 4 +- frontend/src/app/main/refs.cljs | 9 +++ .../ui/workspace/viewport/frame_grid.cljs | 75 ++++++++++++++----- 4 files changed, 70 insertions(+), 19 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 6334e4f3d7..45d018adfd 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -47,6 +47,7 @@ - Fix problem with comments mode not staying [#3363](https://github.com/penpot/penpot/issues/3363) - Fix problem with comments when user left the team [Taiga #5562](https://tree.taiga.io/project/penpot/issue/5562) - Fix problem with images patterns repeating [#3372](https://github.com/penpot/penpot/issues/3372) +- Fix grid not being clipped in frames [#3365](https://github.com/penpot/penpot/issues/3365) ### :arrow_up: Deps updates diff --git a/common/src/app/common/geom/shapes/rect.cljc b/common/src/app/common/geom/shapes/rect.cljc index 258ed0cd38..c304b99f47 100644 --- a/common/src/app/common/geom/shapes/rect.cljc +++ b/common/src/app/common/geom/shapes/rect.cljc @@ -218,7 +218,7 @@ (make-selrect (min xp1 xp2) (min yp1 yp2) (abs (- xp1 xp2)) (abs (- yp1 yp2))))) (defn clip-selrect - [{:keys [x1 y1 x2 y2] :as sr} bounds] + [{:keys [x1 y1 x2 y2] :as sr} clip-rect] (when (some? sr) - (let [{bx1 :x1 by1 :y1 bx2 :x2 by2 :y2} (rect->selrect bounds)] + (let [{bx1 :x1 by1 :y1 bx2 :x2 by2 :y2 :as sr2} (rect->selrect clip-rect)] (corners->selrect (max bx1 x1) (max by1 y1) (min bx2 x2) (min by2 y2))))) diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs index 92190f0311..bcb78e7a4a 100644 --- a/frontend/src/app/main/refs.cljs +++ b/frontend/src/app/main/refs.cljs @@ -298,6 +298,15 @@ (into [] (keep #(get objects %)) parent-ids))) workspace-page-objects =)) +(defn shape-parents + [id] + (l/derived + (fn [objects] + (into [] + (keep (d/getf objects)) + (cph/get-parent-ids objects id))) + workspace-page-objects =)) + (defn children-objects [id] (l/derived diff --git a/frontend/src/app/main/ui/workspace/viewport/frame_grid.cljs b/frontend/src/app/main/ui/workspace/viewport/frame_grid.cljs index c7b4032862..37a7265863 100644 --- a/frontend/src/app/main/ui/workspace/viewport/frame_grid.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/frame_grid.cljs @@ -7,7 +7,10 @@ (ns app.main.ui.workspace.viewport.frame-grid (:require [app.common.data :as d] + [app.common.data.macros :as dm] + [app.common.geom.shapes :as gsh] [app.common.math :as mth] + [app.common.pages.helpers :as cph] [app.common.types.shape-tree :as ctst] [app.common.uuid :as uuid] [app.main.refs :as refs] @@ -109,32 +112,70 @@ :strokeOpacity color-opacity :fill "none"}}]]))])) +(defn frame-clip-area + [{:keys [selrect]} parents] + (reduce + (fn [sr parent] + (cond-> sr + (and (not (cph/root? parent)) + (cph/frame-shape? parent) + (not (:show-content parent))) + (gsh/clip-selrect (:selrect parent)))) + selrect + parents)) + (mf/defc grid-display-frame - [{:keys [frame zoom]}] - (for [[index grid] (->> (:grids frame) - (filter :display) - (map-indexed vector))] - (let [props #js {:key (str (:id frame) "-grid-" index) - :frame frame - :zoom zoom - :grid grid}] - (case (:type grid) - :square [:> square-grid props] - :column [:> layout-grid props] - :row [:> layout-grid props])))) + {::mf/wrap [mf/memo]} + [{:keys [frame zoom transforming]}] + (let [frame-id (:id frame) + parents-ref (mf/with-memo [frame-id] (refs/shape-parents frame-id)) + parents (mf/deref parents-ref) + clip-area (frame-clip-area frame parents) + clip-id (dm/str (:id frame) "-grid-clip") + + transform? + (or (contains? transforming frame-id) + (some #(contains? transforming %) (map :id parents)))] + + (when-not transform? + [:g {:clip-path (dm/fmt "url(#%)" clip-id)} + [:defs + [:clipPath {:id clip-id} + [:rect {:x (:x clip-area) + :y (:y clip-area) + :width (:width clip-area) + :height (:height clip-area)}]]] + + (for [[index grid] (->> (:grids frame) + (filter :display) + (map-indexed vector))] + (let [props #js {:key (str (:id frame) "-grid-" index) + :frame frame + :zoom zoom + :grid grid}] + (case (:type grid) + :square [:> square-grid props] + :column [:> layout-grid props] + :row [:> layout-grid props])))]))) + +(defn has-grid? + [{:keys [grids]}] + (and (some? grids) + (d/not-empty? (->> grids (filter :display))))) (mf/defc frame-grid {::mf/wrap [mf/memo]} [{:keys [zoom transform selected focus]}] - (let [frames (mf/deref refs/workspace-frames) - transforming (when (some? transform) selected) - is-transform? #(contains? transforming (:id %))] + (let [frames (->> (mf/deref refs/workspace-frames) + (filter has-grid?)) + transforming (when (some? transform) selected)] [:g.grid-display {:style {:pointer-events "none"}} (for [frame frames] - (when (and (not (is-transform? frame)) + (when (and #_(not (is-transform? frame)) (not (ctst/rotated-frame? frame)) (or (empty? focus) (contains? focus (:id frame)))) [:& grid-display-frame {:key (str "grid-" (:id frame)) :zoom zoom - :frame frame}]))])) + :frame frame + :transforming transforming}]))]))