gojs实现一个功能齐全的思维导图编辑效果代码
代码语言：html
所属分类：图表
代码描述：gojs实现一个功能齐全的思维导图编辑效果代码，鼠标滚轮缩放、单独按钮缩放。节点、链接样式。节点阴影。展开按钮样式。操作按钮包含SVG图标。单击节点、展开/折叠节点事件。默认展开某些节点。过滤节点:根据过滤器和父节点匹配,匹配的节点展开,其他隐藏。展开/折叠节点:不改变根位置。按"text"属性升序排序节点。默认调整到容器大小。不允许拖出容器外。 按钮:展开全部。折叠全部。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.5.6.1.css">
<style>
.content {
padding: 10px;
}
.diagram {
background-color: white;
border: solid 1px #B1B1B1;
width: 100%;
height: 500px;
}
/* remove blue frame from diagram */
canvas {
outline: none;
}
.filter {
position: absolute;
z-index: 3;
top: 20px;
left: 20px;
}
.zoom {
color: #373737;
width: 20px;
position: absolute;
z-index: 3;
top: 20px;
right: 15px;
cursor: pointer;
}
.fa-plus,
.fa-minus {
background: #E4E4E4;
}
.introduction {
margin-top: 20px;
padding: 10px;
}
.about {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="content">
<div id="myDiagram" class="diagram">
</div>
<div class="filter">
<input type="text" id="filterText" />
<button id="filterBtn">
<i class="fas fa-search"></i>
</button>
<button id="expandBtn" title="Expand all nodes">
<i class="fas fa-arrows-alt"></i>
</button>
<button id="collapseBtn" title="Collapse all nodes">
<i class="fas fa-compress"></i>
</button>
</div>
<div class="zoom">
<i class="fas fa-plus" id="soomInBtn" title="zoom in"></i>
<i class="fas fa-minus" id="soomOutBtn" title="zoom out"></i>
</div>
</div>
<div class="introduction">
此自定义图是使用 GoJs 制作的。
定制零件：
缩放鼠标滚轮。
用于缩放的单独按钮。
节点和链接的样式。
节点周围的阴影。
展开按钮样式。
带有包含 svg 图标的操作按钮的工具提示。
事件处理程序：单击节点、展开/折叠节点、添加/删除 btn 单击（请参阅控制台和警报）。
默认情况下，某些节点会展开。
蓝框将从主图和节点中删除。
筛选节点。如果筛选器不为空，则查找与筛选器及其所有直接父节点匹配的节点，然后展开这些节点。其他节点处于隐藏状态。
扩展/折叠节点时不会更改根位置。
节点按“text”属性升序排序。
默认情况下，将图表调整到其容器
不允许将图表拖到容器外
单击按钮时展开所有节点。
单击按钮时折叠所有节点。
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/go.js"></script>
<script>
(function(){
var myDiagram;
init();
document.getElementById("soomInBtn").addEventListener("click", onZoomInClick);
document.getElementById("soomOutBtn").addEventListener("click", onZoomOutClick);
document.getElementById("filterBtn").addEventListener("click", onDoFilterClick);
document.getElementById("expandBtn").addEventListener("click", onExpandAllClick);
document.getElementById("collapseBtn").addEventListener("click", onCollapseAllClick);
function init() {
var $ = go.GraphObject.make; // for conciseness in defining templates
myDiagram =
$(go.Diagram, "myDiagram", // must be the ID or reference to div
{
initialContentAlignment: go.Spot.Center,
initialAutoScale: go.Diagram.Uniform, // fit to container by default
hoverDelay: 100, // controls how long to wait motionless (msec) before showing Adornment
scrollMode: go.Diagram.DocumentScroll // do not allow to drag the diagram outside container
});
myDiagram.toolManager.mouseWheelBehavior = go.ToolManager.WheelZoom; // Don't set Diagram.autoScale if you want the user to zoom the diagram.
// define all of the gradient brushes
var rootBrush = $(go.Brush, { color: "#6d7993" });
var mainGroupBrush = $(go.Brush, { color: "#984b43" });
var subGroupBrush = $(go.Brush, { color: "#994466" });
var subSubGroupBrush = $(go.Brush, { color: "#07889b" });
var leafBrush = $(go.Brush, { color: "#4484ce" });
// this is shown by the mouseHover event handler
var nodeHoverAdornment =
$(go.Adornment, "Spot",
{
background: "transparent",
// hide the Adornment when the mouse leaves it
mouseLeave: function(e, obj) {
var ad = obj.part;
ad.adornedPart.removeAdornment("mouseHover");
},
click: function(e, obj) {
var ad = obj.part;
debugger
}
},
$(go.Placeholder,
{
background: "transparent", // to allow this Placeholder to be "seen" by mouse events
isActionable: true, // needed because this is in a temporary Layer
click: function(e, obj) {
var node = obj.part.adornedPart;
node.diagram.select(node);
}
}),
$(go.Panel, "Auto",
{ alignment: new go.Spot(0.5, 0, 0, -20) },
$(go.Panel, "Vertical",
{ name: 'actionsPanel' },
$(go.Panel, "Auto",
$(go.Shape, "RoundedRectangle",
{
fill: "#333333",
stroke: "#333333",
height: 30,
margin: 0,
strokeWidth: 1,
shadowVisible: false,
parameter1: 2, // border radius
}),
$(go.Panel, "Horizontal",
$("Button",
{
width: 30,
height: 30,
margin: 0,
"ButtonBorder.fill": "transparent", // background color
"ButtonBorder.stroke": "transparent", // border color
"_buttonFillOver": "#535353",
"_buttonStrokeOver": "transparent", // border color on hover
toolTip:
$("ToolTip",
$(go.TextBlock, { margin: 1, text: "add" })
),
click: onAddSubItemClick
},
new go.Binding("visible", "addingSubItemAllowed"),
$(go.Shape, {
geometry: go.Geometry.parse('M1600 736v192q0 40-28 68t-68 28h-416v416q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68v-416h-416q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h416v-416q0-40 28-68t68-28h192q40 0 68 28t28 68v416h416q40 0 68 28t28 68z', true),
fill: "#ffffff",
stroke: "#ffffff",
strokeWidth: 0,
width: 12,
height: 12,
maxSize: new go.Size(12, 12)
})
),
$("Button",
{
width: 30,
height: 30,
margin: 0,
"ButtonBorder.fill": "transparent", // background color
"ButtonBorder.stroke": "transparent", // border color
"_buttonFillOver": "#535353",
"_buttonStrokeOver": "transparent", // border color on hover
toolTip:
$("ToolTip",
$(go.TextBlock, { margin: 1, text: "del" })
),
click: onRemoveItemClick
},
new go.Binding("visible", "removeAllowed"),
$(go.Shape, {
geometry: go.Geometry.parse('M704 1376v-704q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v704q0 14 9 23t23 9h64q14 0 23-9t9-23zm256 0v-704q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v704q0 14 9 23t23 9h64q14 0 23-9t9-23zm256 0v-704q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v704q0 14 9 23t23 9h64q14 0 23-9t9-23zm-544-992h448l-48-117q-7-9-17-11h-317q-10 2-17 11zm928 32v64q0 14-9 23t-23 9h-96v948q0 83-47 143.5t-113 60.5h-832q-66 0-113-58.5t-47-141.5v-952h-96q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h309l70-167q15-37 54-63t79-26h320q40 0 79 26t54 63l70 167h309q14 0 23 9t9 23z', true),
stroke: "#ffffff",
fill: "#ffffff",
strokeWidth: 0,
width: 12,
height: 12,
maxSize: new go.Size(12, 12)
})
)
)
),
$(go.Shape, "TriangleDown",
{
fill: "#333333",
stroke: "#333333",
width: 20,
height: 10,
strokeWidth: 0,
margin: 0,
segmentOffset: new go.Point(0, 10)
})
)
)
);
// define the Node template for non-terminal nodes
myDiagram.nodeTemplate =
$(go.Node, "Vertical",
{
name: "node",
margin: 0,
isTreeExpanded: false, // by default collapsed
click: onNodeClick,
isShadowed: true,
shadowBlur: 3,
shadowColor: "rgba(0, 0, 0, 0.2)",
shadowOffset: new go.Point(0, 1),
selectionAdorned: false, // remove node focus outline
cursor: "pointer"
},
new go.Binding("isTreeExpanded", "expanded"),
$(go.Panel, "Auto",
{margin: 0},
$(go.Shape, "RoundedRectangle",
{
maxSize: new go.Size(NaN, 28),
fill: leafBrush,
margin: 0,
stroke: "transparent",
strokeWidth: 0,
shadowVisible: true,
parameter1: 2, // border radius
portId: "", // now the Shape is the port, not the whole Node
fromSpot: go.Spot.Right, // port properties go on the port!
toSpot: go.Spot.Left
},
new go.Binding("fill", "color")),
$(go.Panel, "Horizontal",
{margin: 0},
$(go.Panel, "Horizontal",
{
height: 28,
margin: 0,
name: "hoverPart",
maxSize: new go.Size(100, 28),
// show the Adornment when a mouseHover event occurs
mouseHover: function(e, obj) {
var hoverPart = obj.part.findObject("hoverPart");
var node = obj.part;
if(hoverPart && (node.data.addingSubItemAllowed || node.data.removeAllowed)) {
nodeHoverAdornment.adornedObject = hoverPart;
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0