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

Merge pull request #3460 from penpot/niwinz-develop-enhancements-2

Browse source 
✨ Several enhancements (performance and code style)
This commit is contained in:
Alejandro 2023-08-09 08:30:00 +02:00 • committed by GitHub
commit 6ceb816362
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 328 additions and 294 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -87,7 +87,7 @@
[:* [:*
#_[:div.modal-wrapper #_[:div.modal-wrapper
#_[:& app.main.ui.releases/release-notes-modal {:version "1.16"}] #_[:& app.main.ui.releases/release-notes-modal {:version "1.19"}]
#_[:& app.main.ui.onboarding/onboarding-templates-modal] #_[:& app.main.ui.onboarding/onboarding-templates-modal]
#_[:& app.main.ui.onboarding/onboarding-modal] #_[:& app.main.ui.onboarding/onboarding-modal]
#_[:& app.main.ui.onboarding/onboarding-team-modal]] #_[:& app.main.ui.onboarding/onboarding-team-modal]]

169
frontend/src/app/main/ui/dashboard/export.cljs
View file

@ -7,6 +7,7 @@
(ns app.main.ui.dashboard.export (ns app.main.ui.dashboard.export
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.data.macros :as dm]
[app.main.data.modal :as modal] [app.main.data.modal :as modal]
[app.main.features :as features] [app.main.features :as features]
[app.main.store :as st] [app.main.store :as st]
@ -20,8 +21,8 @@
(def ^:const options [:all :merge :detach]) (def ^:const options [:all :merge :detach])
(mf/defc export-entry (mf/defc export-entry
{::mf/wrap-props false}
[{:keys [file]}] [{:keys [file]}]
[:div.file-entry [:div.file-entry
{:class (dom/classnames {:class (dom/classnames
:loading (:loading? file) :loading (:loading? file)
@ -35,72 +36,89 @@
[:div.file-name-label (:name file)]]]) [:div.file-name-label (:name file)]]])
(defn mark-file-error [files file-id] (defn- mark-file-error
(->> files [files file-id]
(mapv #(cond-> % (mapv #(cond-> %
(= file-id (:id %)) (= file-id (:id %))
(assoc :export-error? true (assoc :export-error? true
:loading? false))))) :loading? false))
files))
(defn mark-file-success [files file-id] (defn- mark-file-success
(->> files [files file-id]
(mapv #(cond-> % (mapv #(cond-> %
(= file-id (:id %)) (= file-id (:id %))
(assoc :export-success? true (assoc :export-success? true
:loading? false))))) :loading? false))
files))
(def export-types
[:all :merge :detach])
(mf/defc export-dialog (mf/defc export-dialog
{::mf/register modal/components {::mf/register modal/components
::mf/register-as :export} ::mf/register-as :export
::mf/wrap-props false}
[{:keys [team-id files has-libraries? binary?]}] [{:keys [team-id files has-libraries? binary?]}]
(let [state (mf/use-state {:status :prepare (let [components-v2 (features/use-feature :components-v2)
:files (->> files (mapv #(assoc % :loading? true)))}) state* (mf/use-state
selected-option (mf/use-state :all) #(let [files (mapv (fn [file] (assoc file :loading? true)) files)]
{:status :prepare
:selected :all
:files files}))
components-v2 (features/use-feature :components-v2) state (deref state*)
selected (:selected state)
status (:status state)
start-export start-export
(fn [] (mf/use-fn
(swap! state assoc :status :exporting) (mf/deps team-id selected files components-v2)
(->> (uw/ask-many! (fn []
{:cmd (if binary? :export-binary-file :export-standard-file) (swap! state* assoc :status :exporting)
:team-id team-id (->> (uw/ask-many!
:export-type @selected-option {:cmd (if binary? :export-binary-file :export-standard-file)
:files files :team-id team-id
:components-v2 components-v2}) :export-type selected
(rx/delay-emit 1000) :files files
(rx/subs :components-v2 components-v2})
(fn [msg] (rx/delay-emit 1000)
(when (= :error (:type msg)) (rx/subs
(swap! state update :files mark-file-error (:file-id msg))) (fn [msg]
(cond
(= :error (:type msg))
(swap! state* update :files mark-file-error (:file-id msg))
(when (= :finish (:type msg)) (= :finish (:type msg))
(swap! state update :files mark-file-success (:file-id msg)) (do
(dom/trigger-download-uri (:filename msg) (:mtype msg) (:uri msg))))))) (swap! state* update :files mark-file-success (:file-id msg))
(dom/trigger-download-uri (:filename msg) (:mtype msg) (:uri msg)))))))))
cancel-fn on-cancel
(mf/use-callback (mf/use-fn
(fn [event] (fn [event]
(dom/prevent-default event) (dom/prevent-default event)
(st/emit! (modal/hide)))) (st/emit! (modal/hide))))
accept-fn on-accept
(mf/use-callback (mf/use-fn
(mf/deps @selected-option) (mf/deps start-export)
(fn [event] (fn [event]
(dom/prevent-default event) (dom/prevent-default event)
(start-export))) (start-export)))
on-change-handler on-change
(mf/use-callback (mf/use-fn
(fn [_ type] (fn [event]
(reset! selected-option type)))] (let [type (-> (dom/get-target event)
(dom/get-data "type")
(keyword))]
(swap! state* assoc :selected type))))]
(mf/use-effect (mf/with-effect [has-libraries?]
(fn [] ;; Start download automatically when no libraries
(when-not has-libraries? (when-not has-libraries?
;; Start download automatically (start-export)))
(start-export))))
[:div.modal-overlay [:div.modal-overlay
[:div.modal-container.export-dialog [:div.modal-container.export-dialog
@ -109,52 +127,53 @@
[:h2 (tr "dashboard.export.title")]] [:h2 (tr "dashboard.export.title")]]
[:div.modal-close-button [:div.modal-close-button
{:on-click cancel-fn} i/close]] {:on-click on-cancel} i/close]]
(cond (cond
(= (:status @state) :prepare) (= status :prepare)
[:* [:*
[:div.modal-content [:div.modal-content
[:p.explain (tr "dashboard.export.explain")] [:p.explain (tr "dashboard.export.explain")]
[:p.detail (tr "dashboard.export.detail")] [:p.detail (tr "dashboard.export.detail")]
(for [type [:all :merge :detach]] (for [type export-types]
(let [selected? (= @selected-option type)] [:div.export-option {:class (when (= selected type) "selected")
[:div.export-option {:class (when selected? "selected")} :key (name type)}
[:label.option-container [:label.option-container
;; Execution time translation strings: ;; Execution time translation strings:
;; dashboard.export.options.all.message ;; dashboard.export.options.all.message
;; dashboard.export.options.all.title ;; dashboard.export.options.all.title
;; dashboard.export.options.detach.message ;; dashboard.export.options.detach.message
;; dashboard.export.options.detach.title ;; dashboard.export.options.detach.title
;; dashboard.export.options.merge.message ;; dashboard.export.options.merge.message
;; dashboard.export.options.merge.title ;; dashboard.export.options.merge.title
[:h3 (tr (str "dashboard.export.options." (d/name type) ".title"))] [:h3 (tr (dm/str "dashboard.export.options." (d/name type) ".title"))]
[:p (tr (str "dashboard.export.options." (d/name type) ".message"))] [:p (tr (dm/str "dashboard.export.options." (d/name type) ".message"))]
[:input {:type "radio" [:input {:type "radio"
:checked selected? :checked (= selected type)
:on-change #(on-change-handler % type) :data-type (name type)
:name "export-option"}] :on-change on-change
[:span {:class "option-radio-check"}]]]))] :name "export-option"}]
[:span {:class "option-radio-check"}]]])]
[:div.modal-footer [:div.modal-footer
[:div.action-buttons [:div.action-buttons
[:input.cancel-button [:input.cancel-button
{:type "button" {:type "button"
:value (tr "labels.cancel") :value (tr "labels.cancel")
:on-click cancel-fn}] :on-click on-cancel}]
[:input.accept-button [:input.accept-button
{:class "primary" {:class "primary"
:type "button" :type "button"
:value (tr "labels.continue") :value (tr "labels.continue")
:on-click accept-fn}]]]] :on-click on-accept}]]]]
(= (:status @state) :exporting) (= status :exporting)
[:* [:*
[:div.modal-content [:div.modal-content
(for [file (:files @state)] (for [file (:files state)]
[:& export-entry {:file file}])] [:& export-entry {:file file :key (dm/str (:id file))}])]
[:div.modal-footer [:div.modal-footer
[:div.action-buttons [:div.action-buttons
@ -162,5 +181,5 @@
{:class "primary" {:class "primary"
:type "button" :type "button"
:value (tr "labels.close") :value (tr "labels.close")
:disabled (->> @state :files (some :loading?)) :disabled (->> state :files (some :loading?))
:on-click cancel-fn}]]]])]])) :on-click on-cancel}]]]])]]))

