GoJS

https://gojs.net/latest/
Admin
GoJS is a JavaScript library for building interactive diagrams and graph visualizations with support...
Tokens:1,195,564
Snippets:10,951
Trust Score:9.8
Update:1 month ago
Show doc for...
Tokens:
Raw
### Programmatically Starting the ResizingTool

Source: https://gojs.net/latest/api/symbols/ResizingTool.html

Example showing how to programmatically initiate the ResizingTool for a selected node by setting the handle and activating the tool.

```APIDOC
const node = ...;  
myDiagram.select(node);  
const adorn = node.findAdornment("Resizing");  
const tool = myDiagram.toolManager.resizingTool;  
// specify which resize handle of the "Resizing" Adornment of the selected node  
tool.handle = adorn.elt(...);  
myDiagram.currentTool = tool;  // starts the ResizingTool  
tool.doActivate();             // activates the ResizingTool
```

--------------------------------

### Programmatically Starting the RotatingTool

Source: https://gojs.net/latest/api/symbols/RotatingTool.html

Example demonstrating how to programmatically initiate the RotatingTool for a selected node by setting the tool's handle and activating it.

```APIDOC
```javascript
const node = ...;  
myDiagram.select(node);  
const adorn = node.findAdornment("Rotating");  
const tool = myDiagram.toolManager.rotatingTool;  
// specify the rotation handle of the "Rotating" Adornment of the selected node  
tool.handle = adorn.elt(0);  
myDiagram.currentTool = tool;  // starts the RotatingTool  
tool.doActivate();             // activates the RotatingTool
```
```

--------------------------------

### start()

Source: https://gojs.net/latest/api/symbols/Animation.html

Starts the animation sequence.

```APIDOC
## start()

### Description
Start this animation. This adds the Animation to its AnimationManager's list of active animations.
```

--------------------------------

### Programmatically Starting the RelinkingTool

Source: https://gojs.net/latest/api/symbols/RelinkingTool.html

This example demonstrates how to manually configure and activate the RelinkingTool to allow a user to reconnect a specific link end.

```APIDOC
## Programmatically Starting RelinkingTool

### Description
To initiate the relinking process programmatically, you must set the `originalLink` and `isForwards` properties on the tool instance before activating it.

### Usage
```javascript
const tool = myDiagram.toolManager.relinkingTool;  
tool.originalLink = ...;   // specify which Link to have the user reconnect  
tool.isForwards = true;    // specify which end of the Link to reconnect  
myDiagram.currentTool = tool;  // starts the RelinkingTool  
tool.doActivate();             // activates the RelinkingTool
```
```

--------------------------------

### Programmatically Start Dragging

Source: https://gojs.net/latest/api/symbols/DraggingTool.html

Example of how to programmatically initiate a drag operation for a specific node.

```APIDOC
const node = ...;  
myDiagram.select(node);        // in this case the only selected node  
const tool = myDiagram.toolManager.draggingTool;  
tool.currentPart = node;       // the DraggingTool will not call standardMouseSelect  
myDiagram.currentTool = tool;  // starts the DraggingTool  
tool.doActivate();             // activates the DraggingTool
```

--------------------------------

### Install GoJS and extensions via npm

Source: https://gojs.net/latest/intro/extensions.html

Commands to install the core GoJS library and the companion extensions package.

```shell
$ npm install gojs
$ npm install gojs-extensions
```

--------------------------------

### Animation Class Usage

Source: https://gojs.net/latest/api/symbols/Animation.html

Example of how to instantiate an Animation object, add property transitions, and start the animation.

```APIDOC
const node = myDiagram.nodes.first();
const shape = part.findObject("SHAPE");
const animation = new go.Animation();

// Animate this Node from its current position to (400, 500)
animation.add(node, "position", node.position, new go.Point(400, 500));

// Animate the fill of the Shape within the Node, from its current color to blue
animation.add(shape, "fill", shape.fill, "blue");

// Start the animation
animation.start();
```

--------------------------------

### doActivate

Source: https://gojs.net/latest/api/symbols/LinkingTool.html

Starts the linking operation.

```APIDOC
## doActivate()

### Description
Start the linking operation. This calls findLinkablePort to find the port from which to start drawing a new link, starts a transaction, captures the mouse, and initializes temporary nodes and links.

### Returns
- **void**
```

--------------------------------

### root

Source: https://gojs.net/latest/api/symbols/SerpentineLayout.html

Gets or sets the starting node of the sequence.

```APIDOC
## get root()

### Description
Gets or sets the starting node of the sequence. The default value is null.

### Returns
- **Node | null** - The starting node or null.
```

--------------------------------

### startObject

Source: https://gojs.net/latest/api/symbols/PolylineLinkingTool.html

Gets or sets the GraphObject at which findLinkablePort should start its search.

