mirror of
https://github.com/penpot/penpot.git
synced 2025-05-30 08:56:11 +02:00
🚧 Continue working on websocket communication.
This commit is contained in:
Andrey Antukh
parent
d88bb1cfcb
commit
51058dd83a
8 changed files with 213 additions and 130 deletions
|
|
@ -13,7 +13,8 @@
|
|||
[uxbox.main.constants :as c]
|
||||
[uxbox.main.data.history :as udh]
|
||||
[uxbox.main.data.undo :as udu]
|
||||
[uxbox.main.data.workspace :as udw]
|
||||
[uxbox.main.data.workspace :as dw]
|
||||
[uxbox.main.data.workspace-websocket :as dws]
|
||||
[uxbox.main.refs :as refs]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.ui.confirm]
|
||||
|
|
@ -54,8 +55,8 @@
|
|||
(dom/prevent-default event)
|
||||
(dom/stop-propagation event)
|
||||
(if (pos? (.-deltaY event))
|
||||
(st/emit! (udw/decrease-zoom))
|
||||
(st/emit! (udw/increase-zoom)))
|
||||
(st/emit! (dw/decrease-zoom))
|
||||
(st/emit! (dw/increase-zoom)))
|
||||
(scroll/scroll-to-point dom mouse-point scroll-position))))
|
||||
|
||||
(mf/defc workspace-content
|
||||
|
|
@ -96,17 +97,18 @@
|
|||
[{:keys [file-id page-id] :as props}]
|
||||
|
||||
(mf/use-effect
|
||||
{:deps #js [file-id page-id]
|
||||
{:deps #js [(str file-id)
|
||||
(str page-id)]
|
||||
:fn (fn []
|
||||
(let [sub (shortcuts/init)]
|
||||
(st/emit! (udw/initialize file-id page-id))
|
||||
(st/emit! (dw/initialize file-id page-id))
|
||||
#(rx/cancel! sub)))})
|
||||
|
||||
(mf/use-effect
|
||||
{:deps #js [(str file-id)]
|
||||
:fn (fn []
|
||||
(st/emit! (udw/initialize-websocket file-id))
|
||||
#(st/emit! (udw/finalize-websocket file-id)))})
|
||||
(st/emit! (dws/initialize file-id))
|
||||
#(st/emit! (dws/finalize file-id)))})
|
||||
|
||||
(let [layout (mf/deref refs/workspace-layout)
|
||||
file (mf/deref refs/workspace-file)
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
(ns uxbox.main.ui.workspace.header
|
||||
(:require
|
||||
[rumext.alpha :as mf]
|
||||
[lentes.core :as l]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.config :as cfg]
|
||||
[uxbox.main.data.history :as udh]
|
||||
|
|
@ -40,6 +41,50 @@
|
|||
|
||||
;; --- Header Component
|
||||
|
||||
;; (mf/defc user
|
||||
;; [props]
|
||||
;; (let [open (mf/use-state false)
|
||||
;; profile (mf/deref profile-ref)
|
||||
;; photo (if (str/empty? (:photo profile ""))
|
||||
;; "/images/avatar.jpg"
|
||||
;; (:photo profile))]
|
||||
;; [:div.user-zone {:on-click #(st/emit! (rt/navigate :settings/profile))
|
||||
;; :on-mouse-enter #(reset! open true)
|
||||
;; :on-mouse-leave #(reset! open false)}
|
||||
;; [:span (:fullname profile)]
|
||||
;; [:img {:src photo}]
|
||||
;; (when @open
|
||||
;; [:& user-menu])]))
|
||||
|
||||
|
||||
(def profile-ref
|
||||
(-> (l/key :profile)
|
||||
(l/derive st/state)))
|
||||
|
||||
(def users-ref
|
||||
(-> (l/key :workspace-users)
|
||||
(l/derive st/state)))
|
||||
|
||||
(mf/defc user-item
|
||||
[{:keys [user self?] :as props}]
|
||||
[:li.tooltip.tooltip-bottom
|
||||
{:alt (:fullname user)
|
||||
:on-click (when self?
|
||||
#(st/emit! (rt/navigate :settings/profile)))}
|
||||
[:img {:src "/images/avatar.jpg"}]])
|
||||
|
||||
(mf/defc users
|
||||
[props]
|
||||
(let [profile (mf/deref profile-ref)
|
||||
users (mf/deref users-ref)]
|
||||
[:ul.user-multi
|
||||
[:& user-item {:user profile :self? true}]
|
||||
(for [id (->> (:active users)
|
||||
(remove #(= % (:id profile))))]
|
||||
[:& user-item {:user (get-in users [:by-id id])
|
||||
:key id}])]))
|
||||
|
||||
|
||||
(mf/defc header
|
||||
[{:keys [page layout flags] :as props}]
|
||||
(let [toggle #(st/emit! (dw/toggle-flag %))
|
||||
|
|
@ -60,10 +105,7 @@
|
|||
[:span {} "Project name / File name";(:name page)
|
||||
]]
|
||||
|
||||
[:ul.user-multi
|
||||
[:li.tooltip.tooltip-bottom
|
||||
{:alt "USER_NAME"}
|
||||
[:img {:src "images/avatar.jpg"}]]]
|
||||
[:& users]
|
||||
|
||||
[:div.workspace-options
|
||||
[:ul.options-btn
|
||||
|
|
|
|||
|
|
@ -1,111 +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) 2015-2019 Andrey Antukh <niwi@niwi.nz>
|
||||
;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
(ns uxbox.main.ui.workspace.sidebar.sitemap
|
||||
(:require
|
||||
[cuerdas.core :as str]
|
||||
[lentes.core :as l]
|
||||
[rumext.alpha :as mf]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.main.data.pages :as udp]
|
||||
[uxbox.main.data.projects :as dp]
|
||||
[uxbox.main.data.workspace :as dw]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.refs :as refs]
|
||||
[uxbox.main.ui.confirm :refer [confirm-dialog]]
|
||||
[uxbox.main.ui.modal :as modal]
|
||||
[uxbox.main.ui.workspace.sidebar.sitemap-forms :refer [page-form-dialog]]
|
||||
[uxbox.main.ui.workspace.sortable :refer [use-sortable]]
|
||||
[uxbox.util.data :refer [classnames enumerate]]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.i18n :refer [tr]]
|
||||
[uxbox.util.router :as rt]))
|
||||
|
||||
;; --- Page Item
|
||||
|
||||
(mf/defc page-item
|
||||
[{:keys [page index deletable? selected?] :as props}]
|
||||
(let [on-edit #(modal/show! page-form-dialog {:page page})
|
||||
delete-fn #(st/emit! (udp/delete-page (:id page)))
|
||||
on-delete #(do
|
||||
(dom/prevent-default %)
|
||||
(dom/stop-propagation %)
|
||||
(modal/show! confirm-dialog {:on-accept delete-fn}))
|
||||
on-drop #(do (prn "TODO"))
|
||||
on-hover #(st/emit! (dw/change-page-order {:id (:id page)
|
||||
:index index}))
|
||||
|
||||
navigate-fn #(st/emit! (dw/go-to-page (:id page)))
|
||||
[dprops ref] (use-sortable {:type "page-item"
|
||||
:data {:id (:id page)
|
||||
:index index}
|
||||
:on-hover on-hover
|
||||
:on-drop on-drop})]
|
||||
[:li {:ref ref :class (classnames :selected selected?)}
|
||||
[:div.element-list-body
|
||||
{:class (classnames :selected selected?
|
||||
:dragging (:dragging? dprops))
|
||||
:on-click navigate-fn
|
||||
:on-double-click #(dom/stop-propagation %)
|
||||
:draggable true}
|
||||
|
||||
[:div.page-icon i/page]
|
||||
[:span (:name page)]
|
||||
[:div.page-actions {}
|
||||
[:a {:on-click on-edit} i/pencil]
|
||||
(when deletable?
|
||||
[:a {:on-click on-delete} i/trash])]]]))
|
||||
|
||||
|
||||
;; --- Page Item Wrapper
|
||||
|
||||
(defn- make-page-ref
|
||||
[page-id]
|
||||
(-> (l/in [:pages page-id])
|
||||
(l/derive st/state)))
|
||||
|
||||
(mf/defc page-item-wrapper
|
||||
[{:keys [page-id index deletable? selected?] :as props}]
|
||||
(let [page-ref (mf/use-memo {:deps #js [page-id]
|
||||
:fn #(make-page-ref page-id)})
|
||||
page (mf/deref page-ref)]
|
||||
[:& page-item {:page page
|
||||
:index index
|
||||
:deletable? deletable?
|
||||
:selected? selected?}]))
|
||||
|
||||
;; --- Pages List
|
||||
|
||||
(mf/defc pages-list
|
||||
[{:keys [file current-page] :as props}]
|
||||
(let [pages (enumerate (:pages file))
|
||||
deletable? (> (count pages) 1)]
|
||||
[:ul.element-list
|
||||
(for [[index page-id] pages]
|
||||
[:& page-item-wrapper
|
||||
{:page-id page-id
|
||||
:index index
|
||||
:deletable? deletable?
|
||||
:selected? (= page-id (:id current-page))
|
||||
:key page-id}])]))
|
||||
|
||||
;; --- Sitemap Toolbox
|
||||
|
||||
(mf/defc sitemap-toolbox
|
||||
[{:keys [file page] :as props}]
|
||||
(let [create-fn #(modal/show! page-form-dialog {:page {:file-id (:file-id page)}})
|
||||
close-fn #(st/emit! (dw/toggle-layout-flag :sitemap))]
|
||||
[:div.sitemap.tool-window
|
||||
[:div.tool-window-bar
|
||||
[:div.tool-window-icon i/project-tree]
|
||||
[:span (tr "ds.settings.sitemap")]
|
||||
[:div.tool-window-close {:on-click close-fn} i/close]]
|
||||
[:div.tool-window-content
|
||||
[:div.project-title
|
||||
#_[:span (:name project)]
|
||||
[:div.add-page {:on-click create-fn} i/close]]
|
||||
[:& pages-list {:file file :current-page page}]]]))
|
||||
|
|
@ -73,14 +73,29 @@
|
|||
|
||||
;; --- Selection Rect
|
||||
|
||||
(defn- selection->rect
|
||||
[data]
|
||||
(let [start (:start data)
|
||||
stop (:stop data)
|
||||
start-x (min (:x start) (:x stop))
|
||||
start-y (min (:y start) (:y stop))
|
||||
end-x (max (:x start) (:x stop))
|
||||
end-y (max (:y start) (:y stop))]
|
||||
(assoc data
|
||||
:x1 start-x
|
||||
:y1 start-y
|
||||
:x2 end-x
|
||||
:y2 end-y
|
||||
:type :rect)))
|
||||
|
||||
(def ^:private handle-selrect
|
||||
(letfn [(update-state [state position]
|
||||
(let [selrect (get-in state [:workspace-local :selrect])]
|
||||
(if selrect
|
||||
(assoc-in state [:workspace-local :selrect]
|
||||
(dw/selection->rect (assoc selrect :stop position)))
|
||||
(selection->rect (assoc selrect :stop position)))
|
||||
(assoc-in state [:workspace-local :selrect]
|
||||
(dw/selection->rect {:start position :stop position})))))
|
||||
(selection->rect {:start position :stop position})))))
|
||||
|
||||
(clear-state [state]
|
||||
(update state :workspace-local dissoc :selrect))]
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue