wip draggable order
This commit is contained in:
Rizky
parent
4bd4356d1c
commit
73dba58f36
|
|
@ -1,9 +1,8 @@
|
|||
import { useGlobal } from "web-utils";
|
||||
import { EDGlobal, active } from "./logic/ed-global";
|
||||
import { EdSidePropComp } from "./panel/side/prop-comp";
|
||||
import { getMetaById } from "./logic/tree/build";
|
||||
import { EdSideStyle } from "./panel/side/side-style";
|
||||
import { EdSidePropInstance } from "./panel/side/prop-instance";
|
||||
import { EdSideStyle } from "./panel/side/side-style";
|
||||
|
||||
export const EdRight = () => {
|
||||
const p = useGlobal(EDGlobal, "EDITOR");
|
||||
|
|
@ -20,7 +19,7 @@ export const EdRight = () => {
|
|||
css`
|
||||
width: ${p.ui.layout.right}px;
|
||||
`,
|
||||
"border-l"
|
||||
"border-l flex flex-col"
|
||||
)}
|
||||
>
|
||||
{!meta ? (
|
||||
|
|
|
|||
|
|
@ -195,7 +195,7 @@ export const EDGlobal = {
|
|||
group: {} as Record<string, Awaited<ReturnType<SAction["comp"]["group"]>>>,
|
||||
},
|
||||
ui: {
|
||||
side: { prop: false },
|
||||
side: { prop: true },
|
||||
layout: {
|
||||
left: parseInt(localStorage.getItem("prasi-layout-left") || "250"),
|
||||
right: parseInt(localStorage.getItem("prasi-layout-right") || "250"),
|
||||
|
|
|
|||
|
|
@ -1,16 +1,56 @@
|
|||
import { useGlobal } from "web-utils";
|
||||
import { EDGlobal, EdMeta } from "../../logic/ed-global";
|
||||
import { IItem } from "../../../../utils/types/item";
|
||||
import {
|
||||
Tree as DNDTree,
|
||||
DndProvider,
|
||||
NodeModel,
|
||||
PlaceholderRender,
|
||||
getBackendOptions,
|
||||
} from "@minoru/react-dnd-treeview";
|
||||
import { FC } from "react";
|
||||
import { HTML5Backend } from "react-dnd-html5-backend";
|
||||
import { useGlobal } from "web-utils";
|
||||
import { IItem } from "../../../../utils/types/item";
|
||||
import { EDGlobal, EdMeta } from "../../logic/ed-global";
|
||||
import { EdPropCompTreeItem, PropItem } from "./prop-comp/tree-item";
|
||||
|
||||
const propRef = {
|
||||
el: null as any,
|
||||
};
|
||||
|
||||
export const EdSidePropComp: FC<{ meta: EdMeta }> = ({ meta }) => {
|
||||
const p = useGlobal(EDGlobal, "EDITOR");
|
||||
|
||||
const item = meta?.item as IItem;
|
||||
if (!item) return null;
|
||||
const TypedTree = DNDTree<PropItem>;
|
||||
|
||||
let filtered = [] as NodeModel<PropItem>[];
|
||||
const mprops = meta.mitem?.get("component")?.get("props");
|
||||
if (mprops && meta.mitem) {
|
||||
mprops.forEach((m, key) => {
|
||||
filtered.push({
|
||||
id: `${item.id}-${key}`,
|
||||
parent: "root",
|
||||
text: key,
|
||||
droppable: true,
|
||||
data: {
|
||||
mitem: meta.mitem as any,
|
||||
prop: m.toJSON() as any,
|
||||
mprop: m,
|
||||
name: key,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
filtered = filtered.sort((a, b) => {
|
||||
if (a.data && b.data) {
|
||||
return a.data.prop.idx - b.data.prop.idx;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col text-[12px]">
|
||||
<div className="flex flex-col text-[12px] flex-1">
|
||||
<div className="flex border-b p-1 h-[35px] items-center bg-slate-50 justify-between select-none">
|
||||
<div className="flex-1 overflow-hidden mr-2 text-ellipsis whitespace-nowrap">
|
||||
{item.name}
|
||||
|
|
@ -26,8 +66,92 @@ export const EdSidePropComp: FC<{ meta: EdMeta }> = ({ meta }) => {
|
|||
</div>
|
||||
</div>
|
||||
<div className="flex flex-1 relative overflow-auto">
|
||||
<div className="absolute inset-0"></div>
|
||||
<div
|
||||
className={cx("absolute inset-0")}
|
||||
ref={(ref) => (propRef.el = ref)}
|
||||
>
|
||||
<DndProvider
|
||||
backend={HTML5Backend}
|
||||
options={getBackendOptions({
|
||||
html5: {
|
||||
rootElement: propRef.el,
|
||||
},
|
||||
})}
|
||||
>
|
||||
<TypedTree
|
||||
tree={filtered}
|
||||
sort={false}
|
||||
onDrop={(tree, { dragSourceId, relativeIndex }) => {
|
||||
const doc = meta.mitem?.doc;
|
||||
doc?.transact(() => {
|
||||
mprops?.forEach((p, key) => {
|
||||
const idx = tree.findIndex(
|
||||
(e) => `${item.id}-${key}` === e.id
|
||||
);
|
||||
if (idx >= 0) {
|
||||
p.set("idx", idx);
|
||||
}
|
||||
});
|
||||
});
|
||||
}}
|
||||
render={EdPropCompTreeItem}
|
||||
rootId={"root"}
|
||||
classes={treeClasses}
|
||||
dropTargetOffset={10}
|
||||
initialOpen={true}
|
||||
placeholderRender={(node, params) => (
|
||||
<Placeholder node={node} params={params} />
|
||||
)}
|
||||
dragPreviewRender={() => <></>}
|
||||
/>
|
||||
</DndProvider>
|
||||
<div className="m-1 border border-blue-200 px-2 self-start text-[13px] hover:bg-blue-100 cursor-pointer">
|
||||
+ New Prop
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const treeClasses = {
|
||||
container: "flex flex-col flex-1",
|
||||
dropTarget: "drop-target",
|
||||
placeholder: "placeholder",
|
||||
draggingSource: css`
|
||||
background: #e4f0ff;
|
||||
|
||||
cursor: not-allowed;
|
||||
`,
|
||||
};
|
||||
|
||||
export const Placeholder: FC<{
|
||||
node: Parameters<PlaceholderRender<PropItem>>[0];
|
||||
params: Parameters<PlaceholderRender<PropItem>>[1];
|
||||
}> = ({ params }) => {
|
||||
return (
|
||||
<div
|
||||
className={cx(
|
||||
"flex items-center bg-blue-50",
|
||||
css`
|
||||
height: 10px;
|
||||
z-index: 99;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
transform: translateY(-50%);
|
||||
right: 0px;
|
||||
`
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cx(
|
||||
"flex-1",
|
||||
css`
|
||||
background-color: #1b73e8;
|
||||
height: 2px;
|
||||
`
|
||||
)}
|
||||
></div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
export const EdPropCompItem = () => {
|
||||
return <div></div>;
|
||||
};
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
import { NodeRender } from "@minoru/react-dnd-treeview";
|
||||
import { MItem } from "../../../../../utils/types/item";
|
||||
import { FMCompDef, FNCompDef } from "../../../../../utils/types/meta-fn";
|
||||
|
||||
export type PropItem = {
|
||||
name: string;
|
||||
mitem: MItem;
|
||||
mprop: FMCompDef;
|
||||
prop: FNCompDef;
|
||||
};
|
||||
|
||||
export const EdPropCompTreeItem: NodeRender<PropItem> = (node, params) => {
|
||||
if (node.id === "root" || node.id === 'proot') {
|
||||
return <></>;
|
||||
}
|
||||
return (
|
||||
<div className="flex items-stretch border-b text-[14px]">
|
||||
<div
|
||||
ref={params.handleRef}
|
||||
className="cursor-pointer flex items-center justify-center text-slate-300 hover:bg-blue-100 hover:text-slate-600 border-r"
|
||||
>
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 15 15"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5.5 4.625C6.12132 4.625 6.625 4.12132 6.625 3.5C6.625 2.87868 6.12132 2.375 5.5 2.375C4.87868 2.375 4.375 2.87868 4.375 3.5C4.375 4.12132 4.87868 4.625 5.5 4.625ZM9.5 4.625C10.1213 4.625 10.625 4.12132 10.625 3.5C10.625 2.87868 10.1213 2.375 9.5 2.375C8.87868 2.375 8.375 2.87868 8.375 3.5C8.375 4.12132 8.87868 4.625 9.5 4.625ZM10.625 7.5C10.625 8.12132 10.1213 8.625 9.5 8.625C8.87868 8.625 8.375 8.12132 8.375 7.5C8.375 6.87868 8.87868 6.375 9.5 6.375C10.1213 6.375 10.625 6.87868 10.625 7.5ZM5.5 8.625C6.12132 8.625 6.625 8.12132 6.625 7.5C6.625 6.87868 6.12132 6.375 5.5 6.375C4.87868 6.375 4.375 6.87868 4.375 7.5C4.375 8.12132 4.87868 8.625 5.5 8.625ZM10.625 11.5C10.625 12.1213 10.1213 12.625 9.5 12.625C8.87868 12.625 8.375 12.1213 8.375 11.5C8.375 10.8787 8.87868 10.375 9.5 10.375C10.1213 10.375 10.625 10.8787 10.625 11.5ZM5.5 12.625C6.12132 12.625 6.625 12.1213 6.625 11.5C6.625 10.8787 6.12132 10.375 5.5 10.375C4.87868 10.375 4.375 10.8787 4.375 11.5C4.375 12.1213 4.87868 12.625 5.5 12.625Z"
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-1 pl-1 hover:bg-blue-100 cursor-pointer">
|
||||
{node.text}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in New Issue