🐛 Fix flex elemen info doesn't show on inspect tab

frontend/src/app/main/refs.cljs

@@ -384,6 +384,17 @@
 (def workspace-focus-selected
   (l/derived :workspace-focus-selected st/state))
 
+(defn workspace-get-flex-child
+  [ids]
+  (l/derived
+   (fn [state]
+     (let [objects  (wsh/lookup-page-objects state)]
+       (into []
+             (comp (map (d/getf objects))
+                   (filter (partial ctl/layout-child? objects)))
+             ids)))
+   st/state =))
+
 ;; Remove this when deprecating components-v2
 (def remove-graphics
   (l/derived :remove-graphics st/state))

frontend/src/app/main/ui/viewer/handoff/attributes.cljs

@@ -32,7 +32,7 @@
    :text     [:layout :text :shadow :blur :stroke :layout-flex-item]})
 
 (mf/defc attributes
-  [{:keys [page-id file-id shapes frame]}]
+  [{:keys [page-id file-id shapes frame from]}]
   (let [shapes  (hooks/use-equal-memo shapes)
         shapes  (mf/with-memo [shapes]
                   (mapv #(gsh/translate-to-frame % frame) shapes))
@@ -52,7 +52,8 @@
              :text             text-panel
              :svg              svg-panel)
         {:shapes shapes
-         :frame frame}])
+         :frame frame
+         :from from}])
      [:& exports
       {:shapes shapes
        :type type

frontend/src/app/main/ui/viewer/handoff/attributes/layout_flex_element.cljs

@@ -90,7 +90,7 @@
         [:div.attributes-label "Margin"]
         [:& manage-margin {:margin merged-margin :type "margin"}]
         [:& copy-button {:data (copy-data shape :layout-item-margin)}]])
-     
+
      (when (:layout-item-h-sizing shape)
        [:div.attributes-unit-row
         [:div.attributes-label "Horizontal sizing"]
@@ -102,7 +102,7 @@
         [:div.attributes-label "Vertical sizing"]
         [:div.attributes-value (manage-sizing (:layout-item-v-sizing shape) :v)]
         [:& copy-button {:data (copy-data shape :layout-item-v-sizing)}]])
-     
+
      (when (= :fill (:layout-item-h-sizing shape))
        [:*
         (when (some? (:layout-item-max-w shape))
@@ -132,10 +132,10 @@
            [:& copy-button {:data (copy-data shape :layout-item-min-h)}]])])]))
 
 (mf/defc layout-flex-element-panel
-  [{:keys [shapes]}]
+  [{:keys [shapes from]}]
   (let [route        (mf/deref refs/route)
         page-id      (:page-id (:query-params route))
-        mod-shapes   (cd/get-flex-elements page-id shapes)
+        mod-shapes   (cd/get-flex-elements page-id shapes from)
         shape        (first mod-shapes)
         has-margin?  (some? (:layout-item-margin shape))
         has-values?  (or (some? (:layout-item-max-w shape))

frontend/src/app/main/ui/viewer/handoff/code.cljs

@@ -46,10 +46,12 @@
     (cond-> code
       (= type "svg") (beautify/html #js {"indent_size" 2}))))
 
-(defn get-flex-elements [page-id shapes]
+(defn get-flex-elements [page-id shapes from]
   (let [ids (mapv :id shapes)
         ids (hooks/use-equal-memo ids)
-        get-layout-children-refs (mf/use-memo (mf/deps ids page-id) #(refs/get-flex-child-viewer ids page-id))]
+        get-layout-children-refs (mf/use-memo (mf/deps ids page-id from) #(if (= from :workspace)
+                                                                            (refs/workspace-get-flex-child ids)
+                                                                            (refs/get-flex-child-viewer ids page-id)))]
 
     (mf/deref get-layout-children-refs)))
 
@@ -61,7 +63,7 @@
                          (map #(gsh/translate-to-frame % frame)))
         route      (mf/deref refs/route)
         page-id    (:page-id (:query-params route))
-        flex-items (get-flex-elements page-id shapes)
+        flex-items (get-flex-elements page-id shapes from)
         shapes     (map #(assoc % :flex-items flex-items) shapes)
         style-code (-> (cg/generate-style-code @style-type shapes)
                        (format-code "css"))

frontend/src/app/main/ui/viewer/handoff/right_sidebar.cljs

@@ -65,7 +65,8 @@
             [:& attributes {:page-id page-id
                             :file-id file-id
                             :frame frame
-                            :shapes shapes}]]
+                            :shapes shapes
+                            :from from}]]
 
            [:& tab-element {:id :code :title (tr "handoff.tabs.code")}
             [:& code {:frame frame