From 48d7ea4be4718220ceb88cd53fee03db15adfc59 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Wed, 25 Mar 2020 11:07:50 +0100 Subject: [PATCH] :sparkles: Make the attrs procesing of shapes uniform. --- frontend/src/uxbox/main/ui/shapes/attrs.cljs | 84 +++---------------- frontend/src/uxbox/main/ui/shapes/circle.cljs | 18 ++-- frontend/src/uxbox/main/ui/shapes/frame.cljs | 23 +++-- frontend/src/uxbox/main/ui/shapes/icon.cljs | 26 +++--- frontend/src/uxbox/main/ui/shapes/image.cljs | 20 +++-- frontend/src/uxbox/main/ui/shapes/path.cljs | 13 +-- frontend/src/uxbox/main/ui/shapes/rect.cljs | 6 +- frontend/src/uxbox/main/ui/shapes/text.cljs | 1 - .../uxbox/main/ui/workspace/left_toolbar.cljs | 8 +- 9 files changed, 70 insertions(+), 129 deletions(-) diff --git a/frontend/src/uxbox/main/ui/shapes/attrs.cljs b/frontend/src/uxbox/main/ui/shapes/attrs.cljs index 61a7850d6..d9b095bd5 100644 --- a/frontend/src/uxbox/main/ui/shapes/attrs.cljs +++ b/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 +;; 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])) - - -;; (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}) + [uxbox.util.interop :as itr])) (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 - #js {:stroke (:stroke-color shape nil) - :strokeWidth (:stroke-width shape nil) - :strokeOpacity (:stroke-opacity shape nil) - :strokeDasharray (stroke-type->dasharray stroke-style)})) + (itr/obj-assign! attrs + #js {:stroke (:stroke-color shape nil) + :strokeWidth (:stroke-width shape nil) + :strokeOpacity (:stroke-opacity shape nil) + :strokeDasharray (stroke-type->dasharray stroke-style)})) attrs)) diff --git a/frontend/src/uxbox/main/ui/shapes/circle.cljs b/frontend/src/uxbox/main/ui/shapes/circle.cljs index c8dedb3c4..82a424b1e 100644 --- a/frontend/src/uxbox/main/ui/shapes/circle.cljs +++ b/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 - :cy cy - :rx rx - :ry ry - :transform transform - :id (str "shape-" id) - ))] - [:& "ellipse" props])) + (itr/obj-assign! + #js {:cx cx + :cy cy + :rx rx + :ry ry + :transform transform + :id (str "shape-" id)}))] + [:> "ellipse" props])) diff --git a/frontend/src/uxbox/main/ui/shapes/frame.cljs b/frontend/src/uxbox/main/ui/shapes/frame.cljs index 67c1419dd..328fd9194 100644 --- a/frontend/src/uxbox/main/ui/shapes/frame.cljs +++ b/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 - :y 0 - :id (str "shape-" id) - :width width - :height height - )) + (itr/obj-assign! + #js {:x 0 + :y 0 + :id (str "shape-" id) + :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)}])])) diff --git a/frontend/src/uxbox/main/ui/shapes/icon.cljs b/frontend/src/uxbox/main/ui/shapes/icon.cljs index 0f3fef643..53b20063e 100644 --- a/frontend/src/uxbox/main/ui/shapes/icon.cljs +++ b/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 - :y y - :transform transform - :id (str "shape-" id) - :width width - :height height - :viewBox view-box - :preserveAspectRatio "none" - :dangerouslySetInnerHTML #js {:__html content} - ))] + (itr/obj-assign! + #js {:x x + :y y + :transform transform + :id (str "shape-" id) + :width width + :height height + :viewBox view-box + :preserveAspectRatio "none" + :dangerouslySetInnerHTML #js {:__html content}}))] + + [:g {:transform transform} - [:& "svg" props]])) + [:> "svg" props]])) ;; --- Icon SVG diff --git a/frontend/src/uxbox/main/ui/shapes/image.cljs b/frontend/src/uxbox/main/ui/shapes/image.cljs index 024f26792..96e94411e 100644 --- a/frontend/src/uxbox/main/ui/shapes/image.cljs +++ b/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 - :y y - :id (str "shape-" id) - :preserveAspectRatio "none" - :xlinkHref uri - :transform transform - :width width - :height height))] - [:& "image" props])) + (itr/obj-assign! + #js {:x x + :y y + :transform transform + :id (str "shape-" id) + :preserveAspectRatio "none" + :xlinkHref uri + :width width + :height height}))] + [:> "image" props])) diff --git a/frontend/src/uxbox/main/ui/shapes/path.cljs b/frontend/src/uxbox/main/ui/shapes/path.cljs index 31b479b3b..a19f3da53 100644 --- a/frontend/src/uxbox/main/ui/shapes/path.cljs +++ b/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 - :id (str "shape-" id) - :d pdata))] + (itr/obj-assign! + #js {:transform transform + :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]))) diff --git a/frontend/src/uxbox/main/ui/shapes/rect.cljs b/frontend/src/uxbox/main/ui/shapes/rect.cljs index 457e32636..38cc03c0b 100644 --- a/frontend/src/uxbox/main/ui/shapes/rect.cljs +++ b/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) - (interop/obj-assign! + props (-> (attrs/extract-style-attrs shape) + (itr/obj-assign! #js {:x x :y y :transform transform diff --git a/frontend/src/uxbox/main/ui/shapes/text.cljs b/frontend/src/uxbox/main/ui/shapes/text.cljs index e5c87c6ba..0ad6000af 100644 --- a/frontend/src/uxbox/main/ui/shapes/text.cljs +++ b/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] diff --git a/frontend/src/uxbox/main/ui/workspace/left_toolbar.cljs b/frontend/src/uxbox/main/ui/workspace/left_toolbar.cljs index 4fef51d79..29048d0c1 100644 --- a/frontend/src/uxbox/main/ui/workspace/left_toolbar.cljs +++ b/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") - :on-click (partial select-drawtool :path)} + :class (when (= selected-drawtool :curve) "selected") + :on-click (partial select-drawtool :curve)} i/pencil] [:li.tooltip.tooltip-right {:alt "Curves tool" - :class (when (= selected-drawtool :curve) "selected") - :on-click (partial select-drawtool :curve)} + :class (when (= selected-drawtool :path) "selected") + :on-click (partial select-drawtool :path)} i/curve]] [:ul.left-toolbar-options.panels