✨ Assets groups review

backend/src/app/srepl/fixes.clj

@@ -281,3 +281,50 @@
                      {:id (:id file)})
 
          (files/persist-pointers! h/*conn* (:id file)))))))
+
+(defn fix-main-shape-name
+  ([file]
+   (prn (str "Updating " (:name file) " " (:id file)))
+   (if-not (contains? (:features file) "components/v2")
+     (do
+       (prn "   This file is not v2")
+       file)
+     (let [libs (->> (files/get-file-libraries h/*conn* (:id file))
+                     (cons file)
+                     (map #(files/get-file h/*conn* (:id %) (:features file)))
+                     (d/index-by :id))
+
+           update-shape
+           (fn [shape]
+             (if-not (ctk/instance-head? shape)
+               shape
+               (let [component (ctf/get-component libs (:component-file shape) (:component-id shape) {:include-deleted? true})
+                     [_path name] (cph/parse-path-name (:name shape))
+                     full-name (cph/clean-path (str (:path component) "/" (:name component)))]
+                 (if (= name (:name component))
+                   (assoc shape :name full-name)
+                   shape))))
+
+
+           update-page
+           (fn [page]
+             (prn (str "Page " (:name page)))
+             (h/update-shapes page update-shape))]
+
+       (-> file
+           (update :data h/update-pages update-page)
+           (assoc ::updated true)))))
+
+  ([file save?]
+   (let [file (-> file
+                  (update :data blob/decode)
+                  (fix-main-shape-name))]
+     (when (and save? (::updated file))
+       (let [data     (blob/encode (:data file))]
+         (db/update! h/*conn* :file
+                     {:data data
+                      ;; :revn (:revn file)
+                      }
+                     {:id (:id file)})
+
+         (files/persist-pointers! h/*conn* (:id file)))))))

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

@@ -467,6 +467,12 @@
   [path-vec]
   (str/join " / " path-vec))
 
+(defn clean-path
+  "Remove empty items from the path."
+  [path]
+  (->> (split-path path)
+       (join-path)))
+
 (defn parse-path-name
   "Parse a string in the form 'group / subgroup / name'.
   Retrieve the path and the name in separated values, normalizing spaces."

frontend/resources/styles/main/partials/sidebar-layers.scss

@@ -268,6 +268,9 @@ span.element-name {
   text-overflow: ellipsis;
   white-space: nowrap;
   flex: 1;
+  &.left-ellipsis {
+    direction: rtl; // hack for getting the ellipsis on the left side
+  }
 }
 
 .element-actions {

frontend/src/app/main/data/workspace.cljs

@@ -657,7 +657,8 @@
      ptk/WatchEvent
      (watch [_ state _]
        (when-let [shape-id (dm/get-in state [:workspace-local :shape-for-rename])]
-         (let [shape (wsh/lookup-shape state shape-id)]
+         (let [shape (wsh/lookup-shape state shape-id)
+               name  (cph/clean-path name)]
            (rx/concat
             ;; Remove rename state from workspace local state
             (rx/of #(update % :workspace-local dissoc :shape-for-rename))

frontend/src/app/main/data/workspace/libraries.cljs

@@ -383,7 +383,8 @@
     ptk/WatchEvent
     (watch [_ state _]
       (when-let [component (dm/get-in state [:workspace-data :components component-id])]
-        (let [shape-id (:main-instance-id component)
+        (let [name     (cph/clean-path name)
+              shape-id (:main-instance-id component)
               page-id  (:main-instance-page component)]
           (rx/concat
            (rx/of (rename-component component-id name))

frontend/src/app/main/ui/viewer/inspect/left_sidebar.cljs

@@ -7,9 +7,12 @@
 (ns app.main.ui.viewer.inspect.left-sidebar
   (:require
    [app.common.data :as d]
+   [app.common.data.macros :as dm]
    [app.common.pages.helpers :as cph]
+   [app.common.types.component :as ctk]
    [app.common.types.shape.layout :as ctl]
    [app.main.data.viewer :as dv]
+   [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.shape-icon :as si]
    [app.main.ui.icons :as i]
@@ -33,7 +36,11 @@
         selected? (contains? selected id)
         item-ref  (mf/use-ref nil)
 
-
+        file              (mf/deref refs/viewer-file)
+        components-v2     (dm/get-in file [:data :options :components-v2])
+        main-instance?    (if components-v2
+                            (ctk/main-instance? item)
+                            true)
         collapsed-iref (mf/use-memo
                         (mf/deps id)
                         (make-collapsed-iref id))
@@ -77,7 +84,7 @@
       [:div.icon
        (when absolute?
          [:div.absolute i/position-absolute])
-       [:& si/element-icon {:shape item}]]
+       [:& si/element-icon {:shape item :main-instance? main-instance?}]]
       [:& layer-name {:shape-id id
                       :shape-name name
                       :shape-touched? touched?

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

@@ -6,6 +6,8 @@
 
 (ns app.main.ui.viewer.inspect.right-sidebar
   (:require
+   [app.common.data.macros :as dm]
+   [app.common.types.component :as ctk]
    [app.main.refs :as refs]
    [app.main.ui.components.shape-icon :as si]
    [app.main.ui.components.tabs-container :refer [tabs-container tabs-element]]
@@ -48,6 +50,12 @@
 
         libraries      (get-libraries from)
 
+        file              (mf/deref refs/viewer-file)
+        components-v2     (dm/get-in file [:data :options :components-v2])
+        main-instance?    (if components-v2
+                            (ctk/main-instance? first-shape)
+                            true)
+
         handle-change-tab
         (mf/use-callback
          (mf/deps from on-change-section)
@@ -79,7 +87,7 @@
              [:span.tool-window-bar-title (tr "inspect.tabs.code.selected.multiple" (count shapes))]]
             [:*
              [:span.tool-window-bar-icon
-              [:& si/element-icon {:shape first-shape}]]
+              [:& si/element-icon {:shape first-shape :main-instance? main-instance?}]]
              ;; Execution time translation strings:
              ;;   inspect.tabs.code.selected.circle
              ;;   inspect.tabs.code.selected.component

frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs

@@ -98,7 +98,7 @@
          (mf/deps component dragging* selected selected-full selected-paths)
          (fn [event]
            (cmm/on-drop-asset event component dragging* selected selected-full
-                              selected-paths dwl/rename-component)))
+                              selected-paths dwl/rename-component-and-main-instance)))
 
         on-drag-enter
         (mf/use-fn
@@ -236,7 +236,7 @@
         (mf/use-fn
          (mf/deps dragging* prefix selected-paths selected-full)
          (fn [event]
-           (cmm/on-drop-asset-group event dragging* prefix selected-paths selected-full dwl/rename-component)))]
+           (cmm/on-drop-asset-group event dragging* prefix selected-paths selected-full dwl/rename-component-and-main-instance)))]
 
     (if ^boolean new-css-system
       [:div {:class (dom/classnames (css :component-group) true)
@@ -504,7 +504,7 @@
                         (filter #(if multi-components?
                                    (contains? selected (:id %))
                                    (= current-component-id (:id %))))
-                        (map #(dwl/rename-component
+                        (map #(dwl/rename-component-and-main-instance
                                (:id %)
                                (cmm/add-group % group-name)))))
              (st/emit! (dwu/commit-undo-transaction undo-id)))))
@@ -519,7 +519,7 @@
              (run! st/emit!
                    (->> components
                         (filter #(str/starts-with? (:path %) path))
-                        (map #(dwl/rename-component
+                        (map #(dwl/rename-component-and-main-instance
                                (:id %)
                                (cmm/rename-group % path last-path)))))
              (st/emit! (dwu/commit-undo-transaction undo-id)))))
@@ -550,7 +550,7 @@
              (run! st/emit!
                    (->> components
                         (filter #(str/starts-with? (:path %) path))
-                        (map #(dwl/rename-component (:id %) (cmm/ungroup % path)))))
+                        (map #(dwl/rename-component-and-main-instance (:id %) (cmm/ungroup % path)))))
              (st/emit! (dwu/commit-undo-transaction undo-id)))))
 
         on-drag-start

frontend/src/app/main/ui/workspace/sidebar/layer_name.cljs

@@ -39,6 +39,8 @@
         shape-for-rename (mf/deref lens:shape-for-rename)
         new-css-system   (mf/use-ctx ctx/new-css-system)
 
+        has-path?        (str/includes? shape-name "/")
+
         start-edit
         (mf/use-fn
          (mf/deps disabled-double-click on-start-edit shape-id)
@@ -99,11 +101,14 @@
        {:class (if ^boolean new-css-system
                  (stl/css-case
                   :element-name true
+                  :left-ellipsis has-path?
                   :selected selected?
                   :hidden hidden?
                   :type-comp type-comp
                   :type-frame type-frame)
-                 (stl/css* :element-name))
+                 (stl/css-case
+                  "element-name" true
+                  :left-ellipsis has-path?))
         :style {"--depth" depth "--parent-size" parent-size}
         :ref ref
         :on-double-click start-edit}