Viz-layout-panel
The VizLayoutPanel
component provides a draggable and positionable panel to configure the viz layout.
Props
Props | Type | default | Description | Optional |
---|---|---|---|---|
draggable | boolean | false | Allows you to move the panel | Yes |
x | number | 0 | X position of the panel | Yes |
y | number | 0 | Y position of the panel | Yes |
Events
Name | Description | Output |
---|---|---|
@closePanel | Indicate to close the panel | - |
@applyLayout | Return the layout function to apply on a network with the correct parameters | (network:Network, networkStyle?:GraphStyleProperties):Promise<Network> |
For the arguments of the returned function of @applyLayout, see the repository of the layout.
Use the package in another project
npm i @metabohub/viz-layout-panel
If your project is not using vuetify, you need to import it in src/main.ts
:
import { createApp } from 'vue'
import App from './App.vue'
import { vuetify } from "@metabohub/viz-layout-panel";
createApp(App).use(vuetify).mount('#app')
Use the component :
<script setup lang="ts">
import { VizLayoutPanel } from "@metabohub/viz-layout-panel";
</script>
<template>
<VizLayoutPanel
:draggable="true"
x="150"
y="50"
@closePanel="yourFunctionToClosePanel"
@applyLayout="yourFunctionToApplyLayout"
/>
</template>
<script setup lang="ts">
const network:Network = { ... }; // see usage of viz-layout repository
const networkStyle :GraphStyleProperties = { ... }; // see usage of viz-layout repository
async function yourFunctionToApplyLayout(applyLayout:Function):void{
const newNetwork = await applyLayout(network,networkStyle);
const newNetworkWithoutStyle = await applyLayout(network);
}
</script>
<style>
@import '@metabohub/viz-layout-panel/dist/style.css';
</style>