Jul 25 2013

Basic Handle configuration in CupDraw

Handles are the small white and black objects that you see when you select a Figure (see next figure). They allow you to manipulate the figure by moving them around. In this tutorial, we will show you how to configure a Handle to alter the size of a Figure. We will as a base the diagram editor we were building in the previous part of the tutorial.

Handle configuration

Configuring a Handle is quite simple, basically in the initialization method of your Figure, you have to add the Handle to the handles collection it’s inherited from the Figure class. Let’s modify our SimpleRectangleFigure figure:

In this case we have added 4 handles that will look to the topLeft, topRight, bottomLeft and bottomRight properties of the Figure. If we reload the editor you can see that the Figure has the 4 handles and that if you move them around the SimpleRectangleFigure resizes itself.

Understanding how handles work

When we instantiate a Handle we pass the Figure which the Handle has to observe and a selector as a String. The Handle registers itself as an observer of the Figure so that when:

- The Figure the Handle observes is moved
It moves to a new position that is computed by sending the message to the Figure. In our first case Figure>>topLeft will be evaluated and a Point will be return. That point is used to set the new Frame of the Handle.

- The Handle is moved
The Handle sends Figure>>topLeft: aPoint to the observing Figure so that the Figure updates its Frame. One thing we have to recall is how we implement the - (void) drawRect:(CGRect) rect on: (id) context of our SimpleRectangleFigure:

Because we used the bounds of the SimpleRectangleFigure to draw, we are safe that the Handle will work when we move it around.

You can try it yourself here.
Also, the sources of the project are available here.

In the next episode we will show you how to create a more advance Handle to change the color of the Figure based on the distance to its center!


Jul 24 2013

Creating a Figure in CupDraw

In this series of tutorials we will show how to create diagram editors using CupDraw. In this first tutorial we will code a Rectangle figure and a Tool to create it.

Creating a BASIC Figure in Cupdraw consists in 2 basic steps:

  1. Define the visual aspects of the figure.
  2. Define the tool that creates the figure.

Before we start, copy the empty project to start a new one.

Define the visual aspects of the figure

To create a figure simply subclass the Figure class and implement the method (void) drawRect: (CGRect) rect on: (id) context

In our case we are going to create a SimpleRectangleFigure, so we will need to draw the background of the rectangle and the border. This can be done simply as follows:

All figures come with 2 predefined instance variables for the foreground and background colors that can be configured to paint it. We will define them as black and white in the initialization method as follows:

Great! so we have our figure coded, now let’s define the tool that creates the figure.

Define the tool that creates the figure

A Tool is responsible for interpreting events/gestures and instantiating the Figure. CupDraw comes with some abstract classes that can help you create some basic tools quickly. In our example we will extend AbstractCreateFigureTool and implement a simple method for creating the rectangle with a default width and height when the user clicks in the Drawing. We implement the - (void) createFigureAt: (id) aPoint on: (id) aDrawing method as follows:

The first line creates a default frame for the given point and then we instantiate our SimpleRectangleFigure. Then we add the rectangle to the given Drawing and we active the Selection tool so that the next click is handle by the Selection tool. If you want to stick to this tool so that multiple clicks create multiple rectangles, you can remove the last line.

The last thing is to add the Tool to the toolbox in the AppController, we can do that by simply:

That’s it, you can find the source code of the project here.
Check the working diagram here.
Stay tuned, in the next part we will add handles to the rectangle so that we can manipulate it.


Jul 23 2013

CupDraw 0.1 released

I’m pleased to announced the release of CupDraw 0.1.

Description

CupDraw is a Objective-J framework for creating graphical editors that is based on the concepts of the famous Smalltalk Hotdraw. So far, this version contains the main concepts of that Hotdraw with a few utility classes that can help you build a basic editor.

We were users of Hotdraw for desktop applications and we want to provide a port for Objective-J (as it is quite similar to Smalltalk). We are using this version to migrate most of the features of an Eclipse based editor for the WebSpec requirement language (you can see some videos of the eclipse version here). We plan to open this editor soon so that you can also be aware of the things you can do with CupDraw.

Features of this release:

  • Drawing
  • Basic Figures with Models and connections
  • Selection Tool with marquee selection
  • Common Tool classes for 1 click figure creation and figure connections
  • Magnets and handles
  • Grid, Snap to grid
  • Alignment commands
  • Grouping commands
  • Lock commands
  • Z-Index commands

More info