Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-12 07:41:43 -05:00
Code Issues Activity

Add more robust precision function

Browse source
This commit is contained in:
Jesús Espino 2016-12-23 11:05:32 +01:00
parent 45f48b073c
commit b733d9e06f
7 changed files with 72 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
frontend/src/uxbox/main/ui/workspace/sidebar/options/circle_measures.cljs
View file

@ -19,7 +19,7 @@
[uxbox.util.mixins :as mx :include-macros true]
[uxbox.main.geom :as geom]
[uxbox.util.dom :as dom]
[uxbox.util.math :refer (precision)]
[uxbox.util.math :refer (precision-or-0)]
[uxbox.util.data :refer (parse-int parse-float read-string)]))
(mx/defc circle-measures-menu
@ -57,7 +57,7 @@
{:placeholder "Width"
:type "number"
:min "0"
:value (precision (:rx shape 0) 2)
:value (precision-or-0 (:rx shape 0) 2)
:on-change (partial on-size-change :rx)}]]
[:div.lock-size
{:class (when (:proportion-lock shape) "selected")
@ -68,7 +68,7 @@
{:placeholder "Height"
:type "number"
:min "0"
:value (precision (:ry shape 0) 2)
:value (precision-or-0 (:ry shape 0) 2)
:on-change (partial on-size-change :ry)}]]]
[:span "Position"]
@ -77,13 +77,13 @@
[:input.input-text
{:placeholder "cx"
:type "number"
:value (precision (:cx shape 0) 2)
:value (precision-or-0 (:cx shape 0) 2)
:on-change (partial on-pos-change :x)}]]
[:div.input-element.pixels
[:input.input-text
{:placeholder "cy"
:type "number"
:value (precision (:cy shape 0) 2)
:value (precision-or-0 (:cy shape 0) 2)
:on-change (partial on-pos-change :y)}]]]
[:span "Rotation"]
@ -102,7 +102,7 @@
:type "number"
:min 0
:max 360
:value (precision (:rotation shape 0) 2)
:value (precision-or-0 (:rotation shape 0) 2)
:on-change on-rotation-change
}]]
[:input.input-text

12
frontend/src/uxbox/main/ui/workspace/sidebar/options/icon_measures.cljs
View file

@ -19,7 +19,7 @@
[uxbox.util.mixins :as mx :include-macros true]
[uxbox.main.geom :as geom]
[uxbox.util.dom :as dom]
[uxbox.util.math :refer (precision)]
[uxbox.util.math :refer (precision-or-0)]
[uxbox.util.data :refer (parse-int parse-float read-string)]))
(defn- icon-measures-menu-render
@ -58,7 +58,7 @@
{:placeholder "Width"
:type "number"
:min "0"
:value (precision (:width size) 2)
:value (precision-or-0 (:width size) 2)
:on-change (partial on-size-change :width)}]]
[:div.lock-size
{:class (when (:proportion-lock shape) "selected")
@ -69,7 +69,7 @@
{:placeholder "Height"
:type "number"
:min "0"
:value (precision (:height size) 2)
:value (precision-or-0 (:height size) 2)
:on-change (partial on-size-change :height)}]]]
[:span "Position"]
@ -78,13 +78,13 @@
[:input.input-text
{:placeholder "X"
:type "number"
:value (precision (:x1 shape 0) 2)
:value (precision-or-0 (:x1 shape 0) 2)
:on-change (partial on-pos-change :x)}]]
[:div.input-element.pixels
[:input.input-text
{:placeholder "Y"
:type "number"
:value (precision (:y1 shape 0) 2)
:value (precision-or-0 (:y1 shape 0) 2)
:on-change (partial on-pos-change :y)}]]]
[:span "Rotation"]
@ -103,7 +103,7 @@
:type "number"
:min 0
:max 360
:value (precision (:rotation shape 0) 2)
:value (precision-or-0 (:rotation shape 0) 2)
:on-change on-rotation-change
}]]
[:input.input-text

12
frontend/src/uxbox/main/ui/workspace/sidebar/options/line_measures.cljs
View file

@ -19,7 +19,7 @@
[uxbox.util.mixins :as mx :include-macros true]
[uxbox.main.geom :as geom]
[uxbox.util.dom :as dom]
[uxbox.util.math :refer (precision)]
[uxbox.util.math :refer (precision-or-0)]
[uxbox.util.data :refer (parse-int parse-float read-string)]))
(defn- line-measures-menu-render
@ -44,24 +44,24 @@
[:input.input-text
{:placeholder "x1"
:type "number"
:value (precision (:x1 shape 0) 2)
:value (precision-or-0 (:x1 shape 0) 2)
:on-change (partial on-pos-change :x1)}]
[:input.input-text
{:placeholder "y1"
:type "number"
:value (precision (:y1 shape 0) 2)
:value (precision-or-0 (:y1 shape 0) 2)
:on-change (partial on-pos-change :y1)}]]
[:div.row-flex
[:input.input-text
{:placeholder "x2"
:type "number"
:value (precision (:x2 shape 0) 2)
:value (precision-or-0 (:x2 shape 0) 2)
:on-change (partial on-pos-change :x2)}]
[:input.input-text
{:placeholder "y2"
:type "number"
:value (precision (:y2 shape 0) 2)
:value (precision-or-0 (:y2 shape 0) 2)
:on-change (partial on-pos-change :y2)}]]
[:span "Rotation"]
@ -79,7 +79,7 @@
:type "number"
:min 0
:max 360
:value (precision (:rotation shape 0) 2)
:value (precision-or-0 (:rotation shape 0) 2)
:on-change on-rotation-change
}]
[:input.input-text

16
frontend/src/uxbox/main/ui/workspace/sidebar/options/rect_measures.cljs
View file

@ -17,7 +17,7 @@
[uxbox.util.mixins :as mx :include-macros true]
[uxbox.main.geom :as geom]
[uxbox.util.dom :as dom]
[uxbox.util.math :refer (precision)]
[uxbox.util.math :refer (precision-or-0)]
[uxbox.util.data :refer (parse-int parse-float read-string)]))
(mx/defc rect-measures-menu
@ -61,7 +61,7 @@
{:placeholder "Width"
:type "number"
:min "0"
:value (precision (:width size) 2)
:value (precision-or-0 (:width size) 2)
:on-change (partial on-size-change :width)}]]
[:div.lock-size
{:class (when (:proportion-lock shape) "selected")
@ -72,7 +72,7 @@
{:placeholder "Height"
:type "number"
:min "0"
:value (precision (:height size) 2)
:value (precision-or-0 (:height size) 2)
:on-change (partial on-size-change :height)}]]]
[:span "Position"]
@ -81,13 +81,13 @@
[:input.input-text
{:placeholder "x"
:type "number"
:value (precision (:x1 shape 0) 2)
:value (precision-or-0 (:x1 shape 0) 2)
:on-change (partial on-pos-change :x)}]]
[:div.input-element.pixels
[:input.input-text
{:placeholder "y"
:type "number"
:value (precision (:y1 shape 0) 2)
:value (precision-or-0 (:y1 shape 0) 2)
:on-change (partial on-pos-change :y)}]]]
[:span "Border radius"]
@ -95,13 +95,13 @@
[:input.input-text
{:placeholder "rx"
:type "number"
:value (precision (:rx shape 0) 2)
:value (precision-or-0 (:rx shape 0) 2)
:on-change (partial on-border-change :rx)}]
[:div.lock-size i/lock]
[:input.input-text
{:placeholder "ry"
:type "number"
:value (precision (:ry shape 0) 2)
:value (precision-or-0 (:ry shape 0) 2)
:on-change (partial on-border-change :ry)}]]
[:span "Rotation"]
@ -120,7 +120,7 @@
:type "number"
:min 0
:max 360
:value (precision (:rotation shape "0") 2)
:value (precision-or-0 (:rotation shape "0") 2)
:on-change on-rotation-change
}]]
[:input.input-text

4
frontend/src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs
View file

@ -19,7 +19,7 @@
[uxbox.util.mixins :as mx :include-macros true]
[uxbox.util.dom :as dom]
[uxbox.util.data :refer (parse-int parse-float read-string)]
[uxbox.util.math :refer (precision)]
[uxbox.util.math :refer (precision-or-0)]
[uxbox.util.spec :refer (color?)]))
(defn- stroke-menu-render
@ -72,7 +72,7 @@
{:placeholder "Width"
:type "number"
:min "0"
:value (precision (:stroke-width shape 1) 2)
:value (precision-or-0 (:stroke-width shape 1) 2)
:on-change on-width-change}]]]
[:span "Color"]

48
frontend/src/uxbox/main/ui/workspace/sidebar/options/text.cljs
View file

@ -21,7 +21,7 @@
[uxbox.main.ui.workspace.base :as wb]
[uxbox.main.geom :as geom]
[uxbox.util.dom :as dom]
[uxbox.util.math :refer (precision)]
[uxbox.util.math :refer (precision-or-0)]
[uxbox.util.data :refer (parse-int
parse-float
read-string
@ -90,13 +90,41 @@
[:span "Size and Weight"]
[:div.row-flex
[:input.input-text
{:placeholder "Font Size"
:type "number"
:min "0"
:max "200"
:value (precision size 2)
:on-change on-font-size-change}]
[:div.editable-select
{:style {:position "relative"
:width "100%"
:height "38px"}}
[:select.input-select
{:id "common-font-sizes"
:style {:position "absolute"
:top 0
:left 0
:border "none"
:color "white"
:width "100%"}
:on-change on-font-size-change}
[:option {:style {:color "black"} :value "8"} "8"]
[:option {:style {:color "black"} :value "9"} "9"]
[:option {:style {:color "black"} :value "10"} "10"]
[:option {:style {:color "black"} :value "11"} "11"]
[:option {:style {:color "black"} :value "12"} "12"]
[:option {:style {:color "black"} :value "14"} "14"]
[:option {:style {:color "black"} :value "18"} "18"]
[:option {:style {:color "black"} :value "24"} "24"]
[:option {:style {:color "black"} :value "36"} "36"]
[:option {:style {:color "black"} :value "48"} "48"]
[:option {:style {:color "black"} :value "72"} "72"]]
[:input.input-text
{:placeholder "Font Size"
:style {:position "absolute"
:top 0
:left 0
:width "80%"}
:type "number"
:min "0"
:max "200"
:value (precision-or-0 size 2)
:on-change on-font-size-change}]]
[:select.input-select {:value (pr-str [weight style])
:on-change on-font-style-change}
(for [style styles
@ -112,7 +140,7 @@
:step "0.1"
:min "0"
:max "200"
:value (precision line-height 2)
:value (precision-or-0 line-height 2)
:on-change on-font-line-height-change}]
[:input.input-text
{:placeholder "Letter spacing"
@ -120,7 +148,7 @@
:step "0.1"
:min "0"
:max "200"
:value (precision letter-spacing 2)
:value (precision-or-0 letter-spacing 2)
:on-change on-font-letter-spacing-change}]]

6
frontend/src/uxbox/util/math.cljs
View file

@ -83,6 +83,12 @@
[^number v ^number n]
(js/parseFloat (.toFixed v n)))
(defn precision-or-0
[^number v ^number n]
(if (.-toFixed v)
(js/parseFloat (.toFixed v n))
0))
(defn radians
"Converts degrees to radians."
[^number degrees]