Some stencils for now

SynBioDex · Feb 4, 2021 · 01f9b33 · 01f9b33
1 parent a0242e7
commit 01f9b33
Show file tree

Hide file tree

Showing 11 changed files with 161 additions and 17 deletions.
diff --git a/SBOLCanvasFrontend/src/app/glyph-menu/glyph-menu.component.html b/SBOLCanvasFrontend/src/app/glyph-menu/glyph-menu.component.html
@@ -79,7 +79,7 @@
 
 
     <!-------------------------------------    Interaction nodes panel   --------------------------------------->
-    <!-- <mat-expansion-panel [expanded]="true" *ngIf="!componentDefinitionMode &&
+    <mat-expansion-panel [expanded]="true" *ngIf="!componentDefinitionMode &&
             (interactionNodeDict | keyvalue | searchfilter: searchPhrase).length > 0">
       <mat-expansion-panel-header>
         <mat-panel-title>
@@ -95,7 +95,7 @@
           </button>
         </mat-grid-tile>
       </mat-grid-list>
-    </mat-expansion-panel> -->
+    </mat-expansion-panel>
 
 
     <!-------------------------------------    Utils panel   --------------------------------------->

diff --git a/SBOLCanvasFrontend/src/app/glyph-menu/glyph-menu.component.ts b/SBOLCanvasFrontend/src/app/glyph-menu/glyph-menu.component.ts
@@ -27,6 +27,7 @@ export class GlyphMenuComponent implements OnInit, AfterViewInit {
     SEQUENCE_FEATURE: "Sequence Feature",
     MOLECULAR_SPECIES: "Molecular Species",
     INTERACTION: "Interaction",
+    INTERACTION_NODE: "Interaction Node",
   }
 
   @ViewChildren('canvasElement') canvasElements: QueryList<ElementRef>;
@@ -53,8 +54,8 @@ export class GlyphMenuComponent implements OnInit, AfterViewInit {
   }
 
   onInteractionNodeGlyphClicked(name: string){
-    // name = name.charAt(0).toUpperCase()+name.slice(1);
-    // this.graphService.addInteractionNode(name);
+    name = name.charAt(0).toUpperCase()+name.slice(1);
+    this.graphService.addInteractionNode(name);
   }
 
   onInteractionGlyphClicked(name: string) {
@@ -102,6 +103,9 @@ export class GlyphMenuComponent implements OnInit, AfterViewInit {
         case this.elementTypes.INTERACTION:
           this.graphService.makeInteractionDragsource(elt, elt.getAttribute('glyphStyle'));
           break;
+        case this.elementTypes.INTERACTION_NODE:
+          this.graphService.makeInteractionNodeDragsource(elt, elt.getAttribute('glyphStyle'));
+          break;
       }
     }
 