```APIDOC
## startObject

### Description
Gets or sets the GraphObject at which findLinkablePort should start its search. Setting this property allows the tool to find the real port object starting from a given visual element.

### Returns
GraphObject | null
```

--------------------------------

### Initialize and Populate a List

Source: https://gojs.net/latest/api/symbols/List.html

Demonstrates creating a new List instance and adding elements to it.

```javascript
  const list = new go.List();  // or in TypeScript: new go.List<go.Point>();  
  list.add(new go.Point(0, 0));  
  list.add(new go.Point(20, 10));  
  list.add(new go.Point(10, 20));  
  // now list.length === 3  
  // and list.elt(1) instanceof go.Point
```

--------------------------------

### Initialize a GoJS Overview

Source: https://gojs.net/latest/api/symbols/Overview.html

Create an Overview instance and link it to an existing Diagram by setting the observed property.

```javascript
  const myDiagram = new go.Diagram("myDiagramDIV");  
  . . . other initialization . . .  
  
  // create and initialize the Overview:  
  new go.Overview("myOverviewDIV").observed = myDiagram;
```

--------------------------------

### startObject

Source: https://gojs.net/latest/api/symbols/LinkingTool.html

Gets or sets the GraphObject at which findLinkablePort should start its search.

```APIDOC
## startObject

### Description
Gets or sets the GraphObject at which findLinkablePort should start its search. Setting this property allows for explicitly starting a new user mouse-gesture to draw a new link from a specific object.

### Returns
GraphObject | null
```

--------------------------------

### isEnabled

Source: https://gojs.net/latest/api/symbols/Tool.html

Gets or sets whether this tool can be started by a mouse event.

```APIDOC
## get/set isEnabled()

### Description
Gets or sets whether this tool can be started by a mouse event. The default value is true.

### Returns
- **boolean** - True if the tool is enabled, false otherwise.
```

--------------------------------

### doStart()

Source: https://gojs.net/latest/api/symbols/NonRealtimeDraggingTool.html

Initializes the tool when it becomes the current tool.

```APIDOC
## doStart()

### Description
The Diagram calls this method when this tool becomes the current tool. Tool implementations should perform their per-use initialization here.
```

--------------------------------

### isActive

Source: https://gojs.net/latest/api/symbols/Tool.html

Gets or sets whether this tool is started and is actively doing something.

```APIDOC
## get/set isActive()

### Description
Gets or sets whether this tool is started and is actively doing something. The default value is false.

### Returns
- **boolean** - True if the tool is active, false otherwise.
```

--------------------------------

### Initialize a Diagram with configuration options

Source: https://gojs.net/latest/api/symbols/Diagram

Demonstrates creating a new Diagram instance and configuring various properties like zoom, grid settings, tool behaviors, and event listeners in a single object.

```javascript
const myDiagram = new go.Diagram("myDiagramDiv",  
    {  
      allowZoom: false,  
      "animationManager.isEnabled": false,  // turn off automatic animations  
      "grid.visible": true,  // display a background grid for the whole diagram  
      "grid.gridCellSize": new go.Size(20, 20),  
      // allow double-click in background to create a new node  
      "clickCreatingTool.archetypeNodeData": { text: "Node" },  
      // allow Ctrl-G to call the groupSelection command  
      "commandHandler.archetypeGroupData":  
        { text: "Group", isGroup: true, color: "blue" },  
      "commandHandler.copiesTree": true,  // for the copy command  
      "commandHandler.deletesTree": true, // for the delete command  
      "toolManager.hoverDelay": 100,  // how quickly tooltips are shown  
      // mouse wheel zooms instead of scrolls  
      "toolManager.mouseWheelBehavior": go.WheelMode.Zoom,  
      "draggingTool.dragsTree": true,  // dragging for both move and copy  
      "draggingTool.isGridSnapEnabled": true,  
      layout: new go.TreeLayout(  
          { angle: 90, sorting: go.TreeLayout.SortingAscending }),  
      "undoManager.isEnabled": true,  // enable undo & redo  
      // a Changed listener on the Diagram.model  
      "ModelChanged": e => { if (e.isTransactionFinished) saveModel(); }  
    });
```

--------------------------------

### doActivate

Source: https://gojs.net/latest/api/symbols/ResizeMultipleTool.html

Initializes the tool by finding the handle, saving original bounds, capturing the mouse, and starting a transaction.

```APIDOC
## doActivate()

### Description
Finds the handle, remembers the object's original bounds, saves the results of computeMinSize, computeMaxSize, and computeCellSize, captures the mouse, and starts a transaction.

### Returns
- **void**
```

--------------------------------

### isEnabled

Source: https://gojs.net/latest/api/symbols/NonRealtimeDraggingTool.html

Gets or sets whether this tool can be started by a mouse event.

