Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-13 10:38:13 -05:00
Code Issues Activity

Merge branch 'staging' into add-shortcut-for-clear-undo

Browse source
This commit is contained in:
Andrey Antukh 2022-09-14 12:45:42 +02:00 • committed by GitHub
commit 16a0af802a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 254 additions and 196 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
CHANGES.md
View file

@ -1,5 +1,14 @@
# CHANGELOG # CHANGELOG
## 1.15.4-beta
### :bug: Bugs fixed
- Fix overlay remains open on frame change [Taiga #4066](https://tree.taiga.io/project/penpot/issue/4066)
- Fix toggle overlay position [Taiga #4091](https://tree.taiga.io/project/penpot/issue/4091)
- Fix overlay closed on clicked outside [Taiga #4027](https://tree.taiga.io/project/penpot/issue/4027)
- Fix animate multiple overlays [Taiga #3993](https://tree.taiga.io/project/penpot/issue/3993)
## 1.15.3-beta ## 1.15.3-beta
### :bug: Bugs fixed ### :bug: Bugs fixed
@ -10,9 +19,11 @@
- Fix problem editing rotated texts [Taiga #4026](https://tree.taiga.io/project/penpot/issue/4026) - Fix problem editing rotated texts [Taiga #4026](https://tree.taiga.io/project/penpot/issue/4026)
- Fix problem with texts for non existing fonts [Taiga #4087](https://tree.taiga.io/project/penpot/issue/4087) - Fix problem with texts for non existing fonts [Taiga #4087](https://tree.taiga.io/project/penpot/issue/4087)
- Fix undo after moving layers will wrongly order the layers [Taiga #3344](https://tree.taiga.io/project/penpot/issue/3344) - Fix undo after moving layers will wrongly order the layers [Taiga #3344](https://tree.taiga.io/project/penpot/issue/3344)
- Fix Grouping typographies by drag & drop does not work (again) [#2203](https://github.com/penpot/penpot/issues/2203) - Fix grouping typographies by drag & drop does not work (again) [#2203](https://github.com/penpot/penpot/issues/2203)
- Fix when ungrouping, the items previously grouped should ALWAYS remain selected [Taiga #4064](https://tree.taiga.io/project/penpot/issue/4064)
- Change shortcut for "Clear undo" [#2219](https://github.com/penpot/penpot/issues/2219) - Change shortcut for "Clear undo" [#2219](https://github.com/penpot/penpot/issues/2219)
## 1.15.2-beta ## 1.15.2-beta
### :bug: Bugs fixed ### :bug: Bugs fixed

2
backend/deps.edn
View file

@ -50,7 +50,7 @@
;; Pretty Print specs ;; Pretty Print specs
pretty-spec/pretty-spec {:mvn/version "0.1.4"} pretty-spec/pretty-spec {:mvn/version "0.1.4"}
software.amazon.awssdk/s3 {:mvn/version "2.17.209"}} software.amazon.awssdk/s3 {:mvn/version "2.17.272"}}
:paths ["src" "resources" "target/classes"] :paths ["src" "resources" "target/classes"]
:aliases :aliases

2
backend/src/app/auth/oidc.clj
View file

@ -515,7 +515,7 @@
[_ {:keys [executor session] :as cfg}] [_ {:keys [executor session] :as cfg}]
(let [cfg (update cfg :provider d/without-nils)] (let [cfg (update cfg :provider d/without-nils)]
["" {:middleware [[(:middleware session)] ["" {:middleware [[(:middleware session)]
[hmw/with-promise-async executor] [hmw/with-dispatch executor]
[hmw/with-config cfg] [hmw/with-config cfg]
[provider-lookup] [provider-lookup]
]} ]}

17
backend/src/app/http.clj
View file

@ -10,7 +10,7 @@
[app.common.logging :as l] [app.common.logging :as l]
[app.common.transit :as t] [app.common.transit :as t]
[app.http.errors :as errors] [app.http.errors :as errors]
[app.http.middleware :as middleware] [app.http.middleware :as mw]
[app.metrics :as mtx] [app.metrics :as mtx]
[app.worker :as wrk] [app.worker :as wrk]
[clojure.spec.alpha :as s] [clojure.spec.alpha :as s]
@ -144,12 +144,12 @@
(defmethod ig/init-key ::router (defmethod ig/init-key ::router
[_ {:keys [ws session metrics assets feedback] :as cfg}] [_ {:keys [ws session metrics assets feedback] :as cfg}]
(rr/router (rr/router
[["" {:middleware [[middleware/server-timing] [["" {:middleware [[mw/server-timing]
[middleware/format-response] [mw/format-response]
[middleware/params] [mw/params]
[middleware/parse-request] [mw/parse-request]
[middleware/errors errors/handle] [mw/errors errors/handle]
[middleware/restrict-methods]]} [mw/restrict-methods]]}
["/metrics" {:handler (:handler metrics)}] ["/metrics" {:handler (:handler metrics)}]
["/assets" {:middleware [(:middleware session)]} ["/assets" {:middleware [(:middleware session)]}
@ -167,7 +167,7 @@
:handler ws :handler ws
:allowed-methods #{:get}}] :allowed-methods #{:get}}]
["/api" {:middleware [[middleware/cors] ["/api" {:middleware [[mw/cors]
[(:middleware session)]]} [(:middleware session)]]}
["/audit/events" {:handler (:audit-handler cfg) ["/audit/events" {:handler (:audit-handler cfg)
:allowed-methods #{:post}}] :allowed-methods #{:post}}]
@ -176,4 +176,3 @@
(:doc-routes cfg) (:doc-routes cfg)
(:oidc-routes cfg) (:oidc-routes cfg)
(:rpc-routes cfg)]]])) (:rpc-routes cfg)]]]))

31
backend/src/app/http/debug.clj
View file

@ -379,17 +379,20 @@
(defmethod ig/init-key ::routes (defmethod ig/init-key ::routes
[_ {:keys [session pool executor] :as cfg}] [_ {:keys [session pool executor] :as cfg}]
["/dbg" {:middleware [[(:middleware session)] [["/readyz" {:middleware [[mw/with-dispatch executor]
[with-authorization pool] [mw/with-config cfg]]
[mw/with-promise-async executor] :handler health-handler}]
[mw/with-config cfg]]} ["/dbg" {:middleware [[(:middleware session)]
["" {:handler index-handler}] [with-authorization pool]
["/health" {:handler health-handler}] [mw/with-dispatch executor]
["/changelog" {:handler changelog-handler}] [mw/with-config cfg]]}
;; ["/error-by-id/:id" {:handler error-handler}] ["" {:handler index-handler}]
["/error/:id" {:handler error-handler}] ["/health" {:handler health-handler}]
["/error" {:handler error-list-handler}] ["/changelog" {:handler changelog-handler}]
["/file/export" {:handler export-handler}] ;; ["/error-by-id/:id" {:handler error-handler}]
["/file/import" {:handler import-handler}] ["/error/:id" {:handler error-handler}]
["/file/data" {:handler file-data-handler}] ["/error" {:handler error-list-handler}]
["/file/changes" {:handler file-changes-handler}]]) ["/file/export" {:handler export-handler}]
["/file/import" {:handler import-handler}]
["/file/data" {:handler file-data-handler}]
["/file/changes" {:handler file-changes-handler}]]])

8
backend/src/app/http/middleware.clj
View file

@ -195,8 +195,9 @@
{:name ::restrict-methods {:name ::restrict-methods
:compile compile-restrict-methods}) :compile compile-restrict-methods})
(def with-promise-async (def with-dispatch
{:compile {:name ::with-dispatch
:compile
(fn [& _] (fn [& _]
(fn [handler executor] (fn [handler executor]
(fn [request respond raise] (fn [request respond raise]
@ -206,7 +207,8 @@
(p/catch raise)))))}) (p/catch raise)))))})
(def with-config (def with-config
{:compile {:name ::with-config
:compile
(fn [& _] (fn [& _]
(fn [handler config] (fn [handler config]
(fn (fn

13
backend/src/app/http/session.clj
View file

@ -230,13 +230,12 @@
(handler request respond raise) (handler request respond raise)
:else :else
(let [request (-> request (let [request (-> request
(assoc :profile-id (:profile-id session)) (assoc :profile-id (:profile-id session))
(assoc :session-id (:id session))) (assoc :session-id (:id session)))
respond (cond-> respond respond (cond-> respond
(renew-session? session) (renew-session? session)
(wrap-respond session))] (wrap-respond session))]
(handler request respond raise)))))) (handler request respond raise))))))
(catch Throwable cause (catch Throwable cause

11
exporter/src/app/http.cljs
View file

@ -124,6 +124,16 @@
(let [token (.get ^js cookies cookie-name)] (let [token (.get ^js cookies cookie-name)]
(handler (cond-> exchange token (assoc :request/auth-token token)))))) (handler (cond-> exchange token (assoc :request/auth-token token))))))
(defn- wrap-health
"Add /healthz entry point intercept."
[handler]
(fn [{:keys [:request/path] :as exchange}]
(if (= path "/readyz")
(assoc exchange
:response/status 200
:response/body "OK")
(handler exchange))))
(defn- create-adapter (defn- create-adapter
[handler] [handler]
(fn [req res] (fn [req res]
@ -149,6 +159,7 @@
(defn init (defn init
[] []
(let [handler (-> handlers/handler (let [handler (-> handlers/handler
(wrap-health)
(wrap-auth "auth-token") (wrap-auth "auth-token")
(wrap-response-format) (wrap-response-format)
(wrap-params) (wrap-params)

2
frontend/resources/styles/main/partials/texts.scss
View file

@ -16,7 +16,7 @@
.text-editor { .text-editor {
.DraftEditor-root { .DraftEditor-root {
height: 100%; height: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }

14
frontend/resources/styles/main/partials/viewer.scss
View file

@ -171,6 +171,20 @@
} }
.viewport-container { .viewport-container {
clip-path: inset(0 0 0 0);
grid-column: 1 / 1; grid-column: 1 / 1;
grid-row: 1 / 1; grid-row: 1 / 1;
.not-fixed {
position: absolute;
}
.fixed {
position: fixed;
pointer-events: none;
.frame-children g {
pointer-events: auto;
}
}
} }

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

@ -274,6 +274,11 @@
(def select-prev-frame (def select-prev-frame
(ptk/reify ::select-prev-frame (ptk/reify ::select-prev-frame
ptk/UpdateEvent
(update [_ state]
(-> state
(dissoc :viewer-animations)
(assoc :viewer-overlays [])))
ptk/WatchEvent ptk/WatchEvent
(watch [_ state _] (watch [_ state _]
(let [route (:route state) (let [route (:route state)
@ -287,6 +292,11 @@
(def select-next-frame (def select-next-frame
(ptk/reify ::select-next-frame (ptk/reify ::select-next-frame
ptk/UpdateEvent
(update [_ state]
(-> state
(dissoc :viewer-animations)
(assoc :viewer-overlays [])))
ptk/WatchEvent ptk/WatchEvent
(watch [_ state _] (watch [_ state _]
(let [route (:route state) (let [route (:route state)
@ -371,7 +381,7 @@
(ptk/reify ::complete-animation (ptk/reify ::complete-animation
ptk/UpdateEvent ptk/UpdateEvent
(update [_ state] (update [_ state]
(dissoc state :viewer-animation)))) (dissoc state :viewer-animations))))
;; --- Navigation inside page ;; --- Navigation inside page
@ -412,7 +422,7 @@
(assoc :viewer-overlays []) (assoc :viewer-overlays [])
(some? animation) (some? animation)
(assoc :viewer-animation (assoc-in [:viewer-animations (:id frame)]
{:kind :go-to-frame {:kind :go-to-frame
:orig-frame-id (:id frame) :orig-frame-id (:id frame)
:animation animation})))) :animation animation}))))
@ -465,13 +475,14 @@
:id (:id frame) :id (:id frame)
:position position :position position
:close-click-outside close-click-outside :close-click-outside close-click-outside
:background-overlay background-overlay}) :background-overlay background-overlay
:animation animation})
(some? animation) (some? animation)
(assoc :viewer-animation (assoc-in [:viewer-animations (:id frame)]
{:kind :open-overlay {:kind :open-overlay
:overlay-id (:id frame) :overlay-id (:id frame)
:animation animation}))) :animation animation})))
(defn- close-overlay* (defn- close-overlay*
[state frame-id animation] [state frame-id animation]
@ -479,10 +490,10 @@
(update state :viewer-overlays (update state :viewer-overlays
(fn [overlays] (fn [overlays]
(d/removev #(= (:id (:frame %)) frame-id) overlays))) (d/removev #(= (:id (:frame %)) frame-id) overlays)))
(assoc state :viewer-animation (assoc-in state [:viewer-animations frame-id]
{:kind :close-overlay {:kind :close-overlay
:overlay-id frame-id :overlay-id frame-id
:animation animation}))) :animation animation})))
(defn open-overlay (defn open-overlay
[frame-id position close-click-outside background-overlay animation] [frame-id position close-click-outside background-overlay animation]

16
frontend/src/app/main/data/workspace/groups.cljs
View file

@ -154,18 +154,24 @@
is-group? #(or (= :bool (:type %)) (= :group (:type %))) is-group? #(or (= :bool (:type %)) (= :group (:type %)))
lookup #(get objects %) lookup #(get objects %)
prepare #(prepare-remove-group it page-id % objects) prepare #(prepare-remove-group it page-id % objects)
selected (wsh/lookup-selected state)
children (into (d/ordered-set)
(mapcat #(->> %
lookup
:shapes) selected))
changes-list (sequence changes-list (sequence
(comp (map lookup) (comp (map lookup)
(filter is-group?) (filter is-group?)
(map prepare)) (map prepare))
(wsh/lookup-selected state)) selected)
changes {:redo-changes (vec (mapcat :redo-changes changes-list)) changes {:redo-changes (vec (mapcat :redo-changes changes-list))
:undo-changes (vec (mapcat :undo-changes changes-list)) :undo-changes (vec (mapcat :undo-changes changes-list))
:origin it}] :origin it}]
(rx/of (dch/commit-changes changes)))))) (rx/of (dch/commit-changes changes)
(dws/select-shapes children))))))
(def mask-group (def mask-group
(ptk/reify ::mask-group (ptk/reify ::mask-group

12
frontend/src/app/main/ui/shapes/group.cljs
View file

@ -42,21 +42,13 @@
(if masked-group? (if masked-group?
["g" (-> (obj/create) ["g" (-> (obj/create)
(obj/set! "mask" (mask-url render-id mask)))] (obj/set! "mask" (mask-url render-id mask)))]
[mf/Fragment nil]) [mf/Fragment nil])]
;; This factory is generic, it's used for viewer, workspace and handoff.
;; These props are generated in viewer wrappers only, in the rest of the
;; cases these props will be nil, not affecting the code.
delta (unchecked-get props "delta")
fixed? (unchecked-get props "fixed?")]
[:> clip-wrapper clip-props [:> clip-wrapper clip-props
[:> mask-wrapper mask-props [:> mask-wrapper mask-props
(when masked-group? (when masked-group?
[:> render-mask #js {:mask mask [:> render-mask #js {:mask mask
:objects objects :objects objects}])
:delta delta
:fixed? fixed?}])
(for [item childs] (for [item childs]
[:& shape-wrapper {:shape item [:& shape-wrapper {:shape item

6
frontend/src/app/main/ui/shapes/mask.cljs
View file

@ -50,13 +50,7 @@
render-id (mf/use-ctx muc/render-id) render-id (mf/use-ctx muc/render-id)
svg-text? (and (= :text (:type mask)) (some? (:position-data mask))) svg-text? (and (= :text (:type mask)) (some? (:position-data mask)))
;; This factory is generic, it's used for viewer, workspace and handoff.
;; These props are generated in viewer wrappers only, in the rest of the
;; cases these props will be nil, not affecting the code.
fixed? (unchecked-get props "fixed?")
delta (unchecked-get props "delta")
mask-bb (-> (gsh/transform-shape mask) mask-bb (-> (gsh/transform-shape mask)
(cond-> fixed? (gsh/move delta))
(:points)) (:points))
mask-bb-rect (gsh/points->rect mask-bb)] mask-bb-rect (gsh/points->rect mask-bb)]

3
frontend/src/app/main/ui/shapes/text/styles.cljs
View file

@ -21,7 +21,8 @@
:width width :width width
:fontFamily "sourcesanspro" :fontFamily "sourcesanspro"
:display "flex" :display "flex"
:whiteSpace "break-spaces"}] :whiteSpace "break-spaces"
:flex-wrap "wrap"}]
(cond-> base (cond-> base
(= valign "top") (obj/set! "alignItems" "flex-start") (= valign "top") (obj/set! "alignItems" "flex-start")
(= valign "center") (obj/set! "alignItems" "center") (= valign "center") (obj/set! "alignItems" "center")

165
frontend/src/app/main/ui/viewer.cljs
View file

@ -14,6 +14,7 @@
[app.common.geom.shapes.bounds :as gsb] [app.common.geom.shapes.bounds :as gsb]
[app.common.pages.helpers :as cph] [app.common.pages.helpers :as cph]
[app.common.text :as txt] [app.common.text :as txt]
[app.common.types.shape.interactions :as ctsi]
[app.main.data.comments :as dcm] [app.main.data.comments :as dcm]
[app.main.data.viewer :as dv] [app.main.data.viewer :as dv]
[app.main.data.viewer.shortcuts :as sc] [app.main.data.viewer.shortcuts :as sc]
@ -41,8 +42,8 @@
[okulary.core :as l] [okulary.core :as l]
[rumext.alpha :as mf])) [rumext.alpha :as mf]))
(def current-animation-ref (def current-animations-ref
(l/derived :viewer-animation st/state)) (l/derived :viewer-animations st/state))
(def current-overlays-ref (def current-overlays-ref
(l/derived :viewer-overlays st/state)) (l/derived :viewer-overlays st/state))
@ -101,7 +102,7 @@
:page page}])])) :page page}])]))
(mf/defc viewer-overlay (mf/defc viewer-overlay
[{:keys [overlay page frame zoom wrapper-size close-overlay interactions-mode]}] [{:keys [overlay page frame zoom wrapper-size interactions-mode]}]
(let [close-click-outside? (:close-click-outside overlay) (let [close-click-outside? (:close-click-outside overlay)
background-overlay? (:background-overlay overlay) background-overlay? (:background-overlay overlay)
overlay-frame (:frame overlay) overlay-frame (:frame overlay)
@ -113,10 +114,12 @@
on-click on-click
(mf/use-fn (mf/use-fn
(mf/deps overlay close-overlay close-click-outside?) (mf/deps overlay close-click-outside?)
(fn [_] (fn [_]
(when close-click-outside? (when close-click-outside?
(close-overlay (:frame overlay)))))] (if-let [animation (:animation overlay)]
(st/emit! (dv/close-overlay (:id overlay) (ctsi/invert-direction animation)))
(st/emit! (dv/close-overlay (:id overlay)))))))]
[:* [:*
(when (or close-click-outside? background-overlay?) (when (or close-click-outside? background-overlay?)
@ -147,7 +150,7 @@
(mf/defc viewer-wrapper (mf/defc viewer-wrapper
[{:keys [wrapper-size orig-frame orig-viewport-ref orig-size page file users current-viewport-ref [{:keys [wrapper-size orig-frame orig-viewport-ref orig-size page file users current-viewport-ref
size frame interactions-mode overlays zoom close-overlay section index] :as props}] size frame interactions-mode overlays zoom section index] :as props}]
[:* [:*
[:& viewer-pagination-and-sidebar [:& viewer-pagination-and-sidebar
{:section section {:section section
@ -197,10 +200,7 @@
:frame frame :frame frame
:zoom zoom :zoom zoom
:wrapper-size wrapper-size :wrapper-size wrapper-size
:close-overlay close-overlay :interactions-mode interactions-mode}])]]
:interactions-mode interactions-mode}])
]]
(when (= section :comments) (when (= section :comments)
@ -234,7 +234,7 @@
current-viewport-ref (mf/use-ref nil) current-viewport-ref (mf/use-ref nil)
viewer-section-ref (mf/use-ref nil) viewer-section-ref (mf/use-ref nil)
current-animation (mf/deref current-animation-ref) current-animations (mf/deref current-animations-ref)
page-id (or page-id (-> file :data :pages first)) page-id (or page-id (-> file :data :pages first))
@ -255,11 +255,15 @@
fullscreen? (mf/deref header/fullscreen-ref) fullscreen? (mf/deref header/fullscreen-ref)
overlays (mf/deref current-overlays-ref) overlays (mf/deref current-overlays-ref)
scroll (mf/use-state nil)
orig-frame orig-frame
(when (:orig-frame-id current-animation) (mf/with-memo [current-animations]
(d/seek #(= (:id %) (:orig-frame-id current-animation)) frames)) ;; We assume there can only be one animation with origin (this is used only in
;; navigation animations, and we cannot navigate to two different destinations
;; at the same time).
(let [animation-with-origin (d/seek :orig-frame-id (vals current-animations))]
(when animation-with-origin
(d/seek #(= (:id %) (:orig-frame-id animation-with-origin)) frames))))
size size
(mf/with-memo [frame zoom] (mf/with-memo [frame zoom]
@ -304,11 +308,6 @@
size (dom/get-client-size viewer-section)] size (dom/get-client-size viewer-section)]
(st/emit! (dv/set-viewport-size {:size size}))))) (st/emit! (dv/set-viewport-size {:size size})))))
on-scroll
(mf/use-fn
(fn [event]
(reset! scroll (dom/get-target-scroll event))))
on-wheel on-wheel
(mf/use-fn (mf/use-fn
(fn [event] (fn [event]
@ -349,12 +348,10 @@
(mf/with-effect [] (mf/with-effect []
(dom/set-html-theme-color clr/gray-50 "dark") (dom/set-html-theme-color clr/gray-50 "dark")
(let [key1 (events/listen js/window "click" on-click) (let [key1 (events/listen js/window "click" on-click)
key2 (events/listen (mf/ref-val viewer-section-ref) "scroll" on-scroll #js {"passive" true}) key2 (events/listen (mf/ref-val viewer-section-ref) "wheel" on-wheel #js {"passive" false})]
key3 (events/listen (mf/ref-val viewer-section-ref) "wheel" on-wheel #js {"passive" false})]
(fn [] (fn []
(events/unlistenByKey key1) (events/unlistenByKey key1)
(events/unlistenByKey key2) (events/unlistenByKey key2))))
(events/unlistenByKey key3))))
(mf/use-layout-effect (mf/use-layout-effect
(fn [] (fn []
@ -384,59 +381,59 @@
(wapi/exit-fullscreen)))))) (wapi/exit-fullscreen))))))
(mf/use-layout-effect (mf/use-layout-effect
(mf/deps index) (mf/deps index current-animations)
(fn [] (fn []
;; Navigate animation needs to be started after navigation ;; Navigate animation needs to be started after navigation
;; is complete, and we have the next page index. ;; is complete, and we have the next page index.
(when (and current-animation (let [nav-animation (d/seek #(= (:kind %) :go-to-frame) (vals current-animations))]
(= (:kind current-animation) :go-to-frame)) (when nav-animation
(let [orig-viewport (mf/ref-val orig-viewport-ref) (let [orig-viewport (mf/ref-val orig-viewport-ref)
current-viewport (mf/ref-val current-viewport-ref)] current-viewport (mf/ref-val current-viewport-ref)]
(interactions/animate-go-to-frame (interactions/animate-go-to-frame
(:animation current-animation) (:animation nav-animation)
current-viewport current-viewport
orig-viewport orig-viewport
size size
orig-size orig-size
wrapper-size))))) wrapper-size))))))
(mf/use-layout-effect (mf/use-layout-effect
(mf/deps current-animation) (mf/deps current-animations)
(fn [] (fn []
;; Overlay animations may be started when needed. ;; Overlay animations may be started when needed.
(when current-animation (when current-animations
(case (:kind current-animation) (doseq [[overlay-frame-id animation-vals] current-animations]
(let [overlay-viewport (dom/get-element (str "overlay-" (str (:overlay-id animation-vals))))
:open-overlay overlay (d/seek #(= (:id (:frame %)) overlay-frame-id)
(let [overlay-viewport (dom/get-element (str "overlay-" (str (:overlay-id current-animation)))) overlays)
overlay (d/seek #(= (:id (:frame %)) (:overlay-id current-animation)) overlay-size (calculate-size (:objects page) (:frame overlay) zoom)
overlays)
overlay-size (calculate-size (:objects page) (:frame overlay) zoom)
overlay-position {:x (* (:x (:position overlay)) zoom) overlay-position {:x (* (:x (:position overlay)) zoom)
:y (* (:y (:position overlay)) zoom)}] :y (* (:y (:position overlay)) zoom)}
(interactions/animate-open-overlay orig-frame (when (:orig-frame-id animation-vals)
(:animation current-animation) (d/seek #(= (:id %) (:orig-frame-id animation-vals)) frames))
overlay-viewport size (calculate-size (:objects page) frame zoom)
wrapper-size orig-size (when orig-frame
overlay-size (calculate-size (:objects page) orig-frame zoom))
overlay-position)) wrapper-size (calculate-wrapper size orig-size zoom)]
(case (:kind animation-vals)
:open-overlay
(interactions/animate-open-overlay
(:animation animation-vals)
overlay-viewport
wrapper-size
overlay-size
overlay-position)
:close-overlay :close-overlay
(let [overlay-viewport (dom/get-element (str "overlay-" (str (:overlay-id current-animation)))) (interactions/animate-close-overlay
overlay (d/seek #(= (:id (:frame %)) (:overlay-id current-animation)) (:animation animation-vals)
overlays) overlay-viewport
overlay-size (calculate-size (:objects page) (:frame overlay) zoom) wrapper-size
overlay-position {:x (* (:x (:position overlay)) zoom) overlay-size
:y (* (:y (:position overlay)) zoom)}] overlay-position
(interactions/animate-close-overlay (:id (:frame overlay)))
(:animation current-animation)
overlay-viewport
wrapper-size
overlay-size
overlay-position
(:id (:frame overlay))))
nil)))) nil))))))
(mf/use-effect (mf/use-effect
(mf/deps text-shapes) (mf/deps text-shapes)
@ -494,24 +491,24 @@
:index index :index index
:viewer-pagination viewer-pagination}] :viewer-pagination viewer-pagination}]
[:& (mf/provider ctx/current-scroll) {:value @scroll}
[:& (mf/provider ctx/current-zoom) {:value zoom} [:& (mf/provider ctx/current-zoom) {:value zoom}
[:& viewer-wrapper [:& viewer-wrapper
{:wrapper-size wrapper-size {:wrapper-size wrapper-size
:orig-frame orig-frame :orig-frame orig-frame
:orig-viewport-ref orig-viewport-ref :orig-viewport-ref orig-viewport-ref
:orig-size orig-size :orig-size orig-size
:page page :page page
:file file :file file
:users users :users users
:current-viewport-ref current-viewport-ref :current-viewport-ref current-viewport-ref
:size size :size size
:frame frame :frame frame
:interactions-mode interactions-mode :interactions-mode interactions-mode
:overlays overlays :overlays overlays
:zoom zoom :zoom zoom
:section section :section section
:index index}]]]))]]])) :index index}]]))]]]))
;; --- Component: Viewer Page ;; --- Component: Viewer Page

2
frontend/src/app/main/ui/viewer/handoff/render.cljs
View file

@ -189,7 +189,7 @@
(mf/defc render-frame-svg (mf/defc render-frame-svg
[{:keys [page frame local size]}] [{:keys [page frame local size]}]
(let [objects (mf/with-memo [page frame size] (let [objects (mf/with-memo [page frame size]
(prepare-objects page frame size)) (prepare-objects frame size (:objects page)))
;; Retrieve frame again with correct modifier ;; Retrieve frame again with correct modifier
frame (get objects (:id frame)) frame (get objects (:id frame))

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

@ -12,6 +12,7 @@
[app.common.geom.point :as gpt] [app.common.geom.point :as gpt]
[app.common.pages.helpers :as cph] [app.common.pages.helpers :as cph]
[app.common.types.page :as ctp] [app.common.types.page :as ctp]
[app.common.uuid :as uuid]
[app.main.data.comments :as dcm] [app.main.data.comments :as dcm]
[app.main.data.viewer :as dv] [app.main.data.viewer :as dv]
[app.main.refs :as refs] [app.main.refs :as refs]
@ -27,8 +28,8 @@
[rumext.alpha :as mf])) [rumext.alpha :as mf]))
(defn prepare-objects (defn prepare-objects
[page frame size] [frame size objects]
(let [objects (:objects page) (let [
frame-id (:id frame) frame-id (:id frame)
modifier (-> (gpt/point (:x size) (:y size)) modifier (-> (gpt/point (:x size) (:y size))
(gpt/negate) (gpt/negate)
@ -52,26 +53,60 @@
vbox (:vbox size) vbox (:vbox size)
objects (mf/with-memo [page frame size] fixed-ids (filter :fixed-scroll (vals (:objects page)))
(prepare-objects page frame size))
wrapper (mf/with-memo [objects] ;; we have con consider the children if the fixed element is a group
(shapes/frame-container-factory objects)) fixed-children-ids (into #{} (mapcat #(cph/get-children-ids (:objects page) (:id %)) fixed-ids))
parent-children-ids (->> fixed-ids
(mapcat #(cons (:id %) (cph/get-parent-ids (:objects page) (:id %))))
(remove #(= % uuid/zero)))
fixed-ids (concat fixed-children-ids parent-children-ids)
not-fixed-ids (->> (remove (set fixed-ids) (keys (:objects page)))
(remove #(= % uuid/zero)))
calculate-objects (fn [ids] (->> ids
(map (d/getf (:objects page)))
(concat [frame])
(d/index-by :id)
(prepare-objects frame size)))
wrapper-fixed (mf/with-memo [page frame size]
(shapes/frame-container-factory (calculate-objects fixed-ids)))
objects-not-fixed (mf/with-memo [page frame size]
(calculate-objects not-fixed-ids))
wrapper-not-fixed (mf/with-memo [objects-not-fixed]
(shapes/frame-container-factory objects-not-fixed))
;; Retrieve frames again with correct modifier ;; Retrieve frames again with correct modifier
frame (get objects (:id frame)) frame (get objects-not-fixed (:id frame))
base (get objects (:id base))] base (get objects-not-fixed (:id base))]
[:& (mf/provider shapes/base-frame-ctx) {:value base} [:& (mf/provider shapes/base-frame-ctx) {:value base}
[:& (mf/provider shapes/frame-offset-ctx) {:value offset} [:& (mf/provider shapes/frame-offset-ctx) {:value offset}
[:svg {:view-box vbox ;; We have two different svgs for fixed and not fixed elements so we can emulate the sticky css attribute in svg
:width (:width size) [:svg.not-fixed {:view-box vbox
:height (:height size) :width (:width size)
:version "1.1" :height (:height size)
:xmlnsXlink "http://www.w3.org/1999/xlink" :version "1.1"
:xmlns "http://www.w3.org/2000/svg" :xmlnsXlink "http://www.w3.org/1999/xlink"
:fill "none"} :xmlns "http://www.w3.org/2000/svg"
[:& wrapper {:shape frame :view-box vbox}]]]])) :fill "none"}
[:& wrapper-not-fixed {:shape frame :view-box vbox}]]
[:svg.fixed {:view-box vbox
:width (:width size)
:height (:height size)
:version "1.1"
:xmlnsXlink "http://www.w3.org/1999/xlink"
:xmlns "http://www.w3.org/2000/svg"
:fill "none"
:style {:width (:width size)
:height (:height size)}}
[:& wrapper-fixed {:shape (dissoc frame :fills) :view-box vbox}]]]]))
(mf/defc viewport (mf/defc viewport
{::mf/wrap [mf/memo] {::mf/wrap [mf/memo]

33
frontend/src/app/main/ui/viewer/shapes.cljs
View file

@ -7,14 +7,12 @@
(ns app.main.ui.viewer.shapes (ns app.main.ui.viewer.shapes
"The main container for a frame in viewer mode" "The main container for a frame in viewer mode"
(:require (:require
[app.common.data :as d]
[app.common.geom.shapes :as gsh] [app.common.geom.shapes :as gsh]
[app.common.pages.helpers :as cph] [app.common.pages.helpers :as cph]
[app.common.types.shape.interactions :as ctsi] [app.common.types.shape.interactions :as ctsi]
[app.main.data.viewer :as dv] [app.main.data.viewer :as dv]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.context :as ctx]
[app.main.ui.shapes.bool :as bool] [app.main.ui.shapes.bool :as bool]
[app.main.ui.shapes.circle :as circle] [app.main.ui.shapes.circle :as circle]
[app.main.ui.shapes.frame :as frame] [app.main.ui.shapes.frame :as frame]
@ -69,7 +67,11 @@
:toggle-overlay :toggle-overlay
(let [frame-id (:destination interaction) (let [frame-id (:destination interaction)
position (:overlay-position interaction) dest-frame (get objects frame-id)
position (ctsi/calc-overlay-position interaction
base-frame
dest-frame
frame-offset)
close-click-outside (:close-click-outside interaction) close-click-outside (:close-click-outside interaction)
background-overlay (:background-overlay interaction)] background-overlay (:background-overlay interaction)]
(when frame-id (when frame-id
@ -219,8 +221,6 @@
childs (unchecked-get props "childs") childs (unchecked-get props "childs")
frame (unchecked-get props "frame") frame (unchecked-get props "frame")
objects (unchecked-get props "objects") objects (unchecked-get props "objects")
fixed? (unchecked-get props "fixed?")
delta (unchecked-get props "delta")
base-frame (mf/use-ctx base-frame-ctx) base-frame (mf/use-ctx base-frame-ctx)
frame-offset (mf/use-ctx frame-offset-ctx) frame-offset (mf/use-ctx frame-offset-ctx)
@ -265,9 +265,7 @@
:frame frame :frame frame
:childs childs :childs childs
:is-child-selected? true :is-child-selected? true
:objects objects :objects objects}]
:fixed? fixed?
:delta delta}]
[:& interaction {:shape shape [:& interaction {:shape shape
:interactions interactions :interactions interactions
@ -389,20 +387,6 @@
(let [shape (unchecked-get props "shape") (let [shape (unchecked-get props "shape")
frame (unchecked-get props "frame") frame (unchecked-get props "frame")
;; TODO: this watch of scroll position is killing
;; performance of the viewer.
scroll (mf/use-ctx ctx/current-scroll)
zoom (mf/use-ctx ctx/current-zoom)
fixed? (mf/with-memo [shape objects]
(->> (cph/get-parent-ids objects (:id shape))
(map (d/getf objects))
(concat [shape])
(some :fixed-scroll)))
delta {:x (/ (:scroll-left scroll) zoom)
:y (/ (:scroll-top scroll) zoom)}
group-container group-container
(mf/with-memo [objects] (mf/with-memo [objects]
(group-container-factory objects)) (group-container-factory objects))
@ -422,8 +406,7 @@
] ]
(when (and shape (not (:hidden shape))) (when (and shape (not (:hidden shape)))
(let [shape (-> (gsh/transform-shape shape) (let [shape (-> (gsh/transform-shape shape)
(gsh/translate-to-frame frame) (gsh/translate-to-frame frame))
(cond-> fixed? (gsh/move delta)))
opts #js {:shape shape opts #js {:shape shape
:objects objects}] :objects objects}]
@ -434,6 +417,6 @@
:path [:> path-wrapper opts] :path [:> path-wrapper opts]
:image [:> image-wrapper opts] :image [:> image-wrapper opts]
:circle [:> circle-wrapper opts] :circle [:> circle-wrapper opts]
:group [:> group-container {:shape shape :frame frame :objects objects :fixed? fixed? :delta delta}] :group [:> group-container {:shape shape :frame frame :objects objects}]
:bool [:> bool-container {:shape shape :frame frame :objects objects}] :bool [:> bool-container {:shape shape :frame frame :objects objects}]
:svg-raw [:> svg-raw-container {:shape shape :frame frame :objects objects}]))))))) :svg-raw [:> svg-raw-container {:shape shape :frame frame :objects objects}])))))))