@formily-design/react 1.0.10 → 1.0.12

package/esm/containers/Layout.js

@@ -23,6 +23,7 @@ export const Layout = (props) => {
                 theme: props.theme,
                 prefixCls: props.prefixCls,
                 position: props.position,
+                nonInteractiveMarkMessage: props.nonInteractiveMarkMessage,
             } }, props.children)));
 };
 Layout.defaultProps = {

package/esm/types.d.ts

@@ -8,6 +8,7 @@ export interface IDesignerLayoutProps {
     position?: 'fixed' | 'absolute' | 'relative';
     style?: React.CSSProperties;
     className?: string;
+    nonInteractiveMarkMessage?: string;
 }
 export interface IDesignerProps extends IDesignerLayoutProps {
     engine: Engine;
@@ -19,6 +20,7 @@ export interface IDesignerLayoutContext {
     theme?: 'dark' | 'light' | (string & {});
     prefixCls: string;
     position: 'fixed' | 'absolute' | 'relative';
+    nonInteractiveMarkMessage?: string;
 }
 export interface IWorkspaceContext {
     id: string;

package/esm/widgets/AuxToolWidget/DashedBox.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { useHover, usePrefix, useValidNodeOffsetRect, useSelection, } from '../../hooks';
 import { observer } from '@formily/reactive-react';
 export const DashedBox = observer(() => {
+    var _a, _b;
     const hover = useHover();
     const prefix = usePrefix('aux-dashed-box');
     const selection = useSelection();
@@ -27,6 +28,8 @@ export const DashedBox = observer(() => {
         return null;
     if (hover.node.hidden)
         return null;
+    if ((_b = (_a = hover.node).isNonInteractive) === null || _b === void 0 ? void 0 : _b.call(_a))
+        return null;
     if (selection.selected.includes(hover.node.id))
         return null;
     return (React.createElement("div", { className: prefix, style: createTipsStyle() },

package/esm/widgets/AuxToolWidget/Insertion.js

@@ -2,7 +2,9 @@ import React from 'react';
 import { useMoveHelper, usePrefix } from '../../hooks';
 import { ClosestPosition } from '@formily-design/core';
 import { observer } from '@formily/reactive-react';
+import cls from 'classnames';
 export const Insertion = observer(() => {
+    var _a;
     const moveHelper = useMoveHelper();
     const prefix = usePrefix('aux-insertion');
     const createInsertionStyle = () => {
@@ -60,11 +62,10 @@ export const Insertion = observer(() => {
                 baseStyle.transform = `perspective(1px) translate3d(${closestRect.x}px,${closestRect.y}px,0)`;
             }
         }
-        if (closestDirection.includes('FORBID')) {
-            baseStyle.backgroundColor = 'red';
-        }
         return baseStyle;
     };
-    return React.createElement("div", { className: prefix, style: createInsertionStyle() });
+    return (React.createElement("div", { className: cls(prefix, {
+            forbidden: (_a = moveHelper.viewportClosestDirection) === null || _a === void 0 ? void 0 : _a.includes('FORBID'),
+        }), style: createInsertionStyle() }));
 });
 Insertion.displayName = 'Insertion';

package/esm/widgets/AuxToolWidget/NonInteractiveMark.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { TreeNode } from '@formily-design/core';
+export declare const DEFAULT_NON_INTERACTIVE_MARK_MESSAGE = "\u7CFB\u7EDF\u5185\u7F6E\u7EC4\u4EF6\uFF0C\u4E0D\u53EF\u7F16\u8F91";
+export declare const getNonInteractiveMarkNodes: (tree: TreeNode) => TreeNode[];
+export declare const NonInteractiveMark: React.MemoExoticComponent<import("@formily/reactive-react").ReactFC<unknown>>;

package/esm/widgets/AuxToolWidget/NonInteractiveMark.js

@@ -0,0 +1,115 @@
+import React, { useEffect, useState } from 'react';
+import { DragStopEvent } from '@formily-design/core';
+import { observer } from '@formily/reactive-react';
+import cls from 'classnames';
+import { useDesigner, useHover, useLayout, usePrefix, useTree, useValidNodeOffsetRect, } from '../../hooks';
+export const DEFAULT_NON_INTERACTIVE_MARK_MESSAGE = '系统内置组件，不可编辑';
+export const getNonInteractiveMarkNodes = (tree) => {
+    if (!tree)
+        return [];
+    return tree.descendants.filter((node) => {
+        var _a;
+        return !node.hidden && ((_a = node.isNonInteractive) === null || _a === void 0 ? void 0 : _a.call(node));
+    });
+};
+const NonInteractiveMarkBox = observer(({ node, active, message }) => {
+    const prefix = usePrefix('aux-non-interactive-mark');
+    const rect = useValidNodeOffsetRect(node);
+    if (!(rect === null || rect === void 0 ? void 0 : rect.width) || !(rect === null || rect === void 0 ? void 0 : rect.height))
+        return null;
+    return (React.createElement("div", { className: cls(prefix, {
+            active,
+        }), style: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            boxSizing: 'border-box',
+            pointerEvents: 'none',
+            zIndex: 1,
+            transform: `perspective(1px) translate3d(${rect.x}px,${rect.y}px,0)`,
+            width: rect.width,
+            height: rect.height,
+        }, "aria-label": message },
+        React.createElement("span", { className: prefix + '-lock', "aria-hidden": "true" }),
+        active && React.createElement("span", { className: prefix + '-tip' }, message)));
+});
+export const NonInteractiveMark = observer(() => {
+    var _a;
+    const [measureTick, refreshMarks] = useState(0);
+    const engine = useDesigner();
+    const layout = useLayout();
+    const tree = useTree();
+    const hover = useHover();
+    const nodes = getNonInteractiveMarkNodes(tree);
+    const nodeIds = nodes.map((node) => node.id).join('|');
+    const message = ((_a = layout === null || layout === void 0 ? void 0 : layout.nonInteractiveMarkMessage) === null || _a === void 0 ? void 0 : _a.trim()) ||
+        DEFAULT_NON_INTERACTIVE_MARK_MESSAGE;
+    useEffect(() => {
+        /*
+         * tree 数据在首次渲染时通常已经存在，但画布中的真实组件 DOM
+         * 可能还没有完成挂载或布局测量。此时 NonInteractiveMarkBox 内部的
+         * useValidNodeOffsetRect(node) 会拿不到有效 rect，并因为无尺寸直接
+         * return null；mark box 没有真正挂载后，也就没有机会依赖自身的
+         * LayoutObserver 等待后续布局变化。
+         *
+         * 之前用户看到的现象是：默认没有 dn-aux-non-interactive-mark，
+         * 只有 hover 改变 hover.node、触发辅助层重新渲染后，rect 才能被
+         * 重新计算出来，锁标识和虚线边框才出现。
+         *
+         * 业务也可能在 FormilyDesigner 挂载后通过 engine.setCurrentTree()
+         * 设置默认 schema。setCurrentTree 会更新同一个 root tree 的 children，
+         * root tree 引用本身不会变化；如果 effect 只依赖 tree，就不会在不可操作
+         * 节点列表从空变为有值时重新安排测量刷新。因此这里使用不可操作节点 id
+         * 签名作为依赖，让默认 schema 后置注入时也能触发一次补偿测量。
+         *
+         * 这里在父级统一安排一次 requestAnimationFrame，让浏览器进入下一帧
+         * 后再刷新不可操作标识层。measureTick 会参与 mark box 的 key，让这些
+         * 辅助标识组件在下一帧 remount 一次，重新初始化 useValidNodeOffsetRect
+         * 内部缓存的初始 rect。这样可以等画布 DOM 有机会完成挂载/布局后重新
+         * 计算 rect，使默认锁标识在不 hover 时也能显示。刷新只发生一次，不在
+         * 每个节点上分别调度，避免不可操作节点较多时产生重复更新；同时这只
+         * 影响设计器辅助层，不改变节点交互规则，也不会影响 preview 或运行态。
+         */
+        const frame = requestAnimationFrame(() => {
+            refreshMarks((tick) => tick + 1);
+        });
+        return () => {
+            cancelAnimationFrame(frame);
+        };
+    }, [nodeIds]);
+    useEffect(() => {
+        /*
+         * 拖拽移动普通节点到不可操作节点前方时（尤其是
+         * protectNonInteractiveInsertion 关闭的合法场景），不可操作节点会在
+         * 真实画布中被后移。useValidNodeOffsetRect 为了避免拖拽过程中高频测量，
+         * 会在 cursor 处于 Move 拖拽状态时跳过 LayoutObserver 触发的 compute。
+         *
+         * drop 时树结构 mutation 和 DOM 位移通常发生在同一次 drag:stop 事件流程里；
+         * 如果这次布局变化刚好被拖拽态保护跳过，之后 mark box 自身没有新的布局
+         * 事件可依赖，就会继续使用旧 rect。表现上就是锁定虚线框停留在原来的位置，
+         * 而新插入到该位置的可编辑节点看起来被套上了不可操作样式。
+         *
+         * 这里仅在拖拽结束后由父级统一安排一个 requestAnimationFrame，并通过
+         * measureTick remount mark box，让它在下一帧重新读取不可操作节点的最新
+         * offset rect。这样标识跟随真正的不可操作节点移动，同时不改变节点交互
+         * 规则、不影响 preview/运行态，也不会在每个 mark box 上分别创建刷新任务。
+         */
+        let frame = 0;
+        const unsubscribe = engine.subscribeTo(DragStopEvent, () => {
+            if (!nodeIds)
+                return;
+            cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(() => {
+                refreshMarks((tick) => tick + 1);
+            });
+        });
+        return () => {
+            cancelAnimationFrame(frame);
+            unsubscribe === null || unsubscribe === void 0 ? void 0 : unsubscribe();
+        };
+    }, [engine, nodeIds]);
+    return (React.createElement(React.Fragment, null, nodes.map((node) => {
+        return (React.createElement(NonInteractiveMarkBox, { key: `${node.id}-${measureTick}`, node: node, active: (hover === null || hover === void 0 ? void 0 : hover.node) === node, message: message }));
+    })));
+});
+NonInteractiveMark.displayName = 'NonInteractiveMark';

package/esm/widgets/AuxToolWidget/Selection.js

@@ -1,8 +1,9 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useEffect, useState } from 'react';
 import { Helpers } from './Helpers';
 import { ResizeHandler } from './ResizeHandler';
 import { useSelection, useValidNodeOffsetRect, useTree, useCursor, useMoveHelper, usePrefix, useDesigner, } from '../../hooks';
 import { observer } from '@formily/reactive-react';
+import { CursorDragType, DragStopEvent } from '@formily-design/core';
 import { TranslateHandler } from './TranslateHandler';
 export const SelectionBox = (props) => {
     var _a;
@@ -39,10 +40,46 @@ export const SelectionBox = (props) => {
         props.showHelpers && (React.createElement(Helpers, { ...props, node: props.node, nodeRect: nodeRect }))));
 };
 export const Selection = observer(() => {
+    const designer = useDesigner();
+    const [measureTick, refreshSelectionBox] = useState(0);
     const selection = useSelection();
     const tree = useTree();
     const cursor = useCursor();
     const viewportMoveHelper = useMoveHelper();
+    useEffect(() => {
+        /*
+         * SelectionBox 会在拖拽过程中被下面的条件隐藏并卸载：
+         * cursor.status !== 'NORMAL' && viewportMoveHelper.touchNode。
+         * 因此把 drag:stop 后的补偿测量只放在 SelectionBox 内部的
+         * useValidNodeOffsetRect 是不够的：真正释放鼠标时，选择框组件可能
+         * 还没有重新挂载，收不到这次 drag:stop 事件。
+         *
+         * 拖拽排序完成后，selection 仍然指向正确节点 id，但辅助框可能使用
+         * 重新挂载时读到的旧 rect，表现为节点已经换位，dn-aux-selection-box
+         * 还停在拖拽前的位置。这里在始终挂载的 Selection 父层监听 drag:stop，
+         * 等 drop mutation、moveHelper.dragEnd、React 提交和浏览器布局稳定后，
+         * 通过 measureTick remount 选择框，让 useValidNodeOffsetRect 重新读取
+         * 当前 DOM 位置。
+         *
+         * 这里先使用单帧 RAF 做低成本补偿，等拖拽结束引发的状态更新和
+         * React 重挂载有机会提交后再刷新选择框 key。该刷新只发生在 Move
+         * 拖拽结束后，影响范围限于设计器辅助层，不改变节点数据、选择状态或
+         * preview/运行态渲染。
+         */
+        let frame = 0;
+        const unsubscribe = designer.subscribeTo(DragStopEvent, () => {
+            if (designer.cursor.dragType !== CursorDragType.Move)
+                return;
+            cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(() => {
+                refreshSelectionBox((tick) => tick + 1);
+            });
+        });
+        return () => {
+            cancelAnimationFrame(frame);
+            unsubscribe === null || unsubscribe === void 0 ? void 0 : unsubscribe();
+        };
+    }, [designer]);
     if (cursor.status !== 'NORMAL' && viewportMoveHelper.touchNode)
         return null;
     return (React.createElement(Fragment, null, selection.selected.map((id) => {
@@ -51,7 +88,9 @@ export const Selection = observer(() => {
             return;
         if (node.hidden)
             return;
-        return (React.createElement(SelectionBox, { key: id, node: node, showHelpers: selection.selected.length === 1 }));
+        if (!node.allowSelect())
+            return;
+        return (React.createElement(SelectionBox, { key: `${id}-${measureTick}`, node: node, showHelpers: selection.selected.length === 1 }));
     })));
 });
 Selection.displayName = 'Selection';

package/esm/widgets/AuxToolWidget/Selector.js

@@ -51,7 +51,7 @@ export const Selector = observer(({ node }) => {
         return React.createElement(IconWidget, { infer: "Component" });
     };
     const renderMenu = () => {
-        const parents = node.getParents();
+        const parents = node.getParents().filter((parent) => parent.allowSelect());
         return (React.createElement("div", { className: prefix + '-menu', style: {
                 position: 'absolute',
                 top: '100%',

package/esm/widgets/AuxToolWidget/index.js

@@ -7,6 +7,7 @@ import { Cover } from './Cover';
 import { DashedBox } from './DashedBox';
 import { SpaceBlock } from './SpaceBlock';
 import { SnapLine } from './SnapLine';
+import { NonInteractiveMark } from './NonInteractiveMark';
 import './styles.less';
 export const AuxToolWidget = () => {
     const engine = useDesigner();
@@ -26,6 +27,7 @@ export const AuxToolWidget = () => {
         React.createElement(Insertion, null),
         React.createElement(SpaceBlock, null),
         React.createElement(SnapLine, null),
+        React.createElement(NonInteractiveMark, null),
         React.createElement(DashedBox, null),
         React.createElement(Selection, null),
         React.createElement(Cover, null),

package/esm/widgets/AuxToolWidget/styles.less

@@ -174,6 +174,11 @@
 
 .@{prefix-cls}-aux-insertion {
   background-color: var(--dn-aux-insertion-color);
+
+  &.forbidden {
+    background-color: var(--dn-aux-insertion-forbidden-color, red);
+    box-shadow: 0 0 0 1px rgba(255, 0, 0, 0.18);
+  }
 }
 
 .@{prefix-cls}-aux-dashed-box {
@@ -184,6 +189,77 @@
   }
 }
 
+.@{prefix-cls}-aux-non-interactive-mark {
+  border: 1px dashed var(--dn-aux-non-interactive-border-color, #7f93aa);
+  background: var(--dn-aux-non-interactive-bg-color, rgba(127, 147, 170, 0.04));
+  transition: border-color 0.12s ease, background-color 0.12s ease,
+    box-shadow 0.12s ease;
+
+  &.active {
+    border-color: var(--dn-aux-non-interactive-active-border-color, #3f5f7f);
+    background: var(
+      --dn-aux-non-interactive-active-bg-color,
+      rgba(63, 95, 127, 0.07)
+    );
+    box-shadow: 0 0 0 1px rgba(63, 95, 127, 0.12);
+  }
+
+  &-lock {
+    position: absolute;
+    top: -1px;
+    right: -1px;
+    width: 16px;
+    height: 16px;
+    border-radius: 0 1px 0 6px;
+    background: var(--dn-aux-non-interactive-lock-bg-color, #5f7286);
+    box-shadow: 0 1px 3px rgba(31, 45, 61, 0.18);
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: 5px;
+      top: 3px;
+      width: 6px;
+      height: 5px;
+      border: 1.5px solid #fff;
+      border-bottom: 0;
+      border-radius: 5px 5px 0 0;
+      box-sizing: border-box;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      left: 4px;
+      top: 7px;
+      width: 8px;
+      height: 6px;
+      border-radius: 1px;
+      background: #fff;
+    }
+  }
+
+  &.active &-lock {
+    background: var(--dn-aux-non-interactive-active-lock-bg-color, #334f6b);
+  }
+
+  &-tip {
+    position: absolute;
+    right: -1px;
+    bottom: 100%;
+    margin-bottom: 4px;
+    padding: 2px 6px;
+    border-radius: 2px;
+    color: #fff;
+    background: var(--dn-aux-non-interactive-tip-bg-color, #334f6b);
+    box-shadow: 0 2px 8px rgba(31, 45, 61, 0.18);
+    font-size: 12px;
+    line-height: 18px;
+    white-space: nowrap;
+    user-select: none;
+  }
+}
+
 .@{prefix-cls}-aux-selection-box {
   border: 2px solid var(--dn-aux-selection-box-border-color);
   position: relative;

package/lib/containers/Layout.js

@@ -62,6 +62,7 @@ const Layout = (props) => {
                 theme: props.theme,
                 prefixCls: props.prefixCls,
                 position: props.position,
+                nonInteractiveMarkMessage: props.nonInteractiveMarkMessage,
             } }, props.children)));
 };
 exports.Layout = Layout;

package/lib/types.d.ts

@@ -8,6 +8,7 @@ export interface IDesignerLayoutProps {
     position?: 'fixed' | 'absolute' | 'relative';
     style?: React.CSSProperties;
     className?: string;
+    nonInteractiveMarkMessage?: string;
 }
 export interface IDesignerProps extends IDesignerLayoutProps {
     engine: Engine;
@@ -19,6 +20,7 @@ export interface IDesignerLayoutContext {
     theme?: 'dark' | 'light' | (string & {});
     prefixCls: string;
     position: 'fixed' | 'absolute' | 'relative';
+    nonInteractiveMarkMessage?: string;
 }
 export interface IWorkspaceContext {
     id: string;

package/lib/widgets/AuxToolWidget/DashedBox.js

@@ -8,6 +8,7 @@ const react_1 = __importDefault(require("react"));
 const hooks_1 = require("../../hooks");
 const reactive_react_1 = require("@formily/reactive-react");
 exports.DashedBox = (0, reactive_react_1.observer)(() => {
+    var _a, _b;
     const hover = (0, hooks_1.useHover)();
     const prefix = (0, hooks_1.usePrefix)('aux-dashed-box');
     const selection = (0, hooks_1.useSelection)();
@@ -33,6 +34,8 @@ exports.DashedBox = (0, reactive_react_1.observer)(() => {
         return null;
     if (hover.node.hidden)
         return null;
+    if ((_b = (_a = hover.node).isNonInteractive) === null || _b === void 0 ? void 0 : _b.call(_a))
+        return null;
     if (selection.selected.includes(hover.node.id))
         return null;
     return (react_1.default.createElement("div", { className: prefix, style: createTipsStyle() },

package/lib/widgets/AuxToolWidget/Insertion.js

@@ -8,7 +8,9 @@ const react_1 = __importDefault(require("react"));
 const hooks_1 = require("../../hooks");
 const core_1 = require("@formily-design/core");
 const reactive_react_1 = require("@formily/reactive-react");
+const classnames_1 = __importDefault(require("classnames"));
 exports.Insertion = (0, reactive_react_1.observer)(() => {
+    var _a;
     const moveHelper = (0, hooks_1.useMoveHelper)();
     const prefix = (0, hooks_1.usePrefix)('aux-insertion');
     const createInsertionStyle = () => {
@@ -66,11 +68,10 @@ exports.Insertion = (0, reactive_react_1.observer)(() => {
                 baseStyle.transform = `perspective(1px) translate3d(${closestRect.x}px,${closestRect.y}px,0)`;
             }
         }
-        if (closestDirection.includes('FORBID')) {
-            baseStyle.backgroundColor = 'red';
-        }
         return baseStyle;
     };
-    return react_1.default.createElement("div", { className: prefix, style: createInsertionStyle() });
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(prefix, {
+            forbidden: (_a = moveHelper.viewportClosestDirection) === null || _a === void 0 ? void 0 : _a.includes('FORBID'),
+        }), style: createInsertionStyle() }));
 });
 exports.Insertion.displayName = 'Insertion';

package/lib/widgets/AuxToolWidget/NonInteractiveMark.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { TreeNode } from '@formily-design/core';
+export declare const DEFAULT_NON_INTERACTIVE_MARK_MESSAGE = "\u7CFB\u7EDF\u5185\u7F6E\u7EC4\u4EF6\uFF0C\u4E0D\u53EF\u7F16\u8F91";
+export declare const getNonInteractiveMarkNodes: (tree: TreeNode) => TreeNode[];
+export declare const NonInteractiveMark: React.MemoExoticComponent<import("@formily/reactive-react").ReactFC<unknown>>;

package/lib/widgets/AuxToolWidget/NonInteractiveMark.js

@@ -0,0 +1,155 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NonInteractiveMark = exports.getNonInteractiveMarkNodes = exports.DEFAULT_NON_INTERACTIVE_MARK_MESSAGE = void 0;
+const react_1 = __importStar(require("react"));
+const core_1 = require("@formily-design/core");
+const reactive_react_1 = require("@formily/reactive-react");
+const classnames_1 = __importDefault(require("classnames"));
+const hooks_1 = require("../../hooks");
+exports.DEFAULT_NON_INTERACTIVE_MARK_MESSAGE = '系统内置组件，不可编辑';
+const getNonInteractiveMarkNodes = (tree) => {
+    if (!tree)
+        return [];
+    return tree.descendants.filter((node) => {
+        var _a;
+        return !node.hidden && ((_a = node.isNonInteractive) === null || _a === void 0 ? void 0 : _a.call(node));
+    });
+};
+exports.getNonInteractiveMarkNodes = getNonInteractiveMarkNodes;
+const NonInteractiveMarkBox = (0, reactive_react_1.observer)(({ node, active, message }) => {
+    const prefix = (0, hooks_1.usePrefix)('aux-non-interactive-mark');
+    const rect = (0, hooks_1.useValidNodeOffsetRect)(node);
+    if (!(rect === null || rect === void 0 ? void 0 : rect.width) || !(rect === null || rect === void 0 ? void 0 : rect.height))
+        return null;
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(prefix, {
+            active,
+        }), style: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            boxSizing: 'border-box',
+            pointerEvents: 'none',
+            zIndex: 1,
+            transform: `perspective(1px) translate3d(${rect.x}px,${rect.y}px,0)`,
+            width: rect.width,
+            height: rect.height,
+        }, "aria-label": message },
+        react_1.default.createElement("span", { className: prefix + '-lock', "aria-hidden": "true" }),
+        active && react_1.default.createElement("span", { className: prefix + '-tip' }, message)));
+});
+exports.NonInteractiveMark = (0, reactive_react_1.observer)(() => {
+    var _a;
+    const [measureTick, refreshMarks] = (0, react_1.useState)(0);
+    const engine = (0, hooks_1.useDesigner)();
+    const layout = (0, hooks_1.useLayout)();
+    const tree = (0, hooks_1.useTree)();
+    const hover = (0, hooks_1.useHover)();
+    const nodes = (0, exports.getNonInteractiveMarkNodes)(tree);
+    const nodeIds = nodes.map((node) => node.id).join('|');
+    const message = ((_a = layout === null || layout === void 0 ? void 0 : layout.nonInteractiveMarkMessage) === null || _a === void 0 ? void 0 : _a.trim()) ||
+        exports.DEFAULT_NON_INTERACTIVE_MARK_MESSAGE;
+    (0, react_1.useEffect)(() => {
+        /*
+         * tree 数据在首次渲染时通常已经存在，但画布中的真实组件 DOM
+         * 可能还没有完成挂载或布局测量。此时 NonInteractiveMarkBox 内部的
+         * useValidNodeOffsetRect(node) 会拿不到有效 rect，并因为无尺寸直接
+         * return null；mark box 没有真正挂载后，也就没有机会依赖自身的
+         * LayoutObserver 等待后续布局变化。
+         *
+         * 之前用户看到的现象是：默认没有 dn-aux-non-interactive-mark，
+         * 只有 hover 改变 hover.node、触发辅助层重新渲染后，rect 才能被
+         * 重新计算出来，锁标识和虚线边框才出现。
+         *
+         * 业务也可能在 FormilyDesigner 挂载后通过 engine.setCurrentTree()
+         * 设置默认 schema。setCurrentTree 会更新同一个 root tree 的 children，
+         * root tree 引用本身不会变化；如果 effect 只依赖 tree，就不会在不可操作
+         * 节点列表从空变为有值时重新安排测量刷新。因此这里使用不可操作节点 id
+         * 签名作为依赖，让默认 schema 后置注入时也能触发一次补偿测量。
+         *
+         * 这里在父级统一安排一次 requestAnimationFrame，让浏览器进入下一帧
+         * 后再刷新不可操作标识层。measureTick 会参与 mark box 的 key，让这些
+         * 辅助标识组件在下一帧 remount 一次，重新初始化 useValidNodeOffsetRect
+         * 内部缓存的初始 rect。这样可以等画布 DOM 有机会完成挂载/布局后重新
+         * 计算 rect，使默认锁标识在不 hover 时也能显示。刷新只发生一次，不在
+         * 每个节点上分别调度，避免不可操作节点较多时产生重复更新；同时这只
+         * 影响设计器辅助层，不改变节点交互规则，也不会影响 preview 或运行态。
+         */
+        const frame = requestAnimationFrame(() => {
+            refreshMarks((tick) => tick + 1);
+        });
+        return () => {
+            cancelAnimationFrame(frame);
+        };
+    }, [nodeIds]);
+    (0, react_1.useEffect)(() => {
+        /*
+         * 拖拽移动普通节点到不可操作节点前方时（尤其是
+         * protectNonInteractiveInsertion 关闭的合法场景），不可操作节点会在
+         * 真实画布中被后移。useValidNodeOffsetRect 为了避免拖拽过程中高频测量，
+         * 会在 cursor 处于 Move 拖拽状态时跳过 LayoutObserver 触发的 compute。
+         *
+         * drop 时树结构 mutation 和 DOM 位移通常发生在同一次 drag:stop 事件流程里；
+         * 如果这次布局变化刚好被拖拽态保护跳过，之后 mark box 自身没有新的布局
+         * 事件可依赖，就会继续使用旧 rect。表现上就是锁定虚线框停留在原来的位置，
+         * 而新插入到该位置的可编辑节点看起来被套上了不可操作样式。
+         *
+         * 这里仅在拖拽结束后由父级统一安排一个 requestAnimationFrame，并通过
+         * measureTick remount mark box，让它在下一帧重新读取不可操作节点的最新
+         * offset rect。这样标识跟随真正的不可操作节点移动，同时不改变节点交互
+         * 规则、不影响 preview/运行态，也不会在每个 mark box 上分别创建刷新任务。
+         */
+        let frame = 0;
+        const unsubscribe = engine.subscribeTo(core_1.DragStopEvent, () => {
+            if (!nodeIds)
+                return;
+            cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(() => {
+                refreshMarks((tick) => tick + 1);
+            });
+        });
+        return () => {
+            cancelAnimationFrame(frame);
+            unsubscribe === null || unsubscribe === void 0 ? void 0 : unsubscribe();
+        };
+    }, [engine, nodeIds]);
+    return (react_1.default.createElement(react_1.default.Fragment, null, nodes.map((node) => {
+        return (react_1.default.createElement(NonInteractiveMarkBox, { key: `${node.id}-${measureTick}`, node: node, active: (hover === null || hover === void 0 ? void 0 : hover.node) === node, message: message }));
+    })));
+});
+exports.NonInteractiveMark.displayName = 'NonInteractiveMark';

package/lib/widgets/AuxToolWidget/Selection.js

@@ -39,6 +39,7 @@ const Helpers_1 = require("./Helpers");
 const ResizeHandler_1 = require("./ResizeHandler");
 const hooks_1 = require("../../hooks");
 const reactive_react_1 = require("@formily/reactive-react");
+const core_1 = require("@formily-design/core");
 const TranslateHandler_1 = require("./TranslateHandler");
 const SelectionBox = (props) => {
     var _a;
@@ -76,10 +77,46 @@ const SelectionBox = (props) => {
 };
 exports.SelectionBox = SelectionBox;
 exports.Selection = (0, reactive_react_1.observer)(() => {
+    const designer = (0, hooks_1.useDesigner)();
+    const [measureTick, refreshSelectionBox] = (0, react_1.useState)(0);
     const selection = (0, hooks_1.useSelection)();
     const tree = (0, hooks_1.useTree)();
     const cursor = (0, hooks_1.useCursor)();
     const viewportMoveHelper = (0, hooks_1.useMoveHelper)();
+    (0, react_1.useEffect)(() => {
+        /*
+         * SelectionBox 会在拖拽过程中被下面的条件隐藏并卸载：
+         * cursor.status !== 'NORMAL' && viewportMoveHelper.touchNode。
+         * 因此把 drag:stop 后的补偿测量只放在 SelectionBox 内部的
+         * useValidNodeOffsetRect 是不够的：真正释放鼠标时，选择框组件可能
+         * 还没有重新挂载，收不到这次 drag:stop 事件。
+         *
+         * 拖拽排序完成后，selection 仍然指向正确节点 id，但辅助框可能使用
+         * 重新挂载时读到的旧 rect，表现为节点已经换位，dn-aux-selection-box
+         * 还停在拖拽前的位置。这里在始终挂载的 Selection 父层监听 drag:stop，
+         * 等 drop mutation、moveHelper.dragEnd、React 提交和浏览器布局稳定后，
+         * 通过 measureTick remount 选择框，让 useValidNodeOffsetRect 重新读取
+         * 当前 DOM 位置。
+         *
+         * 这里先使用单帧 RAF 做低成本补偿，等拖拽结束引发的状态更新和
+         * React 重挂载有机会提交后再刷新选择框 key。该刷新只发生在 Move
+         * 拖拽结束后，影响范围限于设计器辅助层，不改变节点数据、选择状态或
+         * preview/运行态渲染。
+         */
+        let frame = 0;
+        const unsubscribe = designer.subscribeTo(core_1.DragStopEvent, () => {
+            if (designer.cursor.dragType !== core_1.CursorDragType.Move)
+                return;
+            cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(() => {
+                refreshSelectionBox((tick) => tick + 1);
+            });
+        });
+        return () => {
+            cancelAnimationFrame(frame);
+            unsubscribe === null || unsubscribe === void 0 ? void 0 : unsubscribe();
+        };
+    }, [designer]);
     if (cursor.status !== 'NORMAL' && viewportMoveHelper.touchNode)
         return null;
     return (react_1.default.createElement(react_1.Fragment, null, selection.selected.map((id) => {
@@ -88,7 +125,9 @@ exports.Selection = (0, reactive_react_1.observer)(() => {
             return;
         if (node.hidden)
             return;
-        return (react_1.default.createElement(exports.SelectionBox, { key: id, node: node, showHelpers: selection.selected.length === 1 }));
+        if (!node.allowSelect())
+            return;
+        return (react_1.default.createElement(exports.SelectionBox, { key: `${id}-${measureTick}`, node: node, showHelpers: selection.selected.length === 1 }));
     })));
 });
 exports.Selection.displayName = 'Selection';

package/lib/widgets/AuxToolWidget/Selector.js

@@ -87,7 +87,7 @@ exports.Selector = (0, reactive_react_1.observer)(({ node }) => {
         return react_1.default.createElement(IconWidget_1.IconWidget, { infer: "Component" });
     };
     const renderMenu = () => {
-        const parents = node.getParents();
+        const parents = node.getParents().filter((parent) => parent.allowSelect());
         return (react_1.default.createElement("div", { className: prefix + '-menu', style: {
                 position: 'absolute',
                 top: '100%',

package/lib/widgets/AuxToolWidget/index.js

@@ -43,6 +43,7 @@ const Cover_1 = require("./Cover");
 const DashedBox_1 = require("./DashedBox");
 const SpaceBlock_1 = require("./SpaceBlock");
 const SnapLine_1 = require("./SnapLine");
+const NonInteractiveMark_1 = require("./NonInteractiveMark");
 require("./styles.less");
 const AuxToolWidget = () => {
     const engine = (0, hooks_1.useDesigner)();
@@ -62,6 +63,7 @@ const AuxToolWidget = () => {
         react_1.default.createElement(Insertion_1.Insertion, null),
         react_1.default.createElement(SpaceBlock_1.SpaceBlock, null),
         react_1.default.createElement(SnapLine_1.SnapLine, null),
+        react_1.default.createElement(NonInteractiveMark_1.NonInteractiveMark, null),
         react_1.default.createElement(DashedBox_1.DashedBox, null),
         react_1.default.createElement(Selection_1.Selection, null),
         react_1.default.createElement(Cover_1.Cover, null),

package/lib/widgets/AuxToolWidget/styles.less

@@ -174,6 +174,11 @@
 
 .@{prefix-cls}-aux-insertion {
   background-color: var(--dn-aux-insertion-color);
+
+  &.forbidden {
+    background-color: var(--dn-aux-insertion-forbidden-color, red);
+    box-shadow: 0 0 0 1px rgba(255, 0, 0, 0.18);
+  }
 }
 
 .@{prefix-cls}-aux-dashed-box {
@@ -184,6 +189,77 @@
   }
 }
 
+.@{prefix-cls}-aux-non-interactive-mark {
+  border: 1px dashed var(--dn-aux-non-interactive-border-color, #7f93aa);
+  background: var(--dn-aux-non-interactive-bg-color, rgba(127, 147, 170, 0.04));
+  transition: border-color 0.12s ease, background-color 0.12s ease,
+    box-shadow 0.12s ease;
+
+  &.active {
+    border-color: var(--dn-aux-non-interactive-active-border-color, #3f5f7f);
+    background: var(
+      --dn-aux-non-interactive-active-bg-color,
+      rgba(63, 95, 127, 0.07)
+    );
+    box-shadow: 0 0 0 1px rgba(63, 95, 127, 0.12);
+  }
+
+  &-lock {
+    position: absolute;
+    top: -1px;
+    right: -1px;
+    width: 16px;
+    height: 16px;
+    border-radius: 0 1px 0 6px;
+    background: var(--dn-aux-non-interactive-lock-bg-color, #5f7286);
+    box-shadow: 0 1px 3px rgba(31, 45, 61, 0.18);
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: 5px;
+      top: 3px;
+      width: 6px;
+      height: 5px;
+      border: 1.5px solid #fff;
+      border-bottom: 0;
+      border-radius: 5px 5px 0 0;
+      box-sizing: border-box;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      left: 4px;
+      top: 7px;
+      width: 8px;
+      height: 6px;
+      border-radius: 1px;
+      background: #fff;
+    }
+  }
+
+  &.active &-lock {
+    background: var(--dn-aux-non-interactive-active-lock-bg-color, #334f6b);
+  }
+
+  &-tip {
+    position: absolute;
+    right: -1px;
+    bottom: 100%;
+    margin-bottom: 4px;
+    padding: 2px 6px;
+    border-radius: 2px;
+    color: #fff;
+    background: var(--dn-aux-non-interactive-tip-bg-color, #334f6b);
+    box-shadow: 0 2px 8px rgba(31, 45, 61, 0.18);
+    font-size: 12px;
+    line-height: 18px;
+    white-space: nowrap;
+    user-select: none;
+  }
+}
+
 .@{prefix-cls}-aux-selection-box {
   border: 2px solid var(--dn-aux-selection-box-border-color);
   position: relative;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formily-design/react",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "license": "MIT",
   "main": "lib",
   "types": "lib/index.d.ts",
@@ -35,12 +35,12 @@
     "react": "18.x || 17.x"
   },
   "dependencies": {
-    "@formily-design/core": "1.0.10",
-    "@formily-design/shared": "1.0.10",
+    "@formily-design/core": "1.0.12",
+    "@formily-design/shared": "1.0.12",
     "dateformat": "^4.5.1"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3a3e64fc52cb494eeac7800fd5a8e88c4460936e"
+  "gitHead": "21f497829728c1205fcd2c3867088640ab2c04b7"
 }