```APIDOC
## isEnabled

### Description
Gets or sets whether this tool can be started by a mouse event. The default value is true.

### Returns
- **boolean** - True if the tool is enabled.
```

--------------------------------

### canStart(): boolean

Source: https://gojs.net/latest/api/symbols/FreehandDrawingTool.html

Determines if the tool can start based on diagram modifiability and insertion permissions.

```APIDOC
### canStart(): boolean

Only start if the diagram is modifiable and allows insertions. OPTIONAL: if the user is starting in the diagram's background, not over an existing Part.
```

--------------------------------

### isActive

Source: https://gojs.net/latest/api/symbols/NonRealtimeDraggingTool.html

Gets or sets whether this tool is started and is actively doing something.

```APIDOC
## isActive

### Description
Gets or sets whether this tool is started and is actively doing something. The default value is false.

### Returns
- **boolean** - True if the tool is active.
```

--------------------------------

### isEnabled

Source: https://gojs.net/latest/api/symbols/GuidedDraggingTool.html

Gets or sets whether this tool can be started by a mouse event.

```APIDOC
## isEnabled

### Description
Gets or sets whether this tool can be started by a mouse event. Setting this to false prevents canStart from returning true.

### Returns
- **boolean** - True if the tool is enabled, false otherwise.
```

--------------------------------

### doStart

Source: https://gojs.net/latest/api/symbols/DragSelectingTool.html

Performs per-use initialization when the tool becomes the current tool.

```APIDOC
## doStart()

### Description
Called by the Diagram when this tool becomes the current tool. Used for per-use initialization such as setting up internal data structures or capturing the mouse.

### Returns
- **void**
```

--------------------------------

### isActive

Source: https://gojs.net/latest/api/symbols/GuidedDraggingTool.html

Gets or sets whether this tool is started and is actively doing something.

```APIDOC
## isActive

### Description
Gets or sets whether this tool is started and is actively doing something. The default value is false.

### Returns
- **boolean** - True if the tool is active, false otherwise.
```

--------------------------------

### doStart

Source: https://gojs.net/latest/api/symbols/PanningTool.html

Initializes the tool when it becomes the current tool.

```APIDOC
## doStart()

### Description
The Diagram calls this method when this tool becomes the current tool. Tool implementations should perform their per-use initialization here.

### Returns
- **void**
```

--------------------------------

### isEnabled

Source: https://gojs.net/latest/api/symbols/DraggingTool.html

Gets or sets whether this tool can be started by a mouse event.

```APIDOC
## isEnabled

### Description
Gets or sets whether this tool can be started by a mouse event. The default value is true.

### Returns
- **boolean**
```

--------------------------------

### doStart

Source: https://gojs.net/latest/api/symbols/PolylineLinkingTool.html

Initializes the tool when it becomes the current tool.

```APIDOC
## doStart()

### Description
The Diagram calls this method when this tool becomes the current tool. Implementations should perform per-use initialization here, such as setting up internal data structures or capturing the mouse.

### Returns
- **void**
```

--------------------------------

### isActive

Source: https://gojs.net/latest/api/symbols/DraggingTool.html

Gets or sets whether this tool is started and is actively doing something.

```APIDOC
## isActive

### Description
Gets or sets whether this tool is started and is actively doing something. The default value is false.

### Returns
- **boolean**
```

--------------------------------

### isTreeExpanded

Source: https://gojs.net/latest/api/symbols/Group.html

Gets or sets whether the subtree graph starting at this node is expanded.

```APIDOC
## isTreeExpanded

### Description
Gets or sets whether the subtree graph starting at this node is expanded. Changing this property's value will call collapseTree or expandTree.

### Signature
`get isTreeExpanded(): boolean`

### Returns
- **boolean** - Whether the tree is expanded.
```

--------------------------------

### doStart

Source: https://gojs.net/latest/api/symbols/RelinkingTool.html

Initializes the tool when it becomes the current tool.

```APIDOC
## doStart()

### Description
The Diagram calls this method when this tool becomes the current tool. Implementations should perform per-use initialization here.

### Returns
- **void**
```

--------------------------------

### delay

Source: https://gojs.net/latest/api/symbols/RealtimeDragSelectingTool.html

Gets or sets the time in milliseconds for which the mouse must be stationary before this tool can be started.

```APIDOC
## delay

### Description
Gets or sets the time in milliseconds for which the mouse must be stationary before this tool can be started. The default value is 175 milliseconds.

### Returns
- **number**
```

--------------------------------

### new SpotRotatingTool(init?: Partial<SpotRotatingTool>)

Source: https://gojs.net/latest/api/symbols/SpotRotatingTool.html

Constructs a new instance of the SpotRotatingTool.

```APIDOC
## constructor

### Description
Creates a new instance of the SpotRotatingTool.

### Parameters
- **init** (Partial<SpotRotatingTool>) - Optional - An object containing initial property values.

### Returns
- **SpotRotatingTool** - The newly created tool instance.
```

--------------------------------

### Diagram Initialization and Surface Setup

Source: https://gojs.net/latest/release/go-debug.mjs

Internal logic for initializing the diagram surface, setting up ResizeObservers, and configuring DOM elements for rendering.

```javascript
c=root.ResizeObserver,f=U.Hk(()=>i.requestUpdate(),250,!1);i.Sf=new c(()=>f()),i.Sf.observe(i.Dt)}root.getComputedStyle(i.Dt,null).position==="static"&&(i.Dt.style.position="relative");let s=5;const n="rgba(2"+s+"5, 255, 255, 0)";s--,i.Dt.style["-webkit-tap-highlight-color"]=n,i.Dt.innerHTML="",Diagram.es.set(i.Dt,i),i.Dt.goDiagram=i,i.Dt.go=root.go;const o=new CanvasSurface(i);o.style!==void 0&&(o.style.position="absolute",o.style.top="0px",o.style.left="0px",root.getComputedStyle(i.Dt,null).getPropertyValue("direction")==="rtl"&&(i.Pd=!0),o.style.zIndex="2",o.style.userSelect="none",o.style.MozUserSelect="none",o.style.touchAction="none",this.toolManager.gestureBehavior===3&&(o.style.touchAction="pinch-zoom"),o.style.letterSpacing="normal !important",o.style.wordSpacing="normal !important",o.style.lang="unknown"),o.St.setAttribute("role","application"),i.ht=o,i.ei=o.pi;const r=i.ei;i.Qi=i.computePixelRatio(),i.viewSize.isReal()||(i.Ct=i.Dt.clientWidth||1,i.Nt=i.Dt.clientHeight||1),i.BL(i.Ct,i.Nt);const l=i;i.Dt.insertBefore(o.St,i.Dt.firstChild);const h=new CanvasSurface(null);if(h.width=1,h.height=1,Diagram.isUsingDOM()){const c=U.Re("div"),f=U.Re("div");c.style.position="absolute",c.style.overflow="auto",c.style.width=i.Ct+"px",c.style.height=i.Nt+"px",c.style.zIndex="1",f.style.position="absolute",f.style.width="1px",f.style.height="1px",i.Dt.appendChild(c),c.appendChild(f),c.onscroll=Diagram.IO,c.addEventListener("pointerdown",Diagram.OO),c.c=i,c.EO=!0,c.BO=!0,i.wb=c,i.xb=f}
```

--------------------------------

### startPoint

Source: https://gojs.net/latest/api/symbols/NonRealtimeDraggingTool.html

Gets or sets the mouse point from which parts start to move in document coordinates.

```APIDOC
### Property: startPoint

- **Type**: Point
- **Description**: The mouse point from which parts start to move. This is typically set to the diagram's mouse-down point.
```

--------------------------------

### startPoint

Source: https://gojs.net/latest/api/symbols/GuidedDraggingTool.html

Gets or sets the mouse point from which parts start to move in document coordinates.

```APIDOC
## Property: startPoint

### Description
Gets or sets the mouse point from which parts start to move. The value is a Point in document coordinates.

### Returns
- **Point** - The starting mouse point.
```

--------------------------------

### Using PanelTypes for Panel Construction

Source: https://gojs.net/latest/api/symbols/PanelTypes.html

Demonstrates the different ways to specify a panel type when creating a new go.Panel instance.

```javascript
new go.Panel(go.PanelTypes.Table, ...)
// equivalent to:
new go.Panel("Table", ...)
// or:
new go.Panel(go.Panel.Table, ...)
```

--------------------------------

### delay

Source: https://gojs.net/latest/api/symbols/DragCreatingTool.html

Gets or sets the time in milliseconds the mouse must be stationary before the tool starts.

```APIDOC
## delay

### Description
Gets or sets the time in milliseconds for which the mouse must be stationary before this tool can be started. Default is 175ms.

### Returns
- **number**
```

--------------------------------

### Applying Basic Theming

Source: https://gojs.net/latest/learn/theming

Demonstrates setting the current theme and using .theme() in template definitions to react to theme changes.

```javascript
diagram.themeManager.currentTheme = document.getElementById('themeSelect1').value;
// Update the div background color when theme changes;
// in most applications, the div background will be transparent,
// and the page background should be updated.
diagram.themeManager.changesDivBackground = true;
  

diagram.nodeTemplate =
new go.Node('Auto')
.add(
new go.Shape('RoundedRectangle', { strokeWidth: 0 })
.theme('fill', 'group'), // fill color is a semi-transparent gray
new go.TextBlock({ margin: 8 })
.bind('text')
.theme('stroke', 'text') // stroke color is a dark or light gray
);
  

// the default link template changes color based on the theme's 'link' color
  

diagram.model = new go.GraphLinksModel([
```

