Created
October 24, 2019 09:29
-
-
Save ChrisShen93/3037a21d5c17cd2e42e8132689b8dbdd to your computer and use it in GitHub Desktop.
VGEditor Flow readOnly mode demo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export default { | |
'nodes': [{ | |
'type': 'node', | |
'size': '72*72', | |
'shape': 'flow-circle', | |
'color': '#FA8C16', | |
'label': 'Start', | |
'x': 468, | |
'y': 61, | |
'id': '01729835', | |
'index': 0 | |
}, { | |
'type': 'node', | |
'size': '80*48', | |
'shape': 'flow-rect', | |
'color': '#1890FF', | |
'label': 'Normal', | |
'x': 468, | |
'y': 201.5, | |
'id': 'b69121d6', | |
'index': 1 | |
}, { | |
'type': 'node', | |
'size': '80*72', | |
'shape': 'flow-rhombus', | |
'color': '#13C2C2', | |
'label': 'Decision', | |
'x': 468, | |
'y': 339.5, | |
'id': 'a459eb24', | |
'index': 2 | |
}, { | |
'type': 'node', | |
'size': '80*48', | |
'shape': 'flow-rect', | |
'color': '#1890FF', | |
'label': 'Normal', | |
'x': 672.3, | |
'y': 201.6, | |
'id': '18e81721', | |
'index': 3 | |
}, { | |
'type': 'node', | |
'size': '72*72', | |
'shape': 'flow-circle', | |
'color': '#FA8C16', | |
'label': 'end', | |
'x': 468, | |
'y': 502.00000000000006, | |
'id': '03511b2c', | |
'index': 9 | |
}], | |
'edges': [{ | |
'source': '01729835', | |
'sourceAnchor': 2, | |
'target': 'b69121d6', | |
'targetAnchor': 0, | |
'id': '070785c1', | |
'index': 4 | |
}, { | |
'source': 'b69121d6', | |
'sourceAnchor': 2, | |
'target': 'a459eb24', | |
'targetAnchor': 0, | |
'id': 'a3bbe682', | |
'index': 5 | |
}, { | |
'source': 'a459eb24', | |
'sourceAnchor': 1, | |
'target': '18e81721', | |
'targetAnchor': 2, | |
'id': '25f2209d', | |
'index': 6 | |
}, { | |
'source': '18e81721', | |
'sourceAnchor': 3, | |
'target': 'b69121d6', | |
'targetAnchor': 1, | |
'id': 'd3a887fa', | |
'index': 7 | |
}, { | |
'source': 'a459eb24', | |
'sourceAnchor': 2, | |
'target': '03511b2c', | |
'targetAnchor': 0, | |
'id': '494f8cc4', | |
'index': 8 | |
}] | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<v-g-editor class="demo" ref="flowChart"> | |
<div class="demo-chart"> | |
<div class="demo-chart__header"> | |
<flow-toolbar/> | |
</div> | |
<div class="demo-chart__container"> | |
<div class="demo-chart__sidebar"> | |
<flow-item-panel/> | |
</div> | |
<div class="demo-chart__main"> | |
<flow :data="flowChartData" :onNodeClick="handleNodeClick" :graph="{ mode: 'readOnly' }"/> | |
</div> | |
<div class="demo-chart__panel"> | |
<flow-detail-panel/> | |
<editor-minimap/> | |
</div> | |
</div> | |
</div> | |
<flow-context-menu/> | |
<register-edge name="custom-polyline" extend="flow-polyline" :config="customEdgeConfig"/> | |
</v-g-editor> | |
</template> | |
<script> | |
import VGEditor, { Flow, RegisterEdge } from 'vg-editor' | |
import { FlowToolbar } from '../components/EditorToolbar' | |
import { FlowItemPanel } from '../components/EditorItemPanel' | |
import { FlowDetailPanel } from '../components/EditorDetailPanel' | |
import EditorMinimap from '../components/EditorMinimap' | |
import { FlowContextMenu } from '../components/EditorContextMenu' | |
import data from './data' | |
export default { | |
name: 'FlowDemo', | |
methods: { | |
handleNodeClick (e) { | |
console.log(e) | |
} | |
}, | |
data () { | |
return { | |
flowChartData: data, | |
customEdgeConfig: { | |
getActivedStyle (item) { | |
return { | |
lineWidth: 3 | |
} | |
}, | |
getSelectedStyle (item) { | |
return { | |
lineWidth: 3 | |
} | |
} | |
} | |
} | |
}, | |
components: { | |
VGEditor, | |
Flow, | |
FlowToolbar, | |
FlowItemPanel, | |
FlowDetailPanel, | |
EditorMinimap, | |
FlowContextMenu, | |
RegisterEdge | |
} | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment