fix(editor): should record edgeless connector mode (#12426)

Close [BS-3355](https://linear.app/affine-design/issue/BS-3355/白板快捷键c没有记住上次用的connector形状)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Added the ability to cycle through connector modes (Curve, Orthogonal, Straight) using the 'c' keyboard shortcut when the connector tool is active.
- **Bug Fixes**
  - Improved the logic for remembering and restoring the last used connector mode when switching between tools.
- **Tests**
  - Introduced a new end-to-end test to verify correct cycling and restoration of connector modes.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
L-Sun
2025-05-22 03:54:31 +00:00
parent dd816f3284
commit 9ac1da9fc1
3 changed files with 57 additions and 11 deletions

View File

@@ -31,7 +31,7 @@ import { mountShapeTextEditor, ShapeTool } from '@blocksuite/affine-gfx-shape';
import { TextTool } from '@blocksuite/affine-gfx-text'; import { TextTool } from '@blocksuite/affine-gfx-text';
import { import {
ConnectorElementModel, ConnectorElementModel,
ConnectorMode, type ConnectorMode,
EdgelessTextBlockModel, EdgelessTextBlockModel,
GroupElementModel, GroupElementModel,
LayoutType, LayoutType,
@@ -93,10 +93,18 @@ export class EdgelessPageKeyboardManager extends PageKeyboardManager {
this._setEdgelessTool(TextTool); this._setEdgelessTool(TextTool);
}, },
c: () => { c: () => {
const mode = ConnectorMode.Curve; const editPropsStore = this.std.get(EditPropsStore);
rootComponent.std.get(EditPropsStore).recordLastProps('connector', {
mode, let mode: ConnectorMode;
}); if (
this.gfx.tool.currentToolName$.peek() === ConnectorTool.toolName
) {
mode = this.gfx.tool.get(ConnectorTool).getNextMode();
editPropsStore.recordLastProps('connector', { mode });
} else {
mode = editPropsStore.lastProps$.peek().connector.mode;
}
this._setEdgelessTool(ConnectorTool, { mode }); this._setEdgelessTool(ConnectorTool, { mode });
}, },
h: () => { h: () => {

View File

@@ -3,12 +3,10 @@ import {
DefaultTool, DefaultTool,
OverlayIdentifier, OverlayIdentifier,
} from '@blocksuite/affine-block-surface'; } from '@blocksuite/affine-block-surface';
import type {
Connection,
ConnectorElementModel,
ConnectorMode,
} from '@blocksuite/affine-model';
import { import {
type Connection,
type ConnectorElementModel,
ConnectorMode,
GroupElementModel, GroupElementModel,
ShapeElementModel, ShapeElementModel,
ShapeType, ShapeType,
@@ -223,4 +221,15 @@ export class ConnectorTool extends BaseTool<ConnectorToolOptions> {
this.findTargetByPoint(point); this.findTargetByPoint(point);
} }
getNextMode() {
switch (this.activatedOption.mode) {
case ConnectorMode.Curve:
return ConnectorMode.Orthogonal;
case ConnectorMode.Orthogonal:
return ConnectorMode.Straight;
case ConnectorMode.Straight:
return ConnectorMode.Curve;
}
}
} }

View File

@@ -2,15 +2,18 @@ import { expect } from '@playwright/test';
import { import {
addBasicConnectorElement, addBasicConnectorElement,
assertEdgelessConnectorToolMode,
changeConnectorStrokeColor, changeConnectorStrokeColor,
changeConnectorStrokeStyle, changeConnectorStrokeStyle,
changeConnectorStrokeWidth, changeConnectorStrokeWidth,
ConnectorMode,
createConnectorElement, createConnectorElement,
createShapeElement, createShapeElement,
dragBetweenViewCoords, dragBetweenViewCoords,
edgelessCommonSetup as commonSetup, edgelessCommonSetup as commonSetup,
getConnectorPath, getConnectorPath,
getConnectorPathWithInOut, getConnectorPathWithInOut,
locatorComponentToolbar,
pickColorAtPoints, pickColorAtPoints,
rotateElementByHandle, rotateElementByHandle,
selectElementInEdgeless, selectElementInEdgeless,
@@ -21,7 +24,11 @@ import {
triggerComponentToolbarAction, triggerComponentToolbarAction,
triggerShapeSwitch, triggerShapeSwitch,
} from '../../utils/actions/edgeless.js'; } from '../../utils/actions/edgeless.js';
import { pressBackspace, waitNextFrame } from '../../utils/actions/index.js'; import {
clickView,
pressBackspace,
waitNextFrame,
} from '../../utils/actions/index.js';
import { import {
assertConnectorPath, assertConnectorPath,
assertEdgelessNonSelectedRect, assertEdgelessNonSelectedRect,
@@ -186,6 +193,28 @@ test('change connector stroke style', async ({ page }) => {
expect(pickedColor[0]).toBe('#000000'); expect(pickedColor[0]).toBe('#000000');
}); });
test('should record previous connector mode', async ({ page }) => {
await commonSetup(page);
await setEdgelessTool(page, 'connector');
await assertEdgelessConnectorToolMode(page, ConnectorMode.Curve);
await page.keyboard.press('c');
await assertEdgelessConnectorToolMode(page, ConnectorMode.Orthogonal);
await page.keyboard.press('c');
await assertEdgelessConnectorToolMode(page, ConnectorMode.Straight);
await dragBetweenViewCoords(page, [100, 100], [200, 200]);
await page.keyboard.press('c');
await assertEdgelessConnectorToolMode(page, ConnectorMode.Straight);
await setEdgelessTool(page, 'default');
await clickView(page, [150, 150]);
await triggerComponentToolbarAction(page, 'changeConnectorShape');
await locatorComponentToolbar(page).getByLabel('Curve').click();
await page.keyboard.press('c');
await assertEdgelessConnectorToolMode(page, ConnectorMode.Curve);
});
test.describe('quick connect', () => { test.describe('quick connect', () => {
test('should create a connector when clicking on button', async ({ test('should create a connector when clicking on button', async ({
page, page,