From 32be6a806e0ac7b2fd0f0276b8f8466e4f1954f6 Mon Sep 17 00:00:00 2001 From: Rizky Date: Tue, 26 Dec 2023 18:36:04 +0700 Subject: [PATCH] wip fix jsx prop --- app/srv/ws/sync/actions/comp_new.ts | 3 + app/web/src/nova/ed/logic/tree/build.tsx | 68 ++++++++++++++++++- .../nova/ed/logic/tree/build/push-tree.tsx | 25 +++++-- .../src/nova/ed/panel/header/mid/add-text.tsx | 2 + .../ed/panel/side/prop-master/prop-form.tsx | 4 +- .../src/nova/ed/panel/tree/node/render.tsx | 5 +- app/web/src/nova/vi/meta/comp.tsx | 46 ++++++------- app/web/src/nova/vi/meta/comp/instantiate.tsx | 6 ++ app/web/src/nova/vi/meta/comp/walk-prop.tsx | 12 ++-- 9 files changed, 132 insertions(+), 39 deletions(-) diff --git a/app/srv/ws/sync/actions/comp_new.ts b/app/srv/ws/sync/actions/comp_new.ts index 91bd7dee..a3556a4c 100644 --- a/app/srv/ws/sync/actions/comp_new.ts +++ b/app/srv/ws/sync/actions/comp_new.ts @@ -13,6 +13,7 @@ import { loadComponent } from "../editor/load-component"; import { parseJs } from "../editor/parser/parse-js"; import { docs } from "../entity/docs"; import { SyncConnection } from "../type"; +import { createId } from "@paralleldrive/cuid2"; export const comp_new: SAction["comp"]["new"] = async function ( this: SyncConnection, @@ -33,6 +34,8 @@ export const comp_new: SAction["comp"]["new"] = async function ( props: {}, } as FNComponent ); + mitem.set("id", createId()); + mitem.set("originalId", item_id); mitem.set("component", map); mitem.set("childs", new Y.Array()); } diff --git a/app/web/src/nova/ed/logic/tree/build.tsx b/app/web/src/nova/ed/logic/tree/build.tsx index 2cc9aeb0..3f66ddfa 100644 --- a/app/web/src/nova/ed/logic/tree/build.tsx +++ b/app/web/src/nova/ed/logic/tree/build.tsx @@ -1,4 +1,5 @@ import { IItem, MItem } from "../../../../utils/types/item"; +import { FMCompDef, FNCompDef } from "../../../../utils/types/meta-fn"; import { genMeta } from "../../../vi/meta/meta"; import { IMeta, PG, active } from "../ed-global"; import { pushTreeNode } from "./build/push-tree"; @@ -51,22 +52,56 @@ export const treeRebuild = async (p: PG, arg?: { note?: string }) => { } } else { const parent = meta[m.parent.id]; - if (parent.mitem) { parent.mitem.get("childs")?.forEach((child) => { if (child.get("id") === m.item.id) { m.mitem = child; + + if (m.item.component?.props) { + for (const [prop_name, v] of Object.entries( + m.item.component.props + )) { + const mprop = m.mitem + ?.get("component") + ?.get("props") + ?.get(prop_name); + if (v.content && mprop) { + const pmeta = meta[v.content.id]; + if (pmeta) { + pmeta.mitem = mprop.get("content"); + } + } + } + } } }); } } } + + if (m.jsx_prop && m.parent?.instance_id) { + const parent = meta[m.parent?.instance_id]; + if (parent) { + const prop = parent.item.component?.props[m.jsx_prop.name]; + if (prop) { + prop.content = m.item; + } + } + } } }, }, }, { item } ); + + if (transact.list.length > 0) { + p.page.doc?.transact(() => { + for (const fn of transact.list) { + fn(); + } + }); + } } } @@ -101,3 +136,34 @@ export const treeRebuild = async (p: PG, arg?: { note?: string }) => { } } }; + +const transact = { + list: [] as (() => void)[], + propContentFromItem: ( + meta: IMeta, + mitem: MItem, + name: string, + prop: FNCompDef + ) => { + transact.list.push(() => { + const mprops = mitem?.get("component")?.get("props"); + + if (mprops) { + const map = new Y.Map(); + syncronize(map, prop); + mprops.set(name, map as any); + console.log(mprops.get(name)); + const mcontent = mprops.get(name)?.get("content"); + console.log(mcontent); + } + }); + }, + jsxContentFromItem(meta: IMeta, content: IItem, mprop: FMCompDef) { + transact.list.push(() => { + const map = new Y.Map(); + syncronize(map, content); + mprop.set("content", map as any); + meta.mitem = mprop.get("content"); + }); + }, +}; 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 b19583c3..77255785 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 @@ -38,13 +38,24 @@ export const pushTreeNode = ( text: meta.item.name, data: meta, }); - } else if (meta.jsx_prop) { - tree.push({ - id: meta.item.id, - parent: meta.parent?.instance_id || "root", - text: meta.item.name, - data: meta, - }); + } else { + if (meta.jsx_prop) { + tree.push({ + id: meta.item.id, + parent: meta.parent?.instance_id || "root", + text: meta.item.name, + data: meta, + }); + } else { + if (meta.parent.id !== meta.parent.instance_id) { + tree.push({ + id: meta.item.id, + parent: meta.parent?.id || "root", + text: meta.item.name, + data: meta, + }); + } + } } } }; diff --git a/app/web/src/nova/ed/panel/header/mid/add-text.tsx b/app/web/src/nova/ed/panel/header/mid/add-text.tsx index d1994096..cfed6898 100644 --- a/app/web/src/nova/ed/panel/header/mid/add-text.tsx +++ b/app/web/src/nova/ed/panel/header/mid/add-text.tsx @@ -43,6 +43,7 @@ export const EdAddText = () => { let mitem = meta.mitem as MContent; if (mitem) { const item = meta.item as IContent; + if ( item.type === "text" || (item.type === "item" && item.component?.id) @@ -99,6 +100,7 @@ export const EdAddText = () => { } active.item_id = map.get("id") || ""; + p.render(); focus(); } diff --git a/app/web/src/nova/ed/panel/side/prop-master/prop-form.tsx b/app/web/src/nova/ed/panel/side/prop-master/prop-form.tsx index d0ed721c..195a3158 100644 --- a/app/web/src/nova/ed/panel/side/prop-master/prop-form.tsx +++ b/app/web/src/nova/ed/panel/side/prop-master/prop-form.tsx @@ -50,12 +50,12 @@ export const EdPropPopoverForm: FC<{ )} onClick={() => { if (e.type === "content-element") { - mmeta.doc?.transact(() => { + mprop.doc?.transact(() => { mmeta.set("type", e.type as any); if (!mprop.get("content")) { const json = { id: createId(), - name: `jsx-content`, + name: name, type: "item", dim: { w: "full", h: "full" }, childs: [], 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 db983126..b9b365c9 100644 --- a/app/web/src/nova/ed/panel/tree/node/render.tsx +++ b/app/web/src/nova/ed/panel/tree/node/render.tsx @@ -40,7 +40,10 @@ export const nodeRender: NodeRender = (node, prm) => { const props = meta.scope.def?.props; if (props) { const prop = props[prop_name]; - if (prop && prop.visible === true) { + if ( + prop && + (prop.visible === true || !prop.hasOwnProperty("visible")) + ) { hide = false; } } diff --git a/app/web/src/nova/vi/meta/comp.tsx b/app/web/src/nova/vi/meta/comp.tsx index dad5fd1d..415d8c41 100644 --- a/app/web/src/nova/vi/meta/comp.tsx +++ b/app/web/src/nova/vi/meta/comp.tsx @@ -22,6 +22,7 @@ export const genComp = (p: GenMetaP, arg: GenMetaArg) => { let instances: IMeta["instances"] = undefined; const parent_instance = getParentInstance(p, arg, item.id); + instance = parent_instance || {}; instances = !parent_instance ? { [item.id]: instance } : undefined; @@ -68,30 +69,29 @@ export const genComp = (p: GenMetaP, arg: GenMetaArg) => { pcomp, each(name, prop) { const comp_id = item.component?.id; - if ( - prop.meta?.type === "content-element" && - prop.content && - comp_id - ) { - walkChild(prop.content, instance); - genMeta( - { ...p, smeta }, - { - item: prop.content, - is_root: false, - jsx_prop: { - is_root: true, - comp_id, - name, - }, - parent: { - item: meta.item, - instance_id: item.id, - comp: pcomp.comp, - }, - } - ); + if (prop.meta?.type === "content-element" && comp_id) { + if (prop.content) { + walkChild(prop.content, instance); + + genMeta( + { ...p, smeta }, + { + item: prop.content, + is_root: false, + jsx_prop: { + is_root: true, + comp_id, + name, + }, + parent: { + item: meta.item, + instance_id: item.id, + comp: pcomp.comp, + }, + } + ); + } } }, }); diff --git a/app/web/src/nova/vi/meta/comp/instantiate.tsx b/app/web/src/nova/vi/meta/comp/instantiate.tsx index e05178a3..6093827d 100644 --- a/app/web/src/nova/vi/meta/comp/instantiate.tsx +++ b/app/web/src/nova/vi/meta/comp/instantiate.tsx @@ -22,6 +22,11 @@ export const instantiate = (arg: { if (item.component.props[k]) { newitem.component.props[k] = item.component.props[k]; } + + const content = newitem.component.props[k].content; + if (content) { + walkChild(content, ids); + } } } @@ -32,6 +37,7 @@ export const instantiate = (arg: { for (const [k, v] of Object.entries(newitem)) { (item as any)[k] = v; } + }; export const walkChild = ( diff --git a/app/web/src/nova/vi/meta/comp/walk-prop.tsx b/app/web/src/nova/vi/meta/comp/walk-prop.tsx index c70d0973..df16cf7c 100644 --- a/app/web/src/nova/vi/meta/comp/walk-prop.tsx +++ b/app/web/src/nova/vi/meta/comp/walk-prop.tsx @@ -1,3 +1,4 @@ +import { deepClone } from "web-utils"; import { IItem } from "../../../../utils/types/item"; import { FNCompDef } from "../../../../utils/types/meta-fn"; @@ -7,12 +8,13 @@ export const walkProp = (arg: { each: (name: string, prop: FNCompDef) => void; }) => { for (const [k, v] of Object.entries(arg.pcomp.comp.component?.props || {})) { + let prop = deepClone(v); const props = arg.item.component?.props; - let prop = props?.[k]; - if (props) { - if (!props[k]) { - props[k] = v; - prop = v; + if (props && props[k]) { + prop.value = props[k].value; + prop.valueBuilt = props[k].valueBuilt; + if (props[k].content) { + prop.content = props[k].content; } }