Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-12 07:41:43 -05:00
Code Issues Activity

✨ Fix nested frames with thumbnails

Browse source
This commit is contained in:
alonso.torres 2022-06-10 15:17:20 +02:00
parent a37233be1e
commit cab2b8469e
4 changed files with 85 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
common/src/app/common/pages/helpers.cljc
View file

@ -674,3 +674,12 @@
(into selected
(mapcat #(get-children-ids objects %))
selected))
(defn get-shape-id-root-frame
[objects shape-id]
(->> (get-parents-seq objects shape-id)
(map (d/getf objects))
(d/seek #(and (= :frame (:type %))
(= uuid/zero (:frame-id %))))
:id))

5
frontend/src/app/main/data/workspace/changes.cljs
View file

@ -10,6 +10,7 @@
[app.common.logging :as log]
[app.common.pages :as cp]
[app.common.pages.changes-builder :as pcb]
[app.common.pages.helpers :as cph]
[app.common.spec :as us]
[app.common.spec.change :as spec.change]
[app.common.uuid :as uuid]
@ -126,9 +127,7 @@
[]))]
(into #{}
(comp (mapcat change->ids)
(keep #(if (= :frame (get-in objects [% :type]))
%
(get-in objects [% :frame-id])))
(keep #(cph/get-shape-id-root-frame objects %))
(remove #(= uuid/zero %)))
changes)))

8
frontend/src/app/main/data/workspace/state_helpers.cljs
View file

@ -70,6 +70,14 @@
selected (dm/get-in state [:workspace-local :selected])]
(process-selected-shapes objects selected options))))
(defn lookup-shape
([state id]
(lookup-shape state (:current-page-id state) id))
([state page-id id]
(let [objects (lookup-page-objects state page-id)]
(get objects id))))
(defn lookup-shapes
([state ids]
(lookup-shapes state (:current-page-id state) ids))

31
frontend/src/app/main/ui/workspace/shapes/frame.cljs
View file

@ -8,6 +8,7 @@
(:require
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.common.pages.helpers :as cph]
[app.common.uuid :as uuid]
[app.main.data.workspace.state-helpers :as wsh]
[app.main.data.workspace.thumbnails :as dwt]
@ -59,9 +60,25 @@
[props]
(let [shape (unchecked-get props "shape")
thumbnail? (unchecked-get props "thumbnail?")
frame-id (:id shape)
;; References to the current rendered node and the its parentn
node-ref (mf/use-var nil)
objects (wsh/lookup-page-objects @st/state)
;; Modifiers
modifiers-ref (mf/use-memo (mf/deps frame-id) #(refs/workspace-modifiers-by-frame-id frame-id))
modifiers (mf/deref modifiers-ref)]
(fdm/use-dynamic-modifiers objects @node-ref modifiers)
(if-not (cph/root-frame? shape)
[:& frame-shape {:shape shape :ref node-ref}]
;; If the current shape is root we handle its thumbnail and the dynamic modifiers
(let [thumbnail? (unchecked-get props "thumbnail?")
render-id (mf/use-memo #(str (uuid/next)))
fonts (mf/use-memo (mf/deps shape objects) #(ff/shape->fonts shape objects))
fonts (-> fonts (hooks/use-equal-memo))
@ -69,19 +86,11 @@
force-render (mf/use-state false)
;; Thumbnail data
frame-id (:id shape)
page-id (mf/use-ctx ctx/current-page-id)
;; References to the current rendered node and the its parentn
node-ref (mf/use-var nil)
;; when `true` we've called the mount for the frame
rendered? (mf/use-var false)
;; Modifiers
modifiers-ref (mf/use-memo (mf/deps frame-id) #(refs/workspace-modifiers-by-frame-id frame-id))
modifiers (mf/deref modifiers-ref)
disable-thumbnail? (d/not-empty? (dm/get-in modifiers [(:id shape) :modifiers]))
[on-load-frame-dom render-frame? thumbnail-renderer]
@ -90,8 +99,6 @@
[on-frame-load in-memory?]
(fns/use-node-store thumbnail? node-ref rendered? render-frame?)]
(fdm/use-dynamic-modifiers objects @node-ref modifiers)
(mf/use-effect
(mf/deps fonts)
(fn []
@ -131,4 +138,4 @@
{:id (dm/str "thumbnail-container-" (:id shape))
;; Hide the thumbnail when not displaying
:opacity (when (and @rendered? (not thumbnail?) (not render-frame?) (not in-memory?)) 0)}
thumbnail-renderer]]]))))
thumbnail-renderer]]]))))))