diff --git a/frontend/src/app/main/data/workspace/guides.cljs b/frontend/src/app/main/data/workspace/guides.cljs index 45502688a7..a5f4d44ca7 100644 --- a/frontend/src/app/main/data/workspace/guides.cljs +++ b/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)))))) diff --git a/frontend/src/app/main/data/workspace/transforms.cljs b/frontend/src/app/main/data/workspace/transforms.cljs index 94c3c3af0f..51ee42708d 100644 --- a/frontend/src/app/main/data/workspace/transforms.cljs +++ b/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)))))) diff --git a/frontend/src/app/main/ui/workspace/viewport/guides.cljs b/frontend/src/app/main/ui/workspace/viewport/guides.cljs index 8c0c7f84b7..854d4d430d 100644 --- a/frontend/src/app/main/ui/workspace/viewport/guides.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/workspace/viewport/utils.cljs b/frontend/src/app/main/ui/workspace/viewport/utils.cljs index 088d175494..5c9e3334de 100644 --- a/frontend/src/app/main/ui/workspace/viewport/utils.cljs +++ b/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 - (dom/query shape-node ".frame-background") - (dom/query shape-node ".frame-clip")] + (into [thumb-node + (dom/query shape-node ".frame-background") + (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 diff --git a/frontend/src/app/util/dom.cljs b/frontend/src/app/util/dom.cljs index 37e75d1a9f..e6505c51a8 100644 --- a/frontend/src/app/util/dom.cljs +++ b/frontend/src/app/util/dom.cljs @@ -213,9 +213,20 @@ (.-innerText el))) (defn query - [^js el ^string query] - (when (some? el) - (.querySelector el query))) + ([^string query] + (query globals/document 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]