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

Move also edge bendpoints of nested nodes when parent is moved #442

Merged
merged 1 commit into from
Mar 6, 2024
Merged

Move also edge bendpoints of nested nodes when parent is moved #442

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
160 changes: 45 additions & 115 deletions examples/classdiagram/src/model-source.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,8 +241,8 @@ export class ClassDiagramModelSource extends LocalModelSource {
type: 'node:class',
expanded: false,
position: {
x: 200,
y: 350
x: 270,
y: 200
},
layout: 'vbox',
children: [
Expand Down Expand Up @@ -285,7 +285,7 @@ export class ClassDiagramModelSource extends LocalModelSource {
type: 'node:class',
expanded: false,
position: {
x: 540,
x: 740,
y: 25
},
layout: 'vbox',
Expand Down Expand Up @@ -339,7 +339,7 @@ export class ClassDiagramModelSource extends LocalModelSource {
<SLabel>{
id: 'package0_pkgname',
type: 'label:heading',
text: 'com.example.package',
text: 'com.example.package0',
position: {
x: 10,
y: 10
Expand All @@ -349,126 +349,56 @@ export class ClassDiagramModelSource extends LocalModelSource {
id: 'package0_content',
type: 'comp:pkgcontent',
children: [
node1
node1, node2
]
}
]
};
const edge0 = {
id: 'edge0',
type: 'edge:straight',
sourceId: node0.id,
targetId: node1.id,
const package1: SNode = {
id: 'package1',
type: 'node:package',
position: {
x: 60,
y: 10
},
size: {
width: 300,
height: 200
},
children: [
<SLabel> {
id: 'edge0_label_on',
type: 'label:text',
text: 'on',
edgePlacement: {
position: 0.5,
side: 'on',
rotate: false
}
},
<SLabel> {
id: 'edge0_label_top',
type: 'label:text',
text: 'top',
edgePlacement: {
position: 0.3,
side: 'top',
rotate: false
}
},
<SLabel> {
id: 'edge0_label_bottom',
type: 'label:text',
text: 'bottom',
edgePlacement: {
position: 0.3,
side: 'bottom',
rotate: false
}
},
<SLabel> {
id: 'edge0_label_left',
type: 'label:text',
text: 'left',
edgePlacement: {
position: 0.7,
side: 'left',
rotate: false
<SLabel>{
id: 'package1_pkgname',
type: 'label:heading',
text: 'com.example.package1',
position: {
x: 10,
y: 10
}
},
<SLabel & EdgeLayoutable> {
id: 'edge0_label_right',
type: 'label:text',
text: 'right',
edgePlacement: {
position: 0.7,
side: 'right',
rotate: false,
moveMode: 'edge' // optional, because it's the default anyway
}
<SCompartment>{
id: 'package1_content',
type: 'comp:pkgcontent',
children: [
node0
]
}
]
};
const edge0 = {
id: 'edge0',
type: 'edge:straight',
routerKind: 'manhattan',
sourceId: node0.id,
targetId: node1.id,
children: []
} as SEdge;
const edge1 = {
id: 'edge1',
type: 'edge:straight',
sourceId: node0.id,
sourceId: node1.id,
targetId: node2.id,
routerKind: 'manhattan',
children: [
<SLabel> {
id: 'edge1_label_on',
type: 'label:text',
text: 'on',
edgePlacement: {
position: 0.5,
side: 'on',
rotate: true
}
},
<SLabel> {
id: 'edge1_label_top',
type: 'label:text',
text: 'top',
edgePlacement: {
position: 0,
side: 'top',
}
},
<SLabel> {
id: 'edge1_label_bottom',
type: 'label:text',
text: 'bottom',
edgePlacement: {
position: 0,
side: 'bottom',
}
},
<SLabel> {
id: 'edge1_label_left',
type: 'label:text',
text: 'left',
edgePlacement: {
position: 1,
side: 'left'
}
},
<SLabel & EdgeLayoutable> {
id: 'edge1_label_right',
type: 'label:text',
text: 'right',
edgePlacement: {
position: 1,
rotate: true,
side: 'right',
moveMode: 'edge'
}
}
]
children: []
} as SEdge;
const edge2 = {
id: 'edge2',
Expand All @@ -477,11 +407,11 @@ export class ClassDiagramModelSource extends LocalModelSource {
targetId: node3.id,
routerKind: 'bezier',
routingPoints: [
{ x: 260, y: 140 },
{ x: 290, y: 80 },
{ x: 350, y: 100 },
{ x: 390, y: 120 },
{ x: 450, y: 40 }
{ x: 360, y: 140 },
{ x: 390, y: 80 },
{ x: 450, y: 100 },
{ x: 490, y: 120 },
{ x: 550, y: 40 }
],
children: [
<SLabel & EdgeLayoutable> {
Expand Down Expand Up @@ -530,7 +460,7 @@ export class ClassDiagramModelSource extends LocalModelSource {
const graph: SGraph = {
id: 'graph',
type: 'graph',
children: [node0, node2, node3, package0, edge0, edge1, edge2 ],
children: [package0, package1, node3, edge0, edge1, edge2 ],
layoutOptions: {
hGap: 5,
hAlign: 'left',
Expand Down
74 changes: 59 additions & 15 deletions packages/sprotty/src/features/move/move.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import { Bounds, Point } from 'sprotty-protocol/lib/utils/geometry';
import { Action, DeleteElementAction, ReconnectAction, SelectAction, SelectAllAction, MoveAction } from 'sprotty-protocol/lib/actions';
import { Animation, CompoundAnimation } from '../../base/animations/animation';
import { CommandExecutionContext, ICommand, MergeableCommand, CommandReturn, IStoppableCommand } from '../../base/commands/command';
import { SChildElementImpl, SModelElementImpl, SModelRootImpl } from '../../base/model/smodel';
import { SChildElementImpl, SModelElementImpl, SModelRootImpl, isParent } from '../../base/model/smodel';
import { findParentByFeature, translatePoint } from '../../base/model/smodel-utils';
import { TYPES } from '../../base/types';
import { MouseListener } from '../../base/views/mouse-tool';
Expand All @@ -33,7 +33,7 @@ import { findChildrenAtPosition, isAlignable } from '../bounds/model';
import { CreatingOnDrag, isCreatingOnDrag } from '../edit/create-on-drag';
import { SwitchEditModeAction } from '../edit/edit-routing';
import { ReconnectCommand } from '../edit/reconnect';
import { edgeInProgressID, edgeInProgressTargetHandleID, isConnectable, SRoutableElementImpl, SRoutingHandleImpl } from '../routing/model';
import { edgeInProgressID, edgeInProgressTargetHandleID, isConnectable, SConnectableElementImpl, SRoutableElementImpl, SRoutingHandleImpl } from '../routing/model';
import { EdgeMemento, EdgeRouterRegistry, EdgeSnapshot, RoutedPoint } from '../routing/routing';
import { isEdgeLayoutable } from '../edge-layout/model';
import { isSelectable } from '../select/model';
Expand Down Expand Up @@ -106,16 +106,32 @@ export class MoveCommand extends MergeableCommand implements IStoppableCommand {
if (resolvedMove) {
this.resolvedMoves.set(resolvedMove.element.id, resolvedMove);
if (this.edgeRouterRegistry) {
index.getAttachedElements(element).forEach(edge => {
if (edge instanceof SRoutableElementImpl) {
const existingDelta = attachedEdgeShifts.get(edge);
const newDelta = Point.subtract(resolvedMove.toPosition, resolvedMove.fromPosition);
const delta = (existingDelta)
? Point.linear(existingDelta, newDelta, 0.5)
: newDelta;
attachedEdgeShifts.set(edge, delta);
const handleEdges = (el: SModelElementImpl) => {
index.getAttachedElements(el).forEach(edge => {
if (edge instanceof SRoutableElementImpl) {
const existingDelta = attachedEdgeShifts.get(edge);
const newDelta = Point.subtract(resolvedMove.toPosition, resolvedMove.fromPosition);
const delta = (existingDelta)
? Point.linear(existingDelta, newDelta, 0.5)
: newDelta;
attachedEdgeShifts.set(edge, delta);
}
});
};
const handleEdgesForChildren = (el: SModelElementImpl) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we really need to move all edges for children? If an edge is contained in the element, its coordinates are usually relative to that element, so we don't need to change them when the element is moved.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes. They need to be put into attachedEdgeShifts because otherwise they aren't handled here and the routing points stay where they are.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But what happens if package A contains nodes B and C, and those two nodes are connected by an edge which is also a child of A? Could you try that case? What we need to avoid is moving routing points for elements that are relative to a moved container.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried that case. I changed the class diagram because of that case. Before the routing points of such an edge didn't move at all with the parent but stay at their absolute position.

if (isParent(el)) {
el.children.forEach(childEl => {
if (childEl instanceof SModelElementImpl) {
if (childEl instanceof SConnectableElementImpl) {
handleEdges(childEl);
}
handleEdgesForChildren(childEl);
}
});
}
});
};
handleEdgesForChildren(element);
handleEdges(element);
}
}
}
Expand Down Expand Up @@ -172,10 +188,7 @@ export class MoveCommand extends MergeableCommand implements IStoppableCommand {
if (!edge2move.get(edge)) {
const router = this.edgeRouterRegistry!.get(edge.routerKind);
const before = router.takeSnapshot(edge);
if (edge.source
&& edge.target
&& this.resolvedMoves.get(edge.source.id)
&& this.resolvedMoves.get(edge.target.id)) {
if (this.isAttachedEdge(edge)) {
// move the entire edge when both source and target are moved
edge.routingPoints = edge.routingPoints.map(rp => Point.add(rp, delta));
} else {
Expand All @@ -189,6 +202,37 @@ export class MoveCommand extends MergeableCommand implements IStoppableCommand {
});
}

// tests if the edge is attached to the moved element directly or to on of their children
protected isAttachedEdge(edge: SRoutableElementImpl): boolean {
const source = edge.source;
const target = edge.target;
const checkMovedElementsAndChildren = (sourceOrTarget: SConnectableElementImpl): boolean => {
return Array.from(this.resolvedMoves.values()).some(res => {
jbicker marked this conversation as resolved.
Show resolved Hide resolved
const recursiveCheck = (el: SModelElementImpl): boolean => {
if (isParent(el)) {
return el.children.some(child => {
if (child instanceof SModelElementImpl) {
if (child === sourceOrTarget)
return true;
return recursiveCheck(child);
}
return false;
});
}
return false;
};
return recursiveCheck(res.element);
}) || !!(this.resolvedMoves.get(sourceOrTarget.id));
};

return !!(
jbicker marked this conversation as resolved.
Show resolved Hide resolved
source &&
target &&
checkMovedElementsAndChildren(source) &&
checkMovedElementsAndChildren(target)
);
}

protected undoMove() {
this.resolvedMoves.forEach(res => {
(res.element as any).position = res.fromPosition;
Expand Down
Loading