TitleBar {
	id: root
	
	property string text: "タイトル"
	property string font: "Noto Serif JP"
	property string fontSize: 24
	property string backgroundColor: "#000000"
	property string foregroundColor: "#FF7F00"
	Item {
		Rectangle {
			anchors.fill: parent
			gradient: Gradient {
				orientation: Gradient.Horizontal
				GradientStop { position: 0.0; color: "#FF0000" }
				GradientStop { position: 0.5; color: "#00FF00" }
				GradientStop { position: 1.0; color: "#0000FF" }
			}
			padding: 0

			Canvas {
				id: canvas
				anchors.fill: parent
				property real labelHeight: label.contentHeight
				property real labelWidth: label.contentWidth
				
				onPaint: {
					var ctx = getContext("2d")
					ctx.reset()
					ctx.clearRect(0, 0, width, height)
					ctx.beginPath()
					ctx.moveTo(0, 0)
					ctx.lineTo(labelWidth + 20, 0)
					ctx.lineTo(labelWidth + 20 + height / 4, height / 2)
					ctx.lineTo(width - 1, height / 2)
					ctx.lineTo(width - 1, height - 1)
					ctx.lineTo(0, height - 1)
					ctx.closePath()
					ctx.fillStyle = "#000000"
					ctx.fill()
				}
				
				Text {
					id: label
					text: root.text
					color: root.foregroundColor
					font.family: root.font
					font.pixelSize: root.fontSize
					horizontalAlignment: Text.AlignLeft
					verticalAlignment: Text.AlignTop
					padding: 10
				}
			}
		}
	}
}