✨ Show grid layout on component thumbnails and empty grids

common/src/app/common/pages/common.cljc

@@ -89,11 +89,16 @@
    :layout-gap              :layout-container
    :layout-gap-type         :layout-container
    :layout-justify-content  :layout-container
+   :layout-justify-items    :layout-container
    :layout-wrap-type        :layout-container
    :layout-padding-type     :layout-container
    :layout-padding          :layout-container
    :layout-h-orientation    :layout-container
    :layout-v-orientation    :layout-container
+   :layout-grid-dir         :layout-container
+   :layout-grid-rows        :layout-container
+   :layout-grid-columns     :layout-container
+   :layout-grid-cells       :layout-container
 
    :layout-item-margin      :layout-item
    :layout-item-margin-type :layout-item

frontend/src/app/main/ui/shapes/frame.cljs

@@ -14,6 +14,7 @@
    [app.main.ui.context :as muc]
    [app.main.ui.shapes.attrs :as attrs]
    [app.main.ui.shapes.custom-stroke :refer [shape-fills shape-strokes]]
+   [app.main.ui.shapes.grid-layout-viewer :refer [grid-layout-viewer]]
    [app.util.object :as obj]
    [debug :refer [debug?]]
    [rumext.v2 :as mf]))
@@ -138,9 +139,12 @@
           childs (unchecked-get props "childs")
           childs (cond-> childs
                    (ctl/any-layout? shape)
-                   (cph/sort-layout-children-z-index))]
+                   (cph/sort-layout-children-z-index))
+          is-component? (mf/use-ctx muc/is-component?)]
       [:> frame-container props
        [:g.frame-children {:opacity (:opacity shape)}
         (for [item childs]
-          [:& shape-wrapper {:key (dm/str (:id item)) :shape item}])]])))
+          [:& shape-wrapper {:key (dm/str (:id item)) :shape item}])]
+       (when (and is-component? (empty? childs))
+         [:& grid-layout-viewer {:shape shape :childs childs}])])))
 

frontend/src/app/main/ui/shapes/grid_layout_viewer.cljs

