From 11ed7390c57ee83b52bb38a24e2636cca2e4fe5f Mon Sep 17 00:00:00 2001 From: Rizky Date: Fri, 19 Jan 2024 11:04:07 +0800 Subject: [PATCH] wip fix --- app/web/src/nova/ed/logic/comp/load.tsx | 56 ++++++++++--------- .../src/nova/ed/logic/tree/assign-mitem.ts | 3 +- app/web/src/nova/ed/logic/tree/build.tsx | 1 - .../nova/ed/logic/tree/build/push-tree.tsx | 1 + .../src/nova/ed/panel/side/prop-instance.tsx | 20 +++---- app/web/src/nova/ed/panel/tree/body.tsx | 1 - .../src/nova/ed/panel/tree/node/item/name.tsx | 10 +++- .../src/nova/ed/panel/tree/node/render.tsx | 7 +-- app/web/src/nova/vi/meta/comp.tsx | 3 + .../src/nova/vi/meta/comp/init-comp-load.tsx | 35 +++++++++++- app/web/src/nova/vi/meta/meta.ts | 1 + app/web/src/utils/types/meta.ts | 3 +- 12 files changed, 88 insertions(+), 53 deletions(-) diff --git a/app/web/src/nova/ed/logic/comp/load.tsx b/app/web/src/nova/ed/logic/comp/load.tsx index 3e0b1f0b..21f2e89f 100644 --- a/app/web/src/nova/ed/logic/comp/load.tsx +++ b/app/web/src/nova/ed/logic/comp/load.tsx @@ -8,6 +8,8 @@ import { IMeta, PG } from "../ed-global"; import { treeRebuild } from "../tree/build"; import { pushTreeNode } from "../tree/build/push-tree"; import { isTextEditing } from "../active/is-editing"; +import { assignMitem } from "../tree/assign-mitem"; +import { createId } from "@paralleldrive/cuid2"; export const loadcomp = { timeout: 0 as any, @@ -43,13 +45,11 @@ export const loadCompSnapshot = async ( comp_id: string, snapshot: Uint8Array ) => { - if (p.comp.list[comp_id] && p.comp.list[comp_id].doc) { - return; - } const doc = new Y.Doc() as DComp; Y.applyUpdate(doc as any, decompress(snapshot)); const mitem = doc.getMap("map").get("root"); if (mitem) { + p.comp.loaded[comp_id] = mitem.toJSON() as IItem; if (typeof p.comp.list[comp_id]?.on_update === "function") { doc.off("update", p.comp.list[comp_id].on_update); } @@ -159,30 +159,20 @@ export const updateComponentMeta = async ( visit(m) { pushTreeNode(p, m, meta, tree); - if (m.parent) { - if (m.parent.id === "root") { - if (m.item.id === item.id) { - m.mitem = mitem; - } - } else { - const parent = meta[m.parent.id]; - if (parent && parent.mitem) { - parent.mitem.get("childs")?.forEach((child) => { - const cid = child.get("id"); - if (cid) { - if ( - cid === m.item.id || - (m.instances && - m.instances[cid] && - m.instances[cid][m.item.id]) - ) { - m.mitem = child; - } - } - }); - } - } - } + assignMitem({ + m, + root: item, + mitem, + meta, + new_prop_jsx(meta, mprops, prop_name, prop_val) { + transact.list.push(() => { + const map = new Y.Map(); + if (prop_val.content) prop_val.content.id = createId(); + syncronize(map, prop_val); + mprops.set(prop_name, map as any); + }); + }, + }); }, }, note: "load-comp-scan-meta", @@ -190,7 +180,19 @@ export const updateComponentMeta = async ( { item, ignore_first_component: true } ); + if (transact.list.length > 0) { + p.page.doc?.transact(() => { + for (const fn of transact.list) { + fn(); + } + }); + } + p.comp.loaded[comp_id] = item; return { meta, tree }; }; + +const transact = { + list: [] as (() => void)[], +}; diff --git a/app/web/src/nova/ed/logic/tree/assign-mitem.ts b/app/web/src/nova/ed/logic/tree/assign-mitem.ts index 17fe5535..aff7202d 100644 --- a/app/web/src/nova/ed/logic/tree/assign-mitem.ts +++ b/app/web/src/nova/ed/logic/tree/assign-mitem.ts @@ -4,7 +4,6 @@ import { FMCompDef, FNCompDef } from "../../../../utils/types/meta-fn"; import { IMeta, PG } from "../ed-global"; export const assignMitem = (arg: { - p: PG; m: IMeta; root: IItem; mitem: MItem; @@ -16,7 +15,7 @@ export const assignMitem = (arg: { prop_val: FNCompDef ) => void; }) => { - const { p, m, root, mitem, meta } = arg; + const { m, root, mitem, meta } = arg; if (m.jsx_prop && m.parent?.instance_id) { const instance_meta = meta[m.parent?.instance_id]; diff --git a/app/web/src/nova/ed/logic/tree/build.tsx b/app/web/src/nova/ed/logic/tree/build.tsx index c338b442..cbb93108 100644 --- a/app/web/src/nova/ed/logic/tree/build.tsx +++ b/app/web/src/nova/ed/logic/tree/build.tsx @@ -53,7 +53,6 @@ export const treeRebuild = async (p: PG, arg?: { note?: string }) => { } assignMitem({ - p, m, root: item, mitem, diff --git a/app/web/src/nova/ed/logic/tree/build/push-tree.tsx b/app/web/src/nova/ed/logic/tree/build/push-tree.tsx index 39f9c7b7..6a4bf29a 100644 --- a/app/web/src/nova/ed/logic/tree/build/push-tree.tsx +++ b/app/web/src/nova/ed/logic/tree/build/push-tree.tsx @@ -19,6 +19,7 @@ export const pushTreeNode = ( }); } else { const parent = metas[meta.parent?.id || ""]; + if (parent && parent.mitem) { parent.mitem.get("childs")?.forEach((mitem) => { if (mitem.get("id") === meta.item.id) { diff --git a/app/web/src/nova/ed/panel/side/prop-instance.tsx b/app/web/src/nova/ed/panel/side/prop-instance.tsx index f4759ecc..d79256e4 100644 --- a/app/web/src/nova/ed/panel/side/prop-instance.tsx +++ b/app/web/src/nova/ed/panel/side/prop-instance.tsx @@ -3,7 +3,7 @@ import { useGlobal, useLocal } from "web-utils"; import { IItem } from "../../../../utils/types/item"; import { FMCompDef, FNCompDef } from "../../../../utils/types/meta-fn"; import { Menu, MenuItem } from "../../../../utils/ui/context-menu"; -import { EDGlobal, IMeta, active } from "../../logic/ed-global"; +import { EDGlobal, IMeta, PG, active } from "../../logic/ed-global"; import { createEditScript } from "./prop-instance/edit-script"; import { EdPropInstanceCode } from "./prop-instance/prop-code"; import { EdPropInstanceOptions } from "./prop-instance/prop-option"; @@ -20,20 +20,14 @@ export const EdSidePropInstance: FC<{ meta: IMeta }> = ({ meta }) => { let _meta = meta; if (active.comp_id) { - if ( - p.comp.list[active.comp_id] && - p.comp.list[active.comp_id].meta && - meta.item.originalId - ) { - const m = p.comp.list[active.comp_id].meta[meta.item.originalId]; - if (m) { - _meta = m; - } + if (p.comp.list[active.comp_id]) { + _meta = getCompMeta(p, meta); } } const item = _meta?.item as IItem; if (!item) return <>Warning: Item not found; + if (!_meta.mitem) return <>Warning: MItem Not Found; let filtered = [] as { mprop: FMCompDef; cprop: FNCompDef; name: string }[]; const mprops = _meta.mitem?.get("component")?.get("props"); @@ -216,3 +210,9 @@ export const EdSidePropInstance: FC<{ meta: IMeta }> = ({ meta }) => { ); }; + +const getCompMeta = (p: PG, imeta: IMeta) => { + let meta = null as unknown as IMeta; + + return imeta; +}; diff --git a/app/web/src/nova/ed/panel/tree/body.tsx b/app/web/src/nova/ed/panel/tree/body.tsx index 4b7d7fbc..dceb03c5 100644 --- a/app/web/src/nova/ed/panel/tree/body.tsx +++ b/app/web/src/nova/ed/panel/tree/body.tsx @@ -19,7 +19,6 @@ export const EdTreeBody = () => { const local = useLocal({ tree: null as TreeMethods | null }); const TypedTree = DNDTree; - active.hover.renderTree = local.render; expandTreeHook(p, local); let tree: NodeModel[] = []; diff --git a/app/web/src/nova/ed/panel/tree/node/item/name.tsx b/app/web/src/nova/ed/panel/tree/node/item/name.tsx index 4cb669cd..dde73681 100644 --- a/app/web/src/nova/ed/panel/tree/node/item/name.tsx +++ b/app/web/src/nova/ed/panel/tree/node/item/name.tsx @@ -26,6 +26,10 @@ export const EdTreeName = ({ const is_jsx_prop = !!node.data?.jsx_prop?.is_root; const isRenaming = p.ui.tree.rename_id === item.id; + let name = item.name; + if (item.component?.id && p.comp.loaded[item.component.id]) { + name = p.comp.loaded[item.component.id].name; + } return (
{/*
{item.id}
*/} @@ -37,7 +41,7 @@ export const EdTreeName = ({ )} autoFocus spellCheck={false} - defaultValue={local.rename} + value={local.rename} onFocus={(e) => { if (node.data?.jsx_prop?.is_root) { p.ui.tree.rename_id = ""; @@ -97,13 +101,13 @@ export const EdTreeName = ({ } }} onChange={(e) => { - local.rename = e.target.value; + local.rename = e.target.value.replace(/[\W_]+/g, "_"); p.render(); }} /> ) : (
- + {/*
{node.id} - {item.originalId}
*/} diff --git a/app/web/src/nova/ed/panel/tree/node/render.tsx b/app/web/src/nova/ed/panel/tree/node/render.tsx index 7e13aa1b..d813cfb4 100644 --- a/app/web/src/nova/ed/panel/tree/node/render.tsx +++ b/app/web/src/nova/ed/panel/tree/node/render.tsx @@ -4,21 +4,20 @@ import { IContent } from "../../../../../utils/types/general"; import { Loading } from "../../../../../utils/ui/loading"; import { getMetaById } from "../../../logic/active/get-meta"; import { EDGlobal, IMeta, active } from "../../../logic/ed-global"; +import { text_edit } from "../../main/main-per-item"; import { EdTreeAction } from "./item/action"; import { EdTreeCtxMenu } from "./item/ctx-menu"; import { EdTreeIndent } from "./item/indent"; import { EdTreeName } from "./item/name"; import { treeItemKeyMap } from "./key-map"; -import { text_edit } from "../../main/main-per-item"; -import { treeRebuild } from "../../../logic/tree/build"; export const nodeRender: NodeRender = (node, prm) => { const p = useGlobal(EDGlobal, "EDITOR"); const local = useLocal({ rightClick: null as null | React.MouseEvent, }); + if (!node || !node.data) { - console.log("hello", node, prm); return <>; } const item = node.data?.item; @@ -122,9 +121,7 @@ export const nodeRender: NodeRender = (node, prm) => { } active.item_id = item.id; p.ui.tree.search = ""; - treeRebuild(p); p.render(); - p.page.render(); if ((item as IContent).type === "text") { setTimeout(() => { if (document.activeElement?.tagName === "INPUT") { diff --git a/app/web/src/nova/vi/meta/comp.tsx b/app/web/src/nova/vi/meta/comp.tsx index 3d9ecf31..df6ff2d7 100644 --- a/app/web/src/nova/vi/meta/comp.tsx +++ b/app/web/src/nova/vi/meta/comp.tsx @@ -6,6 +6,7 @@ import { simplifyItemChild } from "./simplify"; export const genComp = (p: GenMetaP, arg: GenMetaArg) => { const { item } = arg; + if (item.type === "item" && item.component?.id && arg.parent?.item.id) { let item_comp = p.comps[item.component.id]; if (p.on?.visit_component) { @@ -42,8 +43,10 @@ export const genComp = (p: GenMetaP, arg: GenMetaArg) => { ids: instance, }); } + const meta: IMeta = { item: simplifyItemChild(item), + jsx_prop: arg.jsx_prop, parent: { id: arg.parent.item.id, comp_id: arg.parent?.comp?.component?.id, diff --git a/app/web/src/nova/vi/meta/comp/init-comp-load.tsx b/app/web/src/nova/vi/meta/comp/init-comp-load.tsx index b50cfcae..f4672045 100644 --- a/app/web/src/nova/vi/meta/comp/init-comp-load.tsx +++ b/app/web/src/nova/vi/meta/comp/init-comp-load.tsx @@ -26,10 +26,40 @@ export const initLoadComp = async ( comp_ids.add(id); } } + + if (component?.props) { + for (const [name, prop] of Object.entries(component.props)) { + if (prop.meta?.type === "content-element" && prop.content) { + genMeta( + { + ...p, + on: { + visit_component: ({ component }) => { + if (component) { + const { id } = component; + if (!p.comps[id]) { + if (!_loaded || (_loaded && !_loaded.has(id))) { + comp_ids.add(id); + } + } + } + }, + visit(meta, vitem) { + if (opt.visit) opt.visit(meta, vitem, shared); + }, + }, + set_meta: false, + note: "init-load-comp-prop", + }, + { item: prop.content } + ); + } + } + } } }, - visit(meta, item) { - if (opt.visit) opt.visit(meta, item, shared); + visit(meta, vitem) { + if (opt.visit) opt.visit(meta, vitem, shared); }, }, set_meta: false, @@ -52,6 +82,7 @@ export const initLoadComp = async ( for (const id of [...loaded]) { const comp = p.comps[id]; + if (comp) { await initLoadComp(p, comp, opt, loaded); } diff --git a/app/web/src/nova/vi/meta/meta.ts b/app/web/src/nova/vi/meta/meta.ts index 0fb86bf4..aad56956 100644 --- a/app/web/src/nova/vi/meta/meta.ts +++ b/app/web/src/nova/vi/meta/meta.ts @@ -5,6 +5,7 @@ import { simplifyItemChild } from "./simplify"; export const genMeta = (p: GenMetaP, arg: GenMetaArg) => { const item = arg.item as IItem; + if (item.type === "item" && item.component?.id) { if (arg.ignore_first_component !== true) { genComp(p, arg); diff --git a/app/web/src/utils/types/meta.ts b/app/web/src/utils/types/meta.ts index ba9372e2..6640eb31 100644 --- a/app/web/src/utils/types/meta.ts +++ b/app/web/src/utils/types/meta.ts @@ -7,13 +7,12 @@ import { FMDimension, FMFont, FMLayout, - FMLinkTag, FMPadding, FNBackground, FNBorder, FNDimension, FNFont, - FNPadding, + FNPadding } from "./meta-fn"; export type MetaItem = {