43
frontend/src/app/main/ui/releases.cljs
View file

@ -33,40 +33,41 @@
;;; --- RELEASE NOTES MODAL ;;; --- RELEASE NOTES MODAL
(mf/defc release-notes (mf/defc release-notes
[{:keys [version] :as props}] {::mf/wrap-props false}
(let [slide (mf/use-state :start) [{:keys [version]}]
klass (mf/use-state "fadeInDown") (let [slide* (mf/use-state :start)
slide (deref slide*)
klass* (mf/use-state "fadeInDown")
klass (deref klass*)
navigate navigate
(mf/use-callback #(reset! slide %)) (mf/use-fn #(reset! slide* %))
next next
(mf/use-callback (mf/use-fn
(mf/deps slide) (mf/deps slide)
(fn [] (fn []
(if (= @slide :start) (if (= slide :start)
(navigate 0) (navigate 0)
(navigate (inc @slide))))) (navigate (inc slide)))))
finish finish
(mf/use-callback (mf/use-fn
(mf/deps version)
#(st/emit! (modal/hide) #(st/emit! (modal/hide)
(du/mark-onboarding-as-viewed {:version version})))] (du/mark-onboarding-as-viewed {:version version})))]
(mf/use-effect (mf/with-effect []
(mf/deps) #(st/emit! (du/mark-onboarding-as-viewed {:version version})))
(fn []
#(st/emit! (du/mark-onboarding-as-viewed {:version version}))))
(mf/use-layout-effect (mf/with-effect [slide]
(mf/deps @slide) (when (not= :start slide)
(fn [] (reset! klass* "fadeIn"))
(when (not= :start @slide) (let [sem (tm/schedule 300 #(reset! klass* nil))]
(reset! klass "fadeIn")) (fn []
(let [sem (tm/schedule 300 #(reset! klass nil))] (reset! klass* nil)
(fn [] (tm/dispose! sem))))
(reset! klass nil)
(tm/dispose! sem)))))
(rc/render-release-notes (rc/render-release-notes
{:next next {:next next

2
frontend/src/app/main/ui/releases/v1_10.cljs
View file

@ -13,7 +13,7 @@
[{:keys [klass finish version]}] [{:keys [klass finish version]}]
(mf/html (mf/html
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/beta-on.jpg" :border "0" :alt "Penpot is now BETA"}]] [:img {:src "images/beta-on.jpg" :border "0" :alt "Penpot is now BETA"}]]

16
frontend/src/app/main/ui/releases/v1_11.cljs
View file

@ -12,10 +12,10 @@
(defmethod c/render-release-notes "1.11" (defmethod c/render-release-notes "1.11"
[{:keys [slide klass next finish navigate version]}] [{:keys [slide klass next finish navigate version]}]
(mf/html (mf/html
(case @slide (case slide
:start :start
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/login-on.jpg" :border "0" :alt "What's new Beta release 1.11"}]] [:img {:src "images/login-on.jpg" :border "0" :alt "What's new Beta release 1.11"}]]
@ -33,7 +33,7 @@
0 0
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/1.11-animations.gif" :border "0" :alt "Animations"}]] [:img {:src "images/features/1.11-animations.gif" :border "0" :alt "Animations"}]]
@ -46,13 +46,13 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click next} "Continue"] [:button.btn-secondary {:on-click next} "Continue"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 3}]]]]]] :total 3}]]]]]]
1 1
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/1.11-bg-export.gif" :border "0" :alt "Ignore background on export"}]] [:img {:src "images/features/1.11-bg-export.gif" :border "0" :alt "Ignore background on export"}]]
@ -65,13 +65,13 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click next} "Continue"] [:button.btn-secondary {:on-click next} "Continue"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 3}]]]]]] :total 3}]]]]]]
2 2
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/1.11-zoom-widget.gif" :border "0" :alt "New zoom widget"}]] [:img {:src "images/features/1.11-zoom-widget.gif" :border "0" :alt "New zoom widget"}]]
@ -84,6 +84,6 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click finish} "Start!"] [:button.btn-secondary {:on-click finish} "Start!"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 3}]]]]]]))) :total 3}]]]]]])))

