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