Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-22 04:26:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix:shapaes bidings error

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
libs/components/affine-board/src/Board.tsx
+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),
},
},
});
},
}}
/>
libs/components/affine-board/src/hooks/use-shapes.ts
+76 -21
View File
@@ -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) : {};
};