feat add jump shapes

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