3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-21 15:06:13 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Proper use of hooks on frame shape.

Browse source
This commit is contained in:
Andrey Antukh 2020-04-10 17:24:53 +02:00 • committed by Alonso Torres
parent 5a6ccedf41
commit 0b4365b3c3
1 changed files with 50 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

55
frontend/src/uxbox/main/ui/shapes/frame.cljs
View file

@ -5,8 +5,7 @@
;; This Source Code Form is "Incompatible With Secondary Licenses", as ;; This Source Code Form is "Incompatible With Secondary Licenses", as
;; defined by the Mozilla Public License, v. 2.0. ;; defined by the Mozilla Public License, v. 2.0.
;; ;;
;; Copyright (c) 2015-2020 Andrey Antukh <niwi@niwi.nz> ;; Copyright (c) 2020 UXBOX Labs SL
;; Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
(ns uxbox.main.ui.shapes.frame (ns uxbox.main.ui.shapes.frame
(:require (:require
@ -51,18 +50,25 @@
(defn frame-wrapper (defn frame-wrapper
[shape-wrapper] [shape-wrapper]
(let [frame-shape (frame-shape shape-wrapper)]
(mf/fnc frame-wrapper (mf/fnc frame-wrapper
{::mf/wrap [#(mf/memo' % frame-wrapper-memo-equals?)]} {::mf/wrap [#(mf/memo' % frame-wrapper-memo-equals?)]
[{:keys [shape objects] :as props}] ::mf/wrap-props false}
(let [selected-iref (-> (mf/deps (:id shape)) [props]
(mf/use-memo #(refs/make-selected (:id shape)))) (let [shape (unchecked-get props "shape")
objects (unchecked-get props "objects")
selected-iref (mf/use-memo (mf/deps (:id shape))
#(refs/make-selected (:id shape)))
selected? (mf/deref selected-iref) selected? (mf/deref selected-iref)
zoom (mf/deref refs/selected-zoom) zoom (mf/deref refs/selected-zoom)
frame-shape (mf/use-memo #(frame-shape shape-wrapper))]
(when (and shape (not (:hidden shape)))
(let [on-mouse-down #(common/on-mouse-down % shape) on-mouse-down (mf/use-callback (mf/deps shape)
on-context-menu #(common/on-context-menu % shape) #(common/on-mouse-down % shape))
shape (merge frame-default-props shape) on-context-menu (mf/use-callback (mf/deps shape)
#(common/on-context-menu % shape))
{:keys [x y width height]} shape {:keys [x y width height]} shape
@ -74,10 +80,14 @@
(gmt/matrix? ds-modifier) (gpt/transform ds-modifier)) (gmt/matrix? ds-modifier) (gpt/transform ds-modifier))
on-double-click on-double-click
(mf/use-callback
(mf/deps (:id shape))
(fn [event] (fn [event]
(dom/prevent-default event) (dom/prevent-default event)
(st/emit! dw/deselect-all (st/emit! dw/deselect-all
(dw/select-shape (:id shape))))] (dw/select-shape (:id shape)))))]
(when-not (:hidden shape)
[:g {:class (when selected? "selected") [:g {:class (when selected? "selected")
:on-context-menu on-context-menu :on-context-menu on-context-menu
:on-double-click on-double-click :on-double-click on-double-click
@ -86,25 +96,32 @@
:y 0 :y 0
:width width :width width
:height 20 :height 20
:class-name "workspace-frame-label" :class "workspace-frame-label"
;; Ensure that the label has always the same font size, regardless of zoom ;; Ensure that the label has always the same font
;; size, regardless of zoom
;; https://css-tricks.com/transforms-on-svg-elements/ ;; https://css-tricks.com/transforms-on-svg-elements/
:transform (str :transform (str
"scale(" inv-zoom ", " inv-zoom ") " "scale(" inv-zoom ", " inv-zoom ") "
"translate(" (* zoom (:x label-pos)) ", " (* zoom (:y label-pos)) ")") "translate(" (* zoom (:x label-pos)) ", "
(* zoom (:y label-pos)) ")")
;; User may also select the frame with single click in the label ;; User may also select the frame with single click in the label
:on-click on-double-click} :on-click on-double-click}
(:name shape)] (:name shape)]
[:& frame-shape {:shape (geom/transform-shape shape) [:& frame-shape
{:shape (geom/transform-shape shape)
:childs childs}]]))))) :childs childs}]])))))
(defn frame-shape (defn frame-shape
[shape-wrapper] [shape-wrapper]
(mf/fnc frame-shape (mf/fnc frame-shape
[{:keys [shape childs] :as props}] {::mf/wrap-props false}
(let [{:keys [id x y width height]} shape [props]
(let [childs (unchecked-get props "childs")
shape (unchecked-get props "shape")
{:keys [id x y width height]} shape
props (-> (attrs/extract-style-attrs shape) props (-> (merge frame-default-props shape)
(attrs/extract-style-attrs)
(itr/obj-assign! (itr/obj-assign!
#js {:x 0 #js {:x 0
:y 0 :y 0