预览添加选中功能

src/pages/container/preview/index.tsx

@@ -196,7 +196,7 @@ export const PreviewWrapper = () => {
         style={{
           height: 'calc(100% - 32px)',
         }}>
-        <div className='mx-auto border bg-white h-h-full w-[80%] h-[80%] overflow-y-auto' ref={ref}></div>
+        <div className='mx-auto border bg-white h-h-full w-[80%] h-[80%] overflow-scroll scrollbar relative' ref={ref}></div>
       </div>
     </div>
   );

src/pages/panel/deck/index.tsx

@@ -4,6 +4,8 @@ import { useParams } from 'react-router';
 import { query, useStore, ws } from '@/modules';
 import { message } from 'antd';
 import { getContainerData } from '@/modules/deck-to-flow/deck';
+import { usePanelStore } from '../store';
+import { useShallow } from 'zustand/react/shallow';
 export const useListener = (id?: string, opts?: any) => {
   const { refresh } = opts || {};
   const connected = useStore((state) => state.connected);
@@ -65,11 +67,25 @@ export const Deck = () => {
   const id = params.id;
   const ref = useRef<HTMLDivElement>(null);
   const containerRef = useRef<ContainerEdit | null>(null);
-
+  const [pageData, setPageData] = useState<any>({});
+  const [selected, setSelected] = useState<any>(null);
+  const panelStore = usePanelStore(
+    useShallow((state) => {
+      return {
+        updateNodeDataStyle: state.updateNodeDataStyle,
+      };
+    }),
+  );
   useEffect(() => {
     if (!id) return;
     fetch();
   }, []);
+  useEffect(() => {
+    ref.current?.addEventListener('onContainer', onContainer);
+    return () => {
+      ref.current?.removeEventListener('onContainer', onContainer);
+    };
+  }, []);
   const fetch = async () => {
     const res = await query.post({
       path: 'page',
@@ -81,6 +97,7 @@ export const Deck = () => {
       console.log('data', data);
       const { page, containerList } = data;
       const result = getContainerData({ page, containerList });
+      setPageData(result);
       init(result);
     }
     // if (res.code === 200) {
@@ -122,7 +139,60 @@ export const Deck = () => {
     window.c = container;
   };
   useListener(id, { refresh });
+  const onContainer = (e) => {
+    const { data } = e;
+    const types = ['position', 'resize'];
+    if (types.includes(data.type)) {
+      const { type, data: containerData } = data;
+      console.log('containerData', containerData);
 
+      if (type === 'position') {
+        const { cid, left, top, rid } = containerData;
+        const newData = {
+          id: rid,
+          nodeData: {
+            id: cid,
+            data: {
+              style: {
+                left,
+                top,
+              },
+            },
+          },
+        };
+        if (left && top) {
+          panelStore.updateNodeDataStyle(newData);
+        }
+      } else if (type === 'resize') {
+        const { cid, rid, width, height } = containerData;
+        const newData = {
+          id: rid,
+          nodeData: {
+            id: cid,
+            data: {
+              style: {
+                width,
+                height,
+              },
+            },
+          },
+        };
+        if (width && height) {
+          panelStore.updateNodeDataStyle(newData);
+        }
+      }
+    } else if (data.type === 'active') {
+      if (!data?.data?.cid) {
+        setSelected(null);
+        return;
+      }
+      const { cid, rid } = data;
+      console.log('getParent', cid, pageData);
+      setSelected(data);
+    } else {
+      console.log('onContainer', data);
+    }
+  };
   const init = async (data: any[]) => {
     console.log(
       'init',
@@ -137,17 +207,30 @@ export const Deck = () => {
     });
     container.render(id!);
     containerRef.current = container;
+    containerRef.current.event.on('save', (data) => {
+      console.log('save', data);
+      const { id, code } = data;
+    });
   };
   return (
-    <div className='w-full h-full bg-gray-200'>
-      <div className='text-center mb-10 font-bold text-4xl mt-4 '>Preview</div>
-      <div
-        className='flex '
-        style={{
-          height: 'calc(100% - 32px)',
-        }}>
-        <div className='mx-auto border bg-white h-h-full w-[80%] h-[80%]' ref={ref}></div>
+    <div className='w-full h-full relative'>
+      <div className='w-full h-full bg-gray-200 '>
+        <div className='text-center mb-10 font-bold text-4xl mt-4 '>Deck</div>
+        <div
+          className='flex '
+          style={{
+            height: 'calc(100% - 32px)',
+          }}>
+          <div className='mx-auto border bg-white  w-[80%] h-[80%] scrollbar overflow-scroll relative' ref={ref}></div>
+        </div>
       </div>
+      {selected && (
+        <div className='absolute bottom-5 z-50 w-full h-[200px]'>
+          <div className=' p-2 card w-[80%]  mx-auto border bg-red-50 overflow-scroll scrollbar'>
+            <pre>{JSON.stringify(selected, null, 2)}</pre>
+          </div>
+        </div>
+      )}
     </div>
   );
 };

src/pages/panel/store/panel.ts

@@ -13,6 +13,7 @@ type PanelStore = {
   getPanel: (id?: string) => Promise<void>;
   saveNodesEdges: (data: { nodes?: any[]; edges?: any[]; viewport?: any }) => Promise<void>;
   updateNodeData: (data: any) => Promise<void>;
+  updateNodeDataStyle: (data: any) => Promise<any>;
 };
 export const usePanelStore = create<PanelStore>((set, get) => {
   return {
@@ -97,5 +98,29 @@ export const usePanelStore = create<PanelStore>((set, get) => {
         message.error(res.msg || 'Request failed');
       }
     },
+    updateNodeDataStyle: async (data) => {
+      const { loading } = get();
+      if (loading) {
+        message.error('Request in progress, please wait');
+        return;
+      }
+      const loaded = message.loading('Saving...', 0);
+      set({ loading: true });
+      const res = await query.post({
+        path: 'page',
+        key: 'updateNode',
+        data: data,
+      });
+      loaded();
+      set({ loading: false });
+      if (res.code === 200) {
+        message.success('Success');
+        // getList();
+        return true;
+      } else {
+        message.error(res.msg || 'Request failed');
+      }
+      return false;
+    },
   };
 });