JDraw: A Graphics Application in Java
By Charles Krebs and Diane Donohue



Download JDraw package See Installation instructions

1. Introduction

1.1 Problem Statement

2. Developer's Overview

2.1 Top-Level
2.2 Commands
2.3 Tools
2.4 Canvas
    2.4.1 CanvasWindow
2.5 Continuing Effort
     2.5.1 Calls Graph
     2.5.2Adding A New Shape To JDraw
     2.5.3 Future Development Plans

3. User's Manual

4. Installation Instructions




1. Introduction

This document contains both technical and user-oriented information on the JDraw graphics tool. The tool is intended to provide its user with the ability to develop advanced graphic displays using a quick and easy interface.


1.1 Problem Statement

The main problem to be solved by the JDraw package is the need for a quick, yet powerful graphics application which can be used in a variety of graphical operating systems. The specification basis for development was an independent application titled IDraw, which was written in C++ for the Unix graphical environments. Ultimately the goal was to develop a system with all the functionality of IDraw, yet written in Java to allow for cross-platform compatibility.



2. Developer's Overview

What follows is a rundown of the primary information required for developers who wish to continue the work begun with JDraw. Along with JDraw's javadoc documentation, this overview should provide enough explanation of the system to enable further development.


2.1 Top-Level

The top level of the JDraw system consists of three main model/view components: A Commands class which contains the methods available through manipulating the CommandMenu, A Tools class which defines the methods invoked by manipulating the ToolsPalette, and a Canvas class which defines the underlying data representation of the CanvasWindow. Within a JDraw session there can be multiple instances of the Canvas class (representing multiple CanvasWindows open simultaneously).


2.2 Commands

The Commands class contains all the functionality available through the CommandMenu on-screen component. The Model components of the Commands class are represented by seven Model classes.

The File class, represented by the 'File' menu contains file and system access methods, such as Save, Open, Print, Close,Revert, and Import. File operations, with the exception of Open and Exit are performed on the currently active Canvas.

The Edit class, represented by the 'Edit' menu contains methods for altering the properties of currently selected graphics, such as Cut, Copy, Delete, Paste, Flipping Vertically and Horizontally, Rotating and Scalling Precisely. It also contains items to Undo and Redo previous actions. All Edit operations are performed on the active Canvas.

The Structure class, represented by the 'Structure' menu contains methods for controlling Group affiliations, z-axis relativity, and viewing the current number of graphics. Structure operations are performed on the active Canvas.

The Text class, represented by the 'Text' menu contains methods for changing the current system Text properties, as well as the properties of any selected TextObject items in the active Canvas. The properties, each with its own sub-menu, are Font Type, Font Size, and Font Style.

The BrushPatternColor class, represented by four different menus (Brush, Pattern, FGColor, and BGColor), contains methods for changing the current creation-time graphic properties (in the Tools class), as well as the properties of currently selected graphics in the active Canvas. Each menu, representing one of the four properties, offers a list of commonly used elements, in addition to the option of a user-defined version of its property.

The Align class, represented by the 'Align' menu contains methods for controlling the relative x and y positions of currently selected graphics in the active Canvas, such as aligning the sides together, aligning the centers, or aligning graphics in series.

The Options class, represented by the 'Options' menu contains methods for controlling the view properties of the currently active Canvas Window, such as zoom factor.


2.3 Tools

The Tools class contains all the functionality available through manipulation of the on screen ToolsPalette component. Tools also contains data members for storing all system-wide properties, such as the currently active tool, the list of active Canvas instances, the system's graphics buffer for pasting, and the creation-time graphic properties. Upon clicking an item in the ToolsPalette, the active tool element is set to indicate the appropriate Canvas manipulation tool.


2.4 Canvas

The Canvas class contains data members for storing all Canvas-exclusive information, including a list of layers, the list of its graphics per layer, the list of its group affiliations, the list of selected graphics' indices, the filename under which the data of this Canvas is currently stored, this Canvas' integer ID, and a boolean value representing whether this Canvas needs to be saved.

