mirror of
https://github.com/penpot/penpot.git
synced 2025-03-19 19:21:23 -05:00
♻️ Refactor to separate constraints to its own module
This commit is contained in:
Andrés Moya
Andrés Moya
parent
61b7c279d6
commit
5f1ed511ea
10 changed files with 313 additions and 221 deletions
|
|
@ -0,0 +1,179 @@
|
|||
;; This Source Code Form is subject to the terms of the Mozilla Public
|
||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
;;
|
||||
;; Copyright (c) UXBOX Labs SL
|
||||
|
||||
(ns app.main.ui.workspace.sidebar.options.menus.constraints
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.common.geom.shapes :as gsh]
|
||||
[app.common.pages.spec :as spec]
|
||||
[app.common.uuid :as uuid]
|
||||
[app.main.data.workspace.changes :as dch]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[cuerdas.core :as str]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
(def constraint-attrs [:constraints-h
|
||||
:constraints-v
|
||||
:fixed-scroll
|
||||
:parent-id
|
||||
:frame-id])
|
||||
|
||||
(mf/defc constraints-menu
|
||||
[{:keys [ids values] :as props}]
|
||||
(let [old-shapes (deref (refs/objects-by-id ids))
|
||||
frames (map #(deref (refs/object-by-id (:frame-id %))) old-shapes)
|
||||
|
||||
shapes (as-> old-shapes $
|
||||
(map gsh/transform-shape $)
|
||||
(map gsh/translate-to-frame $ frames))
|
||||
|
||||
values (let [{:keys [x y]} (-> shapes first :points gsh/points->selrect)]
|
||||
(cond-> values
|
||||
(not= (:x values) :multiple) (assoc :x x)
|
||||
(not= (:y values) :multiple) (assoc :y y)))
|
||||
|
||||
values (let [{:keys [width height]} (-> shapes first :selrect)]
|
||||
(cond-> values
|
||||
(not= (:width values) :multiple) (assoc :width width)
|
||||
(not= (:height values) :multiple) (assoc :height height)))
|
||||
|
||||
in-frame? (and (some? ids)
|
||||
(not= (:parent-id values) uuid/zero))
|
||||
;; TODO: uncomment when fixed-scroll is fully implemented
|
||||
;; first-level? (and in-frame?
|
||||
;; (= (:parent-id values) (:frame-id values)))
|
||||
|
||||
constraints-h (get values :constraints-h (spec/default-constraints-h values))
|
||||
constraints-v (get values :constraints-v (spec/default-constraints-v values))
|
||||
|
||||
on-constraint-button-clicked
|
||||
(mf/use-callback
|
||||
(mf/deps [ids values])
|
||||
(fn [button]
|
||||
(fn [_]
|
||||
(let [constraints-h (get values :constraints-h :scale)
|
||||
constraints-v (get values :constraints-v :scale)
|
||||
|
||||
[constraint new-value]
|
||||
(case button
|
||||
:top (case constraints-v
|
||||
:top [:constraints-v :scale]
|
||||
:topbottom [:constraints-v :bottom]
|
||||
:bottom [:constraints-v :topbottom]
|
||||
[:constraints-v :top])
|
||||
:bottom (case constraints-v
|
||||
:bottom [:constraints-v :scale]
|
||||
:topbottom [:constraints-v :top]
|
||||
:top [:constraints-v :topbottom]
|
||||
[:constraints-v :bottom])
|
||||
:left (case constraints-h
|
||||
:left [:constraints-h :scale]
|
||||
:leftright [:constraints-h :right]
|
||||
:right [:constraints-h :leftright]
|
||||
[:constraints-h :left])
|
||||
:right (case constraints-h
|
||||
:right [:constraints-h :scale]
|
||||
:leftright [:constraints-h :left]
|
||||
:left [:constraints-h :leftright]
|
||||
[:constraints-h :right])
|
||||
:centerv (case constraints-v
|
||||
:center [:constraints-v :scale]
|
||||
[:constraints-v :center])
|
||||
:centerh (case constraints-h
|
||||
:center [:constraints-h :scale]
|
||||
[:constraints-h :center]))]
|
||||
(st/emit! (dch/update-shapes
|
||||
ids
|
||||
#(assoc % constraint new-value)))))))
|
||||
|
||||
on-constraint-select-changed
|
||||
(mf/use-callback
|
||||
(mf/deps [ids values])
|
||||
(fn [constraint]
|
||||
(fn [event]
|
||||
(let [value (-> (dom/get-target-val event) (keyword))]
|
||||
(when-not (str/empty? value)
|
||||
(st/emit! (dch/update-shapes
|
||||
ids
|
||||
#(assoc % constraint value))))))))
|
||||
|
||||
;; TODO: uncomment when fixed-scroll is fully implemented
|
||||
;; on-fixed-scroll-clicked
|
||||
;; (mf/use-callback
|
||||
;; (mf/deps [ids values])
|
||||
;; (fn [_]
|
||||
;; (st/emit! (dch/update-shapes ids #(update % :fixed-scroll not)))))
|
||||
]
|
||||
|
||||
;; CONSTRAINTS
|
||||
(when in-frame?
|
||||
[:div.element-set
|
||||
[:div.element-set-title
|
||||
[:span (tr "workspace.options.constraints")]]
|
||||
|
||||
[:div.element-set-content
|
||||
[:div.row-flex.align-top
|
||||
|
||||
[:div.constraints-widget
|
||||
[:div.constraints-box]
|
||||
[:div.constraint-button.top
|
||||
{:class (dom/classnames :active (or (= constraints-v :top)
|
||||
(= constraints-v :topbottom)))
|
||||
:on-click (on-constraint-button-clicked :top)}]
|
||||
[:div.constraint-button.bottom
|
||||
{:class (dom/classnames :active (or (= constraints-v :bottom)
|
||||
(= constraints-v :topbottom)))
|
||||
:on-click (on-constraint-button-clicked :bottom)}]
|
||||
[:div.constraint-button.left
|
||||
{:class (dom/classnames :active (or (= constraints-h :left)
|
||||
(= constraints-h :leftright)))
|
||||
:on-click (on-constraint-button-clicked :left)}]
|
||||
[:div.constraint-button.right
|
||||
{:class (dom/classnames :active (or (= constraints-h :right)
|
||||
(= constraints-h :leftright)))
|
||||
:on-click (on-constraint-button-clicked :right)}]
|
||||
[:div.constraint-button.centerv
|
||||
{:class (dom/classnames :active (= constraints-v :center))
|
||||
:on-click (on-constraint-button-clicked :centerv)}]
|
||||
[:div.constraint-button.centerh
|
||||
{:class (dom/classnames :active (= constraints-h :center))
|
||||
:on-click (on-constraint-button-clicked :centerh)}]]
|
||||
|
||||
[:div.constraints-form
|
||||
[:div.row-flex
|
||||
[:span.left-right i/full-screen]
|
||||
[:select.input-select {:on-change (on-constraint-select-changed :constraints-h)
|
||||
:value (d/name constraints-h "scale")}
|
||||
(when (= constraints-h :multiple)
|
||||
[:option {:value ""} (tr "settings.multiple")])
|
||||
[:option {:value "left"} (tr "workspace.options.constraints.left")]
|
||||
[:option {:value "right"} (tr "workspace.options.constraints.right")]
|
||||
[:option {:value "leftright"} (tr "workspace.options.constraints.leftright")]
|
||||
[:option {:value "center"} (tr "workspace.options.constraints.center")]
|
||||
[:option {:value "scale"} (tr "workspace.options.constraints.scale")]]]
|
||||
[:div.row-flex
|
||||
[:span.top-bottom i/full-screen]
|
||||
[:select.input-select {:on-change (on-constraint-select-changed :constraints-v)
|
||||
:value (d/name constraints-v "scale")}
|
||||
(when (= constraints-v :multiple)
|
||||
[:option {:value ""} (tr "settings.multiple")])
|
||||
[:option {:value "top"} (tr "workspace.options.constraints.top")]
|
||||
[:option {:value "bottom"} (tr "workspace.options.constraints.bottom")]
|
||||
[:option {:value "topbottom"} (tr "workspace.options.constraints.topbottom")]
|
||||
[:option {:value "center"} (tr "workspace.options.constraints.center")]
|
||||
[:option {:value "scale"} (tr "workspace.options.constraints.scale")]
|
||||
;; TODO: uncomment when fixed-scroll is fully implemented
|
||||
;; (when first-level?
|
||||
;; [:div.row-flex
|
||||
;; [:div.fix-when {:class (dom/classnames :active (:fixed-scroll values))
|
||||
;; :on-click on-fixed-scroll-clicked}
|
||||
;; i/pin
|
||||
;; [:span (tr "workspace.options.constraints.fix-when-scrolling")]]])
|
||||
]]]]]])))
|
||||
|
|
@ -9,8 +9,6 @@
|
|||
[app.common.data :as d]
|
||||
[app.common.geom.shapes :as gsh]
|
||||
[app.common.math :as math]
|
||||
[app.common.pages.spec :as spec]
|
||||
[app.common.uuid :as uuid]
|
||||
[app.main.data.workspace :as udw]
|
||||
[app.main.data.workspace.changes :as dch]
|
||||
[app.main.refs :as refs]
|
||||
|
|
@ -19,7 +17,6 @@
|
|||
[app.main.ui.icons :as i]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[cuerdas.core :as str]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
(def measure-attrs [:proportion-lock
|
||||
|
|
@ -28,12 +25,7 @@
|
|||
:rotation
|
||||
:rx :ry
|
||||
:r1 :r2 :r3 :r4
|
||||
:selrect
|
||||
:constraints-h
|
||||
:constraints-v
|
||||
:fixed-scroll
|
||||
:parent-id
|
||||
:frame-id])
|
||||
:selrect])
|
||||
|
||||
(defn- attr->string [attr values]
|
||||
(let [value (attr values)]
|
||||
|
|
@ -69,13 +61,6 @@
|
|||
|
||||
proportion-lock (:proportion-lock values)
|
||||
|
||||
in-frame? (not= (:parent-id values) uuid/zero)
|
||||
first-level? (and in-frame?
|
||||
(= (:parent-id values) (:frame-id values)))
|
||||
|
||||
constraints-h (get values :constraints-h (spec/default-constraints-h values))
|
||||
constraints-v (get values :constraints-v (spec/default-constraints-v values))
|
||||
|
||||
on-size-change
|
||||
(mf/use-callback
|
||||
(mf/deps ids)
|
||||
|
|
@ -173,64 +158,8 @@
|
|||
on-radius-r3-change #(on-radius-4-change % :r3)
|
||||
on-radius-r4-change #(on-radius-4-change % :r4)
|
||||
|
||||
select-all #(-> % (dom/get-target) (.select))
|
||||
select-all #(-> % (dom/get-target) (.select))]
|
||||
|
||||
on-constraint-button-clicked
|
||||
(mf/use-callback
|
||||
(mf/deps [ids values])
|
||||
(fn [button]
|
||||
(fn [_]
|
||||
(let [constraints-h (get values :constraints-h :scale)
|
||||
constraints-v (get values :constraints-v :scale)
|
||||
|
||||
[constraint new-value]
|
||||
(case button
|
||||
:top (case constraints-v
|
||||
:top [:constraints-v :scale]
|
||||
:topbottom [:constraints-v :bottom]
|
||||
:bottom [:constraints-v :topbottom]
|
||||
[:constraints-v :top])
|
||||
:bottom (case constraints-v
|
||||
:bottom [:constraints-v :scale]
|
||||
:topbottom [:constraints-v :top]
|
||||
:top [:constraints-v :topbottom]
|
||||
[:constraints-v :bottom])
|
||||
:left (case constraints-h
|
||||
:left [:constraints-h :scale]
|
||||
:leftright [:constraints-h :right]
|
||||
:right [:constraints-h :leftright]
|
||||
[:constraints-h :left])
|
||||
:right (case constraints-h
|
||||
:right [:constraints-h :scale]
|
||||
:leftright [:constraints-h :left]
|
||||
:left [:constraints-h :leftright]
|
||||
[:constraints-h :right])
|
||||
:centerv (case constraints-v
|
||||
:center [:constraints-v :scale]
|
||||
[:constraints-v :center])
|
||||
:centerh (case constraints-h
|
||||
:center [:constraints-h :scale]
|
||||
[:constraints-h :center]))]
|
||||
(st/emit! (dch/update-shapes
|
||||
ids
|
||||
#(assoc % constraint new-value)))))))
|
||||
|
||||
on-constraint-select-changed
|
||||
(mf/use-callback
|
||||
(mf/deps [ids values])
|
||||
(fn [constraint]
|
||||
(fn [event]
|
||||
(let [value (-> (dom/get-target-val event) (keyword))]
|
||||
(when-not (str/empty? value)
|
||||
(st/emit! (dch/update-shapes
|
||||
ids
|
||||
#(assoc % constraint value))))))))
|
||||
|
||||
on-fixed-scroll-clicked
|
||||
(mf/use-callback
|
||||
(mf/deps [ids values])
|
||||
(fn [_]
|
||||
(st/emit! (dch/update-shapes ids #(update % :fixed-scroll not)))))]
|
||||
[:*
|
||||
[:div.element-set
|
||||
[:div.element-set-content
|
||||
|
|
@ -360,69 +289,4 @@
|
|||
:min 0
|
||||
:on-click select-all
|
||||
:on-change on-radius-r4-change
|
||||
:value (attr->string :r4 values)}]]])]))]]
|
||||
|
||||
;; CONSTRAINTS
|
||||
(when in-frame?
|
||||
[:div.element-set
|
||||
[:div.element-set-title
|
||||
[:span (tr "workspace.options.constraints")]]
|
||||
|
||||
[:div.element-set-content
|
||||
[:div.row-flex.align-top
|
||||
|
||||
[:div.constraints-widget
|
||||
[:div.constraints-box]
|
||||
[:div.constraint-button.top
|
||||
{:class (dom/classnames :active (or (= constraints-v :top)
|
||||
(= constraints-v :topbottom)))
|
||||
:on-click (on-constraint-button-clicked :top)}]
|
||||
[:div.constraint-button.bottom
|
||||
{:class (dom/classnames :active (or (= constraints-v :bottom)
|
||||
(= constraints-v :topbottom)))
|
||||
:on-click (on-constraint-button-clicked :bottom)}]
|
||||
[:div.constraint-button.left
|
||||
{:class (dom/classnames :active (or (= constraints-h :left)
|
||||
(= constraints-h :leftright)))
|
||||
:on-click (on-constraint-button-clicked :left)}]
|
||||
[:div.constraint-button.right
|
||||
{:class (dom/classnames :active (or (= constraints-h :right)
|
||||
(= constraints-h :leftright)))
|
||||
:on-click (on-constraint-button-clicked :right)}]
|
||||
[:div.constraint-button.centerv
|
||||
{:class (dom/classnames :active (= constraints-v :center))
|
||||
:on-click (on-constraint-button-clicked :centerv)}]
|
||||
[:div.constraint-button.centerh
|
||||
{:class (dom/classnames :active (= constraints-h :center))
|
||||
:on-click (on-constraint-button-clicked :centerh)}]]
|
||||
|
||||
[:div.constraints-form
|
||||
[:div.row-flex
|
||||
[:span.left-right i/full-screen]
|
||||
[:select.input-select {:on-change (on-constraint-select-changed :constraints-h)
|
||||
:value (d/name constraints-h "scale")}
|
||||
(when (= constraints-h :multiple)
|
||||
[:option {:value ""} (tr "settings.multiple")])
|
||||
[:option {:value "left"} (tr "workspace.options.constraints.left")]
|
||||
[:option {:value "right"} (tr "workspace.options.constraints.right")]
|
||||
[:option {:value "leftright"} (tr "workspace.options.constraints.leftright")]
|
||||
[:option {:value "center"} (tr "workspace.options.constraints.center")]
|
||||
[:option {:value "scale"} (tr "workspace.options.constraints.scale")]]]
|
||||
[:div.row-flex
|
||||
[:span.top-bottom i/full-screen]
|
||||
[:select.input-select {:on-change (on-constraint-select-changed :constraints-v)
|
||||
:value (d/name constraints-v "scale")}
|
||||
(when (= constraints-v :multiple)
|
||||
[:option {:value ""} (tr "settings.multiple")])
|
||||
[:option {:value "top"} (tr "workspace.options.constraints.top")]
|
||||
[:option {:value "bottom"} (tr "workspace.options.constraints.bottom")]
|
||||
[:option {:value "topbottom"} (tr "workspace.options.constraints.topbottom")]
|
||||
[:option {:value "center"} (tr "workspace.options.constraints.center")]
|
||||
[:option {:value "scale"} (tr "workspace.options.constraints.scale")]]]
|
||||
;; (when first-level?
|
||||
;; [:div.row-flex
|
||||
;; [:div.fix-when {:class (dom/classnames :active (:fixed-scroll values))
|
||||
;; :on-click on-fixed-scroll-clicked}
|
||||
;; i/pin
|
||||
;; [:span (tr "workspace.options.constraints.fix-when-scrolling")]]])
|
||||
]]]])]))
|
||||
:value (attr->string :r4 values)}]]])]))]]]))
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
(ns app.main.ui.workspace.sidebar.options.shapes.circle
|
||||
(:require
|
||||
[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.layer :refer [layer-attrs layer-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
|
||||
|
|
@ -21,12 +22,15 @@
|
|||
type (:type shape)
|
||||
measure-values (select-keys shape measure-attrs)
|
||||
stroke-values (select-keys shape stroke-attrs)
|
||||
layer-values (select-keys shape layer-attrs)]
|
||||
layer-values (select-keys shape layer-attrs)
|
||||
constraint-values (select-keys shape constraint-attrs)]
|
||||
[:*
|
||||
[:& measures-menu {:ids ids
|
||||
:type type
|
||||
:values measure-values
|
||||
:options #{:size :position :rotation}}]
|
||||
[:& constraints-menu {:ids ids
|
||||
:values constraint-values}]
|
||||
[:& layer-menu {:ids ids
|
||||
:type type
|
||||
:values layer-values}]
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
[app.common.data :as d]
|
||||
[app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-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.layer :refer [layer-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.measures :refer [measures-menu]]
|
||||
|
|
@ -28,19 +29,21 @@
|
|||
objects (->> shape-with-children (group-by :id) (d/mapm (fn [_ v] (first v))))
|
||||
|
||||
type :group
|
||||
[measure-ids measure-values] (get-attrs [shape] objects :measure)
|
||||
[layer-ids layer-values] (get-attrs [shape] objects :layer)
|
||||
[fill-ids fill-values] (get-attrs [shape] objects :fill)
|
||||
[shadow-ids shadow-values] (get-attrs [shape] objects :shadow)
|
||||
[blur-ids blur-values] (get-attrs [shape] objects :blur)
|
||||
[stroke-ids stroke-values] (get-attrs [shape] objects :stroke)
|
||||
[text-ids text-values] (get-attrs [shape] objects :text)
|
||||
[svg-ids svg-values] [[(:id shape)] (select-keys shape [:svg-attrs])]
|
||||
[comp-ids comp-values] [[(:id shape)] (select-keys shape component-attrs)]]
|
||||
[measure-ids measure-values] (get-attrs [shape] objects :measure)
|
||||
[layer-ids layer-values] (get-attrs [shape] objects :layer)
|
||||
[constraint-ids constraint-values] (get-attrs [shape] objects :constraint)
|
||||
[fill-ids fill-values] (get-attrs [shape] objects :fill)
|
||||
[shadow-ids shadow-values] (get-attrs [shape] objects :shadow)
|
||||
[blur-ids blur-values] (get-attrs [shape] objects :blur)
|
||||
[stroke-ids stroke-values] (get-attrs [shape] objects :stroke)
|
||||
[text-ids text-values] (get-attrs [shape] objects :text)
|
||||
[svg-ids svg-values] [[(:id shape)] (select-keys shape [:svg-attrs])]
|
||||
[comp-ids comp-values] [[(:id shape)] (select-keys shape component-attrs)]]
|
||||
|
||||
[:div.options
|
||||
[:& measures-menu {:type type :ids measure-ids :values measure-values}]
|
||||
[:& component-menu {:ids comp-ids :values comp-values}]
|
||||
[:& constraints-menu {:ids constraint-ids :values constraint-values}]
|
||||
[:& layer-menu {:type type :ids layer-ids :values layer-values}]
|
||||
|
||||
(when-not (empty? fill-ids)
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
(ns app.main.ui.workspace.sidebar.options.shapes.image
|
||||
(:require
|
||||
[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.layer :refer [layer-attrs layer-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
|
||||
|
|
@ -17,14 +18,20 @@
|
|||
(let [ids [(:id shape)]
|
||||
type (:type shape)
|
||||
measure-values (select-keys shape measure-attrs)
|
||||
layer-values (select-keys shape layer-attrs)]
|
||||
layer-values (select-keys shape layer-attrs)
|
||||
constraint-values (select-keys shape constraint-attrs)]
|
||||
[:*
|
||||
[:& measures-menu {:ids ids
|
||||
:type type
|
||||
:values measure-values}]
|
||||
|
||||
[:& constraints-menu {:ids ids
|
||||
:values constraint-values}]
|
||||
|
||||
[:& layer-menu {:ids ids
|
||||
:type type
|
||||
:values layer-values}]
|
||||
|
||||
[:& shadow-menu {:ids ids
|
||||
:values (select-keys shape [:shadow])}]
|
||||
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
[app.common.data :as d]
|
||||
[app.common.text :as txt]
|
||||
[app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-attrs 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.layer :refer [layer-attrs layer-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
|
||||
|
|
@ -22,85 +23,94 @@
|
|||
;; attribute and how to handle them
|
||||
(def type->props
|
||||
{:frame
|
||||
{:measure :shape
|
||||
:layer :shape
|
||||
:fill :shape
|
||||
:shadow :children
|
||||
:blur :children
|
||||
:stroke :children
|
||||
:text :children}
|
||||
{:measure :shape
|
||||
:layer :shape
|
||||
:constraint :shape
|
||||
:fill :shape
|
||||
:shadow :children
|
||||
:blur :children
|
||||
:stroke :children
|
||||
:text :children}
|
||||
|
||||
:group
|
||||
{:measure :shape
|
||||
:layer :shape
|
||||
:fill :children
|
||||
:shadow :shape
|
||||
:blur :shape
|
||||
:stroke :children
|
||||
:text :children}
|
||||
{:measure :shape
|
||||
:layer :shape
|
||||
:constraint :shape
|
||||
:fill :children
|
||||
:shadow :shape
|
||||
:blur :shape
|
||||
:stroke :children
|
||||
:text :children}
|
||||
|
||||
:path
|
||||
{:measure :shape
|
||||
:layer :shape
|
||||
:fill :shape
|
||||
:shadow :shape
|
||||
:blur :shape
|
||||
:stroke :shape
|
||||
:text :ignore}
|
||||
{:measure :shape
|
||||
:layer :shape
|
||||
:constraint :shape
|
||||
:fill :shape
|
||||
:shadow :shape
|
||||
:blur :shape
|
||||
:stroke :shape
|
||||
:text :ignore}
|
||||
|
||||
:text
|
||||
{:measure :shape
|
||||
:layer :shape
|
||||
:fill :text
|
||||
:shadow :shape
|
||||
:blur :shape
|
||||
:stroke :ignore
|
||||
:text :text}
|
||||
{:measure :shape
|
||||
:layer :shape
|
||||
:constraint :shape
|
||||
:fill :text
|
||||
:shadow :shape
|
||||
:blur :shape
|
||||
:stroke :ignore
|
||||
:text :text}
|
||||
|
||||
:image
|
||||
{:measure :shape
|
||||
:layer :shape
|
||||
:fill :ignore
|
||||
:shadow :shape
|
||||
:blur :shape
|
||||
:stroke :ignore
|
||||
:text :ignore}
|
||||
{:measure :shape
|
||||
:layer :shape
|
||||
:constraint :shape
|
||||
:fill :ignore
|
||||
:shadow :shape
|
||||
:blur :shape
|
||||
:stroke :ignore
|
||||
:text :ignore}
|
||||
|
||||
:rect
|
||||
{:measure :shape
|
||||
:layer :shape
|
||||
:fill :shape
|
||||
:shadow :shape
|
||||
:blur :shape
|
||||
:stroke :shape
|
||||
:text :ignore}
|
||||
{:measure :shape
|
||||
:layer :shape
|
||||
:constraint :shape
|
||||
:fill :shape
|
||||
:shadow :shape
|
||||
:blur :shape
|
||||
:stroke :shape
|
||||
:text :ignore}
|
||||
|
||||
:circle
|
||||
{:measure :shape
|
||||
:layer :shape
|
||||
:fill :shape
|
||||
:shadow :shape
|
||||
:blur :shape
|
||||
:stroke :shape
|
||||
:text :ignore}
|
||||
{:measure :shape
|
||||
:layer :shape
|
||||
:constraint :shape
|
||||
:fill :shape
|
||||
:shadow :shape
|
||||
:blur :shape
|
||||
:stroke :shape
|
||||
:text :ignore}
|
||||
|
||||
:svg-raw
|
||||
{:measure :shape
|
||||
:layer :shape
|
||||
:fill :shape
|
||||
:shadow :shape
|
||||
:blur :shape
|
||||
:stroke :shape
|
||||
:text :ignore}})
|
||||
{:measure :shape
|
||||
:layer :shape
|
||||
:constraint :shape
|
||||
:fill :shape
|
||||
:shadow :shape
|
||||
:blur :shape
|
||||
:stroke :shape
|
||||
:text :ignore}})
|
||||
|
||||
(def props->attrs
|
||||
{:measure measure-attrs
|
||||
:layer layer-attrs
|
||||
:fill fill-attrs
|
||||
:shadow shadow-attrs
|
||||
:blur blur-attrs
|
||||
:stroke stroke-attrs
|
||||
:text ot/attrs})
|
||||
{:measure measure-attrs
|
||||
:layer layer-attrs
|
||||
:constraint constraint-attrs
|
||||
:fill fill-attrs
|
||||
:shadow shadow-attrs
|
||||
:blur blur-attrs
|
||||
:stroke stroke-attrs
|
||||
:text ot/attrs})
|
||||
|
||||
(def shadow-keys [:style :color :offset-x :offset-y :blur :spread])
|
||||
|
||||
|
|
@ -176,18 +186,22 @@
|
|||
objects (->> shapes-with-children (group-by :id) (d/mapm (fn [_ v] (first v))))
|
||||
|
||||
type :multiple
|
||||
[measure-ids measure-values] (get-attrs shapes objects :measure)
|
||||
[layer-ids layer-values] (get-attrs shapes objects :layer)
|
||||
[fill-ids fill-values] (get-attrs shapes objects :fill)
|
||||
[shadow-ids shadow-values] (get-attrs shapes objects :shadow)
|
||||
[blur-ids blur-values] (get-attrs shapes objects :blur)
|
||||
[stroke-ids stroke-values] (get-attrs shapes objects :stroke)
|
||||
[text-ids text-values] (get-attrs shapes objects :text)]
|
||||
[measure-ids measure-values] (get-attrs shapes objects :measure)
|
||||
[layer-ids layer-values] (get-attrs shapes objects :layer)
|
||||
[constraint-ids constraint-values] (get-attrs shapes objects :constraint)
|
||||
[fill-ids fill-values] (get-attrs shapes objects :fill)
|
||||
[shadow-ids shadow-values] (get-attrs shapes objects :shadow)
|
||||
[blur-ids blur-values] (get-attrs shapes objects :blur)
|
||||
[stroke-ids stroke-values] (get-attrs shapes objects :stroke)
|
||||
[text-ids text-values] (get-attrs shapes objects :text)]
|
||||
|
||||
[:div.options
|
||||
(when-not (empty? measure-ids)
|
||||
[:& measures-menu {:type type :ids measure-ids :values measure-values}])
|
||||
|
||||
(when-not (empty? constraint-ids)
|
||||
[:& constraints-menu {:ids constraint-ids :values constraint-values}])
|
||||
|
||||
(when-not (empty? layer-ids)
|
||||
[:& layer-menu {:type type :ids layer-ids :values layer-values}])
|
||||
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
(ns app.main.ui.workspace.sidebar.options.shapes.path
|
||||
(:require
|
||||
[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.layer :refer [layer-attrs layer-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
|
||||
|
|
@ -21,11 +22,14 @@
|
|||
type (:type shape)
|
||||
measure-values (select-keys shape measure-attrs)
|
||||
stroke-values (select-keys shape stroke-attrs)
|
||||
layer-values (select-keys shape layer-attrs)]
|
||||
layer-values (select-keys shape layer-attrs)
|
||||
constraint-values (select-keys shape constraint-attrs)]
|
||||
[:*
|
||||
[:& measures-menu {:ids ids
|
||||
:type type
|
||||
:values measure-values}]
|
||||
[:& constraints-menu {:ids ids
|
||||
:values constraint-values}]
|
||||
[:& layer-menu {:ids ids
|
||||
:type type
|
||||
:values layer-values}]
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
(ns app.main.ui.workspace.sidebar.options.shapes.rect
|
||||
(:require
|
||||
[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.layer :refer [layer-attrs layer-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
|
||||
|
|
@ -22,6 +23,7 @@
|
|||
type (:type shape)
|
||||
measure-values (select-keys shape measure-attrs)
|
||||
layer-values (select-keys shape layer-attrs)
|
||||
constraint-values (select-keys shape constraint-attrs)
|
||||
fill-values (select-keys shape fill-attrs)
|
||||
stroke-values (select-keys shape stroke-attrs)]
|
||||
[:*
|
||||
|
|
@ -29,6 +31,9 @@
|
|||
:type type
|
||||
:values measure-values}]
|
||||
|
||||
[:& constraints-menu {:ids ids
|
||||
:values constraint-values}]
|
||||
|
||||
[:& layer-menu {:ids ids
|
||||
:type type
|
||||
:values layer-values}]
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
(ns app.main.ui.workspace.sidebar.options.shapes.svg-raw
|
||||
(:require
|
||||
[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.measures :refer [measure-attrs measures-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
|
||||
|
|
@ -93,6 +94,7 @@
|
|||
type (:type shape)
|
||||
{:keys [tag] :as content} (:content shape)
|
||||
measure-values (select-keys shape measure-attrs)
|
||||
constraint-values (select-keys shape constraint-attrs)
|
||||
fill-values (get-fill-values shape)
|
||||
stroke-values (get-stroke-values shape)]
|
||||
|
||||
|
|
@ -102,12 +104,17 @@
|
|||
:type type
|
||||
:values measure-values}]
|
||||
|
||||
[:& constraints-menu {:ids ids
|
||||
:values constraint-values}]
|
||||
|
||||
[:& fill-menu {:ids ids
|
||||
:type type
|
||||
:values fill-values}]
|
||||
|
||||
[:& stroke-menu {:ids ids
|
||||
:type type
|
||||
:values stroke-values}]
|
||||
|
||||
[:& shadow-menu {:ids ids
|
||||
:values (select-keys shape [:shadow])}]
|
||||
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
[app.main.data.workspace.texts :as dwt]
|
||||
[app.main.refs :as refs]
|
||||
[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-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
|
||||
|
|
@ -60,6 +61,10 @@
|
|||
:type type
|
||||
:values (select-keys shape measure-attrs)}]
|
||||
|
||||
[:& constraints-menu
|
||||
{:ids ids
|
||||
:values (select-keys shape constraint-attrs)}]
|
||||
|
||||
[:& layer-menu {:ids ids
|
||||
:type type
|
||||
:values layer-values}]
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue