chore(editor): add event tracking to highlighter tool (#11232)

Closes: [BS-2947](https://linear.app/affine-design/issue/BS-2947/埋点相关)

blocksuite/affine/gfx/brush/src/highlighter-tool.ts

@@ -154,14 +154,6 @@ export class HighlighterTool extends BaseTool {
       points,
     });
 
-    this.std.getOptional(TelemetryProvider)?.track('CanvasElementAdded', {
-      control: 'canvas:draw',
-      page: 'whiteboard editor',
-      module: 'toolbar',
-      segment: 'toolbar',
-      type: CanvasElementType.HIGHLIGHTER,
-    });
-
     const element = this.gfx.getElementById(id) as HighlighterElementModel;
 
     element.stash('points');
@@ -174,6 +166,16 @@ export class HighlighterTool extends BaseTool {
     this._draggingPathPressures = [e.pressure];
     this._lastPopLength = 0;
   }
+
+  override activate() {
+    this.std.getOptional(TelemetryProvider)?.track('EdgelessToolPicked', {
+      page: 'whiteboard editor',
+      module: 'global toolbar',
+      segment: 'global toolbar',
+      control: 'drawing',
+      type: CanvasElementType.HIGHLIGHTER,
+    });
+  }
 }
 
 declare module '@blocksuite/block-std/gfx' {

blocksuite/affine/gfx/brush/src/toolbar/configs/highlighter.ts

@@ -23,6 +23,10 @@ import {
 import { BlockFlavourIdentifier } from '@blocksuite/block-std';
 import { html } from 'lit';
 
+const trackBaseProps = {
+  category: 'highlighter',
+};
+
 export const highlighterToolbarConfig = {
   actions: [
     {
@@ -44,6 +48,11 @@ export const highlighterToolbarConfig = {
               .get(EdgelessCRUDIdentifier)
               .updateElement(model.id, { lineWidth });
           }
+
+          ctx.track('CanvasElementUpdated', {
+            ...trackBaseProps,
+            control: 'line width',
+          });
         };
 
         return html`
@@ -91,9 +100,16 @@ export const highlighterToolbarConfig = {
             return;
           }
 
+          const isStartEvent = e.type === 'start';
           for (const model of models) {
-            model[e.type === 'start' ? 'stash' : 'pop'](field);
+            model[isStartEvent ? 'stash' : 'pop'](field);
           }
+
+          if (!isStartEvent) return;
+          ctx.track('CanvasElementUpdated', {
+            ...trackBaseProps,
+            control: 'color picker',
+          });
         };
 
         return html`

blocksuite/affine/shared/src/services/telemetry-service/telemetry-service.ts

@@ -10,6 +10,7 @@ import type {
   EdgelessToolPickedEvent,
   ElementCreationEvent,
   ElementLockEvent,
+  ElementUpdatedEvent,
   LinkedDocCreatedEvent,
   MindMapCollapseEvent,
   TelemetryEvent,
@@ -23,6 +24,7 @@ export type TelemetryEventMap = OutDatabaseAllEvents &
     LinkedDocCreated: LinkedDocCreatedEvent;
     SplitNote: TelemetryEvent;
     CanvasElementAdded: ElementCreationEvent;
+    CanvasElementUpdated: ElementUpdatedEvent;
     EdgelessElementLocked: ElementLockEvent;
     ExpandedAndCollapsed: MindMapCollapseEvent;
     AttachmentUploadedEvent: AttachmentUploadedEvent;

blocksuite/affine/shared/src/services/telemetry-service/types.ts

@@ -75,5 +75,14 @@ export interface EdgelessToolPickedEvent extends TelemetryEvent {
   segment: 'global toolbar';
   module: 'global toolbar';
   control: 'drawing';
-  type: 'brush';
+  type: 'brush' | 'highlighter';
+}
+
+export interface ElementUpdatedEvent extends TelemetryEvent {
+  page: 'whiteboard editor';
+  segment: 'toolbar';
+  module: 'toolbar';
+  category: string;
+  control: string;
+  type?: string;
 }