wip fix selection

app/web/src/nova/ed/logic/comp/comp-meta.ts

@@ -0,0 +1,12 @@
+import { IMeta, PG, active } from "../ed-global";
+
+export const getCompMeta = (p: PG, id: string, note?: string) => {
+  if (active.comp_id) {
+    const pmeta = p.page.meta[id];
+    const cmeta = p.comp.list[active.comp_id].meta[id];
+
+    if (!pmeta && cmeta) {
+      return cmeta;
+    }
+  }
+};

app/web/src/nova/ed/logic/comp/load.tsx

@@ -142,13 +142,6 @@ export const updateComponentMeta = async (
       meta,
       on: {
         visit(m) {
-          if (m.item.originalId) {
-            m.item.id = m.item.originalId;
-            meta[m.item.id] = m;
-            delete meta[m.item.originalId];
-            delete m.item.originalId;
-          }
-
           pushTreeNode(p, m, meta, tree);
 
           if (m.parent) {

app/web/src/nova/ed/panel/main/main-per-item.tsx

@@ -1,6 +1,7 @@
 import { IContent } from "../../../../utils/types/general";
 import { VG } from "../../../vi/render/global";
-import { IMeta, PG, active } from "../../logic/ed-global";
+import { getCompMeta } from "../../logic/comp/comp-meta";
+import { PG, active } from "../../logic/ed-global";
 import { treeRebuild } from "../../logic/tree/build";
 
 type MPIVParam = Parameters<Exclude<VG["visit"], undefined>>;
@@ -58,7 +59,27 @@ export const mainPerItemVisit = (
 
   let is_active: boolean = active.item_id === meta.item.id;
   if (active.comp_id) {
-    is_active = active.item_id === meta.item.originalId;
+    if (meta.parent?.comp_id === active.comp_id) {
+      const active_meta = getCompMeta(p, active.item_id, "is_active");
+      if (active_meta) {
+        if (active_meta.item.originalId === meta.item.originalId) {
+          is_active = true;
+        } else if (active_meta.item.id === meta.item.originalId) {
+          is_active = true;
+        }
+      }
+    } else {
+      is_active = active.item_id === meta.item.originalId;
+    }
+  }
+
+  let is_component = false;
+  if (
+    !is_active &&
+    active.comp_id &&
+    meta.item.component?.id === active.comp_id
+  ) {
+    is_component = true;
   }
 
   parts.props.className = cx(
@@ -76,20 +97,24 @@ export const mainPerItemVisit = (
           right: 0;
           border: 2px solid #1c88f3;
         }
+      `,
+    is_component &&
+      css`
+        &::after {
+          content: " ";
+          pointer-events: none;
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          border: 2px solid #641cf3;
+        }
       `
   );
   parts.props.onPointerOver = (e) => {
     e.stopPropagation();
-
+    active.hover.id = meta.item.id;
-    if (active.comp_id) {
-      if (meta.parent?.comp_id === active.comp_id && meta.item.originalId) {
-        active.hover.id = meta.item.originalId;
-      } else {
-        active.hover.id = meta.item.id;
-      }
-    } else {
-      active.hover.id = meta.item.id;
-    }
     active.hover.renderMain();
     active.hover.renderTree();
   };
@@ -108,88 +133,123 @@ export const mainPerItemVisit = (
       return;
     }
 
-    const m = getOuterMeta(
+    if (meta.parent?.comp_id) {
-      {
+      if (active.comp_id) {
-        meta: active.comp_id ? p.comp.list[active.comp_id].meta : p.page.meta,
+        if (active.comp_id === meta.parent?.comp_id) {
-      },
+          if (meta.item.originalId) {
-      meta
+            if (
-    );
+              meta.item.component?.id &&
-    let found = false;
+              meta.parent.comp_id === active.comp_id
-    if (m) {
+            ) {
-      if (m.item.component?.id && active.comp_id !== m.item.component.id) {
+              const cmeta = p.comp.list[active.comp_id].meta;
-        if (active.item_id === m.item.id) {
+              for (const val of Object.values(cmeta)) {
-          active.comp_id = m.item.component.id;
+                if (
-          found = true;
+                  val.item.originalId &&
-        } else {
+                  val.item.originalId === meta.item.originalId
-        }
+                ) {
-      } else {
+                  if (active.item_id !== val.item.id) {
-        if (active.comp_id && m && m.parent?.instance_id) {
+                    active.item_id = val.item.id;
-          const meta = p.page.meta[m.parent.instance_id];
+                  } else {
-          const comp_id = meta.item.component?.id;
+                    active.instance.comp_id = active.comp_id;
-          if (meta.item.originalId && comp_id) {
+                    active.instance.item_id = active.item_id;
-            if (active.item_id === meta.item.originalId) {
+                    active.comp_id = meta.item.component.id;
-              if (comp_id) {
+                    active.item_id = val.item.originalId;
-                active.instance.item_id = meta.item.originalId;
+                  }
-                active.instance.comp_id = active.comp_id;
-
-                active.comp_id = comp_id || "";
-                const root = p.comp.list[comp_id].tree.find(
-                  (e) => e.parent === "root"
-                );
-                if (root && typeof root.id === "string") {
-                  active.item_id = root.id || "";
                 }
+              }
+            } else if (meta.item.originalId !== active.item_id) {
+              active.item_id = meta.item.originalId;
+            }
+          }
+        } else {
+          if (
+            meta.item.component?.id === active.comp_id &&
+            meta.item.originalId
+          ) {
+            active.item_id = meta.item.originalId;
+          } else if (meta.parent.instance_id) {
+            const pmeta = p.page.meta[meta.parent.instance_id];
 
-                p.render();
+            if (pmeta.parent?.comp_id === active.comp_id) {
+              const cmeta = p.comp.list[active.comp_id].meta;
+
+              for (const val of Object.values(cmeta)) {
+                if (
+                  val.item.originalId &&
+                  val.item.originalId === pmeta.item.originalId
+                ) {
+                  if (active.item_id !== val.item.id) {
+                    active.item_id = val.item.id;
+                  } else if (pmeta.item.component) {
+                    active.instance.comp_id = active.comp_id;
+                    active.instance.item_id = active.item_id;
+                    active.comp_id = pmeta.item.component?.id;
+                    active.item_id = val.item.originalId;
+                  }
+                }
               }
             } else {
+              active.comp_id = meta.parent.comp_id;
+              active.item_id = meta.parent.id;
+            }
+          }
+        }
+      } else {
+        if (meta.parent.instance_id) {
+          let parent = meta.parent;
+
+          if (
+            parent.comp_id &&
+            parent.instance_id &&
+            p.page.meta[parent.instance_id] &&
+            !p.page.meta[parent.instance_id].mitem
+          ) {
+            while (parent.comp_id && parent.instance_id) {
+              const par = p.page.meta[parent.instance_id];
+              if (par) {
+                if (par.mitem) {
+                  if (active.item_id !== par.item.id) {
+                    active.item_id = par.item.id;
+                  } else {
+                    active.instance.comp_id = active.comp_id;
+                    active.instance.item_id = active.item_id;
+                    active.comp_id = parent.comp_id;
+                    const root_id = p.comp.list[parent.comp_id]?.tree.find(
+                      (e) => e.parent === "root"
+                    )?.id as string;
+                    if (root_id) {
+                      active.item_id = root_id;
+                    }
+                  }
+                  break;
+                }
+                parent = par.parent as any;
+              } else break;
+            }
+          } else {
+            if (active.item_id !== meta.parent.instance_id) {
+              active.item_id = meta.parent.instance_id;
+            } else if (parent.comp_id && meta.item.originalId) {
+              active.instance.comp_id = active.comp_id;
+              active.instance.item_id = active.item_id;
+              active.comp_id = parent.comp_id;
               active.item_id = meta.item.originalId;
-              found = true;
             }
           }
         }
       }
-    }
+    } else {
-
-    if (!found) {
       if (active.comp_id) {
-        if (meta.item.component?.id === active.comp_id) {
+        if (!meta.parent?.comp_id) {
-          active.item_id = meta.item.id;
+          active.comp_id = "";
-        } else if (m && m.parent?.comp_id === active.comp_id) {
+        } else if (meta.item.originalId) {
-          if (m.item.originalId) {
+          active.item_id = meta.item.originalId;
-            active.item_id = m.item.originalId;
-          }
-        } else if (meta.parent?.comp_id === active.comp_id) {
-          active.item_id = meta.item.originalId || meta.item.id;
-        } else if (m) {
-          if (m.mitem) {
-            active.comp_id = "";
-          } else if (m.parent?.comp_id && m.parent?.instance_id) {
-            const pmeta = p.page.meta[m.parent.instance_id];
-            if (pmeta.item.originalId) {
-              active.item_id = pmeta.item.originalId;
-            }
-          }
         }
       } else {
-        if (m) {
+        active.item_id = meta.item.id;
-          active.item_id = m.item.id;
-        }
       }
     }
     active.hover.id = "";
     p.render();
   };
 };
-
-const getOuterMeta = (p: { meta: Record<string, IMeta> }, meta: IMeta) => {
-  let cur: undefined | IMeta = meta;
-
-  if (cur.jsx_prop) return meta;
-
-  while (cur?.parent?.instance_id && p.meta[cur?.parent?.instance_id]) {
-    cur = p.meta[cur?.parent?.instance_id];
-  }
-
-  if (cur) return cur;
-};

app/web/src/nova/ed/panel/side/prop-instance/prop-label.tsx

@@ -3,7 +3,7 @@ import { Tooltip } from "../../../../../utils/ui/tooltip";
 
 export const EdPropLabel: FC<{ name: string }> = ({ name }) => {
   const label = (
-    <div className="px-1">
+    <div className="px-1 flex items-center">
       <div className=" w-[70px] overflow-hidden text-ellipsis whitespace-nowrap flex items-center">
         {name}
       </div>

app/web/src/nova/ed/panel/side/prop-instance/prop-option.tsx

@@ -187,7 +187,7 @@ else metaOptions = resOpt;
           </>
         )}
         {mode === "button" && (
-          <div className="flex-1 pt-1 px-2 flex flex-wrap justify-end space-x-1">
+          <div className="flex-1 pt-1 px-1 flex flex-wrap justify-end space-x-1">
             {Array.isArray(metaOptions) &&
               metaOptions.map((item, idx) => {
                 return (

app/web/src/nova/ed/panel/tree/node/render.tsx

@@ -9,6 +9,7 @@ import { EdTreeIndent } from "./item/indent";
 import { EdTreeName } from "./item/name";
 import { treeItemKeyMap } from "./key-map";
 import { IContent } from "../../../../../utils/types/general";
+import { getCompMeta } from "../../../logic/comp/comp-meta";
 
 export const nodeRender: NodeRender<IMeta> = (node, prm) => {
   const p = useGlobal(EDGlobal, "EDITOR");
@@ -52,6 +53,16 @@ export const nodeRender: NodeRender<IMeta> = (node, prm) => {
     }
   }
 
+  let is_hover = false;
+  if (active.hover.id === item.id) {
+    is_hover = true;
+  }
+
+  let is_active = false;
+  if (active.item_id === item.id) {
+    is_active = true;
+  }
+
   return (
     <div
       ref={(el) => {
@@ -71,10 +82,8 @@ export const nodeRender: NodeRender<IMeta> = (node, prm) => {
             }
           }
         `,
-        active.item_id === item.id
+        is_active ? ["bg-blue-100"] : [isComponent && `bg-purple-50`],
-          ? ["bg-blue-100"]
+        is_hover && "bg-blue-50"
-          : [isComponent && `bg-purple-50`],
-        active.hover.id === item.id && "bg-blue-50"
       )}
       onKeyDown={treeItemKeyMap(p, prm, item)}
       onContextMenu={(event) => {