fix(app): 修复 4 个 Flutter 交互问题

1. 首页数据不刷新 — JournalRepository 添加 onJournalChanged Stream 变更通知，HomeBloc 订阅后自动刷新 2. 画笔再次点击不弹出面板 — 添加 ToolReactivated 事件，工具栏检测已激活工具时发出重新激活信号 3. 钢笔铅笔效果一样 — 调整 perfect_freehand 参数 (pen: size 10/smooth 0.65, pencil: size 3/smooth 0.35) 4. 橡皮擦不生效 — ActiveStrokePainter 橡皮擦模式绘制半透明灰色反馈，笔画完成后 setState 触发 Layer 1 重绘 5. 贴纸文字无法缩放 — DraggableElement 用 Scale 手势替换 Pan 手势，支持双指缩放和旋转
2026-06-04 00:05:22 +08:00
parent 988ee7335a
commit 9fce34f4ef
14 changed files with 164 additions and 15 deletions
--- a/app/lib/features/editor/bloc/editor_bloc.dart
+++ b/app/lib/features/editor/bloc/editor_bloc.dart
@@ -107,6 +107,12 @@ class ToolChanged extends EditorEvent {
  ToolChanged(this.tool);
 }

+/// 再次点击已激活的工具 — 重新弹出设置面板
+class ToolReactivated extends EditorEvent {
+  final EditorTool tool;
+  ToolReactivated(this.tool);
+}
+
 /// 加载已有元素
 class ElementsLoaded extends EditorEvent {
  final List<JournalElement> elements;
@@ -227,6 +233,9 @@ class EditorState {
  final bool isDirty;
  final DateTime? lastSavedAt;

+  // 工具重新激活时间戳（用于驱动面板重新弹出）
+  final int toolReactivatedAt;
+
  const EditorState({
    this.strokes = const [],
    this.redoStack = const [],
@@ -243,6 +252,7 @@ class EditorState {
    this.title = '',
    this.isDirty = false,
    this.lastSavedAt,
+    this.toolReactivatedAt = 0,
  });

  EditorState copyWith({
@@ -261,6 +271,7 @@ class EditorState {
    String? title,
    bool? isDirty,
    DateTime? lastSavedAt,
+    int? toolReactivatedAt,
  }) =>
      EditorState(
        strokes: strokes ?? this.strokes,
@@ -279,6 +290,7 @@ class EditorState {
        title: title ?? this.title,
        isDirty: isDirty ?? this.isDirty,
        lastSavedAt: lastSavedAt ?? this.lastSavedAt,
+        toolReactivatedAt: toolReactivatedAt ?? this.toolReactivatedAt,
      );

  /// 是否处于手写模式
@@ -330,6 +342,7 @@ class EditorBloc extends Bloc<EditorEvent, EditorState> {

    // 工具栏事件
    on<ToolChanged>(_onToolChanged);
+    on<ToolReactivated>(_onToolReactivated);

    // 标签/心情/标题事件
    on<TagAdded>(_onTagAdded);
@@ -514,6 +527,13 @@ class EditorBloc extends Bloc<EditorEvent, EditorState> {
    ));
  }

+  void _onToolReactivated(ToolReactivated event, Emitter<EditorState> emit) {
+    // 不改变 activeTool，仅递增时间戳驱动 UI 层重新弹出面板
+    emit(state.copyWith(
+      toolReactivatedAt: DateTime.now().millisecondsSinceEpoch,
+    ));
+  }
+
  // ============================================================
  // 标签/心情/标题事件处理
  // ============================================================
--- a/app/lib/features/editor/views/editor_page.dart
+++ b/app/lib/features/editor/views/editor_page.dart
@@ -625,6 +625,7 @@ class _EditorStack extends StatefulWidget {

 class _EditorStackState extends State<_EditorStack> {
  EditorTool? _lastTool;
+  int _lastReactivatedAt = 0;
  late final TextEditingController _titleController;

  @override
@@ -675,6 +676,26 @@ class _EditorStackState extends State<_EditorStack> {
      });
    }
    _lastTool = currentTool;
+
+    // 工具重新激活（再次点击已选中的工具）→ 重新弹出面板
+    final reactivatedAt = widget.state.toolReactivatedAt;
+    if (reactivatedAt != _lastReactivatedAt) {
+      _lastReactivatedAt = reactivatedAt;
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        if (!mounted) return;
+
+        switch (currentTool) {
+          case EditorTool.brush:
+            _showBrushPanel();
+          case EditorTool.sticker:
+            _showStickerPicker();
+          case EditorTool.more:
+            _showMoreSheet();
+          default:
+            break;
+        }
+      });
+    }
  }

  /// 显示贴纸选择底部面板
@@ -962,6 +983,19 @@ class _EditorStackState extends State<_EditorStack> {
              positionY: y,
            ));
          },
+          onResized: (id, w, h) {
+            context.read<EditorBloc>().add(ElementResized(
+              elementId: id,
+              width: w,
+              height: h,
+            ));
+          },
+          onRotated: (id, r) {
+            context.read<EditorBloc>().add(ElementRotated(
+              elementId: id,
+              rotation: r,
+            ));
+          },
          onDeleted: (id) {
            context.read<EditorBloc>().add(ElementRemoved(id));
          },
