mirror of
https://github.com/penpot/penpot.git
synced 2026-05-23 08:53:39 +00:00
98 lines
3.6 KiB
Clojure
98 lines
3.6 KiB
Clojure
;; This Source Code Form is subject to the terms of the Mozilla Public
|
|
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
;;
|
|
;; Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
|
|
;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
|
|
|
(ns uxbox.ui.workspace.sidebar.options.stroke
|
|
(:require [sablono.core :as html :refer-macros [html]]
|
|
[rum.core :as rum]
|
|
[lentes.core :as l]
|
|
[uxbox.locales :refer (tr)]
|
|
[uxbox.router :as r]
|
|
[uxbox.rstore :as rs]
|
|
[uxbox.state :as st]
|
|
[uxbox.library :as library]
|
|
[uxbox.data.shapes :as uds]
|
|
[uxbox.data.lightbox :as udl]
|
|
[uxbox.ui.icons :as i]
|
|
[uxbox.ui.mixins :as mx]
|
|
[uxbox.util.dom :as dom]
|
|
[uxbox.util.data :refer (parse-int parse-float read-string)]))
|
|
|
|
(defn- stroke-menu-render
|
|
[own menu shape]
|
|
(letfn [(change-stroke [value]
|
|
(let [sid (:id shape)]
|
|
(rs/emit! (uds/update-stroke-attrs sid value))))
|
|
(on-width-change [event]
|
|
(let [value (dom/event->value event)
|
|
value (parse-float value 1)]
|
|
(change-stroke {:width value})))
|
|
(on-opacity-change [event]
|
|
(let [value (dom/event->value event)
|
|
value (parse-float value 1)
|
|
value (/ value 10000)]
|
|
(change-stroke {:opacity value})))
|
|
(on-color-change [event]
|
|
(let [value (dom/event->value event)]
|
|
(change-stroke {:color value})))
|
|
(on-stroke-style-change [event]
|
|
(let [value (dom/event->value event)
|
|
value (read-string value)]
|
|
(change-stroke {:type value})))
|
|
(show-color-picker [event]
|
|
(let [x (.-clientX event)
|
|
y (.-clientY event)
|
|
opts {:x x :y y
|
|
:shape (:id shape)
|
|
:attr :stroke
|
|
:transparent? true}]
|
|
(udl/open! :workspace/colorpicker opts)))]
|
|
(let [local (:rum/local own)]
|
|
(html
|
|
[:div.element-set {:key (str (:id menu))}
|
|
[:div.element-set-title (:name menu)]
|
|
[:div.element-set-content
|
|
[:span "Style"]
|
|
[:div.row-flex
|
|
[:select#style.input-select {:placeholder "Style"
|
|
:value (:stroke-type shape)
|
|
:on-change on-stroke-style-change}
|
|
[:option {:value ":none"} "None"]
|
|
[:option {:value ":solid"} "Solid"]
|
|
[:option {:value ":dotted"} "Dotted"]
|
|
[:option {:value ":dashed"} "Dashed"]
|
|
[:option {:value ":mixed"} "Mixed"]]
|
|
[:input.input-text
|
|
{:placeholder "Width"
|
|
:type "number"
|
|
:min "0"
|
|
:value (:stroke-width shape "1")
|
|
:on-change on-width-change}]]
|
|
|
|
[:span "Color"]
|
|
[:div.row-flex.color-data
|
|
[:span.color-th
|
|
{:style {:background-color (:stroke shape)}
|
|
:on-click show-color-picker}]
|
|
[:div.color-info
|
|
[:span (:stroke shape)]]]
|
|
|
|
[:span "Opacity"]
|
|
[:div.row-flex
|
|
[:input.slidebar
|
|
{:type "range"
|
|
:min "0"
|
|
:max "10000"
|
|
:value (* 10000 (:stroke-opacity shape 1))
|
|
:step "1"
|
|
:on-change on-opacity-change}]]]]))))
|
|
|
|
(def stroke-menu
|
|
(mx/component
|
|
{:render stroke-menu-render
|
|
:name "stroke-menu"
|
|
:mixed [mx/static]}))
|