⚡ Improved performance of svg paths

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

@@ -146,18 +146,20 @@
 
 (defn extract-svg-attrs
   [render-id svg-defs svg-attrs]
-  (let [replace-id (fn [id]
+  (if (and (empty? svg-defs) (empty? svg-attrs))
-                     (if (contains? svg-defs id)
+    [nil nil]
-                       (str render-id "-" id)
+    (let [replace-id (fn [id]
-                       id))
+                       (if (contains? svg-defs id)
-        svg-attrs (-> svg-attrs
+                         (str render-id "-" id)
-                      (usvg/clean-attrs)
+                         id))
-                      (usvg/update-attr-ids replace-id)
+          svg-attrs (-> svg-attrs
-                      (dissoc :id))
+                        (usvg/clean-attrs)
+                        (usvg/update-attr-ids replace-id)
+                        (dissoc :id))
 
-        attrs  (-> svg-attrs (dissoc :style) (clj->js))
+          attrs  (-> svg-attrs (dissoc :style) (clj->js))
-        styles (-> svg-attrs (:style {}) (clj->js))]
+          styles (-> svg-attrs (:style {}) (clj->js))]
-    [attrs styles]))
+      [attrs styles])))
 
 (defn add-style-attrs
   ([props shape]
@@ -212,9 +214,12 @@
          (obj/set! "style" styles)))))
 
 (defn extract-style-attrs
-  [shape]
+  ([shape]
-  (-> (obj/create)
+   (-> (obj/create)
-      (add-style-attrs shape)))
+       (add-style-attrs shape)))
+  ([shape render-id]
+   (-> (obj/create)
+       (add-style-attrs shape render-id))))
 
 (defn extract-fill-attrs
   [fill-data render-id index type]

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

@@ -53,7 +53,10 @@
 
         {:keys [x y width height show-content]} shape
         transform (gsh/transform-str shape)
-        props (-> (attrs/extract-style-attrs shape)
+
+        render-id (mf/use-ctx muc/render-id)
+
+        props (-> (attrs/extract-style-attrs shape render-id)
                   (obj/merge!
                    #js {:x x
                         :y y
@@ -61,9 +64,7 @@
                         :width width
                         :height height
                         :className "frame-background"}))
-        path? (some? (.-d props))
+        path? (some? (.-d props))]
-        render-id (mf/use-ctx muc/render-id)]
-
     [:*
      [:g {:clip-path (when (not show-content) (frame-clip-url shape render-id))}
       [:& frame-clip-def {:shape shape :render-id render-id}]

frontend/src/app/util/path/format.cljs

@@ -6,7 +6,6 @@
 
 (ns app.util.path.format
   (:require
-   [app.common.math :as mth]
    [app.common.path.commands :as upc]
    [app.common.path.subpaths :refer [pt=]]
    [app.util.array :as arr]))
@@ -16,48 +15,48 @@
 (defn- join-params
   ([a]
    (js* "\"\"+~{}"
-        (mth/precision a path-precision)))
+        (.toFixed a path-precision)))
   ([a b]
    (js* "\"\"+~{}+\",\"+~{}"
-        (mth/precision a path-precision)
+        (.toFixed a path-precision)
-        (mth/precision b path-precision)))
+        (.toFixed b path-precision)))
   ([a b c]
    (js* "\"\"+~{}+\",\"+~{}+\",\"+~{}"
-        (mth/precision a path-precision)
+        (.toFixed a path-precision)
-        (mth/precision b path-precision)
+        (.toFixed b path-precision)
-        (mth/precision c path-precision)))
+        (.toFixed c path-precision)))
   ([a b c d]
    (js* "\"\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}"
-        (mth/precision a path-precision)
+        (.toFixed a path-precision)
-        (mth/precision b path-precision)
+        (.toFixed b path-precision)
-        (mth/precision c path-precision)
+        (.toFixed c path-precision)
-        (mth/precision d path-precision)
+        (.toFixed d path-precision)
         ))
   ([a b c d e]
    (js* "\"\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}"
-        (mth/precision a path-precision)
+        (.toFixed a path-precision)
-        (mth/precision b path-precision)
+        (.toFixed b path-precision)
-        (mth/precision c path-precision)
+        (.toFixed c path-precision)
-        (mth/precision d path-precision)
+        (.toFixed d path-precision)
-        (mth/precision e path-precision)))
+        (.toFixed e path-precision)))
   ([a b c d e f]
    (js* "\"\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}"
-        (mth/precision a path-precision)
+        (.toFixed a path-precision)
-        (mth/precision b path-precision)
+        (.toFixed b path-precision)
-        (mth/precision c path-precision)
+        (.toFixed c path-precision)
-        (mth/precision d path-precision)
+        (.toFixed d path-precision)
-        (mth/precision e path-precision)
+        (.toFixed e path-precision)
-        (mth/precision f path-precision)
+        (.toFixed f path-precision)
         ))
   ([a b c d e f g]
    (js* "\"\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}"
-        (mth/precision a path-precision)
+        (.toFixed a path-precision)
-        (mth/precision b path-precision)
+        (.toFixed b path-precision)
-        (mth/precision c path-precision)
+        (.toFixed c path-precision)
-        (mth/precision d path-precision)
+        (.toFixed d path-precision)
-        (mth/precision e path-precision)
+        (.toFixed e path-precision)
-        (mth/precision f path-precision)
+        (.toFixed f path-precision)
-        (mth/precision g path-precision))))
+        (.toFixed g path-precision))))
 
 (defn- translate-params
   [command {:keys [x y] :as params}]

frontend/src/app/util/strings.cljs

@@ -42,3 +42,8 @@
     (let [st (str/trim (str/lower search-term))
           nm (str/trim (str/lower name))]
       (str/includes? nm st))))
