はじめに

今となっては古のJSライブラリ

上記ライブラリのスケジュール管理オブジェクトを、いろんな形状で置いてみたので、勘所をメモ書きしておきます。

ニッチな内容だけど、誰かの参考になれば幸いです。

全然、こんなニッチな物、誰も読まないだろうと思ってメモ書きしたら、意外に閲覧数があったので、第２弾です。（根強い人気があるんですかね？）

ソースコードは、前回のカスタマイズ（上記）の反映した上での改修となっています。

色んな形状って？

上記のような、丸、星、シャフトのついた矢印など、様々な図形でスケジュールを引けるように改造しました。

入力データの変更

各データに、type属性を追加して、図形の形を入力データで指示できるように変更します。

	{
		id: 2, name: "Feature 2", series: [
			{ name: "Planned", start: new Date(2010,00,05), end: new Date(2010,00,20), type: "box" },
			{ name: "Actual", start: new Date(2010,00,06), end: new Date(2010,00,17), type: "arrow", color: "#F15B55" },
			{ name: "Projected", start: new Date(2010,00,06), end: new Date(2010,00,17), type: "box", color: "#e0e0e0" },
			{ name: "Projected", start: new Date(2010,00,19), end: new Date(2010,00,19), type: "star", color: "#FFC20E" },
			{ name: "Projected", start: new Date(2010,00,21), end: new Date(2010,00,21), type: "circle", color: "#007394" }
		]
	}

サンプルデータの一部を抜粋してくると、上記のようなイメージです。

追加のスタイルシート

div.ganttview-arrow-cells {
	position: relative;
	height: 25px;
}

div.ganttview-star-clippath {
    position: relative;
    width: 25px;
    height: 25px;
    clip-path: polygon(50% 5%, 61% 40%, 98% 40%, 68% 62%, 79% 96%, 50% 75%, 21% 96%, 32% 62%, 2% 40%, 39% 40%);
}

div.ganttview-circle-clippath {
    position: relative;
    width: 25px;
    height: 25px;
    clip-path: circle(41% at 50% 50%);
}

div.ganttview-arrow-cell-clippath {
    position: absolute;
    height: 25px;
    clip-path: polygon(0 33%, 100% 33%, 100% 67%, 0 67%);
}

div.ganttview-arrow-triangle-cell-clippath {
    position: absolute;
    width: 25px;
    height: 25px;
    clip-path: polygon(0 0, 100% 50%, 0 100%, 30% 50%);
}

div.ganttview-arrow-circle-cell-clippath {
    position: absolute;
    width: 25px;
    height: 25px;
    clip-path: circle(41% at 50% 50%);
}

div.ganttview-star-cell-clippath {
    position: absolute;
    width: 25px;
    height: 25px;
    clip-path: polygon(50% 5%, 61% 40%, 98% 40%, 68% 62%, 79% 96%, 50% 75%, 21% 96%, 32% 62%, 2% 40%, 39% 40%);
}

div.ganttview-circle-cell-clippath {
    position: absolute;
    width: 25px;
    height: 25px;
    clip-path: circle(41% at 50% 50%);
}

clip-path を使って、いろんな図形を作るというのは、他にも記事をアップしてる方がいますので、jquery.ganttViewのカスタムの方に焦点を当てて、clip-pathに深くは触れません。

改修ポイント編（javascript)

前回、手をいれた「addBlocks」を、更に改造していきます。

addBlocks ：管理オブジェクト描画の全体制御

function addBlocks(div, data, cellWidth, start) {
    //  ～省略
    // 入力データのループ
    for (var i = 0; i < data.length; i++) {
        for (var j = 0; j < data[i].series.length; j++) {
            var series = data[i].series[j];

            if("複数オブジェクトのキー" in series && series."複数オブジェクトのキー".length > 0){
                var tasks;
                tasks = jQuery("<div>", {
                            "class": "ganttview-block-cells"
                });
                rowIdx = addRowDataForTasks(div, tasks, data[i], series."複数オブジェクトのキー", cellWidth, start, rows, rowIdx);        
            } else {
                rowIdx = addRowData(div, data[i], series, cellWidth, start, rows, rowIdx);
            }
        }
    }
}