20
frontend/src/app/main/ui/releases/v1_12.cljs
View file

@ -12,10 +12,10 @@
(defmethod c/render-release-notes "1.12" (defmethod c/render-release-notes "1.12"
[{:keys [slide klass next finish navigate version]}] [{:keys [slide klass next finish navigate version]}]
(mf/html (mf/html
(case @slide (case slide
:start :start
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/login-on.jpg" :border "0" :alt "What's new Beta release 1.12"}]] [:img {:src "images/login-on.jpg" :border "0" :alt "What's new Beta release 1.12"}]]
@ -33,7 +33,7 @@
0 0
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/1.12-ui.gif" :border "0" :alt "Adjustable UI"}]] [:img {:src "images/features/1.12-ui.gif" :border "0" :alt "Adjustable UI"}]]
@ -46,13 +46,13 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click next} "Continue"] [:button.btn-secondary {:on-click next} "Continue"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]] :total 4}]]]]]]
1 1
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/1.12-guides.gif" :border "0" :alt "Guides"}]] [:img {:src "images/features/1.12-guides.gif" :border "0" :alt "Guides"}]]
@ -65,13 +65,13 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click next} "Continue"] [:button.btn-secondary {:on-click next} "Continue"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]] :total 4}]]]]]]
2 2
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/1.12-scrollbars.gif" :border "0" :alt "Scrollbars"}]] [:img {:src "images/features/1.12-scrollbars.gif" :border "0" :alt "Scrollbars"}]]
@ -83,13 +83,13 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click next} "Continue"] [:button.btn-secondary {:on-click next} "Continue"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]] :total 4}]]]]]]
3 3
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/1.12-nudge.gif" :border "0" :alt "Nudge amount"}]] [:img {:src "images/features/1.12-nudge.gif" :border "0" :alt "Nudge amount"}]]
@ -102,6 +102,6 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click finish} "Start!"] [:button.btn-secondary {:on-click finish} "Start!"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]]))) :total 4}]]]]]])))

20
frontend/src/app/main/ui/releases/v1_13.cljs
View file

@ -12,10 +12,10 @@
(defmethod c/render-release-notes "1.13" (defmethod c/render-release-notes "1.13"
[{:keys [slide klass next finish navigate version]}] [{:keys [slide klass next finish navigate version]}]
(mf/html (mf/html
(case @slide (case slide
:start :start
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/login-on.jpg" :border "0" :alt "What's new Beta release 1.13"}]] [:img {:src "images/login-on.jpg" :border "0" :alt "What's new Beta release 1.13"}]]
@ -33,7 +33,7 @@
0 0
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/1.13-multi-export.gif" :border "0" :alt "Multiple exports"}]] [:img {:src "images/features/1.13-multi-export.gif" :border "0" :alt "Multiple exports"}]]
@ -46,13 +46,13 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click next} "Continue"] [:button.btn-secondary {:on-click next} "Continue"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]] :total 4}]]]]]]
1 1
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/1.13-multiple-fills.gif" :border "0" :alt "Multiple fills and strokes"}]] [:img {:src "images/features/1.13-multiple-fills.gif" :border "0" :alt "Multiple fills and strokes"}]]
@ -65,13 +65,13 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click next} "Continue"] [:button.btn-secondary {:on-click next} "Continue"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]] :total 4}]]]]]]
2 2
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/1.13-members.gif" :border "0" :alt "Members area redesign"}]] [:img {:src "images/features/1.13-members.gif" :border "0" :alt "Members area redesign"}]]
@ -84,13 +84,13 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click next} "Continue"] [:button.btn-secondary {:on-click next} "Continue"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]] :total 4}]]]]]]
3 3
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/1.13-focus.gif" :border "0" :alt "Focus mode"}]] [:img {:src "images/features/1.13-focus.gif" :border "0" :alt "Focus mode"}]]
@ -103,6 +103,6 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click finish} "Start!"] [:button.btn-secondary {:on-click finish} "Start!"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]]))) :total 4}]]]]]])))

20
frontend/src/app/main/ui/releases/v1_14.cljs
View file

@ -12,10 +12,10 @@
(defmethod c/render-release-notes "1.14" (defmethod c/render-release-notes "1.14"
[{:keys [slide klass next finish navigate version]}] [{:keys [slide klass next finish navigate version]}]
(mf/html (mf/html
(case @slide (case slide
:start :start
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/login-on.jpg" :border "0" :alt "What's new Beta release 1.14"}]] [:img {:src "images/login-on.jpg" :border "0" :alt "What's new Beta release 1.14"}]]
@ -33,7 +33,7 @@
0 0
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/1.14-shortcuts.gif" :border "0" :alt "Shortcuts panel"}]] [:img {:src "images/features/1.14-shortcuts.gif" :border "0" :alt "Shortcuts panel"}]]
@ -46,13 +46,13 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click next} "Continue"] [:button.btn-secondary {:on-click next} "Continue"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]] :total 4}]]]]]]
1 1
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/1.14-color-group.gif" :border "0" :alt "Colors selection"}]] [:img {:src "images/features/1.14-color-group.gif" :border "0" :alt "Colors selection"}]]
@ -65,13 +65,13 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click next} "Continue"] [:button.btn-secondary {:on-click next} "Continue"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]] :total 4}]]]]]]
2 2
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/1.14-fix-on-scroll.gif" :border "0" :alt "Fix elements at scroll"}]] [:img {:src "images/features/1.14-fix-on-scroll.gif" :border "0" :alt "Fix elements at scroll"}]]
@ -84,13 +84,13 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click next} "Continue"] [:button.btn-secondary {:on-click next} "Continue"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]] :total 4}]]]]]]
3 3
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/1.14-group-assets.gif" :border "0" :alt "Group library assets with drag & drop"}]] [:img {:src "images/features/1.14-group-assets.gif" :border "0" :alt "Group library assets with drag & drop"}]]
@ -103,6 +103,6 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click finish} "Start!"] [:button.btn-secondary {:on-click finish} "Start!"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]]))) :total 4}]]]]]])))

20
frontend/src/app/main/ui/releases/v1_15.cljs
View file

@ -12,10 +12,10 @@
(defmethod c/render-release-notes "1.15" (defmethod c/render-release-notes "1.15"
[{:keys [slide klass next finish navigate version]}] [{:keys [slide klass next finish navigate version]}]
(mf/html (mf/html
(case @slide (case slide
:start :start
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/login-on.jpg" :border "0" :alt "What's new Beta release 1.15"}]] [:img {:src "images/login-on.jpg" :border "0" :alt "What's new Beta release 1.15"}]]
@ -33,7 +33,7 @@
0 0
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/1.15-nested-boards.gif" :border "0" :alt "Nested boards"}]] [:img {:src "images/features/1.15-nested-boards.gif" :border "0" :alt "Nested boards"}]]
@ -46,13 +46,13 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click next} "Continue"] [:button.btn-secondary {:on-click next} "Continue"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]] :total 4}]]]]]]
1 1
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/1.15-share.gif" :border "0" :alt "Share prototype options"}]] [:img {:src "images/features/1.15-share.gif" :border "0" :alt "Share prototype options"}]]
@ -65,13 +65,13 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click next} "Continue"] [:button.btn-secondary {:on-click next} "Continue"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]] :total 4}]]]]]]
2 2
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/1.15-comments.gif" :border "0" :alt "Comments positioning"}]] [:img {:src "images/features/1.15-comments.gif" :border "0" :alt "Comments positioning"}]]
@ -84,13 +84,13 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click next} "Continue"] [:button.btn-secondary {:on-click next} "Continue"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]] :total 4}]]]]]]
3 3
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/1.15-view-mode.gif" :border "0" :alt "View Mode improvements"}]] [:img {:src "images/features/1.15-view-mode.gif" :border "0" :alt "View Mode improvements"}]]
@ -103,6 +103,6 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click finish} "Start!"] [:button.btn-secondary {:on-click finish} "Start!"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]]))) :total 4}]]]]]])))

22
frontend/src/app/main/ui/releases/v1_16.cljs
View file

@ -12,10 +12,10 @@
(defmethod c/render-release-notes "1.16" (defmethod c/render-release-notes "1.16"
[{:keys [slide klass next finish navigate version]}] [{:keys [slide klass next finish navigate version]}]
(mf/html (mf/html
(case @slide (case slide
:start :start
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/login-on.jpg" :border "0" :alt "What's new Beta release 1.16"}]] [:img {:src "images/login-on.jpg" :border "0" :alt "What's new Beta release 1.16"}]]
@ -33,7 +33,7 @@
0 0
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/1.16-dashboard.gif" :border "0" :alt "Dashboard refreshed look & feel"}]] [:img {:src "images/features/1.16-dashboard.gif" :border "0" :alt "Dashboard refreshed look & feel"}]]
@ -46,13 +46,13 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click next} "Continue"] [:button.btn-secondary {:on-click next} "Continue"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]] :total 4}]]]]]]
1 1
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/1.16-slider.gif" :border "0" :alt "Libraries & templates module"}]] [:img {:src "images/features/1.16-slider.gif" :border "0" :alt "Libraries & templates module"}]]
@ -60,18 +60,18 @@
[:div.modal-title [:div.modal-title
[:h2 "Libraries & templates module"]] [:h2 "Libraries & templates module"]]
[:div.modal-content [:div.modal-content
[:p "This new module will allow you to import a curated selection of the files that are available at the Libraries & Templates page directly from your projects dashboard."] [:p "This new module will allow you to import a curated selection of the files that are available at the Libraries & Templates page directly from your projects dashboard."]
[:p "You no longer need to to download most of them to the computer before importing."]] [:p "You no longer need to to download most of them to the computer before importing."]]
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click next} "Continue"] [:button.btn-secondary {:on-click next} "Continue"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]] :total 4}]]]]]]
2 2
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/1.16-onboarding.gif" :border "0" :alt "Improved onboarding"}]] [:img {:src "images/features/1.16-onboarding.gif" :border "0" :alt "Improved onboarding"}]]
@ -84,13 +84,13 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click next} "Continue"] [:button.btn-secondary {:on-click next} "Continue"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]] :total 4}]]]]]]
3 3
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/1.16-click-zoom.gif" :border "0" :alt "Zoom to shape with double click"}]] [:img {:src "images/features/1.16-click-zoom.gif" :border "0" :alt "Zoom to shape with double click"}]]
@ -103,6 +103,6 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click finish} "Start!"] [:button.btn-secondary {:on-click finish} "Start!"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]]))) :total 4}]]]]]])))

