Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-25 07:58:49 -05:00
Code Issues Activity

Merge pull request #2859 from penpot/alotor-fix-code-generator-hangs

Browse source 
🐛 Fix problem with code view hanging
This commit is contained in:
Alejandro 2023-01-30 11:18:55 +01:00 • committed by GitHub
commit 5a53376b01
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 28 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -7,37 +7,34 @@
(ns app.main.ui.viewer.inspect.code (ns app.main.ui.viewer.inspect.code
(:require (:require
["js-beautify" :as beautify] ["js-beautify" :as beautify]
["react-dom/server" :as rds]
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.common.geom.shapes :as gsh] [app.common.geom.shapes :as gsh]
[app.common.uuid :as uuid]
[app.main.data.events :as ev] [app.main.data.events :as ev]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.render :as render]
[app.main.store :as st] [app.main.store :as st]
[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.hooks :as hooks] [app.main.ui.hooks :as hooks]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.util.code-gen :as cg] [app.util.code-gen :as cg]
[app.util.dom :as dom]
[cuerdas.core :as str] [cuerdas.core :as str]
[potok.core :as ptk] [potok.core :as ptk]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(defn generate-markup-code [_type shapes from] (defn generate-markup-code [objects shapes]
(let [frame (if (= from :workspace) ;; Here we can render specific HTML code
(dom/query js/document (dm/str "#shape-" uuid/zero)) (->> shapes
(dom/query js/document "#svg-frame")) (map (fn [shape]
markup-shape (dm/str
(fn [shape] "<!-- Shape: " (:name shape) " -->"
(let [selector (str "#shape-" (:id shape))] (rds/renderToStaticMarkup
(when-let [el (and frame (dom/query frame selector))] (mf/element
(str render/object-svg
(str/fmt "<!-- %s -->" (:name shape)) #js {:objects objects
(.-outerHTML el)))))] :object-id (-> shape :id)})))))
(->> shapes (str/join "\n\n")))
(map markup-shape )
(remove nil?)
(str/join "\n\n"))))
(defn format-code [code type] (defn format-code [code type]
(let [code (-> code (let [code (-> code
@ -55,6 +52,16 @@
(mf/deref get-layout-children-refs))) (mf/deref get-layout-children-refs)))
(defn get-objects [from]
(let [page-objects-ref
(mf/use-memo
(mf/deps from)
(fn []
(if (= from :workspace)
refs/workspace-page-objects
(refs/get-viewer-objects))))]
(mf/deref page-objects-ref)))
(mf/defc code (mf/defc code
[{:keys [shapes frame on-expand from]}] [{:keys [shapes frame on-expand from]}]
(let [style-type (mf/use-state "css") (let [style-type (mf/use-state "css")
@ -64,12 +71,14 @@
route (mf/deref refs/route) route (mf/deref refs/route)
page-id (:page-id (:query-params route)) page-id (:page-id (:query-params route))
flex-items (get-flex-elements page-id shapes from) flex-items (get-flex-elements page-id shapes from)
objects (get-objects from)
shapes (map #(assoc % :flex-items flex-items) shapes) shapes (map #(assoc % :flex-items flex-items) shapes)
style-code (-> (cg/generate-style-code @style-type shapes) style-code (-> (cg/generate-style-code @style-type shapes)
(format-code "css")) (format-code "css"))
markup-code (-> (mf/use-memo (mf/deps shapes) #(generate-markup-code @markup-type shapes from)) markup-code
(format-code "svg")) (-> (mf/use-memo (mf/deps shapes) #(generate-markup-code objects shapes))
(format-code "svg"))
on-markup-copied on-markup-copied
(mf/use-callback (mf/use-callback