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

improved check for attached edges #443

Merged
merged 2 commits into from
Mar 12, 2024
Merged

improved check for attached edges #443

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
65596fa
improved check for attached edges
jbicker Mar 7, 2024
d947566
Update packages/sprotty/src/features/move/move.ts
jbicker Mar 7, 2024
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
130 changes: 92 additions & 38 deletions examples/classdiagram/src/model-source.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,26 +118,26 @@ export class ClassDiagramModelSource extends LocalModelSource {
],
});
break;
case 'node1':
case 'node2':
element.children.push(<SCompartment> {
id: 'node1_attrs',
id: 'node2_attrs',
type: 'comp:comp',
layout: 'vbox',
children: [
<SLabel> {
id: 'node1_op2',
id: 'node2_op2',
type: 'label:text',
text: 'name: string'
}
],
});
element.children.push(<SCompartment> {
id: 'node1_ops',
id: 'node2_ops',
type: 'comp:comp',
layout: 'vbox',
children: [
<SLabel> {
id: 'node1_op0',
id: 'node2_op0',
type: 'label:text',
text: '+ foo(): Foo'
}
Expand All @@ -153,8 +153,8 @@ export class ClassDiagramModelSource extends LocalModelSource {
type: 'node:class',
expanded: false,
position: {
x: 100,
y: 100
x: 150,
y: 150
},
layout: 'vbox',
children: [
Expand Down Expand Up @@ -197,8 +197,8 @@ export class ClassDiagramModelSource extends LocalModelSource {
type: 'node:class',
expanded: false,
position: {
x: 100,
y: 100
x: 50,
y: 50
},
layout: 'vbox',
children: [
Expand All @@ -220,13 +220,13 @@ export class ClassDiagramModelSource extends LocalModelSource {
id: 'node1_ticon',
type: 'label:icon',
text: 'C'
},
}
]
},
<SLabel>{
id: 'node1_classname',
type: 'label:heading',
text: 'Bar'
text: 'Qux'
},
{
id: 'node1_expand',
Expand All @@ -241,8 +241,8 @@ export class ClassDiagramModelSource extends LocalModelSource {
type: 'node:class',
expanded: false,
position: {
x: 270,
y: 200
x: 100,
y: 100
},
layout: 'vbox',
children: [
Expand Down Expand Up @@ -270,7 +270,7 @@ export class ClassDiagramModelSource extends LocalModelSource {
<SLabel>{
id: 'node2_classname',
type: 'label:heading',
text: 'Baz'
text: 'Bar'
},
{
id: 'node2_expand',
Expand All @@ -285,8 +285,8 @@ export class ClassDiagramModelSource extends LocalModelSource {
type: 'node:class',
expanded: false,
position: {
x: 740,
y: 25
x: 270,
y: 200
},
layout: 'vbox',
children: [
Expand Down Expand Up @@ -314,7 +314,7 @@ export class ClassDiagramModelSource extends LocalModelSource {
<SLabel>{
id: 'node3_classname',
type: 'label:heading',
text: 'Ada'
text: 'Baz'
},
{
id: 'node3_expand',
Expand All @@ -324,6 +324,50 @@ export class ClassDiagramModelSource extends LocalModelSource {
}
]
};
const node4: SNode & Expandable = {
id: 'node4',
type: 'node:class',
expanded: false,
position: {
x: 740,
y: 25
},
layout: 'vbox',
children: [
<SCompartment>{
id: 'node4_header',
type: 'comp:header',
layout: 'hbox',
children: [
{
id: 'node4_icon',
type: 'icon',
layout: 'stack',
layoutOptions: {
hAlign: 'center',
resizeContainer: false
},
children: [
<SLabel>{
id: 'node4_ticon',
type: 'label:icon',
text: 'C'
},
]
},
<SLabel>{
id: 'node4_classname',
type: 'label:heading',
text: 'Ada'
},
{
id: 'node4_expand',
type: 'button:expand'
}
]
}
]
};
const package0: SNode = {
id: 'package0',
type: 'node:package',
Expand All @@ -349,11 +393,19 @@ export class ClassDiagramModelSource extends LocalModelSource {
id: 'package0_content',
type: 'comp:pkgcontent',
children: [
node1, node2
node2, node3
]
}
]
};
const edge0 = {
id: 'edge0',
type: 'edge:straight',
routerKind: 'manhattan',
sourceId: node0.id,
targetId: node1.id,
children: []
} as SEdge;
const package1: SNode = {
id: 'package1',
type: 'node:package',
Expand All @@ -363,7 +415,7 @@ export class ClassDiagramModelSource extends LocalModelSource {
},
size: {
width: 300,
height: 200
height: 250
},
children: [
<SLabel>{
Expand All @@ -379,32 +431,34 @@ export class ClassDiagramModelSource extends LocalModelSource {
id: 'package1_content',
type: 'comp:pkgcontent',
children: [
node0
node0,
node1,
edge0
]
}
]
};
const edge0 = {
id: 'edge0',
const edge1 = {
id: 'edge1',
type: 'edge:straight',
routerKind: 'manhattan',
sourceId: node0.id,
targetId: node1.id,
targetId: node2.id,
children: []
} as SEdge;
const edge1 = {
id: 'edge1',
const edge2 = {
id: 'edge2',
type: 'edge:straight',
sourceId: node1.id,
targetId: node2.id,
sourceId: node2.id,
targetId: node3.id,
routerKind: 'manhattan',
children: []
} as SEdge;
const edge2 = {
id: 'edge2',
const edge3 = {
id: 'edge3',
type: 'edge:bezier',
sourceId: node0.id,
targetId: node3.id,
targetId: node4.id,
routerKind: 'bezier',
routingPoints: [
{ x: 360, y: 140 },
Expand All @@ -415,7 +469,7 @@ export class ClassDiagramModelSource extends LocalModelSource {
],
children: [
<SLabel & EdgeLayoutable> {
id: 'edge2_label_free1',
id: 'edge3_label_free1',
type: 'label:text',
text: 'free1',
edgePlacement: {
Expand All @@ -427,19 +481,19 @@ export class ClassDiagramModelSource extends LocalModelSource {
}
},
<SLabel & EdgeLayoutable> {
id: 'edge2_label_edge',
id: 'edge3_label_edge',
type: 'label:text',
text: 'edge',
edgePlacement: {
position: 0.2,
position: 0.1,
offset: 0,
side: 'right',
rotate: true,
moveMode: 'edge'
}
},
<SLabel & EdgeLayoutable> {
id: 'edge2_label_fix',
id: 'edge3_label_fix',
type: 'label:text',
text: 'fix',
edgePlacement: {
Expand All @@ -451,7 +505,7 @@ export class ClassDiagramModelSource extends LocalModelSource {
}
},
<SLabel> {
id: 'edge2_label_free2',
id: 'edge3_label_free2',
type: 'label:text',
text: 'free2'
}
Expand All @@ -460,7 +514,7 @@ export class ClassDiagramModelSource extends LocalModelSource {
const graph: SGraph = {
id: 'graph',
type: 'graph',
children: [package0, package1, node3, edge0, edge1, edge2 ],
children: [package0, package1, node4, edge1, edge2, edge3],
layoutOptions: {
hGap: 5,
hAlign: 'left',
Expand All @@ -472,8 +526,8 @@ export class ClassDiagramModelSource extends LocalModelSource {
};
this.expansionState = {
node0: false,
node1: false,
node2: false
node2: false,
node3: false
};
return graph;
}
Expand Down
32 changes: 14 additions & 18 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 @@ -112,7 +112,7 @@ export class MoveCommand extends MergeableCommand implements IStoppableCommand {
if (this.edgeRouterRegistry) {
const handleEdges = (el: SModelElementImpl) => {
index.getAttachedElements(el).forEach(edge => {
if (edge instanceof SRoutableElementImpl) {
if (edge instanceof SRoutableElementImpl && !this.isChildOfMovedElements(edge as SRoutableElementImpl)) {
const existingDelta = attachedEdgeShifts.get(edge);
const newDelta = Point.subtract(resolvedMove.toPosition, resolvedMove.fromPosition);
const delta = (existingDelta)
Expand Down Expand Up @@ -206,30 +206,26 @@ export class MoveCommand extends MergeableCommand implements IStoppableCommand {
});
}

protected isChildOfMovedElements(el: SChildElementImpl): boolean {
const parent = el.parent;
if (Array.from(this.resolvedMoves.values()).map(rm => rm.element.id).includes(parent.id)) {
return true;
}
if (parent instanceof SChildElementImpl) {
return this.isChildOfMovedElements(parent);
}
return false;
};

// 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 => {
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 Boolean(this.resolvedMoves.get(sourceOrTarget.id)) || this.isChildOfMovedElements(sourceOrTarget);
};

return !!(
return Boolean(
source &&
target &&
checkMovedElementsAndChildren(source) &&
Expand Down
Loading