From 402bf8cc1577b914f2593210449d87b8c3f174df Mon Sep 17 00:00:00 2001 From: Anna Gerber Date: Thu, 3 Sep 2009 04:04:33 +0000 Subject: [PATCH] Updated connections so that there are ports on node top and bottom, and arrows are anchored at node center instead of on the specific ports, in response to #89 and #31. No longer need input and output ports, so changed to use just a single port type. Note: now this is annoying when there are cyclic connections as they are displayed over the top of each other. --- .../content/graphs/ContextmenuConnection.js | 49 ++++++++++--------- oaiorebuilder/content/graphs/InputPort.js | 24 +++++---- oaiorebuilder/content/graphs/OutputPort.js | 12 ----- .../content/graphs/ResourceFigure.js | 30 ++++++++++-- 4 files changed, 66 insertions(+), 49 deletions(-) delete mode 100644 oaiorebuilder/content/graphs/OutputPort.js diff --git a/oaiorebuilder/content/graphs/ContextmenuConnection.js b/oaiorebuilder/content/graphs/ContextmenuConnection.js index 0fde4275..9a5fc392 100644 --- a/oaiorebuilder/content/graphs/ContextmenuConnection.js +++ b/oaiorebuilder/content/graphs/ContextmenuConnection.js @@ -2,32 +2,35 @@ * Connection figure that provides a context menu to set the connection type * The types are sourced from ontrelationships, which is populated from an ontology (see uifunctions.js) */ -lore.ore.graph.ContextmenuConnection=function() -{draw2d.Connection.call(this); -var grey = new draw2d.Color(174,174,174); -var darkgrey = new draw2d.Color(51,51,51); -var theArrow = new draw2d.ArrowConnectionDecorator(); -theArrow.setColor(grey); -this.setTargetDecorator(theArrow); -this.setRouter(new draw2d.BezierConnectionRouter()); -this.label = new draw2d.Label(); -this.label.setColor(darkgrey); -this.addFigure(this.label, new draw2d.ManhattanMidpointLocator(this)); -this.setRelationshipType("http://purl.org/vocab/frbr/core#","partOf"); -this.sourcePort=null;this.targetPort=null; -this.lineSegments=new Array(); -this.setColor(grey); -this.setLineWidth(1); +lore.ore.graph.ContextmenuConnection=function(){ + draw2d.Connection.call(this); + var grey = new draw2d.Color(174,174,174); + var darkgrey = new draw2d.Color(51,51,51); + var theArrow = new draw2d.ArrowConnectionDecorator(); + theArrow.setColor(grey); + this.setTargetDecorator(theArrow); + this.setRouter(new draw2d.BezierConnectionRouter()); + //this.setRouter(new draw2d.ManhattanConnectionRouter()); + this.label = new draw2d.Label(); + this.label.setColor(darkgrey); + this.addFigure(this.label, new draw2d.ManhattanMidpointLocator(this)); + this.setRelationshipType("http://purl.org/dc/elements/1.1/","relation"); + this.sourcePort=null; + this.targetPort=null; + this.lineSegments=new Array(); + this.setColor(grey); + this.setLineWidth(1); + this.setSourceAnchor(new draw2d.ChopboxConnectionAnchor()); + this.setTargetAnchor(new draw2d.ChopboxConnectionAnchor()); }; lore.ore.graph.ContextmenuConnection.prototype=new draw2d.Connection(); -lore.ore.graph.ContextmenuConnection.prototype.setRelationshipType=function(enamespace, etype) -{this.edgetype=etype; -this.edgens=enamespace; -lore.ui.nodegrid.setSource({"Relationship":etype, "Schema": enamespace}); -this.label.setText(etype); +lore.ore.graph.ContextmenuConnection.prototype.setRelationshipType=function(enamespace, etype){ + this.edgetype=etype; + this.edgens=enamespace; + lore.ui.nodegrid.setSource({"Relationship":etype, "Schema": enamespace}); + this.label.setText(etype); }; -lore.ore.graph.ContextmenuConnection.prototype.getContextMenu=function() -{ +lore.ore.graph.ContextmenuConnection.prototype.getContextMenu=function() { var menu=new draw2d.Menu(); var oThis = this; // sort the menu entries diff --git a/oaiorebuilder/content/graphs/InputPort.js b/oaiorebuilder/content/graphs/InputPort.js index 77b308cb..7ad3d6a1 100644 --- a/oaiorebuilder/content/graphs/InputPort.js +++ b/oaiorebuilder/content/graphs/InputPort.js @@ -1,12 +1,16 @@ -/* Input port that accepts connections from ContextmenuConnections +/* Port that accepts connections from ContextmenuConnections * */ -lore.ore.graph.InputPort=function(_5320){draw2d.InputPort.call(this,_5320);}; -lore.ore.graph.InputPort.prototype=new draw2d.InputPort; -lore.ore.graph.InputPort.prototype.type="lore.ore.graph.InputPort"; -lore.ore.graph.InputPort.prototype.onDrop=function(port){ -if(port.getMaxFanOut&&port.getMaxFanOut()<=port.getFanOut()){return;} -if(this.parentNode.id==port.parentNode.id){} -else{var _5322=new draw2d.CommandConnect(this.parentNode.workflow,port,this); -_5322.setConnection(new lore.ore.graph.ContextmenuConnection()); -this.parentNode.workflow.getCommandStack().execute(_5322);}}; \ No newline at end of file +lore.ore.graph.Port = function(uirep) { + draw2d.Port.call(this,uirep); +}; +lore.ore.graph.Port.prototype = new draw2d.Port; +lore.ore.graph.Port.prototype.type = "lore.ore.graph.Port"; +lore.ore.graph.Port.prototype.onDrop = function(port) { + if (this.parentNode.id != port.parentNode.id) { + var _5322 = new draw2d.CommandConnect(this.parentNode.workflow, this, + port); + _5322.setConnection(new lore.ore.graph.ContextmenuConnection()); + this.parentNode.workflow.getCommandStack().execute(_5322); + } +}; \ No newline at end of file diff --git a/oaiorebuilder/content/graphs/OutputPort.js b/oaiorebuilder/content/graphs/OutputPort.js deleted file mode 100644 index 4e5da222..00000000 --- a/oaiorebuilder/content/graphs/OutputPort.js +++ /dev/null @@ -1,12 +0,0 @@ -/* Ouput port that accepts connections to ContextmenuConnections - * - */ -lore.ore.graph.OutputPort=function(_48a4){draw2d.OutputPort.call(this,_48a4);}; -lore.ore.graph.OutputPort.prototype=new draw2d.OutputPort; -lore.ore.graph.OutputPort.prototype.type="lore.ore.graph.OutputPort"; -lore.ore.graph.OutputPort.prototype.onDrop=function(port) -{if(this.getMaxFanOut()<=this.getFanOut()){return;} -if(this.parentNode.id==port.parentNode.id){} -else{var _48a6=new draw2d.CommandConnect(this.parentNode.workflow,this,port); -_48a6.setConnection(new lore.ore.graph.ContextmenuConnection()); -this.parentNode.workflow.getCommandStack().execute(_48a6);}}; \ No newline at end of file diff --git a/oaiorebuilder/content/graphs/ResourceFigure.js b/oaiorebuilder/content/graphs/ResourceFigure.js index c9445644..6da9ef8a 100644 --- a/oaiorebuilder/content/graphs/ResourceFigure.js +++ b/oaiorebuilder/content/graphs/ResourceFigure.js @@ -138,6 +138,12 @@ if(this.inputPort!=null){ this.inputPort.setPosition(-5,this.height/2); } +if(this.inputPort2!=null){ + this.inputPort2.setPosition(this.width/2,-5); +} +if(this.outputPort2!=null){ + this.outputPort2.setPosition(this.width/2,this.height+5); +} }; lore.ore.graph.ResourceFigure.prototype.setTitle=function(title){ this.header.innerHTML=title; @@ -281,19 +287,35 @@ lore.ore.graph.ResourceFigure.prototype.setWorkflow=function(_4679){ if(_4679!=null&&this.inputPort==null){ var orange = new draw2d.Color(255,204,51); var grey = new draw2d.Color(174,174,174); - this.inputPort=new lore.ore.graph.InputPort(); + this.inputPort=new lore.ore.graph.Port(); this.inputPort.setWorkflow(_4679); this.inputPort.setName("input"); this.inputPort.setBackgroundColor(orange); this.inputPort.setColor(grey); this.addPort(this.inputPort,-5,this.height/2); - this.outputPort=new lore.ore.graph.OutputPort(); - this.outputPort.setMaxFanOut(5); + + this.inputPort2=new lore.ore.graph.Port(); + this.inputPort2.setWorkflow(_4679); + this.inputPort2.setName("input2"); + this.inputPort2.setBackgroundColor(orange); + this.inputPort2.setColor(grey); + this.addPort(this.inputPort2,this.width/2,-5) + + this.outputPort=new lore.ore.graph.Port(); this.outputPort.setWorkflow(_4679); this.outputPort.setName("output"); this.outputPort.setBackgroundColor(orange); this.outputPort.setColor(grey); - this.addPort(this.outputPort,this.width+5,this.height/2);} + this.addPort(this.outputPort,this.width+5,this.height/2); + + this.outputPort2=new lore.ore.graph.Port(); + this.outputPort2.setWorkflow(_4679); + this.outputPort2.setName("output2"); + this.outputPort2.setBackgroundColor(orange); + this.outputPort2.setColor(grey); + this.addPort(this.outputPort2,this.width/2,this.height+5); + + } }; lore.ore.graph.ResourceFigure.prototype.toggle=function(){