--------------------------------

### delay

Source: https://gojs.net/latest/api/symbols/DragSelectingTool.html

Gets or sets the time in milliseconds for which the mouse must be stationary before this tool can be started.

```APIDOC
## delay

### Description
Gets or sets the time in milliseconds for which the mouse must be stationary before this tool can be started. The default value is 175 milliseconds.

### Returns
- **number** - The delay in milliseconds.
```

--------------------------------

### canStart()

Source: https://gojs.net/latest/api/symbols/OverviewResizingTool.html

Determines if the tool can start based on mouse interaction and diagram state.

```APIDOC
## canStart()

### Description
This tool may run when there is a mouse-down event on a resize handle, the diagram is not read-only and it allows resizing, the left mouse button is being used, and this tool's adornment's resize handle is at the current mouse point.

### Returns
- **boolean**
```

--------------------------------

### doStart()

Source: https://gojs.net/latest/api/symbols/LassoSelectingTool.html

Called by the Diagram when this tool becomes the current tool to perform per-use initialization.

```APIDOC
### doStart()

The Diagram calls this method when this tool becomes the current tool. Tool implementations should perform their per-use initialization here, such as setting up internal data structures, or capturing the mouse.
```

--------------------------------

### Initialize Basic Model

Source: https://gojs.net/latest/learn/debugging

Sets up a simple model with initial node data.

```javascript
diagram.model = new go.Model([{ t1: "Top", t2: "Bottom"}]);
```

--------------------------------

### graduatedStart

Source: https://gojs.net/latest/api/symbols/Shape.html

Gets or sets the fractional distance along the main shape of a 'Graduated' Panel at which this kind of tick should start.

```APIDOC
## graduatedStart

### Description
Gets or sets the fractional distance along the main shape of a 'Graduated' Panel at which this kind of tick should start. The default is 0. Any new value should range from 0 to 1.

### Returns
number
```

--------------------------------

### nodeIndentPastParent

Source: https://gojs.net/latest/api/symbols/FishboneLayout.html

Gets or sets the fraction of this node's breadth added to nodeIndent to determine spacing at the start of children.

```APIDOC
## nodeIndentPastParent

### Description
Gets or sets the fraction of this node's breadth added to nodeIndent to determine any spacing at the start of the children.

### Returns
- **number** - The fraction value (default: 0.0).
```

--------------------------------

### Initialize a Panel

Source: https://gojs.net/latest/api/symbols/Panel.html

Demonstrates various ways to instantiate a Panel using different type identifiers and adding elements.

```javascript
// Either:  
new go.Panel(go.Panel.Horizontal, ...  
// Or {@link PanelType}, a const of valid string values:  
new go.Panel(go.PanelType.Horizontal, ...  
// Or a string:  
new go.Panel("Horizontal", ...  
  
// Full example:  
p = new go.Panel("Horizontal",  
    { width: 60, height: 60 }) // panel properties  
  // elements in the panel:  
  .add(  
    new go.Shape("Rectangle", { fill: "white", stroke: "green" }),  
    new go.TextBlock("Some Text")  
  );
```

--------------------------------

### alternateNodeIndentPastParent

Source: https://gojs.net/latest/api/symbols/TreeLayout.html

Gets or sets the fraction of this node's breadth added to alternateNodeIndent to determine spacing at the start of the children.

```APIDOC
## alternateNodeIndentPastParent

### Description
Gets or sets the fraction of this node's breadth added to alternateNodeIndent to determine any spacing at the start of the children. The default value is 0.0.

### Returns
- **number** - The fraction of the node's breadth.
```

--------------------------------

### Create and start a manual animation

Source: https://gojs.net/latest/api/symbols/Animation.html

Demonstrates how to instantiate an Animation, add property changes for a node and a shape, and trigger the animation.

```javascript
const node = myDiagram.nodes.first();  
const shape = part.findObject("SHAPE"); // assumes this Node contains a go.Shape with .name = "SHAPE"  
const animation = new go.Animation();  
// Animate this Node from its current position  to (400, 500)  
animation.add(node, "position", node.position, new go.Point(400, 500));  
// Animate the fill of the Shape within the Node, from its current color to blue  
animation.add(shape, "fill", shape.fill, "blue");  
// Both of these effects will animate simultaneously when start() is called:  
animation.start();
```

--------------------------------

### graduatedStart

Source: https://gojs.net/latest/api/symbols/TextBlock.html

Gets or sets the fractional distance along the main shape of a "Graduated" Panel at which this text should start.

