更多方案  |  文档  |  博客  |  支持库  |  论坛  |  关于   |  EN
利用Layer优化Group显示
作者:jeff  |  日期: 2015-06-09  |  人气: 2,982  |  分类: TWaver HTML5

TWaver之前的Blog有设计到相关的文章,可以参考:
利用Layer优化Group显示
但之前是Flex版本的,现在HTML5会遇到同样的问题,在此以demo的形式展现。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test Zoom</title>
    <script src="./twaver.js"></script>
    <script>
        var box = new twaver.ElementBox();
        var network = new twaver.vector.Network(box);

        function init() {
            initNetwork();
            registerImage();
            initDataBox();
        }

        function initNetwork() {
            var view = network.getView();
            document.body.appendChild(view);
            network.adjustBounds({x: 0, y: 0, width: 1300, height: 600});
            network.addInteractionListener(function(e){
                console.log(e.kind);
                if(e.kind === 'expandGroup' || e.kind === 'clickElement' || e.kind === 'liveMoveEnd' || e.kind === 'lazyMoveEnd'){
                    adjustIndex();
                }
            }); 
        }

        function registerImage(){

        }

        function initDataBox() {
            var from = new twaver.Node();
            from.setName("From");
            from.setLocation(100, 100);
            box.add(from);

            var to = new twaver.Node();
            to.setName("To");
            to.setLocation(400, 400);
            box.add(to);

            var group = new twaver.Group();
            group.setName("Group");
            group.setStyle('whole.alpha',1);
            group.addChild(from);
            group.addChild(to);
            group.addChild(link);
            group.setExpanded(true);
            box.add(group);

            var node1 = new twaver.Node();
            node1.setName("Node1");
            node1.setLocation(150, 200);
            box.add(node1);

            var node2 = new twaver.Node();
            node2.setName("Node2");
            node2.setLocation(300, 390);
            box.add(node2);
            
            var link = new twaver.Link(from, to);
            link.setName("Link from From to To");
            box.add(link);

            link = new twaver.Link(from, node2);
            link.setName("Link from From to Node2");
            box.add(link);

            link = new twaver.Link(node1, node2);
            link.setName("Link from Node1 to Node2");
            box.add(link);

            // var oldIndex = box.getDatas().remove(link);
            // var newIndex = 0;
            // if(group !== null){
            //     newIndex = box.getDatas().indexOf(group);
            // }
            // box.getDatas().add(link, newIndex);
        }

        function adjustIndex(){
            box.getSelectionModel().getSelection().forEach(function(data){
                if(data instanceof twaver.Group){
                    if(!data.isExpanded()){
                        return;
                    }

                    // var elements = network.getElementsAtRect(network.getElementUI(data).getViewRect());
                    var elements = box.getDatas();

                    elements.forEach(function(element){
                        if(!(element instanceof twaver.Link) && !element.isDescendantOf(data) && element !== data){
                            sendToBottom(element, data);
                        }
                    });

                    elements.forEach(function(element){
                        if(element instanceof twaver.Link){
                            if(element.getFromNode().isDescendantOf(data) && element.getToNode().isDescendantOf(data)){
                                return;
                            }
                            
                            if((!element.getFromNode().isDescendantOf(data) && 
                                !element.getToNode().isDescendantOf(data))
                                || (element.getFromNode().isDescendantOf(data) ||
                                    element.getToNode().isDescendantOf(data)) ){
                                sendToBottom(element,data);
                            }
                        }
                    });
                }
            });
}

function sendToBottom(element, refElement){
    if(element == refElement){
        return;
    }
    if(!box.contains(element)){
        return;
    }
    if(refElement !== null && !box.contains(refElement)){
        return;
    }

    var oldIndex = box.getDatas().remove(element);
    var newIndex = 0;
    if(refElement !== null){
        newIndex = box.getDatas().indexOf(refElement);
    }
    box.getDatas().add(element, newIndex);
    if(oldIndex != newIndex){
        box.fireIndexChange(element, oldIndex, newIndex);
        if(element.getParent() !== null ){
            sendToBottom(element.getParent(), element);
        }
    }
}
</script>
</head>
<body onload="init()">
</body>
</html>

group_layer


——TWaver开发组

返回支持库