292 lines
9.8 KiB
JavaScript
292 lines
9.8 KiB
JavaScript
function newListView () {
|
|
const MODULE_NAME = 'List View'
|
|
const ERROR_LOG = true
|
|
const logger = newWebDebugLog()
|
|
logger.fileName = MODULE_NAME
|
|
|
|
let thisObject = {
|
|
fitFunction: undefined,
|
|
container: undefined,
|
|
listItems: [],
|
|
payload: undefined,
|
|
isVisible: false,
|
|
physics: physics,
|
|
draw: draw,
|
|
getContainer: getContainer,
|
|
initialize: initialize,
|
|
finalize: finalize
|
|
}
|
|
|
|
thisObject.container = newContainer()
|
|
thisObject.container.initialize()
|
|
thisObject.container.isDraggeable = false
|
|
thisObject.container.isWheelable = true
|
|
thisObject.container.detectMouseOver = true
|
|
|
|
let isInitialized = false
|
|
|
|
let listItemsMap = new Map()
|
|
let visibleListItems = []
|
|
let firstVisibleListItem = 1
|
|
|
|
const LAYER_SEPARATION = 0
|
|
|
|
let headerHeight = 30
|
|
let footerHeight = 10
|
|
let listItemHeight = 70
|
|
let desiredVisibleListItems = 5
|
|
let posibleVisibleListItems = 5
|
|
let desiredObjectHeight = (listItemHeight + LAYER_SEPARATION) * desiredVisibleListItems + headerHeight + footerHeight
|
|
let posibleObjectHeight = (listItemHeight + LAYER_SEPARATION) * posibleVisibleListItems + headerHeight + footerHeight
|
|
|
|
let onMouseWheelEventSuscriptionId
|
|
let onMouseOverEventSubscriptionId
|
|
let onMouseNotOverEventSubscriptionId
|
|
|
|
let isMouseOver
|
|
return thisObject
|
|
|
|
function finalize () {
|
|
thisObject.container.eventHandler.stopListening(onMouseWheelEventSuscriptionId)
|
|
thisObject.container.eventHandler.stopListening(onMouseOverEventSubscriptionId)
|
|
thisObject.container.eventHandler.stopListening(onMouseNotOverEventSubscriptionId)
|
|
|
|
listItemsMap = undefined
|
|
visibleListItems = undefined
|
|
|
|
thisObject.container.finalize()
|
|
thisObject.container = undefined
|
|
|
|
thisObject.payload = undefined
|
|
thisObject = undefined
|
|
}
|
|
|
|
function initialize () {
|
|
thisObject.container.name = MODULE_NAME
|
|
thisObject.container.frame.containerName = thisObject.container.name
|
|
thisObject.container.frame.width = SIDE_PANEL_WIDTH * 0.75
|
|
|
|
let position = { // Default position
|
|
x: SIDE_PANEL_WIDTH * 0.25 / 2,
|
|
y: 20
|
|
}
|
|
|
|
thisObject.container.frame.position = position
|
|
thisObject.container.frame.height = browserCanvas.height - position.x
|
|
|
|
onMouseWheelEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
|
|
onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
|
|
onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
|
|
|
|
callServer(undefined, 'ListWorkspaces', onResponse)
|
|
|
|
function onResponse (err, text) {
|
|
if (err && err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) {
|
|
if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> Could not load the list of your workspaces from the backend. ') }
|
|
return
|
|
}
|
|
|
|
let workspacelist = JSON.parse(text)
|
|
for (let i = 0; i < workspacelist.length; i++) {
|
|
let workspace = workspacelist[i].replace('.json', '')
|
|
let listItem = newListItem()
|
|
listItem.initialize(workspace, 'Workspace')
|
|
listItem.container.connectToParent(thisObject.container, false, false)
|
|
listItem.container.frame.position.y = headerHeight + i * SIDE_PANEL_WIDTH * 0.75
|
|
thisObject.listItems.push(listItem)
|
|
}
|
|
isInitialized = true
|
|
}
|
|
}
|
|
|
|
function onMouseOver (event) {
|
|
isMouseOver = true
|
|
}
|
|
|
|
function onMouseNotOver () {
|
|
isMouseOver = false
|
|
}
|
|
|
|
function onMouseWheel (event) {
|
|
delta = event.wheelDelta
|
|
if (delta > 0) {
|
|
delta = -1
|
|
} else {
|
|
delta = 1
|
|
}
|
|
|
|
if (event.y - thisObject.container.frame.position.y - CURRENT_TOP_MARGIN < headerHeight) { // Mouse wheel over the header, not a listItem
|
|
desiredVisibleListItems = desiredVisibleListItems + delta
|
|
if (desiredVisibleListItems < 0) { desiredVisibleListItems = 0 }
|
|
if (desiredVisibleListItems > thisObject.listItems.length) { desiredVisibleListItems = thisObject.listItems.length }
|
|
} else {
|
|
firstVisibleListItem = firstVisibleListItem + delta
|
|
}
|
|
desiredObjectHeight = (listItemHeight + LAYER_SEPARATION) * desiredVisibleListItems + headerHeight + footerHeight
|
|
calculateVisbleListItems()
|
|
}
|
|
|
|
function calculateVisbleListItems () {
|
|
let availableSlots = posibleVisibleListItems
|
|
|
|
if (firstVisibleListItem < 1) { firstVisibleListItem = 1 }
|
|
if (firstVisibleListItem > (thisObject.listItems.length - availableSlots + 1)) { firstVisibleListItem = thisObject.listItems.length - availableSlots + 1 }
|
|
|
|
visibleListItems = []
|
|
|
|
for (let i = 0; i < thisObject.listItems.length; i++) {
|
|
if (i + 1 >= firstVisibleListItem && i + 1 < firstVisibleListItem + availableSlots) {
|
|
let listItem = thisObject.listItems[i]
|
|
|
|
listItem.container.frame.position.x = 0
|
|
listItem.container.frame.position.y = (listItemHeight + LAYER_SEPARATION) * visibleListItems.length + headerHeight
|
|
|
|
/* Add to Visible Product Array */
|
|
visibleListItems.push(listItem)
|
|
}
|
|
}
|
|
}
|
|
|
|
function getContainer (point, purpose) {
|
|
if (isInitialized === false || thisObject.visible === false || thisObject.isHidden === true) { return }
|
|
let container
|
|
|
|
if (isMouseOver === true && purpose !== GET_CONTAINER_PURPOSE.MOUSE_OVER) {
|
|
container = thisObject.upDownButton.getContainer(point)
|
|
if (container !== undefined) { return container }
|
|
|
|
container = thisObject.leftRightButton.getContainer(point)
|
|
if (container !== undefined) { return container }
|
|
}
|
|
|
|
/* First we check if thisObject point is inside thisObject space. */
|
|
if (thisObject.container.frame.isThisPointHere(point, true) === true) {
|
|
/* Now we see which is the inner most container that has it */
|
|
for (let i = 0; i < visibleListItems.length; i++) {
|
|
container = visibleListItems[i].getContainer(point)
|
|
|
|
if (container !== undefined) {
|
|
let checkPoint = {
|
|
x: point.x,
|
|
y: point.y
|
|
}
|
|
|
|
checkPoint = thisObject.fitFunction(checkPoint)
|
|
|
|
if (point.x === checkPoint.x && point.y === checkPoint.y) {
|
|
if (purpose !== GET_CONTAINER_PURPOSE.MOUSE_OVER) {
|
|
return container
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* The point does not belong to any inner container, so we return the current container. */
|
|
let checkPoint = {
|
|
x: point.x,
|
|
y: point.y
|
|
}
|
|
|
|
checkPoint = thisObject.fitFunction(checkPoint)
|
|
|
|
if (point.x === checkPoint.x && point.y === checkPoint.y) {
|
|
return thisObject.container
|
|
}
|
|
}
|
|
}
|
|
|
|
function childrenPhysics () {
|
|
for (let i = 0; i < thisObject.listItems.length; i++) {
|
|
let listItem = thisObject.listItems[i]
|
|
listItem.physics()
|
|
}
|
|
}
|
|
|
|
function physics () {
|
|
if (isInitialized === false) { return }
|
|
if (thisObject.isVisible === false) { return }
|
|
childrenPhysics()
|
|
}
|
|
|
|
function draw () {
|
|
if (isInitialized === false || thisObject.visible === false) { return }
|
|
|
|
drawBackground()
|
|
drawScrollBar()
|
|
drawChildren()
|
|
}
|
|
|
|
function drawChildren () {
|
|
for (let i = 0; i < thisObject.listItems.length; i++) {
|
|
let listItem = thisObject.listItems[i]
|
|
listItem.draw()
|
|
}
|
|
}
|
|
|
|
function drawBackground () {
|
|
let label = 'Your Workspaces'
|
|
let icon = canvas.designSpace.iconByUiObjectType.get('Workspace')
|
|
let backgroundColor = UI_COLOR.WHITE
|
|
let params = {
|
|
cornerRadius: 5,
|
|
lineWidth: 1,
|
|
container: thisObject.container,
|
|
borderColor: UI_COLOR.RUSTED_RED,
|
|
castShadow: false,
|
|
backgroundColor: backgroundColor,
|
|
opacity: 1
|
|
}
|
|
|
|
roundedCornersBackground(params)
|
|
|
|
drawLabel(label, 1 / 2, 0, 0, 20, 15, thisObject.container, UI_COLOR.BLACK)
|
|
// drawIcon(icon, 1 / 8, 0, 0, 20, 28, thisObject.container)
|
|
}
|
|
|
|
function drawScrollBar () {
|
|
if (thisObject.listItems.length > posibleVisibleListItems && posibleVisibleListItems > 0) {
|
|
let xOffset = 4
|
|
let barTopPoint = {
|
|
x: thisObject.container.frame.width - xOffset,
|
|
y: headerHeight
|
|
}
|
|
let barBottomPoint = {
|
|
x: thisObject.container.frame.width - xOffset,
|
|
y: thisObject.container.frame.height - footerHeight
|
|
}
|
|
let ratio = posibleVisibleListItems / thisObject.listItems.length
|
|
let handleHeight = (posibleVisibleListItems * (listItemHeight + LAYER_SEPARATION)) * ratio
|
|
let handleTopPoint = {
|
|
x: thisObject.container.frame.width - xOffset,
|
|
y: headerHeight + (listItemHeight + LAYER_SEPARATION) * ratio * (firstVisibleListItem - 1)
|
|
}
|
|
let handleBottomPoint = {
|
|
x: thisObject.container.frame.width - xOffset,
|
|
y: handleTopPoint.y + handleHeight
|
|
}
|
|
barTopPoint = thisObject.container.frame.frameThisPoint(barTopPoint)
|
|
barBottomPoint = thisObject.container.frame.frameThisPoint(barBottomPoint)
|
|
handleTopPoint = thisObject.container.frame.frameThisPoint(handleTopPoint)
|
|
handleBottomPoint = thisObject.container.frame.frameThisPoint(handleBottomPoint)
|
|
|
|
browserCanvasContext.beginPath()
|
|
browserCanvasContext.moveTo(barTopPoint.x, barTopPoint.y)
|
|
browserCanvasContext.lineTo(barBottomPoint.x, barBottomPoint.y)
|
|
browserCanvasContext.closePath()
|
|
browserCanvasContext.setLineDash([0, 0])
|
|
browserCanvasContext.lineWidth = 1
|
|
browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GREY + ', ' + 1 + ')'
|
|
browserCanvasContext.stroke()
|
|
|
|
browserCanvasContext.beginPath()
|
|
browserCanvasContext.moveTo(handleTopPoint.x, handleTopPoint.y)
|
|
browserCanvasContext.lineTo(handleBottomPoint.x, handleBottomPoint.y)
|
|
browserCanvasContext.closePath()
|
|
browserCanvasContext.setLineDash([0, 0])
|
|
browserCanvasContext.lineWidth = 4
|
|
browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.PATINATED_TURQUOISE + ', ' + 1 + ')'
|
|
browserCanvasContext.stroke()
|
|
}
|
|
}
|
|
}
|