スケジュール管理オブジェクトを置くところは、全部、関数に切り出してしまいます。

1行に１管理オブジェクトを設置するようの関数（元々）

ですが、、、矢印型は、1行複数オブジェクト（丸型と箱型とシャフト型の組み合わせ）なので専用関数を呼び出します。

addRowData ：　1行データの描画


        function addRowData(div, series, data, cellWidth, start, rows, rowIdx) {

            var styleName = judgeDisplayStyleType(data, false);

            var obj;
            if(CHART_TYPE.ARROW == data.type){
                var arrowObjs = jQuery("<div>", {
                    "class": "ganttview-arrow-cells"
                });
                obj = getArrowBlock(div, series, data, cellWidth, start, rows, styleName, arrowObjs);
            } else {
                obj = getEachBlock(div, series, data, cellWidth, start, rows, styleName, false);
            }
            
            jQuery(rows[rowIdx]).append(obj);

            rowIdx = rowIdx + 1;

            return rowIdx;
        }

こっちは、第１段で改造した、１行に複数の管理オブジェクトを設置する関数です。

addRowDataForTasks １行に複数タスクを描画する用の関数

        function addRowDataForTasks(div, tasks, series, taskList, cellWidth, start, rows, rowIdx) {

            for(var i = 0; i < taskList.length; i++){
                var data = taskList[i];
                var styleName = judgeDisplayStyleType(data, true);
                if(CHART_TYPE.ARROW == data.type){
                    tasks = getArrowBlock(div, series, data, cellWidth, start, rows, styleName, tasks);
                }else{
                    var blockObj = getEachBlock(div, series, data, cellWidth, start, rows, styleName, false);
                    tasks.append(blockObj);    
                }
            }
            
            jQuery(rows[rowIdx]).append(tasks);
            rowIdx = rowIdx + 1;

            return rowIdx;
        }

こちらでも矢印型は、（丸型と箱型とシャフト型の組み合わせ）なので専用関数を呼び出します。

judgeDisplayStyleType 図形毎の専用スタイルシート呼び分け

        function judgeDisplayStyleType(data, multiObjectsFlag) {
            // デフォルト宣言
            var styleName = "ganttview-block";
            if(multiObjectsFlag){
                styleName = "ganttview-block-cell";
            }
            
            // 引き渡された指定値で表示する形状を変更
            if("type" in data && data.type){
                if(multiObjectsFlag){
                    // 1行内に複数の管理オブジェクトを配置
                    if(CHART_TYPE.BOX == data.type){
                        styleName = "ganttview-block-cell";
                    } else if(CHART_TYPE.ARROW == data.type){
                        styleName = "ganttview-arrow-cell-clippath";
                    } else if(CHART_TYPE.STAR == data.type){
                        styleName = "ganttview-star-cell-clippath";
                    } else if(CHART_TYPE.CIRCLE == data.type){
                        styleName = "ganttview-circle-cell-clippath";
                    }
                }else{
                    // 1行内に１行の管理オブジェクトを配置
                    if(CHART_TYPE.BOX == data.type){
                        styleName = "ganttview-block";
                    } else if(CHART_TYPE.ARROW == data.type){
                        // 矢印型は複数オブジェクト前提のため cell付きのスタイルを利用する
                        styleName = "ganttview-arrow-cell-clippath";
                    } else if(CHART_TYPE.STAR == data.type){
                        styleName = "ganttview-star-clippath";
                    } else if(CHART_TYPE.CIRCLE == data.type){
                        styleName = "ganttview-circle-clippath";
                    }
                }
            }
            return styleName;
        }

addRowDataとaddRowDataForTasksの関数で、それぞれの図形に合わせたスタイルシートを取得している為、追加したスタイルシートの、どれを利用するかサンプルデータの中の図形の指定でスタイルシートを切り替えます。

