Integrated Manipulation:
Context-aware Manipulation of 2D Diagrams
Masaaki Honda, Takeo Igarashi, Hidehiko Tanaka, Shuichi Sakai
The University of Tokyo, Hongo 7-3-1, Bunkyoku, Tokyo, Japan
Tel: +81-3-3812-2111 ext 7413
E-mail: {honda,takeo,tanaka,sakai}@mtl.t.u-tokyo.ac.jp

5RWDWH

ABSTRACT

Diagram manipulation in conventional CAD systems
requires frequent mode switching and explicit placement of
the pivot for rotation and scaling. In order to simplify thisprocess, we propose an interaction technique called
integrated manipulation, where the user can move, rotate,and scale without mode switching. In addition, the pivot forrotation and scaling automatically snaps to a contact point
during moving operation. We performed a user study is
performed using our prototype system and a commercial
CAD system. The results showed that users could perform adiagram manipulation task much more rapidly using ourtechnique.

0RYH

6FDOH

0RYLQJ WKH SLYRW

Figure1: Integrated Manipulation.

7KH XVHU FDQ PRYH URWDWH DQG VFDOH WKH GLDJUDP DQG FDQ PRYHWKH SLYRW ZLWKRXW PRGH VZLWFKLQJKEYWORDS: Drawing editors, CAD, direct manipulation,interaction techniques.
INTRODUCTION

Conventional drawing editors and CAD systems have anumber of editing commands and modes. The user has tocombine them appropriately to construct a precise diagram[2]. For example, if the user wants to construct a figure 3f
starting from figure 3a, he must switch back and forth
between move, rotate, and scale modes. In addition, theuser has to place the pivot for rotation and scaling
manually.
To be specific, we observed the following problems:
1. The user has to change the editing mode frequently.
2. Snapping [1] is restricted to the current editing operation.
If the user is moving a diagram, it never rotates even if asmall rotation can satisfy a geometric constraint.
3. The user has to place the pivot for rotation and scaling
manually before the actual operation.
This paper introduces an interaction technique to solvethese problems, and reports the results of our preliminaryevaluation.
INTEGRATED MANIPULATION

Figure2: The diagram rotates and scales to snap evenwhile the user is moving it. The pivot automatically snaps
to the contact point.

mode. The user first specifies this mode from the menu, andselects the target diagram. The user manipulates theselected diagram by dragging it. However, unlike standard
editing modes, the user can move, rotate, and scale in this1
single mode . In addition, the snapping works more flexibly,
and the pivot for rotation and scaling snaps to a contact
point automatically.
In the integrated manipulation mode, the user’s dragging
operation works differently based on the starting point’s
relative location to the target diagram (Figure 1). If
dragging starts at the central part of the diagram, the system
is in the moving mode, and the user can move (translate)the diagram. If dragging starts at the outer part of thediagram, the system is in the rotation and scaling mode. The
user can rotate and scale the diagram simultaneously bysingle dragging. If the cursor moves toward or away fromthe diagram’s center, the diagram scales. If the cursor
rotates around the center, the diagram rotates.

Basically, integrated manipulation works as one editing
During these operations, the system constantly searches forpossible geometric constraints. If the system finds a
1We assume one handed, single pointing device operation.
Some systems [3] use two handed operation with a keyboard
or another pointing device in the non-dominant hand.

a)Selectb)Movec)Snapa) Initial statusb) Target status
Figure 4: Diagram editing task used in the experiment.
 §ÉÆËÆËÐÇ¼ ªÐÊË¼Ä

