3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-06 06:51:37 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Enable line caps in component sync and svg upload

Browse source
This commit is contained in:
Andrés Moya 2021-08-20 15:48:10 +02:00 • committed by Andrey Antukh
parent eb40297a35
commit 3dffb9c8a0
4 changed files with 22 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

2
common/src/app/common/pages/common.cljc
View file

@ -37,6 +37,8 @@
:stroke-style :stroke-group :stroke-style :stroke-group
:stroke-width :stroke-group :stroke-width :stroke-group
:stroke-alignment :stroke-group :stroke-alignment :stroke-group
:stroke-cap-start :stroke-group
:stroke-cap-end :stroke-group
:rx :radius-group :rx :radius-group
:ry :radius-group :ry :radius-group
:r1 :radius-group :r1 :radius-group

18
frontend/src/app/main/data/workspace/svg_upload.cljs
View file

@ -95,7 +95,11 @@
(d/parse-double)))))) (d/parse-double))))))
(defn setup-stroke [shape] (defn setup-stroke [shape]
(let [shape (let [stroke-linecap (-> (or (get-in shape [:svg-attrs :stroke-linecap])
(get-in shape [:svg-attrs :style :stroke-linecap]))
((d/nilf str/trim))
((d/nilf keyword)))
shape
(cond-> shape (cond-> shape
(uc/color? (get-in shape [:svg-attrs :stroke])) (uc/color? (get-in shape [:svg-attrs :stroke]))
(-> (update :svg-attrs dissoc :stroke) (-> (update :svg-attrs dissoc :stroke)
@ -113,8 +117,16 @@
(get-in shape [:svg-attrs :style :stroke-width]) (get-in shape [:svg-attrs :style :stroke-width])
(-> (update-in [:svg-attrs :style] dissoc :stroke-width) (-> (update-in [:svg-attrs :style] dissoc :stroke-width)
(assoc :stroke-width (-> (get-in shape [:svg-attrs :style :stroke-width]) (assoc :stroke-width (-> (get-in shape [:svg-attrs :style :stroke-width])
(d/parse-double)))))] (d/parse-double))))
(if (d/any-key? shape :stroke-color :stroke-opacity :stroke-width)
(and stroke-linecap (= (:type shape) :path))
(-> (update-in [:svg-attrs :style] dissoc :stroke-linecap)
(cond->
(#{:round :square} stroke-linecap)
(assoc :stroke-cap-start stroke-linecap
:stroke-cap-end stroke-linecap))))]
(if (d/any-key? shape :stroke-color :stroke-opacity :stroke-width :stroke-cap-start :stroke-cap-end)
(merge {:stroke-style :svg} shape) (merge {:stroke-style :svg} shape)
shape))) shape)))

6
frontend/src/app/main/ui/shapes/attrs.cljs
View file

@ -125,20 +125,20 @@
;; for inner or outer strokes. ;; for inner or outer strokes.
(and (spec/stroke-caps-line (:stroke-cap-start shape)) (and (spec/stroke-caps-line (:stroke-cap-start shape))
(= (:stroke-cap-start shape) (:stroke-cap-end shape)) (= (:stroke-cap-start shape) (:stroke-cap-end shape))
(= (:stroke-alignment shape) :center)) (not (#{:inner :outer} (:stroke-alignment shape))))
(assoc :strokeLinecap (:stroke-cap-start shape)) (assoc :strokeLinecap (:stroke-cap-start shape))
;; For other cap types we use markers. ;; For other cap types we use markers.
(and (or (spec/stroke-caps-marker (:stroke-cap-start shape)) (and (or (spec/stroke-caps-marker (:stroke-cap-start shape))
(and (spec/stroke-caps-line (:stroke-cap-start shape)) (and (spec/stroke-caps-line (:stroke-cap-start shape))
(not= (:stroke-cap-start shape) (:stroke-cap-end shape)))) (not= (:stroke-cap-start shape) (:stroke-cap-end shape))))
(= (:stroke-alignment shape) :center)) (not (#{:inner :outer} (:stroke-alignment shape))))
(assoc :markerStart (str "url(#marker-" render-id "-" (name (:stroke-cap-start shape)))) (assoc :markerStart (str "url(#marker-" render-id "-" (name (:stroke-cap-start shape))))
(and (or (spec/stroke-caps-marker (:stroke-cap-end shape)) (and (or (spec/stroke-caps-marker (:stroke-cap-end shape))
(and (spec/stroke-caps-line (:stroke-cap-end shape)) (and (spec/stroke-caps-line (:stroke-cap-end shape))
(not= (:stroke-cap-start shape) (:stroke-cap-end shape)))) (not= (:stroke-cap-start shape) (:stroke-cap-end shape))))
(= (:stroke-alignment shape) :center)) (not (#{:inner :outer} (:stroke-alignment shape))))
(assoc :markerEnd (str "url(#marker-" render-id "-" (name (:stroke-cap-end shape)))))] (assoc :markerEnd (str "url(#marker-" render-id "-" (name (:stroke-cap-end shape)))))]
(obj/merge! attrs (clj->js stroke-attrs))) (obj/merge! attrs (clj->js stroke-attrs)))

3
frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs
View file

@ -74,7 +74,8 @@
(tr "workspace.options.stroke")) (tr "workspace.options.stroke"))
show-options (not= (:stroke-style values :none) :none) show-options (not= (:stroke-style values :none) :none)
show-caps (and show-caps (= (:stroke-alignment values) :center)) show-caps (and show-caps
(not (#{:inner :outer} (:stroke-alignment values))))
start-caps-state (mf/use-state {:open? false start-caps-state (mf/use-state {:open? false
:top 0 :top 0