gojs skipsUndoManager 是干啥用的

时间: 2024-06-06 22:10:06 浏览: 82

vue中使用gojs/jointjs的示例代码

从给定的文件信息来看，我们需要了解的知识点包括如何在Vue项目中使用GoJS和jointjs两种JavaScript库，以及如何实现交互式的流程图绘制。接下来我将详细介绍这些内容。 ### Vue中使用GoJS GoJS是一个功能强大的图表库，它允许用户创建复杂的交互式图表，比如流程图、组织结构图、状态图等。该库是基于HTML5的，因此确保你的项目中已经兼容了HTML5。 #### 安装GoJS 你需要通过npm安装GoJS库。使用命令如下： ```bash npm install gojs --save ``` 安装完成后，你可以在Vue组件中引入并使用它。 #### GoJS基本使用 GoJS库在Vue中的使用包括初始化图表、定义节点和边、添加数据源、设置图形和绑定事件等步骤。 1. 初始化图表：创建一个GoJS的Diagram对象，并设置一个HTML元素作为图表的容器。 ```javascript const $ = go.GraphObject.make; let diagram = $(go.Diagram, "myDiagramDiv", { "undoManager.isEnabled": true // 开启撤销功能 }); ``` 2. 定义节点和边：使用模板来定义节点和边的外观和行为。 ```javascript diagram.nodeTemplate = $(go.Node, "Auto", $(go.Shape, "RoundedRectangle", { fill: "white", stroke: "black" }, new go.Binding("fill", "color")), $(go.TextBlock, { margin: 8, editable: true }, new go.Binding("text").makeTwoWay()) ); diagram.linkTemplate = $(go.Link, { curve: go.Link.Bezier, toShortLength: 4 }, $(go.Shape, { stroke: "gray", strokeWidth: 2 }), $(go.Shape, { toArrow: "Standard" }) ); ``` 3. 添加数据源：通过定义数据模型来提供节点和边的数据。 ```javascript diagram.model = new go.GraphLinksModel( [ // 这里可以添加节点和边的数据对象 ], [ // 这里可以添加连接的数据对象 ]); ``` 4. 设置图形和绑定事件：通过模板来设置节点的图形以及绑定相关的事件。 #### 创建水平方向的流程图原始代码展示的流程图是垂直方向的。如果需要将其变为水平方向，可以通过调整模板中的形状旋转角度或更改布局的设置。 ```javascript // 设置布局为水平方向 diagram.layout = $(go.LayeredDigraphLayout, { columnSpacing: 10, layeringOption: go.LayeredDigraphLayout.LayerOption.LeftRight, direction: 90 }); ``` ### Vue中使用jointjs jointjs是一个功能丰富的JavaScript库，用于创建和操作图形。它同样可以用来创建流程图、ER图、UML图等。它依赖于SVG和VHTML，可以很容易地与Vue结合。 #### 安装jointjs 可以通过npm进行安装： ```bash npm install jointjs --save ``` #### jointjs基本使用 1. 引入jointjs库并初始化画布： ```javascript import { joint } from 'jointjs'; const paper = new joint.dia.Paper({ el: document.getElementById('myDiagramDiv'), model: new joint.dia.Graph(), width: 600, height: 400, gridSize: 1, snappingGridSize: 10, drawGrid: true, interactive: { linkMove: false } }); ``` 2. 定义图形和连接线： ```javascript var rect = new joint.shapes.standard.Rectangle(); rect.position(100, 30); rect.resize(100, 40); rect.attr({ body: { fill: 'blue' }, label: { text: 'Hello', fill: 'white' } }); var circle = new joint.shapes.standard.Circle(); circle.position(400, 180); circle.resize(50, 50); circle.attr({ body: { fill: 'green' }, label: { text: 'World', fill: 'white' } }); var link = new joint.shapes.standard.Link(); link.source(rect); link.target(circle); link.appendLabel( new joint.g.Canvases.Label({ markup: '<text class="label-text" y="20" font-size="16" fill="#333" text-anchor="middle">A link</text>', position: { distance: 0.5 } }) ); joint.layout.DirectedGraph.layout(rect, circle, link, { rankDir: 'TB', marginX: 50, marginY: 50 }); ``` 3. 将图形添加到画布上： ```javascript paper.model.addCells([rect, circle, link]); ``` ### 结论以上是文件内容所蕴含的知识点，它们详细介绍了如何在Vue项目中集成GoJS和jointjs两个强大的图表库。你可以通过这些知识来创建各种交互式的图表，实现业务流程的可视化。需要注意的是，实际开发中可能会遇到一些细节问题，例如样式调整、事件处理等，这就需要根据实际需求进行相应的编码和调试。

在 GoJS 中，skipsUndoManager 是一个属性，它用于控制在对图形进行更改时是否记录撤销和重做操作。如果将 skipsUndoManager 属性设置为 true，则对图形进行更改时不会记录撤销和重做操作，这在某些情况下可以提高性能。但是需要注意的是，如果 skipsUndoManager 属性设置为 true，那么这些更改将无法撤销或重做，因此需要谨慎使用。

阅读全文

gojs skipsUndoManager 是干啥用的

相关推荐

gojs-chinese:gojs中文文档

GoJS v2.2.2无水印版源码

gojs undomanager 是啥东西

gojs 中 electricalFieldX 方法怎么用

gojs 中这个怎么用 electricalFieldX

vue中使用gojs绘制流程图

Go语言如何用GoJS编写流程图

gojs3.0去水印

gojs addModelChangedListener

gojs获取node

gojs setsPortSpots

gojs vue流程图

vue引入gojs去除水印

gojs设置整体背景图

gojs修改图片的大小

gojs动态设置图片大小

gojs 文字样式怎么写

gojs hover样式

gojs setDataProperty 属性

最新推荐

基于java的智能卤菜销售平台答辩PPT.pptx

Aspose资源包：转PDF无水印学习工具

管理建模和仿真的文件

【R语言高性能计算秘诀】：代码优化，提升分析效率的专家级方法

在构建视频会议系统时，如何通过H.323协议实现音视频流的高效传输，并确保通信的稳定性？

Go语言控制台输入输出操作教程

"互动学习：行动中的多样性与论文攻读经历"

【R语言机器学习新手起步】：caret包带你进入预测建模的世界

在选择PL2303和CP2102/CP2103 USB转串口芯片时，应如何考虑和比较它们的数据格式和波特率支持能力？

红外遥控报警器原理及应用详解下载