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

❇️ Change mutation listener

Browse source
This commit is contained in:
alonso.torres 2022-02-17 09:23:08 +01:00
parent 6cb6adc134
commit d83459f674
4 changed files with 45 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
frontend/src/app/main/ui/hooks/mutable_observer.cljs
View file

@ -6,6 +6,7 @@
(ns app.main.ui.hooks.mutable-observer
(:require
[app.common.data :as d]
[app.common.logging :as log]
[rumext.alpha :as mf]))
@ -20,9 +21,12 @@
on-mutation
(mf/use-callback
(mf/deps on-change)
(fn [mutation]
(log/debug :action "mutation" :js/mutation mutation)
(on-change (mf/ref-val node-ref))))
(fn [mutations]
(let [mutations
(->> mutations
(remove #(= "transform" (.-attributeName ^js %))))]
(when (d/not-empty? mutations)
(on-change (mf/ref-val node-ref))))))
set-node
(mf/use-callback
@ -51,4 +55,4 @@
(.disconnect prev-obs)
(mf/set-ref-val! prev-obs-ref nil)))))
set-node))
[node-ref set-node]))

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

@ -125,14 +125,13 @@
(let [{:keys [id dirty?] :as shape} (unchecked-get props "shape")
edition-ref (mf/use-memo (mf/deps id) #(l/derived (fn [o] (= id (:edition o))) refs/workspace-local))
edition? (mf/deref edition-ref)
shape-ref (mf/use-ref nil)
local-position-data (mf/use-state nil)
handle-change-foreign-object
(fn [node]
(when (some? node)
(mf/set-ref-val! shape-ref node)
(prn "change!")
(let [position-data (utp/calc-position-data node)
parent (dom/get-parent node)
parent-transform (dom/get-attribute parent "transform")
@ -152,28 +151,30 @@
(gsh/transform-rect mtx)))))]
(reset! local-position-data position-data))))
on-change-node (use-mutable-observer handle-change-foreign-object)]
[shape-ref on-change-node] (use-mutable-observer handle-change-foreign-object)]
;; When the text is "dirty?" we get recalculate the positions
(mf/use-layout-effect
(mf/deps id dirty?)
(fn []
(let [node (mf/ref-val shape-ref)
position-data (utp/calc-position-data node)]
(reset! local-position-data nil)
(st/emit! (dch/update-shapes
[id]
(fn [shape]
(-> shape
(dissoc :dirty?)
(assoc :position-data position-data))))))))
(let [node (mf/ref-val shape-ref)]
(when (and dirty? (some? node))
(let [position-data (utp/calc-position-data node)]
(reset! local-position-data nil)
(st/emit! (dch/update-shapes
[id]
(fn [shape]
(-> shape
(dissoc :dirty?)
(assoc :position-data position-data)))
{:save-undo? false})))))))
[:> shape-container {:shape shape}
;; We keep hidden the shape when we're editing so it keeps track of the size
;; and updates the selrect accordingly
[:*
[:g.text-shape {:ref on-change-node
:opacity (when (or edition? (some? (:position-data shape))) 0)
:opacity (when (or edition? (some? (:position-data shape))) 0.2)
:pointer-events "none"}
;; The `:key` prop here is mandatory because the
@ -186,7 +187,7 @@
:edition? edition?
:key (str id edition?)}]]
(when (and (not edition?) (or (some? (:position-data shape)) (some? local-position-data)))
(when (and (or (some? (:position-data shape)) (some? local-position-data)))
(let [shape
(cond-> shape
(some? @local-position-data)

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

@ -241,25 +241,24 @@
clip-id (str "clip-" id)
shape-ref (mf/use-ref nil)
local-position-data (mf/use-state nil)
;; local-position-data (mf/use-state nil)
handle-change-foreign-object
(mf/use-callback
(fn [node]
(when node
(mf/set-ref-val! shape-ref node)
(let [position-data (utp/calc-position-data node)]
(reset! local-position-data position-data)))))
;;handle-change-foreign-object
;;(mf/use-callback
;; (fn [node]
;; (when node
;; (let [position-data (utp/calc-position-data node)]
;; (reset! local-position-data position-data)))))
;;
;;[shape-ref on-change-node] (use-mutable-observer handle-change-foreign-object)
handle-interaction
(mf/use-callback
(fn []
(handle-change-foreign-object (mf/ref-val shape-ref))))
;;handle-interaction
;;(mf/use-callback
;; (fn []
;; (handle-change-foreign-object (mf/ref-val shape-ref))))
]
on-change-node (use-mutable-observer handle-change-foreign-object)]
(mf/use-effect
#_(mf/use-effect
(mf/use-callback handle-interaction)
(fn []
(let [keys [(events/listen js/document EventType.KEYUP handle-interaction)
@ -268,14 +267,14 @@
#(doseq [key keys]
(events/unlistenByKey key)))))
[:*
[:> shape-container {:shape shape
#_[:> shape-container {:shape shape
:pointer-events "none"}
[:& svg/text-shape {:shape (cond-> shape
(some? @local-position-data)
(assoc :position-data @local-position-data))}]]
[:g.text-editor {:clip-path (str "url(#" clip-id ")")
:ref on-change-node
;; :ref on-change-node
:key (str "editor-" id)}
[:defs
;; This clippath will cut the huge foreign object we use to calculate the automatic resize

9
frontend/src/app/util/dom.cljs
View file

@ -265,10 +265,11 @@
(defn bounding-rect->rect
[rect]
{:x (or (.-left rect) (:left rect))
:y (or (.-top rect) (:top rect))
:width (or (.-width rect) (:width rect))
:height (or (.-height rect) (:height rect))})
(when (some? rect)
{:x (or (.-left rect) (:left rect))
:y (or (.-top rect) (:top rect))
:width (or (.-width rect) (:width rect))
:height (or (.-height rect) (:height rect))}))
(defn get-window-size
[]