From b9e3426532e28f6f67b3355a2d42061977871f64 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Moya?= Date: Tue, 15 Feb 2022 09:55:06 +0100 Subject: [PATCH] :wrench: Refactor calculation of multi selection attributes --- common/src/app/common/attrs.cljc | 1 - common/src/app/common/pages/common.cljc | 317 ++++++++++++++++++ .../workspace/sidebar/options/menus/fill.cljs | 2 +- .../sidebar/options/shapes/multiple.cljs | 18 +- 4 files changed, 327 insertions(+), 11 deletions(-) diff --git a/common/src/app/common/attrs.cljc b/common/src/app/common/attrs.cljc index febb78446..05332c5be 100644 --- a/common/src/app/common/attrs.cljc +++ b/common/src/app/common/attrs.cljc @@ -36,7 +36,6 @@ ;; :rx nil ;; :ry nil} ;; - (defn get-attrs-multi ([objs attrs] (get-attrs-multi objs attrs = identity)) diff --git a/common/src/app/common/pages/common.cljc b/common/src/app/common/pages/common.cljc index 43cd9371c..1d0e3e6a1 100644 --- a/common/src/app/common/pages/common.cljc +++ b/common/src/app/common/pages/common.cljc @@ -65,3 +65,320 @@ :constraints-v :constraints-group :fixed-scroll :constraints-group}) +;; Attributes that may directly be edited by the user with forms +(def editable-attrs + {:frame #{:proportion-lock + :width :height + :x :y + :selrect + + :opacity + :blend-mode + :blocked + :hidden + + :fills + :fill-color + :fill-opacity + :fill-color-ref-id + :fill-color-ref-file + :fill-color-gradient + :hide-fill-on-export} + + :group #{:proportion-lock + :width :height + :x :y + :selrect + + :constraints-h + :constraints-v + :fixed-scroll + :parent-id + :frame-id + + :opacity + :blend-mode + :blocked + :hidden + + :shadow + + :blur} + + :rect #{:proportion-lock + :width :height + :x :y + :rotation + :rx :ry + :r1 :r2 :r3 :r4 + :selrect + + :constraints-h + :constraints-v + :fixed-scroll + :parent-id + :frame-id + + :opacity + :blend-mode + :blocked + :hidden + + :fills + :fill-color + :fill-opacity + :fill-color-ref-id + :fill-color-ref-file + :fill-color-gradient + + :stroke-style + :stroke-alignment + :stroke-width + :stroke-color + :stroke-color-ref-id + :stroke-color-ref-file + :stroke-opacity + :stroke-color-gradient + :stroke-cap-start + :stroke-cap-end + + :shadow + + :blur} + + :circle #{:proportion-lock + :width :height + :x :y + :rotation + :selrect + + :constraints-h + :constraints-v + :fixed-scroll + :parent-id + :frame-id + + :opacity + :blend-mode + :blocked + :hidden + + :fills + :fill-color + :fill-opacity + :fill-color-ref-id + :fill-color-ref-file + :fill-color-gradient + + :stroke-style + :stroke-alignment + :stroke-width + :stroke-color + :stroke-color-ref-id + :stroke-color-ref-file + :stroke-opacity + :stroke-color-gradient + :stroke-cap-start + :stroke-cap-end + + :shadow + + :blur} + + :path #{:proportion-lock + :width :height + :x :y + :rotation + :selrect + + :constraints-h + :constraints-v + :fixed-scroll + :parent-id + :frame-id + + :opacity + :blend-mode + :blocked + :hidden + + :fills + :fill-color + :fill-opacity + :fill-color-ref-id + :fill-color-ref-file + :fill-color-gradient + + :stroke-style + :stroke-alignment + :stroke-width + :stroke-color + :stroke-color-ref-id + :stroke-color-ref-file + :stroke-opacity + :stroke-color-gradient + :stroke-cap-start + :stroke-cap-end + + :shadow + + :blur} + + :text #{:proportion-lock + :width :height + :x :y + :rotation + :rx :ry + :r1 :r2 :r3 :r4 + :selrect + + :constraints-h + :constraints-v + :fixed-scroll + :parent-id + :frame-id + + :opacity + :blend-mode + :blocked + :hidden + + :fill-color + :fill-opacity + :fill-color-ref-id + :fill-color-ref-file + :fill-color-gradient + + :shadow + + :blur + + :typography-ref-id + :typography-ref-file + + :font-id + :font-family + :font-variant-id + :font-size + :font-weight + :font-style + + :text-align + + :text-direction + + :line-height + :letter-spacing + + :vertical-align + + :text-decoration + + :text-transform + + :grow-type} + + :image #{:proportion-lock + :width :height + :x :y + :rotation + :rx :ry + :r1 :r2 :r3 :r4 + :selrect + + :constraints-h + :constraints-v + :fixed-scroll + :parent-id + :frame-id + + :opacity + :blend-mode + :blocked + :hidden + + :shadow + + :blur} + + :svg-raw #{:proportion-lock + :width :height + :x :y + :rotation + :rx :ry + :r1 :r2 :r3 :r4 + :selrect + + :constraints-h + :constraints-v + :fixed-scroll + :parent-id + :frame-id + + :opacity + :blend-mode + :blocked + :hidden + + :fills + :fill-color + :fill-opacity + :fill-color-ref-id + :fill-color-ref-file + :fill-color-gradient + + :stroke-style + :stroke-alignment + :stroke-width + :stroke-color + :stroke-color-ref-id + :stroke-color-ref-file + :stroke-opacity + :stroke-color-gradient + :stroke-cap-start + :stroke-cap-end + + :shadow + + :blur} + + :bool #{:proportion-lock + :width :height + :x :y + :rotation + :rx :ry + :r1 :r2 :r3 :r4 + :selrect + + :constraints-h + :constraints-v + :fixed-scroll + :parent-id + :frame-id + + :opacity + :blend-mode + :blocked + :hidden + + :fill-color + :fill-opacity + :fill-color-ref-id + :fill-color-ref-file + :fill-color-gradient + + :stroke-style + :stroke-alignment + :stroke-width + :stroke-color + :stroke-color-ref-id + :stroke-color-ref-file + :stroke-opacity + :stroke-color-gradient + :stroke-cap-start + :stroke-cap-end + + :shadow + + :blur}}) + diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs index 4de4cb4e9..fd79acb39 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs @@ -44,7 +44,7 @@ :file-id (:fill-color-ref-file values) :gradient (:fill-color-gradient values)} - hide-fill-on-export? (:hide-fill-on-export values false) + hide-fill-on-export? (:hide-fill-on-export values) checkbox-ref (mf/use-ref) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs index a0d695221..b99b757da 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs @@ -8,6 +8,7 @@ (:require [app.common.attrs :as attrs] [app.common.data :as d] + [app.common.pages.common :as cpc] [app.common.text :as txt] [app.main.ui.hooks :as hooks] [app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-attrs blur-menu]] @@ -20,8 +21,11 @@ [app.main.ui.workspace.sidebar.options.menus.text :as ot] [rumext.alpha :as mf])) -;; We define a map that goes from type to -;; attribute and how to handle them +;; Define how to read each kind of attribute depending on the shape type: +;; - shape: read the attribute directly from the shape. +;; - children: read it from all the children, and then merging it. +;; - ignore: do not read this attribute from this shape. +;; - text: read it from all the content nodes, and then merging it. (def type->props {:frame {:measure :shape @@ -151,9 +155,6 @@ [v] (when v (select-keys v blur-keys))) -(defn empty-map [keys] - (into {} (map #(hash-map % nil)) keys)) - (defn get-attrs* "Given a `type` of options that we want to extract and the shapes to extract them from returns a list of tuples [id, values] with the extracted properties for the shapes that @@ -172,10 +173,9 @@ (let [props (get-in type->props [type attr-type])] (case props :ignore [ids values] - :shape [(conj ids id) - (merge-attrs values (merge - (empty-map attrs) - (select-keys shape attrs)))] + :shape (let [editable-attrs (filter (get cpc/editable-attrs (:type shape)) attrs)] + [(conj ids id) + (merge-attrs values (select-keys shape editable-attrs))]) :text [(conj ids id) (-> values (merge-attrs (select-keys shape attrs))