--- a/app/lib/features/editor/widgets/active_stroke_painter.dart
+++ b/app/lib/features/editor/widgets/active_stroke_painter.dart
@@ -53,6 +53,16 @@ class ActiveStrokePainter extends CustomPainter {

    final path = buildStrokePath(outlinePoints);

+    // 橡皮擦实时反馈：绘制半透明灰色，让用户看到擦除范围
+    // 实际擦除在笔画完成后的合成图中通过 BlendMode.dstOut 执行
+    if (brushType == BrushType.eraser) {
+      canvas.drawPath(path, Paint()
+        ..color = const Color(0x40808080) // 25% 灰色
+        ..style = PaintingStyle.fill
+        ..isAntiAlias = true);
+      return;
+    }
+
    // 构造临时 Stroke 用于获取 Paint
    final stroke = Stroke(
      id: '__active__',
--- a/app/lib/features/editor/widgets/draggable_element.dart
+++ b/app/lib/features/editor/widgets/draggable_element.dart
@@ -19,6 +19,8 @@ class DraggableElement extends StatefulWidget {
  final bool isSelected;
  final ValueChanged<String> onTap;
  final void Function(String id, double x, double y) onMoved;
+  final void Function(String id, double w, double h)? onResized;
+  final void Function(String id, double rotation)? onRotated;
  final ValueChanged<String> onDeleted;

  const DraggableElement({
@@ -27,6 +29,8 @@ class DraggableElement extends StatefulWidget {
    this.isSelected = false,
    required this.onTap,
    required this.onMoved,
+    this.onResized,
+    this.onRotated,
    required this.onDeleted,
  });

@@ -41,6 +45,11 @@ class _DraggableElementState extends State<DraggableElement> {
  late double _height;
  late double _rotation;

+  // Scale 手势状态
+  double _baseWidth = 0;
+  double _baseHeight = 0;
+  double _baseRotation = 0;
+
  @override
  void initState() {
    super.initState();
@@ -76,15 +85,35 @@ class _DraggableElementState extends State<DraggableElement> {
      child: Transform.rotate(
        angle: _rotation,
        child: GestureDetector(
-          // 拖拽移动
-          onPanUpdate: (details) {
+          // 缩放开始 — 记录基准值
+          onScaleStart: (details) {
+            _baseWidth = _width;
+            _baseHeight = _height;
+            _baseRotation = _rotation;
+          },
+          // 缩放更新 — 支持单指拖拽 + 双指缩放/旋转
+          onScaleUpdate: (details) {
            setState(() {
-              _x += details.delta.dx;
-              _y += details.delta.dy;
+              // 拖拽（单指和双指都支持）
+              _x += details.focalPointDelta.dx;
+              _y += details.focalPointDelta.dy;
+
+              // 双指缩放 + 旋转
+              if (details.pointerCount >= 2) {
+                final newW = (_baseWidth * details.scale).clamp(40.0, 400.0);
+                final newH = (_baseHeight * details.scale).clamp(40.0, 400.0);
+                _width = newW;
+                _height = newH;
+                _rotation = _baseRotation + details.rotation;
+              }
            });
            widget.onMoved(widget.element.id, _x, _y);
+            if (details.pointerCount >= 2) {
+              widget.onResized?.call(widget.element.id, _width, _height);
+              widget.onRotated?.call(widget.element.id, _rotation);
+            }
          },
-          onPanEnd: (_) {
+          onScaleEnd: (_) {
            // 确保最终位置已通知
            widget.onMoved(widget.element.id, _x, _y);
          },
--- a/app/lib/features/editor/widgets/editor_toolbar.dart
+++ b/app/lib/features/editor/widgets/editor_toolbar.dart
@@ -68,7 +68,7 @@ class EditorToolbar extends StatelessWidget {
    final colorScheme = Theme.of(context).colorScheme;

    return GestureDetector(
-      onTap: () => onEvent(ToolChanged(tool)),
+      onTap: () => onEvent(isActive ? ToolReactivated(tool) : ToolChanged(tool)),
      behavior: HitTestBehavior.opaque,
      child: Container(
        constraints: const BoxConstraints(minWidth: 36, minHeight: 36),
--- a/app/lib/features/editor/widgets/handwriting_canvas.dart
+++ b/app/lib/features/editor/widgets/handwriting_canvas.dart
@@ -235,7 +235,10 @@ class _HandwritingCanvasState extends State<HandwritingCanvas> {
    widget.onStrokeCompleted?.call(stroke);

    // 光栅化新笔画到缓存（异步，不阻塞 UI）
-    _cache.addStroke(stroke);
+    // 完成后 setState 确保 Layer 1 (CachedStrokesPainter) 用新合成图重绘
+    _cache.addStroke(stroke).then((_) {
+      if (mounted) setState(() {});
+    });
  }

  /// 指针取消（如来电打断）：丢弃当前笔画。
--- a/app/lib/features/editor/widgets/stroke_renderer.dart
+++ b/app/lib/features/editor/widgets/stroke_renderer.dart
@@ -39,19 +39,21 @@ class _BrushConfig {

 /// 各画笔的渲染参数。
 const Map<BrushType, _BrushConfig> _brushConfigs = {
-  /// 钢笔：中等粗细，强压感变化，模拟毛笔效果
+  /// 钢笔：粗壮平滑，模拟签字笔效果
  BrushType.pen: _BrushConfig(
-    size: 8,
-    thinning: 0.7,
-    smoothing: 0.5,
+    size: 10,
+    thinning: 0.65,
+    smoothing: 0.65,
+    streamline: 0.6,
    simulatePressure: true,
  ),

-  /// 铅笔：细线，轻微压感，高平滑度产生自然线条
+  /// 铅笔：纤细有质感，保留书写抖动
  BrushType.pencil: _BrushConfig(
-    size: 4,
-    thinning: 0.3,
-    smoothing: 0.7,
+    size: 3,
+    thinning: 0.4,
+    smoothing: 0.35,
+    streamline: 0.3,
    simulatePressure: true,
  ),