mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-08-21 20:11:43 +08:00
doouding
eb185255a3
Fixes [BS-3349](https://linear.app/affine-design/issue/BS-3349/) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Improved edge scrolling during selection dragging for smoother and more responsive viewport navigation. - Dragging area and mouse position tracking now update reactively with viewport changes, ensuring more accurate selection and movement. - **Refactor** - Unified and clarified coordinate handling for dragging and mouse position, with clearer naming and separation between model and browser coordinates. - Simplified selection logic and removed unnecessary accumulated state for cleaner and more maintainable behavior. - Enhanced flexibility in coordinate conversion by allowing viewport transformations relative to arbitrary zoom and center. - Streamlined clipboard paste handling by simplifying mouse position extraction and adjusting attachment options. - **Bug Fixes** - Enhanced overlay and dragging area accuracy by updating position calculations and coordinate transformations. - Fixed paste operations to correctly handle mouse position without unnecessary coordinate conversions. - Corrected drag initiation positions in toolbar and shape dragging to align with viewport-relative coordinates. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
69 lines
1.9 KiB
TypeScript
69 lines
1.9 KiB
TypeScript
import {
|
|
DefaultModeDragType,
|
|
DefaultTool,
|
|
} from '@blocksuite/affine-block-surface';
|
|
import type { RootBlockModel } from '@blocksuite/affine-model';
|
|
import { WidgetComponent, WidgetViewExtension } from '@blocksuite/std';
|
|
import { GfxControllerIdentifier } from '@blocksuite/std/gfx';
|
|
import { cssVarV2 } from '@toeverything/theme/v2';
|
|
import { css, html, nothing, unsafeCSS } from 'lit';
|
|
import { styleMap } from 'lit/directives/style-map.js';
|
|
import { literal, unsafeStatic } from 'lit/static-html.js';
|
|
|
|
export const EDGELESS_DRAGGING_AREA_WIDGET = 'edgeless-dragging-area-rect';
|
|
|
|
export class EdgelessDraggingAreaRectWidget extends WidgetComponent<RootBlockModel> {
|
|
static override styles = css`
|
|
.affine-edgeless-dragging-area {
|
|
position: absolute;
|
|
background: ${unsafeCSS(
|
|
cssVarV2('edgeless/selection/selectionMarqueeBackground', '#1E96EB14')
|
|
)};
|
|
box-sizing: border-box;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-color: ${unsafeCSS(
|
|
cssVarV2('edgeless/selection/selectionMarqueeBorder', '#1E96EB')
|
|
)};
|
|
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
}
|
|
`;
|
|
|
|
get gfx() {
|
|
return this.std.get(GfxControllerIdentifier);
|
|
}
|
|
|
|
override render() {
|
|
const rect = this.gfx.tool.draggingViewportArea$.value;
|
|
const tool = this.gfx.tool.currentTool$.value;
|
|
|
|
if (
|
|
rect.w === 0 ||
|
|
rect.h === 0 ||
|
|
!tool ||
|
|
!(tool instanceof DefaultTool) ||
|
|
tool.dragType !== DefaultModeDragType.Selecting
|
|
)
|
|
return nothing;
|
|
|
|
const style = {
|
|
left: rect.x + 'px',
|
|
top: rect.y + 'px',
|
|
width: rect.w + 'px',
|
|
height: rect.h + 'px',
|
|
};
|
|
|
|
return html`
|
|
<div class="affine-edgeless-dragging-area" style=${styleMap(style)}></div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
export const edgelessDraggingAreaWidget = WidgetViewExtension(
|
|
'affine:page',
|
|
EDGELESS_DRAGGING_AREA_WIDGET,
|
|
literal`${unsafeStatic(EDGELESS_DRAGGING_AREA_WIDGET)}`
|
|
);
|