Autoformatter applied on all js files
This commit is contained in:
Luis Fernando Molina committed
1 parent
72c1017b20
commit
c627aedcf6
59 files changed
+9087
-10892
No files matched your search
@@ -1,130 +1,110 @@
|
||||
|
||||
function newFrame() {
|
||||
|
||||
function newFrame () {
|
||||
const PANEL_CORNERS_RADIOUS = 5
|
||||
const TITLE_BAR_HEIGHT = 14 // this must be grater than radius
|
||||
|
||||
const PANEL_CORNERS_RADIOUS = 5;
|
||||
const TITLE_BAR_HEIGHT = 14; // this must be grater than radius
|
||||
var frame = {
|
||||
containerName: '', // This is for debugging purposes only.
|
||||
parentFrame: undefined, // Here we store the parent cointainer zoom object.
|
||||
width: browserCanvas.width,
|
||||
height: browserCanvas.height,
|
||||
position: undefined,
|
||||
getBodyHeight: getBodyHeight,
|
||||
draw: draw,
|
||||
container: undefined,
|
||||
frameThisPoint: frameThisPoint, // This function changes the actual frame coordinate system to the screen coordinate system.
|
||||
unframeThisPoint: unframeThisPoint,
|
||||
fitIntoFrame: fitIntoFrame,
|
||||
isThisPointHere: isThisPointHere, // This function return true is the point received as parameter lives within this frame.
|
||||
isInViewPort: isInViewPort,
|
||||
canYouMoveHere: canYouMoveHere,
|
||||
canYouZoomHere: canYouZoomHere,
|
||||
initialize: initialize
|
||||
}
|
||||
|
||||
var frame = {
|
||||
containerName: "", // This is for debugging purposes only.
|
||||
parentFrame: undefined, // Here we store the parent cointainer zoom object.
|
||||
width: browserCanvas.width,
|
||||
height: browserCanvas.height,
|
||||
position: undefined,
|
||||
getBodyHeight: getBodyHeight,
|
||||
draw: draw,
|
||||
container: undefined,
|
||||
frameThisPoint: frameThisPoint, // This function changes the actual frame coordinate system to the screen coordinate system.
|
||||
unframeThisPoint: unframeThisPoint,
|
||||
fitIntoFrame: fitIntoFrame,
|
||||
isThisPointHere: isThisPointHere, // This function return true is the point received as parameter lives within this frame.
|
||||
isInViewPort: isInViewPort,
|
||||
canYouMoveHere: canYouMoveHere,
|
||||
canYouZoomHere: canYouZoomHere,
|
||||
initialize: initialize
|
||||
};
|
||||
return frame
|
||||
|
||||
return frame;
|
||||
|
||||
function initialize() {
|
||||
|
||||
var position = {
|
||||
x: 0,
|
||||
y: 0
|
||||
};
|
||||
|
||||
this.position = position;
|
||||
function initialize () {
|
||||
var position = {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
|
||||
this.position = position
|
||||
}
|
||||
|
||||
function getBodyHeight() {
|
||||
|
||||
return frame.height - TITLE_BAR_HEIGHT;
|
||||
function getBodyHeight () {
|
||||
return frame.height - TITLE_BAR_HEIGHT
|
||||
}
|
||||
|
||||
function isInViewPort () {
|
||||
point1 = {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
|
||||
function isInViewPort() {
|
||||
|
||||
point1 = {
|
||||
x: 0,
|
||||
y: 0
|
||||
};
|
||||
|
||||
point3 = {
|
||||
x: frame.width,
|
||||
y: frame.height
|
||||
};
|
||||
|
||||
point3 = {
|
||||
x: frame.width,
|
||||
y: frame.height
|
||||
}
|
||||
|
||||
/* Now the transformations. */
|
||||
|
||||
point1 = transformThisPoint(point1, frame.container);
|
||||
point3 = transformThisPoint(point3, frame.container);
|
||||
|
||||
if (point1.x < viewPort.visibleArea.topRight.x && point1.y < viewPort.visibleArea.bottomRight.y && point3.x > viewPort.visibleArea.bottomLeft.x && point3.y > viewPort.visibleArea.topLeft.y ) {
|
||||
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
point1 = transformThisPoint(point1, frame.container)
|
||||
point3 = transformThisPoint(point3, frame.container)
|
||||
|
||||
if (point1.x < viewPort.visibleArea.topRight.x && point1.y < viewPort.visibleArea.bottomRight.y && point3.x > viewPort.visibleArea.bottomLeft.x && point3.y > viewPort.visibleArea.topLeft.y) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
function fitIntoFrame(point) {
|
||||
|
||||
|
||||
function fitIntoFrame (point) {
|
||||
/* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */
|
||||
|
||||
if (point.x > frame.width) {
|
||||
point.x = frame.width;
|
||||
}
|
||||
|
||||
if (point.x < 0) {
|
||||
point.x = 0;
|
||||
}
|
||||
|
||||
if (point.y > frame.height) {
|
||||
point.y = frame.height;
|
||||
}
|
||||
|
||||
if (point.y < 0) {
|
||||
point.y = 0;
|
||||
}
|
||||
|
||||
return point;
|
||||
if (point.x > frame.width) {
|
||||
point.x = frame.width
|
||||
}
|
||||
|
||||
|
||||
|
||||
function frameThisPoint(point) {
|
||||
|
||||
if (this.parentFrame !== undefined) {
|
||||
|
||||
point = this.parentFrame.frameThisPoint(point);
|
||||
|
||||
}
|
||||
|
||||
point.x = point.x + frame.position.x;
|
||||
point.y = point.y + frame.position.y;
|
||||
|
||||
return point;
|
||||
if (point.x < 0) {
|
||||
point.x = 0
|
||||
}
|
||||
|
||||
function unframeThisPoint(point) {
|
||||
|
||||
if (this.parentFrame !== undefined) {
|
||||
|
||||
point = this.parentFrame.unframeThisPoint(point);
|
||||
|
||||
}
|
||||
|
||||
point.x = point.x - this.position.x;
|
||||
point.y = point.y - this.position.y;
|
||||
|
||||
return point;
|
||||
if (point.y > frame.height) {
|
||||
point.y = frame.height
|
||||
}
|
||||
|
||||
function canYouMoveHere(tempDisplacement) {
|
||||
if (point.y < 0) {
|
||||
point.y = 0
|
||||
}
|
||||
|
||||
return point
|
||||
}
|
||||
|
||||
function frameThisPoint (point) {
|
||||
if (this.parentFrame !== undefined) {
|
||||
point = this.parentFrame.frameThisPoint(point)
|
||||
}
|
||||
|
||||
point.x = point.x + frame.position.x
|
||||
point.y = point.y + frame.position.y
|
||||
|
||||
return point
|
||||
}
|
||||
|
||||
function unframeThisPoint (point) {
|
||||
if (this.parentFrame !== undefined) {
|
||||
point = this.parentFrame.unframeThisPoint(point)
|
||||
}
|
||||
|
||||
point.x = point.x - this.position.x
|
||||
point.y = point.y - this.position.y
|
||||
|
||||
return point
|
||||
}
|
||||
|
||||
function canYouMoveHere (tempDisplacement) {
|
||||
/*
|
||||
|
||||
The current frame has a position and a displacement. We need to check that none of the boundaries points of the frame fall outside of its container frame.
|
||||
@@ -132,459 +112,427 @@ function newFrame() {
|
||||
|
||||
*/
|
||||
|
||||
point1 = {
|
||||
x: this.position.x,
|
||||
y: this.position.y
|
||||
};
|
||||
point1 = {
|
||||
x: this.position.x,
|
||||
y: this.position.y
|
||||
}
|
||||
|
||||
point2 = {
|
||||
x: this.position.x + this.width,
|
||||
y: this.position.y
|
||||
};
|
||||
point2 = {
|
||||
x: this.position.x + this.width,
|
||||
y: this.position.y
|
||||
}
|
||||
|
||||
point3 = {
|
||||
x: this.position.x + this.width,
|
||||
y: this.position.y + this.height
|
||||
};
|
||||
point3 = {
|
||||
x: this.position.x + this.width,
|
||||
y: this.position.y + this.height
|
||||
}
|
||||
|
||||
point4 = {
|
||||
x: this.position.x,
|
||||
y: this.position.y + this.height
|
||||
};
|
||||
point4 = {
|
||||
x: this.position.x,
|
||||
y: this.position.y + this.height
|
||||
}
|
||||
|
||||
/* Now the transformations. */
|
||||
|
||||
if (this.parentFrame !== undefined) { // If there is not a parent then there is no point to check bounderies.
|
||||
if (this.parentFrame !== undefined) {
|
||||
// If there is not a parent then there is no point to check bounderies.
|
||||
|
||||
point1 = this.parentFrame.frameThisPoint(point1);
|
||||
point2 = this.parentFrame.frameThisPoint(point2);
|
||||
point3 = this.parentFrame.frameThisPoint(point3);
|
||||
point4 = this.parentFrame.frameThisPoint(point4);
|
||||
point1 = this.parentFrame.frameThisPoint(point1)
|
||||
point2 = this.parentFrame.frameThisPoint(point2)
|
||||
point3 = this.parentFrame.frameThisPoint(point3)
|
||||
point4 = this.parentFrame.frameThisPoint(point4)
|
||||
|
||||
/* We apply the temporary displacement. */
|
||||
|
||||
point1 = tempDisplacement.displaceThisPoint(point1);
|
||||
point2 = tempDisplacement.displaceThisPoint(point2);
|
||||
point3 = tempDisplacement.displaceThisPoint(point3);
|
||||
point4 = tempDisplacement.displaceThisPoint(point4);
|
||||
point1 = tempDisplacement.displaceThisPoint(point1)
|
||||
point2 = tempDisplacement.displaceThisPoint(point2)
|
||||
point3 = tempDisplacement.displaceThisPoint(point3)
|
||||
point4 = tempDisplacement.displaceThisPoint(point4)
|
||||
|
||||
/* We add the actual displacement. */
|
||||
|
||||
point1 = this.container.displacement.displaceThisPoint(point1);
|
||||
point2 = this.container.displacement.displaceThisPoint(point2);
|
||||
point3 = this.container.displacement.displaceThisPoint(point3);
|
||||
point4 = this.container.displacement.displaceThisPoint(point4);
|
||||
point1 = this.container.displacement.displaceThisPoint(point1)
|
||||
point2 = this.container.displacement.displaceThisPoint(point2)
|
||||
point3 = this.container.displacement.displaceThisPoint(point3)
|
||||
point4 = this.container.displacement.displaceThisPoint(point4)
|
||||
|
||||
if (this.parentFrame.isThisPointHere(point1) === false) {
|
||||
return false;
|
||||
}
|
||||
if (this.parentFrame.isThisPointHere(point1) === false) {
|
||||
return false
|
||||
}
|
||||
|
||||
if (this.parentFrame.isThisPointHere(point2) === false) {
|
||||
return false;
|
||||
}
|
||||
if (this.parentFrame.isThisPointHere(point2) === false) {
|
||||
return false
|
||||
}
|
||||
|
||||
if (this.parentFrame.isThisPointHere(point3) === false) {
|
||||
return false;
|
||||
}
|
||||
if (this.parentFrame.isThisPointHere(point3) === false) {
|
||||
return false
|
||||
}
|
||||
|
||||
if (this.parentFrame.isThisPointHere(point4) === false) {
|
||||
return false;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return true;
|
||||
if (this.parentFrame.isThisPointHere(point4) === false) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
function canYouZoomHere(tempZoom) {
|
||||
return true
|
||||
}
|
||||
|
||||
point1 = {
|
||||
x: this.position.x,
|
||||
y: this.position.y
|
||||
};
|
||||
function canYouZoomHere (tempZoom) {
|
||||
point1 = {
|
||||
x: this.position.x,
|
||||
y: this.position.y
|
||||
}
|
||||
|
||||
point2 = {
|
||||
x: this.position.x + this.width,
|
||||
y: this.position.y
|
||||
};
|
||||
point2 = {
|
||||
x: this.position.x + this.width,
|
||||
y: this.position.y
|
||||
}
|
||||
|
||||
point3 = {
|
||||
x: this.position.x + this.width,
|
||||
y: this.position.y + this.height
|
||||
};
|
||||
point3 = {
|
||||
x: this.position.x + this.width,
|
||||
y: this.position.y + this.height
|
||||
}
|
||||
|
||||
point4 = {
|
||||
x: this.position.x,
|
||||
y: this.position.y + this.height
|
||||
};
|
||||
point4 = {
|
||||
x: this.position.x,
|
||||
y: this.position.y + this.height
|
||||
}
|
||||
|
||||
/* Now the transformations. */
|
||||
|
||||
if (this.parentFrame !== undefined) { // If there is not a parent then there is no point to check bounderies.
|
||||
if (this.parentFrame !== undefined) {
|
||||
// If there is not a parent then there is no point to check bounderies.
|
||||
|
||||
point1 = this.parentFrame.frameThisPoint(point1);
|
||||
point2 = this.parentFrame.frameThisPoint(point2);
|
||||
point3 = this.parentFrame.frameThisPoint(point3);
|
||||
point4 = this.parentFrame.frameThisPoint(point4);
|
||||
point1 = this.parentFrame.frameThisPoint(point1)
|
||||
point2 = this.parentFrame.frameThisPoint(point2)
|
||||
point3 = this.parentFrame.frameThisPoint(point3)
|
||||
point4 = this.parentFrame.frameThisPoint(point4)
|
||||
|
||||
/* We add the actual displacement. */
|
||||
|
||||
point1 = this.container.displacement.displaceThisPoint(point1);
|
||||
point2 = this.container.displacement.displaceThisPoint(point2);
|
||||
point3 = this.container.displacement.displaceThisPoint(point3);
|
||||
point4 = this.container.displacement.displaceThisPoint(point4);
|
||||
point1 = this.container.displacement.displaceThisPoint(point1)
|
||||
point2 = this.container.displacement.displaceThisPoint(point2)
|
||||
point3 = this.container.displacement.displaceThisPoint(point3)
|
||||
point4 = this.container.displacement.displaceThisPoint(point4)
|
||||
|
||||
/* We temp zoom. */
|
||||
|
||||
point1 = tempZoom.zoomThisPoint(point1);
|
||||
point2 = tempZoom.zoomThisPoint(point2);
|
||||
point3 = tempZoom.zoomThisPoint(point3);
|
||||
point4 = tempZoom.zoomThisPoint(point4);
|
||||
point1 = tempZoom.zoomThisPoint(point1)
|
||||
point2 = tempZoom.zoomThisPoint(point2)
|
||||
point3 = tempZoom.zoomThisPoint(point3)
|
||||
point4 = tempZoom.zoomThisPoint(point4)
|
||||
|
||||
if (this.parentFrame.isThisPointHere(point1) === false) {
|
||||
return false;
|
||||
}
|
||||
if (this.parentFrame.isThisPointHere(point1) === false) {
|
||||
return false
|
||||
}
|
||||
|
||||
if (this.parentFrame.isThisPointHere(point2) === false) {
|
||||
return false;
|
||||
}
|
||||
if (this.parentFrame.isThisPointHere(point2) === false) {
|
||||
return false
|
||||
}
|
||||
|
||||
if (this.parentFrame.isThisPointHere(point3) === false) {
|
||||
return false;
|
||||
}
|
||||
if (this.parentFrame.isThisPointHere(point3) === false) {
|
||||
return false
|
||||
}
|
||||
|
||||
if (this.parentFrame.isThisPointHere(point4) === false) {
|
||||
return false;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return true;
|
||||
if (this.parentFrame.isThisPointHere(point4) === false) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
function isThisPointHere(point, outsideViewPort) { // The second parameter is usefull when you want to check a point that you already know is outside the viewport.
|
||||
function isThisPointHere (point, outsideViewPort) {
|
||||
// The second parameter is usefull when you want to check a point that you already know is outside the viewport.
|
||||
|
||||
/* We need not to modify the point received, so me make a copy of it. */
|
||||
|
||||
var checkPoint = {
|
||||
x: point.x,
|
||||
y: point.y
|
||||
};
|
||||
var checkPoint = {
|
||||
x: point.x,
|
||||
y: point.y
|
||||
}
|
||||
|
||||
/* The point received is on the screen coordinates system, which already has zoom and displacement applied. We need to remove the zoom and displacement
|
||||
in order to have the point on the containers coordinate system and be able to compare it with its dimmensions. */
|
||||
|
||||
if (outsideViewPort === true) {
|
||||
|
||||
checkPoint = this.container.displacement.undisplaceThisPoint(checkPoint);
|
||||
checkPoint = this.container.frame.unframeThisPoint(checkPoint);
|
||||
|
||||
} else {
|
||||
checkPoint = unTransformThisPoint(checkPoint, frame.container);
|
||||
}
|
||||
if (outsideViewPort === true) {
|
||||
checkPoint = this.container.displacement.undisplaceThisPoint(checkPoint)
|
||||
checkPoint = this.container.frame.unframeThisPoint(checkPoint)
|
||||
} else {
|
||||
checkPoint = unTransformThisPoint(checkPoint, frame.container)
|
||||
}
|
||||
|
||||
/* Now we check if the resulting point is whin the current Frame. */
|
||||
|
||||
if (checkPoint.x < 0 || checkPoint.y < 0 || checkPoint.x > frame.width || checkPoint.y > frame.height) {
|
||||
|
||||
if (checkPoint.x < 0 || checkPoint.y < 0 || checkPoint.x > frame.width || checkPoint.y > frame.height) {
|
||||
/* The point received is not in this frame */
|
||||
|
||||
return false;
|
||||
|
||||
} else {
|
||||
|
||||
return false
|
||||
} else {
|
||||
/* The point is within this frame. */
|
||||
|
||||
return true;
|
||||
|
||||
}
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
||||
function draw (drawGrid, drawBorders, drawBackground) {
|
||||
if (drawBorders === true) {
|
||||
borders()
|
||||
}
|
||||
|
||||
function draw(drawGrid, drawBorders, drawBackground) {
|
||||
|
||||
|
||||
if (drawBorders === true) {
|
||||
borders();
|
||||
}
|
||||
|
||||
if (drawGrid === true) {
|
||||
grid();
|
||||
}
|
||||
|
||||
if (drawBackground === true) {
|
||||
background();
|
||||
}
|
||||
if (drawGrid === true) {
|
||||
grid()
|
||||
}
|
||||
|
||||
function background() {
|
||||
if (drawBackground === true) {
|
||||
background()
|
||||
}
|
||||
}
|
||||
|
||||
function background () {
|
||||
borderPoint1 = {
|
||||
x: PANEL_CORNERS_RADIOUS,
|
||||
y: PANEL_CORNERS_RADIOUS
|
||||
}
|
||||
|
||||
borderPoint2 = {
|
||||
x: frame.width - PANEL_CORNERS_RADIOUS,
|
||||
y: PANEL_CORNERS_RADIOUS
|
||||
}
|
||||
|
||||
borderPoint1 = {
|
||||
x: PANEL_CORNERS_RADIOUS,
|
||||
y: PANEL_CORNERS_RADIOUS
|
||||
};
|
||||
borderPoint3 = {
|
||||
x: frame.width - PANEL_CORNERS_RADIOUS,
|
||||
y: frame.height - PANEL_CORNERS_RADIOUS
|
||||
}
|
||||
|
||||
borderPoint2 = {
|
||||
x: frame.width - PANEL_CORNERS_RADIOUS,
|
||||
y: PANEL_CORNERS_RADIOUS
|
||||
};
|
||||
borderPoint4 = {
|
||||
x: PANEL_CORNERS_RADIOUS,
|
||||
y: frame.height - PANEL_CORNERS_RADIOUS
|
||||
}
|
||||
|
||||
borderPoint3 = {
|
||||
x: frame.width - PANEL_CORNERS_RADIOUS,
|
||||
y: frame.height - PANEL_CORNERS_RADIOUS
|
||||
};
|
||||
|
||||
borderPoint4 = {
|
||||
x: PANEL_CORNERS_RADIOUS,
|
||||
y: frame.height - PANEL_CORNERS_RADIOUS
|
||||
};
|
||||
|
||||
titleBarPoint1 = {
|
||||
x: 0,
|
||||
y: TITLE_BAR_HEIGHT
|
||||
};
|
||||
|
||||
titleBarPoint2 = {
|
||||
x: frame.width,
|
||||
y: TITLE_BAR_HEIGHT
|
||||
};
|
||||
titleBarPoint1 = {
|
||||
x: 0,
|
||||
y: TITLE_BAR_HEIGHT
|
||||
}
|
||||
|
||||
titleBarPoint2 = {
|
||||
x: frame.width,
|
||||
y: TITLE_BAR_HEIGHT
|
||||
}
|
||||
|
||||
/* Now the transformations. */
|
||||
|
||||
borderPoint1 = frameThisPoint(borderPoint1);
|
||||
borderPoint2 = frameThisPoint(borderPoint2);
|
||||
borderPoint3 = frameThisPoint(borderPoint3);
|
||||
borderPoint4 = frameThisPoint(borderPoint4);
|
||||
borderPoint1 = frameThisPoint(borderPoint1)
|
||||
borderPoint2 = frameThisPoint(borderPoint2)
|
||||
borderPoint3 = frameThisPoint(borderPoint3)
|
||||
borderPoint4 = frameThisPoint(borderPoint4)
|
||||
|
||||
titleBarPoint1 = frameThisPoint(titleBarPoint1);
|
||||
titleBarPoint2 = frameThisPoint(titleBarPoint2);
|
||||
titleBarPoint1 = frameThisPoint(titleBarPoint1)
|
||||
titleBarPoint2 = frameThisPoint(titleBarPoint2)
|
||||
|
||||
/* We paint the panel background first */
|
||||
|
||||
browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 0.75)';
|
||||
browserCanvasContext.beginPath();
|
||||
browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 0.75)'
|
||||
browserCanvasContext.beginPath()
|
||||
|
||||
browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, PANEL_CORNERS_RADIOUS, 1.0 * Math.PI, 1.5 * Math.PI);
|
||||
browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - PANEL_CORNERS_RADIOUS);
|
||||
browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, PANEL_CORNERS_RADIOUS, 1.5 * Math.PI, 2.0 * Math.PI);
|
||||
browserCanvasContext.lineTo(borderPoint3.x + PANEL_CORNERS_RADIOUS, borderPoint3.y);
|
||||
browserCanvasContext.arc(borderPoint3.x, borderPoint3.y, PANEL_CORNERS_RADIOUS, 0 * Math.PI, 0.5 * Math.PI);
|
||||
browserCanvasContext.lineTo(borderPoint4.x, borderPoint4.y + PANEL_CORNERS_RADIOUS);
|
||||
browserCanvasContext.arc(borderPoint4.x, borderPoint4.y, PANEL_CORNERS_RADIOUS, 0.5 * Math.PI, 1.0 * Math.PI);
|
||||
browserCanvasContext.lineTo(borderPoint1.x - PANEL_CORNERS_RADIOUS, borderPoint1.y);
|
||||
browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, PANEL_CORNERS_RADIOUS, 1.0 * Math.PI, 1.5 * Math.PI)
|
||||
browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - PANEL_CORNERS_RADIOUS)
|
||||
browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, PANEL_CORNERS_RADIOUS, 1.5 * Math.PI, 2.0 * Math.PI)
|
||||
browserCanvasContext.lineTo(borderPoint3.x + PANEL_CORNERS_RADIOUS, borderPoint3.y)
|
||||
browserCanvasContext.arc(borderPoint3.x, borderPoint3.y, PANEL_CORNERS_RADIOUS, 0 * Math.PI, 0.5 * Math.PI)
|
||||
browserCanvasContext.lineTo(borderPoint4.x, borderPoint4.y + PANEL_CORNERS_RADIOUS)
|
||||
browserCanvasContext.arc(borderPoint4.x, borderPoint4.y, PANEL_CORNERS_RADIOUS, 0.5 * Math.PI, 1.0 * Math.PI)
|
||||
browserCanvasContext.lineTo(borderPoint1.x - PANEL_CORNERS_RADIOUS, borderPoint1.y)
|
||||
|
||||
browserCanvasContext.closePath();
|
||||
browserCanvasContext.closePath()
|
||||
|
||||
browserCanvasContext.fill();
|
||||
browserCanvasContext.fill()
|
||||
|
||||
browserCanvasContext.lineWidth = 0.1;
|
||||
browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.MANGANESE_PURPLE + ', 0.75)';
|
||||
browserCanvasContext.stroke();
|
||||
|
||||
|
||||
browserCanvasContext.lineWidth = 0.1
|
||||
browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.MANGANESE_PURPLE + ', 0.75)'
|
||||
browserCanvasContext.stroke()
|
||||
|
||||
/* We paint the title bar now */
|
||||
|
||||
browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 0.75)';
|
||||
browserCanvasContext.beginPath();
|
||||
|
||||
browserCanvasContext.moveTo(titleBarPoint1.x, titleBarPoint1.y);
|
||||
browserCanvasContext.lineTo(borderPoint1.x - PANEL_CORNERS_RADIOUS, borderPoint1.y);
|
||||
browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, PANEL_CORNERS_RADIOUS, 1.0 * Math.PI, 1.5 * Math.PI);
|
||||
browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - PANEL_CORNERS_RADIOUS);
|
||||
browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, PANEL_CORNERS_RADIOUS, 1.5 * Math.PI, 2.0 * Math.PI);
|
||||
browserCanvasContext.lineTo(titleBarPoint2.x, titleBarPoint2.y);
|
||||
browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 0.75)'
|
||||
browserCanvasContext.beginPath()
|
||||
|
||||
browserCanvasContext.closePath();
|
||||
browserCanvasContext.fill();
|
||||
|
||||
browserCanvasContext.lineWidth = 0.1;
|
||||
browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.MANGANESE_PURPLE + ', 0.75)';
|
||||
browserCanvasContext.stroke();
|
||||
browserCanvasContext.moveTo(titleBarPoint1.x, titleBarPoint1.y)
|
||||
browserCanvasContext.lineTo(borderPoint1.x - PANEL_CORNERS_RADIOUS, borderPoint1.y)
|
||||
browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, PANEL_CORNERS_RADIOUS, 1.0 * Math.PI, 1.5 * Math.PI)
|
||||
browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - PANEL_CORNERS_RADIOUS)
|
||||
browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, PANEL_CORNERS_RADIOUS, 1.5 * Math.PI, 2.0 * Math.PI)
|
||||
browserCanvasContext.lineTo(titleBarPoint2.x, titleBarPoint2.y)
|
||||
|
||||
browserCanvasContext.closePath()
|
||||
browserCanvasContext.fill()
|
||||
|
||||
browserCanvasContext.lineWidth = 0.1
|
||||
browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.MANGANESE_PURPLE + ', 0.75)'
|
||||
browserCanvasContext.stroke()
|
||||
|
||||
/* print the title */
|
||||
|
||||
let labelPoint;
|
||||
let fontSize = 10;
|
||||
let labelPoint
|
||||
let fontSize = 10
|
||||
|
||||
browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY;
|
||||
browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY
|
||||
|
||||
let label = frame.containerName;
|
||||
let label = frame.containerName
|
||||
|
||||
let xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO;
|
||||
let yOffset = (TITLE_BAR_HEIGHT - fontSize) / 2 + 2;
|
||||
let xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO
|
||||
let yOffset = (TITLE_BAR_HEIGHT - fontSize) / 2 + 2
|
||||
|
||||
labelPoint = {
|
||||
x: frame.width / 2 - xOffset,
|
||||
y: TITLE_BAR_HEIGHT - yOffset
|
||||
};
|
||||
|
||||
labelPoint = frame.frameThisPoint(labelPoint);
|
||||
|
||||
browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)';
|
||||
browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y);
|
||||
labelPoint = {
|
||||
x: frame.width / 2 - xOffset,
|
||||
y: TITLE_BAR_HEIGHT - yOffset
|
||||
}
|
||||
|
||||
labelPoint = frame.frameThisPoint(labelPoint)
|
||||
|
||||
function borders() {
|
||||
|
||||
browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
|
||||
browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
|
||||
}
|
||||
|
||||
function borders () {
|
||||
/* Lest get the important points of the drawing so as to apply the needed transformations. */
|
||||
|
||||
point1 = {
|
||||
x: 0,
|
||||
y: 0
|
||||
};
|
||||
point1 = {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
|
||||
point2 = {
|
||||
x: frame.width,
|
||||
y: 0
|
||||
};
|
||||
point2 = {
|
||||
x: frame.width,
|
||||
y: 0
|
||||
}
|
||||
|
||||
point3 = {
|
||||
x: frame.width,
|
||||
y: frame.height
|
||||
};
|
||||
point3 = {
|
||||
x: frame.width,
|
||||
y: frame.height
|
||||
}
|
||||
|
||||
point4 = {
|
||||
x: 0,
|
||||
y: frame.height
|
||||
};
|
||||
point4 = {
|
||||
x: 0,
|
||||
y: frame.height
|
||||
}
|
||||
|
||||
/* Now the transformations. */
|
||||
|
||||
point1 = transformThisPoint(point1, frame.container);
|
||||
point2 = transformThisPoint(point2, frame.container);
|
||||
point3 = transformThisPoint(point3, frame.container);
|
||||
point4 = transformThisPoint(point4, frame.container);
|
||||
point1 = transformThisPoint(point1, frame.container)
|
||||
point2 = transformThisPoint(point2, frame.container)
|
||||
point3 = transformThisPoint(point3, frame.container)
|
||||
point4 = transformThisPoint(point4, frame.container)
|
||||
|
||||
/* Lets start the drawing. */
|
||||
|
||||
browserCanvasContext.beginPath();
|
||||
browserCanvasContext.moveTo(point1.x, point1.y);
|
||||
browserCanvasContext.lineTo(point2.x, point2.y);
|
||||
browserCanvasContext.lineTo(point3.x, point3.y);
|
||||
browserCanvasContext.lineTo(point4.x, point4.y);
|
||||
browserCanvasContext.lineTo(point1.x, point1.y);
|
||||
browserCanvasContext.closePath();
|
||||
browserCanvasContext.beginPath()
|
||||
browserCanvasContext.moveTo(point1.x, point1.y)
|
||||
browserCanvasContext.lineTo(point2.x, point2.y)
|
||||
browserCanvasContext.lineTo(point3.x, point3.y)
|
||||
browserCanvasContext.lineTo(point4.x, point4.y)
|
||||
browserCanvasContext.lineTo(point1.x, point1.y)
|
||||
browserCanvasContext.closePath()
|
||||
|
||||
browserCanvasContext.strokeStyle = 'rgba(150, 150, 150, 1)'
|
||||
browserCanvasContext.lineWidth = 1
|
||||
browserCanvasContext.stroke()
|
||||
|
||||
browserCanvasContext.strokeStyle = 'rgba(150, 150, 150, 1)';
|
||||
browserCanvasContext.lineWidth = 1;
|
||||
browserCanvasContext.stroke();
|
||||
|
||||
browserCanvasContext.closePath();
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
function grid(smallLines) {
|
||||
|
||||
if (smallLines === true) {
|
||||
browserCanvasContext.closePath()
|
||||
}
|
||||
|
||||
function grid (smallLines) {
|
||||
if (smallLines === true) {
|
||||
/* Small Lines */
|
||||
|
||||
var step = frame.width / 100;
|
||||
var step = frame.width / 100
|
||||
|
||||
browserCanvasContext.beginPath();
|
||||
browserCanvasContext.beginPath()
|
||||
|
||||
for (var i = 0; i < frame.width; i = i + step) {
|
||||
for (var i = 0; i < frame.width; i = i + step) {
|
||||
for (var j = 0; j < frame.height; j = j + step) {
|
||||
let point1 = {
|
||||
x: 0,
|
||||
y: j
|
||||
}
|
||||
|
||||
for (var j = 0; j < frame.height; j = j + step) {
|
||||
let point2 = {
|
||||
x: frame.width,
|
||||
y: j
|
||||
}
|
||||
|
||||
let point1 = {
|
||||
x: 0,
|
||||
y: j
|
||||
};
|
||||
point1 = transformThisPoint(point1, frame.container)
|
||||
point2 = transformThisPoint(point2, frame.container)
|
||||
|
||||
let point2 = {
|
||||
x: frame.width,
|
||||
y: j
|
||||
};
|
||||
|
||||
point1 = transformThisPoint(point1, frame.container);
|
||||
point2 = transformThisPoint(point2, frame.container);
|
||||
|
||||
browserCanvasContext.moveTo(point1.x, point1.y);
|
||||
browserCanvasContext.lineTo(point2.x, point2.y);
|
||||
}
|
||||
|
||||
let point3 = {
|
||||
x: frame.width,
|
||||
y: frame.height
|
||||
};
|
||||
|
||||
let point4 = {
|
||||
x: 0,
|
||||
y: frame.height
|
||||
};
|
||||
|
||||
point3 = transformThisPoint(point3, frame.container);
|
||||
point4 = transformThisPoint(point4, frame.container);
|
||||
|
||||
browserCanvasContext.moveTo(point3.x, point3.y);
|
||||
browserCanvasContext.lineTo(point4.x, point4.y);
|
||||
}
|
||||
browserCanvasContext.closePath();
|
||||
browserCanvasContext.strokeStyle = 'rgba(150, 150, 150, 0.1)';
|
||||
browserCanvasContext.lineWidth = 1;
|
||||
browserCanvasContext.stroke();
|
||||
browserCanvasContext.moveTo(point1.x, point1.y)
|
||||
browserCanvasContext.lineTo(point2.x, point2.y)
|
||||
}
|
||||
|
||||
let point3 = {
|
||||
x: frame.width,
|
||||
y: frame.height
|
||||
}
|
||||
|
||||
let point4 = {
|
||||
x: 0,
|
||||
y: frame.height
|
||||
}
|
||||
|
||||
point3 = transformThisPoint(point3, frame.container)
|
||||
point4 = transformThisPoint(point4, frame.container)
|
||||
|
||||
browserCanvasContext.moveTo(point3.x, point3.y)
|
||||
browserCanvasContext.lineTo(point4.x, point4.y)
|
||||
}
|
||||
browserCanvasContext.closePath()
|
||||
browserCanvasContext.strokeStyle = 'rgba(150, 150, 150, 0.1)'
|
||||
browserCanvasContext.lineWidth = 1
|
||||
browserCanvasContext.stroke()
|
||||
}
|
||||
|
||||
/* Main Lines */
|
||||
|
||||
var step = frame.width / 20;
|
||||
var step = frame.width / 20
|
||||
|
||||
browserCanvasContext.beginPath();
|
||||
browserCanvasContext.beginPath()
|
||||
|
||||
for (var i = 0; i < frame.width; i = i + step) {
|
||||
|
||||
for (var j = 0; j < frame.height; j = j + step) {
|
||||
|
||||
let point1 = {
|
||||
x: 0,
|
||||
y: j
|
||||
};
|
||||
|
||||
let point2 = {
|
||||
x: frame.width,
|
||||
y: j
|
||||
};
|
||||
|
||||
point1 = transformThisPoint(point1, frame.container);
|
||||
point2 = transformThisPoint(point2, frame.container);
|
||||
|
||||
browserCanvasContext.moveTo(point1.x, point1.y);
|
||||
browserCanvasContext.lineTo(point2.x, point2.y);
|
||||
}
|
||||
|
||||
let point3 = {
|
||||
x: i,
|
||||
y: 0
|
||||
};
|
||||
|
||||
let point4 = {
|
||||
x: i,
|
||||
y: frame.height
|
||||
};
|
||||
|
||||
point3 = transformThisPoint(point3, frame.container);
|
||||
point4 = transformThisPoint(point4, frame.container);
|
||||
|
||||
browserCanvasContext.moveTo(point3.x, point3.y);
|
||||
browserCanvasContext.lineTo(point4.x, point4.y);
|
||||
for (var i = 0; i < frame.width; i = i + step) {
|
||||
for (var j = 0; j < frame.height; j = j + step) {
|
||||
let point1 = {
|
||||
x: 0,
|
||||
y: j
|
||||
}
|
||||
browserCanvasContext.closePath();
|
||||
browserCanvasContext.strokeStyle = 'rgba(100, 100, 100, 0.2)';
|
||||
browserCanvasContext.lineWidth = 1;
|
||||
browserCanvasContext.stroke();
|
||||
|
||||
let point2 = {
|
||||
x: frame.width,
|
||||
y: j
|
||||
}
|
||||
|
||||
point1 = transformThisPoint(point1, frame.container)
|
||||
point2 = transformThisPoint(point2, frame.container)
|
||||
|
||||
browserCanvasContext.moveTo(point1.x, point1.y)
|
||||
browserCanvasContext.lineTo(point2.x, point2.y)
|
||||
}
|
||||
|
||||
let point3 = {
|
||||
x: i,
|
||||
y: 0
|
||||
}
|
||||
|
||||
let point4 = {
|
||||
x: i,
|
||||
y: frame.height
|
||||
}
|
||||
|
||||
point3 = transformThisPoint(point3, frame.container)
|
||||
point4 = transformThisPoint(point4, frame.container)
|
||||
|
||||
browserCanvasContext.moveTo(point3.x, point3.y)
|
||||
browserCanvasContext.lineTo(point4.x, point4.y)
|
||||
}
|
||||
}
|
||||
browserCanvasContext.closePath()
|
||||
browserCanvasContext.strokeStyle = 'rgba(100, 100, 100, 0.2)'
|
||||
browserCanvasContext.lineWidth = 1
|
||||
browserCanvasContext.stroke()
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user