From 901fce77f81d006d4fe97e97aa35a33e86c772ea Mon Sep 17 00:00:00 2001 From: BoykoAlex Date: Wed, 6 Jun 2018 13:34:13 -0400 Subject: [PATCH] Adopt JointJS 2.1.2 --- package.json | 11 +- src/demo/app/editor.ts | 10 +- src/demo/app/text-to-graph.ts | 2 +- src/lib/src/editor/editor-utils.ts | 8 +- src/lib/src/editor/editor.component.html | 18 ++- src/lib/src/editor/editor.component.ts | 60 ++++---- src/lib/src/palette/palette.component.html | 2 +- src/lib/src/palette/palette.component.ts | 12 +- src/lib/src/shared/flo-common.ts | 24 ++-- src/lib/src/shared/flo.css | 7 +- src/lib/src/shared/shapes.ts | 160 ++++++++++++--------- 11 files changed, 186 insertions(+), 128 deletions(-) diff --git a/package.json b/package.json index 10bd40b..12f983a 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/demo/app/editor.ts b/src/demo/app/editor.ts index de402b2..417a8d2 100644 --- a/src/demo/app/editor.ts +++ b/src/demo/app/editor.ts @@ -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 = ( 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> { + validate(graph : dia.Graph, dsl: string, flo: Flo.EditorContext) : Promise> { return new Promise((resolve, reject) => { - let allMarkers = new Map>(); + let allMarkers = new Map>(); graph.getElements().filter(e => e.attr('metadata')).forEach(e => { let markers : Array = [] let group = e.attr('metadata/group'); diff --git a/src/demo/app/text-to-graph.ts b/src/demo/app/text-to-graph.ts index 9a6e8ca..301d046 100644 --- a/src/demo/app/text-to-graph.ts +++ b/src/demo/app/text-to-graph.ts @@ -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(); diff --git a/src/lib/src/editor/editor-utils.ts b/src/lib/src/editor/editor-utils.ts index 4729012..a3ad709 100644 --- a/src/lib/src/editor/editor-utils.ts +++ b/src/lib/src/editor/editor-utils.ts @@ -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 = graph.getCell(srcId); + let target = 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 = (source).getBBox().center(); - let trgCenter = (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. diff --git a/src/lib/src/editor/editor.component.html b/src/lib/src/editor/editor.component.html index 06792f5..3f0cefe 100644 --- a/src/lib/src/editor/editor.component.html +++ b/src/lib/src/editor/editor.component.html @@ -17,8 +17,11 @@ [resizerRight]="'#paper-container'"> -
-
+
+ +
+
+
@@ -26,22 +29,23 @@
+ data-inline="true" [(ngModel)]="zoomPercent" + size="3"> + [step]="zoomStep" + [max]="maxZoom" [min]="minZoom" data-type="range" + name="range" class="canvas-control zoom-canvas-control">
+
diff --git a/src/lib/src/editor/editor.component.ts b/src/lib/src/editor/editor.component.ts index 2fce452..898cb5f 100644 --- a/src/lib/src/editor/editor.component.ts +++ b/src/lib/src/editor/editor.component.ts @@ -76,7 +76,7 @@ export class EditorComponent implements OnInit, OnDestroy { floApi = new EventEmitter(); @Output() - validationMarkers = new EventEmitter>>(); + validationMarkers = new EventEmitter>>(); @Output() contentValidated = new EventEmitter(); @@ -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 - (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, 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 - (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 = (( cell).getBBox()).topRight().offset(-error.get('size').width, 0); + pt = ( cell).getBBox().topRight().offset(-error.get('size').width, 0); + error.set('position', pt); + (view).setInteractivity(false); } else { // TODO: do something for the link perhaps? } - error.set('position', pt); - let view = this.paper.findViewByModel(error); - // Cast to . Types are missing 'options' property - (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 + return 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 diff --git a/src/lib/src/palette/palette.component.html b/src/lib/src/palette/palette.component.html index 88f3d93..6144155 100644 --- a/src/lib/src/palette/palette.component.html +++ b/src/lib/src/palette/palette.component.html @@ -1,7 +1,7 @@
-
+
diff --git a/src/lib/src/palette/palette.component.ts b/src/lib/src/palette/palette.component.ts index d0fea2f..024eba5 100644 --- a/src/lib/src/palette/palette.component.ts +++ b/src/lib/src/palette/palette.component.ts @@ -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 = (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); diff --git a/src/lib/src/shared/flo-common.ts b/src/lib/src/shared/flo-common.ts index fccb446..7d0f79d 100644 --- a/src/lib/src/shared/flo-common.ts +++ b/src/lib/src/shared/flo-common.ts @@ -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>>; + validate?(graph : dia.Graph, dsl: string, flo: EditorContext) : Promise>>; preDelete?(context : EditorContext, deletedElement : dia.Cell) : void; setDefaultContent?(editorContext : EditorContext, data : Map>) : 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)); + } } /** diff --git a/src/lib/src/shared/flo.css b/src/lib/src/shared/flo.css index 5e5fc2a..39f4ae0 100644 --- a/src/lib/src/shared/flo.css +++ b/src/lib/src/shared/flo.css @@ -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 */ diff --git a/src/lib/src/shared/shapes.ts b/src/lib/src/shared/shapes.ts index 24d5454..22ae5f0 100644 --- a/src/lib/src/shared/shapes.ts +++ b/src/lib/src/shared/shapes.ts @@ -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