@@ -0,0 +1,99 @@
+;; 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.main.ui.shapes.grid-layout-viewer
+  (:require
+   [app.common.data.macros :as dm]
+   [app.common.geom.matrix :as gmt]
+   [app.common.geom.point :as gpt]
+   [app.common.geom.shapes :as gsh]
+   [app.common.geom.shapes.grid-layout :as gsg]
+   [app.common.geom.shapes.points :as gpo]
+   [app.common.types.shape.layout :as ctl]
+   [rumext.v2 :as mf]))
+
+(mf/defc grid-cell-area-label
+  {::mf/wrap-props false}
+  [props]
+
+  (let [cell-origin (unchecked-get props "origin")
+        cell-width  (unchecked-get props "width")
+        text  (unchecked-get props "text")
+
+        area-width (* 10 (count text))
+        area-height 25
+        area-x (- (+ (:x cell-origin) cell-width) area-width)
+        area-y (:y cell-origin)
+
+        area-text-x (+ area-x (/ area-width 2))
+        area-text-y (+ area-y (/ area-height 2))]
+
+    [:g {:pointer-events "none"}
+     [:rect {:x area-x
+             :y area-y
+             :width area-width
+             :height area-height
+             :style {:fill "var(--color-distance)"
+                     :fill-opacity 0.3}}]
+     [:text {:x area-text-x
+             :y area-text-y
+             :style {:fill "var(--color-distance)"
+                     :font-family "worksans"
+                     :font-weight 600
+                     :font-size 14
+                     :alignment-baseline "central"
+                     :text-anchor "middle"}}
+      text]]))
+
+(mf/defc grid-cell
+  {::mf/wrap-props false}
+  [props]
+  (let [shape       (unchecked-get props "shape")
+        cell        (unchecked-get props "cell")
+        layout-data (unchecked-get props "layout-data")
+        
+        cell-bounds (gsg/cell-bounds layout-data cell)
+        cell-origin (gpo/origin cell-bounds)
+        cell-width  (gpo/width-points cell-bounds)
+        cell-height (gpo/height-points cell-bounds)
+        cell-center (gsh/center-points cell-bounds)
+        cell-origin (gpt/transform cell-origin (gmt/transform-in cell-center (:transform-inverse shape)))]
+
+    [:g.cell
+     [:rect
+      {:transform (dm/str (gmt/transform-in cell-center (:transform shape)))
+       :x (:x cell-origin)
+       :y (:y cell-origin)
+       :width cell-width
+       :height cell-height
+       :style {:stroke "var(--color-distance)"
+               :stroke-width 1.5
+               :fill "none"}}]
+
+     (when (:area-name cell)
+       [:& grid-cell-area-label {:origin cell-origin
+                                 :width cell-width
+                                 :text (:area-name cell)}])]))
+
+(mf/defc grid-layout-viewer
+  {::mf/wrap-props false}
+  [props]
+  (let [shape (unchecked-get props "shape")
+        childs (unchecked-get props "childs")
+
+        children
+        (->> childs
+             (remove :hidden)
+             (map #(vector (gpo/parent-coords-bounds (:points %) (:points shape)) %)))
+
+        layout-data (gsg/calc-layout-data shape children (:points shape))]
+
+    [:g.cells 
+     (for [cell (ctl/get-cells shape {:sort? true})]
+       [:& grid-cell {:key (dm/str "cell-" (:id cell))
+                      :shape shape
+                      :layout-data layout-data
+                      :cell cell}])]))

frontend/src/app/main/ui/workspace/viewport.cljs

@@ -11,6 +11,7 @@
    [app.common.data.macros :as dm]
    [app.common.geom.shapes :as gsh]
    [app.common.pages.helpers :as cph]
+   [app.common.types.shape-tree :as ctt]
    [app.common.types.shape.layout :as ctl]
    [app.main.data.workspace.modifiers :as dwm]
    [app.main.refs :as refs]
@@ -591,12 +592,24 @@
           {:id (first selected)
            :zoom zoom}])
 
-       (when  (or show-grid-editor? hover-grid?)
+       [:g.grid-layout-editor {:clipPath "url(#clip-handlers)"}
-         [:g.grid-layout-editor {:clipPath "url(#clip-handlers)"}
+        (when (or show-grid-editor? hover-grid?)
           [:& grid-layout/editor
            {:zoom zoom
             :objects base-objects
             :modifiers modifiers
             :shape (or (get base-objects edition)
                        (get base-objects @hover-top-frame-id))
-            :view-only (not show-grid-editor?)}]])]]]))
+            :view-only (not show-grid-editor?)}])
+
+        (for [frame (ctt/get-frames objects)]
+          (when (and (ctl/grid-layout? frame)
+                     (empty? (:shapes frame))
+                     (not= edition (:id frame))
+                     (not= @hover-top-frame-id (:id frame)))
+            [:& grid-layout/editor
+             {:zoom zoom
+              :objects base-objects
+              :modifiers modifiers
+              :shape frame
+              :view-only true}]))]]]]))

frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs

@@ -684,11 +684,15 @@
         hover-cells (:hover grid-edition)
         selected-cells (:selected grid-edition)
 
-        children (->> (:shapes shape)
+        children
-                      (map (d/getf objects))
+        (mf/use-memo
-                      (map #(gsh/transform-shape % (dm/get-in modifiers [(:id %) :modifiers])))
+         (mf/deps shape modifiers)
-                      (remove :hidden)
+         (fn []
-                      (map #(vector (gpo/parent-coords-bounds (:points %) (:points shape)) %)))
+           (->> (:shapes shape)
+                (map (d/getf objects))
+                (map #(gsh/transform-shape % (dm/get-in modifiers [(:id %) :modifiers])))
+                (remove :hidden)
+                (map #(vector (gpo/parent-coords-bounds (:points %) (:points shape)) %)))))
 
         children (hooks/use-equal-memo children)