More events for layers, align, colors and swap name <=> category (#2442)

src/actions/actionAlign.tsx

@@ -17,6 +17,7 @@ import { ExcalidrawElement } from "../element/types";
 import { AppState } from "../types";
 import { alignElements, Alignment } from "../align";
 import { getShortcutKey } from "../utils";
+import { trackEvent, EVENT_ALIGN } from "../analytics";
 
 const enableActionGroup = (
   elements: readonly ExcalidrawElement[],
@@ -43,6 +44,7 @@ const alignSelectedElements = (
 export const actionAlignTop = register({
   name: "alignTop",
   perform: (elements, appState) => {
+    trackEvent(EVENT_ALIGN, "align", "top");
     return {
       appState,
       elements: alignSelectedElements(elements, appState, {
@@ -72,6 +74,7 @@ export const actionAlignTop = register({
 export const actionAlignBottom = register({
   name: "alignBottom",
   perform: (elements, appState) => {
+    trackEvent(EVENT_ALIGN, "align", "bottom");
     return {
       appState,
       elements: alignSelectedElements(elements, appState, {
@@ -101,6 +104,7 @@ export const actionAlignBottom = register({
 export const actionAlignLeft = register({
   name: "alignLeft",
   perform: (elements, appState) => {
+    trackEvent(EVENT_ALIGN, "align", "left");
     return {
       appState,
       elements: alignSelectedElements(elements, appState, {
@@ -130,6 +134,7 @@ export const actionAlignLeft = register({
 export const actionAlignRight = register({
   name: "alignRight",
   perform: (elements, appState) => {
+    trackEvent(EVENT_ALIGN, "align", "right");
     return {
       appState,
       elements: alignSelectedElements(elements, appState, {
@@ -159,6 +164,7 @@ export const actionAlignRight = register({
 export const actionAlignVerticallyCentered = register({
   name: "alignVerticallyCentered",
   perform: (elements, appState) => {
+    trackEvent(EVENT_ALIGN, "vertically", "center");
     return {
       appState,
       elements: alignSelectedElements(elements, appState, {
@@ -184,6 +190,7 @@ export const actionAlignVerticallyCentered = register({
 export const actionAlignHorizontallyCentered = register({
   name: "alignHorizontallyCentered",
   perform: (elements, appState) => {
+    trackEvent(EVENT_ALIGN, "horizontally", "center");
     return {
       appState,
       elements: alignSelectedElements(elements, appState, {

src/actions/actionCanvas.tsx

@@ -15,12 +15,19 @@ import { getCommonBounds } from "../element";
 import { getNewZoom } from "../scene/zoom";
 import { centerScrollOn } from "../scene/scroll";
 import { EVENT_ACTION, EVENT_CHANGE, trackEvent } from "../analytics";
+import colors from "../colors";
 
 export const actionChangeViewBackgroundColor = register({
   name: "changeViewBackgroundColor",
   perform: (_, appState, value) => {
     if (value !== appState.viewBackgroundColor) {
-      trackEvent(EVENT_CHANGE, "canvas color", value);
+      trackEvent(
+        EVENT_CHANGE,
+        "canvas color",
+        colors.canvasBackground.includes(value)
+          ? `${value} (picker ${colors.canvasBackground.indexOf(value)})`
+          : value,
+      );
     }
     return {
       appState: { ...appState, viewBackgroundColor: value },

src/actions/actionDistribute.tsx

@@ -13,6 +13,7 @@ import { ExcalidrawElement } from "../element/types";
 import { AppState } from "../types";
 import { distributeElements, Distribution } from "../disitrubte";
 import { getShortcutKey } from "../utils";
+import { EVENT_ALIGN, trackEvent } from "../analytics";
 
 const enableActionGroup = (
   elements: readonly ExcalidrawElement[],
@@ -39,6 +40,7 @@ const distributeSelectedElements = (
 export const distributeHorizontally = register({
   name: "distributeHorizontally",
   perform: (elements, appState) => {
+    trackEvent(EVENT_ALIGN, "distribute", "horizontally");
     return {
       appState,
       elements: distributeSelectedElements(elements, appState, {
@@ -67,6 +69,7 @@ export const distributeHorizontally = register({
 export const distributeVertically = register({
   name: "distributeVertically",
   perform: (elements, appState) => {
+    trackEvent(EVENT_ALIGN, "distribute", "vertically");
     return {
       appState,
       elements: distributeSelectedElements(elements, appState, {

src/actions/actionProperties.tsx

@@ -41,6 +41,7 @@ import {
   SloppinessCartoonistIcon,
 } from "../components/icons";
 import { EVENT_CHANGE, trackEvent } from "../analytics";
+import colors from "../colors";
 
 const changeProperty = (
   elements: readonly ExcalidrawElement[],
@@ -83,7 +84,13 @@ export const actionChangeStrokeColor = register({
   name: "changeStrokeColor",
   perform: (elements, appState, value) => {
     if (value !== appState.currentItemStrokeColor) {
-      trackEvent(EVENT_CHANGE, "stroke color", value);
+      trackEvent(
+        EVENT_CHANGE,
+        "stroke color",
+        colors.elementStroke.includes(value)
+          ? `${value} (picker ${colors.elementStroke.indexOf(value)})`
+          : value,
+      );
     }
     return {
       elements: changeProperty(elements, appState, (el) =>
@@ -117,7 +124,13 @@ export const actionChangeBackgroundColor = register({
   name: "changeBackgroundColor",
   perform: (elements, appState, value) => {
     if (value !== appState.currentItemBackgroundColor) {
-      trackEvent(EVENT_CHANGE, "background color", value);
+      trackEvent(
+        EVENT_CHANGE,
+        "background color",
+        colors.elementBackground.includes(value)
+          ? `${value} (picker ${colors.elementBackground.indexOf(value)})`
+          : value,
+      );
     }
 
     return {
@@ -313,6 +326,7 @@ export const actionChangeSloppiness = register({
 export const actionChangeStrokeStyle = register({
   name: "changeStrokeStyle",
   perform: (elements, appState, value) => {
+    trackEvent(EVENT_CHANGE, "style", value);
     return {
       elements: changeProperty(elements, appState, (el) =>
         newElementWith(el, {