Spring/spring-flo
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adopt JointJS 2.1.2

Browse Source
This commit is contained in:
BoykoAlex
2018-06-06 13:34:13 -04:00
parent 483faf1a1b
commit 901fce77f8
11 changed files with 186 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
package.json
View File

@@ -41,11 +41,12 @@
},
"dependencies": {
"@types/codemirror": "0.0.45",
"@types/jointjs": "1.0.4",
"@types/lodash": "4.14.73",
"@types/backbone": "1.3.42",
"codemirror": "5.28.0",
"jointjs": "1.0.3",
"jointjs": "2.1.2",
"lodash": "3.10.1",
"jquery": "3.1.1",
"ts-disposables": "2.2.3",
"postinstall-build": "5.0.1"
},
@@ -90,11 +91,12 @@
"typescript": "2.5.3",
"zone.js": "0.8.18",
"@types/codemirror": "0.0.45",
"@types/jointjs": "1.0.4",
"@types/lodash": "4.14.73",
"@types/backbone": "1.3.42",
"codemirror": "5.28.0",
"jointjs": "1.0.3",
"jointjs": "2.1.2",
"lodash": "3.10.1",
"jquery": "3.1.1",
"ts-disposables": "2.2.3",
"jshint": "2.6.3"
},
@@ -107,6 +109,7 @@
"@types/lodash",
"codemirror",
"jointjs",
"jquery",
"lodash",
"ts-disposables",
"@angular/common",

10
src/demo/app/editor.ts
View File

