Class FreehandDrawingTool

GoJS® Diagramming Components
version 3.0.8
by Northwoods Software®

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. See the Extensions intro page for more information.


  • Tool
    • FreehandDrawingTool

The FreehandDrawingTool allows the user to draw a shape using the mouse. It collects all of the points from a mouse-down, all mouse-moves, until a mouse-up, and puts all of those points in a go.Geometry used by a go.Shape. It then adds a node data object to the diagram's model.

This tool may be installed as the first mouse down tool:

  myDiagram.toolManager.mouseDownTools.insertAt(0, new FreehandDrawingTool());

The Shape used during the drawing operation can be customized by setting temporaryShape. The node data added to the model can be customized by setting archetypePartData.

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




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

  • Gets or sets whether this tool can only run if the user starts in the diagram's background rather than on top of an existing Part.

    The default value is true.

  • 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.


  • This adds a Point to the temporaryShape's geometry.

    If the Shape is not yet in the Diagram, its geometry is initialized and its parent Part is added to the Diagram.

    If the point is less than half a pixel away from the previous point, it is ignored.


    Returns void

  • 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.

    Returns boolean

  • Capture the mouse and use a "crosshair" cursor.

    Returns void

  • Release the mouse and reset the cursor.

    Returns void

  • Start drawing the line by starting to accumulate points in the temporaryShape's geometry.

    Returns void

  • Keep accumulating points in the temporaryShape's geometry.

    Returns void

  • Finish drawing the line by adding a node data object holding the geometry string and the node position that the node template can bind to. This copies the archetypePartData and adds it to the model.

    Returns void