diff --git a/frontend/src/app/main/ui/shapes/attrs.cljs b/frontend/src/app/main/ui/shapes/attrs.cljs index 7047cb793..7b9275ba7 100644 --- a/frontend/src/app/main/ui/shapes/attrs.cljs +++ b/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 (contains? svg-defs id) - (str render-id "-" id) - id)) - svg-attrs (-> svg-attrs - (usvg/clean-attrs) - (usvg/update-attr-ids replace-id) - (dissoc :id)) + (if (and (empty? svg-defs) (empty? svg-attrs)) + [nil nil] + (let [replace-id (fn [id] + (if (contains? svg-defs id) + (str render-id "-" id) + id)) + svg-attrs (-> svg-attrs + (usvg/clean-attrs) + (usvg/update-attr-ids replace-id) + (dissoc :id)) - attrs (-> svg-attrs (dissoc :style) (clj->js)) - styles (-> svg-attrs (:style {}) (clj->js))] - [attrs styles])) + attrs (-> svg-attrs (dissoc :style) (clj->js)) + styles (-> svg-attrs (:style {}) (clj->js))] + [attrs styles]))) (defn add-style-attrs ([props shape] @@ -212,9 +214,12 @@ (obj/set! "style" styles))))) (defn extract-style-attrs - [shape] - (-> (obj/create) - (add-style-attrs shape))) + ([shape] + (-> (obj/create) + (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] diff --git a/frontend/src/app/main/ui/shapes/frame.cljs b/frontend/src/app/main/ui/shapes/frame.cljs index 702f956b7..05c9c3ec7 100644 --- a/frontend/src/app/main/ui/shapes/frame.cljs +++ b/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)) - render-id (mf/use-ctx muc/render-id)] - + path? (some? (.-d props))] [:* [:g {:clip-path (when (not show-content) (frame-clip-url shape render-id))} [:& frame-clip-def {:shape shape :render-id render-id}] diff --git a/frontend/src/app/util/path/format.cljs b/frontend/src/app/util/path/format.cljs index 25a198acc..e9c36d50d 100644 --- a/frontend/src/app/util/path/format.cljs +++ b/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) - (mth/precision b path-precision))) + (.toFixed a path-precision) + (.toFixed b path-precision))) ([a b c] (js* "\"\"+~{}+\",\"+~{}+\",\"+~{}" - (mth/precision a path-precision) - (mth/precision b path-precision) - (mth/precision c path-precision))) + (.toFixed a path-precision) + (.toFixed b path-precision) + (.toFixed c path-precision))) ([a b c d] (js* "\"\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}" - (mth/precision a path-precision) - (mth/precision b path-precision) - (mth/precision c path-precision) - (mth/precision d path-precision) + (.toFixed a path-precision) + (.toFixed b path-precision) + (.toFixed c path-precision) + (.toFixed d path-precision) )) ([a b c d e] (js* "\"\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}" - (mth/precision a path-precision) - (mth/precision b path-precision) - (mth/precision c path-precision) - (mth/precision d path-precision) - (mth/precision e path-precision))) + (.toFixed a path-precision) + (.toFixed b path-precision) + (.toFixed c path-precision) + (.toFixed d path-precision) + (.toFixed e path-precision))) ([a b c d e f] (js* "\"\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}" - (mth/precision a path-precision) - (mth/precision b path-precision) - (mth/precision c path-precision) - (mth/precision d path-precision) - (mth/precision e path-precision) - (mth/precision f path-precision) + (.toFixed a path-precision) + (.toFixed b path-precision) + (.toFixed c path-precision) + (.toFixed d path-precision) + (.toFixed e path-precision) + (.toFixed f path-precision) )) ([a b c d e f g] (js* "\"\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}" - (mth/precision a path-precision) - (mth/precision b path-precision) - (mth/precision c path-precision) - (mth/precision d path-precision) - (mth/precision e path-precision) - (mth/precision f path-precision) - (mth/precision g path-precision)))) + (.toFixed a path-precision) + (.toFixed b path-precision) + (.toFixed c path-precision) + (.toFixed d path-precision) + (.toFixed e path-precision) + (.toFixed f path-precision) + (.toFixed g path-precision)))) (defn- translate-params [command {:keys [x y] :as params}] diff --git a/frontend/src/app/util/strings.cljs b/frontend/src/app/util/strings.cljs index edbe86354..0eb5f74c8 100644 --- a/frontend/src/app/util/strings.cljs +++ b/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)) diff --git a/frontend/src/app/util/svg.cljs b/frontend/src/app/util/svg.cljs index 8a44d6450..03d541fa5 100644 --- a/frontend/src/app/util/svg.cljs +++ b/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-present-list key ))) + (contains? svg-attr-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 ":" "-") - (str/camel) + (ustr/camelize) (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]] - (let [key (keyword key)] + (clean-att [[att val]] + (let [att (keyword att)] (cond - (= key :class) [:className val] - (and (= key :style) (string? val)) [key (format-styles val)] - (and (= key :style) (map? val)) [key (clean-attrs val false)] - :else (vector (transform-key key) val)))) + (= att :class) [:className val] + (and (= att :style) (string? val)) [att (format-styles val)] + (and (= att :style) (map? val)) [att (clean-attrs val false)] + :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))] - (when (seq filtered-props) - (.warn js/console "Unknown properties: " (str/join ", " filtered-props )))) - - (into {} (comp (filter known-property?) (map map-fn)) attrs)))) + (into {} + (comp (filter known-property?) + (map clean-att)) + attrs)))) (defn update-attr-ids "Replaces the ids inside a property"