fix:shapaes bidings error

libs/components/affine-board/src/Board.tsx

@@ -18,7 +18,6 @@ interface AffineBoardProps {
 
 const AffineBoard = ({ workspace, rootBlockId }: AffineBoardProps) => {
     const [app, set_app] = useState<TldrawApp>();
-
     const [document] = useState(() => {
         return {
             ...deepCopy(TldrawApp.default_document),
@@ -45,10 +44,12 @@ const AffineBoard = ({ workspace, rootBlockId }: AffineBoardProps) => {
         };
     });
 
-    const shapes = useShapes(workspace, rootBlockId);
+    const { shapes, bindings } = useShapes(workspace, rootBlockId);
+
+    // const bindings = useBindings(workspace, rootBlockId);
     useEffect(() => {
         if (app) {
-            app.replacePageContent(shapes || {}, {}, {});
+            app.replacePageContent(shapes || {}, bindings, {});
         }
     }, [app, shapes]);
 
@@ -62,8 +63,11 @@ const AffineBoard = ({ workspace, rootBlockId }: AffineBoardProps) => {
                 onMount(app) {
                     set_app(app);
                 },
-                onChangePage(app, shapes, bindings, assets) {
+                async onChangePage(app, shapes, bindings, assets) {
-                    Promise.all(
+                    console.log('shapes, bindings: ', shapes, bindings);
+                    //
+
+                    await Promise.all(
                         Object.entries(shapes).map(async ([id, shape]) => {
                             if (shape === undefined) {
                                 return services.api.editorBlock.delete({
@@ -91,6 +95,21 @@ const AffineBoard = ({ workspace, rootBlockId }: AffineBoardProps) => {
                                         });
                                 }
                                 shape.affineId = block.id;
+                                Object.keys(bindings).forEach(bilingKey => {
+                                    if (!bindings[bilingKey]) {
+                                        delete bindings[bilingKey];
+                                    }
+                                    if (
+                                        bindings[bilingKey]?.fromId === shape.id
+                                    ) {
+                                        bindings[bilingKey].fromId = block.id;
+                                    }
+                                    if (
+                                        bindings[bilingKey]?.toId === shape.id
+                                    ) {
+                                        bindings[bilingKey].toId = block.id;
+                                    }
+                                });
                                 return services.api.editorBlock.update({
                                     workspace: shape.workspace,
                                     id: block.id,
@@ -103,6 +122,22 @@ const AffineBoard = ({ workspace, rootBlockId }: AffineBoardProps) => {
                             }
                         })
                     );
+                    // let pageBindings = services.api.editorBlock.get({workspace: workspace,ids:[rootBlockId]})?[0]
+                    let block = (
+                        await services.api.editorBlock.get({
+                            workspace: workspace,
+                            ids: [rootBlockId],
+                        })
+                    )?.[0];
+                    services.api.editorBlock.update({
+                        workspace: workspace,
+                        id: block.id,
+                        properties: {
+                            bindings: {
+                                value: JSON.stringify(bindings),
+                            },
+                        },
+                    });
                 },
             }}
         />

libs/components/affine-board/src/hooks/use-shapes.ts

@@ -9,24 +9,45 @@ export const useShapes = (workspace: string, rootBlockId: string) => {
     const { pageClientWidth } = usePageClientWidth();
     // page padding left and right total 300px
     const editorShapeInitSize = pageClientWidth - 300;
-    const [blocks, setBlocks] = useState<ReturnEditorBlock[]>();
+    const [blocks, setBlocks] = useState<{
+        shapes: [ReturnEditorBlock[]];
+        bindings: string;
+    }>();
     useEffect(() => {
-        services.api.editorBlock
+        Promise.all([
-            .get({ workspace, ids: [rootBlockId] })
+            services.api.editorBlock
-            .then(async blockData => {
+                .get({ workspace, ids: [rootBlockId] })
-                const shapes = await Promise.all(
+                .then(async blockData => {
-                    (blockData?.[0]?.children || []).map(async childId => {
+                    const shapes = await Promise.all(
-                        const childBlock = (
+                        (blockData?.[0]?.children || []).map(async childId => {
-                            await services.api.editorBlock.get({
+                            const childBlock = (
-                                workspace,
+                                await services.api.editorBlock.get({
-                                ids: [childId],
+                                    workspace,
-                            })
+                                    ids: [childId],
-                        )?.[0];
+                                })
-                        return childBlock;
+                            )?.[0];
-                    })
+                            return childBlock;
-                );
+                        })
-                setBlocks(shapes);
+                    );
-            });
+                    return shapes;
+                    // setBlocks(shapes);
+                }),
+        ]).then(shapes => {
+            console.log(shapes);
+            services.api.editorBlock
+                .get({
+                    workspace: workspace,
+                    ids: [rootBlockId],
+                })
+                .then(blcoks => {
+                    setBlocks({
+                        shapes,
+                        bindings: blcoks[0].properties.bindings?.value,
+                    });
+                    // setBindings(blcoks[0].properties.bindings?.value);
+                });
+        });
+
         let unobserve: () => void;
         services.api.editorBlock
             .observe({ workspace, id: rootBlockId }, async blockData => {
@@ -40,8 +61,23 @@ export const useShapes = (workspace: string, rootBlockId: string) => {
                         )?.[0];
                         return childBlock;
                     })
-                );
+                ).then(shapes => {
-                setBlocks(shapes);
+                    console.log(shapes);
+                    services.api.editorBlock
+                        .get({
+                            workspace: workspace,
+                            ids: [rootBlockId],
+                        })
+                        .then(blcoks => {
+                            setBlocks({
+                                shapes: [shapes],
+                                bindings: blcoks[0].properties.bindings?.value,
+                            });
+                            // setBindings(blcoks[0].properties.bindings?.value);
+                        });
+                });
+                return shapes;
+                // setBlocks(shapes);
             })
             .then(cb => {
                 unobserve = cb;
@@ -53,8 +89,7 @@ export const useShapes = (workspace: string, rootBlockId: string) => {
     }, [workspace, rootBlockId]);
 
     let groupCount = 0;
-
+    let blocksShapes = blocks?.shapes[0]?.reduce((acc, block) => {
-    return blocks?.reduce((acc, block) => {
         const shapeProps = block.properties.shapeProps?.value
             ? JSON.parse(block.properties.shapeProps.value)
             : {};
@@ -75,4 +110,24 @@ export const useShapes = (workspace: string, rootBlockId: string) => {
 
         return acc;
     }, {} as Record<string, TDShape>);
+    return {
+        shapes: blocksShapes,
+        bindings: JSON.parse(blocks?.bindings ?? '{}'),
+    };
+};
+
+export const useBindings = (workspace: string, rootBlockId: string) => {
+    const [bindings, setBindings] = useState<string>();
+    useEffect(() => {
+        services.api.editorBlock
+            .get({
+                workspace: workspace,
+                ids: [rootBlockId],
+            })
+            .then(blcoks => {
+                setBindings(blcoks[0].properties.bindings?.value);
+            });
+        return () => {};
+    }, [workspace, rootBlockId]);
+    return bindings ? JSON.parse(bindings) : {};
 };

libs/components/board-draw/src/TlDraw.tsx

@@ -13,6 +13,8 @@ import {
     TDStatus,
 } from '@toeverything/components/board-types';
 import { styled } from '@toeverything/components/ui';
+// import { FocusButton } from '~components/FocusButton';
+import { usePageClientWidth } from '@toeverything/datasource/state';
 import {
     memo,
     useEffect,
@@ -22,22 +24,20 @@ import {
     useState,
     type RefObject,
 } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { CommandPanel } from './components/command-panel';
+// import { TopPanel } from '~components/TopPanel';
+import { ContextMenu } from './components/context-menu';
+import { ErrorFallback } from './components/error-fallback';
+import { Loading } from './components/loading';
 import { ToolsPanel } from './components/tools-panel';
+import { ZoomBar } from './components/zoom-bar';
 import {
     TldrawContext,
     useKeyboardShortcuts,
     useStylesheet,
     useTldrawApp,
 } from './hooks';
-// import { TopPanel } from '~components/TopPanel';
-import { ContextMenu } from './components/context-menu';
-// import { FocusButton } from '~components/FocusButton';
-import { usePageClientWidth } from '@toeverything/datasource/state';
-import { ErrorBoundary } from 'react-error-boundary';
-import { CommandPanel } from './components/command-panel';
-import { ErrorFallback } from './components/error-fallback';
-import { Loading } from './components/loading';
-import { ZoomBar } from './components/zoom-bar';
 
 export interface TldrawProps extends TldrawAppCtorProps {
     /**
@@ -295,7 +295,6 @@ const InnerTldraw = memo(function InnerTldraw({
     const pageState = document.pageStates[page.id];
     const assets = document.assets;
     const { selectedIds } = pageState;
-
     const isHideBoundsShape =
         selectedIds.length === 1 &&
         page.shapes[selectedIds[0]] &&

libs/components/board-state/src/tldraw-app.ts

@@ -15,13 +15,13 @@ import {
     TLPointerEventHandler,
     TLShapeCloneHandler,
     TLWheelEventHandler,
-    Utils,
+    Utils
 } from '@tldraw/core';
 import { Vec } from '@tldraw/vec';
 import {
     clearPrevSize,
     defaultStyle,
-    shapeUtils,
+    shapeUtils
 } from '@toeverything/components/board-shapes';
 import {
     AlignType,
@@ -54,7 +54,7 @@ import {
     TDUser,
     TldrawCommand,
     USER_COLORS,
-    VIDEO_EXTENSIONS,
+    VIDEO_EXTENSIONS
 } from '@toeverything/components/board-types';
 import { MIN_PAGE_WIDTH } from '@toeverything/components/editor-core';
 import {
@@ -67,7 +67,7 @@ import {
     migrate,
     openAssetFromFileSystem,
     openFromFileSystem,
-    saveToFileSystem,
+    saveToFileSystem
 } from './data';
 import { getClipboard, setClipboard } from './idb-clipboard';
 import { StateManager } from './manager/state-manager';
@@ -440,7 +440,6 @@ export class TldrawApp extends StateManager<TDSnapshot> {
                         if (visitedShapes.has(fromShape)) {
                             return;
                         }
-
                         // We only need to update the binding's "from" shape (an arrow)
                         const fromDelta = TLDR.update_arrow_bindings(
                             page,
@@ -856,14 +855,15 @@ export class TldrawApp extends StateManager<TDSnapshot> {
                 if (!page.bindings[binding.id]) {
                     return;
                 }
-
                 const fromShape = page.shapes[binding.fromId] as ArrowShape;
 
                 if (visitedShapes.has(fromShape)) {
                     return;
                 }
 
+                
                 // We only need to update the binding's "from" shape (an arrow)
+               
                 const fromDelta = TLDR.update_arrow_bindings(page, fromShape);
                 visitedShapes.add(fromShape);
 

libs/datasource/db-service/src/services/editor-block/utils/column/default-config.ts

@@ -53,6 +53,7 @@ export type DefaultColumnsValue = {
     filterConstraint: FilterConstraint;
     filterWeakSqlConstraint: string;
     sorterConstraint: SorterConstraint;
+    bindings: StringColumnValue;
 };
 
 export const DEFAULT_COLUMN_KEYS = {