gojs

<!DOCTYPE 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"/> <link rel="stylesheet" href="../assets/css/style.css"/>  <title> Building GoJS from Source -- Northwoods Software </title> <link rel="stylesheet" href="../assets/css/prism.css" /> </head> <script> window.diagrams = []; window.goCode = function(pre, w, h, parentid, animation) { window.diagrams.push([pre, w, h, parentid, animation]); } </script> <body> <nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary"> <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"> <div class="md:pl-4"> <a class="text-white hover:text-white no-underline hover:no-underline font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary " href="../"> <h1 class="my-0 p-1 ">GoJS</h1> </a> </div> <button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation"> <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6"> <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> <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> </svg> </button> <div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20"> <ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0"> <li class="p-1 sm:p-0"><a class="topnav-link" href="../learn/">Learn</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="../samples/">Samples</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="../intro/">Intro</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="../api/">API</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="../download.html">Download</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html" target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html" target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li> </ul> </div> </div> <hr class="border-b border-gray-600 opacity-50 my-0 py-0" /> </nav> <div class="md:flex flex-col md:flex-row md:min-h-screen w-full max-w-screen-xl mx-auto"> <div id="navSide" class="flex flex-col w-full md:w-40 lg:w-48 text-gray-700 bg-white flex-shrink-0"> <div class="flex-shrink-0 px-8 py-4"> <button id="navButton" class="rounded-lg md:hidden focus:outline-none focus:ring" aria-label="Navigation"> <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6"> <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> <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> </svg> </button> </div> <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"> <a href="index.html">Basics</a> <a href="buildingObjects.html">Building Parts</a> <a href="usingModels.html">Using Models</a> <a href="dataBinding.html">Data Binding</a> <a href="react.html">GoJS with React</a> <a href="angular.html">GoJS with Angular</a> <a href="textBlocks.html">TextBlocks</a> <a href="shapes.html">Shapes</a> <a href="pictures.html">Pictures</a> <a href="panels.html">Panels</a> <a href="tablePanels.html">Table Panels</a> <a href="brush.html">Brushes</a> <a href="sizing.html">Sizing Objects</a> <a href="itemArrays.html">Item Arrays</a> <a href="changedEvents.html">Changed Events</a> <a href="transactions.html">Transactions</a> <a href="viewport.html">Coordinates</a> <a href="initialView.html">Initial View</a> <a href="collections.html">Collections</a> <a href="links.html">Links</a> <a href="linkLabels.html">Link Labels</a> <a href="connectionPoints.html">Link Points</a> <a href="ports.html">Ports</a> <a href="nodes.html">Nodes</a> <a href="typings.html">Typings</a> <a href="debugging.html">Debugging</a> <a href="layouts.html">Layouts</a> <a href="trees.html">Trees</a> <a href="subtrees.html">SubTrees</a> <a href="groups.html">Groups</a> <a href="subgraphs.html">SubGraphs</a> <a href="sizedGroups.html">Sized Groups</a> <a href="selection.html">Selection</a> <a href="highlighting.html">Highlighting</a> <a href="animation.html">Animation</a> <a href="toolTips.html">ToolTips</a> <a href="contextmenus.html">Context Menus</a> <a href="events.html">Diagram Events</a> <a href="tools.html">Tools</a> <a href="commands.html">Commands</a> <a href="permissions.html">Permissions</a> <a href="validation.html">Validation</a> <a href="HTMLInteraction.html">HTML Interaction</a> <a href="layers.html">Layers & Z-ordering</a> <a href="palette.html">Palette</a> <a href="overview.html">Overview</a> <a href="resizing.html">Resizing Diagrams</a> <a href="replacingDeleting.html">Replacing and Deleting</a> <a href="buttons.html">Buttons</a> <a href="templateMaps.html">Template Maps</a> <a href="legends.html">Legends and Titles</a> <a href="extensions.html">Extensions</a> <a href="geometry.html">Geometry Strings</a> <a href="grids.html">Grid Patterns</a> <a href="graduatedPanels.html">Graduated Panels</a> <a href="makingImages.html">Diagram Images</a> <a href="makingSVG.html">Diagram SVG</a> <a href="printing.html">Printing</a> <a href="serverSideImages.html">Server-side Images</a> <a href="nodeScript.html">GoJS in Node.js</a> <a href="testing.html">Testing</a> <a href="storage.html">Storage</a> <a href="performance.html">Performance</a> <a href="source.html">Building from Source</a> <a href="platforms.html">Platforms</a> <a href="deployment.html">Deployment</a> </nav> </div> <div class="pt-4 px-2 md:px-0 lg:px-4 pb-16 w-full overflow-hidden"> <h1>Building GoJS from TypeScript Sources</h1> <p> All customers can use the <code>go.js</code> and <code>go-debug.js</code> files or the corresponding ES module files to run their app. However, if you have purchased a license to the <b>GoJS</b> TypeScript source code, you can build your app from the TypeScript source. Popular module bundlers such as Webpack are able to remove a number of modules from the source, provided you are not using them, to shrink the size of the deliverable file. </p> <p> Because the <code>go.js</code> and <code>go-debug.js</code> files are built in a custom process to reduce size, using Webpack or another bundler with the GoJS source, even though it removes unused modules, may result in a larger file size than just using <code>go.js</code>. However, programmers using TypeScript may appreciate the feedback and debugging capabilities of building from source. </p> <h2 id="MinimalSourceAndMaximal">MinimalSource and MaximalSource projects</h2> <p> The GoJS kit has two subdirectories under the <code>/projects</code> directory, <code>/minimalSource</code> and <code>/maximalSource</code>. </p> <p> The <a href="https://github.com/NorthwoodsSoftware/GoJS/tree/master/projects/minimalSource">minimalSource</a> project shows how to build GoJS while removing all possible optional modules. The <a href="https://github.com/NorthwoodsSoftware/GoJS/tree/master/projects/maximalSource">maximalSource</a> project shows how to build GoJS while matching the functionality of the released go.js and go-debug.js files. </p> <p> Both projects require <code>webpack</code> and <code>npm</code> to run. </p> <p> There is additionally <a href="https://github.com/NorthwoodsSoftware/GoJS/tree/master/projects/minimalSource">minimalSourceBrowserify</a>, which shows how to build from source with Browserify instead of Webpack. </p> <h2 id="ClassesModules">Classes/modules that can be removed when building from source</h2> <p> Several classes, such as <code>CommandHandler</code> and the Tools, may be essential to add to your project, while others such as all but one <code>Layout</code> and one type of <code>Model</code> can often be removed. Below is a list of modules that webpack can remove from builds, provided they are not referenced in your code: </p> <ul> <li><a>CommandHandler</a>, used for keyboard functionality. <li><code>SVGSurface</code>, used by <a>Diagram.makeSvg</a>. <li><a>GraphLinksModel</a>, without loading this module, the default Diagram.model is of type <code>Model</code>. <li><a>TreeModel</a> <li><a>Overview</a>, for showing a thumbnail image of the whole document. <li><a>Palette</a> </ul> Layouts: <ul> <li><a>GridLayout</a> <li><a>TreeLayout</a> <li><a>LayeredDigraphLayout</a> <li><a>CircularLayout</a> <li><a>ForceDirectedLayout,</a> </ul> Mouse-down tools: <ul> <li><a>ActionTool</a> <li><a>RelinkingTool</a> <li><a>LinkReshapingTool</a> <li><a>ResizingTool</a> <li><a>RotatingTool</a> </ul> Mouse-move tools: <ul> <li><a>LinkingTool</a> <li><a>DraggingTool</a> <li><a>DragSelectingTool</a> <li><a>PanningTool</a> </ul> Mouse-up tools: <ul> <li><a>ContextMenuTool</a> <li><a>TextEditingTool</a> <li><a>ClickCreatingTool</a> <li><a>ClickSelectingTool</a> </ul> <p>There are several "built in" Panel types, each of which is a <a>PanelLayout</a>. Some of these are required for building the source:</p> <ul> <li><code>PanelLayoutPosition</code> <li><code>PanelLayoutVertical</code> <li><code>PanelLayoutLink</code> <li><code>PanelLayoutAuto</code> <li><code>PanelLayoutGrid</code> </ul> However, it is possible to build without the following panel types: <ul> <li><code>PanelLayoutHorizontal</code> <li><code>PanelLayoutSpot</code> <li><code>PanelLayoutTable</code> <li><code>PanelLayoutViewbox</code> <li><code>PanelLayoutTableRow</code> <li><code>PanelLayoutTableColumn</code> <li><code>PanelLayoutGraduated</code> </ul> <p>The source index files demonstrate the necessary calls to <code>Panel.addPanelLayout</code> to include each panel type.</p> <h2 id="OptionalClasses">Using the optional classes</h2> <p> Many of the classes simply need to be used to be included in source building. For some functionality, like the Tools, CommandHandler, and SVGSurface, you need to make sure you explicitly initialize them. Examples of this can be found in the <a href="..\projects\maximalSource\maximal-index.ts">maximal-index.ts</a> code for the <a href="https://github.com/NorthwoodsSoftware/GoJS/tree/master/projects/maximalSource">maximalSource</a> project. Doing so is not necessary with the full <code>go.js</code> library because the <code>go</code> object already has references to each. </p> <p> A typical GoJS project is not expected to remove all or even most of these modules, and may use the majority of them. Because Northwood's internal build process is optimized to use the Google Closure Compiler in Advanced Mode, it may take considerable effort to produce a <code>go.js</code> bundle from source that is smaller than the one we include in the project's release directory. </p> <h2 id="license">Important license information about GoJS source code</h2> <p> The GoJS source code is subject to the terms of our license, contained in <a href="https://www.nwoods.com/sales/info/SoftwareLicenseAgreement.pdf">SoftwareLicenseAgreement.pdf</a>. </p> <p> Do not use, release (deploy), or distribute the unminified source code. To build GoJS for your own application you must use a popular obfuscation/minification tool, such as the Google Closure Compiler. </p> </div> </div> <div class="bg-nwoods-primary"> <section class="max-w-screen-lg text-white container mx-auto py-2 px-12"> <p id="version" class="leading-none mb-2 my-4">GoJS</p> </section> </div><footer class="bg-nwoods-primary text-white"> <div class="container max-w-screen-lg mx-auto px-8"> <div class="w-full py-6"> <div class="max-w-screen-lg xl:max-w-screen-xl mx-auto px-4 sm:px-6 md:px-8"> <ul class="text-sm font-medium pb-6 grid grid-cols-2 sm:grid-cols-3 gap-y-10"> <li class="list-none row-span-2"> <h2 class="text-base font-semibold tracking-wide">GoJS</h2> <ul class="list-none space-y-4 md:space-y-1 px-0"> <li> <a href="../samples/index.html">Samples</a> </li> <li> <a href="../learn/index.html">Learn</a> </li> <li> <a href="../intro/index.html">Intro</a> </li> <li> <a href="../api/index.html">API</a> </li> <li> <a href="../changelog.html">Changelog</a> </li> <li> <a href="https://github.com/NorthwoodsSoftware/GoJS">GitHub</a> </li> </ul> </li> <li class="list-none row-span-2"> <h2 class="text-base font-semibold tracking-wide">Support</h2> <ul class="list-none space-y-4 md:space-y-1 px-0"> <li> <a href="https://www.nwoods.com/contact.html" target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a> </li> <li> <a href="https://forum.nwoods.com/c/gojs">Forum</a> </li> <li> <a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a> </li> <li> <a href="https://www.nwoods.com/sales/index.html" target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a> </li> <li> <a href="https://www.youtube.com/channel/UC9We8EoX596-6XFjJDtZIDg">Videos</a> </li> </ul> </li> <li class="list-none row-span-2"> <h2 class="text-base font-semibold tracking-wide">Company</h2> <ul class="list-none space-y-4 md:space-y-1 px-0"> <li> <a target="_blank" href="https://www.nwoods.com">Northwoods</a> </li> <li> <a target="_blank" href="https://www.nwoods.com/about.html">About Us</a> </li> <li> <a target="_blank" href="https://www.nwoods.com/contact.html">Contact Us</a> </li> <li> <a target="_blank" href="https://www.nwoods.com/consulting.html">Consulting</a> </li> <li> <a target="_blank" href="https://twitter.com/northwoodsgo">Twitter</a> </li> </ul> </li> </ul> <p class="text-sm text-gray-100 md:mb-6"> Copyright 1998-2023 <a class="text-white" href="https://www.nwoods.com">Northwoods Software</a> </p> </div> </div> </footer> </body> <script async src="https://www.googletagmanager.com/gtag/js?id=G-S5QK8VSK84"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-S5QK8VSK84'); var getOutboundLink = function(url, label) { gtag('event', 'click', { 'event_category': 'outbound', 'event_label': label, 'transport_type': 'beacon' }); } // topnav var topButton = document.getElementById("topnavButton"); var topnavList = document.getElementById("topnavList"); topButton.addEventListener("click", function() { this.classList.toggle("active"); topnavList.classList.toggle("hidden"); document.getElementById("topnavOpen").classList.toggle("hidden"); document.getElementById("topnavClosed").classList.toggle("hidden"); }); </script> <script src="../assets/js/prism.js"></script> <script src="../release/go.js"></script> <script src="../assets/js/goDoc.js"></script> <script> document.addEventListener("DOMContentLoaded", function() { if (window.go) document.getElementById('version').textContent = "GoJS version " + go.version; if (window.goDoc) window.goDoc(); var d = window.diagrams; for (var i = 0; i < d.length; i++) { var dargs = d[i]; goCodeExecute(dargs[0], dargs[1], dargs[2], dargs[3], dargs[4]); } if (window.extra) window.extra(); }); </script> </html>