🎉 Restore icons toolbox.

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?)

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]

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)
+        props (-> (attrs/extract-style-attrs shape)
-               :x x1
+                  (assoc :x x
-               :y y1
+                         :y y
-               :view-box view-box
+                         :transform transform
-               :class (classnames :move-cursor moving?)
+                         :id (str "shape-" id)
                          :width width
                          :height height
-               :preserve-aspect-ratio "none"
+                         :viewBox view-box
-               :dangerouslySetInnerHTML #js {:__html content}}
+                         :preserveAspectRatio "none"
-
+                         :dangerouslySetInnerHTML #js {:__html content}
-        attrs (merge props (attrs/extract-style-attrs shape))]
+                         ))]
     [: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]))

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

@@ -55,6 +55,5 @@
                          :id (str "shape-" id)
                          :width width
                          :height height
-                         ;; :transform transform
                          ))]
     [:& "rect" props]))

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,6 +306,7 @@
 (mf/defc generic-draw-area
   [{:keys [shape zoom]}]
   (let [{:keys [x y width height]} (geom/shape->rect-shape shape)]
+    (when (and x y)
       [:g
        [:& shapes/shape-wrapper {:shape shape}]
        [:rect.main {:x x :y y
@@ -313,7 +315,7 @@
                     :stroke-dasharray (str (/ 5.0 zoom) "," (/ 5 zoom))
                     :style {:stroke "#333"
                             :fill "transparent"
-                          :stroke-opacity "1"}}]]))
+                            :stroke-opacity "1"}}]])))
 
 (mf/defc path-draw-area
   [{:keys [shape] :as props}]

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 <niwi@niwi.nz>
 ;; Copyright (c) 2015-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
@@ -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.main.ui.workspace.sidebar.sitemap :refer [sitemap-toolbox]]))
-   [uxbox.util.rdnd :as rdnd]))
 
 ;; --- Left Sidebar (Component)
 
@@ -37,5 +39,5 @@
    [:div.settings-bar-inside
     (when (contains? layout :element-options)
       [:& options-toolbox {:page page}])
-    #_(when (contains? layout :icons)
+    (when (contains? layout :icons)
-      (icons-toolbox))]])
+      [:& icons-toolbox])]])

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 :as i18n :refer [t]]
-   [uxbox.util.i18n :refer (tr)]))
+   [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))
-
-(def ^:private icons-toolbox-ref
-  (-> (l/in [:workspace :icons-toolbox])
-      (l/derive st/state)))
-
-;; --- Icons (Component)
-
-(mx/defc icon-wrapper
-  {:mixins [mx/static]}
-  [icon]
-  (icon/icon-svg icon))
-
-(defn- icons-toolbox-init
-  [own]
-  (st/emit! (dw/initialize-icons-toolbox))
-  own)
-
-(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)
-
-        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))}
+                                :value (pr-str value)}
     [:option {:value (pr-str nil)} "Storage"]
-          (for [coll colls]
+    (for [coll collections]
       [:option {:key (str "icon-coll" (:id coll))
                 :value (pr-str (:id coll))}
-             (:name coll)])]]
+       (:name coll)])]])
+
+(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? (= drawing icon)]]
+          :let [selected? (= nil #_(:drawing local) icon)]]
       [:div.figure-btn {:key (str (:id icon))
                         :class (when selected? "selected")
-                            :on-click (partial on-select icon)}
+                        :on-click #(on-select % icon)
-           (icon-wrapper icon)])]])))
+                        }
+       [:& icon/icon-svg {:shape icon}]])))
+
+;; --- Icons (Component)
+
+(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)
+
+        on-close
+        (fn [event]
+          (st/emit! (dw/toggle-layout-flag :icons)))
+
+        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))))
+        ]
+
+    (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)])]])))

frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs

@@ -29,17 +29,16 @@
 
 ;; --- Helpers
 
-(defn- element-icon
+(mf/defc element-icon
-  [item]
+  [{:keys [shape] :as props}]
-  (case (:type item)
+  (case (:type shape)
-    :icon (icon/icon-svg item)
+    :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