Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-05 03:21:26 -05:00
Code Issues Activity

Merge remote-tracking branch 'origin/staging' into develop

Browse source
This commit is contained in:
Alejandro Alonso 2023-03-15 09:44:44 +01:00
commit d685888720
48 changed files with 328 additions and 263 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
CHANGES.md
View file

@ -39,6 +39,8 @@
- Fix unlink library color when blur color picker input [#3026](https://github.com/penpot/penpot/issues/3026)
- Fix snap pixel when moving path points on high zoom [#2930](https://github.com/penpot/penpot/issues/2930)
- Fix shortcuts for zoom now take into account the mouse position [#2924](https://github.com/penpot/penpot/issues/2924)
- Fix close colorpicker on Firefox when mouse-up is outside the picker [#2911](https://github.com/penpot/penpot/issues/2911)
- Fix problems with touch devices and Wacom tablets [#2216](https://github.com/penpot/penpot/issues/2216)
### :heart: Community contributions by (Thank you!)
- To @ondrejkonec: for contributing to the code with:

24
common/src/app/common/geom/matrix.cljc
View file

@ -187,20 +187,28 @@
(defn scale-matrix
([pt center]
(-> (matrix)
(multiply! (translate-matrix center))
(multiply! (scale-matrix pt))
(multiply! (translate-matrix (gpt/negate center)))))
(let [sx (dm/get-prop pt :x)
sy (dm/get-prop pt :y)
cx (dm/get-prop center :x)
cy (dm/get-prop center :y)]
(Matrix. sx 0 0 sy (- cx (* cx sx)) (- cy (* cy sy)))))
([pt]
(assert (gpt/point? pt))
(Matrix. (dm/get-prop pt :x) 0 0 (dm/get-prop pt :y) 0 0)))
(defn rotate-matrix
([angle point]
(-> (matrix)
(multiply! (translate-matrix point))
(multiply! (rotate-matrix angle))
(multiply! (translate-matrix (gpt/negate point)))))
(let [cx (dm/get-prop point :x)
cy (dm/get-prop point :y)
nx (- cx)
ny (- cy)
a (mth/radians angle)
c (mth/cos a)
s (mth/sin a)
ns (- s)
tx (+ (* c nx) (* ns ny) cx)
ty (+ (* s nx) (* c ny) cy)]
(Matrix. c s ns c tx ty)))
([angle]
(let [a (mth/radians angle)]
(Matrix. (mth/cos a)

16
common/src/app/common/geom/shapes/constraints.cljc
View file

@ -288,25 +288,25 @@
constraints-h
(cond
ignore-constraints
:scale
(and (ctl/any-layout? parent) (not (ctl/layout-absolute? child)))
:left
(not ignore-constraints)
(:constraints-h child (default-constraints-h child))
:else
:scale)
(:constraints-h child (default-constraints-h child)))
constraints-v
(cond
ignore-constraints
:scale
(and (ctl/any-layout? parent) (not (ctl/layout-absolute? child)))
:top
(not ignore-constraints)
(:constraints-v child (default-constraints-v child))
:else
:scale)]
(:constraints-v child (default-constraints-v child)))]
(if (and (= :scale constraints-h) (= :scale constraints-v))
modifiers

14
common/src/app/common/geom/shapes/modifiers.cljc
View file

@ -322,10 +322,20 @@
(defn- apply-structure-modifiers
[objects modif-tree]
(letfn [(apply-shape [objects [id {:keys [modifiers]}]]
(letfn [(update-children-structure-modifiers
[objects ids modifiers]
(reduce #(update %1 %2 ctm/apply-structure-modifiers modifiers) objects ids))
(apply-shape [objects [id {:keys [modifiers]}]]
(cond-> objects
(ctm/has-structure? modifiers)
(update id ctm/apply-structure-modifiers modifiers)))]
(update id ctm/apply-structure-modifiers modifiers)
(and (ctm/has-structure? modifiers)
(ctm/has-structure-child? modifiers))
(update-children-structure-modifiers
(cph/get-children-ids objects id)
(ctm/select-child-structre-modifiers modifiers))))]
(reduce apply-shape objects modif-tree)))
(defn merge-modif-tree

10
common/src/app/common/pages/changes_builder.cljc
View file

@ -669,3 +669,13 @@
:id id})
(update :undo-changes d/preconj {:type :del-component
:id id})))
(defn ignore-remote
[changes]
(letfn [(add-ignore-remote
[change-list]
(->> change-list
(mapv #(assoc % :ignore-remote? true))))]
(-> changes
(update :redo-changes add-ignore-remote)
(update :undo-changes add-ignore-remote))))

42
common/src/app/common/types/modifiers.cljc
View file

@ -19,6 +19,7 @@
[app.common.pages.helpers :as cph]
[app.common.spec :as us]
[app.common.text :as txt]
[app.common.types.shape.layout :as ctl]
#?(:cljs [cljs.core :as c]
:clj [clojure.core :as c])))
@ -542,6 +543,10 @@
(or (d/not-empty? structure-parent)
(d/not-empty? structure-child)))
(defn has-structure-child?
[modifiers]
(d/not-empty? (dm/get-prop modifiers :structure-child)))
;; Extract subsets of modifiers
(defn select-child
@ -564,6 +569,10 @@
[modifiers]
(-> modifiers select-child select-geometry))
(defn select-child-structre-modifiers
[modifiers]
(-> modifiers select-child select-structure))
(defn added-children-frames
"Returns the frames that have an 'add-children' operation"
[modif-tree]
@ -635,28 +644,32 @@
matrix)))]
(recur matrix (next modifiers)))))))
(defn transform-text-node [value attrs]
(let [font-size (-> (get attrs :font-size 14)
(d/parse-double)
(* value)
(str))]
(d/txt-merge attrs {:font-size font-size})))
(defn update-text-content
[shape scale-text-content value]
(update shape :content scale-text-content value))
(defn apply-structure-modifiers
"Apply structure changes to a shape"
[shape modifiers]
(letfn [(scale-text-content
[content value]
(->> content
(txt/transform-nodes
txt/is-text-node?
(fn [attrs]
(let [font-size (-> (get attrs :font-size 14)
(d/parse-double)
(* value)
(str)) ]
(d/txt-merge attrs {:font-size font-size}))))))
(partial transform-text-node value))))
(apply-scale-content
[shape value]
(cond-> shape
(cph/text-shape? shape)
(update :content scale-text-content value)
(update-text-content scale-text-content value)
(cph/rect-shape? shape)
(gsc/update-corners-scale value)
@ -666,9 +679,15 @@
(d/not-empty? (:shadow shape))
(gse/update-shadows-scale value)
(some? (:blur shape))
(gse/update-blur-scale value)))]
(gse/update-blur-scale value)
(ctl/flex-layout? shape)
(ctl/update-flex-scale value)
:always
(ctl/update-flex-child value)))]
(let [remove-children
(fn [shapes children-to-remove]
@ -698,7 +717,6 @@
(let [value (dm/get-prop operation :value)]
(update shape :shapes remove-children value))
:scale-content
(let [value (dm/get-prop operation :value)]
(apply-scale-content shape value))

24
common/src/app/common/types/shape/layout.cljc
View file

@ -497,6 +497,30 @@
:layout-item-align-self
:layout-item-absolute
:layout-item-z-index))
(defn update-flex-scale
[shape scale]
(-> shape
(d/update-in-when [:layout-gap :row-gap] * scale)
(d/update-in-when [:layout-gap :column-gap] * scale)
(d/update-in-when [:layout-padding :p1] * scale)
(d/update-in-when [:layout-padding :p2] * scale)
(d/update-in-when [:layout-padding :p3] * scale)
(d/update-in-when [:layout-padding :p4] * scale)))
(defn update-flex-child
[shape scale]
(-> shape
(d/update-when :layout-item-max-h * scale)
(d/update-when :layout-item-min-h * scale)
(d/update-when :layout-item-max-w * scale)
(d/update-when :layout-item-min-w * scale)
(d/update-in-when [:layout-item-margin :m1] * scale)
(d/update-in-when [:layout-item-margin :m2] * scale)
(d/update-in-when [:layout-item-margin :m3] * scale)
(d/update-in-when [:layout-item-margin :m4] * scale)))
(declare assign-cells)
(def grid-cell-defaults

7
frontend/src/app/main/data/workspace/changes.cljs
View file

@ -55,8 +55,8 @@
(defn update-shapes
([ids update-fn] (update-shapes ids update-fn nil))
([ids update-fn {:keys [reg-objects? save-undo? stack-undo? attrs ignore-tree page-id]
:or {reg-objects? false save-undo? true stack-undo? false}}]
([ids update-fn {:keys [reg-objects? save-undo? stack-undo? attrs ignore-tree page-id ignore-remote?]
:or {reg-objects? false save-undo? true stack-undo? false ignore-remote? false}}]
(us/assert ::coll-of-uuid ids)
(us/assert fn? update-fn)
@ -85,7 +85,8 @@
changes (add-group-id changes state)]
(rx/concat
(if (seq (:redo-changes changes))
(let [changes (cond-> changes reg-objects? (pcb/resize-parents ids))]
(let [changes (cond-> changes reg-objects? (pcb/resize-parents ids))
changes (cond-> changes ignore-remote? (pcb/ignore-remote))]
(rx/of (commit-changes changes)))
(rx/empty))

3
frontend/src/app/main/data/workspace/drawing/curve.cljs
View file

@ -49,7 +49,8 @@
(let [objects (wsh/lookup-page-objects state)
content (get-in state [:workspace-drawing :object :content] [])
position (gpt/point (get-in content [0 :params] nil))
start (get-in content [0 :params] nil)
position (when start (gpt/point start))
frame-id (ctst/top-nested-frame objects position)
flex-layout? (ctl/flex-layout? objects frame-id)
drop-index (when flex-layout? (gsl/get-drop-index frame-id objects position))]

12
frontend/src/app/main/data/workspace/modifiers.cljs
View file

@ -438,14 +438,20 @@
:flip-x
:flip-y
:grow-type
:layout-item-h-sizing
:layout-item-v-sizing
:position-data
:layout-gap
:layout-padding
:layout-item-h-sizing
:layout-item-margin
:layout-item-max-h
:layout-item-max-w
:layout-item-min-h
:layout-item-min-w
:layout-item-v-sizing
:layout-padding-type
:layout-gap
:layout-item-margin
:layout-item-margin-type
:position-data
]})
;; We've applied the text-modifier so we can dissoc the temporary data
(fn [state]

18
frontend/src/app/main/data/workspace/notifications.cljs
View file

@ -202,24 +202,28 @@
(fn [{:keys [type attr]}]
(and (= :set type) (= attr :position-data)))
add-origin-session-id
(fn [{:keys [] :as op}]
(cond-> op
(position-data-operation? op)
(update :val with-meta {:session-id (:session-id msg)})))
;;add-origin-session-id
;;(fn [{:keys [] :as op}]
;; (cond-> op
;; (position-data-operation? op)
;; (update :val with-meta {:session-id (:session-id msg)})))
update-position-data
(fn [change]
;; Remove the position data from remote operations. Will be changed localy, otherwise
;; creates a strange "out-of-sync" behaviour.
(cond-> change
(= :mod-obj (:type change))
(update :operations #(mapv add-origin-session-id %))))
(update :operations #(d/removev position-data-operation? %))))
process-page-changes
(fn [[page-id changes]]
(dch/update-indices page-id changes))
;; We update `position-data` from the incoming message
changes (->> changes (mapv update-position-data))
changes (->> changes
(mapv update-position-data)
(d/removev :ignore-remote?))
changes-by-pages (group-by :page-id changes)]
(rx/merge

4
frontend/src/app/main/data/workspace/texts.cljs
View file

@ -414,7 +414,7 @@
(let [ids (->> (keys props) (filter changed-text?))]
(rx/of (dwu/start-undo-transaction undo-id)
(dch/update-shapes ids update-fn {:reg-objects? true :stack-undo? true})
(dch/update-shapes ids update-fn {:reg-objects? true :stack-undo? true :ignore-remote? true})
(ptk/data-event :layout/update ids)
(dwu/commit-undo-transaction undo-id))))))))
@ -558,7 +558,7 @@
(fn [shape]
(-> shape
(assoc :position-data (get position-data (:id shape)))))
{:stack-undo? true :reg-objects? false}))
{:stack-undo? true :reg-objects? false :ignore-remote? true}))
(rx/of (fn [state]
(dissoc state ::update-position-data-debounce ::update-position-data))))))))

