3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-25 21:36:09 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Fix colorpalette unexpected exceptions.

Browse source
This commit is contained in:
Andrey Antukh 2020-01-24 12:13:44 +01:00
parent bd5fd97fb7
commit d4799ea1df
2 changed files with 71 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

7
frontend/src/uxbox/main/data/workspace.cljs
View file

@ -692,12 +692,13 @@
;; --- Update Selected Shapes attrs ;; --- Update Selected Shapes attrs
(defn update-selected-shapes (defn update-selected-shapes
[& attrs] [attrs]
(ptk/reify ::update-selected-shapes-attrs (s/assert ::shape-attrs attrs)
(ptk/reify ::update-selected-shapes
ptk/WatchEvent ptk/WatchEvent
(watch [_ state stream] (watch [_ state stream]
(let [selected (get-in state [:workspace-local :selected])] (let [selected (get-in state [:workspace-local :selected])]
(rx/from (map #(apply update-shape % attrs) selected)))))) (rx/from (map #(update-shape % attrs) selected))))))
;; --- Shape Movement (using keyboard shorcuts) ;; --- Shape Movement (using keyboard shorcuts)

48
frontend/src/uxbox/main/ui/workspace/colorpalette.cljs
View file

@ -29,21 +29,20 @@
(mf/defc palette-item (mf/defc palette-item
[{:keys [color] :as props}] [{:keys [color] :as props}]
(letfn [(select-color [event]
(if (kbd/shift? event)
(st/emit! (udw/update-selected-shapes :stroke-color color))
(st/emit! (udw/update-selected-shapes :fill-color color))))]
(let [rgb-vec (hex->rgb color) (let [rgb-vec (hex->rgb color)
rgb-color (apply str "" (interpose ", " rgb-vec))] rgb-color (apply str "" (interpose ", " rgb-vec))
select-color
(fn [event]
(if (kbd/shift? event)
(st/emit! (udw/update-selected-shapes {:stroke-color color}))
(st/emit! (udw/update-selected-shapes {:fill-color color}))))]
[:div.color-cell {:key (str color) [:div.color-cell {:key (str color)
:on-click select-color} :on-click select-color}
[:span.color {:style {:background color}}] [:span.color {:style {:background color}}]
[:span.color-text color] [:span.color-text color]
[:span.color-text rgb-color]]))) [:span.color-text rgb-color]]))
(defn- document-width
[]
(.. js/document -documentElement -clientWidth))
(mf/defc palette (mf/defc palette
[{:keys [colls] :as props}] [{:keys [colls] :as props}]
@ -51,35 +50,46 @@
colls (->> colls colls (->> colls
(filter :id) (filter :id)
(sort-by :name)) (sort-by :name))
coll (or (:selected @local) coll (or (:selected @local)
(first colls)) (first colls))
width (:width @local (* (document-width) 0.84)) doc-width (.. js/document -documentElement -clientWidth)
width (:width @local (* doc-width 0.84))
offset (:offset @local 0) offset (:offset @local 0)
visible (/ width 86) visible (/ width 86)
invisible (- (count (:colors coll)) visible) invisible (- (count (:colors coll)) visible)
close #(st/emit! (udw/toggle-flag :colorpalette)) close #(st/emit! (udw/toggle-layout-flag :colorpalette))
container (mf/use-ref nil) container (mf/use-ref nil)
container-child (mf/use-ref nil)] container-child (mf/use-ref nil)
(letfn [(select-coll [event] select-coll
(fn [event]
(let [id (read-string (dom/event->value event)) (let [id (read-string (dom/event->value event))
selected (seek #(= id (:id %)) colls)] selected (seek #(= id (:id %)) colls)]
(swap! local assoc :selected selected :position 0))) (swap! local assoc :selected selected :position 0)))
(on-left-arrow-click [event]
on-left-arrow-click
(fn [event]
(when (> offset 0) (when (> offset 0)
(let [element (mf/ref-node container-child)] (let [element (mf/ref-node container-child)]
(swap! local update :offset dec)))) (swap! local update :offset dec))))
(on-right-arrow-click [event]
on-right-arrow-click
(fn [event]
(when (< offset invisible) (when (< offset invisible)
(let [element (mf/ref-node container-child)] (let [element (mf/ref-node container-child)]
(swap! local update :offset inc)))) (swap! local update :offset inc))))
(on-scroll [event]
on-scroll
(fn [event]
(if (pos? (.. event -nativeEvent -deltaY)) (if (pos? (.. event -nativeEvent -deltaY))
(on-right-arrow-click event) (on-right-arrow-click event)
(on-left-arrow-click event))) (on-left-arrow-click event)))
(after-render []
after-render
(fn []
(let [dom (mf/ref-node container) (let [dom (mf/ref-node container)
width (.-clientWidth dom)] width (.-clientWidth dom)]
(when (not= (:width @local) width) (when (not= (:width @local) width)
@ -110,7 +120,7 @@
[:& palette-item {:color color :key color}])]] [:& palette-item {:color color :key color}])]]
[:span.right-arrow {:on-click on-right-arrow-click} i/arrow-slide] [:span.right-arrow {:on-click on-right-arrow-click} i/arrow-slide]
[:span.close-palette {:on-click close} i/close]]))) [:span.close-palette {:on-click close} i/close]]))
(mf/defc colorpalette (mf/defc colorpalette
[props] [props]