PHP code example of modernik / mlm-tree-view

1. Go to this page and download the library: Download modernik/mlm-tree-view library. Choose the download type require.

2. Extract the ZIP file and open the index.php.

3. Add this code to the index.php.
    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

    

modernik / mlm-tree-view example snippets



use Modernik\MlmTreeView\GenericTreeNode;
use Modernik\MlmTreeView\Placement\CenteredTreeLayoutEngine;
use Modernik\MlmTreeView\Renderer\BasicHtmlTreeRenderer;

$ternary = new GenericTreeNode(1, 'ROOT', [
    new GenericTreeNode(2, 'A', [
        new GenericTreeNode(3, 'A1'),
        new GenericTreeNode(4, 'A2'),
        new GenericTreeNode(5, 'A3'),
    ]),
    new GenericTreeNode(6, 'B', [
        new GenericTreeNode(7, 'B1'),
        new GenericTreeNode(8, 'B2'),
        new GenericTreeNode(9, 'B3'),
    ]),
    new GenericTreeNode(10, 'C', [
        new GenericTreeNode(11, 'C1'),
        new GenericTreeNode(12, 'C2'),
        new GenericTreeNode(13, 'C3'),
    ])
]);

// Création du renderer
$layout = new CenteredTreeLayoutEngine();
$renderer = new BasicHtmlTreeRenderer($layout, true);


<h1>Réseau binaire</h1>
<?= $renderer->render($ternary) 

 public function __construct(
        private int $nodeWidth = 120,
        private int $nodeHeight = 60,
        private int $spaceX = 60,
        private int $spaceY = 100,
        private string $orientation = self::ORIENTATION_HORIZONTAL
    ) {
    }

class MyCustomTreeLayoutEngine implements TreeLayoutEngine
{

    /**
     * @inheritDoc
     */
    public function layout(TreeNode $root): PositionedTreeNode 
    {
        //Calcule et retourne un arbre positionné à partir d'un arbre logique.
    }


    /**
     * @inheritDoc
     */
    public function getBound() : Bound 
    {
        // calcul de la taille de l'espace de travail
    }

    /**
     * @inheritDoc
     */
    public function getOrientation() : string
    {
        //Renvoie la configuration de l'orientation du layout
    }
}


public function __construct(TreeLayoutEngine $layoutEngine, bool $withStyle = true)
{
}

public function __construct( TreeLayoutEngine $layoutEngine, LinkGenerator $linkGenerator, bool $withStyle = true )
{
}
bash
php -S localhost:8989 -t ./web/
css
.mlm-tree-view-container {
/*  personnalisation du conteneur principale  */
}

.mlm-tree-node {
/*  Personnalisation du conteneur d'un noeud  */
}

.mlm-tree-node-content {
/*  Personnalisation du conteneur des contenus d'un noeud  */
}

.mlm-tree-view-container path {
/*  Personnalisation des paths qui lie les noeuds de l'arbre  */
}

/* Animation */
@keyframes fadeInUp {
    /* Animation des noeuds de l'arbre */
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes drawPath {
    /* Animation paths qui lie les noeuds de l'arbre */
    to {
        stroke-dashoffset: 0;
    }
}