Gojs 实现模板添加托拽

最新推荐文章于 2024-06-13 14:26:56 发布

爱吃青菜的土拨鼠

最新推荐文章于 2024-06-13 14:26:56 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/qq_40806920/article/details/117420466

版权

HTML 5 中引入文件我只是用作记代码

不晓得是左侧和右侧之间是通过什么链接的二者如何实现这种效果希望大牛指出

实现流程图将右侧的组件拖入到左侧的画布中

直接上代码

<!DOCTYPE html>

<html>

<head>

<title>Flowchart</title>

function init() { // 在页面一开始的时候进行加载

if (window.goSamples) goSamples(); // 初始化这些示例，你不需要调用它init for these samples -- you don't need to call this

var $ = go.GraphObject.make; // 为了定义模板的简洁性

myDiagram =

$(go.Diagram, "myDiagramDiv", // 必须命名或引用DIV HTML元素

{

initialContentAlignment: go.Spot.Center,// 在中间

allowDrop: true, // 接受调色板中的掉落必须是正确的吗must be true to accept drops from the Palette

"LinkDrawn": showLinkLabel, // 这个DiagramEvent监听器定义

"LinkRelinked": showLinkLabel,

"animationManager.duration": 800, // 略长于默认动画(600ms)

"undoManager.isEnabled": true // enable undo & redo 18/5000 // 启用撤销和重做

});

// 当文档被修改时，添加一个“*”到标题并启用“保存”按钮

// when the document is modified, add a "*" to the title and enable the "Save" button

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 < 0) document.title += "*";

} else {

if (idx >= 0) document.title = document.title.substr(0, idx);

}

});

// helper definitions for node templates

// 节点模板的助手定义

function nodeStyle() {

return [

// 的节点。位置来自节点数据的“loc”属性，

//由点转换。解析静态方法。

//如果节点。位置改变，它更新节点数据的“loc”属性，

// /使用这个点进行转换。注入静态方法。

// The Node.location comes from the "loc" property of the node data,

// converted by the Point.parse static method.

// If the Node.location is changed, it updates the "loc" property of the node data,

// converting back using the Point.stringify static method.

new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),

{

// the Node.location is at the center of each node 的节点。位置在每个节点的中心

locationSpot: go.Spot.Center,

//isShadowed: true,

//shadowColor: "#888",

// handle mouse enter/leave events to show/hide the ports

mouseEnter: function (e, obj) { showPorts(obj.part, true); },

mouseLeave: function (e, obj) { showPorts(obj.part, false); }

}

];

}

// Define a function for creating a "port" that is normally transparent.

// The "name" is used as the GraphObject.portId, the "spot" is used to control how links connect

// and where the port is positioned on the node, and the boolean "output" and "input" arguments

// control whether the user can draw links from or to the port.

//定义一个函数来创建一个通常透明的“端口”。

//“name”用作graphhobject。portId，“点”用于控制链接的连接方式

//和端口在节点上的位置，以及布尔值“输出”和“输入”参数

//控制用户是否可以从该端口绘制链接或到该端口。

function makePort(name, spot, output, input) {

// the port is basically just a small circle that has a white stroke when it is made visible

// 该端口基本上只是一个小圆，有一个白色的描边时，它是可见的

return $(go.Shape, "Circle",

{

fill: "transparent",

stroke: null, // this is changed to "white" in the showPorts function

desiredSize: new go.Size(8, 8),

alignment: spot, alignmentFocus: spot, // align the port on the main Shape

portId: name, // declare this object to be a "port"

fromSpot: spot, toSpot: spot, // declare where links may connect at this port

fromLinkable: output, toLinkable: input, // declare whether the user may draw links to/from here

cursor: "pointer" // show a different cursor to indicate potential link point

});

}

// define the Node templates for regular nodes

// 为常规节点定义Node模板

var lightText = 'whitesmoke';

