From 4727a60509f4e71c54a2dc04222c34b85d45ed26 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 13 May 2020 09:47:13 +0200 Subject: [PATCH] List View Progress --- SideSpace/ListItem.js | 72 +++++++++++ SideSpace/ListView.js | 285 ++++++++++++++++++++++++++++++++++++++++++ Spaces/SideSpace.js | 15 +++ 3 files changed, 372 insertions(+) create mode 100644 SideSpace/ListItem.js create mode 100644 SideSpace/ListView.js diff --git a/SideSpace/ListItem.js b/SideSpace/ListItem.js new file mode 100644 index 000000000..6e4ec6885 --- /dev/null +++ b/SideSpace/ListItem.js @@ -0,0 +1,72 @@ +function newListItem () { + const MODULE_NAME = 'List Item' + const ERROR_LOG = true + const logger = newWebDebugLog() + logger.fileName = MODULE_NAME + + let thisObject = { + container: undefined, + fitFunction: undefined, + physics: physics, + draw: draw, + getContainer: getContainer, + initialize: initialize, + finalize: finalize + } + + thisObject.container = newContainer() + thisObject.container.initialize() + thisObject.container.isDraggeable = false + thisObject.container.isWheelable = false + thisObject.container.detectMouseOver = true + + return thisObject + + function finalize () { + thisObject.container.finalize() + thisObject.container = undefined + thisObject.fitFunction = undefined + } + + function initialize () { + + } + + function getContainer (point) { + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return thisObject.container + } + } + + function onMouseClick (event) { + + } + + function physics () { + + } + + function draw () { + let label1 = 'TEST NAME' + + let backgroundColor = UI_COLOR.BLACK + + const RED_LINE_HIGHT = 4 + const OPACITY = 0.75 + + let params = { + cornerRadius: 0, + lineWidth: 1, + container: thisObject.container, + borderColor: UI_COLOR.RUSTED_RED, + castShadow: false, + backgroundColor: backgroundColor, + opacity: OPACITY + } + + roundedCornersBackground(params) + + drawLabel(label1, 1 / 2, 6 / 10, -5, 0, label1FontSize, thisObject.container) + drawIcon(thisObject.exchangeIcon, 1 / 8, 2 / 10, 0, 0, 14, thisObject.container) + } +} diff --git a/SideSpace/ListView.js b/SideSpace/ListView.js new file mode 100644 index 000000000..8c8097671 --- /dev/null +++ b/SideSpace/ListView.js @@ -0,0 +1,285 @@ +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 = 40 + 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.80 + thisObject.container.frame.height = headerHeight + + let position = { // Default position + x: SIDE_PANEL_WIDTH * 0.10, + y: 20 + } + + thisObject.container.frame.position = position + + 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] + let listItem = newListItem() + listItem.initialize() + listItem.container.connectToParent(thisObject.container, false, false) + 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 } + + drawHeader() + drawScrollBar() + } + + function drawHeader () { + let label1 = 'HEADER' + + let icon1 = 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(label1, 1 / 2, 0, 0, 15, 9, thisObject.container, UI_COLOR.BLACK) + drawIcon(icon1, 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() + } + } +} diff --git a/Spaces/SideSpace.js b/Spaces/SideSpace.js index 2212ae12b..66366c11a 100644 --- a/Spaces/SideSpace.js +++ b/Spaces/SideSpace.js @@ -19,6 +19,8 @@ function newSideSpace () { thisObject.container.detectMouseOver = true thisObject.container.status = 'hidden' + let listView + resize() return thisObject @@ -28,9 +30,17 @@ function newSideSpace () { thisObject.sidePanelTab.initialize() canvas.eventHandler.listenToEvent('Browser Resized', resize) + + initializeListView() isInitialized = true } + function initializeListView () { + listView = newListView() + listView.initialize() + listView.container.connectToParent(thisObject.container, false, false) + } + function resize () { thisObject.container.frame.width = SIDE_PANEL_WIDTH thisObject.container.frame.height = browserCanvas.height // - TOP_SPACE_HEIGHT @@ -44,6 +54,9 @@ function newSideSpace () { container = thisObject.sidePanelTab.getContainer(point) if (container !== undefined) { return container } + container = listView.getContainer(point) + if (container !== undefined) { return container } + if (thisObject.container.frame.isThisPointHere(point, true) === true) { return thisObject.container } else { @@ -53,6 +66,7 @@ function newSideSpace () { function physics () { thisObject.sidePanelTab.physics() + listView.physics() } function draw () { @@ -60,6 +74,7 @@ function newSideSpace () { if (isInitialized === false) { return } borders() thisObject.sidePanelTab.draw() + listView.draw() } function borders () {