UNPKG

gojs/intro/shapes.html

Version:
1<!DOCTYPE html>
2<html lang="en">
<head>
4<meta charset="utf-8"/>
5<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>

7<link rel="stylesheet" href="../assets/css/style.css"/> 
8<!-- Copyright 1998-2021 by Northwoods Software Corporation. -->    <title> GoJS Shapes -- 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="mb-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="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 &amp; 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">
132
133<h1>Shapes</h1>
134<p>
135Use the <a>Shape</a> class to paint a geometrical figure.
136You can control what kind of shape is drawn and how it is stroked and filled.
137</p>
138<p>
139Shapes, like <a>TextBlock</a>s and <a>Picture</a>s, are "atomic" objects -- they cannot contain any other objects.
140So a Shape will never draw some text or an image.
141</p>
142<p>
143In these simplistic demonstrations, the code programmatically creates a Part and adds it to the Diagram.
144Once you learn about models and data binding you will generally not create parts (nodes or links) programmatically.
145</p>
146
147<h2 id="Figures">Figures</h2>
148<p>
149You can set the <a>Shape.figure</a> property to commonly named kinds of shapes.
150When using <a>GraphObject,make</a>, you can pass the figure name as a string argument.
151You may also need to set the <a>GraphObject.desiredSize</a> or <a>GraphObject.width</a> and <a>GraphObject.height</a> properties,
152although it is also common to have the size determined by the Panel that the shape is in.
153</p>
154<p>
155Here are several of the most often used Shape figures:
156</p>
157<pre class="lang-js" id="figureShapes"><code>
diagram.add(
  $(go.Part, "Horizontal",
    $(go.Shape, "Rectangle",        { width: 40, height: 60, margin: 4, fill: null }),
    $(go.Shape, "RoundedRectangle", { width: 40, height: 60, margin: 4, fill: null }),
    $(go.Shape, "Ellipse",          { width: 40, height: 60, margin: 4, fill: null }),
    $(go.Shape, "Diamond",          { width: 40, height: 60, margin: 4, fill: null }),
    $(go.Shape, "TriangleRight",    { width: 40, height: 60, margin: 4, fill: null }),
    $(go.Shape, "TriangleDown",     { width: 40, height: 60, margin: 4, fill: null }),
    $(go.Shape, "TriangleLeft",     { width: 40, height: 60, margin: 4, fill: null }),
    $(go.Shape, "TriangleUp",       { width: 40, height: 60, margin: 4, fill: null }),
    $(go.Shape, "MinusLine",        { width: 40, height: 60, margin: 4, fill: null }),
    $(go.Shape, "PlusLine",         { width: 40, height: 60, margin: 4, fill: null }),
    $(go.Shape, "XLine",            { width: 40, height: 60, margin: 4, fill: null })
  ));
172</code></pre>
173<script>goCode("figureShapes", 600, 100)</script>
174<p>
175You can see all of the named geometrical figures in the
176<a href="../samples/shapes.html" target="samples">shapes</a> sample.
177Some of the most commonly used figures are predefined in the <b>GoJS</b> library.
178But most figures are defined in the <a href="../extensions/Figures.js" target="_blank">Figures.js</a> file
179in the extensions directory.
180</p>
181
182<h2 id="FillAndStrokes">Fill and Strokes</h2>
183<p>
184The <a>Shape.stroke</a> property specifies the brush used to draw the shape's outline.
185The <a>Shape.fill</a> property specifies the brush used to fill the shape's outline.
186Additional "stroke..." properties also control how the shape's outline is drawn.
187The most common such property is <a>Shape.strokeWidth</a>.
188</p>
189<pre class="lang-js" id="strokedShapes"><code>
diagram.add(
  $(go.Part, "Horizontal",
    $(go.Shape, { figure: "Club", width: 40, height: 40, margin: 4
                  }),  // default fill and stroke are "black"
    $(go.Shape, { figure: "Club", width: 40, height: 40, margin: 4,
                  fill: "green" }),
    $(go.Shape, { figure: "Club", width: 40, height: 40, margin: 4,
                  fill: "green", stroke: null }),
    $(go.Shape, { figure: "Club", width: 40, height: 40, margin: 4,
                  fill: null, stroke: "green" }),
    $(go.Shape, { figure: "Club", width: 40, height: 40, margin: 4,
                  fill: null, stroke: "green", strokeWidth: 3 }),
    $(go.Shape, { figure: "Club", width: 40, height: 40, margin: 4,
                  fill: null, stroke: "green", strokeWidth: 6 }),
    $(go.Shape, { figure: "Club", width: 40, height: 40, margin: 4,
                  fill: "green", background: "orange" })
  ));