Canvas also contains access methods to each of its data members, in addition to methods for adding graphics, determining which graphic (or group of graphics) should be selected, given a point on the Canvas, and rotating the list of selected graphics.


2.4.1 CanvasWindow

The companion class to Canvas, CanvasWindow contains all the runtime functionality for Canvas manipulation. It contains all data members necessary to adjust and append Canvas' graphics list, based on user interaction. It also contains members for specific Canvas-exclusive data, such as zoom factor and the undo/redo buffers and their corresponding methods.

Its button methods, called from its Key Listener data member define the actions taken given mouse events and the currently active tool integer. CanvasWindow also contains an instance of the CanvasPage class, which defines the methods required to write a Canvas' graphics list to the screen or a printer.


2.5 Continuing Effort

2.5.1 Calls Graph

This is a graph of the calls made from the main class as Jdraw is first started up by the user.

2.5.2 Adding a New Shape To JDraw

I. Adding a new Shape to JDraw

1. The shape must be of type GraphicObject. The shape must be serializeable so check the bundle method and make sure all the fields are assigned. If you need to add additional fields be very careful about the position you add these fields to because the class JDraw/Canvas unravels the junkbundle and assigns the various fields in order to the current shape type. Look at the method addGraphicObject(vector junkbundle) in JDraw/Canvas and add your shape and any additional data fields to this method. You can test if this is done correctly by drawing your shape along with a couple other shape types, saving and closing the window. If you can open the file and all the shapes are redrawn appropriately without error messages you are OK.

2. New shapes are added to the JDraw/Tools Class. Assign the next available number to this shape. This is the number other classes will reference when the new shape is the active tool. You will also need to add the new shape to the Tool Menu.

3. The 3 most important classes in JDraw are Canvas, CanvasPage, and CanvasWindow.You can think of them in the following way:

Canvas contains a working list of all the graphic objects added to a canvas window. The list is separated into window layers. The methods in Canvas involve keeping track of the layers, graphic objects and manipulating the layers and lists of graphic objects.

CanvasPage is responsible for printing the layers of graphic objects of a canvas window to the monitor or printer. Its methods are concerned with page layouts, printer layouts, and drawing the shapes in the correct position and zoom, with the current graphicObject properties. It also revises the window as needed.

CanvasWindow handles the mouse and key events with methods that use switch statements for the corresponding active tool number in the JDraw/Tools Class. Drawing,selecting, moving, scaling, etc. are all handled by manipulating the current and previous points that are selected by mouse movements. The canvasPage is redrawn as the shapes in the window change. The methods in Canvas Window are performed either on a single GraphicObject or on multiple GraphicObjects that have been selected using the Select Tool in the Tools Menu.

4. The new shape has an associated active tool number(assigned in Tools)and needs to be implemented in the switch statements of the CanvasWindow mouse event methods.

5. Your new shape must be able to handle all the transformations of the Tool menu, for example move, scale, reshape etc. So if a particular shape can not do a transformation then make sure to overwrite the method in your ShapeObject. This will prevent problems when the shape is selected in a group transformation performed by CanvasWindow methods. If you have a new transformation you will also need to add this to the JDraw/Tools class (assigning it the next available number) and to the JDraw/ToolsMenu. You must also implement the new transformation in CanvasWindow methods.

2.5.3 Future Development Plans

There are many features of JDraw which have not been fully implemented to this point. The following is a list of the unimplemented features:

In addition to these changes, JDraw is ripe for a thorough testing process.

 

3. User's Manual


NAME
JDraw - drawing editor

SYNOPSIS
java jdraw.main

