@celldl/editor

The CellDL Editor Vue Component

This package is a Vue 3 component for the CellDL Editor, built with the Composition API.

Usage

The component comes with the following props:

TODO export interface CellDLEditorProps { editorCommand?: CellDLEditorCommand, theme?: Theme }

export type EditorViewCommand = { command: 'view' options: ViewState }

and emits the following actions:

const emit = defineEmits<{ 'editor-data': [data: EditorData], 'error': [msg: string] }>()

• index.html:

The Content-Security-Policy must allow data: connections and Wasm to be evaluated, for instance:

    <meta
      http-equiv="Content-Security-Policy"
      content="connect-src * data:; script-src 'self' 'wasm-unsafe-eval'" />

• main.ts:

import { createApp } from 'vue';

import App from './App.vue';

createApp(App).mount('#app');

The Vue component gives access to all of the CellDL Editor's features

• App.vue:

<template>
  <CellDLEditor
    :editorCommand="editorCommand"
    :theme="editorTheme"
    @editorData="onEditorData"
    @error="onError" />
</template>

<script setup lang="ts">
import type { CellDLEditorCommand, EditorData } from '@celldl/editor';
import '@celldl/editor/style.css';
import * as vueusecore from '@vueuse/core';

import * as vue from 'vue';

import CellDLEditor from '@celldl/editor'

const editorCommand = vue.ref<CellDLEditorCommand>();
const theme = vue.ref<Theme>('light');

vueusecore.useEventListener(document, 'file-edited', (_: Event) => {
  // The current diagram has has been modified, so update any local state (e.g., add a modified indicator to the
  // diagram's title).
});

async function onEditorData(data: EditorData) {
  if (data.kind === 'export') {
    // const uri = 'https://example.org/some_uri_to_identify_the_celldl_source_';
    // const cellmlObject = celldl2cellml(uri, data.data);
    // if (cellmlObject.cellml) {
    //   // Save `cellmlObject.cellml`.
    // } else if (cellmlObject.issues) {
    //   window.alert(cellmlObject.issues.join('\n'));
    // }
  } else {
    // Process `data.data`.
  }
}

function onError(msg: string) {
  window.alert(msg);
}

/*
The editor is initialised with a blank window.

1. To load a CellDL diagram set:

  celldlEditorCommand.value = {
    command: 'file',
    options: {
      action: 'open',
      data: celldlSource,
      name: filename
    }
  }

2. To get serialised CellDL from the editing window set:

  celldlEditorCommand.value = {
    command: 'file',
    options: {
      action: 'data',
      kind: 'export'
    }
  }

with `kind` set as appropriate. This will result in an `editorData` event, to be handled as above.

3. To clear the editing window set:

  celldlEditorCommand.value = {
    command: 'file',
    options: {
      action: 'close'
    }
  }
*/
</script>