mirror of
https://github.com/penpot/penpot.git
synced 2025-06-01 08:31:39 +02:00
219 lines
8.2 KiB
Clojure
219 lines
8.2 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
|
|
[app.common.colors :as clr]
|
|
[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.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.sidebar :refer [left-sidebar right-sidebar]]
|
|
[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.i18n :as i18n :refer [tr]]
|
|
[app.util.object :as obj]
|
|
[debug :refer [debug?]]
|
|
[okulary.core :as l]
|
|
[rumext.v2 :as mf]))
|
|
|
|
;; --- Workspace
|
|
|
|
(mf/defc workspace-content
|
|
{::mf/wrap-props false}
|
|
[props]
|
|
(let [selected (mf/deref refs/selected-shapes)
|
|
file (obj/get props "file")
|
|
layout (obj/get props "layout")
|
|
page-id (obj/get props "page-id")
|
|
|
|
{:keys [vport] :as wlocal} (mf/deref refs/workspace-local)
|
|
{:keys [options-mode] :as wglobal} (obj/get props "wglobal")
|
|
|
|
colorpalette? (:colorpalette layout)
|
|
textpalette? (:textpalette layout)
|
|
hide-ui? (:hide-ui layout)
|
|
|
|
on-resize
|
|
(mf/use-callback
|
|
(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)]
|
|
[:*
|
|
(when (and colorpalette? (not hide-ui?))
|
|
[:& colorpalette])
|
|
|
|
(when (and textpalette? (not hide-ui?))
|
|
[:& textpalette])
|
|
|
|
[:section.workspace-content {: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 {:key (dm/str "workspace-" page-id)
|
|
:file file
|
|
:wlocal wlocal
|
|
:wglobal wglobal
|
|
:selected selected
|
|
:layout layout}]]]
|
|
|
|
(when-not hide-ui?
|
|
[:*
|
|
[:& left-toolbar {:layout layout}]
|
|
(if (:collapse-left-sidebar layout)
|
|
[:button.collapse-sidebar.collapsed {:on-click #(st/emit! (dw/toggle-layout-flag :collapse-left-sidebar))
|
|
:aria-label (tr "workspace.sidebar.expand")}
|
|
i/arrow-slide]
|
|
[:& left-sidebar {:layout layout}])
|
|
[:& right-sidebar {:section options-mode
|
|
:selected selected
|
|
:layout layout}]])]))
|
|
|
|
(def trimmed-page-ref (l/derived :workspace-trimmed-page st/state =))
|
|
|
|
(mf/defc workspace-page
|
|
[{:keys [file layout page-id wglobal] :as props}]
|
|
|
|
(let [prev-page-id (hooks/use-previous page-id)]
|
|
(mf/with-effect
|
|
[page-id]
|
|
(when (and page-id (not= prev-page-id page-id))
|
|
(st/emit! (dw/finalize-page prev-page-id)))
|
|
|
|
(if (nil? page-id)
|
|
(st/emit! (dw/go-to-page))
|
|
(st/emit! (dw/initialize-page page-id))))
|
|
|
|
(when (mf/deref trimmed-page-ref)
|
|
[:& workspace-content {:page-id page-id
|
|
:file file
|
|
:wglobal wglobal
|
|
:layout layout}])))
|
|
|
|
(mf/defc workspace-loader
|
|
[]
|
|
[:div.workspace-loader
|
|
i/loader-pencil])
|
|
|
|
(mf/defc workspace
|
|
{::mf/wrap [mf/memo]}
|
|
[{:keys [project-id file-id page-id layout-name] :as props}]
|
|
(let [file (mf/deref refs/workspace-file)
|
|
project (mf/deref refs/workspace-project)
|
|
layout (mf/deref refs/workspace-layout)
|
|
wglobal (mf/deref refs/workspace-global)
|
|
ready? (mf/deref refs/workspace-ready?)
|
|
workspace-read-only? (mf/deref refs/workspace-read-only?)
|
|
|
|
components-v2 (features/use-feature :components-v2)
|
|
|
|
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 [project-id file-id]
|
|
(st/emit! (dw/initialize-file project-id file-id))
|
|
(fn []
|
|
(st/emit! ::dwp/force-persist
|
|
(dw/finalize-file project-id file-id))))
|
|
|
|
;; Set html theme color and close any non-modal dialog that may be still open
|
|
(mf/with-effect
|
|
(dom/set-html-theme-color clr/gray-50 "dark")
|
|
(st/emit! msg/hide))
|
|
|
|
;; Set properly the page title
|
|
(mf/with-effect [(:name file)]
|
|
(when (:name file)
|
|
(dom/set-html-title (tr "title.workspace" (:name file)))))
|
|
|
|
[:& (mf/provider ctx/current-file-id) {:value (:id file)}
|
|
[:& (mf/provider ctx/current-team-id) {:value (:team-id project)}
|
|
[:& (mf/provider ctx/current-project-id) {:value (:id project)}
|
|
[:& (mf/provider ctx/current-page-id) {:value page-id}
|
|
[:& (mf/provider ctx/components-v2) {:value components-v2}
|
|
[:& (mf/provider ctx/workspace-read-only?) {:value workspace-read-only?}
|
|
[:section#workspace {:style {:background-color background-color}}
|
|
(when (not (:hide-ui layout))
|
|
[:& header {:file file
|
|
:page-id page-id
|
|
:project project
|
|
:layout layout}])
|
|
|
|
[:& context-menu]
|
|
|
|
(if 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)
|
|
close #(modal/hide!)
|
|
reload-file #(dom/reload-current-window)]
|
|
(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))]]
|
|
(when (and (:completed remove-state) (:error remove-state))
|
|
[:div.modal-close-button
|
|
{:on-click close} 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}]]]])]]))
|