generated from template/astro-template
104 lines
2.8 KiB
TypeScript
104 lines
2.8 KiB
TypeScript
import { useEffect, useLayoutEffect, useState } from 'react';
|
|
import { getHistoryState, setHistoryState } from '@kevisual/store/web-page.js';
|
|
import { Draw } from './pages/Draw';
|
|
import { App as Manager, ProviderManagerName, useManagerStore } from '../mark/manager/Manager';
|
|
import { ToastProvider } from '@/modules/toast/Provider';
|
|
|
|
import './index.css';
|
|
import { useShallow } from 'zustand/shallow';
|
|
import { toast } from 'react-toastify';
|
|
|
|
// @ts-ignore
|
|
window.EXCALIDRAW_ASSET_PATH = 'https://esm.sh/@excalidraw/excalidraw@0.18.0/dist/prod/';
|
|
|
|
export const App = () => {
|
|
return (
|
|
<ToastProvider>
|
|
<DrawApp />
|
|
</ToastProvider>
|
|
);
|
|
};
|
|
export const getUrlId = () => {
|
|
const url = new URL(window.location.href);
|
|
return url.searchParams.get('id') || '';
|
|
};
|
|
export const DrawApp = () => {
|
|
const [id, setId] = useState('');
|
|
const urlId = getUrlId();
|
|
|
|
useLayoutEffect(() => {
|
|
const state = getHistoryState();
|
|
if (state?.id) {
|
|
setId(state.id);
|
|
return;
|
|
}
|
|
if (urlId) {
|
|
setId(urlId);
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<div className='bg-white w-full h-full flex'>
|
|
<Manager
|
|
showSearch={true}
|
|
showAdd={true}
|
|
markType={'excalidraw'}
|
|
openMenu={!urlId}
|
|
onClick={(data) => {
|
|
if (data.id !== id) {
|
|
setId('');
|
|
const url = new URL(location.href);
|
|
url.searchParams.set('id', data.id);
|
|
console.log('set url', url.toString());
|
|
setHistoryState({}, url.toString());
|
|
setTimeout(() => {
|
|
setId(data.id);
|
|
}, 200);
|
|
const _store = useManagerStore.getState(ProviderManagerName);
|
|
if (_store.markData) {
|
|
_store.setCurrentMarkId('');
|
|
// _store.setOpen(false);
|
|
_store.setMarkData(undefined);
|
|
}
|
|
} else if (data.id === id) {
|
|
toast.success('已选择当前画布');
|
|
}
|
|
console.log('onClick', data, id);
|
|
}}>
|
|
<div className='h-full grow'>
|
|
<DrawWrapper id={id} setId={setId} />
|
|
</div>
|
|
</Manager>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const DrawWrapper = (props: { id?: string; setId: (id: string) => void }) => {
|
|
const { id, setId } = props;
|
|
const store = useManagerStore(
|
|
useShallow((state) => {
|
|
return {
|
|
currentMarkId: state.currentMarkId,
|
|
};
|
|
}),
|
|
);
|
|
console.log('DrawApp store', store);
|
|
return (
|
|
<>
|
|
{id ? (
|
|
<Draw
|
|
id={id}
|
|
onClose={() => {
|
|
setId('');
|
|
setHistoryState({
|
|
id: '',
|
|
});
|
|
}}
|
|
/>
|
|
) : (
|
|
<div className='flex items-center justify-center h-full text-gray-500'> {store.currentMarkId ? '' : '请先选择一个画布'} </div>
|
|
)}
|
|
</>
|
|
);
|
|
};
|