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那部分,因为考虑到自己要换 ...
随机推荐
- Java Https双向验证
CA: Certificate Authority,证书颁发机构 CA证书:证书颁发机构颁发的数字证书 参考资料 CA证书和TLS介绍 HTTPS原理和CA证书申请(满满的干货) 单向 / 双向认证 ...
- window照片查看器无法查看照片的问题
查看其他照片都可以,只有特殊的两张无法查看.百度|| 修改了环境变量中的tmp变量,路径改为e:\tmp(注:要选择磁盘空间足够的磁盘). 刷新过后,重新打开同一张图片,如下: 用系统自带画图软件尝试 ...
- vs2013设置不生成.sdf和ipch文件
转载:https://blog.csdn.net/sinat_23338865/article/details/53393760 使用VS2013建立解决方案时,会生成SolutionName.sdf ...
- SAM（后缀自动机）总结
“写sam是肯定会去写的,这样才学的了字符串,后缀数组又不会用 >ω<, sam套上数据结构的感觉就像回家一样! 里面又能剖分又能线段树合并,调试又好调,我爱死这种写法了 !qwq” SA ...
- 获取当前表中的最大自增id的下一个自增id值
SELECT auto_increment FROM information_schema.`TABLES` WHERE TABLE_SCHEMA='{$db_name}' AND TABLE_NAM ...
- 操作系统OS - Zip Bomb
42.zip - A 42 kb zip file that contains 4.5 Petabytes of uncompressed data.
- swiper插件遇到的坑
1.网速卡的情况下轮播图会出现塌陷 解决方法: 在swiper外层固定高度,用填充百分比方法: html代码:在swiper-container加一层外层,外层用padding-top:50%(看图片 ...
- PAT T1003 Universal Travel Sites
网络流模板~ #include<bits/stdc++.h> using namespace std; ; const int inf=1e9; queue<int> q; i ...
- KVM的客户机可以使用的存储
KVM的虚拟机可以直接使用宿主机器内的存储设备,比如可以把宿主机器内的硬盘直接暴露给 虚拟机挂载使用 -hda /dev/sfa(宿主机的设备文件) 还可以把镜像文件挂接到虚拟机,作为虚拟机的存储设备 ...
- StringBuffer调整空间
在无法估算字符串大小情况下,可以使用StringBuffer的trimToSize()方法调整到合适大小.