✨ Mainly cosmetic and performance improvements on shape render.

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

@@ -31,6 +31,7 @@
    [app.main.ui.workspace.shapes.path :as path]
    [app.main.ui.workspace.shapes.text :as text]
    [app.util.object :as obj]
+   [app.util.debug :refer [debug?]]
    [beicon.core :as rx]
    [okulary.core :as l]
    [rumext.alpha :as mf]))
@@ -44,15 +45,17 @@
 
 (defn- shape-wrapper-memo-equals?
   [np op]
-  (let [n-shape (obj/get np "shape")
+  (let [n-shape (obj/get np "shape")]
-        o-shape (obj/get op "shape")
-        n-frame (obj/get np "frame")
-        o-frame (obj/get op "frame")]
-    ;; (prn "shape-wrapper-memo-equals?" (identical? n-frame o-frame))
     (if (= (:type n-shape) :group)
       false
+      (let [o-shape (obj/get op "shape")
+            n-frame (obj/get np "frame")
+            o-frame (obj/get op "frame")
+            n-ghost (obj/get np "ghost?")
+            o-ghost (obj/get op "ghost?")]
         (and (identical? n-shape o-shape)
-           (identical? n-frame o-frame)))))
+             (identical? n-frame o-frame)
+             (identical? n-ghost o-ghost))))))
 
 (defn make-is-moving-ref
   [id]
@@ -94,7 +97,9 @@
          ;; Only used when drawing a new frame.
          :frame [:> frame-wrapper {:shape shape}]
          nil)
-       [:& bounding-box {:shape shape :frame frame}]])))
+
+       (when (debug? :bounding-boxes)
+         [:& bounding-box {:shape shape :frame frame}])])))
 
 (def group-wrapper (group/group-wrapper-factory shape-wrapper))
 (def frame-wrapper (frame/frame-wrapper-factory shape-wrapper))

frontend/src/app/main/ui/workspace/shapes/bounding_box.cljs

@@ -59,7 +59,6 @@
 (mf/defc bounding-box
   {::mf/wrap-props false}
   [props]
-  (when (debug? :bounding-boxes)
   (let [shape (-> (unchecked-get props "shape"))
         frame (unchecked-get props "frame")
         selrect (gsh/points->selrect (-> shape :points))
@@ -92,4 +91,4 @@
                              :color line-color}]
 
      [:& render-rect {:rect selrect
-                        :color line-color}]])))
+                      :color line-color}]]))

frontend/src/app/main/ui/workspace/shapes/frame.cljs

@@ -68,8 +68,8 @@
 
 (mf/defc frame-title
   [{:keys [frame]}]
-  (let [zoom (mf/deref refs/selected-zoom)
+  (let [{:keys [width x y]} frame
-        {:keys [width x y]} frame
+        zoom                 (mf/deref refs/selected-zoom)
         label-pos            (gpt/point x (- y (/ 10 zoom)))
         handle-click         (use-select-shape frame)
         handle-pointer-enter (we/use-pointer-enter frame)
@@ -92,12 +92,26 @@
                             (contains? (:selected local) id)))]
     (l/derived check-moving refs/workspace-local)))
 
+;; This custom deffered don't deffer rendering when ghost rendering is
+;; used.
+(defn custom-deferred
+  [component]
+  (mf/fnc deferred
+    {::mf/wrap-props false}
+    [props]
+    (let [tmp (mf/useState false)
+          ^boolean render? (aget tmp 0)
+          ^js set-render (aget tmp 1)]
+      (mf/use-layout-effect (fn [] (ts/schedule-on-idle #(set-render true))))
+      (if (unchecked-get props "ghost?")
+        (mf/create-element component props)
+        (when render? (mf/create-element component props))))))
+
 (defn frame-wrapper-factory
   [shape-wrapper]
   (let [frame-shape (frame/frame-shape shape-wrapper)]
     (mf/fnc frame-wrapper
-      {::mf/wrap [#(mf/memo' % frame-wrapper-factory-equals?)
+      {::mf/wrap [#(mf/memo' % frame-wrapper-factory-equals?) custom-deferred]
-                  #(mf/deferred % ts/schedule-on-idle)]
        ::mf/wrap-props false}
       [props]
       (let [shape   (unchecked-get props "shape")

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

@@ -167,6 +167,7 @@
         shapes (if ids
                  (->> ids (map #(get objects %)))
                  shapes)]
+
     [:*
      [:g.shapes
       (for [item shapes]

frontend/src/app/util/debug.cljs

@@ -16,7 +16,11 @@
 (defn debug! [option] (swap! *debug* conj option))
 (defn -debug! [option] (swap! *debug* disj option))
 
-(defn ^:export debug? [option] (@*debug* option))
+(defn ^:export ^boolean debug?
+  [option]
+  (if *assert*
+    (boolean (@*debug* option))
+    false))
 
 (defn ^:export toggle-debug [name] (let [option (keyword name)]
                                      (if (debug? option)

frontend/src/app/util/perf.cljs

@@ -27,16 +27,6 @@
 ;; percentiles of render time measures. The log function is
 ;; automatically debouced for avod excesive spam to the console.
 
-;; #?(:clj
-;;    (defmacro with-measure
-;;      [name & body]
-;;      `(let [start# (js/performance.now)
-;;             res# (do ~@body)
-;;             end# (js/performance.now)
-;;             time# (.toFixed (- end# start#) 2)]
-;;         (println (str "[perf|" ~name "] => " time#))
-;;         res#)))
-
 (defn tdigest
   []
   (specify! (td/TDigest.)
@@ -111,7 +101,7 @@
                    (mf/deps label)
                    #(on-render-factory label))]
     (if enabled?
-      [:> react/Profiler {:id label
+      [:> react/Profiler #js {:id label
-                          :on-render on-render}
+                              :onRender on-render}
        children]
       children)))