feat: 引擎层埋点

packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx

@@ -1,6 +1,6 @@
 import { Component, Fragment } from 'react';
 import DragResizeEngine from './drag-resize-engine';
-import { observer, computed } from '@ali/lowcode-editor-core';
+import { observer, computed, globalContext, Editor } from '@ali/lowcode-editor-core';
 import classNames from 'classnames';
 import { SimulatorContext } from '../context';
 import { BuiltinSimulatorHost } from '../host';
@@ -177,6 +177,17 @@ export class BoxResizingInstance extends Component<{
         e.trigger = direction;
         metaData.experimental.callbacks.onResizeStart(e, node);
       }
+
+      const editor = globalContext.get(Editor);
+      const npm = node?.componentMeta?.npm;
+      const selected =
+        [npm?.package, npm?.componentName].filter((item) => !!item).join('-') ||
+        node?.componentMeta?.componentName ||
+        '';
+      editor.emit('designer.border.resize', {
+        selected,
+        layout: node?.parent?.getPropValue('layout') || '',
+      });
     };
 
     this.dragEngine.onResize(resize);

packages/designer/src/builtin-simulator/bem-tools/border-selecting.tsx

@@ -9,7 +9,7 @@ import {
   ComponentType,
 } from 'react';
 import classNames from 'classnames';
-import { observer, computed, Tip } from '@ali/lowcode-editor-core';
+import { observer, computed, Tip, globalContext, Editor } from '@ali/lowcode-editor-core';
 import { createIcon, isReactComponent } from '@ali/lowcode-utils';
 import { ActionContentObject, isActionContentObject } from '@ali/lowcode-types';
 import { BuiltinSimulatorHost } from '../host';
@@ -124,6 +124,16 @@ function createAction(content: ReactNode | ComponentType<any> | ActionContentObj
         className="lc-borders-action"
         onClick={() => {
           action && action(node);
+          const editor = globalContext.get(Editor);
+          const npm = node?.componentMeta?.npm;
+          const target =
+            [npm?.package, npm?.componentName].filter((item) => !!item).join('-') ||
+            node?.componentMeta?.componentName ||
+            '';
+          editor?.emit('designer.borders.action', {
+            name: key,
+            target,
+          });
         }}
       >
         {icon && createIcon(icon)}

packages/designer/src/builtin-simulator/host.ts

@@ -1,4 +1,4 @@
-import { obx, autorun, computed, getPublicPath, hotkey, focusTracker } from '@ali/lowcode-editor-core';
+import { obx, autorun, computed, getPublicPath, hotkey, focusTracker, globalContext, Editor } from '@ali/lowcode-editor-core';
 import { ISimulatorHost, Component, NodeInstance, ComponentInstance } from '../simulator';
 import Viewport from './viewport';
 import { createSimulator } from './create-simulator';
@@ -227,6 +227,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
     this.setupDragAndClick();
     this.setupDetecting();
     this.setupLiveEditing();
+    this.setupContextMenu();
   }
 
   setupDragAndClick() {
@@ -265,6 +266,15 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
               selection.remove(id);
             } else {
               selection.select(id);
+              const editor = globalContext.get(Editor);
+              const npm = node?.componentMeta?.npm;
+              const selected =
+                [npm?.package, npm?.componentName].filter((item) => !!item).join('-') ||
+                node?.componentMeta?.componentName ||
+                '';
+              editor.emit('designer.builtinSimulator.select', {
+                selected,
+              });
             }
           }
         };
@@ -410,6 +420,30 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
     }
   }
 
+  setupContextMenu() {
+    const doc = this.contentDocument!;
+    doc.addEventListener('contextmenu', (e: MouseEvent) => {
+      const targetElement = e.target as HTMLElement;
+      const nodeInst = this.getNodeInstanceFromElement(targetElement);
+      if (!nodeInst) {
+        return;
+      }
+      const node = nodeInst.node || this.document.rootNode;
+      if (!node) {
+        return;
+      }
+      const editor = globalContext.get(Editor);
+      const npm = node?.componentMeta?.npm;
+      const target =
+        [npm?.package, npm?.componentName].filter((item) => !!item).join('-') ||
+        node?.componentMeta?.componentName ||
+        '';
+      editor?.emit('desiger.builtinSimulator.contextmenu', {
+        target: target,
+      });
+    });
+  }
+
   /**
    * @see ISimulator
    */

packages/designer/src/builtin-simulator/live-editing/live-editing.ts

@@ -1,4 +1,4 @@
-import { obx } from '@ali/lowcode-editor-core';
+import { obx, globalContext, Editor } from '@ali/lowcode-editor-core';
 import { LiveTextEditingConfig } from '@ali/lowcode-types';
 import { Node, Prop } from '../../document';
 
