Merge branch 'develop' of github.com:penpot/penpot into develop

common/src/app/common/pages/spec.cljc

@@ -185,9 +185,9 @@
 
 ;; Interactions
 
-(s/def :internal.shape.interaction/event-type #{:click}) ; In the future we will have more options
+(s/def :internal.shape.interaction/event-type #{:click :hover})
-(s/def :internal.shape.interaction/action-type #{:navigate})
+(s/def :internal.shape.interaction/action-type #{:navigate :open-overlay :close-overlay})
-(s/def :internal.shape.interaction/destination ::uuid)
+(s/def :internal.shape.interaction/destination (s/nilable ::uuid))
 
 (s/def :internal.shape/interaction
   (s/keys :req-un [:internal.shape.interaction/event-type
@@ -197,6 +197,11 @@
 (s/def :internal.shape/interactions
   (s/coll-of :internal.shape/interaction :kind vector?))
 
+(def default-interaction
+  {:event-type :click
+   :action-type :navigate
+   :destination nil})
+
 ;; Size constraints
 
 (s/def :internal.shape/constraints-h #{:left :right :leftright :center :scale})

frontend/resources/styles/main/partials/sidebar-element-options.scss

@@ -226,6 +226,10 @@
     color: $color-gray-20;
     font-size: $fs11;
     width: 64px;
+
+    &.wide {
+      width: 110px;
+    }
   }
 
   .lock-size {

frontend/resources/styles/main/partials/sidebar-interactions.scss

@@ -22,3 +22,28 @@
     width: 32px;
   }
 }
+
+.interactions-summary {
+  width: 100%;
+
+  .trigger-name {
+    font-size: $fs12;
+    color: $color-white;
+  }
+
+  .action-summary {
+    font-size: $fs11;
+    color: $color-gray-20;
+  }
+}
+
+.interactions-element {
+  display: flex;
+  align-items: center;
+
+  .element-label {
+    color: $color-gray-20;
+    font-size: $fs11;
+    width: 64px;
+  }
+}

frontend/src/app/main/data/viewer.cljs

@@ -31,6 +31,7 @@
    :comments-show :unresolved
    :selected #{}
    :collapsed #{}
+   :overlays []
    :hover nil})
 
 (declare fetch-comment-threads)
@@ -286,7 +287,7 @@
     (update [_ state]
       (assoc-in state [:viewer-local :interactions-show?] false))))
 
-;; --- Navigation
+;; --- Navigation inside page
 
 (defn go-to-frame-by-index
   [index]
@@ -324,6 +325,35 @@
             qparams (:query-params route)]
         (rx/of (rt/nav :viewer pparams (assoc qparams :section section)))))))
 
