3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-07 14:38:33 +02:00
Code Issues Projects Releases Packages Wiki Activity

Remove direct lense mutation and eventes recursion on workspace.

Browse source
This commit is contained in:
Andrey Antukh 2015-12-17 18:34:15 +02:00
parent e458ffe355
commit 827b8a3aec
6 changed files with 83 additions and 104 deletions
Download patch file Download diff file Expand all files Collapse all files

3
frontend/uxbox/data/projects.cljs
View file

@ -125,8 +125,7 @@
rs/UpdateEvent rs/UpdateEvent
(-apply-update [_ state] (-apply-update [_ state]
(let [s {:project projectid (let [s {:project projectid
:page pageid :page pageid}]
:toolboxes {}}]
(update state :workspace merge s))) (update state :workspace merge s)))
IPrintWithWriter IPrintWithWriter

20
frontend/uxbox/data/workspace.cljs
View file

@ -10,24 +10,14 @@
;; Events ;; Events
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(defn toggle-pagesbar (defn toggle-tool
[] [toolname]
(reify (reify
rs/UpdateEvent rs/UpdateEvent
(-apply-update [_ state] (-apply-update [_ state]
(update-in state [:workspace :pagesbar-enabled] (fnil not false))) (let [key (keyword (str (name toolname) "-enabled"))]
(update-in state [:workspace key] (fnil not false))))
IPrintWithWriter IPrintWithWriter
(-pr-writer [mv writer _] (-pr-writer [mv writer _]
(-write writer "#<event:u.s.p/toggle-pagebar>")))) (-write writer "#<event:u.s.p/toggle-tool>"))))
(defn toggle-grid
[]
(reify
rs/UpdateEvent
(-apply-update [_ state]
(update-in state [:workspace :grid-enabled] (fnil not false)))
IPrintWithWriter
(-pr-writer [mv writer _]
(-write writer "#<event:u.s.p/toggle-grid>"))))

10
frontend/uxbox/ui/workspace.cljs
View file

@ -6,6 +6,7 @@
[uxbox.state :as s] [uxbox.state :as s]
[uxbox.data.projects :as dp] [uxbox.data.projects :as dp]
[uxbox.ui.util :as util] [uxbox.ui.util :as util]
[uxbox.ui.mixins :as mx]
[uxbox.ui.workspace.base :as wb] [uxbox.ui.workspace.base :as wb]
[uxbox.ui.workspace.toolbar :as wt] [uxbox.ui.workspace.toolbar :as wt]
[uxbox.ui.workspace.leftsidebar :as wl] [uxbox.ui.workspace.leftsidebar :as wl]
@ -19,7 +20,6 @@
(defn workspace-render (defn workspace-render
[own projectid] [own projectid]
(println "workspace-render")
(html (html
[:div [:div
(wh/header) (wh/header)
@ -36,9 +36,9 @@
;; Canvas ;; Canvas
(wa/workarea) (wa/workarea)
;; (working-area conn @open-toolboxes page project shapes (rum/react ws/zoom) (rum/react ws/grid?)) ;; (working-area conn @open-toolboxes page project shapes (rum/react ws/zoom) (rum/react ws/grid?))
;; ;; Aside ;; ;; Aside
;; (when-not (empty? @open-toolboxes) ;; (when-not (empty? @open-toolboxes)
;; (aside conn open-toolboxes page shapes)) ;; (aside conn open-toolboxes page shapes))
]]])) ]]]))
(defn workspace-will-mount (defn workspace-will-mount
@ -58,5 +58,5 @@
:will-mount workspace-will-mount :will-mount workspace-will-mount
:transfer-state workspace-transfer-state :transfer-state workspace-transfer-state
:name "workspace" :name "workspace"
:mixins [rum/static]})) :mixins [mx/static rum/reactive]}))

91
frontend/uxbox/ui/workspace/header.cljs
View file

