65 lines
1.8 KiB
TypeScript
65 lines
1.8 KiB
TypeScript
import { useEffect, useLayoutEffect, useRef, useState } from 'react';
|
|
import { createMarkStore, store } from '../store';
|
|
console.log('store', store);
|
|
import { StoreContextProvider, useStore } from '@kevisual/store/react';
|
|
import { LineChart } from 'lucide-react';
|
|
import { useShallow } from 'zustand/shallow';
|
|
import { Core } from './core/Excalidraw';
|
|
import { OrderedExcalidrawElement } from '@excalidraw/excalidraw/element/types';
|
|
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 = useStore(
|
|
useShallow((value: any) => {
|
|
return {
|
|
mark: value.mark,
|
|
setMark: value.setMark,
|
|
setInfo: value.setInfo,
|
|
};
|
|
}),
|
|
);
|
|
console.log('store show', store);
|
|
const init = useRef(false);
|
|
useEffect(() => {
|
|
if (!init.current && store.mark) {
|
|
init.current = true;
|
|
store.setMark('1234');
|
|
setTimeout(() => {
|
|
store.setMark('info4');
|
|
}, 1000);
|
|
}
|
|
}, [store.mark]);
|
|
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>
|
|
);
|
|
};
|