0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-11 07:11:32 -05:00

Changes mouse behaviour

This commit is contained in:
alonso.torres 2021-01-28 13:06:47 +01:00
parent c4e47a8169
commit 0a6db0ff9b
5 changed files with 100 additions and 22 deletions

View file

Before

Width:  |  Height:  |  Size: 442 B

After

Width:  |  Height:  |  Size: 442 B

View file

@ -130,7 +130,7 @@
grid-template-columns: 20px 1fr;
.viewport {
cursor: var(--cursor);
cursor: none;
grid-column: 1 / span 2;
grid-row: 1 / span 2;
overflow: hidden;

View file

@ -22,7 +22,7 @@
;; --- Auxiliar Functions
(s/def ::platform #{:windows :linux :macos :other})
(s/def ::browser #{:chrome :mozilla :safari :edge :other})
(s/def ::browser #{:chrome :firefox :safari :edge :other})
(defn- parse-browser
[]

View file

@ -18,7 +18,7 @@
(def create-artboard (cursor-ref :create-artboard))
(def create-ellipse (cursor-ref :create-ellipse))
(def create-polygon (cursor-ref :create-polygon))
(def create-rectangle (cursor-ref :create-reclangle))
(def create-rectangle (cursor-ref :create-rectangle))
(def create-shape (cursor-ref :create-shape))
(def duplicate (cursor-ref :duplicate 0 0 0))
(def hand (cursor-ref :hand))

View file

@ -59,6 +59,25 @@
(:import goog.events.EventType
goog.events.WheelEvent))
(defonce css-mouse?
(cfg/check-browser? :firefox))
(defn get-cursor [cursor]
(if-not css-mouse?
(name cursor)
(case cursor
:hand cur/hand
:comments cur/comments
:create-artboard cur/create-artboard
:create-rectangle cur/create-rectangle
:create-ellipse cur/create-ellipse
:pen cur/pen
:pencil cur/pencil
:create-shape cur/create-shape
:duplicate cur/duplicate
cur/pointer-inner)))
;; --- Coordinates Widget
(mf/defc coordinates
@ -128,6 +147,65 @@
(declare remote-user-cursors)
(mf/defc render-cursor
{::mf/wrap-props false}
[props]
(let [cursor (unchecked-get props "cursor")
viewport-ref (unchecked-get props "viewport")
visible? (mf/use-state true)
in-viewport? (mf/use-state true)
cursor-ref (mf/use-ref nil)
viewport (mf/ref-val viewport-ref)
node (mf/ref-val cursor-ref)
on-mouse-move
(mf/use-callback
(mf/deps node @visible?)
(fn [left top event]
(let [target (dom/get-target event)
style (.getComputedStyle js/window target)
cursor (.getPropertyValue style "cursor")
x (- (.-clientX event) left)
y (- (.-clientY event) top)]
(cond
(and (= cursor "none") (not @visible?))
(reset! visible? true)
(and (not= cursor "none") @visible?)
(reset! visible? false))
(timers/raf
#(let [style (obj/get node "style")]
(obj/set! style "transform" (str "translate(" x "px, " y "px)")))))))]
(mf/use-effect
(mf/deps viewport on-mouse-move)
(fn []
(when viewport
(let [{:keys [left top]} (dom/get-bounding-rect viewport)
keys [(events/listen (dom/get-root) EventType.MOUSEMOVE (partial on-mouse-move left top))
(events/listen viewport EventType.POINTERENTER #(reset! in-viewport? true))
(events/listen viewport EventType.POINTERLEAVE #(reset! in-viewport? false))]]
(fn []
(doseq [key keys]
(events/unlistenByKey key)))))))
[:svg {:ref cursor-ref
:width 20
:height 20
:viewBox "0 0 16 18"
:style {:position "absolute"
:pointer-events "none"
:will-change "transform"
:display (when-not (and @in-viewport? @visible?) "none")}}
[:use {:xlinkHref (str "#cursor-" cursor)}]]))
;; TODO: revisit the refs usage (vs props)
(mf/defc shape-outlines
@ -249,7 +327,7 @@
selected-objects (mf/deref refs/selected-objects)
alt? (mf/use-state false)
cursor (mf/use-state cur/pointer-inner)
cursor (mf/use-state (get-cursor :pointer-inner))
viewport-ref (mf/use-ref nil)
zoom-view-ref (mf/use-ref nil)
last-position (mf/use-var nil)
@ -598,29 +676,24 @@
;; We schedule the event so it fires after `initialize-page` event
(timers/schedule #(st/emit! (dw/initialize-viewport size))))))
;; This change is in an effect to minimize the sideffects of the cursor chaning
;; Changing a cursor will produce a "reflow" so we defer it until the component is rendered
(mf/use-layout-effect
(mf/use-effect
(mf/deps @cursor @alt? panning drawing-tool drawing-path?)
(fn []
(let [new-cursor
(cond
panning cur/hand
(= drawing-tool :comments) cur/comments
(= drawing-tool :frame) cur/create-artboard
(= drawing-tool :rect) cur/create-rectangle
(= drawing-tool :circle) cur/create-ellipse
(or (= drawing-tool :path) drawing-path?) cur/pen
(= drawing-tool :curve) cur/pencil
drawing-tool cur/create-shape
@alt? cur/duplicate
:else cur/pointer-inner)]
panning (get-cursor :hand)
(= drawing-tool :comments) (get-cursor :comments)
(= drawing-tool :frame) (get-cursor :create-artboard)
(= drawing-tool :rect) (get-cursor :create-rectangle)
(= drawing-tool :circle) (get-cursor :create-ellipse)
(or (= drawing-tool :path)
drawing-path?) (get-cursor :pen)
(= drawing-tool :curve) (get-cursor :pencil)
drawing-tool (get-cursor :create-shape)
@alt? (get-cursor :duplicate)
:else (get-cursor :pointer-inner))]
;; Chrome BUG: https://bugs.chromium.org/p/chromium/issues/detail?id=664066
;; Right now this is a performance concern but cannot find a better alternative
(when (not= @cursor new-cursor)
(timers/raf
#(dom/set-css-property (dom/get-root) "--cursor" new-cursor))
(reset! cursor new-cursor)))))
(mf/use-layout-effect (mf/deps layout) on-resize)
@ -642,6 +715,10 @@
:page-id page-id
:file-id (:id file)}])
(when-not css-mouse?
[:& render-cursor {:viewport viewport-ref
:cursor @cursor}])
[:svg.viewport
{:xmlns "http://www.w3.org/2000/svg"
:xmlnsXlink "http://www.w3.org/1999/xlink"
@ -652,7 +729,8 @@
:view-box (format-viewbox vbox)
:ref viewport-ref
:class (when drawing-tool "drawing")
:style {:background-color (get options :background "#E8E9EA")}
:style {:cursor (when css-mouse? @cursor)
:background-color (get options :background "#E8E9EA")}
:on-context-menu on-context-menu
:on-click on-click
:on-double-click on-double-click