3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-06 10:21:21 +02:00
Code Issues Projects Releases Packages Wiki Activity

Merge branch 'staging' into develop

Browse source
This commit is contained in:
Andrey Antukh 2022-09-14 09:16:00 +02:00
commit 4af851d4c6
15 changed files with 230 additions and 195 deletions
Download patch file Download diff file Expand all files Collapse all files

12
CHANGES.md
View file

@ -38,6 +38,15 @@
- To @andrewzhurov for many code contributions on this release. - To @andrewzhurov for many code contributions on this release.
## 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
@ -47,6 +56,9 @@
- Fix problem when hovering over nested frames [Taiga #4018](https://tree.taiga.io/project/penpot/issue/4018) - Fix problem when hovering over nested frames [Taiga #4018](https://tree.taiga.io/project/penpot/issue/4018)
- 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 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)
## 1.15.2-beta ## 1.15.2-beta

9
common/src/app/common/pages/changes_builder.cljc
View file

@ -255,13 +255,20 @@
mk-undo-change mk-undo-change
(fn [change-set shape] (fn [change-set shape]
(let [idx (or (cph/get-position-on-parent objects (:id shape)) 0)
;; Different index if the movement was from top to bottom or the other way
;; Similar that on frontend/src/app/main/ui/workspace/sidebar/layers.cljs
;; with the 'side' property of the on-drop
idx (if (< index idx)
(inc idx)
idx)]
(d/preconj (d/preconj
change-set change-set
{:type :mov-objects {:type :mov-objects
:page-id (::page-id (meta changes)) :page-id (::page-id (meta changes))
:parent-id (:parent-id shape) :parent-id (:parent-id shape)
:shapes [(:id shape)] :shapes [(:id shape)]
:index (cph/get-position-on-parent objects (:id shape))}))] :index idx})))]
(-> changes (-> changes
(update :redo-changes conj set-parent-change) (update :redo-changes conj set-parent-change)

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

@ -187,6 +187,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

@ -304,6 +304,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)
@ -317,6 +322,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)
@ -400,7 +410,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
@ -441,7 +451,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}))))
@ -494,13 +504,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]
@ -508,10 +519,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]

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

@ -161,28 +161,29 @@
(ptk/reify ::ungroup-selected (ptk/reify ::ungroup-selected
ptk/WatchEvent ptk/WatchEvent
(watch [it state _] (watch [it state _]
(let [page-id (:current-page-id state) (let [page-id (:current-page-id state)
objects (wsh/lookup-page-objects state page-id) objects (wsh/lookup-page-objects state page-id)
is-group? #(or (= :bool (:type %)) (= :group (:type %)))
prepare lookup #(get objects %)
(fn [shape-id] prepare #(prepare-remove-group it page-id % objects)
(let [shape (get objects shape-id)] selected (wsh/lookup-selected state)
(cond children (into (d/ordered-set)
(or (cph/group-shape? shape) (cph/bool-shape? shape)) (mapcat #(->> %
(remove-group-changes it page-id shape objects) lookup
:shapes) selected))
(cph/frame-shape? shape)
(remove-frame-changes it page-id shape objects))))
changes-list (sequence changes-list (sequence
(keep prepare) (comp (map lookup)
(wsh/lookup-selected state)) (filter is-group?)
(map prepare))
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/data/workspace/libraries.cljs
View file

@ -92,6 +92,15 @@
(update [_ state] (update [_ state]
(assoc-in state [:workspace-global :assets-files-open file-id :groups box path] open?)))) (assoc-in state [:workspace-global :assets-files-open file-id :groups box path] open?))))
(defn extract-path-if-missing
[item]
(let [[path name] (cph/parse-path-name (:name item))]
(if (and
(= (:name item) name)
(contains? item :path))
item
(assoc item :path path :name name))))
(defn default-color-name [color] (defn default-color-name [color]
(or (:color color) (or (:color color)
(case (get-in color [:gradient :type]) (case (get-in color [:gradient :type])
@ -240,8 +249,7 @@
(defn- do-update-tipography (defn- do-update-tipography
[it state typography file-id] [it state typography file-id]
(let [data (get state :workspace-data) (let [data (get state :workspace-data)
[path name] (cph/parse-path-name (:name typography)) typography (extract-path-if-missing typography)
typography (assoc typography :path path :name name)
changes (-> (pcb/empty-changes it) changes (-> (pcb/empty-changes it)
(pcb/with-library-data data) (pcb/with-library-data data)
(pcb/update-typography typography))] (pcb/update-typography typography))]

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))
@ -257,11 +257,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]
@ -306,11 +310,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]
@ -350,12 +349,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 []
@ -393,7 +390,7 @@
nil))) nil)))
(mf/use-layout-effect (mf/use-layout-effect
(mf/deps index) (mf/deps index current-animations)
(fn [] (fn []
(case zoom-type (case zoom-type
:fit (st/emit! dv/zoom-to-fit) :fit (st/emit! dv/zoom-to-fit)
@ -401,55 +398,55 @@
nil) nil)
;; 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)
@ -507,24 +504,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}])))))))

24
frontend/src/app/main/ui/workspace/sidebar/assets.cljs
View file

@ -908,18 +908,8 @@
multi-assets? (or (seq (:components selected-assets)) multi-assets? (or (seq (:components selected-assets))
(seq (:colors selected-assets)) (seq (:colors selected-assets))
(seq (:typographies selected-assets))) (seq (:typographies selected-assets)))
extract-path-if-missing
(fn [graphic]
(let [[path name] (cph/parse-path-name (:name graphic))]
(if (and
(= (:name graphic) name)
(contains? graphic :path))
graphic
(assoc graphic :path path :name name))))
objects (->> objects objects (->> objects
(map extract-path-if-missing)) (map dwl/extract-path-if-missing))
groups (group-assets objects reverse-sort?) groups (group-assets objects reverse-sort?)
@ -1650,18 +1640,8 @@
local-data (mf/deref typography-data) local-data (mf/deref typography-data)
menu-state (mf/use-state auto-pos-menu-state) menu-state (mf/use-state auto-pos-menu-state)
extract-path-if-missing
(fn [typography]
(let [[path name] (cph/parse-path-name (:name typography))]
(if (and
(= (:name typography) name)
(contains? typography :path))
typography
(assoc typography :path path :name name))))
typographies (->> typographies typographies (->> typographies
(map extract-path-if-missing)) (map dwl/extract-path-if-missing))
groups (group-assets typographies reverse-sort?) groups (group-assets typographies reverse-sort?)