✨ Make the attrs procesing of shapes uniform.

frontend/src/uxbox/main/ui/shapes/attrs.cljs

@@ -2,58 +2,15 @@
 ;; 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) 2016-2017 Andrey Antukh <niwi@niwi.nz>
+;; This Source Code Form is "Incompatible With Secondary Licenses", as
+;; defined by the Mozilla Public License, v. 2.0.
+;;
+;; Copyright (c) 2016-2020 UXBOX Labs SL
 
 (ns uxbox.main.ui.shapes.attrs
   (:require
    [cuerdas.core :as str]
-   [uxbox.util.interop :as interop]))
+   [uxbox.util.interop :as itr]))
-
-
-;; (defn camel-case
-;;   "Returns camel case version of the key, e.g. :http-equiv becomes :httpEquiv."
-;;   [k]
-;;   (if (or (keyword? k)
-;;           (string? k)
-;;           (symbol? k))
-;;     (let [[first-word & words] (str/split (name k) #"-")]
-;;       (if (or (empty? words)
-;;               (= "aria" first-word)
-;;               (= "data" first-word))
-;;         k
-;;         (-> (map str/capital words)
-;;             (conj first-word)
-;;             str/join
-;;             keyword)))
-;;     k))
-
-(defn- process-key
-  [k]
-  (if (keyword? k)
-    (cond
-      (keyword-identical? k :stroke-color) :stroke
-      (keyword-identical? k :fill-color) :fill
-      (str/includes? (name k) "-") (str/camel k)
-      :else k)))
-
-(defn- process-attrs
-  [m]
-  (persistent!
-   (reduce-kv (fn [m k v]
-                (assoc! m (process-key k) v))
-              (transient {})
-              m)))
-
-(def shape-style-attrs
-  #{:fill-color
-    :fill-opacity
-    :stroke-color
-    :stroke-opacity
-    :stroke-width
-    :stroke-style
-    :opacity
-    :rx
-    :ry})
 
 (defn- stroke-type->dasharray
   [style]
@@ -63,36 +20,17 @@
     :dashed "10,10"
     nil))
 
-(defn- transform-stroke-attrs
-  [{:keys [stroke-style] :or {stroke-style :none} :as attrs}]
-  (case stroke-style
-    :none (dissoc attrs :stroke-style :stroke-width :stroke-opacity :stroke-color)
-    :solid (dissoc attrs :stroke-style)
-    (-> attrs
-        (assoc :stroke-dasharray (stroke-type->dasharray stroke-style))
-        (dissoc :stroke-style))))
-
 (defn extract-style-attrs
-  "Extract predefinet attrs from shapes."
-  [shape]
-  (-> (select-keys shape shape-style-attrs)
-      (transform-stroke-attrs)
-      (process-attrs)))
-
-
-;; TODO: migrate all the code to use this function and then, rename.
-
-(defn extract-style-attrs2
   [shape]
   (let [stroke-style (:stroke-style shape :none)
         attrs #js {:fill (:fill-color shape nil)
-                   :opacity (:opacity shape nil)
+                   :fillOpacity (:fill-opacity shape nil)
                    :rx (:rx shape nil)
                    :ry (:ry shape nil)}]
     (when (not= :none stroke-style)
-      (interop/obj-assign! attrs
+      (itr/obj-assign! attrs
-                           #js {:stroke (:stroke-color shape nil)
+                       #js {:stroke (:stroke-color shape nil)
-                                :strokeWidth (:stroke-width shape nil)
+                            :strokeWidth (:stroke-width shape nil)
-                                :strokeOpacity (:stroke-opacity shape nil)
+                            :strokeOpacity (:stroke-opacity shape nil)
-                                :strokeDasharray (stroke-type->dasharray stroke-style)}))
+                            :strokeDasharray (stroke-type->dasharray stroke-style)}))
     attrs))

frontend/src/uxbox/main/ui/shapes/circle.cljs

@@ -11,7 +11,7 @@
    [uxbox.main.refs :as refs]
    [uxbox.main.ui.shapes.attrs :as attrs]
    [uxbox.main.ui.shapes.common :as common]
-   [uxbox.util.data :refer [classnames normalize-props]]
+   [uxbox.util.interop :as itr]
    [uxbox.util.geom.matrix :as gmt]
    [uxbox.util.geom.point :as gpt]))
 
