🎉 Add initial render object uri to frontend application.

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

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}]]))
-

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
 

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
 

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]

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}])))