Merge pull request #3946 from penpot/VasilevsVV-penpot/vt/issue-3232-hide-bb-when-editing

✨ Add set of events for hiding and revealing bounding box for selected shape while transforming

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

@@ -2310,6 +2310,7 @@
 
 ;; Transform
 
+(dm/export dwt/trigger-bounding-box-cloaking)
 (dm/export dwt/start-resize)
 (dm/export dwt/update-dimensions)
 (dm/export dwt/change-orientation)

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

@@ -370,7 +370,7 @@
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
 (defn update-shape-flags
-  [ids {:keys [blocked hidden] :as flags}]
+  [ids {:keys [blocked hidden transforming] :as flags}]
   (dm/assert!
    "expected valid coll of uuids"
    (every? uuid? ids))
@@ -386,14 +386,15 @@
             (fn [obj]
               (cond-> obj
                 (boolean? blocked) (assoc :blocked blocked)
-                (boolean? hidden) (assoc :hidden hidden)))
+                (boolean? hidden) (assoc :hidden hidden)
+                (boolean? transforming) (assoc :transforming transforming)))
             objects (wsh/lookup-page-objects state)
             ;; We have change only the hidden behaviour, to hide only the
             ;; selected shape, block behaviour remains the same.
             ids     (if (boolean? blocked)
                       (into ids (->> ids (mapcat #(cfh/get-children-ids objects %))))
                       ids)]
-        (rx/of (dch/update-shapes ids update-fn {:attrs #{:blocked :hidden}}))))))
+        (rx/of (dch/update-shapes ids update-fn {:attrs #{:blocked :hidden :transforming}}))))))
 
 (defn toggle-visibility-selected
   []

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

@@ -28,6 +28,7 @@
    [app.main.data.workspace.collapse :as dwc]
    [app.main.data.workspace.modifiers :as dwm]
    [app.main.data.workspace.selection :as dws]
+   [app.main.data.workspace.shapes :as dwsh]
    [app.main.data.workspace.state-helpers :as wsh]
    [app.main.data.workspace.undo :as dwu]
    [app.main.snap :as snap]
@@ -240,6 +241,26 @@
            (rx/of (dwm/apply-modifiers)
                   (finish-transform))))))))
 
+(defn trigger-bounding-box-cloaking
+  "Trigger the bounding box cloaking (with default timer of 1sec)
+
+  Used to hide bounding-box of shape after changes in sidebar->measures."
+  [ids]
+  (dm/assert!
+   "expected valid coll of uuids"
+   (every? uuid? ids))
+
+  (ptk/reify ::trigger-bounding-box-cloaking
+    ptk/WatchEvent
+    (watch [_ _ stream]
+      (rx/concat
+       (rx/of (dwsh/update-shape-flags ids {:transforming true}))
+       (->> (rx/timer 1000)
+            (rx/map (fn []
+                      (dwsh/update-shape-flags ids {:transforming false})))
+            (rx/take-until
+             (rx/filter (ptk/type? ::trigger-bounding-box-cloaking) stream)))))))
+
 (defn update-dimensions
   "Change size of shapes, from the sideber options form.
   Will ignore pixel snap used in the options side panel"

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

@@ -203,7 +203,8 @@
         (mf/use-fn
          (mf/deps ids)
          (fn [value attr]
-           (st/emit! (udw/update-dimensions ids attr value))))
+           (st/emit! (udw/trigger-bounding-box-cloaking ids)
+                     (udw/update-dimensions ids attr value))))
 
         on-proportion-lock-change
         (mf/use-fn
@@ -225,6 +226,7 @@
         (mf/use-fn
          (mf/deps ids)
          (fn [value attr]
+           (st/emit! (udw/trigger-bounding-box-cloaking ids))
            (doall (map #(do-position-change %1 %2 value attr) shapes frames))))
 
         ;; ROTATION
@@ -233,7 +235,8 @@
         (mf/use-fn
          (mf/deps ids)
          (fn [value]
-           (st/emit! (udw/increase-rotation ids value))))
+           (st/emit! (udw/trigger-bounding-box-cloaking ids)
+                     (udw/increase-rotation ids value))))
 
         ;; RADIUS
 

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

@@ -113,7 +113,8 @@
 (defn- show-outline?
   [shape]
   (and (not (:hidden shape))
-       (not (:blocked shape))))
+       (not (:blocked shape))
+       (not (:transforming shape))))
 
 (mf/defc shape-outlines
   {::mf/wrap-props false}

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

@@ -279,7 +279,8 @@
         selrect (:selrect shape)
         transform (gsh/transform-str shape)]
 
-    (when (not (#{:move :rotate} current-transform))
+    (when (and (not (:transforming shape))
+               (not (#{:move :rotate} current-transform)))
       [:g.controls {:pointer-events (if disable-handlers "none" "visible")}
        ;; Selection rect
        [:& selection-rect {:rect selrect
@@ -310,7 +311,8 @@
                      (mod 360))]
 
     (when (and (not (#{:move :rotate} current-transform))
-               (not workspace-read-only?))
+               (not workspace-read-only?)
+               (not (:transforming shape)))
       [:g.controls {:pointer-events (if disable-handlers "none" "visible")}
        ;; Handlers
        (for [{:keys [type position props]} (handlers-for-selection selrect shape zoom)]