Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-03 21:09:00 -05:00
Code Issues Activity

Merge pull request #2809 from penpot/hiru-fix-asset-with-board

Browse source 
🐛 Fix display of components with frame root in assets panel
This commit is contained in:
Eva Marco 2023-01-19 15:47:52 +01:00 • committed by GitHub
commit a3e583d745
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 34 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
frontend/src/app/main/render.cljs
View file

@ -292,34 +292,37 @@
;; used to render thumbnails on assets panel. ;; used to render thumbnails on assets panel.
(mf/defc component-svg (mf/defc component-svg
{::mf/wrap [mf/memo #(mf/deferred % ts/idle-then-raf)]} {::mf/wrap [mf/memo #(mf/deferred % ts/idle-then-raf)]}
[{:keys [objects group zoom] :or {zoom 1} :as props}] [{:keys [objects root-shape zoom] :or {zoom 1} :as props}]
(let [group-id (:id group) (let [root-shape-id (:id root-shape)
include-metadata? (mf/use-ctx export/include-metadata-ctx) include-metadata? (mf/use-ctx export/include-metadata-ctx)
vector vector
(mf/use-memo (mf/use-memo
(mf/deps (:x group) (:y group)) (mf/deps (:x root-shape) (:y root-shape))
(fn [] (fn []
(-> (gpt/point (:x group) (:y group)) (-> (gpt/point (:x root-shape) (:y root-shape))
(gpt/negate)))) (gpt/negate))))
objects objects
(mf/use-memo (mf/use-memo
(mf/deps vector objects group-id) (mf/deps vector objects root-shape-id)
(fn [] (fn []
(let [children-ids (cons group-id (cph/get-children-ids objects group-id)) (let [children-ids (cons root-shape-id (cph/get-children-ids objects root-shape-id))
update-fn #(update %1 %2 gsh/transform-shape (ctm/move-modifiers vector))] update-fn #(update %1 %2 gsh/transform-shape (ctm/move-modifiers vector))]
(reduce update-fn objects children-ids)))) (reduce update-fn objects children-ids))))
group (get objects group-id) root-shape (get objects root-shape-id)
width (* (:width group) zoom) width (* (:width root-shape) zoom)
height (* (:height group) zoom) height (* (:height root-shape) zoom)
vbox (format-viewbox {:width (:width group 0) vbox (format-viewbox {:width (:width root-shape 0)
:height (:height group 0)}) :height (:height root-shape 0)})
group-wrapper root-shape-wrapper
(mf/use-memo (mf/use-memo
(mf/deps objects) (mf/deps objects root-shape)
(fn [] (group-wrapper-factory objects)))] (fn []
(case (:type root-shape)
:group (group-wrapper-factory objects)
:frame (frame-wrapper-factory objects))))]
[:svg {:view-box vbox [:svg {:view-box vbox
:width (ust/format-precision width viewbox-decimal-precision) :width (ust/format-precision width viewbox-decimal-precision)
@ -330,8 +333,8 @@
:xmlns:penpot (when include-metadata? "https://penpot.app/xmlns") :xmlns:penpot (when include-metadata? "https://penpot.app/xmlns")
:fill "none"} :fill "none"}
[:> shape-container {:shape group} [:> shape-container {:shape root-shape}
[:& group-wrapper {:shape group :view-box vbox}]]])) [:& root-shape-wrapper {:shape root-shape :view-box vbox}]]]))
(mf/defc object-svg (mf/defc object-svg
{::mf/wrap [mf/memo]} {::mf/wrap [mf/memo]}
@ -375,12 +378,12 @@
(mf/defc component-symbol (mf/defc component-symbol
[{:keys [id data] :as props}] [{:keys [id data] :as props}]
(let [name (:name data) (let [name (:name data)
path (:path data) path (:path data)
objects (-> (:objects data) objects (-> (:objects data)
(adapt-objects-for-shape id)) (adapt-objects-for-shape id))
object (get objects id) root-shape (get objects id)
selrect (:selrect object) selrect (:selrect root-shape)
main-instance-id (:main-instance-id data) main-instance-id (:main-instance-id data)
main-instance-page (:main-instance-page data) main-instance-page (:main-instance-page data)
@ -394,8 +397,11 @@
group-wrapper group-wrapper
(mf/use-memo (mf/use-memo
(mf/deps objects) (mf/deps objects root-shape)
(fn [] (group-wrapper-factory objects)))] (fn []
(case (:type root-shape)
:group (group-wrapper-factory objects)
:frame (frame-wrapper-factory objects))))]
[:> "symbol" #js {:id (str id) [:> "symbol" #js {:id (str id)
:viewBox vbox :viewBox vbox
@ -405,8 +411,8 @@
"penpot:main-instance-x" main-instance-x "penpot:main-instance-x" main-instance-x
"penpot:main-instance-y" main-instance-y} "penpot:main-instance-y" main-instance-y}
[:title name] [:title name]
[:> shape-container {:shape object} [:> shape-container {:shape root-shape}
[:& group-wrapper {:shape object :view-box vbox}]]])) [:& group-wrapper {:shape root-shape :view-box vbox}]]]))
(mf/defc components-sprite-svg (mf/defc components-sprite-svg
{::mf/wrap-props false} {::mf/wrap-props false}

3
frontend/src/app/main/ui/workspace/sidebar/assets.cljs
View file

@ -12,6 +12,7 @@
[app.common.pages.helpers :as cph] [app.common.pages.helpers :as cph]
[app.common.spec :as us] [app.common.spec :as us]
[app.common.text :as txt] [app.common.text :as txt]
[app.common.types.component :as ctk]
[app.config :as cf] [app.config :as cf]
[app.main.data.events :as ev] [app.main.data.events :as ev]
[app.main.data.modal :as modal] [app.main.data.modal :as modal]
@ -434,7 +435,7 @@
:on-drag-over on-drag-over :on-drag-over on-drag-over
:on-drop on-drop} :on-drop on-drop}
[:& component-svg {:group (get-in component [:objects (:id component)]) [:& component-svg {:root-shape (ctk/get-component-root component)
:objects (:objects component)}] :objects (:objects component)}]
(let [renaming? (= renaming (:id component))] (let [renaming? (= renaming (:id component))]
[:* [:*