+;; --- Overlays
+
+(defn open-overlay
+  [frame-id]
+  (us/verify ::us/uuid frame-id)
+  (ptk/reify ::open-overlay
+    ptk/UpdateEvent
+    (update [_ state]
+      (let [route    (:route state)
+            qparams  (:query-params route)
+            page-id  (:page-id qparams)
+            frames   (get-in state [:viewer :pages page-id :frames])
+            frame    (d/seek #(= (:id %) frame-id) frames)
+            overlays (get-in state [:viewer-local :overlays])]
+        (if-not (some #(= % frame) overlays)
+          (update-in state [:viewer-local :overlays] conj frame)
+          state)))))
+
+(defn close-overlay
+  [frame-id]
+  (ptk/reify ::close-overlay
+    ptk/UpdateEvent
+    (update [_ state]
+      (update-in state [:viewer-local :overlays]
+                 (fn [overlays]
+                   (remove #(= (:id %) frame-id) overlays))))))
+
+;; --- Objects selection
+
 (defn deselect-all []
   (ptk/reify ::deselect-all
     ptk/UpdateEvent
@@ -397,7 +427,7 @@
     (update [_ state]
       (assoc-in state [:viewer-local :hover] (when hover? id)))))
 
-;; --- NAV
+;; --- Navigation outside page
 
 (defn go-to-dashboard
   []

frontend/src/app/main/data/workspace.cljs

@@ -1751,12 +1751,16 @@
 ;; Interactions
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
-(declare move-create-interaction)
+(declare move-edit-interaction)
-(declare finish-create-interaction)
+(declare finish-edit-interaction)
+
+(defn start-edit-interaction
+  [index]
+  (ptk/reify ::start-edit-interaction
+    ptk/UpdateEvent
+    (update [_ state]
+      (assoc-in state [:workspace-local :editing-interaction-index] index))
 
-(defn start-create-interaction
-  []
-  (ptk/reify ::start-create-interaction
     ptk/WatchEvent
     (watch [_ state stream]
       (let [initial-pos @ms/mouse-position
@@ -1766,12 +1770,12 @@
           (rx/concat
             (->> ms/mouse-position
                  (rx/take-until stopper)
-                 (rx/map #(move-create-interaction initial-pos %)))
+                 (rx/map #(move-edit-interaction initial-pos %)))
-            (rx/of (finish-create-interaction initial-pos))))))))
+            (rx/of (finish-edit-interaction index initial-pos))))))))
 
-(defn move-create-interaction
+(defn move-edit-interaction
   [initial-pos position]
-  (ptk/reify ::move-create-interaction
+  (ptk/reify ::move-edit-interaction
     ptk/UpdateEvent
     (update [_ state]
       (let [page-id (:current-page-id state)
@@ -1785,12 +1789,13 @@
           (not= position initial-pos) (assoc-in [:workspace-local :draw-interaction-to] position)
           (not= start-frame end-frame) (assoc-in [:workspace-local :draw-interaction-to-frame] end-frame))))))
 
-(defn finish-create-interaction
+(defn finish-edit-interaction
-  [initial-pos]
+  [index initial-pos]
-  (ptk/reify ::finish-create-interaction
+  (ptk/reify ::finish-edit-interaction
     ptk/UpdateEvent
     (update [_ state]
       (-> state
+          (assoc-in [:workspace-local :editing-interaction-index] nil)
           (assoc-in [:workspace-local :draw-interaction-to] nil)
           (assoc-in [:workspace-local :draw-interaction-to-frame] nil)))
 
@@ -1804,16 +1809,27 @@
             shape-id (-> state wsh/lookup-selected first)
             shape    (get objects shape-id)]
 
-        (when-not (= position initial-pos)
+        (when (and shape (not (= position initial-pos)))
-          (if (and frame shape-id
+          (rx/of (dch/update-shapes [shape-id]
-                   (not= (:id frame) (:id shape))
+                   (fn [shape]
-                   (not= (:id frame) (:frame-id shape)))
+                     (update shape :interactions
-            (rx/of (update-shape shape-id
+                             (fn [interactions]
-                                 {:interactions [{:event-type :click
+                               (if-not frame
-                                                  :action-type :navigate
+                                 ;; Drop in an empty space -> remove interaction
-                                                  :destination (:id frame)}]}))
+                                 (if index
-            (rx/of (update-shape shape-id
+                                   (into (subvec interactions 0 index)
-                                 {:interactions []}))))))))
+                                         (subvec interactions (inc index)))
+                                   interactions)
+                                 (let [frame (if (or (= (:id frame) (:id shape))
+                                                     (= (:id frame) (:frame-id shape)))
+                                               nil ;; Drop onto self frame -> set destination to none
+                                               frame)]
+                                   ;; Update or create interaction
+                                   (if index
+                                     (assoc-in interactions [index :destination] (:id frame))
+                                     (conj (or interactions [])
+                                           (assoc spec/default-interaction
+                                                  :destination (:id frame))))))))))))))))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; CANVAS OPTIONS

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

@@ -13,6 +13,7 @@
    [app.main.store :as st]
    [app.main.ui.hooks :as hooks]
    [app.main.ui.icons :as i]
+   [app.main.ui.shapes.filters :as filters]
    [app.main.ui.share-link]
    [app.main.ui.static :as static]
    [app.main.ui.viewer.comments :refer [comments-layer]]
@@ -27,9 +28,15 @@
 
 (defn- calculate-size
   [frame zoom]
-  {:width  (* (:width frame) zoom)
+  (let [{:keys [_ _ width height]} (filters/get-filters-bounds frame)]
-   :height (* (:height frame) zoom)
+    {:width  (* width zoom)
-   :vbox   (str "0 0 " (:width frame 0) " " (:height frame 0))})
+     :height (* height zoom)
+     :vbox   (str "0 0 " width " " height)}))
+
+(defn- position-overlay
+  [size size-over]
+  {:x (/ (- (:width size) (:width size-over)) 2)
+   :y (/ (- (:height size) (:height size-over)) 2)})
 
 (mf/defc viewer
   [{:keys [params data]}]
@@ -137,7 +144,24 @@
               :page page
               :file file
               :users users
-              :local local}]]))]]]))
+              :local local}]
+
+            (for [overlay (:overlays local)]
+              (let [size-over (calculate-size overlay zoom)
+                    pos-over  (position-overlay size size-over)]
+                [:div.viewport-container
+                 {:style {:width (:width size-over)
+                          :height (:height size-over)
+                          :position "absolute"
+                          :left (:x pos-over)
+                          :top (:y pos-over)}}
+                 [:& interactions/viewport
+                  {:frame overlay
+                   :size size-over
+                   :page page
+                   :file file
+                   :users users
+                   :local local}]]))]))]]]))
 
 ;; --- Component: Viewer Page
 

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

