From 27a35ea6a2a5c4ee60eb5910f60d3f71aea51733 Mon Sep 17 00:00:00 2001 From: DiamondThree Date: Fri, 19 Aug 2022 20:06:44 +0800 Subject: [PATCH] feat add jump shapes --- libs/components/affine-board/src/Board.tsx | 9 ++- .../src/components/command-panel/ArrowTo.tsx | 78 +++++++++++++++++++ .../components/command-panel/CommandPanel.tsx | 7 ++ .../command-panel/FontSizeConfig.tsx | 4 +- libs/components/board-state/src/tldraw-app.ts | 11 ++- 5 files changed, 97 insertions(+), 12 deletions(-) create mode 100644 libs/components/board-draw/src/components/command-panel/ArrowTo.tsx 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);