@ -23,53 +23,50 @@
(defn header-render (defn header-render
[own] [own]
(letfn [(toggle-pagesbar [e] (let [page (rum/react wb/page-state)
(rs/emit! (dw/toggle-pagesbar))) workspace (rum/react wb/workspace-state)
(toggle-grid [e] toggle #(rs/emit! (dw/toggle-tool %))]
(rs/emit! (dw/toggle-grid)))] (html
(let [page (rum/react wb/page-state) [:header#workspace-bar.workspace-bar
workspace (rum/react wb/workspace-state)] [:div.main-icon
(html (nav/link (r/route-for :dashboard/projects) i/logo-icon)]
[:header#workspace-bar.workspace-bar [:div.project-tree-btn
[:div.main-icon {:on-click (partial toggle :pagesbar)}
(nav/link (r/route-for :dashboard/projects) i/logo-icon)] i/project-tree
[:div.project-tree-btn [:span (:name page)]]
{:on-click toggle-pagesbar} [:div.workspace-options
i/project-tree [:ul.options-btn
[:span (:name page)]] [:li.tooltip.tooltip-bottom {:alt "Undo (Ctrl + Z)"}
[:div.workspace-options i/undo]
[:ul.options-btn [:li.tooltip.tooltip-bottom {:alt "Redo (Ctrl + Shift + Z)"}
[:li.tooltip.tooltip-bottom {:alt "Undo (Ctrl + Z)"} i/redo]]
i/undo] [:ul.options-btn
[:li.tooltip.tooltip-bottom {:alt "Redo (Ctrl + Shift + Z)"} ;; TODO: refactor
i/redo]] [:li.tooltip.tooltip-bottom
[:ul.options-btn {:alt "Export (Ctrl + E)"}
;; TODO: refactor ;; page-title
[:li.tooltip.tooltip-bottom [:a {:download (str (:name page) ".svg")
{:alt "Export (Ctrl + E)"} :href "#" :on-click on-download-clicked}
;; page-title i/export]]
[:a {:download (str (:name page) ".svg") [:li.tooltip.tooltip-bottom
:href "#" :on-click on-download-clicked} {:alt "Image (Ctrl + I)"}
i/export]] i/image]]
[:li.tooltip.tooltip-bottom [:ul.options-btn
{:alt "Image (Ctrl + I)"} [:li.tooltip.tooltip-bottom
i/image]] {:alt "Ruler (Ctrl + R)"}
[:ul.options-btn i/ruler]
[:li.tooltip.tooltip-bottom [:li.tooltip.tooltip-bottom
{:alt "Ruler (Ctrl + R)"} {:alt "Grid (Ctrl + G)"
i/ruler] :class (when (:grid-enabled workspace) "selected")
[:li.tooltip.tooltip-bottom :on-click (partial toggle :grid)}
{:alt "Grid (Ctrl + G)" i/grid]
:class (when (:grid-enabled workspace) "selected") [:li.tooltip.tooltip-bottom
:on-click toggle-grid} {:alt "Align (Ctrl + A)"}
i/grid] i/alignment]
[:li.tooltip.tooltip-bottom [:li.tooltip.tooltip-bottom
{:alt "Align (Ctrl + A)"} {:alt "Organize (Ctrl + O)"}
i/alignment] i/organize]]]
[:li.tooltip.tooltip-bottom (ui.u/user)])))
{:alt "Organize (Ctrl + O)"}
i/organize]]]
(ui.u/user)]))))
(def header (def header
(util/component (util/component

41
frontend/uxbox/ui/workspace/rules.cljs
View file

@ -5,21 +5,15 @@
[beicon.core :as rx] [beicon.core :as rx]
[uxbox.state :as s] [uxbox.state :as s]
[uxbox.ui.dom :as dom] [uxbox.ui.dom :as dom]
[uxbox.ui.workspace.base :as wd] [uxbox.ui.workspace.base :as wb]
[uxbox.ui.mixins :as mx]
[uxbox.ui.util :as util])) [uxbox.ui.util :as util]))
(def viewport-height 3000)
(def viewport-width 3000)
(def document-start-x 50)
(def document-start-y 50)
(defn h-rule-render (defn h-rule-render
[zoom] [own]
(let [left (rum/react wd/left-scroll) (let [left (or (rum/react wb/left-scroll) 0)
width viewport-width width wb/viewport-width
start-width document-start-x start-width wb/document-start-x
padding 20 padding 20
zoom 1 zoom 1
big-ticks-mod (/ 100 zoom) big-ticks-mod (/ 100 zoom)
@ -30,10 +24,12 @@
lines (fn [position value padding] lines (fn [position value padding]
(cond (cond
(< (mod value big-ticks-mod) step-size) (< (mod value big-ticks-mod) step-size)
(html (do
[:g (println "foobar")
[:line {:x1 position :x2 position :y1 5 :y2 padding :stroke "#7f7f7f"}] (html
[:text {:x (+ position 2) :y 13 :fill "#7f7f7f" :style {:font-size "12px"}} value]]) [:g
[:line {:x1 position :x2 position :y1 5 :y2 padding :stroke "#7f7f7f"}]
[:text {:x (+ position 2) :y 13 :fill "#7f7f7f" :style {:font-size "12px"}} value]]))
(< (mod value mid-ticks-mod) step-size) (< (mod value mid-ticks-mod) step-size)
(html (html
[:line {:key position :x1 position :x2 position :y1 10 :y2 padding :stroke "#7f7f7f"}]) [:line {:key position :x1 position :x2 position :y1 10 :y2 padding :stroke "#7f7f7f"}])
@ -57,14 +53,13 @@
(util/component (util/component
{:render h-rule-render {:render h-rule-render
:name "h-rule" :name "h-rule"
:mixins [rum/reactive]})) :mixins [mx/static rum/reactive]}))
(defn v-rule-render (defn v-rule-render
[zoom] [own]
(let [height viewport-height (let [height wb/viewport-height
start-height document-start-y start-height wb/document-start-y
top (rum/react wd/top-scroll) top (or (rum/react wb/top-scroll) 0)
zoom 1 zoom 1
padding 20 padding 20
big-ticks-mod (/ 100 zoom) big-ticks-mod (/ 100 zoom)
@ -102,4 +97,4 @@
(util/component (util/component
{:render v-rule-render {:render v-rule-render
:name "v-rule" :name "v-rule"
:mixins [rum/reactive]})) :mixins [mx/static rum/reactive]}))

22
frontend/uxbox/ui/workspace/toolbar.cljs
View file

@ -4,6 +4,8 @@
[cats.labs.lens :as l] [cats.labs.lens :as l]
[uxbox.rstore :as rs] [uxbox.rstore :as rs]
[uxbox.state :as s] [uxbox.state :as s]
[uxbox.data.workspace :as dw]
[uxbox.ui.workspace.base :as wb]
[uxbox.ui.icons :as i] [uxbox.ui.icons :as i]
[uxbox.ui.util :as util])) [uxbox.ui.util :as util]))
@ -11,36 +13,32 @@
;; Toolbar ;; Toolbar
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(def ^:static toolbar-state
(as-> (l/in [:workspace :toolbars]) $
(l/focus-atom $ s/state)))
(defn- toggle-toolbox (defn- toggle-toolbox
[state item] [state item]
(update state item (fnil not false))) (update state item (fnil not false)))
(defn toolbar-render (defn toolbar-render
[own] [own]
(let [state (rum/react toolbar-state)] (let [workspace (rum/react wb/workspace-state)
toggle #(rs/emit! (dw/toggle-tool %))]
(html (html
[:div#tool-bar.tool-bar [:div#tool-bar.tool-bar
[:div.tool-bar-inside [:div.tool-bar-inside
[:ul.main-tools [:ul.main-tools
[:li.tooltip [:li.tooltip
{:alt "Shapes (Ctrl + Shift + F)" {:alt "Shapes (Ctrl + Shift + F)"
:class (when (:tools state) "current") :class (when (:tools-enabled workspace false) "current")
:on-click #(swap! toolbar-state toggle-toolbox :tools)} :on-click (partial toggle :tools)}
i/shapes] i/shapes]
[:li.tooltip [:li.tooltip
{:alt "Icons (Ctrl + Shift + I)" {:alt "Icons (Ctrl + Shift + I)"
:class (when (:icons state) "current") :class (when (:icons-enabled workspace false) "current")
:on-click #(swap! toolbar-state toggle-toolbox :icons)} :on-click (partial toggle :icons)}
i/icon-set] i/icon-set]
[:li.tooltip [:li.tooltip
{:alt "Elements (Ctrl + Shift + L)" {:alt "Elements (Ctrl + Shift + L)"
:class (when (:layers state) :class (when (:layers-enabled workspace false) "current")
"current") :on-click (partial toggle :layers)}
:on-click #(swap! toolbar-state toggle-toolbox :layers)}
i/layers] i/layers]
[:li.tooltip [:li.tooltip
{:alt "Feedback (Ctrl + Shift + M)"} {:alt "Feedback (Ctrl + Shift + M)"}