create-gojs-kit
Version:
A CLI for downloading GoJS samples, extensions, and docs
405 lines (366 loc) • 16.6 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>
<meta name="description" content="Interactive diagram implemented by GoJS using Vue.js, including a diagram component and model binding." />
<meta itemprop="description" content="Interactive diagram implemented by GoJS using Vue.js, including a diagram component and model binding." />
<meta property="og:description" content="Interactive diagram implemented by GoJS using Vue.js, including a diagram component and model binding." />
<meta name="twitter:description" content="Interactive diagram implemented by GoJS using Vue.js, including a diagram component and model binding." />
<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="../assets/css/style.css">
<!-- Copyright 1998-2025 by Northwoods Software Corporation. -->
<meta itemprop="name" content="Minimal Vue.js Sample" />
<meta property="og:title" content="Minimal Vue.js Sample" />
<meta name="twitter:title" content="Minimal Vue.js Sample" />
<meta property="og:image" content="https://gojs.net/latest/assets/images/screenshots/vue.png" />
<meta itemprop="image" content="https://gojs.net/latest/assets/images/screenshots/vue.png" />
<meta name="twitter:image" content="https://gojs.net/latest/assets/images/screenshots/vue.png" />
<meta property="og:url" content="https://gojs.net/latest/samples/vue.html" />
<meta property="twitter:url" content="https://gojs.net/latest/samples/vue.html" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:type" content="website" />
<meta property="twitter:domain" content="gojs.net" />
<title>
Minimal Vue.js Sample | GoJS Diagramming Library
</title>
</head>
<body>
<!-- This top nav is not part of the sample code -->
<nav id="navTop" class=" w-full h-[var(--topnav-h)] z-30 bg-white border-b border-b-gray-200">
<div class="max-w-screen-xl mx-auto flex flex-wrap items-start justify-between px-4">
<a class="text-white bg-nwoods-primary font-bold !leading-[calc(var(--topnav-h)_-_1px)] my-0 px-2 text-4xl lg:text-5xl logo"
href="../">
GoJS
</a>
<div class="relative">
<button id="topnavButton" class="h-[calc(var(--topnav-h)_-_1px)] px-2 m-0 text-gray-900 bg-inherit shadow-none md:hidden hover:!bg-inherit hover:!text-nwoods-accent hover:!shadow-none" aria-label="Navigation">
<svg class="h-7 w-7 block" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<div id="topnavList" class="hidden md:block">
<div class="absolute right-0 z-30 flex flex-col items-end rounded border border-gray-200 p-4 pl-12 shadow bg-white text-gray-900 font-semibold
md:flex-row md:space-x-4 md:items-start md:border-0 md:p-0 md:shadow-none md:bg-inherit">
<a href="../learn/">Learn</a>
<a href="../samples/">Samples</a>
<a href="../intro/">Intro</a>
<a href="../api/">API</a>
<a href="../download.html">Download</a>
<a href="https://forum.nwoods.com/c/gojs/11" target="_blank" rel="noopener">Forum</a>
<a id="tc" href="https://nwoods.com/contact.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/contact.html', 'contact');">Contact</a>
<a id="tb" href="https://nwoods.com/sales/index.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/sales/index.html', 'buy');">Buy</a>
</div>
</div>
</div>
</div>
</nav>
<script>
window.addEventListener("DOMContentLoaded", function () {
// topnav
var topButton = document.getElementById("topnavButton");
var topnavList = document.getElementById("topnavList");
if (topButton && topnavList) {
topButton.addEventListener("click", function (e) {
topnavList
.classList
.toggle("hidden");
e.stopPropagation();
});
document.addEventListener("click", function (e) {
// if the clicked element isn't the list, close the list
if (!topnavList.classList.contains("hidden") && !e.target.closest("#topnavList")) {
topButton.click();
}
});
// set active <a> element
var url = window
.location
.href
.toLowerCase();
var aTags = topnavList.getElementsByTagName('a');
for (var i = 0; i < aTags.length; i++) {
var lowerhref = aTags[i]
.href
.toLowerCase();
if (lowerhref.endsWith('.html'))
lowerhref = lowerhref.slice(0, -5);
if (url.startsWith(lowerhref)) {
aTags[i]
.classList
.add('active');
break;
}
}
}
});
</script>
<div class="flex flex-col prose">
<div class="w-full max-w-screen-xl mx-auto">
<!-- * * * * * * * * * * * * * -->
<!-- Start of GoJS sample code -->
<script src="https://cdn.jsdelivr.net/npm/gojs@3.1.0"></script>
<div id="allSampleContent" class="p-4 w-full">
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script id="code">
function init() {
Vue.component('diagram', {
template: '<div></div>', // just a plain DIV
props: ['modelData'], // accept model data as a parameter
mounted: function () {
var self = this;
var myDiagram = new go.Diagram(this.$el, {
layout: new go.TreeLayout({
angle: 90,
arrangement: go.TreeArrangement.Horizontal
}),
'undoManager.isEnabled': true,
// Model ChangedEvents get passed up to component users
ModelChanged: e => {
self.$emit('model-changed', e);
},
ChangedSelection: e => {
self.$emit('changed-selection', e);
}
});
myDiagram.nodeTemplate =
new go.Node('Auto')
.add(
new go.Shape({
fill: 'white',
strokeWidth: 0,
portId: '',
fromLinkable: true,
toLinkable: true,
cursor: 'pointer'
})
.bind('fill', 'color'),
new go.TextBlock({ margin: 8, editable: true })
.bindTwoWay('text')
);
myDiagram.linkTemplate =
new go.Link({ relinkableFrom: true, relinkableTo: true })
.add(
new go.Shape(),
new go.Shape({ toArrow: 'OpenTriangle' })
);
this.diagram = myDiagram;
this.updateModel(this.modelData);
},
watch: {
modelData: function (val) {
this.updateModel(val);
}
},
methods: {
model: function () {
return this.diagram.model;
},
updateModel: function (val) {
// No GoJS transaction permitted when replacing Diagram.model.
if (val instanceof go.Model) {
this.diagram.model = val;
} else {
var m = new go.GraphLinksModel();
if (val) {
for (var p in val) {
m[p] = val[p];
}
}
this.diagram.model = m;
}
},
updateDiagramFromData: function () {
this.diagram.startTransaction();
// This is very general but very inefficient.
// It would be better to modify the diagramData data by calling
// Model.setDataProperty or Model.addNodeData, et al.
this.diagram.updateAllRelationshipsFromData();
this.diagram.updateAllTargetBindings();
this.diagram.commitTransaction('updated');
}
}
});
myApp = new Vue({
el: '#sample',
data: {
diagramData: {
// passed to <diagram> as its modelData
nodeDataArray: [
{ key: 1, text: 'Alpha', color: 'lightblue' },
{ key: 2, text: 'Beta', color: 'orange' },
{ key: 3, text: 'Gamma', color: 'lightgreen' },
{ key: 4, text: 'Delta', color: 'pink' }
],
linkDataArray: [
{ from: 1, to: 2 },
{ from: 1, to: 3 },
{ from: 3, to: 4 }
]
},
currentNode: null,
savedModelText: '',
counter: 1, // used by addNode
counter2: 4 // used by modifyStuff
},
computed: {
currentNodeText: {
get: function () {
var node = this.currentNode;
if (node instanceof go.Node) {
return node.data.text;
} else {
return '';
}
},
set: function (val) {
var node = this.currentNode;
if (node instanceof go.Node) {
var model = this.model();
model.startTransaction();
model.setDataProperty(node.data, 'text', val);
model.commitTransaction('edited text');
}
}
}
},
methods: {
// get access to the GoJS Model of the GoJS Diagram
model: function () {
return this.$refs.diag.model();
},
// tell the GoJS Diagram to update based on the arbitrarily modified model data
updateDiagramFromData: function () {
this.$refs.diag.updateDiagramFromData();
},
// this event listener is declared on the <diagram>
modelChanged: function (e) {
if (e.isTransactionFinished) {
// show the model data in the page's TextArea
this.savedModelText = e.model.toJson();
}
},
changedSelection: function (e) {
var node = e.diagram.selection.first();
if (node instanceof go.Node) {
this.currentNode = node;
this.currentNodeText = node.data.text;
} else {
this.currentNode = null;
this.currentNodeText = '';
}
},
// Here we modify the GoJS Diagram's Model using its methods,
// which can be much more efficient than modifying some memory and asking
// the GoJS Diagram to find differences and update accordingly.
// Undo and Redo will work as expected.
addNode: function () {
var model = this.model();
model.startTransaction();
model.setDataProperty(model.findNodeDataForKey(4), 'color', 'purple');
var data = { text: 'NEW ' + this.counter++, color: 'yellow' };
model.addNodeData(data);
model.addLinkData({ from: 3, to: model.getKeyForNodeData(data) });
model.commitTransaction('added Node and Link');
// also manipulate the Diagram by changing its Diagram.selection collection
var diagram = this.$refs.diag.diagram;
diagram.select(diagram.findNodeForData(data));
},
// Here we modify VUE's view model directly, and
// then ask the GoJS Diagram to update everything from the data.
// This is less efficient than calling the appropriate GoJS Model methods.
// NOTE: Undo will not be able to restore all of the state properly!!
modifyStuff: function () {
var data = this.diagramData;
data.nodeDataArray[0].color = 'red';
// Note here that because we do not have the GoJS Model,
// we cannot find out what values would be unique keys, for reference by the link data.
data.nodeDataArray.push({ key: ++this.counter2, text: this.counter2.toString(), color: 'orange' });
data.linkDataArray.push({ from: 2, to: this.counter2 });
this.updateDiagramFromData();
}
}
});
}
window.addEventListener('DOMContentLoaded', init);
</script>
<div id="sample">
<diagram
ref="diag"
v-bind:model-data="diagramData"
v-on:model-changed="modelChanged"
v-on:changed-selection="changedSelection"
style="border: solid 1px black; width: 100%; height: 400px"></diagram>
<button v-on:click="addNode">Add Child to Gamma</button>
<button v-on:click="modifyStuff">Modify view model data without undo</button>
<br />Current Node:
<input v-model.lazy="currentNodeText" v-bind:disabled="currentNode === null" />
<br />The saved GoJS Model:
<textarea style="width: 100%; height: 250px">{{ savedModelText }}</textarea>
<p class="box bg-info">
This is a <a href="https://vuejs.org">Vue.js</a> sample. For a Vue 3 sample, clone the GitHub repository:
<a href="https://github.com/NorthwoodsSoftware/gojs-vue-basic">Vue 3 sample using GoJS called <strong>gojs-vue-basic</strong></a
>.
</p>
<p>
The GoJS Diagram is held in a "diagram" component, and only exposes a small fraction of the functionality of <a>Diagram</a>. That includes the "modelData"
property, to initialize the Diagram to show a model, and the "diagram" property, to get access to the <a>Diagram</a>.
</p>
<p>
That component also raises two events: "model-changed" corresponding to <a>Model.addChangedListener</a>, and "changed-selection" for the "ChangedSelection"
<a>DiagramEvent</a>.
</p>
<p>
That component also supports two different ways of modifying the diagram: access to the <a>Model</a> via the "model" method so that code can call Model
methods such as <a>Model.setDataProperty</a>, and an "updateDiagramFromData" method. The latter permits data changes without calling Model methods to notify
Diagrams showing the model, but at the cost of not being able to support undo and redo.
</p>
</div>
</div>
<!-- * * * * * * * * * * * * * -->
<!-- End of GoJS sample code -->
</div>
<div id="allTagDescriptions" class="p-4 w-full max-w-screen-xl mx-auto">
<hr/>
<h3 class="text-xl">GoJS Features in this sample</h3>
<!-- blacklist tags that do not correspond to a specific GoJS feature -->
<h4>GoJS on Different Platforms</h4>
<p>
GoJS is intended to run in any environment that executes JavaScript.
This includes on browsers and within browser frameworks, and also in headless contexts such as Node.js.
</p>
<p>
We maintain examples for common frameworks:
</p>
<ul>
<li>
<strong>React:</strong> We provide a <a href="https://github.com/NorthwoodsSoftware/gojs-react" target="_blank" rel="noopener">React Component</a>
as an <a href="https://npmjs.com/gojs-react" target="_blank" rel="noopener">NPM package</a> and
a usage <a href="https://github.com/NorthwoodsSoftware/gojs-react-basic" target="_blank" rel="noopener">sample</a>.
See the intro page <a href="../intro/react.html">Using GoJS with React</a> for more information on React integration.
</li>
<li>
<strong>Angular:</strong> We provide an <a href="https://github.com/NorthwoodsSoftware/gojs-angular" target="_blank" rel="noopener">Angular Component</a>
as an <a href="https://npmjs.com/gojs-angular" target="_blank" rel="noopener">NPM package</a> and
a usage <a href="https://github.com/NorthwoodsSoftware/gojs-angular-basic" target="_blank" rel="noopener">sample</a>.
See the intro page <a href="../intro/angular.html">Using GoJS with Angular</a> for more information on Angular integration.
</li>
<li>
<strong>Vue:</strong> We provide a <a href="../samples/vue.html">Vue.js Sample</a>.
</li>
</ul>
<p>
More information, including usage on frameworks including Electron, Blazor, and node.js, can be found at the <a href="../intro/platforms.html">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#frameworks">Related samples</a>
</p>
<hr>
</div>
</div>
</body>
<!-- This script is part of the gojs.net website, and is not needed to run the sample -->
<script src="../assets/js/goSamples.js"></script>
</html>