Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[NME] Different selection priorities for nodes and frames dependent of marquee or click selecting #12373

Merged
merged 4 commits into from
Apr 12, 2022
Merged

[NME] Different selection priorities for nodes and frames dependent of marquee or click selecting #12373

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
069eece
[NME] Different preferences for selecting graph nodes and graph frame…
carolhmj Apr 11, 2022
1aac50b
Merge branch 'master' into nmeFixFrameNodeSelectionRules
carolhmj Apr 11, 2022
7f41526
Fix logic to avoid adding the same element multiple times per selection.
carolhmj Apr 11, 2022
619b4b0
Fix linting.
carolhmj Apr 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 58 additions & 31 deletions packages/tools/nodeEditor/src/diagram/graphCanvas.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,11 +172,23 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
return this._frameContainer;
}

// There is a selection conflict between nodes and frames if any selected node is inside any selected frame
private _selectedFrameAndNodesConflict(frameSelection: GraphFrame[], nodeSelection: GraphNode[]) {
for (const frame of frameSelection) {
for (const node of nodeSelection) {
if (frame.nodes.includes(node)) {
return true;
}
}
}
return false;
}

constructor(props: IGraphCanvasComponentProps) {
super(props);

props.globalState.onSelectionChangedObservable.add((options) => {
const { selection, forceKeepSelection } = options || {};
const { selection, forceKeepSelection, marqueeSelection = false } = options || {};
if (!selection) {
this._selectedNodes = [];
this._selectedLink = null;
Expand All @@ -188,36 +200,6 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
this._selectedFrames = [];
this._selectedLink = selection;
this._selectedPort = null;
} else if (selection instanceof GraphFrame && !this._selectedNodes.length) {
if (selection.isCollapsed) {
if (this._ctrlKeyIsPressed || forceKeepSelection) {
if (this._selectedFrames.indexOf(selection) === -1) {
this._selectedFrames.push(selection);
}
} else {
this._selectedFrames = [selection];
this._selectedNodes = [];
this._selectedLink = null;
this._selectedPort = null;
}
} else {
this._selectedNodes = [];
this._selectedFrames = [selection];
this._selectedLink = null;
this._selectedPort = null;
}
} else if (selection instanceof GraphNode) {
if (this._ctrlKeyIsPressed || forceKeepSelection) {
if (this._selectedNodes.indexOf(selection) === -1) {
this._selectedNodes.push(selection);
this._selectedFrames = [];
}
} else {
this._selectedNodes = [selection];
this._selectedFrames = [];
this._selectedLink = null;
this._selectedPort = null;
}
} else if (selection instanceof NodePort) {
this._selectedNodes = [];
this._selectedFrames = [];
Expand All @@ -228,6 +210,51 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
this._selectedFrames = [];
this._selectedLink = null;
this._selectedPort = selection.port;
} else if (selection instanceof GraphNode || selection instanceof GraphFrame) {
// If in marquee selection mode, always prioritize selecting nodes. Otherwise, always prioritize selecting the type of
// the selected element
if (marqueeSelection) {
if (selection instanceof GraphFrame && !this._selectedFrames.includes(selection)) {
this._selectedFrames.push(selection);
} else if (selection instanceof GraphNode && !this._selectedNodes.includes(selection)) {
this._selectedNodes.push(selection);
}
if (this._selectedFrameAndNodesConflict(this.selectedFrames, this.selectedNodes)) {
const framesToRemove = new Set();
for (const selectedNode of this._selectedNodes) {
for (const selectedFrame of this._selectedFrames) {
if (selectedFrame.nodes.includes(selectedNode)) {
framesToRemove.add(selectedFrame);
}
}
}
this._selectedFrames = this._selectedFrames.filter((f) => !framesToRemove.has(f));
}
} else {
if (selection instanceof GraphFrame) {
if (this._ctrlKeyIsPressed || forceKeepSelection) {
if (!this._selectedFrameAndNodesConflict([selection], this._selectedNodes) && !this._selectedFrames.includes(selection)) {
this._selectedFrames.push(selection);
}
} else {
this._selectedFrames = [selection];
this._selectedNodes = [];
this._selectedLink = null;
this._selectedPort = null;
}
} else if (selection instanceof GraphNode) {
if (this._ctrlKeyIsPressed || forceKeepSelection) {
if (!this._selectedFrameAndNodesConflict(this._selectedFrames, [selection]) && !this._selectedNodes.includes(selection)) {
this._selectedNodes.push(selection);
}
} else {
this._selectedFrames = [];
this._selectedNodes = [selection];
this._selectedLink = null;
this._selectedPort = null;
}
}
}
}
}
});
Expand Down
2 changes: 1 addition & 1 deletion packages/tools/nodeEditor/src/diagram/graphFrame.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -674,7 +674,7 @@ export class GraphFrame {
const rect2 = this.element.getBoundingClientRect();
const overlap = !(rect1.right < rect2.left || rect1.left > rect2.right || rect1.bottom < rect2.top || rect1.top > rect2.bottom);
if (overlap) {
canvas.globalState.onSelectionChangedObservable.notifyObservers({ selection: this, forceKeepSelection: true });
canvas.globalState.onSelectionChangedObservable.notifyObservers({ selection: this, forceKeepSelection: true, marqueeSelection: true });
}
});

Expand Down
10 changes: 7 additions & 3 deletions packages/tools/nodeEditor/src/diagram/graphNode.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,6 +158,10 @@ export class GraphNode {
}

public set isSelected(value: boolean) {
this.setIsSelected(value, false);
}

public setIsSelected(value: boolean, marqueeSelection: boolean) {
if (this._isSelected === value) {
return;
}
Expand All @@ -172,7 +176,7 @@ export class GraphNode {
this._ownerCanvas.selectedNodes.splice(indexInSelection, 1);
}
} else {
this._globalState.onSelectionChangedObservable.notifyObservers({ selection: this });
this._globalState.onSelectionChangedObservable.notifyObservers({ selection: this, marqueeSelection });
}
}

Expand Down Expand Up @@ -203,7 +207,7 @@ export class GraphNode {
const rect2 = this._visual.getBoundingClientRect();
const overlap = !(rect1.right < rect2.left || rect1.left > rect2.right || rect1.bottom < rect2.top || rect1.top > rect2.bottom);

this.isSelected = overlap;
this.setIsSelected(overlap, true);
});

this._onFrameCreatedObserver = this._globalState.onFrameCreatedObservable.add((frame) => {
Expand Down Expand Up @@ -326,7 +330,7 @@ export class GraphNode {
if (indexInSelection === -1) {
this._globalState.onSelectionChangedObservable.notifyObservers({ selection: this });
} else if (evt.ctrlKey) {
this.isSelected = false;
this.setIsSelected(false, false);
}

evt.stopPropagation();
Expand Down
1 change: 1 addition & 0 deletions packages/tools/nodeEditor/src/globalState.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import { ParticleSystem } from "core/Particles/particleSystem";
export class ISelectionChangedOptions {
selection: Nullable<GraphNode | NodeLink | GraphFrame | NodePort | FramePortData>;
forceKeepSelection?: boolean;
marqueeSelection?: boolean;
}

export class GlobalState {
Expand Down