rolens/frontend/src/components/objectviewer.svelte

<script>
  import Icon from './icon.svelte';
  import Modal from './modal.svelte';
  import ObjectTree from './objecttree.svelte';
  import { onDestroy } from 'svelte';
  import { deepClone } from '$lib/objects';

  export let data;

  let copySucceeded = false;
  let timeout;
  let _data;

  $: if (data) {
    _data = deepClone(data);
    for (const key of Object.keys(_data)) {
      if (typeof _data[key] === 'undefined') {
        delete _data[key];
      }
    }
  }

  async function copy() {
    await navigator.clipboard.writeText(JSON.stringify(_data));
    copySucceeded = true;
    timeout = setTimeout(() => copySucceeded = false, 1500);
  }

  onDestroy(() => clearTimeout(timeout));
</script>

{#if data}
  <Modal bind:show={data} title="Object viewer">
    <div class="objectviewer">
      <div class="buttons">
        <button class="btn" on:click={copy}>
          <Icon name={copySucceeded ? 'check' : 'clipboard'} />
        </button>
      </div>
      <div class="code">
        <ObjectTree data={_data} />
      </div>
    </div>
  </Modal>
{/if}

<style>
  .objectviewer {
    position: relative;
  }

  .objectviewer .code :global(span.root) {
    display: block;
  }

  .buttons {
    position: absolute;
    top: 0;
    right: 0;
  }
  .buttons button {
    margin-left: 1rem;
  }
</style>