✨ Improved rules performance. Cleanup unused methods

frontend/src/app/main/exports.cljs

@@ -50,8 +50,8 @@
     (-> rect
         (update :x to-finite 0)
         (update :y to-finite 0)
-        (update :width to-finite 10000)
-        (update :height to-finite 10000))))
+        (update :width to-finite 100000)
+        (update :height to-finite 100000))))
 
 (declare shape-wrapper-factory)
 

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

@@ -121,8 +121,8 @@
                      :id (:id shape)
                      :data-colors (retrieve-colors shape)
                      :transform (geom/transform-matrix shape)
-                     :width  (if (#{:auto-width} grow-type) 10000 width)
-                     :height (if (#{:auto-height :auto-width} grow-type) 10000 height)
+                     :width  (if (#{:auto-width} grow-type) 100000 width)
+                     :height (if (#{:auto-height :auto-width} grow-type) 100000 height)
                      :ref ref}
      [:& text-content {:shape shape
                        :content (:content shape)

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

@@ -89,7 +89,9 @@
                           (:selected local)))]
     (l/derived moving-shapes refs/workspace-local)))
 
-(mf/defc frame-grid [{:keys [zoom]}]
+(mf/defc frame-grid
+  {::mf/wrap [mf/memo]}
+  [{:keys [zoom]}]
   (let [frames (mf/deref refs/workspace-frames)
         shapes-moving (mf/deref shapes-moving-ref)]
     [:g.grid-display {:style {:pointer-events "none"}}

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

@@ -11,7 +11,8 @@
   (:require
    [rumext.alpha :as mf]
    [app.common.math :as mth]
-   [app.util.object :as obj]))
+   [app.util.object :as obj]
+   [app.util.timers :as timers]))
 
 (defn- calculate-step-size
   [zoom]
@@ -34,49 +35,52 @@
 (defn draw-rule!
   [dctx {:keys [zoom size start count type] :or {count 200}}]
   (when start
-      (let [txfm (- (* (- 0 start) zoom) 20)
-            minv (max (mth/round start) -10000)
-            maxv (min (mth/round (+ start (/ size zoom))) 10000)
-            step (calculate-step-size zoom)]
+    (let [txfm (- (* (- 0 start) zoom) 20)
+          step (calculate-step-size zoom)
 
-        (if (= type :horizontal)
-          (.translate dctx txfm 0)
-          (.translate dctx 0 txfm))
+          minv (max (mth/round start) -100000)
+          minv (* (mth/ceil (/ minv step)) step)
 
-        (obj/set! dctx "font" "12px worksans")
-        (obj/set! dctx "fillStyle" "#7B7D85")
-        (obj/set! dctx "strokeStyle" "#7B7D85")
-        (obj/set! dctx "textAlign" "center")
+          maxv (min (mth/round (+ start (/ size zoom))) 100000)
+          maxv (* (mth/floor (/ maxv step)) step)
 
-        (loop [i minv]
-          (when (< i maxv)
-            (let [pos (+ (* i zoom) 0)]
-              (when (= (mod i step) 0)
-                (.save dctx)
-                (if (= type :horizontal)
-                  (do
-                    (.fillText dctx (str i) pos 13))
-                  (do
-                    (.translate dctx 12 pos)
-                    (.rotate dctx (/ (* 270 js/Math.PI) 180))
-                    (.fillText dctx (str i) 0 0)))
-                (.restore dctx))
-              (recur (inc i)))))
+          path (js/Path2D.)]
 
-        (let [path (js/Path2D.)]
-          (loop [i minv]
-            (if (> i maxv)
-              (.stroke dctx path)
-              (let [pos (+ (* i zoom) 0)]
-                (when (= (mod i step) 0)
-                  (if (= type :horizontal)
-                    (do
-                      (.moveTo path pos 17)
-                      (.lineTo path pos 20))
-                    (do
-                      (.moveTo path 17 pos)
-                      (.lineTo path 20 pos))))
-                (recur (inc i)))))))))
+      (if (= type :horizontal)
+        (.translate dctx txfm 0)
+        (.translate dctx 0 txfm))
+
+      (obj/set! dctx "font" "12px worksans")
+      (obj/set! dctx "fillStyle" "#7B7D85")
+      (obj/set! dctx "strokeStyle" "#7B7D85")
+      (obj/set! dctx "textAlign" "center")
+
+      (loop [i minv]
+        (if (<= i maxv)
+          (let [pos (+ (* i zoom) 0)]
+            (.save dctx)
+            (if (= type :horizontal)
+              (do
+                ;; Write the rule numbers
+                (.fillText dctx (str i) pos 13)
+
+                ;; Build the rules lines
+                (.moveTo path pos 17)
+                (.lineTo path pos 20))
+              (do
+                ;; Write the rule numbers
+                (.translate dctx 12 pos)
+                (.rotate dctx (/ (* 270 js/Math.PI) 180))
+                (.fillText dctx (str i) 0 0)
+
+                ;; Build the rules lines
+                (.moveTo path 17 pos)
+                (.lineTo path 20 pos)))
+            (.restore dctx)
+            (recur (+ i step)))
+
+          ;; Put the path in the canvas
+          (.stroke dctx path))))))
 
 
 (mf/defc horizontal-rule

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

@@ -60,6 +60,7 @@
         edition              (mf/deref refs/selected-edition)
         label-pos            (gpt/point x (- y (/ 10 zoom)))
         handle-click         (use-select-shape frame edition)
+        handle-mouse-down    (we/use-mouse-down frame)
         handle-pointer-enter (we/use-pointer-enter frame)
         handle-pointer-leave (we/use-pointer-leave frame)]
     [:text {:x 0
@@ -68,7 +69,8 @@
             :height 20
             :class "workspace-frame-label"
             :transform (text-transform label-pos zoom)
-            :on-mouse-down handle-click
+            :on-click handle-click
+            :on-mouse-down handle-mouse-down
             :on-pointer-over handle-pointer-enter
             :on-pointer-out handle-pointer-leave}
      (:name frame)]))

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

@@ -269,7 +269,7 @@
         {:keys [x y width height grow-type]} shape]
     [:foreignObject {:transform (gsh/transform-matrix shape)
                      :x x :y y
-                     :width  (if (#{:auto-width} grow-type) 10000 width)
-                     :height (if (#{:auto-height :auto-width} grow-type) 10000 height)}
+                     :width  (if (#{:auto-width} grow-type) 100000 width)
+                     :height (if (#{:auto-height :auto-width} grow-type) 100000 height)}
 
      [:& text-shape-edit-html {:shape shape}]]))

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

@@ -242,12 +242,6 @@
         page-id       (mf/use-ctx ctx/current-page-id)
 
         selected-objects (mf/deref refs/selected-objects)
-        selrect-orig     (->> selected-objects
-                              (gsh/selection-rect))
-        selrect          (->> selected-objects
-                              (map #(assoc % :modifiers (:modifiers local)))
-                              (map gsh/transform-shape)
-                              (gsh/selection-rect))
 
         alt?          (mf/use-state false)
         cursor        (mf/use-state cur/pointer-inner)