✨ Improved hover behavior

2025-05-14 20:46:37 +02:00 · 2022-06-01 15:33:47 +02:00 · 2022-06-01 15:33:47 +02:00 · 8c5cc446b0
commit 8c5cc446b0
parent 688ec2589a
18 changed files with 117 additions and 217 deletions
--- a/frontend/src/app/main/data/workspace.cljs
+++ b/frontend/src/app/main/data/workspace.cljs
@ -6,8 +6,6 @@

 (ns app.main.data.workspace
  (:require
-   [app.main.data.workspace.indices :as dwidx]
-   
   [app.common.attrs :as attrs]
   [app.common.data :as d]
   [app.common.data.macros :as dm]
@ -34,6 +32,7 @@
   [app.main.data.workspace.fix-bool-contents :as fbc]
   [app.main.data.workspace.groups :as dwg]
   [app.main.data.workspace.guides :as dwgu]
+   [app.main.data.workspace.indices :as dwidx]
   [app.main.data.workspace.interactions :as dwi]
   [app.main.data.workspace.layers :as dwly]
   [app.main.data.workspace.layout :as layout]
@ -130,7 +129,7 @@
                          (rx/merge
                           (rx/of (dwn/initialize team-id file-id)
                                  (dwp/initialize-file-persistence file-id)
-                                  (dwidx/start-indexing file-id))
+                                  (dwidx/start-indexing))

                           (->> stream
                                (rx/filter #(= ::dwc/index-initialized %))
@ -197,7 +196,7 @@
    (watch [_ _ _]
      (rx/merge
       (rx/of (dwn/finalize file-id))
-       (rx/of (dwidx/stop-indexing file-id))
+       (rx/of (dwidx/stop-indexing))
       (->> (rx/of ::dwp/finalize)
            (rx/observe-on :async))))))

--- a/frontend/src/app/main/data/workspace/drawing/box.cljs
+++ b/frontend/src/app/main/data/workspace/drawing/box.cljs
@ -75,7 +75,7 @@
                                         :height 0.01})
                        (cond-> (and (cph/frame-shape? shape)
                                     (not= fid uuid/zero))
-                          (assoc :fills [] :show-content true :hide-in-viewer true))
+                          (assoc :fills [] :hide-in-viewer true))

                        (assoc :frame-id fid)
                        (assoc :initialized? true)
--- a/frontend/src/app/main/data/workspace/indices.cljs
+++ b/frontend/src/app/main/data/workspace/indices.cljs
@ -6,12 +6,11 @@

 (ns app.main.data.workspace.indices
  (:require
-   [app.main.data.workspace.state-helpers :as wsh]
-   [app.main.data.workspace.indices.object-tree :as dwi-object-tree]
-   [app.main.refs :as refs]
   [app.main.data.workspace.changes :as dwc]
+   [app.main.data.workspace.indices.object-tree :as dwi-object-tree]
+   [app.main.data.workspace.state-helpers :as wsh]
+   [app.main.refs :as refs]
   [beicon.core :as rx]
-   [app.common.data :as d]
   [potok.core :as ptk]))

 (def stop-indexing? (ptk/type? ::stop-indexing))
@ -19,7 +18,7 @@
 (def objects-changes #{:add-obj :mod-obj :del-obj :mov-objects})

 (defn stop-indexing
-  [file-id]
+  []
  (ptk/reify ::stop-indexing
    ptk/UpdateEvent
    (update [_ state]
@ -41,13 +40,11 @@
  (ptk/reify ::update-indexing
    ptk/UpdateEvent
    (update [_ state]
-      (let [objects (wsh/lookup-page-objects state)]
-        (-> state
-            (update :index-object-tree dwi-object-tree/update-index shape-id change-type old-objects new-objects))))))
+      (-> state
+          (update :index-object-tree dwi-object-tree/update-index shape-id change-type old-objects new-objects)))))

 (defn start-indexing
-  [file-id]
-
+  []
  (ptk/reify ::start-indexing
    ptk/UpdateEvent
    (update [_ state]
@ -56,7 +53,7 @@
            (assoc :index-object-tree (dwi-object-tree/init-index objects)))))

    ptk/WatchEvent