geometric constraint, it snaps the diagram to satisfy theconstraint. The current implementation supports
connections between vertices and edges. If necessary, thediagram automatically rotates or scales even if the user isonly moving it (Figure 2). In order to assist typicaloperations, scaling snaps to specific scales (x0.5, x1, x2,etc.) and rotation snaps to specific angles (0, 30, 45, 90
degrees, etc.). Rotation without scaling and scaling without
rotation are supported by this snapping mechanism. Theuser can turn off snapping and choose typical scaling or
rotation when he needs delicate control.
The pivot for rotation and scaling is indicated as a smallcircle. The pivot moves with the diagram when the user ismoving the diagram. The user can manually move the pivot
by dragging, and it snaps to the nearby vertex in the scene(Figure 1c). In addition, the pivot snaps to the contact point
when the current diagram snaps to another diagram (Figure2). If multiple contact points appear at once, the systemselects one randomly. The pivot remains at that point until
the user explicitly moves it, or until the diagram snaps intoanother point.
Figure 3 illustrates the diagram manipulation sequence
using our technique. Note that this sequence requires much
fewer clicking and dragging operations than existingdrawing editors.
Some commercial drawing editors[4] allow the user tomove and rotate (move and scale) in a single mode, but they
do not allow the combination of the three. In addition, thepivot does not automatically snaps in existing systems.
EVALUATION

We performed the evaluation experiment on a PC running
Windows 98. We used our prototype system (Java program)and a commercial CAD system (Vellum 3D™ [5]). 12
subjects participated in the experiment, and we observed
learning time and task completion time. First, we gave the §ÉÆËÆËÐÇ¼ ªÐÊË¼ÄÆÌÅËd)Rotatione)Snapf)CompleteFigure 3: Example diagram manipulation sequence.
a) The diagram is selected by clicking. b) It is moved bydragging the central part. c) It snaps to the otherdiagram. The pivot snaps to the contact point. d) It isrotated and scaled by dragging the outer region. e) Itsnaps to the other diagram. f) The user releases thediagram by clicking outside.

«ÀÄ¼Ê¼º«ÌËÆÉÀ¸Ã «ÀÄ¼»ÀËÀÅ¾ «ÀÄ¼¤ÆÌÊ¼ ¦Ç¼É¸ËÀÆÅ ÆÌÅËa) Timeb) Mouse operation countFigure 5: The result of the experiment.

users a brief tutorial of each system. For the CAD system,
we taught the minimum operations necessary to complete
the task (move, rotate, scale, and undo). After the tutorial,
the subjects constructed Figure 4b starting from Figure 4aby rearranging the diagrams. Half of the subjects used theCAD system first, and others used the prototype system
first.
Figure 5a shows the average time spent in the tutorial. Timespent in the tutorial for our system is significantly shorter
than that for CAD system (t(12)=4.98,p<.0005). Figure 5bshows the time spent and the number of mouse operations(click + drag) for completing the given task. The subjects
completed the task significantly faster using our system(t(12)=4.52,p<.0005), and the number of mouse operations
were also significantly fewer (t(12)=3.92,p<.005). These
results show that our technique is effective for at least acertain class of tasks that involve move, rotate, and scale
operations and require connection between diagrams.
LIMITATIONS AND FUTURE WORK

Flexible snapping can be annoying if the scene iscomplicated and many snaps occur simultaneously. The
automatic snapping of the pivot might not be desirable forsome users. Our current integrated manipulation does notsupport skew operation and scaling to one direction. In ourfuture work we intend to work on these problems.
REFERENCES

1. Bier, E.A. and Stone, M.C.: Snap-Dragging, SIGGRAPH
86, pp.233-240, 1986.
2. S.K. Bhavnani, B.E. John, U.Flemming, The StrategicUse of CAD: An Empirically Inspired, Theory-Based
Course, CHI’99, 1999.
3. Zeleznik, R.C., Forsberg, A.S., Strauss, P.S., Two PointerInput for 3D Interaction, 1997 Symposium on Interactive
3D Graphics, pp. 115-120, 1997.
4. Smart Sketch™ FutureWave Software(http://www.futurewave.com)
5. Vellum 3D™ Ashlar Incoporated(http://www.ashlar.com/Products/3D/3d.html)