diff --git a/frontend/src/uxbox/main/ui/workspace/selection.cljs b/frontend/src/uxbox/main/ui/workspace/selection.cljs index eb52fece27..1747fc4b1d 100644 --- a/frontend/src/uxbox/main/ui/workspace/selection.cljs +++ b/frontend/src/uxbox/main/ui/workspace/selection.cljs @@ -133,7 +133,8 @@ :style {:stroke "#31EFB8" :fill "transparent" :stroke-opacity "1"}}] - (when (fn? on-rotate) + (when (and (fn? on-rotate) + (not= :canvas (:type shape))) [:* [:path {:stroke "#31EFB8" :stroke-opacity "1" diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs index a9cbdfb2a6..e59681bb85 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs @@ -13,6 +13,7 @@ [uxbox.main.data.workspace :as udw] [uxbox.main.store :as st] [uxbox.main.refs :as refs] + [uxbox.main.ui.workspace.sidebar.options.canvas :as canvas] [uxbox.main.ui.workspace.sidebar.options.rect :as rect] [uxbox.main.ui.workspace.sidebar.options.circle :as circle] [uxbox.main.ui.workspace.sidebar.options.path :as path] @@ -21,34 +22,29 @@ [uxbox.main.ui.workspace.sidebar.options.page :as page] [uxbox.util.i18n :refer [tr]])) -;; --- Constants - -;; (def ^:private +menus-map+ -;; {:icon [::icon-measures ::fill ::stroke] -;; :rect [::rect-measures ::fill ::stroke] -;; :path [::fill ::stroke ::interactions] -;; :circle [::circle-measures ::fill ::stroke] -;; :text [::fill ::text] -;; :image [::image-measures] -;; ::page [::page-measures ::page-grid-options]}) - ;; --- Options (mf/defc shape-options + [{:keys [shape] :as props}] + [:div + (case (:type shape) + :canvas [:& canvas/options {:shape shape}] + :text [:& text/options {:shape shape}] + :rect [:& rect/options {:shape shape}] + :circle [:& circle/options {:shape shape}] + :path [:& path/options {:shape shape}] + :curve [:& path/options {:shape shape}] + :image [:& image/options {:shape shape}] + nil)]) + +(mf/defc shape-options-wrapper [{:keys [shape-id] :as props}] - (let [shape-iref (mf/use-memo {:deps #js [(str shape-id)] - :fn #(-> (l/in [:workspace-data :shapes-by-id shape-id]) - (l/derive st/state))}) + (let [shape-iref (mf/use-memo + {:deps (mf/deps shape-id) + :fn #(-> (l/in [:workspace-data :shapes-by-id shape-id]) + (l/derive st/state))}) shape (mf/deref shape-iref)] - [:div - (case (:type shape) - :text [:& text/options {:shape shape}] - :rect [:& rect/options {:shape shape}] - :circle [:& circle/options {:shape shape}] - :path [:& path/options {:shape shape}] - :curve [:& path/options {:shape shape}] - :image [:& image/options {:shape shape}] - nil)])) + [:& shape-options {:shape shape}])) (mf/defc options-toolbox {:wrap [mf/wrap-memo]} @@ -63,5 +59,5 @@ [:div.tool-window-content [:div.element-options (if (= (count selected) 1) - [:& shape-options {:shape-id (first selected)}] + [:& shape-options-wrapper {:shape-id (first selected)}] [:& page/options {:page page}])]]])) diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/canvas.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/canvas.cljs new file mode 100644 index 0000000000..cc3629e2af --- /dev/null +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/canvas.cljs @@ -0,0 +1,101 @@ +;; 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/. +;; +;; This Source Code Form is "Incompatible With Secondary Licenses", as +;; defined by the Mozilla Public License, v. 2.0. +;; +;; Copyright (c) 2015-2020 Andrey Antukh +;; Copyright (c) 2015-2020 Juan de la Cruz + +(ns uxbox.main.ui.workspace.sidebar.options.canvas + (:require + [rumext.alpha :as mf] + [uxbox.common.data :as d] + [uxbox.builtins.icons :as i] + [uxbox.main.data.workspace :as udw] + [uxbox.main.store :as st] + [uxbox.main.ui.workspace.sidebar.options.fill :refer [fill-menu]] + [uxbox.util.dom :as dom] + [uxbox.util.geom.point :as gpt] + [uxbox.util.i18n :refer [tr]] + [uxbox.util.math :as math])) + +(mf/defc measures-menu + [{:keys [shape] :as props}] + (let [on-size-change + (fn [event attr] + (let [value (-> (dom/get-target event) + (dom/get-value) + (d/parse-integer 0))] + (st/emit! (udw/update-dimensions (:id shape) {attr value})))) + + on-proportion-lock-change + (fn [event] + (st/emit! (udw/toggle-shape-proportion-lock (:id shape)))) + + on-position-change + (fn [event attr] + (let [value (-> (dom/get-target event) + (dom/get-value) + (d/parse-integer)) + point (gpt/point {attr value})] + (st/emit! (udw/update-position (:id shape) point)))) + + on-width-change #(on-size-change % :width) + on-height-change #(on-size-change % :height) + on-pos-x-change #(on-position-change % :x) + on-pos-y-change #(on-position-change % :y)] + + [:div.element-set + [:div.element-set-title (tr "workspace.options.measures")] + [:div.element-set-content + [:span (tr "workspace.options.size")] + + ;; WIDTH & HEIGHT + [:div.row-flex + [:div.input-element.pixels + [:input.input-text {:type "number" + :min "0" + :on-change on-width-change + :value (-> (:width shape) + (math/precision 2) + (d/coalesce-str "0"))}]] + + [:div.lock-size {:class (when (:proportion-lock shape) "selected") + :on-click on-proportion-lock-change} + (if (:proportion-lock shape) + i/lock + i/unlock)] + + [:div.input-element.pixels + [:input.input-text {:type "number" + :min "0" + :on-change on-height-change + :value (-> (:height shape) + (math/precision 2) + (d/coalesce-str "0"))}]]] + + ;; POSITION + [:span (tr "workspace.options.position")] + [:div.row-flex + [:div.input-element.pixels + [:input.input-text {:placeholder "x" + :type "number" + :on-change on-pos-x-change + :value (-> (:x shape) + (math/precision 2) + (d/coalesce-str "0"))}]] + [:div.input-element.pixels + [:input.input-text {:placeholder "y" + :type "number" + :on-change on-pos-y-change + :value (-> (:y shape) + (math/precision 2) + (d/coalesce-str "0"))}]]]]])) + +(mf/defc options + [{:keys [shape] :as props}] + [:div + [:& measures-menu {:shape shape}] + [:& fill-menu {:shape shape}]]) diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/rect.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/rect.cljs index 8b3c3e2b25..81f87c5dc0 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/rect.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/rect.cljs @@ -2,8 +2,11 @@ ;; 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) 2015-2017 Andrey Antukh -;; Copyright (c) 2015-2017 Juan de la Cruz +;; This Source Code Form is "Incompatible With Secondary Licenses", as +;; defined by the Mozilla Public License, v. 2.0. +;; +;; Copyright (c) 2015-2020 Andrey Antukh +;; Copyright (c) 2015-2020 Juan de la Cruz (ns uxbox.main.ui.workspace.sidebar.options.rect (:require