From bbd7e33059e35677fb4bdda661b0b82d8d47e325 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Mon, 27 Jan 2020 15:24:35 +0100 Subject: [PATCH] :tada: Restore icons toolbox. --- common/uxbox/common/pages.cljc | 3 +- .../src/uxbox/main/ui/dashboard/icons.cljs | 2 +- frontend/src/uxbox/main/ui/shapes/icon.cljs | 48 +++-- frontend/src/uxbox/main/ui/shapes/rect.cljs | 1 - .../src/uxbox/main/ui/workspace/drawarea.cljs | 20 +- .../src/uxbox/main/ui/workspace/sidebar.cljs | 10 +- .../main/ui/workspace/sidebar/icons.cljs | 175 +++++++++++------- .../main/ui/workspace/sidebar/layers.cljs | 12 +- 8 files changed, 158 insertions(+), 113 deletions(-) diff --git a/common/uxbox/common/pages.cljc b/common/uxbox/common/pages.cljc index ceb7cb2b5..47f8992ac 100644 --- a/common/uxbox/common/pages.cljc +++ b/common/uxbox/common/pages.cljc @@ -11,7 +11,6 @@ (s/def ::shape-id uuid?) (s/def ::session-id uuid?) (s/def ::name string?) -(s/def ::type keyword?) ;; Page Options (s/def ::grid-x number?) @@ -47,7 +46,7 @@ (s/def ::stroke-style #{:none :solid :dotted :dashed :mixed}) (s/def ::stroke-width number?) (s/def ::text-align #{"left" "right" "center" "justify"}) -(s/def ::type #{:rect :path :circle :image :text :canvas :curve}) +(s/def ::type #{:rect :path :circle :image :text :canvas :curve :icon}) (s/def ::x number?) (s/def ::y number?) (s/def ::cx number?) diff --git a/frontend/src/uxbox/main/ui/dashboard/icons.cljs b/frontend/src/uxbox/main/ui/dashboard/icons.cljs index fff2401bb..39419fb07 100644 --- a/frontend/src/uxbox/main/ui/dashboard/icons.cljs +++ b/frontend/src/uxbox/main/ui/dashboard/icons.cljs @@ -304,7 +304,7 @@ ;; --- Grid -(defn- make-icons-iref +(defn make-icons-iref [id] (-> (comp (l/key :icons) (l/lens (fn [icons] diff --git a/frontend/src/uxbox/main/ui/shapes/icon.cljs b/frontend/src/uxbox/main/ui/shapes/icon.cljs index 6ab6ae9f9..cb46e0a23 100644 --- a/frontend/src/uxbox/main/ui/shapes/icon.cljs +++ b/frontend/src/uxbox/main/ui/shapes/icon.cljs @@ -7,7 +7,7 @@ (ns uxbox.main.ui.shapes.icon (:require [rumext.alpha :as mf] - [rumext.core :as mx] + [cuerdas.core :as str] [uxbox.main.geom :as geom] [uxbox.main.refs :as refs] [uxbox.main.ui.shapes.attrs :as attrs] @@ -32,14 +32,6 @@ ;; --- Icon Shape -(defn- rotate - ;; TODO: revisit, i'm not sure if this function is duplicated. - [mt {:keys [x1 y1 x2 y2 width height rotation] :as shape}] - (let [x-center (+ x1 (/ width 2)) - y-center (+ y1 (/ height 2)) - center (gpt/point x-center y-center)] - (gmt/rotate mt rotation center))) - (mf/defc icon-shape [{:keys [shape] :as props}] (let [{:keys [id content metadata rotation modifier-mtx]} shape @@ -48,26 +40,30 @@ (gmt/matrix? modifier-mtx) (geom/transform shape modifier-mtx) :else shape) - {:keys [x1 y1 width height] :as shape} (geom/size shape) + {:keys [x y width height] :as shape} shape + + transform (when (and rotation (pos? rotation)) + (str/format "rotate(%s %s %s)" + rotation + (+ x (/ width 2)) + (+ y (/ height 2)))) - transform (when (pos? rotation) - (str (rotate (gmt/matrix) shape))) view-box (apply str (interpose " " (:view-box metadata))) - moving? (boolean modifier-mtx) - props {:id (str id) - :x x1 - :y y1 - :view-box view-box - :class (classnames :move-cursor moving?) - :width width - :height height - :preserve-aspect-ratio "none" - :dangerouslySetInnerHTML #js {:__html content}} - attrs (merge props (attrs/extract-style-attrs shape))] + 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} + ))] [:g {:transform transform} - [:> :svg (normalize-props attrs) ]])) + [:& "svg" props]])) ;; --- Icon SVG @@ -75,7 +71,7 @@ [{:keys [shape] :as props}] (let [{:keys [content id metadata]} shape view-box (apply str (interpose " " (:view-box metadata))) - props {:view-box view-box + props {:viewBox view-box :id (str "shape-" id) :dangerouslySetInnerHTML #js {:__html content}}] - [:> :svg (normalize-props props)])) + [:& "svg" props])) diff --git a/frontend/src/uxbox/main/ui/shapes/rect.cljs b/frontend/src/uxbox/main/ui/shapes/rect.cljs index 966920ec6..f1cfa5d75 100644 --- a/frontend/src/uxbox/main/ui/shapes/rect.cljs +++ b/frontend/src/uxbox/main/ui/shapes/rect.cljs @@ -55,6 +55,5 @@ :id (str "shape-" id) :width width :height height - ;; :transform transform ))] [:& "rect" props])) diff --git a/frontend/src/uxbox/main/ui/workspace/drawarea.cljs b/frontend/src/uxbox/main/ui/workspace/drawarea.cljs index 51e473400..d776405e0 100644 --- a/frontend/src/uxbox/main/ui/workspace/drawarea.cljs +++ b/frontend/src/uxbox/main/ui/workspace/drawarea.cljs @@ -40,6 +40,7 @@ :name "Rect" :stroke-color "#000000"} {:type :image} + {:type :icon} {:type :circle :name "Circle"} {:type :path @@ -305,15 +306,16 @@ (mf/defc generic-draw-area [{:keys [shape zoom]}] (let [{:keys [x y width height]} (geom/shape->rect-shape shape)] - [:g - [:& shapes/shape-wrapper {:shape shape}] - [:rect.main {:x x :y y - :width width - :height height - :stroke-dasharray (str (/ 5.0 zoom) "," (/ 5 zoom)) - :style {:stroke "#333" - :fill "transparent" - :stroke-opacity "1"}}]])) + (when (and x y) + [:g + [:& shapes/shape-wrapper {:shape shape}] + [:rect.main {:x x :y y + :width width + :height height + :stroke-dasharray (str (/ 5.0 zoom) "," (/ 5 zoom)) + :style {:stroke "#333" + :fill "transparent" + :stroke-opacity "1"}}]]))) (mf/defc path-draw-area [{:keys [shape] :as props}] diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar.cljs index bc26e9549..bd18b669e 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar.cljs @@ -2,6 +2,9 @@ ;; 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-2017 Andrey Antukh ;; Copyright (c) 2015-2017 Juan de la Cruz @@ -12,8 +15,7 @@ [uxbox.main.ui.workspace.sidebar.icons :refer [icons-toolbox]] [uxbox.main.ui.workspace.sidebar.layers :refer [layers-toolbox]] [uxbox.main.ui.workspace.sidebar.options :refer [options-toolbox]] - [uxbox.main.ui.workspace.sidebar.sitemap :refer [sitemap-toolbox]] - [uxbox.util.rdnd :as rdnd])) + [uxbox.main.ui.workspace.sidebar.sitemap :refer [sitemap-toolbox]])) ;; --- Left Sidebar (Component) @@ -37,5 +39,5 @@ [:div.settings-bar-inside (when (contains? layout :element-options) [:& options-toolbox {:page page}]) - #_(when (contains? layout :icons) - (icons-toolbox))]]) + (when (contains? layout :icons) + [:& icons-toolbox])]]) diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/icons.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/icons.cljs index 7faeec7d7..151fa238e 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/icons.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/icons.cljs @@ -8,82 +8,129 @@ (ns uxbox.main.ui.workspace.sidebar.icons (:require [lentes.core :as l] - [rumext.core :as mx] + [rumext.alpha :as mf] [uxbox.builtins.icons :as i] - [uxbox.main.data.icons :as udi] + [uxbox.main.data.icons :as di] [uxbox.main.data.workspace :as dw] + [uxbox.main.refs :as refs] [uxbox.main.store :as st] [uxbox.main.ui.dashboard.icons :as icons] [uxbox.main.ui.shapes.icon :as icon] - [uxbox.util.data :refer (read-string)] + [uxbox.util.data :refer [read-string]] [uxbox.util.dom :as dom] - [uxbox.util.router :as r] - [uxbox.util.i18n :refer (tr)])) + [uxbox.util.i18n :as i18n :refer [t]] + [uxbox.util.router :as r])) -;; --- Refs +(mf/defc icons-collections + [{:keys [collections value on-change] :as props}] -;; (def ^:private drawing-shape-ref -;; "A focused vision of the drawing property -;; of the workspace status. This avoids -;; rerender the whole toolbox on each workspace -;; change." -;; (l/derive ul/selected-drawing st/state)) + [:div.figures-catalog + ;; extract component: set selector + [:select.input-select.small {:on-change on-change + :value (pr-str value)} + [:option {:value (pr-str nil)} "Storage"] + (for [coll collections] + [:option {:key (str "icon-coll" (:id coll)) + :value (pr-str (:id coll))} + (:name coll)])]]) -(def ^:private icons-toolbox-ref - (-> (l/in [:workspace :icons-toolbox]) - (l/derive st/state))) +(mf/defc icons-list + [{:keys [collection-id] :as props}] + (let [icons-iref (mf/use-memo + {:fn #(icons/make-icons-iref collection-id) + :deps (mf/deps collection-id)}) + icons (mf/deref icons-iref) + + on-select + (fn [event data] + (st/emit! (dw/select-for-drawing :icon data)))] + + (mf/use-effect + {:fn #(st/emit! (di/fetch-icons collection-id)) + :deps (mf/deps collection-id)}) + + (for [icon icons + :let [selected? (= nil #_(:drawing local) icon)]] + [:div.figure-btn {:key (str (:id icon)) + :class (when selected? "selected") + :on-click #(on-select % icon) + } + [:& icon/icon-svg {:shape icon}]]))) ;; --- Icons (Component) -(mx/defc icon-wrapper - {:mixins [mx/static]} - [icon] - (icon/icon-svg icon)) +(mf/defc icons-toolbox + [props] + (let [locale (i18n/use-locale) + local (mf/deref refs/workspace-local) + collections (mf/deref icons/collections-iref) + collection (first collections) -(defn- icons-toolbox-init - [own] - (st/emit! (dw/initialize-icons-toolbox)) - own) + on-close + (fn [event] + (st/emit! (dw/toggle-layout-flag :icons))) -(mx/defc icons-toolbox - {:mixins [mx/static mx/reactive] - :init icons-toolbox-init} - [] - #_(let [drawing (mx/react drawing-shape-ref) - selected (mx/react icons-toolbox-ref) - colls (mx/react icons/collections-ref) - selected-coll (get colls selected) + on-change + (fn [event] + (let [value (read-string (dom/event->value event))] + (st/emit! (dw/select-for-drawing nil) + #_(dw/select-icons-toolbox-collection value)))) + ] - colls (->> (vals (mx/react icons/collections-ref)) - (sort-by :name)) - icons (->> (vals (mx/react icons/icons-ref)) - (filter #(= (:id selected-coll) (:collection %))))] - (letfn [(on-close [event] - (st/emit! (dw/toggle-flag :icons))) - (on-select [icon event] - (st/emit! (dw/select-for-drawing icon))) - (on-change [event] - (let [value (read-string (dom/event->value event))] - (st/emit! (dw/select-for-drawing nil) - (dw/select-icons-toolbox-collection value))))] - [:div#form-figures.tool-window - [:div.tool-window-bar - [:div.tool-window-icon i/icon-set] - [:span (tr "ds.settings.icons")] - [:div.tool-window-close {:on-click on-close} i/close]] - [:div.tool-window-content - [:div.figures-catalog - ;; extract component: set selector - [:select.input-select.small {:on-change on-change - :value (pr-str (:id selected-coll))} - [:option {:value (pr-str nil)} "Storage"] - (for [coll colls] - [:option {:key (str "icon-coll" (:id coll)) - :value (pr-str (:id coll))} - (:name coll)])]] - (for [icon icons - :let [selected? (= drawing icon)]] - [:div.figure-btn {:key (str (:id icon)) - :class (when selected? "selected") - :on-click (partial on-select icon)} - (icon-wrapper icon)])]]))) + (mf/use-effect + {:fn #(st/emit! di/fetch-collections)}) + + (prn "icons-toolbox") + + [:div#form-figures.tool-window + [:div.tool-window-bar + [:div.tool-window-icon i/icon-set] + [:span (t locale "ds.settings.icons")] + [:div.tool-window-close #_{:on-click on-close} i/close]] + [:div.tool-window-content + [:& icons-collections {:collections collections + :value (:id collection) + :on-change (constantly nil) + }] + [:& icons-list {:collection-id nil}]]])) + + + + ;; #_(let [drawing (mx/react drawing-shape-ref) + ;; selected (mx/react icons-toolbox-ref) + ;; colls (mx/react icons/collections-ref) + ;; selected-coll (get colls selected) + + ;; colls (->> (vals (mx/react icons/collections-ref)) + ;; (sort-by :name)) + ;; icons (->> (vals (mx/react icons/icons-ref)) + ;; (filter #(= (:id selected-coll) (:collection %))))] + ;; (letfn [(on-close [event] + ;; (st/emit! (dw/toggle-flag :icons))) + ;; (on-select [icon event] + ;; (st/emit! (dw/select-for-drawing icon))) + ;; (on-change [event] + ;; (let [value (read-string (dom/event->value event))] + ;; (st/emit! (dw/select-for-drawing nil) + ;; (dw/select-icons-toolbox-collection value))))] + ;; [:div#form-figures.tool-window + ;; [:div.tool-window-bar + ;; [:div.tool-window-icon i/icon-set] + ;; [:span (tr "ds.settings.icons")] + ;; [:div.tool-window-close {:on-click on-close} i/close]] + ;; [:div.tool-window-content + ;; [:div.figures-catalog + ;; ;; extract component: set selector + ;; [:select.input-select.small {:on-change on-change + ;; :value (pr-str (:id selected-coll))} + ;; [:option {:value (pr-str nil)} "Storage"] + ;; (for [coll colls] + ;; [:option {:key (str "icon-coll" (:id coll)) + ;; :value (pr-str (:id coll))} + ;; (:name coll)])]] + ;; (for [icon icons + ;; :let [selected? (= drawing icon)]] + ;; [:div.figure-btn {:key (str (:id icon)) + ;; :class (when selected? "selected") + ;; :on-click (partial on-select icon)} + ;; (icon-wrapper icon)])]]))) diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs index 4ddd7a153..a4aa3b4bf 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs @@ -29,17 +29,16 @@ ;; --- Helpers -(defn- element-icon - [item] - (case (:type item) - :icon (icon/icon-svg item) +(mf/defc element-icon + [{:keys [shape] :as props}] + (case (:type shape) + :icon [:& icon/icon-svg {:shape shape}] :image i/image :line i/line :circle i/circle :path i/curve :rect i/box :text i/text - :group i/folder nil)) ;; --- Layer Name @@ -145,7 +144,8 @@ [:div.block-element {:class (when (:blocked shape) "selected") :on-click toggle-blocking} i/lock]] - [:div.element-icon (element-icon shape)] + [:& element-icon {:shape shape}] + ;; [:div.element-icon (element-icon shape)] [:& layer-name {:shape shape}]]])) (mf/defc canvas-item