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-Policymust allow data: connections and Wasm to be evaluated, for instance:

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

• main.ts:

import{createApp}from'vue';importAppfrom'./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">importtype { CellDLEditorCommand, EditorData } from'@celldl/editor';import'@celldl/editor/style.css';import*asvueusecorefrom'@vueuse/core';import*asvuefrom'vue';importCellDLEditorfrom'@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).});asyncfunction 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>