Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-10 00:58:26 -05:00
Code Issues Activity

Merge pull request #212 from uxbox/interactions-enhancements

Browse source 
✨ Add some enhancements in create interactions
This commit is contained in:
Andrey Antukh 2020-05-14 13:36:13 +02:00 • committed by GitHub
commit 1487809c6d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 38 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/uxbox/main/data/viewer.cljs
View file

@ -208,7 +208,7 @@
(watch [_ state stream]
(let [stopper (rx/filter (ptk/type? ::flash-interactions) stream)]
(->> (rx/of flash-done)
(rx/delay 1000)
(rx/delay 500)
(rx/take-until stopper))))))
(def flash-done

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

@ -1452,10 +1452,13 @@
objects (get-in state [:workspace-data page-id :objects])
frame (dwc/get-frame-at-point objects position)
shape-id (first (get-in state [:workspace-local :selected]))]
shape-id (first (get-in state [:workspace-local :selected]))
shape (get objects shape-id)]
(when-not (= position initial-pos)
(if (and frame shape-id (not= (:id frame) shape-id))
(if (and frame shape-id
(not= (:id frame) (:id shape))
(not= (:id frame) (:frame-id shape)))
(rx/of (update-shape shape-id
{:interactions [{:event-type :click
:action-type :navigate

9
frontend/src/uxbox/main/ui/workspace/shapes/common.cljs
View file

@ -24,7 +24,6 @@
(let [selected @refs/selected-shapes
selected? (contains? selected id)
drawing? @refs/selected-drawing-tool
options-mode @refs/options-mode
button (.-which (.-nativeEvent event))]
(when-not (:blocked shape)
(cond
@ -37,9 +36,7 @@
(= type :frame)
(when selected?
(dom/stop-propagation event)
(if (= options-mode :design)
(st/emit! (dw/start-move-selected))
(st/emit! (dw/start-create-interaction))))
(st/emit! (dw/start-move-selected)))))
:else
(do
@ -48,9 +45,7 @@
(when-not (or (empty? selected) (kbd/shift? event))
(st/emit! dw/deselect-all))
(st/emit! (dw/select-shape id)))
(if (= options-mode :design)
(st/emit! (dw/start-move-selected))
(st/emit! (dw/start-create-interaction))))))))
(st/emit! (dw/start-move-selected)))))
(defn on-context-menu
[event shape]

32
frontend/src/uxbox/main/ui/workspace/shapes/interactions.cljs
View file

@ -141,10 +141,34 @@
:stroke-width 2
:d arrow-pdata}]])))
(mf/defc interaction-handle
[{:keys [shape selected] :as props}]
(let [shape-rect (geom/selection-rect-shape shape)
handle-x (+ (:x shape-rect) (:width shape-rect))
handle-y (+ (:y shape-rect) (/ (:height shape-rect) 2))
arrow-path ["M" (- handle-x 5) handle-y "l 8 0 l -4 -4 m 4 4 l -4 4"]
arrow-pdata (str/join " " arrow-path)]
[:g {:on-mouse-down #(on-mouse-down % shape selected)}
[:circle {:cx handle-x
:cy handle-y
:r 8
:stroke "#31EFB8"
:stroke-width 2
:fill "#FFFFFF"}]
[:path {:stroke "#31EFB8"
:fill "transparent"
:stroke-width 2
:d arrow-pdata}]]))
(mf/defc interactions
[{:keys [selected] :as props}]
(let [data (mf/deref refs/workspace-data)
local (mf/deref refs/workspace-local)
current-transform (:transform local)
objects (:objects data)
active-shapes (filter #(first (get-click-interaction %)) (vals objects))
selected-shapes (map #(get objects %) selected)
@ -171,10 +195,14 @@
(for [shape selected-shapes]
(let [interaction (get-click-interaction shape)
dest-shape (get objects (:destination interaction))]
(when dest-shape
(if dest-shape
[:& interaction-path {:key (:id shape)
:orig-shape shape
:dest-shape dest-shape
:selected selected
:selected? true}]))))]))
:selected? true}]
(when (not (#{:move :rotate} current-transform))
[:& interaction-handle {:key (:id shape)
:shape shape
:selected selected}])))))]))