mirror of
https://github.com/penpot/penpot.git
synced 2026-03-19 08:53:39 +00:00
285 lines
10 KiB
Clojure
285 lines
10 KiB
Clojure
;; 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) KALEIDOS INC
|
|
|
|
(ns app.main.ui.workspace
|
|
(:require-macros [app.main.style :refer [css]])
|
|
(:require
|
|
[app.common.data.macros :as dm]
|
|
[app.main.data.messages :as msg]
|
|
[app.main.data.modal :as modal]
|
|
[app.main.data.workspace :as dw]
|
|
[app.main.data.workspace.colors :as dc]
|
|
[app.main.data.workspace.persistence :as dwp]
|
|
[app.main.features :as features]
|
|
[app.main.refs :as refs]
|
|
[app.main.store :as st]
|
|
[app.main.ui.context :as ctx]
|
|
[app.main.ui.hooks :as hooks]
|
|
[app.main.ui.hooks.resize :refer [use-resize-observer]]
|
|
[app.main.ui.icons :as i]
|
|
[app.main.ui.workspace.colorpalette :refer [colorpalette]]
|
|
[app.main.ui.workspace.colorpicker]
|
|
[app.main.ui.workspace.context-menu :refer [context-menu]]
|
|
[app.main.ui.workspace.coordinates :as coordinates]
|
|
[app.main.ui.workspace.header :refer [header]]
|
|
[app.main.ui.workspace.left-toolbar :refer [left-toolbar]]
|
|
[app.main.ui.workspace.libraries]
|
|
[app.main.ui.workspace.nudge]
|
|
[app.main.ui.workspace.palette :refer [palette]]
|
|
[app.main.ui.workspace.sidebar :refer [left-sidebar right-sidebar]]
|
|
[app.main.ui.workspace.sidebar.collapsable-button :refer [collapsed-button]]
|
|
[app.main.ui.workspace.sidebar.history :refer [history-toolbox]]
|
|
[app.main.ui.workspace.textpalette :refer [textpalette]]
|
|
[app.main.ui.workspace.viewport :refer [viewport]]
|
|
[app.util.dom :as dom]
|
|
[app.util.globals :as globals]
|
|
[app.util.i18n :as i18n :refer [tr]]
|
|
[app.util.router :as rt]
|
|
[debug :refer [debug?]]
|
|
[goog.events :as events]
|
|
[okulary.core :as l]
|
|
[rumext.v2 :as mf]))
|
|
|
|
(defn- make-file-ready-ref
|
|
[file-id]
|
|
(l/derived (fn [state]
|
|
(let [data (:workspace-data state)]
|
|
(and (:workspace-ready? state)
|
|
(= file-id (:current-file-id state))
|
|
(= file-id (:id data)))))
|
|
st/state))
|
|
|
|
(defn- make-page-ready-ref
|
|
[page-id]
|
|
(l/derived (fn [state]
|
|
(and (some? page-id)
|
|
(= page-id (:current-page-id state))))
|
|
st/state))
|
|
|
|
(mf/defc workspace-content
|
|
{::mf/wrap-props false}
|
|
[{:keys [file layout page-id wglobal]}]
|
|
(let [selected (mf/deref refs/selected-shapes)
|
|
|
|
{:keys [vport] :as wlocal} (mf/deref refs/workspace-local)
|
|
{:keys [options-mode]} wglobal
|
|
|
|
colorpalette? (:colorpalette layout)
|
|
textpalette? (:textpalette layout)
|
|
hide-ui? (:hide-ui layout)
|
|
new-css-system (mf/use-ctx ctx/new-css-system)
|
|
|
|
on-resize
|
|
(mf/use-fn
|
|
(mf/deps vport)
|
|
(fn [resize-type size]
|
|
(when (and vport (not= size vport))
|
|
(st/emit! (dw/update-viewport-size resize-type size)))))
|
|
|
|
node-ref (use-resize-observer on-resize)]
|
|
[:*
|
|
(if new-css-system
|
|
[:& palette {:layout layout}]
|
|
[:*
|
|
(when (and colorpalette? (not hide-ui?))
|
|
[:& colorpalette])
|
|
|
|
(when (and textpalette? (not hide-ui?))
|
|
[:& textpalette])])
|
|
|
|
[:section.workspace-content
|
|
{:key (dm/str "workspace-" page-id)
|
|
:ref node-ref}
|
|
|
|
[:section.workspace-viewport
|
|
(when (debug? :coordinates)
|
|
[:& coordinates/coordinates {:colorpalette? colorpalette?}])
|
|
|
|
(when (debug? :history-overlay)
|
|
[:div.history-debug-overlay
|
|
[:button {:on-click #(st/emit! dw/reinitialize-undo)} "CLEAR"]
|
|
[:& history-toolbox]])
|
|
|
|
[:& viewport {:file file
|
|
:wlocal wlocal
|
|
:wglobal wglobal
|
|
:selected selected
|
|
:layout layout}]]]
|
|
|
|
(when-not hide-ui?
|
|
[:*
|
|
[:& left-toolbar {:layout layout}]
|
|
(if (:collapse-left-sidebar layout)
|
|
[:& collapsed-button]
|
|
[:& left-sidebar {:layout layout
|
|
:file file
|
|
:page-id page-id}])
|
|
[:& right-sidebar {:section options-mode
|
|
:selected selected
|
|
:layout layout
|
|
:file file
|
|
:page-id page-id}]])]))
|
|
|
|
(mf/defc workspace-loader
|
|
[]
|
|
(let [new-css-system (mf/use-ctx ctx/new-css-system)]
|
|
[:div {:class (if new-css-system (css :workspace-loader)
|
|
(dom/classnames :workspace-loader true))}
|
|
i/loader-pencil]))
|
|
|
|
(mf/defc workspace-page
|
|
{::mf/wrap-props false}
|
|
[{:keys [page-id file layout wglobal]}]
|
|
(let [page-id (hooks/use-equal-memo page-id)
|
|
page-ready* (mf/with-memo [page-id]
|
|
(make-page-ready-ref page-id))
|
|
page-ready? (mf/deref page-ready*)]
|
|
|
|
(mf/with-effect []
|
|
(let [focus-out #(st/emit! (dw/workspace-focus-lost))
|
|
key (events/listen globals/window "blur" focus-out)]
|
|
(partial events/unlistenByKey key)))
|
|
|
|
(mf/with-effect [page-id]
|
|
(if (some? page-id)
|
|
(st/emit! (dw/initialize-page page-id))
|
|
(st/emit! (dw/go-to-page)))
|
|
(fn []
|
|
(when (some? page-id)
|
|
(st/emit! (dw/finalize-page page-id)))))
|
|
|
|
(if ^boolean page-ready?
|
|
[:& workspace-content {:page-id page-id
|
|
:file file
|
|
:wglobal wglobal
|
|
:layout layout}]
|
|
[:& workspace-loader])))
|
|
|
|
(mf/defc workspace
|
|
{::mf/wrap-props false
|
|
::mf/wrap [mf/memo]}
|
|
[{:keys [project-id file-id page-id layout-name]}]
|
|
|
|
(let [layout (mf/deref refs/workspace-layout)
|
|
wglobal (mf/deref refs/workspace-global)
|
|
read-only? (mf/deref refs/workspace-read-only?)
|
|
|
|
file (mf/deref refs/workspace-file)
|
|
project (mf/deref refs/workspace-project)
|
|
|
|
team-id (:team-id project)
|
|
file-name (:name file)
|
|
|
|
file-ready* (mf/with-memo [file-id]
|
|
(make-file-ready-ref file-id))
|
|
file-ready? (mf/deref file-ready*)
|
|
|
|
components-v2? (features/use-feature :components-v2)
|
|
new-css-system (features/use-feature :new-css-system)
|
|
|
|
background-color (:background-color wglobal)]
|
|
|
|
;; Setting the layout preset by its name
|
|
(mf/with-effect [layout-name]
|
|
(st/emit! (dw/initialize-layout layout-name)))
|
|
|
|
(mf/with-effect [file-name]
|
|
(when file-name
|
|
(dom/set-html-title (tr "title.workspace" file-name))))
|
|
|
|
(mf/with-effect [project-id file-id]
|
|
(st/emit! (dw/initialize-file project-id file-id))
|
|
(fn []
|
|
(st/emit! ::dwp/force-persist
|
|
(dc/stop-picker)
|
|
(modal/hide)
|
|
msg/hide
|
|
(dw/finalize-file project-id file-id))))
|
|
|
|
[:& (mf/provider ctx/current-file-id) {:value file-id}
|
|
[:& (mf/provider ctx/current-project-id) {:value project-id}
|
|
[:& (mf/provider ctx/current-team-id) {:value team-id}
|
|
[:& (mf/provider ctx/current-page-id) {:value page-id}
|
|
[:& (mf/provider ctx/components-v2) {:value components-v2?}
|
|
[:& (mf/provider ctx/new-css-system) {:value new-css-system}
|
|
[:& (mf/provider ctx/workspace-read-only?) {:value read-only?}
|
|
(if new-css-system
|
|
[:section#workspace-refactor {:class (css :workspace)
|
|
:style {:background-color background-color
|
|
:touch-action "none"}}
|
|
[:& context-menu]
|
|
|
|
(if ^boolean file-ready?
|
|
[:& workspace-page {:page-id page-id
|
|
:file file
|
|
:wglobal wglobal
|
|
:layout layout}]
|
|
[:& workspace-loader])]
|
|
|
|
|
|
[:section#workspace {:style {:background-color background-color
|
|
:touch-action "none"}}
|
|
(when (not (:hide-ui layout))
|
|
[:& header {:file file
|
|
:page-id page-id
|
|
:project project
|
|
:layout layout}])
|
|
|
|
[:& context-menu]
|
|
|
|
(if ^boolean file-ready?
|
|
[:& workspace-page {:page-id page-id
|
|
:file file
|
|
:wglobal wglobal
|
|
:layout layout}]
|
|
[:& workspace-loader])])]]]]]]]))
|
|
|
|
(mf/defc remove-graphics-dialog
|
|
{::mf/register modal/components
|
|
::mf/register-as :remove-graphics-dialog}
|
|
[{:keys [] :as ctx}]
|
|
(let [remove-state (mf/deref refs/remove-graphics)
|
|
project (mf/deref refs/workspace-project)
|
|
close #(modal/hide!)
|
|
reload-file #(dom/reload-current-window)
|
|
nav-out #(st/emit! (rt/navigate :dashboard-files
|
|
{:team-id (:team-id project)
|
|
:project-id (:id project)}))]
|
|
(mf/use-effect
|
|
(fn []
|
|
#(st/emit! (dw/clear-remove-graphics))))
|
|
|
|
[:div.modal-overlay
|
|
[:div.modal-container.remove-graphics-dialog
|
|
[:div.modal-header
|
|
[:div.modal-header-title
|
|
[:h2 (tr "workspace.remove-graphics.title" (:file-name ctx))]]
|
|
(if (and (:completed remove-state) (:error remove-state))
|
|
[:div.modal-close-button
|
|
{:on-click close} i/close]
|
|
[:div.modal-close-button
|
|
{:on-click nav-out}
|
|
i/close])]
|
|
(if-not (and (:completed remove-state) (:error remove-state))
|
|
[:div.modal-content
|
|
[:p (tr "workspace.remove-graphics.text1")]
|
|
[:p (tr "workspace.remove-graphics.text2")]
|
|
[:p.progress-message (tr "workspace.remove-graphics.progress"
|
|
(:current remove-state)
|
|
(:total remove-state))]]
|
|
[:*
|
|
[:div.modal-content
|
|
[:p.error-message [:span i/close] (tr "workspace.remove-graphics.error-msg")]
|
|
[:p (tr "workspace.remove-graphics.error-hint")]]
|
|
[:div.modal-footer
|
|
[:div.action-buttons
|
|
[:input.button-secondary {:type "button"
|
|
:value (tr "labels.close")
|
|
:on-click close}]
|
|
[:input.button-primary {:type "button"
|
|
:value (tr "labels.reload-file")
|
|
:on-click reload-file}]]]])]]))
|