gojs/extensionsTS/PolygonDrawingScript.ts

Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams

/*
*  Copyright (C) 1998-2023 by Northwoods Software Corporation. All Rights Reserved.
*/

/*
* This is an extension and not part of the main GoJS library.
* Note that the API for this class may change with any version, even point releases.
* 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 extensionsJSM folders.
* See the Extensions intro page (https://gojs.net/latest/intro/extensions.html) for more information.
*/

import * as go from '../release/go.js';
import { GeometryReshapingTool } from './GeometryReshapingTool.js';
import { PolygonDrawingTool } from './PolygonDrawingTool.js';

let myDiagram: go.Diagram;

export function init() {
  if ((window as any).goSamples) (window as any).goSamples();  // init for these samples -- you don't need to call this

  const $ = go.GraphObject.make;

  myDiagram =
    new go.Diagram('myDiagramDiv');

  myDiagram.toolManager.mouseDownTools.insertAt(3, $(GeometryReshapingTool, { isResegmenting: true }));

  myDiagram.nodeTemplate =
    $(go.Node,
      new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
      {
        selectionObjectName: "SHAPE",
        selectionAdornmentTemplate:  // custom selection adornment: a blue rectangle
          $(go.Adornment, "Auto",
            $(go.Shape, { stroke: "dodgerblue", fill: null }),
            $(go.Placeholder, { margin: -1 })),
        resizable: true, resizeObjectName: "SHAPE",
        rotatable: true, rotationSpot: go.Spot.Center,
        reshapable: true
      },
      new go.Binding("angle").makeTwoWay(),
      $(go.Shape,
        { name: "SHAPE", fill: "lightgray", strokeWidth: 1.5 },
        new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
        new go.Binding("geometryString", "geo").makeTwoWay(),
        new go.Binding("fill"),
        new go.Binding("stroke"),
        new go.Binding("strokeWidth"))
    );

  // create polygon drawing tool for myDiagram, defined in PolygonDrawingTool.js
  const tool = new PolygonDrawingTool();
  // provide the default JavaScript object for a new polygon in the model
  tool.archetypePartData = { fill: 'yellow', stroke: 'blue', strokeWidth: 3 };
  tool.isPolygon = true;  // for a polyline drawing tool set this property to false
  tool.isEnabled = false;
  // install as first mouse-down-tool
  myDiagram.toolManager.mouseDownTools.insertAt(0, tool);

  load();  // load a simple diagram from the textarea
}

export function mode(draw: boolean, polygon: boolean) {
  // assume PolygonDrawingTool is the first tool in the mouse-down-tools list
  const tool: PolygonDrawingTool = myDiagram.toolManager.mouseDownTools.elt(0) as PolygonDrawingTool;
  tool.isEnabled = draw;
  tool.isPolygon = polygon;
  (tool.archetypePartData as go.Shape).fill = (polygon ? 'yellow' : null);
  tool.temporaryShape.fill = (polygon ? 'yellow' : null);
  if (draw) myDiagram.currentTool = tool;
}

// this command ends the PolygonDrawingTool
export function finish(commit: boolean) {
  const tool = myDiagram.currentTool;
  if (commit && tool instanceof PolygonDrawingTool) {
    const lastInput = myDiagram.lastInput;
    if (lastInput.event instanceof MouseEvent) tool.removeLastPoint();  // remove point from last mouse-down
    tool.finishShape();
  } else {
    tool.doCancel();
  }
}

// this command removes the last clicked point from the temporary Shape
export function undo() {
  const tool = myDiagram.currentTool;
  if (tool instanceof PolygonDrawingTool) {
    const lastInput = myDiagram.lastInput;
    if (lastInput.event instanceof MouseEvent) tool.removeLastPoint();  // remove point from last mouse-down
    tool.undo();
  }
}

export function updateAllAdornments() {  // called after checkboxes change Diagram.allow...
  myDiagram.selection.each((p) => { p.updateAdornments(); });
}

export function toggleResegmenting() {
  var tool = myDiagram.toolManager.findTool("GeometryReshaping") as GeometryReshapingTool;
  tool.isResegmenting = !tool.isResegmenting;
  updateAllAdornments();
}

// save a model to and load a model from Json text, displayed below the Diagram
export function save() {
  const str = '{ "position": "' + go.Point.stringify(myDiagram.position) + '",\n  "model": ' + myDiagram.model.toJson() + ' }';
  (document.getElementById('mySavedDiagram') as any).value = str;
  myDiagram.isModified = false;
}
export function load() {
  const str = (document.getElementById('mySavedDiagram') as any).value;
  try {
    const json = JSON.parse(str);
    myDiagram.initialPosition = go.Point.parse(json.position || '0 0');
    myDiagram.model = go.Model.fromJson(json.model);
    myDiagram.model.undoManager.isEnabled = true;
  } catch (ex) {
    alert(ex);
  }
}

export function select() {
  mode(false, false);
}
export function drawPolygon() {
  mode(true, true);
}
export function drawPolyline() {
  mode(true, false);
}
export function finishDrawing() {
  finish(true);
}
export function cancelDrawing() {
  finish(false);
}
export function allowResizing() {
  myDiagram.allowResize = !myDiagram.allowResize; updateAllAdornments();
}
export function allowReshaping() {
  myDiagram.allowReshape = !myDiagram.allowReshape; updateAllAdornments();
}
export function allowRotating() {
  myDiagram.allowRotate = !myDiagram.allowRotate; updateAllAdornments();
}