From d52141632978087a27596257418a826c4fa939ba Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Mon, 29 Jun 2020 16:07:12 +0200 Subject: [PATCH] :tada: Add initial render object uri to frontend application. --- frontend/src/uxbox/main.cljs | 2 +- frontend/src/uxbox/main/exports.cljs | 3 +- frontend/src/uxbox/main/ui.cljs | 126 ++++++++++-------- .../uxbox/main/ui/dashboard/recent_files.cljs | 14 +- .../src/uxbox/main/ui/dashboard/sidebar.cljs | 11 +- frontend/src/uxbox/main/ui/render.cljs | 93 +++++++++++++ 6 files changed, 175 insertions(+), 74 deletions(-) create mode 100644 frontend/src/uxbox/main/ui/render.cljs diff --git a/frontend/src/uxbox/main.cljs b/frontend/src/uxbox/main.cljs index a79e48f2c..51ae872da 100644 --- a/frontend/src/uxbox/main.cljs +++ b/frontend/src/uxbox/main.cljs @@ -59,7 +59,7 @@ (rt/initialize-history on-navigate)) (st/emit! udu/fetch-profile) - (mf/mount (mf/element ui/app) (dom/get-element "app")) + (mf/mount (mf/element ui/app-wrapper) (dom/get-element "app")) (mf/mount (mf/element modal) (dom/get-element "modal"))) (defn ^:export init diff --git a/frontend/src/uxbox/main/exports.cljs b/frontend/src/uxbox/main/exports.cljs index a3497ee22..a015113de 100644 --- a/frontend/src/uxbox/main/exports.cljs +++ b/frontend/src/uxbox/main/exports.cljs @@ -54,7 +54,7 @@ (mf/fnc frame-wrapper [{:keys [shape] :as props}] (let [childs (mapv #(get objects %) (:shapes shape)) - shape (geom/transform-shape shape)] + shape (geom/transform-shape shape)] [:& frame-shape {:shape shape :childs childs}])))) (defn group-wrapper-factory @@ -153,4 +153,3 @@ :xmlnsXlink "http://www.w3.org/1999/xlink" :xmlns "http://www.w3.org/2000/svg"} [:& wrapper {:shape frame :view-box vbox}]])) - diff --git a/frontend/src/uxbox/main/ui.cljs b/frontend/src/uxbox/main/ui.cljs index 3c9b9b553..2c55f8bf2 100644 --- a/frontend/src/uxbox/main/ui.cljs +++ b/frontend/src/uxbox/main/ui.cljs @@ -28,6 +28,7 @@ [uxbox.main.ui.settings :as settings] [uxbox.main.ui.static :refer [not-found-page not-authorized-page]] [uxbox.main.ui.viewer :refer [viewer-page]] + [uxbox.main.ui.render :as render] [uxbox.main.ui.workspace :as workspace] [uxbox.util.i18n :as i18n :refer [tr t]] [uxbox.util.timers :as ts])) @@ -55,6 +56,9 @@ (when *assert* ["/debug/icons-preview" :debug-icons-preview]) + ;; Used for export + ["/render-object/:page-id/:object-id" :render-object] + ["/dashboard" ["/team/:team-id" ["/" :dashboard-team] @@ -84,77 +88,85 @@ :not-found [:& not-found-page {:error data}] [:span "Internal application errror"]))) -(mf/defc app-container +(mf/defc app {::mf/wrap [#(mf/catch % {:fallback app-error})]} [{:keys [route] :as props}] - [:* - [:& msgs/notifications] - (case (get-in route [:data :name]) - (:auth-login - :auth-register - :auth-goodbye - :auth-recovery-request - :auth-recovery) - [:& auth {:route route}] + (case (get-in route [:data :name]) + (:auth-login + :auth-register + :auth-goodbye + :auth-recovery-request + :auth-recovery) + [:& auth {:route route}] - :auth-verify-token - [:& verify-token {:route route}] + :auth-verify-token + [:& verify-token {:route route}] - (:settings-profile - :settings-password - :settings-options) - [:& settings/settings {:route route}] + (:settings-profile + :settings-password + :settings-options) + [:& settings/settings {:route route}] - :debug-icons-preview - (when *assert* - [:div.debug-preview - [:h1 "Cursors"] - [:& c/debug-preview] - [:h1 "Icons"] - [:& i/debug-icons-preview] - ]) + :debug-icons-preview + (when *assert* + [:div.debug-preview + [:h1 "Cursors"] + [:& c/debug-preview] + [:h1 "Icons"] + [:& i/debug-icons-preview] + ]) - (:dashboard-search - :dashboard-team - :dashboard-project - :dashboard-library-icons - :dashboard-library-icons-index - :dashboard-library-images - :dashboard-library-images-index - :dashboard-library-palettes - :dashboard-library-palettes-index) - [:& dashboard {:route route}] + (:dashboard-search + :dashboard-team + :dashboard-project + :dashboard-library-icons + :dashboard-library-icons-index + :dashboard-library-images + :dashboard-library-images-index + :dashboard-library-palettes + :dashboard-library-palettes-index) + [:& dashboard {:route route}] - :viewer - (let [index (d/parse-integer (get-in route [:params :query :index])) - token (get-in route [:params :query :token]) - page-id (uuid (get-in route [:params :path :page-id]))] - [:& viewer-page {:page-id page-id - :index index - :token token}]) + :viewer + (let [index (d/parse-integer (get-in route [:params :query :index])) + token (get-in route [:params :query :token]) + page-id (uuid (get-in route [:params :path :page-id]))] + [:& viewer-page {:page-id page-id + :index index + :token token}]) - :workspace - (let [project-id (uuid (get-in route [:params :path :project-id])) - file-id (uuid (get-in route [:params :path :file-id])) - page-id (uuid (get-in route [:params :query :page-id]))] - [:& workspace/workspace {:project-id project-id - :file-id file-id - :page-id page-id - :key file-id}]) + :render-object + (do + (prn route) + (let [page-id (uuid (get-in route [:params :path :page-id])) + object-id (uuid (get-in route [:params :path :object-id]))] + [:& render/render-object {:page-id page-id + :object-id object-id}])) - :not-authorized - [:& not-authorized-page] + :workspace + (let [project-id (uuid (get-in route [:params :path :project-id])) + file-id (uuid (get-in route [:params :path :file-id])) + page-id (uuid (get-in route [:params :query :page-id]))] + [:& workspace/workspace {:project-id project-id + :file-id file-id + :page-id page-id + :key file-id}]) - :not-found - [:& not-found-page] + :not-authorized + [:& not-authorized-page] - nil)]) + :not-found + [:& not-found-page] -(mf/defc app + nil)) + +(mf/defc app-wrapper [] (let [route (mf/deref refs/route)] - (when route - [:& app-container {:route route}]))) + [:* + [:& msgs/notifications] + (when route + [:& app {:route route}])])) ;; --- Error Handling diff --git a/frontend/src/uxbox/main/ui/dashboard/recent_files.cljs b/frontend/src/uxbox/main/ui/dashboard/recent_files.cljs index 7c30d5dd1..f8fe8d17d 100644 --- a/frontend/src/uxbox/main/ui/dashboard/recent_files.cljs +++ b/frontend/src/uxbox/main/ui/dashboard/recent_files.cljs @@ -11,22 +11,20 @@ (:require [okulary.core :as l] [rumext.alpha :as mf] - [uxbox.main.ui.icons :as i] [uxbox.common.exceptions :as ex] [uxbox.main.constants :as c] [uxbox.main.data.dashboard :as dsh] - [uxbox.main.store :as st] - [uxbox.main.exports :as exports] [uxbox.main.refs :as refs] - [uxbox.main.ui.modal :as modal] - [uxbox.main.ui.keyboard :as kbd] + [uxbox.main.store :as st] [uxbox.main.ui.confirm :refer [confirm-dialog]] + [uxbox.main.ui.dashboard.grid :refer [grid]] + [uxbox.main.ui.icons :as i] + [uxbox.main.ui.keyboard :as kbd] + [uxbox.main.ui.modal :as modal] [uxbox.util.dom :as dom] [uxbox.util.i18n :as i18n :refer [t tr]] [uxbox.util.router :as rt] - [uxbox.util.time :as dt] - [uxbox.main.ui.dashboard.grid :refer [grid]]) - ) + [uxbox.util.time :as dt])) ;; --- Component: Content diff --git a/frontend/src/uxbox/main/ui/dashboard/sidebar.cljs b/frontend/src/uxbox/main/ui/dashboard/sidebar.cljs index 68d7a0d17..c49b061c6 100644 --- a/frontend/src/uxbox/main/ui/dashboard/sidebar.cljs +++ b/frontend/src/uxbox/main/ui/dashboard/sidebar.cljs @@ -11,19 +11,18 @@ (ns uxbox.main.ui.dashboard.sidebar (:require [cuerdas.core :as str] + [goog.functions :as f] [okulary.core :as l] [rumext.alpha :as mf] - [goog.functions :as f] - [uxbox.main.ui.icons :as i] [uxbox.main.constants :as c] [uxbox.main.data.dashboard :as dsh] - [uxbox.main.store :as st] [uxbox.main.refs :as refs] - [uxbox.main.exports :as exports] - [uxbox.main.ui.modal :as modal] - [uxbox.main.ui.keyboard :as kbd] + [uxbox.main.store :as st] [uxbox.main.ui.confirm :refer [confirm-dialog]] [uxbox.main.ui.dashboard.common :as common] + [uxbox.main.ui.icons :as i] + [uxbox.main.ui.keyboard :as kbd] + [uxbox.main.ui.modal :as modal] [uxbox.util.dom :as dom] [uxbox.util.i18n :as i18n :refer [t tr]] [uxbox.util.router :as rt] diff --git a/frontend/src/uxbox/main/ui/render.cljs b/frontend/src/uxbox/main/ui/render.cljs new file mode 100644 index 000000000..0eaec86f6 --- /dev/null +++ b/frontend/src/uxbox/main/ui/render.cljs @@ -0,0 +1,93 @@ +;; 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/. +;; +;; This Source Code Form is "Incompatible With Secondary Licenses", as +;; defined by the Mozilla Public License, v. 2.0. +;; +;; Copyright (c) 2020 UXBOX Labs SL + +(ns uxbox.main.ui.render + (:require + [cljs.spec.alpha :as s] + [beicon.core :as rx] + [rumext.alpha :as mf] + [uxbox.common.uuid :as uuid] + [uxbox.common.pages :as cp] + [uxbox.common.pages-helpers :as cph] + [uxbox.common.math :as mth] + [uxbox.common.geom.shapes :as geom] + [uxbox.common.geom.point :as gpt] + [uxbox.common.geom.matrix :as gmt] + [uxbox.main.exports :as exports] + [uxbox.main.repo :as repo])) + +(mf/defc object-svg + {::mf/wrap [mf/memo]} + [{:keys [objects object-id zoom] :or {zoom 1} :as props}] + (let [object (get objects object-id) + frame-id (if (= :frame (:type object)) + (:id object) + (:frame-id object)) + + modifier (-> (gpt/point (:x object) (:y object)) + (gpt/negate) + (gmt/translate-matrix)) + + mod-ids (cons frame-id (cph/get-children frame-id objects)) + updt-fn #(-> %1 + (assoc-in [%2 :modifiers :displacement] modifier) + (update %2 geom/transform-shape)) + + objects (reduce updt-fn objects mod-ids) + object (get objects object-id) + + width (* (get-in object [:selrect :width]) zoom) + height (* (get-in object [:selrect :height]) zoom) + + vbox (str (get-in object [:selrect :x]) " " + (get-in object [:selrect :y]) " " + (get-in object [:selrect :width]) " " + (get-in object [:selrect :height])) + + frame-wrapper + (mf/use-memo + (mf/deps objects) + #(exports/frame-wrapper-factory objects)) + + group-wrapper + (mf/use-memo + (mf/deps objects) + #(exports/group-wrapper-factory objects)) + + shape-wrapper + (mf/use-memo + (mf/deps objects) + #(exports/shape-wrapper-factory objects)) + ] + [:svg {:id "screenshot" + :view-box vbox + :width width + :height height + :version "1.1" + :xmlnsXlink "http://www.w3.org/1999/xlink" + :xmlns "http://www.w3.org/2000/svg"} + (case (:type object) + :frame [:& frame-wrapper {:shape object :view-box vbox}] + :group [:& group-wrapper {:shape object}] + [:& shape-wrapper {:shape object}])])) + + +(mf/defc render-object + [{:keys [page-id object-id] :as props}] + (let [data (mf/use-state nil)] + (mf/use-effect + (fn [] + (let [subs (->> (repo/query! :page {:id page-id}) + (rx/subs (fn [result] + (reset! data (:data result)))))] + #(rx/dispose! subs)))) + (when @data + [:& object-svg {:objects (:objects @data) + :object-id object-id + :zoom 1}])))