From 73b830dc11ea0b2dfcb9af509b2c700b05920d69 Mon Sep 17 00:00:00 2001 From: asadeg02 Date: Mon, 3 Dec 2018 03:57:08 -0500 Subject: [PATCH] Fix rendering bugs --- .../sbolv/interaction-arrows/reactantArrow.js | 10 ++++----- font/sbolv/rna-protein-complex.js | 2 +- font/sbolv/rna.js | 3 ++- lib/interactions/helper.js | 4 ++-- lib/interactions/non-covelant-binding.js | 21 ++++++++++++------- lib/segment.js | 17 +++++++++------ 6 files changed, 35 insertions(+), 22 deletions(-) diff --git a/font/sbolv/interaction-arrows/reactantArrow.js b/font/sbolv/interaction-arrows/reactantArrow.js index 590cf77..2ea94ad 100644 --- a/font/sbolv/interaction-arrows/reactantArrow.js +++ b/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), }; } diff --git a/font/sbolv/rna-protein-complex.js b/font/sbolv/rna-protein-complex.js index a12f6cc..c68498d 100644 --- a/font/sbolv/rna-protein-complex.js +++ b/font/sbolv/rna-protein-complex.js @@ -143,7 +143,7 @@ function createGeometry(boxSize) { boundingBox.attr('data-uri', glyphObject.uri); } group.add(boundingBox); - console.log("hello") + return { glyph: group, backboneOffset: 1.2 * boxSize.y diff --git a/font/sbolv/rna.js b/font/sbolv/rna.js index 1125620..355de97 100644 --- a/font/sbolv/rna.js +++ b/font/sbolv/rna.js @@ -33,7 +33,7 @@ function createGeometry(boxSize) { var x = boxSize.x; var y = boxSize.y; var stepSize = 3*x/14 - var pointA = Vec2(3*x/4, 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); @@ -43,6 +43,7 @@ function createGeometry(boxSize) { var pointH = Vec2(pointA.x - 7*stepSize, 2*y/4); + //Coordinates of Control Points var controlPoint1 = createControlPoint(pointA, pointB, null); var controlPoint2 = createControlPoint(pointB, pointC, pointA); diff --git a/lib/interactions/helper.js b/lib/interactions/helper.js index 9d63391..d212252 100644 --- a/lib/interactions/helper.js +++ b/lib/interactions/helper.js @@ -80,10 +80,10 @@ function sortParticipants(participants, interactionType) { if (participants[i].role === "product" && i === 1) { break; } - else if ([i].role === "product") { + else if (participants[i].role === "product") { let temp = participants[1] participants[1] = participants[i]; - participants[1] = temp + participants[i] = temp } } } diff --git a/lib/interactions/non-covelant-binding.js b/lib/interactions/non-covelant-binding.js index 194818f..b251d29 100644 --- a/lib/interactions/non-covelant-binding.js +++ b/lib/interactions/non-covelant-binding.js @@ -16,9 +16,9 @@ function render(design, interaction, segments, interactions) { } Helper.sortParticipants(interaction.participants, "non-covelant-binding"); - + let reactantNumber = 0; - let offset = 0; + let productOffset = 0; let width = 0; for (let i in interaction.participants) { @@ -31,14 +31,21 @@ function render(design, interaction, segments, interactions) { } interaction.participants[i].segment.isParticipant = true; - var segment = Segment.render(design, interaction.participants[i].segment, interactions); + + var segment = Segment.render(design, interaction.participants[i].segment, interactions); + + if (i == 0) { + productOffset = interaction.participants.segmentWidth; + + } - if (interaction.participants[i].role === "product") { + if (interaction.participants[i].role === "product") { - segment.dx(110); - - } + //segment.dx(110); + segment.dx(productOffset); + + } else if (interaction.participants[i].segment.role === "reactant2") { segment.dx(220); diff --git a/lib/segment.js b/lib/segment.js index 7cf4406..68fdcd5 100755 --- a/lib/segment.js +++ b/lib/segment.js @@ -7,14 +7,16 @@ var Rect = require('./geom/rect'), nonDNATypes = require('./nonDNATypes'), Arrows = require('../font/sbolv/interaction-arrows/main') -function renderSegment(design, segment, interactions) { + +function renderSegment(design, segment, interactions,) { var surface = design.surface; var glyphOffset = 0; var boundingBoxSize; - + + /* *This flag is set to true if the nonDNA part is going to be displayed in a sequense of length 1 * the purpose is to hide the backBone @@ -269,13 +271,16 @@ function renderSegment(design, segment, interactions) { //if glyph is the first reactant in a non-covelant-binding-reaction add the arrow else if (segment.role === "reactant1") { + //deponding on the implementation of the glyph, (if it starts from negative x area) we set the offset of degradation arrow + var effectiveOffset = glyphProps.glyphLength ? glyphProps.glyphLength : Math.max(glyph.bbox().width, glyphLength); var arrowPos = Matrix(); - var arrowOffset = Vec2(0, -boundingBoxSize.y); + var arrowOffset = Vec2(effectiveOffset + 5, -boundingBoxSize.y); var arrowTransform = Matrix.multiply( Matrix.translation(arrowOffset), arrowPos ); var arrowProps = Arrows.ReactantArrow.render(design, glyphObject, boundingBoxSize ); var arrowGlyph = arrowProps.glyph; arrowGlyph.transform({ matrix: Matrix.toSVGString(arrowTransform) }); group.add(arrowGlyph); + interaction.participants.segmentWidth = group.bbox().width } //if glyph is the first reactant in a non-covelant-binding-reaction modify direction of arrow @@ -283,11 +288,12 @@ function renderSegment(design, segment, interactions) { var arrowPos = Matrix(); var arrowOffset = Vec2(0, -boundingBoxSize.y); - var arrowTransform = Matrix.rotate(arrowPos, 180, { x: 20, y: 0 }); + var arrowTransform = Matrix.rotate(arrowPos, 180, { x: 0, y: 0 }); var arrowProps = Arrows.ReactantArrow.render(design, glyphObject, boundingBoxSize ); var arrowGlyph = arrowProps.glyph; arrowGlyph.transform({ matrix: Matrix.toSVGString(arrowTransform) }); group.add(arrowGlyph); + } else if (segment.role === "degradationReactant") { @@ -403,9 +409,8 @@ function renderSegment(design, segment, interactions) { } group.displayList = segment; + //segment width before adding label segment.svg = group; - - return group; } module.exports = {