58 lines
1.5 KiB
TypeScript
58 lines
1.5 KiB
TypeScript
import { useEffect, useLayoutEffect, useRef, useState } from 'react';
|
|
import { createMarkStore, store, useMarkStore } from '../store';
|
|
console.log('store', store);
|
|
import { StoreContextProvider } from '@kevisual/store/react';
|
|
import { LineChart } from 'lucide-react';
|
|
import { useShallow } from 'zustand/shallow';
|
|
import { Core } from './core/Excalidraw';
|
|
export const DrawLayout = ({ children }: { children: React.ReactNode }) => {
|
|
return (
|
|
<StoreContextProvider id='draw'>
|
|
<div className='h-full w-full'>{children}</div>
|
|
<DrawHeader />
|
|
</StoreContextProvider>
|
|
);
|
|
};
|
|
export const Draw = () => {
|
|
useLayoutEffect(() => {
|
|
// @ts-ignore
|
|
// window.EXCALIDRAW_ASSET_PATH = 'https://esm.sh/@excalidraw/excalidraw@0.18.0/dist/prod/';
|
|
window.EXCALIDRAW_ASSET_PATH = '/';
|
|
}, []);
|
|
return (
|
|
<DrawLayout>
|
|
<ExcaliDrawComponent />
|
|
</DrawLayout>
|
|
);
|
|
};
|
|
export const DrawHeader = () => {
|
|
const store = useMarkStore(
|
|
useShallow((value) => {
|
|
return {
|
|
mark: value.mark,
|
|
setMark: value.setMark,
|
|
setInfo: value.setInfo,
|
|
getList: value.getList,
|
|
};
|
|
}),
|
|
);
|
|
console.log('store show', store);
|
|
useEffect(() => {
|
|
store.getList();
|
|
}, []);
|
|
return (
|
|
<div className='fixed left-0 top-0 z-10 h-10 w-10 bg-red-500'>
|
|
<button>
|
|
<LineChart />
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|
|
export const ExcaliDrawComponent = () => {
|
|
return (
|
|
<StoreContextProvider id='draw2' stateCreator={createMarkStore}>
|
|
<Core />
|
|
</StoreContextProvider>
|
|
);
|
|
};
|