whu-luojian / gojs-vue Goto Github PK

<div data-v-3757022f="" data-v-3f9ddbb3="" class="gojs-diagram gojs-diagram" style="-webkit-tap-highlight-color: rgba(255, 255, 255, 0);"><canvas tabindex="0" width="448" height="1" style="position: absolute; top: 0px; left: 0px; z-index: 2; user-select: none; touch-action: none; width: 299px; height: 1px;">This text is displayed if your browser does not support the Canvas HTML element.</canvas><div style="position: absolute; overflow: auto; width: 316px; height: 1px; z-index: 1;"><div style="position: absolute; width: 1px; height: 116.684px;"></div></div></div>

<template>
<div class="ltr">
    <VueDiagram 
    divClassName='gojs-diagram' 
    :initDiagram="initDiagram"
    :nodeDataArray="nodeDataArray"
    :linkDataArray="linkDataArray"
    :modelData="modelData"
    @modelChange="handleModelChange" />
    
</div>
</template>

<script>
import  {VueDiagram} from 'gojs-vue'

export default {

    components:{
        VueDiagram
    },
    name: 'allItems',
    data() {
        return {
            modelData: {
                canRelink: true
            },
            nodeDataArray: [{
                    key: 'Alpha',
                    color: 'lightblue'
                },
                {
                    key: 'Beta',
                    color: 'orange'
                },
                {
                    key: 'Gamma',
                    color: 'lightgreen'
                },
                {
                    key: 'Delta',
                    color: 'pink'
                },
            ],
            linkDataArray: [{
                    key: -1,
                    from: 'Alpha',
                    to: 'Beta'
                },
                {
                    key: -2,
                    from: 'Alpha',
                    to: 'Gamma'
                },
                {
                    key: -3,
                    from: 'Beta',
                    to: 'Beta'
                },
                {
                    key: -4,
                    from: 'Gamma',
                    to: 'Delta'
                },
                {
                    key: -5,
                    from: 'Delta',
                    to: 'Alpha'
                }
            ]
        }
    },
  
    methods: {
        initDiagram() {
            const $ = go.GraphObject.make;
            const diagram = $(go.Diagram, {
                'undoManager.isEnabled': true,
                model: $(go.GraphLinksModel, {
                    linkKeyProperty: 'key'
                })
            });

            
            diagram.nodeTemplate = $(go.Node, 'Auto',
                $(go.Shape, 'RoundedRectangle', {
                        strokeWidth: 0,
                        fill: 'white',
                        portId: '',
                        fromLinkable: true,
                        toLinkable: true,
                        cursor: 'pointer'
                    },
                    new go.Binding('fill', 'color')),
                $(go.TextBlock, {
                        margin: 8,
                        font: 'bold 14px sans-serif',
                        stroke: '#333'
                    },
                    new go.Binding('text', 'key'))
            )
            diagram.linkTemplate = $(go.Link,
                new go.Binding('relinkableFrom', 'canRelink').ofModel(),
                new go.Binding('relinkableTo', 'canRelink').ofModel(),
                $(go.Shape),
                $(go.Shape, {
                    toArrow: 'Standard'
                })
            )
            return diagram
        },
  
        handleModelChange(data) {
            const insertedNodeKeys = data.insertedNodeKeys
            const modifiedNodeData = data.modifiedNodeData
            const removedNodeKeys = data.removedNodeKeys
            const insertedLinkKeys = data.insertedLinkKeys
            const modifiedLinkData = data.modifiedLinkData
            const removedLinkKeys = data.removedLinkKeys

            // ... make state changes
        }
    },
  
}
</script>

<style scoped>
.gojs-diagram {
    position: relative;
    width: 100%;
    height: 100%;
}
</style>