mirror of
https://github.com/penpot/penpot.git
synced 2025-03-10 14:51:37 -05:00
🎉 Restore icons toolbox.
This commit is contained in:
Andrey Antukh
parent
03eb756551
commit
bbd7e33059
8 changed files with 158 additions and 113 deletions
|
|
@ -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?)
|
||||
|
|
|
|||
|
|
@ -304,7 +304,7 @@
|
|||
|
||||
;; --- Grid
|
||||
|
||||
(defn- make-icons-iref
|
||||
(defn make-icons-iref
|
||||
[id]
|
||||
(-> (comp (l/key :icons)
|
||||
(l/lens (fn [icons]
|
||||
|
|
|
|||
|
|
@ -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]))
|
||||
|
|
|
|||
|
|
@ -55,6 +55,5 @@
|
|||
:id (str "shape-" id)
|
||||
:width width
|
||||
:height height
|
||||
;; :transform transform
|
||||
))]
|
||||
[:& "rect" props]))
|
||||
|
|
|
|||
|
|
@ -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}]
|
||||
|
|
|
|||
|
|
@ -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.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])]])
|
||||
|
|
|
|||
|
|
@ -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)])]])))
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue