This commit is contained in:
Rizky 2024-01-23 06:45:23 +07:00
parent edbbe34310
commit df73b97c2b
2 changed files with 98 additions and 89 deletions

View File

@ -113,11 +113,13 @@ export const prepDCode = async (site_id: string) => {
} }
if (exists) { if (exists) {
Bun.spawn({ const chmod = Bun.spawn({
cmd: ["chmod", "777", "-R", "."], cmd: ["chmod", "-R", "777", "."],
cwd: dir.path(`${g.datadir}/site}`), cwd: dir.path(`${g.datadir}/site`),
}); });
await chmod.exited;
const src_bin = Y.encodeStateAsUpdate(docs.code[site_id].src as Doc); const src_bin = Y.encodeStateAsUpdate(docs.code[site_id].src as Doc);
const build_bin = Y.encodeStateAsUpdate(docs.code[site_id].build as Doc); const build_bin = Y.encodeStateAsUpdate(docs.code[site_id].build as Doc);

View File

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