fix:shapaes bidings error

This commit is contained in:
DiamondThree
2022-08-18 18:22:52 +08:00
parent 5d32d656d5
commit 4724aee96e
5 changed files with 132 additions and 42 deletions
+40 -5
View File
@@ -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) : {};
};
+9 -10
View File
@@ -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 = {