Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-11 06:21:30 -05:00
Code Issues Activity

Merge remote-tracking branch 'origin/staging' into develop

Browse source
This commit is contained in:
Andrey Antukh 2022-08-25 14:51:58 +02:00
commit a055a31286
46 changed files with 756 additions and 620 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
CHANGES.md
View file

@ -52,6 +52,7 @@
### :sparkles: New features
- Add some cosmetic changes in viewer mode [Taiga #3688](https://tree.taiga.io/project/penpot/us/3688)
- Allow for nested and rotated boards inside other boards and groups [Taiga #2874](https://tree.taiga.io/project/penpot/us/2874?milestone=319982)
- View mode improvements to enable access and use in different conditions [Taiga #3023](https://tree.taiga.io/project/penpot/us/3023)
- Improved share link options. Now you can allow non-team members to comment and/or inspect [Taiga #3056] (https://tree.taiga.io/project/penpot/us/3056)
@ -63,7 +64,10 @@
### :bug: Bugs fixed
- Fix font rendering on grid thumbnails [Taiga #3473](https://tree.taiga.io/project/penpot/issue/3473)
- Fix viewer scroll problems [Taiga 3403](https://tree.taiga.io/project/penpot/issue/3403)
- Fix hide html options on handoff [Taiga 3533](https://tree.taiga.io/project/penpot/issue/3533)
- Fix share prototypes overlay and stroke [Taiga #3994](https://tree.taiga.io/project/penpot/issue/3994)
- Fix border radious on boolean operations [Taiga #3959](https://tree.taiga.io/project/penpot/issue/3959)
- Fix inconsistent representation of rectangles [Taiga #3977](https://tree.taiga.io/project/penpot/issue/3977)
- Fix recent fonts info [Taiga #3953](https://tree.taiga.io/project/penpot/issue/3953)
- Fix clipped elements affect boards and centering [Taiga #3666](https://tree.taiga.io/project/penpot/issue/3666)
@ -80,6 +84,8 @@
- Fix props preserving on copy&paste texts [Taiga #3629](https://tree.taiga.io/project/penpot/issue/3629) by @andrewzhurov
- Fix unexpected layers ungrouping on moving it [Taiga #3932](https://tree.taiga.io/project/penpot/issue/3932) by @andrewzhurov
- Fix unexpected exception and behavior on colorpicker with gradients [Taiga #3448](https://tree.taiga.io/project/penpot/issue/3448)
- Fix multiselection with shift not working inside a library group [Taiga #3532](https://tree.taiga.io/project/penpot/issue/3532)
- Fix drag and drop graphic assets in groups [Taiga #4002](https://tree.taiga.io/project/penpot/issue/4002)
### :arrow_up: Deps updates
### :heart: Community contributions by (Thank you!)
@ -91,6 +97,8 @@
- Fix colors from unlinked libs in color selected widget [Taiga #3712](https://tree.taiga.io/project/penpot/issue/3712)
- Fix fill information not complete when paste plain text [Taiga #3680](https://tree.taiga.io/project/penpot/issue/3680)
- Fix problem when resizing groups [Taiga #3702](https://tree.taiga.io/project/penpot/issue/3702)
- Fix issues on typographies assets grouping [#2073](https://github.com/penpot/penpot/issues/2073)
- Fix text positioning inconsistencies between browsers
## 1.14.1-beta

6
backend/src/app/metrics.clj
View file

@ -52,6 +52,12 @@
:labels ["name"]
:type :histogram}
:rpc-command-timing
{:name "rpc_command_timing"
:help "RPC command method call timming."
:labels ["name"]
:type :histogram}
:rpc-query-timing
{:name "rpc_query_timing"
:help "RPC query method call timing."

1
backend/src/app/rpc.clj
View file

@ -204,7 +204,6 @@
(defn- process-method
[cfg vfn]
(let [mdata (meta vfn)]
;; (prn mdata)
[(keyword (::sv/name mdata))
(wrap cfg vfn mdata)]))

7
backend/src/app/rpc/commands/binfile.clj
View file

@ -728,11 +728,16 @@
[data]
(letfn [(process-map-form [form]
(cond-> form
;; Relink Image Shapes
;; Relink image shapes
(and (map? (:metadata form))
(= :image (:type form)))
(update-in [:metadata :id] lookup-index)
;; Relink paths with fill image
(and (map? (:fill-image form))
(= :path (:type form)))
(update-in [:fill-image :id] lookup-index)
;; This covers old shapes and the new :fills.
(uuid? (:fill-color-ref-file form))
(update :fill-color-ref-file lookup-index)

18
backend/src/app/rpc/commands/comments.clj
View file

@ -496,16 +496,15 @@
;; --- COMMAND: Update comment thread position
(s/def ::update-comment-thread-position
(s/keys :req-un [::profile-id ::id ::position ::frame-id]))
(s/keys :req-un [::profile-id ::id ::position ::frame-id]
:opt-un [::share-id]))
(sv/defmethod ::update-comment-thread-position
{::doc/added "1.15"}
[{:keys [pool] :as cfg} {:keys [profile-id id position frame-id] :as params}]
[{:keys [pool] :as cfg} {:keys [profile-id id position frame-id share-id] :as params}]
(db/with-atomic [conn pool]
(let [thread (db/get-by-id conn :comment-thread id {:for-update true})]
(when-not (= (:owner-id thread) profile-id)
(ex/raise :type :validation
:code :not-allowed))
(files/check-comment-permissions! conn profile-id (:file-id thread) share-id)
(db/update! conn :comment-thread
{:modified-at (dt/now)
:position (db/pgpoint position)
@ -516,16 +515,15 @@
;; --- COMMAND: Update comment frame
(s/def ::update-comment-thread-frame
(s/keys :req-un [::profile-id ::id ::frame-id]))
(s/keys :req-un [::profile-id ::id ::frame-id]
:opt-un [::share-id]))
(sv/defmethod ::update-comment-thread-frame
{::doc/added "1.15"}
[{:keys [pool] :as cfg} {:keys [profile-id id frame-id] :as params}]
[{:keys [pool] :as cfg} {:keys [profile-id id frame-id share-id] :as params}]
(db/with-atomic [conn pool]
(let [thread (db/get-by-id conn :comment-thread id {:for-update true})]
(when-not (= (:owner-id thread) profile-id)
(ex/raise :type :validation
:code :not-allowed))
(files/check-comment-permissions! conn profile-id (:file-id thread) share-id)
(db/update! conn :comment-thread
{:modified-at (dt/now)
:frame-id frame-id}

7
backend/test/app/services_media_test.clj
View file

@ -46,14 +46,11 @@
(t/is (sto/storage-object? mobj1))
(t/is (sto/storage-object? mobj2))
(t/is (= 122785 (:size mobj1)))
;; This is because in ubuntu 21.04 generates different
;; thumbnail that in ubuntu 22.04. This hack should be removed
;; when we all use the ubuntu 22.04 devenv image.
(t/is (or
(= 3302 (:size mobj2))
(= 3303 (:size mobj2))))))
))
(t/is (or (= 3302 (:size mobj2))
(= 3303 (:size mobj2))))))))
(t/deftest media-object-upload
(let [prof (th/create-profile* 1)

5
common/src/app/common/pages/focus.cljc
View file

@ -41,6 +41,5 @@
(defn is-in-focus?
[objects focus id]
(d/seek
#(contains? focus %)
(cph/get-parents-seq objects id)))
(d/seek (partial contains? focus)
(cons id (cph/get-parent-ids objects id))))

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

@ -79,16 +79,6 @@
[objects id]
(-> objects (get id) :parent-id))
(defn get-parents-seq
[objects shape-id]
(cond
(nil? shape-id)
nil
:else
(lazy-seq (cons shape-id (get-parents-seq objects (get-in objects [shape-id :parent-id]))))))
(defn get-parent-ids
"Returns a vector of parents of the specified shape."
[objects shape-id]
@ -430,7 +420,7 @@
(defn is-child?
[objects parent-id candidate-child-id]
(let [parents (get-parents-seq objects candidate-child-id)]
(let [parents (get-parent-ids objects candidate-child-id)]
(some? (d/seek #(= % parent-id) parents))))
(defn reduce-objects
@ -470,10 +460,9 @@
(defn get-shape-id-root-frame
[objects shape-id]
(->> (get-parents-seq objects shape-id)
(->> (get-parent-ids objects shape-id)
(cons shape-id)
(map (d/getf objects))
(d/seek #(and (= :frame (:type %))
(= uuid/zero (:frame-id %))))
(d/seek root-frame?)
:id))

4
common/src/app/common/types/shape_tree.cljc
View file

@ -132,8 +132,8 @@
(defn get-base
[objects id-a id-b]
(let [parents-a (reverse (cph/get-parents-seq objects id-a))
parents-b (reverse (cph/get-parents-seq objects id-b))
(let [parents-a (reverse (cons id-a (cph/get-parent-ids objects id-a)))
parents-b (reverse (cons id-b (cph/get-parent-ids objects id-b)))
[base base-child-a base-child-b]
(loop [parents-a (rest parents-a)

2
docker/devenv/Dockerfile
View file

@ -3,7 +3,7 @@ LABEL maintainer="Andrey Antukh <niwi@niwi.nz>"
ARG DEBIAN_FRONTEND=noninteractive
ENV NODE_VERSION=v16.16.0 \
ENV NODE_VERSION=v16.17.0 \
CLOJURE_VERSION=1.11.1.1149 \
CLJKONDO_VERSION=2022.06.22 \
BABASHKA_VERSION=0.8.156 \

2
docker/images/Dockerfile.exporter
View file

@ -5,7 +5,7 @@ ARG DEBIAN_FRONTEND=noninteractive
ENV LANG=en_US.UTF-8 \
LC_ALL=en_US.UTF-8 \
NODE_VERSION=v16.15.1
NODE_VERSION=v16.17.0
RUN set -ex; \
mkdir -p /etc/resolvconf/resolv.conf.d; \

11
docker/images/files/config.js
View file

@ -1,13 +1,2 @@
// Frontend configuration
//var penpotPublicURI = "https://penpot.example.com";
//var penpotDemoWarning = <true|false>;
//var penpotAllowDemoUsers = <true|false>;
//var penpotGoogleClientID = "<google-client-id-here>";
//var penpotGitlabClientID = "<gitlab-client-id-here>";
//var penpotGithubClientID = "<github-client-id-here>";
//var penpotOIDCClientID = "<oidc-client-id-here>";
//var penpotLoginWithLDAP = <true|false>;
//var penpotRegistrationEnabled = <true|false>;
//var penpotAnalyticsEnabled = <true|false>;
//var penpotFlags = "";

17
frontend/resources/styles/main/partials/handoff.scss
View file

@ -330,26 +330,13 @@
}
.code-row-lang {
color: $color-gray-10;
position: relative;
display: flex;
flex-direction: row;
font-size: $fs14;
margin: 0.5rem;
.code-selection {
height: 100%;
margin: 0;
padding: 0.5rem;
width: 4.5rem;
font-size: $fs12;
background: $color-gray-50;
color: $color-gray-10;
border-radius: 2px;
border: 1px solid $color-gray-30;
background-image: url("/images/icons/arrow-down-white.svg");
background-repeat: no-repeat;
background-position: 90% 48%;
background-size: 8px;
}
.expand-button,
.copy-button {
margin-top: 8px;

2
frontend/resources/styles/main/partials/share-link.scss
View file

@ -1,4 +1,5 @@
.share-modal {
background: none;
display: block;
top: 50px;
left: calc(100vw - 500px);
@ -7,6 +8,7 @@
width: 480px;
background-color: $color-white;
box-shadow: 0px 2px 8px 0px rgb(0 0 0 / 20%);
.modal-content {
padding: 16px 32px;
&:first-child {

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

@ -30,7 +30,6 @@
grid-row: 1 / span 2;
grid-column: 1 / span 1;
display: flex;
justify-content: center;
align-items: center;
flex-flow: wrap;
overflow: auto;
@ -72,8 +71,8 @@
}
& .viewer-go-next {
right: 0;
padding-right: 29px;
right: 8px;
width: 46px;
svg {
margin-left: 2px;
}
@ -97,12 +96,13 @@
& .viewer-bottom {
position: absolute;
bottom: 0;
height: 50px;
bottom: 8px;
height: 30px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 2;
&.left-bar {
width: calc(100% - 512px);
@ -144,6 +144,8 @@
}
& .viewer-wrapper {
margin-left: auto;
margin-right: auto;
position: relative;
}
@ -180,6 +182,7 @@
top: 50px;
width: 256px;
height: 100%;
z-index: 10;
}
}

7
frontend/src/app/main/data/comments.cljs
View file

@ -342,6 +342,13 @@
(some? list)
(assoc :list list)))))))
(defn update-options
[params]
(ptk/reify ::update-options
ptk/UpdateEvent
(update [_ state]
(update state :comments-local merge params))))
(s/def ::create-draft-params
(s/keys :req-un [::page-id ::file-id ::position]))

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

@ -7,6 +7,7 @@
(ns app.main.data.viewer
(:require
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.common.geom.point :as gpt]
[app.common.pages.helpers :as cph]
[app.common.spec :as us]
@ -22,6 +23,9 @@
[cljs.spec.alpha :as s]
[potok.core :as ptk]))
(s/def ::nilable-boolean (s/nilable ::us/boolean))
(s/def ::nilable-animation (s/nilable ::ctsi/animation))
;; --- Local State Initialization
(def ^:private
@ -34,7 +38,6 @@
:comments-show :unresolved
:selected #{}
:collapsed #{}
:overlays []
:hover nil
:share-id ""
:file-comments-users []})
@ -351,7 +354,8 @@
(declare flash-done)
(def flash-interactions
(defn flash-interactions
[]
(ptk/reify ::flash-interactions
ptk/UpdateEvent
(update [_ state]
@ -389,7 +393,7 @@
(ptk/reify ::complete-animation
ptk/UpdateEvent
(update [_ state]
(d/dissoc-in state [:viewer-local :current-animation]))))
(dissoc state :viewer-animation))))
;; --- Navigation inside page
@ -398,7 +402,7 @@
(ptk/reify ::go-to-frame-by-index
ptk/UpdateEvent
(update [_ state]
(assoc-in state [:viewer-local :overlays] []))
(assoc state :viewer-overlays []))
ptk/WatchEvent
(watch [_ state _]
@ -413,8 +417,9 @@
(go-to-frame frame-id nil))
([frame-id animation]
(us/verify ::us/uuid frame-id)
(us/verify (s/nilable ::ctsi/animation) animation)
(us/assert! ::us/uuid frame-id)
(us/assert! ::nilable-animation animation)
(ptk/reify ::go-to-frame
ptk/UpdateEvent
(update [_ state]
@ -426,13 +431,13 @@
frame (get frames index)]
(cond-> state
:always
(assoc-in [:viewer-local :overlays] [])
(assoc :viewer-overlays [])
(some? animation)
(assoc-in [:viewer-local :current-animation]
{:kind :go-to-frame
:orig-frame-id (:id frame)
:animation animation}))))
(assoc :viewer-animation
{:kind :go-to-frame
:orig-frame-id (:id frame)
:animation animation}))))
ptk/WatchEvent
(watch [_ state _]
@ -462,7 +467,7 @@
(ptk/reify ::go-to-section
ptk/UpdateEvent
(update [_ state]
(assoc-in state [:viewer-local :overlays] []))
(assoc state :viewer-overlays []))
ptk/WatchEvent
(watch [_ state _]
@ -473,64 +478,69 @@
;; --- Overlays
(defn- do-open-overlay
(defn- open-overlay*
[state frame position close-click-outside background-overlay animation]
(cond-> state
:always
(update-in [:viewer-local :overlays] conj
{:frame frame
:position position
:close-click-outside close-click-outside
:background-overlay background-overlay})
(some? animation)
(assoc-in [:viewer-local :current-animation]
{:kind :open-overlay
:overlay-id (:id frame)
:animation animation})))
(update :viewer-overlays conj
{:frame frame
:id (:id frame)
:position position
:close-click-outside close-click-outside
:background-overlay background-overlay})
(defn- do-close-overlay
(some? animation)
(assoc :viewer-animation
{:kind :open-overlay
:overlay-id (:id frame)
:animation animation})))
(defn- close-overlay*
[state frame-id animation]
(if (nil? animation)
(update-in state [:viewer-local :overlays]
(fn [overlays]
(d/removev #(= (:id (:frame %)) frame-id) overlays)))
(assoc-in state [:viewer-local :current-animation]
{:kind :close-overlay
:overlay-id frame-id
:animation animation})))
(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})))
(defn open-overlay
[frame-id position close-click-outside background-overlay animation]
(us/verify ::us/uuid frame-id)
(us/verify ::gpt/point position)
(us/verify (s/nilable ::us/boolean) close-click-outside)
(us/verify (s/nilable ::us/boolean) background-overlay)
(us/verify (s/nilable ::ctsi/animation) animation)
(us/assert! ::us/uuid frame-id)
(us/assert! ::gpt/point position)
(us/assert! ::nilable-boolean close-click-outside)
(us/assert! ::nilable-boolean background-overlay)
(us/assert! ::nilable-animation animation)
(ptk/reify ::open-overlay
ptk/UpdateEvent
(update [_ state]
(let [route (:route state)
qparams (:query-params route)
page-id (:page-id qparams)
frames (get-in state [:viewer :pages page-id :all-frames])
frames (dm/get-in state [:viewer :pages page-id :all-frames])
frame (d/seek #(= (:id %) frame-id) frames)
overlays (get-in state [:viewer-local :overlays])]
overlays (:viewer-overlays state)]
(if-not (some #(= (:frame %) frame) overlays)
(do-open-overlay state
frame
position
close-click-outside
background-overlay
animation)
(open-overlay* state
frame
position
close-click-outside
background-overlay
animation)
state)))))
(defn toggle-overlay
[frame-id position close-click-outside background-overlay animation]
(us/verify ::us/uuid frame-id)
(us/verify ::gpt/point position)
(us/verify (s/nilable ::us/boolean) close-click-outside)
(us/verify (s/nilable ::us/boolean) background-overlay)
(us/verify (s/nilable ::ctsi/animation) animation)
(us/assert! ::us/uuid frame-id)
(us/assert! ::gpt/point position)
(us/assert! ::nilable-boolean close-click-outside)
(us/assert! ::nilable-boolean background-overlay)
(us/assert! ::nilable-animation animation)
(ptk/reify ::toggle-overlay
ptk/UpdateEvent
(update [_ state]
@ -539,29 +549,30 @@
page-id (:page-id qparams)
frames (get-in state [:viewer :pages page-id :all-frames])
frame (d/seek #(= (:id %) frame-id) frames)
overlays (get-in state [:viewer-local :overlays])]
overlays (:viewer-overlays state)]
(if-not (some #(= (:frame %) frame) overlays)
(do-open-overlay state
frame
position
close-click-outside
background-overlay
animation)
(do-close-overlay state
(:id frame)
(ctsi/invert-direction animation)))))))
(open-overlay* state
frame
position
close-click-outside
background-overlay
animation)
(close-overlay* state
(:id frame)
(ctsi/invert-direction animation)))))))
(defn close-overlay
([frame-id] (close-overlay frame-id nil))
([frame-id animation]
(us/verify ::us/uuid frame-id)
(us/verify (s/nilable ::ctsi/animation) animation)
(us/assert! ::us/uuid frame-id)
(us/assert! ::nilable-animation animation)
(ptk/reify ::close-overlay
ptk/UpdateEvent
(update [_ state]
(do-close-overlay state
frame-id
animation)))))
(close-overlay* state
frame-id
animation)))))
;; --- Objects selection

4
frontend/src/app/main/data/workspace.cljs
View file

@ -22,6 +22,7 @@
[app.common.types.shape-tree :as ctst]
[app.common.uuid :as uuid]
[app.config :as cfg]
[app.main.data.comments :as dcm]
[app.main.data.events :as ev]
[app.main.data.messages :as msg]
[app.main.data.users :as du]
@ -115,7 +116,8 @@
ptk/WatchEvent
(watch [_ _ stream]
(rx/merge
(rx/of (dwp/fetch-bundle project-id file-id))
(rx/of (dwp/fetch-bundle project-id file-id)
(dcm/retrieve-comment-threads file-id))
;; Initialize notifications (websocket connection) and the file persistence
(->> stream

14
frontend/src/app/main/data/workspace/libraries.cljs
View file

@ -238,10 +238,12 @@
(defn- do-update-tipography
[it state typography file-id]
(let [data (get state :workspace-data)
changes (-> (pcb/empty-changes it)
(pcb/with-library-data data)
(pcb/update-typography typography))]
(let [data (get state :workspace-data)
[path name] (cph/parse-path-name (:name typography))
typography (assoc typography :path path :name name)
changes (-> (pcb/empty-changes it)
(pcb/with-library-data data)
(pcb/update-typography typography))]
(rx/of (dwu/start-undo-transaction)
(dch/commit-changes changes)
(sync-file (:current-file-id state) file-id :typographies (:id typography))
@ -264,9 +266,9 @@
(ptk/reify ::rename-typography
ptk/WatchEvent
(watch [it state _]
(let [data (get state :workspace-data)
(let [data (get state :workspace-data)
[path name] (cph/parse-path-name new-name)
object (get-in data [:typographies id])
object (get-in data [:typographies id])
new-object (assoc object :path path :name name)]
(do-update-tipography it state new-object file-id)))))

13
frontend/src/app/main/data/workspace/transforms.cljs
View file

@ -17,6 +17,7 @@
[app.common.pages.helpers :as cph]
[app.common.spec :as us]
[app.common.types.shape-tree :as ctt]
[app.common.uuid :as uuid]
[app.main.data.workspace.changes :as dch]
[app.main.data.workspace.collapse :as dwc]
[app.main.data.workspace.comments :as-alias dwcm]
@ -762,7 +763,17 @@
changes
(-> (pcb/empty-changes it page-id)
(pcb/with-objects objects)
(pcb/update-shapes moving-frames (fn [shape] (assoc shape :hide-in-viewer true)))
(pcb/update-shapes moving-frames
(fn [shape]
;; Hide in viwer must be enabled just when a board is moved
;; inside another artboard an nested to it, we have to avoid
;; situations like: - Moving inside the same frame - Moving
;; outside the frame
(cond-> shape
(and (not= frame-id (:id shape))
(not= frame-id (:frame-id shape))
(not= frame-id uuid/zero))
(assoc :hide-in-viewer true))))
(pcb/change-parent frame-id moving-shapes))]
(when-not (empty? changes)

1
frontend/src/app/main/ui.cljs
View file

@ -29,6 +29,7 @@
(mf/defc on-main-error
[{:keys [error] :as props}]
(mf/with-effect
(js/console.log error)
(st/emit! (rt/assign-exception error)))
[:span "Internal application error"])

91
frontend/src/app/main/ui/comments.cljs
View file

@ -6,6 +6,7 @@
(ns app.main.ui.comments
(:require
[app.common.geom.point :as gpt]
[app.config :as cfg]
[app.main.data.comments :as dcm]
[app.main.data.modal :as modal]
@ -110,8 +111,10 @@
[:input.btn-secondary {:type "button" :value "Cancel" :on-click on-cancel}]])]))
(mf/defc draft-thread
[{:keys [draft zoom on-cancel on-submit] :as props}]
(let [position (:position draft)
[{:keys [draft zoom on-cancel on-submit position-modifier]}]
(let [position (cond-> (:position draft)
(some? position-modifier)
(gpt/transform position-modifier))
content (:content draft)
pos-x (* (:x position) zoom)
pos-y (* (:y position) zoom)
@ -281,9 +284,12 @@
(l/derived (l/in [:comments id]) st/state))
(mf/defc thread-comments
[{:keys [thread zoom users origin]}]
{::mf/wrap [mf/memo]}
[{:keys [thread zoom users origin position-modifier]}]
(let [ref (mf/use-ref)
pos (:position thread)
pos (cond-> (:position thread)
(some? position-modifier)
(gpt/transform position-modifier))
pos-x (+ (* (:x pos) zoom) 14)
pos-y (- (* (:y pos) zoom) 14)
@ -384,9 +390,12 @@
(mf/defc thread-bubble
{::mf/wrap [mf/memo]}
[{:keys [thread zoom open? on-click origin]}]
(let [pos (:position thread)
drag? (mf/use-ref nil)
[{:keys [thread zoom open? on-click origin position-modifier]}]
(let [pos (cond-> (:position thread)
(some? position-modifier)
(gpt/transform position-modifier))
drag? (mf/use-ref nil)
was-open? (mf/use-ref nil)
{:keys [on-pointer-down
@ -398,41 +407,45 @@
pos-x (* (or (:new-position-x @state) (:x pos)) zoom)
pos-y (* (or (:new-position-y @state) (:y pos)) zoom)
on-pointer-down* (mf/use-callback
(mf/deps origin was-open? open? drag? on-pointer-down)
(fn [event]
(when (not= origin :viewer)
(mf/set-ref-val! was-open? open?)
(when open? (st/emit! (dcm/close-thread)))
(mf/set-ref-val! drag? false)
(dom/stop-propagation event)
(on-pointer-down event))))
on-pointer-down*
(mf/use-callback
(mf/deps origin was-open? open? drag? on-pointer-down)
(fn [event]
(when (not= origin :viewer)
(mf/set-ref-val! was-open? open?)
(when open? (st/emit! (dcm/close-thread)))
(mf/set-ref-val! drag? false)
(dom/stop-propagation event)
(on-pointer-down event))))
on-pointer-up* (mf/use-callback
(mf/deps origin thread was-open? drag? on-pointer-up)
(fn [event]
(when (not= origin :viewer)
(dom/stop-propagation event)
(on-pointer-up event thread)
on-pointer-up*
(mf/use-callback
(mf/deps origin thread was-open? drag? on-pointer-up)
(fn [event]
(when (not= origin :viewer)
(dom/stop-propagation event)
(on-pointer-up event thread)
(when (or (and (mf/ref-val was-open?) (mf/ref-val drag?))
(and (not (mf/ref-val was-open?)) (not (mf/ref-val drag?))))
(st/emit! (dcm/open-thread thread))))))
(when (or (and (mf/ref-val was-open?) (mf/ref-val drag?))
(and (not (mf/ref-val was-open?)) (not (mf/ref-val drag?))))
(st/emit! (dcm/open-thread thread))))))
on-mouse-move* (mf/use-callback
(mf/deps origin drag? on-mouse-move)
(fn [event]
(when (not= origin :viewer)
(mf/set-ref-val! drag? true)
(dom/stop-propagation event)
(on-mouse-move event))))
on-mouse-move*
(mf/use-callback
(mf/deps origin drag? on-mouse-move)
(fn [event]
(when (not= origin :viewer)
(mf/set-ref-val! drag? true)
(dom/stop-propagation event)
(on-mouse-move event))))
on-click* (mf/use-callback
(mf/deps origin thread on-click)
(fn [event]
(dom/stop-propagation event)
(when (= origin :viewer)
(on-click thread))))]
on-click*
(mf/use-callback
(mf/deps origin thread on-click)
(fn [event]
(dom/stop-propagation event)
(when (= origin :viewer)
(on-click thread))))]
[:div.thread-bubble
{:style {:top (str pos-y "px")
@ -448,7 +461,7 @@
[:span (:seqn thread)]]))
(mf/defc comment-thread
[{:keys [item users on-click] :as props}]
[{:keys [item users on-click]}]
(let [owner (get users (:owner-id item))
on-click*
(mf/use-callback

17
frontend/src/app/main/ui/context.cljs
View file

@ -8,12 +8,7 @@
(:require
[rumext.alpha :as mf]))
(def render-ctx (mf/create-context nil))
(def def-ctx (mf/create-context false))
;; This content is used to replace complex colors to simple ones
;; for text shapes in the export process
(def text-plain-colors-ctx (mf/create-context false))
(def render-id (mf/create-context nil))
(def current-route (mf/create-context nil))
(def current-profile (mf/create-context nil))
@ -21,8 +16,12 @@
(def current-project-id (mf/create-context nil))
(def current-page-id (mf/create-context nil))
(def current-file-id (mf/create-context nil))
(def libraries (mf/create-context nil))
(def scroll-ctx (mf/create-context nil))
(def active-frames-ctx (mf/create-context nil))
(def active-frames (mf/create-context nil))
(def render-thumbnails (mf/create-context nil))
(def libraries (mf/create-context nil))
(def components-v2 (mf/create-context nil))
(def current-scroll (mf/create-context nil))
(def current-zoom (mf/create-context nil))

2
frontend/src/app/main/ui/shapes/attrs.cljs
View file

@ -159,7 +159,7 @@
(defn add-style-attrs
([props shape]
(let [render-id (mf/use-ctx muc/render-ctx)]
(let [render-id (mf/use-ctx muc/render-id)]
(add-style-attrs props shape render-id)))
([props shape render-id]

10
frontend/src/app/main/ui/shapes/custom_stroke.cljs
View file

@ -211,7 +211,7 @@
{::mf/wrap-props false}
[props]
(let [render-id (mf/use-ctx muc/render-ctx)
(let [render-id (mf/use-ctx muc/render-id)
child (obj/get props "children")
base-props (obj/get child "props")
elem-name (obj/get child "type")
@ -253,7 +253,7 @@
(mf/defc inner-stroke
{::mf/wrap-props false}
[props]
(let [render-id (mf/use-ctx muc/render-ctx)
(let [render-id (mf/use-ctx muc/render-id)
child (obj/get props "children")
base-props (obj/get child "props")
elem-name (obj/get child "type")
@ -292,7 +292,7 @@
(let [child (obj/get props "children")
shape (obj/get props "shape")
render-id (mf/use-ctx muc/render-ctx)
render-id (mf/use-ctx muc/render-id)
index (obj/get props "index")
stroke-width (:stroke-width shape 0)
stroke-style (:stroke-style shape :none)
@ -417,7 +417,7 @@
shape (obj/get props "shape")
elem-name (obj/get child "type")
position (or (obj/get props "position") 0)
render-id (or (obj/get props "render-id") (mf/use-ctx muc/render-ctx))]
render-id (or (obj/get props "render-id") (mf/use-ctx muc/render-id))]
[:g {:id (dm/fmt "fills-%" (:id shape))}
[:> elem-name (build-fill-props shape child position render-id)]]))
@ -427,7 +427,7 @@
(let [child (obj/get props "children")
shape (obj/get props "shape")
elem-name (obj/get child "type")
render-id (or (obj/get props "render-id") (mf/use-ctx muc/render-ctx))
render-id (or (obj/get props "render-id") (mf/use-ctx muc/render-id))
stroke-id (dm/fmt "strokes-%" (:id shape))
stroke-props (-> (obj/create)
(obj/set! "id" stroke-id)

4
frontend/src/app/main/ui/shapes/export.cljs
View file

@ -286,7 +286,7 @@
(for [[index fill] (d/enumerate fills)]
[:> "penpot:fill"
#js {:penpot:fill-color (if (some? (:fill-color-gradient fill))
(str/format "url(#%s)" (str "fill-color-gradient_" (mf/use-ctx muc/render-ctx) "_" index))
(str/format "url(#%s)" (str "fill-color-gradient_" (mf/use-ctx muc/render-id) "_" index))
(d/name (:fill-color fill)))
:penpot:fill-color-ref-file (d/name (:fill-color-ref-file fill))
:penpot:fill-color-ref-id (d/name (:fill-color-ref-id fill))
@ -299,7 +299,7 @@
(for [[index stroke] (d/enumerate strokes)]
[:> "penpot:stroke"
#js {:penpot:stroke-color (if (some? (:stroke-color-gradient stroke))
(str/format "url(#%s)" (str "stroke-color-gradient_" (mf/use-ctx muc/render-ctx) "_" index))
(str/format "url(#%s)" (str "stroke-color-gradient_" (mf/use-ctx muc/render-id) "_" index))
(d/name (:stroke-color stroke)))
:penpot:stroke-color-ref-file (d/name (:stroke-color-ref-file stroke))
:penpot:stroke-color-ref-id (d/name (:stroke-color-ref-id stroke))

2
frontend/src/app/main/ui/shapes/frame.cljs
View file

@ -62,7 +62,7 @@
:height height
:className "frame-background"}))
path? (some? (.-d props))
render-id (mf/use-ctx muc/render-ctx)]
render-id (mf/use-ctx muc/render-id)]
[:*
[:g {:clip-path (when (not show-content) (frame-clip-url shape render-id))}

2
frontend/src/app/main/ui/shapes/gradients.cljs
View file

@ -104,7 +104,7 @@
(let [attr (obj/get props "attr")
shape (obj/get props "shape")
id (obj/get props "id")
id' (mf/use-ctx muc/render-ctx)
id' (mf/use-ctx muc/render-id)
id (or id (dm/str (name attr) "_" id'))
gradient (get shape attr)
gradient-props #js {:id id

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

@ -21,7 +21,7 @@
(let [shape (unchecked-get props "shape")
childs (unchecked-get props "childs")
objects (unchecked-get props "objects")
render-id (mf/use-ctx muc/render-ctx)
render-id (mf/use-ctx muc/render-id)
masked-group? (:masked-group? shape)
[mask childs] (if masked-group?

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

@ -47,18 +47,18 @@
{::mf/wrap-props false}
[props]
(let [mask (unchecked-get props "mask")
render-id (mf/use-ctx muc/render-ctx)
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.
;; 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)]
[:defs
[:filter {:id (filter-id render-id mask)}

27
frontend/src/app/main/ui/shapes/shape.cljs
View file

@ -9,8 +9,8 @@
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.common.pages.helpers :as cph]
[app.common.uuid :as uuid]
[app.main.ui.context :as muc]
[app.main.ui.hooks :as h]
[app.main.ui.shapes.attrs :as attrs]
[app.main.ui.shapes.export :as ed]
[app.main.ui.shapes.fills :as fills]
@ -49,18 +49,19 @@
{::mf/forward-ref true
::mf/wrap-props false}
[props ref]
(let [shape (obj/get props "shape")
children (obj/get props "children")
pointer-events (obj/get props "pointer-events")
disable-shadows? (obj/get props "disable-shadows?")
type (:type shape)
render-id (mf/use-memo #(str (uuid/next)))
filter-id (str "filter_" render-id)
styles (-> (obj/create)
(obj/set! "pointerEvents" pointer-events)
(cond-> (and (:blend-mode shape) (not= (:blend-mode shape) :normal))
(obj/set! "mixBlendMode" (d/name (:blend-mode shape)))))
(let [shape (unchecked-get props "shape")
children (unchecked-get props "children")
pointer-events (unchecked-get props "pointer-events")
disable-shadows? (unchecked-get props "disable-shadows?")
type (:type shape)
render-id (h/use-id)
filter-id (dm/str "filter_" render-id)
styles (-> (obj/create)
(obj/set! "pointerEvents" pointer-events)
(cond-> (and (:blend-mode shape) (not= (:blend-mode shape) :normal))
(obj/set! "mixBlendMode" (d/name (:blend-mode shape)))))
include-metadata? (mf/use-ctx ed/include-metadata-ctx)
@ -91,7 +92,7 @@
svg-group?
(propagate-wrapper-styles wrapper-props))]
[:& (mf/provider muc/render-ctx) {:value render-id}
[:& (mf/provider muc/render-id) {:value render-id}
[:> :g wrapper-props
(when include-metadata?
[:& ed/export-data {:shape shape}])

26
frontend/src/app/main/ui/shapes/text/fo_text.cljs
View file

@ -9,7 +9,6 @@
[app.common.colors :as clr]
[app.common.data :as d]
[app.common.geom.shapes :as gsh]
[app.main.ui.context :as muc]
[app.main.ui.shapes.attrs :as attrs]
[app.main.ui.shapes.text.styles :as sts]
[app.util.color :as uc]
@ -91,23 +90,6 @@
(recur (uc/next-rgb current-rgb))
current-hex))))
(defn- remap-colors
"Returns a new content replacing the original colors by their mapped 'simple color'"
[content color-mapping]
(cond-> content
(and (:fill-opacity content) (< (:fill-opacity content) 1.0))
(-> (assoc :fill-color (get color-mapping [(:fill-color content) (:fill-opacity content)]))
(assoc :fill-opacity 1.0))
(some? (:fill-color-gradient content))
(-> (assoc :fill-color (get color-mapping (:fill-color-gradient content)))
(assoc :fill-opacity 1.0)
(dissoc :fill-color-gradient))
(contains? content :children)
(update :children #(mapv (fn [node] (remap-colors node color-mapping)) %))))
(defn- fill->color
"Given a content node returns the information about that node fill color"
[{:keys [fill-color fill-opacity fill-color-gradient]}]
@ -199,13 +181,7 @@
;; We add 8px to add a padding for the exporter
;; width (+ width 8)
[colors color-mapping color-mapping-inverse] (retrieve-colors shape)
plain-colors? (mf/use-ctx muc/text-plain-colors-ctx)
content (cond-> content
plain-colors?
(remap-colors color-mapping))]
[colors _color-mapping color-mapping-inverse] (retrieve-colors shape)]
[:foreignObject
{:x x

4
frontend/src/app/main/ui/shapes/text/svg_text.cljs
View file

@ -54,7 +54,7 @@
::mf/wrap [mf/memo]}
[props]
(let [render-id (mf/use-ctx muc/render-ctx)
(let [render-id (mf/use-ctx muc/render-id)
shape (obj/get props "shape")
shape (cond-> shape (:is-mask? shape) set-white-fill)
@ -109,6 +109,6 @@
(obj/set! "fill" (str "url(#fill-" index "-" render-id ")")))})
shape (assoc shape :fills (:fills data))]
[:& (mf/provider muc/render-ctx) {:key index :value (str render-id "_" (:id shape) "_" index)}
[:& (mf/provider muc/render-id) {:key index :value (str render-id "_" (:id shape) "_" index)}
[:& shape-custom-strokes {:shape shape :position index :render-id render-id}
[:> :text props (:text data)]]]))]]))

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

@ -26,7 +26,7 @@
[app.main.ui.static :as static]
[app.main.ui.viewer.comments :refer [comments-layer comments-sidebar]]
[app.main.ui.viewer.handoff :as handoff]
[app.main.ui.viewer.header :refer [header]]
[app.main.ui.viewer.header :as header]
[app.main.ui.viewer.interactions :as interactions]
[app.main.ui.viewer.login]
[app.main.ui.viewer.share-link]
@ -36,8 +36,15 @@
[app.util.webapi :as wapi]
[cuerdas.core :as str]
[goog.events :as events]
[okulary.core :as l]
[rumext.alpha :as mf]))
(def current-animation-ref
(l/derived :viewer-animation st/state))
(def current-overlays-ref
(l/derived :viewer-overlays st/state))
(defn- calculate-size
[objects frame zoom]
(let [{:keys [x y width height]} (gsb/get-object-bounds objects frame)]
@ -60,7 +67,6 @@
:height (* height zoom)
:vbox (str "0 0 " width " " height)})))
(mf/defc viewer-pagination
[{:keys [index num-frames left-bar right-bar] :as props}]
[:*
@ -75,94 +81,132 @@
[:div.counter (str/join " / " [(+ index 1) num-frames])]
[:span]]])
(mf/defc viewer-wrapper
[{:keys [wrapper-size scroll 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}]
(let [{clist :list} (mf/deref refs/comments-local)
show-comments-list (and (= section :comments) (= :show clist))]
(mf/defc viewer-pagination-and-sidebar
{::mf/wrap [mf/memo]}
[{:keys [section index users frame page]}]
(let [comments-local (mf/deref refs/comments-local)
show-sidebar? (and (= section :comments) (:show-sidebar? comments-local))]
[:*
[:& viewer-pagination {:index index :num-frames (count (:frames page)) :right-bar show-comments-list}]
[:& viewer-pagination
{:index index
:num-frames (count (:frames page))
:right-bar show-sidebar?}]
(when show-comments-list
[:& comments-sidebar {:users users :frame frame :page page}])
(when show-sidebar?
[:& comments-sidebar
{:users users
:frame frame
:page page}])]))
[:div.viewer-wrapper
{:style {:width (:width wrapper-size)
:height (:height wrapper-size)}}
[:& (mf/provider ctx/scroll-ctx) {:value @scroll}
[:div.viewer-clipper
[:*
(when orig-frame
[:div.viewport-container
{:ref orig-viewport-ref
:style {:width (:width orig-size)
:height (:height orig-size)
:position "relative"}}
(mf/defc viewer-overlay
[{:keys [overlay page frame zoom wrapper-size close-overlay interactions-mode]}]
(let [close-click-outside? (:close-click-outside overlay)
background-overlay? (:background-overlay overlay)
overlay-frame (:frame overlay)
overlay-position (:position overlay)
[:& interactions/viewport
{:frame orig-frame
:base-frame orig-frame
:frame-offset (gpt/point 0 0)
:size orig-size
:page page
:file file
:users users
:interactions-mode :hide}]])
size
(mf/with-memo [page overlay zoom]
(calculate-size (:objects page) (:frame overlay) zoom))
[:div.viewport-container
{:ref current-viewport-ref
:style {:width (:width size)
:height (:height size)
:position "relative"}}
on-click
(mf/use-fn
(mf/deps overlay close-overlay close-click-outside?)
(fn [_]
(when close-click-outside?
(close-overlay (:frame overlay)))))]
[:& interactions/viewport
{:frame frame
:base-frame frame
:frame-offset (gpt/point 0 0)
:size size
:page page
:file file
:users users
:interactions-mode interactions-mode}]
[:*
(when (or close-click-outside? background-overlay?)
[:div.viewer-overlay-background
{:class (dom/classnames :visible background-overlay?)
:style {:width (:width wrapper-size)
:height (:height wrapper-size)
:position "absolute"
:left 0
:top 0}
:on-click on-click}])
(for [overlay overlays]
(let [size-over (calculate-size (:objects page) (:frame overlay) zoom)]
[:*
(when (or (:close-click-outside overlay)
(:background-overlay overlay))
[:div.viewer-overlay-background
{:class (dom/classnames
:visible (:background-overlay overlay))
:style {:width (:width wrapper-size)
:height (:height wrapper-size)
:position "absolute"
:left 0
:top 0}
:on-click #(when (:close-click-outside overlay)
(close-overlay (:frame overlay)))}])
[:div.viewport-container.viewer-overlay
[:div.viewport-container.viewer-overlay
{:id (dm/str "overlay-" (:id overlay-frame))
:style {:width (:width size)
:height (:height size)
:left (* (:x overlay-position) zoom)
:top (* (:y overlay-position) zoom)}}
{:id (str "overlay-" (-> overlay :frame :id))
:style {:width (:width size-over)
:height (:height size-over)
:left (* (:x (:position overlay)) zoom)
:top (* (:y (:position overlay)) zoom)}}
[:& interactions/viewport
{:frame (:frame overlay)
:base-frame frame
:frame-offset (:position overlay)
:size size-over
:page page
:file file
:users users
:interactions-mode interactions-mode}]]]))]]
[:& interactions/viewport
{:frame overlay-frame
:base-frame frame
:frame-offset overlay-position
:size size
:page page
:interactions-mode interactions-mode}]]]))
(when (= section :comments)
[:& comments-layer {:file file
:users users
:frame frame
:page page
:zoom zoom}])]]]]))
(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}]
[:*
[:& viewer-pagination-and-sidebar
{:section section
:index index
:page page
:users users
:frame frame}]
[:div.viewer-wrapper
{:style {:width (:width wrapper-size)
:height (:height wrapper-size)}}
[:div.viewer-clipper
(when orig-frame
[:div.viewport-container
{:ref orig-viewport-ref
:style {:width (:width orig-size)
:height (:height orig-size)
:position "relative"}}
[:& interactions/viewport
{:frame orig-frame
:base-frame orig-frame
:frame-offset (gpt/point 0 0)
:size orig-size
:page page
:users users
:interactions-mode :hide}]])
[:div.viewport-container
{:ref current-viewport-ref
:style {:width (:width size)
:height (:height size)
:position "relative"}}
[:& interactions/viewport
{:frame frame
:base-frame frame
:frame-offset (gpt/point 0 0)
:size size
:page page
:interactions-mode interactions-mode}]
(for [overlay overlays]
[:& viewer-overlay {:overlay overlay
:key (dm/str (:id overlay))
:page page
:frame frame
:zoom zoom
:wrapper-size wrapper-size
:close-overlay close-overlay
:interactions-mode interactions-mode}])
]]
(when (= section :comments)
[:& comments-layer {:file file
:users users
:frame frame
:page page
:zoom zoom}])]])
(mf/defc viewer
[{:keys [params data]}]
@ -184,10 +228,11 @@
local (mf/deref refs/viewer-local)
nav-scroll (:nav-scroll local)
orig-viewport-ref (mf/use-ref nil)
orig-viewport-ref (mf/use-ref nil)
current-viewport-ref (mf/use-ref nil)
viewer-section-ref (mf/use-ref nil)
current-animation (:current-animation local)
viewer-section-ref (mf/use-ref nil)
current-animation (mf/deref current-animation-ref)
page-id (or page-id (-> file :data :pages first))
@ -208,26 +253,26 @@
frames (:frames page)
frame (get frames index)
fullscreen? (mf/deref refs/viewer-fullscreen?)
overlays (:overlays local)
scroll (mf/use-state nil)
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))
size (mf/use-memo
(mf/deps frame zoom)
(fn [] (calculate-size (:objects page) frame zoom)))
size
(mf/with-memo [frame zoom]
(calculate-size (:objects page) frame zoom))
orig-size (mf/use-memo
(mf/deps orig-frame zoom)
(fn [] (when orig-frame
(calculate-size (:objects page) orig-frame zoom))))
orig-size
(mf/with-memo [orig-frame zoom]
(when orig-frame
(calculate-size (:objects page) orig-frame zoom)))
wrapper-size (mf/use-memo
(mf/deps size orig-size zoom)
(fn [] (calculate-wrapper size orig-size zoom)))
wrapper-size
(mf/with-memo [size orig-size zoom]
(calculate-wrapper size orig-size zoom))
interactions-mode
(:interactions-mode local)
@ -246,22 +291,23 @@
(dom/add-class! layout "force-visible"))))))
on-click
(mf/use-callback
(mf/use-fn
(mf/deps section)
(fn [_]
(when (= section :comments)
(st/emit! (dcm/close-thread)))))
set-up-new-size
(mf/use-callback
(mf/use-fn
(fn [_]
(let [viewer-section (dom/get-element "viewer-section")
size (dom/get-client-size viewer-section)]
(st/emit! (dv/set-viewport-size {:size size})))))
on-scroll
(fn [event]
(reset! scroll (dom/get-target-scroll event)))]
(mf/use-fn
(fn [event]
(reset! scroll (dom/get-target-scroll event))))]
(hooks/use-shortcuts ::viewer sc/shortcuts)
(when (nil? page)
@ -278,14 +324,13 @@
(let [name (:name file)]
(dom/set-html-title (str "\u25b6 " (tr "title.viewer" name))))))
(mf/use-effect
(fn []
(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)]
(fn []
(events/unlistenByKey key1)
(events/unlistenByKey key2)))))
(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)]
(fn []
(events/unlistenByKey key1)
(events/unlistenByKey key2))))
(mf/use-layout-effect
(fn []
@ -388,21 +433,24 @@
fonts (into #{} (keep :font-id) text-nodes)]
(run! fonts/ensure-loaded! fonts))))
[:div#viewer-layout {:class (dom/classnames
:force-visible (:show-thumbnails local)
:viewer-layout (not= section :handoff)
:handoff-layout (= section :handoff)
:fullscreen fullscreen?)}
[:div#viewer-layout
{:class (dom/classnames
:force-visible (:show-thumbnails local)
:viewer-layout (not= section :handoff)
:handoff-layout (= section :handoff)
:fullscreen fullscreen?)}
[:div.viewer-content
[:& header {:project project
:index index
:file file
:page page
:frame frame
:permissions permissions
:zoom zoom
:section section}]
[:& header/header
{:project project
:index index
:file file
:page page
:frame frame
:permissions permissions
:zoom zoom
:section section}]
[:div.thumbnail-close {:on-click #(st/emit! dv/close-thumbnails-panel)
:class (dom/classnames :invisible (not (:show-thumbnails local false)))}]
[:& thumbnails-panel {:frames frames
@ -436,23 +484,24 @@
:index index
:viewer-pagination viewer-pagination}]
[:& viewer-wrapper
{:wrapper-size wrapper-size
:scroll scroll
: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-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}]]]))]]]))
;; --- Component: Viewer Page

200
frontend/src/app/main/ui/viewer/comments.cljs
View file

@ -6,6 +6,7 @@
(ns app.main.ui.viewer.comments
(:require
[app.common.data :as d]
[app.common.geom.matrix :as gmt]
[app.common.geom.point :as gpt]
[app.common.geom.shapes :as gsh]
@ -23,132 +24,141 @@
[rumext.alpha :as mf]))
(mf/defc comments-menu
{::mf/wrap [mf/memo]
::mf/wrap-props false}
[]
(let [{cmode :mode cshow :show clist :list} (mf/deref refs/comments-local)
(let [local (mf/deref refs/comments-local)
owner-filter (:owner-filter local)
status-filter (:status-filter local)
show-sidebar? (:show-sidebar? local)
show-dropdown? (mf/use-state false)
toggle-dropdown (mf/use-fn #(swap! show-dropdown? not))
hide-dropdown (mf/use-fn #(reset! show-dropdown? false))
update-mode
(mf/use-callback
(fn [mode]
(st/emit! (dcm/update-filters {:mode mode}))))
update-show
(mf/use-callback
(fn [mode]
(st/emit! (dcm/update-filters {:show mode}))))
update-list
(mf/use-callback
(fn [show-list]
(st/emit! (dcm/update-filters {:list show-list}))))]
update-option (mf/use-fn
(fn [event]
(let [target (dom/get-current-target event)
key (d/read-string (dom/get-attribute target "data-key"))
val (d/read-string (dom/get-attribute target "data-val"))]
(st/emit! (dcm/update-options {key val})))))]
[:div.view-options {:on-click toggle-dropdown}
[:span.label (tr "labels.comments")]
[:span.icon i/arrow-down]
[:& dropdown {:show @show-dropdown?
:on-close hide-dropdown}
[:ul.dropdown.with-check
[:li {:class (dom/classnames :selected (= :all cmode))
:on-click #(update-mode :all)}
[:li {:class (dom/classnames :selected (= :all owner-filter))
:data-key ":owner-filter"
:data-val ":all"
:on-click update-option}
[:span.icon i/tick]
[:span.label (tr "labels.show-all-comments")]]
[:li {:class (dom/classnames :selected (= :yours cmode))
:on-click #(update-mode :yours)}
[:li {:class (dom/classnames :selected (= :yours owner-filter))
:data-key ":owner-filter"
:data-val ":yours"
:on-click update-option}
[:span.icon i/tick]
[:span.label (tr "labels.show-your-comments")]]
[:hr]
[:li {:class (dom/classnames :selected (= :pending cshow))
:on-click #(update-show (if (= :pending cshow) :all :pending))}
[:li {:class (dom/classnames :selected (= :pending status-filter))
:data-key ":status-filter"
:data-val (if (= :pending status-filter) ":all" ":pending")
:on-click update-option}
[:span.icon i/tick]
[:span.label (tr "labels.hide-resolved-comments")]]
[:hr]
[:li {:class (dom/classnames :selected (= :show clist))
:on-click #(update-list (if (= :show clist) :hide :show))}
[:li {:class (dom/classnames :selected show-sidebar?)
:data-key ":show-sidebar?"
:data-val (if show-sidebar? "false" "true")
:on-click update-option}
[:span.icon i/tick]
[:span.label (tr "labels.show-comments-list")]]]]]))
(def threads-ref
(l/derived :comment-threads st/state))
(def comments-local-ref
(l/derived :comments-local st/state))
(defn- update-thread-position [positions {:keys [id] :as thread}]
(if-let [data (get positions id)]
(-> thread
(assoc :position (:position data))
(assoc :frame-id (:frame-id data)))
thread))
(mf/defc comments-layer
[{:keys [zoom file users frame page] :as props}]
(let [profile (mf/deref refs/profile)
threads-position-ref (l/derived (l/in [:viewer :pages (:id page) :options :comment-threads-position]) st/state)
threads-position-map (mf/deref threads-position-ref)
threads-map (mf/deref threads-ref)
(let [profile (mf/deref refs/profile)
local (mf/deref refs/comments-local)
frame-corner (-> frame :points gsh/points->selrect gpt/point)
modifier1 (-> (gmt/matrix)
(gmt/translate (gpt/negate frame-corner)))
open-thread-id (:open local)
page-id (:id page)
file-id (:id file)
frame-id (:id frame)
modifier2 (-> (gpt/point frame-corner)
(gmt/translate-matrix))
tpos-ref (mf/with-memo [page-id]
(-> (l/in [:pages page-id :options :comment-threads-position])
(l/derived refs/viewer-data)))
cstate (mf/deref refs/comments-local)
positions (mf/deref tpos-ref)
threads-map (mf/deref refs/comment-threads)
update-thread-position (fn update-thread-position [thread]
(if (contains? threads-position-map (:id thread))
(-> thread
(assoc :position (get-in threads-position-map [(:id thread) :position]))
(assoc :frame-id (get-in threads-position-map [(:id thread) :frame-id])))
thread))
frame-corner (mf/with-memo [frame]
(-> frame :points gsh/points->selrect gpt/point))
threads (->> (vals threads-map)
(map update-thread-position)
(filter #(= (:frame-id %) (:id frame)))
(dcm/apply-filters cstate profile)
(filter (fn [{:keys [position]}]
(gsh/has-point? frame position))))
modifier1 (mf/with-memo [frame-corner]
(-> (gmt/matrix)
(gmt/translate (gpt/negate frame-corner))))
modifier2 (mf/with-memo [frame-corner]
(-> (gpt/point frame-corner)
(gmt/translate-matrix)))
threads (mf/with-memo [threads-map positions frame local profile]
(->> (vals threads-map)
(map (partial update-thread-position positions))
(filter #(= (:frame-id %) (:id frame)))
(dcm/apply-filters local profile)
(filter (fn [{:keys [position]}]
(gsh/has-point? frame position)))))
on-bubble-click
(mf/use-callback
(mf/deps cstate)
(fn [thread]
(if (= (:open cstate) (:id thread))
(st/emit! (dcm/close-thread))
(st/emit! (-> (dcm/open-thread thread)
(mf/use-fn
(mf/deps open-thread-id)
(fn [{:keys [id] :as thread}]
(st/emit! (if (= open-thread-id id)
(dcm/close-thread)
(-> (dcm/open-thread thread)
(with-meta {::ev/origin "viewer"}))))))
on-click
(mf/use-callback
(mf/deps cstate frame page file zoom)
(mf/use-fn
(mf/deps open-thread-id zoom page-id file-id modifier2)
(fn [event]
(dom/stop-propagation event)
(if (some? (:open cstate))
(if (some? open-thread-id)
(st/emit! (dcm/close-thread))
(let [event (.-nativeEvent ^js event)
viewport-point (dom/get-offset-position event)
viewport-point (-> viewport-point (update :x #(/ % zoom)) (update :y #(/ % zoom)))
position (gpt/transform viewport-point modifier2)
(let [event (dom/event->native-event event)
position (-> (dom/get-offset-position event)
(update :x #(/ % zoom))
(update :y #(/ % zoom))
(gpt/transform modifier2))
params {:position position
:page-id (:id page)
:file-id (:id file)}]
(st/emit! (dcm/create-draft params))))))
on-draft-cancel
(mf/use-callback
(mf/deps cstate)
#(st/emit! (dcm/close-thread)))
(mf/use-fn #(st/emit! (dcm/close-thread)))
on-draft-submit
(mf/use-callback
(mf/deps frame)
(mf/use-fn
(mf/deps frame-id modifier2)
(fn [draft]
(let [params (-> draft
(update :position gpt/transform modifier2)
(assoc :frame-id (:id frame)))]
(let [params (assoc draft :frame-id frame-id)]
(st/emit! (dcm/create-thread-on-viewer params)
(dcm/close-thread)))))]
@ -156,35 +166,37 @@
[:div.viewer-comments-container
[:div.threads
(for [item threads]
(let [item (update item :position gpt/transform modifier1)]
[:& cmt/thread-bubble {:thread item
:zoom zoom
:on-click on-bubble-click
:open? (= (:id item) (:open cstate))
:key (:seqn item)
:origin :viewer}]))
[:& cmt/thread-bubble
{:thread item
:position-modifier modifier1
:zoom zoom
:on-click on-bubble-click
:open? (= (:id item) (:open local))
:key (:seqn item)
:origin :viewer}])
(when-let [id (:open cstate)]
(when-let [thread (as-> (get threads-map id) $
(when (some? $)
(update $ :position gpt/transform modifier1)))]
[:& cmt/thread-comments {:thread thread
:users users
:zoom zoom}]))
(when-let [thread (get threads-map open-thread-id)]
[:& cmt/thread-comments
{:thread thread
:position-modifier modifier1
:users users
:zoom zoom}])
(when-let [draft (:draft cstate)]
[:& cmt/draft-thread {:draft (update draft :position gpt/transform modifier1)
:on-cancel on-draft-cancel
:on-submit on-draft-submit
:zoom zoom}])]]]))
(when-let [draft (:draft local)]
[:& cmt/draft-thread
{:draft draft
:position-modifier modifier1
:on-cancel on-draft-cancel
:on-submit on-draft-submit
:zoom zoom}])]]]))
(mf/defc comments-sidebar
[{:keys [users frame page]}]
(let [profile (mf/deref refs/profile)
cstate (mf/deref refs/comments-local)
threads-map (mf/deref threads-ref)
local (mf/deref refs/comments-local)
threads-map (mf/deref refs/comment-threads)
threads (->> (vals threads-map)
(dcm/apply-filters cstate profile)
(dcm/apply-filters local profile)
(filter (fn [{:keys [position]}]
(gsh/has-point? frame position))))]
[:aside.settings-bar.settings-bar-right.comments-right-sidebar

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

@ -6,13 +6,13 @@
(ns app.main.ui.viewer.handoff
(:require
[app.main.data.viewer :as dv]
[app.main.data.viewer :as dv]
[app.main.store :as st]
[app.main.ui.viewer.handoff.left-sidebar :refer [left-sidebar]]
[app.main.ui.viewer.handoff.render :refer [render-frame-svg]]
[app.main.ui.viewer.handoff.right-sidebar :refer [right-sidebar]]
[app.util.dom :as dom]
[app.util.keyboard :as kbd]
[app.util.keyboard :as kbd]
[goog.events :as events]
[rumext.alpha :as mf])
(:import goog.events.EventType))

12
frontend/src/app/main/ui/viewer/handoff/code.cljs
View file

@ -72,12 +72,7 @@
[:div.element-options
[:div.code-block
[:div.code-row-lang
[:select.code-selection
[:option {:value "css"} "CSS"]
#_[:option {:value "sass"} "SASS"]
#_[:option {:value "less"} "Less"]
#_[:option {:value "stylus"} "Stylus"]]
[:div.code-row-lang "CSS"
[:button.expand-button
{:on-click on-expand }
@ -91,10 +86,7 @@
:code style-code}]]]
[:div.code-block
[:div.code-row-lang
[:select.code-selection
[:option "SVG"]
[:option "HTML"]]
[:div.code-row-lang "SVG"
[:button.expand-button
{:on-click on-expand}

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

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

10
frontend/src/app/main/ui/viewer/header.cljs
View file

@ -6,10 +6,10 @@
(ns app.main.ui.viewer.header
(:require
[app.common.data.macros :as dm]
[app.main.data.modal :as modal]
[app.main.data.viewer :as dv]
[app.main.data.viewer.shortcuts :as sc]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.export :refer [export-progress-widget]]
@ -19,8 +19,14 @@
[app.main.ui.viewer.interactions :refer [flows-menu interactions-menu]]
[app.util.dom :as dom]
[app.util.i18n :refer [tr]]
[okulary.core :as l]
[rumext.alpha :as mf]))
(def fullscreen-ref
(l/derived (fn [state]
(dm/get-in state [:viewer-local :fullscreen?]))
st/state))
(defn open-login-dialog
[]
(modal/show! :login-register {}))
@ -65,7 +71,7 @@
(mf/defc header-options
[{:keys [section zoom page file index permissions]}]
(let [fullscreen? (mf/deref refs/viewer-fullscreen?)
(let [fullscreen? (mf/deref fullscreen-ref)
toggle-fullscreen
(mf/use-callback

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

@ -17,6 +17,7 @@
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.hooks :as h]
[app.main.ui.icons :as i]
[app.main.ui.viewer.shapes :as shapes]
[app.util.dom :as dom]
@ -27,84 +28,109 @@
(defn prepare-objects
[page frame size]
(fn []
(let [objects (:objects page)
frame-id (:id frame)
modifier (-> (gpt/point (:x size) (:y size))
(gpt/negate)
(gmt/translate-matrix))
(let [objects (:objects page)
frame-id (:id frame)
modifier (-> (gpt/point (:x size) (:y size))
(gpt/negate)
(gmt/translate-matrix))
update-fn #(d/update-when %1 %2 assoc-in [:modifiers :displacement] modifier)]
update-fn #(d/update-when %1 %2 assoc-in [:modifiers :displacement] modifier)]
(->> (cph/get-children-ids objects frame-id)
(into [frame-id])
(reduce update-fn objects)))))
(->> (cph/get-children-ids objects frame-id)
(into [frame-id])
(reduce update-fn objects))))
(mf/defc viewport
{::mf/wrap [mf/memo]}
[{:keys [page interactions-mode frame base-frame frame-offset size]}]
(let [objects (mf/use-memo
(mf/deps page frame size)
(prepare-objects page frame size))
(mf/defc viewport-svg
{::mf/wrap [mf/memo]
::mf/wrap-props false}
[props]
(let [page (unchecked-get props "page")
frame (unchecked-get props "frame")
base (unchecked-get props "base")
offset (unchecked-get props "offset")
size (unchecked-get props "size")
wrapper (mf/use-memo
(mf/deps objects)
#(shapes/frame-container-factory objects))
vbox (:vbox size)
objects (mf/with-memo [page frame size]
(prepare-objects page frame size))
wrapper (mf/with-memo [objects]
(shapes/frame-container-factory objects))
;; Retrieve frames again with correct modifier
frame (get objects (:id frame))
base-frame (get objects (:id base-frame))
frame (get objects (:id frame))
base (get objects (:id base))]
on-click
(fn [_]
(when (= interactions-mode :show-on-click)
(st/emit! dv/flash-interactions)))
on-mouse-wheel
(fn [event]
(when (kbd/mod? event)
(dom/prevent-default event)
(let [event (.getBrowserEvent ^js event)
delta (+ (.-deltaY ^js event) (.-deltaX ^js event))]
(if (pos? delta)
(st/emit! dv/decrease-zoom)
(st/emit! dv/increase-zoom)))))
on-key-down
(fn [event]
(when (kbd/esc? event)
(st/emit! (dcm/close-thread))))]
(mf/use-effect
(mf/deps interactions-mode) ;; on-click event depends on interactions-mode
(fn []
;; bind with passive=false to allow the event to be cancelled
;; https://stackoverflow.com/a/57582286/3219895
(let [key1 (events/listen goog/global "wheel" on-mouse-wheel #js {"passive" false})
key2 (events/listen js/window "keydown" on-key-down)
key3 (events/listen js/window "click" on-click)]
(fn []
(events/unlistenByKey key1)
(events/unlistenByKey key2)
(events/unlistenByKey key3)))))
[:& (mf/provider shapes/base-frame-ctx) {:value base-frame}
[:& (mf/provider shapes/frame-offset-ctx) {:value frame-offset}
[:svg {:view-box (:vbox size)
[:& (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 size)}]]]]))
[:& wrapper {:shape frame :view-box vbox}]]]]))
(mf/defc viewport
{::mf/wrap [mf/memo]
::mf/wrap-props false}
[props]
(let [;; NOTE: with `use-equal-memo` hook we ensure that all values
;; conserves the reference identity for avoid unnecesary dummy
;; rerenders.
mode (h/use-equal-memo (unchecked-get props "interactions-mode"))
offset (h/use-equal-memo (unchecked-get props "frame-offset"))
size (h/use-equal-memo (unchecked-get props "size"))
page (unchecked-get props "page")
frame (unchecked-get props "frame")
base (unchecked-get props "base-frame")]
(mf/with-effect [mode]
(let [on-click
(fn [_]
(when (= mode :show-on-click)
(st/emit! (dv/flash-interactions))))
on-mouse-wheel
(fn [event]
(when (kbd/mod? event)
(dom/prevent-default event)
(let [event (dom/event->browser-event event)
delta (+ (.-deltaY ^js event)
(.-deltaX ^js event))]
(if (pos? delta)
(st/emit! dv/decrease-zoom)
(st/emit! dv/increase-zoom)))))
on-key-down
(fn [event]
(when (kbd/esc? event)
(st/emit! (dcm/close-thread))))
;; bind with passive=false to allow the event to be cancelled
;; https://stackoverflow.com/a/57582286/3219895
key1 (events/listen goog/global "wheel" on-mouse-wheel #js {"passive" false})
key2 (events/listen goog/global "keydown" on-key-down)
key3 (events/listen goog/global "click" on-click)]
(fn []
(events/unlistenByKey key1)
(events/unlistenByKey key2)
(events/unlistenByKey key3))))
[:& viewport-svg {:page page
:frame frame
:base base
:offset offset
:size size}]))
(mf/defc flows-menu
{::mf/wrap [mf/memo]}
[{:keys [page index]}]
(let [flows (get-in page [:options :flows])
(let [flows (dm/get-in page [:options :flows])
frames (:frames page)
frame (get frames index)
current-flow (mf/use-state
@ -135,7 +161,6 @@
[:span.icon i/tick]
[:span.label (:name flow)]])]]])))
(mf/defc interactions-menu
[]
(let [local (mf/deref refs/viewer-local)

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

@ -206,19 +206,22 @@
:style {:pointer-events (when frame? "none")}
:transform (gsh/transform-str shape)}])))
;; TODO: use-memo use-fn
(defn generic-wrapper-factory
"Wrap some svg shape and add interaction controls"
[component]
(mf/fnc generic-wrapper
{::mf/wrap-props false}
[props]
(let [shape (unchecked-get props "shape")
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)
(let [shape (unchecked-get props "shape")
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)
interactions-show? (mf/deref viewer-interactions-show?)
@ -226,20 +229,37 @@
interactions (:interactions shape)
svg-element? (and (= :svg-raw (:type shape))
(not= :svg (get-in shape [:content :tag])))]
(not= :svg (get-in shape [:content :tag])))
(mf/use-effect
(fn []
(let [sems (on-load shape base-frame frame-offset objects)]
#(run! tm/dispose! sems))))
on-mouse-down
(mf/use-fn (mf/deps shape base-frame frame-offset objects)
#(on-mouse-down % shape base-frame frame-offset objects))
on-mouse-up
(mf/use-fn (mf/deps shape base-frame frame-offset objects)
#(on-mouse-up % shape base-frame frame-offset objects))
on-mouse-enter
(mf/use-fn (mf/deps shape base-frame frame-offset objects)
#(on-mouse-enter % shape base-frame frame-offset objects))
on-mouse-leave
(mf/use-fn (mf/deps shape base-frame frame-offset objects)
#(on-mouse-leave % shape base-frame frame-offset objects))]
(mf/with-effect []
(let [sems (on-load shape base-frame frame-offset objects)]
(partial run! tm/dispose! sems)))
(if-not svg-element?
[:> shape-container {:shape shape
:cursor (when (ctsi/actionable? interactions) "pointer")
:on-mouse-down #(on-mouse-down % shape base-frame frame-offset objects)
:on-mouse-up #(on-mouse-up % shape base-frame frame-offset objects)
:on-mouse-enter #(on-mouse-enter % shape base-frame frame-offset objects)
:on-mouse-leave #(on-mouse-leave % shape base-frame frame-offset objects)}
:on-mouse-down on-mouse-down
:on-mouse-up on-mouse-up
:on-mouse-enter on-mouse-enter
:on-mouse-leave on-mouse-leave}
[:& component {:shape shape
:frame frame
@ -311,6 +331,7 @@
#js {:shape shape
:childs childs
:objects objects})]
[:> frame-wrapper props]))))
(defn group-container-factory
@ -362,31 +383,43 @@
image-wrapper (image-wrapper)
circle-wrapper (circle-wrapper)]
(mf/fnc shape-container
{::mf/wrap-props false}
{::mf/wrap-props false
::mf/wrap [mf/memo]}
[props]
(let [scroll (mf/use-ctx ctx/scroll-ctx)
local (mf/deref refs/viewer-local)
zoom (:zoom local)
shape (unchecked-get props "shape")
parents (map (d/getf objects) (cph/get-parent-ids objects (:id shape)))
fixed? (or (:fixed-scroll shape) (some :fixed-scroll parents))
(let [shape (unchecked-get props "shape")
frame (unchecked-get props "frame")
delta {:x (/ (:scroll-left scroll) zoom) :y (/ (:scroll-top scroll) zoom)}
;; 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/use-memo (mf/deps objects)
#(group-container-factory objects))
(mf/with-memo [objects]
(group-container-factory objects))
frame-container
(mf/use-memo (mf/deps objects)
#(frame-container-factory objects))
(mf/with-memo [objects]
(frame-container-factory objects))
bool-container
(mf/use-memo (mf/deps objects)
#(bool-container-factory objects))
(mf/with-memo [objects]
(bool-container-factory objects))
svg-raw-container
(mf/use-memo (mf/deps objects)
#(svg-raw-container-factory objects))]
(mf/with-memo [objects]
(svg-raw-container-factory objects))
]
(when (and shape (not (:hidden shape)))
(let [shape (-> (gsh/transform-shape shape)
(gsh/translate-to-frame frame)
@ -404,4 +437,3 @@
:group [:> group-container {:shape shape :frame frame :objects objects :fixed? fixed? :delta delta}]
:bool [:> bool-container {:shape shape :frame frame :objects objects}]
:svg-raw [:> svg-raw-container {:shape shape :frame frame :objects objects}])))))))

4
frontend/src/app/main/ui/workspace/shapes.cljs
View file

@ -54,7 +54,7 @@
(mf/deps objects)
#(cph/objects-by-frame objects))]
[:& (mf/provider ctx/active-frames-ctx) {:value active-frames}
[:& (mf/provider ctx/active-frames) {:value active-frames}
;; Render font faces only for shapes that are part of the root
;; frame but don't belongs to any other frame.
(let [xform (comp
@ -79,7 +79,7 @@
(let [shape (obj/get props "shape")
active-frames
(when (cph/root-frame? shape) (mf/use-ctx ctx/active-frames-ctx))
(when (cph/root-frame? shape) (mf/use-ctx ctx/active-frames))
thumbnail?
(and (some? active-frames)

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

@ -909,6 +909,17 @@
(seq (:colors 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
(map extract-path-if-missing))
groups (group-assets objects reverse-sort?)
@ -1572,7 +1583,6 @@
(fn [event]
(on-drop-asset-group event dragging? prefix selected-typographies-paths selected-typographies-full move-typography)))]
[:div {:on-drag-enter on-drag-enter
:on-drag-leave on-drag-leave
:on-drag-over on-drag-over
@ -1598,6 +1608,7 @@
[:div.drop-space])
(for [typography typographies]
[:& typography-item {:typography typography
:key (dm/str (:id typography))
:file file
:local? local?
:handle-change handle-change
@ -1615,6 +1626,7 @@
(when-not (empty? path-item)
[:& typographies-group {:file-id file-id
:prefix (cph/merge-path-item prefix path-item)
:key (dm/str path-item)
:groups content
:open-groups open-groups
:file file
@ -1642,7 +1654,9 @@
extract-path-if-missing
(fn [typography]
(let [[path name] (cph/parse-path-name (:name typography))]
(if (= (:name typography) name)
(if (and
(= (:name typography) name)
(contains? typography :path))
typography
(assoc typography :path path :name name))))
@ -1957,13 +1971,11 @@
(fn [asset-type asset-groups asset-id]
(letfn [(flatten-groups
[groups]
(concat
(get groups "" [])
(reduce concat
(into []
(->> (filter #(seq (first %)) groups)
(map second)
(mapcat flatten-groups))))))]
(reduce concat [(get groups "" [])
(into []
(->> (filter #(seq (first %)) groups)
(map second)
(mapcat flatten-groups)))]))]
(let [selected-assets-type (get selected-assets asset-type)
count-assets (count selected-assets-type)]
(if (<= count-assets 0)

4
frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
View file

@ -174,7 +174,9 @@
(fn [shape]
(if (ctsr/has-radius? shape)
(update-fn shape)
shape)))))
shape))
{:reg-objects? true
:attrs [:rx :ry :r1 :r2 :r3 :r4]})))
on-switch-to-radius-1
(mf/use-callback

30
frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs
View file

@ -467,27 +467,21 @@
(fn [event]
(let [name (dom/get-target-val event)]
(when-not (str/blank? name)
(on-change {:name name })))))]
(on-change {:name name})))))]
(mf/use-effect
(mf/deps editing?)
(fn []
(when editing?
(reset! open? editing?))))
(mf/with-effect [editing?]
(when editing?
(reset! open? editing?)))
(mf/use-effect
(mf/deps focus-name?)
(fn []
(when focus-name?
(tm/schedule
#(when-let [node (mf/ref-val name-input-ref)]
(dom/focus! node)
(dom/select-text! node))))))
(mf/with-effect [focus-name?]
(when focus-name?
(tm/schedule
#(when-let [node (mf/ref-val name-input-ref)]
(dom/focus! node)
(dom/select-text! node)))))
(mf/use-effect
(mf/deps on-change)
(fn []
(mf/set-ref-val! on-change-ref {:on-change on-change})))
(mf/with-effect [on-change]
(mf/set-ref-val! on-change-ref {:on-change on-change}))
[:*
[:div.element-set-options-group.typography-entry

8
frontend/src/app/util/dom.cljs
View file

@ -37,6 +37,14 @@
(when (some? e)
(.-target e)))
(defn event->native-event
[^js e]
(.-nativeEvent e))
(defn event->browser-event
[^js e]
(.getBrowserEvent e))
;; --- New methods
(declare get-elements-by-tag)