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

✨ Integrate stoke add/del operation.

Browse source
This commit is contained in:
Andrey Antukh 2020-04-08 10:27:34 +02:00
parent c90c38d612
commit 4465db130d
6 changed files with 86 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
backend/src/uxbox/util/uuid.clj
View file

@ -2,7 +2,10 @@
;; License, v. 2.0. If a copy of the MPL was not distributed with this ;; 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/. ;; 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 (ns uxbox.util.uuid
(:refer-clojure :exclude [next]) (:refer-clojure :exclude [next])

16
common/uxbox/common/pages.cljc
View file

@ -15,6 +15,10 @@
[uxbox.common.exceptions :as ex] [uxbox.common.exceptions :as ex]
[uxbox.common.spec :as us])) [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 ;; --- Specs
(s/def ::id uuid?) (s/def ::id uuid?)
@ -53,7 +57,7 @@
(s/def ::ry number?) (s/def ::ry number?)
(s/def ::stroke-color string?) (s/def ::stroke-color string?)
(s/def ::stroke-opacity number?) (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 ::stroke-width number?)
(s/def ::text-align #{"left" "right" "center" "justify"}) (s/def ::text-align #{"left" "right" "center" "justify"})
(s/def ::type #{:rect :path :circle :image :text :canvas :curve :icon :frame :group}) (s/def ::type #{:rect :path :circle :image :text :canvas :curve :icon :frame :group})
@ -163,6 +167,16 @@
:name "root" :name "root"
:shapes []}}}) :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 ;; --- Changes Processing Impl
(defmulti process-change (defmulti process-change

7
frontend/resources/locales.json
View file

@ -1228,13 +1228,6 @@
"fr" : "Mixte" "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" : { "workspace.options.stroke.solid" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:67" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:67" ],
"translations" : { "translations" : {

20
frontend/src/uxbox/main/data/workspace.cljs
View file

@ -966,12 +966,6 @@
(declare select-shape) (declare select-shape)
(def shape-default-attrs
{:stroke-color "#000000"
:stroke-opacity 1
:fill-color "#000000"
:fill-opacity 1})
(defn- calculate-frame-overlap (defn- calculate-frame-overlap
[objects shape] [objects shape]
(let [rshp (geom/shape->rect-shape shape) (let [rshp (geom/shape->rect-shape shape)
@ -1000,7 +994,7 @@
shape (-> (geom/setup-proportions attrs) shape (-> (geom/setup-proportions attrs)
(assoc :id id)) (assoc :id id))
frame-id (calculate-frame-overlap objects shape) 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 (-> state
(impl-assoc-shape shape) (impl-assoc-shape shape)
(assoc-in [:workspace-local :selected] #{id})))) (assoc-in [:workspace-local :selected] #{id}))))
@ -1016,14 +1010,6 @@
[{:type :del-obj [{:type :del-obj
:id id}]))))))) :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 (defn add-frame
[data] [data]
(us/verify ::shape-attrs data) (us/verify ::shape-attrs data)
@ -1033,7 +1019,7 @@
(update [_ state] (update [_ state]
(let [shape (-> (geom/setup-proportions data) (let [shape (-> (geom/setup-proportions data)
(assoc :id id)) (assoc :id id))
shape (merge frame-default-attrs shape)] shape (merge cp/default-frame-attrs shape)]
(impl-assoc-shape state shape))) (impl-assoc-shape state shape)))
ptk/WatchEvent ptk/WatchEvent
@ -2262,6 +2248,8 @@
;; Shortcuts ;; Shortcuts
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Shortcuts impl https://github.com/ccampbell/mousetrap
(def shortcuts (def shortcuts
{"ctrl+shift+m" #(st/emit! (toggle-layout-flag :sitemap)) {"ctrl+shift+m" #(st/emit! (toggle-layout-flag :sitemap))
"ctrl+shift+i" #(st/emit! (toggle-layout-flag :libraries)) "ctrl+shift+i" #(st/emit! (toggle-layout-flag :libraries))

2
frontend/src/uxbox/main/ui/shapes/attrs.cljs
View file

@ -27,7 +27,7 @@
:fillOpacity (:fill-opacity shape nil) :fillOpacity (:fill-opacity shape nil)
:rx (:rx shape nil) :rx (:rx shape nil)
:ry (:ry shape nil)}] :ry (:ry shape nil)}]
(when (not= :none stroke-style) (when (not= stroke-style :none)
(itr/obj-assign! attrs (itr/obj-assign! attrs
#js {:stroke (:stroke-color shape nil) #js {:stroke (:stroke-color shape nil)
:strokeWidth (:stroke-width shape nil) :strokeWidth (:stroke-width shape nil)

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

@ -39,6 +39,16 @@
(d/parse-integer 0))] (d/parse-integer 0))]
(st/emit! (udw/update-shape (:id shape) {:stroke-width value})))) (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 on-stroke-opacity-change
(fn [event] (fn [event]
(let [value (-> (dom/get-target event) (let [value (-> (dom/get-target event)
@ -58,60 +68,61 @@
:transparent? true}] :transparent? true}]
(modal/show! colorpicker-modal props)))] (modal/show! colorpicker-modal props)))]
;; COLLAPSED (if (not= :none (:stroke-style shape :none))
;; [:div.element-set [:div.element-set
;; [:div.element-set-title (tr "workspace.options.stroke")] [:div.element-set-title (t locale "workspace.options.stroke")]
;; [:div.add-page i/close]] [:div.add-page {:on-click on-del-stroke} i/close]
;; EXPANDED [:div.element-set-content
[:div.element-set
[:div.element-set-title (t locale "workspace.options.stroke")]
[:div.element-set-content
;; Stroke Color ;; Stroke Color
[:div.row-flex.color-data [:div.row-flex.color-data
[:span.color-th {:style {:background-color (:stroke-color shape)} [:span.color-th {:style {:background-color (:stroke-color shape)}
:on-click show-color-picker}] :on-click show-color-picker}]
[:div.color-info [:div.color-info
[:input {:read-only true [:input {:read-only true
:key (:stroke-color shape) :key (:stroke-color shape)
:default-value (:stroke-color shape)}]] :default-value (:stroke-color shape)}]]
[:div.input-element.percentail [:div.input-element.percentail
[:input.input-text {:placeholder "" [:input.input-text {:placeholder ""
:value (str (-> (:stroke-opacity shape) :value (str (-> (:stroke-opacity shape)
(d/coalesce 1) (d/coalesce 1)
(* 100) (* 100)
(math/round))) (math/round)))
:type "number" :type "number"
:on-change on-stroke-opacity-change :on-change on-stroke-opacity-change
:min "0" :min "0"
:max "100"}]] :max "100"}]]
[:input.slidebar {:type "range" [:input.slidebar {:type "range"
:min "0" :min "0"
:max "100" :max "100"
:value (str (-> (:stroke-opacity shape) :value (str (-> (:stroke-opacity shape)
(d/coalesce 1) (d/coalesce 1)
(* 100) (* 100)
(math/round))) (math/round)))
:step "1" :step "1"
:on-change on-stroke-opacity-change}]] :on-change on-stroke-opacity-change}]]
;; Stroke Style & Width ;; Stroke Style & Width
[:div.row-flex [:div.row-flex
[:select#style.input-select {:value (pr-str (:stroke-style shape)) [:select#style.input-select {:value (pr-str (:stroke-style shape))
:on-change on-stroke-style-change} :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 ":solid"} (t locale "workspace.options.stroke.solid")] [:option {:value ":dotted"} (t locale "workspace.options.stroke.dotted")]
[:option {:value ":dotted"} (t locale "workspace.options.stroke.dotted")] [:option {:value ":dashed"} (t locale "workspace.options.stroke.dashed")]
[:option {:value ":dashed"} (t locale "workspace.options.stroke.dashed")] [:option {:value ":mixed"} (t locale "workspace.options.stroke.mixed")]]
[:option {:value ":mixed"} (t locale "workspace.options.stroke.mixed")]]
[:div.input-element.pixels [:div.input-element.pixels
[:input.input-text {:type "number" [:input.input-text {:type "number"
:min "0" :min "0"
:value (str (-> (:stroke-width shape) :value (str (-> (:stroke-width shape)
(d/coalesce 1) (d/coalesce 1)
(math/round))) (math/round)))
:on-change on-stroke-width-change}]]]]])) :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]])))