<!DOCTYPE html>
<html>
<head>
<title>HT拓扑编辑器</title>
<meta charset="UTF-8">
<style>
html, body {
padding: 0;
margin: 0;
}
.main {
margin: 0;
padding: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
<script src="lib/ht.js"></script>
<script src="lib/ht-cssanimation.js"></script>
<script src="lib/ht-palette.js"></script>
<script src="lib/ht-xeditinteractor.js"></script>
<script src="lib/ht-contextmenu.js"></script>
<script src="lib/ht-form.js"></script>
<script src="lib/ht-rulerframe.js"></script>
<script src="lib/ht-propertypane.js"></script>
<script src="lib/ht-edgetype.js"></script>
<script src="Text.js"></script>
<script src="Switch.js"></script>
<script src="DNDInteractor.js"></script>
<script src="ParentInteractor.js"></script>
<script src="HostInteractor.js"></script>
<script src="IconInteractor.js"></script>
<script src="CreateEdgeInteractor.js"></script>
<script src="CreateShapeInteractor.js"></script>
<script src="predefine-config.js"></script>
<script src="palette-config.js"></script>
<script src="toolbar-config.js"></script>
<script src="contextmenu-config.js"></script>
<script src="properties-config.js"></script>
<script src="datamodel-config.js"></script>
<script type="text/javascript">
function init() {
dataModel = new ht.DataModel();
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);
rightSplit = new ht.widget.SplitView(treeView, propertyPane, 'v', 0.3);
mainSplit = new ht.widget.SplitView(leftSplit, rightSplit, 'h', -260);
toolbar.enableToolTip();
borderPane.setTopView(toolbar);
borderPane.setCenterView(rulerFrame);
initPalette();
initGraphView();
initContextMenu();
initTreeView();
initPropertyView();
resetDefault();
view = mainSplit.getView();
view.className = 'main';
document.body.appendChild(view);
window.addEventListener('resize', function (e) {
mainSplit.invalidate();
}, false);
dataModel.deserialize(datamodel_config);
}
function resetDefault(){
if(!defaultItem.selected){
defaultItem.selected = true;
g2d.setEditable(true);
toolbar.iv();
palette.sm().cs();
}
}
function initPalette(){
for(var name in palette_config){
var info = palette_config[name];
var group = new ht.Group();
group.setName(info.name);
group.setExpanded(true);
palette.dm().add(group);
info.items.forEach(function(item){
var node = new ht.Node();
node.setName(item.name);
node.setImage(item.image);
node.item = item;
node.s({
'image.stretch': item.stretch || 'centerUniform',
'draggable': item.draggable === undefined ? true : item.draggable
});
group.addChild(node);
palette.dm().add(node);
});
}
palette.sm().ms(function(){
var paletteNode = palette.dm().sm().ld();
if(paletteNode){
var item = paletteNode.item;
if(item.edgeType !== undefined){
defaultItem.selected = false;
toolbar.iv();
g2d.setInteractors([
new CreateEdgeInteractor(g2d, item.edgeType),
new ht.graph.DefaultInteractor(g2d)
]);
return;
}
if(item.shapeType !== undefined){
defaultItem.selected = false;
toolbar.iv();
g2d.setInteractors([
new CreateShapeInteractor(g2d, item.shapeType),
new ht.graph.DefaultInteractor(g2d)
]);
return;
}
if(item.operation === 'parent'){
defaultItem.selected = false;
toolbar.iv();
g2d.setInteractors([
new ParentInteractor(g2d),
new ht.graph.DefaultInteractor(g2d)
]);
return;
}
if(item.operation === 'host'){
defaultItem.selected = false;
toolbar.iv();
g2d.setInteractors([
new HostInteractor(g2d),
new ht.graph.DefaultInteractor(g2d),
]);
return;
}
if(item.operation === 'icon'){
defaultItem.selected = false;
toolbar.iv();
g2d.setInteractors([
new IconInteractor(g2d),
new ht.graph.DefaultInteractor(g2d)
]);
return;
}
}
});
}
function initGraphView(){
g2d.enableToolTip();
g2d.getToolTip = function(e){
var data = this.getDataAt(e);
if(data){
var info = this.getIconInfoAt(e);
if(info){
return info.name;
}
return data.getToolTip();
}
return null;
};
纯HTML5拓扑图编辑器源代码
5星 · 超过95%的资源 需积分: 47 191 浏览量
2015-04-07
23:39:38
上传
评论 67
收藏 295KB ZIP 举报 
ht-2d-editor.zip （46个子文件） 
ht-2d-editor 
ParentInteractor.js 624B properties-config.js 10KB CreateEdgeInteractor.js 1KB Switch.js 1KB .DS_Store 6KB datamodel-config.js 6KB palette-config.js 3KB CreateShapeInteractor.js 4KB images .DS_Store 6KB node 
phone.png 10KB dns.png 2KB workgroup.png 4KB router.png 7KB toolbar 
maximize.gif 82B print.gif 612B zoomIn.gif 586B default.gif 154B zoomOut.gif 586B edge ortho.png 7KB flex.png 8KB straight.png 7KB points.png 8KB icon refresh.gif 922B .DS_Store 6KB unknown.gif 928B setting.gif 971B delete.gif 951B check.gif 882B lib ht-propertypane.js 5KB ht-palette.js 12KB .DS_Store 6KB ht-rulerframe.js 9KB ht.js 372KB ht-contextmenu.js 15KB ht-edgetype.js 13KB ht-xeditinteractor.js 61KB ht-cssanimation.js 5KB ht-form.js 57KB predefine-config.js 6KB contextmenu-config.js 874B Text.js 493B IconInteractor.js 2KB
HT-2D-Editor.html 17KB HostInteractor.js 520B DNDInteractor.js 3KB toolbar-config.js 2KB
- 1
- 2
- 3
- 4
- 5
- 6
前往页