✨ Add some enhancements in create interactions

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

@@ -208,7 +208,7 @@
     (watch [_ state stream]
       (let [stopper (rx/filter (ptk/type? ::flash-interactions) stream)]
         (->> (rx/of flash-done)
-             (rx/delay 1000)
+             (rx/delay 500)
              (rx/take-until stopper))))))
 
 (def flash-done

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

@@ -1452,10 +1452,13 @@
             objects (get-in state [:workspace-data page-id :objects])
             frame (dwc/get-frame-at-point objects position)
 
-            shape-id (first (get-in state [:workspace-local :selected]))]
+            shape-id (first (get-in state [:workspace-local :selected]))
+            shape (get objects shape-id)]
 
         (when-not (= position initial-pos)
-          (if (and frame shape-id (not= (:id frame) shape-id))
+          (if (and frame shape-id
+                   (not= (:id frame) (:id shape))
+                   (not= (:id frame) (:frame-id shape)))
             (rx/of (update-shape shape-id
                                  {:interactions [{:event-type :click
                                                   :action-type :navigate

frontend/src/uxbox/main/ui/workspace/shapes/common.cljs

@@ -24,7 +24,6 @@
   (let [selected @refs/selected-shapes
         selected? (contains? selected id)
         drawing? @refs/selected-drawing-tool
-        options-mode @refs/options-mode
         button (.-which (.-nativeEvent event))]
     (when-not (:blocked shape)
       (cond
@@ -37,9 +36,7 @@
         (= type :frame)
         (when selected?
           (dom/stop-propagation event)
-          (if (= options-mode :design)
+          (st/emit! (dw/start-move-selected)))))
-            (st/emit! (dw/start-move-selected))
-            (st/emit! (dw/start-create-interaction))))
 
         :else
         (do
@@ -48,9 +45,7 @@
             (when-not (or (empty? selected) (kbd/shift? event))
               (st/emit! dw/deselect-all))
             (st/emit! (dw/select-shape id)))
-          (if (= options-mode :design)
+          (st/emit! (dw/start-move-selected)))))
-            (st/emit! (dw/start-move-selected))
-            (st/emit! (dw/start-create-interaction))))))))
 
 (defn on-context-menu
   [event shape]

frontend/src/uxbox/main/ui/workspace/shapes/interactions.cljs

@@ -141,10 +141,34 @@
                :stroke-width 2
                :d arrow-pdata}]])))
 
+
+(mf/defc interaction-handle
+  [{:keys [shape selected] :as props}]
+  (let [shape-rect (geom/selection-rect-shape shape)
+        handle-x (+ (:x shape-rect) (:width shape-rect))
+        handle-y (+ (:y shape-rect) (/ (:height shape-rect) 2))
+
+        arrow-path ["M" (- handle-x 5) handle-y "l 8 0 l -4 -4 m 4 4 l -4 4"]
+        arrow-pdata (str/join " " arrow-path)]
+
+    [:g {:on-mouse-down #(on-mouse-down % shape selected)}
+       [:circle {:cx handle-x
+                 :cy handle-y
+                 :r 8
+                 :stroke "#31EFB8"
+                 :stroke-width 2
+                 :fill "#FFFFFF"}]
+       [:path {:stroke "#31EFB8"
+               :fill "transparent"
+               :stroke-width 2
+               :d arrow-pdata}]]))
+
+
 (mf/defc interactions
   [{:keys [selected] :as props}]
   (let [data (mf/deref refs/workspace-data)
         local (mf/deref refs/workspace-local)
+        current-transform (:transform local)
         objects (:objects data)
         active-shapes (filter #(first (get-click-interaction %)) (vals objects))
         selected-shapes (map #(get objects %) selected)
@@ -171,10 +195,14 @@
         (for [shape selected-shapes]
           (let [interaction (get-click-interaction shape)
                 dest-shape (get objects (:destination interaction))]
-            (when dest-shape
+            (if dest-shape
               [:& interaction-path {:key (:id shape)
                                     :orig-shape shape
                                     :dest-shape dest-shape
                                     :selected selected
-                                    :selected? true}]))))]))
+                                    :selected? true}]
+              (when (not (#{:move :rotate} current-transform))
+                [:& interaction-handle {:key (:id shape)
+                                        :shape shape
+                                        :selected selected}])))))]))