palette = new ht.widget.Palette();//组件面板
toolbar = new ht.widget.Toolbar(toolbar_config);//工具条
g2d = new ht.graph.GraphView(dataModel);//拓扑组件  
treeView = new ht.widget.TreeView(dataModel);//树组件
propertyPane = new ht.widget.PropertyPane(dataModel);//属性面板
propertyView = propertyPane.getPropertyView();//属性组件
rulerFrame = new ht.widget.RulerFrame(g2d);//刻度尺

borderPane = new ht.widget.BorderPane();//边框面板
leftSplit = new ht.widget.SplitView(palette, borderPane, \'h\', 260);//分割组件，h表示左右分割，v表示上下分割
rightSplit = new ht.widget.SplitView(propertyPane, treeView, \'v\', 0.4);
mainSplit = new ht.widget.SplitView(leftSplit, rightSplit, \'h\', -260);                                              
borderPane.setTopView(toolbar);//设置边框面板的顶部组件为 toolbar
borderPane.setTopHeight(30);
borderPane.setCenterView(rulerFrame);//设置边框面板的中间组件为 rulerframe
mainSplit.addToDOM();//将 mainSplit 的底层 div 添加进 body 体中
dataModel.deserialize(datamodel_config);//反序列化 datamodel_config 的内容，将json内容转为拓扑图场景内容
g2d.fitContent(true);

palette_config = {
    scene: {
        name: \'电力\',
        items: [
            { name: \'文字\', image: \'__text__\', type: ht.Text },
            { name: \'箭头\', image: \'symbols/arrow.json\' },
            { name: \'地线\', image: \'symbols/earthwire.json\' }
        ]
    },
    food: {
        name: \'食品加工厂\',
        items: [
            { name: \'间歇式流化床处理器\', image: \'symbols/food/Batch fluid bed processor.json\'},
            { name: \'啤酒瓶\', image: \'symbols/food/Beer bottle.json\'},
            { name: \'台式均质机\', image: \'symbols/food/Batch fluid bed processor.json\'}
        ]
    },
    pumps: {
        name: \'污水处理\',
        items: [
            { name: \'3维泵\', image: \'symbols/pumps/3-D Pump.json\'},
            { name: \'18-惠勒卡车\', image: \'symbols/pumps/18-wheeler truck 1.json\'}
        ]
    }     
};

function initPalette(){//初始化组件面板中的内容
    for(var name in palette_config){//从 palette_config.js 文件中获取数据
        var info = palette_config[name];
        var group = new ht.Group();//组件面板用ht.Group展示分组，ht.Node展示按钮元素
        group.setName(info.name);
        group.setExpanded(false);//设置group默认关闭
        palette.dm().add(group);//将节点添加到 palette 的数据容器中
        
        info.items.forEach(function(item){
            var node = new ht.Node();//新建 ht.Node 类型节点
            node.setName(item.name);//设置名称 用于显示在 palette 面板中节点下方说明文字
            node.setImage(item.image);//设置节点在 palette 面板中的显示图片
 
            //文本类型
            if (item.type === ht.Text) {//通过 json 对象中设置的 type 信息来获取当前信息为何种类型的节点，不同类型的节点有些属性设置不同
                node.s({
                    \'text\': \'Text\',//文本类型的节点需要设置这个属性显示文本的内容
                    \'text.align\': \'center\',//文本对齐方式
                    \'text.vAlign\': \'middle\',//文本垂直对齐方式
                    \'text.font\': \'32px Arial\'//文本字体
                });
            }
            node.item = item;
            node.s({
                \'image.stretch\': item.stretch || \'centerUniform\',//设置节点显示图片为填充的方式，这样不同比例的图片也不会因为拉伸而导致变形
                \'draggable\': item.draggable === undefined ? true : item.draggable,//设置节点是否可被拖拽
            });                          
            group.addChild(node);//将节点设置为 group 组的孩子
            palette.dm().add(node);//节点同样也得添加到 palette 的数据容器中进行存储
        });
    }             
}

function initGraphView(){       
    if(ht.Default.isTouchable){//判断是否为触屏可Touch方式交互
        palette.handleDragAndDrop = function(e, state) {//重写此方法可以禁用HTML5原生的Drag和Drop事件并启用模拟的拖拽事件
            if(ht.Default.containedInView(e, g2d)){//判断交互事件所处位置是否在View组件之上
                if(state === \'between\'){
                    e.preventDefault();//取消事件的默认动作。
                }
                else if(state === \'end\'){//当state为end时，判断e是否在graphView的范围内，如果是，则创建Node
                    handleDrop(e);
                }
            }
        };
    }
    else{
        g2d.getView().addEventListener("dragover", function(e) {
            e.dataTransfer.dropEffect = "copy";
            e.preventDefault();
        });
        g2d.getView().addEventListener("drop", function(e) {
            handleDrop(e);
        });
    }
}
function handleDrop(e){//被拖拽的元素在目标元素上同时鼠标放开触发的事件
    e.preventDefault();
    var paletteNode = palette.dm().sm().ld();//获取 palette 面板上最后选中的节点                 
    if (paletteNode) {   
        var item = paletteNode.item,
            image = item.image;
            data = g2d.getDataAt(e, null, 5);//获取事件下的节点
 
        var node = new (item.type || ht.Node)();
        node.setImage(image); //设置节点图片
        node.setName(item.name);  //设置节点名称
        node.p(g2d.lp(e));//设置节点的坐标为拓扑中的逻辑坐标 lp函数为将事件坐标转换为拓扑中的逻辑坐标
        node.s(\'label\', \'\');//设置节点在 graphView 中底部不显示 setName 中的说明。因为 label 的优先级大于 name 
 
        if(data instanceof ht.Group){//如果拖拽到“组类型”的节点上，那么直接设置父亲孩子关系
            node.setParent(data);//设置节点的父亲
            data.setExpanded(true);//展开分组
        }else{
            node.setParent(g2d.getCurrentSubGraph());
        }       
        g2d.dm().add(node);
        g2d.sm().ss(node);                                                     
    }                    
}  

// 初始化树组件
function initTreeView() {
    // 重载树组件上的文本显示
    treeView.getLabel = function (data) {
        if (data instanceof ht.Text) {
            return data.s(\'text\');
        }
        else if (data instanceof ht.Shape) {
            return data.getName() || \'不规则图形\'
        }
        return data.getName() || \'节点\'
    };
    // 重载树组件上的图标显示
    var oldGetIconFunc = treeView.getIcon;
    treeView.getIcon = function (data) {
        if (data instanceof ht.Text) {
            return \'symbols/text.json\';
        }
        var img = data.getImage();
        return img ? img : oldGetIconFunc.apply(this, arguments);
    }
}

function initPropertyView(){//初始化属性组件               
    dataModel.sm().ms(function(e){//监听选中变化事件
        propertyView.setProperties(null);
        var data = dataModel.sm().ld();
        
        //针对不同类型的节点设置不同的属性内容
        if (data instanceof ht.Text) {//文本类型
            propertyView.addProperties(text_properties);
            return;
        }
        if(data instanceof ht.Data){// data 类型，所有的节点都基于这个类型
            propertyView.addProperties(data_properties);
        }                                        
        if(data instanceof ht.Node){// node 类型
            propertyView.addProperties(node_properties);
        }
        if(data instanceof ht.Group){//组类型
            propertyView.addProperties(group_properties);
        }
        if(data instanceof ht.Edge){//连线类型
            propertyView.addProperties(edge_properties);
        }     
    });                
}

{
    name: \'name\',//设置了 name 属性，如果没有设置 accessType 则默认通过 get/setName 来获取和设置 name 值
    displayName: \'名称\',//用于存取属性名的显示文本值，若为空则显示name属性值
    editable: true//设置该属性是否可编辑                       
}, 
{
    name: \'2d.editable\',//结合 accessType，则通过 node.s(\'2d.editable\') 获取和设置该属性
    accessType: \'style\',//操作存取属性类型
    displayName: \'可编辑\',//用于存取属性名的显示文本值，若为空则显示name属性值
    valueType: \'boolean\',//布尔类型，显示为勾选框
    editable: true//设置该属性是否可编辑  
}

var CreateEdgeInteractor = function (graphView, type) {
    CreateEdgeInteractor.superClass.constructor.call(this, graphView);   
    this._type = type;
};
ht.Default.def(CreateEdgeInteractor, DNDInteractor, {//自定义类，继承 DNDInteractor，此交互器有一些基本的交互功能
    handleWindowTouchEnd: function (e) {
        this.redraw();
        var isPoints = false;
        if(this._target){
            var edge = new ht.Edge(this._source, this._target);//创建一条连线，传入起始点和终点
            edge.s({
                \'edge.type\': this._type//设置连线类型 为传入的参数 type 类型 参考 HT for Web 样式手册
            });
            isPoints = this._type === \'points\';//如果没有设置则默认为 points 连线方式
            if(isPoints){
                edge.s({
                    \'edge.points\': [{//设置连线的点
                         x: (this._source.p().x + this._target.p().x)/2,
                         y: (this._source.p().y + this._target.p().y)/2
                    }]
                });                
            }
            edge.setParent(this._graphView.getCurrentSubGraph());//设置连线的父亲节点为当前子网
            this._graphView.getDataModel().add(edge); //将连线添加到拓扑图的数据容器中
            this._graphView.getSelectionModel().setSelection(edge);//设置选中该节点                        
        }
        this._graphView.removeTopPainter(this);//删除顶层Painter
        if(isPoints){
            resetDefault();//重置toolbar导航栏的状态
        }        
    }            
});