This commit is contained in:
Rizky 2023-10-28 12:44:55 +07:00
parent 8f44273abb
commit c1986687d6
4 changed files with 29 additions and 3 deletions

View File

@ -11,6 +11,7 @@ import { EdPopCompGroup } from "./panel/popup/comp/comp-group";
import { EdPopSite } from "./panel/popup/site/site"; import { EdPopSite } from "./panel/popup/site/site";
import { EdScriptInit } from "./panel/script/monaco/init"; import { EdScriptInit } from "./panel/script/monaco/init";
import { EdScriptSite } from "./panel/script/site"; import { EdScriptSite } from "./panel/script/site";
import { EdRight } from "./ed-right";
export const EdBase = () => { export const EdBase = () => {
const p = useGlobal(EDGlobal, "EDITOR"); const p = useGlobal(EDGlobal, "EDITOR");
@ -41,6 +42,8 @@ export const EdBase = () => {
<EdLeft /> <EdLeft />
<EdPane type="left" /> <EdPane type="left" />
<EdMain /> <EdMain />
<EdPane type="right" />
<EdRight />
</div> </div>
<> <>
<EdPopSite /> <EdPopSite />

View File

@ -0,0 +1,18 @@
import { useGlobal } from "web-utils";
import { EDGlobal } from "./logic/ed-global";
export const EdRight = () => {
const p = useGlobal(EDGlobal, "EDITOR");
return (
<div
className={cx(
css`
width: ${p.ui.layout.right}px;
`,
"border-l"
)}
>
</div>
);
};

View File

@ -1,3 +1,3 @@
export const EdMain = () => { export const EdMain = () => {
return <div className="flex flex-1 bg-red-500"></div>; return <div className="flex flex-1"></div>;
}; };

View File

@ -9,9 +9,10 @@ export const EdPane = ({ type }: { type: "left" | "right" }) => {
minSize={200} minSize={200}
size={p.ui.layout[type]} size={p.ui.layout[type]}
onResize={(size) => { onResize={(size) => {
p.ui.layout.left = size; p.ui.layout[type] = size;
p.render(); p.render();
}} }}
position={type}
onDone={(size) => { onDone={(size) => {
localStorage.setItem("prasi-layout-" + type, size.toString()); localStorage.setItem("prasi-layout-" + type, size.toString());
}} }}
@ -24,6 +25,7 @@ const EdPaneResize = (arg: {
size: number; size: number;
onResize: (size: number) => void; onResize: (size: number) => void;
onDone: (size: number) => void; onDone: (size: number) => void;
position: "left" | "right";
}) => { }) => {
const local = useLocal({ const local = useLocal({
default: arg.size, default: arg.size,
@ -51,7 +53,10 @@ const EdPaneResize = (arg: {
onPointerMove={(e) => { onPointerMove={(e) => {
local.result = Math.max( local.result = Math.max(
arg.minSize, arg.minSize,
local.size + e.clientX - local.sx local.size +
(arg.position === "left"
? e.clientX - local.sx
: local.sx - e.clientX)
); );
arg.onResize(local.result); arg.onResize(local.result);
}} }}