✨ Performance improvements

2025-03-26 22:51:29 -05:00 · 2021-01-22 16:18:29 +01:00 · 2021-01-22 16:18:29 +01:00 · 6a077c967a
commit 6a077c967a
parent ea03477e8e
6 changed files with 289 additions and 242 deletions
--- a/common/app/common/attrs.cljc
+++ b/common/app/common/attrs.cljc
@ -9,9 +9,6 @@

 (ns app.common.attrs)

-(defn get-attrs-multi
-  ([shapes attrs] (get-attrs-multi shapes attrs = identity))
-  ([shapes attrs eq-fn sel-fn]
 ;; Extract some attributes of a list of shapes.
 ;; For each attribute, if the value is the same in all shapes,
 ;; wll take this value. If there is any shape that is different,
@ -41,39 +38,39 @@
 ;;        :rx nil
 ;;        :ry nil}
 ;;
-   (let [defined-shapes (filter some? shapes)

-         combine-value (fn [v1 v2]
-                         (cond
-                           (and (= v1 :undefined) (= v2 :undefined)) :undefined
-                           (= v1 :undefined) (if (= v2 :multiple) :multiple (sel-fn v2))
-                           (= v2 :undefined) (if (= v1 :multiple) :multiple (sel-fn v1))
-                           (or (= v1 :multiple) (= v2 :multiple)) :multiple
-                           (eq-fn v1 v2) (sel-fn v1)
-                           :else :multiple))
+(defn get-attrs-multi
+  ([objs attrs]
+   (get-attrs-multi objs attrs = identity))

-         combine-values (fn [attrs shape values]
-                          (map #(combine-value (get shape % :undefined)
-                                               (get values % :undefined)) attrs))
+  ([objs attrs eqfn sel]

-         select-attrs (fn [shape attrs]
-                        (zipmap attrs (map #(get shape % :undefined) attrs)))
+   (loop [attr (first attrs)
+          attrs (rest attrs)
+          result (transient {})]

-         reducer (fn [result shape]
-                   (zipmap attrs (combine-values attrs shape result)))
+     (if attr
+       (let [value
+             (loop [curr (first objs)
+                    objs (rest objs)
+                    value ::undefined]

-         combined (reduce reducer
-                          (select-attrs (first defined-shapes) attrs)
-                          (rest defined-shapes))
+               (if (and curr (not= value :multiple))
+                 ;;
+                 (let [new-val (get curr attr ::undefined)
+                       value (cond
+                               (= new-val ::undefined) value
+                               (= value ::undefined)   (sel new-val)
+                               (eqfn new-val value)    value
+                               :else                   :multiple)]
+                   (recur (first objs) (rest objs) value))
+                 ;;
+                 value))]
+         (recur (first attrs)
+                (rest attrs)
+                (cond-> result
+                  (not= value ::undefined)
+                  (assoc! attr value))))

-         cleanup-value (fn [value]
-                         (if (= value :undefined) nil value))
+       (persistent! result)))))

-         cleanup (fn [result]
-                   (->> attrs
-                        (map #(get result %))
-                        (zipmap attrs)
-                        (filter #(not= (second %) :undefined))
-                        (into {})))]
-
-     (cleanup combined))))
--- a/common/app/common/geom/shapes.cljc
+++ b/common/app/common/geom/shapes.cljc
@ -124,9 +124,6 @@
  [shape {:keys [x y]}]
  (move shape (gpt/point (- x) (- y))))

-(defn translate-from-frame
-  [shape {:keys [x y]}]
-  (move shape (gpt/point x y)))

 ;; --- Helpers

--- a/frontend/src/app/main/ui/shapes/text.cljs
+++ b/frontend/src/app/main/ui/shapes/text.cljs
@ -18,64 +18,89 @@
   [app.util.object :as obj]
   [app.util.color :as uc]
   [app.main.ui.shapes.text.styles :as sts]
-   [app.main.ui.shapes.text.embed :as ste]))
+   [app.main.ui.shapes.text.embed :as ste]
+   [app.util.perf :as perf]))

