// Renderer file for the Transform example

lineColor = Color(240,240,245);
magenta = Color(150,15,90);
textUnselected = Color(120,120,120);
textSelected = Color(60,40,50);


Pass({
  content: [

    /* Each element has a 'type' attribute that indicates the type of
       the element. One element's type is set to 'line' and the line 
       is obtainedfrom its 'line' attribute. Other elements' type is 
       set to 'station'. */

    Option({    
      selector: '@type',
      content: {

	line: Shape({
		shape: '@line',
		position: ORIGIN,
		outline: lineColor,
		strokeWidth: 9,
	  }),

	station: [
	    
	    Shape({
		shape: Circle(0, 0, 10),
		fill: lineColor,
	    }),

	    Shape({
		enabled: '@selected',
		shape: Circle(0, 0, 6),
		fill: magenta,
	    }),

        /* Putting the transform on the parent renderer transforms the
	   text AFTER the alignment and offset have been applied. If
	   the transform were on the TextRenderer, it would
	   be applied first with incorrect results. */

	    List({
		transform: Rotate(-60),
		content: [
		    
		    Text({
			text: '@key',
			selection: Selection.NONE,
			alignment: Alignment.WEST,
			offset: Point(16, 0),
			fill: {
			    selector: '@selected',
			    'false': textUnselected,
			    'true':  textSelected,
			},
			font: Font('Dialog', FontStyle.BOLD_ITALIC, 15),
		    }),

		]  // List.content
	    }),  // List

	]  // station

      }  // Option.content
    }),  // Option

  ]  // Pass.content
})  // Pass