22
frontend/src/app/main/ui/releases/v1_17.cljs
View file

@ -12,10 +12,10 @@
(defmethod c/render-release-notes "1.17" (defmethod c/render-release-notes "1.17"
[{:keys [slide klass next finish navigate version]}] [{:keys [slide klass next finish navigate version]}]
(mf/html (mf/html
(case @slide (case slide
:start :start
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/onboarding-version.jpg" :border "0" :alt "What's new release 1.17"}]] [:img {:src "images/onboarding-version.jpg" :border "0" :alt "What's new release 1.17"}]]
@ -33,7 +33,7 @@
0 0
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/1.17-flex-layout.gif" :border "0" :alt "Flex-Layout"}]] [:img {:src "images/features/1.17-flex-layout.gif" :border "0" :alt "Flex-Layout"}]]
@ -46,13 +46,13 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click next} "Continue"] [:button.btn-secondary {:on-click next} "Continue"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]] :total 4}]]]]]]
1 1
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/1.17-inspect.gif" :border "0" :alt "Inspect at the workspace"}]] [:img {:src "images/features/1.17-inspect.gif" :border "0" :alt "Inspect at the workspace"}]]
@ -60,18 +60,18 @@
[:div.modal-title [:div.modal-title
[:h2 "Inspect at the workspace"]] [:h2 "Inspect at the workspace"]]
[:div.modal-content [:div.modal-content
[:p "Now you can inspect designs to get measures, properties and production-ready code right at the workspace, so designers and developers can share the same space while working."] [:p "Now you can inspect designs to get measures, properties and production-ready code right at the workspace, so designers and developers can share the same space while working."]
[:p "Also, inspect mode provides a safer view-only mode and other improvements."]] [:p "Also, inspect mode provides a safer view-only mode and other improvements."]]
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click next} "Continue"] [:button.btn-secondary {:on-click next} "Continue"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]] :total 4}]]]]]]
2 2
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/1.17-webhook.gif" :border "0" :alt "Webhooks"}]] [:img {:src "images/features/1.17-webhook.gif" :border "0" :alt "Webhooks"}]]
@ -84,13 +84,13 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click next} "Continue"] [:button.btn-secondary {:on-click next} "Continue"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]] :total 4}]]]]]]
3 3
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/1.17-ally.gif" :border "0" :alt "Accessibility improvements"}]] [:img {:src "images/features/1.17-ally.gif" :border "0" :alt "Accessibility improvements"}]]
@ -103,6 +103,6 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click finish} "Start!"] [:button.btn-secondary {:on-click finish} "Start!"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]]))) :total 4}]]]]]])))

22
frontend/src/app/main/ui/releases/v1_18.cljs
View file

@ -12,10 +12,10 @@
(defmethod c/render-release-notes "1.18" (defmethod c/render-release-notes "1.18"
[{:keys [slide klass next finish navigate version]}] [{:keys [slide klass next finish navigate version]}]
(mf/html (mf/html
(case @slide (case slide
:start :start
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/onboarding-version.jpg" :border "0" :alt "What's new release 1.18"}]] [:img {:src "images/onboarding-version.jpg" :border "0" :alt "What's new release 1.18"}]]
@ -33,7 +33,7 @@
0 0
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/1.18-spacing.gif" :border "0" :alt "Spacing management"}]] [:img {:src "images/features/1.18-spacing.gif" :border "0" :alt "Spacing management"}]]
@ -46,13 +46,13 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click next} "Continue"] [:button.btn-secondary {:on-click next} "Continue"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]] :total 4}]]]]]]
1 1
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/1.18-absolute.gif" :border "0" :alt "Position absolute feature"}]] [:img {:src "images/features/1.18-absolute.gif" :border "0" :alt "Position absolute feature"}]]
@ -60,18 +60,18 @@
[:div.modal-title [:div.modal-title
[:h2 "Absolute position elements in Flex layout"]] [:h2 "Absolute position elements in Flex layout"]]
[:div.modal-content [:div.modal-content
[:p "Sometimes you need to freely position an element in a specific place regardless of the size of the layout where it belongs."] [:p "Sometimes you need to freely position an element in a specific place regardless of the size of the layout where it belongs."]
[:p "Now you can exclude elements from the Flex layout flow using absolute position."]] [:p "Now you can exclude elements from the Flex layout flow using absolute position."]]
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click next} "Continue"] [:button.btn-secondary {:on-click next} "Continue"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]] :total 4}]]]]]]
2 2
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/1.18-z-index.gif" :border "0" :alt "Z-index feature"}]] [:img {:src "images/features/1.18-z-index.gif" :border "0" :alt "Z-index feature"}]]
@ -84,13 +84,13 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click next} "Continue"] [:button.btn-secondary {:on-click next} "Continue"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]] :total 4}]]]]]]
3 3
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/1.18-scale.gif" :border "0" :alt "Scale content proportionally"}]] [:img {:src "images/features/1.18-scale.gif" :border "0" :alt "Scale content proportionally"}]]
@ -103,6 +103,6 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click finish} "Start!"] [:button.btn-secondary {:on-click finish} "Start!"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]]))) :total 4}]]]]]])))

12
frontend/src/app/main/ui/releases/v1_19.cljs
View file

@ -12,10 +12,10 @@
(defmethod c/render-release-notes "1.19" (defmethod c/render-release-notes "1.19"
[{:keys [slide klass next finish navigate version]}] [{:keys [slide klass next finish navigate version]}]
(mf/html (mf/html
(case @slide (case slide
:start :start
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/onboarding-version.jpg" [:img {:src "images/onboarding-version.jpg"
@ -42,7 +42,7 @@
0 0
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/1.19-contributions.png" [:img {:src "images/features/1.19-contributions.png"
@ -73,13 +73,13 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click next} "Continue"] [:button.btn-secondary {:on-click next} "Continue"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 2}]]]]]] :total 2}]]]]]]
1 1
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/1.19-tokens.gif" [:img {:src "images/features/1.19-tokens.gif"
@ -100,7 +100,7 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click finish} "Start!"] [:button.btn-secondary {:on-click finish} "Start!"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 2}]]]]]]))) :total 2}]]]]]])))