getArrowBlock 矢印型を描画するには、３つのオブジェクト（丸型・箱型・シャフト型）がいるので特殊処理を実装

        function getArrowBlock(div, series, data, cellWidth, startPlanDate, rows, styleName, objs) {
            
            var startPointObj = Object.create(data);
            var endPointObj = Object.create(data);

            // 補正用に開始日・終了日を退避する
            startPointObj['arrow_start'] = data.start;
            startPointObj['arrow_end'] = data.end;
            // 開始日基準で終了日を上書きする
            startPointObj.end = data.start;

            // 補正用に開始日・終了日を退避する
            startPointObj['arrow_start'] = data.start;
            startPointObj['arrow_end'] = data.end;
            // 終了日基準で開始日を上書きする
            endPointObj.start = data.end;

            // 強制的に丸型の箱をオブジェクトを用意する
            var startPontBlock = getEachBlock(div, series, startPointObj, cellWidth, startPlanDate, rows, "ganttview-arrow-circle-cell-clippath", true);
            // 矢印型を用意する
            var arrowObjBlock = getEachBlock(div, series, data, cellWidth, startPlanDate, rows, styleName, false);
            // 強制的に終端の矢印箱オブジェクトを用意する
            var endPointBlock = getEachBlock(div, series, endPointObj, cellWidth, startPlanDate, rows, "ganttview-arrow-triangle-cell-clippath", true);

            objs.append(startPontBlock);
            objs.append(arrowObjBlock);
            objs.append(endPointBlock);

            return objs;
        }

描画しようとしてるデータのディープコピーを作って、開始日・終了日を騙して、始点（丸型）と終点（シャフト型）を描画するようにして、組み合わせて矢印に見えるようにしています。

getEachBlock 各種図形の位置決め、微調整、描画

        
        function getEachBlock(div, series, data, cellWidth, start, rows, styleName,  camouflageDateFlag) {
            
            var size = DateUtils.daysBetween(data.start, data.end ) + 1;
            var offset = DateUtils.daysBetween(start, data.start);
            
            // 初期化
            var widthVal = 0;
            var marginLeftVal = 0;

            widthVal = ((size * cellWidth) - 5);
            marginLeftVal = (offset * cellWidth) + 1;
            
            // 丸型と星型の時は、正方形になるように幅を調整する
            if(CHART_TYPE.STAR == data.type || CHART_TYPE.CIRCLE == data.type){
                widthVal = 25;
            }

            // 矢印型で始点・終点用の箱を用意する時は微調整する
            if(CHART_TYPE.ARROW == data.type &&  camouflageDateFlag){
                widthVal = 25;
                var originArrowSize = DateUtils.daysBetween(data.arrow_start, data.arrow_end) + 1;
                size = originArrowSize;
            }

            // 矢印型の時で真ん中の箱は左横のマージンと横幅を微調整
            if(CHART_TYPE.ARROW == data.type && ! camouflageDateFlag){
                widthVal = widthVal - 5; 
                marginLeftVal = marginLeftVal + 7;
            }

            let title = data.name ;
            
            var block = jQuery("<div>", {
                "title": title + ", " + size + " 日間",
                "class": styleName,
                "css": {
                    "width": widthVal + "px",
                    "margin-left": marginLeftVal + "px",
                    "left" : "0px",
                    "right" : "0px",
                }
            });
            
            // 背景色指定をデータで受け取る
            if("color" in data && data.color){
                block.css("background-color", data.color);
            }

            if(CHART_TYPE.BOX == data.box){
                block.append(jQuery("<div>", { "class": "ganttview-block-text" }).text(size));
            }

            addBlockData(block, data, series);
            
            return block;
        }

既存の jquery.gannttViewの箱型を描画する為の処理が色濃く残ってるのが、この関数ですね。
図形によって、微調整（矢印型の重ね合わせ位置の調整、星型・丸型の縦幅・横幅の均一化）をしています。