fix(editor): incorrect brush bound with rotation and line width (#11524)

This transfered PR from [BS/#9058](https://github.com/toeverything/blocksuite/pull/9058) fixes an issue where the selection rectangle of a brush element was incorrect after resizing and rotating.

blocksuite/affine/model/src/elements/brush/brush.ts

@@ -130,7 +130,7 @@ export class BrushElementModel extends GfxPrimitiveElementModel<BrushProps> {
     instance['_local'].delete('commands');
   })
   @derive((lineWidth: number, instance: Instance) => {
-    const oldBound = instance.elementBound;
+    const oldBound = Bound.fromXYWH(instance.deserializedXYWH);
 
     if (
       lineWidth === instance.lineWidth ||

tests/blocksuite/e2e/edgeless/brush.spec.ts

@@ -5,6 +5,7 @@ import {
   assertEdgelessTool,
   deleteAll,
   pickColorAtPoints,
+  rotateElementByHandle,
   selectBrushColor,
   selectBrushSize,
   setEdgelessTool,
@@ -195,3 +196,21 @@ test('change brush element size by component-toolbar', async ({ page }) => {
   await updateExistedBrushElementSize(page, 1);
   await assertEdgelessSelectedRect(page, [99, 99, 102, 102]);
 });
+
+test('rotate brush element and then change size', async ({ page }) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyEdgelessState(page);
+  await switchEditorMode(page);
+  await zoomResetByKeyboard(page);
+
+  const start = { x: 100, y: 100 };
+  const end = { x: 200, y: 200 };
+  await addBasicBrushElement(page, start, end);
+
+  await page.mouse.click(110, 110);
+  await rotateElementByHandle(page, 45, 'bottom-right');
+
+  // change to line width 12
+  await updateExistedBrushElementSize(page, 6);
+  await assertEdgelessSelectedRect(page, [70.8, 70.8, 158.4, 158.4]);
+});