20
frontend/src/app/main/ui/releases/v1_4.cljs
View file

@ -12,10 +12,10 @@
(defmethod c/render-release-notes "1.4" (defmethod c/render-release-notes "1.4"
[{:keys [slide klass next finish navigate version]}] [{:keys [slide klass next finish navigate version]}]
(mf/html (mf/html
(case @slide (case slide
:start :start
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/login-on.jpg" :border "0" :alt "What's new Alpha release 1.4.0"}]] [:img {:src "images/login-on.jpg" :border "0" :alt "What's new Alpha release 1.4.0"}]]
@ -33,7 +33,7 @@
0 0
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/select-files.gif" :border "0" :alt "New file selection"}]] [:img {:src "images/features/select-files.gif" :border "0" :alt "New file selection"}]]
@ -46,13 +46,13 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click next} "Continue"] [:button.btn-secondary {:on-click next} "Continue"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]] :total 4}]]]]]]
1 1
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/manage-files.gif" :border "0" :alt "Manage files"}]] [:img {:src "images/features/manage-files.gif" :border "0" :alt "Manage files"}]]
@ -65,13 +65,13 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click next} "Continue"] [:button.btn-secondary {:on-click next} "Continue"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]] :total 4}]]]]]]
2 2
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/rtl.gif" :border "0" :alt "RTL support"}]] [:img {:src "images/features/rtl.gif" :border "0" :alt "RTL support"}]]
@ -84,13 +84,13 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click next} "Continue"] [:button.btn-secondary {:on-click next} "Continue"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]] :total 4}]]]]]]
3 3
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/blend-modes.gif" :border "0" :alt "Blend modes"}]] [:img {:src "images/features/blend-modes.gif" :border "0" :alt "Blend modes"}]]
@ -103,7 +103,7 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click finish} "Start!"] [:button.btn-secondary {:on-click finish} "Start!"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]]))) :total 4}]]]]]])))

16
frontend/src/app/main/ui/releases/v1_5.cljs
View file

@ -12,10 +12,10 @@
(defmethod c/render-release-notes "1.5" (defmethod c/render-release-notes "1.5"
[{:keys [slide klass next finish navigate version]}] [{:keys [slide klass next finish navigate version]}]
(mf/html (mf/html
(case @slide (case slide
:start :start
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/login-on.jpg" :border "0" :alt "What's new Alpha release 1.5.0"}]] [:img {:src "images/login-on.jpg" :border "0" :alt "What's new Alpha release 1.5.0"}]]
@ -33,7 +33,7 @@
0 0
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/path-tool.gif" :border "0" :alt "New path tool"}]] [:img {:src "images/features/path-tool.gif" :border "0" :alt "New path tool"}]]
@ -46,13 +46,13 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click next} "Continue"] [:button.btn-secondary {:on-click next} "Continue"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 3}]]]]]] :total 3}]]]]]]
1 1
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/assets-organiz.gif" :border "0" :alt "Manage libraries"}]] [:img {:src "images/features/assets-organiz.gif" :border "0" :alt "Manage libraries"}]]
@ -65,13 +65,13 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click next} "Continue"] [:button.btn-secondary {:on-click next} "Continue"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 3}]]]]]] :total 3}]]]]]]
2 2
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/smart-inputs.gif" :border "0" :alt "Smart inputs"}]] [:img {:src "images/features/smart-inputs.gif" :border "0" :alt "Smart inputs"}]]
@ -84,7 +84,7 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click finish} "Start!"] [:button.btn-secondary {:on-click finish} "Start!"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 3}]]]]]]))) :total 3}]]]]]])))

20
frontend/src/app/main/ui/releases/v1_6.cljs
View file

@ -12,10 +12,10 @@
(defmethod c/render-release-notes "1.6" (defmethod c/render-release-notes "1.6"
[{:keys [slide klass next finish navigate version]}] [{:keys [slide klass next finish navigate version]}]
(mf/html (mf/html
(case @slide (case slide
:start :start
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/login-on.jpg" :border "0" :alt "What's new Alpha release 1.6.0"}]] [:img {:src "images/login-on.jpg" :border "0" :alt "What's new Alpha release 1.6.0"}]]
@ -33,7 +33,7 @@
0 0
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/custom-fonts.gif" :border "0" :alt "Upload/use custom fonts"}]] [:img {:src "images/features/custom-fonts.gif" :border "0" :alt "Upload/use custom fonts"}]]
@ -46,13 +46,13 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click next} "Continue"] [:button.btn-secondary {:on-click next} "Continue"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]] :total 4}]]]]]]
1 1
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/scale-text.gif" :border "0" :alt "Interactively scale text"}]] [:img {:src "images/features/scale-text.gif" :border "0" :alt "Interactively scale text"}]]
@ -65,13 +65,13 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click next} "Continue"] [:button.btn-secondary {:on-click next} "Continue"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]] :total 4}]]]]]]
2 2
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/performance.gif" :border "0" :alt "Performance improvements"}]] [:img {:src "images/features/performance.gif" :border "0" :alt "Performance improvements"}]]
@ -84,13 +84,13 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click next} "Continue"] [:button.btn-secondary {:on-click next} "Continue"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]] :total 4}]]]]]]
3 3
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/shapes-to-path.gif" :border "0" :alt "Shapes to path"}]] [:img {:src "images/features/shapes-to-path.gif" :border "0" :alt "Shapes to path"}]]
@ -103,6 +103,6 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click finish} "Start!"] [:button.btn-secondary {:on-click finish} "Start!"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]]))) :total 4}]]]]]])))