```APIDOC
## graduatedStart

### Description
Gets or sets the fractional distance along the main shape of a "Graduated" Panel at which this text should start. The default is 0; the value should range from 0 to 1.

### Returns
- **number** - The fractional distance.
```

--------------------------------

### Initialize and Customize an Overview

Source: https://gojs.net/latest/learn/overview

Creates an Overview instance linked to a diagram and customizes the appearance of the viewport box.

```javascript
// create the Overview
// initialize it to show the main Diagram
const overview =
new go.Overview("hexMapOverviewDiv",
{ observed: diagram }
);
  

// find the default overview box and alter its properties`
const boxShape = overview.box.findObject("BOXSHAPE");
boxShape.fill = "rgba(168, 50, 50, 0.18)";
boxShape.stroke = "#a83232";
```

--------------------------------

### Basic Set Usage

Source: https://gojs.net/latest/api/symbols/Set.html

Demonstrates initializing a Set, adding elements, and checking for existence.

```javascript
  const set = new go.Set();  // In TypeScript: new go.Set<string>();  
  set.add("orange");  
  set.add("apple");  
  set.add("orange");  
  // now set.size === 2  
  // and set.has("orange") === true  
  // and set.has("banana") === false
```

--------------------------------

### Minimal Diagram Construction

Source: https://gojs.net/latest/api/symbols/Diagram

Setup the required HTML container and initialize a new GoJS Diagram instance.

```html
<div id="myDiagramDiv" style="border: solid 1px black; width:400px; height:400px"></div>
```

```javascript
const myDiagram =  
  new go.Diagram("myDiagramDiv",  // create a Diagram for the Div HTML element  
    { // with various property and subproperty settings...  
      "undoManager.isEnabled": true  // enable undo & redo  
    });
```

--------------------------------

### layerSpacingParentOverlap

Source: https://gojs.net/latest/api/symbols/ParallelLayout.html

Gets or sets the fraction of the node's depth for which the children's layer starts overlapped with the parent's layer.

```APIDOC
## get layerSpacingParentOverlap()

### Description
Gets or sets the fraction of the node's depth for which the children's layer starts overlapped with the parent's layer. The default value is 0.0.

### Returns
- **number**
```

--------------------------------

### make

Source: https://gojs.net/latest/api/symbols/TextBlock.html

Constructs and initializes a new object instance.

```APIDOC
## Static make

### Description
This static function builds an object given its class and additional arguments providing initial properties or GraphObjects that become Panel elements.

### Parameters
- **cls** ("ContextMenu" | "ToolTip") - Required - The class type or name of the object to construct.
- **...initializers** (Array) - Optional - Initial properties or GraphObjects to apply to the new instance.
```

--------------------------------

### Diagram Initialization and Setup

Source: https://gojs.net/latest/release/go-debug.mjs

Internal constructor logic for setting up default nodes, groups, and links within a diagram.

```javascript
DO(){this.hl=new GMap,this.O2=new Node().add(new TextBlock({stroke:"black",font:"10pt sans-serif"}).bind("text","",U.toString).theme("stroke","text").theme("font","normal")),this.hl.set("",this.O2),this.hl.set("Comment",new Node().add(new TextBlock({stroke:"brown",font:"10pt sans-serif"}).bind("text","",U.toString).theme("stroke","comment").theme("font","normal"))),this.hl.set("LinkLabel",new Node({selectable:!1,avoidable:!1}).add(new Shape("Ellipse",{fill:"black",stroke:null,desiredSize:new Size(3,3).At()}).theme("fill","link"))),this.La=new GMap,this.V2=new Group(Panel.Vertical,{selectionObjectName:"GROUPPANEL"}).add(new TextBlock({stroke:"black",font:"bold 12pt sans-serif"}).bind("text","",U.toString).theme("stroke","text").theme("font","bold"),new Panel(Panel.Auto,{name:"GROUPPPANEL"}).add(new Shape({fill:"rgba(128,128,128,0.2)",stroke:"black",strokeWidth:1}).theme("fill","group").theme("stroke","outline").theme("strokeWidth","group"),new Placeholder({padding:5}).theme("padding","group"))),this.La.set("",this.V2),this.Sh=new GMap,this.E2=new Link().add(new Shape({isPanelMain:!0,stroke:"black"}).theme("stroke","link"),new Shape({toArrow:"Standard",fill:"black",stroke:null,strokeWidth:0}).theme("toArrow").theme("fill","link")),this.Sh.set("",this.E2),this.Sh.set("Comment",new Link().add(new Shape({isPanelMain:!0,stroke:"brown"}).theme("stroke","comment"))),this.A0=new Adornment(Panel.Auto).add(new Shape({fill:null,stroke:"dodgerblue",strokeWidth:3}).theme("stroke","selection").theme("strokeWidth","selection"),new Placeholder({margin:1.5}).theme("margin","selection","numbers",null,t=>t?new Margin(t/2):1.5)).freezeBindings(),this.gb=this.A0,this.pb=new Adornment(Panel.Link).add(new Shape({isPanelMain:!0,fill:null,stroke:"dodgerblue",strokeWidth:3}).theme("stroke","selection").theme("strokeWidth","selection")).freezeBindings()}
```

--------------------------------

### alternateLayerSpacingParentOverlap

Source: https://gojs.net/latest/api/symbols/TreeLayout.html

Gets or sets the alternate fraction of the node's depth for which the children's layer starts overlapped with the parent's layer.

```APIDOC
## alternateLayerSpacingParentOverlap

