Angular | SingleContainer: Add SVG defs and sizing options to SingleContainer

[rokotyan]

This should fix #429

• svgDefs allows passing custom SVG defs to be available to all components within the container
• sizing defines whether components should fit into the container or the container should expand to fit the component's size

[mossy426]

Hey @rokotyan sorry for the delay. I was out for a couple weeks. Which version of unovis should I be using with this fix? 1.4.4?

[mossy426]

I saw the release notes and 1.4.4 and it appears the fix should be there, but it still doesn't seem to work. I have defined svgDefs as shown in the documentation and passed it into the html component

HTML:

<vis-single-container id="viz-force" *ngIf="!showParallel && data !== undefined" [data]="data" [svgDefs]="svgDefs" [height]="containerHeight">
    <vis-graph
      [layoutType]="layoutType"
      [layoutAutofit]="autoFit"
      [forceLayoutSettings]="forceLayoutSettings"
      [linkLabel]="linkLabel"
      [linkWidth]="linkWidth"
      [linkStroke]="linkStroke"
      [linkArrow]="linkArrow"
      [linkStyle]="linkStyle"
      [nodeFill]="nodeFill"
      [nodeStroke]="nodeStroke"
      [nodeStrokeWidth]="nodeStrokeWidth"
      [nodeLabel]="nodeLabel"
      [nodeShape]="nodeShape"
      [nodeSize]="nodeSize"
      [events]="events"
      [selectedNodeId]="selectedNodeId"
      (onNodeSelectionBrush)="onNodeSelectionBrush($event.selectedNodes, $event.event)"
      (onNodeSelectionDrag)="onNodeSelectionDrag($event.selectedNodes, $event.event)"
      ></vis-graph>
</vis-single-container>

Typescript:

// Declared Variable
svgDefs = `
    <path id="blob" d="M 19.415 1.0564 C 20.585 2.47 20.225 5.89 21.665 8.2612 C 23.06 10.678 26.345 12.046 28.325 14.554 C 30.305 17.1076 31.025 20.8012 28.865 21.9412 C 26.75 23.1268 21.755 21.7588 18.605 23.3092 C 15.455 24.8596 14.105 29.3284 12.485 29.8756 C 10.865 30.3772 8.93 27.0028 6.41 25.042 C 3.89 23.1268 0.83 22.6708 0.38 20.9836 C -0.07 19.2964 2.135 16.378 2.54 13.642 C 2.945 10.9516 1.55 8.4892 2.135 7.03 C 2.72 5.5708 5.285 5.1148 7.355 4.294 C 9.47 3.4276 11.135 2.1964 13.34 1.2388 C 15.545 0.3268 18.245 -0.3116 19.415 1.0564 Z"/>
    <path id="cloud" d="M 14 -1 A 9 9 90 0 0 5 8 A 9 9 90 0 0 5.1055 9.3125 A 6 6 90 0 0 1 15 A 6 6 90 0 0 7 21 L 22 21 A 7 7 90 0 0 29 14 A 7 7 90 0 0 22.9414 7.0703 A 9 9 90 0 0 14 -1 z"/>
    <polygon id="diamond" points="0,15 15,0 30,15 15,30"/>
    <polygon id="house" points="4,18 4,30 13,30 13,24 17,24 17,30 26,30 26,18 30,18 15,0 0,18"/>
    `;
    
 
// This is within the getNodeShape Function that returns the shape
switch(type) {
            case 'symbolCircle':
                return 'circle';
            case 'symbolSquare':
                return 'square';
            case 'symbolHexagon':
                return 'hexagon';
            case 'symbolTriangle':
                return 'triangle';
            case 'symbolDiamond':
                console.log('symbolDiamond: ', type);
                // return "<image width='50' height='50' href='https://upload.wikimedia.org/wikipedia/commons/7/7e/Sphere_-_monochrome_simple.svg'/>";
                return `<use href="#cloud" stroke-width="3" />`;
           }

For symbolDiamond, it works if I return the online url custom shape, but not when I return cloud, diamond, or any of the svg defs. Is there something I'm doing wrong in the code you see here? I

using Angular 15

[rokotyan]

@mossy426 Try 1.4.5-beta.0

[mossy426]

Thanks! I was able to get it working in stackblitz, but not in my local project. Not seeing why. Troubleshooting now and will get back to you.

[mossy426]

Is there a way to add some kind of error handling to display where the error occurs if no shape is being displayed? It's pretty difficult to debug what could be causing the issue with no error messages. I don't know if the svgdefs arent being sent through properly or there's some other issue.

[rokotyan]

@mossy426 This is probably doable, but going to be a little tricky — SVG does the linking itself and doesn't throw any error if it fails.

I'll explore this problem when I have time, maybe we can do some checks manually.