From 4724aee96eb2fbe2b3d92b66211985cf63a548ac Mon Sep 17 00:00:00 2001 From: DiamondThree Date: Thu, 18 Aug 2022 18:22:52 +0800 Subject: [PATCH] fix:shapaes bidings error --- libs/components/affine-board/src/Board.tsx | 45 ++++++++- .../affine-board/src/hooks/use-shapes.ts | 97 +++++++++++++++---- libs/components/board-draw/src/TlDraw.tsx | 19 ++-- libs/components/board-state/src/tldraw-app.ts | 12 +-- .../utils/column/default-config.ts | 1 + 5 files changed, 132 insertions(+), 42 deletions(-) diff --git a/libs/components/affine-board/src/Board.tsx b/libs/components/affine-board/src/Board.tsx index 82c2948c49..d6cb1240bd 100644 --- a/libs/components/affine-board/src/Board.tsx +++ b/libs/components/affine-board/src/Board.tsx @@ -18,7 +18,6 @@ interface AffineBoardProps { const AffineBoard = ({ workspace, rootBlockId }: AffineBoardProps) => { const [app, set_app] = useState(); - 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) { - Promise.all( + async onChangePage(app, shapes, bindings, assets) { + 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), + }, + }, + }); }, }} /> diff --git a/libs/components/affine-board/src/hooks/use-shapes.ts b/libs/components/affine-board/src/hooks/use-shapes.ts index 7d07a25957..c7f22744ed 100644 --- a/libs/components/affine-board/src/hooks/use-shapes.ts +++ b/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(); + const [blocks, setBlocks] = useState<{ + shapes: [ReturnEditorBlock[]]; + bindings: string; + }>(); useEffect(() => { - services.api.editorBlock - .get({ workspace, ids: [rootBlockId] }) - .then(async blockData => { - const shapes = await Promise.all( - (blockData?.[0]?.children || []).map(async childId => { - const childBlock = ( - await services.api.editorBlock.get({ - workspace, - ids: [childId], - }) - )?.[0]; - return childBlock; - }) - ); - setBlocks(shapes); - }); + Promise.all([ + services.api.editorBlock + .get({ workspace, ids: [rootBlockId] }) + .then(async blockData => { + const shapes = await Promise.all( + (blockData?.[0]?.children || []).map(async childId => { + const childBlock = ( + await services.api.editorBlock.get({ + workspace, + ids: [childId], + }) + )?.[0]; + return childBlock; + }) + ); + 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; }) - ); - setBlocks(shapes); + ).then(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; - - return blocks?.reduce((acc, block) => { + let blocksShapes = blocks?.shapes[0]?.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); + return { + shapes: blocksShapes, + bindings: JSON.parse(blocks?.bindings ?? '{}'), + }; +}; + +export const useBindings = (workspace: string, rootBlockId: string) => { + const [bindings, setBindings] = useState(); + 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) : {}; }; diff --git a/libs/components/board-draw/src/TlDraw.tsx b/libs/components/board-draw/src/TlDraw.tsx index 338fffeeaf..1961367235 100644 --- a/libs/components/board-draw/src/TlDraw.tsx +++ b/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]] && diff --git a/libs/components/board-state/src/tldraw-app.ts b/libs/components/board-state/src/tldraw-app.ts index e4b7a8a34f..79d7215e99 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'; @@ -440,7 +440,6 @@ export class TldrawApp extends StateManager { 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 { 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); diff --git a/libs/datasource/db-service/src/services/editor-block/utils/column/default-config.ts b/libs/datasource/db-service/src/services/editor-block/utils/column/default-config.ts index f2d1c861b6..ca51be0f8c 100644 --- a/libs/datasource/db-service/src/services/editor-block/utils/column/default-config.ts +++ b/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 = {