wip fix select component

app/web/src/nova/ed/logic/tree/sync-walk.tsx

@@ -5,7 +5,7 @@ import { MContent } from "../../../../utils/types/general";
 import { IItem, MItem } from "../../../../utils/types/item";
 import { FNCompDef, FNComponent } from "../../../../utils/types/meta-fn";
 import { MSection } from "../../../../utils/types/section";
-import { EdMeta, PG } from "../ed-global";
+import { EdMeta, PG, active } from "../ed-global";
 import { loadCompSnapshot } from "./sync-walk-comp";
 import {
   ensureMItemProps,
@@ -154,6 +154,7 @@ export const syncWalkMap = (
           ref_ids = {};
         }
         const old_id = item.id;
+
         mapItem(mcomp, item, ref_ids);
         item.originalId = item.id;
         item.id = old_id;

app/web/src/nova/ed/panel/header/mid/add-item.tsx

@@ -33,7 +33,8 @@ export const EdAddItem = () => {
     if (mitem) {
       if (meta.item.type === 'text'
         || (meta.item.type === 'item' && meta.item.component?.id)) {
-        const parent = getMetaById(p, meta.parent_item.id);
+        const parent_id = meta.parent_item.id;
+        const parent = getMetaById(p, parent_id === 'root' ? meta.item.id : parent_id);
         if (!parent) {
           alert('Failed to add text!');
         } else {

app/web/src/nova/ed/panel/header/mid/add-text.tsx

@@ -35,7 +35,8 @@ export const EdAddText = () => {
     if (mitem) {
       if (meta.item.type === 'text'
         || (meta.item.type === 'item' && meta.item.component?.id)) {
-        const parent = getMetaById(p, meta.parent_item.id);
+        const parent_id = meta.parent_item.id;
+        const parent = getMetaById(p, parent_id === 'root' ? meta.item.id : parent_id);
         if (!parent) {
           alert('Failed to add text!');
         } else {

app/web/src/nova/ed/panel/main/main.tsx

@@ -42,49 +42,104 @@ export const EdMain = () => {
             bind={({ render }) => {
               p.page.render = render;
             }}
-            hidden={(item) => {
+            hidden={(meta) => {
-              if (item.hidden) return true;
+              if (meta.item.hidden) return true
               return false;
             }}
             hover={{
-              get(item) {
+              get(meta) {
-                return active.hover_id === item.id;
+                const item = meta.item;
+
+                if (item.originalId === active.hover_id || item.id === active.hover_id)
+                  return true;
+
+                return false
               },
-              set(id) {
+              set(meta) {
-                active.hover_id = id;
+
+                if (meta.parent_mcomp) {
+                  const id = meta.parent_mcomp.mitem.get('id');
+
+                  if (active.instance.item_id !== id) {
+                    const original_id = meta.parent_mcomp.mitem.get('originalId');
+
+                    if (active.comp_id && original_id) {
+                      active.item_id = original_id;
+                    } else if (id) {
+                      active.item_id = id;
+                    }
+
+                    p.render();
+                    p.page.render();
+                    return;
+                  }
+                }
+
+                if (active.comp_id) {
+                  if (meta.item.originalId) {
+                    active.hover_id = meta.item.originalId;
+                  } else {
+                    console.error('Failed to hover, original id not found');
+                  }
+                } else {
+                  active.hover_id = meta.item.id
+                }
+
                 p.render();
                 p.page.render();
               },
             }}
             active={{
-              get(item) {
+              get(meta) {
-                return active.item_id === item.id;
+                const item = meta.item;
+
+                if (item.originalId === active.item_id || item.id === active.item_id)
+                  return true;
+
+                return false
               },
-              set(id) {
+              set(meta) {
+
+                if (meta.parent_mcomp) {
+                  const id = meta.parent_mcomp.mitem.get('id');
+
+                  if (active.instance.item_id !== id) {
+                    const original_id = meta.parent_mcomp.mitem.get('originalId');
+
+                    if (active.comp_id && original_id) {
+                      active.item_id = original_id;
+                    } else if (id) {
                       active.item_id = id;
-
-
-                const meta = getMetaById(p, id);
-                if (meta.item.type === 'text') {
-                  setTimeout(async () => {
-                    await waitUntil(() => document.querySelector(`.v-text-${id}`))
-                    const vtext = document.querySelector(`.v-text-${id}`) as HTMLInputElement;
-                    if (vtext)
-                      vtext.focus()
-                  })
                     }
+
+                    p.render();
+                    p.page.render();
+                    return;
+                  }
+                }
+
+                if (active.comp_id) {
+                  if (meta.item.originalId) {
+                    active.item_id = meta.item.originalId;
+                  } else {
+                    console.error('Failed to select, original id not found');
+                  }
+                } else {
+                  active.item_id = meta.item.id
+                }
+
                 p.render();
                 p.page.render();
               },
-              text(item, className) {
+              text(meta) {
+                const { item } = meta;
                 if (active.text.id !== item.id) {
                   active.text.id = item.id;
-                  active.text.content = item.html;
+                  active.text.content = item.html || "";
                 }
 
-
                 return <div
-                  className={cx(className, `v-text-${item.id} outline-none`)}
+                  className={cx(`v-text-${item.id} outline-none`)}
                   contentEditable
                   autoFocus
                   spellCheck={false}
@@ -99,7 +154,7 @@ export const EdMain = () => {
                       meta.mitem.set('html', active.text.content)
                     }
                   }}
-                  dangerouslySetInnerHTML={{ __html: item.html }}></div>
+                  dangerouslySetInnerHTML={{ __html: item.html || "" }}></div>
               }
             }}
           />

app/web/src/nova/ed/panel/tree/node/item/action/del.tsx

@@ -1,9 +1,11 @@
 import { IContent } from "../../../../../../../utils/types/general";
 import { PG } from "../../../../../logic/ed-global";
-import { treeRebuild } from "../../../../../logic/tree/build";
+import { getMetaById, treeRebuild } from "../../../../../logic/tree/build";
 
 export const edActionDelete = async (p: PG, item: IContent) => {
-  const mitem = p.page.meta[item.id].mitem;
+  const meta = getMetaById(p, item.id);
+  if (meta) {
+    const mitem = meta.mitem;
     if (mitem) {
       mitem.parent.forEach((e, k) => {
         if (e == mitem) {
@@ -12,4 +14,5 @@ export const edActionDelete = async (p: PG, item: IContent) => {
       });
       await treeRebuild(p);
     }
+  }
 };

app/web/src/nova/ed/panel/tree/node/item/name.tsx

@@ -74,7 +74,7 @@ export const EdTreeName = ({
       ) : (
         <div className="flex flex-col">
           <Name name={node.text} is_jsx_prop={is_jsx_prop} />
-          {/* <div className={"text-[11px] text-gray-500 -mt-1"}>{item.id}</div> */}
+          <div className={"text-[9px] text-gray-500 -mt-1"}>{item.id} - {item.originalId}</div>
         </div>
       )}
     </div>

app/web/src/nova/ed/panel/tree/node/key-map.tsx

@@ -156,7 +156,10 @@ export const treeItemKeyMap = (p: PG, prm: RenderParams, item: IContent) => {
     if (e.key === "Backspace" || e.key === "Delete") {
       let last = "";
       let found = null as HTMLInputElement | null;
-      p.page.meta[item.id].parent_item.mitem?.get("childs")?.forEach((e) => {
+
+      const meta = getMetaById(p, item.id);
+      if (meta) {
+        meta.parent_item.mitem?.get("childs")?.forEach((e) => {
           if (e.get("id") === item.id) {
             found = document.querySelector(`.tree-${last}`);
           }
@@ -166,9 +169,10 @@ export const treeItemKeyMap = (p: PG, prm: RenderParams, item: IContent) => {
         });
 
         if (!found) {
-        last = p.page.meta[item.id].parent_item.mitem?.get("id") || "";
+          last = meta.parent_item.mitem?.get("id") || "";
           found = document.querySelector(`.tree-${last}`);
         }
+      }
 
       edActionDelete(p, item);
 

app/web/src/nova/view/logic/global.ts

@@ -20,17 +20,17 @@ export const ViewGlobal = {
     api: null as any,
   },
   view: {
-    hidden: undefined as undefined | ((item: IContent) => boolean),
+    hidden: undefined as undefined | ((meta: EdMeta) => boolean),
     active: undefined as
       | undefined
       | {
-        get: (item: IContent) => boolean;
+        get: (meta: EdMeta) => boolean;
-        set: (id: string) => void;
+        set: (meta: EdMeta) => void;
-        text?: (item: IText) => ReactNode
+        text?: (meta: EdMeta) => ReactNode
       },
     hover: undefined as
       | undefined
-      | { get: (item: IContent) => boolean; set: (id: string) => void },
+      | { get: (meta: EdMeta) => boolean; set: (meta: EdMeta) => void },
   },
 };
 

app/web/src/nova/view/render/meta/children.tsx

@@ -1,18 +1,19 @@
 import { FC, Fragment, ReactNode } from "react";
 import { useGlobal } from "web-utils";
-import { IItem } from "../../../../utils/types/item";
+import { EdMeta } from "../../../ed/logic/ed-global";
-import { ISection } from "../../../../utils/types/section";
-import { IText } from "../../../../utils/types/text";
 import { ViewGlobal } from "../../logic/global";
 import { ViewMeta } from "./meta";
 
-export const ViewMetaChildren: FC<{ item: IItem | IText | ISection, className?: string }> = ({
+export const ViewMetaChildren: FC<{
-  item,
+  meta: EdMeta,
+  className?: string
+}> = ({
+  meta,
   className
 }) => {
     const v = useGlobal(ViewGlobal, "VIEW");
     const children: Record<string, ReactNode> = {};
-
+    const item = meta.item;
     if (item.type !== "text") {
       for (const child of item.childs) {
         if (child.id) {
@@ -21,9 +22,9 @@ export const ViewMetaChildren: FC<{ item: IItem | IText | ISection, className?:
       }
     } else {
       if (item.id) {
-      if (v.view.active?.text && v.view.active?.get(item)) {
+        if (v.view.active?.text && v.view.active?.get(meta)) {
           children[item.id] = <Fragment key={item.id}>
-          {v.view.active.text(item)}
+            {v.view.active.text(meta)}
           </Fragment>;
         } else {
           children[item.id] = <span
@@ -35,5 +36,5 @@ export const ViewMetaChildren: FC<{ item: IItem | IText | ISection, className?:
       }
     }
 
-  return <>{Object.values(children)}</>;
+    return <>{item.id}{Object.values(children)}</>;
-};
+  };

app/web/src/nova/view/render/meta/meta.tsx

@@ -24,7 +24,7 @@ export const ViewMeta: FC<{ id: string; scopeIndex?: Record<string, any> }> = ({
   }
 
   if (item.hidden && v.view.hidden) {
-    if (v.view.hidden(item)) {
+    if (v.view.hidden(meta)) {
       return null;
     }
   }

app/web/src/nova/view/render/meta/render.tsx

@@ -14,14 +14,14 @@ export const ViewMetaRender: FC<{
   const item = meta.item;
 
   if (meta.is_layout && !v.layout.show) {
-    return <ViewMetaChildren key={item.id} item={item} />;
+    return <ViewMetaChildren key={item.id} meta={meta} />;
   }
 
   if (!className) {
     _className = produceCSS(item, {
       mode: v.mode,
-      hover: v.view.hover ? v.view.hover.get(item) : undefined,
+      hover: v.view.hover ? v.view.hover.get(meta) : undefined,
-      active: v.view.active ? v.view.active.get(item) : undefined,
+      active: v.view.active ? v.view.active.get(meta) : undefined,
     });
   }
 
@@ -34,7 +34,7 @@ export const ViewMetaRender: FC<{
           ? (e) => {
             e.stopPropagation();
             e.preventDefault();
-              v.view.hover?.set(item.id);
+            v.view.hover?.set(meta);
           }
           : props?.onPointerOver
       }
@@ -43,12 +43,12 @@ export const ViewMetaRender: FC<{
           ? (e) => {
             e.stopPropagation();
             e.preventDefault();
-              v.view.active?.set(item.id);
+            v.view.active?.set(meta);
           }
           : props?.onClick
       }
     >
-      <ViewMetaChildren item={item} />
+      <ViewMetaChildren meta={meta} />
     </div>
   );
 };

app/web/src/nova/view/render/meta/script.tsx

@@ -23,10 +23,10 @@ export const ViewMetaScript: FC<{
   const w = window as any;
   const className = produceCSS(item, {
     mode: v.mode,
-    hover: v.view.hover ? v.view.hover.get(item) : undefined,
+    hover: v.view.hover ? v.view.hover.get(meta) : undefined,
-    active: v.view.active ? v.view.active.get(item) : undefined,
+    active: v.view.active ? v.view.active.get(meta) : undefined,
   });
-  const children = <ViewMetaChildren key={item.id} item={item} />;
+  const children = <ViewMetaChildren key={item.id} meta={meta} />;
   let args = {};
 
   if (js && meta) {
@@ -86,14 +86,14 @@ export const ViewMetaScript: FC<{
             ? (e: any) => {
               e.stopPropagation();
               e.preventDefault();
-              v.view.hover?.set(item.id);
+              v.view.hover?.set(meta);
             }
             : undefined,
           onClick: v.view.active
             ? (e: any) => {
               e.stopPropagation();
               e.preventDefault();
-              v.view.active?.set(item.id);
+              v.view.active?.set(meta);
             }
             : undefined,
         },

app/web/src/nova/view/view.tsx

@@ -1,8 +1,7 @@
 import { FC, ReactNode, Suspense } from "react";
 import { useGlobal } from "web-utils";
-import { IContent } from "../../utils/types/general";
-import { IText } from "../../utils/types/text";
 import { Loading } from "../../utils/ui/loading";
+import { EdMeta } from "../ed/logic/ed-global";
 import { ViewGlobal } from "./logic/global";
 import { vInit } from "./logic/init";
 import { newLoadCode } from "./logic/load-code-new";
@@ -22,12 +21,12 @@ type ViewProp = {
   layout?: { show: boolean };
   isEditor?: boolean;
   bind?: (arg: { render: () => void }) => void;
-  hidden?: (item: IContent) => boolean;
+  hidden?: (item: EdMeta) => boolean;
-  hover?: { get: (item: IContent) => boolean; set: (id: string) => void };
+  hover?: { get: (item: EdMeta) => boolean; set: (meta: EdMeta) => void };
   active?: {
-    get: (item: IContent) => boolean;
+    get: (item: EdMeta) => boolean;
-    set: (id: string) => void;
+    set: (item: EdMeta) => void;
-    text?: (item: IText, className: string) => ReactNode
+    text?: (item: EdMeta) => ReactNode
   };
 };