mirror of
https://github.com/penpot/penpot.git
synced 2025-06-16 20:51:39 +02:00
✨ Small fixes for flex layout
This commit is contained in:
parent
e61e76a074
commit
cdaba395c4
10 changed files with 11 additions and 40 deletions
|
@ -81,7 +81,6 @@
|
||||||
cp (gsi/line-line-intersect c3 (gpt/add c3 dir-v) p0 p3)]
|
cp (gsi/line-line-intersect c3 (gpt/add c3 dir-v) p0 p3)]
|
||||||
(gpt/to-vec c3 cp)))
|
(gpt/to-vec c3 cp)))
|
||||||
|
|
||||||
|
|
||||||
(defn top-vector
|
(defn top-vector
|
||||||
[child-points parent-points]
|
[child-points parent-points]
|
||||||
|
|
||||||
|
|
|
@ -16,6 +16,7 @@
|
||||||
[app.common.types.shape.layout :as ctl]))
|
[app.common.types.shape.layout :as ctl]))
|
||||||
|
|
||||||
(defn layout-drop-areas
|
(defn layout-drop-areas
|
||||||
|
"Retrieve the layout drop areas to move shapes inside layouts"
|
||||||
[{:keys [margin-x margin-y] :as frame} layout-data children]
|
[{:keys [margin-x margin-y] :as frame} layout-data children]
|
||||||
|
|
||||||
(let [col? (ctl/col? frame)
|
(let [col? (ctl/col? frame)
|
||||||
|
@ -84,14 +85,7 @@
|
||||||
(-> (gsr/make-rect x (+ y half-point-height) width (- height half-point-height))
|
(-> (gsr/make-rect x (+ y half-point-height) width (- height half-point-height))
|
||||||
(assoc :index (if reverse? index (inc index))))]))
|
(assoc :index (if reverse? index (inc index))))]))
|
||||||
|
|
||||||
result (conj result line-area-1 line-area-2)
|
result (conj result line-area-1 line-area-2)]
|
||||||
|
|
||||||
;;line-area
|
|
||||||
;;(-> (gsr/make-rect x y width height)
|
|
||||||
;; (assoc :index (if reverse? (inc index) index)))
|
|
||||||
;;result (conj result line-area)
|
|
||||||
;;result (conj result (gsr/make-rect box-x box-y box-width box-height))
|
|
||||||
]
|
|
||||||
|
|
||||||
[result parent-rect (+ x width) (+ y height)]))
|
[result parent-rect (+ x width) (+ y height)]))
|
||||||
|
|
||||||
|
@ -158,10 +152,6 @@
|
||||||
|
|
||||||
children (subvec children from-idx (+ from-idx num-children))
|
children (subvec children from-idx (+ from-idx num-children))
|
||||||
|
|
||||||
|
|
||||||
;; To debug the lines
|
|
||||||
;;result (conj result line-area)
|
|
||||||
|
|
||||||
result (first (reduce redfn-child [result line-area] (d/with-next children)))]
|
result (first (reduce redfn-child [result line-area] (d/with-next children)))]
|
||||||
|
|
||||||
[result (+ from-idx num-children) (+ x width) (+ y height)]))]
|
[result (+ from-idx num-children) (+ x width) (+ y height)]))]
|
||||||
|
|
|
@ -249,7 +249,6 @@
|
||||||
(some? margin-y)
|
(some? margin-y)
|
||||||
(gpt/add (vv margin-y)))
|
(gpt/add (vv margin-y)))
|
||||||
|
|
||||||
|
|
||||||
;; Fix position when layout is flipped
|
;; Fix position when layout is flipped
|
||||||
corner-p
|
corner-p
|
||||||
(cond-> corner-p
|
(cond-> corner-p
|
||||||
|
|
|
@ -33,12 +33,6 @@
|
||||||
([{:keys [type]}]
|
([{:keys [type]}]
|
||||||
(= type :frame)))
|
(= type :frame)))
|
||||||
|
|
||||||
(defn layout-shape?
|
|
||||||
([objects id]
|
|
||||||
(layout-shape? (get objects id)))
|
|
||||||
([{:keys [type layout]}]
|
|
||||||
(and (= type :frame) layout)))
|
|
||||||
|
|
||||||
(defn group-shape?
|
(defn group-shape?
|
||||||
[{:keys [type]}]
|
[{:keys [type]}]
|
||||||
(= type :group))
|
(= type :group))
|
||||||
|
|
|
@ -171,11 +171,10 @@
|
||||||
(t/testing "Transform shape with invalid selrect fails gracefully"
|
(t/testing "Transform shape with invalid selrect fails gracefully"
|
||||||
(t/are [type selrect]
|
(t/are [type selrect]
|
||||||
(let [modifiers (ctm/move-modifiers 0 0)
|
(let [modifiers (ctm/move-modifiers 0 0)
|
||||||
shape-before (-> (create-test-shape type {:modifiers modifiers})
|
shape-before (-> (create-test-shape type) (assoc :selrect selrect))
|
||||||
(assoc :selrect selrect))
|
shape-after (gsh/transform-shape shape-before modifiers)]
|
||||||
shape-after (gsh/transform-shape shape-before)]
|
|
||||||
|
|
||||||
(t/is (not= (:selrect shape-before)
|
(t/is (= (:selrect shape-before)
|
||||||
(:selrect shape-after))))
|
(:selrect shape-after))))
|
||||||
|
|
||||||
:rect {:x 0.0 :y 0.0 :x1 0.0 :y1 0.0 :x2 ##Inf :y2 ##Inf :width ##Inf :height ##Inf}
|
:rect {:x 0.0 :y 0.0 :x1 0.0 :y1 0.0 :x2 ##Inf :y2 ##Inf :width ##Inf :height ##Inf}
|
||||||
|
|
|
@ -16,6 +16,7 @@
|
||||||
[app.common.types.shape :as cts]
|
[app.common.types.shape :as cts]
|
||||||
[app.common.types.shape-tree :as ctst]
|
[app.common.types.shape-tree :as ctst]
|
||||||
[app.common.types.shape.interactions :as ctsi]
|
[app.common.types.shape.interactions :as ctsi]
|
||||||
|
[app.common.types.shape.layout :as ctl]
|
||||||
[app.common.uuid :as uuid]
|
[app.common.uuid :as uuid]
|
||||||
[app.main.data.comments :as dc]
|
[app.main.data.comments :as dc]
|
||||||
[app.main.data.workspace.changes :as dch]
|
[app.main.data.workspace.changes :as dch]
|
||||||
|
@ -148,7 +149,7 @@
|
||||||
|
|
||||||
layout-ids (->> ids
|
layout-ids (->> ids
|
||||||
(mapcat (partial cph/get-parent-ids objects))
|
(mapcat (partial cph/get-parent-ids objects))
|
||||||
(filter (partial cph/layout-shape? objects)))
|
(filter (partial ctl/layout? objects)))
|
||||||
|
|
||||||
components-v2 (features/active-feature? state :components-v2)
|
components-v2 (features/active-feature? state :components-v2)
|
||||||
|
|
||||||
|
|
|
@ -81,9 +81,7 @@
|
||||||
[{:keys [shape] :as props}]
|
[{:keys [shape] :as props}]
|
||||||
|
|
||||||
(let [render-thumbnails? (mf/use-ctx muc/render-thumbnails)
|
(let [render-thumbnails? (mf/use-ctx muc/render-thumbnails)
|
||||||
childs (mapv #(get objects %) (:shapes shape))
|
childs (mapv #(get objects %) (:shapes shape))]
|
||||||
;;shape (gsh/transform-shape shape)
|
|
||||||
]
|
|
||||||
(if (and render-thumbnails? (some? (:thumbnail shape)))
|
(if (and render-thumbnails? (some? (:thumbnail shape)))
|
||||||
[:& frame/frame-thumbnail {:shape shape :bounds (:children-bounds shape)}]
|
[:& frame/frame-thumbnail {:shape shape :bounds (:children-bounds shape)}]
|
||||||
[:& frame-shape {:shape shape :childs childs}])))))
|
[:& frame-shape {:shape shape :childs childs}])))))
|
||||||
|
@ -136,8 +134,7 @@
|
||||||
bool-wrapper (mf/use-memo (mf/deps objects) #(bool-wrapper-factory objects))
|
bool-wrapper (mf/use-memo (mf/deps objects) #(bool-wrapper-factory objects))
|
||||||
frame-wrapper (mf/use-memo (mf/deps objects) #(frame-wrapper-factory objects))]
|
frame-wrapper (mf/use-memo (mf/deps objects) #(frame-wrapper-factory objects))]
|
||||||
(when (and shape (not (:hidden shape)))
|
(when (and shape (not (:hidden shape)))
|
||||||
(let [;;shape (gsh/transform-shape shape)
|
(let [opts #js {:shape shape}
|
||||||
opts #js {:shape shape}
|
|
||||||
svg-raw? (= :svg-raw (:type shape))]
|
svg-raw? (= :svg-raw (:type shape))]
|
||||||
(if-not svg-raw?
|
(if-not svg-raw?
|
||||||
[:> shape-container {:shape shape}
|
[:> shape-container {:shape shape}
|
||||||
|
@ -167,9 +164,7 @@
|
||||||
[objects object]
|
[objects object]
|
||||||
(let [shapes (cph/get-immediate-children objects)
|
(let [shapes (cph/get-immediate-children objects)
|
||||||
srect (gsh/selection-rect shapes)
|
srect (gsh/selection-rect shapes)
|
||||||
object (merge object (select-keys srect [:x :y :width :height]))
|
object (merge object (select-keys srect [:x :y :width :height]))]
|
||||||
;; object (gsh/transform-shape object)
|
|
||||||
]
|
|
||||||
(assoc object :fill-color "#f0f0f0")))
|
(assoc object :fill-color "#f0f0f0")))
|
||||||
|
|
||||||
(defn adapt-objects-for-shape
|
(defn adapt-objects-for-shape
|
||||||
|
|
|
@ -88,8 +88,6 @@
|
||||||
[props]
|
[props]
|
||||||
(let [shape (unchecked-get props "shape")
|
(let [shape (unchecked-get props "shape")
|
||||||
childs (mapv #(get objects %) (:shapes shape))
|
childs (mapv #(get objects %) (:shapes shape))
|
||||||
;;shape (gsh/transform-shape shape)
|
|
||||||
|
|
||||||
props (-> (obj/create)
|
props (-> (obj/create)
|
||||||
(obj/merge! props)
|
(obj/merge! props)
|
||||||
(obj/merge! #js {:shape shape
|
(obj/merge! #js {:shape shape
|
||||||
|
|
|
@ -350,7 +350,6 @@
|
||||||
[props]
|
[props]
|
||||||
(let [shape (obj/get props "shape")
|
(let [shape (obj/get props "shape")
|
||||||
childs (mapv #(get objects %) (:shapes shape))
|
childs (mapv #(get objects %) (:shapes shape))
|
||||||
;;shape (gsh/transform-shape shape)
|
|
||||||
props (obj/merge! #js {} props
|
props (obj/merge! #js {} props
|
||||||
#js {:shape shape
|
#js {:shape shape
|
||||||
:childs childs
|
:childs childs
|
||||||
|
|
|
@ -341,7 +341,6 @@
|
||||||
(let [shape (mf/use-memo
|
(let [shape (mf/use-memo
|
||||||
(mf/deps shapes)
|
(mf/deps shapes)
|
||||||
#(->> shapes
|
#(->> shapes
|
||||||
#_(map gsh/transform-shape)
|
|
||||||
(gsh/selection-rect)
|
(gsh/selection-rect)
|
||||||
(cts/setup-shape)))
|
(cts/setup-shape)))
|
||||||
on-resize
|
on-resize
|
||||||
|
@ -369,7 +368,6 @@
|
||||||
(let [shape (mf/use-memo
|
(let [shape (mf/use-memo
|
||||||
(mf/deps shapes)
|
(mf/deps shapes)
|
||||||
#(->> shapes
|
#(->> shapes
|
||||||
#_(map gsh/transform-shape)
|
|
||||||
(gsh/selection-rect)
|
(gsh/selection-rect)
|
||||||
(cts/setup-shape)))]
|
(cts/setup-shape)))]
|
||||||
|
|
||||||
|
@ -384,7 +382,6 @@
|
||||||
(mf/defc single-handlers
|
(mf/defc single-handlers
|
||||||
[{:keys [shape zoom color disable-handlers] :as props}]
|
[{:keys [shape zoom color disable-handlers] :as props}]
|
||||||
(let [shape-id (:id shape)
|
(let [shape-id (:id shape)
|
||||||
;;shape (gsh/transform-shape shape)
|
|
||||||
|
|
||||||
on-resize
|
on-resize
|
||||||
(fn [current-position _initial-position event]
|
(fn [current-position _initial-position event]
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue