⚡ Performance improvements

common/src/app/common/geom/matrix.cljc

@@ -36,6 +36,33 @@
     (apply matrix params)))
 
 (defn multiply
+  ([m1 m2]
+   (let [m1a (.-a m1)
+         m1b (.-b m1)
+         m1c (.-c m1)
+         m1d (.-d m1)
+         m1e (.-e m1)
+         m1f (.-f m1)
+
+         m2a (.-a m2)
+         m2b (.-b m2)
+         m2c (.-c m2)
+         m2d (.-d m2)
+         m2e (.-e m2)
+         m2f (.-f m2)]
+
+     (Matrix.
+      (+ (* m1a m2a) (* m1c m2b))
+      (+ (* m1b m2a) (* m1d m2b))
+      (+ (* m1a m2c) (* m1c m2d))
+      (+ (* m1b m2c) (* m1d m2d))
+      (+ (* m1a m2e) (* m1c m2f) m1e)
+      (+ (* m1b m2e) (* m1d m2f) m1f))))
+
+  ([m1 m2 & others]
+   (reduce multiply (multiply m1 m2) others)))
+
+(defn -old-multiply
   ([{m1a :a m1b :b m1c :c m1d :d m1e :e m1f :f}
     {m2a :a m2b :b m2c :c m2d :d m2e :e m2f :f}]
    (Matrix.
@@ -46,20 +73,15 @@
     (+ (* m1a m2e) (* m1c m2f) m1e)
     (+ (* m1b m2e) (* m1d m2f) m1f)))
   ([m1 m2 & others]
-   (reduce multiply (multiply m1 m2) others)))
+   (reduce multiply (-old-multiply m1 m2) others)))
 
 (defn add-translate
   "Given two TRANSLATE matrixes (only e and f have significative
   values), combine them. Quicker than multiplying them, for this
   precise case."
   ([{m1e :e m1f :f} {m2e :e m2f :f}]
-   (Matrix.
+   (Matrix. 1 0 0 1 (+ m1e m2e) (+ m1f m2f)))
-    1
+
-    0
-    0
-     1
-    (+ m1e m2e)
-    (+ m1f m2f)))
   ([m1 m2 & others]
    (reduce add-translate (add-translate m1 m2) others)))
 

common/src/app/common/geom/shapes/transforms.cljc

