Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-12 15:01:28 -05:00
Code Issues Activity

✨ Grid layout infrastructure

Browse source
This commit is contained in:
alonso.torres 2023-02-14 11:56:00 +01:00
parent 2030f987db
commit a0cd94cfae
33 changed files with 362 additions and 150 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
common/src/app/common/geom/shapes/constraints.cljc
View file

@ -288,7 +288,7 @@
constraints-h
(cond
(and (ctl/layout? parent) (not (ctl/layout-absolute? child)))
(and (ctl/any-layout? parent) (not (ctl/layout-absolute? child)))
:left
(not ignore-constraints)
@ -299,7 +299,7 @@
constraints-v
(cond
(and (ctl/layout? parent) (not (ctl/layout-absolute? child)))
(and (ctl/any-layout? parent) (not (ctl/layout-absolute? child)))
:top
(not ignore-constraints)

16
common/src/app/common/geom/shapes/grid_layout.cljc Normal file
View file

@ -0,0 +1,16 @@
;; This Source Code Form is subject to the terms of the Mozilla Public
;; 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/.
;;
;; Copyright (c) KALEIDOS INC
(ns app.common.geom.shapes.grid-layout
(:require
[app.common.data.macros :as dm]
[app.common.geom.shapes.grid-layout.layout-data :as glld]
[app.common.geom.shapes.grid-layout.positions :as glp]))
(dm/export glld/calc-layout-data)
(dm/export glld/get-cell-data)
(dm/export glld/get-child-coordinates)
(dm/export glp/child-modifiers)

71
common/src/app/common/geom/shapes/grid_layout/layout_data.cljc Normal file
View file

@ -0,0 +1,71 @@
;; This Source Code Form is subject to the terms of the Mozilla Public
;; 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/.
;;
;; Copyright (c) KALEIDOS INC
(ns app.common.geom.shapes.grid-layout.layout-data
(:require
[app.common.data.macros :as dm]
[app.common.geom.point :as gpt]
[app.common.geom.shapes.points :as gpo]))
(defn calc-layout-data
[_parent _children transformed-parent-bounds]
(let [num-columns 3
num-rows 2
height (gpo/height-points transformed-parent-bounds)
width (gpo/width-points transformed-parent-bounds)
row-lines
(->> (range 0 num-rows)
(reduce (fn [[result start-dist] _]
(let [height (/ height num-rows)]
[(conj result {:distance start-dist
:height height})
(+ start-dist height)]))
[[] 0])
first)
column-lines
(->> (range 0 num-columns)
(reduce (fn [[result start-dist] _]
(let [width (/ width num-columns)]
[(conj result {:distance start-dist
:width width})
(+ start-dist width)]))
[[] 0])
first)]
{:columns 3
:rows 3
:row-lines row-lines
:column-lines column-lines}))
(defn get-child-coordinates
[{:keys [columns]} _child child-idx]
[;; Row
(quot child-idx columns)
;; column
(mod child-idx columns)])
(defn get-cell-data
[grid-data transformed-parent-bounds row col]
(let [origin (gpo/origin transformed-parent-bounds)
hv #(gpo/start-hv transformed-parent-bounds %)
vv #(gpo/start-vv transformed-parent-bounds %)
{col-dist :distance width :width} (dm/get-in grid-data [:column-lines col])
{row-dist :distance height :height} (dm/get-in grid-data [:row-lines row])
start-p
(-> origin
(gpt/add (hv col-dist))
(gpt/add (vv row-dist)))]
{:start-p start-p
:width width
:height height
:row row
:col col}))

16
common/src/app/common/geom/shapes/grid_layout/positions.cljc Normal file
View file

@ -0,0 +1,16 @@
;; This Source Code Form is subject to the terms of the Mozilla Public
;; 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/.
;;
;; Copyright (c) KALEIDOS INC
(ns app.common.geom.shapes.grid-layout.positions
(:require
[app.common.geom.point :as gpt]
[app.common.geom.shapes.points :as gpo]
[app.common.types.modifiers :as ctm]))
(defn child-modifiers
[_parent _transformed-parent-bounds _child child-bounds cell-data]
(ctm/move-modifiers
(gpt/subtract (:start-p cell-data) (gpo/origin child-bounds))))

65
common/src/app/common/geom/shapes/modifiers.cljc
View file

@ -10,7 +10,8 @@
[app.common.data.macros :as dm]
[app.common.geom.point :as gpt]
[app.common.geom.shapes.constraints :as gct]
[app.common.geom.shapes.flex-layout :as gcl]
[app.common.geom.shapes.flex-layout :as gcfl]
[app.common.geom.shapes.grid-layout :as gcgl]
[app.common.geom.shapes.pixel-precision :as gpp]
[app.common.geom.shapes.points :as gpo]
[app.common.geom.shapes.transforms :as gtr]
@ -90,12 +91,12 @@
contains-parent? (some #(contains? result %) root-parents)]
(cond-> result
(not contains-parent?)
(conj root)))))]
(conj root)))))
(let [roots (->> ids (reduce calculate-common-roots #{}))]
(concat
(when (contains? ids uuid/zero) [(get objects uuid/zero)])
(mapcat #(children-sequence % objects) roots)))))
roots (->> ids (reduce calculate-common-roots #{}))]
(concat
(when (contains? ids uuid/zero) [(get objects uuid/zero)])
(mapcat #(children-sequence % objects) roots))))
(defn- set-children-modifiers
"Propagates the modifiers from a parent too its children applying constraints if necesary"
@ -157,7 +158,7 @@
(not (ctm/empty? modifiers))
(gtr/transform-bounds modifiers)))))
(defn- set-layout-modifiers
(defn- set-flex-layout-modifiers
[modif-tree children objects bounds parent transformed-parent-bounds]
(letfn [(apply-modifiers [child]
@ -167,7 +168,7 @@
(set-child-modifiers [[layout-line modif-tree] [child-bounds child]]
(let [[modifiers layout-line]
(gcl/layout-child-modifiers parent transformed-parent-bounds child child-bounds layout-line)
(gcfl/layout-child-modifiers parent transformed-parent-bounds child child-bounds layout-line)
modif-tree
(cond-> modif-tree
@ -180,7 +181,7 @@
(map (d/getf objects))
(remove :hidden)
(map apply-modifiers))
layout-data (gcl/calc-layout-data parent children @transformed-parent-bounds)
layout-data (gcfl/calc-layout-data parent children @transformed-parent-bounds)
children (into [] (cond-> children (not (:reverse? layout-data)) reverse))
max-idx (dec (count children))
layout-lines (:layout-lines layout-data)]
@ -198,6 +199,35 @@
modif-tree)))))
(defn- set-grid-layout-modifiers
[modif-tree objects bounds parent transformed-parent-bounds]
(letfn [(apply-modifiers [child]
[(-> (get-group-bounds objects bounds modif-tree child)
(gpo/parent-coords-bounds @transformed-parent-bounds))
child])
(set-child-modifiers [modif-tree cell-data [child-bounds child]]
(let [modifiers (gcgl/child-modifiers parent transformed-parent-bounds child child-bounds cell-data)
modif-tree
(cond-> modif-tree
(d/not-empty? modifiers)
(update-in [(:id child) :modifiers] ctm/add-modifiers modifiers))]
modif-tree))]
(let [children (->> (cph/get-immediate-children objects (:id parent))
(remove :hidden)
(map apply-modifiers))
grid-data (gcgl/calc-layout-data parent children @transformed-parent-bounds)]
(loop [modif-tree modif-tree
child-idx 0
child (first children)
pending (rest children)]
(if (some? child)
(let [[row col] (gcgl/get-child-coordinates grid-data child child-idx)
cell-data (gcgl/get-cell-data grid-data @transformed-parent-bounds row col)
modif-tree (set-child-modifiers modif-tree cell-data child)]
(recur modif-tree (inc child-idx) (first pending) (rest pending)))
modif-tree)))))
(defn- calc-auto-modifiers
"Calculates the modifiers to adjust the bounds for auto-width/auto-height shapes"
[objects bounds parent]
@ -223,7 +253,7 @@
content-bounds
(when (and (d/not-empty? children) (or (ctl/auto-height? parent) (ctl/auto-width? parent)))
(gcl/layout-content-bounds bounds parent children))
(gcfl/layout-content-bounds bounds parent children))
auto-width (when content-bounds (gpo/width-points content-bounds))
auto-height (when content-bounds (gpo/height-points content-bounds))]
@ -259,14 +289,15 @@
modifiers (-> (dm/get-in modif-tree [parent-id :modifiers])
(ctm/select-geometry))
has-modifiers? (ctm/child-modifiers? modifiers)
layout? (ctl/layout? parent)
flex-layout? (ctl/flex-layout? parent)
grid-layout? (ctl/grid-layout? parent)
auto? (or (ctl/auto-height? parent) (ctl/auto-width? parent))
parent? (or (cph/group-like-shape? parent) (cph/frame-shape? parent))
transformed-parent-bounds (delay (gtr/transform-bounds @(get bounds parent-id) modifiers))
children-modifiers
(if layout?
(if flex-layout?
(->> (:shapes parent)
(filter #(ctl/layout-absolute? objects %)))
(:shapes parent))
@ -280,8 +311,11 @@
(and has-modifiers? parent? (not root?))
(set-children-modifiers children-modifiers objects bounds parent transformed-parent-bounds ignore-constraints)
layout?
(set-layout-modifiers children-layout objects bounds parent transformed-parent-bounds))
flex-layout?
(set-flex-layout-modifiers children-layout objects bounds parent transformed-parent-bounds))
grid-layout?
(set-grid-layout-modifiers objects bounds parent transformed-parent-bounds))
;; Auto-width/height can change the positions in the parent so we need to recalculate
(cond-> autolayouts auto? (conj (:id parent)))]))
@ -377,7 +411,7 @@
to-reflow
(cond-> to-reflow
(and (ctl/layout-descent? objects parent-base)
(and (ctl/flex-layout-descent? objects parent-base)
(not= uuid/zero (:frame-id parent-base)))
(conj (:frame-id parent-base)))]
(recur modif-tree
@ -409,6 +443,7 @@
([old-modif-tree modif-tree objects
{:keys [ignore-constraints snap-pixel? snap-precision snap-ignore-axis]
:or {ignore-constraints false snap-pixel? false snap-precision 1 snap-ignore-axis nil}}]
(let [objects (-> objects
(cond-> (some? old-modif-tree)
(apply-structure-modifiers old-modif-tree))

80
common/src/app/common/types/shape/layout.cljc
View file

@ -14,6 +14,7 @@
;; :layout-flex-dir ;; :row, :row-reverse, :column, :column-reverse
;; :layout-gap-type ;; :simple, :multiple
;; :layout-gap ;; {:row-gap number , :column-gap number}
;; :layout-align-items ;; :start :end :center :stretch
;; :layout-justify-content ;; :start :center :end :space-between :space-around :space-evenly
;; :layout-align-content ;; :start :center :end :space-between :space-around :space-evenly :stretch (by default)
@ -21,6 +22,10 @@
;; :layout-padding-type ;; :simple, :multiple
;; :layout-padding ;; {:p1 num :p2 num :p3 num :p4 num} number could be negative
;; layout-grid-rows
;; layout-grid-columns
;; layout-justify-items
;; ITEMS
;; :layout-item-margin ;; {:m1 0 :m2 0 :m3 0 :m4 0}
;; :layout-item-margin-type ;; :simple :multiple
@ -34,15 +39,25 @@
;; :layout-item-z-index
(s/def ::layout #{:flex :grid})
(s/def ::layout-flex-dir #{:row :reverse-row :row-reverse :column :reverse-column :column-reverse}) ;;TODO remove reverse-column and reverse-row after script
(s/def ::layout-gap-type #{:simple :multiple})
(s/def ::layout-gap ::us/safe-number)
(s/def ::layout-align-items #{:start :end :center :stretch})
(s/def ::layout-justify-items #{:start :end :center :stretch})
(s/def ::layout-align-content #{:start :end :center :space-between :space-around :space-evenly :stretch})
(s/def ::layout-justify-content #{:start :center :end :space-between :space-around :space-evenly})
(s/def ::layout-wrap-type #{:wrap :nowrap :no-wrap}) ;;TODO remove no-wrap after script
(s/def ::layout-padding-type #{:simple :multiple})
(s/def :grid/type #{:fr :auto :fixed})
(s/def :grid/value (s/nilable ::us/string))
(s/def ::grid-definition (s/keys :opt-un [:grid/type
:grid/value]))
(s/def ::layout-grid-rows (s/coll-of ::grid-definition :kind vector?))
(s/def ::layout-grid-columns (s/coll-of ::grid-definition :kind vector?))
(s/def ::p1 ::us/safe-number)
(s/def ::p2 ::us/safe-number)
(s/def ::p3 ::us/safe-number)
@ -67,7 +82,13 @@
::layout-padding
::layout-justify-content
::layout-align-items
::layout-align-content]))
::layout-align-content
;; grid
::layout-justify-items
::layout-grid-rows
::layout-grid-columns
]))
(s/def ::m1 ::us/safe-number)
(s/def ::m2 ::us/safe-number)
@ -100,26 +121,61 @@
::layout-item-absolute
::layout-item-z-index]))
(defn layout?
(defn flex-layout?
([objects id]
(layout? (get objects id)))
(flex-layout? (get objects id)))
([shape]
(and (= :frame (:type shape)) (= :flex (:layout shape)))))
(and (= :frame (:type shape))
(= :flex (:layout shape)))))
(defn layout-immediate-child? [objects shape]
(defn grid-layout?
([objects id]
(grid-layout? (get objects id)))
([shape]
(and (= :frame (:type shape))
(= :grid (:layout shape)))))
(defn any-layout?
([objects id]
(any-layout? (get objects id)))
([shape]
(or (flex-layout? shape) (grid-layout? shape))))
(defn flex-layout-immediate-child? [objects shape]
(let [parent-id (:parent-id shape)
parent (get objects parent-id)]
(layout? parent)))
(flex-layout? parent)))
(defn layout-immediate-child-id? [objects id]
(defn any-layout-immediate-child? [objects shape]
(let [parent-id (:parent-id shape)
parent (get objects parent-id)]
(any-layout? parent)))
(defn flex-layout-immediate-child-id? [objects id]
(let [parent-id (dm/get-in objects [id :parent-id])
parent (get objects parent-id)]
(layout? parent)))
(flex-layout? parent)))
(defn layout-descent? [objects shape]
(defn any-layout-immediate-child-id? [objects id]
(let [parent-id (dm/get-in objects [id :parent-id])
parent (get objects parent-id)]
(any-layout? parent)))
(defn flex-layout-descent? [objects shape]
(let [frame-id (:frame-id shape)
frame (get objects frame-id)]
(layout? frame)))
(flex-layout? frame)))
(defn grid-layout-descent? [objects shape]
(let [frame-id (:frame-id shape)
frame (get objects frame-id)]
(grid-layout? frame)))
(defn any-layout-descent? [objects shape]
(let [frame-id (:frame-id shape)
frame (get objects frame-id)]
(any-layout? frame)))
(defn inside-layout?
"Check if the shape is inside a layout"
@ -360,7 +416,7 @@
(defn change-h-sizing?
[frame-id objects children-ids]
(and (layout? objects frame-id)
(and (flex-layout? objects frame-id)
(auto-width? objects frame-id)
(or (and (col? objects frame-id)
(->> children-ids
@ -373,7 +429,7 @@
(defn change-v-sizing?
[frame-id objects children-ids]
(and (layout? objects frame-id)
(and (flex-layout? objects frame-id)
(auto-height? objects frame-id)
(or (and (col? objects frame-id)
(some (partial fill-height? objects) children-ids))

2
frontend/src/app/main/data/workspace.cljs
View file

@ -714,7 +714,7 @@
;; Fix the sizing when moving a shape
(pcb/update-shapes parents
(fn [parent]
(if (ctl/layout? parent)
(if (ctl/flex-layout? parent)
(cond-> parent
(ctl/change-h-sizing? (:id parent) objects (:shapes parent))
(assoc :layout-item-h-sizing :fix)

5
frontend/src/app/main/data/workspace/drawing/box.cljs
View file

@ -82,8 +82,9 @@
focus (:workspace-focus-selected state)
fid (ctst/top-nested-frame objects initial)
layout? (ctl/layout? objects fid)
drop-index (when layout? (gsl/get-drop-index fid objects initial))
flex-layout? (ctl/flex-layout? objects fid)
drop-index (when flex-layout? (gsl/get-drop-index fid objects initial))
shape (get-in state [:workspace-drawing :object])
shape (-> shape

12
frontend/src/app/main/data/workspace/drawing/curve.cljs
View file

@ -47,12 +47,12 @@
ptk/UpdateEvent
(update [_ state]
(let [objects (wsh/lookup-page-objects state)
content (get-in state [:workspace-drawing :object :content] [])
position (gpt/point (get-in content [0 :params] nil))
frame-id (ctst/top-nested-frame objects position)
layout? (ctl/layout? objects frame-id)
drop-index (when layout? (gsl/get-drop-index frame-id objects position))]
(let [objects (wsh/lookup-page-objects state)
content (get-in state [:workspace-drawing :object :content] [])
position (gpt/point (get-in content [0 :params] nil))
frame-id (ctst/top-nested-frame objects position)
flex-layout? (ctl/flex-layout? objects frame-id)
drop-index (when flex-layout? (gsl/get-drop-index frame-id objects position))]
(-> state
(assoc-in [:workspace-drawing :object :frame-id] frame-id)
(cond-> (some? drop-index)

8
frontend/src/app/main/data/workspace/modifiers.cljs
View file

@ -179,8 +179,8 @@
(let [origin-frame-ids (->> selected (group-by #(get-in objects [% :frame-id])))
child-set (set (get-in objects [target-frame-id :shapes]))
target-frame (get objects target-frame-id)
target-layout? (ctl/layout? target-frame)
target-frame (get objects target-frame-id)
target-flex-layout? (ctl/flex-layout? target-frame)
children-ids (concat (:shapes target-frame) selected)
@ -201,7 +201,7 @@
(fn [modif-tree [original-frame shapes]]
(let [shapes (->> shapes (d/removev #(= target-frame-id %)))
shapes (cond->> shapes
(and target-layout? (= original-frame target-frame-id))
(and target-flex-layout? (= original-frame target-frame-id))
;; When movining inside a layout frame remove the shapes that are not immediate children
(filterv #(contains? child-set %)))
children-ids (->> (dm/get-in objects [original-frame :shapes])
@ -219,7 +219,7 @@
(cond-> v-sizing?
(update-in [original-frame :modifiers] ctm/change-property :layout-item-v-sizing :fix)))
(and target-layout? (= original-frame target-frame-id))
(and target-flex-layout? (= original-frame target-frame-id))
(update-in [target-frame-id :modifiers] ctm/add-children shapes drop-index))))]
(as-> modif-tree $

12
frontend/src/app/main/data/workspace/path/drawing.cljs
View file

@ -240,12 +240,12 @@
(ptk/reify ::setup-frame-path
ptk/UpdateEvent
(update [_ state]
(let [objects (wsh/lookup-page-objects state)
content (get-in state [:workspace-drawing :object :content] [])
position (gpt/point (get-in content [0 :params] nil))
frame-id (ctst/top-nested-frame objects position)
layout? (ctl/layout? objects frame-id)
drop-index (when layout? (gsl/get-drop-index frame-id objects position))]
(let [objects (wsh/lookup-page-objects state)
content (get-in state [:workspace-drawing :object :content] [])
position (gpt/point (get-in content [0 :params] nil))
frame-id (ctst/top-nested-frame objects position)
flex-layout? (ctl/flex-layout? objects frame-id)
drop-index (when flex-layout? (gsl/get-drop-index frame-id objects position))]
(-> state
(assoc-in [:workspace-drawing :object :frame-id] frame-id)
(cond-> (some? drop-index)

28
frontend/src/app/main/data/workspace/shape_layout.cljs
View file

@ -53,11 +53,25 @@
:layout-padding {:p1 0 :p2 0 :p3 0 :p4 0}})
(def initial-grid-layout ;; TODO
{:layout :grid})
{:layout :grid
:layout-gap-type :multiple
:layout-gap {:row-gap 0 :column-gap 0}
:layout-align-items :start
:layout-align-content :stretch
:layout-justify-items :start
:layout-justify-content :start
:layout-padding-type :simple
:layout-padding {:p1 0 :p2 0 :p3 0 :p4 0}
:layout-grid-rows []
:layout-grid-columns []})
(defn get-layout-initializer
[type from-frame?]
(let [initial-layout-data (if (= type :flex) initial-flex-layout initial-grid-layout)]
(let [initial-layout-data
(case type
:flex initial-flex-layout
:grid initial-grid-layout)]
(fn [shape]
(-> shape
(merge initial-layout-data)
@ -288,7 +302,7 @@
(dwu/commit-undo-transaction undo-id))))))
(defn create-layout
[]
[type]
(ptk/reify ::create-layout
ptk/WatchEvent
(watch [_ state _]
@ -303,11 +317,11 @@
(if (and single? is-frame?)
(rx/of
(dwu/start-undo-transaction undo-id)
(create-layout-from-id [(first selected)] :flex true)
(create-layout-from-id [(first selected)] type true)
(dwu/commit-undo-transaction undo-id))
(rx/of
(dwu/start-undo-transaction undo-id)
(create-layout-from-selection :flex)
(create-layout-from-selection type)
(dwu/commit-undo-transaction undo-id)))))))
(defn toggle-layout-flex
@ -320,12 +334,12 @@
selected (wsh/lookup-selected state)
selected-shapes (map (d/getf objects) selected)
single? (= (count selected-shapes) 1)
has-flex-layout? (and single? (ctl/layout? objects (:id (first selected-shapes))))]
has-flex-layout? (and single? (ctl/flex-layout? objects (:id (first selected-shapes))))]
(when (not= 0 (count selected))
(if has-flex-layout?
(rx/of (remove-layout selected))
(rx/of (create-layout))))))))
(rx/of (create-layout :flex))))))))
(defn update-layout
[ids changes]

6
frontend/src/app/main/data/workspace/shapes.cljs
View file

@ -18,7 +18,6 @@
[app.common.types.shape :as cts]
[app.common.types.shape-tree :as ctst]
[app.common.types.shape.interactions :as ctsi]
[app.common.types.shape.layout :as ctl]
[app.common.uuid :as uuid]
[app.main.data.comments :as dc]
[app.main.data.workspace.changes :as dch]
@ -194,10 +193,6 @@
[file page objects ids it components-v2]
(let [lookup (d/getf objects)
layout-ids (->> ids
(mapcat (partial cph/get-parent-ids objects))
(filter (partial ctl/layout? objects)))
groups-to-unmask
(reduce (fn [group-ids id]
;; When the shape to delete is the mask of a masked group,
@ -319,7 +314,6 @@
(dc/detach-comment-thread ids)
(ptk/data-event :layout/update all-parents)
(dch/commit-changes changes)
(ptk/data-event :layout/update layout-ids)
(dwu/commit-undo-transaction undo-id))))
(defn create-and-add-shape

25
frontend/src/app/main/data/workspace/transforms.cljs
View file

@ -438,9 +438,10 @@
(cph/selected-with-children objects selected))
exclude-frames-siblings
(into exclude-frames
exclude-frames
#_(into exclude-frames
(comp (mapcat (partial cph/get-siblings-ids objects))
(filter (partial ctl/layout-immediate-child-id? objects)))
(filter (partial ctl/any-layout-immediate-child-id? objects)))
selected)
position (->> ms/mouse-position
@ -469,11 +470,11 @@
(rx/map
(fn [[move-vector mod?]]
(let [position (gpt/add from-position move-vector)
(let [position (gpt/add from-position move-vector)
exclude-frames (if mod? exclude-frames exclude-frames-siblings)
target-frame (ctst/top-nested-frame objects position exclude-frames)
layout? (ctl/layout? objects target-frame)
drop-index (when layout? (gsl/get-drop-index target-frame objects position))]
target-frame (ctst/top-nested-frame objects position exclude-frames)
flex-layout? (ctl/flex-layout? objects target-frame)
drop-index (when flex-layout? (gsl/get-drop-index target-frame objects position))]
[move-vector target-frame drop-index])))
(rx/take-until stopper))]
@ -529,7 +530,8 @@
get-new-position
(fn [parent-id position]
(let [parent (get objects parent-id)]
(when (ctl/layout? parent)
(cond
(ctl/flex-layout? parent)
(if (or
(and (ctl/reverse? parent)
(or (= direction :left)
@ -538,7 +540,12 @@
(or (= direction :right)
(= direction :down))))
(dec position)
(+ position 2)))))
(+ position 2))
;; TODO: GRID
(ctl/grid-layout? parent)
nil
)))
add-children-position
(fn [[parent-id children]]
@ -643,7 +650,7 @@
(let [objects (wsh/lookup-page-objects state)
selected (wsh/lookup-selected state {:omit-blocked? true})
selected-shapes (->> selected (map (d/getf objects)))]
(if (every? #(and (ctl/layout-immediate-child? objects %)
(if (every? #(and (ctl/any-layout-immediate-child? objects %)
(not (ctl/layout-absolute? %)))
selected-shapes)
(rx/of (reorder-selected-layout-child direction))

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

@ -405,7 +405,7 @@
(let [objects (wsh/lookup-page-objects state)]
(into []
(comp (map (d/getf objects))
(filter (partial ctl/layout-immediate-child? objects)))
(filter (partial ctl/flex-layout-immediate-child? objects)))
ids)))
st/state =))
@ -478,22 +478,22 @@
(defn workspace-text-modifier-by-id [id]
(l/derived #(get % id) workspace-text-modifier =))
(defn is-layout-child?
(defn is-flex-layout-child?
[ids]
(l/derived
(fn [objects]
(->> ids
(map (d/getf objects))
(some (partial ctl/layout-immediate-child? objects))))
(some (partial ctl/flex-layout-immediate-child? objects))))
workspace-page-objects))
(defn all-layout-child?
(defn all-flex-layout-child?
[ids]
(l/derived
(fn [objects]
(->> ids
(map (d/getf objects))
(every? (partial ctl/layout-immediate-child? objects))))
(every? (partial ctl/flex-layout-immediate-child? objects))))
workspace-page-objects))
(defn get-flex-child-viewer
@ -503,7 +503,7 @@
(let [objects (wsh/lookup-viewer-objects state page-id)]
(into []
(comp (map (d/getf objects))
(filter (partial ctl/layout-immediate-child? objects)))
(filter (partial ctl/flex-layout-immediate-child? objects)))
ids)))
st/state =))

6
frontend/src/app/main/ui/components/shape_icon.cljs
View file

@ -20,12 +20,14 @@
i/component-copy)
(case (:type shape)
:frame (cond
(and (ctl/layout? shape) (ctl/col? shape))
(and (ctl/flex-layout? shape) (ctl/col? shape))
i/layout-columns
(and (ctl/layout? shape) (ctl/row? shape))
(and (ctl/flex-layout? shape) (ctl/row? shape))
i/layout-rows
;; TODO: GRID ICON
:else
i/artboard)
:image i/image

20
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
View file

@ -308,8 +308,8 @@
layout-type (:layout values)
on-add-layout
(fn [_]
(st/emit! (dwsl/create-layout))
(fn [type]
(st/emit! (dwsl/create-layout type))
(reset! open? true))
@ -319,13 +319,13 @@
(reset! open? false))
;; Uncomment when activating the grid options
;; set-flex (fn []
;; (st/emit! (dwsl/remove-layout ids))
;; (on-add-layout :flex))
;;
;; set-grid (fn []
;; (st/emit! (dwsl/remove-layout ids))
;; (on-add-layout :grid))
set-flex (fn []
(st/emit! (dwsl/remove-layout ids))
(on-add-layout :flex))
set-grid (fn []
(st/emit! (dwsl/remove-layout ids))
(on-add-layout :grid))
;; Flex-direction
@ -394,7 +394,7 @@
[:span "Layout"]
(if (and (not multiple) (:layout values))
[:div.title-actions
#_[:div.layout-btns
[:div.layout-btns
[:button {:on-click set-flex
:class (dom/classnames
:active (= :flex layout-type))} "Flex"]

4
frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
View file

@ -83,9 +83,9 @@
selection-parents-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))
selection-parents (mf/deref selection-parents-ref)
flex-child? (->> selection-parents (some ctl/layout?))
flex-child? (->> selection-parents (some ctl/flex-layout?))
absolute? (ctl/layout-absolute? shape)
flex-container? (ctl/layout? shape)
flex-container? (ctl/flex-layout? shape)
flex-auto-width? (ctl/auto-width? shape)
flex-fill-width? (ctl/fill-width? shape)
flex-auto-height? (ctl/auto-height? shape)

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

@ -30,8 +30,8 @@
layout-item-values (select-keys shape layout-item-attrs)
layout-container-values (select-keys shape layout-container-flex-attrs)
is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids))
is-layout-child? (mf/deref is-layout-child-ref)
is-flex-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-flex-layout-child? ids))
is-flex-layout-child? (mf/deref is-flex-layout-child-ref)
is-layout-child-absolute? (ctl/layout-absolute? shape)]
[:*
@ -41,7 +41,7 @@
:shape shape}]
[:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
(when is-layout-child?
(when is-flex-layout-child?
[:& layout-item-menu
{:ids ids
:type type
@ -49,7 +49,7 @@
:is-layout-child? true
:shape shape}])
(when (or (not is-layout-child?) is-layout-child-absolute?)
(when (or (not is-flex-layout-child?) is-layout-child-absolute?)
[:& constraints-menu {:ids ids
:values constraint-values}])
[:& layer-menu {:ids ids

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

@ -32,7 +32,7 @@
layout-item-values (select-keys shape layout-item-attrs)
layout-container-values (select-keys shape layout-container-flex-attrs)
is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids))
is-flex-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-flex-layout-child? ids))
is-layout-child? (mf/deref is-layout-child-ref)
is-layout-child-absolute? (ctl/layout-absolute? shape)]
@ -43,14 +43,14 @@
:shape shape}]
[:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
(when is-layout-child?
(when is-flex-layout-child?
[:& layout-item-menu {:ids ids
:type type
:values layout-item-values
:is-layout-child? true
:is-layout-container? false
:shape shape}])
(when (or (not is-layout-child?) is-layout-child-absolute?)
(when (or (not is-flex-layout-child?) is-layout-child-absolute?)
[:& constraints-menu {:ids ids
:values constraint-values}])
[:& layer-menu {:ids ids

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

@ -36,9 +36,9 @@
layout-item-values (select-keys shape layout-item-attrs)
[comp-ids comp-values] [[(:id shape)] (select-keys shape component-attrs)]
is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids))
is-layout-child? (mf/deref is-layout-child-ref)
is-layout-container? (ctl/layout? shape)
is-flex-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-flex-layout-child? ids))
is-flex-layout-child? (mf/deref is-flex-layout-child-ref)
is-flex-layout-container? (ctl/flex-layout? shape)]
is-layout-child-absolute? (ctl/layout-absolute? shape)]
[:*
[:& measures-menu {:ids [(:id shape)]
@ -48,18 +48,18 @@
[:& component-menu {:ids comp-ids
:values comp-values
:shape-name (:name shape)}]
(when (or (not is-layout-child?) is-layout-child-absolute?)
(when (or (not is-flex-layout-child?) is-layout-child-absolute?)
[:& constraints-menu {:ids ids
:values constraint-values}])
[:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
(when (or is-layout-child? is-layout-container?)
(when (or is-flex-layout-child? is-flex-layout-container?)
[:& layout-item-menu
{:ids ids
:type type
:values layout-item-values
:is-layout-child? is-layout-child?
:is-layout-container? is-layout-container?
:is-layout-child? is-flex-layout-child?
:is-layout-container? is-flex-layout-container?
:shape shape}])
[:& layer-menu {:ids ids

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

@ -29,15 +29,15 @@
{::mf/wrap [mf/memo]
::mf/wrap-props false}
[props]
(let [shape (unchecked-get props "shape")
shape-with-children (unchecked-get props "shape-with-children")
shared-libs (unchecked-get props "shared-libs")
objects (->> shape-with-children (group-by :id) (d/mapm (fn [_ v] (first v))))
file-id (unchecked-get props "file-id")
layout-container-values (select-keys shape layout-container-flex-attrs)
ids [(:id shape)]
is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids))
is-layout-child? (mf/deref is-layout-child-ref)
(let [shape (unchecked-get props "shape")
shape-with-children (unchecked-get props "shape-with-children")
shared-libs (unchecked-get props "shared-libs")
objects (->> shape-with-children (group-by :id) (d/mapm (fn [_ v] (first v))))
file-id (unchecked-get props "file-id")
layout-container-values (select-keys shape layout-container-flex-attrs)
ids [(:id shape)]
is-flex-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-flex-layout-child? ids))
is-flex-layout-child? (mf/deref is-flex-layout-child-ref)
is-layout-child-absolute? (ctl/layout-absolute? shape)
type :group
@ -58,7 +58,7 @@
[:& component-menu {:ids comp-ids :values comp-values :shape-name (:name shape)}]
[:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
(when is-layout-child?
(when is-flex-layout-child?
[:& layout-item-menu
{:type type
:ids layout-item-ids
@ -66,7 +66,7 @@
:is-layout-container? false
:values layout-item-values}])
(when (or (not is-layout-child?) is-layout-child-absolute?)
(when (or (not is-flex-layout-child?) is-layout-child-absolute?)
[:& constraints-menu {:ids constraint-ids :values constraint-values}])
[:& layer-menu {:type type :ids layer-ids :values layer-values}]

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

@ -32,8 +32,8 @@
layout-item-values (select-keys shape layout-item-attrs)
layout-container-values (select-keys shape layout-container-flex-attrs)
is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids))
is-layout-child? (mf/deref is-layout-child-ref)
is-flex-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-flex-layout-child? ids))
is-flex-layout-child? (mf/deref is-flex-layout-child-ref)]
is-layout-child-absolute? (ctl/layout-absolute? shape)]
[:*
[:& measures-menu {:ids ids
@ -42,7 +42,7 @@
:shape shape}]
[:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
(when is-layout-child?
(when is-flex-layout-child?
[:& layout-item-menu
{:ids ids
:type type
@ -50,7 +50,7 @@
:is-layout-child? true
:shape shape}])
(when (or (not is-layout-child?) is-layout-child-absolute?)
(when (or (not is-flex-layout-child?) is-layout-child-absolute?)
[:& constraints-menu {:ids ids
:values constraint-values}])

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

@ -294,17 +294,17 @@
all-types (into #{} (map :type shapes))
ids (->> shapes (map :id))
is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids))
is-layout-child? (mf/deref is-layout-child-ref)
is-flex-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-flex-layout-child? ids))
is-flex-layout-child? (mf/deref is-flex-layout-child-ref)
has-text? (contains? all-types :text)
has-layout-container? (->> shapes (some ctl/layout?))
has-flex-layout-container? (->> shapes (some ctl/flex-layout?))
all-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/all-layout-child? ids))
all-layout-child? (mf/deref all-layout-child-ref)
all-flex-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/all-flex-layout-child? ids))
all-flex-layout-child? (mf/deref all-flex-layout-child-ref)
all-layout-container? (->> shapes (every? ctl/layout?))
all-flex-layout-container? (->> shapes (every? ctl/flex-layout?))
[measure-ids measure-values] (get-attrs shapes objects :measure)
@ -342,15 +342,15 @@
[:& layout-container-menu {:type type :ids layout-container-ids :values layout-container-values :multiple true}]
(when (or is-layout-child? has-layout-container?)
(when (or is-flex-layout-child? has-flex-layout-container?)
[:& layout-item-menu
{:type type
:ids layout-item-ids
:is-layout-child? all-layout-child?
:is-layout-container? all-layout-container?
:is-layout-child? all-flex-layout-child?
:is-layout-container? all-flex-layout-container?
:values layout-item-values}])
(when-not (or (empty? constraint-ids) is-layout-child?)
(when-not (or (empty? constraint-ids) is-flex-layout-child?)
[:& constraints-menu {:ids constraint-ids :values constraint-values}])
(when-not (empty? layer-ids)

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

@ -32,8 +32,8 @@
layout-item-values (select-keys shape layout-item-attrs)
layout-container-values (select-keys shape layout-container-flex-attrs)
is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids))
is-layout-child? (mf/deref is-layout-child-ref)
is-flex-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-flex-layout-child? ids))
is-flex-layout-child? (mf/deref is-flex-layout-child-ref)]
is-layout-child-absolute? (ctl/layout-absolute? shape)]
[:*
[:& measures-menu {:ids ids
@ -42,14 +42,14 @@
:shape shape}]
[:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
(when is-layout-child?
(when is-flex-layout-child?
[:& layout-item-menu {:ids ids
:type type
:values layout-item-values
:is-layout-child? true
:is-layout-container? false
:shape shape}])
(when (or (not is-layout-child?) is-layout-child-absolute?)
(when (or (not is-flex-layout-child?) is-layout-child-absolute?)
[:& constraints-menu {:ids ids
:values constraint-values}])
[:& layer-menu {:ids ids

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

@ -32,8 +32,8 @@
stroke-values (select-keys shape stroke-attrs)
layout-item-values (select-keys shape layout-item-attrs)
layout-container-values (select-keys shape layout-container-flex-attrs)
is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids))
is-layout-child? (mf/deref is-layout-child-ref)
is-flex-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-flex-layout-child? ids))
is-flex-layout-child? (mf/deref is-flex-layout-child-ref)]
is-layout-child-absolute? (ctl/layout-absolute? shape)]
[:*
[:& measures-menu {:ids ids
@ -41,7 +41,7 @@
:values measure-values
:shape shape}]
[:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
(when is-layout-child?
(when is-flex-layout-child?
[:& layout-item-menu
{:ids ids
:type type

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

@ -106,8 +106,8 @@
layout-item-values (select-keys shape layout-item-attrs)
layout-container-values (select-keys shape layout-container-flex-attrs)
is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids))
is-layout-child? (mf/deref is-layout-child-ref)
is-flex-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-flex-layout-child? ids))
is-flex-layout-child? (mf/deref is-flex-layout-child-ref)]
is-layout-child-absolute? (ctl/layout-absolute? shape)]
(when (contains? svg-elements tag)
@ -118,7 +118,7 @@
:shape shape}]
[:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
(when is-layout-child?
(when is-flex-layout-child?
[:& layout-item-menu
{:ids ids
:type type
@ -126,7 +126,7 @@
:is-layout-child? true
:shape shape}])
(when (or (not is-layout-child?) is-layout-child-absolute?)
(when (or (not is-flex-layout-child?) is-layout-child-absolute?)
[:& constraints-menu {:ids ids
:values constraint-values}])

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

@ -28,8 +28,8 @@
(let [ids [(:id shape)]
type (:type shape)
is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids))
is-layout-child? (mf/deref is-layout-child-ref)
is-flex-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-flex-layout-child? ids))
is-flex-layout-child? (mf/deref is-flex-layout-child-ref)
layout-container-values (select-keys shape layout-container-flex-attrs)
is-layout-child-absolute? (ctl/layout-absolute? shape)
state-map (mf/deref refs/workspace-editor-state)
@ -76,7 +76,7 @@
:shape shape}]
[:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
(when is-layout-child?
(when is-flex-layout-child?
[:& layout-item-menu
{:ids ids
:type type
@ -84,7 +84,7 @@
:is-layout-child? true
:shape shape}])
(when (or (not is-layout-child?) is-layout-child-absolute?)
(when (or (not is-flex-layout-child?) is-layout-child-absolute?)
[:& constraints-menu
{:ids ids
:values (select-keys shape constraint-attrs)}])

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

@ -338,7 +338,7 @@
:zoom zoom
:modifiers modifiers}]
(when (ctl/layout? outlined-frame)
(when (ctl/any-layout? outlined-frame)
[:g.ghost-outline
[:& outline/shape-outlines
{:objects base-objects

2
frontend/src/app/main/ui/workspace/viewport/debug.cljs
View file

@ -68,7 +68,7 @@
shape (or selected-frame (get objects hover-top-frame-id))]
(when (and shape (ctl/layout? shape))
(when (and shape (ctl/flex-layout? shape))
(let [row? (ctl/row? shape)
col? (ctl/col? shape)

2
frontend/src/app/main/ui/workspace/viewport/snap_distances.cljs
View file

@ -268,7 +268,7 @@
frame (mf/deref (refs/object-by-id frame-id))
selrect (gsh/selection-rect selected-shapes)]
(when-not (ctl/layout? frame)
(when-not (ctl/any-layout? frame)
[:g.distance
[:& shape-distance
{:selrect selrect

2
frontend/src/app/main/ui/workspace/viewport/snap_points.cljs
View file

@ -175,7 +175,7 @@
shapes (if drawing [drawing] shapes)
frame-id (snap/snap-frame-id shapes)]
(when-not (ctl/layout? objects frame-id)
(when-not (ctl/any-layout? objects frame-id)
[:& snap-feedback {:shapes shapes
:page-id page-id
:remove-snap? remove-snap?

4
frontend/src/app/util/snap_data.cljs
View file

@ -82,7 +82,7 @@
grid-y-data (get-grids-snap-points frame :y)]
(cond-> page-data
(not (ctl/layout-descent? objects frame))
(not (ctl/any-layout-descent? objects frame))
(-> ;; Update root frame information
(assoc-in [uuid/zero :objects-data frame-id] frame-data)
@ -106,7 +106,7 @@
:id (:id shape)
:pt %)))]
(cond-> page-data
(not (ctl/layout-descent? objects shape))
(not (ctl/any-layout-descent? objects shape))
(-> (assoc-in [frame-id :objects-data (:id shape)] shape-data)
(update-in [frame-id :x] (make-insert-tree-data shape-data :x))
(update-in [frame-id :y] (make-insert-tree-data shape-data :y))))))