Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-13 02:28:18 -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
## 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
### :bug: Bugs fixed
@ -10,9 +19,11 @@
- 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 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)
## 1.15.2-beta
### :bug: Bugs fixed

2
backend/deps.edn
View file

@ -50,7 +50,7 @@
;; Pretty Print specs
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"]
:aliases

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

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

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

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

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

@ -379,17 +379,20 @@
(defmethod ig/init-key ::routes
[_ {:keys [session pool executor] :as cfg}]
["/dbg" {:middleware [[(:middleware session)]
[with-authorization pool]
[mw/with-promise-async executor]
[mw/with-config cfg]]}
["" {:handler index-handler}]
["/health" {:handler health-handler}]
["/changelog" {:handler changelog-handler}]
;; ["/error-by-id/:id" {:handler error-handler}]
["/error/:id" {:handler error-handler}]
["/error" {:handler error-list-handler}]
["/file/export" {:handler export-handler}]
["/file/import" {:handler import-handler}]
["/file/data" {:handler file-data-handler}]
["/file/changes" {:handler file-changes-handler}]])
[["/readyz" {:middleware [[mw/with-dispatch executor]
[mw/with-config cfg]]
:handler health-handler}]
["/dbg" {:middleware [[(:middleware session)]
[with-authorization pool]
[mw/with-dispatch executor]
[mw/with-config cfg]]}
["" {:handler index-handler}]
["/health" {:handler health-handler}]
["/changelog" {:handler changelog-handler}]
;; ["/error-by-id/:id" {:handler error-handler}]
["/error/:id" {:handler error-handler}]
["/error" {:handler error-list-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
:compile compile-restrict-methods})
(def with-promise-async
{:compile
(def with-dispatch
{:name ::with-dispatch
:compile
(fn [& _]
(fn [handler executor]
(fn [request respond raise]
@ -206,7 +207,8 @@
(p/catch raise)))))})
(def with-config
{:compile
{:name ::with-config
:compile
(fn [& _]
(fn [handler config]
(fn

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

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

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

@ -124,6 +124,16 @@
(let [token (.get ^js cookies cookie-name)]
(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
[handler]
(fn [req res]
@ -149,6 +159,7 @@
(defn init
[]
(let [handler (-> handlers/handler
(wrap-health)
(wrap-auth "auth-token")
(wrap-response-format)
(wrap-params)

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

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

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

@ -171,6 +171,20 @@
}
.viewport-container {
clip-path: inset(0 0 0 0);
grid-column: 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
(ptk/reify ::select-prev-frame
ptk/UpdateEvent
(update [_ state]
(-> state
(dissoc :viewer-animations)
(assoc :viewer-overlays [])))
ptk/WatchEvent
(watch [_ state _]
(let [route (:route state)
@ -287,6 +292,11 @@
(def select-next-frame
(ptk/reify ::select-next-frame
ptk/UpdateEvent
(update [_ state]
(-> state
(dissoc :viewer-animations)
(assoc :viewer-overlays [])))
ptk/WatchEvent
(watch [_ state _]
(let [route (:route state)
@ -371,7 +381,7 @@
(ptk/reify ::complete-animation
ptk/UpdateEvent
(update [_ state]
(dissoc state :viewer-animation))))
(dissoc state :viewer-animations))))
;; --- Navigation inside page
@ -412,7 +422,7 @@
(assoc :viewer-overlays [])
(some? animation)
(assoc :viewer-animation
(assoc-in [:viewer-animations (:id frame)]
{:kind :go-to-frame
:orig-frame-id (:id frame)
:animation animation}))))
@ -465,13 +475,14 @@
:id (:id frame)
:position position
:close-click-outside close-click-outside
:background-overlay background-overlay})
:background-overlay background-overlay
:animation animation})
(some? animation)
(assoc :viewer-animation
{:kind :open-overlay
:overlay-id (:id frame)
:animation animation})))
(assoc-in [:viewer-animations (:id frame)]
{:kind :open-overlay
:overlay-id (:id frame)
:animation animation})))
(defn- close-overlay*
[state frame-id animation]
@ -479,10 +490,10 @@
(update state :viewer-overlays
(fn [overlays]
(d/removev #(= (:id (:frame %)) frame-id) overlays)))
(assoc state :viewer-animation
{:kind :close-overlay
:overlay-id frame-id
:animation animation})))
(assoc-in state [:viewer-animations frame-id]
{:kind :close-overlay
:overlay-id frame-id
:animation animation})))
(defn open-overlay
[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 %)))
lookup #(get 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
(comp (map lookup)
(filter is-group?)
(map prepare))
(wsh/lookup-selected state))
(comp (map lookup)
(filter is-group?)
(map prepare))
selected)
changes {:redo-changes (vec (mapcat :redo-changes changes-list))
:undo-changes (vec (mapcat :undo-changes changes-list))
:origin it}]
(rx/of (dch/commit-changes changes))))))
(rx/of (dch/commit-changes changes)
(dws/select-shapes children))))))
(def mask-group
(ptk/reify ::mask-group

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

@ -42,21 +42,13 @@
(if masked-group?
["g" (-> (obj/create)
(obj/set! "mask" (mask-url render-id mask)))]
[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?")]
[mf/Fragment nil])]
[:> clip-wrapper clip-props
[:> mask-wrapper mask-props
(when masked-group?
[:> render-mask #js {:mask mask
:objects objects
:delta delta
:fixed? fixed?}])
:objects objects}])
(for [item childs]
[:& 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)
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)
(cond-> fixed? (gsh/move delta))
(:points))
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
:fontFamily "sourcesanspro"
:display "flex"
:whiteSpace "break-spaces"}]
:whiteSpace "break-spaces"
:flex-wrap "wrap"}]
(cond-> base
(= valign "top") (obj/set! "alignItems" "flex-start")
(= 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.pages.helpers :as cph]
[app.common.text :as txt]
[app.common.types.shape.interactions :as ctsi]
[app.main.data.comments :as dcm]
[app.main.data.viewer :as dv]
[app.main.data.viewer.shortcuts :as sc]
@ -41,8 +42,8 @@
[okulary.core :as l]
[rumext.alpha :as mf]))
(def current-animation-ref
(l/derived :viewer-animation st/state))
(def current-animations-ref
(l/derived :viewer-animations st/state))
(def current-overlays-ref
(l/derived :viewer-overlays st/state))
@ -101,7 +102,7 @@
:page page}])]))
(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)
background-overlay? (:background-overlay overlay)
overlay-frame (:frame overlay)
@ -113,10 +114,12 @@
on-click
(mf/use-fn
(mf/deps overlay close-overlay close-click-outside?)
(mf/deps overlay close-click-outside?)
(fn [_]
(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?)
@ -147,7 +150,7 @@
(mf/defc viewer-wrapper
[{: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
{:section section
@ -197,10 +200,7 @@
:frame frame
:zoom zoom
:wrapper-size wrapper-size
:close-overlay close-overlay
:interactions-mode interactions-mode}])
]]
:interactions-mode interactions-mode}])]]
(when (= section :comments)
@ -234,7 +234,7 @@
current-viewport-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))
@ -255,11 +255,15 @@
fullscreen? (mf/deref header/fullscreen-ref)
overlays (mf/deref current-overlays-ref)
scroll (mf/use-state nil)
orig-frame
(when (:orig-frame-id current-animation)
(d/seek #(= (:id %) (:orig-frame-id current-animation)) frames))
(mf/with-memo [current-animations]
;; 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
(mf/with-memo [frame zoom]
@ -304,11 +308,6 @@
size (dom/get-client-size viewer-section)]
(st/emit! (dv/set-viewport-size {:size size})))))
on-scroll
(mf/use-fn
(fn [event]
(reset! scroll (dom/get-target-scroll event))))
on-wheel
(mf/use-fn
(fn [event]
@ -349,12 +348,10 @@
(mf/with-effect []
(dom/set-html-theme-color clr/gray-50 "dark")
(let [key1 (events/listen js/window "click" on-click)
key2 (events/listen (mf/ref-val viewer-section-ref) "scroll" on-scroll #js {"passive" true})
key3 (events/listen (mf/ref-val viewer-section-ref) "wheel" on-wheel #js {"passive" false})]
key2 (events/listen (mf/ref-val viewer-section-ref) "wheel" on-wheel #js {"passive" false})]
(fn []
(events/unlistenByKey key1)
(events/unlistenByKey key2)
(events/unlistenByKey key3))))
(events/unlistenByKey key2))))
(mf/use-layout-effect
(fn []
@ -384,59 +381,59 @@
(wapi/exit-fullscreen))))))
(mf/use-layout-effect
(mf/deps index)
(mf/deps index current-animations)
(fn []
;; Navigate animation needs to be started after navigation
;; is complete, and we have the next page index.
(when (and current-animation
(= (:kind current-animation) :go-to-frame))
(let [orig-viewport (mf/ref-val orig-viewport-ref)
current-viewport (mf/ref-val current-viewport-ref)]
(interactions/animate-go-to-frame
(:animation current-animation)
current-viewport
orig-viewport
size
orig-size
wrapper-size)))))
(let [nav-animation (d/seek #(= (:kind %) :go-to-frame) (vals current-animations))]
(when nav-animation
(let [orig-viewport (mf/ref-val orig-viewport-ref)
current-viewport (mf/ref-val current-viewport-ref)]
(interactions/animate-go-to-frame
(:animation nav-animation)
current-viewport
orig-viewport
size
orig-size
wrapper-size))))))
(mf/use-layout-effect
(mf/deps current-animation)
(mf/deps current-animations)
(fn []
;; Overlay animations may be started when needed.
(when current-animation
(case (:kind current-animation)
:open-overlay
(let [overlay-viewport (dom/get-element (str "overlay-" (str (:overlay-id current-animation))))
overlay (d/seek #(= (:id (:frame %)) (:overlay-id current-animation))
overlays)
overlay-size (calculate-size (:objects page) (:frame overlay) zoom)
(when current-animations
(doseq [[overlay-frame-id animation-vals] current-animations]
(let [overlay-viewport (dom/get-element (str "overlay-" (str (:overlay-id animation-vals))))
overlay (d/seek #(= (:id (:frame %)) overlay-frame-id)
overlays)
overlay-size (calculate-size (:objects page) (:frame overlay) zoom)
overlay-position {:x (* (:x (:position overlay)) zoom)
:y (* (:y (:position overlay)) zoom)}]
(interactions/animate-open-overlay
(:animation current-animation)
overlay-viewport
wrapper-size
overlay-size
overlay-position))
:y (* (:y (:position overlay)) zoom)}
orig-frame (when (:orig-frame-id animation-vals)
(d/seek #(= (:id %) (:orig-frame-id animation-vals)) frames))
size (calculate-size (:objects page) frame zoom)
orig-size (when orig-frame
(calculate-size (:objects page) orig-frame zoom))
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
(let [overlay-viewport (dom/get-element (str "overlay-" (str (:overlay-id current-animation))))
overlay (d/seek #(= (:id (:frame %)) (:overlay-id current-animation))
overlays)
overlay-size (calculate-size (:objects page) (:frame overlay) zoom)
overlay-position {:x (* (:x (:position overlay)) zoom)
:y (* (:y (:position overlay)) zoom)}]
(interactions/animate-close-overlay
(:animation current-animation)
overlay-viewport
wrapper-size
overlay-size
overlay-position
(:id (:frame overlay))))
:close-overlay
(interactions/animate-close-overlay
(:animation animation-vals)
overlay-viewport
wrapper-size
overlay-size
overlay-position
(:id (:frame overlay)))
nil))))
nil))))))
(mf/use-effect
(mf/deps text-shapes)
@ -494,24 +491,24 @@
:index index
:viewer-pagination viewer-pagination}]
[:& (mf/provider ctx/current-scroll) {:value @scroll}
[:& (mf/provider ctx/current-zoom) {:value zoom}
[:& viewer-wrapper
{:wrapper-size wrapper-size
:orig-frame orig-frame
:orig-viewport-ref orig-viewport-ref
:orig-size orig-size
:page page
:file file
:users users
:current-viewport-ref current-viewport-ref
:size size
:frame frame
:interactions-mode interactions-mode
:overlays overlays
:zoom zoom
:section section
:index index}]]]))]]]))
[:& (mf/provider ctx/current-zoom) {:value zoom}
[:& viewer-wrapper
{:wrapper-size wrapper-size
:orig-frame orig-frame
:orig-viewport-ref orig-viewport-ref
:orig-size orig-size
:page page
:file file
:users users
:current-viewport-ref current-viewport-ref
:size size
:frame frame
:interactions-mode interactions-mode
:overlays overlays
:zoom zoom
:section section
:index index}]]))]]]))
;; --- Component: Viewer Page

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

