From 4513033634ab38e8c1f544eb8e9ce656dd9d3cd9 Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Mon, 25 Jan 2021 12:45:37 +0100
Subject: [PATCH] :sparkles: Changed grid render for performance

---
 frontend/src/app/main/ui/shapes/text.cljs     |  2 +-
 .../src/app/main/ui/workspace/frame_grid.cljs | 51 ++++++++++---------
 2 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/frontend/src/app/main/ui/shapes/text.cljs b/frontend/src/app/main/ui/shapes/text.cljs
index 467903f3b..5dd2f4a25 100644
--- a/frontend/src/app/main/ui/shapes/text.cljs
+++ b/frontend/src/app/main/ui/shapes/text.cljs
@@ -81,7 +81,7 @@
         (when component
           [:> component (obj/set! props "key" index)
            (for [[index child] (d/enumerate children)]
-             (let [props (-> props
+             (let [props (-> (obj/clone props)
                              (obj/set! "node" child)
                              (obj/set! "index" index))]
                [:> render-node props]))])))))
diff --git a/frontend/src/app/main/ui/workspace/frame_grid.cljs b/frontend/src/app/main/ui/workspace/frame_grid.cljs
index eb4e3a4d3..bcec357b8 100644
--- a/frontend/src/app/main/ui/workspace/frame_grid.cljs
+++ b/frontend/src/app/main/ui/workspace/frame_grid.cljs
@@ -15,35 +15,36 @@
    [app.common.math :as mth]
    [app.common.pages :as cp]
    [app.common.geom.shapes :as gsh]
-   [app.util.geom.grid :as gg]))
+   [app.util.geom.grid :as gg]
+   [app.common.uuid :as uuid]))
 
 (mf/defc square-grid [{:keys [frame zoom grid] :as props}]
-  (let [{:keys [color size] :as params} (-> grid :params)
+  (let [grid-id (mf/use-memo #(uuid/next))
+        {:keys [color size] :as params} (-> grid :params)
         {color-value :color color-opacity :opacity} (-> grid :params :color)
         ;; Support for old color format
-        color-value (or color-value (:value (get-in grid [:params :color :value])))
-        {frame-width :width frame-height :height :keys [x y]} frame]
-    (when (> size 0)
-      [:g.grid
-       [:*
-        (for [xs (range size frame-width size)]
-          [:line {:key (str (:id frame) "-y-" xs)
-                  :x1 (mth/round (+ x xs))
-                  :y1 (mth/round y)
-                  :x2 (mth/round (+ x xs))
-                  :y2 (mth/round (+ y frame-height))
-                  :style {:stroke color-value
-                          :stroke-opacity color-opacity
-                          :stroke-width (str (/ 1 zoom))}}])
-        (for [ys (range size frame-height size)]
-          [:line {:key (str (:id frame) "-x-" ys)
-                  :x1 (mth/round x)
-                  :y1 (mth/round (+ y ys))
-                  :x2 (mth/round (+ x frame-width))
-                  :y2 (mth/round (+ y ys))
-                  :style {:stroke color-value
-                          :stroke-opacity color-opacity
-                          :stroke-width (str (/ 1 zoom))}}])]])))
+        color-value (or color-value (:value (get-in grid [:params :color :value])))]
+
+    [:g.grid
+     [:defs
+      [:pattern {:id grid-id
+                 :x (:x frame)
+                 :y (:y frame)
+                 :width size
+                 :height size
+                 :pattern-units "userSpaceOnUse"}
+       [:path {:d (str "M " size " " 0 " "
+                       "L " 0 " " 0 " " 0 " " size " ")
+               :style {:fill "none"
+                       :stroke color-value
+                       :stroke-opacity color-opacity
+                       :stroke-width (str (/ 1 zoom))}}]]]
+
+     [:rect {:x (:x frame)
+             :y (:y frame)
+             :width (:width frame)
+             :height (:height frame)
+             :fill (str "url(#" grid-id ")")}]]))
 
 (mf/defc layout-grid [{:keys [key frame zoom grid]}]
   (let [{color-value :color color-opacity :opacity} (-> grid :params :color)