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);//删除顶层Painterif(isPoints){resetDefault();//重置toolbar导航栏的状态
        }        }
});