mirror of
https://github.com/penpot/penpot.git
synced 2025-03-14 08:41:48 -05:00
✨ Show actual coordinates while modifying and creating a shape
This commit is contained in:
Eva
Alonso Torres
parent
7e0d7ef727
commit
f9c0482949
12 changed files with 59 additions and 35 deletions
|
|
@ -6,6 +6,8 @@
|
|||
|
||||
(ns app.main.ui.workspace.sidebar.options
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.common.geom.shapes :as gsh]
|
||||
[app.main.data.workspace :as udw]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
|
|
@ -55,28 +57,37 @@
|
|||
(mf/defc options-content
|
||||
{::mf/wrap [mf/memo]}
|
||||
[{:keys [selected section shapes shapes-with-children page-id file-id]}]
|
||||
[:div.tool-window
|
||||
[:div.tool-window-content
|
||||
[:& tab-container {:on-change-tab #(st/emit! (udw/set-options-mode %))
|
||||
:selected section}
|
||||
[:& tab-element {:id :design
|
||||
:title (tr "workspace.options.design")}
|
||||
[:div.element-options
|
||||
[:& align-options]
|
||||
[:& bool-options]
|
||||
(case (count selected)
|
||||
0 [:& page/options]
|
||||
1 [:& shape-options {:shape (first shapes)
|
||||
:page-id page-id
|
||||
:file-id file-id
|
||||
:shapes-with-children shapes-with-children}]
|
||||
[:& multiple/options {:shapes-with-children shapes-with-children
|
||||
:shapes shapes}])]]
|
||||
(let [drawing (mf/deref refs/workspace-drawing)
|
||||
base-objects (-> (mf/deref refs/workspace-page-objects))
|
||||
modifiers (mf/deref refs/workspace-modifiers)
|
||||
objects-modified (mf/with-memo [base-objects modifiers]
|
||||
(gsh/merge-modifiers base-objects modifiers))
|
||||
selected-shapes (into [] (keep (d/getf objects-modified)) selected)]
|
||||
[:div.tool-window
|
||||
[:div.tool-window-content
|
||||
[:& tab-container {:on-change-tab #(st/emit! (udw/set-options-mode %))
|
||||
:selected section}
|
||||
[:& tab-element {:id :design
|
||||
:title (tr "workspace.options.design")}
|
||||
[:div.element-options
|
||||
[:& align-options]
|
||||
[:& bool-options]
|
||||
(cond
|
||||
(d/not-empty? drawing) [:& shape-options {:shape (:object drawing)
|
||||
:page-id page-id
|
||||
:file-id file-id}]
|
||||
(= 0 (count selected)) [:& page/options]
|
||||
(= 1 (count selected)) [:& shape-options {:shape (first selected-shapes)
|
||||
:page-id page-id
|
||||
:file-id file-id
|
||||
:shapes-with-children shapes-with-children}]
|
||||
:else [:& multiple/options {:shapes-with-children shapes-with-children
|
||||
:shapes selected-shapes}])]]
|
||||
|
||||
[:& tab-element {:id :prototype
|
||||
:title (tr "workspace.options.prototype")}
|
||||
[:div.element-options
|
||||
[:& interactions-menu {:shape (first shapes)}]]]]]])
|
||||
[:& tab-element {:id :prototype
|
||||
:title (tr "workspace.options.prototype")}
|
||||
[:div.element-options
|
||||
[:& interactions-menu {:shape (first shapes)}]]]]]]))
|
||||
|
||||
;; TODO: this need optimizations, selected-objects and
|
||||
;; selected-objects-with-children are derefed always but they only
|
||||
|
|
|
|||
|
|
@ -54,14 +54,17 @@
|
|||
|
||||
;; -- User/drawing coords
|
||||
(mf/defc measures-menu
|
||||
[{:keys [ids ids-with-children values type all-types] :as props}]
|
||||
[{:keys [ids ids-with-children values type all-types shape] :as props}]
|
||||
|
||||
(let [options (if (= type :multiple)
|
||||
(reduce #(union %1 %2) (map #(get type->options %) all-types))
|
||||
(get type->options type))
|
||||
|
||||
ids-with-children (or ids-with-children ids)
|
||||
|
||||
old-shapes (deref (refs/objects-by-id ids))
|
||||
old-shapes (if (= type :multiple)
|
||||
(deref (refs/objects-by-id ids))
|
||||
[shape])
|
||||
frames (map #(deref (refs/object-by-id (:frame-id %))) old-shapes)
|
||||
|
||||
shapes (as-> old-shapes $
|
||||
|
|
@ -78,6 +81,10 @@
|
|||
(not= (:width values) :multiple) (assoc :width width)
|
||||
(not= (:height values) :multiple) (assoc :height height)))
|
||||
|
||||
values (let [{:keys [rotation]} (-> shapes first)]
|
||||
(cond-> values
|
||||
(not= (:rotation values) :multiple) (assoc :rotation rotation)))
|
||||
|
||||
proportion-lock (:proportion-lock values)
|
||||
|
||||
show-presets-dropdown? (mf/use-state false)
|
||||
|
|
@ -134,7 +141,6 @@
|
|||
(fn [value]
|
||||
(st/emit! (udw/increase-rotation ids value))))
|
||||
|
||||
|
||||
on-switch-to-radius-1
|
||||
(mf/use-callback
|
||||
(mf/deps ids)
|
||||
|
|
@ -154,7 +160,6 @@
|
|||
(mf/use-callback
|
||||
(mf/deps ids)
|
||||
(fn [value]
|
||||
(prn "entro en on radius 1")
|
||||
(st/emit! (dch/update-shapes ids-with-children #(ctr/set-radius-1 % value)))))
|
||||
|
||||
on-radius-multi-change
|
||||
|
|
|
|||
|
|
@ -26,7 +26,8 @@
|
|||
[:*
|
||||
[:& measures-menu {:ids ids
|
||||
:type type
|
||||
:values measure-values}]
|
||||
:values measure-values
|
||||
:shape shape}]
|
||||
[:& constraints-menu {:ids ids
|
||||
:values constraint-values}]
|
||||
[:& layer-menu {:ids ids
|
||||
|
|
|
|||
|
|
@ -27,7 +27,8 @@
|
|||
[:*
|
||||
[:& measures-menu {:ids ids
|
||||
:type type
|
||||
:values measure-values}]
|
||||
:values measure-values
|
||||
:shape shape}]
|
||||
[:& constraints-menu {:ids ids
|
||||
:values constraint-values}]
|
||||
[:& layer-menu {:ids ids
|
||||
|
|
|
|||
|
|
@ -25,7 +25,8 @@
|
|||
[:*
|
||||
[:& measures-menu {:ids [(:id shape)]
|
||||
:values measure-values
|
||||
:type type}]
|
||||
:type type
|
||||
:shape shape}]
|
||||
[:& layer-menu {:ids ids
|
||||
:type type
|
||||
:values layer-values}]
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
[comp-ids comp-values] [[(:id shape)] (select-keys shape component-attrs)]]
|
||||
|
||||
[:div.options
|
||||
[:& measures-menu {:type type :ids measure-ids :values measure-values}]
|
||||
[:& measures-menu {:type type :ids measure-ids :values measure-values :shape shape}]
|
||||
[:& 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}]
|
||||
|
|
|
|||
|
|
@ -27,7 +27,8 @@
|
|||
[:*
|
||||
[:& measures-menu {:ids ids
|
||||
:type type
|
||||
:values measure-values}]
|
||||
:values measure-values
|
||||
:shape shape}]
|
||||
|
||||
[:& constraints-menu {:ids ids
|
||||
:values constraint-values}]
|
||||
|
|
|
|||
|
|
@ -241,7 +241,7 @@
|
|||
|
||||
[:div.options
|
||||
(when-not (empty? measure-ids)
|
||||
[:& measures-menu {:type type :all-types all-types :ids measure-ids :values measure-values}])
|
||||
[:& measures-menu {:type type :all-types all-types :ids measure-ids :values measure-values :shape shapes}])
|
||||
|
||||
(when-not (empty? constraint-ids)
|
||||
[:& constraints-menu {:ids constraint-ids :values constraint-values}])
|
||||
|
|
|
|||
|
|
@ -27,7 +27,8 @@
|
|||
[:*
|
||||
[:& measures-menu {:ids ids
|
||||
:type type
|
||||
:values measure-values}]
|
||||
:values measure-values
|
||||
:shape shape}]
|
||||
[:& constraints-menu {:ids ids
|
||||
:values constraint-values}]
|
||||
[:& layer-menu {:ids ids
|
||||
|
|
|
|||
|
|
@ -29,7 +29,8 @@
|
|||
[:*
|
||||
[:& measures-menu {:ids ids
|
||||
:type type
|
||||
:values measure-values}]
|
||||
:values measure-values
|
||||
:shape shape}]
|
||||
|
||||
[:& constraints-menu {:ids ids
|
||||
:values constraint-values}]
|
||||
|
|
|
|||
|
|
@ -103,7 +103,8 @@
|
|||
[:*
|
||||
[:& measures-menu {:ids ids
|
||||
:type type
|
||||
:values measure-values}]
|
||||
:values measure-values
|
||||
:shape shape}]
|
||||
|
||||
[:& constraints-menu {:ids ids
|
||||
:values constraint-values}]
|
||||
|
|
|
|||
|
|
@ -62,7 +62,8 @@
|
|||
[:& measures-menu
|
||||
{:ids ids
|
||||
:type type
|
||||
:values (select-keys shape measure-attrs)}]
|
||||
:values (select-keys shape measure-attrs)
|
||||
:shape shape}]
|
||||
|
||||
[:& constraints-menu
|
||||
{:ids ids
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue