mirror of
https://github.com/penpot/penpot.git
synced 2025-03-11 07:11:32 -05:00
✨ Integrate stoke add/del operation.
This commit is contained in:
Andrey Antukh
parent
c90c38d612
commit
4465db130d
6 changed files with 86 additions and 77 deletions
|
|
@ -2,7 +2,10 @@
|
|||
;; 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) 2016 Andrey Antukh <niwi@niwi.nz>
|
||||
;; This Source Code Form is "Incompatible With Secondary Licenses", as
|
||||
;; defined by the Mozilla Public License, v. 2.0.
|
||||
;;
|
||||
;; Copyright (c) 2020 UXBOX Labs SL
|
||||
|
||||
(ns uxbox.util.uuid
|
||||
(:refer-clojure :exclude [next])
|
||||
|
|
|
|||
|
|
@ -15,6 +15,10 @@
|
|||
[uxbox.common.exceptions :as ex]
|
||||
[uxbox.common.spec :as us]))
|
||||
|
||||
;; TODO: should be replaced when uuid is unified under
|
||||
;; uxbox.common.uuid namespace.
|
||||
(def uuid-zero #uuid "00000000-0000-0000-0000-000000000000")
|
||||
|
||||
;; --- Specs
|
||||
|
||||
(s/def ::id uuid?)
|
||||
|
|
@ -53,7 +57,7 @@
|
|||
(s/def ::ry number?)
|
||||
(s/def ::stroke-color string?)
|
||||
(s/def ::stroke-opacity number?)
|
||||
(s/def ::stroke-style #{:none :solid :dotted :dashed :mixed})
|
||||
(s/def ::stroke-style #{:solid :dotted :dashed :mixed :none})
|
||||
(s/def ::stroke-width number?)
|
||||
(s/def ::text-align #{"left" "right" "center" "justify"})
|
||||
(s/def ::type #{:rect :path :circle :image :text :canvas :curve :icon :frame :group})
|
||||
|
|
@ -163,6 +167,16 @@
|
|||
:name "root"
|
||||
:shapes []}}})
|
||||
|
||||
(def default-shape-attrs
|
||||
{:fill-color "#000000"
|
||||
:fill-opacity 1})
|
||||
|
||||
(def default-frame-attrs
|
||||
{:frame-id uuid-zero
|
||||
:fill-color "#ffffff"
|
||||
:fill-opacity 1
|
||||
:shapes []})
|
||||
|
||||
;; --- Changes Processing Impl
|
||||
|
||||
(defmulti process-change
|
||||
|
|
|
|||
|
|
@ -1228,13 +1228,6 @@
|
|||
"fr" : "Mixte"
|
||||
}
|
||||
},
|
||||
"workspace.options.stroke.none" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:66" ],
|
||||
"translations" : {
|
||||
"en" : "None",
|
||||
"fr" : "Aucun"
|
||||
}
|
||||
},
|
||||
"workspace.options.stroke.solid" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:67" ],
|
||||
"translations" : {
|
||||
|
|
|
|||
|
|
@ -966,12 +966,6 @@
|
|||
|
||||
(declare select-shape)
|
||||
|
||||
(def shape-default-attrs
|
||||
{:stroke-color "#000000"
|
||||
:stroke-opacity 1
|
||||
:fill-color "#000000"
|
||||
:fill-opacity 1})
|
||||
|
||||
(defn- calculate-frame-overlap
|
||||
[objects shape]
|
||||
(let [rshp (geom/shape->rect-shape shape)
|
||||
|
|
@ -1000,7 +994,7 @@
|
|||
shape (-> (geom/setup-proportions attrs)
|
||||
(assoc :id id))
|
||||
frame-id (calculate-frame-overlap objects shape)
|
||||
shape (merge shape-default-attrs shape {:frame-id frame-id})]
|
||||
shape (merge cp/default-shape-attrs shape {:frame-id frame-id})]
|
||||
(-> state
|
||||
(impl-assoc-shape shape)
|
||||
(assoc-in [:workspace-local :selected] #{id}))))
|
||||
|
|
@ -1016,14 +1010,6 @@
|
|||
[{:type :del-obj
|
||||
:id id}])))))))
|
||||
|
||||
(def frame-default-attrs
|
||||
{:stroke-color "#000000"
|
||||
:stroke-opacity 1
|
||||
:frame-id uuid/zero
|
||||
:fill-color "#ffffff"
|
||||
:shapes []
|
||||
:fill-opacity 1})
|
||||
|
||||
(defn add-frame
|
||||
[data]
|
||||
(us/verify ::shape-attrs data)
|
||||
|
|
@ -1033,7 +1019,7 @@
|
|||
(update [_ state]
|
||||
(let [shape (-> (geom/setup-proportions data)
|
||||
(assoc :id id))
|
||||
shape (merge frame-default-attrs shape)]
|
||||
shape (merge cp/default-frame-attrs shape)]
|
||||
(impl-assoc-shape state shape)))
|
||||
|
||||
ptk/WatchEvent
|
||||
|
|
@ -2262,6 +2248,8 @@
|
|||
;; Shortcuts
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
;; Shortcuts impl https://github.com/ccampbell/mousetrap
|
||||
|
||||
(def shortcuts
|
||||
{"ctrl+shift+m" #(st/emit! (toggle-layout-flag :sitemap))
|
||||
"ctrl+shift+i" #(st/emit! (toggle-layout-flag :libraries))
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
:fillOpacity (:fill-opacity shape nil)
|
||||
:rx (:rx shape nil)
|
||||
:ry (:ry shape nil)}]
|
||||
(when (not= :none stroke-style)
|
||||
(when (not= stroke-style :none)
|
||||
(itr/obj-assign! attrs
|
||||
#js {:stroke (:stroke-color shape nil)
|
||||
:strokeWidth (:stroke-width shape nil)
|
||||
|
|
|
|||
|
|
@ -39,6 +39,16 @@
|
|||
(d/parse-integer 0))]
|
||||
(st/emit! (udw/update-shape (:id shape) {:stroke-width value}))))
|
||||
|
||||
on-add-stroke
|
||||
(fn [event]
|
||||
(st/emit! (udw/update-shape (:id shape) {:stroke-style :solid
|
||||
:stroke-color "#000000"
|
||||
:stroke-opacity 1})))
|
||||
|
||||
on-del-stroke
|
||||
(fn [event]
|
||||
(st/emit! (udw/update-shape (:id shape) {:stroke-style :none})))
|
||||
|
||||
on-stroke-opacity-change
|
||||
(fn [event]
|
||||
(let [value (-> (dom/get-target event)
|
||||
|
|
@ -58,60 +68,61 @@
|
|||
:transparent? true}]
|
||||
(modal/show! colorpicker-modal props)))]
|
||||
|
||||
;; COLLAPSED
|
||||
;; [:div.element-set
|
||||
;; [:div.element-set-title (tr "workspace.options.stroke")]
|
||||
;; [:div.add-page i/close]]
|
||||
(if (not= :none (:stroke-style shape :none))
|
||||
[:div.element-set
|
||||
[:div.element-set-title (t locale "workspace.options.stroke")]
|
||||
[:div.add-page {:on-click on-del-stroke} i/close]
|
||||
|
||||
;; EXPANDED
|
||||
[:div.element-set
|
||||
[:div.element-set-title (t locale "workspace.options.stroke")]
|
||||
[:div.element-set-content
|
||||
[:div.element-set-content
|
||||
|
||||
;; Stroke Color
|
||||
[:div.row-flex.color-data
|
||||
[:span.color-th {:style {:background-color (:stroke-color shape)}
|
||||
:on-click show-color-picker}]
|
||||
[:div.color-info
|
||||
[:input {:read-only true
|
||||
:key (:stroke-color shape)
|
||||
:default-value (:stroke-color shape)}]]
|
||||
;; Stroke Color
|
||||
[:div.row-flex.color-data
|
||||
[:span.color-th {:style {:background-color (:stroke-color shape)}
|
||||
:on-click show-color-picker}]
|
||||
[:div.color-info
|
||||
[:input {:read-only true
|
||||
:key (:stroke-color shape)
|
||||
:default-value (:stroke-color shape)}]]
|
||||
|
||||
[:div.input-element.percentail
|
||||
[:input.input-text {:placeholder ""
|
||||
:value (str (-> (:stroke-opacity shape)
|
||||
(d/coalesce 1)
|
||||
(* 100)
|
||||
(math/round)))
|
||||
:type "number"
|
||||
:on-change on-stroke-opacity-change
|
||||
:min "0"
|
||||
:max "100"}]]
|
||||
[:div.input-element.percentail
|
||||
[:input.input-text {:placeholder ""
|
||||
:value (str (-> (:stroke-opacity shape)
|
||||
(d/coalesce 1)
|
||||
(* 100)
|
||||
(math/round)))
|
||||
:type "number"
|
||||
:on-change on-stroke-opacity-change
|
||||
:min "0"
|
||||
:max "100"}]]
|
||||
|
||||
[:input.slidebar {:type "range"
|
||||
:min "0"
|
||||
:max "100"
|
||||
:value (str (-> (:stroke-opacity shape)
|
||||
(d/coalesce 1)
|
||||
(* 100)
|
||||
(math/round)))
|
||||
:step "1"
|
||||
:on-change on-stroke-opacity-change}]]
|
||||
[:input.slidebar {:type "range"
|
||||
:min "0"
|
||||
:max "100"
|
||||
:value (str (-> (:stroke-opacity shape)
|
||||
(d/coalesce 1)
|
||||
(* 100)
|
||||
(math/round)))
|
||||
:step "1"
|
||||
:on-change on-stroke-opacity-change}]]
|
||||
|
||||
;; Stroke Style & Width
|
||||
[:div.row-flex
|
||||
[:select#style.input-select {:value (pr-str (:stroke-style shape))
|
||||
:on-change on-stroke-style-change}
|
||||
[:option {:value ":none"} (t locale "workspace.options.stroke.none")]
|
||||
[:option {:value ":solid"} (t locale "workspace.options.stroke.solid")]
|
||||
[:option {:value ":dotted"} (t locale "workspace.options.stroke.dotted")]
|
||||
[:option {:value ":dashed"} (t locale "workspace.options.stroke.dashed")]
|
||||
[:option {:value ":mixed"} (t locale "workspace.options.stroke.mixed")]]
|
||||
;; Stroke Style & Width
|
||||
[:div.row-flex
|
||||
[:select#style.input-select {:value (pr-str (:stroke-style shape))
|
||||
:on-change on-stroke-style-change}
|
||||
[:option {:value ":solid"} (t locale "workspace.options.stroke.solid")]
|
||||
[:option {:value ":dotted"} (t locale "workspace.options.stroke.dotted")]
|
||||
[:option {:value ":dashed"} (t locale "workspace.options.stroke.dashed")]
|
||||
[:option {:value ":mixed"} (t locale "workspace.options.stroke.mixed")]]
|
||||
|
||||
[:div.input-element.pixels
|
||||
[:input.input-text {:type "number"
|
||||
:min "0"
|
||||
:value (str (-> (:stroke-width shape)
|
||||
(d/coalesce 1)
|
||||
(math/round)))
|
||||
:on-change on-stroke-width-change}]]]]]))
|
||||
[:div.input-element.pixels
|
||||
[:input.input-text {:type "number"
|
||||
:min "0"
|
||||
:value (str (-> (:stroke-width shape)
|
||||
(d/coalesce 1)
|
||||
(math/round)))
|
||||
:on-change on-stroke-width-change}]]]]]
|
||||
|
||||
;; NO STROKE
|
||||
[:div.element-set
|
||||
[:div.element-set-title (t locale "workspace.options.stroke")]
|
||||
[:div.add-page {:on-click on-add-stroke} i/close]])))
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue