gdsx/WebRoot/Html5/Script/ControlFanContainer.js

@nodename@DataModel = new ht.DataModel();
globalVarNameList.push('@nodename@DataModel');
//@nodename@graphPane = new GraphPaneContainer(@nodename@DataModel,@x@,@y@,@width@,@height@,'@backgroundcolor@');
//document.body.appendChild(@nodename@graphPane.getView());
//@nodename@graphPane.getGraphView().setEditable(true);

@nodename@graphPane= new ht.graph.GraphView(@nodename@DataModel);
globalVarNameList.push('@nodename@graphPane');
jQuery.isArray(graphView.graphViewList) && graphView.graphViewList.push(@nodename@graphPane);
@nodename@graphPane.setScrollBarSize(8);
$(@nodename@graphPane.getView()).css({
    border: "1px solid @backgroundcolor@",
    boxSizing: 'content-box'
});

var @nodename@ = new ht.HtmlNode();
@nodename@.setScalable(false);
@nodename@.s({
    '2d.selectable': true,
    '2d.movable': false
});
@nodename@.setHtml(@nodename@graphPane);
@nodename@.setPosition({x:@x@*ratio.ratioX,y:@y@*ratio.ratioY});
@nodename@.setWidth(@width@*ratio.ratioX);
@nodename@.setHeight(@height@*ratio.ratioY);

@nodename@.setPadding(0);
dataModel.add(@nodename@);
globalAliasObj['@alias@'] = @nodename@;
@nodename@._allowChildScale = @allowChildScale@;
(function () {
    var s = @nodename@.s;
    @nodename@.s = function () {
        var args = Array.prototype.slice.call(arguments, 0);
        var paneView = @nodename@graphPane.getView();
        if (args[0] === '2d.visible' && args[1] !== undefined) {
            if (args[1] === false) {
                paneView.style.display = 'none';
            } else {
                paneView.style.display = 'block';
            }
        }
        return s.apply(@nodename@, args);
    }
})();

var @nodename@timer = setTimeout(function setFanContainer() {
    var graphPane = @nodename@graphPane,
        hNode = @nodename@,
        zoomValue = graphView.getZoom();

    function resetZoomAndPosition(zoom) {
        graphPane.setZoom(zoom);
        graphPane.tx(0);
        graphPane.ty(0);
    }
    function resizeOverEvent (e) {
        var blockList = graphPane.blockList;
        var bw = blockList[0].getWidth(),
            bh = blockList[0].getHeight(),
            halfBw = bw * 0.5,
            halfBh = bh * 0.5,
            verticalInterval = @verticalInterval@;

        if (graphPane.ty() !== 0) {
            graphPane.ty(0);
        }
        if (graphPane.tx() !== 0) {
            graphPane.tx(0);
        }
        
        function reArrange() {
            var w = $(graphPane.getView()).width(),
                h = $(graphPane.getView()).height();
            var block, index, count, hInterval, totalInterval, rowIndex = -1, px, py, ox, oy, fx, fy, fp;
            
            if (blockList.length === 1) {
                graphPane.adjustTranslateY = function () {
                    return 0;
                }
                graphPane.setScrollBarColor('rgba(122, 122, 122, 0)');
            } else {
                graphPane.adjustTranslateY = adjustTranslateY;
                graphPane.setScrollBarColor('rgba(122, 122, 122, 0.4)');
            }

            graphPane.totalWidth = w;
            count = Math.floor(w / bw) || 1;
            totalInterval = w % bw;
            totalInterval = totalInterval < 0 ? 0 : totalInterval;
            hInterval = Math.floor(totalInterval/count);
            for ( var i = 0, len = blockList.length; i < len; i++) {
                block = blockList[i];
                index = i % count;
                if (index === 0) {
                    rowIndex++;
                }
                px = index * (bw + hInterval) + halfBw;
                py = rowIndex * (bh + verticalInterval) + halfBh;
                fp = block.getPosition();
                fx = fp.x;
                fy = fp.y;
                ox = px - fx;
                oy = py - fy;
                // 如果容器内有多个图元，则位置加1,防止过于靠近上部我左侧而出现滚动条
                if (len > 1) {
                    ox += 1;
                    oy += 1;
                }
                if (hNode._allowChildScale) {  // 图元可缩放时按原来位置排列
                    block.setPosition(px, py);
                } else {
                    block.setPosition(fx + ox, fy + oy); // 图元不可绽放时按计算的位置排列
                }
            }
        }
        reArrange();
        setTimeout(reArrange, 50);
    }
    function adjustTranslateY (value) {
        var contentSize = graphPane.getContentRect();
        var min = graphPane.getHeight() - contentSize.height - 50;
        
        value = value > 0 ? 0 : value;
        value = value < min ? min : value;
        return value;
    }
    function adjustTranslateX (value) {
        return 0;
    }
    graphView.mp(function(e) {
        if (e.property !== 'zoom') {
            return ;
        }
        resetZoomAndPosition(e.newValue);
    })
    graphPane.getView().addEventListener('mouseover', function (e) {
        e.preventDefault();
        e.stopPropagation();
        graphView.setInteractors(null);
    });
    graphPane.getView().addEventListener('mouseleave', function (e) {
        e.preventDefault();
        e.stopPropagation();
        graphView.setEditable(false);
    })

    graphPane.setZoom(zoomValue);
    resetZoomAndPosition(zoomValue);

    //graphPane.setAutoHideScrollBar(false);
    graphPane.setAutoHideScrollBar(true);
    graphPane.setScrollBarSize(10);
    graphPane.setScrollBarColor('rgba(122, 122, 122, 0.4)');
    graphPane.setInteractors(null);

    graphPane.setInteractors([
        new ht.graph.ScrollBarInteractor(graphPane), 
        new ht.graph.DefaultInteractor(graphPane)
    ]);

    graphPane.adjustTranslateY = adjustTranslateY;
    graphPane.adjustTranslateX = adjustTranslateX;

    graphPane.handleScroll = function(data) {
        var t = graphPane.ty() - data.deltaY;
        var contentSize = graphPane.getContentRect();
        var min = contentSize.height - graphPane.getHeight() + 50;

        if (min <= 50) 
            return ;
        graphPane.setTranslate(0, t, true);
    }
    graphPane.setPannable(false);
    graphPane.setMovableFunc(function(data){return false});
    resizeOverEvent();
    $window.off('resizeOver', resizeOverEvent).on('resizeOver', resizeOverEvent);
    clearTimeout(@nodename@timer);
}, 80);