From a0cd94cfaed3cf89dbf2b13e7c7af30fe91069c5 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Tue, 14 Feb 2023 11:56:00 +0100 Subject: [PATCH] :sparkles: Grid layout infrastructure --- .../app/common/geom/shapes/constraints.cljc | 4 +- .../app/common/geom/shapes/grid_layout.cljc | 16 ++++ .../geom/shapes/grid_layout/layout_data.cljc | 71 ++++++++++++++++ .../geom/shapes/grid_layout/positions.cljc | 16 ++++ .../src/app/common/geom/shapes/modifiers.cljc | 65 +++++++++++---- common/src/app/common/types/shape/layout.cljc | 80 ++++++++++++++++--- frontend/src/app/main/data/workspace.cljs | 2 +- .../app/main/data/workspace/drawing/box.cljs | 5 +- .../main/data/workspace/drawing/curve.cljs | 12 +-- .../app/main/data/workspace/modifiers.cljs | 8 +- .../app/main/data/workspace/path/drawing.cljs | 12 +-- .../app/main/data/workspace/shape_layout.cljs | 28 +++++-- .../src/app/main/data/workspace/shapes.cljs | 6 -- .../app/main/data/workspace/transforms.cljs | 25 +++--- frontend/src/app/main/refs.cljs | 12 +-- .../app/main/ui/components/shape_icon.cljs | 6 +- .../options/menus/layout_container.cljs | 20 ++--- .../sidebar/options/menus/measures.cljs | 4 +- .../sidebar/options/shapes/bool.cljs | 8 +- .../sidebar/options/shapes/circle.cljs | 6 +- .../sidebar/options/shapes/frame.cljs | 14 ++-- .../sidebar/options/shapes/group.cljs | 22 ++--- .../sidebar/options/shapes/image.cljs | 8 +- .../sidebar/options/shapes/multiple.cljs | 20 ++--- .../sidebar/options/shapes/path.cljs | 8 +- .../sidebar/options/shapes/rect.cljs | 6 +- .../sidebar/options/shapes/svg_raw.cljs | 8 +- .../sidebar/options/shapes/text.cljs | 8 +- .../src/app/main/ui/workspace/viewport.cljs | 2 +- .../app/main/ui/workspace/viewport/debug.cljs | 2 +- .../ui/workspace/viewport/snap_distances.cljs | 2 +- .../ui/workspace/viewport/snap_points.cljs | 2 +- frontend/src/app/util/snap_data.cljs | 4 +- 33 files changed, 362 insertions(+), 150 deletions(-) create mode 100644 common/src/app/common/geom/shapes/grid_layout.cljc create mode 100644 common/src/app/common/geom/shapes/grid_layout/layout_data.cljc create mode 100644 common/src/app/common/geom/shapes/grid_layout/positions.cljc diff --git a/common/src/app/common/geom/shapes/constraints.cljc b/common/src/app/common/geom/shapes/constraints.cljc index 3f40a9d0a..82ed2097b 100644 --- a/common/src/app/common/geom/shapes/constraints.cljc +++ b/common/src/app/common/geom/shapes/constraints.cljc @@ -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) diff --git a/common/src/app/common/geom/shapes/grid_layout.cljc b/common/src/app/common/geom/shapes/grid_layout.cljc new file mode 100644 index 000000000..2588b0e53 --- /dev/null +++ b/common/src/app/common/geom/shapes/grid_layout.cljc @@ -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) diff --git a/common/src/app/common/geom/shapes/grid_layout/layout_data.cljc b/common/src/app/common/geom/shapes/grid_layout/layout_data.cljc new file mode 100644 index 000000000..ae6ee4bfb --- /dev/null +++ b/common/src/app/common/geom/shapes/grid_layout/layout_data.cljc @@ -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})) diff --git a/common/src/app/common/geom/shapes/grid_layout/positions.cljc b/common/src/app/common/geom/shapes/grid_layout/positions.cljc new file mode 100644 index 000000000..3f81928b4 --- /dev/null +++ b/common/src/app/common/geom/shapes/grid_layout/positions.cljc @@ -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)))) diff --git a/common/src/app/common/geom/shapes/modifiers.cljc b/common/src/app/common/geom/shapes/modifiers.cljc index 3e69afb2f..f0c247229 100644 --- a/common/src/app/common/geom/shapes/modifiers.cljc +++ b/common/src/app/common/geom/shapes/modifiers.cljc @@ -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)) diff --git a/common/src/app/common/types/shape/layout.cljc b/common/src/app/common/types/shape/layout.cljc index 1f7b6950a..776271f6a 100644 --- a/common/src/app/common/types/shape/layout.cljc +++ b/common/src/app/common/types/shape/layout.cljc @@ -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)) diff --git a/frontend/src/app/main/data/workspace.cljs b/frontend/src/app/main/data/workspace.cljs index 04ee77b0a..04dcb5a96 100644 --- a/frontend/src/app/main/data/workspace.cljs +++ b/frontend/src/app/main/data/workspace.cljs @@ -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) diff --git a/frontend/src/app/main/data/workspace/drawing/box.cljs b/frontend/src/app/main/data/workspace/drawing/box.cljs index 140d58bbd..9517047d7 100644 --- a/frontend/src/app/main/data/workspace/drawing/box.cljs +++ b/frontend/src/app/main/data/workspace/drawing/box.cljs @@ -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 diff --git a/frontend/src/app/main/data/workspace/drawing/curve.cljs b/frontend/src/app/main/data/workspace/drawing/curve.cljs index 1f3000eb9..5f8a8e34f 100644 --- a/frontend/src/app/main/data/workspace/drawing/curve.cljs +++ b/frontend/src/app/main/data/workspace/drawing/curve.cljs @@ -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) diff --git a/frontend/src/app/main/data/workspace/modifiers.cljs b/frontend/src/app/main/data/workspace/modifiers.cljs index 110439add..e73441f6c 100644 --- a/frontend/src/app/main/data/workspace/modifiers.cljs +++ b/frontend/src/app/main/data/workspace/modifiers.cljs @@ -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 $ diff --git a/frontend/src/app/main/data/workspace/path/drawing.cljs b/frontend/src/app/main/data/workspace/path/drawing.cljs index 307c6e290..873d9d95d 100644 --- a/frontend/src/app/main/data/workspace/path/drawing.cljs +++ b/frontend/src/app/main/data/workspace/path/drawing.cljs @@ -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) diff --git a/frontend/src/app/main/data/workspace/shape_layout.cljs b/frontend/src/app/main/data/workspace/shape_layout.cljs index 2a61391b9..f3317e214 100644 --- a/frontend/src/app/main/data/workspace/shape_layout.cljs +++ b/frontend/src/app/main/data/workspace/shape_layout.cljs @@ -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] diff --git a/frontend/src/app/main/data/workspace/shapes.cljs b/frontend/src/app/main/data/workspace/shapes.cljs index 326849ed0..353ee2f6b 100644 --- a/frontend/src/app/main/data/workspace/shapes.cljs +++ b/frontend/src/app/main/data/workspace/shapes.cljs @@ -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 diff --git a/frontend/src/app/main/data/workspace/transforms.cljs b/frontend/src/app/main/data/workspace/transforms.cljs index daaf0f0ad..77357fe7b 100644 --- a/frontend/src/app/main/data/workspace/transforms.cljs +++ b/frontend/src/app/main/data/workspace/transforms.cljs @@ -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)) diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs index df5637cf2..7e7bc193a 100644 --- a/frontend/src/app/main/refs.cljs +++ b/frontend/src/app/main/refs.cljs @@ -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 =)) diff --git a/frontend/src/app/main/ui/components/shape_icon.cljs b/frontend/src/app/main/ui/components/shape_icon.cljs index 9eca7fa5b..fa6d7606b 100644 --- a/frontend/src/app/main/ui/components/shape_icon.cljs +++ b/frontend/src/app/main/ui/components/shape_icon.cljs @@ -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 diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs index 5b51a8456..9d941d190 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs @@ -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"] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs index f79bfedba..e24b088d6 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs @@ -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) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs index 9803d57c6..458acf5d9 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs @@ -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 diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs index 44146155f..576d21be2 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs @@ -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 diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs index ebbb5b618..832e8bb1f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs @@ -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 diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs index 7b336181a..4d4520350 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs @@ -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}] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/image.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/image.cljs index 0f3bf75fb..d911e489e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/image.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/image.cljs @@ -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}]) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs index 7245fe2ad..ad19265dd 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs @@ -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) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs index 28494c225..b60ce4872 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs @@ -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 diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs index 5ee633fcf..6eb3fcd67 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs @@ -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 diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs index a8ec66fb9..570e13e24 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs @@ -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}]) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs index 6bfcb5dda..8c93c8f9e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs @@ -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)}]) diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs index 20a5abe6f..30e2e8ec2 100644 --- a/frontend/src/app/main/ui/workspace/viewport.cljs +++ b/frontend/src/app/main/ui/workspace/viewport.cljs @@ -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 diff --git a/frontend/src/app/main/ui/workspace/viewport/debug.cljs b/frontend/src/app/main/ui/workspace/viewport/debug.cljs index 1fb9b6d02..3842e7290 100644 --- a/frontend/src/app/main/ui/workspace/viewport/debug.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/debug.cljs @@ -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) diff --git a/frontend/src/app/main/ui/workspace/viewport/snap_distances.cljs b/frontend/src/app/main/ui/workspace/viewport/snap_distances.cljs index 9ae906cc5..185d50e74 100644 --- a/frontend/src/app/main/ui/workspace/viewport/snap_distances.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/snap_distances.cljs @@ -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 diff --git a/frontend/src/app/main/ui/workspace/viewport/snap_points.cljs b/frontend/src/app/main/ui/workspace/viewport/snap_points.cljs index 88fe7bc81..a57260864 100644 --- a/frontend/src/app/main/ui/workspace/viewport/snap_points.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/snap_points.cljs @@ -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? diff --git a/frontend/src/app/util/snap_data.cljs b/frontend/src/app/util/snap_data.cljs index deb4239fe..c7b00e954 100644 --- a/frontend/src/app/util/snap_data.cljs +++ b/frontend/src/app/util/snap_data.cljs @@ -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))))))