🐛 Fix problem with transforms

common/src/app/common/pages/helpers.cljc

@@ -7,6 +7,7 @@
 (ns app.common.pages.helpers
   (:require
    [app.common.data :as d]
+   [app.common.data.macros :as dm]
    [app.common.geom.shapes :as gsh]
    [app.common.spec :as us]
    [app.common.spec.page :as spec.page]
@@ -92,7 +93,7 @@
   "Returns a vector of parents of the specified shape."
   [objects shape-id]
   (loop [result [] id shape-id]
-    (if-let [parent-id (get-in objects [id :parent-id])]
+    (if-let [parent-id (dm/get-in objects [id :parent-id])]
       (recur (conj result parent-id) parent-id)
       result)))
 

frontend/src/app/main/data/workspace/transforms.cljs

@@ -378,7 +378,7 @@
     (update [_ state]
       (-> state
           (dissoc :workspace-modifiers)
-          (update :workspace-local dissoc :current-move-selected)))))
+          (dissoc ::current-move-selected)))))
 
 ;; -- Resize --------------------------------------------------------
 
@@ -721,15 +721,15 @@
 
       ptk/UpdateEvent
       (update [_ state]
-        (if (nil? (get-in state [:workspace-local :current-move-selected]))
+        (if (nil? (get state ::current-move-selected))
           (-> state
               (assoc-in [:workspace-local :transform] :move)
-              (assoc-in [:workspace-local :current-move-selected] same-event))
+              (assoc ::current-move-selected same-event))
           state))
 
       ptk/WatchEvent
       (watch [_ state stream]
-        (if (= same-event (get-in state [:workspace-local :current-move-selected]))
+        (if (= same-event (get state ::current-move-selected))
           (let [selected (wsh/lookup-selected state {:omit-blocked? true})
                 nudge (get-in state [:profile :props :nudge] {:big 10 :small 1})
                 move-events (->> stream
@@ -744,10 +744,10 @@
             (rx/concat
              (rx/merge
               (->> move-events
-                   (rx/take-until stopper)
                    (rx/scan #(gpt/add %1 mov-vec) (gpt/point 0 0))
                    (rx/map #(hash-map :displacement (gmt/translate-matrix %)))
-                   (rx/map (partial set-modifiers selected)))
+                   (rx/map (partial set-modifiers selected))
+                   (rx/take-until stopper))
               (rx/of (move-selected direction shift?)))
 
              (rx/of (apply-modifiers selected)

frontend/src/app/main/ui/shapes/mask.cljs

@@ -50,9 +50,8 @@
           render-id (mf/use-ctx muc/render-ctx)
           svg-text? (and (= :text (:type mask)) (some? (:position-data mask)))
 
-          mask-bb
+          mask-bb      (-> (gsh/transform-shape mask) (:points))
-          (-> (gsh/transform-shape mask)
+          mask-bb-rect (gsh/points->rect mask-bb)]
-              (:points))]
       [:defs
        [:filter {:id (filter-id render-id mask)}
         [:feFlood {:flood-color "white"
@@ -73,7 +72,12 @@
        ;; When te shape is a text we pass to the shape the info and disable the filter.
        ;; There is a bug in Firefox with filters and texts. We change the text to white at shape level
        [:mask {:class "mask-shape"
-               :id (mask-id render-id mask)}
+               :id (mask-id render-id mask)
+               :x (:x mask-bb-rect)
+               :y (:y mask-bb-rect)
+               :width (:width mask-bb-rect)
+               :height (:height mask-bb-rect)
+               :mask-units "userSpaceOnUse"}
         [:g {:filter (when-not svg-text? (filter-url render-id mask))}
          [:& shape-wrapper {:shape (-> mask (dissoc :shadow :blur) (assoc :is-mask? true))}]]]])))
 

frontend/src/app/main/ui/workspace/shapes/frame/dynamic_modifiers.cljs

@@ -38,15 +38,13 @@
     (mf/use-layout-effect
      (mf/deps transforms)
      (fn []
-       (when (and (nil? @prev-transforms)
+       (when (and (empty? @prev-modifiers) (d/not-empty? modifiers))
-                  (some? transforms))
          (utils/start-transform! node shapes))
 
-       (when (some? modifiers)
+       (when (d/not-empty? modifiers)
          (utils/update-transform! node shapes transforms modifiers))
 
-       (when (and (some? @prev-modifiers)
+       (when (and (d/not-empty? @prev-modifiers) (empty? modifiers))
-                  (empty? modifiers))
          (utils/remove-transform! node @prev-shapes))
 
        (reset! prev-modifiers modifiers)

frontend/src/app/main/ui/workspace/viewport/utils.cljs

@@ -150,10 +150,14 @@
 
           (when (or (= (dom/get-tag-name node) "mask")
                     (= (dom/get-tag-name node) "filter"))
-            (dom/set-attribute! node "data-old-x" (dom/get-attribute node "x"))
+            (let [old-x (dom/get-attribute node "x")
-            (dom/set-attribute! node "data-old-y" (dom/get-attribute node "y"))
+                  old-y (dom/get-attribute node "y")
-            (dom/set-attribute! node "data-old-width" (dom/get-attribute node "width"))
+                  old-width (dom/get-attribute node "width")
-            (dom/set-attribute! node "data-old-height" (dom/get-attribute node "height"))))))))
+                  old-height (dom/get-attribute node "height")]
+              (dom/set-attribute! node "data-old-x" old-x)
+              (dom/set-attribute! node "data-old-y" old-y)
+              (dom/set-attribute! node "data-old-width" old-width)
+              (dom/set-attribute! node "data-old-height" old-height))))))))
 
 (defn set-transform-att!
   [node att value]
@@ -208,10 +212,19 @@
             ;; The shape width/height will be automaticaly setup when the modifiers are applied
             nil
 
+            (or (= (dom/get-tag-name node) "mask")
+                (= (dom/get-tag-name node) "filter"))
+            (do
+              (dom/remove-attribute! node "data-old-x")
+              (dom/remove-attribute! node "data-old-y")
+              (dom/remove-attribute! node "data-old-width")
+              (dom/remove-attribute! node "data-old-height"))
+
             :else
             (let [old-transform (dom/get-attribute node "data-old-transform")]
-              (when-not (some? old-transform)
+              (if (some? old-transform)
-                (dom/remove-attribute! node "data-old-transform")
+                (do (dom/remove-attribute! node "data-old-transform")
+                    (dom/set-attribute! node "transform" old-transform))
                 (dom/remove-attribute! node "transform")))))))))
 
 (defn format-viewbox [vbox]