Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-25 07:58:49 -05:00
Code Issues Activity

Merge pull request #241 from uxbox/fixes_hover_shapes

Browse source 
Fixes hover on shapes
This commit is contained in:
Hirunatan 2020-06-04 08:33:26 +02:00 • committed by GitHub
commit 636e66943b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 37 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
frontend/src/uxbox/main/ui/workspace/shapes/frame.cljs
View file

@ -9,7 +9,6 @@
(ns uxbox.main.ui.workspace.shapes.frame
(:require
[clojure.set :as set]
[rumext.alpha :as mf]
[uxbox.common.data :as d]
[uxbox.main.constants :as c]
@ -17,7 +16,7 @@
[uxbox.main.refs :as refs]
[uxbox.main.store :as st]
[uxbox.main.ui.workspace.shapes.common :as common]
[uxbox.main.ui.workspace.shapes.outline :refer [outline]]
[uxbox.main.data.workspace.selection :as dws]
[uxbox.main.ui.shapes.frame :as frame]
[uxbox.common.geom.matrix :as gmt]
[uxbox.common.geom.point :as gpt]
@ -44,6 +43,20 @@
(recur (first ids) (rest ids))
false))))))
(defn use-mouse-over
[{:keys [id] :as shape}]
(mf/use-callback
(mf/deps shape)
(fn []
(st/emit! (dws/change-hover-state id true)))))
(defn use-mouse-out
[{:keys [id] :as shape}]
(mf/use-callback
(mf/deps shape)
(fn []
(st/emit! (dws/change-hover-state id false)))))
(defn frame-wrapper-factory
[shape-wrapper]
(let [frame-shape (frame/frame-shape shape-wrapper)]
@ -60,10 +73,6 @@
selected? (mf/deref selected-iref)
zoom (mf/deref refs/selected-zoom)
selected-shape? (or (mf/deref refs/selected-shapes) #{})
hover? (or (mf/deref refs/current-hover) #{})
outline? (set/union selected-shape? hover?)
on-mouse-down (mf/use-callback (mf/deps shape)
#(common/on-mouse-down % shape))
on-context-menu (mf/use-callback (mf/deps shape)
@ -105,14 +114,12 @@
(* zoom (:y label-pos))
")")
;; User may also select the frame with single click in the label
:on-click on-double-click}
:on-click on-double-click
:on-mouse-over (use-mouse-over shape)
:on-mouse-out (use-mouse-out shape)}
(:name shape)]
[:*
[:& frame-shape
{:shape shape
:children children}]
[:g.outlines
(for [child (filter (comp outline? :id) children)]
[:& outline {:shape (geom/transform-shape child)}])]]])))))
:children children}]]])))))

18
frontend/src/uxbox/main/ui/workspace/viewport.cljs
View file

@ -9,6 +9,7 @@
(ns uxbox.main.ui.workspace.viewport
(:require
[clojure.set :as set]
[cuerdas.core :as str]
[beicon.core :as rx]
[goog.events :as events]
@ -33,10 +34,12 @@
[uxbox.main.ui.workspace.snap-points :refer [snap-points]]
[uxbox.main.ui.workspace.snap-distances :refer [snap-distances]]
[uxbox.main.ui.workspace.frame-grid :refer [frame-grid]]
[uxbox.main.ui.workspace.shapes.outline :refer [outline]]
[uxbox.common.math :as mth]
[uxbox.util.dom :as dom]
[uxbox.util.dom.dnd :as dnd]
[uxbox.util.object :as obj]
[uxbox.common.geom.shapes :as gsh]
[uxbox.common.geom.point :as gpt]
[uxbox.util.perf :as perf]
[uxbox.common.uuid :as uuid])
@ -130,6 +133,19 @@
[:& shape-wrapper {:shape item
:key (:id item)}]))]))
(mf/defc shape-outlines []
(let [selected-shape? (or (mf/deref refs/selected-shapes) #{})
hover? (or (mf/deref refs/current-hover) #{})
outline? (set/union selected-shape? hover?)
data (mf/deref refs/workspace-data)
shapes (->> data :objects vals (filter (comp outline? :id)))
current-transform (mf/deref refs/current-transform)]
(when (nil? current-transform)
[:g.outlines
(for [shape shapes]
[:& outline {:key (str "outline-" (:id shape))
:shape (gsh/transform-shape shape)}])])))
(mf/defc viewport
[{:keys [page local layout] :as props}]
(let [{:keys [drawing-tool
@ -416,6 +432,8 @@
[:g
[:& frames {:key (:id page)}]
[:& shape-outlines]
(when (seq selected)
[:& selection-handlers {:selected selected
:zoom zoom