Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-09 14:21:42 -05:00
Code Issues Activity

🐛 Fix missing key properties and react warnings

Browse source
This commit is contained in:
Andrey Antukh 2022-04-18 19:46:47 +02:00 • committed by Alonso Torres
parent 506f63317a
commit d9d47b2c65
8 changed files with 27 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/deps.edn
View file

@ -10,7 +10,7 @@
funcool/beicon {:mvn/version "2021.07.05-1"}
funcool/okulary {:mvn/version "2022.04.11-16"}
funcool/potok {:mvn/version "2021.09.20-0"}
funcool/rumext {:mvn/version "2022.03.31-133"}
funcool/rumext {:mvn/version "2022.04.19-148"}
funcool/tubax {:mvn/version "2021.05.20-0"}
instaparse/instaparse {:mvn/version "1.4.10"}

13
frontend/src/app/main/ui/shapes/custom_stroke.cljs
View file

@ -405,7 +405,6 @@
shape (obj/get props "shape")
elem-name (obj/get child "type")
render-id (mf/use-ctx muc/render-ctx)]
[:g {:id (dm/fmt "fills-%" (:id shape))}
[:> elem-name (build-fill-props shape child render-id)]]))
@ -434,12 +433,8 @@
(mf/defc shape-custom-strokes
{::mf/wrap-props false}
[props]
(let [child (obj/get props "children")
shape (obj/get props "shape")]
(let [children (obj/get props "children")
shape (obj/get props "shape")]
[:*
[:& shape-fills {:shape shape}
child]
[:& shape-strokes {:shape shape}
child]]))
[:& shape-fills {:shape shape} children]
[:& shape-strokes {:shape shape} children]]))

9
frontend/src/app/main/ui/shapes/fills.cljs
View file

@ -7,6 +7,7 @@
(ns app.main.ui.shapes.fills
(:require
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.common.geom.shapes :as gsh]
[app.config :as cfg]
[app.main.ui.shapes.attrs :as attrs]
@ -55,10 +56,11 @@
(obj/set! "patternTransform" transform))]
(for [[shape-index shape] (d/enumerate (or (:position-data shape) [shape]))]
[:*
[:* {:key (dm/str shape-index)}
(for [[fill-index value] (-> (d/enumerate (:fills shape [])) reverse)]
(when (some? (:fill-color-gradient value))
(let [props #js {:id (str "fill-color-gradient_" render-id "_" fill-index)
(let [props #js {:id (dm/str "fill-color-gradient_" render-id "_" fill-index)
:key (dm/str fill-index)
:gradient (:fill-color-gradient value)
:shape shape}]
(case (d/name (:type (:fill-color-gradient value)))
@ -66,12 +68,13 @@
"radial" [:> grad/radial-gradient props]))))
(let [fill-id (str "fill-" shape-index "-" render-id)]
(let [fill-id (dm/str "fill-" shape-index "-" render-id)]
[:> :pattern (-> (obj/clone pattern-attrs)
(obj/set! "id" fill-id))
[:g
(for [[fill-index value] (-> (d/enumerate (:fills shape [])) reverse)]
[:> :rect (-> (attrs/extract-fill-attrs value render-id fill-index)
(obj/set! "key" (dm/str fill-index))
(obj/set! "width" width)
(obj/set! "height" height))])

3
frontend/src/app/main/ui/shapes/text/svg_text.cljs
View file

@ -45,6 +45,7 @@
(for [[index data] (d/enumerate position-data)]
(when (some? (:fill-color-gradient data))
[:& grad/gradient {:id (str "fill-color-gradient_" (get-gradient-id index))
:key index
:attr :fill-color-gradient
:shape data}]))])
@ -71,5 +72,5 @@
(obj/set! "fill" (str "url(#fill-" index "-" render-id ")")))})
shape (assoc shape :fills (:fills data))]
[:& shape-custom-strokes {:shape shape}
[:& shape-custom-strokes {:shape shape :key index}
[:> :text props (:text data)]]))]]))

4
frontend/src/app/main/ui/workspace/shapes/frame.cljs
View file

@ -72,8 +72,8 @@
#(rx/dispose! sem)))))
(if (and render? (= shape (mf/ref-val prev-shape-ref)))
(mf/create-element component props)
(mf/create-element frame-placeholder props)))))
(mf/jsx component props mf/undefined)
(mf/jsx frame-placeholder props mf/undefined)))))
;; Draw the frame proper as a deferred component
(defn deferred-frame-shape-factory

7
frontend/src/app/main/ui/workspace/sidebar/layers.cljs
View file

@ -7,6 +7,7 @@
(ns app.main.ui.workspace.sidebar.layers
(:require
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.common.pages.helpers :as cph]
[app.common.uuid :as uuid]
[app.main.data.workspace :as dw]
@ -304,7 +305,7 @@
{::mf/wrap-props false
::mf/wrap [mf/memo #(mf/throttle % 200)]}
[props]
(let [search (obj/get props "search")
(let [search (obj/get props "search")
filters (obj/get props "filters")
filters (if (some #{:shape} filters)
(conj filters :rect :circle :path :bool)
@ -463,7 +464,7 @@
[:span {:on-click toggle-search} i/search]]))
[:div.tool-window-content {:on-scroll on-scroll}
[:& layers-tree-wrapper {:key (:id page)
:objects objects
[:& layers-tree-wrapper {:objects objects
:key (dm/str (:id page))
:search (:search-text @filter-state)
:filters (keys (:active-filters @filter-state))}]]]))

1
frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs
View file

@ -144,6 +144,7 @@
:id (:fill-color-ref-id value)
:file-id (:fill-color-ref-file value)
:gradient (:fill-color-gradient value)}
:key index
:index index
:title (tr "workspace.options.fill")
:on-change (on-change index)

17
frontend/src/app/main/ui/workspace/viewport/rules.cljs
View file

@ -8,6 +8,7 @@
(:require
[app.common.colors :as colors]
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.common.geom.shapes :as gsh]
[app.common.math :as mth]
[app.main.ui.formats :as fmt]
@ -117,20 +118,17 @@
step (calculate-step-size zoom)
clip-id (str "clip-rule-" (d/name axis))]
[:*
(let [{:keys [x y width height]} (get-background-area vbox zoom axis)]
[:rect {:x x :y y :width width :height height :style {:fill rules-background}}])
[:g.rules {:clipPath (str "url(#" clip-id ")")}
[:g.rules {:clipPath (str "url(#" clip-id ")")}
[:defs
[:clipPath {:id clip-id}
(let [{:keys [x y width height]} (get-clip-area vbox zoom axis)]
[:rect {:x x :y y :width width :height height}])]]
(let [{:keys [start end]} (get-rule-params vbox axis)
minv (max start -100000)
minv (* (mth/ceil (/ minv step)) step)
@ -140,9 +138,8 @@
(for [step-val (range minv (inc maxv) step)]
(let [{:keys [text-x text-y line-x1 line-y1 line-x2 line-y2]}
(get-rule-axis step-val vbox zoom axis)]
[:*
[:text {:key (str "text-" (d/name axis) "-" step-val)
:x text-x
[:* {:key (dm/str "text-" (d/name axis) "-" step-val)}
[:text {:x text-x
:y text-y
:text-anchor "middle"
:dominant-baseline "middle"
@ -177,7 +174,7 @@
:height (/ rule-area-size zoom)
:style {:fill rules-background
:fill-opacity over-number-opacity}}]
[:text {:x (- (:x1 selection-rect) (/ 4 zoom))
:y (+ (:y vbox) (/ 12 zoom))
:text-anchor "end"
@ -205,7 +202,7 @@
(let [center-x (+ (:x vbox) (/ rule-area-half-size zoom))
center-y (- (+ (:y selection-rect) (/ (:height selection-rect) 2)) (/ rule-area-half-size zoom))]
[:g {:transform (str "rotate(-90 " center-x "," center-y ")")}
[:rect {:x (- center-x (/ (:height selection-rect) 2) (/ rule-area-half-size zoom))
:y (- center-y (/ rule-area-half-size zoom))
@ -227,7 +224,7 @@
:height (/ rule-area-size zoom)
:style {:fill rules-background
:fill-opacity over-number-opacity}}]
[:text {:x (- center-x (/ (:height selection-rect) 2) (/ 15 zoom))
:y center-y
:text-anchor "end"