mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-08-02 01:49:51 +08:00
fix(editor): remove copy-as-png from toolbar of surface-ref (#11493)
This commit is contained in:
@@ -11,7 +11,6 @@ import { CaptionIcon, CopyIcon, DeleteIcon } from '@blocksuite/icons/lit';
|
|||||||
import { html } from 'lit';
|
import { html } from 'lit';
|
||||||
|
|
||||||
import { SurfaceRefBlockComponent } from '../surface-ref-block';
|
import { SurfaceRefBlockComponent } from '../surface-ref-block';
|
||||||
import { surfaceRefToBlob, writeImageBlobToClipboard } from '../utils';
|
|
||||||
|
|
||||||
export const surfaceRefToolbarModuleConfig: ToolbarModuleConfig = {
|
export const surfaceRefToolbarModuleConfig: ToolbarModuleConfig = {
|
||||||
actions: [
|
actions: [
|
||||||
@@ -73,37 +72,6 @@ export const surfaceRefToolbarModuleConfig: ToolbarModuleConfig = {
|
|||||||
return !!surfaceRefBlock.referenceModel;
|
return !!surfaceRefBlock.referenceModel;
|
||||||
},
|
},
|
||||||
actions: [
|
actions: [
|
||||||
{
|
|
||||||
id: 'a.surface-ref-copy-as-image',
|
|
||||||
label: 'Copy as Image',
|
|
||||||
icon: CopyIcon(),
|
|
||||||
placement: ActionPlacement.More,
|
|
||||||
when: ctx => {
|
|
||||||
const surfaceRefBlock = ctx.getCurrentBlockByType(
|
|
||||||
SurfaceRefBlockComponent
|
|
||||||
);
|
|
||||||
if (!surfaceRefBlock) return false;
|
|
||||||
|
|
||||||
return !!surfaceRefBlock.referenceModel;
|
|
||||||
},
|
|
||||||
run: ctx => {
|
|
||||||
const surfaceRefBlock = ctx.getCurrentBlockByType(
|
|
||||||
SurfaceRefBlockComponent
|
|
||||||
);
|
|
||||||
if (!surfaceRefBlock) return;
|
|
||||||
|
|
||||||
surfaceRefToBlob(surfaceRefBlock)
|
|
||||||
.then(async blob => {
|
|
||||||
if (!blob) {
|
|
||||||
toast(ctx.host, 'Failed to render surface-ref to image');
|
|
||||||
} else {
|
|
||||||
await writeImageBlobToClipboard(blob);
|
|
||||||
toast(ctx.host, 'Copied image to clipboard');
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch(console.error);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// TODO(@L-Sun): add duplicate action after refactoring root-block/edgeless
|
// TODO(@L-Sun): add duplicate action after refactoring root-block/edgeless
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -1,22 +1,16 @@
|
|||||||
import { isFrameBlock } from '@blocksuite/affine-block-frame';
|
import { isFrameBlock } from '@blocksuite/affine-block-frame';
|
||||||
import type { SurfaceBlockComponent } from '@blocksuite/affine-block-surface';
|
|
||||||
import { ExportManager } from '@blocksuite/affine-block-surface';
|
|
||||||
import type { SurfaceRefBlockComponent } from '@blocksuite/affine-block-surface-ref';
|
|
||||||
import {
|
import {
|
||||||
GroupElementModel,
|
GroupElementModel,
|
||||||
MindmapElementModel,
|
MindmapElementModel,
|
||||||
ShapeElementModel,
|
ShapeElementModel,
|
||||||
} from '@blocksuite/affine-model';
|
} from '@blocksuite/affine-model';
|
||||||
import { BlockSuiteError } from '@blocksuite/global/exceptions';
|
|
||||||
import { Bound } from '@blocksuite/global/gfx';
|
|
||||||
import { assertType } from '@blocksuite/global/utils';
|
|
||||||
import {
|
import {
|
||||||
EdgelessIcon,
|
EdgelessIcon,
|
||||||
FrameIcon,
|
FrameIcon,
|
||||||
GroupIcon,
|
GroupIcon,
|
||||||
MindmapIcon,
|
MindmapIcon,
|
||||||
} from '@blocksuite/icons/lit';
|
} from '@blocksuite/icons/lit';
|
||||||
import { GfxControllerIdentifier, type GfxModel } from '@blocksuite/std/gfx';
|
import { type GfxModel } from '@blocksuite/std/gfx';
|
||||||
import { html, type TemplateResult } from 'lit';
|
import { html, type TemplateResult } from 'lit';
|
||||||
|
|
||||||
export const noContentPlaceholder = html`
|
export const noContentPlaceholder = html`
|
||||||
@@ -117,46 +111,6 @@ export const noContentPlaceholder = html`
|
|||||||
</svg>
|
</svg>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const surfaceRefToBlob = async (
|
|
||||||
surfaceRefBlock: SurfaceRefBlockComponent
|
|
||||||
): Promise<Blob | null> => {
|
|
||||||
const { referenceModel, previewEditor } = surfaceRefBlock;
|
|
||||||
if (!referenceModel || !previewEditor) return null;
|
|
||||||
|
|
||||||
const exportManager = previewEditor.std.get(ExportManager);
|
|
||||||
const gfx = previewEditor.std.get(GfxControllerIdentifier);
|
|
||||||
|
|
||||||
const { surface } = gfx;
|
|
||||||
if (!surface) return null;
|
|
||||||
const surfaceBlock = previewEditor.std.view.getBlock(surface.id);
|
|
||||||
if (!surfaceBlock) return null;
|
|
||||||
assertType<SurfaceBlockComponent>(surfaceBlock);
|
|
||||||
|
|
||||||
const canvas = await exportManager.edgelessToCanvas(
|
|
||||||
surfaceBlock.renderer,
|
|
||||||
Bound.deserialize(referenceModel.xywh),
|
|
||||||
gfx,
|
|
||||||
undefined,
|
|
||||||
undefined,
|
|
||||||
{ zoom: surfaceBlock.renderer.viewport.zoom }
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!canvas) {
|
|
||||||
throw new BlockSuiteError(
|
|
||||||
BlockSuiteError.ErrorCode.ValueNotExists,
|
|
||||||
'Failed to export edgeless to canvas'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
canvas.toBlob(blob => (blob ? resolve(blob) : reject(null)), 'image/png');
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
export const writeImageBlobToClipboard = async (blob: Blob) => {
|
|
||||||
await navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })]);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const TYPE_ICON_MAP: {
|
export const TYPE_ICON_MAP: {
|
||||||
[key: string]: {
|
[key: string]: {
|
||||||
name: string;
|
name: string;
|
||||||
|
|||||||
Reference in New Issue
Block a user