### Description
Gets or sets the alternate fraction of the node's depth for which the children's layer starts overlapped with the parent's layer. The default value is 0.0.

### Returns
- **number** - The fraction of the node's depth.
```

--------------------------------

### new GuidedDraggingTool(init?: Partial<GuidedDraggingTool>)

Source: https://gojs.net/latest/api/symbols/GuidedDraggingTool.html

Constructs a new instance of the GuidedDraggingTool and initializes the temporary guideline parts.

```APIDOC
## new GuidedDraggingTool(init?: Partial<GuidedDraggingTool>)

### Description
Constructs a GuidedDraggingTool and sets up the temporary guideline parts.

### Parameters
- **init** (Partial<GuidedDraggingTool>) - Optional - An object containing initial property values.
```

--------------------------------

### Library Initialization and Global Export

Source: https://gojs.net/latest/release/go-debug.mjs

Initializes the global 'go' object, sets up class mappings, and attaches debug warnings.

```javascript
Diagram.H2("GraphLinksModel",GraphLinksPartManager),Diagram.H2("TreeModel",TreePartManager);const oldGo=root.go,go={get version(){return Diagram.version},Group,List,Set:GSet,Map:GMap,Point,Size,Rect,Margin,Spot,Quadtree,Geometry,PathFigure,PathSegment,InputEvent,DiagramEvent,ChangedEvent,Model,GraphLinksModel,TreeModel,Binding,ThemeBinding,Transaction,UndoManager,CommandHandler,Tool,DraggingTool,DraggingInfo,DraggingOptions,LinkingBaseTool,LinkingTool,RelinkingTool,LinkReshapingTool,ResizingTool,RotatingTool,ClickSelectingTool,ActionTool,ClickCreatingTool,HTMLInfo,ContextMenuTool,DragSelectingTool,PanningTool,TextEditingTool,ToolManager,Animation,AnimationManager,AnimationTrigger,Layer,Diagram,Palette,Overview,Brush,GraphObject,Panel,RowColumnDefinition,Shape,TextBlock,Picture,Part,Adornment,Node,Link,Placeholder,Layout,LayoutNetwork,LayoutVertex,LayoutEdge,GridLayout,PanelLayout,CircularLayout,CircularNetwork,CircularVertex,CircularEdge,ForceDirectedLayout,ForceDirectedNetwork,ForceDirectedVertex,ForceDirectedEdge,LayeredDigraphLayout,LayeredDigraphNetwork,LayeredDigraphVertex,LayeredDigraphEdge,TreeLayout,TreeNetwork,TreeVertex,TreeEdge,Themes,ThemeManager,Router,AnimationStyle,AutoScale,CycleMode,Flip,TextFormat,ImageStretch,LayoutConditions,LinkAdjusting,Curve,Routing,Orientation,TextOverflow,PortSpreading,ScrollMode,CollapsePolicy,Sizing,TriggerStart,Stretch,ViewboxStretch,Wrap,BrushType,ColorSpace,GeometryStretch,GeometryType,SegmentType,BindingMode,ChangeType,CircularArrangement,CircularDirection,CircularNodeDiameterFormula,CircularSorting,GridAlignment,GridArrangement,GridSorting,LayeredDigraphAggressive,LayeredDigraphAlign,LayeredDigraphCycleRemove,LayeredDigraphInit,LayeredDigraphLayering,LayeredDigraphPack,TreeAlignment,TreeArrangement,TreeCompaction,TreeLayerStyle,TreePath,TreeSorting,TreeStyle,GestureMode,LinkingDirection,ReshapingBehavior,TextEditingAccept,TextEditingStarting,TextEditingState,WheelMode,Figures,Arrowheads,PanelTypes,ToolNames,Builders,LayerNames};for(const w in go){const t=go[w];U.at(t)&&t!==TextFormat&&(t.className=w)}U.st(oldGo)&&oldGo.version&&U.et("WARNING: a `go` object on the root object is already defined.  "+("Debug"in oldGo?"debug ":"")+"version: "+oldGo.version+", replaced with version: "+go.version),Diagram.prototype.go=go,root.go=go,go.Debug=Debug,Debug.attachReadonlyWarnings(go);
```

--------------------------------

### Installing FreehandDrawingTool

Source: https://gojs.net/latest/api/symbols/FreehandDrawingTool.html

How to install the FreehandDrawingTool as the first mouse-down tool in a GoJS diagram.

```APIDOC
## Installation

