mirror of
https://github.com/penpot/penpot.git
synced 2025-02-24 15:56:11 -05:00
Improve page data structure and adapt it to the backend representation.
This commit is contained in:
Andrey Antukh
parent
4fde0469c0
commit
f05d6924a3
6 changed files with 126 additions and 130 deletions
|
|
@ -104,23 +104,23 @@
|
|||
|
||||
;; --- Create Page
|
||||
|
||||
(defrecord CreatePage [name width height project layout]
|
||||
(defrecord CreatePage [name project metadata]
|
||||
rs/WatchEvent
|
||||
(-apply-watch [this state s]
|
||||
(letfn [(on-created [{page :payload}]
|
||||
(rx/of
|
||||
#(unpack-page % page)
|
||||
#(assoc-page % page)))]
|
||||
(let [params (-> (into {} this)
|
||||
(assoc :data {}))]
|
||||
(let [params {:name name
|
||||
:project project
|
||||
:data {}
|
||||
:metadata metadata}]
|
||||
(->> (rp/req :create/page params)
|
||||
(rx/mapcat on-created))))))
|
||||
|
||||
(def ^:private create-page-schema
|
||||
{:name [sc/required sc/string]
|
||||
:layout [sc/required sc/string]
|
||||
:width [sc/required sc/integer]
|
||||
:height [sc/required sc/integer]
|
||||
:metadata [sc/required]
|
||||
:project [sc/required sc/uuid]})
|
||||
|
||||
(defn create-page
|
||||
|
|
|
|||
|
|
@ -12,10 +12,10 @@
|
|||
[uxbox.util.transit :as t]))
|
||||
|
||||
(defn decode-page
|
||||
[{:keys [data options] :as page}]
|
||||
[{:keys [data metadata] :as page}]
|
||||
(merge page
|
||||
(when data {:data (t/decode data)})
|
||||
(when options {:options (t/decode options)})))
|
||||
(when metadata {:metadata (t/decode metadata)})))
|
||||
|
||||
(defn decode-payload
|
||||
[{:keys [payload] :as rsp}]
|
||||
|
|
@ -51,10 +51,10 @@
|
|||
:method :delete})))
|
||||
|
||||
(defmethod request :create/page
|
||||
[type {:keys [data options] :as body}]
|
||||
[type {:keys [data metadata] :as body}]
|
||||
(let [body (assoc body
|
||||
:data (t/encode data)
|
||||
:options (t/encode options))
|
||||
:metadata (t/encode metadata))
|
||||
params {:url (str url "/pages")
|
||||
:method :post
|
||||
:body body}]
|
||||
|
|
@ -62,10 +62,10 @@
|
|||
(rx/map decode-payload))))
|
||||
|
||||
(defmethod request :update/page
|
||||
[type {:keys [id data options] :as body}]
|
||||
[type {:keys [id data metadata] :as body}]
|
||||
(let [body (assoc body
|
||||
:data (t/encode data)
|
||||
:options (t/encode options))
|
||||
:metadata (t/encode metadata))
|
||||
params {:url (str url "/pages/" id)
|
||||
:method :put
|
||||
:body body}]
|
||||
|
|
@ -81,9 +81,9 @@
|
|||
(rx/map decode-payload))))
|
||||
|
||||
(defmethod request :update/page-metadata
|
||||
[type {:keys [id options] :as body}]
|
||||
[type {:keys [id metadata] :as body}]
|
||||
(let [body (dissoc body :data)
|
||||
body (assoc body :options (t/encode options))
|
||||
body (assoc body :metadata (t/encode metadata))
|
||||
params {:url (str url "/pages/" id "/metadata")
|
||||
:method :put
|
||||
:body body}]
|
||||
|
|
|
|||
|
|
@ -43,16 +43,18 @@
|
|||
|
||||
(mx/defc canvas
|
||||
{:mixins [mx/reactive]}
|
||||
[{:keys [width height id] :as page}]
|
||||
[{:keys [metadata id] :as page}]
|
||||
(let [workspace (mx/react wb/workspace-ref)
|
||||
flags (:flags workspace)]
|
||||
flags (:flags workspace)
|
||||
width (:width metadata)
|
||||
height (:height metadata)]
|
||||
[:svg.page-canvas {:x c/canvas-start-x
|
||||
:y c/canvas-start-y
|
||||
:ref (str "canvas" id)
|
||||
:width width
|
||||
:height height}
|
||||
(background)
|
||||
[:svg.page-layout {}
|
||||
[:svg.page-layout
|
||||
[:g.main {}
|
||||
(for [item (reverse (:shapes page))]
|
||||
(-> (uus/shape item)
|
||||
|
|
|
|||
|
|
@ -6,9 +6,7 @@
|
|||
;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
(ns uxbox.main.ui.workspace.sidebar.sitemap
|
||||
(:require [sablono.core :as html :refer-macros [html]]
|
||||
[rum.core :as rum]
|
||||
[lentes.core :as l]
|
||||
(:require [lentes.core :as l]
|
||||
[cuerdas.core :as str]
|
||||
[uxbox.util.i18n :refer (tr)]
|
||||
[uxbox.util.router :as r]
|
||||
|
|
@ -24,10 +22,10 @@
|
|||
[uxbox.main.ui.icons :as i]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[uxbox.main.ui.lightbox :as lbx]
|
||||
[uxbox.util.data :refer (read-string parse-int)]
|
||||
[uxbox.util.data :refer (deep-merge parse-int)]
|
||||
[uxbox.util.dom :as dom]))
|
||||
|
||||
;; --- Lenses
|
||||
;; --- Refs
|
||||
|
||||
(defn- resolve-pages
|
||||
[state]
|
||||
|
|
@ -42,8 +40,9 @@
|
|||
|
||||
;; --- Component
|
||||
|
||||
(defn page-item-render
|
||||
[own page total active?]
|
||||
(mx/defc page-item
|
||||
{:mixins [(mx/local) mx/static mx/reactive]}
|
||||
[page total active?]
|
||||
(letfn [(on-edit [event]
|
||||
(udl/open! :page-form {:page page}))
|
||||
|
||||
|
|
@ -58,50 +57,37 @@
|
|||
(dom/prevent-default event)
|
||||
(dom/stop-propagation event)
|
||||
(udl/open! :confirm {:on-accept delete}))]
|
||||
(html
|
||||
[:li {:class (when active? "selected")
|
||||
:on-click on-navigate}
|
||||
[:div.page-icon i/page]
|
||||
[:span (:name page)]
|
||||
[:div.page-actions
|
||||
[:a {:on-click on-edit} i/pencil]
|
||||
(if (> total 1)
|
||||
[:a {:on-click on-delete} i/trash])]])))
|
||||
[:li {:class (when active? "selected")
|
||||
:on-click on-navigate}
|
||||
[:div.page-icon i/page]
|
||||
[:span (:name page)]
|
||||
[:div.page-actions
|
||||
[:a {:on-click on-edit} i/pencil]
|
||||
(if (> total 1)
|
||||
[:a {:on-click on-delete} i/trash])]]))
|
||||
|
||||
(def page-item
|
||||
(mx/component
|
||||
{:render page-item-render
|
||||
:name "page-item"
|
||||
:mixins [(mx/local) mx/static mx/reactive]}))
|
||||
|
||||
(defn sitemap-toolbox-render
|
||||
[own]
|
||||
(mx/defc sitemap-toolbox
|
||||
{:mixins [mx/static mx/reactive]}
|
||||
[]
|
||||
(let [project (mx/react wb/project-ref)
|
||||
pages (mx/react pages-ref)
|
||||
current (mx/react wb/page-ref)
|
||||
create #(udl/open! :page-form {:page {:project (:id project)}})
|
||||
close #(rs/emit! (dw/toggle-flag :sitemap))]
|
||||
(html
|
||||
[:div.sitemap.tool-window
|
||||
[:div.tool-window-bar
|
||||
[:div.tool-window-icon i/project-tree]
|
||||
[:span (tr "ds.sitemap")]
|
||||
[:div.tool-window-close {:on-click close} i/close]]
|
||||
[:div.tool-window-content
|
||||
[:div.project-title
|
||||
[:span (:name project)]
|
||||
[:div.add-page {:on-click create} i/close]]
|
||||
[:ul.element-list
|
||||
(for [page pages
|
||||
:let [active? (= (:id page) (:id current))]]
|
||||
(-> (page-item page (count pages) active?)
|
||||
(rum/with-key (:id page))))]]])))
|
||||
|
||||
(def sitemap-toolbox
|
||||
(mx/component
|
||||
{:render sitemap-toolbox-render
|
||||
:name "sitemap-toolbox"
|
||||
:mixins [mx/static mx/reactive]}))
|
||||
[:div.sitemap.tool-window
|
||||
[:div.tool-window-bar
|
||||
[:div.tool-window-icon i/project-tree]
|
||||
[:span (tr "ds.sitemap")]
|
||||
[:div.tool-window-close {:on-click close} i/close]]
|
||||
[:div.tool-window-content
|
||||
[:div.project-title
|
||||
[:span (:name project)]
|
||||
[:div.add-page {:on-click create} i/close]]
|
||||
[:ul.element-list
|
||||
(for [page pages
|
||||
:let [active? (= (:id page) (:id current))]]
|
||||
(-> (page-item page (count pages) active?)
|
||||
(mx/with-key (:id page))))]]]))
|
||||
|
||||
;; --- Lightbox
|
||||
|
||||
|
|
@ -110,39 +96,43 @@
|
|||
:height 1080
|
||||
:layout :desktop})
|
||||
|
||||
(defn- layout-input
|
||||
(mx/defc layout-input
|
||||
[local page id]
|
||||
(let [layout (get +layouts+ id)
|
||||
metadata (:metadata page)
|
||||
size (select-keys layout [:width :height])
|
||||
change #(swap! local merge {:layout id} size)]
|
||||
(html
|
||||
[:div
|
||||
[:input {:type "radio"
|
||||
:key id :id id
|
||||
:name "project-layout"
|
||||
:value (:id layout)
|
||||
:checked (= id (:layout page))
|
||||
:on-change change}]
|
||||
[:label {:value (:id layout) :for id} (:name layout)]])))
|
||||
change #(swap! local update :metadata merge {:layout id} size)]
|
||||
[:div
|
||||
[:input {:type "radio"
|
||||
:key id :id id
|
||||
:name "project-layout"
|
||||
:value (:id layout)
|
||||
:checked (= id (:layout metadata))
|
||||
:on-change change}]
|
||||
[:label {:value (:id layout) :for id} (:name layout)]]))
|
||||
|
||||
(defn- page-form-lightbox-render
|
||||
[own local page]
|
||||
(let [edition? (:id page)
|
||||
page (merge page @local {:data nil})
|
||||
(mx/defcs page-form-lightbox
|
||||
{:mixins [(mx/local)]}
|
||||
[own page]
|
||||
(let [local (:rum/local own)
|
||||
page (deep-merge page @local {:data nil})
|
||||
metadata (:metadata page)
|
||||
edition? (:id page)
|
||||
valid? (and (not (str/empty? (str/trim (:name page ""))))
|
||||
(pos? (:width page))
|
||||
(pos? (:height page)))]
|
||||
(pos? (:width metadata))
|
||||
(pos? (:height metadata)))]
|
||||
(letfn [(update-size [field e]
|
||||
(let [value (dom/event->value e)
|
||||
value (parse-int value)]
|
||||
(swap! local assoc field value)))
|
||||
(swap! local assoc-in [:metadata field] value)))
|
||||
(update-name [e]
|
||||
(let [value (dom/event->value e)]
|
||||
(swap! local assoc :name value)))
|
||||
(toggle-sizes []
|
||||
(swap! local assoc
|
||||
:width (:height page)
|
||||
:height (:width page)))
|
||||
(let [width (get-in page [:metadata :width])
|
||||
height (get-in page [:metadata :height])]
|
||||
(swap! local update :metadata merge {:width height
|
||||
:height width})))
|
||||
(cancel [e]
|
||||
(dom/prevent-default e)
|
||||
(udl/close!))
|
||||
|
|
@ -152,53 +142,46 @@
|
|||
(if edition?
|
||||
(rs/emit! (udp/update-page-metadata page))
|
||||
(rs/emit! (udp/create-page page))))]
|
||||
(html
|
||||
[:div.lightbox-body
|
||||
(if edition?
|
||||
[:h3 "Edit page"]
|
||||
[:h3 "New page"])
|
||||
[:form
|
||||
[:input#project-name.input-text
|
||||
{:placeholder "Page name"
|
||||
:type "text"
|
||||
:value (:name page "")
|
||||
:auto-focus true
|
||||
:on-change update-name}]
|
||||
[:div.project-size
|
||||
[:input#project-witdh.input-text
|
||||
{:placeholder "Width"
|
||||
:type "number"
|
||||
:min 0
|
||||
:max 4000
|
||||
:value (:width page)
|
||||
:on-change #(update-size :width %)}]
|
||||
[:a.toggle-layout {:on-click toggle-sizes} i/toggle]
|
||||
[:input#project-height.input-text
|
||||
{:placeholder "Height"
|
||||
:type "number"
|
||||
:min 0
|
||||
:max 4000
|
||||
:value (:height page)
|
||||
:on-change #(update-size :height %)}]]
|
||||
[:div.lightbox-body
|
||||
(if edition?
|
||||
[:h3 "Edit page"]
|
||||
[:h3 "New page"])
|
||||
[:form
|
||||
[:input#project-name.input-text
|
||||
{:placeholder "Page name"
|
||||
:type "text"
|
||||
:value (:name page "")
|
||||
:auto-focus true
|
||||
:on-change update-name}]
|
||||
[:div.project-size
|
||||
[:input#project-witdh.input-text
|
||||
{:placeholder "Width"
|
||||
:type "number"
|
||||
:min 0
|
||||
:max 4000
|
||||
:value (:width metadata)
|
||||
:on-change #(update-size :width %)}]
|
||||
[:a.toggle-layout {:on-click toggle-sizes} i/toggle]
|
||||
[:input#project-height.input-text
|
||||
{:placeholder "Height"
|
||||
:type "number"
|
||||
:min 0
|
||||
:max 4000
|
||||
:value (:height metadata)
|
||||
:on-change #(update-size :height %)}]]
|
||||
|
||||
[:div.input-radio.radio-primary
|
||||
(layout-input local page "mobile")
|
||||
(layout-input local page "tablet")
|
||||
(layout-input local page "notebook")
|
||||
(layout-input local page "desktop")]
|
||||
[:div.input-radio.radio-primary
|
||||
(layout-input local page "mobile")
|
||||
(layout-input local page "tablet")
|
||||
(layout-input local page "notebook")
|
||||
(layout-input local page "desktop")]
|
||||
|
||||
(when valid?
|
||||
[:input#project-btn.btn-primary
|
||||
{:value "Go go go!"
|
||||
:on-click persist
|
||||
:type "button"}])]
|
||||
[:a.close {:on-click cancel} i/close]]))))
|
||||
|
||||
(def page-form-lightbox
|
||||
(mx/component
|
||||
{:render #(page-form-lightbox-render %1 (:rum/local %1) %2)
|
||||
:name "page-form-lightbox"
|
||||
:mixins [(mx/local)]}))
|
||||
(when valid?
|
||||
[:input#project-btn.btn-primary
|
||||
{:value "Go go go!"
|
||||
:on-click persist
|
||||
:type "button"}])]
|
||||
[:a.close {:on-click cancel} i/close]])))
|
||||
|
||||
(defmethod lbx/render-lightbox :page-form
|
||||
[{:keys [page]}]
|
||||
|
|
|
|||
|
|
@ -90,6 +90,16 @@
|
|||
(and (string? v)
|
||||
(re-seq +uuid-re+ v)))
|
||||
|
||||
;; --- Interop
|
||||
|
||||
(defn jscoll->vec
|
||||
"Convert array like js object into vector."
|
||||
[v]
|
||||
(-> (clj->js [])
|
||||
(.-slice)
|
||||
(.call v)
|
||||
(js->clj)))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Numbers Parsing
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
|
|
|||
|
|
@ -46,8 +46,9 @@
|
|||
{:mixins [mx/static mx/reactive]}
|
||||
[]
|
||||
(let [page (rum/react page-ref)
|
||||
width (:width page)
|
||||
height (:height page)]
|
||||
metadata (:metadata page)
|
||||
width (:width metadata)
|
||||
height (:height metadata)]
|
||||
[:div.view-canvas
|
||||
[:svg.page-layout {:width width :height height}
|
||||
(background)
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue