Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-17 09:21:28 -05:00
Code Issues Activity

Merge pull request #4095 from penpot/alotor-bufixes-14

Browse source 
Bug fixing
This commit is contained in:
Andrey Antukh 2024-02-01 19:16:01 +01:00 • committed by GitHub
commit a005bf63a2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
26 changed files with 181 additions and 107 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
common/src/app/common/geom/shapes/bounds.cljc
View file

@ -111,6 +111,7 @@
shadow-width
(->> (:shadow shape)
(remove :hidden)
(map #(case (:style % :drop-shadow)
:drop-shadow (+ (mth/abs (:offset-x %)) (* (:spread %) 2) (* (:blur %) 2) 10)
0))
@ -118,6 +119,7 @@
shadow-height
(->> (:shadow shape)
(remove :hidden)
(map #(case (:style % :drop-shadow)
:drop-shadow (+ (mth/abs (:offset-y %)) (* (:spread %) 2) (* (:blur %) 2) 10)
0))

37
common/src/app/common/geom/shapes/transforms.cljc
View file

@ -140,6 +140,28 @@
(gmt/translate (gpt/negate shape-center)))))
(defn inverse-transform-matrix
([shape]
(inverse-transform-matrix shape nil))
([shape params]
(inverse-transform-matrix shape params (or (gco/shape->center shape) (gpt/point 0 0))))
([{:keys [flip-x flip-y transform-inverse] :as shape} {:keys [no-flip]} shape-center]
(-> (gmt/matrix)
(gmt/translate shape-center)
(cond-> (and flip-x no-flip)
(gmt/scale (gpt/point -1 1)))
(cond-> (and flip-y no-flip)
(gmt/scale (gpt/point 1 -1)))
(cond-> (some? transform-inverse)
(gmt/multiply transform-inverse))
(gmt/translate (gpt/negate shape-center)))))
(defn transform-str
([shape]
(transform-str shape nil))
@ -152,21 +174,6 @@
(dm/str (transform-matrix shape params))
"")))
;; FIXME: performance
(defn inverse-transform-matrix
([shape]
(let [shape-center (or (gco/shape->center shape)
(gpt/point 0 0))]
(inverse-transform-matrix shape shape-center)))
([{:keys [flip-x flip-y] :as shape} center]
(-> (gmt/matrix)
(gmt/translate center)
(cond->
flip-x (gmt/scale (gpt/point -1 1))
flip-y (gmt/scale (gpt/point 1 -1)))
(gmt/multiply (:transform-inverse shape (gmt/matrix)))
(gmt/translate (gpt/negate center)))))
;; FIXME: move to geom rect?
(defn transform-rect
"Transform a rectangles and changes its attributes"

19
common/src/app/common/geom/snap.cljc
View file

@ -15,15 +15,16 @@
(defn rect->snap-points
[rect]
(let [x (dm/get-prop rect :x)
y (dm/get-prop rect :y)
w (dm/get-prop rect :width)
h (dm/get-prop rect :height)]
#{(gpt/point x y)
(gpt/point (+ x w) y)
(gpt/point (+ x w) (+ y h))
(gpt/point x (+ y h))
(grc/rect->center rect)}))
(when (some? rect)
(let [x (dm/get-prop rect :x)
y (dm/get-prop rect :y)
w (dm/get-prop rect :width)
h (dm/get-prop rect :height)]
#{(gpt/point x y)
(gpt/point (+ x w) y)
(gpt/point (+ x w) (+ y h))
(gpt/point x (+ y h))
(grc/rect->center rect)})))
(defn- frame->snap-points
[frame]

28
common/src/app/common/text.cljc
View file

@ -53,6 +53,9 @@
(def text-transform-attrs
[:text-transform])
(def text-fills
[:fills])
(def shape-attrs
[:grow-type])
@ -70,7 +73,8 @@
text-font-attrs
text-spacing-attrs
text-decoration-attrs
text-transform-attrs))
text-transform-attrs
text-fills))
(def text-all-attrs (d/concat-set shape-attrs root-attrs paragraph-attrs text-node-attrs))
@ -240,6 +244,21 @@
(run! #(.appendCodePoint sb (int %)) (subvec cpoints start end))
(.toString sb))))
(defn- fix-gradients
"Conversion from draft doesn't convert correctly the fills gradient types. This
function change the type from string to keyword of the gradient type"
[data]
(letfn [(fix-type [type]
(cond-> type
(string? type) keyword))
(update-fill [fill]
(d/update-in-when fill [:fill-color-gradient :type] fix-type))
(update-all-fills [fills]
(mapv update-fill fills))]
(d/update-when data :fills update-all-fills)))
(defn convert-from-draft
[content]
(letfn [(extract-text [cpoints part]
@ -247,7 +266,9 @@
end (inc (first (last part)))
text (code-points->text cpoints start end)
attrs (second (first part))]
(assoc attrs :text text)))
(-> attrs
(fix-gradients)
(assoc :text text))))
(split-texts [text styles]
(let [cpoints (text->code-points text)
@ -264,7 +285,8 @@
(let [key (get block :key)
text (get block :text)
styles (get block :inlineStyleRanges)
data (get block :data)]
data (->> (get block :data)
fix-gradients)]
(-> data
(assoc :key key)
(assoc :type "paragraph")

8
frontend/src/app/main/data/exports.cljs
View file

@ -10,6 +10,7 @@
[app.main.data.modal :as modal]
[app.main.data.workspace.persistence :as dwp]
[app.main.data.workspace.state-helpers :as wsh]
[app.main.refs :as refs]
[app.main.repo :as rp]
[app.main.store :as st]
[app.util.dom :as dom]
@ -166,6 +167,13 @@
:wait true}]
(rx/concat
(rx/of ::dwp/force-persist)
;; Wait the persist to be succesfull
(->> (rx/from-atom refs/persistence-state {:emit-current-value? true})
(rx/filter #(or (nil? %) (= :saved %)))
(rx/first)
(rx/timeout 400 (rx/empty)))
(->> (rp/cmd! :export params)
(rx/mapcat (fn [{:keys [id filename]}]
(->> (rp/cmd! :export {:cmd :get-resource :blob? true :id id})

1
frontend/src/app/main/data/workspace/notifications.cljs
View file

@ -83,6 +83,7 @@
;; position changes.
(->> stream
(rx/filter mse/pointer-event?)
(rx/filter #(= :viewport (mse/get-pointer-source %)))
(rx/pipe (rxs/throttle 100))
(rx/map #(handle-pointer-send file-id (:pt %)))))

3
frontend/src/app/main/refs.cljs
View file

@ -591,3 +591,6 @@
(def updating-library
(l/derived :updating-library st/state))
(def persistence-state
(l/derived (comp :status :workspace-persistence) st/state))

1
frontend/src/app/main/ui/components/copy_button.scss
View file

@ -57,6 +57,7 @@
width: 100%;
height: fit-content;
text-align: left;
border: 1px solid transparent;
.icon-btn {
position: absolute;
display: flex;

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

@ -8,7 +8,10 @@
(:require
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.common.files.helpers :as cfh]
[app.common.geom.point :as gpt]
[app.common.geom.shapes :as gsh]
[app.common.geom.shapes.text :as gst]
[app.config :as cf]
[app.main.ui.shapes.attrs :as attrs]
[app.main.ui.shapes.gradients :as grad]
@ -28,7 +31,12 @@
fills (get shape :fills [])
selrect (dm/get-prop shape :selrect)
bounds (when (cfh/text-shape? shape)
(gst/shape->rect shape))
metadata (get shape :metadata)
x (dm/get-prop selrect :x)
y (dm/get-prop selrect :y)
width (dm/get-prop selrect :width)
@ -62,32 +70,50 @@
(obj/set! pat-props "patternTransform" transform)
pat-props)]
(for [[shape-index shape] (d/enumerate (or (:position-data shape) [shape]))]
[:* {:key (dm/str shape-index)}
(for [[fill-index value] (reverse (d/enumerate (get shape :fills [])))]
(for [[obj-index obj] (d/enumerate (or (:position-data shape) [shape]))]
[:* {:key (dm/str obj-index)}
(for [[fill-index value] (reverse (d/enumerate (get obj :fills [])))]
(when (some? (:fill-color-gradient value))
(let [gradient (:fill-color-gradient value)
from-p (-> (gpt/point (+ x (* width (:start-x gradient)))
(+ y (* height (:start-y gradient)))))
to-p (-> (gpt/point (+ x (* width (:end-x gradient)))
(+ y (* height (:end-y gradient)))))
gradient
(cond-> gradient
(some? bounds)
(assoc
:start-x (/ (- (:x from-p) (:x bounds)) (:width bounds))
:start-y (/ (- (:y from-p) (:y bounds)) (:height bounds))
:end-x (/ (- (:x to-p) (:x bounds)) (:width bounds))
:end-y (/ (- (:y to-p) (:y bounds)) (:height bounds))))
props #js {:id (dm/str "fill-color-gradient-" render-id "-" fill-index)
:key (dm/str fill-index)
:gradient gradient
:shape shape}]
(case (:type gradient)
:linear [:> grad/linear-gradient props]
:radial [:> grad/radial-gradient props]))))
:shape obj}]
(case (d/name (:type gradient))
"linear" [:> grad/linear-gradient props]
"radial" [:> grad/radial-gradient props]))))
(let [fill-id (dm/str "fill-" shape-index "-" render-id)]
(let [fill-id (dm/str "fill-" obj-index "-" render-id)]
[:> :pattern (-> (obj/clone pat-props)
(obj/set! "id" fill-id)
(cond-> has-image?
(cond-> (and has-image? (nil? bounds))
(-> (obj/set! "width" (* width no-repeat-padding))
(obj/set! "height" (* height no-repeat-padding)))))
(obj/set! "height" (* height no-repeat-padding))))
(cond-> (some? bounds)
(-> (obj/set! "width" (:width bounds))
(obj/set! "height" (:height bounds)))))
[:g
(for [[fill-index value] (reverse (d/enumerate (get shape :fills [])))]
(for [[fill-index value] (reverse (d/enumerate (get obj :fills [])))]
(let [style (attrs/get-fill-style value fill-index render-id type)
props #js {:key (dm/str fill-index)
:width width
:height height
:width (d/nilv (:width bounds) width)
:height (d/nilv (:height bounds) height)
:style style}]
(if (:fill-image value)
(let [uri (cf/resolve-file-media (:fill-image value))

2
frontend/src/app/main/ui/shapes/text/styles.cljs
View file

@ -93,7 +93,7 @@
:textTransform text-transform
:color (if (and show-text? (not gradient?)) text-color "transparent")
:background (when (and show-text? gradient?) text-color)
:caretColor (or text-color "black")
:caretColor (if (and (not gradient?) text-color) text-color "black")
:overflowWrap "initial"
:lineBreak "auto"
:whiteSpace "break-spaces"

9
frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs
View file

@ -79,11 +79,9 @@
[:span {:class (stl/css-case :color-value-wrapper true
:gradient-name (:gradient color))}
(if (:gradient color)
[:& cbn/color-name {:color color
:size 80}]
[:& cbn/color-name {:color color :size 80}]
(case format
:hex [:& cbn/color-name {:color color
:size 80}]
:hex [:& cbn/color-name {:color color}]
:rgba (let [[r g b a] (cc/hex->rgba (:color color) (:opacity color))]
[:* (str/fmt "%s, %s, %s, %s" r g b a)])
:hsla (let [[h s l a] (cc/hex->hsla (:color color) (:opacity color))
@ -105,8 +103,7 @@
[:span {:class (stl/css-case :color-value-wrapper true
:gradient-name (:gradient color))}
(if (:gradient color)
[:& cbn/color-name {:color color
:size 80}]
[:& cbn/color-name {:color color}]
(case format
:hex [:& cbn/color-name {:color color
:size 80}]

10
frontend/src/app/main/ui/viewer/inspect/attributes/common.scss
View file

@ -58,6 +58,11 @@
}
}
.name-opacity {
display: flex;
align-items: baseline;
}
.color-name-wrapper {
@include titleTipography;
@include flexColumn;
@ -113,8 +118,11 @@
.color-value-wrapper {
@include inspectValue;
text-transform: uppercase;
max-width: $s-124;
max-width: $s-80;
padding-right: $s-8;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&.gradient-name {
text-transform: none;
}

6
frontend/src/app/main/ui/viewer/inspect/attributes/geometry.cljs
View file

@ -8,6 +8,7 @@
(:require-macros [app.main.style :as stl])
(:require
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.main.ui.components.copy-button :refer [copy-button]]
[app.main.ui.components.title-bar :refer [title-bar]]
[app.util.code-gen.style-css :as css]
@ -19,9 +20,10 @@
(mf/defc geometry-block
[{:keys [objects shape]}]
[:*
(for [property properties]
(for [[idx property] (d/enumerate properties)]
(when-let [value (css/get-css-value objects shape property)]
[:div {:class (stl/css :geometry-row)}
[:div {:key (dm/str "block-" idx "-" (d/name property))
:class (stl/css :geometry-row)}
[:div {:class (stl/css :global/attr-label)} (d/name property)]
[:div {:class (stl/css :global/attr-value)}
[:& copy-button {:data (css/get-css-property objects shape property)}

3
frontend/src/app/main/ui/viewer/inspect/attributes/text.scss
View file

@ -30,7 +30,6 @@
}
.attributes-content-row {
width: $s-252;
max-width: $s-252;
min-height: calc($s-2 + $s-32);
border-radius: $br-8;
@ -39,7 +38,7 @@
.content {
@include titleTipography;
width: 100%;
padding: 0;
padding: $s-4 0;
color: var(--color-foreground-secondary);
}

2
frontend/src/app/main/ui/workspace/sidebar/assets/components.scss
View file

@ -11,7 +11,7 @@
}
.asset-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax($s-112, 1fr));
grid-template-columns: repeat(auto-fill, minmax($s-96, 1fr));
grid-auto-rows: $s-112;
max-width: 100%;
gap: $s-4;

8
frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs
View file

@ -56,10 +56,6 @@
:values measure-values
:shape shape}]
(when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
[:& constraints-menu {:ids ids
:values constraint-values}])
[:& layout-container-menu
{:type type
:ids [(:id shape)]
@ -81,6 +77,10 @@
:is-grid-parent? is-grid-parent?
:shape shape}])
(when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
[:& constraints-menu {:ids ids
:values constraint-values}])
[:& fill-menu {:ids ids
:type type
:values (select-keys shape fill-attrs)}]

8
frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs
View file

@ -58,10 +58,6 @@
:values measure-values
:shape shape}]
(when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
[:& constraints-menu {:ids ids
:values constraint-values}])
[:& layout-container-menu
{:type type
:ids [(:id shape)]
@ -83,6 +79,10 @@
:is-grid-parent? is-grid-parent?
:shape shape}])
(when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
[:& constraints-menu {:ids ids
:values constraint-values}])
[:& fill-menu {:ids ids
:type type
:values (select-keys shape fill-attrs)}]

7
frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs
View file

@ -65,10 +65,6 @@
[:& component-menu {:shapes [shape]}]
(when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
[:& constraints-menu {:ids ids
:values constraint-values}])
[:& layout-container-menu
{:type type
:ids [(:id shape)]
@ -91,6 +87,9 @@
:is-layout-container? is-layout-container?
:shape shape}])
(when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
[:& constraints-menu {:ids ids
:values constraint-values}])
[:& fill-menu {:ids ids
:type type

6
frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs
View file

@ -72,9 +72,6 @@
[:& measures-menu {:type type :ids measure-ids :values measure-values :shape shape}]
[:& component-menu {:shapes [shape]}] ;;remove this in components-v2
(when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
[:& constraints-menu {:ids constraint-ids :values constraint-values}])
[:& layout-container-menu
{:type type
:ids [(:id shape)]
@ -96,6 +93,9 @@
:is-grid-parent? is-grid-parent?
:values layout-item-values}])
(when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
[:& constraints-menu {:ids constraint-ids :values constraint-values}])
(when-not (empty? fill-ids)
[:& fill-menu {:type type :ids fill-ids :values fill-values}])

8
frontend/src/app/main/ui/workspace/sidebar/options/shapes/image.cljs
View file

@ -58,10 +58,6 @@
:values measure-values
:shape shape}]
(when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
[:& constraints-menu {:ids ids
:values constraint-values}])
[:& layout-container-menu
{:type type
:ids [(:id shape)]
@ -83,6 +79,10 @@
:is-grid-parent? is-grid-parent?
:shape shape}])
(when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
[:& constraints-menu {:ids ids
:values constraint-values}])
[:& fill-menu {:ids ids
:type type
:values fill-values}]

6
frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs
View file

@ -364,9 +364,6 @@
(when-not (empty? components)
[:& component-menu {:shapes components}])
(when-not (or (empty? constraint-ids) ^boolean is-layout-child?)
[:& constraints-menu {:ids constraint-ids :values constraint-values}])
[:& layout-container-menu
{:type type
:ids layout-container-ids
@ -383,6 +380,9 @@
:is-grid-parent? is-grid-parent?
:values layout-item-values}])
(when-not (or (empty? constraint-ids) ^boolean is-layout-child?)
[:& constraints-menu {:ids constraint-ids :values constraint-values}])
(when-not (empty? text-ids)
[:& ot/text-menu {:type type :ids text-ids :values text-values}])

8
frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs
View file

@ -57,10 +57,6 @@
:values measure-values
:shape shape}]
(when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
[:& constraints-menu {:ids ids
:values constraint-values}])
[:& layout-container-menu
{:type type
:ids [(:id shape)]
@ -82,6 +78,10 @@
:is-grid-parent? is-grid-parent?
:shape shape}])
(when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
[:& constraints-menu {:ids ids
:values constraint-values}])
[:& fill-menu {:ids ids
:type type
:values (select-keys shape fill-attrs)}]

8
frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs
View file

@ -60,10 +60,6 @@
:values measure-values
:shape shape}]
(when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
[:& constraints-menu {:ids ids
:values constraint-values}])
[:& layout-container-menu
{:type type
:ids ids
@ -85,6 +81,10 @@
:is-grid-parent? is-grid-parent?
:shape shape}])
(when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
[:& constraints-menu {:ids ids
:values constraint-values}])
[:& fill-menu {:ids ids
:type type
:values fill-values}]

8
frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs
View file

@ -129,10 +129,6 @@
:values measure-values
:shape shape}]
(when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
[:& constraints-menu {:ids ids
:values constraint-values}])
[:& layout-container-menu
{:type type
:ids [(:id shape)]
@ -154,6 +150,10 @@
:is-grid-parent? is-grid-parent?
:shape shape}])
(when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
[:& constraints-menu {:ids ids
:values constraint-values}])
[:& fill-menu {:ids ids
:type type
:values fill-values}]

10
frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs
View file

@ -93,11 +93,6 @@
:values (select-keys shape measure-attrs)
:shape shape}]
(when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
[:& constraints-menu
{:ids ids
:values (select-keys shape constraint-attrs)}])
[:& layout-container-menu
{:type type
:ids [(:id shape)]
@ -119,6 +114,11 @@
:is-grid-parent? is-grid-parent?
:shape shape}])
(when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
[:& constraints-menu
{:ids ids
:values (select-keys shape constraint-attrs)}])
[:& text-menu
{:ids ids
:type type

28
frontend/src/app/main/ui/workspace/viewport/gradients.cljs
View file

@ -118,7 +118,7 @@
:on-pointer-up on-pointer-up}]])
(mf/defc gradient-handler-transformed
[{:keys [from-p to-p width-p from-color to-color zoom editing transform
[{:keys [from-p to-p width-p from-color to-color zoom editing
on-change-start on-change-finish on-change-width]}]
(let [moving-point (mf/use-var nil)
angle (+ 90 (gpt/angle from-p to-p))
@ -151,7 +151,7 @@
(reset! moving-point nil))]
(mf/use-effect
(mf/deps @moving-point from-p to-p width-p transform)
(mf/deps @moving-point from-p to-p width-p)
(fn []
(let [subs (->> st/stream
(rx/filter mse/pointer-event?)
@ -159,18 +159,17 @@
(rx/map mse/get-pointer-position)
(rx/subs!
(fn [pt]
(let [pt (gpt/transform pt transform)]
(case @moving-point
:from-p (when on-change-start (on-change-start pt))
:to-p (when on-change-finish (on-change-finish pt))
:width-p (when on-change-width
(let [width-v (gpt/unit (gpt/to-vec from-p width-p))
distance (gpt/point-line-distance pt from-p to-p)
new-width-p (gpt/add
from-p
(gpt/multiply width-v (gpt/point distance)))]
(on-change-width new-width-p)))
nil)))))]
(case @moving-point
:from-p (when on-change-start (on-change-start pt))
:to-p (when on-change-finish (on-change-finish pt))
:width-p (when on-change-width
(let [width-v (gpt/unit (gpt/to-vec from-p width-p))
distance (gpt/point-line-distance pt from-p to-p)
new-width-p (gpt/add
from-p
(gpt/multiply width-v (gpt/point distance)))]
(on-change-width new-width-p)))
nil))))]
(fn [] (rx/dispose! subs)))))
[:g.gradient-handlers
[:defs
@ -296,7 +295,6 @@
:width-p (when (= :radial (:type gradient)) width-p)
:from-color {:value start-color :opacity start-opacity}
:to-color {:value end-color :opacity end-opacity}
:transform transform
:zoom zoom
:on-change-start on-change-start
:on-change-finish on-change-finish