Merge branch 'feat/monitor' into 'release/0.9.0'

Feat/monitor

1.导出埋点工具类Monitor
2.大纲树埋点
3.其他小细节优化

See merge request !863316

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

@@ -1,4 +1,4 @@
-import { obx, autorun, computed, getPublicPath, hotkey, focusTracker, globalContext, Editor } from '@ali/lowcode-editor-core';
+import { obx, autorun, computed, getPublicPath, hotkey, focusTracker } from '@ali/lowcode-editor-core';
 import { ISimulatorHost, Component, NodeInstance, ComponentInstance } from '../simulator';
 import Viewport from './viewport';
 import { createSimulator } from './create-simulator';
@@ -266,7 +266,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
               selection.remove(id);
             } else {
               selection.select(id);
-              const editor = globalContext.get(Editor);
+              const editor = this.designer?.editor;
               const npm = node?.componentMeta?.npm;
               const selected =
                 [npm?.package, npm?.componentName].filter((item) => !!item).join('-') ||
@@ -432,7 +432,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
       if (!node) {
         return;
       }
-      const editor = globalContext.get(Editor);
+      const editor = this.designer?.editor;
       const npm = node?.componentMeta?.npm;
       const selected =
         [npm?.package, npm?.componentName].filter((item) => !!item).join('-') ||

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

@@ -2,7 +2,7 @@ class Monitor {
   fn = (params: any) => {
     const { AES } = window as any;
     if (typeof AES.log === 'function') {
-      const { p1, p2, p3, p4 = 'OTHER', ...rest } = params || {};
+      const { p1 = '', p2 = '', p3 = '', p4 = 'OTHER', ...rest } = params || {};
       AES.log('event', {
         p1,
         p2,

packages/editor-preset-vision/src/index.ts

@@ -4,7 +4,7 @@ import Icons from '@ali/ve-icons';
 import logger from '@ali/vu-logger';
 import { render } from 'react-dom';
 import I18nUtil from './i18n-util';
-import { hotkey as Hotkey } from '@ali/lowcode-editor-core';
+import { hotkey as Hotkey, monitor } from '@ali/lowcode-editor-core';
 import { createElement } from 'react';
 import { VE_EVENTS as EVENTS, VE_HOOKS as HOOKS, VERSION as Version } from './base/const';
 import Bus from './bus';
@@ -84,6 +84,7 @@ const VisualEngine = {
   I18nUtil,
   Hotkey,
   Env,
+  monitor,
   /* pub/sub 集线器 */
   Bus,
   /* 事件 */
@@ -132,6 +133,7 @@ export {
   I18nUtil,
   Hotkey,
   Env,
+  monitor,
   /* pub/sub 集线器 */
   Bus,
   /* 事件 */

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

@@ -54,7 +54,6 @@ 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,

packages/plugin-outline-pane/src/tree-master.ts

@@ -12,7 +12,9 @@ export interface ITreeBoard {
 
 export class TreeMaster {
   constructor(readonly designer: Designer) {
+    let startTime: any;
     designer.dragon.onDragstart(() => {
+      startTime = Date.now() / 1000;
       // needs?
       this.toVision();
     });
@@ -33,6 +35,25 @@ export class TreeMaster {
         board.scrollToNode(treeNode, detail);
       });
     });
+    designer.dragon.onDragend(() => {
+      const endTime: any = Date.now() / 1000;
+      const editor = designer?.editor;
+      const nodes = designer.currentSelection?.getNodes();
+      editor?.emit('outlinePane.drag', {
+        selected: nodes
+          ?.map((n) => {
+            if (!n) {
+              return;
+            }
+            const npm = n?.componentMeta?.npm;
+            return (
+              [npm?.package, npm?.componentName].filter((item) => !!item).join('-') || n?.componentMeta?.componentName
+            );
+          })
+          .join('&'),
+        time: (endTime - startTime).toFixed(2),
+      });
+    });
   }
 
   private toVision() {

packages/plugin-outline-pane/src/views/tree-title.tsx

@@ -1,6 +1,6 @@
 import { Component, KeyboardEvent, FocusEvent, Fragment } from 'react';
 import classNames from 'classnames';
-import { observer, Title, Tip } from '@ali/lowcode-editor-core';
+import { observer, Title, Tip, globalContext, Editor } from '@ali/lowcode-editor-core';
 import { IconArrowRight } from '../icons/arrow-right';
 import { IconEyeClose } from '../icons/eye-close';
 import { IconLock } from '../icons/lock';
@@ -165,6 +165,16 @@ class HideBtn extends Component<{ treeNode: TreeNode }> {
         onClick={(e) => {
           e.stopPropagation();
           treeNode.setHidden(!treeNode.hidden);
+          const editor = globalContext.get(Editor);
+          const node = treeNode?.node;
+          const npm = node?.componentMeta?.npm;
+          const selected =
+            [npm?.package, npm?.componentName].filter((item) => !!item).join('-') ||
+            node?.componentMeta?.componentName ||
+            '';
+          editor?.emit('outlinePane.hide', {
+            selected,
+          });
         }}
       >
         {treeNode.hidden ? <IconEyeClose /> : <IconEye />}

packages/plugin-outline-pane/src/views/tree.tsx

@@ -1,5 +1,5 @@
 import { Component, MouseEvent as ReactMouseEvent } from 'react';
-import { observer } from '@ali/lowcode-editor-core';
+import { observer, Editor, globalContext } from '@ali/lowcode-editor-core';
 import { isRootNode, Node, DragObjectType, isShaken } from '@ali/lowcode-designer';
 import { isFormEvent } from '@ali/lowcode-utils';
 import { Tree } from '../tree';
@@ -60,6 +60,16 @@ export default class TreeView extends Component<{ tree: Tree }> {
       }
     } else {
       selection.select(id);
+      const editor = globalContext.get(Editor);
+      const selectedNode = designer.currentSelection?.getNodes()?.[0];
+      const npm = selectedNode?.componentMeta?.npm;
+      const selected =
+        [npm?.package, npm?.componentName].filter((item) => !!item).join('-') ||
+        selectedNode?.componentMeta?.componentName ||
+        '';
+      editor?.emit('outlinePane.select', {
+        selected,
+      });
     }
   };