✨ Auto open layer when hovering over it for a moment

frontend/src/uxbox/main/ui/hooks.cljs

@@ -18,6 +18,7 @@
    [uxbox.util.transit :as t]
    [uxbox.util.dom :as dom]
    [uxbox.util.webapi :as wapi]
+   [uxbox.util.timers :as ts]
    ["mousetrap" :as mousetrap])
   (:import goog.events.EventType))
 
@@ -31,7 +32,6 @@
      #js [ob])
     state))
 
-
 (s/def ::shortcuts
   (s/map-of ::us/string fn?))
 
@@ -66,18 +66,6 @@
 
     [toggle @state]))
 
-;; (defn- extract-type
-;;   [dt]
-;;   (let [types (unchecked-get dt "types")
-;;         total (alength types)]
-;;     (loop [i 0]
-;;       (if (= i total)
-;;         nil
-;;         (if-let [match (re-find #"dnd/(.+)" (aget types i))]
-;;           (second match)
-;;           (recur (inc i)))))))
-
-
 (defn invisible-image
   []
   (let [img (js/Image.)
@@ -97,73 +85,98 @@
         :else :center)
       (if (> ypos thold) :bot :top))))
 
+(defn- set-timer
+  [state ms func]
+  (assoc state :timer (ts/schedule ms func)))
+
+(defn- cancel-timer
+  [state]
+  (let [timer (:timer state)]
+    (if timer
+      (do
+        (rx/dispose! timer)
+        (dissoc state :timer))
+      state)))
+
+;; The dnd interface is broken in several ways. This is the official documentation
+;; https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API
+;;
+;; And there is some discussion of the problems and many uncomplete solutions
+;; https://github.com/lolmaus/jquery.dragbetter/#what-this-is-all-about
+;; https://www.w3schools.com/jsref/event_relatedtarget.asp
+;; https://stackoverflow.com/questions/14194324/firefox-firing-dragleave-when-dragging-over-text?noredirect=1&lq=1
+;; https://stackoverflow.com/questions/7110353/html5-dragleave-fired-when-hovering-a-child-element
+
+;; This function is useful to debug the erratic dnd interface behaviour when something weird occurs
+;; (defn- trace
+;;   [event data label]
+;;   (js/console.log
+;;     label
+;;     "[" (:name data) "]"
+;;     (if (.-currentTarget event) (.-textContent (.-currentTarget event)) "null")
+;;     (if (.-relatedTarget event) (.-textContent (.-relatedTarget event)) "null")))
+
 (defn use-sortable
-  [& {:keys [type data on-drop on-drag detect-center?] :as opts}]
+  [& {:keys [type data on-drop on-drag on-hold detect-center?] :as opts}]
   (let [ref   (mf/use-ref)
-        state (mf/use-state {})
+        state (mf/use-state {:over nil
+                             :timer nil})
 
         on-drag-start
         (fn [event]
-          ;; (dom/prevent-default event)
           (dom/stop-propagation event)
+          ;; (trace event data "drag-start")
           (let [dtrans (unchecked-get event "dataTransfer")]
             (.setDragImage dtrans (invisible-image) 0 0)
             (set! (.-effectAllowed dtrans) "move")
             (.setData dtrans "application/json" (t/encode data))
-            ;; (.setData dtrans (str "dnd/" type) "")
             (when (fn? on-drag)
-              (on-drag data))
+              (on-drag data))))
+
+        on-drag-enter
+        (fn [event]
+          (dom/prevent-default event) ;; prevent default to allow drag enter
+          (let [target (.-currentTarget event)
+                related (.-relatedTarget event)]
+            (when-not (.contains target related) ;; ignore events triggered by elements that are
+              (dom/stop-propagation event)       ;; children of the drop target
+              ;; (trace event data "drag-enter")
+              (when (fn? on-hold)
                 (swap! state (fn [state]
-                           (if (:dragging? state)
+                               (-> state
-                             state
+                                   (cancel-timer)
-                             (assoc state :dragging? true))))))
+                                   (set-timer 1000 on-hold))))))))
 
         on-drag-over
         (fn [event]
-          (dom/stop-propagation event)
+          (dom/prevent-default event) ;; prevent default to allow drag over
-          (dom/prevent-default event)
-
           (let [target (dom/get-target event)
+                related (.-relatedTarget event)
                 dtrans (unchecked-get event "dataTransfer")
                 ypos   (unchecked-get event "offsetY")
                 height (unchecked-get target "clientHeight")
                 side   (drop-side height ypos detect-center?)]
-
+            (when-not (.contains target related)
-            (set! (.-dropEffect dtrans) "move")
+              (dom/stop-propagation event)
-            (set! (.-effectAllowed dtrans) "move")
+              ;; (trace event data "drag-over")
-
+              (swap! state assoc :over side))))
-            (swap! state update :over (fn [state]
-                                        (if (not= state side)
-                                          side
-                                          state)))))
-
-        ;; on-drag-enter
-        ;; (fn [event]
-        ;;   (dom/prevent-default event)
-        ;;   (dom/stop-propagation event)
-        ;;   (let [dtrans (unchecked-get event "dataTransfer")
-        ;;         ty (extract-type dt)]
-        ;;     (when (= ty type)
-        ;;       #_(js/console.log "on-drag-enter" (:name data) ty type)
-        ;;       #_(swap! state (fn [state]
-        ;;                      (if (:over? state)
-        ;;                        state
-        ;;                        (assoc state :over? true)))))))
 
         on-drag-leave
         (fn [event]
           (let [target (.-currentTarget event)
                 related (.-relatedTarget event)]
             (when-not (.contains target related)
-              ;; (js/console.log "on-drag-leave" (:name data))
+              (dom/stop-propagation event)
+              ;; (trace event data "drag-leave")
               (swap! state (fn [state]
-                             (if (:over state)
+                             (-> state
-                               (dissoc state :over)
+                               (cancel-timer)
-                               state))))))
+                               (dissoc :over)))))))
 
         on-drop'
         (fn [event]
           (dom/stop-propagation event)
+          ;; (trace event data "drop")
           (let [target (dom/get-target event)
                 dtrans (unchecked-get event "dataTransfer")
                 dtdata (.getData dtrans "application/json")
@@ -172,21 +185,21 @@
                 height (unchecked-get target "clientHeight")
                 side   (drop-side height ypos detect-center?)]
 
-            ;; TODO: seems unnecessary
             (swap! state (fn [state]
-                           (cond-> state
+                           (-> state
-                             (:dragging? state) (dissoc :dragging?)
+                             (cancel-timer)
-                             (:over state) (dissoc :over))))
+                             (dissoc :over))))
 
             (when (fn? on-drop)
               (on-drop side (t/decode dtdata)))))
 
         on-drag-end
         (fn [event]
+          ;; (trace event data "drag-end")
           (swap! state (fn [state]
-                         (cond-> state
+                         (-> state
-                           (:dragging? state) (dissoc :dragging?)
+                           (cancel-timer)
-                           (:over state) (dissoc :over)))))
+                           (dissoc :over)))))
 
         on-mount
         (fn []
@@ -195,14 +208,14 @@
             (.setAttribute dom "data-type" type)
 
             (.addEventListener dom "dragstart" on-drag-start false)
-            ;; (.addEventListener dom "dragenter" on-drag-enter false)
+            (.addEventListener dom "dragenter" on-drag-enter false)
             (.addEventListener dom "dragover" on-drag-over false)
             (.addEventListener dom "dragleave" on-drag-leave true)
             (.addEventListener dom "drop" on-drop' false)
             (.addEventListener dom "dragend" on-drag-end false)
             #(do
                (.removeEventListener dom "dragstart" on-drag-start)
-               ;; (.removeEventListener dom "dragenter" on-drag-enter)
+               (.removeEventListener dom "dragenter" on-drag-enter)
                (.removeEventListener dom "dragover" on-drag-over)
                (.removeEventListener dom "dragleave" on-drag-leave)
                (.removeEventListener dom "drop" on-drop')
@@ -211,4 +224,6 @@
     (mf/use-effect
      (mf/deps type data on-drop)
      on-mount)
+
     [(deref state) ref]))
+

frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs

@@ -157,10 +157,16 @@
                   parent-id (cp/get-parent (:id item) objects)]
                 (st/emit! (dw/relocate-shape id parent-id to-index)))))
 
+        on-hold
+        (fn []
+          (when-not expanded?
+            (st/emit! (dw/toggle-collapse (:id item)))))
+
         [dprops dref] (hooks/use-sortable
                        :type (str (:frame-id item))
                        :on-drop on-drop
                        :on-drag on-drag
+                       :on-hold on-hold
                        :detect-center? container?
                        :data {:id (:id item)
                               :index index