refactor(editor): adjust ui of surface-ref inner toolbar (#11129)

Close [BS-2803](https://linear.app/affine-design/issue/BS-2803/inserted-frame-ui%E8%B0%83%E6%95%B4)
Close [BS-2815](https://linear.app/affine-design/issue/BS-2815/inserted-group-ui调整)

### What Changes
- Add an inner toolbar for hovered `surface-ref-block`
- Simplify viewport related codes of `surface-ref-block`
- Expose popover floating options from `affine-menu-button`

https://github.com/user-attachments/assets/916b0a22-6271-4a6f-b338-6630e0426967
This commit is contained in:
L-Sun
2025-03-25 03:48:12 +00:00
parent 314e5795eb
commit a2e3d318ba
8 changed files with 382 additions and 452 deletions
@@ -1,6 +1,6 @@
import { EdgelessFrameManagerIdentifier } from '@blocksuite/affine-block-frame';
import { EdgelessCRUDExtension } from '@blocksuite/affine-block-surface';
import { MindmapStyle } from '@blocksuite/affine-model';
import { MindmapStyle, SurfaceRefBlockSchema } from '@blocksuite/affine-model';
import {
type SlashMenuActionItem,
type SlashMenuConfig,
@@ -20,8 +20,7 @@ const surfaceRefSlashMenuConfig: SlashMenuConfig = {
const crud = std.get(EdgelessCRUDExtension);
const frameMgr = std.get(EdgelessFrameManagerIdentifier);
const findSpace = (bound: Bound) => {
const padding = 20;
const findSpace = (bound: Bound, padding = 20) => {
const gfx = std.get(GfxControllerIdentifier);
let elementInFrameBound = gfx.grid.search(bound);
while (elementInFrameBound.length > 0) {
@@ -78,7 +77,7 @@ const surfaceRefSlashMenuConfig: SlashMenuConfig = {
},
group: `5_Edgeless Element@${index++}`,
action: () => {
const bound = findSpace(Bound.fromXYWH([0, 0, 200, 200]));
const bound = findSpace(Bound.fromXYWH([0, 0, 200, 200]), 150);
const { x, y, h } = bound;
const rootW = 145;
@@ -160,6 +159,6 @@ const surfaceRefSlashMenuConfig: SlashMenuConfig = {
};
export const SurfaceRefSlashMenuConfigExtension = SlashMenuConfigExtension(
'affine:surface-ref',
SurfaceRefBlockSchema.model.flavour,
surfaceRefSlashMenuConfig
);