• Public
  • Public/Protected
  • All


This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. Extensions can be found in the GoJS kit under the extensions or extensionsTS folders. See the Extensions intro page for more information.


  • Tool
    • PolygonDrawingTool

The PolygonDrawingTool class lets the user draw a new polygon or polyline shape by clicking where the corners should go. Right click or type ENTER to finish the operation.

Set isPolygon to false if you want this tool to draw open unfilled polyline shapes. Set archetypePartData to customize the node data object that is added to the model. Data-bind to those properties in your node template to customize the appearance and behavior of the part.

This tool uses a temporary Shape, temporaryShape, held by a Part in the "Tool" layer, to show interactively what the user is drawing.

If you want to experiment with this extension, try the Polygon Drawing sample.




  • Constructs an PolygonDrawingTool and sets the name for the tool.

    Returns PolygonDrawingTool


archetypePartData : ObjectData

  • Gets or sets the node data object that is copied and added to the model when the drawing operation completes.

hasArcs : boolean

  • Gets or sets whether this tools draws shapes with quadratic bezier curves for each segment, or just straight lines.

    The default value is false -- only use straight lines.

isOrthoOnly : boolean

  • Gets or sets whether this tools draws shapes with only orthogonal segments, or segments in any direction. The default value is false -- draw segments in any direction. This does not restrict the closing segment, which may not be orthogonal.

isPolygon : boolean

  • Gets or sets whether this tools draws a filled polygon or an unfilled open polyline.

    The default value is true.

temporaryShape : Shape

  • Gets or sets the Shape that is used to hold the line as it is being drawn.

    The default value is a simple Shape drawing an unfilled open thin black line.


Override canStart

  • canStart(): boolean
  • Don't start this tool in a mode-less fashion when the user's mouse-down is on an existing Part. When this tool is a mouse-down tool, it requires using the left mouse button in the background of a modifiable Diagram. Modal uses of this tool will not call this canStart predicate.

    Returns boolean

Override doActivate

  • doActivate(): void
  • Start a transaction, capture the mouse, use a "crosshair" cursor, and start accumulating points in the geometry of the temporaryShape.

    Returns void

Override doDeactivate

  • doDeactivate(): void
  • Stop the transaction and clean up.

    Returns void

Override doKeyDown

  • doKeyDown(): void
  • Typing the "ENTER" key accepts the current geometry (excluding the current mouse point) and creates a new part in the model by calling finishShape.

    Typing the "Z" key causes the previous point to be discarded.

    Typing the "ESCAPE" key causes the temporary Shape and its geometry to be discarded and this tool to be stopped.

    Returns void

Override doMouseDown

  • doMouseDown(): void

Override doMouseMove

  • doMouseMove(): void
  • Move the last point of the temporaryShape's geometry to follow the mouse point.

    Returns void

Override doMouseUp

  • doMouseUp(): void
  • Do not stop this tool, but continue to accumulate Points via mouse-down events.

    Returns void


  • finishShape(): void
  • Add a new node data JavaScript object to the model and initialize the Part's position and its Shape's geometry by copying the temporaryShape's Shape.geometry.

    Returns void


  • undo(): void
  • Undo: remove the last point and continue the drawing of new points.

    Returns void

加入 GoJS 交流群
GoJS 交流群 (769862113)