Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-10 08:50:57 -05:00
Code Issues Activity

Make grid aware of user settings.

Browse source
This commit is contained in:
Andrey Antukh 2016-04-03 20:09:03 +03:00
parent 71c9adb126
commit ffc6c79ed7
2 changed files with 24 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/uxbox/ui/workspace/canvas.cljs
View file

@ -54,7 +54,8 @@
(defn- canvas-render
[own {:keys [width height id] :as page}]
(let [workspace (rum/react uuwb/workspace-l)]
(let [workspace (rum/react uuwb/workspace-l)
flags (:flags workspace)]
(html
[:svg.page-canvas {:x uuwb/canvas-start-x
:y uuwb/canvas-start-y
@ -62,7 +63,8 @@
:width width
:height height}
(background)
(grid 1)
(when (contains? flags :grid)
(grid 1))
[:svg.page-layout {}
(shapes-selection)
[:g.main {}

47
src/uxbox/ui/workspace/grid.cljs
View file

@ -15,14 +15,22 @@
;; Grid
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(def ^:static grid-color "#cccccc")
(defn grid-render
[own zoom]
(letfn [(vertical-line [page position value]
(let [ticks-mod (/ 100 zoom)
step-size (/ 10 zoom)]
(if (< (mod value ticks-mod) step-size)
(let [page (rum/react wb/page-l)
opts (:options page)
step-size-x (/ (:grid/x-axis opts 10) zoom)
step-size-y (/ (:grid/y-axis opts 10) zoom)
grid-color (:grid/color opts "#cccccc")
ticks-mod (/ 100 zoom)
vertical-ticks (range (- 0 wb/canvas-start-y)
(- (:width page) wb/canvas-start-y)
step-size-x)
horizontal-ticks (range (- 0 wb/canvas-start-x)
(- (:height page) wb/canvas-start-x)
step-size-y)]
(letfn [(vertical-line [position value]
(if (< (mod value ticks-mod) step-size-x)
(html [:line {:key position
:y1 0
:y2 (:height page)
@ -38,11 +46,9 @@
:x2 position
:stroke grid-color
:stroke-width (/ 0.5 zoom)
:opacity 0.25}]))))
(horizontal-line [page position value]
(let [ticks-mod (/ 100 zoom)
step-size (/ 10 zoom)]
(if (< (mod value ticks-mod) step-size)
:opacity 0.25}])))
(horizontal-line [position value]
(if (< (mod value ticks-mod) step-size-y)
(html [:line {:key position
:y1 position
:y2 position
@ -58,29 +64,16 @@
:x2 (:width page)
:stroke grid-color
:stroke-width (/ 0.5 zoom)
:opacity 0.25}]))))]
(let [padding (* 0 zoom)
ticks-mod (/ 100 zoom)
step-size (/ 10 zoom)
flags (rum/react wb/flags-l)
page (rum/react wb/page-l)
enabled? (contains? flags :grid)
vertical-ticks (range (- 0 wb/canvas-start-y)
(- (:width page) wb/canvas-start-y)
step-size)
horizontal-ticks (range (- 0 wb/canvas-start-x)
(- (:height page) wb/canvas-start-x)
step-size)]
:opacity 0.25}])))]
(html
[:g.grid
{:style {:display (if enabled? "block" "none")}}
(for [tick vertical-ticks]
(let [position (+ tick wb/canvas-start-x)
line (vertical-line page position tick)]
line (vertical-line position tick)]
(rum/with-key line (str "tick-" tick))))
(for [tick horizontal-ticks]
(let [position (+ tick wb/canvas-start-y)
line (horizontal-line page position tick)]
line (horizontal-line position tick)]
(rum/with-key line (str "tick-" tick))))]))))
(def grid