Update the next one quickly, although it’s just a subtotal. But I feel like I’m getting too lazy to write.
I’m going to create my artboard
// Initialize the canvas
graph = new Graph({
container: document.getElementById('orgAndPersonnelContainer'),
grid: true.width: this.onresizeWidth, // This is a self-defined width
height: this.onresizeHeight, // This is a self-defined height
background: {
color: '#fff'.// Set the canvas background color
},
mousewheel: {
enabled: true.zoomAtMousePosition: true.modifiers: 'ctrl'.minScale: 0.5.maxScale: 3,},panning: {
enabled: true.// Enable the drag operation separately
modifiers: 'shift'.// Hold down Shift to drag
},
connecting: {
router: {
name: 'manhattan'.args: {
padding: 1,}},connector: {
name: 'rounded'.args: {
radius: 8,}},anchor: 'center'.connectionPoint: 'anchor'.allowBlank: false.snap: {
radius: 20,},createEdge() {
return new Shape.Edge({
attrs: {
line: {
stroke: '#A2B1C3'.strokeWidth: 2.targetMarker: {
name: 'block'.width: 12.height: 8,}}},zIndex: 0,}}),validateConnection({ targetMagnet }) {
return!!!!! targetMagnet }, },highlighting: {
magnetAdsorbed: {
name: 'stroke'.args: {
attrs: {
fill: '#5F95FF'.stroke: '#5F95FF',},},},},resizing: true.rotating: true.selecting: {
enabled: true.rubberband: true.showNodeSelectionBox: true,},snapline: true.keyboard: true.clipboard: true,})Copy the codeNext is drag to enlarge and so on some events, the official example has write, I also directly copy
This is really copy nothing to say QAQ delete button is also in this
Shortcuts and events// copy cut paste
graph.bindKey(['meta+c'.'ctrl+c'].() = > {
const cells = graph.getSelectedCells()
if (cells.length) {
graph.copy(cells)
}
return false
})
graph.bindKey(['meta+x'.'ctrl+x'].() = > {
const cells = graph.getSelectedCells()
if (cells.length) {
graph.cut(cells)
}
return false
})
graph.bindKey(['meta+v'.'ctrl+v'].() = > {
if(! graph.isClipboardEmpty()) {const cells = graph.paste({ offset: 32 })
graph.cleanSelection()
graph.select(cells)
}
return false
})
//undo redo
graph.bindKey(['meta+z'.'ctrl+z'].() = > {
if (graph.history.canUndo()) {
graph.history.undo()
}
return false
})
graph.bindKey(['meta+shift+z'.'ctrl+shift+z'].() = > {
if (graph.history.canRedo()) {
graph.history.redo()
}
return false
})
// select all
graph.bindKey(['meta+shift+a'.'ctrl+shift+a'].() = > {
const nodes = graph.getNodes()
if (nodes) {
graph.select(nodes)
}
})
//delete
graph.bindKey('backspace'.() = > {
const cells = graph.getSelectedCells()
// console.log(cells.isEdge())
// if (cells.length) {
// graph.removeCells(cells)
// }
})
// zoom
graph.bindKey(['ctrl+1'.'meta+1'].() = > {
const zoom = graph.zoom()
if (zoom < 1.5) {
graph.zoom(0.1)
}
})
graph.bindKey(['ctrl+2'.'meta+2'].() = > {
const zoom = graph.zoom()
if (zoom > 0.5) {
graph.zoom(-0.1)}})// Resize the node
graph.on('node:resized'.({ e, x, y, node, view }) = > {
this.setClickNode(node) // Here is the way to save a node to a variable
})
// Move the node event
graph.on('node:moved'.({ e, x, y, node, view }) = >{})// Click the background panel
graph.on('blank:click'.({ e, x, y }) = >{})// Click the node
graph.on('node:click'.({ e, x, y, node, view }) = >{})// Add side event, here is add line delete event
graph.on('edge:added'.({ edge, index, options }) = > {
edge.addTools([
{
name: 'button-remove'.// Add delete button
args: {
distance: '85%'.attrs: {
y: -50.width: 20.height: 20}}},/ / {
// name: 'boundary',
// args: {
// distance: 10,
/ /},
// }])})// Drag the newly added event
graph.on('node:added'.({ node }) = > {
node.addTools([
{
name: 'button-remove'.args: {
distance: '85%'.y: -10.// Delete the position of the button
x: '100%',}}, {name: 'boundary'.args: {
// distance: 20,
padding: 15,}},])Copy the codeThere seems to be nothing left to write
This. clickNode is the object with the value above
This. ClickNodeTemp points to the node clicked (object assigned to the same heap).
TimeEnd One-time timer
This time the timer
clickNode: {
clickNodeContent: ' './ / content
clickNodeContentSize: ' '.// Font size
clickNodeBoxSizeWidth: ' '.// Box width
clickNodeBoxSizeHeight: ' '.// Box height
clickNodeBgColor: ' '.// Background color
clickNodeTextColor: ' '.// Text color
clickNodeBorderColor: ' '.// Border color
positionx: 0./ / x position
positiony: 0 / / y position
},
Copy the codehtml
<el-button
@click="addOrSubOrColorClickNodeData('add', 'clickNodeBoxSizeWidth')"
size="mini"
icon="el-icon-caret-top"
class="mini-icon"
@mousedown.native="holdDown('add', 'clickNodeBoxSizeWidth')"
@mouseup.native="holdUp()"
></el-button>
Copy the codejs
// Set the property value
setClickNode(node) {
this.clickNodeTemp = node // point to the node
this.clickNode.clickNodeContent = node.attrs.text.text
this.clickNode.clickNodeContentSize = node.attrs.text.fontSize
this.clickNode.clickNodeTextColor = node.attrs.text.fill
const propTemp = this.clickNodeTemp.getProp() // Get the style information
this.clickNode.clickNodeBoxSizeWidth = propTemp.size.width
this.clickNode.clickNodeBoxSizeHeight = propTemp.size.height
this.clickNode.clickNodeBorderColor = node.attrs.body.stroke
this.clickNode.clickNodeBgColor = node.attrs.body.fill
const relativePos = node.position({relative: true}) // Get location information
this.clickNode.positionx = relativePos.x
this.clickNode.positiony = relativePos.y
},
// Triggered when the mouse is pressed
holdDown(addOrSubOrColorTemp, data) {
var i = 0; / / variable I
this.timeEnd = setTimeout(() = > {
this.time = setInterval(() = > { //setInterval can always execute internal functions
this.addOrSubOrColorClickNodeData(addOrSubOrColorTemp, data);
i++; If one second passes, execute i++ once
}, 200);
}, 800)
if (i == 0) { // If I =0, the event that there is no long press is a click event
// this.addOrSubOrColorClickNodeData(addOrSubOrColorTemp, data);}},holdUp() {
clearTimeout(this.timeEnd)
clearInterval(this.time); // If the press takes less than 1000 milliseconds to bounce,
},
AddOrSubOrColorTemp determines whether to click add or subtract or select a color
addOrSubOrColorClickNodeData(addOrSubOrColorTemp, data) {
if (addOrSubOrColorTemp == 'add') {
this.clickNode[data]++
} else if (addOrSubOrColorTemp == 'sub') {this.clickNode[data]--
}
this.clickNode.positionx = this.clickNode.positionx*1.this.clickNode.positiony = this.clickNode.positiony*1
this.clickNodeTemp.updateAttrs(this.clickNode)
if (this.clickNodeTemp.setAttrs) {
// Use this method to set the color style
this.clickNodeTemp.setAttrs(
{
body: { fill: this.clickNode.clickNodeBgColor, stroke: this.clickNode.clickNodeBorderColor },
label: {
fill: this.clickNode.clickNodeTextColor
},
text: {
text: this.clickNode.clickNodeContent,
fontSize: this.clickNode.clickNodeContentSize
},
}
)
if(addOrSubOrColorTemp && addOrSubOrColorTemp ! = ='color') {
// Use this method to modify the length, width, and position
this.clickNodeTemp.setProp({
size: {
width: this.clickNode.clickNodeBoxSizeWidth,
height: this.clickNode.clickNodeBoxSizeHeight,
},
position: {
x: this.clickNode.positionx*1.y: this.clickNode.positiony*1}})}}},Copy the codeI almost forgot the most important thing is to transform data
// Convert the page graphics to JSON
let preservationDataTemp = graph.toJSON()
// To draw the graph json to the page, you need to pay attention to the basic width and height,
// The grid configuration should not be changed.
graph.fromJSON(preservationDataTemp)
Copy the codeOkay, that’s it. It’s boring. But basically direct copy works. One unit