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

wip fix script

This commit is contained in:
Rizky 2023-11-20 14:37:18 +07:00
parent 651dd39f06
commit f9e5f9389d
9 changed files with 217 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.vscode/settings.json vendored
View File

@ -6,6 +6,5 @@
"**/CVS": true,
"**/.DS_Store": true,
"**/Thumbs.db": true
},
"hide-files.files": []
}
}
}

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

@ -12,6 +12,7 @@ import { EdPopCode } from "./panel/popup/code/code";
import { EdPopCompGroup } from "./panel/popup/comp/comp-group";
import { EdPopSite } from "./panel/popup/site/site";
import { EdScriptInit } from "./panel/script/monaco/init";
import { EdPopScript } from "./panel/popup/script/script";
export const EdBase = () => {
const p = useGlobal(EDGlobal, "EDITOR");
@ -47,6 +48,7 @@ export const EdBase = () => {
</div>
<>
<EdPopCode />
<EdPopScript />
<EdPopSite />
<EdPopCompGroup />
<EdScriptInit />

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

@ -143,6 +143,10 @@ export const EDGlobal = {
show_log: false,
list: {} as Record<string, string>,
},
script: {
open: false,
mode: "js" as "js" | "css" | "html",
},
site: null as null | ((site_id: string) => void | Promise<void>),
site_form: null as null | {
group_id: string;

4
app/web/src/nova/ed/panel/main/pane-resize.tsx
View File

@ -67,8 +67,8 @@ const EdPaneResize = (arg: {
<div className={cx("relative")}>
<div
className={cx(
"w-[4px] absolute inset-0 z-50 -mx-[2px] cursor-ew-resize hover:bg-blue-800 transition-all duration-700",
local.dragging && "bg-blue-800"
"w-[4px] absolute inset-0 -mx-[2px] cursor-ew-resize hover:bg-blue-800 transition-all duration-700",
local.dragging && "z-40 bg-blue-800"
)}
onDoubleClick={() => {
arg.onResize(local.default);

23
app/web/src/nova/ed/panel/popup/script/monaco.tsx Normal file
View File

@ -0,0 +1,23 @@
import type { Editor as MonacoEditor, OnMount } from "@monaco-editor/react";
import { jscript } from "../../../../../utils/script/jscript";
export type MonacoEditor = Parameters<OnMount>[0];
export const ScriptMonaco = () => {
const Editor = jscript.editor;
if (!Editor) return null;
return (
<Editor
options={{
minimap: { enabled: false },
wordWrap: "wordWrapColumn",
autoClosingBrackets: "always",
autoIndent: "full",
formatOnPaste: true,
formatOnType: true,
tabSize: 2,
useTabStops: true,
}}
/>
);
};

94
app/web/src/nova/ed/panel/popup/script/script.tsx Normal file
View File

@ -0,0 +1,94 @@
import { useGlobal } from "web-utils";
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 = () => {
const p = useGlobal(EDGlobal, "EDITOR");
return (
<>
<Modal
open={p.ui.popup.script.open}
onOpenChange={(open) => {
if (!open) {
p.ui.popup.script.open = false;
p.render();
}
}}
>
<div className={cx("bg-white select-none flex fixed inset-[50px]")}>
<div
className={cx(
"flex flex-1 relative",
css`
.monaco-editor {
.mtk9 {
color: #022f62;
}
.mtk1 {
color: #022f62;
}
.mtk22 {
color: #015cc5;
}
.mtk8 {
color: #015cc5;
}
.mtk5 {
color: #55bb8a;
}
.monaco-editor.showUnused .squiggly-inline-unnecessary {
opacity: 0.4;
}
.jsx-expression-braces {
color: #7c3813;
}
.jsx-tag-angle-bracket {
color: #619ac3;
}
.jsx-tag-name {
color: #619ac3;
}
.jsx-tag-order-1 {
color: #23863a;
}
.jsx-tag-order-2 {
color: #4e7ca1;
}
.jsx-tag-order-3 {
color: #020360;
}
.jsx-tag-attribute-key {
color: #6f42c1;
}
.jsx-text {
color: #000000;
}
}
`
)}
>
{(!jscript.editor || !jscript.build) && (
<>
{!jscript.editor && !jscript.build && (
<Loading note={"js-code"} backdrop={false} />
)}
{!jscript.editor && jscript.build && (
<Loading note={"js-editor"} backdrop={false} />
)}
{!jscript.build && jscript.editor && (
<Loading note={"js-build"} backdrop={false} />
)}
</>
)}
{jscript.editor && jscript.build && <ScriptWorkbench />}
</div>
</div>
</Modal>
</>
);
};

47
app/web/src/nova/ed/panel/popup/script/workbench.tsx Normal file
View File

@ -0,0 +1,47 @@
import { useGlobal } from "web-utils";
import { ScriptMonaco } from "./monaco";
import { EDGlobal } from "../../../logic/ed-global";
export const ScriptWorkbench = () => {
const p = useGlobal(EDGlobal, "EDITOR");
return (
<div className="flex flex-1 items-stretch">
<div className="flex flex-1 flex-col ">
<div className="flex p-2 border-b space-x-2">
{[
{ type: "js", color: "#e9522c" },
{ type: "css", color: "#188228" },
{ type: "html", color: "#2c3e83" },
].map((e) => {
return (
<div
className={cx(
css`
color: ${e.color};
border: 1px solid ${e.color};
`,
"uppercase text-white text-[12px] cursor-pointer 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>
<div className="relative flex flex-1">
<ScriptMonaco />
</div>
</div>
</div>
);
};

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

@ -1,5 +1,6 @@
import { NodeModel, RenderParams } from "@minoru/react-dnd-treeview";
import { EdMeta } from "../../../../logic/ed-global";
import { EDGlobal, EdMeta } from "../../../../logic/ed-global";
import { useGlobal } from "web-utils";
export const EdTreeAction = ({
node,
@ -8,5 +9,40 @@ export const EdTreeAction = ({
node: NodeModel<EdMeta>;
prm: RenderParams;
}) => {
return <></>;
const p = useGlobal(EDGlobal, "EDITOR");
const item = node.data?.item;
if (!item) return null;
return (
<div className="flex items-center pr-2">
<div
className={cx(
"border rounded-sm text-[9px] flex w-[20px] h-[15px] items-center cursor-pointer justify-center uppercase",
item.adv?.js || item.adv?.css || item.adv?.html
? `opacity-100`
: cx(
`opacity-0 action-script transition-all`,
css`
&:hover {
opacity: 1 !important;
}
`
),
!(item.adv?.js || item.adv?.css || item.adv?.html) &&
`bg-orange-100 border-orange-200 hover:border-orange-500 hover:text-orange-900 hover:bg-orange-300`,
item.adv?.js &&
`bg-orange-100 border-orange-200 hover:border-orange-500 hover:text-orange-900 hover:bg-orange-300`,
item.adv?.css &&
`bg-green-100 border-green-200 hover:border-green-500 hover:text-green-900 hover:bg-green-300`,
item.adv?.html &&
`bg-blue-100 border-blue-200 hover:border-blue-500 hover:text-blue-900 hover:bg-blue-300`
)}
onClick={() => {
p.ui.popup.script.open = true;
p.render();
}}
>
{"</>"}
</div>
</div>
);
};

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

@ -39,6 +39,11 @@ export const nodeRender: NodeRender<EdMeta> = (node, prm) => {
display: flex;
}
}
&:hover {
.action-script {
opacity: 0.6;
}
}
`,
active.item_id === item.id
? ["bg-blue-100"]