This commit is contained in:
Rizky 2023-11-30 03:38:59 +07:00
parent 75ad480c79
commit cfcffb2aa7
7 changed files with 118 additions and 58 deletions

View File

@ -22,6 +22,11 @@ export const serverWalkLoad = async (
sync: SyncConnection,
loaded: Set<string>
) => {
if (typeof mitem.get !== 'function') {
return;
}
const mcomp = mitem.get("component");
if (mcomp) {
const id = mcomp.get("id");
@ -141,7 +146,7 @@ export const serverWalkMap = (
mitem,
mcomp: mitem,
scope,
mcontent(mcontent) {},
mcontent(mcontent) { },
});
p.scope[item.id] = {
p: arg.parent_ids,
@ -282,12 +287,12 @@ export const serverWalkMap = (
parent_item: { id: item.id, mitem: mitem as MItem },
parent_mcomp: jsx.parent_mcomp
? {
...jsx.parent_mcomp,
parent_ids: [
...(arg.parent_ids || []),
mitem.get("id") || "",
],
}
...jsx.parent_mcomp,
parent_ids: [
...(arg.parent_ids || []),
mitem.get("id") || "",
],
}
: undefined,
parent_ids: [...arg.parent_ids, mitem.get("id") || ""],
});
@ -312,9 +317,9 @@ export const serverWalkMap = (
parent_item: { id: item.id, mitem: mitem as MItem },
parent_mcomp: !!arg.parent_mcomp
? {
...arg.parent_mcomp,
parent_ids: [...(arg.parent_mcomp?.parent_ids || []), item.id],
}
...arg.parent_mcomp,
parent_ids: [...(arg.parent_mcomp?.parent_ids || []), item.id],
}
: undefined,
parent_ids: [...arg.parent_ids, item.id],
});

View File