207</code></pre>
208<script>goCode("strokedShapes", 600, 100)</script>
209
210<p>
211The <a>Shape.stroke</a> and <a>Shape.fill</a> properties take <a>Brush</a>es
212but most often are given a CSS color string to denote solid color brushes.
213These two properties default to a solid black brush.
214However it is common to assign one of them to be either null or "transparent".
215A null brush means that nothing is drawn for that stroke or fill.
216A transparent brush produces the same appearance but different hit-testing behavior.
217A shape with a null <a>Shape.fill</a> produces a "hollow" shape -- clicking inside
218the shape will not "hit" that shape and thus not select the <a>Node</a> that that shape is in.
219But a shape with a transparent fill produces a "filled" shape -- a mouse event inside the
220shape will "hit" that shape.
221</p>
222<pre class="lang-js" class="lang-js" id="fill"><code>
diagram.div.style.background = "lightgray";
diagram.add(
  $(go.Part, "Table",
    $(go.Shape, { row: 0, column: 0, figure: "Club", width: 60, height: 60, margin: 4,
                  fill: "green" }),
    $(go.TextBlock, "green", { row: 1, column: 0 }),
    $(go.Shape, { row: 0, column: 1, figure: "Club", width: 60, height: 60, margin: 4,
                  fill: "white" }),
    $(go.TextBlock, "white", { row: 1, column: 1 }),
    $(go.Shape, { row: 0, column: 2, figure: "Club", width: 60, height: 60, margin: 4,
                  fill: "transparent" }),
    $(go.TextBlock, "transparent", { row: 1, column: 2 }),
    $(go.Shape, { row: 0, column: 3, figure: "Club", width: 60, height: 60, margin: 4,
                  fill: null }),
    $(go.TextBlock, "null", { row: 1, column: 3 })
  ));
