Custom SVG Background

[VinskyStrauss]

Hi,
Based on the Documentation of ngx-vflow currently it supports 2 type of Background, which is the dots-Background and the color Background. Is it possible to use a custom svg as the Background of the ngx-vflow? let's take an example, where i use a city map as the custom SVG Background.

[artem-mangilev]

Hi! Currently, it’s not possible to draw a custom image as a background, but I agree it would be a great addition. I'm considering how best to implement it:

• A static SVG image that doesn’t scale or move on zoom/pan.
• An image that moves with panning and scales with zoom, but repeated (since the canvas is infinite).
• Any other suggestions?

[VinskyStrauss]

Hi, Thanks a lot for the reply. I'm thinking a SVG / an Image like a city map, that scale, move on zoom/pan gonna be a cool one, but will be a tricky one since the canvas is infinite.

[elnipa]

That map-feature with image in the background would be powerful.
I would suggest

• Make it a parameter whether the image is fixed (doesn't scale/move/zoom etc.) or with panning
• Make it a parameter whether the image repeats or not

For the map it would be probably beneficial to have an option to "limit" the infinite canvas. But I guess "white" area outside of that background image would be sufficient for the beginning.

[artem-mangilev]

@elnipa thank you for the suggestion! Added to the backlog

@VinskyStrauss I guess it would help if your city map image is a repeat friendly, so it will look fine in infinite canvas with enabled repeating

[artem-mangilev]

Hi @elnipa @VinskyStrauss. I added this feature in this release.

[elnipa]

Awesome, that's a great addition. Thanks

[VinskyStrauss]

Hi @artem-mangilev, I have a question about the background SVG. I tried it in my code, but the background image won't appear. I can access the SVG in http://localhost:4200/assets/darmstadt.svg . This is the code for my ngx-vflow

<vflow
    #vflow
    view="auto"
    (onConnect)="connect($event)"
    (onNodesChange)="onPositionChange($event)"
    [connection]="connectionSetting"
    [nodes]="nodes"
    [edges]="edges"
    [background]="{ type: 'image', src: 'assets/darmstadt.svg', scale: 1 }"
    [maxZoom]="25"
    [minZoom]="-25"
  >
    <ng-template nodeHtml let-ctx>
      <custom-node [nodeContext]="ctx" />
    </ng-template>
    <ng-template edge let-ctx>
      <svg:g eta-edge [edgeContext]="ctx" />
    </ng-template>
  </vflow>

[artem-mangilev]

Hi! That's interesting, I'll check it during the week. The first guess why it works for me (as you may see in the doc) is because the library compiles as a part of docs application. So I'll try to reproduce the bug by installing the lib from npm

[VinskyStrauss]

Hi, thanks a lot for the quick response. I'm looking forward to your findings.

[artem-mangilev]

Hi, It seems I’ve found the solution. To pull images from assets as shown in my example, you need to make the following changes to your angular.json: https://stackoverflow.com/a/65516297