@ -97,6 +97,8 @@ export const treeRebuild = async (p: PG, arg?: { note?: string }) => {
}
}
console.log(p.page.root_id)
const sections = root.get("childs");
if (sections) {
sections.map((e) => {
@ -160,5 +162,6 @@ export const treeRebuild = async (p: PG, arg?: { note?: string }) => {
p.page.building = false;
p.render();
p.page.render();
}
};

View File

@ -81,6 +81,8 @@ export const syncWalkMap = (
}
) => {
const { mitem, parent_item, parent_mcomp } = arg;
if (typeof mitem.get !== "function") { return }
const item = {} as unknown as IItem;
let override_id = "";
@ -116,6 +118,8 @@ export const syncWalkMap = (
mapItem(mitem, item);
}
if (typeof item.name !== 'string') return;
if (override_id) {
if (!item.originalId) item.originalId = item.id;
item.id = override_id;
@ -340,13 +344,15 @@ const mapItem = (
item[k] = [];
const childs = e as unknown as TypedArray<{}>;
childs.forEach((c) => {
if (ref_ids) {
const id = ref_ids[c.get("id")];
if (id) {
item[k].push({ id });
if (typeof c.get === 'function') {
if (ref_ids) {
const id = ref_ids[c.get("id")];
if (id) {
item[k].push({ id });
}
} else {
item[k].push({ id: c.get("id") });
}
} else {
item[k].push({ id: c.get("id") });
}
});
}

View File

@ -4,7 +4,11 @@ import { TopBtn } from "../top-btn";
import { loadComponent } from "../../../logic/tree/sync-walk";
import { MContent } from "../../../../../utils/types/general";
import { fillID } from "../../../logic/tree/fill-id";
import { IItem } from "../../../../../utils/types/item";
import { IItem, MItem } from "../../../../../utils/types/item";
import { MRoot } from "../../../../../utils/types/root";
import { ISection, MSection } from "../../../../../utils/types/section";
import { createId } from "@paralleldrive/cuid2";
import { treeRebuild } from "../../../logic/tree/build";
export const EdCompPicker = () => {
const p = useGlobal(EDGlobal, "EDITOR");
@ -19,6 +23,7 @@ export const EdCompPicker = () => {
comp_ref = p.comp.list[comp_id];
}
if (!comp_ref) {
alert("Cannot load component!");
return;
@ -28,39 +33,41 @@ export const EdCompPicker = () => {
.getMap("map")
.get("root")
?.toJSON() as IItem;
if (!comp) {
alert("Failed to load component!");
return;
}
if (!active.item_id) {
const first_id = p.page.entry[0];
if (first_id) {
const first = p.page.meta[first_id];
console.log(first);
const active_meta = p.page.meta[active.item_id];
if (!active_meta) {
const root = p.page.doc?.getMap('map').get('root');
if (root) {
const first_meta = p.page.root_id === 'root'
? p.page.meta[p.page.entry[0]]
: p.page.meta[p.page.root_id];
console.log(first_meta)
// if (first_meta) {
// console.log(first_meta);
// } else {
// const msection = addSection(root);
// if (msection) {
// addComponent(msection, comp);
// }
// treeRebuild(p, { note: 'add-component' });
// }
}
} else {
const active_meta = p.page.meta[active.item_id];
if (active_meta) {
const item = active_meta.item;
const mitem = active_meta.mitem;
if (item && mitem) {
if (item.type !== "text") {
const map = new Y.Map() as MContent;
if (map) {
comp.originalId = comp.id;
syncronize(map as any, fillID(comp));
const childs = mitem.get("childs");
if (childs) {
childs.push([map]);
}
const newitem = map.toJSON();
active.item_id = newitem.id;
}
}
} else {
alert("Failed to add component!");
const item = active_meta.item;
const mitem = active_meta.mitem;
if (item && mitem) {
if (item.type !== "text") {
addComponent(mitem as MItem, comp)
}
} else {
alert("Failed to add component!");
}
}
};
@ -76,3 +83,41 @@ export const EdCompPicker = () => {
</TopBtn>
);
};
const addComponent = (mitem: MItem | MSection, comp: IItem) => {
const map = new Y.Map() as MContent;
if (map) {
comp.originalId = comp.id;
syncronize(map as any, fillID(comp));
const childs = mitem.get("childs");
if (childs) {
childs.push([map]);
}
const newitem = map.toJSON();
active.item_id = newitem.id;
}
}
const addSection = (root: MRoot) => {
const json = {
id: createId(),
name: `New Section`,
type: "section",
dim: { w: "full", h: "full" },
childs: [],
adv: {
css: "",
},
} as ISection;
const childs = root.get("childs");
if (childs) {
const map = new Y.Map() as MSection;
if (map) {
syncronize(map as any, fillID(json));
childs.push([map]);
return map;
}
}
}

View File

@ -1,10 +1,10 @@
import { FC, ReactNode } from "react";
import { IItem } from "../../../../utils/types/item";
import { IText } from "../../../../utils/types/text";
import { ISection } from "../../../../utils/types/section";
import { ViewMeta } from "./meta";
import { useGlobal } from "web-utils";
import { IItem } from "../../../../utils/types/item";
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 }> = ({
item,
@ -13,11 +13,12 @@ export const ViewMetaChildren: FC<{ item: IItem | IText | ISection }> = ({
const children: ReactNode[] = [];
if (item.type !== "text") {
let i = 1;
for (const child of item.childs) {
children.push(<ViewMeta id={child.id} key={child.id} />);
children.push(<ViewMeta id={child.id} key={child.id || i++} />);
}
} else {
return <span dangerouslySetInnerHTML={{ __html: item.html }}></span>;
return <span key={item.id} dangerouslySetInnerHTML={{ __html: item.html }}></span>;
}
return <>{children}</>;

View File

@ -14,7 +14,7 @@ export const ViewMetaRender: FC<{
const item = meta.item;
if (meta.is_layout && !v.layout.show) {
return <ViewMetaChildren item={item} />;
return <ViewMetaChildren key={item.id} item={item} />;
}
if (!className) {

View File

@ -26,7 +26,7 @@ export const ViewMetaScript: FC<{
hover: v.view.hover ? v.view.hover.get(item) : undefined,
active: v.view.active ? v.view.active.get(item) : undefined,
});
const children = <ViewMetaChildren item={item} />;
const children = <ViewMetaChildren key={item.id} item={item} />;
let args = {};
if (js && meta) {
@ -84,17 +84,17 @@ export const ViewMetaScript: FC<{
className,
onPointerOver: v.view.hover
? (e: any) => {
e.stopPropagation();
e.preventDefault();
v.view.hover?.set(item.id);
}
e.stopPropagation();
e.preventDefault();
v.view.hover?.set(item.id);
}
: undefined,
onClick: v.view.active
? (e: any) => {
e.stopPropagation();
e.preventDefault();
v.view.active?.set(item.id);
}
e.stopPropagation();
e.preventDefault();
v.view.active?.set(item.id);
}
: undefined,
},
useEffect: useEffect,