Cropping Tool for Interactive Cropping of Pictures
The CroppingTool class lets the user crop an image by modifying the Picture.sourceRect of a Picture in a selected Part. It is defined in its own file, as CroppingTool.js.
Select a picture and click the "Crop" button, or just double-click, to start cropping its picture. Drag the handles to change the cropped area, or drag within the highlighted rectangle to move the crop "window" around. Click the button again, or click elsewhere in the diagram, to finish. The new crop is applied to the frame's Picture in a transaction, so cropping can be undone.
The tool shows the full image in a temporary Part held in the "Adornment" Layer. CroppingTool extends ResizingTool, overriding canStart, updateAdornments, and makeAdornment so that its handles appear only around the cropped portion of that temporary Part, and overriding resize and computeResize so that dragging a handle changes the Picture.sourceRect. The cropping handles are inversely scaled by the Diagram.scale so they keep a constant size on screen. The minimum size of the crop rectangle, minViewSize, is measured in viewport pixels. The aspectRatio property locks crops to fixed proportions, holding down the Shift key while dragging maintains the crop's current proportions.
In this sample each node is a picture frame on a family's wall of photos. Several of the frames start out already cropped by the "view" property in the model data. The frame displays its Picture in a "Viewbox" Panel, so the cropped image always fits within the frame, whose size the user can change independently by resizing it.
GoJS Features in this sample
Tools
Tools handle all input events, such as mouse and keyboard interactions, in a Diagram. There are many kinds of predefined Tool classes that implement all of the common operations that users do.
For flexibility and simplicity, all input events are canonicalized as InputEvents and redirected by the diagram to go to the Diagram.currentTool. By default the Diagram.currentTool is an instance of ToolManager held as the Diagram.toolManager. The ToolManager implements support for all mode-less tools. The ToolManager is responsible for finding another tool that is ready to run and then making it the new current tool. This causes the new tool to process all of the input events (mouse, keyboard, and touch) until the tool decides that it is finished, at which time the diagram's current tool reverts back to the Diagram.defaultTool, which is normally the ToolManager, again.
More information can be found in the GoJS learn pages.
Extensions
GoJS can be extended in a variety of ways. The most common way to change the standard behavior is to set properties on the GraphObject, Diagram, CommandHandler, Tool, or Layout. But when the desired property does not exist, you might need to override methods of CommandHandler, Tool, Layout, Link, or Node. Methods that you can override are documented in the API reference. Various features of GoJS can be overriden, either by replacing a method on an instance (a feature of JavaScript) or by defining a subclass. You should not modify the prototypes of any of the GoJS classes.
In addition to our samples, GoJS provides an
extensions gallery, showcasing the creation of custom tools and layouts. Those classes and samples are
written in TypeScript, available at ../extensionsJSM/, as
ECMAScript/JavaScript modules -- these use the
../release/go-module.js library. We recommend that you copy the files that
you need into your project, so that you can adjust how they refer to the GoJS library
that you choose and so that you can include them into your own building and packaging
procedures.
More information can be found in the GoJS learn pages.