20
frontend/src/app/main/ui/releases/v1_7.cljs
View file

@ -12,10 +12,10 @@
(defmethod c/render-release-notes "1.7" (defmethod c/render-release-notes "1.7"
[{:keys [slide klass next finish navigate version]}] [{:keys [slide klass next finish navigate version]}]
(mf/html (mf/html
(case @slide (case slide
:start :start
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/login-on.jpg" :border "0" :alt "What's new Alpha release 1.7"}]] [:img {:src "images/login-on.jpg" :border "0" :alt "What's new Alpha release 1.7"}]]
@ -33,7 +33,7 @@
0 0
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/export.gif" :border "0" :alt "Export & Import"}]] [:img {:src "images/features/export.gif" :border "0" :alt "Export & Import"}]]
@ -49,13 +49,13 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click next} "Continue"] [:button.btn-secondary {:on-click next} "Continue"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]] :total 4}]]]]]]
1 1
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/constraints.gif" :border "0" :alt "Resizing constraints"}]] [:img {:src "images/features/constraints.gif" :border "0" :alt "Resizing constraints"}]]
@ -71,13 +71,13 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click next} "Continue"] [:button.btn-secondary {:on-click next} "Continue"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]] :total 4}]]]]]]
2 2
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/group-components.gif" :border "0" :alt "Library assets management improvements"}]] [:img {:src "images/features/group-components.gif" :border "0" :alt "Library assets management improvements"}]]
@ -91,13 +91,13 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click next} "Continue"] [:button.btn-secondary {:on-click next} "Continue"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]] :total 4}]]]]]]
3 3
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/copy-paste.gif" :border "0" :alt "Paste components from file to file"}]] [:img {:src "images/features/copy-paste.gif" :border "0" :alt "Paste components from file to file"}]]
@ -109,6 +109,6 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click finish} "Start!"] [:button.btn-secondary {:on-click finish} "Start!"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]]))) :total 4}]]]]]])))

20
frontend/src/app/main/ui/releases/v1_8.cljs
View file

@ -12,10 +12,10 @@
(defmethod c/render-release-notes "1.8" (defmethod c/render-release-notes "1.8"
[{:keys [slide klass next finish navigate version]}] [{:keys [slide klass next finish navigate version]}]
(mf/html (mf/html
(case @slide (case slide
:start :start
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/login-on.jpg" :border "0" :alt "What's new Alpha release 1.8"}]] [:img {:src "images/login-on.jpg" :border "0" :alt "What's new Alpha release 1.8"}]]
@ -33,7 +33,7 @@
0 0
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/share-viewer.gif" :border "0" :alt "Share options and pages at view mode"}]] [:img {:src "images/features/share-viewer.gif" :border "0" :alt "Share options and pages at view mode"}]]
@ -46,13 +46,13 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click next} "Continue"] [:button.btn-secondary {:on-click next} "Continue"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]] :total 4}]]]]]]
1 1
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/stroke-caps.gif" :border "0" :alt "Path stroke caps"}]] [:img {:src "images/features/stroke-caps.gif" :border "0" :alt "Path stroke caps"}]]
@ -65,13 +65,13 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click next} "Continue"] [:button.btn-secondary {:on-click next} "Continue"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]] :total 4}]]]]]]
2 2
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/navigate-history.gif" :border "0" :alt "Navigable history"}]] [:img {:src "images/features/navigate-history.gif" :border "0" :alt "Navigable history"}]]
@ -84,13 +84,13 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click next} "Continue"] [:button.btn-secondary {:on-click next} "Continue"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]] :total 4}]]]]]]
3 3
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/export-artboards.gif" :border "0" :alt "Export artboards PDF"}]] [:img {:src "images/features/export-artboards.gif" :border "0" :alt "Export artboards PDF"}]]
@ -103,6 +103,6 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click finish} "Start!"] [:button.btn-secondary {:on-click finish} "Start!"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]]))) :total 4}]]]]]])))

20
frontend/src/app/main/ui/releases/v1_9.cljs
View file

@ -12,10 +12,10 @@
(defmethod c/render-release-notes "1.9" (defmethod c/render-release-notes "1.9"
[{:keys [slide klass next finish navigate version]}] [{:keys [slide klass next finish navigate version]}]
(mf/html (mf/html
(case @slide (case slide
:start :start
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/login-on.jpg" :border "0" :alt "What's new Alpha release 1.9"}]] [:img {:src "images/login-on.jpg" :border "0" :alt "What's new Alpha release 1.9"}]]
@ -33,7 +33,7 @@
0 0
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/advanced-proto.gif" :border "0" :alt "Advanced interactions"}]] [:img {:src "images/features/advanced-proto.gif" :border "0" :alt "Advanced interactions"}]]
@ -46,13 +46,13 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click next} "Continue"] [:button.btn-secondary {:on-click next} "Continue"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]] :total 4}]]]]]]
1 1
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/flows-proto.gif" :border "0" :alt "Multiple flows"}]] [:img {:src "images/features/flows-proto.gif" :border "0" :alt "Multiple flows"}]]
@ -65,13 +65,13 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click next} "Continue"] [:button.btn-secondary {:on-click next} "Continue"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]] :total 4}]]]]]]
2 2
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/booleans.gif" :border "0" :alt "Boolean shapes"}]] [:img {:src "images/features/booleans.gif" :border "0" :alt "Boolean shapes"}]]
@ -84,13 +84,13 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click next} "Continue"] [:button.btn-secondary {:on-click next} "Continue"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]] :total 4}]]]]]]
3 3
[:div.modal-overlay [:div.modal-overlay
[:div.animated {:class @klass} [:div.animated {:class klass}
[:div.modal-container.onboarding.feature [:div.modal-container.onboarding.feature
[:div.modal-left [:div.modal-left
[:img {:src "images/features/libraries-feature.gif" :border "0" :alt "Libraries & templates"}]] [:img {:src "images/features/libraries-feature.gif" :border "0" :alt "Libraries & templates"}]]
@ -103,6 +103,6 @@
[:div.modal-navigation [:div.modal-navigation
[:button.btn-secondary {:on-click finish} "Start!"] [:button.btn-secondary {:on-click finish} "Start!"]
[:& c/navigation-bullets [:& c/navigation-bullets
{:slide @slide {:slide slide
:navigate navigate :navigate navigate
:total 4}]]]]]]))) :total 4}]]]]]])))

