Merge pull request #100 from VisBOL/resolve-bugs

Resolve bugs

browser.js

@@ -11,7 +11,7 @@ var soToGlyphType = require('./lib/soToGlyphType')
 var pigeon = require('./lib/pigeon-parser')
 var genbank = require('./lib/genbank')
 
-var getDisplayList = require('./lib/getDisplayList')
+var getDisplayList = require('./lib/getDisplayList').getDisplayList
 var getInteractionList = require('./lib/getInteractionList')
 
 
@@ -236,7 +236,8 @@ var editors = [
 
            //processing module definition
            sbol.moduleDefinitions.forEach(function(moduleDefinition) {
-
+
+               console.log(moduleDefinition)
                currentInteractions = getInteractionList(moduleDefinition);
                for (let i in currentInteractions) {
 

font/sbolv/complex.js

@@ -4,17 +4,17 @@ var Rect = require('../../lib/geom/rect')
 function createGeometry(boxSize) {
   var x = boxSize.x;
   var y = boxSize.y;
-  console.log(boxSize.x)
+
 return {
 
-  topLeft: Vec2(-0.25*x,y*0.2),
-    leftOne: Vec2(-0.5*x,y*0.4),
-    leftTwo: Vec2(-0.5*x,y*0.8),
-  bottomLeft: Vec2(-0.25*x,y),
-  bottomRight: Vec2(x,y),
-    rightOne: Vec2(1.25*x,y*0.4),
-    rightTwo: Vec2(1.25*x,y*0.8),
-  topRight: Vec2(x,y*0.2),
+  topLeft: Vec2(0.25*x,y*0.2),
+    leftOne: Vec2(0,y*0.4),
+    leftTwo: Vec2(0,y*0.8),
+  bottomLeft: Vec2(0.25*x,y),
+  bottomRight: Vec2(1.5 *x,y),
+    rightOne: Vec2(1.75*x,y*0.4),
+    rightTwo: Vec2(1.75*x,y*0.8),
+  topRight: Vec2(1.5 * x,y*0.2),
 
 };
 }

font/sbolv/interaction-arrows/degradationArrow.js

@@ -6,13 +6,13 @@ function createGeometry(boxSize) {
 
     return {
 
-        left: Vec2(boxSize.x,boxSize.y * 0.5),
-        right: Vec2(1.5*boxSize.x, boxSize.y * 0.5),
-        arrowTop:Vec2(1.5 * boxSize.x, boxSize.y * 0.4), 
-        arrowBottom:Vec2(1.5 * boxSize.x, boxSize.y * 0.6),
-        arrowPick:Vec2(boxSize.x * 1.6, boxSize.y * 0.5),
-        lineTop:Vec2(boxSize.x * 2, boxSize.y/2 - boxSize.y/8),
-        lineBottom:Vec2(boxSize.x * 1.7, boxSize.y/2 + boxSize.y/8)
+        left: Vec2(0,boxSize.y * 0.5),
+        right: Vec2(0.5*boxSize.x, boxSize.y * 0.5),
+        arrowTop:Vec2(0.5 * boxSize.x, boxSize.y * 0.4), 
+        arrowBottom:Vec2(0.5 * boxSize.x, boxSize.y * 0.6),
+        arrowPick:Vec2(boxSize.x * 0.6, boxSize.y * 0.5),
+        lineTop:Vec2(boxSize.x * 1.05, boxSize.y/2 - boxSize.y/8),
+        lineBottom:Vec2(boxSize.x * 0.8, boxSize.y/2 + boxSize.y/8)
     };
 }
 
@@ -43,7 +43,7 @@ function renderGlyph(design, glyphObject, boxSize) {
     glyph.attr('stroke-width', glyphObject.thickness || '3px');
     glyph.attr('fill', '#000080');
 
-    circle.center(boxSize.x * 1.85, boxSize.y/2)
+    circle.center(boxSize.x * (0.6 + 1/3), boxSize.y/2)
     circle.attr('stroke', '#000080');
     circle.attr('fill', 'none');
     circle.attr('stroke-width', glyphObject.thickness || '3px');

font/sbolv/interaction-arrows/reactantArrow.js

@@ -6,11 +6,11 @@ function createGeometry(boxSize) {
 
     return {
 
-        left: Vec2(boxSize.x,boxSize.y * 0.5),
-        right: Vec2(1.7*boxSize.x, boxSize.y * 0.5),
-        arrowTop:Vec2(1.7 * boxSize.x, boxSize.y * 0.4), 
-        arrowBottom:Vec2(1.7 * boxSize.x, boxSize.y * 0.6),
-        arrowPick:Vec2(boxSize.x * 1.8, boxSize.y * 0.5),
+        left: Vec2(0,boxSize.y * 0.5),
+        right: Vec2(0.7*boxSize.x, boxSize.y * 0.5),
+        arrowTop:Vec2(0.7 * boxSize.x, boxSize.y * 0.4), 
+        arrowBottom:Vec2(0.7 * boxSize.x, boxSize.y * 0.6),
+        arrowPick:Vec2(boxSize.x * 0.8, boxSize.y * 0.5),
     };
 }
 

font/sbolv/main.js

@@ -41,5 +41,7 @@ module.exports = {
 'dna': require('./dna'),
 //this is the glyph for complex when we can't specify its type
 'complex': require('./complex'),
-'molecule_protein_complex': require('./small-molecule-complex')
+'molecule-protein-complex': require('./small-molecule-complex'),
+'protein-protein-complex':require('./protein-protein-complex'),
+'rna-protein-complex':require('./rna-protein-complex')
 }

font/sbolv/protein-protein-complex.js

@@ -0,0 +1,74 @@
+var Vec2 = require('../../lib/geom/vec2')
+var Rect = require('../../lib/geom/rect')
+
+function renderGlyph(design, glyphObject, boxSize) {
+
+var largeCircle = design.surface.circle(boxSize.x/2);
+var largeCircle2 = design.surface.circle(boxSize.x/2);
+var smallCircle = design.surface.circle(boxSize.x/4);
+var smallCircle2 = design.surface.circle(boxSize.x/4);
+var smallBox = design.surface.rect(boxSize.x/6,boxSize.y/9);
+var smallBox2 = design.surface.rect(boxSize.x/3,boxSize.y/7);
+var group = design.surface.group();
+
+largeCircle.attr('stroke','black');
+largeCircle.attr('fill', glyphObject.color || '#F1948A');
+largeCircle.attr('stroke-width', glyphObject.thickness ||'2px');
+largeCircle.attr('stroke-linejoin', 'round');
+largeCircle.attr({ cx: boxSize.x/2, cy: boxSize.y/2})
+largeCircle.radius(20)
+
+largeCircle2.attr('stroke','black');
+largeCircle2.attr('fill', glyphObject.color || '#F1948A');
+largeCircle2.attr('stroke-width', glyphObject.thickness ||'2px');
+largeCircle2.attr('stroke-linejoin', 'round');
+largeCircle2.attr({ cx: 0, cy: boxSize.y/2})
+largeCircle2.radius(20)
+
+smallCircle.attr('stroke','black');
+smallCircle.attr('fill', glyphObject.color || '#F1948A');
+smallCircle.attr('stroke-width', glyphObject.thickness ||'2px');
+smallCircle.attr('stroke-linejoin', 'round');
+smallCircle.attr({ cx: boxSize.x/5, cy: boxSize.y/1.1 })
+
+smallCircle2.attr('stroke','black');
+smallCircle2.attr('fill', glyphObject.color || '#F1948A');
+smallCircle2.attr('stroke-width', glyphObject.thickness ||'2px');
+smallCircle2.attr('stroke-linejoin', 'round');
+smallCircle2.attr({ cx: -boxSize.x/4, cy: boxSize.y/1.1 })
+
+smallBox.attr('stroke','dark gray');
+smallBox.attr('fill', glyphObject.color || '#F1948A');
+smallBox.attr('stroke-width', glyphObject.thickness ||'2px');
+smallBox.attr('stroke-linejoin', 'round');
+smallBox.attr({ x: boxSize.x/4.8, y: boxSize.y/1.32 })
+
+smallBox2.attr('stroke','dark gray');
+smallBox2.attr('fill', glyphObject.color || '#F1948A');
+smallBox2.attr('stroke-width', glyphObject.thickness ||'2px');
+smallBox2.attr('stroke-linejoin', 'round');
+smallBox2.attr({ x: -boxSize.x/3.5, y: boxSize.y/1.35 })
+
+group.add(largeCircle);
+group.add(smallCircle);
+group.add(smallBox);
+group.add(largeCircle2);
+group.add(smallCircle2);
+group.add(smallBox2);
+
+
+if(glyphObject.uri){
+    group.attr('data-uri', glyphObject.uri)
+  }
+
+return {
+    glyph: group,
+    backboneOffset: boxSize.y
+};
+}
+
+module.exports = {
+
+render: renderGlyph
+
+};

font/sbolv/rna-protein-complex.js

@@ -0,0 +1,158 @@
+
+var Vec2 = require('../../lib/geom/vec2')
+var Rect = require('../../lib/geom/rect')
+
+function createGeometry(boxSize) {
+
+    function createTangentLine(pointA, pointB) {
+
+      var lengthX = pointB.x - pointA.x;
+      var lengthY = pointB.y - pointA.y;
+
+      return {
+          length: Math.sqrt(Math.pow(lengthX, 2) + Math.pow(lengthY, 2)),
+          angle: Math.atan2(lengthY, lengthX)
+      };
+
+    }
+
+    function createControlPoint(current, previous, next) {
+
+         const smoothing = 0.2;
+         var p = (previous === null) ? current : previous;
+         var n = (next === null) ? current: next;
+
+         var line = createTangentLine(n,p);
+
+         return {
+             x: current.x + (Math.cos(line.angle + Math.PI) * line.length * smoothing),
+             y: current.y + (Math.sin(line.angle + Math.PI) * line.length * smoothing)
+         };
+    }
+    // Coordinates of Points to Connect
+    var x = boxSize.x;
+    var y = boxSize.y;
+    var stepSize = 3*x/14
+    var pointA = Vec2(5*x/4, y);
+    var pointB = Vec2(pointA.x - stepSize, 3*y/4);
+    var pointC = Vec2(pointA.x - 2*stepSize, y );
+    var pointD = Vec2(pointA.x - 3*stepSize, 3*y/4);
+    var pointE = Vec2(pointA.x - 4*stepSize, y );
+    var pointF = Vec2(pointA.x - 5*stepSize, 3*y/4);
+    var pointG = Vec2(pointA.x - 6*stepSize, y );
+    var pointH = Vec2(pointA.x - 7*stepSize, 3*y/4);
+
+
+    //Coordinates of Control Points
+    var controlPoint1 = createControlPoint(pointA, pointB, null);
+    var controlPoint2 = createControlPoint(pointB, pointC, pointA);
+    var controlPoint3 = createControlPoint(pointC, pointD, pointB );
+    var controlPoint4 = createControlPoint(pointD, pointE, pointC);
+    var controlPoint5 = createControlPoint(pointE, pointF, pointD);
+    var controlPoint6 = createControlPoint(pointF, pointG, pointE);
+    var controlPoint7 = createControlPoint(pointG, pointH, pointF);
+    var controlPoint8 = createControlPoint(pointH, null, pointG);
+
+
+
+    return {
+
+
+       //coordinate of pick
+        pointA:  pointA,
+        pointB:  pointB,
+        pointC:  pointC,
+        pointD:  pointD,
+        pointE:  pointE,
+        pointF:  pointF,
+        pointG:  pointG,
+        pointH:  pointH,
+
+      //coordiantes of control ponits
+      controlPoint1: controlPoint1,
+      controlPoint2: controlPoint2,
+      controlPoint3: controlPoint3,
+      controlPoint4: controlPoint4,
+      controlPoint5: controlPoint5,
+      controlPoint6: controlPoint6,
+      controlPoint7: controlPoint7,
+      controlPoint8: controlPoint8,
+
+
+
+    };
+    }
+    function renderGlyph(design, glyphObject, boxSize) {
+
+      var largeCircle = design.surface.circle(boxSize.x/2);
+      var smallCircle = design.surface.circle(boxSize.x/4);
+      var smallBox = design.surface.rect(boxSize.x/3,boxSize.y/5.5);
+      var group = design.surface.group();
+
+      largeCircle.attr('stroke','black');
+      largeCircle.attr('fill', glyphObject.color || '#F1948A');
+      largeCircle.attr('stroke-width', glyphObject.thickness ||'2px');
+      largeCircle.attr('stroke-linejoin', 'round');
+      largeCircle.attr({ cx: boxSize.x/2, cy: 4*boxSize.y/5})
+      largeCircle.radius(20)
+
+      smallCircle.attr('stroke','black');
+      smallCircle.attr('fill', glyphObject.color || '#F1948A');
+      smallCircle.attr('stroke-width', glyphObject.thickness ||'2px');
+      smallCircle.attr('stroke-linejoin', 'round');
+      smallCircle.attr({ cx: boxSize.x/5, cy: 1.15*boxSize.y })
+
+      smallBox.attr('stroke','dark gray');
+      smallBox.attr('fill', glyphObject.color || '#F1948A');
+      smallBox.attr('stroke-width', glyphObject.thickness ||'2px');
+      smallBox.attr('stroke-linejoin', 'round');
+      smallBox.attr({ x: boxSize.x/6, y: 0.98*boxSize.y })
+
+    var geom = createGeometry(boxSize);
+
+
+    var path = [
+        'M' + Vec2.toPathString(geom.pointA),
+        'C' + Vec2.toPathString(geom.controlPoint1) + ' ' +  Vec2.toPathString(geom.controlPoint2) + ' ' + Vec2.toPathString(geom.pointB),
+        'S' + Vec2.toPathString(geom.controlPoint3) + ' ' + Vec2.toPathString(geom.pointC),
+        'S' + Vec2.toPathString(geom.controlPoint4) + ' ' + Vec2.toPathString(geom.pointD),
+        'S' + Vec2.toPathString(geom.controlPoint5) + ' ' + Vec2.toPathString(geom.pointE),
+        'S' + Vec2.toPathString(geom.controlPoint6) + ' ' + Vec2.toPathString(geom.pointF),
+        'S' + Vec2.toPathString(geom.controlPoint7) + ' ' + Vec2.toPathString(geom.pointG),
+        'S' + Vec2.toPathString(geom.controlPoint8) + ' ' + Vec2.toPathString(geom.pointH),
+
+     ].join('');
+
+    var glyph = design.surface.path(path);
+    var group = design.surface.group()
+
+    glyph.attr('stroke', glyphObject.color || 'purple');
+    glyph.attr('stroke-width', glyphObject.thickness || '3px');
+    glyph.attr('stroke-linecap', 'round');
+    glyph.attr('fill-opacity', 0);
+
+    group.add(largeCircle);
+    group.add(smallCircle);
+    group.add(smallBox);
+    group.add(glyph);
+
+    boundingBox = design.surface.rect(boxSize.x, boxSize.y);
+    boundingBox.attr('fill-opacity', 0);
+
+    if(glyphObject.uri) {
+        boundingBox.attr('data-uri', glyphObject.uri);
+}
+    group.add(boundingBox);
+
+    return {
+        glyph: group,
+        backboneOffset: 1.2 * boxSize.y
+    };
+}
+
+module.exports = {
+
+    render: renderGlyph
+
+};
+

font/sbolv/rna.js

@@ -33,14 +33,15 @@ function createGeometry(boxSize) {
     var x = boxSize.x;
     var y = boxSize.y;
     var stepSize = 3*x/14
-    var pointA = Vec2(5*x/4, y);
-    var pointB = Vec2(pointA.x - stepSize, 3*y/4);
-    var pointC = Vec2(pointA.x - 2*stepSize, y );
-    var pointD = Vec2(pointA.x - 3*stepSize, 3*y/4);
-    var pointE = Vec2(pointA.x - 4*stepSize, y );
-    var pointF = Vec2(pointA.x - 5*stepSize, 3*y/4);
-    var pointG = Vec2(pointA.x - 6*stepSize, y );
-    var pointH = Vec2(pointA.x - 7*stepSize, 3*y/4);
+    var pointA = Vec2(5 *x/4, 3*y/4);
+    var pointB = Vec2(pointA.x - stepSize, 2*y/4);
+    var pointC = Vec2(pointA.x - 2*stepSize, 3*y/4 );
+    var pointD = Vec2(pointA.x - 3*stepSize, 2*y/4);
+    var pointE = Vec2(pointA.x - 4*stepSize, 3*y/4 );
+    var pointF = Vec2(pointA.x - 5*stepSize, 2*y/4);
+    var pointG = Vec2(pointA.x - 6*stepSize, 3*y/4 );
+    var pointH = Vec2(pointA.x - 7*stepSize, 2*y/4);
+
 
 
     //Coordinates of Control Points
@@ -101,7 +102,7 @@ function createGeometry(boxSize) {
     var glyph = design.surface.path(path);
     var group = design.surface.group()
 
-    glyph.attr('stroke', glyphObject.color || '#000000');
+    glyph.attr('stroke', glyphObject.color || 'purple');
     glyph.attr('stroke-width', glyphObject.thickness || '3px');
     glyph.attr('stroke-linecap', 'round');
    glyph.attr('fill', glyphObject.color || '#FFFFFF');
@@ -119,13 +120,12 @@ function createGeometry(boxSize) {
 
     return {
         glyph: group,
-        backboneOffset: boxSize.y
+        backboneOffset: 1.2 * boxSize.y,
+        glyphLength: createGeometry(boxSize).pointA.x
     };
 }
 
 module.exports = {
 
-    render: renderGlyph,
-
-
+    render: renderGlyph
 };