✨ Show board miniature in manual overlay setting

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)

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))

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

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 " "