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

wip fix

This commit is contained in:
Rizky 2024-01-24 00:14:47 +07:00
parent 7ba849f468
commit 22d6821986
15 changed files with 304 additions and 232 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/web/src/nova/ed/logic/ed-global.ts
View File

@ -195,7 +195,6 @@ export const EDGlobal = {
global_prop: [] as string[],
ui: {
zoom: localStorage.zoom || "100%",
should_render: false,
side: { prop: true },
layout: {
left: parseInt(localStorage.getItem("prasi-layout-left") || "250"),

200
app/web/src/nova/ed/logic/ed-route.ts
View File

@ -1,132 +1,132 @@
import { compress, decompress } from "wasm-gzip";
import { isTextEditing } from "./active/is-editing";
import { loadCompSnapshot } from "./comp/load";
import { PG } from "./ed-global";
import { PG, active } from "./ed-global";
import { loadSite } from "./ed-site";
import { treeRebuild } from "./tree/build";
export const edRoute = async (p: PG) => {
if (p.status === "ready" || p.status === "init") {
if (!p.site.domain && !p.site.name) {
p.status = "load-site";
const site = await p.sync.site.load(p.site.id);
if (!site) {
p.status = "site-not-found";
p.render();
return;
}
if (p.status === "ready" || p.status === "init") {
if (!p.site.domain && !p.site.name) {
p.status = "load-site";
const site = await p.sync.site.load(p.site.id);
if (!site) {
p.status = "site-not-found";
p.render();
return;
}
await loadSite(p, site, "from-route");
}
await loadSite(p, site, "from-route");
}
if (
p.page.cur.id !== params.page_id ||
!p.page.cur.snapshot ||
!p.page.list[p.page.cur.id]
) {
const page = p.page.list[params.page_id];
if (page && p.page.doc && page.on_update) {
p.page.doc.off("update", page.on_update);
if (
p.page.cur.id !== params.page_id ||
!p.page.cur.snapshot ||
!p.page.list[p.page.cur.id]
) {
const page = p.page.list[params.page_id];
if (page && p.page.doc && page.on_update) {
p.page.doc.off("update", page.on_update);
const cur = p.page.list[params.page_id];
p.page.cur = cur.page;
p.page.doc = cur.doc;
}
const cur = p.page.list[params.page_id];
p.page.cur = cur.page;
p.page.doc = cur.doc;
}
await reloadPage(p, params.page_id, "load-route");
}
}
await reloadPage(p, params.page_id, "load-route");
}
}
};
export const reloadPage = async (p: PG, page_id: string, note: string) => {
p.status = "reload";
const remotePage = await p.sync.page.load(page_id);
p.status = "reload";
const remotePage = await p.sync.page.load(page_id);
if (!remotePage) {
p.status = "page-not-found";
p.render();
return;
}
if (!remotePage) {
p.status = "page-not-found";
p.render();
return;
}
if (remotePage.comps) {
for (const [id_comp, c] of Object.entries(remotePage.comps)) {
if (c && c.snapshot) {
await loadCompSnapshot(p, id_comp, c.snapshot);
}
}
}
if (remotePage.comps) {
for (const [id_comp, c] of Object.entries(remotePage.comps)) {
if (c && c.snapshot) {
await loadCompSnapshot(p, id_comp, c.snapshot);
}
}
}
p.page.cur = remotePage;
if (remotePage.snapshot) {
const doc = new Y.Doc();
Y.applyUpdate(doc, decompress(remotePage.snapshot));
p.page.cur = remotePage;
if (remotePage.snapshot) {
const doc = new Y.Doc();
Y.applyUpdate(doc, decompress(remotePage.snapshot));
let page = p.page.list[remotePage.id];
if (!page) {
p.page.list[remotePage.id] = {} as any;
page = p.page.list[remotePage.id];
}
let page = p.page.list[remotePage.id];
if (!page) {
p.page.list[remotePage.id] = {} as any;
page = p.page.list[remotePage.id];
}
if (page.on_update && page.doc) {
page.doc.off("update", page.on_update);
}
if (page.on_update && page.doc) {
page.doc.off("update", page.on_update);
}
page.on_update = async (bin: Uint8Array, origin: any) => {
if (origin === "local") return;
page.on_update = async (bin: Uint8Array, origin: any) => {
if (origin === "local") return;
const res = await p.sync.yjs.sv_local(
"page",
p.page.cur.id,
Buffer.from(compress(bin)),
);
const res = await p.sync.yjs.sv_local(
"page",
p.page.cur.id,
Buffer.from(compress(bin))
);
if (res) {
const diff_local = Y.encodeStateAsUpdate(
doc as any,
decompress(res.sv),
);
Y.applyUpdate(doc as any, decompress(res.diff), "local");
if (res) {
const diff_local = Y.encodeStateAsUpdate(
doc as any,
decompress(res.sv)
);
Y.applyUpdate(doc as any, decompress(res.diff), "local");
if (!isTextEditing()) {
await treeRebuild(p, { note: note + " page-on-update" });
}
if (!isTextEditing()) {
await treeRebuild(p, { note: note + " page-on-update" });
}
await p.sync.yjs.diff_local(
"page",
p.page.cur.id,
Buffer.from(compress(diff_local)),
);
p.ui.syncing = false;
await p.sync.yjs.diff_local(
"page",
p.page.cur.id,
Buffer.from(compress(diff_local))
);
p.ui.syncing = false;
p.page.entry = (doc as any)
.getMap("map")
.get("root")
?.get("childs")
?.map((e: any) => e.get("id")) as string[];
p.page.entry = (doc as any)
.getMap("map")
.get("root")
?.get("childs")
?.map((e: any) => e.get("id")) as string[];
if (p.ui.should_render) p.render();
}
};
if (active.should_render_main) p.render();
}
};
doc.on("update", page.on_update);
doc.on("update", page.on_update);
p.page.doc = doc as any;
if (p.page.doc) {
page.page = p.page.cur;
page.doc = p.page.doc;
p.page.doc = doc as any;
if (p.page.doc) {
page.page = p.page.cur;
page.doc = p.page.doc;
p.page.entry = p.page.doc
.getMap("map")
.get("root")
?.get("childs")
?.map((e) => e.get("id")) as string[];
}
p.page.entry = p.page.doc
.getMap("map")
.get("root")
?.get("childs")
?.map((e) => e.get("id")) as string[];
}
if (p.page.doc) {
await treeRebuild(p, { note: note + " page-init" });
}
}
if (p.page.doc) {
await treeRebuild(p, { note: note + " page-init" });
}
}
p.status = "ready";
p.render();
p.status = "ready";
p.render();
};

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

@ -29,7 +29,7 @@ export const EdAddItem = () => {
const json = {
id: createId(),
name: `New Item`,
name: `new_item`,
type: "item",
dim: { w: "full", h: "full" },
childs: [],

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

@ -33,7 +33,7 @@ export const EdAddText = () => {
const json = {
id: createId(),
name: `New Text`,
name: `new_text`,
type: "text",
dim: { w: "full", h: "full" },
layout: { align: "center", dir: "col", gap: 0 },
@ -68,7 +68,7 @@ export const EdAddText = () => {
if (mitem.get("type") === "section") {
const json = {
id: createId(),
name: `New Item`,
name: `new_item`,
type: "item",
dim: { w: "full", h: "full" },
childs: [],

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

@ -105,7 +105,7 @@ const addComponent = (mitem: MItem | MSection, comp: IItem) => {
const addSection = (root: MRoot) => {
const json = {
id: createId(),
name: `New Section`,
name: `new_section`,
type: "section",
dim: { w: "full", h: "full" },
childs: [],

196
app/web/src/nova/ed/panel/main/main.tsx
View File

@ -5,96 +5,96 @@ import { EDGlobal, IMeta, PG, active } from "../../logic/ed-global";
import { mainPerItemVisit } from "./main-per-item";
export const EdMain = () => {
const p = useGlobal(EDGlobal, "EDITOR");
const local = useLocal({
cache: null as any,
first_load: false,
width: 0,
height: 0,
});
const p = useGlobal(EDGlobal, "EDITOR");
const local = useLocal({
cache: null as any,
first_load: false,
width: 0,
height: 0,
});
let meta: undefined | IMeta = undefined;
let meta: undefined | IMeta = undefined;
if (active.comp_id) {
if (p.comp.list[active.comp_id]) {
meta = p.comp.list[active.comp_id].meta[active.item_id];
} else {
active.comp_id = "";
}
} else {
meta = p.page.meta[active.item_id];
}
if (active.comp_id) {
if (p.comp.list[active.comp_id]) {
meta = p.comp.list[active.comp_id].meta[active.item_id];
} else {
active.comp_id = "";
}
} else {
meta = p.page.meta[active.item_id];
}
if (active.should_render_main) {
local.cache = (
<Vi
meta={p.page.meta}
api_url={p.site.config.api_url}
site_id={p.site.id}
page_id={p.page.cur.id}
entry={p.page.entry}
api={p.script.api}
db={p.script.db}
script={{ init_local_effect: p.script.init_local_effect }}
visit={(meta, parts) => {
return mainPerItemVisit(p, meta, parts);
}}
onStatusChanged={(status) => {
if (status !== "ready") {
active.should_render_main = true;
local.render();
} else {
if (!local.first_load) {
local.first_load = true;
active.should_render_main = true;
local.render();
}
}
}}
/>
);
active.should_render_main = false;
}
if (active.should_render_main) {
local.cache = (
<Vi
meta={p.page.meta}
api_url={p.site.config.api_url}
site_id={p.site.id}
page_id={p.page.cur.id}
entry={p.page.entry}
api={p.script.api}
db={p.script.db}
script={{ init_local_effect: p.script.init_local_effect }}
visit={(meta, parts) => {
return mainPerItemVisit(p, meta, parts);
}}
on_status_changed={(status) => {
if (status !== "ready") {
active.should_render_main = true;
local.render();
} else {
if (!local.first_load) {
local.first_load = true;
active.should_render_main = true;
local.render();
}
}
}}
/>
);
active.should_render_main = false;
}
return (
<div
className={cx(
"flex flex-1 relative overflow-auto",
p.mode === "mobile" ? "flex-col items-center" : "",
)}
ref={(el) => {
if (el) {
const bound = el.getBoundingClientRect();
if (local.width !== bound.width || local.height !== bound.height) {
local.width = bound.width;
local.height = bound.height;
local.render();
}
}
}}
>
<div className={mainStyle(p, meta)}>{local.cache}</div>
</div>
);
return (
<div
className={cx(
"flex flex-1 relative overflow-auto",
p.mode === "mobile" ? "flex-col items-center" : ""
)}
ref={(el) => {
if (el) {
const bound = el.getBoundingClientRect();
if (local.width !== bound.width || local.height !== bound.height) {
local.width = bound.width;
local.height = bound.height;
local.render();
}
}
}}
>
<div className={mainStyle(p, meta)}>{local.cache}</div>
</div>
);
};
const mainStyle = (p: PG, meta?: IMeta) => {
let is_active = meta ? isMetaActive(p, meta) : false;
let is_active = meta ? isMetaActive(p, meta) : false;
const scale = parseInt(p.ui.zoom.replace("%", "")) / 100;
const scale = parseInt(p.ui.zoom.replace("%", "")) / 100;
let width = `${(1 / scale) * 100}%`;
if (p.mode === "mobile") {
width = `${(1 / scale) * 375}px`;
}
let width = `${(1 / scale) * 100}%`;
if (p.mode === "mobile") {
width = `${(1 / scale) * 375}px`;
}
return cx(
"absolute flex",
css`
return cx(
"absolute flex",
css`
contain: content;
`,
p.mode === "mobile"
? css`
p.mode === "mobile"
? css`
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
background: white;
@ -103,22 +103,22 @@ const mainStyle = (p: PG, meta?: IMeta) => {
overflow-y: auto;
bottom: 0px;
`
: "inset-0",
p.mode === "mobile"
? css`
width: ${width};
height: ${`${(1 / scale) * 100}%`};
transform: scale(${scale});
transform-origin: 50% 0% 0px;
`
: css`
width: ${width};
height: ${`${(1 / scale) * 100}%`};
transform: scale(${scale});
transform-origin: 0% 0% 0px;
`,
active.hover.id &&
css`
: "inset-0",
p.mode === "mobile"
? css`
width: ${width};
height: ${`${(1 / scale) * 100}%`};
transform: scale(${scale});
transform-origin: 50% 0% 0px;
`
: css`
width: ${width};
height: ${`${(1 / scale) * 100}%`};
transform: scale(${scale});
transform-origin: 0% 0% 0px;
`,
active.hover.id &&
css`
.s-${active.hover.id} {
&::after {
content: " ";
@ -132,8 +132,8 @@ const mainStyle = (p: PG, meta?: IMeta) => {
}
}
`,
is_active &&
css`
is_active &&
css`
.s-${active.item_id} {
outline: none;
@ -148,6 +148,6 @@ const mainStyle = (p: PG, meta?: IMeta) => {
border: 2px solid #1c88f3;
}
}
`,
);
`
);
};

8
app/web/src/nova/ed/panel/popup/script/scope/scope.tsx
View File

@ -34,10 +34,12 @@ export const declareScope = (p: PG, meta: IMeta, monaco: Monaco) => {
for (const path of paths) {
if (path.includes(meta)) {
for (const m of path) {
if (m.instances) {
cur_path.length = 0;
if (m) {
if (m.instances) {
cur_path.length = 0;
}
cur_path.push(m);
}
cur_path.push(m);
}
break;
}

3
app/web/src/nova/ed/panel/side/style/side-all.tsx
View File

@ -11,6 +11,7 @@ import { PanelLink } from "./panel/link";
import { PanelPadding } from "./panel/padding";
import { SideBox } from "./ui/SideBox";
import { SideLabel } from "./ui/SideLabel";
import { treeRebuild } from "../../../logic/tree/build";
export const EdStyleAll = () => {
const p = useGlobal(EDGlobal, "EDITOR");
@ -27,7 +28,7 @@ export const EdStyleAll = () => {
let mitem = meta.mitem;
if (mitem) {
p.ui.should_render = true;
active.should_render_main = true;
mitem.doc?.transact(() => {
if (mitem) {
if (p.mode === "mobile") {

8
app/web/src/nova/ed/panel/side/style/ui/FieldNumUnit.tsx
View File

@ -70,8 +70,6 @@ export const FieldNumUnit: FC<{
local.render();
}, [value, unit]);
const [txPending, tx] = useTransition();
useEffect(() => {
// Only change the value if the drag was actually started.
const onUpdate = (event: any) => {
@ -86,9 +84,7 @@ export const FieldNumUnit: FC<{
local.render();
tx(() => {
update(local.val + local.unit);
});
update(local.val + local.unit);
}
};
@ -105,7 +101,7 @@ export const FieldNumUnit: FC<{
document.removeEventListener("pointermove", onUpdate);
document.removeEventListener("pointerup", onEnd);
};
}, [local.drag.clientX, local.drag.old, local.val]);
}, [local.drag.clientX, local.drag.old, local.val, update]);
const onStart = useCallback(
(event: React.MouseEvent) => {

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

@ -1,8 +1,9 @@
import { NodeModel, RenderParams } from "@minoru/react-dnd-treeview";
import { FC, useEffect } from "react";
import { useGlobal, useLocal } from "web-utils";
import { EDGlobal, IMeta, active } from "../../../../logic/ed-global";
import { IItem, MItem } from "../../../../../../utils/types/item";
import { Tooltip } from "../../../../../../utils/ui/tooltip";
import { EDGlobal, IMeta, PG, active } from "../../../../logic/ed-global";
import { treeRebuild } from "../../../../logic/tree/build";
export const EdTreeName = ({
@ -101,13 +102,15 @@ export const EdTreeName = ({
}
}}
onChange={(e) => {
local.rename = e.target.value.replace(/[\W_]+/g, "_");
local.rename = e.target.value
.replace(/[^a-zA-Z\:\d\s:]+/g, "_")
.toLowerCase();
p.render();
}}
/>
) : (
<div className="flex flex-col">
<Name name={name} is_jsx_prop={is_jsx_prop} />
<Name name={name} is_jsx_prop={is_jsx_prop} meta={node.data} />
{/* <div className={"text-[9px] text-gray-500 -mt-1"}>
{node.id} - {item.originalId}
</div> */}
@ -117,20 +120,22 @@ export const EdTreeName = ({
);
};
const Name: FC<{ name: string; is_jsx_prop: boolean }> = ({
const Name: FC<{ name: string; is_jsx_prop: boolean; meta?: IMeta }> = ({
name,
is_jsx_prop,
meta,
}) => {
if (is_jsx_prop) {
return (
<div className="flex items-center space-x-1">
<div className={cx("flex items-center space-x-1 pr-1")}>
<Tooltip
content={`Type: JSX Prop`}
className="flex text-purple-500 border border-purple-400 items-center justify-center font-mono text-[6px] px-[2px]"
>
P
</Tooltip>
<div>{name}</div>
<div className="flex-1">{name}</div>
{meta && meta.mitem && <GenerateJSX mitem={meta.mitem} />}
</div>
);
}
@ -153,3 +158,76 @@ const Name: FC<{ name: string; is_jsx_prop: boolean }> = ({
return <div>{name}</div>;
};
const GenerateJSX: FC<{ mitem: MItem }> = ({ mitem }) => {
const p = useGlobal(EDGlobal, "EDITOR");
return (
<Tooltip
content="Generate JSX"
onClick={() => {
const genJSX = findDefaultJSX(p, mitem);
const ijson = mitem.toJSON() as IItem;
mitem.doc?.transact(() => {
syncronize(mitem as any, {
...genJSX,
name: ijson.name,
id: ijson.id,
hidden: false,
originalId: ijson.originalId,
});
});
treeRebuild(p);
p.render();
}}
>
<div
className="action-script px-1 py-[2px] rounded-sm text-purple-500 bg-white border border-purple-400 opacity-0 transition-all hover:bg-purple-700 hover:text-white hover:border-purple-700"
dangerouslySetInnerHTML={{
__html: `<svg width="9px" height="9px" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.69667 0.0403541C8.90859 0.131038 9.03106 0.354857 8.99316 0.582235L8.0902 6.00001H12.5C12.6893 6.00001 12.8625 6.10701 12.9472 6.27641C13.0319 6.4458 13.0136 6.6485 12.8999 6.80001L6.89997 14.8C6.76167 14.9844 6.51521 15.0503 6.30328 14.9597C6.09135 14.869 5.96888 14.6452 6.00678 14.4178L6.90974 9H2.49999C2.31061 9 2.13748 8.893 2.05278 8.72361C1.96809 8.55422 1.98636 8.35151 2.09999 8.2L8.09997 0.200038C8.23828 0.0156255 8.48474 -0.0503301 8.69667 0.0403541ZM3.49999 8.00001H7.49997C7.64695 8.00001 7.78648 8.06467 7.88148 8.17682C7.97648 8.28896 8.01733 8.43723 7.99317 8.5822L7.33027 12.5596L11.5 7.00001H7.49997C7.353 7.00001 7.21347 6.93534 7.11846 6.8232C7.02346 6.71105 6.98261 6.56279 7.00678 6.41781L7.66968 2.44042L3.49999 8.00001Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>`,
}}
></div>
</Tooltip>
);
};
export const findDefaultJSX = (p: PG, mitem: MItem): IItem => {
let resetJSXProp: any = false;
if (mitem && mitem.parent && (mitem.parent as any).get("content")) {
let name = "";
(mitem as any).parent.parent.forEach((e: any, k: any) => {
if (e === mitem.parent) {
name = k;
}
});
if (name) {
try {
const cid = (mitem as any).parent.parent.parent.get("id");
const comp = p.comp.list[cid].doc;
if (comp) {
const mchilds = comp
.getMap("map")
.get("root")
?.get("childs")
?.toJSON() as IItem[];
for (const c of mchilds) {
if (
c &&
c.name &&
c.name.startsWith("jsx:") &&
c.name.substring(4).trim() === name
) {
c.hidden = false;
c.name = name;
c.id = mitem.get("id") || "";
c.originalId = mitem.get("originalId") || "";
resetJSXProp = c;
}
}
}
} catch (e) {}
}
}
return resetJSXProp;
};

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

@ -52,7 +52,6 @@ export const ViRender: FC<{
}
if (!meta) return null;
if (meta.item.hidden) return null;
if (meta.item.adv?.js || meta.item.component?.id) {

8
app/web/src/nova/vi/render/script/eval-script.tsx
View File

@ -84,13 +84,7 @@ const JsxProp: FC<{
meta: IMeta;
passprop: any;
}> = ({ fn, meta, passprop }) => {
const local = useLocal({ init: false, result: null as any });
if (!local.init) {
local.init = true;
local.result = fn({ passprop, meta });
}
return local.result;
return fn({ passprop, meta });
};
export const replacement = {

8
app/web/src/nova/vi/vi.tsx
View File

@ -1,4 +1,4 @@
import { FC, Suspense } from "react";
import { FC, Suspense, useState } from "react";
import { useGlobal } from "web-utils";
import { IMeta } from "../ed/logic/ed-global";
import { viLoad } from "./load/load";
@ -19,7 +19,7 @@ export const Vi: FC<{
script?: { init_local_effect: Record<string, boolean> };
visit?: VG["visit"];
render_stat?: "enabled" | "disabled";
onStatusChanged?: (status: VG["status"]) => void;
on_status_changed?: (status: VG["status"]) => void;
}> = ({
meta,
entry,
@ -30,10 +30,10 @@ export const Vi: FC<{
visit,
script,
render_stat: rs,
onStatusChanged,
on_status_changed,
}) => {
const vi = useGlobal(ViGlobal, "VI");
vi.on_status_changes = onStatusChanged;
vi.on_status_changes = on_status_changed;
if (rs === "disabled") {
render_stat.enabled = false;

1
app/web/src/render/editor/panel/side/Side.tsx
View File

@ -17,6 +17,7 @@ import { CPInstance } from "./props/CPInstance";
import { CPMaster } from "./props/CPMaster";
import { SideBox } from "./ui/SideBox";
import { SideLabel } from "./ui/SideLabel";
import { treeRebuild } from "../../../../nova/ed/logic/tree/build";
export const ESide = () => {
const p = useGlobal(EditorGlobal, "EDITOR");

4
app/web/src/utils/css/font.ts
View File

@ -36,7 +36,7 @@ export const cssFont = (
font.family = glbFont.defaultFont;
}
return cx(
const res = cx(
font.color &&
`
color: ${font.color};
@ -69,4 +69,6 @@ export const cssFont = (
font-family: ${font.family};
`
);
return res;
};