-    (watch [_ state stream]
+    (watch [_ _ stream]
      (let [stopper (->> stream (rx/filter stop-indexing?) (rx/take 1))
            objects-delta (->> (rx/from-atom refs/workspace-page-objects {:emit-current-value? true}) (rx/buffer 2 1))]
        (->> stream
--- a/frontend/src/app/main/data/workspace/indices/object_tree.cljs
+++ b/frontend/src/app/main/data/workspace/indices/object_tree.cljs
@ -4,25 +4,13 @@
 ;;
 ;; Copyright (c) UXBOX Labs SL

-(ns app.main.data.workspace.indices.object-tree
-  (:require
-   [app.common.pages.helpers :as cph]
-   ))
+(ns app.main.data.workspace.indices.object-tree)

 (defn objects-tree
-  [objects]
-
-  
-  
-  )
+  [_objects])

 (defn init-index
-  [objects]
-
-  
-
-  )
+  [_objects])

 (defn update-index
-  [index shape-id change-type old-objects new-objects]
-  )
+  [_index _shape-id _change-type _old-objects _new-objects])
--- a/frontend/src/app/main/errors.cljs
+++ b/frontend/src/app/main/errors.cljs
@ -7,7 +7,6 @@
 (ns app.main.errors
  "Generic error handling"
  (:require
-   [cuerdas.core :as str]
   [app.common.data :as d]
   [app.common.data.macros :as dm]
   [app.common.exceptions :as ex]
@ -21,6 +20,7 @@
   [app.util.i18n :refer [tr]]
   [app.util.router :as rt]
   [app.util.timers :as ts]
+   [cuerdas.core :as str]
   [potok.core :as ptk]))

 (defn on-error
--- a/frontend/src/app/main/render.cljs
+++ b/frontend/src/app/main/render.cljs
@ -169,7 +169,7 @@
  [objects object-id]
  (let [object   (get objects object-id)
        object   (cond->> object
-                   (cph/root-frame? object)
+                   (cph/root? object)
                   (adapt-root-frame objects))

        ;; Replace the previous object with the new one
--- a/frontend/src/app/main/ui/hooks/resize.cljs
+++ b/frontend/src/app/main/ui/hooks/resize.cljs
@ -6,10 +6,10 @@

 (ns app.main.ui.hooks.resize
  (:require
-   [app.main.ui.hooks :as hooks]
   [app.common.geom.point :as gpt]
   [app.common.logging :as log]
   [app.main.ui.context :as ctx]
+   [app.main.ui.hooks :as hooks]
   [app.util.dom :as dom]
   [app.util.storage :refer [storage]]
   [rumext.alpha :as mf]))
--- a/frontend/src/app/main/ui/workspace/shapes/frame.cljs
+++ b/frontend/src/app/main/ui/workspace/shapes/frame.cljs
@ -6,14 +6,14 @@

 (ns app.main.ui.workspace.shapes.frame
  (:require
-   [app.main.store :as st]
-   [app.main.data.workspace.state-helpers :as wsh]
   [app.common.data :as d]
   [app.common.data.macros :as dm]
   [app.common.uuid :as uuid]
+   [app.main.data.workspace.state-helpers :as wsh]
   [app.main.data.workspace.thumbnails :as dwt]
   [app.main.fonts :as fonts]
   [app.main.refs :as refs]
+   [app.main.store :as st]
   [app.main.ui.context :as ctx]
   [app.main.ui.hooks :as hooks]
   [app.main.ui.shapes.embed :as embed]
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
@ -6,10 +6,10 @@

 (ns app.main.ui.workspace.sidebar.options.menus.measures
  (:require
-   [app.main.constants :refer [size-presets]]
   [app.common.data :as d]
   [app.common.geom.shapes :as gsh]
   [app.common.spec.radius :as ctr]
+   [app.main.constants :refer [size-presets]]
   [app.main.data.workspace :as udw]
   [app.main.data.workspace.changes :as dch]
   [app.main.refs :as refs]
@ -204,13 +204,6 @@
        on-radius-r3-change #(on-radius-4-change % :r3)
        on-radius-r4-change #(on-radius-4-change % :r4)

-        on-change-clip-content
-        (mf/use-callback
-         (mf/deps ids)
-         (fn [event]
-           (let [value (-> event dom/get-target dom/checked?)]
-             (dch/update-shapes ids (fn [shape]) (assoc shape :show-content (not value))))))
-
        on-change-clip-content
        (mf/use-callback
         (mf/deps ids)
--- a/frontend/src/app/main/ui/workspace/viewport.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport.cljs
@ -10,6 +10,7 @@
   [app.common.data :as d]
   [app.common.data.macros :as dm]
   [app.common.geom.shapes :as gsh]
+   [app.common.pages.helpers :as cph]
   [app.main.refs :as refs]
   [app.main.ui.context :as ctx]
   [app.main.ui.hooks :as ui-hooks]
@ -156,6 +157,7 @@
        show-gradient-handlers?  (= (count selected) 1)
        show-grids?              (contains? layout :display-grid)

+        show-frame-outline?      (= transform :move)
        show-outlines?           (and (nil? transform)
                                      (not edition)
                                      (not drawing-obj)
@ -280,6 +282,14 @@
       (when show-text-editor?
         [:& editor/text-editor-svg {:shape editing-shape}])

+       (when show-frame-outline?
+         [:& outline/shape-outlines
+          {:objects base-objects
+           :hover #{(->> @hover-ids
+                         (filter #(cph/frame-shape? base-objects %))
+                         (first))}
+           :zoom zoom}])
+
       (when show-outlines?
         [:& outline/shape-outlines
          {:objects base-objects
@ -314,7 +324,6 @@
        {:objects base-objects
         :selected selected
         :zoom zoom
-         :modifiers modifiers
         :show-artboard-names? show-artboard-names?
         :on-frame-enter on-frame-enter
         :on-frame-leave on-frame-leave
--- a/frontend/src/app/main/ui/workspace/viewport/actions.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/actions.cljs
@ -50,9 +50,7 @@
             mod?   (kbd/mod? event)

             left-click?   (and (not panning) (= 1 (.-which event)))
-             middle-click? (and (not panning) (= 2 (.-which event)))
-
-             selected? (contains? selected id)]
+             middle-click? (and (not panning) (= 2 (.-which event)))]

         (cond
           middle-click?
@ -155,7 +153,6 @@
             shift? (kbd/shift? event)
             alt? (kbd/alt? event)
             meta? (kbd/meta? event)
-             mod? (kbd/mod? event)
             hovering? (some? @hover)]
         (st/emit! (ms/->MouseEvent :click ctrl? shift? alt? meta?))

--- a/frontend/src/app/main/ui/workspace/viewport/hooks.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/hooks.cljs
@ -6,11 +6,11 @@

 (ns app.main.ui.workspace.viewport.hooks
  (:require
+   [app.common.data :as d]
   [app.common.geom.shapes :as gsh]
   [app.common.pages :as cp]
   [app.common.pages.helpers :as cph]
   [app.common.uuid :as uuid]
-   [app.common.data :as d]
   [app.main.data.shortcuts :as dsc]
   [app.main.data.workspace :as dw]
   [app.main.data.workspace.path.shortcuts :as psc]
@ -130,8 +130,7 @@
                  :page-id page-id
                  :rect rect
                  :include-frames? true
-                  :clip-children? (not mod?)
-                  :reverse? true}))))) ;; we want the topmost shape to be selected first
+                  :clip-children? (not mod?)})))))

        over-shapes-stream
        (mf/use-memo
@ -145,14 +144,7 @@

             (->> move-stream
                  ;; When transforming shapes we stop querying the worker
-                  (rx/filter #(not (some? (mf/ref-val transform-ref))))
                  (rx/merge-map query-point)
-                  (rx/tap #(reset! last-point-ref %)))
-
-             (->> move-stream
-                  ;; When transforming shapes we stop querying the worker
-                  (rx/filter #(some? (mf/ref-val transform-ref)))
-                  (rx/map (constantly nil))
                  (rx/tap #(reset! last-point-ref %))))))]

    ;; Refresh the refs on a value change
@ -186,21 +178,25 @@
     over-shapes-stream
     (mf/deps page-id objects)
     (fn [ids]
-       (let [ids (into
+       (let [selected (mf/ref-val selected-ref)
+             focus (mf/ref-val focus-ref)
+             mod? (mf/ref-val mod-ref)
+
+             ids (into
                  (d/ordered-set)
-                  (cph/sort-z-index objects ids))
+                  (cph/sort-z-index objects ids {:bottom-frames? mod?}))

             grouped? (fn [id] (contains? #{:group :bool} (get-in objects [id :type])))

-             selected (mf/ref-val selected-ref)
-             focus (mf/ref-val focus-ref)

-             mod? (mf/ref-val mod-ref)

             remove-xfm (mapcat #(cph/get-parent-ids objects %))
             remove-id? (cond-> (into #{} remove-xfm selected)
                          (not mod?)
-                          (into (filter #(group-empty-space? % objects ids)) ids)
+                          (into
+                           (filter #(or (and (cph/root-frame? objects %) (d/not-empty? (get-in objects [% :shapes])))
+                                        (group-empty-space? % objects ids)))
+                           ids)

                          mod?
                          (into (filter grouped?) ids))
--- a/frontend/src/app/main/ui/workspace/viewport/outline.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/outline.cljs
@ -8,8 +8,6 @@
  (:require
   [app.common.exceptions :as ex]
   [app.common.geom.shapes :as gsh]
-   [app.common.pages.helpers :as cph]
-   [app.main.refs :as refs]
   [app.util.object :as obj]
   [app.util.path.format :as upf]
   [clojure.set :as set]
@ -41,7 +39,7 @@

        common {:fill "none"
                :stroke color
-                :strokeWidth (/ 1 zoom)
+                :strokeWidth (/ 2 zoom)
                :pointerEvents "none"
                :transform transform}

@ -82,15 +80,12 @@
  [props]
  (let [selected  (or (obj/get props "selected") #{})
        hover     (or (obj/get props "hover") #{})
+
        objects   (obj/get props "objects")
        edition   (obj/get props "edition")
        zoom      (obj/get props "zoom")

-        transform (mf/deref refs/current-transform)
-
-        outlines-ids  (->> (set/union selected hover)
-                           (cph/clean-loops objects))
-
+        outlines-ids  (set/union selected hover)
        show-outline? (fn [shape] (and (not (:hidden shape))
                                       (not (:blocked shape))))

@ -100,6 +95,6 @@
                    (filterv show-outline?)
                    (filter some?))]

-    [:g.outlines {:display (when (some? transform) "none")}
+    [:g.outlines
     [:& shape-outlines-render {:shapes shapes
                                :zoom zoom}]]))
--- a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs
@ -6,11 +6,11 @@

 (ns app.main.ui.workspace.viewport.widgets
  (:require
-   [app.common.uuid :as uuid]
   [app.common.data.macros :as dm]
   [app.common.geom.point :as gpt]
   [app.common.geom.shapes :as gsh]
   [app.common.pages.helpers :as cph]
+   [app.common.uuid :as uuid]
   [app.main.data.workspace :as dw]
   [app.main.data.workspace.interactions :as dwi]
   [app.main.refs :as refs]
@ -93,7 +93,7 @@

 (mf/defc frame-title
  {::mf/wrap [mf/memo]}
-  [{:keys [frame modifiers selected? zoom show-artboard-names? on-frame-enter on-frame-leave on-frame-select]}]
+  [{:keys [frame selected? zoom show-artboard-names? on-frame-enter on-frame-leave on-frame-select]}]
  (let [{:keys [width x y]} frame
        label-pos (gpt/point x (- y (/ 10 zoom)))

--- a/frontend/src/app/worker/selection.cljs
+++ b/frontend/src/app/worker/selection.cljs
@ -84,19 +84,12 @@
        index-shape        (make-index-shape objects parents-index clip-parents-index)
        initial-quadtree   (qdt/create (clj->js bounds))

-        index              (reduce index-shape initial-quadtree shapes)
+        index              (reduce index-shape initial-quadtree shapes)]

-        ;;z-index            (cp/calculate-z-index objects)
-        ]
-
-    {:index index
-     ;;:z-index z-index
-     :bounds bounds}))
+    {:index index :bounds bounds}))

 (defn- update-index
-  [{index :index
-    ;; z-index :z-index
-    :as data} old-objects new-objects]
+  [{index :index :as data} old-objects new-objects]
  (let [changes? (fn [id]
                   (not= (get old-objects id)
                         (get new-objects id)))
@ -115,18 +108,12 @@
        new-index (qdt/remove-all index changed-ids)

        index-shape (make-index-shape new-objects parents-index clip-parents-index)
-        index (reduce index-shape new-index shapes)
+        index (reduce index-shape new-index shapes)]

-        ;;z-index (cp/update-z-index z-index changed-ids old-objects new-objects)
-        ]
-
-    (assoc data :index index ;;:z-index z-index
-           )))
+    (assoc data :index index)))

 (defn- query-index
-  [{index :index
-    ;;z-index :z-index
-    } rect frame-id full-frame? include-frames? ignore-groups? clip-children? reverse?]
+  [{index :index} rect frame-id full-frame? include-frames? ignore-groups? clip-children?]
  (let [result (-> (qdt/search index (clj->js rect))
                   (es6-iterator-seq))

@ -152,33 +139,18 @@

        overlaps-parent?
        (fn [clip-parents]
-          (->> clip-parents (some (comp not overlaps?)) not))
-
-        ;;add-z-index
-        ;;(fn [{:keys [id frame-id] :as shape}]
-        ;;  (assoc shape :z (+ (get z-index id)
-        ;;                     (get z-index frame-id 0))))
-
-        ;; Shapes after filters of overlapping and criteria
-        matching-shapes
-        (into []
-              (comp (map #(unchecked-get % "data"))
-                    (filter match-criteria?)
-                    (filter overlaps?)
-                    (filter (comp overlaps? :frame))
-                    (filter (if clip-children?
-                              (comp overlaps-parent? :clip-parents)
-                              (constantly true)))
-                    #_(map add-z-index))
-              result)
-
-        ;;keyfn (if reverse? (comp - :z) :z)
-        ]
+          (->> clip-parents (some (comp not overlaps?)) not))]

+    ;; Shapes after filters of overlapping and criteria
    (into (d/ordered-set)
-          (->> matching-shapes
-               #_(sort-by keyfn)
-               (map :id)))))
+          (comp (map #(unchecked-get % "data"))
+                (filter match-criteria?)
+                (filter overlaps?)
+                (filter (if clip-children?
+                          (comp overlaps-parent? :clip-parents)
+                          (constantly true)))
+                (map :id))
+          result)))


 (defmethod impl/handler :selection/initialize-index
@ -213,13 +185,8 @@
  nil)

 (defmethod impl/handler :selection/query
-  [{:keys [page-id rect frame-id reverse? full-frame? include-frames? ignore-groups? clip-children?]
-    :or {reverse? false full-frame? false include-frames? false clip-children? true} :as message}]
+  [{:keys [page-id rect frame-id full-frame? include-frames? ignore-groups? clip-children?]
+    :or {full-frame? false include-frames? false clip-children? true} :as message}]
  (when-let [index (get @state page-id)]
-    (query-index index rect frame-id full-frame? include-frames? ignore-groups? clip-children? reverse?)))
+    (query-index index rect frame-id full-frame? include-frames? ignore-groups? clip-children?)))

-#_(defmethod impl/handler :selection/query-z-index
-  [{:keys [page-id objects ids]}]
-  (when-let [{z-index :z-index} (get @state page-id)]
-    (->> ids (map #(+ (get z-index %)
-                      (get z-index (get-in objects [% :frame-id])))))))