9
frontend/src/app/main/data/workspace/transforms.cljs
View file

@ -104,7 +104,8 @@
(defn start-resize
"Enter mouse resize mode, until mouse button is released."
[handler ids shape]
(letfn [(resize [shape initial layout [point lock? center? point-snap]]
(letfn [(resize
[shape initial layout [point lock? center? point-snap]]
(let [{:keys [width height]} (:selrect shape)
{:keys [rotation]} shape
@ -192,7 +193,7 @@
(ctm/scale-content (:x scalev))))
modif-tree (dwm/create-modif-tree ids modifiers)]
(rx/of (dwm/set-modifiers modif-tree))))
(rx/of (dwm/set-modifiers modif-tree scale-text))))
;; Unifies the instantaneous proportion lock modifier
;; activated by Shift key and the shapes own proportion
@ -209,7 +210,7 @@
ptk/WatchEvent
(watch [_ state stream]
(let [initial-position @ms/mouse-position
stoper (rx/filter ms/mouse-up? stream)
stopper (rx/filter ms/mouse-up? stream)
layout (:workspace-layout state)
page-id (:current-page-id state)
focus (:workspace-focus-selected state)
@ -226,7 +227,7 @@
(->> (snap/closest-snap-point page-id resizing-shapes objects layout zoom focus point)
(rx/map #(conj current %)))))
(rx/mapcat (partial resize shape initial-position layout))
(rx/take-until stoper))
(rx/take-until stopper))
(rx/of (dwm/apply-modifiers)
(finish-transform))))))))

14
frontend/src/app/main/ui/comments.cljs
View file

@ -377,7 +377,7 @@
(swap! state assoc :new-position-x nil)
(swap! state assoc :new-position-y nil)))
on-mouse-move
on-pointer-move
(mf/use-callback
(mf/deps position zoom)
(fn [event]
@ -392,7 +392,7 @@
{:on-pointer-down on-pointer-down
:on-pointer-up on-pointer-up
:on-mouse-move on-mouse-move
:on-pointer-move on-pointer-move
:on-lost-pointer-capture on-lost-pointer-capture
:state state}))
@ -408,7 +408,7 @@
{:keys [on-pointer-down
on-pointer-up
on-mouse-move
on-pointer-move
state
on-lost-pointer-capture]} (use-buble zoom thread)
@ -438,14 +438,14 @@
(and (not (mf/ref-val was-open?)) (not (mf/ref-val drag?))))
(st/emit! (dcm/open-thread thread))))))
on-mouse-move*
on-pointer-move*
(mf/use-callback
(mf/deps origin drag? on-mouse-move)
(mf/deps origin drag? on-pointer-move)
(fn [event]
(when (not= origin :viewer)
(mf/set-ref-val! drag? true)
(dom/stop-propagation event)
(on-mouse-move event))))
(on-pointer-move event))))
on-click*
(mf/use-callback
@ -460,7 +460,7 @@
:left (str pos-x "px")}
:on-pointer-down on-pointer-down*
:on-pointer-up on-pointer-up*
:on-mouse-move on-mouse-move*
:on-pointer-move on-pointer-move*
:on-click on-click*
:on-lost-pointer-capture on-lost-pointer-capture
:class (dom/classnames

1
frontend/src/app/main/ui/components/color_input.cljs
View file

@ -138,7 +138,6 @@
(mf/use-layout-effect
(fn []
(let [keys [(events/listen globals/window EventType.POINTERDOWN on-click)
(events/listen globals/window EventType.MOUSEDOWN on-click)
(events/listen globals/window EventType.CLICK on-click)]]
#(doseq [key keys]
(events/unlistenByKey key)))))