-;; -- Text nodes
-(mf/defc text-node
-  [{:keys [node index shape] :as props}]
-  (let [embed-resources? (mf/use-ctx muc/embed-ctx)
-        {:keys [type text children]} node
-        props #js {:shape shape}
-        render-node
-        (fn [index node]
-          (mf/element text-node {:index index
-                                 :node node
-                                 :key index
-                                 :shape shape}))]
-
-    (if (string? text)
-      (let [style (sts/generate-text-styles (clj->js node) props)]
+(mf/defc render-text
+  {::mf/wrap-props false}
+  [props]
+  (let [node (obj/get props "node")
+        text (:text node)
+        style (sts/generate-text-styles props)]
    [:span {:style style
            :className (when (:fill-color-gradient node) "gradient")}
-         (if (= text "") "\u00A0" text)])
+     (if (= text "") "\u00A0" text)]))

-      (let [children (map-indexed render-node children)]
-        (case type
-          "root"
-          (let [style (sts/generate-root-styles (clj->js node) props)]
+(mf/defc render-root
+  {::mf/wrap-props false}
+  [props]
+  (let [node (obj/get props "node")
+        embed-fonts? (obj/get props "embed-fonts?")
+        children (obj/get props "children")
+        style (sts/generate-root-styles props)]
    [:div.root.rich-text
-             {:key index
-              :style style
+     {:style style
      :xmlns "http://www.w3.org/1999/xhtml"}
     [:*
      [:style ".gradient { background: var(--text-color); -webkit-text-fill-color: transparent; -webkit-background-clip: text;"]
-              (when embed-resources?
+      (when embed-fonts?
        [ste/embed-fontfaces-style {:node node}])]
-             children])
+     children]))

-          "paragraph-set"
-          (let [style (sts/generate-paragraph-set-styles (clj->js node) props)]
-            [:div.paragraph-set {:key index :style style} children])
+(mf/defc render-paragraph-set
+  {::mf/wrap-props false}
+  [props]
+  (let [node (obj/get props "node")
+        children (obj/get props "children")
+        style (sts/generate-paragraph-set-styles props)]
+    [:div.paragraph-set {:style style} children]))

-          "paragraph"
-          (let [style (sts/generate-paragraph-styles (clj->js node) props)]
-            [:p.paragraph {:key index :style style} children])
+(mf/defc render-paragraph
+  {::mf/wrap-props false}
+  [props]
+  (let [node (obj/get props "node")
+        children (obj/get props "children")
+        style (sts/generate-paragraph-styles props)]
+    [:p.paragraph {:style style} children]))

-          nil)))))
+;; -- Text nodes
+(mf/defc render-node
+  {::mf/wrap-props false}
+  [props]
+  (let [node (obj/get props "node")
+        index (obj/get props "index")
+        {:keys [type text children]} node]
+    (if (string? text)
+      [:> render-text props]
+
+      (let [component (case type
+                        "root" render-root
+                        "paragraph-set" render-paragraph-set
+                        "paragraph" render-paragraph
+                        nil)]
+        (when component
+          [:> component (obj/set! props "key" index)
+           (for [[index child] (d/enumerate children)]
+             (let [props (-> props
+                             (obj/set! "node" child)
+                             (obj/set! "index" index))]
+               [:> render-node props]))])))))

 (mf/defc text-content
-  {::mf/wrap-props false
-   ::mf/wrap [mf/memo]}
+  {::mf/wrap-props false}
  [props]
  (let [root (obj/get props "content")
-        shape (obj/get props "shape")]
-    [:& text-node {:index 0
+        shape (obj/get props "shape")
+        embed-fonts? (obj/get props "embed-fonts?")]
+    [:& render-node {:index 0
                     :node root
-                   :shape shape}]))
+                     :shape shape
+                     :embed-fonts? embed-fonts?}]))

 (defn- retrieve-colors
  [shape]
-  (let [colors (->> shape :content
+  (let [colors (->> shape
+                    :content
                    (tree-seq map? :children)
                    (into #{} (comp (map :fill-color) (filter string?))))]
    (if (empty? colors)
@ -87,8 +112,8 @@
   ::mf/forward-ref true}
  [props ref]
  (let [shape     (unchecked-get props "shape")
-        selected? (unchecked-get props "selected?")
        grow-type (unchecked-get props "grow-type")
+        embed-fonts? (mf/use-ctx muc/embed-ctx)
        {:keys [id x y width height content]} shape]
    [:foreignObject {:x x
                     :y y
@ -99,4 +124,5 @@
                     :height (if (#{:auto-height :auto-width} grow-type) 10000 height)
                     :ref ref}
     [:& text-content {:shape shape
-                       :content (:content shape)}]]))
+                       :content (:content shape)
+                       :embed-fonts? embed-fonts?}]]))
--- a/frontend/src/app/main/ui/shapes/text/styles.cljs
+++ b/frontend/src/app/main/ui/shapes/text/styles.cljs
@ -17,7 +17,8 @@
   [app.util.text :as ut]))

 (defn generate-root-styles
-  [data props]
+  ([props] (generate-root-styles (clj->js (obj/get props "node")) props))
+  ([data props]
   (let [valign (obj/get data "vertical-align" "top")
         talign (obj/get data "text-align" "flex-start")
         shape  (obj/get props "shape")
@ -32,18 +33,20 @@
       (= talign "left")    (obj/set! "justifyContent" "flex-start")
       (= talign "center")  (obj/set! "justifyContent" "center")
       (= talign "right")   (obj/set! "justifyContent" "flex-end")
-      (= talign "justify") (obj/set! "justifyContent" "stretch"))))
+       (= talign "justify") (obj/set! "justifyContent" "stretch")))))

 (defn generate-paragraph-set-styles
-  [data props]
+  ([props] (generate-paragraph-set-styles nil props))
+  ([data props]
   ;; The position absolute is used so the paragraph is "outside"
   ;; the normal layout and can grow outside its parent
   ;; We use this element to measure the size of the text
   (let [base #js {:display "inline-block"}]
-    base))
+     base)))

 (defn generate-paragraph-styles
-  [data props]
+  ([props] (generate-paragraph-styles (clj->js (obj/get props "node")) props))
+  ([data props]
   (let [shape  (obj/get props "shape")
         grow-type (:grow-type shape)
         base #js {:fontSize "14px"
@ -54,10 +57,11 @@
     (cond-> base
       ta (obj/set! "textAlign" ta)
       lh (obj/set! "lineHeight" lh)
-      (= grow-type :auto-width) (obj/set! "whiteSpace" "pre"))))
+       (= grow-type :auto-width) (obj/set! "whiteSpace" "pre")))))

 (defn generate-text-styles
-  [data props]
+  ([props] (generate-text-styles (clj->js (obj/get props "node")) props))
+  ([data props]
   (let [letter-spacing (obj/get data "letter-spacing")
         text-decoration (obj/get data "text-decoration")
         text-transform (obj/get data "text-transform")
@ -124,4 +128,4 @@
           (obj/set! base "fontWeight" font-weight))))


-    base))
+     base)))
--- a/frontend/src/app/main/ui/workspace/shapes/text.cljs
+++ b/frontend/src/app/main/ui/workspace/shapes/text.cljs
@ -34,46 +34,33 @@

 ;; --- Events

