ツールパレットにツールを追加

いよいよ、変更パートだ！ここからは、Sketch のソースコードを修正、変更して、いろんな機能を付け加えてみるぜ！

まず、第一歩はツールパレットの変更からだ。このプロジェクトの目的は、円弧、ポリゴン、ベジエツールを付け加えること。この 3 つのツールを、ツールパレットに加えるんだ。

イメージは、左の図みたいな感じだ。変更前は 5 つのツールがあるけど、そこに 3 つ加えるんだ。てっとり早く、下にのばしてみたけど、二列に組んでもいい。

追加したボタンのアイコンは、実はすでに Sketch のプロジェクトに入っているんだ。プロジェクトの中の "To do" ファイルを読んでみると、将来の拡張として、これらのツールの追加が含まれているんだ。一年前からぜんぜん変わってないけどな。ちなみに、これらの他に、鉛筆ツールのアイコンもあったりする。

■ 変更するファイル

この 2 つだ。1 つは .nib ファイル。ツールパレットの上の、ボタンの配置を定義しているファイルだね。もう 1 つは、そのウィンドウコントローラ。

■ ToolPalette.nib を変更する

まずは ToolPalette.nib を変更しよう。変更の目的は、ツールボタンを 3 つ追加して、アイコンを貼付けること。

2. "Instance" タブの中の "Panel" を開いて、ツールパレットウィンドウを開く。

3. ツールパレットウィンドウの中の、ボタン群を選択する。実は、これは NSMatrix なんだ。Inspector の表示が、NSMatrix 用に変わるのを確認。

そしたら、Inspector ウィンドウの "Row/Col" のフィールドの、R を "5" から "8" に変更する。

5. ToolPalette.nib のウィンドウの "Images" のタブを開く。その中に "Curve"、"Polygon"、"Scribble" っていうアイコンがあるはずだ。そいつらを、新しく作ったボタンに、ドラッグしてやる。

■ SKTToolPaletteController.m を変更する

続いて、ToolPalette.nib のウィンドウコントローラになる、SKTToolPaletteController.m を変更しよう。

変更が必要になるのは、currentGraphicClass というメソッド。これは、現在選択しているツールのクラスを返すメソッドなんだ。

このメソッドで、円弧ツールが選択されているときは SKTArc クラス、ポリゴンのときは SKTPolygon クラス、ベジエのときは SKTBezier クラスを返すようにしよう。これらのクラスの定義は、また後の方で出てくるよ。

◆ import するファイルの追加

まず、各クラスファイルの定義を import する必要があるんだ。まだこれらのファイルは作られていないけど、あとで出てくるよ。

Sketch/SKTToolPaletteController.m

#import "SKTToolPaletteController.h"
#import "SKTGraphic.h"
#import "SKTRectangle.h"
#import "SKTCircle.h"
#import "SKTLine.h"
#import "SKTTextArea.h"
// By mkino [start]
#import "SKTArc.h"
#import "SKTPolygon.h"
#import "SKTBezier.h"
// By mkion [end]

◆ ツールの位置を表す定数の追加

SKTToolPaletteController では、ツールパレット上のボタンの位置と、各ツールのマッチをとっているんだ。たとえば、1 番上は矢印ツール、2 番目は四角形ツール、という具合にね。

この順序は enum で定義されている。これに新しいツール用の定数を追加しよう。

Sketch/SKTToolPaletteController.m

enum {
    SKTArrowToolRow = 0,
    SKTRectToolRow,
    SKTCircleToolRow,
    SKTLineToolRow,
    SKTTextToolRow,
// By mkino [start]
    SKTArcToolRow, 
    SKTPolygonToolRow, 
    SKTBezierToolRow, 
// By mkino [end]
};

◆ `currentGraphicClass` の変更

そして currentGraphicClass を変更しよう。このメソッドでは、まず現在選択されているツールのインデックスを調べる。そして、そのインデクッスに対応するツールのクラスを返すんだ。

Sketch/SKTToolPaletteController.m

- (Class)currentGraphicClass {
    int row = [toolButtons selectedRow];
    Class theClass = nil;
    if (row == SKTRectToolRow) {
        theClass = [SKTRectangle class];
    } else if (row == SKTCircleToolRow) {
        theClass = [SKTCircle class];
    } else if (row == SKTLineToolRow) {
        theClass = [SKTLine class];
    } else if (row == SKTTextToolRow) {
        theClass = [SKTTextArea class];
    }
// By mkino [start]
    else if (row == SKTArcToolRow) {
        theClass = [SKTArc class];
    } else if (row == SKTPolygonToolRow) {
        theClass = [SKTPolygon class];
    } else if (row == SKTBezierToolRow) {
        theClass = [SKTBezier class];
    }
// By mkino [end]
    return theClass;
}

これで、SKTToolPaletteController.m の変更はおしまい。