3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-23 11:46:11 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Fix viewer for new frames

Browse source
This commit is contained in:
alonso.torres 2022-06-13 15:45:16 +02:00
parent cab2b8469e
commit 566dde21a5
7 changed files with 73 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

24
common/src/app/common/pages/helpers.cljc
View file

@ -237,16 +237,18 @@
[base index-base-a index-base-b])) [base index-base-a index-base-b]))
(defn is-shape-over-shape? (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)] (let [[base index-a index-b] (get-base objects base-shape-id over-shape-id)]
(cond (cond
(= base base-shape-id) (= 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)) (root-frame? objects base-shape-id))
(= base over-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))) (not (root-frame? objects over-shape-id)))
:else :else
@ -256,7 +258,7 @@
([objects ids] ([objects ids]
(sort-z-index objects ids nil)) (sort-z-index objects ids nil))
([objects ids {:keys [bottom-frames?]}] ([objects ids {:keys [bottom-frames?] :as options}]
(letfn [(comp [id-a id-b] (letfn [(comp [id-a id-b]
(let [type-a (dm/get-in objects [id-a :type]) (let [type-a (dm/get-in objects [id-a :type])
type-b (dm/get-in objects [id-b :type])] type-b (dm/get-in objects [id-b :type])]
@ -270,7 +272,7 @@
(= id-a id-b) (= id-a id-b)
0 0
(is-shape-over-shape? objects id-a id-b) (is-shape-over-shape? objects id-a id-b options)
1 1
:else :else
@ -683,3 +685,15 @@
(= uuid/zero (:frame-id %)))) (= uuid/zero (:frame-id %))))
: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}))))

15
frontend/src/app/main/data/viewer.cljs
View file

@ -85,13 +85,6 @@
(update [_ state] (update [_ state]
(dissoc state :viewer)))) (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 ;; --- Data Fetching
(s/def ::fetch-bundle-params (s/def ::fetch-bundle-params
@ -119,7 +112,9 @@
(let [pages (->> (get-in file [:data :pages]) (let [pages (->> (get-in file [:data :pages])
(map (fn [page-id] (map (fn [page-id]
(let [data (get-in file [:data :pages-index 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 {}))] (into {}))]
(ptk/reify ::bundle-fetched (ptk/reify ::bundle-fetched
@ -491,7 +486,7 @@
(let [route (:route state) (let [route (:route state)
qparams (:query-params route) qparams (:query-params route)
page-id (:page-id qparams) 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) frame (d/seek #(= (:id %) frame-id) frames)
overlays (get-in state [:viewer-local :overlays])] overlays (get-in state [:viewer-local :overlays])]
(if-not (some #(= (:frame %) frame) overlays) (if-not (some #(= (:frame %) frame) overlays)
@ -516,7 +511,7 @@
(let [route (:route state) (let [route (:route state)
qparams (:query-params route) qparams (:query-params route)
page-id (:page-id qparams) 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) frame (d/seek #(= (:id %) frame-id) frames)
overlays (get-in state [:viewer-local :overlays])] overlays (get-in state [:viewer-local :overlays])]
(if-not (some #(= (:frame %) frame) overlays) (if-not (some #(= (:frame %) frame) overlays)

2
frontend/src/app/main/render.cljs
View file

@ -389,7 +389,7 @@
text-shapes (sequence (filter cph/text-shape?) (vals objects)) text-shapes (sequence (filter cph/text-shape?) (vals objects))
render-texts? (and render-texts? (d/seek (comp nil? :position-data) text-shapes))] 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?} [:& (mf/provider embed/context) {:value render-embed?}
[:svg {:id (dm/str "screenshot-" object-id) [:svg {:id (dm/str "screenshot-" object-id)
:view-box vbox :view-box vbox

6
frontend/src/app/main/ui/viewer/interactions.cljs
View file

@ -7,6 +7,7 @@
(ns app.main.ui.viewer.interactions (ns app.main.ui.viewer.interactions
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.data.macros :as dm]
[app.common.geom.matrix :as gmt] [app.common.geom.matrix :as gmt]
[app.common.geom.point :as gpt] [app.common.geom.point :as gpt]
[app.common.pages.helpers :as cph] [app.common.pages.helpers :as cph]
@ -127,8 +128,9 @@
[:& dropdown {:show @show-dropdown? [:& dropdown {:show @show-dropdown?
:on-close hide-dropdown} :on-close hide-dropdown}
[:ul.dropdown.with-check [:ul.dropdown.with-check
(for [flow flows] (for [[index flow] (d/enumerate flows)]
[:li {:class (dom/classnames :selected (= (:id flow) (:id @current-flow))) [:li {:key (dm/str "flow-" (:id flow) "-" index)
:class (dom/classnames :selected (= (:id flow) (:id @current-flow)))
:on-click #(select-flow flow)} :on-click #(select-flow flow)}
[:span.icon i/tick] [:span.icon i/tick]
[:span.label (:name flow)]])]]]))) [:span.label (:name flow)]])]]])))

21
frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
View file

@ -7,6 +7,7 @@
(ns app.main.ui.workspace.sidebar.options.menus.interactions (ns app.main.ui.workspace.sidebar.options.menus.interactions
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.data.macros :as dm]
[app.common.pages.helpers :as cph] [app.common.pages.helpers :as cph]
[app.common.spec.interactions :as csi] [app.common.spec.interactions :as csi]
[app.common.spec.page :as csp] [app.common.spec.page :as csp]
@ -178,10 +179,10 @@
(mf/defc interaction-entry (mf/defc interaction-entry
[{:keys [index shape interaction update-interaction remove-interaction]}] [{:keys [index shape interaction update-interaction remove-interaction]}]
(let [objects (deref refs/workspace-page-objects) (let [objects (deref refs/workspace-page-objects)
destination (get objects (:destination interaction)) destination (get objects (:destination interaction))
frames (mf/with-memo [objects]
(cph/get-frames objects)) frames (mf/with-memo [objects] (cph/get-viewer-frames objects {:all-frames? (not= :navigate (:action-type interaction))}))
overlay-pos-type (:overlay-pos-type interaction) overlay-pos-type (:overlay-pos-type interaction)
close-click-outside? (:close-click-outside interaction false) close-click-outside? (:close-click-outside interaction false)
@ -313,7 +314,8 @@
(for [[value name] (event-type-names)] (for [[value name] (event-type-names)]
(when-not (and (= value :after-delay) (when-not (and (= value :after-delay)
(not= (:type shape) :frame)) (not= (:type shape) :frame))
[:option {:value (str value)} name]))]] [:option {:key (dm/str value)
:value (dm/str value)} name]))]]
; Delay ; Delay
(when (csi/has-delay interaction) (when (csi/has-delay interaction)
@ -334,7 +336,8 @@
{:value (str (:action-type interaction)) {:value (str (:action-type interaction))
:on-change change-action-type} :on-change change-action-type}
(for [[value name] (action-type-names)] (for [[value name] (action-type-names)]
[:option {:value (str value)} name])]] [:option {:key (dm/str "action-" value)
:value (str value)} name])]]
; Destination ; Destination
(when (csi/has-destination interaction) (when (csi/has-destination interaction)
@ -349,7 +352,8 @@
(for [frame frames] (for [frame frames]
(when (and (not= (:id frame) (:id shape)) ; A frame cannot navigate to itself (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 (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 ; Preserve scroll
(when (csi/has-preserve-scroll interaction) (when (csi/has-preserve-scroll interaction)
@ -568,7 +572,8 @@
[:div.interactions-help (tr "workspace.options.use-play-button")]])] [:div.interactions-help (tr "workspace.options.use-play-button")]])]
[:div.groups [:div.groups
(for [[index interaction] (d/enumerate interactions)] (for [[index interaction] (d/enumerate interactions)]
[:& interaction-entry {:index index [:& interaction-entry {:key (dm/str (:id shape) "-" index)
:index index
:shape shape :shape shape
:interaction interaction :interaction interaction
:update-interaction update-interaction :update-interaction update-interaction

57
frontend/src/app/main/ui/workspace/viewport/interactions.cljs
View file

@ -280,7 +280,7 @@
selected? (contains? selected (:id shape)) selected? (contains? selected (:id shape))
level (calc-level index (:interactions shape))] level (calc-level index (:interactions shape))]
(when-not selected? (when-not selected?
[:& interaction-path {:key (dm/str (:id shape) "-" index) [:& interaction-path {:key (dm/str "non-selected-" (:id shape) "-" index)
:index index :index index
:level level :level level
:orig-shape shape :orig-shape shape
@ -307,35 +307,32 @@
(let [dest-shape (when (cti/destination? interaction) (let [dest-shape (when (cti/destination? interaction)
(get objects (:destination interaction))) (get objects (:destination interaction)))
level (calc-level index (:interactions shape))] level (calc-level index (:interactions shape))]
[:* [:g {:key (dm/str "interaction-path-" (:id shape) "-" index)}
[:& interaction-path {:key (dm/str (:id shape) "-" index) [:& interaction-path {:index index
:index index :level level
:level level :orig-shape shape
:orig-shape shape :dest-shape dest-shape
:dest-shape dest-shape :selected selected
:selected selected :selected? true
:selected? true :action-type (:action-type interaction)
:action-type (:action-type interaction) :zoom zoom}]
:zoom zoom}] (when (and (or (= (:action-type interaction) :open-overlay)
(when (and (or (= (:action-type interaction) :open-overlay) (= (:action-type interaction) :toggle-overlay))
(= (:action-type interaction) :toggle-overlay)) (= (:overlay-pos-type interaction) :manual))
(= (:overlay-pos-type interaction) :manual)) (if (and (some? move-overlay-to)
(if (and (some? move-overlay-to) (= move-overlay-index index))
(= move-overlay-index index)) [:& overlay-marker {:index index
[:& overlay-marker {:key (dm/str "pos" (:id shape) "-" index) :orig-shape shape
:index index :dest-shape dest-shape
:orig-shape shape :position move-overlay-to
:dest-shape dest-shape :objects objects
:position move-overlay-to :hover-disabled? hover-disabled?}]
:objects objects [:& overlay-marker {:index index
:hover-disabled? hover-disabled?}] :orig-shape shape
[:& overlay-marker {:key (dm/str "pos" (:id shape) "-" index) :dest-shape dest-shape
:index index :position (:overlay-position interaction)
:orig-shape shape :objects objects
:dest-shape dest-shape :hover-disabled? hover-disabled?}]))])))
:position (:overlay-position interaction)
:objects objects
:hover-disabled? hover-disabled?}]))])))
(when (and shape (when (and shape
(not (cph/unframed-shape? shape)) (not (cph/unframed-shape? shape))
(not (#{:move :rotate} current-transform))) (not (#{:move :rotate} current-transform)))

6
frontend/src/app/main/ui/workspace/viewport/widgets.cljs
View file

@ -6,6 +6,7 @@
(ns app.main.ui.workspace.viewport.widgets (ns app.main.ui.workspace.viewport.widgets
(:require (:require
[app.common.data :as d]
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.common.geom.point :as gpt] [app.common.geom.point :as gpt]
[app.common.geom.shapes :as gsh] [app.common.geom.shapes :as gsh]
@ -253,9 +254,10 @@
on-frame-leave (unchecked-get props "on-frame-leave") on-frame-leave (unchecked-get props "on-frame-leave")
on-frame-select (unchecked-get props "on-frame-select")] on-frame-select (unchecked-get props "on-frame-select")]
[:g.frame-flows [:g.frame-flows
(for [flow flows] (for [[index flow] (d/enumerate flows)]
(let [frame (get objects (:starting-frame flow))] (let [frame (get objects (:starting-frame flow))]
[:& frame-flow {:flow flow [:& frame-flow {:key (dm/str (:id frame) "-" index)
:flow flow
:frame frame :frame frame
:selected? (contains? selected (:id frame)) :selected? (contains? selected (:id frame))
:zoom zoom :zoom zoom