feat: change deck edit style and add agent
This commit is contained in:
@@ -1,11 +1,15 @@
|
||||
import { Container, ContainerEdit } from '@abearxiong/container';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { useParams } from 'react-router';
|
||||
import { query, useStore, ws } from '@/modules';
|
||||
import { message } from 'antd';
|
||||
import { Button, message, Tooltip } from 'antd';
|
||||
import { getContainerData } from '@/modules/deck-to-flow/deck';
|
||||
import { usePanelStore } from '../store';
|
||||
import { useShallow } from 'zustand/react/shallow';
|
||||
import { TextArea } from '@/pages/container/components/TextArea';
|
||||
import { CloseOutlined, SaveOutlined, SelectOutlined } from '@ant-design/icons';
|
||||
import { useDeckPageStore } from './deck-store';
|
||||
import { FormModal } from './Model.tsx';
|
||||
export const useListener = (id?: string, opts?: any) => {
|
||||
const { refresh } = opts || {};
|
||||
const connected = useStore((state) => state.connected);
|
||||
@@ -62,13 +66,15 @@ const getParent = (data: { children?: string[]; [key: string]: any }[], id: stri
|
||||
}
|
||||
return;
|
||||
};
|
||||
|
||||
export const Deck = () => {
|
||||
const params = useParams<{ id: string }>();
|
||||
const id = params.id;
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const containerRef = useRef<ContainerEdit | null>(null);
|
||||
const [pageData, setPageData] = useState<any>({});
|
||||
const [selected, setSelected] = useState<any>(null);
|
||||
const deckPageStore = useDeckPageStore();
|
||||
const { code, setCode } = deckPageStore;
|
||||
const { selected, setSelected } = deckPageStore;
|
||||
const panelStore = usePanelStore(
|
||||
useShallow((state) => {
|
||||
return {
|
||||
@@ -78,12 +84,17 @@ export const Deck = () => {
|
||||
);
|
||||
useEffect(() => {
|
||||
if (!id) return;
|
||||
deckPageStore.setId(id);
|
||||
fetch();
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
ref.current?.addEventListener('onContainer', onContainer);
|
||||
return () => {
|
||||
ref.current?.removeEventListener('onContainer', onContainer);
|
||||
if (ref.current) {
|
||||
const children = ref.current;
|
||||
children.innerHTML = '';
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
const fetch = async () => {
|
||||
@@ -97,23 +108,9 @@ export const Deck = () => {
|
||||
console.log('data', data);
|
||||
const { page, containerList } = data;
|
||||
const result = getContainerData({ page, containerList });
|
||||
setPageData(result);
|
||||
deckPageStore.setPageData(result);
|
||||
init(result);
|
||||
}
|
||||
// if (res.code === 200) {
|
||||
// const data = res.data;
|
||||
// // setData([data]);
|
||||
// console.log('data', data);
|
||||
// const code = {
|
||||
// id: data.id,
|
||||
// title: data.title,
|
||||
// code: data.code,
|
||||
// data: data.data,
|
||||
// };
|
||||
// init([code]);
|
||||
// } else {
|
||||
// message.error(res.msg || 'Failed to fetch data');
|
||||
// }
|
||||
};
|
||||
const refresh = async (data: any) => {
|
||||
console.log('refresh', data);
|
||||
@@ -144,8 +141,6 @@ export const Deck = () => {
|
||||
const types = ['position', 'resize'];
|
||||
if (types.includes(data.type)) {
|
||||
const { type, data: containerData } = data;
|
||||
console.log('containerData', containerData);
|
||||
|
||||
if (type === 'position') {
|
||||
const { cid, left, top, rid } = containerData;
|
||||
const newData = {
|
||||
@@ -154,6 +149,7 @@ export const Deck = () => {
|
||||
id: cid,
|
||||
data: {
|
||||
style: {
|
||||
// position: 'absolute',
|
||||
left,
|
||||
top,
|
||||
},
|
||||
@@ -163,6 +159,10 @@ export const Deck = () => {
|
||||
if (left && top) {
|
||||
panelStore.updateNodeDataStyle(newData);
|
||||
}
|
||||
updateStyle(cid, { left, top });
|
||||
setTimeout(() => {
|
||||
setCodeStyle(cid);
|
||||
}, 1000);
|
||||
} else if (type === 'resize') {
|
||||
const { cid, rid, width, height } = containerData;
|
||||
const newData = {
|
||||
@@ -180,19 +180,85 @@ export const Deck = () => {
|
||||
if (width && height) {
|
||||
panelStore.updateNodeDataStyle(newData);
|
||||
}
|
||||
updateStyle(cid, { width, height });
|
||||
setTimeout(() => {
|
||||
setCodeStyle(cid);
|
||||
}, 1000);
|
||||
}
|
||||
} else if (data.type === 'active') {
|
||||
if (!data?.data?.cid) {
|
||||
setSelected(null);
|
||||
return;
|
||||
}
|
||||
const { cid, rid } = data;
|
||||
console.log('getParent', cid, pageData);
|
||||
const { cid, rid } = data?.data || {};
|
||||
setSelected(data);
|
||||
setCodeStyle(cid);
|
||||
} else {
|
||||
console.log('onContainer', data);
|
||||
}
|
||||
};
|
||||
const onSave = () => {
|
||||
const { cid, rid } = selected?.data || {};
|
||||
let data: any;
|
||||
try {
|
||||
data = JSON.parse(code);
|
||||
} catch (error) {
|
||||
message.error('JSON format error');
|
||||
return;
|
||||
}
|
||||
const newData = {
|
||||
id: rid,
|
||||
nodeData: {
|
||||
id: cid,
|
||||
data: {
|
||||
style: data,
|
||||
},
|
||||
},
|
||||
};
|
||||
panelStore.updateNodeDataStyle(newData);
|
||||
};
|
||||
const setCodeStyle = (cid: string) => {
|
||||
const pageData = deckPageStore.getPageData();
|
||||
const selected = deckPageStore.getSeleted();
|
||||
const _data = pageData.find((item) => item.id === cid);
|
||||
const node = _data?.data?.node || {};
|
||||
if (selected?.data?.cid === cid) {
|
||||
setCode('');
|
||||
setCode(JSON.stringify(node?.data?.style || {}, null, 2));
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
if (selected) {
|
||||
const { cid } = selected?.data || {};
|
||||
cid && setCodeStyle(cid);
|
||||
}
|
||||
}, [deckPageStore.selected]);
|
||||
|
||||
const updateStyle = (rid: string, style: any) => {
|
||||
const pageData = deckPageStore.getPageData();
|
||||
const _pageData = pageData.map((item) => {
|
||||
if (item.id === rid) {
|
||||
return {
|
||||
...item,
|
||||
data: {
|
||||
...item.data,
|
||||
node: {
|
||||
...item.data.node,
|
||||
data: {
|
||||
...item.data.node.data,
|
||||
style: {
|
||||
...item.data.node.data.style,
|
||||
...style,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
return item;
|
||||
});
|
||||
deckPageStore.setPageData([..._pageData]);
|
||||
};
|
||||
const init = async (data: any[]) => {
|
||||
console.log(
|
||||
'init',
|
||||
@@ -215,22 +281,54 @@ export const Deck = () => {
|
||||
return (
|
||||
<div className='w-full h-full relative'>
|
||||
<div className='w-full h-full bg-gray-200 '>
|
||||
<div className='text-center mb-10 font-bold text-4xl mt-4 '>Deck</div>
|
||||
<div className='text-center mb-10 font-bold text-4xl mt-4 flex items-center justify-center group'>
|
||||
Deck
|
||||
<Tooltip>
|
||||
<Button
|
||||
className='ml-4 hidden group-hover:block'
|
||||
icon={<SelectOutlined />}
|
||||
onClick={() => {
|
||||
deckPageStore.setShowEdit(true);
|
||||
}}></Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div
|
||||
className='flex '
|
||||
style={{
|
||||
height: 'calc(100% - 32px)',
|
||||
}}>
|
||||
<div className='mx-auto border bg-white w-[80%] h-[80%] scrollbar overflow-scroll relative' ref={ref}></div>
|
||||
<div className='mx-auto border rounded-md bg-white w-[80%] h-[80%] scrollbar overflow-scroll relative' ref={ref}></div>
|
||||
</div>
|
||||
</div>
|
||||
{selected && (
|
||||
<div className='absolute bottom-5 z-50 w-full h-[200px]'>
|
||||
<div className=' p-2 card w-[80%] mx-auto border bg-red-50 overflow-scroll scrollbar'>
|
||||
<pre>{JSON.stringify(selected, null, 2)}</pre>
|
||||
<div className=' p-2 card w-[80%] mx-auto border bg-slate-200 rounded-md overflow-scroll scrollbar'>
|
||||
{/* <pre>{JSON.stringify(selected, null, 2)}</pre> */}
|
||||
<div>
|
||||
<Button.Group>
|
||||
<Tooltip title='Close'>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setSelected(null);
|
||||
}}
|
||||
icon={<CloseOutlined />}></Button>
|
||||
</Tooltip>
|
||||
<Tooltip title='Save'>
|
||||
<Button
|
||||
onClick={() => {
|
||||
onSave();
|
||||
}}
|
||||
icon={<SaveOutlined />}></Button>
|
||||
</Tooltip>
|
||||
</Button.Group>
|
||||
</div>
|
||||
<div className='h-[200px]'>
|
||||
<TextArea className='h-[100px] rounded-md' value={code} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<FormModal />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user