Repository: toeverything/AFFiNE
File: blocksuite/affine/gfx/shape/src/draggable/shape-draggable.ts (TypeScript)

Code before:
      onElementClick: el => {
        this.onShapeClick?.(el.data);
      },
      onEnterOrLeaveScope: (overlay, isOutside) => {
        overlay.element.style.filter = isOutside
          ? 'none'
          : `drop-shadow(${this.shapeShadow})`;
      },
    });

    this.edgeless.bindHotKey(
      {
        s: ctx => {
          // `page.keyboard.press('Shift+s')` in playwright will also trigger this 's' key event
          if (ctx.get('keyboardState').raw.shiftKey) return;

          const locked = this.gfx.viewport.locked;
          const selection = this.gfx.selection;
          if (locked || selection.editing) return;

          const activeIndex = shapes.findIndex(
            s => s.name === this.draggingShape
          );
          const nextIndex = (activeIndex + 1) % shapes.length;
          const next = shapes[nextIndex];
          this.draggingShape = next.name;

          if (this.readyToDrop) {
            this.draggableController.cancelWithoutAnimation();
            const el = this.shapeContainer.querySelector(
              `.shape.${this.draggingShape}`
            ) as HTMLElement;
            if (!el) {
              console.error('Edgeless toolbar Shape element not found');
              return;
            }
            const { x, y } = this.gfx.tool.lastMousePos$.peek();
            const { viewport } = this.edgeless.std.get(ViewportElementProvider);
            const { left, top } = viewport;
            const clientPos = { x: x + left, y: y + top };
            this.draggableController.dragAndMoveTo(el, clientPos);
          } else {
            this.setEdgelessTool('shape', {
              shapeName: this.draggingShape,
            });
          }
        },
      },
      { global: true }
    );
  }

Review comment (suggestion):
should check `shape-tool`'s `dragging` state before

```ts
  if (this.gfx.tool.dragging$.peek() && this.gfx.tool.currentToolName$.peek() === 'shape') {
       return;
  }
```

Code after:
      onElementClick: el => {
        this.onShapeClick?.(el.data);
      },
      onEnterOrLeaveScope: (overlay, isOutside) => {
        overlay.element.style.filter = isOutside
          ? 'none'
          : `drop-shadow(${this.shapeShadow})`;
      },
    });

    this.edgeless.bindHotKey(
      {
        s: ctx => {
          // `page.keyboard.press('Shift+s')` in playwright will also trigger this 's' key event
          if (ctx.get('keyboardState').raw.shiftKey) return;

          const locked = this.gfx.viewport.locked;
          const selection = this.gfx.selection;
          if (locked || selection.editing) return;
          if (
            this.gfx.tool.dragging$.peek() &&
            this.gfx.tool.currentToolName$.peek() === 'shape'
          ) {
            return;
          }

          const activeIndex = shapes.findIndex(
            s => s.name === this.draggingShape
          );
          const nextIndex = (activeIndex + 1) % shapes.length;
          const next = shapes[nextIndex];
          this.draggingShape = next.name;

          if (this.readyToDrop) {
            this.draggableController.cancelWithoutAnimation();
            const el = this.shapeContainer.querySelector(
              `.shape.${this.draggingShape}`
            ) as HTMLElement;
            if (!el) {
              console.error('Edgeless toolbar Shape element not found');
              return;
            }
            const { x, y } = this.gfx.tool.lastMousePos$.peek();
            const { viewport } = this.edgeless.std.get(ViewportElementProvider);
            const { left, top } = viewport;
            const clientPos = { x: x + left, y: y + top };
            this.draggableController.dragAndMoveTo(el, clientPos);
          } else {
            this.setEdgelessTool('shape', {
              shapeName: this.draggingShape,
            });