From c0342a2c753d69ebdfcb6927b0eba162c30eab72 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Wed, 24 May 2023 11:46:30 +0200 Subject: [PATCH] :sparkles: Adds cell to shape options --- .../app/main/ui/workspace/sidebar/options.cljs | 2 +- .../options/{shapes => menus}/grid_cell.cljs | 2 +- .../ui/workspace/sidebar/options/shapes/bool.cljs | 13 ++++++++++++- .../workspace/sidebar/options/shapes/circle.cljs | 15 +++++++++++++-- .../workspace/sidebar/options/shapes/frame.cljs | 12 +++++++++++- .../workspace/sidebar/options/shapes/group.cljs | 11 +++++++++++ .../workspace/sidebar/options/shapes/image.cljs | 13 ++++++++++++- .../ui/workspace/sidebar/options/shapes/path.cljs | 13 ++++++++++++- .../ui/workspace/sidebar/options/shapes/rect.cljs | 14 +++++++++++++- .../workspace/sidebar/options/shapes/svg_raw.cljs | 13 ++++++++++++- .../ui/workspace/sidebar/options/shapes/text.cljs | 12 ++++++++++++ 11 files changed, 110 insertions(+), 10 deletions(-) rename frontend/src/app/main/ui/workspace/sidebar/options/{shapes => menus}/grid_cell.cljs (99%) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options.cljs b/frontend/src/app/main/ui/workspace/sidebar/options.cljs index 76076a7e0..c2e44baf3 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options.cljs @@ -18,12 +18,12 @@ [app.main.ui.workspace.sidebar.options.menus.align :refer [align-options]] [app.main.ui.workspace.sidebar.options.menus.bool :refer [bool-options]] [app.main.ui.workspace.sidebar.options.menus.exports :refer [exports-menu]] + [app.main.ui.workspace.sidebar.options.menus.grid-cell :as grid-cell] [app.main.ui.workspace.sidebar.options.menus.interactions :refer [interactions-menu]] [app.main.ui.workspace.sidebar.options.page :as page] [app.main.ui.workspace.sidebar.options.shapes.bool :as bool] [app.main.ui.workspace.sidebar.options.shapes.circle :as circle] [app.main.ui.workspace.sidebar.options.shapes.frame :as frame] - [app.main.ui.workspace.sidebar.options.shapes.grid-cell :as grid-cell] [app.main.ui.workspace.sidebar.options.shapes.group :as group] [app.main.ui.workspace.sidebar.options.shapes.image :as image] [app.main.ui.workspace.sidebar.options.shapes.multiple :as multiple] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/grid_cell.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs similarity index 99% rename from frontend/src/app/main/ui/workspace/sidebar/options/shapes/grid_cell.cljs rename to frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs index 9250d9a39..d99ee185b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/grid_cell.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs @@ -4,7 +4,7 @@ ;; ;; Copyright (c) KALEIDOS INC -(ns app.main.ui.workspace.sidebar.options.shapes.grid-cell +(ns app.main.ui.workspace.sidebar.options.menus.grid-cell (:require [app.common.data :as d] [app.common.data.macros :as dm] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs index 7cc2d1828..7e122d1d6 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs @@ -8,9 +8,11 @@ (:require [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.constraints :refer [constraint-attrs constraints-menu]] [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]] + [app.main.ui.workspace.sidebar.options.menus.grid-cell :as grid-cell] [app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]] [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu]] [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]] @@ -39,13 +41,22 @@ is-grid-parent-ref (mf/use-memo (mf/deps ids) #(refs/grid-layout-child? ids)) is-grid-parent? (mf/deref is-grid-parent-ref) - is-layout-child-absolute? (ctl/layout-absolute? shape)] + is-layout-child-absolute? (ctl/layout-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)] [:* [:& measures-menu {:ids ids :type type :values measure-values :shape shape}] [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}] + + (when (and (= (count ids) 1) is-layout-child? is-grid-parent?) + [:& grid-cell/options + {:shape (first parents) + :cell (ctl/get-cell-by-shape-id (first parents) (first ids))}]) (when is-layout-child? [:& layout-item-menu diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs index 75b809ab2..e985ee1e8 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs @@ -8,9 +8,11 @@ (:require [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.constraints :refer [constraint-attrs constraints-menu]] [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]] + [app.main.ui.workspace.sidebar.options.menus.grid-cell :as grid-cell] [app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]] [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu]] [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]] @@ -41,14 +43,23 @@ is-grid-parent-ref (mf/use-memo (mf/deps ids) #(refs/grid-layout-child? ids)) is-grid-parent? (mf/deref is-grid-parent-ref) - is-layout-child-absolute? (ctl/layout-absolute? shape)] + is-layout-child-absolute? (ctl/layout-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)] [:* [:& measures-menu {:ids ids :type type :values measure-values :shape shape}] [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}] - + + (when (and (= (count ids) 1) is-layout-child? is-grid-parent?) + [:& grid-cell/options + {:shape (first parents) + :cell (ctl/get-cell-by-shape-id (first parents) (first ids))}]) + (when is-layout-child? [:& layout-item-menu {:ids ids :type type diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs index 635721a2d..cafa9dbfd 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs @@ -16,6 +16,7 @@ [app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]] [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs-shape fill-menu]] [app.main.ui.workspace.sidebar.options.menus.frame-grid :refer [frame-grid]] + [app.main.ui.workspace.sidebar.options.menus.grid-cell :as grid-cell] [app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]] [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu]] [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]] @@ -49,7 +50,11 @@ is-grid-parent? (mf/deref is-grid-parent-ref) is-flex-layout-container? (ctl/flex-layout? shape) - is-layout-child-absolute? (ctl/layout-absolute? shape)] + is-layout-child-absolute? (ctl/layout-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)] [:* [:& measures-menu {:ids [(:id shape)] :values measure-values @@ -63,6 +68,11 @@ :values constraint-values}]) [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}] + (when (and (= (count ids) 1) is-layout-child? is-grid-parent?) + [:& grid-cell/options + {:shape (first parents) + :cell (ctl/get-cell-by-shape-id (first parents) (first ids))}]) + (when (or is-layout-child? is-flex-layout-container?) [:& layout-item-menu {:ids ids diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs index b7ce7775e..3ee8055a3 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs @@ -9,11 +9,13 @@ [app.common.data :as d] [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-attrs component-menu]] [app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraints-menu]] [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-menu]] + [app.main.ui.workspace.sidebar.options.menus.grid-cell :as grid-cell] [app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-menu]] [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu]] [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-menu]] @@ -47,6 +49,10 @@ is-layout-child-absolute? (ctl/layout-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) + type :group [measure-ids measure-values] (get-attrs [shape] objects :measure) [layer-ids layer-values] (get-attrs [shape] objects :layer) @@ -65,6 +71,11 @@ [:& component-menu {:ids comp-ids :values comp-values :shape shape}] ;;remove this in components-v2 [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}] + (when (and (= (count ids) 1) is-layout-child? is-grid-parent?) + [:& grid-cell/options + {:shape (first parents) + :cell (ctl/get-cell-by-shape-id (first parents) (first ids))}]) + (when is-layout-child? [:& layout-item-menu {:type type diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/image.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/image.cljs index 42173c1c9..e88082198 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/image.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/image.cljs @@ -8,9 +8,11 @@ (:require [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.constraints :refer [constraint-attrs constraints-menu]] [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]] + [app.main.ui.workspace.sidebar.options.menus.grid-cell :as grid-cell] [app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]] [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu]] [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]] @@ -41,13 +43,22 @@ is-grid-parent-ref (mf/use-memo (mf/deps ids) #(refs/grid-layout-child? ids)) is-grid-parent? (mf/deref is-grid-parent-ref) - is-layout-child-absolute? (ctl/layout-absolute? shape)] + is-layout-child-absolute? (ctl/layout-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)] [:* [:& measures-menu {:ids ids :type type :values measure-values :shape shape}] [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}] + + (when (and (= (count ids) 1) is-layout-child? is-grid-parent?) + [:& grid-cell/options + {:shape (first parents) + :cell (ctl/get-cell-by-shape-id (first parents) (first ids))}]) (when is-layout-child? [:& layout-item-menu diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs index ec97ec6eb..0c94e7b33 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs @@ -8,9 +8,11 @@ (:require [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.constraints :refer [constraint-attrs constraints-menu]] [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]] + [app.main.ui.workspace.sidebar.options.menus.grid-cell :as grid-cell] [app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]] [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu]] [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]] @@ -41,7 +43,11 @@ is-grid-parent-ref (mf/use-memo (mf/deps ids) #(refs/grid-layout-child? ids)) is-grid-parent? (mf/deref is-grid-parent-ref) - is-layout-child-absolute? (ctl/layout-absolute? shape)] + is-layout-child-absolute? (ctl/layout-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)] [:* [:& measures-menu {:ids ids :type type @@ -49,6 +55,11 @@ :shape shape}] [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}] + (when (and (= (count ids) 1) is-layout-child? is-grid-parent?) + [:& grid-cell/options + {:shape (first parents) + :cell (ctl/get-cell-by-shape-id (first parents) (first ids))}]) + (when is-layout-child? [:& layout-item-menu {:ids ids :type type diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs index ee63fe3b8..545a7e9b7 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs @@ -8,9 +8,11 @@ (:require [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.constraints :refer [constraint-attrs constraints-menu]] [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]] + [app.main.ui.workspace.sidebar.options.menus.grid-cell :as grid-cell] [app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]] [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu]] [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]] @@ -41,13 +43,23 @@ is-grid-parent-ref (mf/use-memo (mf/deps ids) #(refs/grid-layout-child? ids)) is-grid-parent? (mf/deref is-grid-parent-ref) - is-layout-child-absolute? (ctl/layout-absolute? shape)] + is-layout-child-absolute? (ctl/layout-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)] [:* [:& measures-menu {:ids ids :type type :values measure-values :shape shape}] [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}] + + (when (and (= (count ids) 1) is-layout-child? is-grid-parent?) + [:& grid-cell/options + {:shape (first parents) + :cell (ctl/get-cell-by-shape-id (first parents) (first ids))}]) + (when is-layout-child? [:& layout-item-menu {:ids ids diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs index 2d1aa06fb..be577a2cc 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs @@ -10,9 +10,11 @@ [app.common.data :as d] [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.constraints :refer [constraint-attrs constraints-menu]] [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]] + [app.main.ui.workspace.sidebar.options.menus.grid-cell :as grid-cell] [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu]] [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]] [app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]] @@ -115,7 +117,11 @@ is-grid-parent-ref (mf/use-memo (mf/deps ids) #(refs/grid-layout-child? ids)) is-grid-parent? (mf/deref is-grid-parent-ref) - is-layout-child-absolute? (ctl/layout-absolute? shape)] + is-layout-child-absolute? (ctl/layout-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)] (when (contains? svg-elements tag) [:* @@ -125,6 +131,11 @@ :shape shape}] [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}] + (when (and (= (count ids) 1) is-layout-child? is-grid-parent?) + [:& grid-cell/options + {:shape (first parents) + :cell (ctl/get-cell-by-shape-id (first parents) (first ids))}]) + (when is-layout-child? [:& layout-item-menu {:ids ids diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs index 0e8c82c03..aa40c8cde 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs @@ -10,10 +10,12 @@ [app.common.types.shape.layout :as ctl] [app.main.data.workspace.texts :as dwt :refer [text-fill-attrs root-attrs paragraph-attrs text-attrs]] [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.constraints :refer [constraint-attrs constraints-menu]] [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-menu fill-attrs]] + [app.main.ui.workspace.sidebar.options.menus.grid-cell :as grid-cell] [app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]] [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu]] [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]] @@ -39,6 +41,11 @@ layout-container-values (select-keys shape layout-container-flex-attrs) is-layout-child-absolute? (ctl/layout-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) + state-map (mf/deref refs/workspace-editor-state) shared-libs (mf/deref refs/workspace-libraries) @@ -83,6 +90,11 @@ :shape shape}] [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}] + (when (and (= (count ids) 1) is-layout-child? is-grid-parent?) + [:& grid-cell/options + {:shape (first parents) + :cell (ctl/get-cell-by-shape-id (first parents) (first ids))}]) + (when is-layout-child? [:& layout-item-menu {:ids ids