239</code></pre>
240<script>goCode("fill", 600, 100)</script>
241<p>
242Try clicking inside each of the shapes to see which ones will respond to the click and cause the whole panel to be selected.
243Note that with the "transparent" fill you can see the diagram background, yet when you click in it you "hit" the Shape.
244Only the last one, with a null fill, is truly "hollow".
245Clicking in the last shape will only result in a click on the diagram background, unless you click on the stroke outline.
246</p>
247
248<h2 id="Geometry">Geometry</h2>
249<p>
250Every <a>Shape</a> gets its "shape" from the <a>Geometry</a> that it uses.
251A Geometry is just a saved description of how to draw some lines given a set of points.
252Setting <a>Shape.figure</a> uses a named predefined geometry that can be parameterized.
253In general it is most efficient to give a Shape a Geometry rather than giving it a figure.
254</p>
255<p>
256If you want something different from all of the predefined figures in <b>GoJS</b>,
257you can construct your own Geometry and set <a>Shape.geometry</a>.
258One way of building your own <a>Geometry</a> is by building <a>PathFigure</a>s
259consisting of <a>PathSegment</a>s.
260This is often necessary when building a geometry whose points are computed based on some data.
261</p>
262<p>
263But an easier way to create constant geometries is by
264calling <a>Geometry,parse</a> to read a string that has a geometry-defining path expression,
265or to set <a>Shape.geometryString</a> to such a string.
266These expressions have commands for moving an imaginary "pen".
267The syntax for geometry paths is documented in the <a href="geometry.html">Geometry Path Strings</a> page.
268</p>
269<p>
270This example creates a Geometry that looks like the letter "W"
271and uses it in several Shape objects with different stroke characteristics.
272Geometry objects may be shared by multiple Shapes.
273Note that there may be no need to specify the <a>GraphObject.desiredSize</a> or <a>GraphObject.width</a> and <a>GraphObject.height</a>,
274because the Geometry defines its own size.
275If the size is set or if it is imposed by the containing Panel, the effective geometry is determined by the <a>Shape.geometryStretch</a> property.
276Depending on the value of the geometryStretch property, this may result in extra empty space or the clipping of the shape.
277</p>
278<pre class="lang-js" id="geometries"><code>
var W_geometry = go.Geometry.parse("M 0,0 L 10,50 20,10 30,50 40,0", false);
diagram.add(
  $(go.Part, "Horizontal",
    $(go.Shape, { geometry: W_geometry, strokeWidth: 2 }),
    $(go.Shape, { geometry: W_geometry, stroke: "blue", strokeWidth: 10,
                  strokeJoin: "miter", strokeCap: "butt" }),
    $(go.Shape, { geometry: W_geometry, stroke: "blue", strokeWidth: 10,
                  strokeJoin: "miter", strokeCap: "round" }),
    $(go.Shape, { geometry: W_geometry, stroke: "blue", strokeWidth: 10,
                  strokeJoin: "miter", strokeCap: "square" }),
    $(go.Shape, { geometry: W_geometry, stroke: "green", strokeWidth: 10,
                  strokeJoin: "bevel", strokeCap: "butt" }),
    $(go.Shape, { geometry: W_geometry, stroke: "green", strokeWidth: 10,
                  strokeJoin: "bevel", strokeCap: "round" }),
    $(go.Shape, { geometry: W_geometry, stroke: "green", strokeWidth: 10,
                  strokeJoin: "bevel", strokeCap: "square" }),
    $(go.Shape, { geometry: W_geometry, stroke: "red", strokeWidth: 10,
                  strokeJoin: "round", strokeCap: "butt" }),
    $(go.Shape, { geometry: W_geometry, stroke: "red", strokeWidth: 10,
                  strokeJoin: "round", strokeCap: "round" }),
    $(go.Shape, { geometry: W_geometry, stroke: "red", strokeWidth: 10,
                  strokeJoin: "round", strokeCap: "square" }),
    $(go.Shape, { geometry: W_geometry, stroke: "purple", strokeWidth: 2,
                  strokeDashArray: [4, 2] }),
    $(go.Shape, { geometry: W_geometry, stroke: "purple", strokeWidth: 2,
                  strokeDashArray: [6, 6, 2, 2] })
  ));
306</code></pre>
307<script>goCode("geometries", 600, 100)</script>
308
309<h2 id="AngleAndScale">Angle and Scale</h2>
310<p>
311Besides setting the <a>GraphObject.desiredSize</a> or <a>GraphObject.width</a> and <a>GraphObject.height</a> to declare the size of a <a>Shape</a>,
312you can also set other properties to affect the appearance.
313For example, you can set the <a>GraphObject.angle</a> and <a>GraphObject.scale</a> properties.
314</p>
315<pre class="lang-js" id="transformedShapes"><code>
diagram.add(
  $(go.Part, "Table",
    $(go.Shape, { row: 0, column: 1,
                  figure: "Club", fill: "green", width: 40, height: 40,
                  }),  // default angle is zero; default scale is one
    $(go.Shape, { row: 0, column: 2,
                  figure: "Club", fill: "green", width: 40, height: 40,
                  angle: 30 }),
    $(go.Shape, { row: 0, column: 3,
                  figure: "Club", fill: "green", width: 40, height: 40,
                  scale: 1.5 }),
    $(go.Shape, { row: 0, column: 4,
                  figure: "Club", fill: "green", width: 40, height: 40,
                  angle: 30, scale: 1.5 })
  ));
