temp

src/pages/Draw.tsx

@@ -0,0 +1,64 @@
+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>
+  );
+};