@ -189,7 +189,7 @@
(mf/defc render-frame-svg
[{:keys [page frame local 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
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.pages.helpers :as cph]
[app.common.types.page :as ctp]
[app.common.uuid :as uuid]
[app.main.data.comments :as dcm]
[app.main.data.viewer :as dv]
[app.main.refs :as refs]
@ -27,8 +28,8 @@
[rumext.alpha :as mf]))
(defn prepare-objects
[page frame size]
(let [objects (:objects page)
[frame size objects]
(let [
frame-id (:id frame)
modifier (-> (gpt/point (:x size) (:y size))
(gpt/negate)
@ -52,26 +53,60 @@
vbox (:vbox size)
objects (mf/with-memo [page frame size]
(prepare-objects page frame size))
fixed-ids (filter :fixed-scroll (vals (:objects page)))
wrapper (mf/with-memo [objects]
(shapes/frame-container-factory objects))
;; we have con consider the children if the fixed element is a group
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
frame (get objects (:id frame))
base (get objects (:id base))]
frame (get objects-not-fixed (:id frame))
base (get objects-not-fixed (:id base))]
[:& (mf/provider shapes/base-frame-ctx) {:value base}
[:& (mf/provider shapes/frame-offset-ctx) {:value offset}
[:svg {: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"}
[:& wrapper {:shape frame :view-box vbox}]]]]))
;; We have two different svgs for fixed and not fixed elements so we can emulate the sticky css attribute in svg
[:svg.not-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"}
[:& 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/wrap [mf/memo]

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

@ -7,14 +7,12 @@
(ns app.main.ui.viewer.shapes
"The main container for a frame in viewer mode"
(:require
[app.common.data :as d]
[app.common.geom.shapes :as gsh]
[app.common.pages.helpers :as cph]
[app.common.types.shape.interactions :as ctsi]
[app.main.data.viewer :as dv]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.context :as ctx]
[app.main.ui.shapes.bool :as bool]
[app.main.ui.shapes.circle :as circle]
[app.main.ui.shapes.frame :as frame]
@ -69,7 +67,11 @@
:toggle-overlay
(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)
background-overlay (:background-overlay interaction)]
(when frame-id
@ -219,8 +221,6 @@
childs (unchecked-get props "childs")
frame (unchecked-get props "frame")
objects (unchecked-get props "objects")
fixed? (unchecked-get props "fixed?")
delta (unchecked-get props "delta")
base-frame (mf/use-ctx base-frame-ctx)
frame-offset (mf/use-ctx frame-offset-ctx)
@ -265,9 +265,7 @@
:frame frame
:childs childs
:is-child-selected? true
:objects objects
:fixed? fixed?
:delta delta}]
:objects objects}]
[:& interaction {:shape shape
:interactions interactions
@ -389,20 +387,6 @@
(let [shape (unchecked-get props "shape")
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
(mf/with-memo [objects]
(group-container-factory objects))
@ -422,8 +406,7 @@
]
(when (and shape (not (:hidden shape)))
(let [shape (-> (gsh/transform-shape shape)
(gsh/translate-to-frame frame)
(cond-> fixed? (gsh/move delta)))
(gsh/translate-to-frame frame))
opts #js {:shape shape
:objects objects}]
@ -434,6 +417,6 @@
:path [:> path-wrapper opts]
:image [:> image-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}]
:svg-raw [:> svg-raw-container {:shape shape :frame frame :objects objects}])))))))