temp

src/App.tsx

@@ -1,12 +1,11 @@
 import { basename } from './modules/basename';
+import { Draw } from './pages/Draw';
 
 console.log('basename', basename);
 export const App = () => {
   return (
-    <div className='bg-slate-200 w-full h-full border'>
-      <div className='test-loading bg-black'>
-        <div></div>
-      </div>
+    <div className='bg-slate-200 w-full h-full'>
+      <Draw />
     </div>
   );
 };

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>
+  );
+};

src/pages/core/Excalidraw.tsx

@@ -0,0 +1,15 @@
+import { Excalidraw } from '@excalidraw/excalidraw';
+import '@excalidraw/excalidraw/index.css';
+import { OrderedExcalidrawElement } from '@excalidraw/excalidraw/element/types';
+import { useState } from 'react';
+
+export const Core = () => {
+  return (
+    <Excalidraw
+      initialData={{ elements: [] }}
+      onChange={(elements) => {
+        console.log('elements', elements);
+      }}
+    />
+  );
+};

src/store/index.ts

@@ -0,0 +1,21 @@
+import { StoreManager } from '@kevisual/store';
+import { useContextKey } from '@kevisual/store/context';
+import { StateCreator, StoreApi } from 'zustand';
+export const store = useContextKey('store', () => {
+  return new StoreManager();
+});
+
+type MarkStore = {
+  mark: string;
+  setMark: (mark: string) => void;
+  info: string;
+  setInfo: (info: string) => void;
+};
+export const createMarkStore = (get: any, set: any, store: any): MarkStore => {
+  return {
+    mark: 'test',
+    setMark: (mark: string) => set(() => ({ mark })),
+    info: 'test info',
+    setInfo: (info: string) => set(() => ({ info })),
+  };
+};