wip fix compo

This commit is contained in:
Rizky 2024-01-04 22:18:51 +07:00
parent a353226816
commit b8808d679a
14 changed files with 84 additions and 73 deletions

View File

@ -94,7 +94,7 @@ export const reloadPage = async (p: PG, page_id: string, note: string) => {
Buffer.from(compress(diff_local))
);
p.ui.syncing = false;
p.render();
// p.render();
}
};

View File

@ -18,6 +18,7 @@ export const assignMitem = (arg: {
}) => {
const { p, m, root, mitem, meta } = arg;
console.log(m.item.name, m.item.id);
if (m.jsx_prop && m.parent?.instance_id) {
const instance_meta = meta[m.parent?.instance_id];
if (instance_meta) {
@ -59,32 +60,25 @@ export const assignMitem = (arg: {
}
}
// 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 (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) {
// if (mprop) {
// const pmeta = meta[v.content.id];
// if (pmeta) {
// pmeta.mitem = mprop.get("content");
// }
// } else {
// const mprops = m.mitem?.get("component")?.get("props");
// if (mprops) {
// arg.new_prop_jsx(m, mprops, prop_name, v);
// }
// }
// }
// }
// }
// }
// });
if (v.content) {
if (mprop) {
const pmeta = meta[v.content.id];
if (pmeta) {
pmeta.mitem = mprop.get("content");
}
} else {
const mprops = m.mitem?.get("component")?.get("props");
if (mprops) {
arg.new_prop_jsx(m, mprops, prop_name, v);
}
}
}
}
}
}
}
};

View File

@ -49,7 +49,6 @@ export const treeRebuild = async (p: PG, arg?: { note?: string }) => {
if (!is_layout) {
if (m.parent?.instance_id !== m.parent?.id || m.jsx_prop) {
pushTreeNode(p, m, meta, p.page.tree);
} else {
}
assignMitem({
@ -59,14 +58,13 @@ export const treeRebuild = async (p: PG, arg?: { note?: string }) => {
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);
});
console.log(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);
// });
},
});
}

View File

