Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-26 08:29:42 -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 (ns app.main.ui.hooks.mutable-observer
(:require (:require
[app.common.data :as d]
[app.common.logging :as log] [app.common.logging :as log]
[rumext.alpha :as mf])) [rumext.alpha :as mf]))
@ -20,9 +21,12 @@
on-mutation on-mutation
(mf/use-callback (mf/use-callback
(mf/deps on-change) (mf/deps on-change)
(fn [mutation] (fn [mutations]
(log/debug :action "mutation" :js/mutation mutation) (let [mutations
(on-change (mf/ref-val node-ref)))) (->> mutations
(remove #(= "transform" (.-attributeName ^js %))))]
(when (d/not-empty? mutations)
(on-change (mf/ref-val node-ref))))))
set-node set-node
(mf/use-callback (mf/use-callback
@ -51,4 +55,4 @@
(.disconnect prev-obs) (.disconnect prev-obs)
(mf/set-ref-val! prev-obs-ref nil))))) (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") (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-ref (mf/use-memo (mf/deps id) #(l/derived (fn [o] (= id (:edition o))) refs/workspace-local))
edition? (mf/deref edition-ref) edition? (mf/deref edition-ref)
shape-ref (mf/use-ref nil)
local-position-data (mf/use-state nil) local-position-data (mf/use-state nil)
handle-change-foreign-object handle-change-foreign-object
(fn [node] (fn [node]
(when (some? node) (when (some? node)
(mf/set-ref-val! shape-ref node) (prn "change!")
(let [position-data (utp/calc-position-data node) (let [position-data (utp/calc-position-data node)
parent (dom/get-parent node) parent (dom/get-parent node)
parent-transform (dom/get-attribute parent "transform") parent-transform (dom/get-attribute parent "transform")
@ -152,28 +151,30 @@
(gsh/transform-rect mtx)))))] (gsh/transform-rect mtx)))))]
(reset! local-position-data position-data)))) (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 ;; When the text is "dirty?" we get recalculate the positions
(mf/use-layout-effect (mf/use-layout-effect
(mf/deps id dirty?) (mf/deps id dirty?)
(fn [] (fn []
(let [node (mf/ref-val shape-ref) (let [node (mf/ref-val shape-ref)]
position-data (utp/calc-position-data node)] (when (and dirty? (some? node))
(reset! local-position-data nil) (let [position-data (utp/calc-position-data node)]
(st/emit! (dch/update-shapes (reset! local-position-data nil)
[id] (st/emit! (dch/update-shapes
(fn [shape] [id]
(-> shape (fn [shape]
(dissoc :dirty?) (-> shape
(assoc :position-data position-data)))))))) (dissoc :dirty?)
(assoc :position-data position-data)))
{:save-undo? false})))))))
[:> shape-container {:shape shape} [:> shape-container {:shape shape}
;; We keep hidden the shape when we're editing so it keeps track of the size ;; We keep hidden the shape when we're editing so it keeps track of the size
;; and updates the selrect accordingly ;; and updates the selrect accordingly
[:* [:*
[:g.text-shape {:ref on-change-node [: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"} :pointer-events "none"}
;; The `:key` prop here is mandatory because the ;; The `:key` prop here is mandatory because the
@ -186,7 +187,7 @@
:edition? edition? :edition? edition?
:key (str id 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 (let [shape
(cond-> shape (cond-> shape
(some? @local-position-data) (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) 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 ;;handle-change-foreign-object
(mf/use-callback ;;(mf/use-callback
(fn [node] ;; (fn [node]
(when node ;; (when node
(mf/set-ref-val! shape-ref node) ;; (let [position-data (utp/calc-position-data node)]
(let [position-data (utp/calc-position-data node)] ;; (reset! local-position-data position-data)))))
(reset! local-position-data position-data))))) ;;
;;[shape-ref on-change-node] (use-mutable-observer handle-change-foreign-object)
handle-interaction ;;handle-interaction
(mf/use-callback ;;(mf/use-callback
(fn [] ;; (fn []
(handle-change-foreign-object (mf/ref-val shape-ref)))) ;; (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) (mf/use-callback handle-interaction)
(fn [] (fn []
(let [keys [(events/listen js/document EventType.KEYUP handle-interaction) (let [keys [(events/listen js/document EventType.KEYUP handle-interaction)
@ -268,14 +267,14 @@
#(doseq [key keys] #(doseq [key keys]
(events/unlistenByKey key))))) (events/unlistenByKey key)))))
[:* [:*
[:> shape-container {:shape shape #_[:> shape-container {:shape shape
:pointer-events "none"} :pointer-events "none"}
[:& svg/text-shape {:shape (cond-> shape [:& svg/text-shape {:shape (cond-> shape
(some? @local-position-data) (some? @local-position-data)
(assoc :position-data @local-position-data))}]] (assoc :position-data @local-position-data))}]]
[:g.text-editor {:clip-path (str "url(#" clip-id ")") [:g.text-editor {:clip-path (str "url(#" clip-id ")")
:ref on-change-node ;; :ref on-change-node
:key (str "editor-" id)} :key (str "editor-" id)}
[:defs [:defs
;; This clippath will cut the huge foreign object we use to calculate the automatic resize ;; 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 (defn bounding-rect->rect
[rect] [rect]
{:x (or (.-left rect) (:left rect)) (when (some? rect)
:y (or (.-top rect) (:top rect)) {:x (or (.-left rect) (:left rect))
:width (or (.-width rect) (:width rect)) :y (or (.-top rect) (:top rect))
:height (or (.-height rect) (:height rect))}) :width (or (.-width rect) (:width rect))
:height (or (.-height rect) (:height rect))}))
(defn get-window-size (defn get-window-size
[] []