@@ -50,11 +50,11 @@
                              (gmt/rotate rotation center))))
 
         props (-> (attrs/extract-style-attrs shape)
-                  (assoc :cx cx
+                  (itr/obj-assign!
-                         :cy cy
+                   #js {:cx cx
-                         :rx rx
+                        :cy cy
-                         :ry ry
+                        :rx rx
-                         :transform transform
+                        :ry ry
-                         :id (str "shape-" id)
+                        :transform transform
-                         ))]
+                        :id (str "shape-" id)}))]
-    [:& "ellipse" props]))
+    [:> "ellipse" props]))

frontend/src/uxbox/main/ui/shapes/frame.cljs

@@ -25,8 +25,8 @@
    [uxbox.main.ui.shapes.path :as path]
    [uxbox.main.ui.shapes.rect :as rect]
    [uxbox.main.ui.shapes.text :as text]
-   [uxbox.util.data :refer [parse-int]]
    [uxbox.util.dom :as dom]
+   [uxbox.util.interop :as itr]
    [uxbox.util.geom.matrix :as gmt]
    [uxbox.util.geom.point :as gpt]))
 
@@ -43,7 +43,7 @@
         (= n-shape o-shape))))))
 
 (mf/defc shape-wrapper
-  {:wrap [wrap-memo-shape]}
+  {::mf/wrap [wrap-memo-shape]}
   [{:keys [shape] :as props}]
   (when (and shape (not (:hidden shape)))
     (case (:type shape)
@@ -85,7 +85,7 @@
 
 
 (mf/defc frame-wrapper
-  {:wrap [wrap-memo-frame]}
+  {::mf/wrap [wrap-memo-frame]}
   [{:keys [shape objects] :as props}]
   (when (and shape (not (:hidden shape)))
     (let [selected-iref (-> (mf/deps (:id shape))
@@ -121,17 +121,16 @@
         {:keys [id x y width height]} shape
 
         props (-> (attrs/extract-style-attrs shape)
-                  (assoc :x 0
+                  (itr/obj-assign!
-                         :y 0
+                   #js {:x 0
-                         :id (str "shape-" id)
+                        :y 0
-                         :width width
+                        :id (str "shape-" id)
-                         :height height
+                        :width width
-                         ))
+                        :height height}))
 
-        translate #(translate-to-frame % ds-modifier (gpt/point (- x) (- y)))
+        translate #(translate-to-frame % ds-modifier (gpt/point (- x) (- y)))]
-        ]
     [:svg {:x x :y y :width width :height height}
-     [:& "rect" props]
+     [:> "rect" props]
      (for [item (reverse childs)]
        [:& shape-wrapper {:shape (translate item) :key (:id item)}])]))
 

frontend/src/uxbox/main/ui/shapes/icon.cljs

@@ -12,7 +12,7 @@
    [uxbox.main.refs :as refs]
    [uxbox.main.ui.shapes.attrs :as attrs]
    [uxbox.main.ui.shapes.common :as common]
-   [uxbox.util.data :refer [classnames normalize-props]]
+   [uxbox.util.interop :as itr]
    [uxbox.util.geom.matrix :as gmt]
    [uxbox.util.geom.point :as gpt]))
 
@@ -52,18 +52,20 @@
         view-box (apply str (interpose " " (:view-box metadata)))
 
         props (-> (attrs/extract-style-attrs shape)
-                  (assoc :x x
+                  (itr/obj-assign!
-                         :y y
+                   #js {:x x
-                         :transform transform
+                        :y y
-                         :id (str "shape-" id)
+                        :transform transform
-                         :width width
+                        :id (str "shape-" id)
-                         :height height
+                        :width width
-                         :viewBox view-box
+                        :height height
-                         :preserveAspectRatio "none"
+                        :viewBox view-box
-                         :dangerouslySetInnerHTML #js {:__html content}
+                        :preserveAspectRatio "none"
-                         ))]
+                        :dangerouslySetInnerHTML #js {:__html content}}))]
+
+
     [:g {:transform transform}
-     [:& "svg" props]]))
+     [:> "svg" props]]))
 
 ;; --- Icon SVG
 