@@ -28,14 +28,27 @@
    [rumext.alpha :as mf]))
 
 (defn on-mouse-down
-  [event interactions]
+  [event shape]
-  (let [interaction (first (filter #(= (:event-type %) :click) interactions))]
+  (doseq [interaction (->> (:interactions shape)
+                           (filter #(= (:event-type %) :click)))]
+
     (case (:action-type interaction)
       :navigate
       (let [frame-id (:destination interaction)]
         (dom/stop-propagation event)
         (st/emit! (dv/go-to-frame frame-id)))
 
+      :open-overlay
+      (let [frame-id (:destination interaction)]
+        (dom/stop-propagation event)
+        (st/emit! (dv/open-overlay frame-id)))
+
+      :close-overlay
+      (let [frame-id (or (:destination interaction)
+                         (:frame-id shape))]
+        (dom/stop-propagation event)
+        (st/emit! (dv/close-overlay frame-id)))
+
       nil)))
 
 (mf/defc interaction
@@ -61,17 +74,15 @@
     {::mf/wrap-props false}
     [props]
     (let [shape   (unchecked-get props "shape")
-          objects (unchecked-get props "objects")
           childs  (unchecked-get props "childs")
           frame   (unchecked-get props "frame")
 
-          interactions (->> (:interactions shape)
+          interactions (:interactions shape)
-                            (filter #(contains? objects (:destination %))))
 
           on-mouse-down (mf/use-callback
-                         (mf/deps interactions)
+                         (mf/deps shape)
                          (fn [event]
-                           (on-mouse-down event interactions)))
+                           (on-mouse-down event shape)))
 
           svg-element? (and (= :svg-raw (:type shape))
                             (not= :svg (get-in shape [:content :tag])))]

frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs

@@ -8,70 +8,148 @@
   (:require
    [app.common.data :as d]
    [app.common.pages :as cp]
+   [app.common.pages.spec :as spec]
+   [app.common.uuid :as uuid]
    [app.main.data.workspace :as dw]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.ui.components.dropdown :refer [dropdown]]
    [app.main.ui.icons :as i]
+   [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [rumext.alpha :as mf]))
 
-(mf/defc interactions-menu
+(defn- event-type-names
-  [{:keys [shape] :as props}]
+  []
-  (let [objects     (deref refs/workspace-page-objects)
+  {:click (tr "workspace.options.interaction-on-click")
-        interaction (first (:interactions shape))  ; TODO: in the
+   :hover (tr "workspace.options.interaction-while-hovering")})
-                                                   ; future we may
-                                                   ; have several
-                                                   ; interactions in
-                                                   ; one shape
 
+(defn- event-type-name
+  [interaction]
+  (get (event-type-names) (:event-type interaction) "--"))
+
+(defn- action-type-names
+  []
+  {:navigate (tr "workspace.options.interaction-navigate-to")
+   :open-overlay (tr "workspace.options.interaction-open-overlay")
+   :close-overlay (tr "workspace.options.interaction-close-overlay")})
+
+(defn- action-summary
+  [interaction destination]
+  (case (:action-type interaction)
+    :navigate (tr "workspace.options.interaction-navigate-to-dest"
+                  (get destination :name (tr "workspace.options.interaction-none")))
+    :open-overlay (tr "workspace.options.interaction-open-overlay-dest"
+                      (get destination :name (tr "workspace.options.interaction-none")))
+    :close-overlay (tr "workspace.options.interaction-close-overlay-dest"
+                       (get destination :name (tr "workspace.options.interaction-self")))
+    "--"))
+
+(mf/defc interaction-entry
+  [{:keys [index shape interaction update-interaction remove-interaction]}]
+  (let [objects     (deref refs/workspace-page-objects)
         destination (get objects (:destination interaction))
         frames      (mf/use-memo (mf/deps objects)
                                  #(cp/select-frames objects))
 
-        show-frames-dropdown? (mf/use-state false)
+        extended-open? (mf/use-state false)
 
-        on-set-blur #(reset! show-frames-dropdown? false)
+        change-event-type
-        on-navigate #(when destination
+        (fn [event]
-                       (st/emit! (dw/select-shapes (d/ordered-set (:id destination)))))
+          (let [value (-> event dom/get-target dom/get-value d/read-string)]
+            (update-interaction index #(assoc % :event-type value))))
 
-        on-select-destination
+        change-action-type
-        (fn [dest]
+        (fn [event]
-          (if (nil? dest)
+          (let [value (-> event dom/get-target dom/get-value d/read-string)]
-            (st/emit! (dw/update-shape (:id shape) {:interactions []}))
+            (update-interaction index #(assoc % :action-type value))))
-            (st/emit! (dw/update-shape (:id shape) {:interactions [{:event-type :click
+
-                                                                    :action-type :navigate
+        change-destination
-                                                                    :destination dest}]}))))]
+        (fn [event]
+          (let [value (-> event dom/get-target dom/get-value)
+                value (when (not= value "") (uuid/uuid value))]
+            (update-interaction index #(assoc % :destination value))))]
 
-    (if (not shape)
     [:*
-       [:div.interactions-help-icon i/interaction]
+     [:div.element-set-options-group
-       [:div.interactions-help (tr "workspace.options.select-a-shape")]
+      [:div.element-set-actions-button {:on-click #(swap! extended-open? not)}
-       [:div.interactions-help-icon i/play]
+       i/actions]
-       [:div.interactions-help (tr "workspace.options.use-play-button")]]
+      [:div.interactions-summary
-
+       [:div.trigger-name (event-type-name interaction)]
-     [:div.element-set {:on-blur on-set-blur}
+       [:div.action-summary (action-summary interaction destination)]]
-       [:div.element-set-title
+      [:div.elemen-set-actions {:on-click #(remove-interaction index)}
-        [:span (tr "workspace.options.navigate-to")]]
+       [:div.element-set-actions-button i/minus]]]
+     (when @extended-open?
+       [:div.element-set
         [:div.element-set-content
-        [:div.row-flex
+         [:div.interactions-element
-         [:div.custom-select.flex-grow {:on-click #(reset! show-frames-dropdown? true)}
+            [:span.element-set-subtitle.wide (tr "workspace.options.interaction-trigger")]
-          (if destination
+            [:select.input-select
-            [:span (:name destination)]
+             {:default-value (str (:event-type interaction))
-            [:span (tr "workspace.options.select-artboard")])
+              :on-change change-event-type}
-          [:span.dropdown-button i/arrow-down]
+             (for [[value name] (event-type-names)]
-           [:& dropdown {:show @show-frames-dropdown?
+               [:option {:value (str value)} name])]]
-                         :on-close #(reset! show-frames-dropdown? false)}
+         [:div.interactions-element
-            [:ul.custom-select-dropdown
+            [:span.element-set-subtitle.wide (tr "workspace.options.interaction-action")]
-             [:li.dropdown-separator
+            [:select.input-select
-              {:on-click #(on-select-destination nil)}
+             {:default-value (str (:action-type interaction))
-              (tr "workspace.options.none")]
+              :on-change change-action-type}
-
+             (for [[value name] (action-type-names)]
+               [:option {:value (str value)} name])]]
+         [:div.interactions-element
+            [:span.element-set-subtitle.wide (tr "workspace.options.interaction-destination")]
+            [:select.input-select
+             {:default-value (str (:destination interaction))
+              :on-change change-destination}
+             [:option {:value ""} (tr "workspace.options.interaction-none")]
              (for [frame frames]
                (when (and (not= (:id frame) (:id shape)) ; A frame cannot navigate to itself
                           (not= (:id frame) (:frame-id shape))) ; nor a shape to its container frame
-                 [:li {:key (:id frame)
+                 [:option {:value (str (:id frame))} (:name frame)]))]]]])]))
-                       :on-click #(on-select-destination (:id frame))}
+
-                  (:name frame)]))]]]
+(mf/defc interactions-menu
-         [:span.navigate-icon {:style {:visibility (when (not destination) "hidden")}
+  [{:keys [shape] :as props}]
-                               :on-click on-navigate} i/navigate]]]])))
+  (let [interactions (get shape :interactions [])
+
+        add-interaction
+        (fn [_]
+          (let [new-interactions
+                (conj interactions (update spec/default-interaction :event-type identity))]
+            (st/emit! (dw/update-shape (:id shape) {:interactions new-interactions}))))
+
+        remove-interaction
+        (fn [index]
+          (let [new-interactions
+                (into (subvec interactions 0 index)
+                      (subvec interactions (inc index)))]
+            (st/emit! (dw/update-shape (:id shape) {:interactions new-interactions}))))
+
+        update-interaction
+        (fn [index update-fn]
+          (let [new-interactions (update interactions index update-fn)]
+            (st/emit! (dw/update-shape (:id shape) {:interactions new-interactions})))) ]
+
+    [:div.element-set
+     (when shape
+       [:div.element-set-title
+        [:span (tr "workspace.options.interactions")]
+        [:div.add-page {:on-click add-interaction}
+         i/plus]])
+
+     [:div.element-set-content
+      (when (= (count interactions) 0)
+        [:*
+         (when shape
+           [:*
+            [:div.interactions-help-icon i/plus]
+            [:div.interactions-help (tr "workspace.options.add-interaction")]])
+         [:div.interactions-help-icon i/interaction]
+         [:div.interactions-help (tr "workspace.options.select-a-shape")]
+         [:div.interactions-help-icon i/play]
+         [:div.interactions-help (tr "workspace.options.use-play-button")]])]
+     (for [[index interaction] (d/enumerate interactions)]
+       [:& interaction-entry {:index index
+                              :shape shape
+                              :interaction interaction
+                              :update-interaction update-interaction
+                              :remove-interaction remove-interaction}])]))
+

frontend/src/app/main/ui/workspace/viewport/interactions.cljs

@@ -7,24 +7,20 @@
 (ns app.main.ui.workspace.viewport.interactions
   "Visually show shape interactions in workspace"
   (:require
+   [app.common.data :as d]
    [app.main.data.workspace :as dw]
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.workspace.viewport.outline :refer [outline]]
    [app.util.dom :as dom]
    [cuerdas.core :as str]
-   [rumext.alpha :as mf]
+   [rumext.alpha :as mf]))
-   ))
-
-(defn- get-click-interaction
-  [shape]
-  (first (filter #(= (:event-type %) :click) (:interactions shape))))
 
 (defn- on-mouse-down
-  [event {:keys [id] :as shape}]
+  [event index {:keys [id] :as shape}]
   (dom/stop-propagation event)
   (st/emit! (dw/select-shape id))
-  (st/emit! (dw/start-create-interaction)))
+  (st/emit! (dw/start-edit-interaction index)))
 
 (defn connect-to-shape
   "Calculate the best position to draw an interaction line
@@ -84,38 +80,56 @@
 
 
 (mf/defc interaction-marker
-  [{:keys [x y arrow-dir zoom] :as props}]
+  [{:keys [x y stroke action-type arrow-dir zoom] :as props}]
-  (let [arrow-pdata (case arrow-dir
+  (let [icon-pdata (case action-type
+                     :navigate (case arrow-dir
                                  :right "M -5 0 l 8 0 l -4 -4 m 4 4 l -4 4"
                                  :left "M 5 0 l -8 0 l 4 -4 m -4 4 l 4 4"
-                      [])
+                                 nil)
+                     :open-overlay (case arrow-dir
+                                     ;; TODO: have a different icon for open overlay?
+                                     :right "M -5 0 l 8 0 l -4 -4 m 4 4 l -4 4"
+                                     :left "M 5 0 l -8 0 l 4 -4 m -4 4 l 4 4"
+                                     nil)
+
+                     :close-overlay "M -4 -4 L 4 4 M -4 4 L 4 -4"
+
+                     nil)
         inv-zoom (/ 1 zoom)]
     [:*
       [:circle {:cx 0
                 :cy 0
                 :r 8
-                :stroke "#31EFB8"
+                :stroke stroke
                 :stroke-width 2
                 :fill "#FFFFFF"
                 :transform (str
                              "scale(" inv-zoom ", " inv-zoom ") "
                              "translate(" (* zoom x) ", " (* zoom y) ")")}]
-      (when arrow-dir
+      (when icon-pdata
-        [:path {:stroke "#31EFB8"
+        [:path {:stroke stroke
                 :fill "none"
                 :stroke-width 2
-                :d arrow-pdata
+                :d icon-pdata
                 :transform (str
                              "scale(" inv-zoom ", " inv-zoom ") "
                              "translate(" (* zoom x) ", " (* zoom y) ")")}])]))
 
 
 (mf/defc interaction-path
-  [{:keys [orig-shape dest-shape dest-point selected? zoom] :as props}]
+  [{:keys [index orig-shape dest-shape dest-point selected? action-type zoom] :as props}]
   (let [[orig-pos orig-x orig-y dest-pos dest-x dest-y]
-        (if dest-shape
+        (cond
+          dest-shape
           (connect-to-shape orig-shape dest-shape)
-          (connect-to-point orig-shape dest-point))
+
+          dest-point
+          (connect-to-point orig-shape dest-point)
+
+          :else
+          (connect-to-point orig-shape
+                            {:x (+ (:x2 (:selrect orig-shape)) 100)
+                             :y (- (:y1 (:selrect orig-shape)) 50)}))
 
         orig-dx (if (= orig-pos :right) 100 -100)
         dest-dx (if (= dest-pos :right) 100 -100)
@@ -126,25 +140,38 @@
         arrow-dir (if (= dest-pos :left) :right :left)]
 
     (if-not selected?
+      [:g {:on-mouse-down #(on-mouse-down % index orig-shape)}
        [:path {:stroke "#B1B2B5"
                :fill "none"
                :pointer-events "visible"
                :stroke-width (/ 2 zoom)
-              :d pdata
+               :d pdata}]
-              :on-mouse-down #(on-mouse-down % orig-shape)}]
+       (when (and (not dest-shape)
+                  (= action-type :close-overlay))
+         [:& interaction-marker {:index index
+                                 :x dest-x
+                                 :y dest-y
+                                 :stroke "#B1B2B5"
+                                 :action-type action-type
+                                 :arrow-dir arrow-dir
+                                 :zoom zoom}])]
 
-      [:g {:on-mouse-down #(on-mouse-down % orig-shape)}
+      [:g {:on-mouse-down #(on-mouse-down % index orig-shape)}
        [:path {:stroke "#31EFB8"
                :fill "none"
                :pointer-events "visible"
                :stroke-width (/ 2 zoom)
                :d pdata}]
-       [:& interaction-marker {:x orig-x
+       [:& interaction-marker {:index index
+                               :x orig-x
                                :y orig-y
-                               :arrow-dir nil
+                               :stroke "#31EFB8"
                                :zoom zoom}]
-       [:& interaction-marker {:x dest-x
+       [:& interaction-marker {:index index
+                               :x dest-x
                                :y dest-y
+                               :stroke "#31EFB8"
+                               :action-type action-type
                                :arrow-dir arrow-dir
                                :zoom zoom}]
 
@@ -154,13 +181,15 @@
 
 
 (mf/defc interaction-handle
-  [{:keys [shape zoom] :as props}]
+  [{:keys [index shape zoom] :as props}]
   (let [shape-rect (:selrect shape)
         handle-x (+ (:x shape-rect) (:width shape-rect))
         handle-y (+ (:y shape-rect) (/ (:height shape-rect) 2))]
-    [:g {:on-mouse-down #(on-mouse-down % shape)}
+    [:g {:on-mouse-down #(on-mouse-down % index shape)}
      [:& interaction-marker {:x handle-x
                              :y handle-y
+                             :stroke "#31EFB8"
+                             :action-type :navigate
                              :arrow-dir :right
                              :zoom zoom}]]))
 
@@ -171,8 +200,9 @@
         zoom (mf/deref refs/selected-zoom)
         current-transform (:transform local)
         objects (mf/deref refs/workspace-page-objects)
-        active-shapes (filter #(first (get-click-interaction %)) (vals objects))
+        active-shapes (filter #(seq (:interactions %)) (vals objects))
         selected-shapes (map #(get objects %) selected)
+        editing-interaction-index (:editing-interaction-index local)
         draw-interaction-to (:draw-interaction-to local)
         draw-interaction-to-frame (:draw-interaction-to-frame local)
         first-selected (first selected-shapes)]
@@ -180,39 +210,46 @@
     [:g.interactions
      [:g.non-selected
       (for [shape active-shapes]
-        (let [interaction (get-click-interaction shape)
+        (for [[index interaction] (d/enumerate (:interactions shape))]
-              dest-shape (get objects (:destination interaction))
+          (let [dest-shape (get objects (:destination interaction))
                 selected? (contains? selected (:id shape))]
-          (when-not (or selected? (not dest-shape))
+            (when-not selected?
-            [:& interaction-path {:key (:id shape)
+              [:& interaction-path {:key (str (:id shape) "-" index)
+                                    :index index
                                     :orig-shape shape
                                     :dest-shape dest-shape
                                     :selected selected
                                     :selected? false
-                                  :zoom zoom}])))]
+                                    :action-type (:action-type interaction)
+                                    :zoom zoom}]))))]
 
      [:g.selected
-      (if (and draw-interaction-to first-selected)
+      (when (and draw-interaction-to first-selected)
         [:& interaction-path {:key "interactive"
+                              :index nil
                               :orig-shape first-selected
                               :dest-point draw-interaction-to
                               :dest-shape draw-interaction-to-frame
                               :selected? true
-                              :zoom zoom}]
+                              :action-type :navigate
-
+                              :zoom zoom}])
       (for [shape selected-shapes]
-          (let [interaction (get-click-interaction shape)
+        (if (seq (:interactions shape))
-                dest-shape (get objects (:destination interaction))]
+          (for [[index interaction] (d/enumerate (:interactions shape))]
-            (if dest-shape
+            (when-not (= index editing-interaction-index)
-              [:& interaction-path {:key (:id shape)
+              (let [dest-shape (get objects (:destination interaction))]
+                [:& interaction-path {:key (str (:id shape) "-" index)
+                                      :index index
                                       :orig-shape shape
                                       :dest-shape dest-shape
                                       :selected selected
                                       :selected? true
-                                    :zoom zoom}]
+                                      :action-type (:action-type interaction)
+                                      :zoom zoom}])))
           (when (not (#{:move :rotate} current-transform))
             [:& interaction-handle {:key (:id shape)
+                                    :index nil
                                     :shape shape
                                     :selected selected
-                                        :zoom zoom}])))))]]))
+                                    :zoom zoom}])))]]))
 

frontend/translations/ca.po

@@ -2152,14 +2152,6 @@ msgstr "Agrupa les capes"
 msgid "workspace.options.layer-options.title.multiple"
 msgstr "Capes seleccionades"
 
-#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
-msgid "workspace.options.navigate-to"
-msgstr "Vés a"
-
-#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
-msgid "workspace.options.none"
-msgstr "Cap"
-
 #: src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs, src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
 msgid "workspace.options.position"
 msgstr "Posició"

frontend/translations/de.po

@@ -1995,14 +1995,6 @@ msgstr "Ebenen gruppieren"
 msgid "workspace.options.layer-options.title.multiple"
 msgstr "Ausgewählte Ebenen"
 
-#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
-msgid "workspace.options.navigate-to"
-msgstr "Navigiere zu"
-
-#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
-msgid "workspace.options.none"
-msgstr "Keine"
-
 #: src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs, src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
 msgid "workspace.options.position"
 msgstr "Position"

frontend/translations/el.po

@@ -1832,14 +1832,6 @@ msgstr "στρώματα Ομάδα"
 msgid "workspace.options.layer-options.title.multiple"
 msgstr "Επιλεγμένα επίπεδα"
 
-#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
-msgid "workspace.options.navigate-to"
-msgstr "Μεταβείτε στο"
-
-#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
-msgid "workspace.options.none"
-msgstr "Κανένας"
-
 #: src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs, src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
 msgid "workspace.options.position"
 msgstr "Θέση"

frontend/translations/en.po

@@ -2374,14 +2374,6 @@ msgstr "Group layers"
 msgid "workspace.options.layer-options.title.multiple"
 msgstr "Selected layers"
 
-#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
-msgid "workspace.options.navigate-to"
-msgstr "Navigate to"
-
-#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
-msgid "workspace.options.none"
-msgstr "None"
-
 #: src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs, src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
 msgid "workspace.options.position"
 msgstr "Position"
@@ -2405,6 +2397,66 @@ msgstr "Single corners"
 msgid "workspace.options.rotation"
 msgstr "Rotation"
 
+#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
+msgid "workspace.options.add-interaction"
+msgstr "Click the + button to add interactions."
+
+#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
+msgid "workspace.options.interaction-action"
+msgstr "Action"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
+msgid "workspace.options.interaction-close-overlay"
+msgstr "Close overlay"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
+msgid "workspace.options.interaction-close-overlay-dest"
+msgstr "Close overlay: %s"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
+msgid "workspace.options.interaction-destination"
+msgstr "Destination"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
+msgid "workspace.options.interaction-navigate-to"
+msgstr "Navigate to"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
+msgid "workspace.options.interaction-navigate-to-dest"
+msgstr "Navigate to: %s"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
+msgid "workspace.options.interaction-none"
+msgstr "none"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
+msgid "workspace.options.interaction-on-click"
+msgstr "On Click"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
+msgid "workspace.options.interaction-open-overlay"
+msgstr "Open overlay"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
+msgid "workspace.options.interaction-open-overlay-dest"
+msgstr "Open overlay: %s"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
+msgid "workspace.options.interaction-self"
+msgstr "self"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
+msgid "workspace.options.interaction-trigger"
+msgstr "Trigger"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
+msgid "workspace.options.interaction-while-hovering"
+msgstr "While Hovering"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
+msgid "workspace.options.interactions"
+msgstr "Interactions"
+
 #: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
 msgid "workspace.options.select-a-shape"
 msgstr "Select a shape, artboard or group to drag a connection to other artboard."

frontend/translations/es.po

@@ -2257,14 +2257,6 @@ msgstr "Capas de grupo"
 msgid "workspace.options.layer-options.title.multiple"
 msgstr "Capas seleccionadas"
 
-#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
-msgid "workspace.options.navigate-to"
-msgstr "Navegar a"
-
-#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
-msgid "workspace.options.none"
-msgstr "Ninguno"
-
 #: src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs, src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
 msgid "workspace.options.position"
 msgstr "Posición"
@@ -2288,6 +2280,66 @@ msgstr "Esquinas individuales"
 msgid "workspace.options.rotation"
 msgstr "Rotación"
 
+#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
+msgid "workspace.options.add-interaction"
+msgstr "Pulsa el botón + para añadir interacciones."
+
+#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
+msgid "workspace.options.interaction-action"
+msgstr "Acción"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
+msgid "workspace.options.interaction-close-overlay"
+msgstr "Close overlay"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
+msgid "workspace.options.interaction-close-overlay-dest"
+msgstr "Close overlay: %s"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
+msgid "workspace.options.interaction-destination"
+msgstr "Destino"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
+msgid "workspace.options.interaction-navigate-to"
+msgstr "Navigate to"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
+msgid "workspace.options.interaction-navigate-to-dest"
+msgstr "Navigate to: %s"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
+msgid "workspace.options.interaction-none"
+msgstr "none"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
+msgid "workspace.options.interaction-on-click"
+msgstr "On Click"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
+msgid "workspace.options.interaction-open-overlay"
+msgstr "Open overlay"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
+msgid "workspace.options.interaction-open-overlay-dest"
+msgstr "Open overlay: %s"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
+msgid "workspace.options.interaction-self"
+msgstr "self"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
+msgid "workspace.options.interaction-trigger"
+msgstr "Trigger"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
+msgid "workspace.options.interaction-while-hovering"
+msgstr "While Hovering"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
+msgid "workspace.options.interactions"
+msgstr "Interacciones"
+
 #: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
 msgid "workspace.options.select-a-shape"
 msgstr ""

frontend/translations/fr.po

@@ -2157,14 +2157,6 @@ msgstr "Grouper les calques"
 msgid "workspace.options.layer-options.title.multiple"
 msgstr "Calques sélectionnés"
 
-#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
-msgid "workspace.options.navigate-to"
-msgstr "Naviguer vers"
-
-#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
-msgid "workspace.options.none"
-msgstr "Aucun"
-
 #: src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs, src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
 msgid "workspace.options.position"
 msgstr "Position"

frontend/translations/pt_BR.po

@@ -1662,14 +1662,6 @@ msgstr "Camadas do grupo"
 msgid "workspace.options.layer-options.title.multiple"
 msgstr "Camadas selecionadas"
 
-#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
-msgid "workspace.options.navigate-to"
-msgstr "Navegar para"
-
-#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
-msgid "workspace.options.none"
-msgstr "Nenhum"
-
 #: src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs, src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
 msgid "workspace.options.position"
 msgstr "Posição"

frontend/translations/ro.po

@@ -2048,14 +2048,6 @@ msgstr "Grupează layere"
 msgid "workspace.options.layer-options.title.multiple"
 msgstr "Layere selectate"
 
-#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
-msgid "workspace.options.navigate-to"
-msgstr "Navighează la"
-
-#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
-msgid "workspace.options.none"
-msgstr "Nici unul"
-
 #: src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs, src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
 msgid "workspace.options.position"
 msgstr "Poziţie"

frontend/translations/ru.po

@@ -957,14 +957,6 @@ msgstr "Заливка для группы"
 msgid "workspace.options.group-stroke"
 msgstr "Обводка для группы"
 
-#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
-msgid "workspace.options.navigate-to"
-msgstr "Перейти к"
-
-#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
-msgid "workspace.options.none"
-msgstr "Не задано"
-
 #: src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs, src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
 msgid "workspace.options.position"
 msgstr "Позиция"

frontend/translations/tr.po

@@ -2029,14 +2029,6 @@ msgstr "Katman grubu"
 msgid "workspace.options.layer-options.title.multiple"
 msgstr "Seçili katmanlar"
 
-#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
-msgid "workspace.options.navigate-to"
-msgstr "Git"
-
-#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
-msgid "workspace.options.none"
-msgstr "Hiç biri"
-
 #: src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs, src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
 msgid "workspace.options.position"
 msgstr "Konum"

frontend/translations/zh_CN.po

@@ -2101,14 +2101,6 @@ msgstr "图层成组"
 msgid "workspace.options.layer-options.title.multiple"
 msgstr "已选中的图层"
 
-#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
-msgid "workspace.options.navigate-to"
-msgstr "导航到"
-
-#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
-msgid "workspace.options.none"
-msgstr "无"
-
 #: src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs, src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
 msgid "workspace.options.position"
 msgstr "位置"