mind map 思维导图
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>Mind Map</title>
<meta name="description"
content="A mind map editor, showing how subtrees can be moved, copied, deleted, and laid out." />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Copyright - by Northwoods Software Corporation. --> <script src="https://unpkg.com/gojs/release/go-debug.js"></script>
<script id="code">
function init() {
if (window.goSamples) goSamples(); // 这些样本的初始化-您无需调用此
var $ = go.GraphObject.make; myDiagram =
$(go.Diagram, "myDiagramDiv", {
"maxSelectionCount": , // 用户一次只能选择一个节点
"initialContentAlignment": go.Spot.Center, // 画布内居中显示
"allowZoom": true, //画布是否可以缩放
// 当用户拖动节点时，还要从该节点开始移动/复制/删除整个子树
"commandHandler.copiesTree": true,
"commandHandler.copiesParentKey": true,
"commandHandler.deletesTree": true,
"draggingTool.dragsTree": true, //拖拽？
"undoManager.isEnabled": false, // 支持 Ctrl-Z 和 Ctrl-Y 操作
//禁止横竖拖动和鼠标滚动，流程图整体的拖动
"allowHorizontalScroll": false,
"allowVerticalScroll": false,
"isReadOnly": true, // 只读
}); // 当文档被修改时，在标题中添加“*”并启用“Save”按钮
myDiagram.addDiagramListener("Modified", function (e) {
var button = document.getElementById("SaveButton");
if (button) button.disabled = !myDiagram.isModified;
var idx = document.title.indexOf("*");
if (myDiagram.isModified) {
if (idx < ) document.title += "*";
} else {
if (idx >= ) document.title = document.title.substr(, idx);
}
}); // 一个节点由一些文本和一条线形状组成
myDiagram.nodeTemplate =
$(go.Node, "Vertical", {
selectionObjectName: "TEXT",
click: function (e, obj) {
myDiagram.selected = true;
},
// 选择节点变化监听
selectionChanged: function (part) {
myDiagram.selected = false;;
} },
$(go.TextBlock, {
name: "TEXT",
minSize: new go.Size(, ),
editable: false //是否允许双击编辑
},
// 不仅要记住文本字符串，还要记住节点数据中的比例和字体
new go.Binding("text", "text").makeTwoWay(),
new go.Binding("scale", "scale").makeTwoWay(),
new go.Binding("font", "font").makeTwoWay()),
$(go.Shape, "LineH", {
stretch: go.GraphObject.Horizontal,
strokeWidth: ,
height: ,
// 这条线的形状是端口——连接的是什么
portId: "",
fromSpot: go.Spot.LeftRightSides,
toSpot: go.Spot.LeftRightSides
},
new go.Binding("stroke", "brush"),
// 确保链接来自正确的方向，并适当地发送出去
new go.Binding("fromSpot", "dir", function (d) {
return spotConverter(d, true);
}),
new go.Binding("toSpot", "dir", function (d) {
return spotConverter(d, false);
})),
// 记住节点数据中每个节点的位置
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
// 确保文本按照期望的方向“增长”
new go.Binding("locationSpot", "dir", function (d) {
return spotConverter(d, false);
})
); // 选中的节点显示用于添加子节点的按钮
myDiagram.nodeTemplate.selectionAdornmentTemplate =
$(go.Adornment, "Spot",
$(go.Panel, "Auto",
// 此装饰在选定节点周围具有矩形蓝色形状
$(go.Shape, {
fill: null,
stroke: "dodgerblue",
strokeWidth:
}),
$(go.Placeholder, {
margin: new go.Margin(, , , )
})
),
// 所选节点右侧的删除按钮
$("Button", {
alignment: go.Spot.Right,
alignmentFocus: go.Spot.Left,
click: function (e, obj) {
e.diagram.commandHandler.deleteSelection();
layoutAll(); // 删除后整理布局
}
// 定义装饰中此按钮的单击行为
},
$(go.TextBlock, "-", // 按钮的内容
{
font: "bold 8pt sans-serif"
})
),
// 所选节点右侧的新增按钮
$("Button", {
alignment: go.Spot.Right,
alignmentFocus: go.Spot.Right,
click: addNodeAndLink // 定义装饰中此按钮的单击行为
},
$(go.TextBlock, "+", // 按钮的内容
{
font: "bold 8pt sans-serif"
})
)
); // 上下文菜单允许用户更改字体大小和粗细，
// 并从该节点开始执行有限的树形布局
myDiagram.nodeTemplate.contextMenu =
$("ContextMenu",
$("ContextMenuButton",
$(go.TextBlock, "Bigger"), {
click: function (e, obj) {
changeTextSize(obj, 1.1);
layoutAll();
}
}),
$("ContextMenuButton",
$(go.TextBlock, "Smaller"), {
click: function (e, obj) {
changeTextSize(obj, / 1.1);
layoutAll();
}
}),
$("ContextMenuButton",
$(go.TextBlock, "Bold/Normal"), {
click: function (e, obj) {
toggleTextWeight(obj);
layoutAll();
}
}),
$("ContextMenuButton",
$(go.TextBlock, "Copy"), {
click: function (e, obj) {
e.diagram.commandHandler.copySelection();
}
}),
$("ContextMenuButton",
$(go.TextBlock, "Delete"), {
click: function (e, obj) {
e.diagram.commandHandler.deleteSelection();
}
}),
$("ContextMenuButton",
$(go.TextBlock, "Undo"), {
click: function (e, obj) {
e.diagram.commandHandler.undo();
}
}),
$("ContextMenuButton",
$(go.TextBlock, "Redo"), {
click: function (e, obj) {
e.diagram.commandHandler.redo();
}
}),
$("ContextMenuButton",
$(go.TextBlock, "Layout"), {
click: function (e, obj) {
var adorn = obj.part;
adorn.diagram.startTransaction("Subtree Layout");
layoutTree(adorn.adornedPart);
adorn.diagram.commitTransaction("Subtree Layout");
}
}
)
); // 连接线颜色
myDiagram.linkTemplate =
$(go.Link, {
curve: go.Link.Bezier,
fromShortLength: -,
toShortLength: -,
selectable: false
},
$(go.Shape, {
strokeWidth:
},
new go.Binding("stroke", "toNode", function (n) {
if (n.data.brush) return n.data.brush;
return "black";
}).ofObject())
); // 该图的上下文菜单仅显示常规功能的命令
myDiagram.contextMenu =
$("ContextMenu",
$("ContextMenuButton",
$(go.TextBlock, "Paste"), {
click: function (e, obj) {
e.diagram.commandHandler.pasteSelection(e.diagram.toolManager.contextMenuTool
.mouseDownPoint);
}
},
new go.Binding("visible", "", function (o) {
return o.diagram && o.diagram.commandHandler.canPasteSelection(o.diagram.toolManager
.contextMenuTool.mouseDownPoint);
}).ofObject()),
$("ContextMenuButton",
$(go.TextBlock, "Undo"), {
click: function (e, obj) {
e.diagram.commandHandler.undo();
}
},
new go.Binding("visible", "", function (o) {
return o.diagram && o.diagram.commandHandler.canUndo();
}).ofObject()),
$("ContextMenuButton",
$(go.TextBlock, "Redo"), {
click: function (e, obj) {
e.diagram.commandHandler.redo();
}
},
new go.Binding("visible", "", function (o) {
return o.diagram && o.diagram.commandHandler.canRedo();
}).ofObject()),
$("ContextMenuButton",
$(go.TextBlock, "Save"), {
click: function (e, obj) {
save();
}
}),
$("ContextMenuButton",
$(go.TextBlock, "Load"), {
click: function (e, obj) {
load();
}
})
); myDiagram.addDiagramListener("SelectionMoved", function (e) {
var rootX = myDiagram.findNodeForKey().location.x;
myDiagram.selection.each(function (node) {
if (node.data.parent !== ) return; // 只考虑连接到根的节点
var nodeX = node.location.x;
if (rootX < nodeX && node.data.dir !== "right") {
updateNodeDirection(node, "right");
} else if (rootX > nodeX && node.data.dir !== "left") {
updateNodeDirection(node, "left");
}
layoutTree(node);
});
}); //监听节点选择变化
//myDiagram.addDiagramListener("ChangedSelection", function (e) {
//myDiagram.selected = false;
//}); //监听单击
myDiagram.addDiagramListener("ObjectSingleClicked", function (e) {
//如果是选中后单击
if (myDiagram.selected) {
console.log('选中后单击，表示编辑，需打开浮窗编辑');
}
}); //背景点击一次
myDiagram.addDiagramListener("BackgroundSingleClicked", function (e) {
console.log("点击背景");
//$scope.nodeFocusOutInner();
}); // 使用“ mySavedModel”文本区域中保存的JSON格式数据读取预定义的图形
load();
} function spotConverter(dir, from) {
if (dir === "left") {
return (from ? go.Spot.Left : go.Spot.Right);
} else {
return (from ? go.Spot.Right : go.Spot.Left);
}
} function changeTextSize(obj, factor) {
var adorn = obj.part;
adorn.diagram.startTransaction("Change Text Size");
var node = adorn.adornedPart;
var tb = node.findObject("TEXT");
tb.scale *= factor;
adorn.diagram.commitTransaction("Change Text Size");
} function toggleTextWeight(obj) {
var adorn = obj.part;
adorn.diagram.startTransaction("Change Text Weight");
var node = adorn.adornedPart;
var tb = node.findObject("TEXT");
// 假定“粗体”在字体说明符的开头
var idx = tb.font.indexOf("bold");
if (idx < ) {
tb.font = "bold " + tb.font;
} else {
tb.font = tb.font.substr(idx + );
}
adorn.diagram.commitTransaction("Change Text Weight");
} function updateNodeDirection(node, dir) {
myDiagram.model.setDataProperty(node.data, "dir", dir);
// 递归更新子节点的方向
var chl = node
.findTreeChildrenNodes(); // 为我们提供了与此特定节点相关的子节点的迭代器
while (chl.next()) {
updateNodeDirection(chl.value, dir);
}
} function addNodeAndLink(e, obj) {
var adorn = obj.part;
var diagram = adorn.diagram;
diagram.startTransaction("Add Node");
var oldnode = adorn.adornedPart;
var olddata = oldnode.data;
// 将笔刷和方向复制到新的节点数据
var newdata = {
text: "idea",
brush: olddata.brush,
dir: olddata.dir,
parent: olddata.key
};
diagram.model.addNodeData(newdata);
layoutTree(oldnode);
diagram.commitTransaction("Add Node"); // 如果新节点不在屏幕上，请滚动图表以显示新节点
var newnode = diagram.findNodeForData(newdata);
if (newnode !== null) diagram.scrollToRect(newnode.actualBounds);
layoutAll(); //添加完毕 整理布局
} function layoutTree(node) {
if (node.data.key === ) { // 添加到根？
layoutAll(); // 整理布局
} else { // 否则，仅布局从此父节点开始的子树
var parts = node.findTreeParts();
layoutAngle(parts, node.data.dir === "left" ? : );
}
} function layoutAngle(parts, angle) {
var layout = go.GraphObject.make(go.TreeLayout, {
angle: angle,
arrangement: go.TreeLayout.ArrangementFixedRoots,
nodeSpacing: ,
layerSpacing: ,
setsPortSpot: false, // 不要设置端口点，因为我们正在使用spotConverter函数进行管理
setsChildPortSpot: false
});
layout.doLayout(parts);
} function layoutAll() {
var root = myDiagram.findNodeForKey();
if (root === null) return;
myDiagram.startTransaction("Layout");
// 将节点和链接分为两个集合
var rightward = new go.Set( /*go.Part*/ );
var leftward = new go.Set( /*go.Part*/ );
root.findLinksConnected().each(function (link) {
var child = link.toNode;
if (child.data.dir === "left") {
leftward.add(root); // 根节点在两个集合中
leftward.add(link);
leftward.addAll(child.findTreeParts());
} else {
rightward.add(root); // 根节点在两个集合中
rightward.add(link);
rightward.addAll(child.findTreeParts());
}
});
// 进行一个布局，然后进行另一个布局而不移动共享的根节点
layoutAngle(rightward, );
layoutAngle(leftward, );
myDiagram.commitTransaction("Layout");
} // 以JSON格式显示图的模型
function save() {
document.getElementById("mySavedModel").value = myDiagram.model.toJson();
myDiagram.isModified = false;
} function load() {
var data = {
"class": "TreeModel",
"nodeDataArray": []
};
//myDiagram.model = go.Model.fromJson(data);
myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);
}
</script>
</head> <body onload="init()">
<div id="sample">
<div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:300px;"></div>
<p>
A mind map is a kind of spider diagram that organizes information around a central concept, with connecting
branches.
</p>
<p>
The layout is controlled by moving the nodes closest to the tree's root node.
When one of these nodes is moved horizontally to the other side of the root,
all of its children will be sent to <a>Layout.doLayout</a> with a new direction,
causing text to always be moved outwards from the root. The <b>spotConverter</b> function is used to manage
<a>GraphObject.fromSpot</a> and <a>GraphObject.toSpot</a> for nodes manually, so the
<a>TreeLayout.setsPortSpot</a> and <a>TreeLayout.setsChildPortSpot</a>
properties are set to false so that laying out the diagram will not overwrite the values.
</p>
<p>
When a node is deleted the <a>CommandHandler.deletesTree</a> property ensures that
all of its children are deleted with it. When a node is dragged the <a>DraggingTool.dragsTree</a>
property ensures that all its children are dragged with it.
Both of these are set during the the Diagram's initalization.
</p>
<p>
Node templates also have a <a>Part.selectionAdornmentTemplate</a> defined to allow for new nodes to be
created and a <a>GraphObject.contextMenu</a> with additional commands.
</p> <button id="SaveButton" onclick="save()">Save</button>
<button onclick="load()">Load</button>
<button onclick="layoutAll()">Layout</button>
Diagram Model saved in JSON format:
<br />
<textarea id="mySavedModel" style="width:100%;height:400px">
{ "class": "TreeModel",
"nodeDataArray": [
{"key":, "text":"Mind Map", "loc":"-400 9"},
{"key":, "parent":, "text":"Getting more time", "brush":"skyblue", "dir":"right", "loc":"-315.47607421875 -14.134118652343766"},
{"key":, "parent":, "text":"Wake up early", "brush":"skyblue", "dir":"right", "loc":"-180.62158203125 -41.64627685546877"},
{"key":, "parent":, "text":"Delegate", "brush":"skyblue", "dir":"right", "loc":"-180.62158203125 -14.13411865234377"},
{"key":, "parent":, "text":"Simplify", "brush":"skyblue", "dir":"right", "loc":"-180.62158203125 13.378039550781233"},
{"key":, "parent":, "text":"More effective use", "brush":"darkseagreen", "dir":"right", "loc":"-315.47607421875 54.64627685546874"},
{"key":, "parent":, "text":"Planning", "brush":"darkseagreen", "dir":"right", "loc":"-180.28515625 40.890197753906236"},
{"key":, "parent":, "text":"Priorities", "brush":"darkseagreen", "dir":"right", "loc":"-105.87939453125 27.134118652343737"},
{"key":, "parent":, "text":"Ways to focus", "brush":"darkseagreen", "dir":"right", "loc":"-105.87939453125 54.646276855468734"},
{"key":, "parent":, "text":"Goals", "brush":"darkseagreen", "dir":"right", "loc":"-180.28515625 68.40235595703125"}
]}
</textarea>
</div>
</body> </html>
mind map 思维导图的更多相关文章
- IDE引入mindmap插件，在项目中添加思维导图
1.打开IDE,file--settings--plugins,搜索IDEA Mind Map 2.点击install,进行下载,然后按照提示restart重启IDEA,安装完成 3.创建mind m ...
- 心智图/思维导图（Mind Map/Mind Mapping），思维导图介绍
心智图(Mind Map),又称脑图.心智地图.脑力激荡图.思维导图.灵感触发图.概念地图.树状图.树枝图或思维地图,是一种图像式思维的工具以及一种利用图像式思考辅助工具来表达思维的工具. 心智图 ...
- 思维导图MindManager的文件格式与例图
思维导图软件很多,能够画出思维导图的软件更多.作为流传较广而又比较成熟的思维导图软件,MindManager有专门的文件格式.如果读者想多借鉴导图,就应该了解MindManager的文件格式. Min ...
- 各种图（流程图，思维导图，UML，拓扑图，ER图）简介
来源于:http://www.cnblogs.com/jiqing9006/p/3344221.html 流程图 1.定义:流程图是对过程.算法.流程的一种图像表示,在技术设计.交流及商业简报等领域有 ...
- 思维导图分享以及MindManager使用说明
来源于: http://www.cnblogs.com/muhongxing/archive/2009/12/22/1628782.html http://www.cnblogs.com/muhong ...
- 【转】各种图（流程图，思维导图，UML，拓扑图，ER图）简介
原文地址:各种图(流程图,思维导图,UML,拓扑图,ER图)简介 流程图 1.定义:流程图是对过程.算法.流程的一种图像表示,在技术设计.交流及商业简报等领域有广泛的应用. 2.案例 3.计算机语言只 ...
- LeetCode刷题专栏第一篇--思维导图&时间安排
昨天是元宵节,过完元宵节相当于这个年正式过完了.不知道大家有没有投入继续投入紧张的学习工作中.年前我想开一个Leetcode刷题专栏,于是发了一个投票想了解大家的需求征集意见.投票于2019年2月1日 ...
- python解析FreeMind思维导图
记录瞬间 在实际工作中,通常需要使用思维导图进行一些分析和设计,但是,在设计好之后,想要把思维导图的内容转化成文字进行输出怎么做呢? 使用python(当然可以使用其他的语言进行处理)可以很好的解决这 ...
- vue源码逐行注释分析+40多m的vue源码程序流程图思维导图 （diff部分待后续更新）
vue源码业余时间差不多看了一年,以前在网上找帖子,发现很多帖子很零散,都是一部分一部分说,断章的很多,所以自己下定决定一行行看,经过自己坚持与努力,现在基本看完了,差ddf那部分,因为考虑到自己要换 ...
随机推荐
- Git - 常用命令, cheatsheet
git init git add <filename1> <filename2> git add . git checkout -- <filename> git ...
- OpenCV介绍
OpenCV 是什么 OpenCV是计算机视觉开源库,主要算法涉及图像处理和机器学习相关方法. 是 Intel 公司贡献出来的,俄罗斯工程师贡献大部分 C/C++ 代码 在多数图像处理相关的应用程序中 ...
- spring boot加载配置文件的顺序
四个默认加载配置文件地方的优先级,四个文件相同配置有优先级概念 不同位置相互补充 外部配置文件不建议使用,不符合maven项目结构,打包会打不进去
- 802.1X高级配置
部署VLAN和ACLCisco Catalyst交换机(认证方)和Cisco ACS(认证服务器)具备动态分配VLAN或者ACL的能力.Cisco ACS可以将某个用户分配给指定的VLAN,或应用AC ...
- 转入软工后第一节java课的作业
这个作业,鸽了好久.本来大家都在中秋前发了,我摸摸索索加上各种缓慢的学习,终于是将他做完了. 做完之后,java最基本的输入输出功能都基本学习到了.下面附上代码: import java.util.* ...
- ANSYS热分析简介1
目录 1. ANSYS热分析简介 1.1 传导 1.2 热载荷分类 1.2.1 载荷施加 1.3 热分析分类 1.3.1 稳态热分析 1.3.2 瞬态热分析 1.3.3 非线性分析综述 2. 热分析单 ...
- CDH 搭建 问题
1. 问题描述: java.sql.SQLException: Access denied for user 'xxx'@'xxx.xxx.xxx.xxx' (using password: YES ...
- STM32F4/F7运算性能
参考http://bbs.21ic.com/icview-1622796-1-1.html
- 【PAT甲级】1002 A+B for Polynomials (25 分)
题意:给出两个多项式,计算两个多项式的和,并以指数从大到小输出多项式的指数个数,指数和系数. AAAAAccepted code: #include<bits/stdc++.h> usin ...
- springboot 打包成jar
1.pom.xml配置 <build> <plugins> <plugin> <groupId>org.apache.maven.plugins< ...