116
frontend/src/app/main/ui/workspace/viewport/outline.cljs
View file

@ -7,8 +7,10 @@
(ns app.main.ui.workspace.viewport.outline (ns app.main.ui.workspace.viewport.outline
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.data.macros :as dm]
[app.common.exceptions :as ex] [app.common.exceptions :as ex]
[app.common.geom.shapes :as gsh] [app.common.geom.shapes :as gsh]
[app.common.pages.helpers :as cph]
[app.common.types.container :as ctn] [app.common.types.container :as ctn]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.ui.hooks :as hooks] [app.main.ui.hooks :as hooks]
@ -16,83 +18,95 @@
[app.util.object :as obj] [app.util.object :as obj]
[app.util.path.format :as upf] [app.util.path.format :as upf]
[clojure.set :as set] [clojure.set :as set]
[rumext.v2 :as mf] [rumext.v2 :as mf]))
[rumext.v2.util :refer [map->obj]]))
(mf/defc outline (mf/defc outline
{::mf/wrap-props false} {::mf/wrap-props false}
[props] [props]
(let [shape (obj/get props "shape") (let [shape (unchecked-get props "shape")
zoom (obj/get props "zoom" 1) modifier (unchecked-get props "modifier")
modifier (obj/get props "modifier")
shape (gsh/transform-shape shape (:modifiers modifier)) zoom (d/nilv (unchecked-get props "zoom") 1)
shape (gsh/transform-shape shape (:modifiers modifier))
transform (gsh/transform-str shape) transform (gsh/transform-str shape)
path? (= :path (:type shape))
path-data
(mf/use-memo
(mf/deps shape)
#(when path?
(or (ex/ignoring (upf/format-path (:content shape)))
"")))
;; Note that we don't use mf/deref to avoid a repaint dependency here
objects (deref refs/workspace-page-objects)
;; NOTE: that we don't use mf/deref to avoid a repaint dependency here
objects (deref refs/workspace-page-objects)
color (if (ctn/in-any-component? objects shape) color (if (ctn/in-any-component? objects shape)
"var(--color-component-highlight)" "var(--color-component-highlight)"
"var(--color-primary)") "var(--color-primary)")
{:keys [x y width height selrect]} shape x (dm/get-prop shape :x)
y (dm/get-prop shape :y)
width (dm/get-prop shape :width)
height (dm/get-prop shape :height)
selrect (dm/get-prop shape :selrect)
type (dm/get-prop shape :type)
content (get shape :content)
path? (cph/path-shape? shape)
border-radius-attrs (attrs/extract-border-radius shape) path-data
(mf/with-memo [path? content]
(when (and ^boolean path? (some? content))
(d/nilv (ex/ignoring (upf/format-path content)) "")))
path? (some? (.-d border-radius-attrs)) border-attrs
(attrs/extract-border-radius shape)
outline-type (case (:type shape) outline-type
:circle "ellipse" (case type
:path "path" :circle "ellipse"
(if path? "path" "rect")) :path "path"
(if (some? (obj/get border-attrs "d"))
"path"
"rect"))
common {:fill "none" props
:stroke color (obj/merge!
:strokeWidth (/ 2 zoom) #js {:fill "none"
:pointerEvents "none" :stroke color
:transform transform} :strokeWidth (/ 2 zoom)
:pointerEvents "none"
:transform transform}
props (case (:type shape) (case type
:circle :circle
{:cx (+ x (/ width 2)) #js {:cx (+ x (/ width 2))
:cy (+ y (/ height 2)) :cy (+ y (/ height 2))
:rx (/ width 2) :rx (/ width 2)
:ry (/ height 2)} :ry (/ height 2)}
:path :path
{:d path-data #js {:d path-data
:transform nil} :transform nil}
{:x (:x selrect) (let [x (dm/get-prop selrect :x)
:y (:y selrect) y (dm/get-prop selrect :y)
:width (:width selrect) w (dm/get-prop selrect :width)
:height (:height selrect) h (dm/get-prop selrect :height)]
:rx (.-rx border-radius-attrs) #js {:x x
:ry (.-ry border-radius-attrs) :y y
:d (.-d border-radius-attrs)})] :width w
:height h
:rx (obj/get border-attrs "rx")
:ry (obj/get border-attrs "ry")
:d (obj/get border-attrs "d")})))
]
[:> outline-type (map->obj (merge common props))])) [:> outline-type props]))
(mf/defc shape-outlines-render (mf/defc shape-outlines-render
{::mf/wrap-props false {::mf/wrap-props false
::mf/wrap [#(mf/memo' % (mf/check-props ["shapes" "zoom" "modifiers"]))]} ::mf/wrap [#(mf/memo' % (mf/check-props ["shapes" "zoom" "modifiers"]))]}
[props] [props]
(let [shapes (unchecked-get props "shapes")
(let [shapes (obj/get props "shapes") zoom (unchecked-get props "zoom")
zoom (obj/get props "zoom") modifiers (unchecked-get props "modifiers")]
modifiers (obj/get props "modifiers")]
(for [shape shapes] (for [shape shapes]
(let [modifier (get modifiers (:id shape))] (let [shape-id (dm/get-prop shape :id)
[:& outline {:key (str "outline-" (:id shape)) modifier (get modifiers shape-id)]
[:& outline {:key (dm/str "outline-" shape-id)
:shape shape :shape shape
:modifier modifier :modifier modifier
:zoom zoom}])))) :zoom zoom}]))))