Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-25 07:58:49 -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 (defn- canvas-render
[own {:keys [width height id] :as page}] [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 (html
[:svg.page-canvas {:x uuwb/canvas-start-x [:svg.page-canvas {:x uuwb/canvas-start-x
:y uuwb/canvas-start-y :y uuwb/canvas-start-y
@ -62,7 +63,8 @@
:width width :width width
:height height} :height height}
(background) (background)
(grid 1) (when (contains? flags :grid)
(grid 1))
[:svg.page-layout {} [:svg.page-layout {}
(shapes-selection) (shapes-selection)
[:g.main {} [:g.main {}

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

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