331</code></pre>
332<script>goCode("transformedShapes", 600, 100)</script>
333
334<p>
335The <a>Shape.fill</a> and <a>GraphObject.background</a> brushes scale and rotate along with the shape.
336The <a>GraphObject.areaBackground</a> is drawn in the containing panel's coordinates,
337so it is not affected by the object's scale or angle.
338</p>
339<p>
340The following two shapes each use three separate linear gradient brushes, one for each of the three properties.
341Note the unrotated shape on the left.  Because its <a>GraphObject.background</a> brush is opaque,
342you cannot see the <a>GraphObject.areaBackground</a> brush that fills the same area behind it.
343</p>
344<pre class="lang-js" id="backgrounds"><code>
var bluered = $(go.Brush, "Linear", { 0.0: "blue", 1.0: "red" });
var yellowgreen = $(go.Brush, "Linear", { 0.0: "yellow", 1.0: "green" });
var grays = $(go.Brush, "Linear", { 0.0: "black", 1.0: "lightgray" });
348
diagram.add(
  $(go.Part, "Table",
    $(go.Shape, { row: 0, column: 0,
                  figure: "Club", width: 40, height: 40, angle: 0, scale: 1.5,
                  fill: bluered,
                  background: yellowgreen,
                  areaBackground: grays
                }),
    $(go.Shape, { row: 0, column: 1, width: 10, fill: null, stroke: null }),
    $(go.Shape, { row: 0, column: 2,
                  figure: "Club", width: 40, height: 40, angle: 45, scale: 1.5,
                  fill: bluered,
                  background: yellowgreen,
                  areaBackground: grays
                })
  ));
365</code></pre>
366<script>goCode("backgrounds", 600, 120)</script>
367
368<h2 id="CustomFigures">Custom Figures</h2>
369<p>
370As shown above, one can easily create custom shapes just by setting <a>Shape.geometry</a> or <a>Shape.geometryString</a>.
371This is particularly convenient when importing SVG.
372However it is also possible to define additional named figures, which is convenient when you want to be able to easily
373specify or change the geometry of an existing Shape by setting or data binding the <a>Shape.figure</a> property.
374</p>
375<p>
376The static function <a>Shape,defineFigureGenerator</a> can be used to define new figure names.
377The second argument is a function that is called with the <a>Shape</a> and the expected width and height
378in order to generate and return a <a>Geometry</a>.
379This permits parameterization of the geometry based on properties of the Shape and the expected size.
380In particular, the <a>Shape.parameter1</a> and <a>Shape.parameter2</a> properties can be considered,
381in addition to the width and height, while producing the Geometry.
382To be valid, the generated Geometry bounds must be equal to or less than the supplied width and height.
383</p>
384<pre class="lang-js" id="defineFigure"><code>
go.Shape.defineFigureGenerator("RoundedTopRectangle", function(shape, w, h) {
  // this figure takes one parameter, the size of the corner
  var p1 = 5;  // default corner size
  if (shape !== null) {
    var param1 = shape.parameter1;
    if (!isNaN(param1) && param1 >= 0) p1 = param1;  // can't be negative or NaN
  }
  p1 = Math.min(p1, w / 2);
  p1 = Math.min(p1, h / 2);  // limit by whole height or by half height?
  var geo = new go.Geometry();
  // a single figure consisting of straight lines and quarter-circle arcs
  geo.add(new go.PathFigure(0, p1)
           .add(new go.PathSegment(go.PathSegment.Arc, 180, 90, p1, p1, p1, p1))
           .add(new go.PathSegment(go.PathSegment.Line, w - p1, 0))
           .add(new go.PathSegment(go.PathSegment.Arc, 270, 90, w - p1, p1, p1, p1))
           .add(new go.PathSegment(go.PathSegment.Line, w, h))
           .add(new go.PathSegment(go.PathSegment.Line, 0, h).close()));
  // don't intersect with two top corners when used in an "Auto" Panel
  geo.spot1 = new go.Spot(0, 0, 0.3 * p1, 0.3 * p1);
  geo.spot2 = new go.Spot(1, 1, -0.3 * p1, 0);
  return geo;
});
407
go.Shape.defineFigureGenerator("RoundedBottomRectangle", function(shape, w, h) {
  // this figure takes one parameter, the size of the corner
  var p1 = 5;  // default corner size
  if (shape !== null) {
    var param1 = shape.parameter1;
    if (!isNaN(param1) && param1 >= 0) p1 = param1;  // can't be negative or NaN
  }
  p1 = Math.min(p1, w / 2);
  p1 = Math.min(p1, h / 2);  // limit by whole height or by half height?
  var geo = new go.Geometry();
  // a single figure consisting of straight lines and quarter-circle arcs
  geo.add(new go.PathFigure(0, 0)
           .add(new go.PathSegment(go.PathSegment.Line, w, 0))
           .add(new go.PathSegment(go.PathSegment.Line, w, h - p1))
           .add(new go.PathSegment(go.PathSegment.Arc, 0, 90, w - p1, h - p1, p1, p1))
           .add(new go.PathSegment(go.PathSegment.Line, p1, h))
           .add(new go.PathSegment(go.PathSegment.Arc, 90, 90, p1, h - p1, p1, p1).close()));
  // don't intersect with two bottom corners when used in an "Auto" Panel
  geo.spot1 = new go.Spot(0, 0, 0.3 * p1, 0);
  geo.spot2 = new go.Spot(1, 1, -0.3 * p1, -0.3 * p1);
  return geo;
});
430
diagram.nodeTemplate =
    $(go.Part, "Spot",
      {
        selectionAdorned: false,  // don't show the standard selection handle
        resizable: true, resizeObjectName: "SHAPE",  // user can resize the Shape
        rotatable: true, rotateObjectName: "SHAPE",  // user can rotate the Shape
                                                     // without rotating the label
      },
      $(go.Shape,
        {
          name: "SHAPE",
          fill: $(go.Brush, "Linear", { 0.0: "white", 1.0: "gray" }),
          desiredSize: new go.Size(100, 50)
        },
        new go.Binding("figure", "fig"),
        new go.Binding("parameter1", "p1")),
      $(go.Panel, "Vertical",
        $(go.TextBlock,
          new go.Binding("text", "fig")),
        $(go.TextBlock, { stroke: "blue" },
          new go.Binding("text", "parameter1", function(p1) { return p1; }).ofObject("SHAPE"))
      )
    );
