diff --git a/packages/designer/src/builtin-simulator/bem-tools/border-selecting.tsx b/packages/designer/src/builtin-simulator/bem-tools/border-selecting.tsx
index 53b051ca5..faa11d4f3 100644
--- a/packages/designer/src/builtin-simulator/bem-tools/border-selecting.tsx
+++ b/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 (
{actions}
+
);
}
diff --git a/packages/designer/src/builtin-simulator/bem-tools/borders.less b/packages/designer/src/builtin-simulator/bem-tools/borders.less
index b602193b5..56d5875fa 100644
--- a/packages/designer/src/builtin-simulator/bem-tools/borders.less
+++ b/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;
diff --git a/packages/designer/src/builtin-simulator/node-selector/index.less b/packages/designer/src/builtin-simulator/node-selector/index.less
new file mode 100644
index 000000000..c630e0914
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/packages/designer/src/builtin-simulator/node-selector/index.tsx b/packages/designer/src/builtin-simulator/node-selector/index.tsx
new file mode 100644
index 000000000..f63f5c282
--- /dev/null
+++ b/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 {
+ 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 (
+
+ );
+ });
+ return children;
+ };
+
+ render() {
+ const { node } = this.props;
+ return (
+
+ }
+ triggerType="hover"
+ >
+ {this.renderNodes(node)}
+
+
+ );
+ }
+}
diff --git a/packages/vision-preset/src/editor.ts b/packages/vision-preset/src/editor.ts
index 5dac4dfd4..6e6a828d1 100644
--- a/packages/vision-preset/src/editor.ts
+++ b/packages/vision-preset/src/editor.ts
@@ -136,9 +136,9 @@ skeleton.add({
// });
// 实例节点选择器,线框高亮
-addBuiltinComponentAction({
- name: 'instance-node-selector',
- content: InstanceNodeSelector,
- important: true,
- condition: 'always'
-});
+// addBuiltinComponentAction({
+// name: 'instance-node-selector',
+// content: InstanceNodeSelector,
+// important: true,
+// condition: 'always'
+// });