+
+(defn camelize
+  [str]
+  ;; str.replace(":", "-").replace(/-./g, x=>x[1].toUpperCase())
+  (js* "~{}.replace(\":\", \"-\").replace(/-./g, x=>x[1].toUpperCase())", str))

frontend/src/app/util/svg.cljs

@@ -12,6 +12,7 @@
    [app.common.geom.shapes :as gsh]
    [app.common.math :as mth]
    [app.common.uuid :as uuid]
+   [app.util.strings :as ustr]
    [cuerdas.core :as str]))
 
 ;; Regex for XML ids per Spec
@@ -566,19 +567,20 @@
 
 (defn clean-attrs
   "Transforms attributes to their react equivalent"
-  ([attrs] (clean-attrs attrs true))
+  ([attrs]
+   (clean-attrs attrs true))
+
   ([attrs whitelist?]
    (letfn [(known-property? [[key _]]
              (or (not whitelist?)
-                 (contains? svg-attr-list key )
+                 (contains? svg-attr-list key)
-                 (contains? svg-present-list key )))
+                 (contains? svg-present-list key)))
 
-           (transform-key [key]
+           (transform-att [key]
              (if (contains? non-react-props key)
                key
                (-> (d/name key)
-                   (str/replace ":" "-")
+                   (ustr/camelize)
-                   (str/camel)
                    (keyword))))
 
            (format-styles [style-str]
@@ -588,25 +590,27 @@
                   (group-by first)
                   (map (fn [[key val]]
                          (vector
-                          (transform-key key)
+                          (transform-att key)
                           (second (first val)))))
                   (into {})))
 
-           (map-fn [[key val]]
+           (clean-att [[att val]]
-             (let [key (keyword key)]
+             (let [att (keyword att)]
                (cond
-                 (= key :class) [:className val]
+                 (= att :class) [:className val]
-                 (and (= key :style) (string? val)) [key (format-styles val)]
+                 (and (= att :style) (string? val)) [att (format-styles val)]
-                 (and (= key :style) (map? val)) [key (clean-attrs val false)]
+                 (and (= att :style) (map? val)) [att (clean-attrs val false)]
-                 :else (vector (transform-key key) val))))
+                 :else [(transform-att att) val])))]
 
-           ]
+     ;; Removed this warning because slows a lot rendering with big svgs
+     #_(let [filtered-props (->> attrs (remove known-property?) (map first))]
+         (when (seq filtered-props)
+           (.warn js/console "Unknown properties: " (str/join ", " filtered-props  ))))
 
-     (let [filtered-props (->> attrs (remove known-property?) (map first))]
+     (into {}
-       (when (seq filtered-props)
+           (comp (filter known-property?)
-         (.warn js/console "Unknown properties: " (str/join ", " filtered-props  ))))
+                 (map clean-att))
-
+           attrs))))
-     (into {} (comp (filter known-property?) (map map-fn)) attrs))))
 
 (defn update-attr-ids
   "Replaces the ids inside a property"