mirror of
https://github.com/penpot/penpot.git
synced 2025-01-22 14:39:45 -05:00
Move workarea grid into separated namespace.
This commit is contained in:
Andrey Antukh
parent
77587537f6
commit
6952d21af2
2 changed files with 87 additions and 79 deletions
84
frontend/uxbox/ui/workspace/grid.cljs
Normal file
84
frontend/uxbox/ui/workspace/grid.cljs
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
(ns uxbox.ui.workspace.grid
|
||||
(:require [sablono.core :as html :refer-macros [html]]
|
||||
[rum.core :as rum]
|
||||
[uxbox.ui.mixins :as mx]
|
||||
[uxbox.ui.util :as util]
|
||||
[uxbox.ui.workspace.base :as wb]))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Grid
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(def ^:static grid-color "#cccccc")
|
||||
|
||||
(defn grid-render
|
||||
[own zoom]
|
||||
(letfn [(vertical-line [position value padding]
|
||||
(let [ticks-mod (/ 100 zoom)
|
||||
step-size (/ 10 zoom)]
|
||||
(if (< (mod value ticks-mod) step-size)
|
||||
(html [:line {:key position
|
||||
:y1 padding
|
||||
:y2 wb/viewport-width
|
||||
:x1 position
|
||||
:x2 position
|
||||
:stroke grid-color
|
||||
:stroke-width (/ 0.5 zoom)
|
||||
:opacity 0.75}])
|
||||
(html [:line {:key position
|
||||
:y1 padding
|
||||
:y2 wb/viewport-width
|
||||
:x1 position
|
||||
:x2 position
|
||||
:stroke grid-color
|
||||
:stroke-width (/ 0.5 zoom)
|
||||
:opacity 0.25}]))))
|
||||
(horizontal-line [position value padding]
|
||||
(let [ticks-mod (/ 100 zoom)
|
||||
step-size (/ 10 zoom)]
|
||||
(if (< (mod value ticks-mod) step-size)
|
||||
(html [:line {:key position
|
||||
:y1 position
|
||||
:y2 position
|
||||
:x1 padding
|
||||
:x2 wb/viewport-height
|
||||
:stroke grid-color
|
||||
:stroke-width (/ 0.5 zoom)
|
||||
:opacity 0.75}])
|
||||
(html [:line {:key position
|
||||
:y1 position
|
||||
:y2 position
|
||||
:x1 padding
|
||||
:x2 wb/viewport-height
|
||||
:stroke grid-color
|
||||
:stroke-width (/ 0.5 zoom)
|
||||
:opacity 0.25}]))))]
|
||||
(let [padding (* 20 zoom)
|
||||
ticks-mod (/ 100 zoom)
|
||||
step-size (/ 10 zoom)
|
||||
workspace (rum/react wb/workspace-state)
|
||||
enabled? (:grid-enabled workspace false)
|
||||
vertical-ticks (range (- padding wb/document-start-y)
|
||||
(- wb/viewport-height wb/document-start-y padding)
|
||||
step-size)
|
||||
horizontal-ticks (range (- padding wb/document-start-x)
|
||||
(- wb/viewport-width wb/document-start-x padding)
|
||||
step-size)]
|
||||
(html
|
||||
[:g.grid
|
||||
{:style {:display (if enabled? "block" "none")}}
|
||||
(for [tick vertical-ticks]
|
||||
(let [position (+ tick wb/document-start-x)
|
||||
line (vertical-line position tick padding)]
|
||||
(rum/with-key line (str "tick-" tick))))
|
||||
(for [tick horizontal-ticks]
|
||||
(let [position (+ tick wb/document-start-y)
|
||||
line (horizontal-line position tick padding)]
|
||||
(rum/with-key line (str "tick-" tick))))]))))
|
||||
|
||||
(def grid
|
||||
(util/component
|
||||
{:render grid-render
|
||||
:name "grid"
|
||||
:mixins [mx/static rum/reactive]}))
|
||||
|
||||
|
|
@ -6,7 +6,8 @@
|
|||
[uxbox.state :as s]
|
||||
[uxbox.ui.mixins :as mx]
|
||||
[uxbox.ui.util :as util]
|
||||
[uxbox.ui.workspace.canvas :as wc]
|
||||
[uxbox.ui.workspace.canvas :refer (canvas)]
|
||||
[uxbox.ui.workspace.grid :refer (grid)]
|
||||
[uxbox.ui.workspace.base :as wb]))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
|
@ -29,83 +30,6 @@
|
|||
:name "coordenates"
|
||||
:mixins [rum/reactive]}))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Grid
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(def ^:static grid-color "#cccccc")
|
||||
|
||||
(defn grid-render
|
||||
[own zoom]
|
||||
(letfn [(vertical-line [position value padding]
|
||||
(let [ticks-mod (/ 100 zoom)
|
||||
step-size (/ 10 zoom)]
|
||||
(if (< (mod value ticks-mod) step-size)
|
||||
(html [:line {:key position
|
||||
:y1 padding
|
||||
:y2 wb/viewport-width
|
||||
:x1 position
|
||||
:x2 position
|
||||
:stroke grid-color
|
||||
:stroke-width (/ 0.5 zoom)
|
||||
:opacity 0.75}])
|
||||
(html [:line {:key position
|
||||
:y1 padding
|
||||
:y2 wb/viewport-width
|
||||
:x1 position
|
||||
:x2 position
|
||||
:stroke grid-color
|
||||
:stroke-width (/ 0.5 zoom)
|
||||
:opacity 0.25}]))))
|
||||
(horizontal-line [position value padding]
|
||||
(let [ticks-mod (/ 100 zoom)
|
||||
step-size (/ 10 zoom)]
|
||||
(if (< (mod value ticks-mod) step-size)
|
||||
(html [:line {:key position
|
||||
:y1 position
|
||||
:y2 position
|
||||
:x1 padding
|
||||
:x2 wb/viewport-height
|
||||
:stroke grid-color
|
||||
:stroke-width (/ 0.5 zoom)
|
||||
:opacity 0.75}])
|
||||
(html [:line {:key position
|
||||
:y1 position
|
||||
:y2 position
|
||||
:x1 padding
|
||||
:x2 wb/viewport-height
|
||||
:stroke grid-color
|
||||
:stroke-width (/ 0.5 zoom)
|
||||
:opacity 0.25}]))))]
|
||||
(let [padding (* 20 zoom)
|
||||
ticks-mod (/ 100 zoom)
|
||||
step-size (/ 10 zoom)
|
||||
workspace (rum/react wb/workspace-state)
|
||||
enabled? (:grid-enabled workspace false)
|
||||
vertical-ticks (range (- padding wb/document-start-y)
|
||||
(- wb/viewport-height wb/document-start-y padding)
|
||||
step-size)
|
||||
horizontal-ticks (range (- padding wb/document-start-x)
|
||||
(- wb/viewport-width wb/document-start-x padding)
|
||||
step-size)]
|
||||
(html
|
||||
[:g.grid
|
||||
{:style {:display (if enabled? "block" "none")}}
|
||||
(for [tick vertical-ticks]
|
||||
(let [position (+ tick wb/document-start-x)
|
||||
line (vertical-line position tick padding)]
|
||||
(rum/with-key line (str "tick-" tick))))
|
||||
(for [tick horizontal-ticks]
|
||||
(let [position (+ tick wb/document-start-y)
|
||||
line (horizontal-line position tick padding)]
|
||||
(rum/with-key line (str "tick-" tick))))]))))
|
||||
|
||||
(def grid
|
||||
(util/component
|
||||
{:render grid-render
|
||||
:name "grid"
|
||||
:mixins [mx/static rum/reactive]}))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Viewport
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
|
@ -120,7 +44,7 @@
|
|||
:height wb/viewport-width
|
||||
:class (when drawing? "drawing")}
|
||||
[:g.zoom {:transform (str "scale(" zoom ", " zoom ")")}
|
||||
(wc/canvas)
|
||||
(canvas)
|
||||
(grid zoom)]])))
|
||||
|
||||
(def viewport
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue