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-11-24 20:50:06 +07:00
parent b5b018084b
commit 79dfc0375b
8 changed files with 142 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/srv/ws/sync/editor/load-page.ts
View File

@ -191,7 +191,7 @@ export const serverWalkMap = (
}
const pcomp = p.scope_comps[item_comp.id];
pcomp.scope[item.id] = { p: arg.parent_ids, s: null };
pcomp.scope[item.id] = { p: arg.parent_ids, n: item.name, s: null };
const js = item.adv?.js;
if (typeof js === "string") {
const res = parseJs(js);
@ -205,9 +205,9 @@ export const serverWalkMap = (
if (!parent_mcomp) {
p.scope[item.id] = {
p: arg.parent_ids,
name: item.name,
n: item.name,
s: null,
} as any;
};
if (scope) p.scope[item.id].s = scope;
}
@ -234,14 +234,14 @@ export const serverWalkMap = (
if (arg.parent_mcomp && !arg.is_prop) {
const pcomp = p.scope_comps[arg.parent_mcomp.id];
pcomp.scope[item.id] = { p: arg.parent_ids, s: null };
pcomp.scope[item.id] = { p: arg.parent_ids, n: item.name, s: null };
const js = item.adv?.js;
if (typeof js === "string") {
const scope = parseJs(js);
if (scope) pcomp.scope[item.id].s = scope;
}
} else {
p.scope[item.id] = { p: arg.parent_ids, name: item.name, s: null } as any;
p.scope[item.id] = { p: arg.parent_ids, n: item.name, s: null };
const js = item.adv?.js;
if (typeof js === "string") {
const scope = parseJs(js);

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

@ -34,7 +34,7 @@ export const EdLeft = () => {
<EdTreeSearch />
<div className="tree-body flex relative flex-1 overflow-y-auto overflow-x-hidden">
<div className="absolute inset-0 flex">
<div className="absolute inset-0 flex flex-col">
<DndProvider backend={MultiBackend} options={getBackendOptions()}>
<EdTreeBody />
</DndProvider>

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

@ -25,6 +25,7 @@ export type EComp = typeof EmptyComp;
export type ISingleScope = {
p: string[];
n: string;
s: null | Exclude<ReturnType<typeof parseJs>, undefined>;
};
export type IScope = Record<string, ISingleScope>;

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

@ -1,6 +1,6 @@
import type { OnMount } from "@monaco-editor/react";
import { deepClone } from "web-utils";
import { ISingleScope, PG, active } from "../../../logic/ed-global";
import { EPage, ISingleScope, PG, active } from "../../../logic/ed-global";
type Monaco = Parameters<OnMount>[1];
export type MonacoEditor = Parameters<OnMount>[0];
@ -44,12 +44,16 @@ export const declareScope = async (
export const {};
const __val = ${arg.value};
declare global {
const ${arg.name}: typeof __val;
const ${arg.name}: typeof __val ${
arg.type === "local" ? " & { render: ()=>void}" : ""
};
}`
);
});
};
const layout_scope = {} as Record<string, ISingleScope>;
type IEachArgScope = {
s: ISingleScope;
name: string;
@ -64,8 +68,41 @@ const spreadScope = (
s: ISingleScope,
each: (arg: IEachArgScope) => void
) => {
for (const parent_id of s.p) {
const item = p.page.scope[parent_id];
const parents = [...s.p];
const layout_id = p.site.layout.id;
let layout = null as null | EPage;
if (layout_id && p.page.list[layout_id]) {
layout = p.page.list[layout_id].page;
if (!layout_scope[layout_id]) {
if (layout) {
const scope = Object.values(layout.scope).find((e) => {
return e.n === "content";
});
if (scope) {
layout_scope[layout_id] = scope;
}
}
}
const scope = layout_scope[layout_id];
if (scope) {
parents.shift();
scope.p.forEach((e) => parents.unshift(e));
}
}
for (const parent_id of parents) {
let item = null as null | ISingleScope;
if (layout && layout_scope[layout_id]) {
const scope = layout_scope[layout_id];
if (scope.p.includes(parent_id)) {
item = layout.scope[parent_id];
}
}
if (!item) {
item = p.page.scope[parent_id];
}
if (item) {
const scope = item.s;
if (scope) {

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

@ -3,7 +3,6 @@ import { jscript } from "../../../../../utils/script/jscript";
import { Loading } from "../../../../../utils/ui/loading";
import { Modal } from "../../../../../utils/ui/modal";
import { EDGlobal } from "../../../logic/ed-global";
import { ScriptMonaco } from "./monaco";
import { ScriptWorkbench } from "./workbench";
export const EdPopScript = () => {

58
app/web/src/nova/ed/panel/tree/body.tsx
View File

@ -5,13 +5,13 @@ import {
PlaceholderRender,
TreeMethods,
} from "@minoru/react-dnd-treeview";
import { FC } from "react";
import { useGlobal, useLocal } from "web-utils";
import { EDGlobal, EdMeta, active } from "../../logic/ed-global";
import { DEPTH_WIDTH } from "./node/item/indent";
import { indentHook } from "./node/item/indent-hook";
import { canDrop, nodeOnDrop } from "./node/on-drop";
import { nodeRender } from "./node/render";
import { FC } from "react";
import { DEPTH_WIDTH } from "./node/item/indent";
import { doTreeSearch } from "./search";
export const EdTreeBody = () => {
@ -25,9 +25,15 @@ export const EdTreeBody = () => {
if (p.ui.tree.search) {
tree = doTreeSearch(p);
} else {
if (active.comp_id) {
if (
active.comp_id &&
p.comp.list[active.comp_id] &&
p.comp.list[active.comp_id].tree
) {
tree = p.comp.list[active.comp_id].tree;
} else {
tree = p.page.tree;
}
tree = p.page.tree;
}
if (tree.length === 0)
@ -47,27 +53,29 @@ export const EdTreeBody = () => {
);
return (
<TypedTree
tree={tree}
rootId={"root"}
insertDroppableFirst={false}
classes={treeClasses}
ref={(el) => {
local.tree = el;
}}
sort={false}
dropTargetOffset={10}
render={nodeRender}
onDrop={nodeOnDrop}
canDrop={(_, args) => {
if (!args.dragSource?.data?.item) return false;
return canDrop(p, args);
}}
dragPreviewRender={DragPreview}
placeholderRender={(node, params) => (
<Placeholder node={node} params={params} />
)}
/>
<>
<TypedTree
tree={tree}
rootId={"root"}
insertDroppableFirst={false}
classes={treeClasses}
ref={(el) => {
local.tree = el;
}}
sort={false}
dropTargetOffset={10}
render={nodeRender}
onDrop={nodeOnDrop}
canDrop={(_, args) => {
if (!args.dragSource?.data?.item) return false;
return canDrop(p, args);
}}
dragPreviewRender={DragPreview}
placeholderRender={(node, params) => (
<Placeholder node={node} params={params} />
)}
/>
</>
);
};

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

@ -13,7 +13,10 @@ export const EdTreeAction = ({
const p = useGlobal(EDGlobal, "EDITOR");
const item = node.data?.item;
if (!item) return null;
const isComponent = item.type === "item" && !!item.component?.id;
const comp = {
enabled: item.type === "item" && !!item.component?.id,
id: item.type === "item" && item.component ? item.component.id : "",
};
let mode = "";
if (item.adv?.js) mode = "js";
@ -22,27 +25,61 @@ export const EdTreeAction = ({
return (
<div className="flex items-center pr-1">
{isComponent && (
<Tooltip
content="Edit Component"
className="flex items-center border border-slate-500 bg-white rounded-sm text-[10px] px-[2px] cursor-pointer hover:bg-purple-100 hover:border-purple-600"
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
{comp.enabled && (
<>
{comp.id !== active.comp_id && (
<Tooltip content="Edit Component">
<div
className="flex items-center border border-slate-500 bg-white rounded-sm text-[10px] px-[2px] cursor-pointer hover:bg-purple-100 hover:border-purple-600"
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
const comp_id = item.component?.id;
if (comp_id) {
active.comp_id = comp_id;
active.comp_item_id = item.id;
p.render();
}
}}
>
<>Edit</>
</Tooltip>
const comp_id = comp.id;
if (comp_id) {
active.comp_id = comp_id;
active.comp_item_id = item.id;
const root = p.comp.list[comp_id].tree.find(
(e) => e.parent === "root"
);
if (root && typeof root.id === "string") {
active.item_id = root.id;
}
p.render();
}
}}
>
Edit
</div>
</Tooltip>
)}
{comp.id === active.comp_id && (
<>
<Tooltip content="Edit Component">
<div
className="flex items-center border border-slate-500 bg-white rounded-sm text-[10px] px-[2px] cursor-pointer hover:bg-purple-100 hover:border-purple-600"
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
if (active.comp_id) {
active.comp_id = "";
active.item_id = active.comp_item_id;
active.comp_item_id = "";
p.render();
}
}}
>
Close
</div>
</Tooltip>
</>
)}
</>
)}
{!isComponent && (
{!comp.enabled && (
<Tooltip
content={`Edit ${mode}`}
className={cx(

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

@ -34,11 +34,6 @@ export const nodeRender: NodeRender<EdMeta> = (node, prm) => {
"relative border-b flex items-stretch outline-none min-h-[26px]",
prm.hasChild && "has-child",
css`
&:focus {
.focus {
display: flex;
}
}
&:hover {
.action-script {
opacity: 0.6;
@ -251,7 +246,11 @@ export const nodeRender: NodeRender<EdMeta> = (node, prm) => {
p.page.render();
}}
>
<div className="focus hidden absolute left-0 bottom-0 top-0 w-[4px] bg-blue-500"></div>
{active.item_id === item.id && (
<div
className={cx("absolute left-0 bottom-0 top-0 w-[4px] bg-blue-500")}
></div>
)}
{local.rightClick && (
<EdTreeCtxMenu
node={node}