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:
@@ -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: () => {
|
||||||
|
|||||||
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
Reference in New Issue
Block a user