drawio/war/js/diagramly/sidebar/Sidebar-Advanced.js

(function()
{
	// Adds containers
	var sidebarCreateAdvancedShapes = Sidebar.prototype.createAdvancedShapes;
	
	Sidebar.prototype.createAdvancedShapes = function()
	{
		var fns = sidebarCreateAdvancedShapes.apply(this, arguments);
		
		// Avoids having to bind all functions to "this"
		var sb = this;

		// Reusable cells
		var flow = new mxCell('Vertical Flow Layout', new mxGeometry(0, 0, 270, 280),
				'swimlane;html=1;startSize=20;horizontal=1;childLayout=flowLayout;flowOrientation=north;resizable=0;interRankCellSpacing=50;');
		flow.vertex = true;
		
		var flow1 = new mxCell('Start', new mxGeometry(20, 20, 100, 40), 'whiteSpace=wrap;html=1;');
		flow1.vertex = true;
		flow.insert(flow1);
		
		var flow2 = new mxCell('Task', new mxGeometry(20, 20, 100, 40), 'whiteSpace=wrap;html=1;');
		flow2.vertex = true;
		flow.insert(flow2);
		
		var edge = new mxCell('', new mxGeometry(0, 0, 0, 0), 'html=1;curved=1;');
		edge.geometry.relative = true;
		edge.edge = true;
		flow1.insertEdge(edge, true);
		flow2.insertEdge(edge, false);
		flow.insert(edge);
		
		var flow3 = new mxCell('Task', new mxGeometry(20, 20, 100, 40), 'whiteSpace=wrap;html=1;');
		flow3.vertex = true;
		flow.insert(flow3);
		
		edge = edge.clone();
		flow1.insertEdge(edge, true);
		flow3.insertEdge(edge, false);
		flow.insert(edge);
		
		var flow4 = new mxCell('End', new mxGeometry(20, 20, 100, 40), 'whiteSpace=wrap;html=1;');
		flow4.vertex = true;
		flow.insert(flow4);
		
		edge = edge.clone();
		flow2.insertEdge(edge, true);
		flow4.insertEdge(edge, false);
		flow.insert(edge);
		
		edge = edge.clone();
		flow3.insertEdge(edge, true);
		flow4.insertEdge(edge, false);
		flow.insert(edge);

		return fns.concat(
		[
		 	this.addEntry('container swimlane pool horizontal', function()
		 	{
				var cell = new mxCell('Pool', new mxGeometry(0, 0, 480, 380),
			    	'swimlane;html=1;childLayout=stackLayout;horizontal=1;startSize=20;horizontalStack=0;');
				cell.vertex = true;
				
				var cell1 = new mxCell('Lane 1', new mxGeometry(0, 20, 480, 120), 'swimlane;html=1;startSize=20;horizontal=0;');
				cell1.vertex = true;
				cell.insert(cell1);
				
				var cell2 = new mxCell('Lane 2', new mxGeometry(0, 140, 480, 120), 'swimlane;html=1;startSize=20;horizontal=0;');
				cell2.vertex = true;
				cell.insert(cell2);
				
				var cell3 = new mxCell('Lane 3', new mxGeometry(0, 260, 480, 120), 'swimlane;html=1;startSize=20;horizontal=0;');
				cell3.vertex = true;
				cell.insert(cell3);
				
				return sb.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, 'Horizontal Pool 1', true);
		 	}),
		 	this.addEntry('container swimlane pool horizontal', function()
			{
				var cell = new mxCell('Pool', new mxGeometry(0, 0, 480, 360),
			    	'swimlane;html=1;childLayout=stackLayout;horizontal=0;startSize=20;horizontalStack=0;');
				cell.vertex = true;
				
				var cell1 = new mxCell('Lane 1', new mxGeometry(20, 0, 460, 120), 'swimlane;html=1;startSize=20;horizontal=0;');
				cell1.vertex = true;
				cell.insert(cell1);
				
				var cell2 = new mxCell('Lane 2', new mxGeometry(20, 120, 460, 120), 'swimlane;html=1;startSize=20;horizontal=0;');
				cell2.vertex = true;
				cell.insert(cell2);
				
				var cell3 = new mxCell('Lane 3', new mxGeometry(20, 240, 460, 120), 'swimlane;html=1;startSize=20;horizontal=0;');
				cell3.vertex = true;
				cell.insert(cell3);
				
				return sb.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, 'Horizontal Pool 2', true);
		 	}),
		 	this.addEntry('container swimlane pool vertical', function()
			{
				var cell = new mxCell('Pool', new mxGeometry(0, 0, 360, 480),
			    	'swimlane;html=1;childLayout=stackLayout;startSize=20;');
				cell.vertex = true;
				
				var cell1 = new mxCell('Lane 1', new mxGeometry(0, 20, 120, 460), 'swimlane;html=1;startSize=20;');
				cell1.vertex = true;
				cell.insert(cell1);
				
				var cell2 = new mxCell('Lane 2', new mxGeometry(120, 20, 120, 460), 'swimlane;html=1;startSize=20;');
				cell2.vertex = true;
				cell.insert(cell2);
				
				var cell3 = new mxCell('Lane 3', new mxGeometry(240, 20, 120, 460), 'swimlane;html=1;startSize=20;');
				cell3.vertex = true;
				cell.insert(cell3);
				
				return sb.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, 'Vertical Pool 1', true);
		 	}),
		 	this.addEntry('container swimlane pool vertical', function()
			{
				var cell = new mxCell('Pool', new mxGeometry(0, 0, 380, 480),
			    	'swimlane;html=1;childLayout=stackLayout;startSize=20;horizontal=0;horizontalStack=1;');
				cell.vertex = true;
				
				var cell1 = new mxCell('Lane 1', new mxGeometry(20, 0, 120, 480), 'swimlane;html=1;startSize=20;');
				cell1.vertex = true;
				cell.insert(cell1);
				
				var cell2 = new mxCell('Lane 2', new mxGeometry(140, 0, 120, 480), 'swimlane;html=1;startSize=20;');
				cell2.vertex = true;
				cell.insert(cell2);
				
				var cell3 = new mxCell('Lane 3', new mxGeometry(260, 0, 120, 480), 'swimlane;html=1;startSize=20;');
				cell3.vertex = true;
				cell.insert(cell3);
				
				return sb.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, 'Vertical Pool 2', true);
		 	}),
		 	this.addEntry('vertical tree layout', function()
			{
				var cell = new mxCell('Vertical Tree Layout', new mxGeometry(0, 0, 280, 190),
						'swimlane;html=1;startSize=20;horizontal=1;childLayout=treeLayout;horizontalTree=0;resizable=0;');
				cell.vertex = true;
				
				var cell1 = new mxCell('Root', new mxGeometry(20, 20, 100, 40), 'whiteSpace=wrap;html=1;');
				cell1.vertex = true;
				cell.insert(cell1);
				
				var cell2 = new mxCell('Child 1', new mxGeometry(20, 20, 100, 40), 'whiteSpace=wrap;html=1;');
				cell2.vertex = true;
				cell.insert(cell2);
				
		    	var edge1 = new mxCell('', new mxGeometry(0, 0, 0, 0), 'edgeStyle=elbowEdgeStyle;elbow=vertical;html=1;rounded=0;');
		    	edge1.geometry.relative = true;
		    	edge1.edge = true;
		    	cell1.insertEdge(edge1, true);
		    	cell2.insertEdge(edge1, false);
		    	cell.insert(edge1);
		    	
				var cell3 = new mxCell('Child 2', new mxGeometry(20, 20, 100, 40), 'whiteSpace=wrap;html=1;');
				cell3.vertex = true;
				cell.insert(cell3);
				
		    	var edge2 = new mxCell('', new mxGeometry(0, 0, 0, 0), 'edgeStyle=elbowEdgeStyle;elbow=vertical;html=1;rounded=0;');
		    	edge2.geometry.relative = true;
		    	edge2.edge = true;
		    	cell1.insertEdge(edge2, true);
		    	cell3.insertEdge(edge2, false);
		    	cell.insert(edge2);
				
				return sb.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, 'Vertical Tree Layout', true);
		 	}),
		 	this.addEntry('horizontal tree layout', function()
			{
				var cell = new mxCell('Horizontal Tree Layout', new mxGeometry(0, 0, 310, 160),
						'swimlane;html=1;startSize=20;horizontal=0;childLayout=treeLayout;horizontalTree=1;resizable=0;');
				cell.vertex = true;
				
				var cell1 = new mxCell('Root', new mxGeometry(20, 20, 100, 40), 'whiteSpace=wrap;html=1;');
				cell1.vertex = true;
				cell.insert(cell1);
				
				var cell2 = new mxCell('Child 1', new mxGeometry(20, 20, 100, 40), 'whiteSpace=wrap;html=1;');
				cell2.vertex = true;
				cell.insert(cell2);
				
				var edge1 = new mxCell('', new mxGeometry(0, 0, 0, 0), 'edgeStyle=elbowEdgeStyle;elbow=horizontal;html=1;rounded=0;');
				edge1.geometry.relative = true;
				edge1.edge = true;
				cell1.insertEdge(edge1, true);
				cell2.insertEdge(edge1, false);
				cell.insert(edge1);
				
				var cell3 = new mxCell('Child 2', new mxGeometry(20, 20, 100, 40), 'whiteSpace=wrap;html=1;');
				cell3.vertex = true;
				cell.insert(cell3);
				
				var edge2 = new mxCell('', new mxGeometry(0, 0, 0, 0), 'edgeStyle=elbowEdgeStyle;elbow=horizontal;html=1;rounded=0;');
				edge2.geometry.relative = true;
				edge2.edge = true;
				cell1.insertEdge(edge2, true);
				cell3.insertEdge(edge2, false);
				cell.insert(edge2);

				return sb.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, 'Horizontal Tree Layout', true);
		 	}),
		 	this.addEntry('vertical flow layout', function()
			{
		 		return sb.createVertexTemplateFromCells([flow], flow.geometry.width, flow.geometry.height, 'Vertical Flow Layout', true);
		 	}),
		 	this.addEntry('horizontal flow layout', function()
			{
				var cell = sb.graph.cloneCells([flow])[0];
				cell.geometry = new mxGeometry(0, 0, 460, 150);
				cell.style = 'swimlane;html=1;startSize=20;horizontal=0;childLayout=flowLayout;flowOrientation=west;resizable=0;interRankCellSpacing=50;';
				cell.value = 'Horizontal Flow Layout';
				
				return sb.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, 'Horizontal Flow Layout', true);
			})
		]);
	};
	
})();