UNPKG

15.2 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4<meta charset="utf-8"/>
5<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>
6
7<link rel="stylesheet" href="../assets/css/style.css"/>
8<!-- Copyright 1998-2021 by Northwoods Software Corporation. --> <title> GoJS on Different Platforms -- Northwoods Software </title>
9 <link rel="stylesheet" href="../assets/css/prism.css" />
10 </head>
11 <script>
12
13 window.diagrams = [];
14 window.goCode = function(pre, w, h, parentid, animation) {
15 window.diagrams.push([pre, w, h, parentid, animation]);
16 }
17 </script>
18 <body>
19 <nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary">
20 <div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2">
21 <div class="md:pl-4">
22 <a class="text-white hover:text-white no-underline hover:no-underline
23 font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary " href="../">
24 <h1 class="mb-0 p-1 ">GoJS</h1>
25 </a>
26 </div>
27 <button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation">
28 <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
29 <path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
30 <path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
31 </svg>
32 </button>
33 <div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20">
34 <ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0">
35 <li class="p-1 sm:p-0"><a class="topnav-link" href="../learn/">Learn</a></li>
36 <li class="p-1 sm:p-0"><a class="topnav-link" href="../samples/">Samples</a></li>
37 <li class="p-1 sm:p-0"><a class="topnav-link" href="../intro/">Intro</a></li>
38 <li class="p-1 sm:p-0"><a class="topnav-link" href="../api/">API</a></li>
39 <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li>
40 <li class="p-1 sm:p-0"><a class="topnav-link" href="../download.html">Download</a></li>
41 <li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li>
42 <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html"
43 target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a></li>
44 <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html"
45 target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li>
46 </ul>
47 </div>
48 </div>
49 <hr class="border-b border-gray-600 opacity-50 my-0 py-0" />
50 </nav>
51
52 <div class="md:flex flex-col md:flex-row md:min-h-screen w-full max-w-screen-xl mx-auto">
53
54 <div id="navSide" class="flex flex-col w-full md:w-40 lg:w-48 text-gray-700 bg-white flex-shrink-0">
55 <div class="flex-shrink-0 px-8 py-4">
56 <button id="navButton" class="rounded-lg md:hidden focus:outline-none focus:ring" aria-label="Navigation">
57 <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
58 <path id="navOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
59 <path id="navClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
60 </svg>
61 </button>
62 </div>
63 <nav id="navList" class="min-h-screen hidden md:block sidebar-nav flex-grow px-1 lg:px-4 pb-4 md:pb-0 md:overflow-y-auto break-words">
64 <a href="index.html">Basics</a>
65 <a href="buildingObjects.html">Building Parts</a>
66 <a href="usingModels.html">Using Models</a>
67 <a href="dataBinding.html">Data Binding</a>
68 <a href="react.html">GoJS with React</a>
69 <a href="angular.html">GoJS with Angular</a>
70 <a href="textBlocks.html">TextBlocks</a>
71 <a href="shapes.html">Shapes</a>
72 <a href="pictures.html">Pictures</a>
73 <a href="panels.html">Panels</a>
74 <a href="tablePanels.html">Table Panels</a>
75 <a href="brush.html">Brushes</a>
76 <a href="sizing.html">Sizing Objects</a>
77 <a href="itemArrays.html">Item Arrays</a>
78 <a href="changedEvents.html">Changed Events</a>
79 <a href="transactions.html">Transactions</a>
80 <a href="viewport.html">Coordinates</a>
81 <a href="initialView.html">Initial View</a>
82 <a href="collections.html">Collections</a>
83 <a href="links.html">Links</a>
84 <a href="linkLabels.html">Link Labels</a>
85 <a href="connectionPoints.html">Link Points</a>
86 <a href="ports.html">Ports</a>
87 <a href="nodes.html">Nodes</a>
88 <a href="debugging.html">Debugging</a>
89 <a href="layouts.html">Layouts</a>
90 <a href="trees.html">Trees</a>
91 <a href="subtrees.html">SubTrees</a>
92 <a href="groups.html">Groups</a>
93 <a href="subgraphs.html">SubGraphs</a>
94 <a href="sizedGroups.html">Sized Groups</a>
95 <a href="selection.html">Selection</a>
96 <a href="highlighting.html">Highlighting</a>
97 <a href="animation.html">Animation</a>
98 <a href="toolTips.html">ToolTips</a>
99 <a href="contextmenus.html">Context Menus</a>
100 <a href="events.html">Diagram Events</a>
101 <a href="tools.html">Tools</a>
102 <a href="commands.html">Commands</a>
103 <a href="permissions.html">Permissions</a>
104 <a href="validation.html">Validation</a>
105 <a href="HTMLInteraction.html">HTML Interaction</a>
106 <a href="layers.html">Layers &amp; Z-ordering</a>
107 <a href="palette.html">Palette</a>
108 <a href="overview.html">Overview</a>
109 <a href="resizing.html">Resizing Diagrams</a>
110 <a href="replacingDeleting.html">Replacing and Deleting</a>
111 <a href="buttons.html">Buttons</a>
112 <a href="templateMaps.html">Template Maps</a>
113 <a href="legends.html">Legends and Titles</a>
114 <a href="extensions.html">Extensions</a>
115 <a href="geometry.html">Geometry Strings</a>
116 <a href="grids.html">Grid Patterns</a>
117 <a href="graduatedPanels.html">Graduated Panels</a>
118 <a href="makingImages.html">Diagram Images</a>
119 <a href="makingSVG.html">Diagram SVG</a>
120 <a href="printing.html">Printing</a>
121 <a href="serverSideImages.html">Server-side Images</a>
122 <a href="nodeScript.html">GoJS in Node.js</a>
123 <a href="testing.html">Testing</a>
124 <a href="storage.html">Storage</a>
125 <a href="performance.html">Performance</a>
126 <a href="source.html">Building from Source</a>
127 <a href="platforms.html">Platforms</a>
128 <a href="deployment.html">Deployment</a>
129 </nav>
130 </div>
131 <div class="pt-4 px-2 md:px-0 lg:px-4 pb-16 w-full overflow-hidden">
132
133
134
135
136<h1>Using GoJS on Different Platforms</h1>
137<p>
138 GoJS is intended to run in any environment that executes JavaScript.
139 This includes on browsers and within browser frameworks, and also in headless contexts such as Node.js.
140</p>
141
142<h2>React, Angular, Vue</h2>
143<p>
144 We provide samples and components for common SPA frameworks.
145 GoJS has no dependencies of its own, and it is our expectation that the library should run within any framework.
146 If you are encountering integration issues with an uncommon framework,
147 please <a href="https://www.nwoods.com/contact.html" target="_blank">contact us</a>.
148</p>
149<p>
150 We maintain examples for common frameworks:
151</p>
152<ul>
153 <li>
154 <strong>React:</strong> We provide a <a href="https://github.com/NorthwoodsSoftware/gojs-react" target="_blank">React Component</a>
155 as an <a href="https://npmjs.com/gojs-react" target="_blank">NPM package</a> and
156 a usage <a href="https://github.com/NorthwoodsSoftware/gojs-react-basic" target="_blank">sample</a>.
157 See the intro page <a href="react.html">Using GoJS with React</a> for more information on React integration.
158 </li>
159 <li>
160 <strong>Angular:</strong> We provide an <a href="https://github.com/NorthwoodsSoftware/gojs-angular" target="_blank">Angular Component</a>
161 as an <a href="https://npmjs.com/gojs-angular" target="_blank">NPM package</a> and
162 a usage <a href="https://github.com/NorthwoodsSoftware/gojs-angular-basic" target="_blank">sample</a>.
163 See the intro page <a href="angular.html">Using GoJS with Angular</a> for more information on Angular integration.
164 </li>
165 <li>
166 <strong>Vue:</strong> We provide a <a href="../samples/vue.html">Vue.js Sample</a>.
167 </li>
168</ul>
169
170<h2>Electron</h2>
171<p>
172 GoJS can be used in Electron apps.
173 We provide a <a href="https://github.com/NorthwoodsSoftware/GoJS-projects/tree/master/electron-circuit" target="_blank">sample Electron app using GoJS</a>.
174 Note that an unlimited domains license is required for use when the page is not served from a domain.
175</p>
176
177<h2>Node.js and Headless Environments</h2>
178<p>
179 GoJS can be used in environments that do not have a DOM.
180 This can be useful for server We provide a <a href="https://gojs.net/latest/intro/nodeScript.html">Node.js script example</a>.
181 We also have a Puppeteer example in the <a href="serverSideImages.html">Server-side images intro page</a>.
182</p>
183
184<h2>Within iFrames</h2>
185<p>
186 GoJS can run within iFrames.
187 However, since the library references the global context, such as <code>window</code> on browsers,
188 it is best to invoke GoJS code from within the frame it is used.
189</p>
190
191 </div>
192 </div>
193
194 <div class="bg-nwoods-primary">
195 <section class="max-w-screen-lg text-white container mx-auto py-2 px-12">
196 <p id="version" class="leading-none mb-2 my-4">GoJS</p>
197 </section>
198 </div><footer class="bg-nwoods-primary text-white">
199 <div class="container max-w-screen-lg mx-auto px-8">
200 <div class="w-full py-6">
201
202 <div class="max-w-screen-lg xl:max-w-screen-xl mx-auto px-4 sm:px-6 md:px-8">
203 <ul class="text-sm font-medium pb-14 sm:pb-20 grid grid-cols-1 sm:grid-cols-3 gap-y-10">
204 <li class="list-none row-span-2">
205 <h2 class="text-base font-semibold tracking-wide">GoJS</h2>
206 <ul class="list-none space-y-4 md:space-y-1 px-0">
207 <li>
208 <a href="../samples/index.html">Samples</a>
209 </li>
210 <li>
211 <a href="../learn/index.html">Learn</a>
212 </li>
213 <li>
214 <a href="../intro/index.html">Intro</a>
215 </li>
216 <li>
217 <a href="../api/index.html">API</a>
218 </li>
219 <li>
220 <a href="../changelog.html">Changelog</a>
221 </li>
222 <li>
223 <a href="https://github.com/NorthwoodsSoftware/GoJS">GitHub</a>
224 </li>
225 </ul>
226 </li>
227 <li class="list-none row-span-2">
228 <h2 class="text-base font-semibold tracking-wide">Support</h2>
229 <ul class="list-none space-y-4 md:space-y-1 px-0">
230 <li>
231 <a href="https://www.nwoods.com/contact.html"
232 target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a>
233 </li>
234 <li>
235 <a href="https://forum.nwoods.com/c/gojs">Forum</a>
236 </li>
237 <li>
238 <a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a>
239 </li>
240 <li>
241 <a href="https://www.nwoods.com/sales/index.html"
242 target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a>
243 </li>
244 <li>
245 <a href="https://www.youtube.com/channel/UC9We8EoX596-6XFjJDtZIDg">Videos</a>
246 </li>
247 </ul>
248 </li>
249 <li class="list-none row-span-2">
250 <h2 class="text-base font-semibold tracking-wide">Company</h2>
251 <ul class="list-none space-y-4 md:space-y-1 px-0">
252 <li>
253 <a href="https://www.nwoods.com">Northwoods</a>
254 </li>
255 <li>
256 <a href="https://www.nwoods.com/about.html">About Us</a>
257 </li>
258 <li>
259 <a href="https://www.nwoods.com/contact.html">Contact Us</a>
260 </li>
261 <li>
262 <a href="https://twitter.com/northwoodsgo">Twitter</a>
263 </li>
264
265 </ul>
266 </li>
267 </ul>
268
269
270 <p class="text-sm text-gray-100 md:mb-6">
271 Copyright 1998-2021 <a class="text-white" href="https://www.nwoods.com">Northwoods Software</a>
272 </p>
273 </div>
274 </div>
275</footer> </body>
276
277<script async src="https://www.googletagmanager.com/gtag/js?id=UA-1506307-5"></script>
278<script>
279 window.dataLayer = window.dataLayer || [];
280 function gtag(){dataLayer.push(arguments);}
281 gtag('js', new Date()); gtag('config', 'UA-1506307-5');
282 var getOutboundLink = function(url, label) {
283 gtag('event', 'click', {
284 'event_category': 'outbound',
285 'event_label': label,
286 'transport_type': 'beacon'
287 });
288 }
289
290 // topnav
291 var topButton = document.getElementById("topnavButton");
292 var topnavList = document.getElementById("topnavList");
293 topButton.addEventListener("click", function() {
294 this.classList.toggle("active");
295 topnavList.classList.toggle("hidden");
296 document.getElementById("topnavOpen").classList.toggle("hidden");
297 document.getElementById("topnavClosed").classList.toggle("hidden");
298 });
299</script>
300 <script src="../assets/js/prism.js"></script>
301 <script src="../release/go.js"></script>
302 <script src="../assets/js/goDoc.js"></script>
303 <script>
304 document.addEventListener("DOMContentLoaded", function() {
305 if (window.go) document.getElementById('version').textContent = "GoJS version " + go.version;
306 if (window.goDoc) window.goDoc();
307 var d = window.diagrams;
308 for (var i = 0; i < d.length; i++) {
309 var dargs = d[i];
310 goCodeExecute(dargs[0], dargs[1], dargs[2], dargs[3], dargs[4]);
311 }
312 if (window.extra) window.extra();
313 });
314 </script>
315</html>