Setup
View Model
There is one key component you need when using the visual editor: the view model. You can create a new view model by using the useBaklava function. The view model has the following type:
interface IBaklavaViewModel {
editor: Editor;
/** Currently displayed graph */
displayedGraph: Graph;
/** True if the currently displayed graph is a subgraph, false if it is the root graph */
isSubgraph: Readonly<boolean>;
settings: IViewSettings;
commandHandler: ICommandHandler;
history: IHistory;
clipboard: IClipboard;
hooks: {
/** Called whenever a node is rendered */
renderNode: SequentialHook<{ node: AbstractNode; el: HTMLElement }, null>;
/** Called whenever an interface is rendered */
renderInterface: SequentialHook<{ intf: NodeInterface<any>; el: HTMLElement }, null>;
};
switchGraph: (newGraph: Graph | GraphTemplate) => void;
}The view model is reactive so it can be used in watchers, computed properties, etc.
WARNING
The useBaklava function accepts an existing editor instance as parameter. However, because of the way Vue's reactivity system works you'll need to use the viewModel.editor property afterwards instead of your own reference to the editor.
Editor Component
Now you can pass the view model to the editor component:
<template>
<!--
By default, the editor completely fills its parent HTML element.
If you directly use the editor in the <body> element, make sure to use
a wrapper <div> with specified width and height properties:
<div style="width: 90vw; height: 90vh">
<BaklavaEditor :view-model="baklava" />
</div>
-->
<BaklavaEditor :view-model="baklava" />
</template>
<script setup lang="ts">
import { BaklavaEditor, useBaklava } from "@baklavajs/renderer-vue";
import "@baklavajs/themes/dist/syrup-dark.css";
const baklava = useBaklava();Settings
Settings can be changed by accessing the settings property of the view model right after creating it or reactively at any moment later.
Properties
| name | data type | default |
|---|---|---|
| useStraightConnections | boolean | false |
| enableMinimap | boolean | false |
| toolbar.enabled | boolean | true |
| palette.enabled | boolean | true |
| background.gridSize | number | 100 |
| background.gridDivision | number | 5 |
| background.subGridVisibleThreshold | number | 0.6 |
| sidebar.enabled | boolean | true |
| sidebar.width | number | 5 |
| sidebar.resizable | boolean | true |
| displayValueOnHover | boolean | false |
| nodes.defaultWidth | boolean | 200 |
| nodes.maxWidth | number | 320 |
| nodes.minWidth | boolean | 150 |
| nodes.resizable | boolean | false |
| nodes.reverseY | boolean | false |
| contextMenu.enabled | boolean | true |
| contextMenu.additionalItems | ContextMenuItem[] | [] |
| zoomToFit.paddingLeft | number | 300 |
| zoomToFit.paddingRight | number | 50 |
| zoomToFit.paddingTop | number | 110 |
| zoomToFit.paddingBottom | number | 50 |
For example, to enable displaying the value of a node interface on hover:
const baklava = useBaklava();
baklava.settings.displayValueOnHover = true;