-
Notifications
You must be signed in to change notification settings - Fork 0
/
rectangle.js-e
117 lines (105 loc) · 3.54 KB
/
rectangle.js-e
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
## Copyright (c) 2013, Empirical Modelling Group
## All rights reserved.
##
## See LICENSE.txt
${{
Rectangle = function(x, y, width, height, fillcolour, outlinecolour, drawingOptions) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.fillcolour = fillcolour;
this.outlinecolour = outlinecolour;
this.drawingOptions = drawingOptions;
this.name = edenUI.plugins.Canvas2D.initZoneFromDrawingOpts(drawingOptions, "Rectangle");
this.obsName = root.currentObservableName();
}
}}$;
#! Creates a rectangle that can be coloured and displayed on a canvas. See [drawing options](@external CanvasExamples > drawingoptions) for more style options.
#
# ##Usage Example
# `Rectangle(x,y,width,height);`
# `Rectangle(x,y,w,h, "green", "black", Object("lineWidth", 5));`
#
# @param x X-coordinate for top left
# @param y Y-coordinate for top left
# @param width
# @param height
# @param [fill_colour
# @param [outline_colour]] Colour of the rectangle outline in HTML form
# @param [drawing_options] List of drawing options
#
# #canvas #rectangle #drawingoptions #square #box #shape #draw
func Rectangle {
${{
var x = arguments[0];
var y = arguments[1];
var width = arguments[2];
var height = arguments[3];
var fillcolour, outlinecolour, drawingOptions;
var lastArg = arguments[arguments.length - 1];
var processUpTo;
if (lastArg !== undefined && (lastArg instanceof Object) && !(lastArg instanceof EdenUI.plugins.Canvas2D.FillStyle)) {
drawingOptions = lastArg;
processUpTo = arguments.length - 2;
} else {
processUpTo = arguments.length - 1;
}
if (processUpTo >= 4) {
fillcolour = arguments[4];
if (processUpTo == 5) {
outlinecolour = arguments[5];
}
}
if (fillcolour === undefined && outlinecolour === undefined) {
outlinecolour = "black";
}
return new Rectangle(x, y, width, height, fillcolour, outlinecolour, drawingOptions);
}}$; };
${{
Rectangle.prototype.draw = function (context, scale) {
var lineWidth;
if (this.outlinecolour !== undefined) {
lineWidth = context.lineWidth;
if (this.drawingOptions !== undefined) {
if (!("join" in this.drawingOptions) && lineWidth < 10) {
//Bug in Chrome v44, shape isn't drawn when miter join is used with larger line widths.
context.lineJoin = "miter"
}
}
} else {
lineWidth = 0;
}
var y = this.y;
if (scale < 0) {
y = y - this.height;
}
if (this.fillcolour !== undefined) {
edenUI.plugins.Canvas2D.setFillStyle(context, this.fillcolour);
context.fillRect(this.x + lineWidth, y + lineWidth, this.width - 2 * lineWidth, this.height - 2 * lineWidth);
}
if (this.outlinecolour !== undefined) {
context.strokeStyle = this.outlinecolour;
context.strokeRect(this.x + lineWidth / 2, y + lineWidth / 2, this.width - lineWidth, this.height - lineWidth);
}
};
Rectangle.prototype.isHit = function (context, scale, x, y) {
return x >= this.x && x < this.x + this.width && y >= this.y && y < this.y + this.height;
}
Rectangle.prototype.toString = function() {
var s = "Rectangle(" + Eden.edenCodeForValues(this.x, this.y, this.width, this.height, this.fillcolour, this.outlinecolour);
if (this.drawingOptions !== undefined) {
s = s + ", " + Eden.edenCodeForValue(this.drawingOptions);
}
s = s + ")";
return s;
};
Rectangle.prototype.getEdenCode = Rectangle.prototype.toString;
Rectangle.prototype.imageMapArea = function () {
return "shape=\"rect\" coords=\"" + this.x + "," + this.y + "," + (this.x + this.width) + "," +
(this.y + this.height) + "\"";
}
Rectangle.prototype.centre = function () {
return new Point(this.x + this.width / 2, this.y + this.height / 2);
}
}}$;