diff --git a/SBOLCanvasFrontend/src/app/glyph.service.ts b/SBOLCanvasFrontend/src/app/glyph.service.ts
@@ -60,6 +60,7 @@ export class GlyphService {
     'assets/glyph_stencils/molecular_species/small-molecule.xml',
     'assets/glyph_stencils/molecular_species/no-glyph-assigned-ms.xml',
     'assets/glyph_stencils/molecular_species/replacement-glyph.xml',
+    'assets/glyph_stencils/molecular_species/complex.xml',
   ];
 
   private interactionXMLs: string[] = [

diff --git a/SBOLCanvasFrontend/src/app/graph-base.ts b/SBOLCanvasFrontend/src/app/graph-base.ts
@@ -39,6 +39,9 @@ export class GraphBase {
     static readonly molecularSpeciesGlyphWidth = 50;
     static readonly molecularSpeciesGlyphHeight = 50;
 
+    static readonly interactionNodeGlyphWidth = 50;
+    static readonly interactionNodeGlyphHeight = 50;
+
     static readonly defaultTextWidth = 120;
     static readonly defaultTextHeight = 80;
 
@@ -56,6 +59,7 @@ export class GraphBase {
     static readonly STYLE_MOLECULAR_SPECIES = 'molecularSpeciesGlyph';
     static readonly STYLE_SEQUENCE_FEATURE = 'sequenceFeatureGlyph';
     static readonly STYLE_INTERACTION = 'interactionGlyph';
+    static readonly STYLE_INTERACTION_NODE = 'interactionNodeGlyph';
     static readonly STYLE_MODULE_VIEW = "moduleViewCell";
     static readonly STYLE_COMPONENT_VIEW = "componentViewCell";
     static readonly STYLE_INDICATOR = "indicator";
@@ -81,6 +85,7 @@ export class GraphBase {
 
     baseMolecularSpeciesGlyphStyle: any;
     baseSequenceFeatureGlyphStyle: any;
+    baseInteractionNodeGlyphStyle: any;
 
     // This object handles the hotkeys for the graph.
     keyHandler: any;
@@ -362,6 +367,10 @@ export class GraphBase {
             return this.isStyle(GraphBase.STYLE_SCAR);
         };
 
+        mx.mxCell.prototype.isInteractionNode = function() {
+            return this.isStyle(GraphBase.STYLE_INTERACTION_NODE);
+        }
+
         mx.mxCell.prototype.isInteraction = function () {
             return this.isStyle(GraphBase.STYLE_INTERACTION);
         }
@@ -642,6 +651,8 @@ export class GraphBase {
         this.baseSequenceFeatureGlyphStyle = mx.mxUtils.clone(this.baseMolecularSpeciesGlyphStyle);
         this.baseSequenceFeatureGlyphStyle[mx.mxConstants.STYLE_PORT_CONSTRAINT] = [mx.mxConstants.DIRECTION_NORTH, mx.mxConstants.DIRECTION_SOUTH];
 
+        this.baseInteractionNodeGlyphStyle = mx.mxUtils.clone(this.baseMolecularSpeciesGlyphStyle);
+
         const textBoxStyle = {};
         textBoxStyle[mx.mxConstants.STYLE_SHAPE] = mx.mxConstants.SHAPE_LABEL;
         textBoxStyle[mx.mxConstants.STYLE_FILLCOLOR] = '#ffffff';
@@ -807,6 +818,18 @@ export class GraphBase {
             this.graph.getStylesheet().putCellStyle(GraphBase.STYLE_MOLECULAR_SPECIES + name, newGlyphStyle);
         }
 
+        // interaction nodes are basically identical to molecular species
+        stencils = this.glyphService.getInteractionNodeGlyphs();
+        for(const name in stencils){
+            const stencil = stencils[name][0];
+            let customStencil = new mx.mxStencil(stencil.desc);
+            mx.mxStencilRegistry.addStencil(name, customStencil);
+
+            const newGlyphStyle = mx.mxUtils.clone(this.baseInteractionNodeGlyphStyle);
+            newGlyphStyle[mx.mxConstants.STYLE_SHAPE] = name;
+            this.graph.getStylesheet().putCellStyle(GraphBase.STYLE_INTERACTION_NODE+name, newGlyphStyle);
+        }
+
         // indicators like composit and combinatorial
         stencils = this.glyphService.getIndicatorGlyphs();
         for(const name in stencils){
@@ -903,9 +926,11 @@ export class GraphBase {
         this.graph.addListener(mx.mxEvent.CONNECT_CELL, mx.mxUtils.bind(this, async function(sender, evt){
 
             // if the terminal is a module, we need to prompt what it should be changed to, otherwise just clear it
+            //TODO find the previous terminal and replace it in the toURI or fromURI
 
             let edge = evt.getProperty("edge");
             let terminal = evt.getProperty("terminal");
+            let previous = evt.getProperty("previous");
             let source = evt.getProperty("source");
 
             let cancelled = false;

diff --git a/SBOLCanvasFrontend/src/app/graph-helpers.ts b/SBOLCanvasFrontend/src/app/graph-helpers.ts
@@ -769,14 +769,15 @@ export class GraphHelpers extends GraphBase {
                         this.graph.getModel().remove(interaction);
                         continue;
                     }
-                    if (interaction.value.fromURI === oldReference) {
+                    let index;
+                    if ((index = interaction.value.fromURI.indexOf(oldReference)) > -1) {
                         let infoCopy = interaction.value.makeCopy();
-                        infoCopy.fromURI = newReference;
+                        infoCopy.fromURI[index] = newReference;
                         this.graph.getModel().execute(new GraphEdits.interactionEdit(interaction, infoCopy));
                     }
-                    if (interaction.value.toURI === oldReference) {
+                    if ((index = interaction.value.toURI.indexOf(oldReference)) > -1) {
                         let infoCopy = interaction.value.makeCopy();
-                        infoCopy.toURI = newReference;
+                        infoCopy.toURI[index] = newReference;
                         this.graph.getModel().execute(new GraphEdits.interactionEdit(interaction, infoCopy));
                     }
                 }
@@ -1072,7 +1073,7 @@ export class GraphHelpers extends GraphBase {
                 this.metadataService.setSelectedGlyphInfo(glyphInfo.makeCopy());
             }
         }
-        else if (cell.isInteraction()) {
+        else if (cell.isInteraction() || cell.isInteractionNode()) {
             let interactionInfo = cell.value;
             if (interactionInfo) {
                 this.metadataService.setSelectedInteractionInfo(interactionInfo.makeCopy());

diff --git a/SBOLCanvasFrontend/src/app/graph.service.ts b/SBOLCanvasFrontend/src/app/graph.service.ts
@@ -714,6 +714,33 @@ export class GraphService extends GraphHelpers {
     console.log(this.graph.getModel().cells);
   }
 
+  makeInteractionNodeDragsource(element, stylename){
+    const insertGlyph = mx.mxUtils.bind(this, function (graph, evt, target, x, y) {
+      this.addInteractionNodeAt(stylename, x - GraphBase.interactionNodeGlyphWidth / 2, y - GraphBase.interactionNodeGlyphHeight / 2);
+    });
+    this.makeGeneralDragsource(element, insertGlyph);
+  }
+
+  addInteractionNode(name){
+    const pt = this.getDefaultNewCellCoords();
+    this.addInteractionNodeAt(name, pt.x, pt.y);
+  }
+
+  addInteractionNodeAt(name: string, x, y){
+    this.graph.getModel().beginUpdate();
+    try{
+      const interactionNodeGlyph = this.graph.insertVertex(this.graph.getDefaultParent(), null, null, x, y,
+        GraphBase.interactionNodeGlyphWidth, GraphBase.interactionNodeGlyphHeight, GraphBase.STYLE_INTERACTION_NODE + name);
+      interactionNodeGlyph.setConnectable(true);
+
+      // The new glyph should be selected
+      this.graph.clearSelection();
+      this.graph.setSelectionCell(interactionNodeGlyph);
+    }finally{
+      this.graph.getModel().endUpdate();
+    }
+  }
+
   /**
    * Turns the given HTML element into a dragsource for creating interaction glyphs
    */
@@ -765,7 +792,7 @@ export class GraphService extends GraphHelpers {
           let result = await this.promptChooseFunctionalComponent(selectedCell, true);
           if (!result)
             return;
-          cell.value.fromURI = result;
+          cell.value.fromURI.push(result+"_"+cell.getId());
         }
         cell.geometry.setTerminalPoint(new mx.mxPoint(x, y - GraphBase.defaultInteractionSize), false);
         cell.edge = true;
@@ -777,13 +804,13 @@ export class GraphService extends GraphHelpers {
           let result = await this.promptChooseFunctionalComponent(sourceCell, true);
           if (!result)
             return;
-          cell.value.fromURI = result;
+          cell.value.fromURI.push(result+"_"+cell.getId());
         }
         if (destCell.isModule()) {
           let result = await this.promptChooseFunctionalComponent(destCell, false);
           if (!result)
             return;
-          cell.value.toURI = result;
+          cell.value.toURI.push(result+"_"+cell.getId());
         }
         cell.edge = true;
         this.graph.addEdge(cell, this.graph.getCurrentRoot(), sourceCell, destCell);

diff --git a/SBOLCanvasFrontend/src/app/interactionInfo.ts b/SBOLCanvasFrontend/src/app/interactionInfo.ts
@@ -5,13 +5,13 @@ export class InteractionInfo extends Info {
   // Remember that when you change this you need to change the encode function in graph service
   static counter: number = 0;
   interactionType: string;
-  fromURI: string;
-  toURI: string;
+  fromURI: string[];
+  toURI: string[];
 
   constructor() {
     super();
     this.displayID = 'Interaction' + (InteractionInfo.counter++);
-    this.interactionType = "Yo momma";
+    this.interactionType;
   }
 
   makeCopy() {

diff --git a/SBOLCanvasFrontend/src/assets/glyph_stencils/interaction_nodes/association.xml b/SBOLCanvasFrontend/src/assets/glyph_stencils/interaction_nodes/association.xml
@@ -6,8 +6,6 @@
         <linejoin join="round" />
         <linecap cap="round" />
         <miterlimit limit="4" />
-        <dashpattern pattern="none" />
-        <dashed dashed="1" />
         <alpha alpha="1" />
         <strokealpha alpha="1" />
         <fillalpha alpha="1" />

diff --git a/SBOLCanvasFrontend/src/assets/glyph_stencils/molecular_species/complex.xml b/SBOLCanvasFrontend/src/assets/glyph_stencils/molecular_species/complex.xml
@@ -0,0 +1,27 @@
+<shapes>
+<shape aspect="fixed" h="48" name="complex-sbgn-specification" strokewidth="inherit" w="48" centered="True">
+    <connections />
+    <foreground>
+        <strokewidth width="2.88" />
+        <linejoin join="miter" />
+        <linecap cap="butt" />
+        <miterlimit limit="4" />
+        <alpha alpha="1" />
+        <strokealpha alpha="1" />
+        <fillalpha alpha="1" />
+        <path>
+            <move x="11.639999999999999" y="17.07" />
+            <line x="8.12" y="20.59" />
+            <line x="8.12" y="27.41" />
+            <line x="11.639999999999999" y="30.93" />
+            <line x="36.37" y="30.93" />
+            <line x="39.88" y="27.41" />
+            <line x="39.88" y="20.59" />
+            <line x="36.37" y="17.07" />
+            <line x="11.639999999999999" y="17.07" />
+            <close />
+        </path>
+        <fillstroke />
+    </foreground>
+</shape>
+</shapes>
diff --git a/resources/complex.xml b/resources/complex.xml
@@ -0,0 +1,30 @@
+<shapes>
+<shape aspect="variable" h="48" name="complex-sbgn-specification" strokewidth="inherit" w="48" centered="False">
+    <connections />
+    <foreground>
+        <fillcolor color="#999999" />
+        <strokewidth width="2.88" />
+        <linejoin join="miter" />
+        <linecap cap="butt" />
+        <miterlimit limit="4" />
+        <dashpattern pattern="none" />
+        <dashed dashed="1" />
+        <alpha alpha="1" />
+        <strokealpha alpha="1" />
+        <fillalpha alpha="1" />
+        <path>
+            <move x="11.639999999999999" y="34.14" />
+            <line x="8.12" y="37.660000000000004" />
+            <line x="8.12" y="44.480000000000004" />
+            <line x="11.639999999999999" y="48.0" />
+            <line x="36.37" y="48.0" />
+            <line x="39.88" y="44.480000000000004" />
+            <line x="39.88" y="37.660000000000004" />
+            <line x="36.37" y="34.14" />
+            <line x="11.639999999999999" y="34.14" />
+            <close />
+        </path>
+        <fillstroke />
+    </foreground>
+</shape>
+</shapes>
diff --git a/resources/documents.xml b/resources/documents.xml
@@ -0,0 +1,31 @@
+<shapes name="mxGraph.Users.Logan.Documents">
+<shape aspect="variable" h="13.86" name="complex-sbgn-specification" strokewidth="inherit" w="31.76">
+    <connections/>
+    <foreground>
+        <strokecolor color="#000000"/>
+        <fillcolor color="#999999"/>
+        <strokewidth width="0.99999988"/>
+        <linejoin join="miter"/>
+        <linecap cap="butt"/>
+        <miterlimit limit="4"/>
+        <dashpattern pattern="none"/>
+        <dashed dashed="1"/>
+        <alpha alpha="1"/>
+        <strokealpha alpha="1"/>
+        <fillalpha alpha="1"/>
+        <path>
+            <move x="3.52" y="0"/>
+            <line x="0" y="3.52"/>
+            <line x="0" y="10.34"/>
+            <line x="3.52" y="13.86"/>
+            <line x="28.25" y="13.86"/>
+            <line x="31.76" y="10.34"/>
+            <line x="31.76" y="3.52"/>
+            <line x="28.25" y="0"/>
+            <line x="3.52" y="0"/>
+            <close/>
+        </path>
+        <fillstroke/>
+    </foreground>
+</shape>
+</shapes>