🐛 Fix problems with interactions in view mode

frontend/src/app/main/ui/viewer/shapes.cljs

@@ -7,37 +7,53 @@
 (ns app.main.ui.viewer.shapes
   "The main container for a frame in viewer mode"
   (:require
-   [rumext.alpha :as mf]
    [app.common.data :as d]
+   [app.common.geom.matrix :as gmt]
+   [app.common.geom.point :as gpt]
+   [app.common.geom.shapes :as geom]
    [app.common.pages :as cp]
    [app.main.data.viewer :as dv]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.ui.shapes.filters :as filters]
    [app.main.ui.shapes.circle :as circle]
+   [app.main.ui.shapes.filters :as filters]
    [app.main.ui.shapes.frame :as frame]
    [app.main.ui.shapes.group :as group]
-   [app.main.ui.shapes.svg-raw :as svg-raw]
    [app.main.ui.shapes.image :as image]
    [app.main.ui.shapes.path :as path]
    [app.main.ui.shapes.rect :as rect]
+   [app.main.ui.shapes.shape :refer [shape-container]]
+   [app.main.ui.shapes.svg-raw :as svg-raw]
    [app.main.ui.shapes.text :as text]
+   [app.util.dom :as dom]
    [app.util.object :as obj]
-   [app.common.geom.matrix :as gmt]
+   [rumext.alpha :as mf]))
-   [app.common.geom.point :as gpt]
-   [app.common.geom.shapes :as geom]
-   [app.main.ui.shapes.shape :refer [shape-container]]))
 
 (defn on-mouse-down
-  [event {:keys [interactions] :as shape}]
+  [event interactions]
   (let [interaction (first (filter #(= (:event-type %) :click) interactions))]
     (case (:action-type interaction)
       :navigate
       (let [frame-id (:destination interaction)]
+        (dom/stop-propagation event)
         (st/emit! (dv/go-to-frame frame-id)))
 
       nil)))
 
+(mf/defc interaction
+  [{:keys [shape interactions show-interactions?]}]
+  (let [{:keys [x y width height]} shape]
+    (when-not (empty? interactions)
+      [:rect {:x (- x 1)
+              :y (- y 1)
+              :width (+ width 2)
+              :height (+ height 2)
+              :fill "#31EFB8"
+              :stroke "#31EFB8"
+              :stroke-width (if show-interactions? 1 0)
+              :fill-opacity (if show-interactions? 0.2 0)
+              :style {:pointer-events "none"}}])))
+
 (defn generic-wrapper-factory
   "Wrap some svg shape and add interaction controls"
   [component show-interactions?]
@@ -45,35 +61,37 @@
     {::mf/wrap-props false}
     [props]
     (let [shape (unchecked-get props "shape")
+          objects (unchecked-get props "objects")
           {:keys [x y width height]} (:selrect shape)
+          frame? (= :frame (:type shape))
 
           childs (unchecked-get props "childs")
           frame  (unchecked-get props "frame")
 
+          interactions (->> (:interactions shape)
+                            (filter #(contains? objects (:destination %))))
+
           on-mouse-down (mf/use-callback
-                         (mf/deps shape)
+                         (mf/deps interactions)
-                         #(on-mouse-down % shape))
+                         (fn [event]
+                           (on-mouse-down event interactions)))
 
           svg-element? (and (= :svg-raw (:type shape))
                             (not= :svg (get-in shape [:content :tag])))]
 
       (if-not svg-element?
         [:> shape-container {:shape shape
-                             :on-mouse-down on-mouse-down
+                             :cursor (when-not (empty? interactions) "pointer")
-                             :cursor (when (seq (:interactions shape)) "pointer")}
+                             :on-mouse-down on-mouse-down}
+
          [:& component {:shape shape
                         :frame frame
                         :childs childs
                         :is-child-selected? true}]
-         (when (:interactions shape)
+
-           [:rect {:x (- x 1)
+         [:& interaction {:shape shape
-                   :y (- y 1)
+                          :interactions interactions
-                   :width (+ width 2)
+                          :show-interactions? show-interactions?}]]
-                   :height (+ height 2)
-                   :fill "#31EFB8"
-                   :stroke "#31EFB8"
-                   :stroke-width (if show-interactions? 1 0)
-                   :fill-opacity (if show-interactions? 0.2 0)}])]
 
         ;; Don't wrap svg elements inside a <g> otherwise some can break
         [:& component {:shape shape
@@ -127,6 +145,7 @@
             props  (obj/merge! #js {} props
                                #js {:shape shape
                                     :childs childs
+                                    :objects objects
                                     :show-interactions? show-interactions?})]
         [:> frame-wrapper props]))))
 
@@ -141,6 +160,7 @@
             childs (mapv #(get objects %) (:shapes shape))
             props  (obj/merge! #js {} props
                                #js {:childs childs
+                                    :objects objects
                                     :show-interactions? show-interactions?})]
         [:> group-wrapper props]))))
 
@@ -155,6 +175,7 @@
             childs (mapv #(get objects %) (:shapes shape))
             props  (obj/merge! #js {} props
                                #js {:childs childs
+                                    :objects objects
                                     :show-interactions? show-interactions?})]
         [:> svg-raw-wrapper props]))))
 
@@ -179,7 +200,8 @@
         (when (and shape (not (:hidden shape)))
           (let [shape (-> (geom/transform-shape shape)
                           (geom/translate-to-frame frame))
-                opts #js {:shape shape}]
+                opts #js {:shape shape
+                          :objects objects}]
             (case (:type shape)
               :frame   [:g.empty]
               :text    [:> text-wrapper opts]
@@ -187,8 +209,8 @@
               :path    [:> path-wrapper opts]
               :image   [:> image-wrapper opts]
               :circle  [:> circle-wrapper opts]
-              :group   [:> group-container {:shape shape :frame frame}]
+              :group   [:> group-container {:shape shape :frame frame :objects objects}]
-              :svg-raw [:> svg-raw-container {:shape shape :frame frame}])))))))
+              :svg-raw [:> svg-raw-container {:shape shape :frame frame :objects objects}])))))))
 
 (mf/defc frame-svg
   {::mf/wrap [mf/memo]}