✨ Move guides together with frames

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

@@ -6,9 +6,11 @@
 
 (ns app.main.data.workspace.guides
   (:require
+   [app.common.spec :as us]
    [app.main.data.workspace.changes :as dwc]
    [app.main.data.workspace.state-helpers :as wsh]
    [beicon.core :as rx]
+   [cljs.spec.alpha :as s]
    [potok.core :as ptk]))
 
 (defn make-update-guide [guide]
@@ -18,6 +20,7 @@
       (merge guide))))
 
 (defn update-guides [guide]
+  ;; TODO CHECK SPEC
   (ptk/reify ::update-guides
     ptk/WatchEvent
     (watch [it state _]
@@ -41,6 +44,7 @@
            :origin it}))))))
 
 (defn remove-guide [guide]
+  ;; TODO CHECK SPEC
   (ptk/reify ::remove-guide
     ptk/WatchEvent
     (watch [it state _]
@@ -61,3 +65,36 @@
           {:redo-changes rch
            :undo-changes uch
            :origin it}))))))
+
+(defn move-frame-guides
+  [ids]
+  (us/verify (s/coll-of uuid?) ids)
+
+  (ptk/reify ::move-frame-guides
+    ptk/WatchEvent
+
+    (watch [_ state _]
+      (let [objects (wsh/lookup-page-objects state)
+            frame-ids (->> ids (filter #(= :frame (get-in objects [% :type]))) (into #{}))
+            object-modifiers  (get state :workspace-modifiers)
+
+            moved-guide?
+            (fn [guide]
+              (let [frame-id (:frame-id guide)]
+                (and (contains? frame-ids frame-id)
+                     (some? (get-in object-modifiers [frame-id :modifiers :displacement])))))
+
+            build-move-event
+            (fn [guide]
+              (let [disp (get-in object-modifiers [(:frame-id guide) :modifiers :displacement])
+                    guide (if (= :x (:axis guide))
+                            (update guide :position + (:e disp))
+                            (update guide :position + (:f disp)))]
+                (update-guides guide)))]
+
+        (->> (wsh/lookup-page-options state)
+             :guides
+             (vals)
+             (filter moved-guide?)
+             (map build-move-event)
+             (rx/from))))))

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

@@ -16,6 +16,7 @@
    [app.common.spec :as us]
    [app.main.data.workspace.changes :as dch]
    [app.main.data.workspace.common :as dwc]
+   [app.main.data.workspace.guides :as dwg]
    [app.main.data.workspace.selection :as dws]
    [app.main.data.workspace.state-helpers :as wsh]
    [app.main.data.workspace.undo :as dwu]
@@ -155,6 +156,8 @@
 
          (update state :workspace-modifiers #(reduce update-shape % shapes)))))))
 
+
+
 (defn- apply-modifiers
   [ids]
   (us/verify (s/coll-of uuid?) ids)
@@ -186,6 +189,7 @@
                           :rotation
                           :flip-x
                           :flip-y]})
+               (dwg/move-frame-guides ids-with-children)
                (clear-local-transform)
                (dwu/commit-undo-transaction))))))
 

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

@@ -259,7 +259,7 @@
         guide-width (/ guide-width zoom)
         guide-pill-corner-radius (/ guide-pill-corner-radius zoom)]
 
-    [:g.guide-area
+    [:g.guide-area {:data-guide-frame-id (when (some? frame) (str (:id frame)))}
      (when-not disabled-guides?
        (let [{:keys [x y width height]} (guide-area-axis pos vbox zoom frame axis)]
          [:rect {:x x

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

@@ -85,13 +85,16 @@
         mask?  (and group? masked-group?)
 
         ;; When the shape is a frame we maybe need to move its thumbnail
-        thumb-node (when frame? (dom/get-element (str "thumbnail-" id)))]
+        thumb-node (when frame? (dom/get-element (str "thumbnail-" id)))
+
+        ]
 
     (cond
       frame?
-      [thumb-node
+      (into [thumb-node
-       (dom/query shape-node ".frame-background")
+             (dom/query shape-node ".frame-background")
-       (dom/query shape-node ".frame-clip")]
+             (dom/query shape-node ".frame-clip")]
+            (dom/query-all (str "[data-guide-frame-id='" id "']")))
 
       ;; For groups we don't want to transform the whole group but only
       ;; its filters/masks

frontend/src/app/util/dom.cljs

@@ -213,9 +213,20 @@
     (.-innerText el)))
 
 (defn query
-  [^js el ^string query]
+  ([^string query]
-  (when (some? el)
+   (query globals/document query))
-    (.querySelector el query)))
+
+  ([^js el ^string query]
+   (when (some? el)
+     (.querySelector el query))))
+
+(defn query-all
+  ([^string query]
+   (query-all globals/document query))
+
+  ([^js el ^string query]
+   (when (some? el)
+     (.querySelectorAll el query))))
 
 (defn get-client-position
   [^js event]