Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-26 08:29:42 -05:00
Code Issues Activity

⚡ Add more performance enhancements to code react component

Browse source 
On the viewer inspect module
This commit is contained in:
Andrey Antukh 2024-02-29 16:53:23 +01:00 • committed by Alonso Torres
parent 942989824a
commit 42b68a786e
1 changed files with 63 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

127
frontend/src/app/main/ui/viewer/inspect/code.cljs
View file

@ -20,7 +20,6 @@
[app.main.ui.components.code-block :refer [code-block]] [app.main.ui.components.code-block :refer [code-block]]
[app.main.ui.components.copy-button :refer [copy-button]] [app.main.ui.components.copy-button :refer [copy-button]]
[app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]] [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
[app.main.ui.hooks :as hooks]
[app.main.ui.hooks.resize :refer [use-resize-hook]] [app.main.ui.hooks.resize :refer [use-resize-hook]]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.main.ui.shapes.text.fontfaces :refer [shapes->fonts]] [app.main.ui.shapes.text.fontfaces :refer [shapes->fonts]]
@ -50,33 +49,16 @@
</body> </body>
</html>") </html>")
;; FIXME: rename to hook naming convention (defn- use-objects [from]
(defn get-flex-elements
[page-id shapes from]
(let [ids (mapv :id shapes)
ids (hooks/use-equal-memo ids)
get-layout-children-refs
(mf/use-memo
(mf/deps ids page-id from)
#(if (= from :workspace)
(refs/workspace-get-flex-child ids)
(refs/get-flex-child-viewer ids page-id)))]
(mf/deref get-layout-children-refs)))
;; FIXME: rename to hook naming convention
(defn get-objects [from]
(let [page-objects-ref (let [page-objects-ref
(mf/use-memo (mf/with-memo [from]
(mf/deps from) (if (= from :workspace)
(fn [] ;; FIXME: fix naming consistency issues
(if (= from :workspace) refs/workspace-page-objects
refs/workspace-page-objects (refs/get-viewer-objects)))]
(refs/get-viewer-objects))))]
(mf/deref page-objects-ref))) (mf/deref page-objects-ref)))
(defn shapes->images (defn- shapes->images
[shapes] [shapes]
(->> shapes (->> shapes
(keep (keep
@ -84,7 +66,7 @@
(when-let [data (or (:metadata shape) (:fill-image shape) (-> shape :fills first :fill-image))] (when-let [data (or (:metadata shape) (:fill-image shape) (-> shape :fills first :fill-image))]
[(:id shape) (cfg/resolve-file-media data)]))))) [(:id shape) (cfg/resolve-file-media data)])))))
(defn replace-map (defn- replace-map
[value map] [value map]
(reduce (reduce
(fn [value [old new]] (fn [value [old new]]
@ -107,35 +89,39 @@
fontfaces-css* (mf/use-state nil) fontfaces-css* (mf/use-state nil)
images-data* (mf/use-state nil) images-data* (mf/use-state nil)
collapsed* (mf/use-state #{}) style-type (deref style-type*)
collapsed-css? (contains? @collapsed* :css) markup-type (deref markup-type*)
fontfaces-css (deref fontfaces-css*)
images-data (deref images-data*)
collapsed* (mf/use-state #{})
collapsed-css? (contains? @collapsed* :css)
collapsed-markup? (contains? @collapsed* :markup) collapsed-markup? (contains? @collapsed* :markup)
style-type (deref style-type*) objects (use-objects from)
markup-type (deref markup-type*)
fontfaces-css (deref fontfaces-css*)
images-data (deref images-data*)
shapes (->> shapes shapes
(map #(gsh/translate-to-frame % frame))) (mf/with-memo [shapes frame]
(mapv #(gsh/translate-to-frame % frame) shapes))
objects (get-objects from) all-children
(mf/use-memo
(mf/deps shapes objects)
(fn []
(->> shapes
(map :id)
(cfh/selected-with-children objects)
(ctst/sort-z-index objects)
(map (d/getf objects)))))
all-children (->> shapes fonts
(map :id) (mf/with-memo [all-children]
(cfh/selected-with-children objects) (shapes->fonts all-children))
(ctst/sort-z-index objects)
(map (d/getf objects)))
images-urls
(mf/with-memo [all-children]
(shapes->images all-children))
shapes (hooks/use-equal-memo shapes)
all-children (hooks/use-equal-memo all-children)
fonts (-> (shapes->fonts all-children)
(hooks/use-equal-memo))
images-urls (-> (shapes->images all-children)
(hooks/use-equal-memo))
style-code style-code
(mf/use-memo (mf/use-memo
(mf/deps fontfaces-css style-type all-children cg/generate-style-code) (mf/deps fontfaces-css style-type all-children cg/generate-style-code)
@ -156,7 +142,9 @@
(mf/use-fn (mf/use-fn
(mf/deps markup-type from) (mf/deps markup-type from)
(fn [] (fn []
(let [origin (if (= :workspace from) "workspace" "viewer")] (let [origin (if (= :workspace from)
"workspace"
"viewer")]
(st/emit! (ptk/event ::ev/event (st/emit! (ptk/event ::ev/event
{::ev/name "copy-inspect-code" {::ev/name "copy-inspect-code"
::ev/origin origin ::ev/origin origin
@ -164,9 +152,11 @@
on-style-copied on-style-copied
(mf/use-fn (mf/use-fn
(mf/deps style-type) (mf/deps style-type from)
(fn [] (fn []
(let [origin (if (= :workspace from) "workspace" "viewer")] (let [origin (if (= :workspace from)
"workspace"
"viewer")]
(st/emit! (ptk/event ::ev/event (st/emit! (ptk/event ::ev/event
{::ev/name "copy-inspect-style" {::ev/name "copy-inspect-style"
::ev/origin origin ::ev/origin origin
@ -208,17 +198,27 @@
handle-collapse handle-collapse
(mf/use-fn (mf/use-fn
(fn [e] (fn [event]
(let [panel-type (keyword (dom/get-data (dom/get-current-target e) "type"))] (let [panel-type (-> (dom/get-current-target event)
(dom/get-data "type")
(keyword))]
(swap! collapsed* (swap! collapsed*
(fn [collapsed] (fn [collapsed]
(if (contains? collapsed panel-type) (if (contains? collapsed panel-type)
(disj collapsed panel-type) (disj collapsed panel-type)
(conj collapsed panel-type)))))))] (conj collapsed panel-type)))))))
copy-css-fn
(mf/use-fn
(mf/deps style-code images-data)
#(replace-map style-code images-data))
(mf/use-effect copy-html-fn
(mf/deps fonts) (mf/use-fn
#(->> (rx/from fonts) (mf/deps markup-code images-data)
#(replace-map markup-code images-data))]
(mf/with-effect [fonts]
(->> (rx/from fonts)
(rx/merge-map fonts/fetch-font-css) (rx/merge-map fonts/fetch-font-css)
(rx/reduce conj []) (rx/reduce conj [])
(rx/subs! (rx/subs!
@ -226,9 +226,8 @@
(let [css (str/join "\n" result)] (let [css (str/join "\n" result)]
(reset! fontfaces-css* css)))))) (reset! fontfaces-css* css))))))
(mf/use-effect (mf/with-effect [images-urls]
(mf/deps images-urls) (->> (rx/from images-urls)
#(->> (rx/from images-urls)
(rx/merge-map (rx/merge-map
(fn [[_ uri]] (fn [[_ uri]]
(->> (http/fetch-data-uri uri true) (->> (http/fetch-data-uri uri true)
@ -272,13 +271,13 @@
:on-click on-expand} :on-click on-expand}
i/code-refactor] i/code-refactor]
[:& copy-button {:data #(replace-map style-code images-data) [:& copy-button {:data copy-css-fn
:class (stl/css :css-copy-btn) :class (stl/css :css-copy-btn)
:on-copied on-style-copied}]]] :on-copied on-style-copied}]]]
(when-not collapsed-css? (when-not collapsed-css?
[:div {:class (stl/css :code-row-display) [:div {:class (stl/css :code-row-display)
:style #js {"--code-height" (str (or style-size 400) "px")}} :style {:--code-height (dm/str (or style-size 400) "px")}}
[:& code-block {:type style-type [:& code-block {:type style-type
:code style-code}]]) :code style-code}]])
@ -313,13 +312,13 @@
:on-click on-expand} :on-click on-expand}
i/code-refactor] i/code-refactor]
[:& copy-button {:data #(replace-map markup-code images-data) [:& copy-button {:data copy-html-fn
:class (stl/css :html-copy-btn) :class (stl/css :html-copy-btn)
:on-copied on-markup-copied}]]] :on-copied on-markup-copied}]]]
(when-not collapsed-markup? (when-not collapsed-markup?
[:div {:class (stl/css :code-row-display) [:div {:class (stl/css :code-row-display)
:style #js {"--code-height" (str (or markup-size 400) "px")}} :style {:--code-height (dm/str (or markup-size 400) "px")}}
[:& code-block {:type markup-type [:& code-block {:type markup-type
:code markup-code}]]) :code markup-code}]])