Svelte with Cytoscape Example

App.svelte

<!--
---Created by Gumpanat Keardkeawfa on 2022Feb13.---
---Copyright © 2022 Auycro. All rights reserved.---
-->

<script>
  import cytoscape from 'cytoscape'
  import { onMount } from 'svelte';
  const endpoint = "https://js.cytoscape.org/demos/grid-layout/data.json";
  let data = [];
  let cyInstance;
  let chartCanvas;
  onMount(async (promise) => {    
    const res = await fetch(endpoint);
    data = await res.json();
    //console.log(data);
    
    cyInstance = cytoscape({
      container: chartCanvas,
      elements: data,
      layout: {
        name: 'grid',
      },
      boxSelectionEnabled: false,
      autounselectify: true,
      style: [
        {
          selector: 'node',
          style: {
            'height': 20,
            'width': 20,
            'background-color': '#18e018',
            'opacity': 0.5,
          }
        },
        {
          selector: 'edge',
          style: {
            'curve-style': 'haystack',
            'haystack-radius': 0,
            'width': 5,
            'opacity': 0.5,
            'line-color': '#a2efa2'
          }
        }
      ],
    });    
    //console.log(cyInstance.container());
  });
</script>

<!--
<div class="foobar">
  {#each data as item}
    {#if item.group=="nodes"}
      {item.position.x},{item.position.y}<br/>
    {/if}
  {:else}
    <p>loading...</p>
  {/each}
</div>
-->

<div bind:this={chartCanvas} class="foo"></div>

<style>
.foo {
  width: 300px;
  height: 300px;
  display: block;
}
</style>