@@ -520,6 +520,7 @@
 (defn calc-transformed-parent-rect
   [{:keys [selrect] :as shape} {:keys [displacement resize-transform-inverse resize-vector resize-origin resize-vector-2 resize-origin-2]}]
 
+  ;; FIXME: Improve Performance
   (let [resize-transform-inverse (or resize-transform-inverse (gmt/matrix))
 
         displacement

common/src/app/common/pages/helpers.cljc

@@ -46,13 +46,14 @@
 (defn get-root-shape
   "Get the root shape linked to a component for this shape, if any"
   [shape objects]
-  (if-not (:shape-ref shape)
+
-    nil
+  (cond
-    (if (:component-root? shape)
+    (some? (:component-root? shape))
-      shape
+    shape
-      (if-let [parent-id (:parent-id shape)]
+
-        (get-root-shape (get objects parent-id) objects)
+    (some? (:shape-ref shape))
-        nil))))
+    (recur (get objects (:parent-id shape))
+           objects)))
 
 (defn make-container
   [page-or-component type]

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

@@ -247,7 +247,7 @@
                 (gsh/calc-child-modifiers shape child modifiers ignore-constraints transformed-rect)]
 
             (cond-> modif-tree
-              (d/not-empty? (d/without-keys child-modifiers [:ignore-geometry?]))
+              (d/not-empty? (dissoc child-modifiers :ignore-geometry?))
               (set-modifiers-recursive objects
                                        child
                                        child-modifiers

frontend/src/app/main/store.cljs

@@ -46,17 +46,10 @@
          (rx/subs #(reset! buffer (vec %))))
     buffer))
 
-(defn emit!
+(def emit! (partial ptk/emit! state))
-  ([] nil)
-  ([event]
-   (ptk/emit! state event)
-   nil)
-  ([event & events]
-   (apply ptk/emit! state (cons event events))
-   nil))
 
 (defn emitf
   [& events]
-  #(apply ptk/emit! state events))
+  #(ptk/emit! state events))
 
 

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

@@ -77,13 +77,13 @@
                             :key (:id item)}]))]))
 
 (mf/defc shape-wrapper
-  {::mf/wrap [#(mf/memo' % (mf/check-props ["shape" "frame"]))]
+  {::mf/wrap [#(mf/memo' % (mf/check-props ["shape"]))]
    ::mf/wrap-props false}
   [props]
   (let [shape  (obj/get props "shape")
         frame  (obj/get props "frame")
-        shape  (-> (geom/transform-shape shape {:round-coords? false})
+        shape  (geom/translate-to-frame shape frame)
-                   (geom/translate-to-frame frame))
+
         opts  #js {:shape shape
                    :frame frame}
 

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

@@ -6,6 +6,7 @@
 
 (ns app.main.ui.workspace.shapes.frame
   (:require
+   [app.common.data :as d]
    [app.common.geom.shapes :as gsh]
    [app.common.pages :as cp]
    [app.main.ui.hooks :as hooks]
@@ -101,8 +102,7 @@
             objects     (unchecked-get props "objects")
             thumbnail?  (unchecked-get props "thumbnail?")
 
-            shape        (gsh/transform-shape shape)
+            children     (-> (mapv (d/getf objects) (:shapes shape))
-            children     (-> (mapv #(get objects %) (:shapes shape))
                              (hooks/use-equal-memo))
 
             all-children (-> (cp/get-children-objects (:id shape) objects)

frontend/src/app/main/ui/workspace/sidebar/layers.cljs

@@ -308,6 +308,7 @@
                     :bool-type]))
 
 (defn- strip-objects
+  "Remove unnecesary data from objects map"
   [objects]
   (persistent!
    (->> objects
@@ -320,8 +321,11 @@
   {::mf/wrap-props false
    ::mf/wrap [mf/memo #(mf/throttle % 200)]}
   [props]
-  (let [objects (obj/get props "objects")
+  (let [objects (-> (obj/get props "objects")
-        objects (strip-objects objects)]
+                    (hooks/use-equal-memo))
+        objects (mf/use-memo
+                 (mf/deps objects)
+                 #(strip-objects objects))]
     [:& layers-tree {:objects objects}]))
 
 ;; --- Layers Toolbox

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

@@ -61,11 +61,11 @@
         ;; DEREFS
         drawing           (mf/deref refs/workspace-drawing)
         options           (mf/deref refs/workspace-page-options)
-        objects           (mf/deref refs/workspace-page-objects)
+        base-objects      (mf/deref refs/workspace-page-objects)
         object-modifiers  (mf/deref refs/workspace-modifiers)
         objects           (mf/use-memo
-                           (mf/deps objects object-modifiers)
+                           (mf/deps base-objects object-modifiers)
-                           #(gsh/merge-modifiers objects object-modifiers))
+                           #(gsh/merge-modifiers base-objects object-modifiers))
         background        (get options :background clr/canvas)
 
         ;; STATE
@@ -163,7 +163,7 @@
     [:div.viewport
      [:div.viewport-overlays
 
-      [:& wtr/frame-renderer {:objects objects
+      [:& wtr/frame-renderer {:objects base-objects
                               :background background}]
 
       (when show-comments?

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

@@ -22,7 +22,7 @@
 
   [:g.draw-area
    [:g {:style {:pointer-events "none"}}
-    [:& shapes/shape-wrapper {:shape shape}]]
+    [:& shapes/shape-wrapper {:shape (gsh/transform-shape shape)}]]
 
    (case tool
      :path      [:& path-editor {:shape shape :zoom zoom}]

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

@@ -6,13 +6,14 @@
 
 (ns app.main.ui.workspace.viewport.pixel-overlay
   (:require
+   [app.common.data :as d]
    [app.common.uuid :as uuid]
    [app.main.data.modal :as modal]
    [app.main.data.workspace.colors :as dwc]
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.cursors :as cur]
-   [app.main.ui.workspace.shapes :refer [shape-wrapper frame-wrapper]]
+   [app.main.ui.workspace.shapes :as shapes]
    [app.util.dom :as dom]
    [app.util.keyboard :as kbd]
    [app.util.object :as obj]
@@ -36,16 +37,16 @@
   (let [data     (mf/deref refs/workspace-page)
         objects  (:objects data)
         root     (get objects uuid/zero)
-        shapes   (->> (:shapes root) (map #(get objects %)))]
+        shapes   (->> (:shapes root)
-    [:*
+                      (map (d/getf objects)))]
-     [:g.shapes
+    [:g.shapes
-      (for [item shapes]
+     (for [item shapes]
-        (if (= (:type item) :frame)
+       (if (= (:type item) :frame)
-          [:& frame-wrapper {:shape item
+         [:& shapes/frame-wrapper {:shape item
-                             :key (:id item)
+                                   :key (:id item)
-                             :objects objects}]
+                                   :objects objects}]
-          [:& shape-wrapper {:shape item
+         [:& shapes/shape-wrapper {:shape item
-                             :key (:id item)}]))]]))
+                                   :key (:id item)}]))]))
 
 (mf/defc pixel-overlay
   {::mf/wrap-props false}

frontend/src/debug.cljs

@@ -5,10 +5,13 @@
 ;; Copyright (c) UXBOX Labs SL
 
 (ns debug
+  (:import [goog.math AffineTransform])
   (:require
    [app.common.data :as d]
+   [app.common.geom.matrix :as gmt]
    [app.common.math :as mth]
    [app.common.pages :as cp]
+   [app.common.perf :as perf]
    [app.main.store :as st]
    [app.util.object :as obj]
    [app.util.timers :as timers]
@@ -209,3 +212,38 @@
                                  (not (debug-exclude-events (ptk/type s))))))
          (rx/subs #(println "[stream]: " (ptk/repr-event %))))))
 
+(defn ^:export bench-matrix
+  []
+  (let [iterations 1000000
+
+        good (gmt/multiply (gmt/matrix 1 2 3 4 5 6)
+                           (gmt/matrix 1 2 3 4 5 6))
+
+        k1 (perf/start)
+        _ (dotimes [_ iterations]
+            (when-not (= good (gmt/-old-multiply (gmt/matrix 1 2 3 4 5 6)
+                                                 (gmt/matrix 1 2 3 4 5 6)))
+              (throw "ERROR")))
+        m1 (perf/measure k1)
+
+        k2 (perf/start)
+        _ (dotimes [_ iterations]
+            (when-not (= good (gmt/multiply (gmt/matrix 1 2 3 4 5 6)
+                                            (gmt/matrix 1 2 3 4 5 6)))
+              (throw "ERROR")))
+        m2 (perf/measure k2)
+
+        k3 (perf/start)
+        _ (dotimes [_ iterations]
+            (let [res (.concatenate (AffineTransform. 1 2 3 4 5 6)
+                                    (AffineTransform. 1 2 3 4 5 6))
+                  res (gmt/matrix (.-m00_ res) (.-m10_ res) (.-m01_ res) (.-m11_ res) (.-m02_ res) (.-m12_ res))]
+              
+              (when-not (= good res)
+                (throw "ERROR"))))
+        m3 (perf/measure k3)
+        ]
+
+    (println "Clojure matrix. Total: " m1 " (" (/ m1 iterations) ")")
+    (println "Clojure matrix (NEW). Total: " m2 " (" (/ m2 iterations) ")")
+    (println "Affine transform (with new). Total: " m3 " (" (/ m3 iterations) ")")))