@ -1,5 +1,5 @@
import { NodeModel } from "@minoru/react-dnd-treeview";
import { IMeta, PG, active } from "../../ed-global";
import { IMeta, PG } from "../../ed-global";
export const pushTreeNode = (
p: PG,
@ -43,7 +43,7 @@ export const pushTreeNode = (
tree.push({
id: meta.item.id,
parent: meta.parent?.instance_id || "root",
text: meta.item.name,
text: meta.jsx_prop.name,
data: meta,
});
} else {

View File

@ -109,7 +109,9 @@ export const EdScriptMonaco: FC<{}> = () => {
const model = editor.getModel();
if (!model) {
const nmodel = monaco.editor.createModel(
val,
imports && imports.length > 0
? `${imports}\n/** IMPORT MODULE **/\n${val}`
: val,
"typescript",
monaco.Uri.parse("file:///active.tsx")
);

View File

@ -93,7 +93,6 @@ const extract_import_map = (
added.add(m.item.id);
const ex = extractExport(p, m);
for (const [k, v] of Object.entries(ex)) {
let src = "";
if (v.type === "local") {
@ -105,6 +104,7 @@ export const ${k}: typeof _local & { render: ()=>void } = _local;
src = `export const ${k} = ${v.val}`;
}
if (src) {
addScope(
p,
monaco,
@ -180,7 +180,6 @@ const map_childs = (
);
jprop = comp_map[meta.item.component.id];
//todo: comp prop src: import from page scope
for (const path of jprop.paths) {
for (const m of path) {
if (!jprop.exports[m.item.id]) {

View File

@ -23,6 +23,10 @@ export const EdPropCompTreeItem: FC<{
if (node.id === "root") {
return <></>;
}
let type = "TXT";
if (node.data?.prop.meta?.type === "option") type = "OPT";
else if (node.data?.prop.meta?.type === "content-element") type = "JSX";
return (
<div className="flex items-stretch border-b text-[14px] min-h-[27px]">
<div
@ -74,7 +78,12 @@ export const EdPropCompTreeItem: FC<{
}
className="flex-1 pl-1 hover:bg-blue-100 cursor-pointer items-center flex"
>
{node.text}
<div className="flex items-center justify-between flex-1">
<div>{node.text}</div>
<div className="text-[9px] px-1 border border-slate-400 ml-1 text-slate-500">
{type}
</div>
</div>
</Popover>
)}
<div

View File

@ -18,7 +18,7 @@ export const EdSideStyle: FC<{ meta: IMeta }> = ({ meta }) => {
<div className="flex flex-col text-[12px]">
<div className="flex border-b p-1 h-[28px] items-center bg-slate-50 justify-between select-none">
<div className="flex-1 overflow-hidden mr-2 text-ellipsis whitespace-nowrap">
{item.name}
{meta.jsx_prop?.name || item.name}
</div>
{item.component?.id === active.comp_id && (
<div

View File

@ -86,6 +86,15 @@ export const EdTreeBody = () => {
if (!args.dragSource?.data?.item) return false;
return canDrop(p, args);
}}
canDrag={(node) => {
if (node) {
if (node.data?.jsx_prop?.is_root) {
return false;
}
}
return true;
}}
dragPreviewRender={DragPreview}
placeholderRender={(node, params) => (
<Placeholder node={node} params={params} />

View File

@ -127,7 +127,7 @@ export const EdTreeAction = ({
)}
{comp.id === active.comp_id && (
<>
<Tooltip content="Edit Component">
<Tooltip content="Close Component">
<div
className="flex items-center border border-slate-500 bg-white rounded-sm text-[10px] px-[2px] cursor-pointer hover:bg-purple-100 hover:border-purple-600"
onClick={(e) => {

View File

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

View File

@ -11,7 +11,7 @@ export const genComp = (p: GenMetaP, arg: GenMetaArg) => {
if (p.on?.visit_component) {
p.on.visit_component(item);
}
if (!item_comp) {
return;
}
@ -48,34 +48,16 @@ export const genComp = (p: GenMetaP, arg: GenMetaArg) => {
},
};
if (p.on?.visit) {
p.on.visit(meta, item);
}
if (item.id) {
if (p.set_meta !== false) {
p.meta[item.id] = meta;
}
}
if (p.on?.visit) {
p.on.visit(meta, item);
}
for (const child of Object.values(item.childs)) {
if (child.name.startsWith("jsx:")) continue;
genMeta(
{ ...p, mode: "comp" },
{
item: child,
is_root: false,
parent: {
item,
instance_id: item.id,
root_instances: instances,
comp: item_comp,
},
}
);
}
walkProp({
item,
item_comp: item_comp,
@ -85,7 +67,9 @@ export const genComp = (p: GenMetaP, arg: GenMetaArg) => {
if (prop.meta?.type === "content-element" && comp_id) {
if (prop.content) {
genMeta(
prop.content.name = name;
genMeta(
{ ...p },
{
item: prop.content,
@ -107,6 +91,25 @@ export const genComp = (p: GenMetaP, arg: GenMetaArg) => {
}
},
});
for (const child of Object.values(item.childs)) {
if (child.name.startsWith("jsx:")) continue;
genMeta(
{ ...p, mode: "comp" },
{
item: child,
is_root: false,
parent: {
item,
instance_id: item.id,
root_instances: instances,
comp: item_comp,
},
}
);
}
}
}
};

View File

@ -35,7 +35,7 @@ export const genMeta = (p: GenMetaP, arg: GenMetaArg) => {
p.meta[meta.item.id] = meta;
}
}
if (item.childs) {
for (const [_, v] of Object.entries(item.childs)) {
const carg: GenMetaArg = {

View File

@ -23,8 +23,6 @@ export const viEvalScript = (
if (vi.visit) vi.visit(meta, parts);
const mhash = hash_sum(flatten(passprop));
if (!meta.script) {
meta.script = {
passprop,
@ -76,5 +74,4 @@ ${meta.item.adv?.jsBuilt || ""}
fn(...Object.values(arg));
updatePropScope(meta, passprop);
return mhash;
};