1
frontend/src/app/main/ui/components/numeric_input.cljs
View file

@ -233,7 +233,6 @@
(mf/use-layout-effect
(fn []
(let [keys [(events/listen globals/window EventType.POINTERDOWN on-click)
(events/listen globals/window EventType.MOUSEDOWN on-click)
(events/listen globals/window EventType.CLICK on-click)]]
#(doseq [key keys]
(events/unlistenByKey key)))))

4
frontend/src/app/main/ui/hooks/resize.cljs
View file

@ -52,7 +52,7 @@
(mf/set-ref-val! start-ref nil)
(set! last-resize-type nil)))
on-mouse-move
on-pointer-move
(mf/use-callback
(mf/deps min-val max-val negate?)
(fn [event]
@ -68,7 +68,7 @@
(swap! storage assoc-in [::saved-resize current-file-id key] new-size)))))]
{:on-pointer-down on-pointer-down
:on-lost-pointer-capture on-lost-pointer-capture
:on-mouse-move on-mouse-move
:on-pointer-move on-pointer-move
:parent-ref parent-ref
:size @size-state}))

56
frontend/src/app/main/ui/measurements.cljs
View file

@ -297,7 +297,7 @@
(fmt/format-number (or value 0))]])
(mf/defc padding-display [{:keys [frame-id zoom hover-all? hover-v? hover-h? padding-num padding on-mouse-enter on-mouse-leave
(mf/defc padding-display [{:keys [frame-id zoom hover-all? hover-v? hover-h? padding-num padding on-pointer-enter on-pointer-leave
rect-data hover? selected? mouse-pos hover-value]}]
(let [resizing? (mf/use-var false)
start (mf/use-var nil)
@ -324,7 +324,7 @@
(reset! original-value 0)
(st/emit! (dwm/apply-modifiers))))
on-mouse-move
on-pointer-move
(mf/use-callback
(mf/deps frame-id padding-num padding)
(fn [event]
@ -354,11 +354,11 @@
:y (:y rect-data)
:width (:width rect-data)
:height (:height rect-data)
:on-mouse-enter on-mouse-enter
:on-mouse-leave on-mouse-leave
:on-pointer-enter on-pointer-enter
:on-pointer-leave on-pointer-leave
:on-pointer-down on-pointer-down
:on-lost-pointer-capture on-lost-pointer-capture
:on-mouse-move on-mouse-move
:on-pointer-move on-pointer-move
:style {:fill (if (or hover? selected?) distance-color "none")
:cursor (when (or hover? selected?)
(if (= (:resize-axis rect-data) :x) (cur/resize-ew 0) (cur/resize-ew 90)))
@ -375,10 +375,10 @@
hover-h? (and (or (= @hover :p2) (= @hover :p4)) shift?)
padding (:layout-padding frame)
{:keys [width height x1 x2 y1 y2]} (:selrect frame)
on-mouse-enter (fn [hover-type val]
on-pointer-enter (fn [hover-type val]
(reset! hover hover-type)
(reset! hover-value val))
on-mouse-leave #(reset! hover nil)
on-pointer-leave #(reset! hover nil)
pill-width (/ flex-display-pill-width zoom)
pill-height (/ flex-display-pill-height zoom)
hover? #(or hover-all?
@ -442,8 +442,8 @@
:mouse-pos mouse-pos
:hover-value hover-value
:padding-num padding-num
:on-mouse-enter (partial on-mouse-enter padding-num (get padding padding-num))
:on-mouse-leave on-mouse-leave
:on-pointer-enter (partial on-pointer-enter padding-num (get padding padding-num))
:on-pointer-leave on-pointer-leave
:hover? (hover? padding-num)
:selected? (get paddings-selected padding-num)
:rect-data rect-data}])
@ -457,7 +457,7 @@
:y (- (:y @mouse-pos) pill-width)
:value @hover-value}])]))
(mf/defc margin-display [{:keys [shape-id zoom hover-all? hover-v? hover-h? margin-num margin on-mouse-enter on-mouse-leave
(mf/defc margin-display [{:keys [shape-id zoom hover-all? hover-v? hover-h? margin-num margin on-pointer-enter on-pointer-leave
rect-data hover? selected? mouse-pos hover-value]}]
(let [resizing? (mf/use-var false)
start (mf/use-var nil)
@ -484,7 +484,7 @@
(reset! original-value 0)
(st/emit! (dwm/apply-modifiers))))
on-mouse-move
on-pointer-move
(mf/use-callback
(mf/deps shape-id margin-num margin)
(fn [event]
@ -512,11 +512,11 @@
:y (:y rect-data)
:width (:width rect-data)
:height (:height rect-data)
:on-mouse-enter on-mouse-enter
:on-mouse-leave on-mouse-leave
:on-pointer-enter on-pointer-enter
:on-pointer-leave on-pointer-leave
:on-pointer-down on-pointer-down
:on-lost-pointer-capture on-lost-pointer-capture
:on-mouse-move on-mouse-move
:on-pointer-move on-pointer-move
:style {:fill (if (or hover? selected?) warning-color "none")
:cursor (when (or hover? selected?)
(if (= (:resize-axis rect-data) :x) (cur/resize-ew 0) (cur/resize-ew 90)))
@ -535,10 +535,10 @@
hover-h? (and (or (= @hover :m2) (= @hover :m4)) shift?)
margin (:layout-item-margin shape)
{:keys [width height x1 x2 y1 y2]} (:selrect shape)
on-mouse-enter (fn [hover-type val]
on-pointer-enter (fn [hover-type val]
(reset! hover hover-type)
(reset! hover-value val))
on-mouse-leave #(reset! hover nil)
on-pointer-leave #(reset! hover nil)
hover? #(or hover-all?
(and (or (= % :m1) (= % :m3)) hover-v?)
(and (or (= % :m2) (= % :m4)) hover-h?)
@ -591,8 +591,8 @@
:hover-h? hover-h?
:margin-num margin-num
:margin margin
:on-mouse-enter (partial on-mouse-enter margin-num (get margin margin-num))
:on-mouse-leave on-mouse-leave
:on-pointer-enter (partial on-pointer-enter margin-num (get margin margin-num))
:on-pointer-leave on-pointer-leave
:rect-data rect-data
:hover? (hover? margin-num)
:selected? (get margins-selected margin-num)
@ -609,7 +609,7 @@
:y (- (:y @mouse-pos) pill-width)
:value @hover-value}])]))
(mf/defc gap-display [{:keys [frame-id zoom gap-type gap on-mouse-enter on-mouse-leave
(mf/defc gap-display [{:keys [frame-id zoom gap-type gap on-pointer-enter on-pointer-leave
rect-data hover? selected? mouse-pos hover-value]}]
(let [resizing (mf/use-var nil)
start (mf/use-var nil)
@ -636,7 +636,7 @@
(reset! original-value 0)
(st/emit! (dwm/apply-modifiers))))
on-mouse-move
on-pointer-move
(mf/use-callback
(mf/deps frame-id gap-type gap)
(fn [event]
@ -657,11 +657,11 @@
:y (:y rect-data)
:width (:width rect-data)
:height (:height rect-data)
:on-mouse-enter on-mouse-enter
:on-mouse-leave on-mouse-leave
:on-pointer-enter on-pointer-enter
:on-pointer-leave on-pointer-leave
:on-pointer-down on-pointer-down
:on-lost-pointer-capture on-lost-pointer-capture
:on-mouse-move on-mouse-move
:on-pointer-move on-pointer-move
:style {:fill (if (or hover? selected?) distance-color "none")
:cursor (when (or hover? selected?)
(if (= (:resize-axis rect-data) :x) (cur/resize-ew 0) (cur/resize-ew 90)))
@ -683,16 +683,16 @@
padding (:layout-padding frame)
gap (:layout-gap frame)
{:keys [width height x1 y1]} (:selrect frame)
on-mouse-enter (fn [hover-type val]
on-pointer-enter (fn [hover-type val]
(reset! hover hover-type)
(reset! hover-value val))
on-mouse-leave #(reset! hover nil)
on-pointer-leave #(reset! hover nil)
negate {:column-gap (if flip-x true false)
:row-gap (if flip-y true false)}
objects (wsh/lookup-page-objects @st/state)
children (->> (cph/get-children objects frame-id)
children (->> (cph/get-immediate-children objects frame-id)
(remove :layout-item-absolute)
(remove :hidden))
@ -833,8 +833,8 @@
:zoom zoom
:gap-type gap-type
:gap gap
:on-mouse-enter (partial on-mouse-enter gap-type (get gap gap-type))
:on-mouse-leave on-mouse-leave
:on-pointer-enter (partial on-pointer-enter gap-type (get gap gap-type))
:on-pointer-leave on-pointer-leave
:rect-data display-item
:hover? (= @hover gap-type)
:selected? (= gap-selected gap-type)

2
frontend/src/app/main/ui/modal.cljs
View file

@ -66,7 +66,7 @@
(events/listen js/document EventType.KEYDOWN handle-keydown)
;; Changing to js/document breaks the color picker
(events/listen (dom/get-root) EventType.CLICK handle-click-outside)
(events/listen (dom/get-root) EventType.POINTERDOWN handle-click-outside)
(events/listen js/document EventType.CONTEXTMENU handle-click-outside)]]
#(doseq [key keys]

4
frontend/src/app/main/ui/viewer/inspect/render.cljs
View file

@ -64,8 +64,8 @@
(if render-wrapper?
[:> shape-container {:shape shape
:on-mouse-enter (handle-hover-shape shape true)
:on-mouse-leave (handle-hover-shape shape false)
:on-pointer-enter (handle-hover-shape shape true)
:on-pointer-leave (handle-hover-shape shape false)
:on-click (select-shape shape)}
[:& component {:shape shape
:frame frame

32
frontend/src/app/main/ui/viewer/shapes.cljs
View file

@ -169,7 +169,7 @@
(:animation interaction)))))
nil))
(defn- on-mouse-down
(defn- on-pointer-down
[event shape base-frame frame-offset objects overlays]
(let [interactions (->> (:interactions shape)
(filter #(or (= (:event-type %) :click)
@ -179,7 +179,7 @@
(doseq [interaction interactions]
(activate-interaction interaction shape base-frame frame-offset objects overlays)))))
(defn- on-mouse-up
(defn- on-pointer-up
[event shape base-frame frame-offset objects overlays]
(let [interactions (->> (:interactions shape)
(filter #(= (:event-type %) :mouse-press)))]
@ -188,7 +188,7 @@
(doseq [interaction interactions]
(deactivate-interaction interaction shape base-frame frame-offset objects overlays)))))
(defn- on-mouse-enter
(defn- on-pointer-enter
[event shape base-frame frame-offset objects overlays]
(let [interactions (->> (:interactions shape)
(filter #(or (= (:event-type %) :mouse-enter)
@ -198,7 +198,7 @@
(doseq [interaction interactions]
(activate-interaction interaction shape base-frame frame-offset objects overlays)))))
(defn- on-mouse-leave
(defn- on-pointer-leave
[event shape base-frame frame-offset objects overlays]
(let [interactions (->> (:interactions shape)
(filter #(= (:event-type %) :mouse-leave)))
@ -262,21 +262,21 @@
svg-element? (and (= :svg-raw (:type shape))
(not= :svg (get-in shape [:content :tag])))
on-mouse-down
on-pointer-down
(mf/use-fn (mf/deps shape base-frame frame-offset objects)
#(on-mouse-down % shape base-frame frame-offset objects overlays))
#(on-pointer-down % shape base-frame frame-offset objects overlays))
on-mouse-up
on-pointer-up
(mf/use-fn (mf/deps shape base-frame frame-offset objects)
#(on-mouse-up % shape base-frame frame-offset objects overlays))
#(on-pointer-up % shape base-frame frame-offset objects overlays))
on-mouse-enter
on-pointer-enter
(mf/use-fn (mf/deps shape base-frame frame-offset objects)
#(on-mouse-enter % shape base-frame frame-offset objects overlays))
#(on-pointer-enter % shape base-frame frame-offset objects overlays))
on-mouse-leave
on-pointer-leave
(mf/use-fn (mf/deps shape base-frame frame-offset objects)
#(on-mouse-leave % shape base-frame frame-offset objects overlays))]
#(on-pointer-leave % shape base-frame frame-offset objects overlays))]
(mf/with-effect []
@ -286,10 +286,10 @@
(if-not svg-element?
[:> shape-container {:shape shape
:cursor (when (ctsi/actionable? interactions) "pointer")
:on-mouse-down on-mouse-down
:on-mouse-up on-mouse-up
:on-mouse-enter on-mouse-enter
:on-mouse-leave on-mouse-leave}
:on-pointer-down on-pointer-down
:on-pointer-up on-pointer-up
:on-pointer-enter on-pointer-enter
:on-pointer-leave on-pointer-leave}
[:& component {:shape shape
:frame frame

3
frontend/src/app/main/ui/workspace.cljs
View file

@ -162,7 +162,8 @@
[:& (mf/provider ctx/current-page-id) {:value page-id}
[:& (mf/provider ctx/components-v2) {:value components-v2}
[:& (mf/provider ctx/workspace-read-only?) {:value workspace-read-only?}
[:section#workspace {:style {:background-color background-color}}
[:section#workspace {:style {:background-color background-color
:touch-action "none"}}
(when (not (:hide-ui layout))
[:& header {:file file
:page-id page-id

4
frontend/src/app/main/ui/workspace/colorpalette.cljs
View file

@ -49,7 +49,7 @@
container (mf/use-ref nil)
{:keys [on-pointer-down on-lost-pointer-capture on-mouse-move parent-ref size]}
{:keys [on-pointer-down on-lost-pointer-capture on-pointer-move parent-ref size]}
(use-resize-hook :palette 72 54 80 :y true :bottom)
on-left-arrow-click
@ -113,7 +113,7 @@
"--bullet-size" (dm/str (if (< size 72) (- size 15) (- size 30)) "px")}}
[:div.resize-area {:on-pointer-down on-pointer-down
:on-lost-pointer-capture on-lost-pointer-capture
:on-mouse-move on-mouse-move}]
:on-pointer-move on-pointer-move}]
[:& dropdown {:show (:show-menu @state)
:on-close #(swap! state assoc :show-menu false)}
[:ul.workspace-context-menu.palette-menu

3
frontend/src/app/main/ui/workspace/colorpicker.cljs
View file

@ -191,7 +191,8 @@
:h h :s s :v v
:alpha (/ alpha 255)}))))
[:div.colorpicker {:ref node-ref}
[:div.colorpicker {:ref node-ref
:style {:touch-action "none"}}
[:div.colorpicker-content
[:div.top-actions
[:button.picker-btn

2
frontend/src/app/main/ui/workspace/colorpicker/harmony.cljs
View file

@ -134,7 +134,7 @@
:on-pointer-up handle-stop-drag
:on-lost-pointer-capture handle-stop-drag
:on-click calculate-pos
:on-mouse-move #(when @dragging? (calculate-pos %))}]
:on-pointer-move #(when @dragging? (calculate-pos %))}]
[:div.handler {:style {:pointer-events "none"
:left (:x pos-current)
:top (:y pos-current)}}]

2
frontend/src/app/main/ui/workspace/colorpicker/ramp.cljs
View file

@ -44,7 +44,7 @@
:on-pointer-up handle-stop-drag
:on-lost-pointer-capture handle-stop-drag
:on-click calculate-pos
:on-mouse-move #(when @dragging? (calculate-pos %))}
:on-pointer-move #(when @dragging? (calculate-pos %))}
[:div.handler {:style {:pointer-events "none"
:left (str (* 100 saturation) "%")
:top (str (* 100 (- 1 (/ value 255))) "%")}}]]))

2
frontend/src/app/main/ui/workspace/colorpicker/slider_selector.cljs
View file

@ -55,7 +55,7 @@
:on-pointer-up handle-stop-drag
:on-lost-pointer-capture handle-stop-drag
:on-click calculate-pos
:on-mouse-move #(when @dragging? (calculate-pos %))}
:on-pointer-move #(when @dragging? (calculate-pos %))}
(let [value-percent (* (/ (- value min-value)
(- max-value min-value)) 100)

2
frontend/src/app/main/ui/workspace/effects.cljs
View file

@ -28,7 +28,7 @@
(fn []
(st/emit! (dws/change-hover-state id false)))))
(defn use-mouse-down
(defn use-pointer-down
[{:keys [id type blocked]}]
(mf/use-callback
(mf/deps id type blocked)

16
frontend/src/app/main/ui/workspace/shapes/path/editor.cljs
View file

@ -51,7 +51,7 @@
(fn [_]
(st/emit! (drp/path-pointer-leave position))))
on-mouse-down
on-pointer-down
(fn [event]
(dom/stop-propagation event)
(dom/prevent-default event)
@ -95,9 +95,9 @@
[:circle {:cx x
:cy y
:r (/ point-radius-active-area zoom)
:on-mouse-down on-mouse-down
:on-mouse-enter on-enter
:on-mouse-leave on-leave
:on-pointer-down on-pointer-down
:on-pointer-enter on-enter
:on-pointer-leave on-leave
:pointer-events (when-not preview? "visible")
:style {:cursor (cond
(= edit-mode :draw) cur/pen-node
@ -116,7 +116,7 @@
(fn [_]
(st/emit! (drp/path-handler-leave index prefix)))
on-mouse-down
on-pointer-down
(fn [event]
(dom/stop-propagation event)
(dom/prevent-default event)
@ -157,9 +157,9 @@
[:circle {:cx x
:cy y
:r (/ point-radius-active-area zoom)
:on-mouse-down on-mouse-down
:on-mouse-enter on-enter
:on-mouse-leave on-leave
:on-pointer-down on-pointer-down
:on-pointer-enter on-enter
:on-pointer-leave on-leave
:style {:cursor (when (= edit-mode :move) cur/pointer-move)
:fill "none"
:stroke-width 0}}]])))

4
frontend/src/app/main/ui/workspace/shapes/text/editor.cljs
View file

@ -201,7 +201,7 @@
(st/emit! (dwt/update-editor-state shape state)))
"handled"))
on-mouse-down
on-pointer-down
(mf/use-callback
(fn [event]
(when (dom/class? (dom/get-target event) "DraftEditor-root")
@ -229,7 +229,7 @@
;; the underlying text. Use opacity because display or visibility won't allow to recover
;; focus afterwards.
:opacity (when @blurred 0)}
:on-mouse-down on-mouse-down
:on-pointer-down on-pointer-down
:class (dom/classnames
:align-top (= (:vertical-align content "top") "top")
:align-center (= (:vertical-align content) "center")

4
frontend/src/app/main/ui/workspace/sidebar.cljs
View file

@ -37,7 +37,7 @@
shortcuts? (contains? layout :shortcuts)
show-debug? (contains? layout :debug-panel)
{:keys [on-pointer-down on-lost-pointer-capture on-mouse-move parent-ref size]}
{:keys [on-pointer-down on-lost-pointer-capture on-pointer-move parent-ref size]}
(use-resize-hook :left-sidebar 255 255 500 :x false :left)
handle-collapse
@ -52,7 +52,7 @@
:style #js {"--width" (str size "px")}}
[:div.resize-area {:on-pointer-down on-pointer-down
:on-lost-pointer-capture on-lost-pointer-capture
:on-mouse-move on-mouse-move}]
:on-pointer-move on-pointer-move}]
[:div.settings-bar-inside
(cond

4
frontend/src/app/main/ui/workspace/sidebar/history.cljs
View file

@ -288,8 +288,8 @@
:current current?
:hover @hover?
:show-detail @show-detail?)
:on-mouse-enter #(reset! hover? true)
:on-mouse-leave #(reset! hover? false)
:on-pointer-enter #(reset! hover? true)
:on-pointer-leave #(reset! hover? false)
:on-click #(st/emit! (dwc/undo-to-index idx-entry))}
[:div.history-entry-summary
[:div.history-entry-summary-icon (entry->icon entry)]

4
frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs
View file

@ -503,8 +503,8 @@
[:div.element-set-actions
(when on-detach
[:div.element-set-actions-button
{:on-mouse-enter #(reset! hover-detach true)
:on-mouse-leave #(reset! hover-detach false)
{:on-pointer-enter #(reset! hover-detach true)
:on-pointer-leave #(reset! hover-detach false)
:on-click on-detach}
(if @hover-detach i/unchain i/chain)])

4
frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
View file

@ -167,8 +167,8 @@
[:div.color-name (str color-name)]]
(when on-detach
[:div.element-set-actions-button
{:on-mouse-enter #(reset! hover-detach true)
:on-mouse-leave #(reset! hover-detach false)
{:on-pointer-enter #(reset! hover-detach true)
:on-pointer-leave #(reset! hover-detach false)
:on-click detach-value}
(if @hover-detach i/unchain i/chain)])

4
frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs
View file

@ -204,7 +204,7 @@
(mf/defc sitemap
[]
(let [{:keys [on-pointer-down on-lost-pointer-capture on-mouse-move parent-ref size]}
(let [{:keys [on-pointer-down on-lost-pointer-capture on-pointer-move parent-ref size]}
(use-resize-hook :sitemap 200 38 400 :y false nil)
file (mf/deref refs/workspace-file)
@ -234,4 +234,4 @@
(when @show-pages?
[:div.resize-area {:on-pointer-down on-pointer-down
:on-lost-pointer-capture on-lost-pointer-capture
:on-mouse-move on-mouse-move}])]))
:on-pointer-move on-pointer-move}])]))

4
frontend/src/app/main/ui/workspace/textpalette.cljs
View file

@ -93,7 +93,7 @@
(on-right-arrow-click)
(on-left-arrow-click)))))
{:keys [on-pointer-down on-lost-pointer-capture on-mouse-move parent-ref size]}
{:keys [on-pointer-down on-lost-pointer-capture on-pointer-move parent-ref size]}
(use-resize-hook :palette 72 54 80 :y true :bottom)]
[:div.color-palette {:ref parent-ref
@ -101,7 +101,7 @@
:style #js {"--height" (str size "px")}}
[:div.resize-area {:on-pointer-down on-pointer-down
:on-lost-pointer-capture on-lost-pointer-capture
:on-mouse-move on-mouse-move}]
:on-pointer-move on-pointer-move}]
[:& dropdown {:show (:show-menu @state)
:on-close #(swap! state assoc :show-menu false)}

20
frontend/src/app/main/ui/workspace/viewport.cljs
View file

@ -169,14 +169,14 @@
on-drag-enter (actions/on-drag-enter)
on-drag-over (actions/on-drag-over)
on-drop (actions/on-drop file)
on-mouse-down (actions/on-mouse-down @hover selected edition drawing-tool text-editing? node-editing? grid-editing?
drawing-path? create-comment? space? panning z? workspace-read-only?)
on-mouse-up (actions/on-mouse-up disable-paste)
on-pointer-down (actions/on-pointer-down)
on-pointer-down (actions/on-pointer-down @hover selected edition drawing-tool text-editing? node-editing? grid-editing?
drawing-path? create-comment? space? panning z? workspace-read-only?)
on-pointer-up (actions/on-pointer-up disable-paste)
on-pointer-enter (actions/on-pointer-enter in-viewport?)
on-pointer-leave (actions/on-pointer-leave in-viewport?)
on-pointer-move (actions/on-pointer-move move-stream)
on-pointer-up (actions/on-pointer-up)
on-move-selected (actions/on-move-selected hover hover-ids selected space? z? workspace-read-only?)
on-menu-selected (actions/on-menu-selected hover hover-ids selected workspace-read-only?)
@ -221,14 +221,14 @@
disabled-guides? (or drawing-tool transform)
show-padding? (and (= (count selected-shapes) 1)
(= (:type (first selected-shapes)) :frame)
(= (:layout (first selected-shapes)) :flex))
(= (:type (first selected-shapes)) :frame)
(= (:layout (first selected-shapes)) :flex))
show-margin? (and (= (count selected-shapes) 1)
(= (:layout selected-frame) :flex))]
(hooks/setup-dom-events viewport-ref zoom disable-paste in-viewport? workspace-read-only?)
(hooks/setup-dom-events zoom disable-paste in-viewport? workspace-read-only?)
(hooks/setup-viewport-size vport viewport-ref)
(hooks/setup-cursor cursor alt? mod? space? panning drawing-tool drawing-path? node-editing? z? workspace-read-only?)
(hooks/setup-keyboard alt? mod? space? z? shift?)
@ -310,7 +310,7 @@
:view-box (utils/format-viewbox vbox)
:ref on-viewport-ref
:class (when drawing-tool "drawing")
:style {:cursor @cursor}
:style {:cursor @cursor :touch-action "none"}
:fill "none"
:on-click on-click
@ -319,8 +319,6 @@
:on-drag-enter on-drag-enter
:on-drag-over on-drag-over
:on-drop on-drop
:on-mouse-down on-mouse-down
:on-mouse-up on-mouse-up
:on-pointer-down on-pointer-down
:on-pointer-enter on-pointer-enter
:on-pointer-leave on-pointer-leave

56
frontend/src/app/main/ui/workspace/viewport/actions.cljs
View file

@ -32,14 +32,27 @@
(def scale-per-pixel -0.0057)
(defn on-mouse-down
(defn on-pointer-down
[{:keys [id blocked hidden type]} selected edition drawing-tool text-editing?
node-editing? grid-editing? drawing-path? create-comment? space? panning z? workspace-read-only?]
(mf/use-callback
(mf/deps id blocked hidden type selected edition drawing-tool text-editing?
node-editing? grid-editing? drawing-path? create-comment? @z? @space?
panning workspace-read-only?)
(fn [bevent]
;; We need to handle editor related stuff here because
;; handling on editor dom node does not works properly.
(let [target (dom/get-target bevent)
editor (.closest ^js target ".public-DraftEditor-content")]
;; Capture mouse pointer to detect the movements even if cursor
;; leaves the viewport or the browser itself
;; https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture
(if editor
(.setPointerCapture editor (.-pointerId bevent))
(.setPointerCapture target (.-pointerId bevent))))
(when (or (dom/class? (dom/get-target bevent) "viewport-controls")
(dom/class? (dom/get-target bevent) "viewport-selrect"))
(dom/stop-propagation bevent)
@ -80,7 +93,7 @@
(not drawing-path?))
(cond
node-editing?
;; Handle path node area selection
;; Handle path node area selection
(when-not workspace-read-only?
(st/emit! (dwdp/handle-area-selection shift?)))
@ -241,12 +254,16 @@
(let [position (dom/get-client-position event)]
(st/emit! (dw/show-shape-context-menu {:position position :hover-ids @hover-ids})))))))
(defn on-mouse-up
(defn on-pointer-up
[disable-paste]
(mf/use-callback
(fn [event]
(dom/stop-propagation event)
(let [target (dom/get-target event)]
;; Release pointer on mouse up
(.releasePointerCapture target (.-pointerId event)))
(let [event (.-nativeEvent event)
ctrl? (kbd/ctrl? event)
shift? (kbd/shift? event)
@ -279,27 +296,6 @@
(fn []
(reset! in-viewport? false))))
(defn on-pointer-down []
(mf/use-callback
(fn [event]
;; We need to handle editor related stuff here because
;; handling on editor dom node does not works properly.
(let [target (dom/get-target event)
editor (.closest ^js target ".public-DraftEditor-content")]
;; Capture mouse pointer to detect the movements even if cursor
;; leaves the viewport or the browser itself
;; https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture
(if editor
(.setPointerCapture editor (.-pointerId event))
(.setPointerCapture target (.-pointerId event)))))))
(defn on-pointer-up []
(mf/use-callback
(fn [event]
(let [target (dom/get-target event)]
; Release pointer on mouse up
(.releasePointerCapture target (.-pointerId event))))))
(defn on-key-down []
(mf/use-callback
(fn [event]
@ -333,7 +329,7 @@
(= "TEXTAREA" (obj/get target "tagName")))]
(st/emit! (ms/->KeyboardEvent :up key shift? ctrl? alt? meta? editing?))))))
(defn on-mouse-move []
(defn on-pointer-move [move-stream]
(let [last-position (mf/use-var nil)]
(mf/use-callback
(fn [event]
@ -345,7 +341,7 @@
delta (if @last-position
(gpt/subtract raw-pt @last-position)
(gpt/point 0 0))]
(rx/push! move-stream pt)
(reset! last-position raw-pt)
(st/emit! (ms/->PointerEvent :delta delta
(kbd/ctrl? event)
@ -358,14 +354,6 @@
(kbd/alt? event)
(kbd/meta? event))))))))
(defn on-pointer-move [move-stream]
(mf/use-callback
(mf/deps move-stream)
(fn [event]
(let [raw-pt (dom/get-client-position event)
pt (uwvv/point->viewport raw-pt)]
(rx/push! move-stream pt)))))
(defn on-mouse-wheel [zoom]
(mf/use-callback
(mf/deps zoom)

26
frontend/src/app/main/ui/workspace/viewport/gradients.cljs
View file

@ -83,7 +83,7 @@
(mf/defc gradient-color-handler
[{:keys [filter-id zoom point color angle selected
on-click on-mouse-down on-mouse-up]}]
on-click on-pointer-down on-pointer-up]}]
[:g {:filter (str/fmt "url(#%s)" filter-id)
:transform (gmt/rotate-matrix angle point)}
@ -100,8 +100,8 @@
:height (/ gradient-square-width zoom)
:fill (:value color)
:on-click (partial on-click :to-p)
:on-mouse-down (partial on-mouse-down :to-p)
:on-mouse-up (partial on-mouse-up :to-p)}]
:on-pointer-down (partial on-pointer-down :to-p)
:on-pointer-up (partial on-pointer-up :to-p)}]
[:rect {:data-allow-click-modal "colorpicker"
:x (- (:x point) (/ gradient-square-width 2 zoom))
@ -114,8 +114,8 @@
:fill (:value color)
:fill-opacity (:opacity color)
:on-click on-click
:on-mouse-down on-mouse-down
:on-mouse-up on-mouse-up}]])
:on-pointer-down on-pointer-down
:on-pointer-up on-pointer-up}]])
(mf/defc gradient-handler-transformed
[{:keys [from-p to-p width-p from-color to-color zoom editing
@ -133,7 +133,7 @@
:from-p 0
:to-p 1)))))
on-mouse-down
on-pointer-down
(fn [position event]
(dom/stop-propagation event)
(dom/prevent-default event)
@ -144,7 +144,7 @@
:from-p 0
:to-p 1)))))
on-mouse-up
on-pointer-up
(fn [_position event]
(dom/stop-propagation event)
(dom/prevent-default event)
@ -203,8 +203,8 @@
:cy (:y width-p)
:r (/ gradient-width-handler-radius zoom)
:fill gradient-width-handler-color
:on-mouse-down (partial on-mouse-down :width-p)
:on-mouse-up (partial on-mouse-up :width-p)}]])
:on-pointer-down (partial on-pointer-down :width-p)
:on-pointer-up (partial on-pointer-up :width-p)}]])
[:& gradient-color-handler
{:selected (or (not editing) (= editing 0))
@ -214,8 +214,8 @@
:color from-color
:angle angle
:on-click (partial on-click :from-p)
:on-mouse-down (partial on-mouse-down :from-p)
:on-mouse-up (partial on-mouse-up :from-p)}]
:on-pointer-down (partial on-pointer-down :from-p)
:on-pointer-up (partial on-pointer-up :from-p)}]
[:& gradient-color-handler
{:selected (= editing 1)
@ -225,8 +225,8 @@
:color to-color
:angle angle
:on-click (partial on-click :to-p)
:on-mouse-down (partial on-mouse-down :to-p)
:on-mouse-up (partial on-mouse-up :to-p)}]]))
:on-pointer-down (partial on-pointer-down :to-p)
:on-pointer-up (partial on-pointer-up :to-p)}]]))
(mf/defc gradient-handlers*
[{:keys [zoom stops gradient editing-stop shape]}]

4
frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs
View file

@ -202,7 +202,7 @@
(mf/set-ref-val! dragging-ref false)
(mf/set-ref-val! start-ref nil)))
on-mouse-move
on-pointer-move
(mf/use-callback
(fn [event]
(when (mf/ref-val dragging-ref)
@ -234,7 +234,7 @@
:width width
:on-pointer-down on-pointer-down
:on-lost-pointer-capture on-lost-pointer-capture
:on-mouse-move on-mouse-move
:on-pointer-move on-pointer-move
:style {:fill "transparent"
:cursor (if (= type :column)
(cur/resize-ew 0)

12
frontend/src/app/main/ui/workspace/viewport/guides.cljs
View file

@ -93,7 +93,7 @@
(mf/set-ref-val! start-pos-ref nil)
(swap! state assoc :new-position nil)))
on-mouse-move
on-pointer-move
(mf/use-callback
(mf/deps position zoom snap-pixel?)
(fn [event]
@ -120,7 +120,7 @@
:on-pointer-down on-pointer-down
:on-pointer-up on-pointer-up
:on-lost-pointer-capture on-lost-pointer-capture
:on-mouse-move on-mouse-move
:on-pointer-move on-pointer-move
:state state
:frame frame}))
@ -274,7 +274,7 @@
on-pointer-down
on-pointer-up
on-lost-pointer-capture
on-mouse-move
on-pointer-move
state
frame]} (use-guide handle-change-position get-hover-frame zoom guide)
@ -310,7 +310,7 @@
:on-pointer-down on-pointer-down
:on-pointer-up on-pointer-up
:on-lost-pointer-capture on-lost-pointer-capture
:on-mouse-move on-mouse-move}]))
:on-pointer-move on-pointer-move}]))
(if (some? frame)
(let [{:keys [l1-x1 l1-y1 l1-x2 l1-y2
@ -399,7 +399,7 @@
on-pointer-down
on-pointer-up
on-lost-pointer-capture
on-mouse-move
on-pointer-move
state
frame]} (use-guide on-guide-change get-hover-frame zoom {:axis axis})]
@ -415,7 +415,7 @@
:on-pointer-down on-pointer-down
:on-pointer-up on-pointer-up
:on-lost-pointer-capture on-lost-pointer-capture
:on-mouse-move on-mouse-move
:on-pointer-move on-pointer-move
:style {:fill "none"
:pointer-events "fill"
:cursor (if (= axis :x) (cur/resize-ew 0) (cur/resize-ns 0))}}]))

