package screenshotmaker;
import javafx.scene.CustomNode;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.paint.Color;
import javafx.scene.shape.Line;
import javafx.scene.shape.Polygon;
import javafx.scene.shape.Polyline;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
/**
* Tooltip composed of a Rectangle and a Text. The Rectangle width is
* bound to the Text width.
*/
public class Tooltip extends CustomNode {
public-init var text:String;
var _root: Group;
var t:Text;
function initializeCustomNode():Void {
_root = Group {
content: [
Rectangle {
fill: Color.WHITE
stroke: Color.BLACK
strokeWidth: 3.0
x: 0
y: 0
//Bind the rectangle width with the Text width.
width: bind t.boundsInLocal.width + 20
height: 50
},
t = Text {
x:inset
y:30 + inset
content:text
font: Font {size:30 name:"Verdana"}
}
]
}
}
protected override function create() : Node {
if (_root == null) {
initializeCustomNode();
}
return _root;
}
}
/**
* Offers a visual feedback similar to a swing button
*/
public class ButtonFeedback extends CustomNode {
public-init var button:Group;
public-init var selected:Boolean on replace {
//The selected button background is greyed.
if(selected) {
button.content[0].opacity = 0.8;
}else {
button.content[0].opacity = 1;
}
}
public override var disable on replace {
//A disabled button is greyed.
if(disable) {
button.opacity = 0.5
} else {
button.opacity = 1
}
}
var _root: Group;
function initializeCustomNode():Void {
if(disable)
button.opacity = 0.5;
_root = Group {
content: [
//This white background makes the black elements
// of opacity < 1 to be greyed.
Rectangle {
width:100
height:100
fill:Color.WHITE
// Visible when not selected. If selected, we need the white
// components of opacity < 1 to be greyed.
visible:bind not selected},
// This black background makes the white elements
// of opacity < 1 to be greyed. This is needed for the
// selected background button.
Rectangle {
width:100
height:100
fill:Color.BLACK
// Visible when selected. If selected, we need the white
// components of opacity < 1 to be greyed.
visible:bind selected},
Polyline{visible:bind selected
stroke: Color.BLACK
strokeWidth: 3.0
points: [0,100,0,0,100,0]
},
Polyline{
visible:bind selected
stroke: Color.WHITE
strokeWidth: 3.0
points: [0,100,100,100,100,0]
}
button
]
}
}
protected override function create() : Node {
if (_root == null) {
initializeCustomNode();
}
return _root;
}
}
/**
* A Palette containing Image tooling.
*/
public class Palette extends CustomNode {
public var dragBtn: ButtonFeedback;
public var dragToolTip: Tooltip;
public var fitToScreenBtn: ButtonFeedback;
public var fitToolTip: Tooltip;
public var originalSizeBtn: ButtonFeedback;
public var originalToolTip: Tooltip;
public var arrowBtn: ButtonFeedback;
public var arrowToolTip: Tooltip;
public var textBtn: ButtonFeedback;
public var textToolTip: Tooltip;
public var selectBtn: ButtonFeedback;
public var selectToolTip: Tooltip;
public var currentButton:ButtonFeedback on replace {
// All other buttons are unselected.
for(node in _root.content) {
if(not (node instanceof ButtonFeedback)) continue;
var b:ButtonFeedback = node as ButtonFeedback;
if(b.equals(currentButton) and not b.disable) {
b.selected = true;
} else {
b.selected = false;
}
// No button has an effect.
b.effect = null;
}
}
var _root: Group;
var offset: Number = 10;
var offsetTitle: Number = 50;
var inset:Number = 5;
public function reset() {
currentButton = null;
originalSizeBtn.disable = true;
dragBtn.disable = false;
fitToScreenBtn.disable = false;
}
function initializeCustomNode():Void {
_root = Group {
content: [
Rectangle {
arcHeight: 20
arcWidth: 20
fill: Color.WHITE
x: 0
y: 0
width: 337
height: 180
opacity:0.8
},
Text {content:"Image"
font: Font{size:40 name:"Verdana"}
x:offset y:offsetTitle},
dragBtn = ButtonFeedback { translateX:offset
translateY:offsetTitle + offset * 2
button:Group {
id: "drag"
content: [
Rectangle {
fill: Color.WHITE
x: 0
y: 0
width: 100
height: 100
},
Line {
stroke: Color.BLACK
strokeWidth: 5.0
startX: 50
startY: 25
endX: 50
endY: 75
},
Polygon {
points: [30,25,50,inset,70,25]
fill: Color.BLACK
},
Polygon {
points: [30,75,70,75,50,100 - inset]
fill: Color.BLACK
},
Line {
stroke: Color.BLACK
strokeWidth: 5.0
startX: 25
startY: 50
endX: 75
endY: 50
},
Polygon {
points: [inset,50,25,30,25,70]
fill: Color.BLACK
},
Polygon {
points: [75,30,100 - inset,50,75,70]
fill: Color.BLACK
},
]
}},
dragToolTip = Tooltip {
translateX:offset
translateY:offsetTitle + offset * 2 + 105
text:"Drag Image"
},
fitToScreenBtn = ButtonFeedback {
translateX:100 + offset * 2
translateY:offsetTitle + offset * 2
button:Group {
id: "fitToScreen"
content: [
Rectangle {
fill: Color.WHITE
x: 0
y: 0
width: 100
height: 100
},
Line {
stroke: Color.BLACK
strokeWidth: 5.0
startX: 3
startY: 3
endX: 28
endY: 28
},
Polyline {
stroke: Color.BLACK
strokeWidth: 5.0
points: [15, 30,
30, 30
30, 15]
},
Line {
stroke: Color.BLACK
strokeWidth: 5.0
startX: 3
startY: 100 - 3
endX: 28
endY: 100 - 28
},
Polyline {
stroke: Color.BLACK
strokeWidth: 5.0
points: [30 - 15, 100 - 30,
30, 100 - 30
30, 100 - 15]
},
Line {
stroke: Color.BLACK
strokeWidth: 5.0
startX: 100 - 3
startY: 3
endX: 100 - 28
endY: 28
},
Polyline {
stroke: Color.BLACK
strokeWidth: 5.0
points: [100 - 30, 15,
100 - 30, 30
100 - 15, 30]
},
Line {
stroke: Color.BLACK
strokeWidth: 5.0
startX: 100 - 3
startY: 100 - 3
endX: 100 - 28
endY: 100 - 28
},
Polyline {
stroke: Color.BLACK
strokeWidth: 5.0
points: [100 - 30, 100 - 15,
100 - 30, 100 - 30
100 - 15, 100 - 30]
}
]
}},
fitToolTip = Tooltip {
translateX:100 + offset * 2
translateY:offsetTitle + offset * 2 + 105
text:"Fit to screen"
},
originalSizeBtn = ButtonFeedback {disable:true
translateX:200 + offset * 3
translateY:offsetTitle + offset * 2
button:Group {
id: "originalSizeBtn"
content: [
Rectangle {
fill: Color.WHITE
x: 0
y: 0
width: 100
height: 100
},
Line {
stroke: Color.BLACK
strokeWidth: 5.0
startX: 40
startY: 40
endX: 45 - 28
endY: 45 - 28
},
Polyline {
stroke: Color.BLACK
strokeWidth: 5.0
points: [45 - 30, 45 - 15,
45 - 30, 45 - 30,
45 - 15, 45 - 30]
},
Line {
stroke: Color.BLACK
strokeWidth: 5.0
startX: 100 - 40
startY: 40
endX: 100 - 45 + 28
endY: 45 - 28
},
Polyline {
stroke: Color.BLACK
strokeWidth: 5.0
points: [100 - 45 + 15, 45 - 30,
100 - 45 + 30, 45 - 30,
100 - 45 + 30, 45 - 15]
},
Line {
stroke: Color.BLACK
strokeWidth: 5.0
startX:100 - 40
startY: 60
endX: 100 - 45 + 28
endY: 55 + 28
},
Polyline {
stroke: Color.BLACK
strokeWidth: 5.0
points: [100 - 45 + 30, 55 + 15,
100 - 45 + 30, 55 + 30,
100 - 45 + 15, 55 + 30]
},
Line {
stroke: Color.BLACK
strokeWidth: 5.0
startX: 40
startY: 60
endX: 45 - 28
endY: 55 + 28
},
Polyline {
stroke: Color.BLACK
strokeWidth: 5.0
points: [45 - 30, 55 + 15,
45 - 30, 55 + 30,
45 - 15, 55 + 30]
}
]
}},
originalToolTip = Tooltip {
translateX:200 + offset * 3 - 120
translateY:offsetTitle + offset * 2 + 105
text:"Original Size"
},
Rectangle {
arcHeight: 20
arcWidth: 20
fill: Color.WHITE
x: 0
y: 185
width: 337
height: 175
opacity:0.8
},
Text{content:"Tools"
font: Font{size:40 name:"Verdana"} x:offset
y:offsetTitle * 2 + offset * 3 + 100},
arrowBtn = ButtonFeedback { translateX:offset
translateY:offsetTitle * 2 + offset * 5 + 100
button:Group {
id: "arrowBtn"
content: [
Rectangle {
fill: Color.WHITE
x: 0
y: 0
width: 100
height: 100
},
Line {
stroke: Color.BLACK
strokeWidth: 5.0
startX: 25
startY: 50
endX: 60
endY: 50
},
Polygon {
points: [60 ,50 + 15,
60, 50 - 15,
85, 50]
fill: Color.BLACK
}
]
}},
arrowToolTip = Tooltip {
translateX:offset
translateY:offsetTitle * 2 + offset * 5 + 100 + 105
text:"Add Arrow"
},
textBtn = ButtonFeedback {
translateX:offset * 2 + 100
translateY:offsetTitle * 2 + offset * 5 + 100
button:Group {
id: "text"
content: [
Rectangle {
fill: Color.WHITE
x: 0
y: 0
width: 100
height: 100
},
Text {
x:20
y:90
content:"T"
font: Font {size:100 name:"Times New Roman"}
}
]
}},
textToolTip = Tooltip {
translateX:offset * 2 + 100
translateY:offsetTitle * 2 + offset * 5 + 100 + 105
text:"Add Text"
},
selectBtn = ButtonFeedback {
translateX: offset * 3 + 200
translateY: offsetTitle * 2 + offset * 5 + 100
button:Group {
id: "select"
content: [
Rectangle {
fill: Color.WHITE
x: 0
y: 0
width: 100
height: 100
},
Polygon {
points: [25, 25,
25 + 50, 25,
25 + 50, 25 + 50,
25, 25 + 50]
strokeWidth:2
stroke:Color.BLACK
fill:Color.CHARTREUSE
strokeDashOffset:0
strokeDashArray:[5,5]
}
]
}},
selectToolTip = Tooltip {
translateX:offset * 3 + 200 - 120
translateY:offsetTitle * 2 + offset * 5 + 100 +
105
text:"Select Region"
}
]
}
}
protected override function create() : Node {
if (_root == null) {
initializeCustomNode();
}
return _root;
}
}