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那部分,因为考虑到自己要换 ...
随机推荐
- VBA 学习笔记 - 消息框
学习资料:https://www.yiibai.com/vba/vba_macro_comments.html 注释 单引号或 REM 开头 丸子:多行注释咋办? 消息框(MsgBox) 函数功能:显 ...
- cglib用法
CGLib动态代理的介绍及用法(单回调.多回调.不处理.固定值.懒加载) 参照: https://blog.csdn.net/difffate/article/details/70552056 前面介 ...
- VS中使用C的一些函数报错的问题
VS建议采用带_s的函数,如scanf_s.strcpy_s,但这些并不是标准C函数. 要想继续使用此函数,需要在源文件中添加以下指令就可以避免这个错误提示: #define _CRT_SECURE_ ...
- 增加phpmyadmin导入文件上限
一.修改php配置 修改php配置文件,php.ini upload_max_filesize = 100M post_max_size = 100M 一般修改这2个就行了,然后重启wampserve ...
- servlet类常用代码
1.设置响应编码格式 response.setContentType(");
- ubuntu循环登录
ubuntu12.04管理员账户登录不了桌面,只能客人会话登录 登录管理员账户时,输入密码后,一直在登录界面循环 费了好大劲啊,一上午的时间,终于搞定了,哈哈哈 ctrl+alt+f1 ,切换到tty ...
- IOS XE-show memory
有些时候,我们可能会遇到IOS XE设备的high memory的情况.我们可以使用的命令去查看相关信息. 例如: Router# show version Router# show memory R ...
- AP2800无法放出SSID？
实际的无线网络中,有时候由于对无线设备的datasheet不是很了解,可能会以旧的知识去判断一些故障.在思科的较新的AP型号中:例如AP2800&AP3800等,有时候发现它们可正常的注册到W ...
- 转专业后补修C语言的一些体会(4)
1.对于文件的打开和关闭操作:首先了解到,C语言将文件分成了两种类型:文本文件和二进制文件.针对这两种文件,各有不同的文件读写方式.在C语言中,文件的操作要借助一个文件指针 即FILE 类型,定义了一 ...
- idea 配置JVM参数
-Dfile.encoding=UTF-8 -Xms512m -Xmx3072m -XX:PermSize=512m