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-22 18:53:47 +07:00
parent c83e459a4c
commit 0bcbac81d4
13 changed files with 336 additions and 219 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/srv/ws/sync/actions.ts
View File

@ -125,7 +125,7 @@ export const SyncActions = {
prop_name: string;
value: Uint8Array;
}
) => ({}) as boolean | ParsedScope,
) => ({}) as boolean | ParsedScope | string,
parse: async (code: string | Record<string, string>) =>
({}) as Record<string, ReturnType<typeof parseJs>>,
},

74
app/srv/ws/sync/actions/code_edit.ts
View File

@ -41,41 +41,45 @@ export const code_edit: SAction["code"]["edit"] = async function (
if (mitem) {
if (arg.type === "adv") {
const res = await transform(`render(${src})`, {
jsx: "transform",
format: "cjs",
loader: "tsx",
});
doc?.transact(() => {
const mode = arg.mode;
let adv = mitem.get("adv");
if (!adv) {
mitem.set("adv", new Y.Map() as any);
adv = mitem.get("adv");
}
try {
const res = await transform(`render(${src})`, {
jsx: "transform",
format: "cjs",
loader: "tsx",
});
doc?.transact(() => {
const mode = arg.mode;
let adv = mitem.get("adv");
if (!adv) {
mitem.set("adv", new Y.Map() as any);
adv = mitem.get("adv");
}
if (adv) {
try {
if (adv) {
adv.set(mode, src);
if (mode === "js") {
adv.set("jsBuilt", res.code);
if (adv) {
try {
if (adv) {
adv.set(mode, src);
if (mode === "js") {
adv.set("jsBuilt", res.code);
}
}
} catch (e) {
g.log.error(e);
}
if (mode === "js") {
const res = parseJs(adv.get("js")) || false;
if (res) {
mitem.set("script", res);
} else {
mitem.delete("script");
}
}
} catch (e) {
g.log.error(e);
}
if (mode === "js") {
const res = parseJs(adv.get("js")) || false;
if (res) {
mitem.set("script", res);
} else {
mitem.delete("script");
}
}
}
});
});
} catch (e: any) {
return e.message.toString();
}
} else {
const mprop = mitem
.get("component")
@ -94,7 +98,9 @@ export const code_edit: SAction["code"]["edit"] = async function (
mprop.set("value", src);
mprop.set("valueBuilt", res.code.substring(6));
});
} catch (e) {}
} catch (e: any) {
return e.message.toString();
}
}
}
}
@ -134,8 +140,8 @@ export const code_edit: SAction["code"]["edit"] = async function (
}
}
});
} catch (e) {
g.log.error(e);
} catch (e: any) {
return e.message.toString();
}
}
}

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

@ -28,7 +28,7 @@ export const EdBase = () => {
edRoute(p);
if (p.status === "post-init") {
if (p.status === "load-site") {
return <Loading note={`page-${p.status}`} />;
}
if (p.status === "site-not-found" || p.status === "page-not-found") {
@ -47,7 +47,12 @@ export const EdBase = () => {
<EdPane type="left" min_size={200} />
<div className="flex flex-1 flex-col items-stretch">
<EdMid />
<div className="flex flex-1 items-stretch">
<div
className={cx(
"flex flex-1 items-stretch",
p.mode === "mobile" ? mobileCSS : "bg-white"
)}
>
<EdMain />
<EdPane type="right" min_size={240} />
<EdRight />
@ -138,3 +143,18 @@ const style = css`
}
}
`;
export const mobileCSS = css`
background-color: white;
background-image: linear-gradient(45deg, #fafafa 25%, transparent 25%),
linear-gradient(-45deg, #fafafa 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #fafafa 75%),
linear-gradient(-45deg, transparent 75%, #fafafa 75%);
background-size: 20px 20px;
background-position:
0 0,
0 10px,
10px -10px,
-10px 0px;
`;

2
app/web/src/nova/ed/ed-right.tsx
View File

@ -19,7 +19,7 @@ export const EdRight = () => {
css`
width: ${p.ui.layout.right}px;
`,
"border-l flex flex-col"
"border-l flex flex-col bg-white"
)}
>
{!meta ? (

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

@ -132,7 +132,7 @@ export const EDGlobal = {
clients: {} as Record<string, { id: string; username: string }>,
status: "init" as
| "init"
| "post-init"
| "load-site"
| "reload"
| "site-not-found"
| "page-not-found"
@ -228,6 +228,8 @@ export const EDGlobal = {
prop_kind: "" as PropFieldKind,
prop_name: "",
on_close: () => {},
typings: { status: "ok" as "ok" | "loading" | "error", err_msg: "" },
wb_render: () => {},
},
site: null as null | ((site_id: string) => void | Promise<void>),
site_form: null as null | {

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

@ -8,7 +8,7 @@ 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 = "post-init";
p.status = "load-site";
const site = await p.sync.site.load(p.site.id);
if (!site) {
p.status = "site-not-found";

125
app/web/src/nova/ed/panel/header/right/responsive-toggle.tsx
View File

@ -7,63 +7,70 @@ export const ResponsiveToggle = () => {
const c = useGlobal(EDGlobal, "EDITOR");
const mode = c.mode;
const activeModeClassName = "border-b-2 border-blue-500";
return (
<ToolbarBox
className="flex"
items={[
{
onClick() {
c.mode = "mobile";
w.isMobile = true;
w.isDesktop = false;
localStorage.setItem("prasi-editor-mode", "mobile");
c.render();
},
className: cx(mode === "mobile" && activeModeClassName),
content: (
<svg
xmlns="http://www.w3.org/2000/svg"
width="15"
height="15"
fill="none"
viewBox="0 0 15 15"
>
<path
fill="currentColor"
fillRule="evenodd"
d="M4 2.5a.5.5 0 01.5-.5h6a.5.5 0 01.5.5v10a.5.5 0 01-.5.5h-6a.5.5 0 01-.5-.5v-10zM4.5 1A1.5 1.5 0 003 2.5v10A1.5 1.5 0 004.5 14h6a1.5 1.5 0 001.5-1.5v-10A1.5 1.5 0 0010.5 1h-6zM6 11.65a.35.35 0 100 .7h3a.35.35 0 100-.7H6z"
clipRule="evenodd"
></path>
</svg>
),
},
{
onClick() {
c.mode = "desktop";
w.isMobile = false;
w.isDesktop = true;
localStorage.setItem("prasi-editor-mode", "desktop");
c.render();
},
className: cx(mode === "desktop" && activeModeClassName),
content: (
<svg
xmlns="http://www.w3.org/2000/svg"
width="15"
height="15"
fill="none"
viewBox="0 0 15 15"
>
<path
fill="currentColor"
fillRule="evenodd"
d="M1 3.25A.25.25 0 011.25 3h12.5a.25.25 0 01.25.25v7.5a.25.25 0 01-.25.25H1.25a.25.25 0 01-.25-.25v-7.5zM1.25 2C.56 2 0 2.56 0 3.25v7.5C0 11.44.56 12 1.25 12h3.823l-.243 1.299a.55.55 0 00.54.651h4.26a.55.55 0 00.54-.651L9.927 12h3.823c.69 0 1.25-.56 1.25-1.25v-7.5C15 2.56 14.44 2 13.75 2H1.25zm7.76 10H5.99l-.198 1.05h3.416L9.01 12z"
clipRule="evenodd"
></path>
</svg>
),
},
]}
/>
);
const box = {
mobile: {
onClick() {
c.mode = "mobile";
w.isMobile = true;
w.isDesktop = false;
localStorage.setItem("prasi-editor-mode", "mobile");
c.render();
},
className: cx(mode === "mobile" && activeModeClassName),
content: (
<svg
xmlns="http://www.w3.org/2000/svg"
width="15"
height="15"
fill="none"
viewBox="0 0 15 15"
>
<path
fill="currentColor"
fillRule="evenodd"
d="M4 2.5a.5.5 0 01.5-.5h6a.5.5 0 01.5.5v10a.5.5 0 01-.5.5h-6a.5.5 0 01-.5-.5v-10zM4.5 1A1.5 1.5 0 003 2.5v10A1.5 1.5 0 004.5 14h6a1.5 1.5 0 001.5-1.5v-10A1.5 1.5 0 0010.5 1h-6zM6 11.65a.35.35 0 100 .7h3a.35.35 0 100-.7H6z"
clipRule="evenodd"
></path>
</svg>
),
},
desktop: {
onClick() {
c.mode = "desktop";
w.isMobile = false;
w.isDesktop = true;
localStorage.setItem("prasi-editor-mode", "desktop");
c.render();
},
className: cx(mode === "desktop" && activeModeClassName),
content: (
<svg
xmlns="http://www.w3.org/2000/svg"
width="15"
height="15"
fill="none"
viewBox="0 0 15 15"
>
<path
fill="currentColor"
fillRule="evenodd"
d="M1 3.25A.25.25 0 011.25 3h12.5a.25.25 0 01.25.25v7.5a.25.25 0 01-.25.25H1.25a.25.25 0 01-.25-.25v-7.5zM1.25 2C.56 2 0 2.56 0 3.25v7.5C0 11.44.56 12 1.25 12h3.823l-.243 1.299a.55.55 0 00.54.651h4.26a.55.55 0 00.54-.651L9.927 12h3.823c.69 0 1.25-.56 1.25-1.25v-7.5C15 2.56 14.44 2 13.75 2H1.25zm7.76 10H5.99l-.198 1.05h3.416L9.01 12z"
clipRule="evenodd"
></path>
</svg>
),
},
};
const items: any[] = [];
if (c.site.responsive === "mobile-only") {
items.push(box.mobile);
} else if (c.site.responsive === "desktop-only") {
items.push(box.desktop);
} else {
items.push(box.mobile);
items.push(box.desktop);
}
return <ToolbarBox className="flex" items={items} />;
};

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

@ -75,6 +75,9 @@ export const mainPerItemVisit = (
}
}
};
if (parts.props.className && !parts.props.className.includes("el-active")) {
parts.props.className += " el-active";
}
prop.onInput = (e) => {
e.stopPropagation();
@ -160,10 +163,6 @@ export const mainPerItemVisit = (
};
};
function getCaret(el: any) {
return getSelectionOffset(el);
}
function setCaret(el: any, offset: any) {
setSelectionOffset(el, offset[0], offset[1]);
}

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

@ -60,9 +60,7 @@ export const EdMain = () => {
<div
className={cx(
"flex flex-1 relative overflow-auto",
css`
contain: content;
`
p.mode === "mobile" ? "flex-col items-center" : ""
)}
ref={(el) => {
if (el) {
@ -75,23 +73,39 @@ export const EdMain = () => {
}
}}
>
{meta && <div className={mainStyle(p, meta, local)}>{local.cache}</div>}
<div className={mainStyle(p, meta)}>{local.cache}</div>
</div>
);
};
const mainStyle = (
p: PG,
meta: IMeta,
local: { width: number; height: number }
) => {
const mainStyle = (p: PG, meta?: IMeta) => {
let is_active = meta ? isMetaActive(p, meta) : false;
const scale = parseInt(p.ui.zoom.replace("%", "")) / 100;
let width = `${(1 / scale) * 100}%`;
if (p.mode === "mobile") {
width = `${(1 / scale) * 375}px`;
}
return cx(
"absolute inset-0 flex",
"absolute flex",
css`
width: ${(1 / scale) * 100}%;
contain: content;
`,
p.mode === "mobile"
? css`
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
background: white;
top: 0px;
overflow-x: hidden;
overflow-y: auto;
bottom: 0px;
`
: "inset-0",
css`
width: ${width};
transform: scale(${scale});
transform-origin: 0% 0% 0px;
`,

24
app/web/src/nova/ed/panel/popup/script/monaco.tsx
View File

@ -288,6 +288,8 @@ export const EdScriptMonaco: FC<{}> = () => {
}
onChange={(value) => {
const stype = p.ui.popup.script.type;
p.ui.popup.script.typings.status = "loading";
p.ui.popup.script.wb_render();
if ((value || "").includes(IMPORT_SEPARATOR)) {
const valparts = (value || "").split(IMPORT_SEPARATOR + "\n");
if (valparts.length === 2) local.value = valparts[1];
@ -301,7 +303,7 @@ export const EdScriptMonaco: FC<{}> = () => {
`export const ${p.ui.popup.script.prop_name} = `.length
);
}
} else {
} else {
local.value = value || "";
}
local.render();
@ -318,6 +320,8 @@ export const EdScriptMonaco: FC<{}> = () => {
arg.page_id = p.page.cur.id;
}
let scope: boolean | ParsedScope = false;
p.ui.popup.script.typings.status = "ok";
p.ui.popup.script.typings.err_msg = "";
if (stype === "prop-master") {
p.sync.code.edit({
type: "prop-master",
@ -327,7 +331,7 @@ export const EdScriptMonaco: FC<{}> = () => {
...arg,
});
} else if (stype === "prop-instance") {
scope = await p.sync.code.edit({
const code_result = await p.sync.code.edit({
type: "prop-instance",
mode: mode,
prop_name: p.ui.popup.script.prop_name,
@ -335,18 +339,32 @@ export const EdScriptMonaco: FC<{}> = () => {
value: compress(encode.encode(value || "")),
...arg,
});
if (typeof code_result === "string") {
p.ui.popup.script.typings.status = "error";
p.ui.popup.script.typings.err_msg = code_result;
} else if (typeof code_result === "object") {
scope = code_result;
}
} else {
scope = await p.sync.code.edit({
const code_result = await p.sync.code.edit({
type: "adv",
mode: mode,
item_id: active.item_id,
value: compress(encode.encode(value || "")),
...arg,
});
if (typeof code_result === "string") {
p.ui.popup.script.typings.status = "error";
p.ui.popup.script.typings.err_msg = code_result;
} else if (typeof code_result === "object") {
scope = code_result;
}
}
if (typeof scope === "object") {
meta.item.script = scope;
}
p.ui.popup.script.wb_render();
}
};
p.ui.popup.script.on_close = () => {

227
app/web/src/nova/ed/panel/popup/script/workbench.tsx
View File

@ -5,10 +5,12 @@ import { EdScriptMonaco } from "./monaco";
import { EdScriptSnippet } from "./snippet";
import { useEffect } from "react";
import { Loading } from "../../../../../utils/ui/loading";
import { Tooltip } from "../../../../../utils/ui/tooltip";
export const EdScriptWorkbench = () => {
const p = useGlobal(EDGlobal, "EDITOR");
const local = useLocal({ active_id: "" });
p.ui.popup.script.wb_render = local.render;
useEffect(() => {
if (!local.active_id) {
@ -27,103 +29,144 @@ export const EdScriptWorkbench = () => {
canBack: active.script_nav.list.length > 0,
};
const is_error =
p.ui.popup.script.typings.status === "error" &&
p.ui.popup.script.mode === "js";
return (
<div className="flex flex-1 items-stretch">
<div className="flex flex-1 flex-col ">
<div className="flex border-b items-stretch">
<div className="border-r px-2 flex items-center">
<div
className={cx(
scriptNav.canBack
? "cursor-pointer hover:text-blue-400"
: "text-slate-200"
)}
onClick={() => {
if (scriptNav.canBack) {
active.script_nav.idx = active.script_nav.idx - 1;
const item = active.script_nav.list[active.script_nav.idx];
if (item) {
active.item_id = item.item_id;
active.comp_id = item.comp_id || "";
active.instance = {
item_id: item.instance?.item_id || "",
comp_id: item.instance?.comp_id || "",
};
p.render();
}
}
}}
>
<ChevronLeft />
</div>
<div
className={cx(
scriptNav.canNext
? "cursor-pointer hover:text-blue-400"
: "text-slate-200"
)}
onClick={() => {
if (scriptNav.canNext) {
active.script_nav.idx = active.script_nav.idx + 1;
const item = active.script_nav.list[active.script_nav.idx];
if (item) {
active.item_id = item.item_id;
active.comp_id = item.comp_id || "";
active.instance = {
item_id: item.instance?.item_id || "",
comp_id: item.instance?.comp_id || "",
};
p.render();
}
}
}}
>
<ChevronRight />
</div>
</div>
{p.ui.popup.script.type === "prop-master" && <CompTitleMaster />}
{p.ui.popup.script.type === "prop-instance" && <CompTitleInstance />}
{p.ui.popup.script.type === "item" && (
<>
<div className="flex p-2 space-x-1">
{[
{ type: "js", color: "#e9522c" },
{ type: "css", color: "#188228" },
{ type: "html", color: "#2c3e83" },
].map((e) => {
return (
<div
key={e.type}
className={cx(
css`
color: ${e.color};
border: 1px solid ${e.color};
`,
"uppercase text-white text-[12px] cursor-pointer flex items-center justify-center transition-all hover:opacity-100 w-[40px] text-center",
p.ui.popup.script.mode === e.type
? css`
background: ${e.color};
color: white;
`
: "opacity-30"
)}
onClick={() => {
p.ui.popup.script.mode = e.type as any;
p.render();
}}
>
{e.type}
</div>
);
})}
</div>
{p.ui.popup.script.mode === "js" &&
p.ui.popup.script.type === "item" && <EdScriptSnippet />}
</>
<div
className={cx(
"flex border-b items-stretch justify-between",
is_error && "bg-red-100"
)}
>
<div className={cx("flex items-stretch")}>
<div className="border-r px-2 flex items-center">
<div
className={cx(
scriptNav.canBack
? "cursor-pointer hover:text-blue-400"
: "text-slate-200"
)}
onClick={() => {
if (scriptNav.canBack) {
active.script_nav.idx = active.script_nav.idx - 1;
const item = active.script_nav.list[active.script_nav.idx];
if (item) {
active.item_id = item.item_id;
active.comp_id = item.comp_id || "";
active.instance = {
item_id: item.instance?.item_id || "",
comp_id: item.instance?.comp_id || "",
};
p.render();
}
}
}}
>
<ChevronLeft />
</div>
<div
className={cx(
scriptNav.canNext
? "cursor-pointer hover:text-blue-400"
: "text-slate-200"
)}
onClick={() => {
if (scriptNav.canNext) {
active.script_nav.idx = active.script_nav.idx + 1;
const item = active.script_nav.list[active.script_nav.idx];
if (item) {
active.item_id = item.item_id;
active.comp_id = item.comp_id || "";
active.instance = {
item_id: item.instance?.item_id || "",
comp_id: item.instance?.comp_id || "",
};
p.render();
}
}
}}
>
<ChevronRight />
</div>
</div>
{p.ui.popup.script.type === "prop-master" && <CompTitleMaster />}
{p.ui.popup.script.type === "prop-instance" && (
<CompTitleInstance />
)}
{p.ui.popup.script.type === "item" && (
<>
<div className="flex p-2 space-x-1">
{[
{ type: "js", color: "#e9522c" },
{ type: "css", color: "#188228" },
{ type: "html", color: "#2c3e83" },
].map((e) => {
return (
<div
key={e.type}
className={cx(
css`
color: ${e.color};
border: 1px solid ${e.color};
`,
"uppercase text-white text-[12px] cursor-pointer flex items-center justify-center transition-all hover:opacity-100 w-[40px] text-center",
p.ui.popup.script.mode === e.type
? css`
background: ${e.color};
color: white;
`
: "opacity-30"
)}
onClick={() => {
p.ui.popup.script.mode = e.type as any;
p.render();
}}
>
{e.type}
</div>
);
})}
</div>
{p.ui.popup.script.mode === "js" &&
p.ui.popup.script.type === "item" && <EdScriptSnippet />}
</>
)}
</div>
<div className="flex items-center text-xs pr-2">
{p.ui.popup.script.mode === "js" && (
<div>
{
(
{
ok: <div className="text-green-700">Typings: OK</div>,
loading: <div className="text-slate-500">Loading ⌛</div>,
error: (
<Tooltip
content={
<div className="font-mono whitespace-pre-wrap text-[11px]">
{p.ui.popup.script.typings.err_msg}
</div>
}
delay={0}
>
<div className="text-red-700 border-red-700 border bg-white bg-opacity-80 p-1">
⚠️ Typings: ERROR
</div>
</Tooltip>
),
} as any
)[p.ui.popup.script.typings.status]
}
</div>
)}
</div>
</div>
<div className="relative flex flex-1">
{local.active_id === active.item_id ? (
<EdScriptMonaco />

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

@ -9,11 +9,15 @@ export const edActionDelete = async (p: PG, item: IContent) => {
if (meta) {
const mitem = meta.mitem;
if (mitem) {
mitem.parent.forEach((e, k) => {
if (e == mitem) {
deleteByParent(p, mitem, k);
}
mitem.doc?.transact(() => {
mitem.parent.forEach((e, k) => {
if (e == mitem) {
deleteByParent(p, mitem, k);
}
});
});
await treeRebuild(p);
p.render();
}
}
};
@ -23,17 +27,19 @@ export const edActionDeleteById = async (p: PG, id: string) => {
if (meta) {
const mitem = meta.mitem;
if (mitem) {
mitem.parent.forEach((e, k) => {
if (e == mitem) {
deleteByParent(p, mitem, k);
}
mitem.doc?.transact(() => {
mitem.parent.forEach((e, k) => {
if (e == mitem) {
deleteByParent(p, mitem, k);
}
});
});
await treeRebuild(p);
p.render();
}
}
};
const deleteByParent = (p: PG, mitem: MItem, index: number) => {
const mchild = mitem.parent.get(index);
mitem.parent.delete(index);
treeRebuild(p);
};

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

@ -122,12 +122,14 @@ export const nodeRender: NodeRender<IMeta> = (node, prm) => {
active.item_id = item.id;
p.ui.tree.search = "";
p.render();
if ((item as IContent).type === "text") {
setTimeout(() => {
if (document.activeElement?.tagName === "INPUT") {
return;
}
const el_active = document.querySelector(".el-active") as any;
if (el_active) {
setEndOfContenteditable(el_active);
}