mirror of
https://github.com/penpot/penpot.git
synced 2025-03-09 22:31:50 -05:00
⚡ Add efficiency optimizations to frame options component
This commit is contained in:
Andrey Antukh
parent
9b2315d39d
commit
0b18177925
2 changed files with 49 additions and 37 deletions
|
|
@ -44,7 +44,7 @@
|
|||
|
||||
(mf/defc shape-options*
|
||||
{::mf/wrap [#(mf/throttle % 60)]}
|
||||
[{:keys [shape shapes-with-children page-id file-id shared-libs]}]
|
||||
[{:keys [shape shapes-with-children page-id file-id shared-libs] :as props}]
|
||||
(let [shape-type (dm/get-prop shape :type)
|
||||
shape-id (dm/get-prop shape :id)
|
||||
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
|
||||
[:*
|
||||
(case shape-type
|
||||
:frame [:& frame/options {:shape shape :shape-with-children shapes-with-children :file-id file-id :shared-libs shared-libs}]
|
||||
:frame [:> frame/options* props]
|
||||
:group [:& group/options {:shape shape :shape-with-children shapes-with-children :file-id file-id :shared-libs shared-libs}]
|
||||
:text [:& text/options {:shape shape :file-id file-id :shared-libs shared-libs}]
|
||||
:rect [:& rect/options {:shape shape}]
|
||||
|
|
|
|||
|
|
@ -6,10 +6,9 @@
|
|||
|
||||
(ns app.main.ui.workspace.sidebar.options.shapes.frame
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.common.data.macros :as dm]
|
||||
[app.common.types.shape.layout :as ctl]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.ui.hooks :as hooks]
|
||||
[app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.color-selection :refer [color-selection-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.component :refer [component-menu]]
|
||||
|
|
@ -25,50 +24,63 @@
|
|||
[app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu]]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(mf/defc options
|
||||
[{:keys [shape file-id shape-with-children shared-libs] :as props}]
|
||||
(let [ids [(:id shape)]
|
||||
type (:type shape)
|
||||
objects (->> shape-with-children (group-by :id) (d/mapm (fn [_ v] (first v))))
|
||||
stroke-values (select-keys shape stroke-attrs)
|
||||
layer-values (select-keys shape layer-attrs)
|
||||
measure-values (select-measure-keys shape)
|
||||
constraint-values (select-keys shape constraint-attrs)
|
||||
(mf/defc options*
|
||||
[{:keys [shape file-id shapes-with-children shared-libs] :as props}]
|
||||
(let [shape-id (dm/get-prop shape :id)
|
||||
shape-type (dm/get-prop shape :type)
|
||||
|
||||
ids (mf/with-memo [shape-id]
|
||||
[shape-id])
|
||||
|
||||
stroke-values (select-keys shape stroke-attrs)
|
||||
layer-values (select-keys shape layer-attrs)
|
||||
measure-values (select-measure-keys shape)
|
||||
constraint-values (select-keys shape constraint-attrs)
|
||||
layout-container-values (select-keys shape layout-container-flex-attrs)
|
||||
layout-item-values (select-keys shape layout-item-attrs)
|
||||
layout-item-values (select-keys shape layout-item-attrs)
|
||||
|
||||
ids (hooks/use-equal-memo ids)
|
||||
is-layout-child-ref
|
||||
(mf/with-memo [ids]
|
||||
(refs/is-layout-child? ids))
|
||||
is-layout-child?
|
||||
(mf/deref is-layout-child-ref)
|
||||
|
||||
is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids))
|
||||
is-layout-child? (mf/deref is-layout-child-ref)
|
||||
is-flex-parent-ref
|
||||
(mf/with-memo [ids]
|
||||
(refs/flex-layout-child? ids))
|
||||
is-flex-parent?
|
||||
(mf/deref is-flex-parent-ref)
|
||||
|
||||
is-flex-parent-ref (mf/use-memo (mf/deps ids) #(refs/flex-layout-child? ids))
|
||||
is-flex-parent? (mf/deref is-flex-parent-ref)
|
||||
is-grid-parent-ref
|
||||
(mf/with-memo [ids]
|
||||
(refs/grid-layout-child? ids))
|
||||
is-grid-parent?
|
||||
(mf/deref is-grid-parent-ref)
|
||||
|
||||
is-grid-parent-ref (mf/use-memo (mf/deps ids) #(refs/grid-layout-child? ids))
|
||||
is-grid-parent? (mf/deref is-grid-parent-ref)
|
||||
parents-by-ids-ref
|
||||
(mf/with-memo [ids]
|
||||
(refs/parents-by-ids ids))
|
||||
parents
|
||||
(mf/deref parents-by-ids-ref)
|
||||
|
||||
is-layout-container? (ctl/any-layout? shape)
|
||||
is-flex-layout? (ctl/flex-layout? shape)
|
||||
is-grid-layout? (ctl/grid-layout? shape)
|
||||
is-layout-child-absolute? (ctl/item-absolute? shape)
|
||||
is-layout-container? (ctl/any-layout? shape)
|
||||
is-flex-layout? (ctl/flex-layout? shape)
|
||||
is-grid-layout? (ctl/grid-layout? shape)
|
||||
is-layout-child-absolute? (ctl/item-absolute? shape)]
|
||||
|
||||
ids (hooks/use-equal-memo ids)
|
||||
parents-by-ids-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))
|
||||
parents (mf/deref parents-by-ids-ref)]
|
||||
[:*
|
||||
[:& layer-menu {:ids ids
|
||||
:type type
|
||||
:type shape-type
|
||||
:values layer-values}]
|
||||
[:& measures-menu {:ids [(:id shape)]
|
||||
[:& measures-menu {:ids ids
|
||||
:values measure-values
|
||||
:type type
|
||||
:type shape-type
|
||||
:shape shape}]
|
||||
|
||||
[:& component-menu {:shapes [shape]}]
|
||||
|
||||
[:& layout-container-menu
|
||||
{:type type
|
||||
{:type shape-type
|
||||
:ids [(:id shape)]
|
||||
:values layout-container-values
|
||||
:multiple false}]
|
||||
|
|
@ -81,7 +93,7 @@
|
|||
(when (or is-layout-child? is-layout-container?)
|
||||
[:& layout-item-menu
|
||||
{:ids ids
|
||||
:type type
|
||||
:type shape-type
|
||||
:values layout-item-values
|
||||
:is-flex-parent? is-flex-parent?
|
||||
:is-grid-parent? is-grid-parent?
|
||||
|
|
@ -96,13 +108,13 @@
|
|||
:values constraint-values}])
|
||||
|
||||
[:& fill-menu {:ids ids
|
||||
:type type
|
||||
:type shape-type
|
||||
:values (select-keys shape fill-attrs-shape)}]
|
||||
[:& stroke-menu {:ids ids
|
||||
:type type
|
||||
:type shape-type
|
||||
:values stroke-values}]
|
||||
[:& color-selection-menu {:type type
|
||||
:shapes (vals objects)
|
||||
[:& color-selection-menu {:type shape-type
|
||||
:shapes shapes-with-children
|
||||
:file-id file-id
|
||||
:shared-libs shared-libs}]
|
||||
[:& shadow-menu {:ids ids
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue