// Renderer file for the Red demo


triangleDown = Path([
		MoveTo(-6, -4, true),
		LineTo(6, 12),
		LineTo(6, -12),
		ClosePath() ]);

triangleUp = Path([
		MoveTo(-6, 4, true),
		LineTo(6, -12),
		LineTo(6, 12),
		ClosePath() ]);


white = java.awt.Color.white;

// Background, set in Red
bgColor = Color(80,80,80);

// Red for the renderer ID's, used in the format string in RedElement
keyColor = Color(255,0,0);

// Orange for the toggle handles
toggleC = Color(255,160,0);

// Gray for links
lineC = Color(200,200,200);

// Orange for border on selected nodes
selBorderC = Color(255,160,0);

// Gray gradient for unselected nodes
nodeGrad = Gradient(Point(0,0), Color(200,200,200),
	Point(0,100), white, true, GradientUnits.PERCENT);

// Orange gradient for selected nodes
nodeSelGrad = Gradient(Point(0,-50), selBorderC,
	Point(0,100), white, true, GradientUnits.PERCENT);

// Tan gradient for selector
selectorC = Gradient(Point(0,0), Color(215,185,159),
	Point(0,50), Color(250,225,190), true, GradientUnits.PERCENT);

// Blue gradient for selection tag
seltagC = Gradient(Point(0,0), Color(173,216,225),
	Point(0,50), Color(193,236,240), true, GradientUnits.PERCENT);

// Text color
textC = Color(100,100,100);

// Font for the description and the annotations
descFont = Font('Dialog', FontStyle.BOLD, 13);
annoFont = Font('dialog', FontStyle.BOLD, 12);


// First pass for the links

Pass({
  content: Shape({
	id: 'links',
	shape: '@linkPath',
	position: ORIGIN,
	selection: Selection.NONE,
	outline: lineC,
	fill: null,
    }),
})  // Pass


// Second pass for the nodes

Pass({
  content: [

    Bounds({
	id: 'nodeOutline',
	enabled: '@selected',
	referenceId: 'description',
	padding: 6,
	arcWidth: 8, arcHeight: 8,
	fill: selBorderC,
    }),
 
    Bounds({
	id: 'node',
	referenceId: 'description',
	padding: 4,
	arcWidth: 8, arcHeight: 8,
	fill: {
	    selector: '@selected',
	    'false': nodeGrad,
	    'true': nodeSelGrad,
	},
    }),

    FormattedText({
	id: 'description',
	text: '@description',	
	fill: textC,
	offset: Point(10, 16),
	alignment: Alignment.WEST,
	font: descFont,
    }),
 
    Bounds({
	id: 'selectorRect',
	referenceId: 'selector',
	padding: 0,
	arcWidth: 8, arcHeight: 8,
	fill: selectorC,
    }),

    Text({
	id: 'selector',
	text: '@selector',
	fill: textC,
	position: BoundsPosition('node', Alignment.NORTH_WEST),
	offset: Point(-16, -2),
	alignment: Alignment.WEST,
	font: annoFont,
    }),
 
    Bounds({
	id: 'selectionTagRect',
	referenceId: 'selectionTag',
	padding: 0,
	arcWidth: 8, arcHeight: 8,
	fill: seltagC,
    }),

    Text({
	id: 'selectionTag',
	text: '@selectionTag',
	fill: textC,
	position: BoundsPosition('node', Alignment.NORTH_EAST),
	offset: Point(-20, -2),
	alignment: Alignment.WEST,
	font: annoFont,
    }),

    // Handle to expand and hide the subtrees.
    // linkPosition and state are properties of TreeElement. The TreeLayout
    // listens for TagSelection events for tag 'state' (enabled by the demo).

    Shape({
	id: 'stateToggle',
	position: '@linkPosition',
	shape: {
	    selector: '@state',
	    open: triangleDown,
	    closed: triangleUp,
	},
	selectionTag: 'state',
	fill: toggleC,
    }),

  ]  // Pass.content
})  // Pass