mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-07-11 15:16:28 +08:00
fix:shapaes bidings error
This commit is contained in:
@@ -18,7 +18,6 @@ interface AffineBoardProps {
|
||||
|
||||
const AffineBoard = ({ workspace, rootBlockId }: AffineBoardProps) => {
|
||||
const [app, set_app] = useState<TldrawApp>();
|
||||
|
||||
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),
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
@@ -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<ReturnEditorBlock[]>();
|
||||
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<string, TDShape>);
|
||||
return {
|
||||
shapes: blocksShapes,
|
||||
bindings: JSON.parse(blocks?.bindings ?? '{}'),
|
||||
};
|
||||
};
|
||||
|
||||
export const useBindings = (workspace: string, rootBlockId: string) => {
|
||||
const [bindings, setBindings] = useState<string>();
|
||||
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) : {};
|
||||
};
|
||||
|
||||
@@ -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]] &&
|
||||
|
||||
@@ -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<TDSnapshot> {
|
||||
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<TDSnapshot> {
|
||||
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);
|
||||
|
||||
|
||||
@@ -53,6 +53,7 @@ export type DefaultColumnsValue = {
|
||||
filterConstraint: FilterConstraint;
|
||||
filterWeakSqlConstraint: string;
|
||||
sorterConstraint: SorterConstraint;
|
||||
bindings: StringColumnValue;
|
||||
};
|
||||
|
||||
export const DEFAULT_COLUMN_KEYS = {
|
||||
|
||||
Reference in New Issue
Block a user