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-panelIf 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>