fix: lc-borders-actions

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

@@ -16,6 +16,7 @@ import { SimulatorContext } from '../context';
 import { BuiltinSimulatorHost } from '../host';
 import { OffsetObserver } from '../../designer';
 import { Node } from '../../document';
+import NodeSelector from '../node-selector';
 
 @observer
 export class BorderSelectingInstance extends Component<{
@@ -101,6 +102,7 @@ class Toolbar extends Component<{ observed: OffsetObserver }> {
     return (
       <div className="lc-borders-actions" style={style}>
         {actions}
+        <NodeSelector node={node} />
       </div>
     );
   }

packages/designer/src/builtin-simulator/bem-tools/borders.less

@@ -30,7 +30,8 @@
     }
   }
 
-  &-action {
+  &-action,
+  .ve-icon-button.ve-action-save {
     box-sizing: border-box;
     cursor: pointer;
     height: 20px;

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

@@ -0,0 +1,82 @@
+@import '~@ali/ve-less-variables/index.less';
+
+// 样式直接沿用之前的样式，优化了下命名
+.instance-node-selector {
+  position: relative;
+  margin-right: 2px;
+  color: var(--color-icon-white, @title-bgcolor);
+  border-radius: @global-border-radius;
+  margin-right: 2px;
+  pointer-events: auto;
+  flex-grow: 0;
+  flex-shrink: 0;
+
+  svg {
+    width: 16px;
+    height: 16px;
+    margin-right: 5px;
+    flex-grow: 0;
+    flex-shrink: 0;
+    max-width: inherit;
+    path {
+      fill: var(--color-icon-white, @title-bgcolor);
+    }
+  }
+  &-current {
+    background: var(--color-brand, @brand-color-1);
+    padding: 0 6px;
+    display: flex;
+    align-items: center;
+    height: 20px;
+    cursor: pointer;
+    color: var(--color-icon-white, @title-bgcolor);
+    border-radius: 3px;
+
+    &-title {
+      padding-right: 6px;
+      color: var(--color-icon-white, @title-bgcolor);
+    }
+  }
+  &-list {
+    position: absolute;
+    left: 0;
+    right: 0;
+    opacity: 0;
+    visibility: hidden;
+  }
+  &-node {
+    margin: 2px 0;
+    &-content {
+      padding-left: 6px;
+      background: #78869a;
+      display: inline-flex;
+      border-radius: 3px;
+      align-items: center;
+      height: 20px;
+      color: var(--color-icon-white, @title-bgcolor);
+      cursor: pointer;
+      overflow: visible;
+    }
+    &-title {
+      padding-right: 6px;
+      // margin-left: 5px;
+      color: var(--color-icon-white, @title-bgcolor);
+      cursor: pointer;
+      overflow: visible;
+    }
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+}
+
+&:hover {
+  .instance-node-selector-current {
+    color: ar(--color-text-reverse, @white-alpha-2);
+  }
+  .instance-node-selector-popup {
+    visibility: visible;
+    opacity: 1;
+    transition: 0.2s all ease-in;
+  }
+}

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

@@ -0,0 +1,110 @@
+import { Overlay } from '@alifd/next';
+import React from 'react';
+import './index.less';
+import { Title } from '@ali/lowcode-editor-core';
+
+import { Node, ParentalNode } from '@ali/lowcode-designer';
+
+const { Popup } = Overlay;
+
+export interface IProps {
+  node: Node;
+}
+
+export interface IState {
+  parentNodes: Node[];
+}
+
+type UnionNode = Node | ParentalNode | null;
+
+export default class InstanceNodeSelector extends React.Component<IProps, IState> {
+  state: IState = {
+    parentNodes: [],
+  };
+
+  componentDidMount() {
+    const parentNodes = this.getParentNodes(this.props.node);
+    this.setState({
+      parentNodes,
+    });
+  }
+
+  // 获取节点的父级节点（最多获取5层）
+  getParentNodes = (node: Node) => {
+    const parentNodes = [];
+    let currentNode: UnionNode = node;
+
+    while (currentNode && parentNodes.length < 5) {
+      currentNode = currentNode.getParent();
+      if (currentNode) {
+        parentNodes.push(currentNode);
+      }
+    }
+    return parentNodes;
+  };
+
+  onSelect = (node: Node) => () => {
+    if (node && typeof node.select === 'function') {
+      node.select();
+    }
+  };
+  onMouseOver = (node: Node) => (_: any, flag = true) => {
+    if (node && typeof node.hover === 'function') {
+      node.hover(flag);
+    }
+  };
+  onMouseOut = (node: Node) => (_: any, flag = false) => {
+    if (node && typeof node.hover === 'function') {
+      node.hover(flag);
+    }
+  };
+  renderNodes = (node: Node) => {
+    const nodes = this.state.parentNodes || [];
+    const children = nodes.map((node, key) => {
+      return (
+        <div
+          key={key}
+          onClick={this.onSelect(node)}
+          onMouseEnter={this.onMouseOver(node)}
+          onMouseLeave={this.onMouseOut(node)}
+          className="instance-node-selector-node"
+        >
+          <div className="instance-node-selector-node-content">
+            <Title
+              className="instance-node-selector-node-title"
+              title={{
+                label: node.title,
+                icon: node.icon,
+              }}
+            />
+          </div>
+        </div>
+      );
+    });
+    return children;
+  };
+
+  render() {
+    const { node } = this.props;
+    return (
+      <div className="instance-node-selector">
+        <Popup
+          trigger={
+            <div className="instance-node-selector-current">
+              <Title
+                className="instance-node-selector-node-title"
+                title={{
+                  label: node.title,
+                  icon: node.icon,
+                }}
+              />
+            </div>
+          }
+          triggerType="hover"
+        >
+          <div className="instance-node-selector">{this.renderNodes(node)}</div>
+        </Popup>
+      </div>
+    );
+  }
+}

packages/vision-preset/src/editor.ts

@@ -136,9 +136,9 @@ skeleton.add({
 // });
 
 // 实例节点选择器，线框高亮
-addBuiltinComponentAction({
+// addBuiltinComponentAction({
-  name: 'instance-node-selector',
+//   name: 'instance-node-selector',
-  content: InstanceNodeSelector,
+//   content: InstanceNodeSelector,
-  important: true,
+//   important: true,
-  condition: 'always'
+//   condition: 'always'
-});
+// });