From 566dde21a5e7da4d81b8a4ea6347dcd8b8c320a9 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Mon, 13 Jun 2022 15:45:16 +0200 Subject: [PATCH] :sparkles: Fix viewer for new frames --- common/src/app/common/pages/helpers.cljc | 24 ++++++-- frontend/src/app/main/data/viewer.cljs | 15 ++--- frontend/src/app/main/render.cljs | 2 +- .../src/app/main/ui/viewer/interactions.cljs | 6 +- .../sidebar/options/menus/interactions.cljs | 21 ++++--- .../ui/workspace/viewport/interactions.cljs | 57 +++++++++---------- .../main/ui/workspace/viewport/widgets.cljs | 6 +- 7 files changed, 73 insertions(+), 58 deletions(-) diff --git a/common/src/app/common/pages/helpers.cljc b/common/src/app/common/pages/helpers.cljc index cd1f3f561..4841e4700 100644 --- a/common/src/app/common/pages/helpers.cljc +++ b/common/src/app/common/pages/helpers.cljc @@ -237,16 +237,18 @@ [base index-base-a index-base-b])) (defn is-shape-over-shape? - [objects base-shape-id over-shape-id] + [objects base-shape-id over-shape-id {:keys [top-frames?]}] (let [[base index-a index-b] (get-base objects base-shape-id over-shape-id)] (cond (= base base-shape-id) - (and (frame-shape? objects base-shape-id) + (and (not top-frames?) + (frame-shape? objects base-shape-id) (root-frame? objects base-shape-id)) (= base over-shape-id) - (or (not (frame-shape? objects over-shape-id)) + (or top-frames? + (not (frame-shape? objects over-shape-id)) (not (root-frame? objects over-shape-id))) :else @@ -256,7 +258,7 @@ ([objects ids] (sort-z-index objects ids nil)) - ([objects ids {:keys [bottom-frames?]}] + ([objects ids {:keys [bottom-frames?] :as options}] (letfn [(comp [id-a id-b] (let [type-a (dm/get-in objects [id-a :type]) type-b (dm/get-in objects [id-b :type])] @@ -270,7 +272,7 @@ (= id-a id-b) 0 - (is-shape-over-shape? objects id-a id-b) + (is-shape-over-shape? objects id-a id-b options) 1 :else @@ -683,3 +685,15 @@ (= uuid/zero (:frame-id %)))) :id)) + +(defn get-viewer-frames + ([objects] + (get-viewer-frames objects nil)) + + ([objects {:keys [all-frames?]}] + (into [] + (comp (map (d/getf objects)) + (if all-frames? + identity + (remove :hide-in-viewer))) + (sort-z-index objects (get-frames-ids objects) {:top-frames? true})))) diff --git a/frontend/src/app/main/data/viewer.cljs b/frontend/src/app/main/data/viewer.cljs index 5f45b0173..52990d5da 100644 --- a/frontend/src/app/main/data/viewer.cljs +++ b/frontend/src/app/main/data/viewer.cljs @@ -85,13 +85,6 @@ (update [_ state] (dissoc state :viewer)))) -(defn select-frames - [{:keys [objects] :as page}] - (into [] - (comp (map (d/getf objects)) - (remove :hide-in-viewer)) - (cph/sort-z-index objects (cph/get-frames-ids objects)))) - ;; --- Data Fetching (s/def ::fetch-bundle-params @@ -119,7 +112,9 @@ (let [pages (->> (get-in file [:data :pages]) (map (fn [page-id] (let [data (get-in file [:data :pages-index page-id])] - [page-id (assoc data :frames (select-frames data))]))) + [page-id (assoc data + :frames (cph/get-viewer-frames (:objects data)) + :all-frames (cph/get-viewer-frames (:objects data) {:all-frames? true}))]))) (into {}))] (ptk/reify ::bundle-fetched @@ -491,7 +486,7 @@ (let [route (:route state) qparams (:query-params route) page-id (:page-id qparams) - frames (get-in state [:viewer :pages page-id :frames]) + frames (get-in state [:viewer :pages page-id :all-frames]) frame (d/seek #(= (:id %) frame-id) frames) overlays (get-in state [:viewer-local :overlays])] (if-not (some #(= (:frame %) frame) overlays) @@ -516,7 +511,7 @@ (let [route (:route state) qparams (:query-params route) page-id (:page-id qparams) - frames (get-in state [:viewer :pages page-id :frames]) + frames (get-in state [:viewer :pages page-id :all-frames]) frame (d/seek #(= (:id %) frame-id) frames) overlays (get-in state [:viewer-local :overlays])] (if-not (some #(= (:frame %) frame) overlays) diff --git a/frontend/src/app/main/render.cljs b/frontend/src/app/main/render.cljs index 5c81e804b..429e5b4d0 100644 --- a/frontend/src/app/main/render.cljs +++ b/frontend/src/app/main/render.cljs @@ -389,7 +389,7 @@ text-shapes (sequence (filter cph/text-shape?) (vals objects)) render-texts? (and render-texts? (d/seek (comp nil? :position-data) text-shapes))] - [:& (mf/provider export/include-metadata-ctx) {:value true} + [:& (mf/provider export/include-metadata-ctx) {:value false} [:& (mf/provider embed/context) {:value render-embed?} [:svg {:id (dm/str "screenshot-" object-id) :view-box vbox diff --git a/frontend/src/app/main/ui/viewer/interactions.cljs b/frontend/src/app/main/ui/viewer/interactions.cljs index 06a4f2b8b..0878f911a 100644 --- a/frontend/src/app/main/ui/viewer/interactions.cljs +++ b/frontend/src/app/main/ui/viewer/interactions.cljs @@ -7,6 +7,7 @@ (ns app.main.ui.viewer.interactions (:require [app.common.data :as d] + [app.common.data.macros :as dm] [app.common.geom.matrix :as gmt] [app.common.geom.point :as gpt] [app.common.pages.helpers :as cph] @@ -127,8 +128,9 @@ [:& dropdown {:show @show-dropdown? :on-close hide-dropdown} [:ul.dropdown.with-check - (for [flow flows] - [:li {:class (dom/classnames :selected (= (:id flow) (:id @current-flow))) + (for [[index flow] (d/enumerate flows)] + [:li {:key (dm/str "flow-" (:id flow) "-" index) + :class (dom/classnames :selected (= (:id flow) (:id @current-flow))) :on-click #(select-flow flow)} [:span.icon i/tick] [:span.label (:name flow)]])]]]))) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs index e8ba4e9b9..5464fa633 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs @@ -7,6 +7,7 @@ (ns app.main.ui.workspace.sidebar.options.menus.interactions (:require [app.common.data :as d] + [app.common.data.macros :as dm] [app.common.pages.helpers :as cph] [app.common.spec.interactions :as csi] [app.common.spec.page :as csp] @@ -178,10 +179,10 @@ (mf/defc interaction-entry [{:keys [index shape interaction update-interaction remove-interaction]}] - (let [objects (deref refs/workspace-page-objects) - destination (get objects (:destination interaction)) - frames (mf/with-memo [objects] - (cph/get-frames objects)) + (let [objects (deref refs/workspace-page-objects) + destination (get objects (:destination interaction)) + + frames (mf/with-memo [objects] (cph/get-viewer-frames objects {:all-frames? (not= :navigate (:action-type interaction))})) overlay-pos-type (:overlay-pos-type interaction) close-click-outside? (:close-click-outside interaction false) @@ -313,7 +314,8 @@ (for [[value name] (event-type-names)] (when-not (and (= value :after-delay) (not= (:type shape) :frame)) - [:option {:value (str value)} name]))]] + [:option {:key (dm/str value) + :value (dm/str value)} name]))]] ; Delay (when (csi/has-delay interaction) @@ -334,7 +336,8 @@ {:value (str (:action-type interaction)) :on-change change-action-type} (for [[value name] (action-type-names)] - [:option {:value (str value)} name])]] + [:option {:key (dm/str "action-" value) + :value (str value)} name])]] ; Destination (when (csi/has-destination interaction) @@ -349,7 +352,8 @@ (for [frame frames] (when (and (not= (:id frame) (:id shape)) ; A frame cannot navigate to itself (not= (:id frame) (:frame-id shape))) ; nor a shape to its container frame - [:option {:value (str (:id frame))} (:name frame)]))]]) + [:option {:key (dm/str "destination-" (:id frame)) + :value (str (:id frame))} (:name frame)]))]]) ; Preserve scroll (when (csi/has-preserve-scroll interaction) @@ -568,7 +572,8 @@ [:div.interactions-help (tr "workspace.options.use-play-button")]])] [:div.groups (for [[index interaction] (d/enumerate interactions)] - [:& interaction-entry {:index index + [:& interaction-entry {:key (dm/str (:id shape) "-" index) + :index index :shape shape :interaction interaction :update-interaction update-interaction diff --git a/frontend/src/app/main/ui/workspace/viewport/interactions.cljs b/frontend/src/app/main/ui/workspace/viewport/interactions.cljs index 20a51b826..b35eac1c7 100644 --- a/frontend/src/app/main/ui/workspace/viewport/interactions.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/interactions.cljs @@ -280,7 +280,7 @@ selected? (contains? selected (:id shape)) level (calc-level index (:interactions shape))] (when-not selected? - [:& interaction-path {:key (dm/str (:id shape) "-" index) + [:& interaction-path {:key (dm/str "non-selected-" (:id shape) "-" index) :index index :level level :orig-shape shape @@ -307,35 +307,32 @@ (let [dest-shape (when (cti/destination? interaction) (get objects (:destination interaction))) level (calc-level index (:interactions shape))] - [:* - [:& interaction-path {:key (dm/str (:id shape) "-" index) - :index index - :level level - :orig-shape shape - :dest-shape dest-shape - :selected selected - :selected? true - :action-type (:action-type interaction) - :zoom zoom}] - (when (and (or (= (:action-type interaction) :open-overlay) - (= (:action-type interaction) :toggle-overlay)) - (= (:overlay-pos-type interaction) :manual)) - (if (and (some? move-overlay-to) - (= move-overlay-index index)) - [:& overlay-marker {:key (dm/str "pos" (:id shape) "-" index) - :index index - :orig-shape shape - :dest-shape dest-shape - :position move-overlay-to - :objects objects - :hover-disabled? hover-disabled?}] - [:& overlay-marker {:key (dm/str "pos" (:id shape) "-" index) - :index index - :orig-shape shape - :dest-shape dest-shape - :position (:overlay-position interaction) - :objects objects - :hover-disabled? hover-disabled?}]))]))) + [:g {:key (dm/str "interaction-path-" (:id shape) "-" index)} + [:& interaction-path {:index index + :level level + :orig-shape shape + :dest-shape dest-shape + :selected selected + :selected? true + :action-type (:action-type interaction) + :zoom zoom}] + (when (and (or (= (:action-type interaction) :open-overlay) + (= (:action-type interaction) :toggle-overlay)) + (= (:overlay-pos-type interaction) :manual)) + (if (and (some? move-overlay-to) + (= move-overlay-index index)) + [:& overlay-marker {:index index + :orig-shape shape + :dest-shape dest-shape + :position move-overlay-to + :objects objects + :hover-disabled? hover-disabled?}] + [:& overlay-marker {:index index + :orig-shape shape + :dest-shape dest-shape + :position (:overlay-position interaction) + :objects objects + :hover-disabled? hover-disabled?}]))]))) (when (and shape (not (cph/unframed-shape? shape)) (not (#{:move :rotate} current-transform))) diff --git a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs index fa697e510..68c8f61cf 100644 --- a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs @@ -6,6 +6,7 @@ (ns app.main.ui.workspace.viewport.widgets (:require + [app.common.data :as d] [app.common.data.macros :as dm] [app.common.geom.point :as gpt] [app.common.geom.shapes :as gsh] @@ -253,9 +254,10 @@ on-frame-leave (unchecked-get props "on-frame-leave") on-frame-select (unchecked-get props "on-frame-select")] [:g.frame-flows - (for [flow flows] + (for [[index flow] (d/enumerate flows)] (let [frame (get objects (:starting-frame flow))] - [:& frame-flow {:flow flow + [:& frame-flow {:key (dm/str (:id frame) "-" index) + :flow flow :frame frame :selected? (contains? selected (:id frame)) :zoom zoom