Finishes glyph menu&service

SynBioDex · Sep 14, 2019 · ac1555a · ac1555a
1 parent fdcfb59
commit ac1555a
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 15 deletions.
diff --git a/SBOLCanvasFrontend/src/app/glyph-menu/glyph-menu.component.html b/SBOLCanvasFrontend/src/app/glyph-menu/glyph-menu.component.html
@@ -1,8 +1,8 @@
 <div class="glyphContainer">
   <div #glyphMenuContainer style="margin: auto">
     <mat-grid-list cols="4" rowHeight="100px" gutterSize="5px">
-      <mat-grid-tile *ngFor="let g of glyphPics;">
-        <button mat-stroked-button (click)="onGlyphClicked($event)"><svg #glyphSvg width="52px" height="52px" [innerHTML]="g"></svg></button>
+      <mat-grid-tile *ngFor="let pair of glyphDict | keyvalue">
+        <button mat-stroked-button (click)="onGlyphClicked(pair.key)"><svg #glyphSvg width="52px" height="52px" [innerHTML]="pair.value"></svg></button>
       </mat-grid-tile>
     </mat-grid-list>
   </div>

diff --git a/SBOLCanvasFrontend/src/app/glyph-menu/glyph-menu.component.ts b/SBOLCanvasFrontend/src/app/glyph-menu/glyph-menu.component.ts
@@ -19,15 +19,20 @@ export class GlyphMenuComponent implements OnInit, AfterViewInit {
   @ViewChildren('glyphSvg')
   container: ElementRef;
 
-  public glyphPics: SafeHtml[] = [];
+  public glyphDict = {};
 
   constructor(private graphService: GraphService, private glyphService: GlyphService, private sanitizer: DomSanitizer) {
-    let svg = this.glyphService.getSvg();
-    this.glyphPics.push(this.sanitizer.bypassSecurityTrustHtml(svg.innerHTML));
+    const svgElts = this.glyphService.getSvgElements();
+
+    for (const name in svgElts) {
+      const svg = svgElts[name];
+
+      this.glyphDict[name] = this.sanitizer.bypassSecurityTrustHtml(svg.innerHTML);
+    }
   }
 
-  onGlyphClicked(event: any) {
-    this.graphService.dropNewGlyph('promoter');
+  onGlyphClicked(name: string) {
+    this.graphService.dropNewGlyph(name);
   }
 
   ngOnInit() {

diff --git a/SBOLCanvasFrontend/src/app/glyph.service.ts b/SBOLCanvasFrontend/src/app/glyph.service.ts
@@ -13,7 +13,8 @@ export class GlyphService {
 
   // TODO load list of xml files from server
   private xmlUrls: string[] = [
-    'assets/glyph_stencils/promoter.xml'
+    'assets/glyph_stencils/promoter.xml',
+    'assets/glyph_stencils/origin-of-transfer.xml'
   ];
 
   private stencils: any = {};
@@ -40,15 +41,21 @@ export class GlyphService {
     return this.stencils;
   }
 
-  getSvg() {
-    let elt = document.createElement('svg');
+  getSvgElements() {
+    const svgs = {};
 
-    let canvas = new mx.mxSvgCanvas2D(elt);
-    let stencil = this.stencils['promoter'];
-    let shape = new mx.mxShape(stencil);
+    for (const name in this.stencils) {
+      const stencil = this.stencils[name];
 
-    stencil.drawShape(canvas, shape, 0, 0, 52, 104);
+      let elt = document.createElement('svg');
+      let canvas = new mx.mxSvgCanvas2D(elt);
+      let shape = new mx.mxShape(stencil);
 
-    return elt;
+      stencil.drawShape(canvas, shape, 0, 0, 52, 104);
+
+      svgs[name] = elt;
+    }
+
+    return svgs;
   }
 }
diff --git a/SBOLCanvasFrontend/src/assets/glyph_stencils/origin-of-transfer.xml b/SBOLCanvasFrontend/src/assets/glyph_stencils/origin-of-transfer.xml
@@ -0,0 +1,24 @@
+<shapes name="mxGraph.home.thayer.Desktop">
+<shape aspect="variable" h="25.69" name="origin-of-transfer" strokewidth="inherit" w="26.11">
+    <connections/>
+    <foreground>
+        <strokecolor color="#000000"/>
+        <strokewidth width="3"/>
+        <linejoin join="round"/>
+        <linecap cap="round"/>
+        <ellipse h="24" w="24" x="0" y="1.69"/>
+        <stroke/>
+        <fillcolor color="#000000"/>
+        <strokewidth width="2.56858516"/>
+        <miterlimit limit="4"/>
+        <dashpattern pattern="none"/>
+        <dashed dashed="1"/>
+        <alpha alpha="1"/>
+        <path>
+            <move x="12.16" y="13.95"/>
+            <line x="26.11" y="0"/>
+        </path>
+        <fillstroke/>
+    </foreground>
+</shape>
+</shapes>