@@ -42,6 +42,14 @@ export class LiveEditing {
     const targetElement = event.target as HTMLElement;
     const liveTextEditing = node.componentMeta.liveTextEditing;
 
+    const editor = globalContext.get(Editor);
+    const npm = node?.componentMeta?.npm;
+    const targetInfo =
+      [npm?.package, npm?.componentName].filter((item) => !!item).join('-') || node?.componentMeta?.componentName || '';
+    editor?.emit('designer.builinSimulator.LiveEditing', {
+      target: targetInfo,
+    });
+
     let setterPropElement = getSetterPropElement(targetElement, rootElement);
     let propTarget = setterPropElement?.dataset.setterProp;
     let matched: (LiveTextEditingConfig & { propElement?: HTMLElement; }) | undefined | null;

packages/designer/src/builtin-simulator/node-selector/index.tsx

@@ -1,7 +1,7 @@
 import { Overlay } from '@alifd/next';
 import React from 'react';
+import { Title, globalContext, Editor } from '@ali/lowcode-editor-core';
 import './index.less';
-import { Title } from '@ali/lowcode-editor-core';
 
 import { Node, ParentalNode } from '@ali/lowcode-designer';
 
@@ -46,6 +46,16 @@ export default class InstanceNodeSelector extends React.Component<IProps, IState
   onSelect = (node: Node) => () => {
     if (node && typeof node.select === 'function') {
       node.select();
+      const editor = globalContext.get(Editor);
+      const npm = node?.componentMeta?.npm;
+      const selected =
+        [npm?.package, npm?.componentName].filter((item) => !!item).join('-') ||
+        node?.componentMeta?.componentName ||
+        '';
+      editor.emit('designer.border.action', {
+        name: 'select-node',
+        selected,
+      });
     }
   };
   onMouseOver = (node: Node) => (_: any, flag = true) => {

packages/designer/src/designer/designer.ts

@@ -67,10 +67,19 @@ export class Designer {
 
     this.project = new Project(this, props.defaultSchema);
 
+    let startTime: any;
+    let src = '';
     this.dragon.onDragstart((e) => {
+      startTime = Date.now() / 1000;
       this.detecting.enable = false;
       const { dragObject } = e;
       if (isDragNodeObject(dragObject)) {
+        const node = dragObject.nodes[0]?.parent;
+        const npm = node?.componentMeta?.npm;
+        src =
+          [npm?.package, npm?.componentName].filter((item) => !!item).join('-') ||
+          node?.componentMeta?.componentName ||
+          '';
         if (dragObject.nodes.length === 1) {
           if (dragObject.nodes[0].parent) {
             // ensure current selecting
@@ -111,6 +120,32 @@ export class Designer {
           if (nodes) {
             loc.document.selection.selectAll(nodes.map((o) => o.id));
             setTimeout(() => this.activeTracker.track(nodes![0]), 10);
+            const endTime: any = Date.now() / 1000;
+            const parent = nodes[0]?.parent;
+            const npm = parent?.componentMeta?.npm;
+            const dest =
+              [npm?.package, npm?.componentName].filter((item) => !!item).join('-') ||
+              parent?.componentMeta?.componentName ||
+              '';
+            this.editor?.emit('designer.drag', {
+              time: (endTime - startTime).toFixed(2),
+              target: nodes
+                ?.map((n) => {
+                  if (!n) {
+                    return;
+                  }
+                  const npm = n?.componentMeta?.npm;
+                  return (
+                    [npm?.package, npm?.componentName].filter((item) => !!item).join('-') ||
+                    n?.componentMeta?.componentName
+                  );
+                })
+                .join('&'),
+              align: loc?.detail?.near?.align || '',
+              pos: loc?.detail?.near?.pos || '',
+              src,
+              dest,
+            });
           }
         }
       }

packages/editor-core/src/hotkey.ts

@@ -333,14 +333,17 @@ function fireCallback(callback: HotkeyCallback, e: KeyboardEvent, combo?: string
     e.stopPropagation();
   }
   const editor = globalContext.get(Editor);
-  if (!editor) {
-    return;
-  }
-  editor.emit('hotkey.callback.call', {
+  const designer = editor.get('designer');
+  const node = designer?.currentSelection?.getNodes()?.[0];
+  const npm = node?.componentMeta?.npm;
+  const selected =
+    [npm?.package, npm?.componentName].filter((item) => !!item).join('-') || node?.componentMeta?.componentName || '';
+  editor?.emit('hotkey.callback.call', {
     callback,
     e,
     combo,
     sequence,
+    selected,
   });
 }
 

packages/editor-core/src/utils/monitor.ts

@@ -42,4 +42,5 @@ class Monitor {
   }
 }
 
-export default new Monitor();
+const monitor = new Monitor();
+export { monitor };

packages/editor-skeleton/src/components/settings/settings-primary-pane.tsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { Tab, Breadcrumb } from '@alifd/next';
-import { Title, observer, Editor, obx } from '@ali/lowcode-editor-core';
-import { Node, isSettingField, SettingField } from '@ali/lowcode-designer';
+import { Title, observer, Editor, obx, globalContext } from '@ali/lowcode-editor-core';
+import { Node, isSettingField, SettingField, Designer } from '@ali/lowcode-designer';
 import { SettingsMain } from './main';
 import { SettingsPane } from './settings-pane';
 import { createIcon } from '@ali/lowcode-utils';
@@ -35,6 +35,9 @@ export class SettingsPrimaryPane extends Component<{ editor: Editor }> {
       );
     }
 
+    const editor = globalContext.get(Editor);
+    const designer = editor.get(Designer);
+    const current = designer?.currentSelection?.getNodes()?.[0];
     let node: Node | null = settings.first;
     const items = [];
     let l = 3;
@@ -43,10 +46,24 @@ export class SettingsPrimaryPane extends Component<{ editor: Editor }> {
         l === 2
           ? {}
           : {
-              onMouseOver: hoverNode.bind(null, node, true),
-              onMouseOut: hoverNode.bind(null, node, false),
-              onClick: selectNode.bind(null, node),
-            };
+            onMouseOver: hoverNode.bind(null, node, true),
+            onMouseOut: hoverNode.bind(null, node, false),
+            onClick: () => {
+              selectNode.call(null, node);
+              const getName = (node) => {
+                const npm = node?.componentMeta?.npm;
+                return [npm?.package, npm?.componentName].filter((item) => !!item).join('-') ||
+                  node?.componentMeta?.componentName ||
+                  '';
+              };
+              const selected = getName(current);
+              const target = getName(node);
+              editor.emit('skeleton.settingsPane.Breadcrumb', {
+                selected,
+                target,
+              });
+            },
+          };
       items.unshift(
         <Breadcrumb.Item {...props} key={node.id}>
           <Title title={node.title} />

packages/editor-skeleton/src/components/widget-views.tsx

@@ -1,7 +1,7 @@
 import { Component, ReactElement } from 'react';
 import { Icon } from '@alifd/next';
 import classNames from 'classnames';
-import { Title, observer, Tip } from '@ali/lowcode-editor-core';
+import { Title, observer, Tip, globalContext, Editor } from '@ali/lowcode-editor-core';
 import { DockProps } from '../types';
 import PanelDock from '../widget/panel-dock';
 import { composeTitle } from '../widget/utils';
@@ -108,12 +108,18 @@ export class TitledPanelView extends Component<{ panel: Panel; area?: string }>
     if (!panel.inited) {
       return null;
     }
+    const editor = globalContext.get(Editor);
+    const panelName = area ? `${area}-${panel.name}` : panel.name;
+    editor.emit('skeleton.panel.toggle', {
+      name: panelName || '',
+      status: panel.visible ? 'show' : 'hide',
+    });
     return (
       <div
         className={classNames('lc-titled-panel', {
           hidden: !panel.visible,
         })}
-        id={`${area || ''}-${panel.name}`}
+        id={panelName}
       >
         <PanelTitle panel={panel} />
         <div className="lc-panel-body">{panel.body}</div>
@@ -155,12 +161,18 @@ export class PanelView extends Component<{ panel: Panel; area?: string }> {
     if (!panel.inited) {
       return null;
     }
+    const editor = globalContext.get(Editor);
+    const panelName = area ? `${area}-${panel.name}` : panel.name;
+    editor.emit('skeleton.panel.toggle', {
+      name: panelName || '',
+      status: panel.visible ? 'show' : 'hide',
+    });
     return (
       <div
         className={classNames('lc-panel', {
           hidden: !panel.visible,
         })}
-        id={`${area || ''}-${panel.name}`}
+        id={panelName}
       >
         {panel.body}
       </div>

packages/editor-skeleton/src/widget/panel.ts

@@ -53,14 +53,16 @@ export default class Panel implements IWidget {
   }
 
   get content(): ReactNode {
+    const area = this.config?.area || this.parent?.name;
+    console.log(area);
     if (this.plain) {
       return createElement(PanelView, {
         panel: this,
         key: this.id,
-        area: this.parent?.name,
+        area,
       });
     }
-    return createElement(TitledPanelView, { panel: this, key: this.id, area: this.parent?.name });
+    return createElement(TitledPanelView, { panel: this, key: this.id, area });
   }
 
   readonly title: TitleContent;