Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-24 15:39:50 -05:00
Code Issues Activity

✨ Improve grid performance (now using svg patterns).

Browse source
This commit is contained in:
Andrey Antukh 2020-01-09 13:42:34 +01:00
parent 83894f9954
commit 733bf7f4fb
1 changed files with 26 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
frontend/src/uxbox/main/ui/workspace/grid.cljs
View file

@ -8,35 +8,36 @@
(ns uxbox.main.ui.workspace.grid (ns uxbox.main.ui.workspace.grid
(:require (:require
[cuerdas.core :as str] [cuerdas.core :as str]
[lentes.core :as l]
[rumext.alpha :as mf] [rumext.alpha :as mf]
[uxbox.main.refs :as refs]
[uxbox.main.constants :as c])) [uxbox.main.constants :as c]))
;; --- Grid (Component) ;; --- Grid (Component)
(defn- horizontal-line (def options-iref
[width acc value] (-> (l/key :options)
(let [pos value] (l/derive refs/workspace-data)))
(conj acc (str/format "M %s %s L %s %s" 0 pos width pos))))
(defn- vertical-line
[height acc value]
(let [pos value]
(conj acc (str/format "M %s %s L %s %s" pos 0 pos height))))
(defn- make-grid-path
[metadata]
(let [x-ticks (range 0 c/viewport-width (:grid-x-axis metadata 10))
y-ticks (range 0 c/viewport-height (:grid-y-axis metadata 10))]
(as-> [] $
(reduce (partial vertical-line c/viewport-height) $ x-ticks)
(reduce (partial horizontal-line c/viewport-width) $ y-ticks)
(str/join " " $))))
(mf/defc grid (mf/defc grid
[{:keys [page] :as props}] {:wrap [mf/wrap-memo]}
(let [metadata (:metadata page) [props]
color (:grid-color metadata "#cccccc") (prn "grid$render")
path (mf/use-memo {:deps #js [metadata] (let [options (mf/deref options-iref)
:fn #(make-grid-path metadata)})] width (:grid-x options 10)
[:g.grid {:style {:pointer-events "none"}} height (:grid-y options 10)
[:path {:d path :stroke color :opacity "0.3"}]])) color (:grid-color options "#cccccc")]
[:g.grid
[:defs
[:pattern {:id "grid-pattern"
:x "0" :y "0"
:width width :height height
:patternUnits "userSpaceOnUse"}
[:path {:d (str/format "M 0 %s L %s %s L %s 0" height width height width)
:fill "transparent"
:stroke color}]]]
[:rect {:style {:pointer-events "none"}
:x 0 :y 0
:width "100%"
:height "100%"
:fill "url(#grid-pattern)"}]]))