From 88f45fb6180fee6dbbf5e48a9b12ff47e4a634fc Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Wed, 19 Jun 2019 00:18:52 +0200 Subject: [PATCH] feat(frontend): initial work on react and rumext upgrade --- frontend/deps.edn | 24 ++-- frontend/src/uxbox/main/data/undo.cljs | 3 +- .../uxbox/main/data/workspace/drawing.cljs | 10 +- frontend/src/uxbox/main/repo/auth.cljs | 2 +- frontend/src/uxbox/main/repo/impl.cljs | 21 ++-- frontend/src/uxbox/main/repo/pages.cljs | 5 +- .../src/uxbox/main/ui/dashboard/colors.cljs | 9 +- .../src/uxbox/main/ui/dashboard/icons.cljs | 18 +-- .../src/uxbox/main/ui/dashboard/images.cljs | 8 +- .../src/uxbox/main/ui/dashboard/projects.cljs | 4 +- frontend/src/uxbox/main/ui/shapes/attrs.cljs | 2 +- frontend/src/uxbox/main/ui/shapes/circle.cljs | 4 +- frontend/src/uxbox/main/ui/shapes/group.cljs | 14 +-- frontend/src/uxbox/main/ui/shapes/icon.cljs | 4 +- frontend/src/uxbox/main/ui/shapes/image.cljs | 4 +- frontend/src/uxbox/main/ui/shapes/path.cljs | 6 +- frontend/src/uxbox/main/ui/shapes/rect.cljs | 6 +- .../src/uxbox/main/ui/shapes/selection.cljs | 106 ++++++++++-------- frontend/src/uxbox/main/ui/shapes/text.cljs | 17 ++- .../src/uxbox/main/ui/workspace/canvas.cljs | 2 +- .../uxbox/main/ui/workspace/clipboard.cljs | 2 +- .../uxbox/main/ui/workspace/colorpalette.cljs | 4 +- .../src/uxbox/main/ui/workspace/download.cljs | 2 +- .../src/uxbox/main/ui/workspace/images.cljs | 4 +- .../main/ui/workspace/recent_colors.cljs | 2 +- .../main/ui/workspace/sidebar/drawtools.cljs | 2 +- .../main/ui/workspace/sidebar/history.cljs | 4 +- .../main/ui/workspace/sidebar/layers.cljs | 4 +- .../main/ui/workspace/sidebar/options.cljs | 2 +- .../main/ui/workspace/sidebar/sitemap.cljs | 2 +- frontend/src/uxbox/util/data.cljs | 25 +++++ frontend/src/uxbox/util/http.cljs | 4 +- frontend/tools.clj | 2 +- 33 files changed, 184 insertions(+), 144 deletions(-) diff --git a/frontend/deps.edn b/frontend/deps.edn index 235f54b8a..0da6099d3 100644 --- a/frontend/deps.edn +++ b/frontend/deps.edn @@ -1,13 +1,20 @@ {:deps {org.clojure/clojurescript {:mvn/version "1.10.516"} - org.clojure/clojure {:mvn/version "1.10.0"} - funcool/rumext {:mvn/version "1.0.0"} + org.clojure/clojure {:mvn/version "1.10.1"} + ;; funcool/rumext {:mvn/version "1.0.0"} funcool/promesa {:mvn/version "2.0.0"} com.cognitect/transit-cljs {:mvn/version "0.8.239"} - rum/rum {:mvn/version "0.10.8" :exclusions [cljsjs/react cljsjs/react-dom]} + ;; rum/rum {:mvn/version "0.11.3" :exclusions [cljsjs/react cljsjs/react-dom]} + + funcool/rumext {:git/url "https://github.com/funcool/rumext.git", + :sha "3d598e749ba429eae6544e532fc9f81369b307f5"} + + ;; cljsjs/react {:mvn/version "15.5.0-0"} + ;; cljsjs/react-dom {:mvn/version "15.5.0-0"} + ;; cljsjs/react-dom-server {:mvn/version "15.5.0-0"} + cljsjs/react {:mvn/version "16.8.6-0"} + cljsjs/react-dom {:mvn/version "16.8.6-0"} + cljsjs/react-dom-server {:mvn/version "16.8.6-0"} - cljsjs/react {:mvn/version "15.5.0-0"} - cljsjs/react-dom {:mvn/version "15.5.0-0"} - cljsjs/react-dom-server {:mvn/version "15.5.0-0"} environ/environ {:mvn/version "1.1.0"} funcool/beicon {:mvn/version "3.2.0"} @@ -21,10 +28,13 @@ {:dev {:extra-deps {com.bhauman/rebel-readline-cljs {:mvn/version "0.1.4"} com.bhauman/rebel-readline {:mvn/version "0.1.4"} - com.bhauman/figwheel-main {:mvn/version "0.2.0"} + com.bhauman/figwheel-main {:mvn/version "0.2.1-SNAPSHOT"} org.clojure/tools.namespace {:mvn/version "0.2.11"} } :extra-paths ["test" "resources"]} + + :repl {:main-opts ["-m" "rebel-readline.main"] + :extra-deps {com.bhauman/rebel-readline {:mvn/version "0.1.4"}}} }} diff --git a/frontend/src/uxbox/main/data/undo.cljs b/frontend/src/uxbox/main/data/undo.cljs index ccf7daca7..8e6f316aa 100644 --- a/frontend/src/uxbox/main/data/undo.cljs +++ b/frontend/src/uxbox/main/data/undo.cljs @@ -5,8 +5,7 @@ ;; Copyright (c) 2016 Andrey Antukh (ns uxbox.main.data.undo - (:require #_[cljs.pprint :as pp] - [beicon.core :as rx] + (:require [beicon.core :as rx] [potok.core :as ptk] [uxbox.main.data.pages :as udp] [uxbox.main.store :as st])) diff --git a/frontend/src/uxbox/main/data/workspace/drawing.cljs b/frontend/src/uxbox/main/data/workspace/drawing.cljs index 452b4cfe1..19075344b 100644 --- a/frontend/src/uxbox/main/data/workspace/drawing.cljs +++ b/frontend/src/uxbox/main/data/workspace/drawing.cljs @@ -376,11 +376,6 @@ (vreset! last-point point) (st/emit! (insert-drawing-path-point point))) - (on-draw [[point ctrl? counter]] - (if ctrl? - (on-assisted-draw point counter) - (on-generic-draw point counter))) - (on-generic-draw [point counter] (st/emit! (update-drawing-path-point counter point))) @@ -391,6 +386,11 @@ (gpt/add $ @last-point))] (st/emit! (update-drawing-path-point counter point)))) + (on-draw [[point ctrl? counter]] + (if ctrl? + (on-assisted-draw point counter) + (on-generic-draw point counter))) + (on-finish [] (st/emit! (finish-path-drawing) (finish-drawing)))] diff --git a/frontend/src/uxbox/main/repo/auth.cljs b/frontend/src/uxbox/main/repo/auth.cljs index 43e8f1785..accba3bfb 100644 --- a/frontend/src/uxbox/main/repo/auth.cljs +++ b/frontend/src/uxbox/main/repo/auth.cljs @@ -17,7 +17,7 @@ (defmethod request :fetch/token [type data] - (let [url (str url "/auth/token")] + (let [url (str url "/auth/login")] (send! {:url url :method :post :auth false diff --git a/frontend/src/uxbox/main/repo/impl.cljs b/frontend/src/uxbox/main/repo/impl.cljs index 30ec0e750..9cf8673e8 100644 --- a/frontend/src/uxbox/main/repo/impl.cljs +++ b/frontend/src/uxbox/main/repo/impl.cljs @@ -7,6 +7,7 @@ (ns uxbox.main.repo.impl (:require [clojure.walk :as walk] [beicon.core :as rx] + [cuerdas.core :as str] [uxbox.config :refer (url)] [uxbox.util.http :as http] [uxbox.util.storage :refer (storage)] @@ -15,9 +16,10 @@ (defn- conditional-decode [{:keys [body headers] :as response}] - (if (= (get headers "content-type") "application/transit+json") - (assoc response :body (t/decode body)) - response)) + (let [contentype (get headers "content-type")] + (if (str/starts-with? contentype "application/transit+json") + (assoc response :body (t/decode body)) + response))) (defn- handle-http-status [{:keys [body status] :as response}] @@ -28,11 +30,6 @@ (def ^:private +headers+ {"content-type" "application/transit+json"}) -(defn- auth-headers - [] - (when-let [auth (:auth storage)] - {"authorization" (str "Token " (:token auth "no-token"))})) - (defn- encode-query [params] (let [data (QueryData.)] @@ -42,16 +39,16 @@ (defn send! [{:keys [body headers auth method query url response-type] :or {auth true response-type :text}}] - (let [headers (merge {} + (let [headers (merge {"accept" "application/transit+json,*/*"} (when (map? body) +headers+) - headers - (when auth (auth-headers))) + headers) request {:method method :url url :headers headers :query-string (when query (encode-query query)) :body (if (map? body) (t/encode body) body)} - options {:response-type response-type}] + options {:response-type response-type + :credentials? true}] (->> (http/send! request options) (rx/map conditional-decode) (rx/mapcat handle-http-status)))) diff --git a/frontend/src/uxbox/main/repo/pages.cljs b/frontend/src/uxbox/main/repo/pages.cljs index 05af57a12..ddd3b593b 100644 --- a/frontend/src/uxbox/main/repo/pages.cljs +++ b/frontend/src/uxbox/main/repo/pages.cljs @@ -19,8 +19,9 @@ (defmethod request :fetch/pages-by-project [type {:keys [project] :as params}] - (let [url (str url "/projects/" project "/pages")] - (send! {:method :get :url url}))) + (let [url (str url "/pages") + params {:project project}] + (send! {:method :get :url url :query params}))) (defmethod request :fetch/page-history [type {:keys [page] :as params}] diff --git a/frontend/src/uxbox/main/ui/dashboard/colors.cljs b/frontend/src/uxbox/main/ui/dashboard/colors.cljs index 0c6c94442..c000819a5 100644 --- a/frontend/src/uxbox/main/ui/dashboard/colors.cljs +++ b/frontend/src/uxbox/main/ui/dashboard/colors.cljs @@ -138,8 +138,9 @@ (when own? [:li {} [:a.btn-primary {:on-click #(st/emit! (dc/create-collection))} (tr "ds.colors-collection.new")]]) - (mx/doseq [{:keys [id] :as coll} colls] - (let [selected? (= (:id coll) selected)] + (for [coll colls] + (let [id (:id coll) + selected? (= id selected)] (-> (nav-item coll selected?) (mx/with-key id))))])) @@ -191,7 +192,7 @@ (on-select id))] [:ul.move-list {} [:li.title {} title] - (mx/doseq [{:keys [id name] :as coll} colls] + (for [{:keys [id name] :as coll} colls] [:li {:key (str id)} [:a {:on-click #(on-select % id)} name]])])) @@ -281,7 +282,7 @@ [:div.dashboard-grid-content {} [:div.dashboard-grid-row {} (when editable? (grid-form id)) - (mx/doseq [color colors] + (for [color colors] (let [selected? (contains? selected color)] (-> (grid-item color selected?) (mx/with-key (str color)))))]])) diff --git a/frontend/src/uxbox/main/ui/dashboard/icons.cljs b/frontend/src/uxbox/main/ui/dashboard/icons.cljs index 4305f91bd..b8509442d 100644 --- a/frontend/src/uxbox/main/ui/dashboard/icons.cljs +++ b/frontend/src/uxbox/main/ui/dashboard/icons.cljs @@ -58,11 +58,11 @@ (-> (l/in [:dashboard :icons]) (l/derive st/state))) -(def ^:private collections-ref +(def collections-ref (-> (l/key :icons-collections) (l/derive st/state))) -(def ^:private icons-ref +(def icons-ref (-> (l/key :icons) (l/derive st/state))) @@ -184,7 +184,7 @@ (tr "ds.icons-collection.new")]]) (when own? (nav-item nil (nil? selected))) - (mx/doseq [coll colls] + (for [coll colls] (let [selected? (= (:id coll) selected)] (-> (nav-item coll selected?) (mx/with-key (:id coll)))))])) @@ -253,7 +253,7 @@ [:li.title {} title] [:li {} [:a {:href "#" :on-click #(on-select % nil)} "Storage"]] - (mx/doseq [{:keys [id name] :as coll} colls] + (for [{:keys [id name] :as coll} colls] [:li {:key (str id)} [:a {:on-click #(on-select % id)} name]])])) @@ -333,14 +333,14 @@ (toggle-selection-shifted [event] (when (kbd/shift? event) (toggle-selection event))) - (on-key-down [event] - (when (kbd/enter? event) - (on-blur event))) (on-blur [event] (let [target (dom/event->target event) name (dom/get-value target)] (st/emit! (di/update-opts :edition false) (di/rename-icon id name)))) + (on-key-down [event] + (when (kbd/enter? event) + (on-blur event))) (ignore-click [event] (dom/stop-propagation event) (dom/prevent-default event)) @@ -386,7 +386,7 @@ [:div.dashboard-grid-content {} [:div.dashboard-grid-row {} (when editable? (grid-form id)) - (mx/doseq [{:keys [id] :as icon} icons] + (for [{:keys [id] :as icon} icons] (let [edition? (= edition id) selected? (contains? selected id)] (-> (grid-item icon selected? edition?) @@ -431,7 +431,7 @@ [:select.input-select {:on-change on-ordering-change :value (pr-str ordering)} - (mx/doseq [[key value] (seq +ordering-options+)] + (for [[key value] (seq +ordering-options+)] (let [key (pr-str key)] [:option {:key key :value key} (tr value)]))]] ;; Search diff --git a/frontend/src/uxbox/main/ui/dashboard/images.cljs b/frontend/src/uxbox/main/ui/dashboard/images.cljs index 4f0bced1b..474fe10ed 100644 --- a/frontend/src/uxbox/main/ui/dashboard/images.cljs +++ b/frontend/src/uxbox/main/ui/dashboard/images.cljs @@ -179,7 +179,7 @@ (tr "ds.images-collection.new")]]) (when own? (nav-item nil (nil? selected))) - (mx/doseq [coll collections] + (for [coll collections] (let [selected? (= (:id coll) selected) key (str (:id coll))] (-> (nav-item coll selected?) @@ -256,7 +256,7 @@ [:li.title {} title] [:li {} [:a {:href "#" :on-click #(on-select % nil)} "Storage"]] - (mx/doseq [{:keys [id name] :as coll} colls] + (for [{:keys [id name] :as coll} colls] [:li {:key (str id)} [:a {:on-click #(on-select % id)} name]])])) @@ -378,7 +378,7 @@ [:div.dashboard-grid-row {} (when editable? (grid-form id)) - (mx/doseq [{:keys [id] :as image} images] + (for [{:keys [id] :as image} images] (let [edition? (= edition id) selected? (contains? selected id)] (-> (grid-item image selected? edition?) @@ -423,7 +423,7 @@ [:span {} (tr "ds.ordering")] [:select.input-select {:on-change on-ordering-change :value (pr-str ordering)} - (mx/doseq [[key value] (seq +ordering-options+)] + (for [[key value] (seq +ordering-options+)] (let [key (pr-str key) label (tr value)] [:option {:key key :value key} label]))]] diff --git a/frontend/src/uxbox/main/ui/dashboard/projects.cljs b/frontend/src/uxbox/main/ui/dashboard/projects.cljs index bbadceac6..328f9b66f 100644 --- a/frontend/src/uxbox/main/ui/dashboard/projects.cljs +++ b/frontend/src/uxbox/main/ui/dashboard/projects.cljs @@ -101,7 +101,7 @@ [:select.input-select {:on-change on-ordering-change :value (pr-str ordering)} - (mx/doseq [[key value] (seq +ordering-options+)] + (for [[key value] (seq +ordering-options+)] (let [key (pr-str key)] [:option {:key key :value key} (tr value)]))]] ;; Search @@ -222,7 +222,7 @@ [:div.grid-item.add-project {:on-click on-click} [:span {} (tr "ds.project-new")]] - (mx/doseq [item projects] + (for [item projects] (-> (grid-item item) (mx/with-key (:id item))))]]]))) diff --git a/frontend/src/uxbox/main/ui/shapes/attrs.cljs b/frontend/src/uxbox/main/ui/shapes/attrs.cljs index 93c741ea0..6ad2d7303 100644 --- a/frontend/src/uxbox/main/ui/shapes/attrs.cljs +++ b/frontend/src/uxbox/main/ui/shapes/attrs.cljs @@ -51,7 +51,7 @@ (assoc :stroke-dasharray (stroke-type->dasharray stroke-style)) (dissoc :stroke-style)))) -(defn- extract-style-attrs +(defn extract-style-attrs "Extract predefinet attrs from shapes." [shape] (-> (select-keys shape shape-style-attrs) diff --git a/frontend/src/uxbox/main/ui/shapes/circle.cljs b/frontend/src/uxbox/main/ui/shapes/circle.cljs index 825216b4f..554d85cc9 100644 --- a/frontend/src/uxbox/main/ui/shapes/circle.cljs +++ b/frontend/src/uxbox/main/ui/shapes/circle.cljs @@ -10,7 +10,7 @@ [uxbox.main.geom :as geom] [uxbox.main.ui.shapes.common :as common] [uxbox.main.ui.shapes.attrs :as attrs] - [uxbox.util.data :refer [classnames]] + [uxbox.util.data :refer [classnames normalize-props]] [uxbox.util.geom.matrix :as gmt] [uxbox.util.geom.point :as gpt] [rumext.core :as mx :include-macros true])) @@ -58,4 +58,4 @@ attrs (merge props (attrs/extract-style-attrs shape) (select-keys shape [:cx :cy :rx :ry]))] - [:ellipse attrs])) + [:> :ellipse (normalize-props attrs)])) diff --git a/frontend/src/uxbox/main/ui/shapes/group.cljs b/frontend/src/uxbox/main/ui/shapes/group.cljs index c30349719..f6de9b483 100644 --- a/frontend/src/uxbox/main/ui/shapes/group.cljs +++ b/frontend/src/uxbox/main/ui/shapes/group.cljs @@ -76,13 +76,11 @@ resize (gmt/multiply resize) displacement (gmt/multiply displacement)) - moving? (boolean displacement) - attrs {:id (str "shape-" id) - :class (classnames :move-cursor moving?) - :transform (str xfmt)}] - [:g attrs - (for [item (reverse items) - :let [key (str item)]] + moving? (boolean displacement)] + [:g {:id (str "shape-" id) + :class (classnames :move-cursor moving?) + :transform (str xfmt)} + (for [item (reverse items)] (-> (factory item) - (mx/with-key key)))])) + (mx/with-key (str item))))])) diff --git a/frontend/src/uxbox/main/ui/shapes/icon.cljs b/frontend/src/uxbox/main/ui/shapes/icon.cljs index d04f4e452..5400cea51 100644 --- a/frontend/src/uxbox/main/ui/shapes/icon.cljs +++ b/frontend/src/uxbox/main/ui/shapes/icon.cljs @@ -9,7 +9,7 @@ [uxbox.main.refs :as refs] [uxbox.main.ui.shapes.common :as common] [uxbox.main.ui.shapes.attrs :as attrs] - [uxbox.util.data :refer [classnames]] + [uxbox.util.data :refer [classnames normalize-props]] [uxbox.util.geom.matrix :as gmt] [uxbox.util.geom.point :as gpt] [rumext.core :as mx :include-macros true])) @@ -81,4 +81,4 @@ props {:view-box view-box :id (str "shape-" id) :dangerouslySetInnerHTML {:__html content}}] - [:svg props])) + [:> :svg (normalize-props props)])) diff --git a/frontend/src/uxbox/main/ui/shapes/image.cljs b/frontend/src/uxbox/main/ui/shapes/image.cljs index 566fdd3a3..78b75b6e5 100644 --- a/frontend/src/uxbox/main/ui/shapes/image.cljs +++ b/frontend/src/uxbox/main/ui/shapes/image.cljs @@ -14,7 +14,7 @@ [uxbox.main.ui.shapes.common :as common] [uxbox.main.ui.shapes.attrs :as attrs] [uxbox.main.data.images :as udi] - [uxbox.util.data :refer [classnames]] + [uxbox.util.data :refer [classnames normalize-props]] [uxbox.util.geom.matrix :as gmt] [rumext.core :as mx :include-macros true])) @@ -73,4 +73,4 @@ :width width :height height} attrs (merge props (attrs/extract-style-attrs shape))] - [:image attrs])) + [:> :image (normalize-props attrs)])) diff --git a/frontend/src/uxbox/main/ui/shapes/path.cljs b/frontend/src/uxbox/main/ui/shapes/path.cljs index 3972cfdc2..60e0b8408 100644 --- a/frontend/src/uxbox/main/ui/shapes/path.cljs +++ b/frontend/src/uxbox/main/ui/shapes/path.cljs @@ -13,7 +13,7 @@ [uxbox.main.data.shapes :as uds] [uxbox.main.ui.shapes.common :as common] [uxbox.main.ui.shapes.attrs :as attrs] - [uxbox.util.data :refer [classnames]] + [uxbox.util.data :refer [classnames normalize-props]] [uxbox.util.geom.matrix :as gmt] [uxbox.util.geom.point :as gpt] [rumext.core :as mx :include-macros true])) @@ -84,5 +84,5 @@ :fill "transparent" :stroke-width "20px" :d pdata}] - [:path attrs]] - [:path attrs]))) + [:> :path (normalize-props attrs)]] + [:> :path (normalize-props attrs)]))) diff --git a/frontend/src/uxbox/main/ui/shapes/rect.cljs b/frontend/src/uxbox/main/ui/shapes/rect.cljs index bd979fbcd..61357a17c 100644 --- a/frontend/src/uxbox/main/ui/shapes/rect.cljs +++ b/frontend/src/uxbox/main/ui/shapes/rect.cljs @@ -12,7 +12,7 @@ [uxbox.util.geom.matrix :as gmt] [uxbox.util.geom.point :as gpt] [rumext.core :as mx :include-macros true] - [uxbox.util.data :refer [classnames]] + [uxbox.util.data :refer [classnames normalize-props]] [uxbox.util.dom :as dom])) ;; --- Rect Component @@ -58,9 +58,9 @@ props {:x x1 :y y1 :id (str "shape-" id) - :class (classnames :move-cursor moving?) + :class-name (classnames :move-cursor moving?) :width width :height height :transform (str xfmt)} attrs (merge (attrs/extract-style-attrs shape) props)] - [:rect attrs])) + [:> :rect (normalize-props attrs)])) diff --git a/frontend/src/uxbox/main/ui/shapes/selection.cljs b/frontend/src/uxbox/main/ui/shapes/selection.cljs index 068c04530..9b84a19dd 100644 --- a/frontend/src/uxbox/main/ui/shapes/selection.cljs +++ b/frontend/src/uxbox/main/ui/shapes/selection.cljs @@ -106,6 +106,19 @@ control pointer radius from 4 to 6." 60) +(mx/defc control-item + [{:keys [class on-mouse-down r cy cx]}] + [:circle {:class-name class + :on-mouse-down on-mouse-down + :r r + :style {:fillOpacity "1" + :strokeWidth "1px" + :vectorEffect "non-scaling-stroke"} + :fill "#31e6e0" + :stroke "#28c4d4" + :cx cx + :cy cy}]) + (mx/defc controls {:mixins [mx/static]} [{:keys [x1 y1 width height] :as shape} zoom on-mouse-down] @@ -117,54 +130,51 @@ :stroke-dasharray (str (/ 5.0 zoom) "," (/ 5 zoom)) :style {:stroke "#333" :fill "transparent" :stroke-opacity "1"}}] - [:circle.top - (merge +circle-props+ - {:on-mouse-down #(on-mouse-down :top %) - :r (/ radius zoom) - :cx (+ x1 (/ width 2)) - :cy (- y1 2)})] - [:circle.right - (merge +circle-props+ - {:on-mouse-down #(on-mouse-down :right %) - :r (/ radius zoom) - :cy (+ y1 (/ height 2)) - :cx (+ x1 width 1)})] - [:circle.bottom - (merge +circle-props+ - {:on-mouse-down #(on-mouse-down :bottom %) - :r (/ radius zoom) - :cx (+ x1 (/ width 2)) - :cy (+ y1 height 2)})] - [:circle.left - (merge +circle-props+ - {:on-mouse-down #(on-mouse-down :left %) - :r (/ radius zoom) - :cy (+ y1 (/ height 2)) - :cx (- x1 3)})] - [:circle.top-left - (merge +circle-props+ - {:on-mouse-down #(on-mouse-down :top-left %) - :r (/ radius zoom) - :cx x1 - :cy y1})] - [:circle.top-right - (merge +circle-props+ - {:on-mouse-down #(on-mouse-down :top-right %) - :r (/ radius zoom) - :cx (+ x1 width) - :cy y1})] - [:circle.bottom-left - (merge +circle-props+ - {:on-mouse-down #(on-mouse-down :bottom-left %) - :r (/ radius zoom) - :cx x1 - :cy (+ y1 height)})] - [:circle.bottom-right - (merge +circle-props+ - {:on-mouse-down #(on-mouse-down :bottom-right %) - :r (/ radius zoom) - :cx (+ x1 width) - :cy (+ y1 height)})]])) + + (control-item {:class "top" + :on-mouse-down #(on-mouse-down :top %) + :r (/ radius zoom) + :cx (+ x1 (/ width 2)) + :cy (- y1 2)}) + (control-item {:on-mouse-down #(on-mouse-down :right %) + :r (/ radius zoom) + :cy (+ y1 (/ height 2)) + :cx (+ x1 width 1) + :class "right"}) + + (control-item {:on-mouse-down #(on-mouse-down :bottom %) + :r (/ radius zoom) + :cx (+ x1 (/ width 2)) + :cy (+ y1 height 2) + :class "bottom"}) + + (control-item {:on-mouse-down #(on-mouse-down :left %) + :r (/ radius zoom) + :cy (+ y1 (/ height 2)) + :cx (- x1 3) + :class "left"}) + + (control-item {:on-mouse-down #(on-mouse-down :top-left %) + :r (/ radius zoom) + :cx x1 + :cy y1 + :class "top-left"}) + + (control-item {:on-mouse-down #(on-mouse-down :top-right %) + :r (/ radius zoom) + :cx (+ x1 width) + :cy y1 + :class "top-right"}) + (control-item {:on-mouse-down #(on-mouse-down :bottom-left %) + :r (/ radius zoom) + :cx x1 + :cy (+ y1 height) + :class "bottom-left"}) + (control-item {:on-mouse-down #(on-mouse-down :bottom-right %) + :r (/ radius zoom) + :cx (+ x1 width) + :cy (+ y1 height) + :class "bottom-right"})])) ;; --- Selection Handlers (Component) diff --git a/frontend/src/uxbox/main/ui/shapes/text.cljs b/frontend/src/uxbox/main/ui/shapes/text.cljs index 3708c88c3..31246c31a 100644 --- a/frontend/src/uxbox/main/ui/shapes/text.cljs +++ b/frontend/src/uxbox/main/ui/shapes/text.cljs @@ -123,7 +123,7 @@ (let [content (dom/event->inner-text ev)] (st/emit! (uds/update-text id content))))] [:foreignObject props - [:div {:style style + [:div {:style (normalize-props style) :ref "container" :on-input on-input :contentEditable true}]]))) @@ -167,15 +167,14 @@ {:keys [x1 y1 width height] :as shape} (-> (geom/transform shape xfmt) (geom/size)) - moving? (boolean displacement) - props {:x x1 - :y y1 - :class (classnames :move-cursor moving?) - :id (str id) + moving? (boolean displacement)] + [:foreignObject {:x x1 + :y y1 + :class (classnames :move-cursor moving?) + :id (str id) :ref "fobject" - :width width - :height height}] - [:foreignObject props])) + :width width + :height height}])) ;; --- Text Shape Html diff --git a/frontend/src/uxbox/main/ui/workspace/canvas.cljs b/frontend/src/uxbox/main/ui/workspace/canvas.cljs index 174eda7a5..3b3cf7dbb 100644 --- a/frontend/src/uxbox/main/ui/workspace/canvas.cljs +++ b/frontend/src/uxbox/main/ui/workspace/canvas.cljs @@ -115,7 +115,7 @@ (background metadata) [:svg.page-layout {} [:g.main {} - (mx/doseq [item (reverse (:shapes page))] + (for [item (reverse (:shapes page))] (-> (uus/shape item) (mx/with-key (str item)))) (selection-handlers) diff --git a/frontend/src/uxbox/main/ui/workspace/clipboard.cljs b/frontend/src/uxbox/main/ui/workspace/clipboard.cljs index 4e995c8e4..0d4402da8 100644 --- a/frontend/src/uxbox/main/ui/workspace/clipboard.cljs +++ b/frontend/src/uxbox/main/ui/workspace/clipboard.cljs @@ -32,7 +32,7 @@ (udl/close!))] [:div.lightbox-body.clipboard {} [:div.clipboard-list {} - (mx/doseq [item (mx/react clipboard-ref)] + (for [item (mx/react clipboard-ref)] [:div.clipboard-item {:key (str (:id item)) :on-click (partial on-paste item)} diff --git a/frontend/src/uxbox/main/ui/workspace/colorpalette.cljs b/frontend/src/uxbox/main/ui/workspace/colorpalette.cljs index aea07a64d..c1015ba49 100644 --- a/frontend/src/uxbox/main/ui/workspace/colorpalette.cljs +++ b/frontend/src/uxbox/main/ui/workspace/colorpalette.cljs @@ -79,7 +79,7 @@ [:div.color-palette-actions [:select.input-select {:on-change select-collection :value (pr-str (:id selected-coll))} - (mx/doseq [collection collections] + (for [collection collections] [:option {:key (str (:id collection)) :value (pr-str (:id collection))} (:name collection)])] @@ -98,7 +98,7 @@ :ref "color-palette-inside" :style {:position "relative" :right (str (* 86 offset) "px")}} - (mx/doseq [color colors] + (for [color colors] (-> (palette-item color) (mx/with-key color)))]] diff --git a/frontend/src/uxbox/main/ui/workspace/download.cljs b/frontend/src/uxbox/main/ui/workspace/download.cljs index 7bb0a915b..f65d25c73 100644 --- a/frontend/src/uxbox/main/ui/workspace/download.cljs +++ b/frontend/src/uxbox/main/ui/workspace/download.cljs @@ -122,7 +122,7 @@ [:span.title {} "Download page"] [:p.info {} "Download a single page of your project in SVG."] [:select.input-select {:ref "page" :default-value (pr-str current)} - (mx/doseq [{:keys [id name]} pages] + (for [{:keys [id name]} pages] [:option {:value (pr-str id)} name])] [:a.btn-primary {:href "#" :on-click download-page} "Download page"]] [:div.content-col {} diff --git a/frontend/src/uxbox/main/ui/workspace/images.cljs b/frontend/src/uxbox/main/ui/workspace/images.cljs index b6436ab07..385145f4e 100644 --- a/frontend/src/uxbox/main/ui/workspace/images.cljs +++ b/frontend/src/uxbox/main/ui/workspace/images.cljs @@ -109,7 +109,7 @@ {:mixins [mx/static]} [images] [:div.library-content {} - (mx/doseq [image images] + (for [image images] (-> (image-item image) (mx/with-key (str (:id image)))))]) @@ -171,7 +171,7 @@ [:select.input-select {:on-change on-coll-change} (when own? [:option {:value (pr-str nil)} "Storage"]) - (doseq [coll colls] + (for [coll colls] (let [id (:id coll) name (:name coll)] [:option {:key (str id) :value (pr-str id)} name]))]] diff --git a/frontend/src/uxbox/main/ui/workspace/recent_colors.cljs b/frontend/src/uxbox/main/ui/workspace/recent_colors.cljs index 14d1767fd..a4b038050 100644 --- a/frontend/src/uxbox/main/ui/workspace/recent_colors.cljs +++ b/frontend/src/uxbox/main/ui/workspace/recent_colors.cljs @@ -50,7 +50,7 @@ [:span.color-th {:style {:background-color color} :key color :on-click (partial callback color)}]) - (mx/doseq [i (range (- 5 (count colors)))] + (for [i (range (- 5 (count colors)))] [:span.color-th {:key (str "empty" i)}]) [:span.color-th.palette-th {} i/picker]]])) diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/drawtools.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/drawtools.cljs index 28ace504c..fa80e96bf 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/drawtools.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/drawtools.cljs @@ -113,7 +113,7 @@ [:span {} (tr "ds.draw-tools")] [:div.tool-window-close {:on-click close} i/close]] [:div.tool-window-content {} - (mx/doseq [[i props] (map-indexed vector tools)] + (for [[i props] (map-indexed vector tools)] (let [selected? (= drawing-tool (:shape props))] [:div.tool-btn.tooltip.tooltip-hover {:alt (tr (:help props)) diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/history.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/history.cljs index 9cde0122c..01fcf9927 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/history.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/history.cljs @@ -52,7 +52,7 @@ show-more? (pos? min-version) load-more #(st/emit! (udh/load-more))] [:ul.history-content {} - (mx/doseq [item items] + (for [item items] (let [current? (= (:version item) (:version page))] (-> (history-item item selected current?) (mx/with-key (str (:id item)))))) @@ -67,7 +67,7 @@ {:mixins [mx/static]} [{:keys [pinned selected] :as history}] [:ul.history-content {} - (mx/doseq [item (reverse (sort-by :version pinned))] + (for [item (reverse (sort-by :version pinned))] (let [selected? (= (:version item) selected)] (-> (history-item item selected?) (mx/with-key (str (:id item))))))]) diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs index bf8fa08ee..8f35781b7 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs @@ -275,7 +275,7 @@ i/arrow-slide]] (if-not collapsed? [:ul {} - (mx/doseq [{:keys [id] :as shape} (map #(get shapes-map %) (:items item))] + (for [{:keys [id] :as shape} (map #(get shapes-map %) (:items item))] (if (= (:type shape) :group) (-> (layer-group shape selected) (mx/with-key id)) @@ -356,7 +356,7 @@ [:div.tool-window-close {:on-click close} i/close]] [:div.tool-window-content {} [:ul.element-list {} - (mx/doseq [{:keys [id] :as shape} (map #(get shapes-map %) (:shapes page))] + (for [{:keys [id] :as shape} (map #(get shapes-map %) (:shapes page))] (if (= (:type shape) :group) (-> (layer-group shape selected) (mx/with-key id)) diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs index 433816a3d..c8ea838b9 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs @@ -107,7 +107,7 @@ [:div {} (when (> (count menus) 1) [:ul.element-icons {} - (mx/doseq [menu-id (get +menus-map+ (:type shape ::page))] + (for [menu-id (get +menus-map+ (:type shape ::page))] (let [menu (get +menus-by-id+ menu-id) selected? (= active menu-id)] [:li#e-info {:on-click #(swap! local assoc :menu menu-id) diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs index 8e67a6c15..fe0e77918 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs @@ -118,7 +118,7 @@ [:span {} (:name project)] [:div.add-page {:on-click create} i/close]] [:ul.element-list {} - (mx/doseq [page pages] + (for [page pages] (let [active? (= (:id page) current)] (-> (page-item page (count pages) active?) (mx/with-key (:id page)))))]]])) diff --git a/frontend/src/uxbox/util/data.cljs b/frontend/src/uxbox/util/data.cljs index 0846e7a4a..0f4b9e660 100644 --- a/frontend/src/uxbox/util/data.cljs +++ b/frontend/src/uxbox/util/data.cljs @@ -154,6 +154,31 @@ [] (partition 2 params)))) +;; (defn normalize-attrs +;; [m] +;; (letfn [(transform [[k v]] +;; (cond +;; (or (= k :class) (= k :class-name)) +;; ["className" v] + +;; (or (keyword? k) (string? k)) +;; [(str/camel (name k)) v] + +;; :else +;; [k v])) +;; (walker [x] +;; (if (map? x) +;; (into {} (map tf) x) +;; x))] +;; (walk/postwalk walker m))) + +(defn normalize-props + [props] + (clj->js props :keyword-fn (fn [key] + (if (or (= key :class) (= key :class-name)) + "className" + (str/camel (name key)))))) + ;; (defmacro mirror-map [& fields] ;; (let [keys# (map #(keyword (name %)) fields) diff --git a/frontend/src/uxbox/util/http.cljs b/frontend/src/uxbox/util/http.cljs index 58adb8ec4..05e136b4a 100644 --- a/frontend/src/uxbox/util/http.cljs +++ b/frontend/src/uxbox/util/http.cljs @@ -59,10 +59,10 @@ (.toString uri))) (defn- fetch - [{:keys [method url query-string query-params headers body] :as request} + [{:keys [method url query-string query headers body] :as request} {:keys [timeout credentials? response-type] :or {timeout 0 credentials? false response-type :text}}] - (let [uri (create-url url query-string query-params) + (let [uri (create-url url query-string query) headers (if headers (clj->js headers) #js {}) method (translate-method method) xhr (doto (XhrIo.) diff --git a/frontend/tools.clj b/frontend/tools.clj index fd3010768..517fec102 100644 --- a/frontend/tools.clj +++ b/frontend/tools.clj @@ -27,7 +27,7 @@ :language-out :ecmascript5 :closure-defines closure-defines :optimizations :none - :verbose true + :verbose false :static-fns false :pretty-print true :elide-asserts false})