454
diagram.model = new go.Model([
  { fig: "RoundedTopRectangle" },
  { fig: "RoundedTopRectangle", p1: 0 },
  { fig: "RoundedTopRectangle", p1: 3 },
  { fig: "RoundedTopRectangle", p1: 10 },
  { fig: "RoundedTopRectangle", p1: 50 },
  { fig: "RoundedTopRectangle", p1: 250 },
  { fig: "RoundedBottomRectangle" },
  { fig: "RoundedBottomRectangle", p1: 0 },
  { fig: "RoundedBottomRectangle", p1: 3 },
  { fig: "RoundedBottomRectangle", p1: 10 },
  { fig: "RoundedBottomRectangle", p1: 50 },
  { fig: "RoundedBottomRectangle", p1: 250 }
]);
469</code></pre>
470<script>goCode("defineFigure", 700, 300)</script>
471<p>
472Note how the <a>Shape.parameter1</a> property, data bound to the "p1" property, controls how rounded the corners are.
473The definition of each figure limits the roundedness based on the actual size of the geometry.
474You can see the effects by resizing the last shape -- the curve on the shape with p1==250 can be huge if the shape becomes huge.
475</p>
476<p>
477You can find the definitions for many figures at: <a href="../extensions/Figures.js" target="_blank">Figures.js</a>.
478The "RoundedTopRectangle" and "RoundedBottomRectangle" figures shown above are available at:
479<a href="../extensions/RoundedRectangles.js" target="_blank">RoundedRectangles.js</a>.
480</p>
481
    </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">
492
      <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-14 sm:pb-20 grid grid-cols-1 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 href="https://www.nwoods.com">Northwoods</a>
              </li>
              <li>
                <a href="https://www.nwoods.com/about.html">About Us</a>
              </li>
              <li>
                <a href="https://www.nwoods.com/contact.html">Contact Us</a>
              </li>
              <li>
                <a href="https://twitter.com/northwoodsgo">Twitter</a>
              </li>
555
            </ul>
          </li>
        </ul>
559
560
    <p class="text-sm text-gray-100 md:mb-6">
      Copyright 1998-2021 <a class="text-white" href="https://www.nwoods.com">Northwoods Software</a>
    </p>
  </div>
</div>
566</footer>  </body>
567
568<script async src="https://www.googletagmanager.com/gtag/js?id=UA-1506307-5"></script> 
569<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date()); gtag('config', 'UA-1506307-5');
var getOutboundLink = function(url, label) {
  gtag('event', 'click', {
    'event_category': 'outbound',
    'event_label': label,
    'transport_type': 'beacon'
  });
}
580
// 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");
});
590</script>
<script src="../assets/js/prism.js"></script>
<script src="../release/go.js"></script>
593<script src="../extensions/Figures.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>
606</html>