✨ Add canvas element options.

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"

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)]
+  (let [shape-iref (mf/use-memo
-                                 :fn #(-> (l/in [:workspace-data :shapes-by-id shape-id])
+                    {:deps (mf/deps shape-id)
-                                          (l/derive st/state))})
+                     :fn #(-> (l/in [:workspace-data :shapes-by-id shape-id])
+                              (l/derive st/state))})
         shape (mf/deref shape-iref)]
-    [:div
+    [:& shape-options {:shape shape}]))
-     (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)]))
 
 (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}])]]]))

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 <niwi@niwi.nz>
+;; Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
+
+(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}]])

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 <niwi@niwi.nz>
+;; This Source Code Form is "Incompatible With Secondary Licenses", as
-;; Copyright (c) 2015-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com>
+;; defined by the Mozilla Public License, v. 2.0.
+;;
+;; Copyright (c) 2015-2020 Andrey Antukh <niwi@niwi.nz>
+;; Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 (ns uxbox.main.ui.workspace.sidebar.options.rect
   (:require