### Description
To use the FreehandDrawingTool, instantiate it and insert it into the diagram's toolManager.mouseDownTools collection.

### Example
```javascript
myDiagram.toolManager.mouseDownTools.insertAt(0, new FreehandDrawingTool());
```
```

--------------------------------

### portSpot

Source: https://gojs.net/latest/api/symbols/FishboneLayout.html

Gets or sets the spot that this node's port gets as its FromSpot.

```APIDOC
## portSpot

### Description
Gets or sets the spot that this node's port gets as its FromSpot.

### Returns
- **Spot** - The current spot (default: Spot.Default).
```

--------------------------------

### Initialize Diagram and Node Templates

Source: https://gojs.net/latest/api/symbols/Picture.html

Demonstrates configuring a Diagram with various tool properties and defining a node template with data bindings and shape styling.

```javascript
 const diagram =  
   new go.Diagram("myDiagramDiv",  
     {  
        // don't initialize some properties until after a new model has been loaded  
        "InitialLayoutCompleted": loadDiagramProperties,  
        allowZoom: false,  // don't allow the user to change the diagram's scale  
        "grid.visible": true,  // display a background grid for the whole diagram  
        "grid.gridCellSize": new go.Size(20, 20),  
        // allow double-click in background to create a new node  
        "clickCreatingTool.archetypeNodeData": { text: "Node" },  
        // allow Ctrl-G to call the groupSelection command  
        "commandHandler.archetypeGroupData":  
           { text: "Group", isGroup: true, color: "blue" },  
        "toolManager.hoverDelay": 100,  // how quickly tooltips are shown  
        // mouse wheel zooms instead of scrolls  
        "toolManager.mouseWheelBehavior": go.WheelMode.Zoom,  
        "commandHandler.copiesTree": true,  // for the copy command  
        "commandHandler.deletesTree": true, // for the delete command  
        "draggingTool.dragsTree": true,  // dragging for both move and copy  
        "draggingTool.isGridSnapEnabled": true,  
        layout: new go.TreeLayout(  
                    { angle: 90, sorting: go.TreeLayout.SortingAscending })  
     });  
  
 diagram.nodeTemplate =  
   new go.Node("Auto")  // or go.Panel.Auto  
       .bindTwoWay("location", "loc", go.Point.parse, go.Point.stringify).add(  
     new go.Shape("RoundedRectangle",  
         {  
           fill: new go.Brush("Linear", { 0: "#FEC901", 1: "#FEA200" }),  
           stroke: "gray",  
           strokeWidth: 2,  
           strokeDashArray: [3, 3]  
         }),  
     new go.TextBlock(  
         { margin: 5, font: "bold 12pt sans-serif" })  
       .bind("text", "key")  
   );
```

--------------------------------

### new FreehandDrawingTool(init?: Partial<FreehandDrawingTool>)

Source: https://gojs.net/latest/api/symbols/FreehandDrawingTool.html

Constructs a new FreehandDrawingTool instance.

```APIDOC
## new FreehandDrawingTool(init?: Partial<FreehandDrawingTool>)

### Description
Creates a new instance of the FreehandDrawingTool.

### Parameters
- **init** (Partial<FreehandDrawingTool>) - Optional - An object containing initial property values for the tool.
```

--------------------------------

### Install GoJS via npm

Source: https://gojs.net/latest/learn

Install the GoJS package and import it into your JavaScript project.

```shell
npm install gojs
```

```js
import go from "gojs";
```

--------------------------------

### Configure and Customize Initial Animations

Source: https://gojs.net/latest/learn/animation

Demonstrates enabling initial animations, setting the animation style, and defining a custom zoom-in animation using the InitialAnimationStarting event.

```javascript
diagram.div.style.backgroundColor = "#27272a";
diagram.animationManager.isInitial = true; // defaults to false
  

const animation = diagram.animationManager.defaultAnimation;
  

function customAnimation() {
animation.easing = go.Animation.EaseOutExpo;
animation.duration = 1500;
animation.add(diagram, 'scale', 0.1, 1);
animation.add(diagram, 'opacity', 0, 1);
}
  

function animate(style, custom = false) {
// set to defaults
diagram.animationManager.initialAnimationStyle = style;
animation.easing = go.Animation.EaseInOutQuad;
animation.duration = 600;
  
diagram.removeDiagramListener("InitialAnimationStarting", customAnimation);
if (custom) {
diagram.addDiagramListener("InitialAnimationStarting", customAnimation);
```
Tokens:
Raw