DESCRIPTION
You can use JDraw to create and edit drawings containing graphics like text, images lines, curved lines, rectangles, polygons, ellipses, and curved shapes. Drawings are stored in JDraw picture files and can be printed to a printer from Windows or Unix Environments. The graphics are displayed in a scrollable panel, which expands to fit all the Canvas' graphics. The Canvas' graphics can also be layered within the window. There is a toolbar (in a separate) window to the left of the editor pane and a menu bar (in another window) above the editor.
DRAWING TOOLS
The drawing tools lie in a vertical row in the toolbar to the left of the editor pane. Select, Move, Scale, Stretch, Rotate, and Reshape, Color Fill and Eyedropper manipulate existing graphics. Text, Image, Line, Multi Line, Curve, Ellipse, Rectangle, Polygon, and (Curved) Shape create new graphics. You can set the current drawing tool by clicking on it in the toolbar. Clicking the left mouse button in the drawing area invokes the current drawing tool. Moving the mouse over a tool provides tool description. The following are the drawing tools available in JDraw:

Select

Select a graphic whether or not it's already selected and discard all other selections. If you hold down the shift key, Select retains the previous selections while including an unselected graphic or excluding a selected graphic. If you press the button outside any graphic, you can clear all of the selections or drag a rubber band rectangle around a group of graphics to select all of them together.

Move

Move graphics from one spot to another.
Scale
Scale graphics about their centers.
Stretch
Stretch graphics vertically or horizontally while tying down the opposite edge .
Rotate
Rotate graphics about their centers according to the angle between two radii: the one defined by the original clicking point and the one defined by the current dragging point.
Reshape

Move one of a graphic's points and reshape the graphic accordingly. Nothing happens when you try to reshape an ellipse or text object because they don't have any points suitable for dragging.

 

EyeDropper

A color is selected for the eye dropper fill color by clicking on an object that has the desired color.

Fill Bucket

To fill objects with this color select the object by clicking in its interior.

Text

Create some text. You click where you want to put the text line's upper left corner and then type your text. Text is terminated when you hit the 'Enter' key.

Image

Inserts a jpeg or gif file at the current position clicked in the canvas window.

Line
Create a line. The line begins at the point where you press the left mouse key and ends where the left mouse key is released.
Multi Line
Create a set of connected lines. A control point is placed each time the left key is pressed and the final point is placed when the right button is pressed.
Curve
Create an open set of Bezier curves. A control point is placed each time the left key is pressed and the final point is placed when the right button is pressed.
Ellipse
Create an ellipse. One corner resides at the point where you press the left mouse key and the opposite corner resides where the left mouse key is released.
Rectangle
Create a rectangle. One corner resides at the point where you press the left mouse key and the opposite corner resides where the left mouse key is released.
Polygon
Create a polygon. A control point is placed each time the left key is pressed and the final point is placed when the right button is pressed. The polygon is closed by connecting the final point with the first control point.
Shape
Create an closed set of Bezier curves. A control point is placed each time the left key is pressed and the final point is placed when the right button is pressed. The shape is closed by connecting the final point with the first control point.

PULL-DOWN MENUS
The pull-down menus File, Edit, Structure, Text, Brush, Pattern, Align, and Options lie in the menu bar above the editor pane. They contain commands which you execute by pulling down the menu and releasing the mouse button on the command.


The File menu contains the following commands to operate on files:

New
Open a new graphics editor pane, which is blank.
Revert
Reread the currently active drawing, destroying any unsaved changes (not currently implemented).
Open...
Open a '.jdr' file and draw its graphics in a new editor pane.
Save As...
Save the currently active drawing in a file whose name you type.
Save
Save the currently active drawing in the file it came from.
Close

Close the currently active drawing editor.

Import

Import a .jpeg or .gif image to the currently active drawing editor.

Print...
Print the currently active drawing to a printer in the Windows environment. The printer can be selected from the Print Dialog.
Exit
Exits the JDraw environment.

The Edit menu contains the following commands to edit graphics:

Undo
Undo the last done change to the drawing. Successive Undo commands undo earlier and earlier changes back to the last stored change.
Redo
Redo the last undone change to the drawing. Successive Redo commands redo later and later changes up to the first change undone by Undo. Any new changes cause all undone changes to be forgotten.
Cut
Remove the selected graphics from the currently active drawing and place them in a temporary graphics buffer.
Copy
Copy the selected graphics from the currently active drawing into a temporary graphics buffer.
Paste
Paste a copy of the graphics in the graphics buffer (if any) into the currently active drawing.
Duplicate
Duplicate the selected graphics in the currently active drawing and add the copies to the currently active drawing.
Delete
Destroy the selected graphics in the currently active drawing.
Select All
Select every graphic in the currently active drawing layer.
Flip Horizontal, Flip Vertical
Flip the selected graphics in the currently active drawing into their mirror images along the horizontal or vertical axes.
90 Clockwise, 90 CounterCW
Rotate the selected graphics in the currently active drawing 90 degrees clockwise or counter clockwise.
Precise Move..., Precise Scale..., Precise Rotate...
Move, scale or rotate graphics by exact amounts which you type in a dialog box. You type movements in units of screen pixels and rotations in degrees.

The Structure menu contains the following commands to modify the structure of the drawing:

Group
Give the selected graphics the properties of a single graphic. When any of the graphics within the group are manipulated, the changes affect all graphics in the group.
Ungroup
Dissolve the group consisting of all selected graphics (if any).
Bring To Front
Bring the selected graphics to the front of the drawing so that they are drawn on top or (after) the other graphics in the drawing.
Send To Back
Send the selected graphics to the back of the drawing so that they are drawn behind (before) the other graphics in the drawing.
Number of Graphics
Count and display in a pop up window the number of selected graphics. If no graphics are selected, the total number of graphics in the drawing is displayed.


The Font menu contains sub-menus for choosing Font properties. The properties available are Font Type, Font Size, and Font Style. The Font properties are set for all selected Text Objects as well as any which are subsequently created.

The Brush menu contains a set of brushes with which to draw lines, as well as an item to create your own brush. When you set the current brush in the menu, you will also set all the selected graphics' brushes to that brush. The Brush menu also contains a color selector which sets the foreground color.


The Pattern menu contains a set of patterns with which to fill graphics, as well as an item to create your own pattern. When you set the current pattern from the menu, you will also set all the selected graphics; patterns to that pattern. The Pattern menu also contains a color selector which sets the background color.

The Align menu contains commands to align graphics with other graphics or a grid. For series alignments, graphics are organized in the order they were selected.


The Option menu contains the following commands:

Reduce

Reduce the magnification of the currently active editor pane by a factor of two so that the drawing's size is decreased by half.
Enlarge
Enlarge the magnification of the currently active editor pane by a factor of two so that the drawing's size is doubled.
Normal Size
Set the magnification to unity so that the drawing appears at actual size.
Home
Reset the currently active editor's pane to the home position (if scrolled).
Gridding on/off
Toggle the grid's constraining effect on or off .
Grid visible/invisible
Toggle the grid's visibility on or off .
Grid Spacing...
Change the grid spacing using a dialog box.

Layers

Brings up a dialog box that allows manipulation of graphics within layers

Pages

Brings up a dialog box to set the page properties.


4. Installation Information

Important: You must have Java installed on your computer to run JDraw.

Download the JDraw jar file from here

Run the program by typing java -jar jdraw.jar

Unpack the jar file on your system by entering an MS-DOS prompt, changing to the directory in which you saved it, and typing 'jar xf jdraw.jar'.

Change to the 'jvm' directory and type 'java jdraw.main' to run the program.


Your could also just run the program by typing java -jar jdraw.jar without unpacking it.


Note: If your classpath is currently set, JDraw may not run properly. Reset your classpath by typing 'SET CLASSPATH=;'.

Enjoy! Please send comments to charleskrebs@charter.net or dedonohue@excite.com