mirror of
https://github.com/penpot/penpot.git
synced 2025-03-11 23:31:21 -05:00
✨ Fix shadows and thumbnails
This commit is contained in:
alonso.torres
parent
2799c09294
commit
45b690ed05
9 changed files with 47 additions and 34 deletions
|
|
@ -315,7 +315,7 @@
|
|||
|
||||
bounds
|
||||
(when (:show-content frame)
|
||||
(gsh/selection-rect (->> children-ids (map (d/getf objects)))))
|
||||
(gsh/selection-rect (concat [frame] (->> children-ids (map (d/getf objects))))))
|
||||
|
||||
frame
|
||||
(cond-> frame
|
||||
|
|
|
|||
|
|
@ -52,6 +52,10 @@
|
|||
[{:keys [type]}]
|
||||
(= type :image))
|
||||
|
||||
(defn svg-raw-shape?
|
||||
[{:keys [type]}]
|
||||
(= type :svg-raw))
|
||||
|
||||
(defn unframed-shape?
|
||||
"Checks if it's a non-frame shape in the top level."
|
||||
[shape]
|
||||
|
|
|
|||
|
|
@ -203,12 +203,17 @@
|
|||
(update :width + (* 2 (:horizontal padding)))
|
||||
(update :height + (* 2 (:vertical padding))))]
|
||||
|
||||
(if (cph/group-shape? object)
|
||||
(if (:masked-group? object)
|
||||
(get-object-bounds objects (-> object :shapes first))
|
||||
(->> (:shapes object)
|
||||
(into [bounds] (map (partial get-object-bounds objects)))
|
||||
(gsh/join-rects)))
|
||||
(cond
|
||||
(and (cph/group-shape? object) (:masked-group? object))
|
||||
(get-object-bounds objects (-> object :shapes first))
|
||||
|
||||
(or (cph/group-shape? object)
|
||||
(and (cph/frame-shape? object) (:show-content object)))
|
||||
(->> (:shapes object)
|
||||
(into [bounds] (map (partial get-object-bounds objects)))
|
||||
(gsh/join-rects))
|
||||
|
||||
:else
|
||||
bounds)))
|
||||
|
||||
(mf/defc page-svg
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
(ns app.main.ui.shapes.shape
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.common.pages.helpers :as cph]
|
||||
[app.common.data.macros :as dm]
|
||||
[app.common.uuid :as uuid]
|
||||
[app.main.ui.context :as muc]
|
||||
|
|
@ -48,9 +49,10 @@
|
|||
{::mf/forward-ref true
|
||||
::mf/wrap-props false}
|
||||
[props ref]
|
||||
(let [shape (obj/get props "shape")
|
||||
children (obj/get props "children")
|
||||
pointer-events (obj/get props "pointer-events")
|
||||
(let [shape (obj/get props "shape")
|
||||
children (obj/get props "children")
|
||||
pointer-events (obj/get props "pointer-events")
|
||||
disable-shadows? (obj/get props "disable-shadows?")
|
||||
|
||||
type (:type shape)
|
||||
render-id (mf/use-memo #(str (uuid/next)))
|
||||
|
|
@ -72,15 +74,16 @@
|
|||
(obj/set! "id" (dm/fmt "shape-%" (:id shape)))
|
||||
(obj/set! "style" styles))
|
||||
|
||||
wrapper-props
|
||||
(cond-> wrapper-props
|
||||
(some #(= (:type shape) %) [:group :svg-raw :frame])
|
||||
(obj/set! "filter" (filters/filter-str filter-id shape)))
|
||||
|
||||
wrapper-props
|
||||
(cond-> wrapper-props
|
||||
(= :group type)
|
||||
(attrs/add-style-attrs shape render-id))
|
||||
(attrs/add-style-attrs shape render-id)
|
||||
|
||||
(and (or (cph/group-shape? shape)
|
||||
(cph/frame-shape? shape)
|
||||
(cph/svg-raw-shape? shape))
|
||||
(not disable-shadows?))
|
||||
(obj/set! "filter" (filters/filter-str filter-id shape)))
|
||||
|
||||
svg-group? (and (contains? shape :svg-attrs) (= :group type))
|
||||
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@
|
|||
|
||||
(mf/defc viewer-wrapper
|
||||
[{:keys [wrapper-size scroll orig-frame orig-viewport-ref orig-size page file users current-viewport-ref
|
||||
size frame interactions-mode overlays zoom close-overlay section index] :as props}]
|
||||
size frame interactions-mode overlays zoom close-overlay section index children-bounds] :as props}]
|
||||
(let [{clist :list} (mf/deref refs/comments-local)
|
||||
show-comments-list (and (= section :comments) (= :show clist))]
|
||||
[:*
|
||||
|
|
@ -173,8 +173,6 @@
|
|||
:page page
|
||||
:zoom zoom}])]]]]))
|
||||
|
||||
|
||||
|
||||
(mf/defc viewer
|
||||
[{:keys [params data]}]
|
||||
|
||||
|
|
@ -407,7 +405,7 @@
|
|||
:file file
|
||||
:section section
|
||||
:local local
|
||||
:size size}
|
||||
:size size
|
||||
:index index
|
||||
:viewer-pagination viewer-pagination}]
|
||||
|
||||
|
|
@ -428,7 +426,8 @@
|
|||
:overlays overlays
|
||||
:zoom zoom
|
||||
:section section
|
||||
:index index}]))]]]))
|
||||
:index index
|
||||
:children-bounds children-bounds}]))]]]))
|
||||
|
||||
;; --- Component: Viewer Page
|
||||
|
||||
|
|
|
|||
|
|
@ -164,7 +164,6 @@
|
|||
:on-submit on-draft-submit
|
||||
:zoom zoom}])]]]))
|
||||
|
||||
|
||||
(mf/defc comments-sidebar
|
||||
[{:keys [users frame page]}]
|
||||
(let [profile (mf/deref refs/profile)
|
||||
|
|
@ -173,7 +172,7 @@
|
|||
threads (->> (vals threads-map)
|
||||
(dcm/apply-filters cstate profile)
|
||||
(filter (fn [{:keys [position]}]
|
||||
(frame-contains? frame position))))]
|
||||
(gsh/has-point? frame position))))]
|
||||
[:aside.settings-bar.settings-bar-right.comments-right-sidebar
|
||||
[:div.settings-bar-inside
|
||||
[:& wc/comments-sidebar {:users users :threads threads :page-id (:id page)}]]]))
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@
|
|||
|
||||
(ns app.main.ui.viewer.thumbnails
|
||||
(:require
|
||||
[app.common.pages.helpers :as cph]
|
||||
[app.common.geom.shapes :as gsh]
|
||||
[app.common.data :as d]
|
||||
[app.common.data.macros :as dm]
|
||||
[app.main.data.viewer :as dv]
|
||||
|
|
@ -76,12 +78,14 @@
|
|||
{::mf/wrap [mf/memo
|
||||
#(mf/deferred % ts/idle-then-raf)]}
|
||||
[{:keys [selected? frame on-click index objects]}]
|
||||
[:div.thumbnail-item {:on-click #(on-click % index)}
|
||||
[:div.thumbnail-preview
|
||||
{:class (dom/classnames :selected selected?)}
|
||||
[:& render/frame-svg {:frame frame :objects objects :show-thumbnails? true}]]
|
||||
[:div.thumbnail-info
|
||||
[:span.name {:title (:name frame)} (:name frame)]]])
|
||||
(let [children-ids (cph/get-children-ids objects (:id frame))
|
||||
children-bounds (gsh/selection-rect (concat [frame] (->> children-ids (keep (d/getf objects)))))]
|
||||
[:div.thumbnail-item {:on-click #(on-click % index)}
|
||||
[:div.thumbnail-preview
|
||||
{:class (dom/classnames :selected selected?)}
|
||||
[:& render/frame-svg {:frame (assoc frame :children-bounds children-bounds) :objects objects :show-thumbnails? true}]]
|
||||
[:div.thumbnail-info
|
||||
[:span.name {:title (:name frame)} (:name frame)]]]))
|
||||
|
||||
(mf/defc thumbnails-panel
|
||||
[{:keys [frames page index show?] :as props}]
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
childs (mf/deref childs-ref)]
|
||||
|
||||
[:& (mf/provider embed/context) {:value true}
|
||||
[:& shape-container {:shape shape :ref ref}
|
||||
[:& shape-container {:shape shape :ref ref :disable-shadows? true}
|
||||
[:& frame-shape {:shape shape :childs childs} ]]]))))
|
||||
|
||||
(defn check-props
|
||||
|
|
@ -125,7 +125,7 @@
|
|||
@node-ref)
|
||||
(when (not @rendered?) (reset! rendered? true)))))
|
||||
|
||||
[:*
|
||||
[:& shape-container {:shape shape}
|
||||
[:g.frame-container {:id (dm/str "frame-container-" (:id shape))
|
||||
:key "frame-container"
|
||||
:ref on-frame-load
|
||||
|
|
@ -135,5 +135,4 @@
|
|||
{:id (dm/str "thumbnail-container-" (:id shape))
|
||||
;; Hide the thumbnail when not displaying
|
||||
:opacity (when (and @rendered? (not thumbnail?) (not render-frame?)) 0)}
|
||||
[:& shape-container {:shape shape}
|
||||
thumbnail-renderer]]]]))))))
|
||||
thumbnail-renderer]]]))))))
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@
|
|||
|
||||
{:keys [x y width height] :as shape-bb}
|
||||
(if (:show-content shape)
|
||||
(gsh/selection-rect all-children)
|
||||
(gsh/selection-rect (concat [shape] all-children))
|
||||
(-> shape :points gsh/points->selrect))
|
||||
|
||||
fixed-width (mth/clamp width 250 2000)
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue