Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-18 18:51:29 -05:00
Code Issues Activity

🎉 Add assets exportation in bulk (multiple)

Browse source 
And adapt to the websocket changes on backend and
exporter.
This commit is contained in:
Alejandro Alonso 2022-03-01 13:42:55 +01:00 • committed by Alonso Torres
parent f60d8c6c96
commit 0e0fb68c38
39 changed files with 1497 additions and 411 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
common/src/app/common/colors.cljc
View file

@ -10,10 +10,13 @@
(def black "#000000")
(def canvas "#E8E9EA")
(def default-layout "#DE4762")
(def gray-10 "#E3E3E3")
(def gray-20 "#B1B2B5")
(def gray-30 "#7B7D85")
(def gray-40 "#64666A")
(def info "#59B9E2")
(def test "#fabada")
(def white "#FFFFFF")
(def primary "#31EFB8")
(def danger "#E65244")
(def warning "#FC8802")

41
common/src/app/common/pages/common.cljc
View file

@ -65,7 +65,8 @@
:masked-group? :mask-group
:constraints-h :constraints-group
:constraints-v :constraints-group
:fixed-scroll :constraints-group})
:fixed-scroll :constraints-group
:exports :exports-group})
;; Attributes that may directly be edited by the user with forms
(def editable-attrs
@ -99,7 +100,9 @@
:stroke-opacity
:stroke-color-gradient
:stroke-cap-start
:stroke-cap-end}
:stroke-cap-end
:exports}
:group #{:proportion-lock
:width :height
@ -120,7 +123,9 @@
:shadow
:blur}
:blur
:exports}
:rect #{:proportion-lock
:width :height
@ -147,7 +152,7 @@
:fill-color-ref-id
:fill-color-ref-file
:fill-color-gradient
:strokes
:stroke-style
:stroke-alignment
@ -162,7 +167,9 @@
:shadow
:blur}
:blur
:exports}
:circle #{:proportion-lock
:width :height
@ -202,7 +209,9 @@
:shadow
:blur}
:blur
:exports}
:path #{:proportion-lock
:width :height
@ -242,7 +251,9 @@
:shadow
:blur}
:blur
:exports}
:text #{:proportion-lock
:width :height
@ -305,7 +316,9 @@
:text-transform
:grow-type}
:grow-type
:exports}
:image #{:proportion-lock
:width :height
@ -328,7 +341,9 @@
:shadow
:blur}
:blur
:exports}
:svg-raw #{:proportion-lock
:width :height
@ -370,7 +385,9 @@
:shadow
:blur}
:blur
:exports}
:bool #{:proportion-lock
:width :height
@ -410,5 +427,7 @@
:shadow
:blur}})
:blur
:exports}})

BIN
frontend/resources/images/export-no-shapes.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.9 KiB

1
frontend/resources/images/icons/checkbox-intermediate.svg Normal file
View file

@ -0,0 +1 @@
<svg id="screenshot" viewBox="10064.99280029184 896.9999999999992 40.00000000000364 40.000000000000796" width="40" height="40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="-webkit-print-color-adjust: exact;"><g id="shape-3042ec00-9b94-11ec-b905-cb847d55c7a9"><path d="M10064.99280029184,897.0000000000006L10064.99280029184,937L10104.992800291844,936.9999999999995L10104.992800291842,896.9999999999992L10064.99280029184,897.0000000000006ZL10064.99280029184,897.0000000000006ZM10067.920800291844,899.9319999999997L10102.064800291844,899.9319999999999L10102.064800291844,934.0679999999994L10067.920800291844,934.068L10067.920800291844,899.9319999999997ZL10067.920800291844,899.9319999999997ZM10073,915L10097,915L10097,919L10073,919L10073,915Z"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 807 B

268
frontend/resources/styles/main/partials/modal.scss
View file

@ -96,7 +96,6 @@
height: 30px;
justify-content: center;
margin-right: 16px;
width: 30px;
svg {
transform: rotate(45deg);
@ -140,7 +139,7 @@
.modal-footer {
display: flex;
height: 63px;
padding: 0px 16px;
padding: 0px 18px;
border-top: 1px solid $color-gray-10;
.action-buttons {
@ -235,12 +234,17 @@
}
.import-dialog,
.export-dialog {
.export-dialog,
.export-shapes-dialog {
background-color: $color-white;
border: 1px solid $color-gray-20;
width: 30rem;
min-height: 14rem;
&.no-shapes {
width: 39rem;
}
p {
font-size: $fs14;
color: $color-black;
@ -259,9 +263,9 @@
border: 1px solid $color-gray-20;
background: $color-white;
border-radius: 3px;
padding: 0.3rem 1.25rem;
padding: 0.5rem 2.25rem;
cursor: pointer;
margin-right: 8px;
margin-right: 18px;
&:hover {
background: $color-gray-20;
@ -274,7 +278,7 @@
border: 1px solid $color-primary;
color: $color-black;
cursor: pointer;
padding: 0.3rem 1.25rem;
padding: 0.5rem 2.25rem;
&[disabled] {
border: 1px solid #e3e3e3;
@ -295,7 +299,7 @@
padding-left: 2rem;
h2 {
font-size: $fs14;
font-size: $fs18;
}
}
@ -303,11 +307,6 @@
padding: 1rem;
}
svg {
max-width: 18px;
max-height: 18px;
}
.file-entry {
margin: 0.75rem 1rem;
user-select: none;
@ -515,6 +514,38 @@
&.selected {
border: 1px solid $color-primary;
}
&.table-row {
align-items: center;
display: flex;
flex-wrap: wrap;
height: 45px;
justify-content: space-between;
padding: 0px 0px;
width: 100%;
}
.table-field {
flex-grow: 0;
padding: 0px 4px;
overflow: hidden;
text-overflow: ellipsis;
width: 50px;
&.check {
width: 30px;
}
&.scale {
flex-grow: 1;
width: 15%;
}
&.name {
flex-grow: 1;
width: 40%;
}
}
}
.option-container {
@ -1306,3 +1337,216 @@
}
}
}
// Export shapes
.export-progress-modal-overlay {
display: flex;
justify-content: center;
position: fixed;
right: 1rem;
top: 3rem;
padding: 16px 18px;
background-color: $color-white;
border: 1px solid $color-gray-20;
border-radius: 3px;
z-index: 1000;
&.transparent {
background-color: rgba($color-white, 0);
}
.export-progress-modal-container {
display: flex;
flex-direction: column;
justify-content: space-around;
height: 100%;
width: 100%;
.progress-bar {
margin-top: 1rem;
}
.export-progress-modal-header {
align-items: center;
display: flex;
justify-content: stretch;
margin-bottom: 7px;
.modal-close-button {
display: flex;
justify-content: center;
background-color: transparent;
border: none;
cursor: pointer;
padding: 2px 0;
svg {
height: 18px;
width: 18px;
transform: rotate(45deg);
}
}
.export-progress-modal-title {
padding: 0;
margin: 0;
color: $color-black;
flex-grow: 1;
font-size: $fs16;
}
.progress {
color: $color-gray-30;
font-size: $fs16;
margin-bottom: 0;
padding-right: 16px;
text-align: right;
}
.retry {
font-size: $fs12;
margin-right: 16px;
padding: 4px 12px;
}
}
}
}
.export-shapes-dialog {
.modal-content {
padding: 0;
}
.body {
overflow-y: auto;
margin: 0.5rem 0.5rem 0.5rem 0;
}
.field {
flex-grow: 0;
margin: 10px 0;
padding: 0px 4px;
overflow: hidden;
text-overflow: ellipsis;
width: 50px;
&.image {
align-items: center;
border: 1px solid $color-gray-10;
border-radius: 3px;
display: flex;
justify-content: center;
height: 32px;
width: 32px;
svg {
height: 20px;
width: 24px;
}
}
&.check {
cursor: pointer;
height: 18px;
padding: 0;
width: 30px;
svg {
fill: $color-white;
max-width: 18px;
max-height: 18px;
}
& .checked {
svg {
background-color: $color-primary;
}
}
& .unchecked {
svg {
background-color: $color-gray-10;
}
}
}
&.title {
flex-grow: 1;
font-size: $fs12;
color: $color-black;
}
&.name {
flex-grow: 1;
font-size: $fs16;
color: $color-black;
width: 45%;
white-space: nowrap;
}
&.scale {
width: 25%;
}
&.scale,
&.extension {
color: $color-gray-30;
font-size: $fs12;
}
}
.header {
align-items: center;
border-bottom: 1px solid $color-gray-10;
display: flex;
flex-wrap: wrap;
height: 32px;
justify-content: space-between;
padding: 0.5rem 2rem;
margin: 0;
width: 100%;
.field {
margin: 0;
}
}
.row {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
height: 3rem;
margin: 0 0.5rem 0 2rem;
width: calc(100% - 2.5rem);
&:not(:first-child) {
border-top: 1px solid $color-gray-10;
}
}
.modal-footer {
padding: 18px;
}
.no-selection {
padding: 2rem 1rem 2rem 2rem;
img {
color: $color-primary-dark;
float: right;
margin-left: 4rem;
width: 176px;
}
a {
font-size: $fs12;
}
p {
color: $color-gray-40;
font-size: $fs16;
padding: 1rem 0 0 0;
}
}
}

6
frontend/resources/styles/main/partials/workspace-header.scss
View file

@ -298,8 +298,14 @@
}
}
.export-progress-widget {
cursor: pointer;
padding-top: 6px;
}
.persistence-status-widget {
display: flex;
margin-left: 0px;
margin-right: 10px;
/* border: 1px solid red; */
width: 150px;

11
frontend/src/app/main.cljs
View file

@ -11,6 +11,7 @@
[app.config :as cf]
[app.main.data.events :as ev]
[app.main.data.users :as du]
[app.main.data.websocket :as ws]
[app.main.errors]
[app.main.sentry :as sentry]
[app.main.store :as st]
@ -58,7 +59,15 @@
(->> stream
(rx/filter du/profile-fetched?)
(rx/take 1)
(rx/map #(rt/init-routes)))))))
(rx/map #(rt/init-routes)))
(->> stream
(rx/filter du/profile-fetched?)
(rx/map deref)
(rx/filter du/is-authenticated?)
(rx/take 1)
(rx/map #(ws/initialize)))))))
(def essential-only?
(let [href (.-href ^js glob/location)]

225
frontend/src/app/main/data/exports.cljs Normal file
View file

@ -0,0 +1,225 @@
;; This Source Code Form is subject to the terms of the Mozilla Public
;; License, v. 2.0. If a copy of the MPL was not distributed with this
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
;;
;; Copyright (c) UXBOX Labs SL
(ns app.main.data.exports
(:require
[app.main.data.modal :as modal]
[app.main.data.workspace.persistence :as dwp]
[app.main.data.workspace.state-helpers :as wsh]
[app.main.repo :as rp]
[app.main.store :as st]
[app.util.dom :as dom]
[app.util.time :as dt]
[app.util.websocket :as ws]
[beicon.core :as rx]
[potok.core :as ptk]))
(def default-timeout 5000)
(defn toggle-detail-visibililty
[]
(ptk/reify ::toggle-detail-visibililty
ptk/UpdateEvent
(update [_ state]
(update-in state [:export :detail-visible] not))))
(defn toggle-widget-visibililty
[]
(ptk/reify ::toggle-widget-visibility
ptk/UpdateEvent
(update [_ state]
(update-in state [:export :widget-visible] not))))
(defn clear-export-state
[id]
(ptk/reify ::clear-export-state
ptk/UpdateEvent
(update [_ state]
;; only clear if the existing export is the same
(let [existing-id (-> state :export :id)]
(if (and (some? existing-id)
(not= id existing-id))
state
(dissoc state :export))))))
(defn show-workspace-export-dialog
([] (show-workspace-export-dialog nil))
([{:keys [selected]}]
(ptk/reify ::show-workspace-export-dialog
ptk/WatchEvent
(watch [_ state _]
(let [file-id (:current-file-id state)
page-id (:current-page-id state)
filename (-> (wsh/lookup-page state page-id) :name)
selected (or selected (wsh/lookup-selected state page-id {}))
shapes (if (seq selected)
(wsh/lookup-shapes state selected)
(wsh/filter-shapes state #(pos? (count (:exports %)))))
exports (for [shape shapes
export (:exports shape)]
(-> export
(assoc :enabled true)
(assoc :page-id page-id)
(assoc :file-id file-id)
(assoc :object-id (:id shape))
(assoc :shape (dissoc shape :exports))
(assoc :name (:name shape))))]
(rx/of (modal/show :export-shapes
{:exports (vec exports)
:filename filename})))))))
(defn show-viewer-export-dialog
[{:keys [shapes filename page-id file-id exports]}]
(ptk/reify ::show-viewer-export-dialog
ptk/WatchEvent
(watch [_ _ _]
(let [exports (for [shape shapes
export exports]
(-> export
(assoc :enabled true)
(assoc :page-id page-id)
(assoc :file-id file-id)
(assoc :object-id (:id shape))
(assoc :shape (dissoc shape :exports))
(assoc :name (:name shape))))]
(rx/of (modal/show :export-shapes {:exports (vec exports)
:filename filename}))))))
(defn- initialize-export-status
[exports filename resource-id]
(ptk/reify ::initialize-export-status
ptk/UpdateEvent
(update [_ state]
(assoc state :export {:in-progress true
:resource-id resource-id
:healthy? true
:error false
:progress 0
:widget-visible true
:detail-visible true
:exports exports
:filename filename
:last-update (dt/now)}))))
(defn- update-export-status
[{:keys [progress status resource-id name] :as data}]
(ptk/reify ::update-export-status
ptk/UpdateEvent
(update [_ state]
(let [time-diff (dt/diff (dt/now)
(get-in state [:export :last-update]))
healthy? (< time-diff (dt/duration {:seconds 6}))]
(cond-> state
(= status "running")
(update :export assoc :progress (:done progress) :last-update (dt/now) :healthy? healthy?)
(= status "error")
(update :export assoc :error (:cause data) :last-update (dt/now) :healthy? healthy?)
(= status "ended")
(update :export assoc :in-progress false :last-update (dt/now) :healthy? healthy?))))
ptk/WatchEvent
(watch [_ _ _]
(when (= status "ended")
(->> (rp/query! :download-export-resource resource-id)
(rx/delay 500)
(rx/map #(dom/trigger-download name %)))))))
(defn request-simple-export
[{:keys [export filename]}]
(ptk/reify ::request-simple-export
ptk/UpdateEvent
(update [_ state]
(update state :export assoc :in-progress true))
ptk/WatchEvent
(watch [_ state _]
(let [profile-id (:profile-id state)
params {:exports [export]
:profile-id profile-id}]
(rx/concat
(rx/of ::dwp/force-persist)
(->> (rp/query! :export-shapes-simple params)
(rx/map (fn [data]
(dom/trigger-download filename data)
(fn [state]
(dissoc state :export))))))))))
(defn request-multiple-export
[{:keys [filename exports] :as params}]
(ptk/reify ::request-multiple-export
ptk/WatchEvent
(watch [_ state _]
(let [resource-id (volatile! nil)
profile-id (:profile-id state)
ws-conn (:ws-conn state)
params {:exports exports
:name filename
:profile-id profile-id
:wait false}
progress-stream
(->> (ws/get-rcv-stream ws-conn)
(rx/filter ws/message-event?)
(rx/map :payload)
(rx/filter #(= :export-update (:type %)))
(rx/filter #(= @resource-id (:resource-id %)))
(rx/share))
stoper
(->> progress-stream
(rx/filter #(or (= "ended" (:status %))
(= "error" (:status %)))))]
(swap! st/ongoing-tasks conj :export)
(rx/merge
;; Force that all data is persisted; best effort.
(rx/of ::dwp/force-persist)
;; Launch the exportation process and stores the resource id
;; locally.
(->> (rp/query! :export-shapes-multiple params)
(rx/tap (fn [{:keys [id]}]
(vreset! resource-id id)))
(rx/map (fn [{:keys [id]}]
(initialize-export-status exports filename id))))
;; We proceed to update the export state with incoming
;; progress updates. We delay the stoper for give some time
;; to update the status with ended or errored status before
;; close the stream.
(->> progress-stream
(rx/map update-export-status)
(rx/take-until (rx/delay 500 stoper))
(rx/finalize (fn []
(swap! st/ongoing-tasks disj :export))))
;; We hide need to hide the ui elements of the export after
;; some interval. We also delay a litle bit more the stopper
;; for ensure that after some security time, the stream is
;; completelly closed.
(->> progress-stream
(rx/filter #(= "ended" (:status %)))
(rx/take 1)
(rx/delay default-timeout)
(rx/map #(clear-export-state @resource-id))
(rx/take-until (rx/delay 6000 stoper))))))))
(defn retry-last-export
[]
(ptk/reify ::retry-last-export
ptk/WatchEvent
(watch [_ state _]
(let [{:keys [exports filename]} (:export state)]
(rx/of (request-multiple-export {:exports exports :filename filename}))))))

14
frontend/src/app/main/data/users.cljs
View file

@ -13,6 +13,7 @@
[app.config :as cf]
[app.main.data.events :as ev]
[app.main.data.media :as di]
[app.main.data.websocket :as ws]
[app.main.repo :as rp]
[app.util.i18n :as i18n]
[app.util.router :as rt]
@ -167,7 +168,8 @@
(when (is-authenticated? profile)
(->> (rx/of (profile-fetched profile)
(fetch-teams)
(get-redirect-event))
(get-redirect-event)
(ws/initialize))
(rx/observe-on :async)))))))
(s/def ::invitation-token ::us/not-empty-string)
@ -268,10 +270,12 @@
ptk/WatchEvent
(watch [_ _ _]
;; NOTE: We need the `effect` of the current event to be
;; executed before the redirect.
(->> (rx/of (rt/nav :auth-login))
(rx/observe-on :async)))
(rx/merge
;; NOTE: We need the `effect` of the current event to be
;; executed before the redirect.
(->> (rx/of (rt/nav :auth-login))
(rx/observe-on :async))
(rx/of (ws/finalize))))
ptk/EffectEvent
(effect [_ _ _]

70
frontend/src/app/main/data/websocket.cljs Normal file
View file

@ -0,0 +1,70 @@
;; This Source Code Form is subject to the terms of the Mozilla Public
;; License, v. 2.0. If a copy of the MPL was not distributed with this
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
;;
;; Copyright (c) UXBOX Labs SL
(ns app.main.data.websocket
(:require
[app.common.data.macros :as dm]
[app.common.uri :as u]
[app.config :as cf]
[app.util.websocket :as ws]
[beicon.core :as rx]
[potok.core :as ptk]))
(dm/export ws/send!)
(defn- prepare-uri
[params]
(let [base (-> (u/join cf/public-uri "ws/notifications")
(assoc :query (u/map->query-string params)))]
(cond-> base
(= "https" (:scheme base))
(assoc :scheme "wss")
(= "http" (:scheme base))
(assoc :scheme "ws"))))
(defn send
[message]
(ptk/reify ::send-message
ptk/EffectEvent
(effect [_ state _]
(let [ws-conn (:ws-conn state)]
(ws/send! ws-conn message)))))
(defn initialize
[]
(ptk/reify ::initialize
ptk/UpdateEvent
(update [_ state]
(let [sid (:session-id state)
uri (prepare-uri {:session-id sid})]
(assoc state :ws-conn (ws/create uri))))
ptk/WatchEvent
(watch [_ state stream]
(let [ws-conn (:ws-conn state)
stoper (rx/merge
(rx/filter (ptk/type? ::finalize) stream)
(rx/filter (ptk/type? ::initialize) stream))]
(->> (rx/merge
(->> (ws/get-rcv-stream ws-conn)
(rx/filter ws/message-event?)
(rx/map :payload)
(rx/map #(ptk/data-event ::message %)))
(->> (ws/get-rcv-stream ws-conn)
(rx/filter ws/opened-event?)
(rx/map (fn [_] (ptk/data-event ::opened {})))))
(rx/take-until stoper))))))
;; --- Finalize Websocket
(defn finalize
[]
(ptk/reify ::finalize
ptk/EffectEvent
(effect [_ state _]
(some-> (:ws-conn state) ws/close!))))

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

@ -116,15 +116,16 @@
(rx/take 1)
(rx/map deref)
(rx/mapcat (fn [bundle]
(rx/merge
(rx/of (dwn/initialize file-id)
(dwp/initialize-file-persistence file-id)
(dwc/initialize-indices bundle))
(let [team-id (-> bundle :project :team-id)]
(rx/merge
(rx/of (dwn/initialize team-id file-id)
(dwp/initialize-file-persistence file-id)
(dwc/initialize-indices bundle))
(->> stream
(rx/filter #(= ::dwc/index-initialized %))
(rx/take 1)
(rx/map #(file-initialized bundle)))))))))
(->> stream
(rx/filter #(= ::dwc/index-initialized %))
(rx/take 1)
(rx/map #(file-initialized bundle))))))))))
ptk/EffectEvent
(effect [_ _ _]
@ -982,7 +983,7 @@
pages (get-in state [:workspace-data
:pages-index])
file-thumbnails (->> pages
(mapcat #(extract-file-thumbnails-from-page state selected %)))]
(mapcat #(extract-file-thumbnails-from-page state selected %)))]
(rx/concat
(rx/from
(for [ft file-thumbnails]

152
frontend/src/app/main/data/workspace/notifications.cljs
View file

@ -7,18 +7,15 @@
(ns app.main.data.workspace.notifications
(:require
[app.common.data :as d]
[app.common.geom.point :as gpt]
[app.common.spec :as us]
[app.common.spec.change :as spec.change]
[app.common.transit :as t]
[app.common.uri :as u]
[app.config :as cf]
[app.common.uuid :as uuid]
[app.main.data.websocket :as dws]
[app.main.data.workspace.changes :as dch]
[app.main.data.workspace.libraries :as dwl]
[app.main.data.workspace.persistence :as dwp]
[app.main.streams :as ms]
[app.util.time :as dt]
[app.util.websockets :as ws]
[beicon.core :as rx]
[cljs.spec.alpha :as s]
[clojure.set :as set]
@ -30,103 +27,91 @@
(declare handle-file-change)
(declare handle-library-change)
(declare handle-pointer-send)
(declare send-keepalive)
(s/def ::type keyword?)
(s/def ::message
(s/keys :req-un [::type]))
(defn prepare-uri
[params]
(let [base (-> (u/join cf/public-uri "ws/notifications")
(assoc :query (u/map->query-string params)))]
(cond-> base
(= "https" (:scheme base))
(assoc :scheme "wss")
(= "http" (:scheme base))
(assoc :scheme "ws"))))
(declare handle-export-update)
(defn initialize
[file-id]
[team-id file-id]
(ptk/reify ::initialize
ptk/UpdateEvent
(update [_ state]
(let [sid (:session-id state)
uri (prepare-uri {:file-id file-id :session-id sid})]
(assoc-in state [:ws file-id] (ws/open uri))))
ptk/WatchEvent
(watch [_ state stream]
(let [wsession (get-in state [:ws file-id])
stoper (->> stream
(rx/filter (ptk/type? ::finalize)))
interval (* 1000 60)]
(->> (rx/merge
;; Each 60 seconds send a keepalive message for maintain
;; this socket open.
(->> (rx/timer interval interval)
(rx/map #(send-keepalive file-id)))
(let [subs-id (uuid/next)
stoper (rx/filter (ptk/type? ::finalize) stream)
;; Process all incoming messages.
(->> (ws/-stream wsession)
(rx/filter ws/message?)
(rx/map (comp t/decode-str :payload))
(rx/filter #(s/valid? ::message %))
(rx/map process-message))
initmsg [{:type :subscribe-file
:subs-id subs-id
:file-id file-id}
{:type :subscribe-team
:team-id team-id}]
(rx/of (handle-presence {:type :connect
:session-id (:session-id state)
:profile-id (:profile-id state)}))
endmsg {:type :unsubscribe-file
:subs-id subs-id}
;; Send back to backend all pointer messages.
(->> stream
(rx/filter ms/pointer-event?)
(rx/sample 50)
(rx/map #(handle-pointer-send file-id (:pt %)))))
(rx/take-until stoper))))))
stream (->> (rx/merge
;; Send the subscription message
(->> (rx/from initmsg)
(rx/map dws/send))
;; Subscribe to notifications of the subscription
(->> stream
(rx/filter (ptk/type? ::dws/message))
(rx/map deref)
(rx/map process-message)
(rx/filter #(= subs-id (:subs-id %))))
;; On reconnect, send again the subscription messages
(->> stream
(rx/filter (ptk/type? ::dws/opened))
(rx/mapcat #(->> (rx/from initmsg)
(rx/map dws/send))))
;; Emit presence event for current user;
;; this is because websocket server don't
;; emits this for the same user.
(rx/of (handle-presence {:type :connect
:session-id (:session-id state)
:profile-id (:profile-id state)}))
;; Emit to all other connected users the current pointer
;; position changes.
(->> stream
(rx/filter ms/pointer-event?)
(rx/sample 50)
(rx/map #(handle-pointer-send subs-id file-id (:pt %)))))
(rx/take-until stoper))]
(rx/concat stream (rx/of (dws/send endmsg)))))))
(defn- process-message
[{:keys [type] :as msg}]
(case type
:connect (handle-presence msg)
:join-file (handle-presence msg)
:leave-file (handle-presence msg)
:presence (handle-presence msg)
:disconnect (handle-presence msg)
:pointer-update (handle-pointer-update msg)
:file-change (handle-file-change msg)
:library-change (handle-library-change msg)
::unknown))
(defn- send-keepalive
[file-id]
(ptk/reify ::send-keepalive
ptk/EffectEvent
(effect [_ state _]
(when-let [ws (get-in state [:ws file-id])]
(ws/send! ws {:type :keepalive})))))
nil))
(defn- handle-pointer-send
[file-id point]
[subs-id file-id point]
(ptk/reify ::handle-pointer-send
ptk/EffectEvent
(effect [_ state _]
(let [ws (get-in state [:ws file-id])
pid (:current-page-id state)
msg {:type :pointer-update
:page-id pid
:x (:x point)
:y (:y point)}]
(ws/send! ws msg)))))
ptk/WatchEvent
(watch [_ state _]
(let [page-id (:current-page-id state)
message {:type :pointer-update
:subs-id subs-id
:file-id file-id
:page-id page-id
:position point}]
(rx/of (dws/send message))))))
;; --- Finalize Websocket
(defn finalize
[file-id]
(ptk/reify ::finalize
ptk/EffectEvent
(effect [_ state _]
(when-let [ws (get-in state [:ws file-id])]
(ws/-close ws)))))
[_]
(ptk/reify ::finalize))
;; --- Handle: Presence
@ -165,7 +150,8 @@
(assoc :profile-id profile-id)
(assoc :updated-at (dt/now))
(update :color update-color presence)
(assoc :text-color (if (contains? ["#00fa9a" "#ffd700" "#dda0dd" "#ffafda"] (update-color (:color presence) presence))
(assoc :text-color (if (contains? ["#00fa9a" "#ffd700" "#dda0dd" "#ffafda"]
(update-color (:color presence) presence))
"#000"
"#fff"))))
@ -179,20 +165,19 @@
(ptk/reify ::handle-presence
ptk/UpdateEvent
(update [_ state]
;; (let [profiles (:users state)]
(if (= :disconnect type)
(if (or (= :disconnect type) (= :leave-file type))
(update state :workspace-presence dissoc session-id)
(update state :workspace-presence update-presence))))))
(defn handle-pointer-update
[{:keys [page-id session-id x y] :as msg}]
[{:keys [page-id session-id position] :as msg}]
(ptk/reify ::handle-pointer-update
ptk/UpdateEvent
(update [_ state]
(update-in state [:workspace-presence session-id]
(fn [session]
(assoc session
:point (gpt/point x y)
:point position
:updated-at (dt/now)
:page-id page-id))))))
@ -241,4 +226,3 @@
(when (contains? (:workspace-libraries state) file-id)
(rx/of (dwl/ext-library-changed file-id modified-at revn changes)
(dwl/notify-sync-file file-id))))))

5
frontend/src/app/main/data/workspace/persistence.cljs
View file

@ -30,7 +30,6 @@
[app.main.store :as st]
[app.util.http :as http]
[app.util.i18n :as i18n :refer [tr]]
[app.util.object :as obj]
[app.util.time :as dt]
[app.util.uri :as uu]
[beicon.core :as rx]
@ -71,7 +70,7 @@
on-dirty
(fn []
;; Enable reload stoper
(obj/set! js/window "onbeforeunload" (constantly false))
(swap! st/ongoing-tasks conj :workspace-change)
(st/emit! (update-persistence-status {:status :pending})))
on-saving
@ -81,7 +80,7 @@
on-saved
(fn []
;; Disable reload stoper
(obj/set! js/window "onbeforeunload" nil)
(swap! st/ongoing-tasks disj :workspace-change)
(st/emit! (update-persistence-status {:status :saved})))]
(->> (rx/merge
(->> stream

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

@ -7,6 +7,7 @@
(ns app.main.data.workspace.shortcuts
(:require
[app.main.data.events :as ev]
[app.main.data.exports :as de]
[app.main.data.shortcuts :as ds]
[app.main.data.workspace :as dw]
[app.main.data.workspace.colors :as mdc]
@ -61,9 +62,14 @@
:command (ds/c-mod "shift+r")
:fn #(st/emit! (toggle-layout-flag :rules))}
:select-all {:tooltip (ds/meta "A")
:command (ds/c-mod "a")
:fn #(st/emit! (dw/select-all))}
:export-shapes {:tooltip (ds/meta-shift "E")
:command (ds/c-mod "shift+e")
:fn #(st/emit!
(de/show-workspace-export-dialog))}
:select-all {:tooltip (ds/meta "A")
:command (ds/c-mod "a")
:fn #(st/emit! (dw/select-all))}
:toggle-grid {:tooltip (ds/meta "'")
:command (ds/c-mod "'")
@ -329,7 +335,7 @@
:align-vcenter {:tooltip (ds/alt "V")
:command "alt+v"
:fn #(st/emit! (dw/align-objects :vcenter))}
:align-bottom {:tooltip (ds/alt "S")
:command "alt+s"
:fn #(st/emit! (dw/align-objects :vbottom))}
@ -365,7 +371,7 @@
:toggle-focus-mode {:command "f"
:tooltip "F"
:fn #(st/emit! (dw/toggle-focus-mode))}
:thumbnail-set {:tooltip (ds/shift "T")
:command "shift+t"
:fn #(st/emit! (dw/toggle-file-thumbnail-selected))}

27
frontend/src/app/main/data/workspace/state_helpers.cljs
View file

@ -7,6 +7,7 @@
(ns app.main.data.workspace.state-helpers
(:require
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.common.pages.helpers :as cph]))
(defn lookup-page
@ -35,14 +36,16 @@
([state]
(get-in state [:workspace-data :components])))
;; TODO: improve performance of this
(defn lookup-selected
([state]
(lookup-selected state nil))
([state {:keys [omit-blocked?]
:or {omit-blocked? false}}]
(let [objects (lookup-page-objects state)
selected (->> (get-in state [:workspace-local :selected])
([state options]
(lookup-selected state (:current-page-id state) options))
([state page-id {:keys [omit-blocked?] :or {omit-blocked? false}}]
(let [objects (lookup-page-objects state page-id)
selected (->> (dm/get-in state [:workspace-local :selected])
(cph/clean-loops objects))
selectable? (fn [id]
(and (contains? objects id)
@ -51,3 +54,17 @@
(into (d/ordered-set)
(filter selectable?)
selected))))
(defn lookup-shapes
([state ids]
(lookup-shapes state (:current-page-id state) ids))
([state page-id ids]
(let [objects (lookup-page-objects state page-id)]
(into [] (keep (d/getf objects)) ids))))
(defn filter-shapes
([state filter-fn]
(filter-shapes state (:current-page-id state) filter-fn))
([state page-id filter-fn]
(let [objects (lookup-page-objects state page-id)]
(into [] (filter filter-fn) (vals objects)))))

12
frontend/src/app/main/errors.cljs
View file

@ -12,7 +12,6 @@
[app.config :as cf]
[app.main.data.messages :as msg]
[app.main.data.users :as du]
[app.main.sentry :as sentry]
[app.main.store :as st]
[app.util.i18n :refer [tr]]
[app.util.router :as rt]
@ -26,7 +25,7 @@
[error]
(cond
(instance? ExceptionInfo error)
(-> error sentry/capture-exception ex-data ptk/handle-error)
(-> error ex-data ptk/handle-error)
(map? error)
(ptk/handle-error error)
@ -34,7 +33,6 @@
:else
(let [hint (ex-message error)
msg (dm/str "Internal Error: " hint)]
(sentry/capture-exception error)
(ts/schedule (st/emitf (rt/assign-exception error)))
(js/console.group msg)
@ -68,7 +66,8 @@
;; Error that happens on an active business model validation does not
;; passes an validation (example: profile can't leave a team). From
;; the user perspective a error flash message should be visualized but
;; user can continue operate on the application.
;; user can continue operate on the application. Can happen in backend
;; and frontend.
(defmethod ptk/handle-error :validation
[error]
(ts/schedule
@ -92,6 +91,7 @@
;; Error on parsing an SVG
;; TODO: looks unused and deprecated
(defmethod ptk/handle-error :svg-parser
[_]
(ts/schedule
@ -100,6 +100,7 @@
:type :error
:timeout 3000}))))
;; TODO: should be handled in the event and not as general error handler
(defmethod ptk/handle-error :comment-error
[_]
(ts/schedule
@ -160,10 +161,9 @@
(defn on-unhandled-error
[error]
(if (instance? ExceptionInfo error)
(-> error sentry/capture-exception ex-data ptk/handle-error)
(-> error ex-data ptk/handle-error)
(let [hint (ex-message error)
msg (dm/str "Unhandled Internal Error: " hint)]
(sentry/capture-exception error)
(ts/schedule (st/emitf (rt/assign-exception error)))
(js/console.group msg)
(ex/ignoring (js/console.error error))

31
frontend/src/app/main/refs.cljs
View file

@ -42,6 +42,9 @@
(def share-links
(l/derived :share-links st/state))
(def export
(l/derived :export st/state))
;; ---- Dashboard refs
(def dashboard-local
@ -98,6 +101,7 @@
(def workspace-drawing
(l/derived :workspace-drawing st/state))
;; TODO: rename to workspace-selected (?)
(def selected-shapes
(l/derived wsh/lookup-selected st/state =))
@ -105,6 +109,27 @@
[id]
(l/derived #(contains? % id) selected-shapes))
(def export-in-progress?
(l/derived :export-in-progress? export))
(def export-error?
(l/derived :export-error? export))
(def export-progress
(l/derived :export-progress export))
(def exports
(l/derived :exports export))
(def export-detail-visibililty
(l/derived :export-detail-visibililty export))
(def export-widget-visibililty
(l/derived :export-widget-visibililty export))
(def export-health
(l/derived :export-health export))
(def selected-zoom
(l/derived :zoom workspace-local))
@ -233,11 +258,7 @@
(defn objects-by-id
[ids]
(let [selector
(fn [state]
(let [objects (wsh/lookup-page-objects state)]
(into [] (keep (d/getf objects)) ids)))]
(l/derived selector st/state =)))
(l/derived #(wsh/lookup-shapes % ids) st/state =))
(defn- set-content-modifiers [state]
(fn [id shape]

47
frontend/src/app/main/repo.cljs
View file

@ -8,7 +8,7 @@
(:require
[app.common.data :as d]
[app.common.uri :as u]
[app.config :as cfg]
[app.config :as cf]
[app.util.http :as http]
[beicon.core :as rx]))
@ -40,7 +40,7 @@
:status status
:data body})))
(def ^:private base-uri cfg/public-uri)
(def ^:private base-uri cf/public-uri)
(defn- send-query!
"A simple helper for send and receive transit data on the penpot
@ -105,23 +105,44 @@
(rx/map http/conditional-decode-transit)
(rx/mapcat handle-response)))
(defmethod query :export
[_ params]
(defn- send-export-command
[& {:keys [cmd params blob?]}]
(->> (http/send! {:method :post
:uri (u/join base-uri "export")
:body (http/transit-data params)
:body (http/transit-data (assoc params :cmd cmd))
:credentials "include"
:response-type :blob})
:response-type (if blob? :blob :text)})
(rx/map http/conditional-decode-transit)
(rx/mapcat handle-response)))
(defmethod query :export-frames
(defmethod query :export-shapes-simple
[_ params]
(->> (http/send! {:method :post
:uri (u/join base-uri "export-frames")
:body (http/transit-data params)
:credentials "include"
:response-type :blob})
(rx/mapcat handle-response)))
(let [params (merge {:wait true} params)]
(->> (rx/of params)
(rx/mapcat #(send-export-command :cmd :export-shapes :params % :blob? false))
(rx/mapcat #(send-export-command :cmd :get-resource :params % :blob? true)))))
(defmethod query :export-shapes-multiple
[_ params]
(send-export-command :cmd :export-shapes :params params :blob? false))
(defmethod query :download-export-resource
[_ id]
(send-export-command :cmd :get-resource :params {:id id} :blob? true))
(defmethod query :export-frames
[_ exports]
(let [params {:uri (str base-uri)
:cmd :export-frames
:wait false
:exports exports}]
(->> (http/send! {:method :post
:uri (u/join base-uri "export")
:body (http/transit-data params)
:credentials "include"
:response-type :blob})
(rx/mapcat handle-response)
(rx/ignore))))
(derive :upload-file-media-object ::multipart-upload)
(derive :update-profile-photo ::multipart-upload)

7
frontend/src/app/main/store.cljs
View file

@ -7,6 +7,7 @@
(ns app.main.store
(:require-macros [app.main.store])
(:require
[app.util.object :as obj]
[beicon.core :as rx]
[okulary.core :as l]
[potok.core :as ptk]))
@ -59,4 +60,10 @@
[& events]
#(apply ptk/emit! state events))
(defonce ongoing-tasks (l/atom #{}))
(add-watch ongoing-tasks ::ongoing-tasks
(fn [_ _ _ events]
(if (empty? events)
(obj/set! js/window "onbeforeunload" nil)
(obj/set! js/window "onbeforeunload" (constantly false)))))

211
frontend/src/app/main/ui/export.cljs Normal file
View file

@ -0,0 +1,211 @@
;; This Source Code Form is subject to the terms of the Mozilla Public
;; License, v. 2.0. If a copy of the MPL was not distributed with this
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
;;
;; Copyright (c) UXBOX Labs SL
(ns app.main.ui.export
"Assets exportation common components."
(:require
[app.common.colors :as clr]
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.main.data.exports :as de]
[app.main.data.modal :as modal]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.icons :as i]
[app.main.ui.workspace.shapes :refer [shape-wrapper]]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr c]]
[cuerdas.core :as str]
[rumext.alpha :as mf]))
(mf/defc export-shapes-dialog
{::mf/register modal/components
::mf/register-as :export-shapes}
[{:keys [exports filename]}]
(let [lstate (mf/deref refs/export)
in-progress? (:in-progress lstate)
exports (mf/use-state exports)
all-exports (deref exports)
all-checked? (every? :enabled all-exports)
all-unchecked? (every? (complement :enabled) all-exports)
enabled-exports (into [] (filter :enabled) all-exports)
cancel-fn
(fn [event]
(dom/prevent-default event)
(st/emit! (modal/hide)))
accept-fn
(fn [event]
(dom/prevent-default event)
(st/emit! (modal/hide)
(de/request-multiple-export {:filename filename :exports enabled-exports})))
on-toggle-enabled
(fn [index]
(swap! exports update-in [index :enabled] not))
change-all
(fn [_]
(swap! exports (fn [exports]
(mapv #(assoc % :enabled (not all-checked?)) exports))))
]
[:div.modal-overlay
[:div.modal-container.export-shapes-dialog
{:class (when (empty? all-exports) "no-shapes")}
[:div.modal-header
[:div.modal-header-title
[:h2 (tr "dashboard.export-shapes.title")]]
[:div.modal-close-button
{:on-click cancel-fn} i/close]]
[:*
[:div.modal-content
(if (> (count all-exports) 0)
[:*
[:div.header
[:div.field.check {:on-click change-all}
(cond
all-checked? [:span i/checkbox-checked]
all-unchecked? [:span i/checkbox-unchecked]
:else [:span i/checkbox-intermediate])]
[:div.field.title (tr "dashboard.export-shapes.selected"
(c (count enabled-exports))
(c (count all-exports)))]]
[:div.body
(for [[index {:keys [shape suffix] :as export}] (d/enumerate @exports)]
(let [{:keys [x y width height]} (:selrect shape)]
[:div.row
[:div.field.check {:on-click #(on-toggle-enabled index)}
(if (:enabled export)
[:span.checked i/checkbox-checked]
[:span.unchecked i/checkbox-unchecked])]
[:div.field.image
[:svg {:view-box (dm/str x " " y " " width " " height)
:width 24
:height 20
:version "1.1"
:xmlns "http://www.w3.org/2000/svg"
:xmlnsXlink "http://www.w3.org/1999/xlink"
;; Fix Chromium bug about color of html texts
;; https://bugs.chromium.org/p/chromium/issues/detail?id=1244560#c5
:style {:-webkit-print-color-adjust :exact}}
[:& shape-wrapper {:shape shape}]]]
[:div.field.name (cond-> (:name shape) suffix (str suffix))]
[:div.field.scale (dm/str (* width (:scale export)) "x"
(* height (:scale export)) "px ")]
[:div.field.extension (-> export :type d/name str/upper)]]))]
[:div.modal-footer
[:div.action-buttons
[:input.cancel-button
{:type "button"
:value (tr "labels.cancel")
:on-click cancel-fn}]
[:input.accept-button.primary
{:class (dom/classnames
:btn-disabled (or in-progress? all-unchecked?))
:disabled (or in-progress? all-unchecked?)
:type "button"
:value (if in-progress?
(tr "workspace.options.exporting-object")
(tr "labels.export"))
:on-click (when-not in-progress? accept-fn)}]]]]
[:div.no-selection
[:img {:src "images/export-no-shapes.png" :border "0"}]
[:p (tr "dashboard.export-shapes.no-elements")]
[:p (tr "dashboard.export-shapes.how-to")]
[:p [:a {:target "_blank"
:href "https://help.penpot.app/user-guide/exporting/ "}
(tr "dashboard.export-shapes.how-to-link")]]])]]]]))
(mf/defc export-progress-widget
{::mf/wrap [mf/memo]}
[]
(let [state (mf/deref refs/export)
error? (:error state)
healthy? (:healthy? state)
detail-visible? (:detail-visible state)
widget-visible? (:widget-visible state)
progress (:progress state)
exports (:exports state)
total (count exports)
circ (* 2 Math/PI 12)
pct (- circ (* circ (/ progress total)))
pwidth (if error?
280
(/ (* progress 280) total))
color (cond
error? clr/danger
healthy? clr/primary
(not healthy?) clr/warning)
title (cond
error? (tr "workspace.options.exporting-object-error")
healthy? (tr "workspace.options.exporting-object")
(not healthy?) (tr "workspace.options.exporting-object-slow"))
retry-last-export
(mf/use-fn #(st/emit! (de/retry-last-export)))
toggle-detail-visibility
(mf/use-fn #(st/emit! (de/toggle-detail-visibililty)))]
[:*
(when widget-visible?
[:div.export-progress-widget {:on-click toggle-detail-visibility}
[:svg {:width "32" :height "32"}
[:circle {:r "12"
:cx "16"
:cy "16"
:fill "transparent"
:stroke clr/gray-40
:stroke-width "4"}]
[:circle {:r "12"
:cx "16"
:cy "16"
:fill "transparent"
:stroke color
:stroke-width "4"
:stroke-dasharray (dm/str circ " " circ)
:stroke-dashoffset pct
:transform "rotate(-90 16,16)"
:style {:transition "stroke-dashoffset 1s ease-in-out"}}]]])
(when detail-visible?
[:div.export-progress-modal-overlay
[:div.export-progress-modal-container
[:div.export-progress-modal-header
[:p.export-progress-modal-title title]
(if error?
[:button.btn-secondary.retry {:on-click retry-last-export} (tr "workspace.options.retry")]
[:p.progress (dm/str progress " / " total)])
[:button.modal-close-button {:on-click toggle-detail-visibility} i/close]]
[:svg.progress-bar {:height 8 :width 280}
[:g
[:path {:d "M0 0 L280 0"
:stroke clr/gray-10
:stroke-width 30}]
[:path {:d (dm/str "M0 0 L280 0")
:stroke color
:stroke-width 30
:fill "transparent"
:stroke-dasharray 280
:stroke-dashoffset (- 280 pwidth)
:style {:transition "stroke-dashoffset 1s ease-in-out"}}]]]]])]))

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

@ -39,6 +39,7 @@
(def chat (icon-xref :chat))
(def checkbox-checked (icon-xref :checkbox-checked))
(def checkbox-unchecked (icon-xref :checkbox-unchecked))
(def checkbox-intermediate (icon-xref :checkbox-intermediate))
(def circle (icon-xref :circle))
(def close (icon-xref :close))
(def code (icon-xref :code))

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

@ -7,6 +7,7 @@
(ns app.main.ui.viewer.handoff.attributes
(:require
[app.common.geom.shapes :as gsh]
[app.main.ui.hooks :as hooks]
[app.main.ui.viewer.handoff.attributes.blur :refer [blur-panel]]
[app.main.ui.viewer.handoff.attributes.fill :refer [fill-panel]]
[app.main.ui.viewer.handoff.attributes.image :refer [image-panel]]
@ -16,7 +17,6 @@
[app.main.ui.viewer.handoff.attributes.svg :refer [svg-panel]]
[app.main.ui.viewer.handoff.attributes.text :refer [text-panel]]
[app.main.ui.viewer.handoff.exports :refer [exports]]
[app.util.i18n :as i18n]
[rumext.alpha :as mf]))
(def type->options
@ -31,8 +31,9 @@
(mf/defc attributes
[{:keys [page-id file-id shapes frame]}]
(let [locale (mf/deref i18n/locale)
shapes (->> shapes (map #(gsh/translate-to-frame % frame)))
(let [shapes (hooks/use-equal-memo shapes)
shapes (mf/with-memo [shapes]
(mapv #(gsh/translate-to-frame % frame) shapes))
type (if (= (count shapes) 1) (-> shapes first :type) :multiple)
options (type->options type)]
[:div.element-options
@ -47,10 +48,9 @@
:text text-panel
:svg svg-panel)
{:shapes shapes
:frame frame
:locale locale}])
(when-not (= :multiple type)
[:& exports
{:shape (first shapes)
:page-id page-id
:file-id file-id}])]))
:frame frame}])
[:& exports
{:shapes shapes
:type type
:page-id page-id
:file-id file-id}]]))

8
frontend/src/app/main/ui/viewer/handoff/attributes/blur.cljs
View file

@ -8,7 +8,7 @@
(:require
[app.main.ui.components.copy-button :refer [copy-button]]
[app.util.code-gen :as cg]
[app.util.i18n :refer [t]]
[app.util.i18n :refer [tr]]
[cuerdas.core :as str]
[rumext.alpha :as mf]))
@ -22,17 +22,17 @@
{:to-prop "filter"
:format #(str/fmt "blur(%spx)" (:value %))}))
(mf/defc blur-panel [{:keys [shapes locale]}]
(mf/defc blur-panel [{:keys [shapes]}]
(let [shapes (->> shapes (filter has-blur?))]
(when (seq shapes)
[:div.attributes-block
[:div.attributes-block-title
[:div.attributes-block-title-text (t locale "handoff.attributes.blur")]
[:div.attributes-block-title-text (tr "handoff.attributes.blur")]
(when (= (count shapes) 1)
[:& copy-button {:data (copy-data (first shapes))}])]
(for [shape shapes]
[:div.attributes-unit-row
[:div.attributes-label (t locale "handoff.attributes.blur.value")]
[:div.attributes-label (tr "handoff.attributes.blur.value")]
[:div.attributes-value (-> shape :blur :value) "px"]
[:& copy-button {:data (copy-data shape)}]])])))

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

@ -11,7 +11,7 @@
[app.main.ui.components.copy-button :refer [copy-button]]
[app.util.color :as uc]
[app.util.dom :as dom]
[app.util.i18n :refer [t] :as i18n]
[app.util.i18n :refer [tr]]
[cuerdas.core :as str]
[okulary.core :as l]
[rumext.alpha :as mf]))
@ -27,9 +27,7 @@
#(l/derived get-library st/state)))
(mf/defc color-row [{:keys [color format copy-data on-change-format]}]
(let [locale (mf/deref i18n/locale)
colors-library-ref (mf/use-memo
(let [colors-library-ref (mf/use-memo
(mf/deps (:file-id color))
(make-colors-library-ref (:file-id color)))
colors-library (mf/deref colors-library-ref)
@ -60,13 +58,13 @@
(when-not (and on-change-format (:gradient color))
[:select {:on-change #(-> (dom/get-target-val %) keyword on-change-format)}
[:option {:value "hex"}
(t locale "handoff.attributes.color.hex")]
(tr "handoff.attributes.color.hex")]
[:option {:value "rgba"}
(t locale "handoff.attributes.color.rgba")]
(tr "handoff.attributes.color.rgba")]
[:option {:value "hsla"}
(t locale "handoff.attributes.color.hsla")]])]
(tr "handoff.attributes.color.hsla")]])]
(when copy-data
[:& copy-button {:data copy-data}])]))

25
frontend/src/app/main/ui/viewer/handoff/attributes/layout.cljs
View file

@ -9,7 +9,7 @@
[app.common.spec.radius :as ctr]
[app.main.ui.components.copy-button :refer [copy-button]]
[app.util.code-gen :as cg]
[app.util.i18n :refer [t]]
[app.util.i18n :refer [tr]]
[cuerdas.core :as str]
[rumext.alpha :as mf]))
@ -32,41 +32,41 @@
(cg/generate-css-props shape properties params)))
(mf/defc layout-block
[{:keys [shape locale]}]
[{:keys [shape]}]
(let [selrect (:selrect shape)
{:keys [width height x y]} selrect]
[:*
[:div.attributes-unit-row
[:div.attributes-label (t locale "handoff.attributes.layout.width")]
[:div.attributes-label (tr "handoff.attributes.layout.width")]
[:div.attributes-value width "px"]
[:& copy-button {:data (copy-data selrect :width)}]]
[:div.attributes-unit-row
[:div.attributes-label (t locale "handoff.attributes.layout.height")]
[:div.attributes-label (tr "handoff.attributes.layout.height")]
[:div.attributes-value height "px"]
[:& copy-button {:data (copy-data selrect :height)}]]
(when (not= (:x shape) 0)
[:div.attributes-unit-row
[:div.attributes-label (t locale "handoff.attributes.layout.left")]
[:div.attributes-label (tr "handoff.attributes.layout.left")]
[:div.attributes-value x "px"]
[:& copy-button {:data (copy-data selrect :x)}]])
(when (not= (:y shape) 0)
[:div.attributes-unit-row
[:div.attributes-label (t locale "handoff.attributes.layout.top")]
[:div.attributes-label (tr "handoff.attributes.layout.top")]
[:div.attributes-value y "px"]
[:& copy-button {:data (copy-data selrect :y)}]])
(when (ctr/radius-1? shape)
[:div.attributes-unit-row
[:div.attributes-label (t locale "handoff.attributes.layout.radius")]
[:div.attributes-label (tr "handoff.attributes.layout.radius")]
[:div.attributes-value (:rx shape 0) "px"]
[:& copy-button {:data (copy-data shape :rx)}]])
(when (ctr/radius-4? shape)
[:div.attributes-unit-row
[:div.attributes-label (t locale "handoff.attributes.layout.radius")]
[:div.attributes-label (tr "handoff.attributes.layout.radius")]
[:div.attributes-value
(:r1 shape) ", "
(:r2 shape) ", "
@ -76,19 +76,18 @@
(when (not= (:rotation shape 0) 0)
[:div.attributes-unit-row
[:div.attributes-label (t locale "handoff.attributes.layout.rotation")]
[:div.attributes-label (tr "handoff.attributes.layout.rotation")]
[:div.attributes-value (:rotation shape) "deg"]
[:& copy-button {:data (copy-data shape :rotation)}]])]))
(mf/defc layout-panel
[{:keys [shapes locale]}]
[{:keys [shapes]}]
[:div.attributes-block
[:div.attributes-block-title
[:div.attributes-block-title-text (t locale "handoff.attributes.layout")]
[:div.attributes-block-title-text (tr "handoff.attributes.layout")]
(when (= (count shapes) 1)
[:& copy-button {:data (copy-data (first shapes))}])]
(for [shape shapes]
[:& layout-block {:shape shape
:locale locale}])])
[:& layout-block {:shape shape}])])

20
frontend/src/app/main/ui/viewer/handoff/attributes/stroke.cljs
View file

@ -11,7 +11,7 @@
[app.main.ui.viewer.handoff.attributes.common :refer [color-row]]
[app.util.code-gen :as cg]
[app.util.color :as uc]
[app.util.i18n :refer [t]]
[app.util.i18n :refer [tr]]
[cuerdas.core :as str]
[rumext.alpha :as mf]))
@ -52,7 +52,7 @@
:format #(uc/color->background (shape->color shape))}))
(mf/defc stroke-block
[{:keys [shape locale]}]
[{:keys [shape]}]
(let [color-format (mf/use-state :hex)
color (shape->color shape)]
[:*
@ -65,19 +65,19 @@
stroke-style (if (= stroke-style :svg) :solid stroke-style)
stroke-alignment (or stroke-alignment :center)]
[:div.attributes-stroke-row
[:div.attributes-label (t locale "handoff.attributes.stroke.width")]
[:div.attributes-label (tr "handoff.attributes.stroke.width")]
[:div.attributes-value (:stroke-width shape) "px"]
[:div.attributes-value (->> stroke-style d/name (str "handoff.attributes.stroke.style.") (t locale))]
[:div.attributes-label (->> stroke-alignment d/name (str "handoff.attributes.stroke.alignment.") (t locale))]
[:div.attributes-value (->> stroke-style d/name (str "handoff.attributes.stroke.style.") (tr))]
[:div.attributes-label (->> stroke-alignment d/name (str "handoff.attributes.stroke.alignment.") (tr))]
[:& copy-button {:data (copy-stroke-data shape)}]])]))
(mf/defc stroke-panel
[{:keys [shapes locale]}]
[{:keys [shapes]}]
(let [shapes (->> shapes (filter has-stroke?))]
(when (seq shapes)
[:div.attributes-block
[:div.attributes-block-title
[:div.attributes-block-title-text (t locale "handoff.attributes.stroke")]
[:div.attributes-block-title-text (tr "handoff.attributes.stroke")]
(when (= (count shapes) 1)
[:& copy-button {:data (copy-stroke-data (first shapes))}])]
@ -85,8 +85,6 @@
(if (seq (:strokes shape))
(for [value (:strokes shape [])]
[:& stroke-block {:key (str "stroke-color-" (:id shape))
:shape value
:locale locale}])
:shape value}])
[:& stroke-block {:key (str "stroke-color-" (:id shape))
:shape shape
:locale locale}]))])))
:shape shape}]))])))

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

@ -7,21 +7,56 @@
(ns app.main.ui.viewer.handoff.exports
(:require
[app.common.data :as d]
[app.main.data.exports :as de]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.options.menus.exports :as we]
[app.util.dom :as dom]
[app.util.i18n :refer [tr]]
[app.util.i18n :refer [tr c]]
[rumext.alpha :as mf]))
(mf/defc exports
[{:keys [shape page-id file-id] :as props}]
(let [exports (mf/use-state (:exports shape []))
{::mf/wrap [#(mf/memo % =)]}
[{:keys [shapes page-id file-id type] :as props}]
(let [exports (mf/use-state [])
xstate (mf/deref refs/export)
vstate (mf/deref refs/viewer-data)
page (get-in vstate [:pages page-id])
filename (if (= (count shapes) 1)
(let [sname (-> shapes first :name)
suffix (-> @exports first :suffix)]
(cond-> sname
(and (= 1 (count @exports)) (some? suffix))
(str suffix)))
(:name page))
[on-download loading?] (we/use-download-export shape page-id file-id @exports)
in-progress? (:in-progress xstate)
on-download
(fn [event]
(dom/prevent-default event)
(if (= :multiple type)
(st/emit! (de/show-viewer-export-dialog {:shapes shapes
:exports @exports
:filename filename
:page-id page-id
:file-id file-id}))
;; In other all cases we only allowed to have a single
;; shape-id because multiple shape-ids are handled
;; separatelly by the export-modal.
(let [defaults {:page-id page-id
:file-id file-id
:name filename
:object-id (-> shapes first :id)}
exports (mapv #(merge % defaults) @exports)]
(if (= 1 (count exports))
(st/emit! (de/request-simple-export {:export (first exports)}))
(st/emit! (de/request-multiple-export {:exports exports :filename filename}))))))
add-export
(mf/use-callback
(mf/deps shape)
(mf/deps shapes)
(fn []
(let [xspec {:type :png
:suffix ""
@ -30,7 +65,7 @@
delete-export
(mf/use-callback
(mf/deps shape)
(mf/deps shapes)
(fn [index]
(swap! exports (fn [exports]
(let [[before after] (split-at index exports)]
@ -38,7 +73,7 @@
on-scale-change
(mf/use-callback
(mf/deps shape)
(mf/deps shapes)
(fn [index event]
(let [target (dom/get-target event)
value (dom/get-value target)
@ -47,7 +82,7 @@
on-suffix-change
(mf/use-callback
(mf/deps shape)
(mf/deps shapes)
(fn [index event]
(let [target (dom/get-target event)
value (dom/get-value target)]
@ -55,7 +90,7 @@
on-type-change
(mf/use-callback
(mf/deps shape)
(mf/deps shapes)
(fn [index event]
(let [target (dom/get-target event)
value (dom/get-value target)
@ -63,9 +98,12 @@
(swap! exports assoc-in [index :type] value))))]
(mf/use-effect
(mf/deps shape)
(mf/deps shapes)
(fn []
(reset! exports (:exports shape []))))
(reset! exports (-> (mapv #(:exports % []) shapes)
flatten
distinct
vec))))
[:div.element-set.exports-options
[:div.element-set-title
@ -99,10 +137,10 @@
i/minus]])
[:div.btn-icon-dark.download-button
{:on-click (when-not loading? on-download)
:class (dom/classnames :btn-disabled loading?)
:disabled loading?}
(if loading?
{:on-click (when-not in-progress? on-download)
:class (dom/classnames :btn-disabled in-progress?)
:disabled in-progress?}
(if in-progress?
(tr "workspace.options.exporting-object")
(tr "workspace.options.export-object"))]])]))
(tr "workspace.options.export-object" (c (count shapes))))]])]))

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

@ -20,8 +20,8 @@
[{:keys [frame page file selected]}]
(let [expanded (mf/use-state false)
section (mf/use-state :info #_:code)
shapes (resolve-shapes (:objects page) selected)
first-shape (first shapes)
selected-type (or (:type first-shape) :not-found)

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

@ -6,6 +6,7 @@
(ns app.main.ui.viewer.handoff.selection-feedback
(:require
[app.common.data :as d]
[app.common.geom.shapes :as gsh]
[app.main.ui.measurements :refer [selection-guides size-display measurement]]
[rumext.alpha :as mf]))
@ -21,10 +22,8 @@
(defn resolve-shapes
[objects ids]
(let [resolve-shape #(get objects %)]
(into [] (comp (map resolve-shape)
(filter some?))
ids)))
(let [resolve-shape (d/getf objects)]
(into [] (keep resolve-shape) ids)))
;; ------------------------------------------------
;; HELPERS

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

@ -12,12 +12,13 @@
[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]]
[app.main.ui.formats :as fmt]
[app.main.ui.icons :as i]
[app.main.ui.viewer.comments :refer [comments-menu]]
[app.main.ui.viewer.interactions :refer [flows-menu interactions-menu]]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[app.util.i18n :refer [tr]]
[rumext.alpha :as mf]))
(mf/defc zoom-widget
@ -88,6 +89,7 @@
[:div.view-options])
[:& export-progress-widget]
[:& zoom-widget
{:zoom zoom
:on-increase (st/emitf dv/increase-zoom)

46
frontend/src/app/main/ui/workspace/header.cljs
View file

@ -7,9 +7,11 @@
(ns app.main.ui.workspace.header
(:require
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.config :as cf]
[app.main.data.events :as ev]
[app.main.data.messages :as dm]
[app.main.data.exports :as de]
[app.main.data.messages :as msg]
[app.main.data.modal :as modal]
[app.main.data.workspace :as dw]
[app.main.data.workspace.shortcuts :as sc]
@ -17,6 +19,7 @@
[app.main.repo :as rp]
[app.main.store :as st]
[app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.export :refer [export-progress-widget]]
[app.main.ui.formats :as fmt]
[app.main.ui.hooks.resize :as r]
[app.main.ui.icons :as i]
@ -30,11 +33,12 @@
[potok.core :as ptk]
[rumext.alpha :as mf]))
;; --- Zoom Widget
(def workspace-persistence-ref
(l/derived :workspace-persistence st/state))
;; --- Persistence state Widget
(mf/defc persistence-state-widget
{::mf/wrap [mf/memo]}
[]
@ -60,6 +64,8 @@
[:span.icon i/msg-warning]
[:span.label (tr "workspace.header.save-error")]])]))
;; --- Zoom Widget
(mf/defc zoom-widget-workspace
{::mf/wrap [mf/memo]}
[{:keys [zoom
@ -150,6 +156,11 @@
(dom/prevent-default event)
(reset! editing? true))
on-export-shapes
(mf/use-callback
(fn [_]
(st/emit! (de/show-workspace-export-dialog))))
on-export-file
(mf/use-callback
(mf/deps file team-id)
@ -178,21 +189,20 @@
(mf/deps file frames)
(fn [_]
(when (seq frames)
(let [filename (str (:name file) ".pdf")
frame-ids (mapv :id frames)]
(st/emit! (dm/info (tr "workspace.options.exporting-object")
{:timeout nil}))
(->> (rp/query! :export-frames
{:name (:name file)
:file-id (:id file)
:page-id page-id
:frame-ids frame-ids})
(let [filename (dm/str (:name file) ".pdf")
xform (comp (map :id)
(map (fn [id]
{:file-id (:id file)
:page-id page-id
:frame-id id})))]
(st/emit! (msg/info (tr "workspace.options.exporting-object") {:timeout nil}))
(->> (rp/query! :export-frames (into [] xform frames))
(rx/subs
(fn [body]
(dom/trigger-download filename body))
(fn [_error]
(st/emit! (dm/error (tr "errors.unexpected-error"))))
(st/emitf dm/hide)))))))
(st/emit! (msg/error (tr "errors.unexpected-error"))))
(st/emitf msg/hide)))))))
on-item-hover
(mf/use-callback
@ -269,6 +279,9 @@
[:span (tr "dashboard.remove-shared")]]
[:li {:on-click on-add-shared}
[:span (tr "dashboard.add-shared")]])
[:li.export-file {:on-click on-export-shapes}
[:span (tr "dashboard.export-shapes")]
[:span.shortcut (sc/get-tooltip :export-shapes)]]
[:li.export-file {:on-click on-export-file}
[:span (tr "dashboard.export-single")]]
(when (seq frames)
@ -397,9 +410,9 @@
(mf/defc header
[{:keys [file layout project page-id] :as props}]
(let [team-id (:team-id project)
zoom (mf/deref refs/selected-zoom)
params {:page-id page-id :file-id (:id file) :section "interactions"}
(let [team-id (:team-id project)
zoom (mf/deref refs/selected-zoom)
params {:page-id page-id :file-id (:id file) :section "interactions"}
go-back
(mf/use-callback
@ -429,6 +442,7 @@
[:div.right-area
[:div.options-section
[:& persistence-state-widget]
[:& export-progress-widget]
[:button.document-history
{:alt (tr "workspace.sidebar.history" (sc/get-tooltip :toggle-history))
:class (when (contains? layout :document-history) "selected")

8
frontend/src/app/main/ui/workspace/sidebar/options.cljs
View file

@ -50,7 +50,9 @@
:bool [:& bool/options {:shape shape}]
nil)
[:& exports-menu
{:shape shape
{:ids [(:id shape)]
:values (select-keys shape [:exports])
:shape shape
:page-id page-id
:file-id file-id}]])
@ -82,7 +84,9 @@
:file-id file-id
:shapes-with-children shapes-with-children}]
:else [:& multiple/options {:shapes-with-children shapes-with-children
:shapes selected-shapes}])]]
:shapes selected-shapes
:page-id page-id
:file-id file-id}])]]
[:& tab-element {:id :prototype
:title (tr "workspace.options.prototype")}

193
frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs
View file

@ -7,121 +7,138 @@
(ns app.main.ui.workspace.sidebar.options.menus.exports
(:require
[app.common.data :as d]
[app.main.data.messages :as dm]
[app.main.data.workspace :as udw]
[app.main.data.workspace.persistence :as dwp]
[app.main.repo :as rp]
[app.main.data.exports :as de]
[app.main.data.workspace.changes :as dch]
[app.main.data.workspace.state-helpers :as wsh]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.export]
[app.main.ui.icons :as i]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[beicon.core :as rx]
[app.util.i18n :refer [tr c]]
[rumext.alpha :as mf]))
(defn request-export
[shape exports]
;; Force a persist before exporting otherwise the exported shape could be outdated
(st/emit! ::dwp/force-persist)
(rp/query!
:export
{:page-id (:page-id shape)
:file-id (:file-id shape)
:object-id (:id shape)
:name (:name shape)
:exports exports}))
(defn use-download-export
[shape page-id file-id exports]
(let [loading? (mf/use-state false)
filename (cond-> (:name shape)
(and (= (count exports) 1)
(not (empty (:suffix (first exports)))))
(str (:suffix (first exports))))
on-download-callback
(mf/use-callback
(mf/deps filename shape exports)
(fn [event]
(dom/prevent-default event)
(swap! loading? not)
(->> (request-export (assoc shape :page-id page-id :file-id file-id) exports)
(rx/subs
(fn [body]
(dom/trigger-download filename body))
(fn [_error]
(swap! loading? not)
(st/emit! (dm/error (tr "errors.unexpected-error"))))
(fn []
(swap! loading? not))))))]
[on-download-callback @loading?]))
(def exports-attrs
"Shape attrs that corresponds to exports. Used in other namespaces."
[:exports])
(mf/defc exports-menu
[{:keys [shape page-id file-id] :as props}]
(let [exports (:exports shape [])
{::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type" "page-id" "file-id"]))]}
[{:keys [ids type values page-id file-id] :as props}]
(let [exports (:exports values [])
state (mf/deref refs/export)
in-progress? (:in-progress state)
filename (when (seqable? exports)
(let [shapes (wsh/lookup-shapes @st/state ids)
sname (-> shapes first :name)
suffix (-> exports first :suffix)]
(cond-> sname
(and (= 1 (count exports)) (some? suffix))
(str suffix))))
scale-enabled?
(mf/use-callback
(fn [export]
(#{:png :jpeg} (:type export))))
(fn [export]
(#{:png :jpeg} (:type export))))
[on-download loading?] (use-download-export shape page-id file-id exports)
on-download
(mf/use-fn
(mf/deps ids page-id file-id exports)
(fn [event]
(dom/prevent-default event)
(if (= :multiple type)
(st/emit! (de/show-workspace-export-dialog {:selected ids}))
;; In other all cases we only allowed to have a single
;; shape-id because multiple shape-ids are handled
;; separatelly by the export-modal.
(let [defaults {:page-id page-id
:file-id file-id
:name filename
:object-id (first ids)}
exports (mapv #(merge % defaults) exports)]
(if (= 1 (count exports))
(st/emit! (de/request-simple-export {:export (first exports)}))
(st/emit! (de/request-multiple-export {:exports exports :filename filename})))))))
;; TODO: maybe move to specific events for avoid to have this logic here?
add-export
(mf/use-callback
(mf/deps shape)
(mf/deps ids)
(fn []
(let [xspec {:type :png
:suffix ""
:scale 1}]
(st/emit! (udw/update-shape (:id shape)
{:exports (conj exports xspec)})))))
(let [xspec {:type :png :suffix "" :scale 1}]
(st/emit! (dch/update-shapes ids
(fn [shape]
(assoc shape :exports (into [xspec] (:exports shape)))))))))
delete-export
(mf/use-callback
(mf/deps shape)
(fn [index]
(let [[before after] (split-at index exports)
exports (d/concat-vec before (rest after))]
(st/emit! (udw/update-shape (:id shape)
{:exports exports})))))
(mf/deps ids)
(fn [position]
(let [remove-fill-by-index (fn [values index] (->> (d/enumerate values)
(filterv (fn [[idx _]] (not= idx index)))
(mapv second)))
remove (fn [shape] (update shape :exports remove-fill-by-index position))]
(st/emit! (dch/update-shapes ids remove)))))
on-scale-change
(mf/use-callback
(mf/deps shape)
(mf/deps ids)
(fn [index event]
(let [target (dom/get-target event)
value (dom/get-value target)
value (d/parse-double value)
exports (assoc-in exports [index :scale] value)]
(st/emit! (udw/update-shape (:id shape)
{:exports exports})))))
value (d/parse-double value)]
(st/emit! (dch/update-shapes ids
(fn [shape]
(assoc-in shape [:exports index :scale] value)))))))
on-suffix-change
(mf/use-callback
(mf/deps shape)
(mf/deps ids)
(fn [index event]
(let [target (dom/get-target event)
value (dom/get-value target)
exports (assoc-in exports [index :suffix] value)]
(st/emit! (udw/update-shape (:id shape)
{:exports exports})))))
value (dom/get-value target)]
(st/emit! (dch/update-shapes ids
(fn [shape]
(assoc-in shape [:exports index :suffix] value)))))))
on-type-change
(mf/use-callback
(mf/deps shape)
(mf/deps ids)
(fn [index event]
(let [target (dom/get-target event)
value (dom/get-value target)
value (keyword value)
exports (assoc-in exports [index :type] value)]
(st/emit! (udw/update-shape (:id shape)
{:exports exports})))))]
value (keyword value)]
(st/emit! (dch/update-shapes ids
(fn [shape]
(assoc-in shape [:exports index :type] value)))))))
on-remove-all
(mf/use-callback
(mf/deps ids)
(fn []
(st/emit! (dch/update-shapes ids
(fn [shape]
(assoc shape :exports []))))))]
[:div.element-set.exports-options
[:div.element-set-title
[:span (tr "workspace.options.export")]
[:div.add-page {:on-click add-export} i/close]]
(when (seq exports)
[:span (tr (if (> (count ids) 1) "workspace.options.export-multiple" "workspace.options.export"))]
(when (not (= :multiple exports))
[:div.add-page {:on-click add-export} i/close])]
(cond
(= :multiple exports)
[:div.element-set-options-group
[:div.element-set-label (tr "settings.multiple")]
[:div.element-set-actions
[:div.element-set-actions-button {:on-click on-remove-all}
i/minus]]]
(seq exports)
[:div.element-set-content
(for [[index export] (d/enumerate exports)]
[:div.element-set-options-group
@ -146,14 +163,14 @@
[:option {:value "svg"} "SVG"]
[:option {:value "pdf"} "PDF"]]
[:div.delete-icon {:on-click (partial delete-export index)}
i/minus]])
[:div.btn-icon-dark.download-button
{:on-click (when-not loading? on-download)
:class (dom/classnames
:btn-disabled loading?)
:disabled loading?}
(if loading?
(tr "workspace.options.exporting-object")
(tr "workspace.options.export-object"))]])]))
i/minus]])])
(when (or (= :multiple exports) (seq exports))
[:div.btn-icon-dark.download-button
{:on-click (when-not in-progress? on-download)
:class (dom/classnames
:btn-disabled in-progress?)
:disabled in-progress?}
(if in-progress?
(tr "workspace.options.exporting-object")
(tr "workspace.options.export-object" (c (count ids))))])]))

46
frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs
View file

@ -14,6 +14,7 @@
[app.main.ui.hooks :as hooks]
[app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-attrs blur-menu]]
[app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]]
[app.main.ui.workspace.sidebar.options.menus.exports :refer [exports-attrs exports-menu]]
[app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]]
[app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]]
[app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
@ -36,7 +37,8 @@
:shadow :children
:blur :children
:stroke :shape
:text :children}
:text :children
:exports :shape}
:group
{:measure :shape
@ -46,7 +48,8 @@
:shadow :shape
:blur :shape
:stroke :children
:text :children}
:text :children
:exports :shape}
:path
{:measure :shape
@ -56,7 +59,8 @@
:shadow :shape
:blur :shape
:stroke :shape
:text :ignore}
:text :ignore
:exports :shape}
:text
{:measure :shape
@ -66,7 +70,8 @@
:shadow :shape
:blur :shape
:stroke :shape
:text :text}
:text :text
:exports :shape}
:image
{:measure :shape
@ -76,7 +81,8 @@
:shadow :shape
:blur :shape
:stroke :ignore
:text :ignore}
:text :ignore
:exports :shape}
:rect
{:measure :shape
@ -86,7 +92,8 @@
:shadow :shape
:blur :shape
:stroke :shape
:text :ignore}
:text :ignore
:exports :shape}
:circle
{:measure :shape
@ -96,7 +103,8 @@
:shadow :shape
:blur :shape
:stroke :shape
:text :ignore}
:text :ignore
:exports :shape}
:svg-raw
{:measure :shape
@ -106,7 +114,8 @@
:shadow :shape
:blur :shape
:stroke :shape
:text :ignore}
:text :ignore
:exports :shape}
:bool
{:measure :shape
@ -116,7 +125,8 @@
:shadow :shape
:blur :shape
:stroke :shape
:text :ignore}})
:text :ignore
:exports :shape}})
(def group->attrs
{:measure measure-attrs
@ -126,7 +136,8 @@
:shadow shadow-attrs
:blur blur-attrs
:stroke stroke-attrs
:text ot/attrs})
:text ot/attrs
:exports exports-attrs})
(def shadow-keys [:style :color :offset-x :offset-y :blur :spread])
@ -211,11 +222,13 @@
(dissoc :content)))
(mf/defc options
{::mf/wrap [#(mf/memo' % (mf/check-props ["shapes" "shapes-with-children"]))]
{::mf/wrap [#(mf/memo' % (mf/check-props ["shapes" "shapes-with-children" "page-id" "file-id"]))]
::mf/wrap-props false}
[props]
(let [shapes (unchecked-get props "shapes")
shapes-with-children (unchecked-get props "shapes-with-children")
page-id (unchecked-get props "page-id")
file-id (unchecked-get props "file-id")
objects (->> shapes-with-children (group-by :id) (d/mapm (fn [_ v] (first v))))
show-caps (some #(and (= :path (:type %)) (gsh/open-path? %)) shapes)
@ -235,7 +248,8 @@
shadow-ids shadow-values
blur-ids blur-values
stroke-ids stroke-values
text-ids text-values]
text-ids text-values
exports-ids exports-values]
(mf/use-memo
(mf/deps objects-no-measures)
(fn []
@ -248,7 +262,8 @@
(get-attrs shapes objects-no-measures :shadow)
(get-attrs shapes objects-no-measures :blur)
(get-attrs shapes objects-no-measures :stroke)
(get-attrs shapes objects-no-measures :text)])))]
(get-attrs shapes objects-no-measures :text)
(get-attrs shapes objects-no-measures :exports)])))]
[:div.options
(when-not (empty? measure-ids)
@ -273,4 +288,7 @@
[:& blur-menu {:type type :ids blur-ids :values blur-values}])
(when-not (empty? text-ids)
[:& ot/text-menu {:type type :ids text-ids :values text-values}])]))
[:& ot/text-menu {:type type :ids text-ids :values text-values}])
(when-not (empty? exports-ids)
[:& exports-menu {:type type :ids exports-ids :values exports-values :page-id page-id :file-id file-id}])]))

2
frontend/src/app/util/http.cljs
View file

@ -131,7 +131,7 @@
(defn transit-data
[data]
(reify IBodyData
(-get-body-data [_] (t/encode-str data))
(-get-body-data [_] (t/encode-str data {:type :json-verbose}))
(-update-headers [_ headers]
(assoc headers "content-type" "application/transit+json"))))

119
frontend/src/app/util/websocket.cljs Normal file
View file

@ -0,0 +1,119 @@
;; This Source Code Form is subject to the terms of the Mozilla Public
;; License, v. 2.0. If a copy of the MPL was not distributed with this
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
;;
;; Copyright (c) UXBOX Labs SL
(ns app.util.websocket
"A interface to webworkers exposed functionality."
(:require
[app.common.transit :as t]
[beicon.core :as rx]
[goog.events :as ev])
(:import
goog.net.WebSocket
goog.net.WebSocket.EventType))
(defprotocol IWebSocket
(-stream [_] "Retrieve the message stream")
(-send [_ message] "send a message")
(-close [_] "close websocket")
(-open? [_] "check if the channel is open"))
(defn create
[uri]
(let [sb (rx/subject)
ws (WebSocket. #js {:autoReconnect true})
data (atom {})
lk1 (ev/listen ws EventType.MESSAGE
#(rx/push! sb {:type :message :payload (.-message %)}))
lk2 (ev/listen ws EventType.ERROR
#(rx/push! sb {:type :error :payload %}))
lk3 (ev/listen ws EventType.OPENED
#(rx/push! sb {:type :opened :payload %}))]
(.open ws (str uri))
(reify
IDeref
(-deref [_] (-deref data))
IReset
(-reset! [_ newval]
(-reset! data newval))
ISwap
(-swap! [_ f]
(-swap! data f))
(-swap! [_ f x]
(-swap! data f x))
(-swap! [_ f x y]
(-swap! data f x y))
(-swap! [_ f x y more]
(-swap! data f x y more))
IWatchable
(-notify-watches [_ oldval newval]
(-notify-watches data oldval newval))
(-add-watch [_ key f]
(-add-watch data key f))
(-remove-watch [_ key]
(-remove-watch data key))
IHash
(-hash [_] (goog/getUid ws))
IWebSocket
(-stream [_]
(->> sb
(rx/map (fn [{:keys [type payload] :as message}]
(cond-> message
(= :message type)
(assoc :payload (t/decode-str payload)))))))
(-send [_ msg]
(when (.isOpen ^js ws)
(.send ^js ws msg)))
(-open? [_]
(.isOpen ^js ws))
(-close [_]
(rx/end! sb)
(ev/unlistenByKey lk1)
(ev/unlistenByKey lk2)
(ev/unlistenByKey lk3)
(.close ^js ws)
(.dispose ^js ws)))))
(defn message-event?
^boolean
[msg]
(= (:type msg) :message))
(defn error-event?
^boolean
[msg]
(= (:type msg) :error))
(defn opened-event?
^boolean
[msg]
(= (:type msg) :opened))
(defn send!
[ws msg]
(-send ws (t/encode-str msg)))
(defn close!
[ws]
(-close ws))
(defn open?
[ws]
(-open? ws))
(defn get-rcv-stream
[ws]
(-stream ws))

57
frontend/src/app/util/websockets.cljs
View file

@ -1,57 +0,0 @@
;; This Source Code Form is subject to the terms of the Mozilla Public
;; License, v. 2.0. If a copy of the MPL was not distributed with this
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
;;
;; Copyright (c) UXBOX Labs SL
(ns app.util.websockets
"A interface to webworkers exposed functionality."
(:require
[app.common.transit :as t]
[beicon.core :as rx]
[goog.events :as ev])
(:import
goog.net.WebSocket
goog.net.WebSocket.EventType))
(defprotocol IWebSocket
(-stream [_] "Retrieve the message stream")
(-send [_ message] "send a message")
(-close [_] "close websocket"))
(defn open
[uri]
(let [sb (rx/subject)
ws (WebSocket. #js {:autoReconnect true})
lk1 (ev/listen ws EventType.MESSAGE
#(rx/push! sb {:type :message :payload (.-message %)}))
lk2 (ev/listen ws EventType.ERROR
#(rx/push! sb {:type :error :payload %}))
lk3 (ev/listen ws EventType.OPENED
#(rx/push! sb {:type :opened :payload %}))]
(.open ws (str uri))
(reify
cljs.core/IDeref
(-deref [_] ws)
IWebSocket
(-stream [_] sb)
(-send [_ msg]
(when (.isOpen ^js ws)
(.send ^js ws msg)))
(-close [_]
(rx/end! sb)
(ev/unlistenByKey lk1)
(ev/unlistenByKey lk2)
(ev/unlistenByKey lk3)
(.close ^js ws)
(.dispose ^js ws)))))
(defn message?
[msg]
(= (:type msg) :message))
(defn send!
[ws msg]
(-send ws (t/encode-str msg)))

50
frontend/translations/en.po
View file

@ -256,6 +256,10 @@ msgstr ""
"Oh no! You have no files yet! If you want to try with some templates go "
"to [Libraries & templates](https://penpot.app/libraries-templates.html)"
#: src/app/main/ui/workspace/header.cljs
msgid "dashboard.export-shapes"
msgstr "Exportar"
msgid "dashboard.export-frames"
msgstr "Export artboards to PDF..."
@ -300,6 +304,26 @@ msgstr "Include shared library assets in file libraries"
msgid "dashboard.export.title"
msgstr "Export files"
#: src/app/main/ui/workspace/sidebar/options/menus/exports.cljs
msgid "dashboard.export-shapes.title"
msgstr "Export selection"
#: src/app/main/ui/workspace/sidebar/options/menus/exports.cljs
msgid "dashboard.export-shapes.selected"
msgstr "%s de %s elements selected"
#: src/app/main/ui/workspace/sidebar/options/menus/exports.cljs
msgid "dashboard.export-shapes.no-elements"
msgstr "There are no elements with export settings."
#: src/app/main/ui/workspace/sidebar/options/menus/exports.cljs
msgid "dashboard.export-shapes.how-to"
msgstr "You can add export settings to elements from the design properties (at the bottom of the right sidebar)."
#: src/app/main/ui/workspace/sidebar/options/menus/exports.cljs
msgid "dashboard.export-shapes.how-to-link"
msgstr "Info how to set exports at Penpot."
msgid "dashboard.fonts.deleted-placeholder"
msgstr "Font deleted"
@ -2480,18 +2504,40 @@ msgstr "Design"
msgid "workspace.options.export"
msgstr "Export"
#: src/app/main/ui/workspace/sidebar/options/menus/exports.cljs, src/app/main/ui/handoff/exports.cljs
msgid "workspace.options.export-multiple"
msgstr "Export selection"
#: src/app/main/ui/workspace/sidebar/options/menus/exports.cljs, src/app/main/ui/handoff/exports.cljs
msgid "workspace.options.export-object"
msgstr "Export"
msgid_plural "workspace.options.export-object"
msgstr[0] "Export 1 element"
msgstr[1] "Export %s elements"
#: src/app/main/ui/workspace/sidebar/options/menus/exports.cljs
msgid "workspace.options.export.suffix"
msgstr "Suffix"
#: src/app/main/ui/workspace/sidebar/options/menus/exports.cljs, src/app/main/ui/handoff/exports.cljs
#: src/app/main/ui/workspace/sidebar/options/menus/exports.cljs, src/app/main/ui/handoff/exports.cljs, src/app/main/ui/workspace/header.cljs
msgid "workspace.options.exporting-object"
msgstr "Exporting…"
#: src/app/main/ui/workspace/sidebar/options/menus/exports.cljs, src/app/main/ui/handoff/exports.cljs, src/app/main/ui/workspace/header.cljs
msgid "workspace.options.exporting-object-slow"
msgstr "Export unexpectedly slow"
#: src/app/main/ui/workspace/sidebar/options/menus/exports.cljs, src/app/main/ui/handoff/exports.cljs, src/app/main/ui/workspace/header.cljs
msgid "workspace.options.exporting-object-error"
msgstr "Export failed"
#: src/app/main/ui/workspace/sidebar/options/menus/exports.cljs, src/app/main/ui/handoff/exports.cljs, src/app/main/ui/workspace/header.cljs
msgid "workspace.options.exporting-object-slow"
msgstr "Export unexpectedly slow"
#: src/app/main/ui/workspace/sidebar/options/menus/exports.cljs, src/app/main/ui/handoff/exports.cljs, src/app/main/ui/workspace/header.cljs
msgid "workspace.options.retry"
msgstr "Retry"
#: src/app/main/ui/workspace/sidebar/options/menus/fill.cljs
msgid "workspace.options.fill"
msgstr "Fill"

48
frontend/translations/es.po
View file

@ -260,6 +260,10 @@ msgstr ""
"¡Oh, no! ¡Aún no tienes archivos! Si quieres probar con alguna plantilla ve a "
"[Bibliotecas y plantillas](https://penpot.app/libraries-templates.html)"
#: src/app/main/ui/workspace/header.cljs
msgid "dashboard.export-shapes"
msgstr "Exportar"
msgid "dashboard.export-frames"
msgstr "Exportar tableros a PDF..."
@ -304,6 +308,26 @@ msgstr "Incluir librerias compartidas dentro de las librerias del fichero"
msgid "dashboard.export.title"
msgstr "Exportar ficheros"
#: src/app/main/ui/workspace/sidebar/options/menus/exports.cljs
msgid "dashboard.export-shapes.title"
msgstr "Exportar selección"
#: src/app/main/ui/workspace/sidebar/options/menus/exports.cljs
msgid "dashboard.export-shapes.selected"
msgstr "%s de %s elementos seleccionados"
#: src/app/main/ui/workspace/sidebar/options/menus/exports.cljs
msgid "dashboard.export-shapes.no-elements"
msgstr "No hay elementos con configuraciones de exportación."
#: src/app/main/ui/workspace/sidebar/options/menus/exports.cljs
msgid "dashboard.export-shapes.how-to"
msgstr " Puedes añadir configuraciones de exportación a elementos desde las propiedades de diseño (al final del lateral derecho)."
#: src/app/main/ui/workspace/sidebar/options/menus/exports.cljs
msgid "dashboard.export-shapes.how-to-link"
msgstr "Información sobre cómo configurar exportaciones en Penpot."
msgid "dashboard.fonts.deleted-placeholder"
msgstr "Fuente eliminada."
@ -2496,17 +2520,35 @@ msgstr "Diseño"
msgid "workspace.options.export"
msgstr "Exportar"
#: src/app/main/ui/workspace/sidebar/options/menus/exports.cljs, src/app/main/ui/handoff/exports.cljs
msgid "workspace.options.export-multiple"
msgstr "Exportar selección"
#: src/app/main/ui/workspace/sidebar/options/menus/exports.cljs, src/app/main/ui/handoff/exports.cljs
msgid "workspace.options.export-object"
msgstr "Exportar"
msgid_plural "workspace.options.export-object"
msgstr[0] "Exportar 1 elemento"
msgstr[1] "Exportar %s elementos"
#: src/app/main/ui/workspace/sidebar/options/menus/exports.cljs
msgid "workspace.options.export.suffix"
msgstr "Sufijo"
#: src/app/main/ui/workspace/sidebar/options/menus/exports.cljs, src/app/main/ui/handoff/exports.cljs
#: src/app/main/ui/workspace/sidebar/options/menus/exports.cljs, src/app/main/ui/handoff/exports.cljs, src/app/main/ui/workspace/header.cljs
msgid "workspace.options.exporting-object"
msgstr "Exportando"
msgstr "Exportando..."
#: src/app/main/ui/workspace/sidebar/options/menus/exports.cljs, src/app/main/ui/handoff/exports.cljs, src/app/main/ui/workspace/header.cljs
msgid "workspace.options.exporting-object-slow"
msgstr "Exportación lenta"
#: src/app/main/ui/workspace/sidebar/options/menus/exports.cljs, src/app/main/ui/handoff/exports.cljs, src/app/main/ui/workspace/header.cljs
msgid "workspace.options.retry"
msgstr "Reintentar"
#: src/app/main/ui/workspace/sidebar/options/menus/exports.cljs, src/app/main/ui/handoff/exports.cljs, src/app/main/ui/workspace/header.cljs
msgid "workspace.options.exporting-object-error"
msgstr "Exportación fallida"
#: src/app/main/ui/workspace/sidebar/options/menus/fill.cljs
msgid "workspace.options.fill"