mirror of
https://github.com/penpot/penpot.git
synced 2025-02-22 14:57:01 -05:00
Minor refactor of workarea rules and grid.
This commit is contained in:
Andrey Antukh
parent
c182340be4
commit
f7b902a7ef
5 changed files with 98 additions and 75 deletions
|
|
@ -127,8 +127,8 @@
|
|||
;; Constants
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(def viewport-height 3000)
|
||||
(def viewport-width 3000)
|
||||
(def viewport-height 2048)
|
||||
(def viewport-width 2048)
|
||||
|
||||
(def document-start-x 50)
|
||||
(def document-start-y 50)
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
[uxbox.ui.dom :as dom]
|
||||
[uxbox.ui.util :as util]
|
||||
[uxbox.ui.workspace.base :as wb]
|
||||
[uxbox.ui.workspace.rules :as wr]
|
||||
[uxbox.ui.workspace.grid :refer (grid)]
|
||||
[uxbox.ui.workspace.toolboxes :as toolboxes]))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
|
@ -147,6 +147,8 @@
|
|||
(reset! wb/shapes-dragging? false))
|
||||
}
|
||||
(background)
|
||||
(grid 1)
|
||||
|
||||
[:svg.page-layout {}
|
||||
(for [shapeid (:shapes page)
|
||||
:let [item (get-in page [:shapes-by-id shapeid])]]
|
||||
|
|
|
|||
|
|
@ -13,67 +13,68 @@
|
|||
|
||||
(defn grid-render
|
||||
[own zoom]
|
||||
(letfn [(vertical-line [position value padding]
|
||||
(letfn [(vertical-line [page position value]
|
||||
(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
|
||||
: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 padding
|
||||
:y2 wb/viewport-width
|
||||
:y1 0
|
||||
:y2 (:height page)
|
||||
:x1 position
|
||||
:x2 position
|
||||
:stroke grid-color
|
||||
:stroke-width (/ 0.5 zoom)
|
||||
:opacity 0.25}]))))
|
||||
(horizontal-line [position value padding]
|
||||
(horizontal-line [page position value]
|
||||
(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
|
||||
: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 padding
|
||||
:x2 wb/viewport-height
|
||||
:x1 0
|
||||
:x2 (:width page)
|
||||
:stroke grid-color
|
||||
:stroke-width (/ 0.5 zoom)
|
||||
:opacity 0.25}]))))]
|
||||
(let [padding (* 20 zoom)
|
||||
(let [padding (* 0 zoom)
|
||||
ticks-mod (/ 100 zoom)
|
||||
step-size (/ 10 zoom)
|
||||
workspace (rum/react wb/workspace-state)
|
||||
page (rum/react wb/page-state)
|
||||
enabled? (:grid-enabled workspace false)
|
||||
vertical-ticks (range (- padding wb/document-start-y)
|
||||
(- wb/viewport-height wb/document-start-y padding)
|
||||
vertical-ticks (range (- 0 wb/document-start-y)
|
||||
(- (:width page) wb/document-start-y)
|
||||
step-size)
|
||||
horizontal-ticks (range (- padding wb/document-start-x)
|
||||
(- wb/viewport-width wb/document-start-x padding)
|
||||
horizontal-ticks (range (- 0 wb/document-start-x)
|
||||
(- (:height page) wb/document-start-x)
|
||||
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)]
|
||||
line (vertical-line page position tick)]
|
||||
(rum/with-key line (str "tick-" tick))))
|
||||
(for [tick horizontal-ticks]
|
||||
(let [position (+ tick wb/document-start-y)
|
||||
line (horizontal-line position tick padding)]
|
||||
line (horizontal-line page position tick)]
|
||||
(rum/with-key line (str "tick-" tick))))]))))
|
||||
|
||||
(def grid
|
||||
|
|
|
|||
|
|
@ -9,44 +9,86 @@
|
|||
[uxbox.ui.mixins :as mx]
|
||||
[uxbox.ui.util :as util]))
|
||||
|
||||
(def ^:static zoom 1)
|
||||
(def ^:static padding 20)
|
||||
(def ^:static step-size 10)
|
||||
(def ^:static start-width wb/document-start-x)
|
||||
(def ^:static start-height wb/document-start-y)
|
||||
(def ^:static big-ticks-mod (/ 100 zoom))
|
||||
(def ^:static mid-ticks-mod (/ 50 zoom))
|
||||
(def ^:static scroll-left 0)
|
||||
(def ^:static scroll-top 0)
|
||||
|
||||
(defn h-line
|
||||
[position value]
|
||||
(cond
|
||||
(< (mod value big-ticks-mod) step-size)
|
||||
(html
|
||||
[:g {:key position}
|
||||
[:line {:x1 position :x2 position :y1 5 :y2 padding :stroke "#7f7f7f"}]
|
||||
[:text {:x (+ position 2) :y 13 :fill "#7f7f7f" :style {:font-size "12px"}} value]])
|
||||
|
||||
(< (mod value mid-ticks-mod) step-size)
|
||||
(html
|
||||
[:line {:key position :x1 position :x2 position :y1 10 :y2 padding :stroke "#7f7f7f"}])
|
||||
|
||||
:else
|
||||
(html
|
||||
[:line {:key position :x1 position :x2 position :y1 15 :y2 padding :stroke "#7f7f7f"}])))
|
||||
|
||||
(defn v-line
|
||||
[position value]
|
||||
(cond
|
||||
(< (mod value big-ticks-mod) step-size)
|
||||
(html
|
||||
[:g {:key position}
|
||||
[:line {:y1 position
|
||||
:y2 position
|
||||
:x1 5
|
||||
:x2 padding
|
||||
:stroke "#7f7f7f"}]
|
||||
[:text {:y position
|
||||
:x 5
|
||||
:transform (str/format "rotate(90 0 %s)" position)
|
||||
:fill "#7f7f7f"
|
||||
:style {:font-size "12px"}}
|
||||
value]])
|
||||
|
||||
(< (mod value mid-ticks-mod) step-size)
|
||||
(html
|
||||
[:line {:key position
|
||||
:y1 position
|
||||
:y2 position
|
||||
:x1 10
|
||||
:x2 padding
|
||||
:stroke "#7f7f7f"}])
|
||||
|
||||
:else
|
||||
(html
|
||||
[:line {:key position
|
||||
:y1 position
|
||||
:y2 position
|
||||
:x1 15
|
||||
:x2 padding
|
||||
:stroke "#7f7f7f"}])))
|
||||
|
||||
(defn h-rule-render
|
||||
[own]
|
||||
(let [left (or (rum/react wb/left-scroll) 0)
|
||||
width wb/viewport-width
|
||||
start-width wb/document-start-x
|
||||
padding 20
|
||||
zoom 1
|
||||
big-ticks-mod (/ 100 zoom)
|
||||
mid-ticks-mod (/ 50 zoom)
|
||||
step-size 10
|
||||
(let [width wb/viewport-width
|
||||
ticks (concat (range (- padding start-width) 0 step-size)
|
||||
(range 0 (- width start-width padding) step-size))
|
||||
lines (fn [position value padding]
|
||||
(cond
|
||||
(< (mod value big-ticks-mod) step-size)
|
||||
(do
|
||||
(html
|
||||
[:g {:key position}
|
||||
[:line {:x1 position :x2 position :y1 5 :y2 padding :stroke "#7f7f7f"}]
|
||||
[:text {:x (+ position 2) :y 13 :fill "#7f7f7f" :style {:font-size "12px"}} value]]))
|
||||
(< (mod value mid-ticks-mod) step-size)
|
||||
(html
|
||||
[:line {:key position :x1 position :x2 position :y1 10 :y2 padding :stroke "#7f7f7f"}])
|
||||
:else
|
||||
(html
|
||||
[:line {:key position :x1 position :x2 position :y1 15 :y2 padding :stroke "#7f7f7f"}])))]
|
||||
(range 0 (- width start-width padding) step-size))]
|
||||
(html
|
||||
[:svg.horizontal-rule
|
||||
{:width 3000
|
||||
:height 3000
|
||||
:style {:left (str (- (- left 50)) "px")}}
|
||||
:style {:left (str (- (- scroll-left wb/document-start-x)) "px")}}
|
||||
[:g
|
||||
[:rect {:x padding :y 0 :width width :height padding :fill "#bab7b7"}]
|
||||
[:rect {:x 0 :y 0 :width padding :height padding :fill "#bab7b7"}]]
|
||||
[:g
|
||||
(for [tick ticks]
|
||||
(let [position (* (+ tick start-width) zoom)]
|
||||
(lines position tick padding)))]])))
|
||||
(for [tick ticks
|
||||
:let [pos (* (+ tick start-width) zoom)]]
|
||||
(h-line pos tick))]])))
|
||||
|
||||
(def h-rule
|
||||
(util/component
|
||||
|
|
@ -57,40 +99,18 @@
|
|||
(defn v-rule-render
|
||||
[own]
|
||||
(let [height wb/viewport-height
|
||||
start-height wb/document-start-y
|
||||
top (or (rum/react wb/top-scroll) 0)
|
||||
zoom 1
|
||||
padding 20
|
||||
big-ticks-mod (/ 100 zoom)
|
||||
mid-ticks-mod (/ 50 zoom)
|
||||
step-size 10
|
||||
ticks (concat (range (- padding start-height) 0 step-size)
|
||||
(range 0 (- height start-height padding) step-size))
|
||||
lines (fn [position value padding]
|
||||
(cond
|
||||
(< (mod value big-ticks-mod) step-size)
|
||||
(html
|
||||
[:g {:key position}
|
||||
[:line {:y1 position :y2 position :x1 5 :x2 padding :stroke "#7f7f7f"}]
|
||||
[:text {:y position :x 5 :transform (str/format "rotate(90 0 %s)" position) :fill "#7f7f7f" :style {:font-size "12px"}} value]])
|
||||
|
||||
(< (mod value mid-ticks-mod) step-size)
|
||||
(html
|
||||
[:line {:key position :y1 position :y2 position :x1 10 :x2 padding :stroke "#7f7f7f"}])
|
||||
|
||||
:else
|
||||
(html
|
||||
[:line {:key position :y1 position :y2 position :x1 15 :x2 padding :stroke "#7f7f7f"}])))]
|
||||
(range 0 (- height start-height padding) step-size))]
|
||||
(html
|
||||
[:svg.vertical-rule
|
||||
{:width 3000
|
||||
:height 3000
|
||||
:style {:top (str (- top) "px")}}
|
||||
:style {:top (str (- 0 scroll-top) "px")}}
|
||||
[:g
|
||||
[:rect {:x 0 :y padding :height height :width padding :fill "#bab7b7"}]
|
||||
(for [tick ticks]
|
||||
(let [position (* (+ tick start-height) zoom)]
|
||||
(lines position tick padding)))]])))
|
||||
(for [tick ticks
|
||||
:let [pos (* (+ tick start-height) zoom)]]
|
||||
(v-line pos tick))]])))
|
||||
|
||||
(def v-rule
|
||||
(util/component
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
:class (when drawing? "drawing")}
|
||||
[:g.zoom {:transform (str "scale(" zoom ", " zoom ")")}
|
||||
(canvas)
|
||||
(grid zoom)]])))
|
||||
#_(grid zoom)]])))
|
||||
|
||||
(def viewport
|
||||
(util/component
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue