mirror of
https://github.com/penpot/penpot.git
synced 2025-05-06 02:45:54 +02:00
♻️ Move the ghost rendering to separate component.
This commit is contained in:
Andrey Antukh
Alonso Torres
parent
dbb1e6a890
commit
f12ade3b67
2 changed files with 148 additions and 122 deletions
|
|
@ -190,7 +190,6 @@
|
|||
(l/derived selector st/state =)))
|
||||
|
||||
|
||||
;; TODO: looks very inneficient access method, revisit the usage of this ref
|
||||
(def selected-objects-with-children
|
||||
(letfn [(selector [state]
|
||||
(let [selected (get-in state [:workspace-local :selected])
|
||||
|
|
|
|||
|
|
@ -184,6 +184,33 @@
|
|||
:selected selected
|
||||
:hover hover}])]))
|
||||
|
||||
(mf/defc ghost-frames
|
||||
{::mf/wrap-props false}
|
||||
[props]
|
||||
(let [modifiers (obj/get props "modifiers")
|
||||
selected (obj/get props "selected")
|
||||
|
||||
sobjects (mf/deref refs/selected-objects)
|
||||
selrect-orig (gsh/selection-rect sobjects)
|
||||
|
||||
xf (comp
|
||||
(map #(assoc % :modifiers modifiers))
|
||||
(map gsh/transform-shape))
|
||||
|
||||
selrect (->> (into [] xf sobjects)
|
||||
(gsh/selection-rect))]
|
||||
[:svg.ghost
|
||||
{:x (:x selrect)
|
||||
:y (:y selrect)
|
||||
:width (:width selrect)
|
||||
:height (:height selrect)
|
||||
:style {:pointer-events "none"}}
|
||||
|
||||
[:g {:transform (str/fmt "translate(%s,%s)" (- (:x selrect-orig)) (- (:y selrect-orig)))}
|
||||
[:& frames
|
||||
{:ids selected
|
||||
:ghost? true}]]]))
|
||||
|
||||
(defn format-viewbox [vbox]
|
||||
(str/join " " [(+ (:x vbox 0) (:left-offset vbox 0))
|
||||
(:y vbox 0)
|
||||
|
|
@ -337,6 +364,7 @@
|
|||
(st/emit! (ms/->KeyboardEvent :up key ctrl? shift? alt?)))))
|
||||
|
||||
translate-point-to-viewport
|
||||
(mf/use-callback
|
||||
(fn [pt]
|
||||
(let [viewport (mf/ref-val viewport-ref)
|
||||
vbox (.. ^js viewport -viewBox -baseVal)
|
||||
|
|
@ -349,12 +377,13 @@
|
|||
(-> (gpt/subtract pt brect)
|
||||
(gpt/divide (gpt/point @refs/selected-zoom))
|
||||
(gpt/add box)
|
||||
(gpt/round 0))))
|
||||
(gpt/round 0)))))
|
||||
|
||||
on-mouse-move
|
||||
(mf/use-callback
|
||||
(fn [event]
|
||||
(let [event (.getBrowserEvent ^js event)
|
||||
raw-pt (dom/get-client-position ^js event)
|
||||
raw-pt (dom/get-client-position event)
|
||||
pt (translate-point-to-viewport raw-pt)
|
||||
|
||||
;; We calculate the delta because Safari's MouseEvent.movementX/Y drop
|
||||
|
|
@ -370,7 +399,7 @@
|
|||
(st/emit! (ms/->PointerEvent :viewport pt
|
||||
(kbd/ctrl? event)
|
||||
(kbd/shift? event)
|
||||
(kbd/alt? event)))))
|
||||
(kbd/alt? event))))))
|
||||
|
||||
on-mouse-wheel
|
||||
(mf/use-callback
|
||||
|
|
@ -398,24 +427,27 @@
|
|||
(st/emit! (dw/update-viewport-position {:y #(+ % delta)}))))))))
|
||||
|
||||
on-drag-enter
|
||||
(mf/use-callback
|
||||
(fn [e]
|
||||
(when (or (dnd/has-type? e "app/shape")
|
||||
(dnd/has-type? e "app/component")
|
||||
(dnd/has-type? e "Files")
|
||||
(dnd/has-type? e "text/uri-list"))
|
||||
(dom/prevent-default e)))
|
||||
(dom/prevent-default e))))
|
||||
|
||||
on-drag-over
|
||||
(mf/use-callback
|
||||
(fn [e]
|
||||
(when (or (dnd/has-type? e "app/shape")
|
||||
(dnd/has-type? e "app/component")
|
||||
(dnd/has-type? e "Files")
|
||||
(dnd/has-type? e "text/uri-list"))
|
||||
(dom/prevent-default e)))
|
||||
(dom/prevent-default e))))
|
||||
|
||||
;; TODO: seems duplicated callback is the same as one located
|
||||
;; in left_toolbar
|
||||
on-uploaded
|
||||
(mf/use-callback
|
||||
(fn [{:keys [id name] :as image} {:keys [x y]}]
|
||||
(let [shape {:name name
|
||||
:width (:width image)
|
||||
|
|
@ -427,9 +459,10 @@
|
|||
:id (:id image)
|
||||
:path (:path image)}}
|
||||
aspect-ratio (/ (:width image) (:height image))]
|
||||
(st/emit! (dw/create-and-add-shape :image x y shape))))
|
||||
(st/emit! (dw/create-and-add-shape :image x y shape)))))
|
||||
|
||||
on-drop
|
||||
(mf/use-callback
|
||||
(fn [event]
|
||||
(dom/prevent-default event)
|
||||
(let [point (gpt/point (.-clientX event) (.-clientY event))
|
||||
|
|
@ -478,19 +511,21 @@
|
|||
}]
|
||||
(st/emit! (dw/upload-media-objects
|
||||
(with-meta params
|
||||
{:on-success #(on-uploaded % viewport-coord)})))))))
|
||||
{:on-success #(on-uploaded % viewport-coord)}))))))))
|
||||
|
||||
on-paste
|
||||
(mf/use-callback
|
||||
(fn [event]
|
||||
(st/emit! (dw/paste-from-event event)))
|
||||
(st/emit! (dw/paste-from-event event))))
|
||||
|
||||
on-resize
|
||||
(mf/use-callback
|
||||
(fn [event]
|
||||
(let [node (mf/ref-val viewport-ref)
|
||||
prnt (dom/get-parent node)
|
||||
size (dom/get-client-size prnt)]
|
||||
;; We schedule the event so it fires after `initialize-page` event
|
||||
(timers/schedule #(st/emit! (dw/update-viewport-size size)))))
|
||||
(timers/schedule #(st/emit! (dw/update-viewport-size size))))))
|
||||
|
||||
options (mf/deref refs/workspace-page-options)]
|
||||
|
||||
|
|
@ -575,19 +610,11 @@
|
|||
"auto")}}
|
||||
[:& frames {:key page-id
|
||||
:hover (:hover local)
|
||||
:selected (:selected selected)}]
|
||||
:selected selected}]
|
||||
|
||||
(when (= :move (:transform local))
|
||||
[:svg.ghost
|
||||
{:x (:x selrect)
|
||||
:y (:y selrect)
|
||||
:width (:width selrect)
|
||||
:height (:height selrect)
|
||||
:style {:pointer-events "none"}}
|
||||
|
||||
[:g {:transform (str/fmt "translate(%s,%s)" (- (:x selrect-orig)) (- (:y selrect-orig)))}
|
||||
[:& frames {:ids selected
|
||||
:ghost? true}]]])
|
||||
[:& ghost-frames {:modifiers (:modifiers local)
|
||||
:selected selected}])
|
||||
|
||||
(when (seq selected)
|
||||
[:& selection-handlers {:selected selected
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue