Restricting drops

Three mechanisms decide what can be dragged and where it can land. All three exist today and work together.

1. Attributes

Set them per node in the JSON, or for every node through the global attributes (tabEnableDrag, tabSetEnableDrop, …):

{
    "type": "tabset",
    "id": "console",
    "enableDrop": false,
    "enableDivide": false,
    "children": [{ "type": "tab", "name": "Console", "enableDrag": false }]
}

Change them at runtime with Actions.updateNodeAttributes(nodeId, { enableDrop: false }) (a "lock layout" toggle), or Actions.updateModelAttributes({ tabSetEnableDrop: false }) for all.

2. model.setOnAllowDrop

For rules that depend on what is dragged and where, give the model a predicate. It runs during the drag, for every candidate target, so a refused target never shows the indicator:

import { type DropInfo, type Node, TabNode, TabSetNode } from "@fragiola/dockable";

model.setOnAllowDrop((dragNode: Node, dropInfo: DropInfo) => {
    const target = dropInfo.node; // the tabset (or row) the drop would go into
    // tabs from the "tools" group only dock into tool tabsets
    if (dragNode instanceof TabNode && dragNode.getConfig()?.group === "tools") {
        return target instanceof TabSetNode && target.getConfig()?.kind === "tools";
    }
    // nothing docks to the layout's outer edge
    return dropInfo.kind !== "edge";
});

dropInfo has the target node, the location (a DockLocation: dropInfo.location.getName() is "center", "top", …), the tab index, the outline rect and the kind ("rect" or "edge").

Set it once, right after creating the model. It belongs to the model instance: a new model (after undo/redo or restoring) needs it set again. Or pass the same function as onAllowDrop to Dockable.Root: the root sets it on whatever model it renders, and restores the model's own rule when the prop goes away.

<Dockable.Root model={model} onAllowDrop={allowDrop}>

const [model] = useState(() => {
    const model = Model.fromJson(json);
    model.setOnAllowDrop(allowDrop);
    return model;
});

3. onAction: the last word

A drop dispatches Actions.moveNode through onAction, so you can still veto (or rewrite) a drop at the moment it happens. Use it for rules that need async work or app state, knowing that the indicator already showed the target as valid:

const onAction = (action: Action) => {
    if (action.type === Actions.MOVE_NODE && isLocked(action.data.toNode)) {
        return undefined;
    }
    return action;
};

Feedback for a refused target

Over a target that a rule refuses, the outline hides, the browser shows its "not allowed" cursor, and Dockable.Root, DropIndicator and the refusing TabSet get data-drop-refused. Style them to say why: see Drop zones and drop feedback and the locked-regions example above.