frontend/src/uxbox/main/ui/shapes/image.cljs

@@ -14,6 +14,7 @@
    [uxbox.main.store :as st]
    [uxbox.main.ui.shapes.attrs :as attrs]
    [uxbox.main.ui.shapes.common :as common]
+   [uxbox.util.interop :as itr]
    [uxbox.util.geom.matrix :as gmt]))
 
 ;; --- Image Wrapper
@@ -54,12 +55,13 @@
 
 
         props (-> (attrs/extract-style-attrs shape)
-                  (assoc :x x
+                  (itr/obj-assign!
-                         :y y
+                   #js {:x x
-                         :id (str "shape-" id)
+                        :y y
-                         :preserveAspectRatio "none"
+                        :transform transform
-                         :xlinkHref uri
+                        :id (str "shape-" id)
-                         :transform transform
+                        :preserveAspectRatio "none"
-                         :width width
+                        :xlinkHref uri
-                         :height height))]
+                        :width width
-    [:& "image" props]))
+                        :height height}))]
+    [:> "image" props]))

frontend/src/uxbox/main/ui/shapes/path.cljs

@@ -14,7 +14,7 @@
    [uxbox.main.store :as st]
    [uxbox.main.ui.shapes.attrs :as attrs]
    [uxbox.main.ui.shapes.common :as common]
-   [uxbox.util.data :refer [classnames normalize-props]]
+   [uxbox.util.interop :as itr]
    [uxbox.util.geom.matrix :as gmt]))
 
 ;; --- Path Wrapper
@@ -79,14 +79,15 @@
 
         pdata (render-path shape)
         props (-> (attrs/extract-style-attrs shape)
-                  (assoc :transform transform
+                  (itr/obj-assign!
-                         :id (str "shape-" id)
+                   #js {:transform transform
-                         :d pdata))]
+                        :id (str "shape-" id)
+                        :d pdata}))]
     (if background?
       [:g
        [:path {:stroke "transparent"
                :fill "transparent"
                :stroke-width "20px"
                :d pdata}]
-       [:& "path" props]]
+       [:> "path" props]]
-      [:& "path" props])))
+      [:> "path" props])))

frontend/src/uxbox/main/ui/shapes/rect.cljs

@@ -12,7 +12,7 @@
    [uxbox.main.refs :as refs]
    [uxbox.main.ui.shapes.attrs :as attrs]
    [uxbox.main.ui.shapes.common :as common]
-   [uxbox.util.interop :as interop]
+   [uxbox.util.interop :as itr]
    [uxbox.util.geom.matrix :as gmt]
    [uxbox.util.geom.point :as gpt]))
 
@@ -51,8 +51,8 @@
                                 (+ x (/ width 2))
                                 (+ y (/ height 2))))
 
-        props (-> (attrs/extract-style-attrs2 shape)
+        props (-> (attrs/extract-style-attrs shape)
-                  (interop/obj-assign!
+                  (itr/obj-assign!
                    #js {:x x
                         :y y
                         :transform transform

frontend/src/uxbox/main/ui/shapes/text.cljs

@@ -15,7 +15,6 @@
    [uxbox.main.geom :as geom]
    [uxbox.main.refs :as refs]
    [uxbox.main.store :as st]
-   [uxbox.main.ui.shapes.attrs :as attrs]
    [uxbox.main.ui.shapes.common :as common]
    [uxbox.util.color :as color]
    [uxbox.util.dom :as dom]

frontend/src/uxbox/main/ui/workspace/left_toolbar.cljs

@@ -55,13 +55,13 @@
         i/image]
        [:li.tooltip.tooltip-right
         {:alt "Pencil tool"
-         :class (when (= selected-drawtool :path) "selected")
+         :class (when (= selected-drawtool :curve) "selected")
-         :on-click (partial select-drawtool :path)}
+         :on-click (partial select-drawtool :curve)}
         i/pencil]
        [:li.tooltip.tooltip-right
         {:alt "Curves tool"
-         :class (when (= selected-drawtool :curve) "selected")
+         :class (when (= selected-drawtool :path) "selected")
-         :on-click (partial select-drawtool :curve)}
+         :on-click (partial select-drawtool :path)}
         i/curve]]
 
       [:ul.left-toolbar-options.panels