@@ -16,7 +16,7 @@
import { Flo, Constants, Properties } from 'spring-flo';
import { Validators } from '@angular/forms';
import { dia } from 'jointjs';
import { dia, g } from 'jointjs';
import { BsModalService } from 'ngx-bootstrap';
import { PropertiesDialogComponent } from './properties.dialog.component';
const joint : any = Flo.joint;
@@ -108,7 +108,7 @@ export class Editor implements Flo.Editor {
// }
}
calculateDragDescriptor(context : Flo.EditorContext, draggedView : dia.CellView, targetUnderMouse : dia.CellView, point : dia.Point, sourceComponent : string) : Flo.DnDDescriptor {
calculateDragDescriptor(context : Flo.EditorContext, draggedView : dia.CellView, targetUnderMouse : dia.CellView, point : g.Point, sourceComponent : string) : Flo.DnDDescriptor {
let source = draggedView.model;
let sourceGroup = source.attr('metadata/group');
@@ -139,7 +139,7 @@ export class Editor implements Flo.Editor {
let type = magnet.getAttribute('port');
if ((type === 'input' && targetHasIncomingPort && hasOutgoingPort) || (type === 'output' && targetHasOutgoingPort && hasIncomingPort)) {
let bbox = joint.V(magnet).bbox(false, paper.viewport); // jshint ignore:line
let distance = (<any> point).distance({
let distance = point.distance({
x: bbox.x + bbox.width / 2,
y: bbox.y + bbox.height / 2
});
@@ -190,9 +190,9 @@ export class Editor implements Flo.Editor {
};
}
validate(graph : dia.Graph, dsl: string, flo: Flo.EditorContext) : Promise<Map<string, Flo.Marker[]>> {
validate(graph : dia.Graph, dsl: string, flo: Flo.EditorContext) : Promise<Map<string | number, Flo.Marker[]>> {
return new Promise((resolve, reject) => {
let allMarkers = new Map<string, Array<Flo.Marker>>();
let allMarkers = new Map<string | number, Array<Flo.Marker>>();
graph.getElements().filter(e => e.attr('metadata')).forEach(e => {
let markers : Array<Flo.Marker> = []
let group = e.attr('metadata/group');

2
src/demo/app/text-to-graph.ts
View File

@@ -67,7 +67,7 @@ class TextToGraphConverter {
}
convertToGraph(input : string) {
this.flo.clearGraph();
this.flo.getGraph().clear();
// input is a string like this (3 nodes: foo, goo and hoo): foo --a=b --c=d > goo --d=e --f=g>hoo
let trimmed = input.trim();

8
src/lib/src/editor/editor-utils.ts
View File

@@ -70,16 +70,16 @@ export class Utils {
// There is more than one siblings. We need to create vertices.
// First of all we'll find the middle point of the link.
let source = graph.getCell(srcId);
let target = graph.getCell(trgId);
let source = <dia.Element> graph.getCell(srcId);
let target = <dia.Element> graph.getCell(trgId);
if (!source || !target) {
// When clearing the graph it may happen that some nodes are gone and some are left
return;
}
let srcCenter = (<any>source).getBBox().center();
let trgCenter = (<any>target).getBBox().center();
let srcCenter = source.getBBox().center();
let trgCenter = target.getBBox().center();
let midPoint = joint.g.line(srcCenter, trgCenter).midpoint();
// Then find the angle it forms.

18
src/lib/src/editor/editor.component.html
View File

@@ -17,8 +17,11 @@
[resizerRight]="'#paper-container'">
</div>
<div id="paper-container">
<div id="paper" class="paper" tabindex="0" style="overflow: hidden; position: absolute; display: block; height:100%; width:100%; overflow:auto;"></div>
<div>
<div id="paper-container" style="overflow:overlay;">
<div id="paper" class="paper" tabindex="0" style="overflow: hidden; position: absolute; display: block; height:100%; width:100%; overflow:auto;"></div>
</div>
<span class="canvas-controls-container" ng-if="canvasControls">
<table ng-if="canvasControls.zoom" class="canvas-control zoom-canvas-control">
@@ -26,22 +29,23 @@
<tr>
<td>
<input class="zoom-canvas-input canvas-control zoom-canvas-control" type="text"
data-inline="true" [(ngModel)]="zoomPercent"
size="3">
data-inline="true" [(ngModel)]="zoomPercent"
size="3">
</td>
<td>
<label class="canvas-control zoom-canvas-label">%</label>
</td>
<td>
<input type="range" data-inline="true" [(ngModel)]="zoomPercent"
[step]="zoomStep"
[max]="maxZoom" [min]="minZoom" data-type="range"
name="range" class="canvas-control zoom-canvas-control">
[step]="zoomStep"
[max]="maxZoom" [min]="minZoom" data-type="range"
name="range" class="canvas-control zoom-canvas-control">
</td>
</tr>
</tbody>
</table>
</span>
</div>
</div>
</div>

60
src/lib/src/editor/editor.component.ts
View File

@@ -76,7 +76,7 @@ export class EditorComponent implements OnInit, OnDestroy {
floApi = new EventEmitter<Flo.EditorContext>();
@Output()
validationMarkers = new EventEmitter<Map<string, Array<Flo.Marker>>>();
validationMarkers = new EventEmitter<Map<string | number, Array<Flo.Marker>>>();
@Output()
contentValidated = new EventEmitter<boolean>();
@@ -356,7 +356,7 @@ export class EditorComponent implements OnInit, OnDestroy {
kind: kind,
position: location
});
let view = this.paper.findViewByModel(handle);
const view: dia.ElementView = this.paper.findViewByModel(handle);
view.on('cell:pointerdown', () => {
if (action) {
action();
@@ -372,8 +372,7 @@ export class EditorComponent implements OnInit, OnDestroy {
handle.removeAttr('image/filter');
});
// TODO: Look for ways to incorporate this option on the view when it's created
(<any>view).options.interactive = false;
view.setInteractivity(false);
return handle;
}
@@ -457,7 +456,7 @@ export class EditorComponent implements OnInit, OnDestroy {
if (this.editor && this.editor.showDragFeedback) {
this.editor.showDragFeedback(this.editorContext, dragDescriptor);
} else {
let magnet : HTMLElement;
let magnet : SVGElement;
if (dragDescriptor.source && dragDescriptor.source.view) {
joint.V(dragDescriptor.source.view.el).addClass('dnd-source-feedback');
if (dragDescriptor.source.cssClassSelector) {
@@ -489,7 +488,7 @@ export class EditorComponent implements OnInit, OnDestroy {
if (this.editor && this.editor.hideDragFeedback) {
this.editor.hideDragFeedback(this.editorContext, dragDescriptor);
} else {
let magnet : HTMLElement;
let magnet : SVGElement;
if (dragDescriptor.source && dragDescriptor.source.view) {
joint.V(dragDescriptor.source.view.el).removeClass('dnd-source-feedback');
if (dragDescriptor.source.cssClassSelector) {
@@ -639,7 +638,7 @@ export class EditorComponent implements OnInit, OnDestroy {
excludeViews.forEach((excluded, i) => {
this._restoreNodeVisibility(excluded.el, oldVisibility[i]);
});
return this.paper.findView(targetElement);
return this.paper.findView($(targetElement));
}
handleDnDFromPalette(dndEvent : Flo.DnDEvent) {
@@ -687,7 +686,7 @@ export class EditorComponent implements OnInit, OnDestroy {
handleDropFromPalette(event : Flo.DnDEvent) {
let cellview = event.view;
let evt = event.event;
if (this.paper.el === evt.target || $.contains(this.paper.el, <any>evt.target)) {
if (this.paper.el === evt.target || $.contains(this.paper.el, evt.target)) {
if (this.readOnlyCanvas) {
this.setDragDescriptor(undefined);
} else {
@@ -711,18 +710,16 @@ export class EditorComponent implements OnInit, OnDestroy {
}
autosizePaper() : void {
let scrollBarSize = 17;
let parent = $('#paper', this.element.nativeElement);
let parent = $('#paper-container', this.element.nativeElement);
this.paper.fitToContent({
padding: this.paperPadding,
minWidth: parent.width() - scrollBarSize,
minHeight: parent.height() - scrollBarSize,
minWidth: parent.width(),
minHeight: parent.height(),
});
}
fitToPage() : void {
let scrollBarSize = 17;
let parent = $('#paper', this.element.nativeElement);
let parent = $('#paper-container', this.element.nativeElement);
let minScale = this.minZoom / 100;
let maxScale = 2;
this.paper.scaleContentToFit({
@@ -731,7 +728,7 @@ export class EditorComponent implements OnInit, OnDestroy {
minScaleY: minScale,
maxScaleX: maxScale,
maxScaleY: maxScale,
fittingBBox: {x: 0, y: 0, width: parent.width() - scrollBarSize, height: parent.height() - scrollBarSize}
fittingBBox: {x: 0, y: 0, width: parent.width(), height: parent.height()}
});
/**
* #scaleContentToFit() sets some weird origin for the paper, so autosize to get the better origin.
@@ -800,7 +797,7 @@ export class EditorComponent implements OnInit, OnDestroy {
errorCell.remove();
} else {
// Without rewrite we merge this list with existing errors
(<any>errorCell).attr('messages', errorMessages, {rewrite: true});
errorCell.attr('messages', errorMessages, {rewrite: true});
}
} else if (errorMessages.length > 0) {
let error = Shapes.Factory.createDecoration({
@@ -811,16 +808,15 @@ export class EditorComponent implements OnInit, OnDestroy {
messages: errorMessages
});
let pt : dia.Point;
const view = this.paper.findViewByModel(error);
if (cell instanceof joint.dia.Element) {
pt = (<any>(<dia.Element> cell).getBBox()).topRight().offset(-error.get('size').width, 0);
pt = (<dia.Element> cell).getBBox().topRight().offset(-error.get('size').width, 0);
error.set('position', pt);
(<dia.ElementView>view).setInteractivity(false);
} else {
// TODO: do something for the link perhaps?
}
error.set('position', pt);
let view = this.paper.findViewByModel(error);
// Cast to <any>. Types are missing 'options' property
(<any>view).options.interactive = false;
}
}
@@ -1083,7 +1079,7 @@ export class EditorComponent implements OnInit, OnDestroy {
initPaper() : void {
let options : any = {
let options : dia.Paper.Options = {
el: $('#paper', this.element.nativeElement),
gridSize: this._gridSize,
drawGrid: true,
@@ -1093,11 +1089,11 @@ export class EditorComponent implements OnInit, OnDestroy {
// Enable link snapping within 25px lookup radius
snapLinks: { radius: 25 }, // http://www.jointjs.com/tutorial/ports
defaultLink: /*this.renderer && this.renderer.createDefaultLink ? this.renderer.createDefaultLink : new joint.shapes.flo.Link*/
(cellView: dia.ElementView, magnet: HTMLElement) => {
(cellView: dia.ElementView, magnet: SVGElement) => {
if (this.renderer && this.renderer.createLink) {
let linkEnd : Flo.LinkEnd = {
id: cellView.model.id
}
};
if (magnet) {
linkEnd.selector = cellView.getSelector(magnet, undefined);
}
@@ -1127,11 +1123,19 @@ export class EditorComponent implements OnInit, OnDestroy {
}
},
interactive: () => {
interactive: (cellView: dia.CellView, event: string) => {
if (this.readOnlyCanvas) {
return false;
} else {
return this.editor && this.editor.interactive ? this.editor.interactive : true;
if (this.editor && this.editor.interactive) {
if (typeof this.editor.interactive === 'function') {
// Type for interactive is wrong in JointJS have to cast to <any>
return <any>this.editor.interactive(cellView, event);
} else {
return this.editor.interactive
}
}
return true
}
},
@@ -1152,8 +1156,8 @@ export class EditorComponent implements OnInit, OnDestroy {
}
if (this.editor && this.editor.validateLink) {
options.validateConnection = (cellViewS : dia.ElementView, magnetS : SVGElement, cellViewT : dia.ElementView, magnetT : SVGElement, end : boolean, linkView : dia.LinkView) =>
this.editor.validateLink(this.editorContext, cellViewS, magnetS, cellViewT, magnetT, end, linkView);
options.validateConnection = (cellViewS : dia.ElementView, magnetS : SVGElement, cellViewT : dia.ElementView, magnetT : SVGElement, end: 'source' | 'target', linkView : dia.LinkView) =>
this.editor.validateLink(this.editorContext, cellViewS, magnetS, cellViewT, magnetT, end === 'source', linkView);
}
// The paper is what will represent the graph on the screen

2
src/lib/src/palette/palette.component.html
View File

@@ -1,7 +1,7 @@
<div id="palette-filter" class="palette-filter">
<input type="text" id="palette-filter-textfield" class="palette-filter-textfield" [(ngModel)]="filterText" (focus)="onFocus()"/>
</div>
<div id="palette-paper-container" style="height:calc(100% - 40px); width:100%; overflow:auto;">
<div id="palette-paper-container" style="height:calc(100% - 46px); width:100%; overflow:overlay;">
<div id="palette-paper" class="palette-paper" style="overflow:hidden;"></div>
</div>

12
src/lib/src/palette/palette.component.ts
View File

@@ -126,7 +126,8 @@ export class Palette implements OnInit, OnDestroy, OnChanges {
model: this.paletteGraph,
height: $(this.element.nativeElement.parentNode).height(),
width: $(this.element.nativeElement.parentNode).width(),
elementView: this.getPaletteView(this.renderer && this.renderer.getNodeView ? this.renderer.getNodeView() : joint.dia.ElementView)
elementView: this.getPaletteView(this.renderer && this.renderer.getNodeView ? this.renderer.getNodeView() : joint.dia.ElementView),
interactive: false
});
this.palette.on('cell:pointerup', (cellview : dia.CellView, evt : any) => {
@@ -484,13 +485,15 @@ export class Palette implements OnInit, OnDestroy, OnChanges {
let floatergraph : dia.Graph = new joint.dia.Graph();
floatergraph.set('type', Constants.FEEDBACK_CONTEXT);
const parent = $('#palette-floater');
this.floaterpaper = new joint.dia.Paper({
el: $('#palette-floater'),
elementView: this.renderer && this.renderer.getNodeView ? this.renderer.getNodeView() : joint.dia.ElementView,
gridSize: 10,
model: floatergraph,
height: 400,
width: 200,
height: parent.height(),
width: parent.width(),
validateMagnet: () => false,
validateConnection: () => false
});
@@ -504,7 +507,8 @@ export class Palette implements OnInit, OnDestroy, OnChanges {
'metadata': dataOfClickedElement
});
let box : dia.BBox = this.floaterpaper.findViewByModel(floaternode).getBBox();
// Only node view expected
let box : dia.BBox = (<dia.ElementView>this.floaterpaper.findViewByModel(floaternode)).getBBox();
let size : dia.Size = floaternode.get('size');
// Account for node real size including ports
floaternode.translate(box.width - size.width, box.height - size.height);

24
src/lib/src/shared/flo-common.ts
View File

@@ -1,4 +1,4 @@
import { dia } from 'jointjs';
import { dia, g } from 'jointjs';
import { Observable } from 'rxjs/Observable';
import * as _joint from 'jointjs';
@@ -155,7 +155,7 @@ export namespace Flo {
}
export interface LinkEnd {
id : string;
id : string | number;
selector? : string;
port? : string;
}
@@ -182,30 +182,36 @@ export namespace Flo {
}
export interface Editor {
interactive? : ((cellView: dia.CellView, event: string) => boolean) | boolean | { vertexAdd?: boolean, vertexMove?: boolean, vertexRemove?: boolean, arrowheadMove?: boolean };
interactive? : ((cellView: dia.CellView, event: string) => boolean) | boolean | dia.CellView.InteractivityOptions;
allowLinkVertexEdit? : boolean;
highlighting? : any;
createHandles?(context : EditorContext, createHandle : (owner : dia.CellView, kind : string, action : () => void, location : dia.Point) => void, owner : dia.CellView) : void;
validatePort?(context : EditorContext, view : dia.ElementView, magnet : SVGElement) : boolean;
validateLink?(context : EditorContext, cellViewS : dia.ElementView, portS : SVGElement, cellViewT : dia.ElementView, portT : SVGElement, isSource : boolean, linkView : dia.LinkView) : boolean;
calculateDragDescriptor?(context : EditorContext, draggedView : dia.CellView, targetUnderMouse : dia.CellView, coordinate : dia.Point, sourceComponent : string) : DnDDescriptor;
calculateDragDescriptor?(context : EditorContext, draggedView : dia.CellView, targetUnderMouse : dia.CellView, coordinate : g.Point, sourceComponent : string) : DnDDescriptor;
handleNodeDropping?(context : EditorContext, dragDescriptor : DnDDescriptor) : void;
showDragFeedback?(context : EditorContext, dragDescriptor : DnDDescriptor) : void;
hideDragFeedback?(context : EditorContext, dragDescriptor : DnDDescriptor) : void;
validate?(graph : dia.Graph, dsl: string, flo: EditorContext) : Promise<Map<string, Array<Marker>>>;
validate?(graph : dia.Graph, dsl: string, flo: EditorContext) : Promise<Map<string | number, Array<Marker>>>;
preDelete?(context : EditorContext, deletedElement : dia.Cell) : void;
setDefaultContent?(editorContext : EditorContext, data : Map<string, Map<string, ElementMetadata>>) : void;
}
export function findMagnetByClass(view : dia.CellView, className : string) : HTMLElement {
export function findMagnetByClass(view : dia.CellView, className : string) : SVGElement {
if (className && className.startsWith('.')) {
className = className.substr(1);
}
return view.$('[magnet]').toArray().find((magnet : HTMLElement) => magnet.getAttribute('class').split(/\s+/).indexOf(className) >= 0);
const element = view.$('[magnet]').toArray().find((magnet : any) => magnet.getAttribute('class').split(/\s+/).indexOf(className) >= 0);
if (element) {
return view.findMagnet($(element));
}
}
export function findMagnetByPort(view : dia.CellView, port : string) : HTMLElement {
return view.$('[magnet]').toArray().find((magnet : HTMLElement) => magnet.getAttribute('port') === port);
export function findMagnetByPort(view : dia.CellView, port : string) : SVGElement {
const element = view.$('[magnet]').toArray().find((magnet : HTMLElement) => magnet.getAttribute('port') === port);
if (element) {
return view.findMagnet($(element));
}
}
/**

7
src/lib/src/shared/flo.css
View File

@@ -61,9 +61,10 @@ flo-view {
#palette-floater {
/* TODO size relative to paper that goes on it? */
opacity: 0.75;
width:170px;
height:60px;
opacity: 0.75;
background-color: transparent;
/*
background-color: #6db33f;
*/
@@ -76,6 +77,10 @@ flo-view {
user-select: none;
}
#palette-floater.joint-paper > svg {
background-color: transparent;
}
/* Joint JS paper for drawing palette -> canvas DnD visual feedback END */
/* Palette START */

160
src/lib/src/shared/shapes.ts
View File

@@ -139,9 +139,9 @@ joint.shapes.flo.Node = joint.shapes.basic.Generic.extend({
'text': '\u21d2',
'text-anchor': 'middle',
'ref-x': 0.15, // jointjs specific: relative position to ref'd element
'ref-y': 0.15, // jointjs specific: relative position to ref'd element
'ref-y': 0.2, // jointjs specific: relative position to ref'd element
ref: '.border', // jointjs specific: element for ref-x, ref-y
transform: 'translate(' + (IMAGE_W/2) + ',' + (IMAGE_H/2) + ')',
// transform: 'translate(' + (IMAGE_W/2) + ',' + (IMAGE_H/2) + ')',
fill: 'black',
'font-size': 24
},
@@ -224,78 +224,110 @@ joint.shapes.flo.ElementView = joint.dia.ElementView.extend({
// _tempZorder: 0,
_tempOpacity: 1.0,
_hovering: false,
pointerdown: function(evt : any, x : number, y : number) {
// this.canShowTooltip = false;
// this.hideTooltip();
this.beingDragged = false;
this._tempOpacity = this.model.attr('./opacity');
this.model.trigger('batch:start');
dragMagnetStart: function(evt: any, x: number, y: number) {
if ( // target is a valid magnet start linking
evt.target.getAttribute('magnet') &&
this.paper.options.validateMagnet.call(this.paper, this, evt.target)
) {
let link = this.paper.getDefaultLink(this, evt.target);
if ($(evt.target).attr('port') === 'input') {
link.set({
source: { x: x, y: y },
target: {
id: this.model.id,
selector: this.getSelector(evt.target),
port: evt.target.getAttribute('port')
}
});
} else {
link.set({
source: {
id: this.model.id,
selector: this.getSelector(evt.target),
port: evt.target.getAttribute('port')
},
target: { x: x, y: y }
});
}
this.paper.model.addCell(link);
this._linkView = this.paper.findViewByModel(link);
if ($(evt.target).attr('port') === 'input') {
this._linkView.startArrowheadMove('source');
} else {
this._linkView.startArrowheadMove('target');
}
this.paper.__creatingLinkFromPort = true;
if (!this.can('addLinkFromMagnet')) return;
this.model.startBatch('add-link');
const paper = this.paper;
const graph = paper.model;
const magnet = evt.target;
const link = paper.getDefaultLink(this, magnet);
let sourceEnd, targetEnd;
if ($(evt.target).attr('port') === 'input') {
sourceEnd = { x: x, y: y };
targetEnd = this.getLinkEnd(magnet, x, y, link, 'target');
} else {
this._dx = x;
this._dy = y;
joint.dia.CellView.prototype.pointerdown.apply(this, arguments);
sourceEnd = this.getLinkEnd(magnet, x, y, link, 'source');
targetEnd = { x: x, y: y };
}
link.set({ source: sourceEnd, target: targetEnd });
link.addTo(graph, { async: false, ui: true });
const linkView = link.findView(paper);
joint.dia.CellView.prototype.pointerdown.apply(linkView, arguments);
linkView.notify('link:pointerdown', evt, x, y);
// const data = linkView.startArrowheadMove('target', { whenNotAllowed: 'remove' });
let data;
if ($(evt.target).attr('port') === 'input') {
data = linkView.startArrowheadMove('source', { whenNotAllowed: 'remove' });
} else {
data = linkView.startArrowheadMove('target', { whenNotAllowed: 'remove' });
}
linkView.eventData(evt, data);
this.eventData(evt, {
action: 'magnet',
linkView: linkView,
stopPropagation: true
});
this.paper.delegateDragEvents(this, evt.data);
},
pointermove: function(evt : MouseEvent, x : number, y : number) {
// pointerdown: function(evt : any, x : number, y : number) {
// // this.canShowTooltip = false;
// // this.hideTooltip();
// this.beingDragged = false;
// this._tempOpacity = this.model.attr('./opacity');
//
// this.model.trigger('batch:start');
//
// if ( // target is a valid magnet start linking
// evt.target.getAttribute('magnet') &&
// this.paper.options.validateMagnet.call(this.paper, this, evt.target)
// ) {
// let link = this.paper.getDefaultLink(this, evt.target);
// if ($(evt.target).attr('port') === 'input') {
// link.set({
// source: { x: x, y: y },
// target: {
// id: this.model.id,
// selector: this.getSelector(evt.target),
// port: evt.target.getAttribute('port')
// }
// });
// } else {
// link.set({
// source: {
// id: this.model.id,
// selector: this.getSelector(evt.target),
// port: evt.target.getAttribute('port')
// },
// target: { x: x, y: y }
// });
// }
// this.paper.model.addCell(link);
// this._linkView = this.paper.findViewByModel(link);
// if ($(evt.target).attr('port') === 'input') {
// this._linkView.startArrowheadMove('source');
// } else {
// this._linkView.startArrowheadMove('target');
// }
// this.paper.__creatingLinkFromPort = true;
// } else {
// this._dx = x;
// this._dy = y;
// joint.dia.CellView.prototype.pointerdown.apply(this, arguments);
// }
// },
drag: function(evt : MouseEvent, x : number, y : number) {
let interactive = _.isFunction(this.options.interactive) ? this.options.interactive(this, 'pointermove') :
this.options.interactive;
if (interactive !== false && !this._linkView) {
this.beingDragged = true;
if (interactive !== false) {
this.paper.trigger('dragging-node-over-canvas', {type: Flo.DnDEventType.DRAG, view: this, event: evt});
this.model.attr('./opacity', 0.75);
}
joint.dia.ElementView.prototype.pointermove.apply(this, arguments);
joint.dia.ElementView.prototype.drag.apply(this, arguments);
},
pointerup: function(evt : MouseEvent, x : number, y : number) { // jshint ignore:line
delete this.paper.__creatingLinkFromPort;
// this.canShowTooltip = true;
if (this.beingDragged) {
if (typeof this._tempOpacity === 'number') {
this.model.attr('./opacity', this._tempOpacity);
} else {
// Joint JS view doesn't react to attribute removal.
// TODO: fix in the mainElementView
this.model.attr('./opacity', 1);
// this.model.removeAttr('./opacity');
}
this.paper.trigger('dragging-node-over-canvas', {type: Flo.DnDEventType.DROP, view: this, event: evt});
}
this.beingDragged = false;
joint.dia.ElementView.prototype.pointerup.apply(this, arguments);
dragEnd: function(evt : MouseEvent, x : number, y : number) { // jshint ignore:line
this.paper.trigger('dragging-node-over-canvas', {type: Flo.DnDEventType.DROP, view: this, event: evt});
joint.dia.ElementView.prototype.dragEnd.apply(this, arguments);
},
// events: {
// // Tooltips on the elements in the graph