Twaver-HTML5基础学习(38)劈分面板SplitPane

SplitPane

劈分面板

是用于将一块面板劈分成两块的面板，两块面板所占的比例大小是由劈分条的位置来决定的，并且可以通过移动劈分条来动态改变这两块面板的大小。
劈分面板通过设置orientation来进行水平和垂直劈分

使用：

  var BottomPane = new twaver.controls.SplitPane(tree, overview, 'horizontal', 0.3);
  var pane = new twaver.controls.SplitPane(network, BottomPane, 'vertical', 0.6);

四个参数：

Constructor
twaver.controls.SplitPane ( [firstView] [nextView] [orientation] [position] ) twaver.controls.SplitPane
Parameters:
[firstView] Object optional
劈分面版的第一块面板，面板可以为DIV或ControlBase类型的对象[nextView] Object optional
劈分面版的第二块面板，面板可以为DIV或ControlBase类型的对象
[orientation] String optional
劈分的方向，可以为’horizontal’或 ‘vertical’
[position] Number optional
劈分的百分比

horizontal：横向分开两个pane
vertical：纵向分开两个pane;
最后一个参数代表第一个参数对象的大小比例，范围是0-1；

分割好之后，将最终的paneObj设置如下：

 var BottomPane = new twaver.controls.SplitPane(tree, overview, 'horizontal', 0.3);
 var pane = new twaver.controls.SplitPane(network, BottomPane, 'vertical', 0.6);
 var view = pane.getView();
 view.style.left = '0px';
 view.style.top = '0px';
 view.style.right = '0px';
 view.style.bottom = '0px';
 document.getElementById("testID").appendChild(view);

例子代码:

/*
 * @Descripttion: 
 * @version: 
 * @Author: ZhangJunQing
 * @Date: 2022-04-18 14:44:05
 * @LastEditors: ZhangJunQing
 * @LastEditTime: 2022-05-06 14:30:46
 */
import React, { useEffect, useState } from 'react'

const twaver = require('twaver');
// const demo = require('demo');
const Demo = () => {
    const [network, setnetwork] = useState({})
    const [src, setsrc] = useState("")
    const init = () => {
        var box = new twaver.ElementBox();
        var network = new twaver.vector.Network(box);
        setnetwork(network)
        network.invalidateElementUIs();
        var autoLayouter = new twaver.layout.AutoLayouter(box);
        network.setScrollBarVisible(false)
        var tree = new twaver.controls.Tree(box);
        var overview = new twaver.vector.Overview(network);
        var BottomPane = new twaver.controls.SplitPane(tree, overview, 'horizontal', 0.3);
        var pane = new twaver.controls.SplitPane(network, BottomPane, 'vertical', 0.6);
        var view = pane.getView();
        view.style.left = '0px';
        view.style.top = '0px';
        view.style.right = '0px';
        view.style.bottom = '0px';
        document.getElementById("testID").appendChild(view);
        var from1 = new twaver.Node();
        from1.setName('from1');
        box.add(from1);
        var to = new twaver.Node();
        to.setName('To');
        box.add(to);
        var from2 = new twaver.Node();
        from2.setName('from2');
        box.add(from2);
        var from3 = new twaver.Node();
        from3.setName('from3');
        box.add(from3);
        var from4 = new twaver.Node();
        from4.setName('from4');
        box.add(from4);
        var link = new twaver.Link(from1, to);
        var link2 = new twaver.Link(from2, to);
        var link3 = new twaver.Link(from3, to);
        var link4 = new twaver.Link(from4, to);
        link.setName('Link');
        link2.setName('link2');
        link3.setName('link3');
        link4.setName('link4');
        box.add(link);
        box.add(link2);
        box.add(link3);
        box.add(link4);
        autoLayouter.doLayout('symmetry', function () {
            network.zoomOverview(false);
        });

    }
    useEffect(init, [])


    return (
        <>
            <p style={{ fontSize: "20px", paddingLeft: "50px", poaddingTop: "50px" }}>tips: </p>
            <ul style={{ fontSize: "20px", paddingLeft: "50px" }}>
                <li>Overview</li>
            </ul>
            {/* 画布元素需要开启定位 不然生成的图元坐标点会偏移 */}
            <div id="testID" style={{ width: "800px", height: "800px", border: "1px solid #ccc", position: "relative", margin: "0 auto" }}></div>
        </>
    )
}
export default Demo

学习参考：TWaver Documents