-(defn use-double-click [{:keys [id]} selected?]
+(defn use-double-click [{:keys [id]}]
  (mf/use-callback
-   (mf/deps id selected?)
+   (mf/deps id)
   (fn [event]
     (dom/stop-propagation event)
     (dom/prevent-default event)
-     (when selected?
-       (st/emit! (dw/start-edition-mode id))))))
+     (st/emit! (dw/start-edition-mode id)))))

 ;; --- Text Wrapper for workspace

-(mf/defc text-wrapper
+(mf/defc text-static-content
+  [{:keys [shape]}]
+  [:& text/text-shape {:shape shape
+                       :grow-type (:grow-type shape)}])
+
+(mf/defc text-resize-content
  {::mf/wrap-props false}
  [props]
-  (let [{:keys [id name x y width height grow-type] :as shape} (unchecked-get props "shape")
-        ghost? (mf/use-ctx muc/ghost-ctx)
-        selected-iref (mf/use-memo (mf/deps (:id shape))
-                                   #(refs/make-selected-ref (:id shape)))
-        selected? (mf/deref selected-iref)
-        edition   (mf/deref refs/selected-edition)
-        current-transform (mf/deref refs/current-transform)
-
-        render-editor (mf/use-state false)
-
-        edition?  (= edition id)
-        embed-resources? (mf/use-ctx muc/embed-ctx)
-
-        handle-mouse-down (we/use-mouse-down shape)
-        handle-context-menu (we/use-context-menu shape)
-        handle-pointer-enter (we/use-pointer-enter shape)
-        handle-pointer-leave (we/use-pointer-leave shape)
-        handle-double-click (use-double-click shape selected?)
-
+  (let [shape (obj/get props "shape")
+        {:keys [id name x y grow-type]} shape
        paragraph-ref (mf/use-state nil)

        handle-resize-text
        (mf/use-callback
         (mf/deps id)
         (fn [entries]
-           (when (and (not ghost?) (seq entries))
+           (when (seq entries)
             ;; RequestAnimationFrame so the "loop limit error" error is not thrown
             ;; https://stackoverflow.com/questions/49384120/resizeobserver-loop-limit-exceeded
             (timers/raf
@ -97,24 +84,41 @@
    (mf/use-effect
     (mf/deps @paragraph-ref handle-resize-text grow-type)
     (fn []
-       (when (not ghost?)
       (when-let [paragraph-node @paragraph-ref]
         (let [observer (js/ResizeObserver. handle-resize-text)]
           (log/debug :msg "Attach resize observer" :shape-id id :shape-name name)
           (.observe observer paragraph-node)
-             #(.disconnect observer))))))
+           #(.disconnect observer)))))

+    [:& text/text-shape {:ref text-ref-cb
+                         :shape shape
+                         :grow-type (:grow-type shape)}]))
+
+(mf/defc text-wrapper
+  {::mf/wrap-props false}
+  [props]
+  (let [{:keys [id x y width height] :as shape} (unchecked-get props "shape")
+        ghost?   (mf/use-ctx muc/ghost-ctx)
+        edition  (mf/deref refs/selected-edition)
+        edition? (= edition id)
+
+        handle-mouse-down (we/use-mouse-down shape)
+        handle-context-menu (we/use-context-menu shape)
+        handle-pointer-enter (we/use-pointer-enter shape)
+        handle-pointer-leave (we/use-pointer-leave shape)
+        handle-double-click (use-double-click shape)]

    [:> shape-container {:shape shape}
     ;; We keep hidden the shape when we're editing so it keeps track of the size
     ;; and updates the selrect acordingly
     [:g.text-shape {:opacity (when edition? 0)
                     :pointer-events "none"}
-      [:& text/text-shape {:key (str "text-shape" (:id shape))
-                           :ref text-ref-cb
-                           :shape shape
-                           :selected? selected?
-                           :grow-type (:grow-type shape)}]]
+
+      (if ghost?
+        [:& text-static-content {:shape shape}]
+        [:& text-resize-content {:shape shape}])]
+
+
     (when (and (not ghost?) edition?)
       [:& editor/text-shape-edit {:key (str "editor" (:id shape))
                                   :shape shape}])
--- a/frontend/src/app/util/text.cljs
+++ b/frontend/src/app/util/text.cljs
@ -93,12 +93,31 @@
    (rec-fn {} node)))


+(defn content->nodes [node]
+  (loop [result (transient [])
+         curr node
+         pending (transient [])]
+
+    (let [result (conj! result curr)]
+      ;; Adds children to the pending list
+      (let [children (:children curr)
+            pending (loop [child (first children)
+                           children (rest children)
+                           pending pending]
+                      (if child
+                        (recur (first children)
+                               (rest children)
+                               (conj! pending child))
+                        pending))]
+
+        (if (= 0 (count pending))
+          (persistent! result)
+          ;; Iterates with the next value in pending
+          (let [next (get pending (dec (count pending)))]
+            (recur result next (pop! pending))))))))
+
 (defn get-text-attrs-multi
  [node attrs]
-  (let [rec-fn
-        (fn rec-fn [current node]
-          (let [current (reduce rec-fn current (:children node []))]
-            (get-attrs-multi [current node] attrs)))]
-    (merge (select-keys default-text-attrs attrs)
-           (rec-fn {} node))))
+  (let [nodes (content->nodes node)]
+    (get-attrs-multi nodes attrs)))