diff --git a/libs/components/affine-board/src/Board.tsx b/libs/components/affine-board/src/Board.tsx
index 497720d2bd..af9e8982fe 100644
--- a/libs/components/affine-board/src/Board.tsx
+++ b/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);
diff --git a/libs/components/board-draw/src/components/command-panel/ArrowTo.tsx b/libs/components/board-draw/src/components/command-panel/ArrowTo.tsx
new file mode 100644
index 0000000000..21f37a9fbc
--- /dev/null
+++ b/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 (
+
+ {arrowToArr.map((arrow: any) => {
+ return (
+ jumpToNextShap(arrow)}
+ >
+ {arrow.name}
+
+ );
+ })}
+
+ }
+ >
+
+
+
+
+
+
+ );
+};
diff --git a/libs/components/board-draw/src/components/command-panel/CommandPanel.tsx b/libs/components/board-draw/src/components/command-panel/CommandPanel.tsx
index c07bfa88b4..94e28bdc2f 100644
--- a/libs/components/board-draw/src/components/command-panel/CommandPanel.tsx
+++ b/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}
>
) : null,
+ toNextShap: (
+
+ ),
};
const nodes = Object.entries(configNodes).filter(([key, node]) => !!node);
diff --git a/libs/components/board-draw/src/components/command-panel/FontSizeConfig.tsx b/libs/components/board-draw/src/components/command-panel/FontSizeConfig.tsx
index c35226911c..38fbbfae22 100644
--- a/libs/components/board-draw/src/components/command-panel/FontSizeConfig.tsx
+++ b/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,
}));
diff --git a/libs/components/board-state/src/tldraw-app.ts b/libs/components/board-state/src/tldraw-app.ts
index 49c352c2e9..34a392db72 100644
--- a/libs/components/board-state/src/tldraw-app.ts
+++ b/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 {
return;
}
-
// We only need to update the binding's "from" shape (an arrow)
-
+
const fromDelta = TLDR.update_arrow_bindings(page, fromShape);
visitedShapes.add(fromShape);