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

Implement grid as path.

Browse source 
That improves considerable the rendering performance.
This commit is contained in:
Andrey Antukh 2016-04-06 23:11:44 +03:00
parent 262f305bf9
commit 09f75ae3fd
No known key found for this signature in database
GPG key ID: 4DFEBCB8316A8B95
2 changed files with 37 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -71,7 +71,7 @@
(rum/with-key (str item)))) (rum/with-key (str item))))
(draw-area)]] (draw-area)]]
(when (contains? flags :grid) (when (contains? flags :grid)
(grid 1))]))) (grid))])))
(def canvas (def canvas
(mx/component (mx/component

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

@ -8,77 +8,49 @@
(ns uxbox.ui.workspace.grid (ns uxbox.ui.workspace.grid
(:require [sablono.core :as html :refer-macros [html]] (:require [sablono.core :as html :refer-macros [html]]
[rum.core :as rum] [rum.core :as rum]
[cuerdas.core :as str]
[uxbox.ui.mixins :as mx] [uxbox.ui.mixins :as mx]
[uxbox.ui.workspace.base :as wb])) [uxbox.ui.workspace.base :as wb]))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; --- Grid (Component)
;; Grid
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(defn grid-render (declare ticks-range)
[own zoom] (declare vertical-line)
(let [page (rum/react wb/page-l) (declare horizontal-line)
opts (:options page)
step-size-x (/ (:grid/x-axis opts 10) zoom) (defn- grid-render
step-size-y (/ (:grid/y-axis opts 10) zoom) [own]
grid-color (:grid/color opts "#cccccc") (let [{:keys [width height options]} (deref wb/page-l)
ticks-mod (/ 100 zoom) color (:grid/color options "#cccccc")
vertical-ticks (range (- 0 wb/canvas-start-y) x-ticks (ticks-range width (:grid/x-axis options 10))
(- (:width page) wb/canvas-start-y) y-ticks (ticks-range height (:grid/y-axis options 10))
step-size-x) path (as-> [] $
horizontal-ticks (range (- 0 wb/canvas-start-x) (reduce (partial vertical-line height) $ x-ticks)
(- (:height page) wb/canvas-start-x) (reduce (partial horizontal-line width) $ y-ticks))]
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)
:x1 position
:x2 position
:stroke grid-color
:stroke-width (/ 0.5 zoom)
:opacity 0.75}])
(html [:line {:key position
:y1 0
:y2 (:height page)
:x1 position
:x2 position
:stroke grid-color
:stroke-width (/ 0.5 zoom)
:opacity 0.50}])))
(horizontal-line [position value]
(if (< (mod value ticks-mod) step-size-y)
(html [:line {:key position
:y1 position
:y2 position
:x1 0
:x2 (:width page)
:stroke grid-color
:stroke-width (/ 0.5 zoom)
:opacity 0.75}])
(html [:line {:key position
:y1 position
:y2 position
:x1 0
:x2 (:width page)
:stroke grid-color
:stroke-width (/ 0.5 zoom)
:opacity 0.50}])))]
(html (html
[:g.grid {:style {:pointer-events "none"}} [:g.grid {:style {:pointer-events "none"}}
(for [tick vertical-ticks] [:path {:d (str/join " " path) :stroke color :opacity "0.3"}]])))
(let [position (+ tick wb/canvas-start-x)
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 position tick)]
(rum/with-key line (str "tick-" tick))))]))))
(def grid (def grid
(mx/component (mx/component
{:render grid-render {:render grid-render
:name "grid" :name "grid"
:mixins [mx/static rum/reactive]})) :mixins [mx/static]}))
;; --- Helpers
(defn- horizontal-line
[width acc value]
(let [pos (+ value wb/canvas-start-y)]
(conj acc (str/format "M %s %s L %s %s" 0 pos width pos))))
(defn- vertical-line
[height acc value]
(let [pos (+ value wb/canvas-start-y)]
(conj acc (str/format "M %s %s L %s %s" pos 0 pos height))))
(defn- ticks-range
[size step]
(range (- 0 wb/canvas-start-y)
(- size wb/canvas-start-y)
step))