Merge branch 'feature/extension-base-1-0-60' into 'feat/0.16.6'

feat: 节点添加addExtraProp方法；大纲树添加onClickHook检查



See merge request !1344224

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

@@ -1,6 +1,7 @@
 import { Overlay } from '@alifd/next';
 import React from 'react';
 import { Title, globalContext, Editor } from '@ali/lowcode-editor-core';
+import { canClickNode } from '@ali/lowcode-utils';
 import './index.less';
 
 import { Node, ParentalNode } from '@ali/lowcode-designer';
@@ -32,7 +33,7 @@ export default class InstanceNodeSelector extends React.Component<IProps, IState
   // 获取节点的父级节点（最多获取5层）
   getParentNodes = (node: Node) => {
     const parentNodes: any[] = [];
-    const focusNode = node.document.focusNode;
+    const { focusNode } = node.document;
 
     if (node.contains(focusNode) || !focusNode.contains(node)) {
       return parentNodes;
@@ -52,8 +53,14 @@ export default class InstanceNodeSelector extends React.Component<IProps, IState
     return parentNodes;
   };
 
-  onSelect = (node: Node) => () => {
+  onSelect = (node: Node) => (e: unknown) => {
-    if (node && typeof node.select === 'function') {
+    if (!node) {
+      return;
+    }
+
+    const canClick = canClickNode(node, e as MouseEvent);
+
+    if (canClick && typeof node.select === 'function') {
       node.select();
       const editor = globalContext.get(Editor);
       const npm = node?.componentMeta?.npm;

packages/designer/src/builtin-simulator/utils/clickable.ts

@@ -1,4 +1,4 @@
-import { getClosestNode } from '@ali/lowcode-utils';
+import { getClosestNode, canClickNode } from '@ali/lowcode-utils';
 import { Node } from '../../document';
 
 /**
@@ -13,12 +13,10 @@ export const getClosestClickableNode = (
   let node = currentNode;
   // 执行 onClickHook 来判断当前节点是否可点击
   while (node) {
-    const onClickHook = node.componentMeta?.getMetadata()?.experimental?.callbacks?.onClickHook;
     const lockedNode = getClosestNode(node, (n) => {
       return n?.getExtraProp('isLocked')?.getValue() === true;
     });
-    let canClick =
+    let canClick = canClickNode(node, event);
-      onClickHook && typeof onClickHook === 'function' ? onClickHook(event, node) : true;
     if (lockedNode && lockedNode.getId() !== node.getId()) {
       canClick = false;
     }

packages/designer/src/document/node/node.ts

@@ -13,6 +13,7 @@ import {
   PageSchema,
   ComponentSchema,
   NodeStatus,
+  CompositeValue,
 } from '@ali/lowcode-types';
 import { compatStage } from '@ali/lowcode-utils';
 import { SettingTopEntry } from '@ali/lowcode-designer';
@@ -546,6 +547,10 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
     return this.props.get(getConvertedExtraKey(key), stash) || null;
   }
 
+  setExtraProp(key: string, value: CompositeValue, spread = false, options: any = {}): Prop | null {
+    return this.props.add(value, getConvertedExtraKey(key), spread, options) || null;
+  }
+
   /**
    * 获取单个属性值
    */

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

@@ -1,7 +1,7 @@
 import { Component, MouseEvent as ReactMouseEvent } from 'react';
 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 { isFormEvent, canClickNode } from '@ali/lowcode-utils';
 import { Tree } from '../tree';
 import RootTreeNodeView from './root-tree-node';
 
@@ -49,6 +49,11 @@ export default class TreeView extends Component<{ tree: Tree }> {
       return;
     }
     const { node } = treeNode;
+
+    if (!canClickNode(node, e)) {
+      return;
+    }
+
     const { designer } = treeNode;
     const doc = node.document;
     const { selection, focusNode } = doc;
@@ -105,6 +110,11 @@ export default class TreeView extends Component<{ tree: Tree }> {
     }
 
     const { node } = treeNode;
+
+    if (!canClickNode(node, e)) {
+      return;
+    }
+
     const { designer } = treeNode;
     const doc = node.document;
     const { selection, focusNode } = doc;

packages/utils/src/node-helper.ts

@@ -12,3 +12,15 @@ export const getClosestNode = (node: Node, until: (node: Node) => boolean): Node
     return getClosestNode(node.getParent(), until);
   }
 };
+
+/**
+ * 判断节点是否可被点击
+ * @param {unknown} e 点击事件
+ * @param {Node} node 节点
+ * @returns {boolean} 是否可点击，true表示可点击
+ */
+export const canClickNode = (node: Node, e: unknown): boolean => {
+  const onClickHook = node.componentMeta?.getMetadata()?.experimental?.callbacks?.onClickHook;
+  const canClick = typeof onClickHook === 'function' ? onClickHook(e as MouseEvent, node) : true;
+  return canClick;
+};