Skip to content

Commit

Permalink
Add highlight for links (#624)
Browse files Browse the repository at this point in the history
  • Loading branch information
@s-andrey
s-andrey authored Jan 31, 2020
1 parent 44d4b4b commit 7d9ddd2
Show file tree
Hide file tree
Showing 8 changed files with 188 additions and 155 deletions.
39 changes: 11 additions & 28 deletions addon/components/fd-uml-diagram-editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -345,7 +345,9 @@ FdActionsForUcdPrimitivesMixin, {
let type = this.get('type');
if (type === 'Link') {
let newLink = this.get('newLink');
if (newLink.vertices().length === 0) {
if (isNone(newLink)) {
this.clearData();
} else if (newLink.vertices().length === 0) {
let primitives = this.get('model.primitives');
let linkPrimitive = primitives.findBy('id', newLink.get('id'));
primitives.removeObject(linkPrimitive);
Expand Down Expand Up @@ -383,16 +385,14 @@ FdActionsForUcdPrimitivesMixin, {
this.paper.fDDEditMode = buttonName;
switch (buttonName) {
case 'pointerClick':
this._enableEditLinks();
break;
case 'addNoteConnector':
this._enableWrapLinks();
this.enableEditLinks();
break;
case 'addInheritance':
this._enableWrapBaseLinks();
this.enableWrapBaseLinks();
break;
default:
this._disableEditLinks();
this.disableEditLinks();
}
this.send(buttonName, e);
}
Expand Down Expand Up @@ -452,7 +452,8 @@ FdActionsForUcdPrimitivesMixin, {
clearData() {
this._clearProperties();
this._resetCurrentTargetElement();
this._enableEditLinks();
this.enableEditLinks();
this.paper.fDDEditMode = 'pointerClick';
},

/**
Expand All @@ -469,49 +470,31 @@ FdActionsForUcdPrimitivesMixin, {
this.set('newLink', undefined);
},

_enableEditLinks: function() {
enableEditLinks: function() {
let paper = this.paper;
let links = paper.model.getLinks();
for (let i = 0; i < links.length; i+=1) {
let link = links[i];
let view = link.findView(paper);
view.$el.removeClass('edit-disabled');
view.$el.removeClass('linktools-disabled');
if ('vertexAdd' in view.options.interactive) {
delete view.options.interactive.vertexAdd;
}
}
},

_enableWrapBaseLinks: function() {
enableWrapBaseLinks: function() {
let paper = this.paper;
let links = paper.model.getLinks();
for (let i = 0; i < links.length; i+=1) {
let link = links[i];
let view = link.findView(paper);
if (link.get('type') == 'flexberry.uml.Generalization' && !link.connectedToLine()) {
view.$el.removeClass('edit-disabled');
view.$el.addClass('linktools-disabled');
view.options.interactive.vertexAdd = false;
} else {
view.$el.addClass('edit-disabled');
}
}
},

_enableWrapLinks: function() {
let paper = this.paper;
let links = paper.model.getLinks();
for (let i = 0; i < links.length; i+=1) {
let link = links[i];
let view = link.findView(paper);
view.$el.removeClass('edit-disabled');
view.$el.addClass('linktools-disabled');
view.options.interactive.vertexAdd = false;
}
},

_disableEditLinks: function() {
disableEditLinks: function() {
let paper = this.paper;
let links = paper.model.getLinks();
for (let i = 0; i < links.length; i+=1) {
Expand Down
103 changes: 25 additions & 78 deletions addon/components/fd-uml-diagram.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,14 +147,10 @@ export default Component.extend({
paper.off('element:pointerup', this._ghostElementRemove, this);
} else {
$(paper.el).find('input,textarea').removeClass('click-disabled');
paper.setInteractivity({ elementMove: false });
paper.setInteractivity({ elementMove: false, vertexAdd: false });
paper.on('element:pointermove', this._ghostElementMove, this);
paper.on('element:pointerup', this._ghostElementRemove, this);
let highlightedElement = this.get('highlightedElement');
if (highlightedElement) {
highlightedElement.unhighlight();
this.set('highlightedElement', null);
}
this._highlighted(null);
}
}),

Expand All @@ -177,7 +173,6 @@ export default Component.extend({

graph.getLinks().map(link => {
link.findView(paper).$el.removeClass('edit-disabled');
link.findView(paper).$el.removeClass('linktools-disabled');
}, this);

$(paper.el).find('input,textarea').removeClass('click-disabled');
Expand All @@ -187,16 +182,17 @@ export default Component.extend({

switch (this.paper.fDDEditMode) {
case 'addNoteConnector':
this._enableWrapLinks();
this.enableEditLinks();
break;
case 'addInheritance':
this._enableWrapBaseLinks();
this.enableWrapBaseLinks();
break;
default:
this._disableEditLinks();
this.disableEditLinks();
}

$(paper.el).find('input,textarea').addClass('click-disabled');
this._highlighted(null);
}
}),

Expand All @@ -214,7 +210,7 @@ export default Component.extend({
el: this.get('element'),
model: graph,
gridSize: 10,
drawGrid: true,
drawGrid: { name: 'fixedDot', args: { color: '#cecece' }},
connectionStrategy: joint.connectionStrategies.toPointConnection,
defaultConnectionPoint: joint.connectionPoints.toPointConnection,
restrictTranslate: ({ paper }) => {
Expand All @@ -238,7 +234,8 @@ export default Component.extend({
}
},
interactive: {
elementMove: false
elementMove: false,
vertexAdd: false,
},
cellNamespace: namespace,
cellViewNamespace: namespace
Expand Down Expand Up @@ -317,11 +314,7 @@ export default Component.extend({
_blankPointerClick(e) {
let coordinates = forBlankEventPointerClickAndContextMenu(e);
let options = { e: e, x: coordinates.x, y: coordinates.y };
let highlightedElement = this.get('highlightedElement');
if (highlightedElement) {
highlightedElement.unhighlight();
this.set('highlightedElement', null);
}
this._highlighted(null);

let newElement = this.get('blankPointerClick')(options);
this._addNewElement(newElement);
Expand Down Expand Up @@ -369,7 +362,8 @@ export default Component.extend({
for (let i = 0; i < links.length; i+=1) {
let link = links[i];
let view = link.findView(paper);
view.$el.addClass('edit-disabled');
view.$el.addClass('edit-disabled');
$(paper.el).find('input,textarea').addClass('click-disabled');
}
$(document).on({
'mousemove.link': this._onDrag.bind(this)
Expand All @@ -381,8 +375,9 @@ export default Component.extend({
break;
}
default:
if (isNone(this.get('draggedLink'))) {
return;
if (this.get('currentTargetElementIsPointer')) {
var linkView = element.model.findView(this.paper);
linkView.highlight();
}
}
} else {
Expand Down Expand Up @@ -432,9 +427,6 @@ export default Component.extend({
let view = link.findView(paper);
if (link.cid == newElement.cid) {
view.$el.addClass('edit-disabled');
} else {
view.$el.addClass('linktools-disabled');
view.options.interactive.vertexAdd = false;
}
}

Expand Down Expand Up @@ -523,9 +515,18 @@ export default Component.extend({
_highlighted(cellView) {
let highlightedElement = this.get('highlightedElement');
if (highlightedElement && highlightedElement !== cellView) {
if (highlightedElement.model.isLink()) {
highlightedElement.$el.addClass('linktools-disabled');
}

highlightedElement.unhighlight();
}

if (!isNone(cellView) && cellView.model.isLink() && !this.get('readonly')) {
cellView.$el.removeClass('linktools-disabled');
cellView.updateArrowheadMarkers();
}

this.set('highlightedElement', cellView);
},

Expand All @@ -544,9 +545,6 @@ export default Component.extend({
graph.getLinks().map(link => {
let view = link.findView(paper);
view.$el.removeClass('edit-disabled');
if ('vertexAdd' in view.options.interactive) {
delete view.options.interactive.vertexAdd;
}
}, this);

$(paper.el).find('input,textarea').removeClass('click-disabled');
Expand All @@ -557,6 +555,7 @@ export default Component.extend({
this.set('draggedLink', undefined);
this.set('draggedLinkView', undefined);
this.set('isLinkAdding', false);
this._highlighted(null);
},

/**
Expand Down Expand Up @@ -1185,58 +1184,6 @@ export default Component.extend({
this._incrementPropertyReferenceCount(newElement);
},

_enableEditLinks: function() {
let paper = this.paper;
let links = paper.model.getLinks();
for (let i = 0; i < links.length; i+=1) {
let link = links[i];
let view = link.findView(paper);
view.$el.removeClass('edit-disabled');
view.$el.removeClass('linktools-disabled');
if ('vertexAdd' in view.options.interactive) {
delete view.options.interactive.vertexAdd;
}
}
},

_enableWrapBaseLinks: function() {
let paper = this.paper;
let links = paper.model.getLinks();
for (let i = 0; i < links.length; i+=1) {
let link = links[i];
let view = link.findView(paper);
if (link.get('type') == 'flexberry.uml.Generalization' && !link.connectedToLine()) {
view.$el.removeClass('edit-disabled');
view.$el.addClass('linktools-disabled');
view.options.interactive.vertexAdd = false;
} else {
view.$el.addClass('edit-disabled');
}
}
},

_enableWrapLinks: function() {
let paper = this.paper;
let links = paper.model.getLinks();
for (let i = 0; i < links.length; i+=1) {
let link = links[i];
let view = link.findView(paper);
view.$el.removeClass('edit-disabled');
view.$el.addClass('linktools-disabled');
view.options.interactive.vertexAdd = false;
}
},

_disableEditLinks: function() {
let paper = this.paper;
let links = paper.model.getLinks();
for (let i = 0; i < links.length; i+=1) {
let link = links[i];
let view = link.findView(paper);
view.$el.addClass('edit-disabled');
}
},

_haveNote: function() {
let paper = this.paper;
let elements = paper.model.getElements();
Expand Down
Loading

0 comments on commit 7d9ddd2

Please sign in to comment.