myDiagram.nodeTemplateMap.add("", // the default category

$(go.Node, "Spot", nodeStyle(),

// 主要对象是一个围绕着一个矩形TextBlock的面板

// the main object is a Panel that surrounds a TextBlock with a rectangular Shape

$(go.Panel, "Auto",

$(go.Shape, "Rectangle",

{ fill: "#00A9C9", stroke: null },

new go.Binding("figure", "figure")),

$(go.TextBlock,

{

font: "bold 11pt Helvetica, Arial, sans-serif",

stroke: lightText,

margin: 8,

maxSize: new go.Size(160, NaN),

wrap: go.TextBlock.WrapFit,

editable: true

new go.Binding("text").makeTwoWay())

// four named ports, one on each side:

makePort("T", go.Spot.Top, false, true),

makePort("L", go.Spot.Left, true, true),

makePort("R", go.Spot.Right, true, true),

makePort("B", go.Spot.Bottom, true, false)

));

myDiagram.nodeTemplateMap.add("Start",

$(go.Node, "Spot", nodeStyle(),

$(go.Panel, "Auto",

$(go.Shape, "Circle",

{ minSize: new go.Size(40, 40), fill: "#79C900", stroke: null }),

$(go.TextBlock, "Start",

{ font: "bold 11pt Helvetica, Arial, sans-serif", stroke: lightText },

new go.Binding("text"))

// three named ports, one on each side except the top, all output only:

makePort("L", go.Spot.Left, true, false),

makePort("R", go.Spot.Right, true, false),

makePort("B", go.Spot.Bottom, true, false)

));

myDiagram.nodeTemplateMap.add("End",

$(go.Node, "Spot", nodeStyle(),

$(go.Panel, "Auto",

$(go.Shape, "Circle",

{ minSize: new go.Size(40, 40), fill: "#DC3C00", stroke: null }),

$(go.TextBlock, "End",

{ font: "bold 11pt Helvetica, Arial, sans-serif", stroke: lightText },

new go.Binding("text"))

// 三个命名的端口，除了底部，每边一个，全部只输入:

// three named ports, one on each side except the bottom, all input only:

makePort("T", go.Spot.Top, false, true),

makePort("L", go.Spot.Left, false, true),

makePort("R", go.Spot.Right, false, true)

));

myDiagram.nodeTemplateMap.add("Comment",

$(go.Node, "Auto", nodeStyle(),

$(go.Shape, "File",

{ fill: "#EFFAB4", stroke: null }),

$(go.TextBlock,

{

margin: 5,

maxSize: new go.Size(200, NaN),

wrap: go.TextBlock.WrapFit,

textAlign: "center",

editable: true,

font: "bold 12pt Helvetica, Arial, sans-serif",

stroke: '#454545'

new go.Binding("text").makeTwoWay())

// no ports, because no links are allowed to connect with a comment

));

// 在linkTemplateMap中替换默认的Link模板

// replace the default Link template in the linkTemplateMap

myDiagram.linkTemplate =

$(go.Link, // the whole link panel

{

routing: go.Link.AvoidsNodes,

curve: go.Link.JumpOver,

corner: 5, toShortLength: 4,

relinkableFrom: true,

relinkableTo: true,

reshapable: true,

resegmentable: true,

// mouse-overs subtly highlight links:

mouseEnter: function (e, link) { link.findObject("HIGHLIGHT").stroke = "rgba(30,144,255,0.2)"; },

mouseLeave: function (e, link) { link.findObject("HIGHLIGHT").stroke = "transparent"; }

new go.Binding("points").makeTwoWay(),

$(go.Shape, // the highlight shape, normally transparent

{ isPanelMain: true, strokeWidth: 8, stroke: "transparent", name: "HIGHLIGHT" }),

$(go.Shape, // the link path shape

{ isPanelMain: true, stroke: "gray", strokeWidth: 2 }),

$(go.Shape, // the arrowhead

{ toArrow: "standard", stroke: null, fill: "gray" }),

$(go.Panel, "Auto", // the link label, normally not visible

{ visible: false, name: "LABEL", segmentIndex: 2, segmentFraction: 0.5 },

new go.Binding("visible", "visible").makeTwoWay(),

$(go.Shape, "RoundedRectangle", // the label shape

{ fill: "#F8F8F8", stroke: null }),

$(go.TextBlock, "Yes", // the label

{

textAlign: "center",

font: "10pt helvetica, arial, sans-serif",

stroke: "#333333",

editable: true

new go.Binding("text").makeTwoWay())

)

);

//使链接标签可见如果走出一个“有条件的”节点。

//这个监听器被"LinkDrawn"和" linkrellinked " DiagramEvents调用。

// Make link labels visible if coming out of a "conditional" node.

// This listener is called by the "LinkDrawn" and "LinkRelinked" DiagramEvents.

function showLinkLabel(e) {

var label = e.subject.findObject("LABEL");

if (label !== null) label.visible = (e.subject.fromNode.data.figure === "Diamond");

}

// LinkingTool和RelinkingTool使用的临时链接也是正交的:

// temporary links used by LinkingTool and RelinkingTool are also orthogonal:

myDiagram.toolManager.linkingTool.temporaryLink.routing = go.Link.Orthogonal;

myDiagram.toolManager.relinkingTool.temporaryLink.routing = go.Link.Orthogonal;

load(); // 从一些JSON文本加载一个初始图表

// 初始化页面左侧的Palette 左侧的模板

// initialize the Palette that is on the left side of the page

myPalette =

$(go.Palette, "myPaletteDiv", // must name or refer to the DIV HTML element

{

"animationManager.duration": 800, // slightly longer than default (600ms) animation

nodeTemplateMap: myDiagram.nodeTemplateMap, // 共享myDiagram使用的模板

model: new go.GraphLinksModel([ // specify the contents of the Palette

{ category: "Start", text: "Start" },

{ text: "Step" },

{ text: "???", figure: "Diamond" },

{ category: "End", text: "End" },

{ category: "Comment", text: "Comment" }

])

});

}

//当鼠标在节点上时，使节点上的所有端口可见

// Make all ports on a node visible when the mouse is over the node

function showPorts(node, show) {

var diagram = node.diagram;

if (!diagram || diagram.isReadOnly || !diagram.allowLink) return;

node.ports.each(function (port) {

port.stroke = (show ? "white" : null);

});

}

// 以JSON格式显示用户可以编辑的图表模型

// Show the diagram's model in JSON format that the user may edit

function save() {

document.getElementById("mySavedModel").value = myDiagram.model.toJson();

myDiagram.isModified = false;

}

// 先给一个数据模板获取到他的value值

function load() {

myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);

}

// add an SVG rendering of the diagram at the end of this page

// 把这个变成svg的样子

function makeSVG() {

var svg = myDiagram.makeSvg({

scale: 0.5

});

svg.style.border = "1px solid black";

obj = document.getElementById("SVGArea");

obj.appendChild(svg);

if (obj.children.length > 0) {

obj.replaceChild(svg, obj.children[0]);

}

</script>

</head>

<h3>GoJS Flowchart</h3>

</span>

</span>

</div>

<p>

The FlowChart sample demonstrates several key features of GoJS,

namely <a href="../intro/palette.html">Palette</a>s,

<a href="../intro/links.html">Linkable nodes</a>, Drag/Drop behavior,

<a href="../intro/textBlocks.html">Text Editing</a>, and the use of

<a href="../intro/templateMaps.html">Node Template Maps</a> in Diagrams.

</p>

<p>

Mouse-over a Node to view its ports.

Drag from these ports to create new Links.

Selecting Links allows you to re-shape and re-link them.

Selecting a Node and then clicking its TextBlock will allow

you to edit text (except on the Start and End Nodes).

</p>

Diagram Model saved in JSON format:

{ "class": "go.GraphLinksModel",

"linkFromPortIdProperty": "fromPort",

"linkToPortIdProperty": "toPort",

"nodeDataArray": [

{"category":"Comment", "loc":"360 -10", "text":"Kookie Brittle", "key":-13},

{"key":-1, "category":"Start", "loc":"175 0", "text":"Start"},

{"key":0, "loc":"0 77", "text":"Preheat oven to 375 F"},

{"key":1, "loc":"175 100", "text":"In a bowl, blend: 1 cup margarine, 1.5 teaspoon vanilla, 1 teaspoon salt"},

{"key":2, "loc":"175 190", "text":"Gradually beat in 1 cup sugar and 2 cups sifted flour"},

{"key":3, "loc":"175 270", "text":"Mix in 6 oz (1 cup) Nestle's Semi-Sweet Chocolate Morsels"},

{"key":4, "loc":"175 370", "text":"Press evenly into ungreased 15x10x1 pan"},

{"key":5, "loc":"352 85", "text":"Finely chop 1/2 cup of your choice of nuts"},

{"key":6, "loc":"175 440", "text":"Sprinkle nuts on top"},

{"key":7, "loc":"175 500", "text":"Bake for 25 minutes and let cool"},

{"key":8, "loc":"175 570", "text":"Cut into rectangular grid"},

{"key":-2, "category":"End", "loc":"175 640", "text":"Enjoy!"}

"linkDataArray": [

{"from":1, "to":2, "fromPort":"B", "toPort":"T"},

{"from":2, "to":3, "fromPort":"B", "toPort":"T"},

{"from":3, "to":4, "fromPort":"B", "toPort":"T"},

{"from":4, "to":6, "fromPort":"B", "toPort":"T"},

{"from":6, "to":7, "fromPort":"B", "toPort":"T"},

{"from":7, "to":8, "fromPort":"B", "toPort":"T"},

{"from":8, "to":-2, "fromPort":"B", "toPort":"T"},

{"from":-1, "to":0, "fromPort":"B", "toPort":"T"},

{"from":-1, "to":1, "fromPort":"B", "toPort":"T"},

{"from":-1, "to":5, "fromPort":"B", "toPort":"T"},

{"from":5, "to":4, "fromPort":"B", "toPort":"T"},

{"from":0, "to":4, "fromPort":"B", "toPort":"T"}

]}

</textarea>

<p>Click the button below to render the current GoJS Diagram into SVG at one-half scale.

The SVG is not interactive like the GoJS diagram, but can be used for printing or display.

For more information, see the page on <a href="../intro/makingSVG.html">making SVG</a>.</p>

<button οnclick="makeSVG()">Render as SVG</button>

</div>

</body>

</html>

爱吃青菜的土拨鼠

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Gojs 实现模板添加托拽

<!DOCTYPEhtml><html><head><title>Flowchart</title><metaname="description"content="InteractiveflowchartdiagramimplementedbyGoJSinJavaScriptforHTML."/><!--Copyright1998-2016by...
复制链接

扫一扫