feat add jump shapes

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

@@ -109,10 +109,8 @@ const AffineBoard = ({
                                         });
                                 }
                                 shape.affineId = block.id;
+
                                 Object.keys(bindings).forEach(bilingKey => {
-                                    if (!bindings[bilingKey]) {
-                                        delete bindings[bilingKey];
-                                    }
                                     if (
                                         bindings[bilingKey]?.fromId === shape.id
                                     ) {
@@ -142,9 +140,12 @@ const AffineBoard = ({
                             ids: [rootBlockId],
                         })
                     )?.[0].properties.bindings?.value;
+                    console.log(123123123);
                     let pageBindings = JSON.parse(pageBindingsString ?? '{}');
+                    console.log(pageBindings, 3333, bindings);
                     Object.keys(bindings).forEach(bindingsKey => {
-                        if (bindings[bindingsKey] === undefined) {
+                        console.log(345345345345345);
+                        if (!bindings[bindingsKey]) {
                             delete pageBindings[bindingsKey];
                         } else {
                             Object.assign(pageBindings, bindings);

libs/components/board-draw/src/components/command-panel/ArrowTo.tsx

@@ -0,0 +1,78 @@
+import type { TldrawApp } from '@toeverything/components/board-state';
+import type {
+    ArrowBinding,
+    TDShape,
+} from '@toeverything/components/board-types';
+import { ConnectorIcon } from '@toeverything/components/icons';
+import { IconButton, Popover, Tooltip } from '@toeverything/components/ui';
+import { useEffect, useState } from 'react';
+import { ListItemContainer, ListItemTitle } from './FontSizeConfig';
+
+interface GroupAndUnGroupProps {
+    app: TldrawApp;
+    shapes: TDShape[];
+}
+
+export const ArrowTo = ({ app, shapes }: GroupAndUnGroupProps) => {
+    const [arrowToArr, setarrowToArr] = useState([]);
+    useEffect(() => {
+        let allShape = app.shapes;
+        let bindings = app.page.bindings;
+        let activeShape = shapes[0];
+        let toNextShapBindings: ArrowBinding[] = [];
+        let bindingId = '';
+        Object.keys(bindings).forEach(key => {
+            if (bindings[key].toId === activeShape.id) {
+                bindingId = bindings[key].fromId;
+            }
+        });
+        Object.keys(bindings).forEach(key => {
+            if (bindings[key].fromId === bindingId) {
+                toNextShapBindings.push(bindings[key]);
+            }
+        });
+        let ArrowToArr: TDShape[] = [];
+        toNextShapBindings.forEach(binding => {
+            if (binding.toId !== activeShape.id) {
+                allShape.forEach(item => {
+                    console.log(item);
+                    if (item.id === binding.toId) {
+                        ArrowToArr.push(item);
+                    }
+                });
+            }
+        });
+        setarrowToArr(ArrowToArr);
+        return () => {};
+    }, [app.page.bindings, app.shapes]);
+    const jumpToNextShap = (shape: TDShape) => {
+        app.zoomToShapes([shape]);
+    };
+
+    return (
+        <Popover
+            trigger="hover"
+            placement="bottom-start"
+            content={
+                <div>
+                    {arrowToArr.map((arrow: any) => {
+                        return (
+                            <ListItemContainer
+                                key={arrow.id}
+                                onClick={() => jumpToNextShap(arrow)}
+                            >
+                                <ListItemTitle>{arrow.name}</ListItemTitle>
+                            </ListItemContainer>
+                        );
+                    })}
+                </div>
+            }
+        >
+            <Tooltip content="Font Size" placement="top-start">
+                <IconButton>
+                    <ConnectorIcon></ConnectorIcon>
+                </IconButton>
+            </Tooltip>
+        </Popover>
+    );
+};

libs/components/board-draw/src/components/command-panel/CommandPanel.tsx

@@ -2,6 +2,7 @@ import { TLDR, TldrawApp } from '@toeverything/components/board-state';
 import { Divider, Popover, styled } from '@toeverything/components/ui';
 import { Fragment } from 'react';
 import { AlignOperation } from './AlignOperation';
+import { ArrowTo } from './ArrowTo';
 import { BorderColorConfig } from './BorderColorConfig';
 import { DeleteShapes } from './DeleteOperation';
 import { FillColorConfig } from './FillColorConfig';
@@ -106,6 +107,12 @@ export const CommandPanel = ({ app }: { app: TldrawApp }) => {
                 shapes={config.deleteShapes.selectedShapes}
             ></AlignOperation>
         ) : null,
+        toNextShap: (
+            <ArrowTo
+                app={app}
+                shapes={config.deleteShapes.selectedShapes}
+            ></ArrowTo>
+        ),
     };
 
     const nodes = Object.entries(configNodes).filter(([key, node]) => !!node);

libs/components/board-draw/src/components/command-panel/FontSizeConfig.tsx

@@ -86,7 +86,7 @@ export const FontSizeConfig = ({ app, shapes }: FontSizeConfigProps) => {
     );
 };
 
-const ListItemContainer = styled('div')(({ theme }) => ({
+export const ListItemContainer = styled('div')(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
     cursor: 'pointer',
@@ -100,7 +100,7 @@ const ListItemContainer = styled('div')(({ theme }) => ({
     },
 }));
 
-const ListItemTitle = styled('span')(({ theme }) => ({
+export const ListItemTitle = styled('span')(({ theme }) => ({
     marginLeft: '12px',
     color: theme.affine.palette.primaryText,
 }));

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';
@@ -865,9 +865,8 @@ export class TldrawApp extends StateManager<TDSnapshot> {
                     return;
                 }
 
-                
                 // We only need to update the binding's "from" shape (an arrow)
-               
+
                 const fromDelta = TLDR.update_arrow_bindings(page, fromShape);
                 visitedShapes.add(fromShape);