<script lang="ts">
  import { onMount } from "svelte";
  import Canvas from "diagram-js/lib/core/Canvas";
  import ElementFactory from 'diagram-js/lib/core/ElementFactory';
  import Editor from './editor.ts'
  import 'diagram-js/assets/diagram-js.css';

  let container: HTMLDivElement | null = null;

  onMount(() => {
    if (container === null) return;
    const diagram = Editor({ container });
    const canvas = diagram.get<Canvas>("canvas");
    const elementFactory = diagram.get<ElementFactory>('elementFactory');
    var root = elementFactory.createRoot();
    canvas.setRootElement(root);
  });
</script>

<style>
  .container {
    width: 297mm;
    height: 210mm;
    border: 1px solid #aaa;
  }
</style>

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