Skip to content
Snippets Groups Projects
user avatar
Elora-V authored
8118d89c
History

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>