mirror of
https://github.com/penpot/penpot.git
synced 2025-06-12 15:01:39 +02:00
🎉 Restore icons toolbox.
This commit is contained in:
parent
03eb756551
commit
bbd7e33059
8 changed files with 158 additions and 113 deletions
|
@ -11,7 +11,6 @@
|
||||||
(s/def ::shape-id uuid?)
|
(s/def ::shape-id uuid?)
|
||||||
(s/def ::session-id uuid?)
|
(s/def ::session-id uuid?)
|
||||||
(s/def ::name string?)
|
(s/def ::name string?)
|
||||||
(s/def ::type keyword?)
|
|
||||||
|
|
||||||
;; Page Options
|
;; Page Options
|
||||||
(s/def ::grid-x number?)
|
(s/def ::grid-x number?)
|
||||||
|
@ -47,7 +46,7 @@
|
||||||
(s/def ::stroke-style #{:none :solid :dotted :dashed :mixed})
|
(s/def ::stroke-style #{:none :solid :dotted :dashed :mixed})
|
||||||
(s/def ::stroke-width number?)
|
(s/def ::stroke-width number?)
|
||||||
(s/def ::text-align #{"left" "right" "center" "justify"})
|
(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 ::x number?)
|
||||||
(s/def ::y number?)
|
(s/def ::y number?)
|
||||||
(s/def ::cx number?)
|
(s/def ::cx number?)
|
||||||
|
|
|
@ -304,7 +304,7 @@
|
||||||
|
|
||||||
;; --- Grid
|
;; --- Grid
|
||||||
|
|
||||||
(defn- make-icons-iref
|
(defn make-icons-iref
|
||||||
[id]
|
[id]
|
||||||
(-> (comp (l/key :icons)
|
(-> (comp (l/key :icons)
|
||||||
(l/lens (fn [icons]
|
(l/lens (fn [icons]
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
(ns uxbox.main.ui.shapes.icon
|
(ns uxbox.main.ui.shapes.icon
|
||||||
(:require
|
(:require
|
||||||
[rumext.alpha :as mf]
|
[rumext.alpha :as mf]
|
||||||
[rumext.core :as mx]
|
[cuerdas.core :as str]
|
||||||
[uxbox.main.geom :as geom]
|
[uxbox.main.geom :as geom]
|
||||||
[uxbox.main.refs :as refs]
|
[uxbox.main.refs :as refs]
|
||||||
[uxbox.main.ui.shapes.attrs :as attrs]
|
[uxbox.main.ui.shapes.attrs :as attrs]
|
||||||
|
@ -32,14 +32,6 @@
|
||||||
|
|
||||||
;; --- Icon Shape
|
;; --- 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
|
(mf/defc icon-shape
|
||||||
[{:keys [shape] :as props}]
|
[{:keys [shape] :as props}]
|
||||||
(let [{:keys [id content metadata rotation modifier-mtx]} shape
|
(let [{:keys [id content metadata rotation modifier-mtx]} shape
|
||||||
|
@ -48,26 +40,30 @@
|
||||||
(gmt/matrix? modifier-mtx) (geom/transform shape modifier-mtx)
|
(gmt/matrix? modifier-mtx) (geom/transform shape modifier-mtx)
|
||||||
:else shape)
|
: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)))
|
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
|
:width width
|
||||||
:height height
|
: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}
|
[:g {:transform transform}
|
||||||
[:> :svg (normalize-props attrs) ]]))
|
[:& "svg" props]]))
|
||||||
|
|
||||||
;; --- Icon SVG
|
;; --- Icon SVG
|
||||||
|
|
||||||
|
@ -75,7 +71,7 @@
|
||||||
[{:keys [shape] :as props}]
|
[{:keys [shape] :as props}]
|
||||||
(let [{:keys [content id metadata]} shape
|
(let [{:keys [content id metadata]} shape
|
||||||
view-box (apply str (interpose " " (:view-box metadata)))
|
view-box (apply str (interpose " " (:view-box metadata)))
|
||||||
props {:view-box view-box
|
props {:viewBox view-box
|
||||||
:id (str "shape-" id)
|
:id (str "shape-" id)
|
||||||
:dangerouslySetInnerHTML #js {:__html content}}]
|
:dangerouslySetInnerHTML #js {:__html content}}]
|
||||||
[:> :svg (normalize-props props)]))
|
[:& "svg" props]))
|
||||||
|
|
|
@ -55,6 +55,5 @@
|
||||||
:id (str "shape-" id)
|
:id (str "shape-" id)
|
||||||
:width width
|
:width width
|
||||||
:height height
|
:height height
|
||||||
;; :transform transform
|
|
||||||
))]
|
))]
|
||||||
[:& "rect" props]))
|
[:& "rect" props]))
|
||||||
|
|
|
@ -40,6 +40,7 @@
|
||||||
:name "Rect"
|
:name "Rect"
|
||||||
:stroke-color "#000000"}
|
:stroke-color "#000000"}
|
||||||
{:type :image}
|
{:type :image}
|
||||||
|
{:type :icon}
|
||||||
{:type :circle
|
{:type :circle
|
||||||
:name "Circle"}
|
:name "Circle"}
|
||||||
{:type :path
|
{:type :path
|
||||||
|
@ -305,6 +306,7 @@
|
||||||
(mf/defc generic-draw-area
|
(mf/defc generic-draw-area
|
||||||
[{:keys [shape zoom]}]
|
[{:keys [shape zoom]}]
|
||||||
(let [{:keys [x y width height]} (geom/shape->rect-shape shape)]
|
(let [{:keys [x y width height]} (geom/shape->rect-shape shape)]
|
||||||
|
(when (and x y)
|
||||||
[:g
|
[:g
|
||||||
[:& shapes/shape-wrapper {:shape shape}]
|
[:& shapes/shape-wrapper {:shape shape}]
|
||||||
[:rect.main {:x x :y y
|
[:rect.main {:x x :y y
|
||||||
|
@ -313,7 +315,7 @@
|
||||||
:stroke-dasharray (str (/ 5.0 zoom) "," (/ 5 zoom))
|
:stroke-dasharray (str (/ 5.0 zoom) "," (/ 5 zoom))
|
||||||
:style {:stroke "#333"
|
:style {:stroke "#333"
|
||||||
:fill "transparent"
|
:fill "transparent"
|
||||||
:stroke-opacity "1"}}]]))
|
:stroke-opacity "1"}}]])))
|
||||||
|
|
||||||
(mf/defc path-draw-area
|
(mf/defc path-draw-area
|
||||||
[{:keys [shape] :as props}]
|
[{:keys [shape] :as props}]
|
||||||
|
|
|
@ -2,6 +2,9 @@
|
||||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
;; 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/.
|
;; 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 Andrey Antukh <niwi@niwi.nz>
|
||||||
;; Copyright (c) 2015-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
;; 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.icons :refer [icons-toolbox]]
|
||||||
[uxbox.main.ui.workspace.sidebar.layers :refer [layers-toolbox]]
|
[uxbox.main.ui.workspace.sidebar.layers :refer [layers-toolbox]]
|
||||||
[uxbox.main.ui.workspace.sidebar.options :refer [options-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)
|
;; --- Left Sidebar (Component)
|
||||||
|
|
||||||
|
@ -37,5 +39,5 @@
|
||||||
[:div.settings-bar-inside
|
[:div.settings-bar-inside
|
||||||
(when (contains? layout :element-options)
|
(when (contains? layout :element-options)
|
||||||
[:& options-toolbox {:page page}])
|
[:& options-toolbox {:page page}])
|
||||||
#_(when (contains? layout :icons)
|
(when (contains? layout :icons)
|
||||||
(icons-toolbox))]])
|
[:& icons-toolbox])]])
|
||||||
|
|
|
@ -8,82 +8,129 @@
|
||||||
(ns uxbox.main.ui.workspace.sidebar.icons
|
(ns uxbox.main.ui.workspace.sidebar.icons
|
||||||
(:require
|
(:require
|
||||||
[lentes.core :as l]
|
[lentes.core :as l]
|
||||||
[rumext.core :as mx]
|
[rumext.alpha :as mf]
|
||||||
[uxbox.builtins.icons :as i]
|
[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.data.workspace :as dw]
|
||||||
|
[uxbox.main.refs :as refs]
|
||||||
[uxbox.main.store :as st]
|
[uxbox.main.store :as st]
|
||||||
[uxbox.main.ui.dashboard.icons :as icons]
|
[uxbox.main.ui.dashboard.icons :as icons]
|
||||||
[uxbox.main.ui.shapes.icon :as icon]
|
[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.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
|
[:div.figures-catalog
|
||||||
;; extract component: set selector
|
;; extract component: set selector
|
||||||
[:select.input-select.small {:on-change on-change
|
[:select.input-select.small {:on-change on-change
|
||||||
:value (pr-str (:id selected-coll))}
|
:value (pr-str value)}
|
||||||
[:option {:value (pr-str nil)} "Storage"]
|
[:option {:value (pr-str nil)} "Storage"]
|
||||||
(for [coll colls]
|
(for [coll collections]
|
||||||
[:option {:key (str "icon-coll" (:id coll))
|
[:option {:key (str "icon-coll" (:id coll))
|
||||||
:value (pr-str (: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
|
(for [icon icons
|
||||||
:let [selected? (= drawing icon)]]
|
:let [selected? (= nil #_(:drawing local) icon)]]
|
||||||
[:div.figure-btn {:key (str (:id icon))
|
[:div.figure-btn {:key (str (:id icon))
|
||||||
:class (when selected? "selected")
|
: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)])]])))
|
||||||
|
|
|
@ -29,17 +29,16 @@
|
||||||
|
|
||||||
;; --- Helpers
|
;; --- 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
|
:image i/image
|
||||||
:line i/line
|
:line i/line
|
||||||
:circle i/circle
|
:circle i/circle
|
||||||
:path i/curve
|
:path i/curve
|
||||||
:rect i/box
|
:rect i/box
|
||||||
:text i/text
|
:text i/text
|
||||||
:group i/folder
|
|
||||||
nil))
|
nil))
|
||||||
|
|
||||||
;; --- Layer Name
|
;; --- Layer Name
|
||||||
|
@ -145,7 +144,8 @@
|
||||||
[:div.block-element {:class (when (:blocked shape) "selected")
|
[:div.block-element {:class (when (:blocked shape) "selected")
|
||||||
:on-click toggle-blocking}
|
:on-click toggle-blocking}
|
||||||
i/lock]]
|
i/lock]]
|
||||||
[:div.element-icon (element-icon shape)]
|
[:& element-icon {:shape shape}]
|
||||||
|
;; [:div.element-icon (element-icon shape)]
|
||||||
[:& layer-name {:shape shape}]]]))
|
[:& layer-name {:shape shape}]]]))
|
||||||
|
|
||||||
(mf/defc canvas-item
|
(mf/defc canvas-item
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue