132 lines
3.5 KiB
JavaScript
132 lines
3.5 KiB
JavaScript
function newSidePanel () {
|
|
const MODULE_NAME = 'Side Panel'
|
|
let thisObject = {
|
|
areas: [],
|
|
sidePanelTab: undefined,
|
|
container: undefined,
|
|
draw: draw,
|
|
getContainer: getContainer,
|
|
initialize: initialize
|
|
}
|
|
|
|
let isInitialized = false
|
|
|
|
thisObject.container = newContainer()
|
|
thisObject.container.name = MODULE_NAME
|
|
thisObject.container.initialize()
|
|
thisObject.container.isClickeable = true
|
|
thisObject.container.isDraggeable = false
|
|
thisObject.container.status = 'hidden'
|
|
|
|
resize()
|
|
return thisObject
|
|
|
|
function initialize () {
|
|
thisObject.sidePanelTab = newSidePanelTab()
|
|
thisObject.sidePanelTab.container.connectToParent(thisObject.container, false, false)
|
|
thisObject.sidePanelTab.initialize()
|
|
|
|
canvas.eventHandler.listenToEvent('Browser Resized', resize)
|
|
isInitialized = true
|
|
}
|
|
|
|
function resize () {
|
|
thisObject.container.frame.width = SIDE_PANEL_WIDTH
|
|
thisObject.container.frame.height = browserCanvas.height // - TOP_SPACE_HEIGHT
|
|
thisObject.container.frame.position.x = -SIDE_PANEL_WIDTH
|
|
thisObject.container.frame.position.y = 0 // TOP_SPACE_HEIGHT
|
|
}
|
|
|
|
function getContainer (point) {
|
|
let container
|
|
|
|
container = thisObject.sidePanelTab.getContainer(point)
|
|
if (container !== undefined) { return container }
|
|
|
|
if (thisObject.container.frame.isThisPointHere(point, true) === true) {
|
|
return thisObject.container
|
|
} else {
|
|
return undefined
|
|
}
|
|
}
|
|
|
|
function draw () {
|
|
if (isInitialized === false) { return }
|
|
borders()
|
|
thisObject.sidePanelTab.draw()
|
|
|
|
for (let i = 0; i < thisObject.areas.length; i++) {
|
|
let area = thisObject.areas[i]
|
|
area.draw()
|
|
}
|
|
}
|
|
|
|
function borders () {
|
|
let point1
|
|
let point2
|
|
let point3
|
|
let point4
|
|
|
|
point1 = {
|
|
x: 0,
|
|
y: 0
|
|
}
|
|
|
|
point2 = {
|
|
x: thisObject.container.frame.width,
|
|
y: 0
|
|
}
|
|
|
|
point3 = {
|
|
x: thisObject.container.frame.width,
|
|
y: thisObject.container.frame.height
|
|
}
|
|
|
|
point4 = {
|
|
x: 0,
|
|
y: thisObject.container.frame.height
|
|
}
|
|
|
|
point1 = thisObject.container.frame.frameThisPoint(point1)
|
|
point2 = thisObject.container.frame.frameThisPoint(point2)
|
|
point3 = thisObject.container.frame.frameThisPoint(point3)
|
|
point4 = thisObject.container.frame.frameThisPoint(point4)
|
|
|
|
browserCanvasContext.setLineDash([0, 0])
|
|
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()
|
|
|
|
let opacity = 1
|
|
|
|
browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.LIGHT_GREY + ', ' + opacity + ''
|
|
browserCanvasContext.fill()
|
|
|
|
browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GREY + ', ' + opacity + ''
|
|
browserCanvasContext.lineWidth = 0.3
|
|
browserCanvasContext.stroke()
|
|
|
|
/* Shadow */
|
|
|
|
if (thisObject.container.status !== 'hidden') {
|
|
for (let i = 0; i <= 30; i++) {
|
|
opacity = 1 - (i / 300) - 0.95
|
|
|
|
browserCanvasContext.setLineDash([0, 0])
|
|
browserCanvasContext.beginPath()
|
|
browserCanvasContext.moveTo(point2.x + i, point2.y)
|
|
browserCanvasContext.lineTo(point3.x + i, point3.y)
|
|
browserCanvasContext.closePath()
|
|
|
|
browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + opacity + ''
|
|
browserCanvasContext.lineWidth = 1
|
|
browserCanvasContext.stroke()
|
|
}
|
|
}
|
|
}
|
|
}
|