midsuit
/
prasi-bun
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip fix

This commit is contained in:
Rizky 2023-12-29 15:05:19 +07:00
parent 647f8831ab
commit f32bdf7d62
21 changed files with 271 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/web/src/nova/ed/ed-base.tsx
View File

@ -39,6 +39,7 @@ export const EdBase = () => {
);
}
return (
<div className="flex flex-col flex-1">
<div className="flex justify-between"></div>

148
app/web/src/nova/ed/logic/tree/assign-mitem.ts
View File

@ -1,73 +1,107 @@
import { TypedMap } from "yjs-types";
import { IItem, MItem } from "../../../../utils/types/item";
import { FMCompDef, FNCompDef } from "../../../../utils/types/meta-fn";
import { IMeta, PG } from "../ed-global";
export const assignMitem = (arg: {
p: PG;
m: IMeta;
item: IItem;
root: IItem;
mitem: MItem;
meta: Record<string, IMeta>;
new_prop_jsx: (
meta: IMeta,
mprop: TypedMap<Record<string, FMCompDef>>,
prop_name: string,
prop_val: FNCompDef
) => void;
}) => {
const { p, m, item, mitem, meta } = arg;
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.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");
}
}
}
}
}
});
}
}
}
const { p, m, root, mitem, meta } = arg;
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;
}
}
}
if (m.parent?.instance_id && m.parent?.instance_id === m.parent?.id) {
const parent = meta[m.parent?.instance_id];
if (parent.item.component?.id) {
const lcomp = p.comp.list[parent.item.component.id];
if (lcomp) {
const mcomp = lcomp.doc.getMap("map").get("root");
if (mcomp) {
mcomp.get("childs")?.forEach((e) => {
if (e.get("id") === m.item.originalId) {
m.mitem = e;
}
});
const instance_meta = meta[m.parent?.instance_id];
if (instance_meta) {
if (m.jsx_prop.is_root) {
const prop = instance_meta.item.component?.props[m.jsx_prop.name];
if (prop) {
prop.content = m.item;
}
}
}
}
if (m.parent) {
if (m.parent.id === "root") {
if (m.item.id === root.id) {
m.mitem = mitem;
}
} else {
const parent = meta[m.parent.id];
if (parent.mitem) {
if (m.jsx_prop?.is_root === true) {
const mprops = parent.mitem.get("component")?.get("props");
if (mprops) {
const mprop = mprops.get(m.jsx_prop.name);
if (mprop) {
const mcontent = mprop.get("content");
if (mcontent) {
m.mitem = mcontent;
}
}
}
} else {
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) {
// 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 (m.parent?.instance_id && m.parent?.instance_id === m.parent?.id) {
// const parent = meta[m.parent?.instance_id];
// if (parent.item.component?.id) {
// const lcomp = p.comp.list[parent.item.component.id];
// if (lcomp) {
// const mcomp = lcomp.doc.getMap("map").get("root");
// if (mcomp) {
// mcomp.get("childs")?.forEach((e) => {
// if (e.get("id") === m.item.originalId) {
// m.mitem = e;
// }
// });
// }
// }
// }
// }

49
app/web/src/nova/ed/logic/tree/build.tsx
View File

@ -1,3 +1,4 @@
import { createId } from "@paralleldrive/cuid2";
import { IItem, MItem } from "../../../../utils/types/item";
import { FMCompDef, FNCompDef } from "../../../../utils/types/meta-fn";
import { genMeta } from "../../../vi/meta/meta";
@ -40,11 +41,28 @@ export const treeRebuild = async (p: PG, arg?: { note?: string }) => {
on: {
async visit(m) {
if (!is_layout) {
if (m.parent?.instance_id !== m.parent?.id) {
if (m.parent?.instance_id !== m.parent?.id || m.jsx_prop) {
pushTreeNode(p, m, meta, p.page.tree);
} else {
}
assignMitem({ p, m, item, mitem, meta });
assignMitem({
p,
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);
});
},
});
}
},
},
@ -96,31 +114,4 @@ 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");
});
},
};

2
app/web/src/nova/ed/logic/tree/build/push-tree.tsx
View File

@ -39,7 +39,7 @@ export const pushTreeNode = (
data: meta,
});
} else {
if (meta.jsx_prop) {
if (meta.jsx_prop?.is_root) {
tree.push({
id: meta.item.id,
parent: meta.parent?.instance_id || "root",

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

@ -7,6 +7,7 @@ import { EDGlobal, active } from "../../../logic/ed-global";
import { fillID } from "../../../logic/tree/fill-id";
import { TopBtn } from "../top-btn";
import { prepSection } from "./prep-section";
import { treeRebuild } from "../../../logic/tree/build";
export const EdAddItem = () => {
const p = useGlobal(EDGlobal, "EDITOR");
@ -68,6 +69,8 @@ export const EdAddItem = () => {
active.item_id = map.get("id") || "";
p.render();
treeRebuild(p);
}
}
}

2
app/web/src/nova/ed/panel/header/mid/add-section.tsx
View File

@ -5,6 +5,7 @@ import { ISection } from "../../../../../utils/types/section";
import { EDGlobal, active } from "../../../logic/ed-global";
import { fillID } from "../../../logic/tree/fill-id";
import { TopBtn } from "../top-btn";
import { treeRebuild } from "../../../logic/tree/build";
export const EdAddSection = () => {
const p = useGlobal(EDGlobal, "EDITOR");
@ -34,6 +35,7 @@ export const EdAddSection = () => {
childs.push([map]);
active.item_id = json.id;
p.render();
treeRebuild(p);
}
}
}}

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

@ -8,6 +8,7 @@ import { EDGlobal, active } from "../../../logic/ed-global";
import { fillID } from "../../../logic/tree/fill-id";
import { TopBtn } from "../top-btn";
import { prepSection } from "./prep-section";
import { treeRebuild } from "../../../logic/tree/build";
export const EdAddText = () => {
const p = useGlobal(EDGlobal, "EDITOR");
@ -27,85 +28,90 @@ export const EdAddText = () => {
}
if (!meta) return null;
const json = {
id: createId(),
name: `New Text`,
type: "text",
dim: { w: "full", h: "full" },
layout: { align: "center", dir: "col", gap: 0 },
text: "",
html: "",
adv: {
css: "",
},
} as IText;
meta.mitem?.doc?.transact(() => {
if (!meta) return null;
let mitem = meta.mitem as MContent;
if (mitem) {
const item = meta.item as IContent;
if (
item.type === "text" ||
(item.type === "item" && item.component?.id)
) {
const parent_id = meta.parent?.id || "root";
const parent = getMetaById(
p,
parent_id === "root" ? item.id : parent_id
);
if (!parent) {
alert("Failed to add text!");
} else {
mitem = parent.mitem as MContent;
}
}
const json = {
id: createId(),
name: `New Text`,
type: "text",
dim: { w: "full", h: "full" },
layout: { align: "center", dir: "col", gap: 0 },
text: "",
html: "",
adv: {
css: "",
},
} as IText;
let mitem = meta.mitem as MContent;
if (mitem) {
if (mitem.get("type") === "section") {
const json = {
id: createId(),
name: `New Item`,
type: "item",
dim: { w: "full", h: "full" },
childs: [],
adv: {
css: "",
},
} as IItem;
const item = meta.item as IContent;
if (mitem) {
const childs = mitem.get("childs");
if (childs) {
const map = new Y.Map() as MContent;
syncronize(map as any, fillID(json));
if (
item.type === "text" ||
(item.type === "item" && item.component?.id)
) {
const parent_id = meta.parent?.id || "root";
const parent = getMetaById(
p,
parent_id === "root" ? item.id : parent_id
);
if (!parent) {
alert("Failed to add text!");
} else {
mitem = parent.mitem as MContent;
}
}
if (mitem) {
if (mitem.get("type") === "section") {
const json = {
id: createId(),
name: `New Item`,
type: "item",
dim: { w: "full", h: "full" },
childs: [],
adv: {
css: "",
},
} as IItem;
if (mitem) {
const childs = mitem.get("childs");
if (childs) {
childs.push([map]);
}
const map = new Y.Map() as MContent;
syncronize(map as any, fillID(json));
const childs = mitem.get("childs");
if (childs) {
childs.push([map]);
}
active.item_id = map.get("id") || "";
mitem = map;
p.render();
active.item_id = map.get("id") || "";
mitem = map;
p.render();
}
}
}
}
const childs = mitem.get("childs");
if (childs) {
const map = new Y.Map() as MContent;
syncronize(map as any, fillID(json));
const childs = mitem.get("childs");
if (childs) {
childs.push([map]);
const map = new Y.Map() as MContent;
syncronize(map as any, fillID(json));
const childs = mitem.get("childs");
if (childs) {
childs.push([map]);
}
active.item_id = map.get("id") || "";
p.render();
focus();
}
active.item_id = map.get("id") || "";
p.render();
focus();
}
}
}
});
treeRebuild(p);
}}
>
<svg

5
app/web/src/nova/ed/panel/header/mid/comp-picker.tsx
View File

@ -87,6 +87,11 @@ const addComponent = (mitem: MItem | MSection, comp: IItem) => {
const map = new Y.Map() as MContent;
if (map) {
comp.originalId = comp.id;
if (comp.component && !comp.component?.instances) {
comp.component.instances = {};
}
syncronize(map as any, fillID(comp));
const childs = mitem.get("childs");
if (childs) {

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

@ -154,7 +154,7 @@ export const mainPerItemVisit = (
}
`
);
parts.props.onPointerOver = (e) => {
parts.props.onPointerEnter = (e) => {
e.stopPropagation();
active.hover.id = meta.item.id;
active.hover.renderMain();

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

@ -1,4 +1,5 @@
import { IContent } from "../../../../../../../utils/types/general";
import { IItem, MItem } from "../../../../../../../utils/types/item";
import { getMetaById } from "../../../../../logic/active/get-meta";
import { PG } from "../../../../../logic/ed-global";
import { treeRebuild } from "../../../../../logic/tree/build";
@ -10,10 +11,9 @@ export const edActionDelete = async (p: PG, item: IContent) => {
if (mitem) {
mitem.parent.forEach((e, k) => {
if (e == mitem) {
mitem.parent.delete(k);
deleteByParent(p, mitem, k);
}
});
await treeRebuild(p);
}
}
};
@ -25,10 +25,18 @@ export const edActionDeleteById = async (p: PG, id: string) => {
if (mitem) {
mitem.parent.forEach((e, k) => {
if (e == mitem) {
mitem.parent.delete(k);
deleteByParent(p, mitem, k);
}
});
await treeRebuild(p);
}
}
};
const deleteByParent = (p: PG, mitem: MItem, index: number) => {
const mchild = mitem.parent.get(index);
const child = mchild?.toJSON() as IItem;
console.log(child);
mitem.parent.delete(index);
treeRebuild(p);
};

2
app/web/src/nova/ed/panel/tree/node/item/action/new-comp.tsx
View File

@ -35,7 +35,7 @@ export const edActionNewComp = (
}
if (newcomp && newcomp.snapshot) {
await loadCompSnapshot(p, newcomp.id, newcomp.snapshot, newcomp.meta);
await loadCompSnapshot(p, newcomp.id, newcomp.snapshot);
await treeRebuild(p);
}

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

@ -22,7 +22,7 @@ export const EdTreeName = ({
const item = node.data?.item;
if (!item) return <></>;
const is_jsx_prop = !!node.data?.jsx_prop;
const is_jsx_prop = !!node.data?.jsx_prop?.is_root;
const isRenaming = p.ui.tree.rename_id === item.id;
return (
@ -98,7 +98,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"}>{node.id} - {item.originalId}</div> */}
<div className={"text-[9px] text-gray-500 -mt-1"}>
{node.id} - {item.originalId}
</div>
</div>
)}
</div>

3
app/web/src/nova/ed/panel/tree/node/on-drop.tsx
View File

@ -4,6 +4,7 @@ import { IContent, MContent } from "../../../../../utils/types/general";
import { getMetaById } from "../../../logic/active/get-meta";
import { IMeta, PG, active } from "../../../logic/ed-global";
import { fillID } from "../../../logic/tree/fill-id";
import { treeRebuild } from "../../../logic/tree/build";
export const nodeOnDrop: (
p: PG,
@ -51,6 +52,8 @@ export const nodeOnDrop: (
});
}
});
treeRebuild(p);
p.render();
}
}
}

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

@ -16,7 +16,10 @@ export const nodeRender: NodeRender<IMeta> = (node, prm) => {
const local = useLocal({
rightClick: null as null | React.MouseEvent<HTMLDivElement, MouseEvent>,
});
if (!node || !node.data) return <></>;
if (!node || !node.data) {
console.log("hello", node, prm);
return <></>;
}
const item = node.data?.item;
const isComponent = item.type === "item" && item.component?.id;
@ -36,6 +39,7 @@ export const nodeRender: NodeRender<IMeta> = (node, prm) => {
const cprop = comp.component?.props[prop_name];
if (cprop && node.data.parent?.instance_id) {
const meta = getMetaById(p, node.data.parent.instance_id);
if (meta && prop_name) {
const props = meta.item.script?.props;
if (props) {
@ -46,6 +50,11 @@ export const nodeRender: NodeRender<IMeta> = (node, prm) => {
) {
hide = false;
}
} else {
const prop = meta.item.component?.props[prop_name];
if (prop && (prop.visible || !prop.hasOwnProperty("visible"))) {
hide = false;
}
}
}
}
@ -118,10 +127,10 @@ export const nodeRender: NodeRender<IMeta> = (node, prm) => {
}, 100);
}
}}
onMouseOver={() => {
onMouseEnter={() => {
active.hover.id = item.id;
active.hover.renderTree();
active.hover.renderMain();
active.hover.renderTree();
}}
>
{active.hover.id === item.id && (

45
app/web/src/nova/vi/meta/comp.tsx
View File

@ -54,9 +54,32 @@ export const genComp = (p: GenMetaP, arg: GenMetaArg) => {
}
}
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,
instance: instances ? instances[item.id] : {},
each(name, prop) {
const comp_id = item.component?.id;
@ -84,28 +107,6 @@ export const genComp = (p: GenMetaP, arg: GenMetaArg) => {
}
},
});
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,
},
}
);
}
}
}
};

10
app/web/src/nova/vi/meta/comp/instantiate.tsx
View File

@ -1,7 +1,6 @@
import { createId } from "@paralleldrive/cuid2";
import { deepClone } from "web-utils";
import { IItem } from "../../../../utils/types/item";
import { FNComponent } from "../../../../utils/types/meta-fn";
export const instantiate = (arg: {
item: IItem;
@ -22,11 +21,6 @@ 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);
}
}
}
@ -40,9 +34,7 @@ export const instantiate = (arg: {
};
export const walkChild = (item: IItem, ids: Record<string, string>) => {
if (!item.originalId) {
item.originalId = item.id;
}
item.originalId = item.id;
if (!ids[item.id]) {
ids[item.id] = createId();

2
app/web/src/nova/vi/meta/comp/walk-prop.tsx
View File

@ -1,3 +1,4 @@
import { createId } from "@paralleldrive/cuid2";
import { deepClone } from "web-utils";
import { IItem } from "../../../../utils/types/item";
import { FNCompDef } from "../../../../utils/types/meta-fn";
@ -5,6 +6,7 @@ import { FNCompDef } from "../../../../utils/types/meta-fn";
export const walkProp = (arg: {
item: IItem;
item_comp: IItem;
instance: Record<string, string>;
each: (name: string, prop: FNCompDef) => void;
}) => {
for (const [k, v] of Object.entries(arg.item_comp.component?.props || {})) {

11
app/web/src/nova/vi/meta/meta.ts
View File

@ -38,7 +38,7 @@ export const genMeta = (p: GenMetaP, arg: GenMetaArg) => {
if (item.childs) {
for (const [_, v] of Object.entries(item.childs)) {
genMeta(p, {
const carg: GenMetaArg = {
item: v,
is_root: false,
parent: {
@ -47,7 +47,14 @@ export const genMeta = (p: GenMetaP, arg: GenMetaArg) => {
comp: arg.parent?.comp,
root_instances: arg.parent?.root_instances,
},
});
};
if (arg.jsx_prop) {
carg.jsx_prop = {
...arg.jsx_prop,
is_root: false,
};
}
genMeta(p, carg);
}
}
};

1
app/web/src/nova/vi/render/render.tsx
View File

@ -11,6 +11,7 @@ export const ViRender: FC<{
children?: ReactNode;
passprop?: any;
}> = ({ meta, children, passprop }) => {
if (!meta) return null;
if (meta.item.hidden) return null;

12
app/web/src/render/editor/logic/tree-logic.tsx
View File

@ -328,16 +328,16 @@ export const walk = async (
let mp = mprops.get(name);
if (mp) {
const mprop = mp?.toJSON() as FNCompDef;
const jsx_prop = iprops.get(name);
const jprop = iprops.get(name);
if (jsx_prop) {
if (jprop) {
if (mprop.meta?.type === "content-element") {
let mcontent = jsx_prop.get("content");
let mcontent = jprop.get("content");
let isNew = false;
if (!mcontent) {
isNew = true;
jsx_prop.set(
jprop.set(
"content",
newMap({
id: createId(),
@ -350,7 +350,7 @@ export const walk = async (
},
}) as any
);
mcontent = jsx_prop.get("content");
mcontent = jprop.get("content");
}
if (!!mcontent) {
@ -372,7 +372,7 @@ export const walk = async (
if (defaultJSX && mcontent) {
syncronize(mcontent as any, defaultJSX);
}
mcontent = jsx_prop.get("content");
mcontent = jprop.get("content");
}
if (mcontent) {
await walk(p, mode, {

6
app/web/src/render/live/logic/tree-logic.tsx
View File

@ -132,11 +132,11 @@ const walk = async (
if (cprops && iprops) {
for (const [name, mprop] of Object.entries(cprops)) {
const jsx_prop = iprops[name];
const jprop = iprops[name];
if (jsx_prop) {
if (jprop) {
if (mprop.meta?.type === "content-element") {
let icontent = jsx_prop.content;
let icontent = jprop.content;
if (icontent)
await walk(p, {