From 3c424786a7992ac6bed0cc214f21ecdbb78f67e9 Mon Sep 17 00:00:00 2001 From: Pablo Alba Date: Tue, 15 Nov 2022 16:32:03 +0100 Subject: [PATCH] :sparkles: Show board miniature in manual overlay setting --- CHANGES.md | 1 + .../app/common/types/shape/interactions.cljc | 16 +++-- .../types_shape_interactions_test.cljc | 62 ++++++++++++++++++- .../ui/workspace/viewport/interactions.cljs | 9 ++- 4 files changed, 79 insertions(+), 9 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index bb9f0aa99..5238ce23a 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -5,6 +5,7 @@ ### :boom: Breaking changes & Deprecations ### :sparkles: New features - Better overlays interactions on boards inside boards [Taiga #4386](https://tree.taiga.io/project/penpot/us/4386) +- Show board miniature in manual overlay setting [Taiga #4475](https://tree.taiga.io/project/penpot/issue/4475) ### :bug: Bugs fixed - Add title to color bullets [Taiga #4218](https://tree.taiga.io/project/penpot/task/4218) diff --git a/common/src/app/common/types/shape/interactions.cljc b/common/src/app/common/types/shape/interactions.cljc index 4731a1ef6..048e963d9 100644 --- a/common/src/app/common/types/shape/interactions.cljc +++ b/common/src/app/common/types/shape/interactions.cljc @@ -371,17 +371,23 @@ (assert (has-overlay-opts interaction)) (if (nil? dest-frame) (gpt/point 0 0) - (let [overlay-position (:overlay-position interaction) - overlay-size (:selrect dest-frame) - relative-to-shape-size (:selrect relative-to-shape) + (let [overlay-size (:selrect dest-frame) base-frame-size (:selrect base-frame) + relative-to-shape-size (:selrect relative-to-shape) + relative-to-adjusted-to-base-frame {:x (- (:x relative-to-shape-size) (:x base-frame-size)) + :y (- (:y relative-to-shape-size) (:y base-frame-size))} relative-to-is-auto? (and (nil? (:position-relative-to interaction)) (not= :manual (:overlay-pos-type interaction))) base-position (if relative-to-is-auto? {:x 0 :y 0} {:x (+ (:x frame-offset) - (- (:x relative-to-shape-size) (:x base-frame-size))) + (:x relative-to-adjusted-to-base-frame)) :y (+ (:y frame-offset) - (- (:y relative-to-shape-size) (:y base-frame-size)))})] + (:y relative-to-adjusted-to-base-frame))}) + overlay-position (:overlay-position interaction) + overlay-position (if (= (:type relative-to-shape) :frame) + overlay-position + {:x (- (:x overlay-position) (:x relative-to-adjusted-to-base-frame)) + :y (- (:y overlay-position) (:y relative-to-adjusted-to-base-frame))})] (case (:overlay-pos-type interaction) :center (gpt/point (+ (:x base-position) (/ (- (:width relative-to-shape-size) (:width overlay-size)) 2)) diff --git a/common/test/common_tests/types_shape_interactions_test.cljc b/common/test/common_tests/types_shape_interactions_test.cljc index 922d337d2..aa77c913a 100644 --- a/common/test/common_tests/types_shape_interactions_test.cljc +++ b/common/test/common_tests/types_shape_interactions_test.cljc @@ -285,6 +285,13 @@ (assoc-in [:selrect :height] 50) (assoc-in [:selrect :x] 10) (assoc-in [:selrect :y] 10)) + + rect (-> (cts/make-minimal-shape :rect) + (assoc-in [:selrect :width] 50) + (assoc-in [:selrect :height] 50) + (assoc-in [:selrect :x] 10) + (assoc-in [:selrect :y] 10)) + overlay-frame (-> (cts/make-minimal-shape :frame) (assoc-in [:selrect :width] 30) (assoc-in [:selrect :height] 20)) @@ -300,7 +307,8 @@ (ctsi/set-destination (:id overlay-frame))) interaction-auto (ctsi/set-position-relative-to interaction nil) interaction-base-frame (ctsi/set-position-relative-to interaction (:id base-frame)) - interaction-popup (ctsi/set-position-relative-to interaction (:id popup))] + interaction-popup (ctsi/set-position-relative-to interaction (:id popup)) + interaction-rect (ctsi/set-position-relative-to interaction (:id rect))] (t/testing "Overlay top-left relative to auto" (let [i2 (ctsi/set-overlay-pos-type interaction-auto :top-left base-frame objects) overlay-pos (ctsi/calc-overlay-position i2 base-frame base-frame overlay-frame frame-offset)] @@ -455,7 +463,57 @@ (ctsi/set-overlay-position (gpt/point 12 62))) overlay-pos (ctsi/calc-overlay-position i2 popup base-frame overlay-frame frame-offset)] (t/is (= (:x overlay-pos) 27)) - (t/is (= (:y overlay-pos) 77)))))) + (t/is (= (:y overlay-pos) 77)))) + + (t/testing "Overlay top-left relative to popup" + (let [i2 (ctsi/set-overlay-pos-type interaction-popup :top-left base-frame objects) + overlay-pos (ctsi/calc-overlay-position i2 popup base-frame overlay-frame frame-offset)] + (t/is (= (:x overlay-pos) 15)) + (t/is (= (:y overlay-pos) 15)))) + + (t/testing "Overlay top-center relative to rect" + (let [i2 (ctsi/set-overlay-pos-type interaction-rect :top-center base-frame objects) + overlay-pos (ctsi/calc-overlay-position i2 rect base-frame overlay-frame frame-offset)] + (t/is (= (:x overlay-pos) 25)) + (t/is (= (:y overlay-pos) 15)))) + + (t/testing "Overlay top-right relative to rect" + (let [i2 (ctsi/set-overlay-pos-type interaction-rect :top-right base-frame objects) + overlay-pos (ctsi/calc-overlay-position i2 rect base-frame overlay-frame frame-offset)] + (t/is (= (:x overlay-pos) 35)) + (t/is (= (:y overlay-pos) 15)))) + + (t/testing "Overlay bottom-left relative to rect" + (let [i2 (ctsi/set-overlay-pos-type interaction-rect :bottom-left base-frame objects) + overlay-pos (ctsi/calc-overlay-position i2 rect base-frame overlay-frame frame-offset)] + (t/is (= (:x overlay-pos) 15)) + (t/is (= (:y overlay-pos) 45)))) + + (t/testing "Overlay bottom-center relative to rect" + (let [i2 (ctsi/set-overlay-pos-type interaction-rect :bottom-center base-frame objects) + overlay-pos (ctsi/calc-overlay-position i2 rect base-frame overlay-frame frame-offset)] + (t/is (= (:x overlay-pos) 25)) + (t/is (= (:y overlay-pos) 45)))) + + (t/testing "Overlay bottom-right relative to rect" + (let [i2 (ctsi/set-overlay-pos-type interaction-rect :bottom-right base-frame objects) + overlay-pos (ctsi/calc-overlay-position i2 rect base-frame overlay-frame frame-offset)] + (t/is (= (:x overlay-pos) 35)) + (t/is (= (:y overlay-pos) 45)))) + + (t/testing "Overlay center relative to rect" + (let [i2 (ctsi/set-overlay-pos-type interaction-rect :center base-frame objects) + overlay-pos (ctsi/calc-overlay-position i2 rect base-frame overlay-frame frame-offset)] + (t/is (= (:x overlay-pos) 25)) + (t/is (= (:y overlay-pos) 30)))) + + (t/testing "Overlay manual relative to rect" + (let [i2 (-> interaction-rect + (ctsi/set-overlay-pos-type :manual base-frame objects) + (ctsi/set-overlay-position (gpt/point 12 62))) + overlay-pos (ctsi/calc-overlay-position i2 rect base-frame overlay-frame frame-offset)] + (t/is (= (:x overlay-pos) 17)) + (t/is (= (:y overlay-pos) 67)))))) (t/deftest animation-checks diff --git a/frontend/src/app/main/ui/workspace/viewport/interactions.cljs b/frontend/src/app/main/ui/workspace/viewport/interactions.cljs index 447974d31..4ba7555ba 100644 --- a/frontend/src/app/main/ui/workspace/viewport/interactions.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/interactions.cljs @@ -225,13 +225,18 @@ marker-x (+ (:x orig-frame) (:x position)) marker-y (+ (:y orig-frame) (:y position)) width (:width dest-shape) - height (:height dest-shape)] + height (:height dest-shape) + dest-x (:x dest-shape) + dest-y (:y dest-shape)] [:g {:on-mouse-down start-move-position :on-mouse-enter #(reset! hover-disabled? true) :on-mouse-leave #(reset! hover-disabled? false)} + [:use {:href (str "#shape-" (:id dest-shape)) + :x (- marker-x dest-x) + :y (- marker-y dest-y)}] [:path {:stroke "var(--color-primary)" :fill "var(--color-black)" - :fill-opacity 0.3 + :fill-opacity 0.5 :stroke-width 1 :d (dm/str "M" marker-x " " marker-y " " "h " width " "