17
frontend/src/app/main/ui/workspace/viewport/hooks.cljs
View file

@ -34,25 +34,14 @@
[rumext.v2 :as mf])
(:import goog.events.EventType))
(defn setup-dom-events [viewport-ref zoom disable-paste in-viewport? workspace-read-only?]
(defn setup-dom-events [zoom disable-paste in-viewport? workspace-read-only?]
(let [on-key-down (actions/on-key-down)
on-key-up (actions/on-key-up)
on-mouse-move (actions/on-mouse-move)
on-mouse-wheel (actions/on-mouse-wheel zoom)
on-paste (actions/on-paste disable-paste in-viewport? workspace-read-only?)]
;; We use the DOM listener because the goog.closure one forces reflow to generate its internal
;; structure. As we don't need currently nothing from BrowserEvent we optimize by using the basic event
(mf/use-layout-effect
(mf/deps on-mouse-move)
(fn []
(let [node (mf/ref-val viewport-ref)]
(.addEventListener node "mousemove" on-mouse-move)
(fn []
(.removeEventListener node "mousemove" on-mouse-move)))))
(mf/use-layout-effect
(mf/deps on-key-down on-key-up on-mouse-move on-mouse-wheel on-paste workspace-read-only?)
(mf/deps on-key-down on-key-up on-mouse-wheel on-paste workspace-read-only?)
(fn []
(let [keys [(events/listen js/document EventType.KEYDOWN on-key-down)
(events/listen js/document EventType.KEYUP on-key-up)
@ -261,7 +250,7 @@
(->> ids
(remove remove-id?)
(remove (partial cph/hidden-parent? objects))
(remove no-fill-nested-frames?)
(remove #(and mod? (no-fill-nested-frames? %)))
(filter #(or (empty? focus) (cp/is-in-focus? objects focus %)))
(first)
(get objects))]

14
frontend/src/app/main/ui/workspace/viewport/interactions.cljs
View file

@ -33,7 +33,7 @@
:move-overlay-index])
refs/workspace-local =))
(defn- on-mouse-down
(defn- on-pointer-down
[event index {:keys [id] :as shape}]
(dom/stop-propagation event)
(st/emit! (dw/select-shape id))
@ -163,7 +163,7 @@
arrow-dir (if (= dest-pos :left) :right :left)]
(if-not selected?
[:g {:on-mouse-down #(on-mouse-down % index orig-shape)}
[:g {:on-pointer-down #(on-pointer-down % index orig-shape)}
[:path {:stroke "var(--color-gray-20)"
:fill "none"
:pointer-events "visible"
@ -178,7 +178,7 @@
:arrow-dir arrow-dir
:zoom zoom}])]
[:g {:on-mouse-down #(on-mouse-down % index orig-shape)}
[:g {:on-pointer-down #(on-pointer-down % index orig-shape)}
[:path {:stroke "var(--color-primary)"
:fill "none"
:pointer-events "visible"
@ -209,7 +209,7 @@
(let [shape-rect (:selrect shape)
handle-x (+ (:x shape-rect) (:width shape-rect))
handle-y (+ (:y shape-rect) (/ (:height shape-rect) 2))]
[:g {:on-mouse-down #(on-mouse-down % index shape)}
[:g {:on-pointer-down #(on-pointer-down % index shape)}
[:& interaction-marker {:x handle-x
:y handle-y
:stroke "var(--color-primary)"
@ -246,9 +246,9 @@
dest-shape (cond-> dest-shape
(some? thumbnail-data)
(assoc :thumbnail thumbnail-data))]
[:g {:on-mouse-down start-move-position
:on-mouse-enter #(reset! hover-disabled? true)
:on-mouse-leave #(reset! hover-disabled? false)}
[:g {:on-pointer-down start-move-position
:on-pointer-enter #(reset! hover-disabled? true)
:on-pointer-leave #(reset! hover-disabled? false)}
[:g {:transform (gmt/translate-matrix (gpt/point (- marker-x dest-x) (- marker-y dest-y))) }
[:& (mf/provider muc/render-thumbnails) {:value true}
[:& (mf/provider embed/context) {:value false}

12
frontend/src/app/main/ui/workspace/viewport/pixel_overlay.cljs
View file

@ -81,7 +81,7 @@
(st/emit! (dwc/stop-picker))
(modal/disallow-click-outside!))))
handle-mouse-move-picker
handle-pointer-move-picker
(mf/use-callback
(mf/deps viewport-node)
(fn [event]
@ -109,7 +109,7 @@
(.drawImage zoom-context image 0 0 200 160))))
(st/emit! (dwc/pick-color [r g b a]))))))
handle-mouse-down-picker
handle-pointer-down-picker
(mf/use-callback
(fn [event]
(dom/prevent-default event)
@ -117,7 +117,7 @@
(st/emit! (dwu/start-undo-transaction :mouse-down-picker)
(dwc/pick-color-select true (kbd/shift? event)))))
handle-mouse-up-picker
handle-pointer-up-picker
(mf/use-callback
(fn [event]
(dom/prevent-default event)
@ -185,9 +185,9 @@
[:div.pixel-overlay
{:tab-index 0
:style {:cursor cur/picker}
:on-mouse-down handle-mouse-down-picker
:on-mouse-up handle-mouse-up-picker
:on-mouse-move handle-mouse-move-picker}
:on-pointer-down handle-pointer-down-picker
:on-pointer-up handle-pointer-up-picker
:on-pointer-move handle-pointer-move-picker}
[:div {:style {:display "none"}}
[:img {:ref img-ref
:on-load handle-image-load

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

@ -123,7 +123,7 @@
(- scrollbar-width))
h-scrollbar-x)
on-mouse-move
on-pointer-move
(fn [event axis]
(when-let [_ (or @v-scrolling? @h-scrolling?)]
(let [start-pt (mf/ref-val start-ref)
@ -147,7 +147,7 @@
(mf/set-ref-val! h-scrollbar-x-ref new-h-scrollbar-x)
(mf/set-ref-val! start-ref current-pt))))
on-mouse-down
on-pointer-down
(fn [event axis]
(let [start-pt (dom/get-client-position event)
viewport-point (point->viewport start-pt)
@ -180,7 +180,7 @@
(reset! v-scrolling? (= axis :y))
(reset! h-scrolling? (= axis :x))))
on-mouse-up
on-pointer-up
(fn []
(reset! v-scrolling? false)
(reset! h-scrolling? false))]
@ -188,9 +188,9 @@
[:*
(when show-v-scroll?
[:g.v-scroll {:fill clr/black}
[:rect {:on-mouse-move #(on-mouse-move % :y)
:on-mouse-down #(on-mouse-down % :y)
:on-mouse-up on-mouse-up
[:rect {:on-pointer-move #(on-pointer-move % :y)
:on-pointer-down #(on-pointer-down % :y)
:on-pointer-up on-pointer-up
:width (* inv-zoom 7)
:rx (* inv-zoom 3)
:ry (* inv-zoom 3)
@ -202,9 +202,9 @@
:stroke-width (/ 0.15 zoom)}}]])
(when show-h-scroll?
[:g.h-scroll {:fill clr/black}
[:rect {:on-mouse-move #(on-mouse-move % :x)
:on-mouse-down #(on-mouse-down % :x)
:on-mouse-up on-mouse-up
[:rect {:on-pointer-move #(on-pointer-move % :x)
:on-pointer-down #(on-pointer-down % :x)
:on-pointer-up on-pointer-up
:width scrollbar-width
:rx (* inv-zoom 3)
:ry (* inv-zoom 3)

10
frontend/src/app/main/ui/workspace/viewport/selection.cljs
View file

@ -45,7 +45,7 @@
:width width
:height height
:transform (str transform)
:on-mouse-down on-move-selected
:on-pointer-down on-move-selected
:on-context-menu on-context-menu
:style {:stroke color
:stroke-width (/ selection-rect-width zoom)
@ -172,7 +172,7 @@
:fill (if (debug? :handlers) "blue" "none")
:stroke-width 0
:transform (dm/str transform)
:on-mouse-down on-rotate}]))
:on-pointer-down on-rotate}]))
(mf/defc resize-point-handler
[{:keys [cx cy zoom position on-resize transform rotation color align]}]
@ -208,9 +208,9 @@
:style {:fill (if (debug? :handlers) "red" "none")
:stroke-width 0
:cursor cursor}
:on-mouse-down #(on-resize {:x cx' :y cy'} %)}])
:on-pointer-down #(on-resize {:x cx' :y cy'} %)}])
[:circle {:on-mouse-down #(on-resize {:x cx' :y cy'} %)
[:circle {:on-pointer-down #(on-resize {:x cx' :y cy'} %)
:r (/ resize-point-circle-radius zoom)
:cx cx'
:cy cy'
@ -246,7 +246,7 @@
:width length
:height height
:transform transform-str
:on-mouse-down #(on-resize res-point %)
:on-pointer-down #(on-resize res-point %)
:style {:fill (if (debug? :handlers) "yellow" "none")
:stroke-width 0
:cursor (if (#{:left :right} position)

8
frontend/src/app/main/ui/workspace/viewport/widgets.cljs
View file

@ -97,7 +97,7 @@
#(mf/deferred % ts/raf)]}
[{:keys [frame selected? zoom show-artboard-names? show-id? on-frame-enter on-frame-leave on-frame-select]}]
(let [workspace-read-only? (mf/use-ctx ctx/workspace-read-only?)
on-mouse-down
on-pointer-down
(mf/use-callback
(mf/deps (:id frame) on-frame-select workspace-read-only?)
(fn [bevent]
@ -155,7 +155,7 @@
:class "workspace-frame-label"
:style {:fill (when selected? "var(--color-primary-dark)")}
:visibility (if show-artboard-names? "visible" "hidden")
:on-mouse-down on-mouse-down
:on-pointer-down on-pointer-down
:on-double-click on-double-click
:on-context-menu on-context-menu
:on-pointer-enter on-pointer-enter
@ -204,7 +204,7 @@
(let [{:keys [x y]} frame
flow-pos (gpt/point x (- y (/ 35 zoom)))
on-mouse-down
on-pointer-down
(mf/use-callback
(mf/deps (:id frame) on-frame-select)
(fn [bevent]
@ -237,7 +237,7 @@
:height 24
:transform (vwu/text-transform flow-pos zoom)}
[:div.flow-badge {:class (dom/classnames :selected selected?)}
[:div.content {:on-mouse-down on-mouse-down
[:div.content {:on-pointer-down on-pointer-down
:on-double-click on-double-click
:on-pointer-enter on-pointer-enter
:on-pointer-leave on-pointer-leave}

33
frontend/src/app/util/path/format.cljs
View file

@ -112,20 +112,25 @@
(update command :params assoc :x x :y y))
(defn format-path [content]
(let [result (make-array (count content))]
(reduce (fn [last-move current]
(let [point (upc/command->point current)
current-move? (= :move-to (:command current))
last-move (if current-move? point last-move)]
(try
(let [result (make-array (count content))]
(reduce (fn [last-move current]
(let [point (upc/command->point current)
current-move? (= :move-to (:command current))
last-move (if current-move? point last-move)]
(if (and (not current-move?) (pt= last-move point))
(arr/conj! result (command->string (set-point current last-move)))
(arr/conj! result (command->string current)))
(if (and (not current-move?) (pt= last-move point))
(arr/conj! result (command->string (set-point current last-move)))
(arr/conj! result (command->string current)))
(when (and (not current-move?) (pt= last-move point))
(arr/conj! result "Z"))
(when (and (not current-move?) (pt= last-move point))
(arr/conj! result "Z"))
last-move))
nil
content)
(.join ^js result "")))
last-move))
nil
content)
(.join ^js result ""))
(catch :default err
(.error js/console err)
nil)))