diff --git a/Projects/Foundations/UI/Spaces/Side-Space/SidePanelTab.js b/Projects/Foundations/UI/Spaces/Side-Space/SidePanelTab.js index cb6fb44ae..2c54d5fe4 100644 --- a/Projects/Foundations/UI/Spaces/Side-Space/SidePanelTab.js +++ b/Projects/Foundations/UI/Spaces/Side-Space/SidePanelTab.js @@ -126,9 +126,7 @@ function newSidePanelTab() { } function positionPhysics() { - if (UI.projects.foundations.spaces.chartingSpace.viewport !== undefined) { - thisObject.container.frame.position.y = browserCanvas.height / 2 - TAB_HEIGHT / 2 // TOP_SPACE_HEIGHT + UI.projects.foundations.spaces.chartingSpace.viewport.marginAmount + TAB_HEIGHT * thisObject.index - } + thisObject.container.frame.position.y = browserCanvas.height / 2 - TAB_HEIGHT / 2 } function draw() { @@ -382,7 +380,7 @@ function newSidePanelTab() { labelPosition = thisObject.container.frame.frameThisPoint(labelPosition) - browserCanvasContext.font = 12 + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.font = 12 + 'px ' + UI_FONT.PRIMARY browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.GREY + ', 1)' browserCanvasContext.fillText( thisObject.tabLabel, diff --git a/Projects/Foundations/UI/Spaces/Side-Space/SideSpace.js b/Projects/Foundations/UI/Spaces/Side-Space/SideSpace.js index 3ea331d34..94f12f696 100644 --- a/Projects/Foundations/UI/Spaces/Side-Space/SideSpace.js +++ b/Projects/Foundations/UI/Spaces/Side-Space/SideSpace.js @@ -1,173 +1,38 @@ function newFoundationsSideSpace() { - const MODULE_NAME = 'Side Space' let thisObject = { sidePanelTab: undefined, container: undefined, physics: physics, draw: draw, + getSidePanelTab, getSidePanelTab, getContainer: getContainer, initialize: initialize, finalize: finalize } - let isInitialized = false - - thisObject.container = newContainer() - thisObject.container.name = MODULE_NAME - thisObject.container.initialize() - thisObject.container.isClickeable = true - thisObject.container.isDraggeable = false - thisObject.container.detectMouseOver = true - thisObject.container.status = 'hidden' - - let listView - - resize() - - let openingEventSubscriptionId - let closedEventSubscriptionId - let browserResizedEventSubscriptionId return thisObject function initialize() { - thisObject.sidePanelTab = newSidePanelTab() - thisObject.sidePanelTab.tabIcon = UI.projects.foundations.spaces.designSpace.getIconByProjectAndName('Foundations', 'workspace') - thisObject.sidePanelTab.tabLabel = 'Workspaces' - thisObject.sidePanelTab.container.connectToParent(thisObject.container, false, false) - thisObject.sidePanelTab.initialize('left') - - browserResizedEventSubscriptionId = canvas.eventHandler.listenToEvent('Browser Resized', resize) - - initializeListView() - isInitialized = true + } function finalize() { - canvas.eventHandler.stopListening(browserResizedEventSubscriptionId) - thisObject.sidePanelTab.container.eventHandler.stopListening(openingEventSubscriptionId) - thisObject.sidePanelTab.container.eventHandler.stopListening(closedEventSubscriptionId) + } - function initializeListView() { - listView = newListView() - listView.initialize() - listView.container.connectToParent(thisObject.container, false, false) - openingEventSubscriptionId = thisObject.sidePanelTab.container.eventHandler.listenToEvent('opening', listView.turnOn) - closedEventSubscriptionId = thisObject.sidePanelTab.container.eventHandler.listenToEvent('closed', listView.turnOff) - } + function getSidePanelTab() { - 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 - - if (listView !== undefined) { - listView.resize() - } - - if (thisObject.sidePanelTab !== undefined) { - thisObject.sidePanelTab.resize() - } } function getContainer(point, purpose) { - if (thisObject.sidePanelTab === undefined) { return } - let container - container = thisObject.sidePanelTab.getContainer(point, purpose) - if (container !== undefined) { return container } - - container = listView.getContainer(point, purpose) - if (container !== undefined) { return container } - - if (thisObject.container.frame.isThisPointHere(point, true) === true) { - return thisObject.container - } else { - return undefined - } } function physics() { - thisObject.sidePanelTab.physics() - listView.physics() + } function draw() { - if (CAN_SPACES_DRAW === false) { return } - if (isInitialized === false) { return } - borders() - thisObject.sidePanelTab.draw() - listView.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([]) // Resets Line Dash - 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.setLineDash([]) // Resets Line Dash - browserCanvasContext.stroke() - - /* Shadow */ - - if (thisObject.container.status !== 'hidden') { - for (let i = 0; i <= 30; i++) { - opacity = 1 - (i / 300) - 0.95 - - browserCanvasContext.setLineDash([]) // Resets Line Dash - 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.setLineDash([]) // Resets Line Dash - browserCanvasContext.stroke() - } - } + } } diff --git a/Projects/Foundations/UI/Spaces/Workspace-Space/WorkspaceSpace.js b/Projects/Foundations/UI/Spaces/Workspace-Space/WorkspaceSpace.js new file mode 100644 index 000000000..7eff61a9a --- /dev/null +++ b/Projects/Foundations/UI/Spaces/Workspace-Space/WorkspaceSpace.js @@ -0,0 +1,173 @@ +function newFoundationsWorkspaceSpace() { + const MODULE_NAME = 'Workspace Space' + let thisObject = { + sidePanelTab: undefined, + container: undefined, + physics: physics, + draw: draw, + getContainer: getContainer, + initialize: initialize, + finalize: finalize + } + + let isInitialized = false + + thisObject.container = newContainer() + thisObject.container.name = MODULE_NAME + thisObject.container.initialize() + thisObject.container.isClickeable = true + thisObject.container.isDraggeable = false + thisObject.container.detectMouseOver = true + thisObject.container.status = 'hidden' + + let listView + + resize() + + let openingEventSubscriptionId + let closedEventSubscriptionId + let browserResizedEventSubscriptionId + return thisObject + + function initialize() { + thisObject.sidePanelTab = newSidePanelTab() + thisObject.sidePanelTab.tabIcon = UI.projects.foundations.spaces.designSpace.getIconByProjectAndName('Foundations', 'workspace') + thisObject.sidePanelTab.tabLabel = 'Workspaces' + thisObject.sidePanelTab.container.connectToParent(thisObject.container, false, false) + thisObject.sidePanelTab.initialize('left') + + browserResizedEventSubscriptionId = canvas.eventHandler.listenToEvent('Browser Resized', resize) + + initializeListView() + isInitialized = true + } + + function finalize() { + canvas.eventHandler.stopListening(browserResizedEventSubscriptionId) + thisObject.sidePanelTab.container.eventHandler.stopListening(openingEventSubscriptionId) + thisObject.sidePanelTab.container.eventHandler.stopListening(closedEventSubscriptionId) + } + + function initializeListView() { + listView = newListView() + listView.initialize() + listView.container.connectToParent(thisObject.container, false, false) + openingEventSubscriptionId = thisObject.sidePanelTab.container.eventHandler.listenToEvent('opening', listView.turnOn) + closedEventSubscriptionId = thisObject.sidePanelTab.container.eventHandler.listenToEvent('closed', listView.turnOff) + } + + 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 + + if (listView !== undefined) { + listView.resize() + } + + if (thisObject.sidePanelTab !== undefined) { + thisObject.sidePanelTab.resize() + } + } + + function getContainer(point, purpose) { + if (thisObject.sidePanelTab === undefined) { return } + let container + + container = thisObject.sidePanelTab.getContainer(point, purpose) + if (container !== undefined) { return container } + + container = listView.getContainer(point, purpose) + if (container !== undefined) { return container } + + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return thisObject.container + } else { + return undefined + } + } + + function physics() { + thisObject.sidePanelTab.physics() + listView.physics() + } + + function draw() { + if (CAN_SPACES_DRAW === false) { return } + if (isInitialized === false) { return } + borders() + thisObject.sidePanelTab.draw() + listView.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([]) // Resets Line Dash + 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.setLineDash([]) // Resets Line Dash + browserCanvasContext.stroke() + + /* Shadow */ + + if (thisObject.container.status !== 'hidden') { + for (let i = 0; i <= 30; i++) { + opacity = 1 - (i / 300) - 0.95 + + browserCanvasContext.setLineDash([]) // Resets Line Dash + 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.setLineDash([]) // Resets Line Dash + browserCanvasContext.stroke() + } + } + } +} diff --git a/Projects/Governance/Icons/governance-tab.png b/Projects/Governance/Icons/governance-tab.png new file mode 100644 index 000000000..281622484 Binary files /dev/null and b/Projects/Governance/Icons/governance-tab.png differ diff --git a/Projects/Governance/UI/Spaces/Assets-Space/Assets.js b/Projects/Governance/UI/Spaces/Assets-Space/Assets.js index 3433850fc..68a1d86f5 100644 --- a/Projects/Governance/UI/Spaces/Assets-Space/Assets.js +++ b/Projects/Governance/UI/Spaces/Assets-Space/Assets.js @@ -3,6 +3,7 @@ function newGobernanceAssetsSpace() { let thisObject = { container: undefined, + sidePanelTab: undefined, physics: physics, draw: draw, getContainer: getContainer, @@ -17,31 +18,70 @@ function newGobernanceAssetsSpace() { return thisObject function finalize() { + canvas.eventHandler.stopListening(browserResizedEventSubscriptionId) + thisObject.sidePanelTab.container.eventHandler.stopListening(openingEventSubscriptionId) + thisObject.sidePanelTab.container.eventHandler.stopListening(closingEventSubscriptionId) + thisObject.container.finalize() thisObject.container = undefined } function initialize() { + + setupSidePanelTab() + function setupSidePanelTab() { + thisObject.sidePanelTab = newSidePanelTab() + thisObject.sidePanelTab.container.connectToParent(thisObject.container, false, false) + thisObject.sidePanelTab.tabIcon = UI.projects.foundations.spaces.designSpace.getIconByProjectAndName('Governance', 'governance-tab') + thisObject.sidePanelTab.tabLabel = 'Governance' + thisObject.sidePanelTab.initialize('right') + openingEventSubscriptionId = thisObject.sidePanelTab.container.eventHandler.listenToEvent('opening', onOpening) + closingEventSubscriptionId = thisObject.sidePanelTab.container.eventHandler.listenToEvent('closing', onClosing) + + browserResizedEventSubscriptionId = canvas.eventHandler.listenToEvent('Browser Resized', resize) + } + } + + function resize() { + thisObject.container.frame.width = UI.projects.education.globals.docs.DOCS_SPACE_WIDTH + thisObject.container.frame.height = browserCanvas.height // - TOP_SPACE_HEIGHT + thisObject.container.frame.position.x = browserCanvas.width + thisObject.container.frame.position.y = 0 // TOP_SPACE_HEIGHT + + if (thisObject.sidePanelTab !== undefined) { + thisObject.sidePanelTab.resize() + } } function physics() { if (UI.projects.foundations.spaces.designSpace.workspace === undefined) { return } + thisObject.sidePanelTab.physics() } - function getContainer(point) { + function getContainer(point, purpose) { + if (thisObject.sidePanelTab === undefined) { return } + let container - return undefined // since this space does not draw anything we return here + container = thisObject.sidePanelTab.getContainer(point, purpose) + if (container !== undefined) { return container } if (thisObject.container.frame.isThisPointHere(point, true) === true) { - thisObject.container.space = MODULE_NAME return thisObject.container } else { return undefined } } - function draw() { + function onOpening() { } + + function onClosing() { + + } + + function draw() { + thisObject.sidePanelTab.draw() + } } diff --git a/Projects/ProjectsSchema.json b/Projects/ProjectsSchema.json index 45d7cf427..69e09a1d7 100644 --- a/Projects/ProjectsSchema.json +++ b/Projects/ProjectsSchema.json @@ -228,8 +228,8 @@ "initializationIndex": 0, "animationPhysicsIndex": 1, "animationDrawIndex": 0, - "onMouseWheelIndex": 5, - "onMouseOverIndex": 6, + "onMouseWheelIndex": 6, + "onMouseOverIndex": 7, "onMouseClickIndex": 4, "onMouseDownIndex": 6 }, @@ -253,8 +253,8 @@ "initializationIndex": 2, "animationPhysicsIndex": 0, "animationDrawIndex": 5, - "onMouseWheelIndex": 3, - "onMouseOverIndex": 2, + "onMouseWheelIndex": 4, + "onMouseOverIndex": 3, "onMouseClickIndex": 2, "onMouseDownIndex": 3 }, @@ -267,7 +267,7 @@ "animationPhysicsIndex": 3, "animationDrawIndex": 2, "onMouseWheelIndex": 0, - "onMouseOverIndex": 5, + "onMouseOverIndex": 6, "onMouseClickIndex": 0, "onMouseDownIndex": 1 }, @@ -279,8 +279,8 @@ "initializationIndex": 4, "animationPhysicsIndex": 4, "animationDrawIndex": 3, - "onMouseWheelIndex": 2, - "onMouseOverIndex": 3, + "onMouseWheelIndex": 3, + "onMouseOverIndex": 4, "onMouseClickIndex": 3, "onMouseDownIndex": 4 }, @@ -292,8 +292,8 @@ "initializationIndex": 5, "animationPhysicsIndex": 2, "animationDrawIndex": 1, - "onMouseWheelIndex": 4, - "onMouseOverIndex": 4, + "onMouseWheelIndex": 5, + "onMouseOverIndex": 5, "onMouseClickIndex": 5, "onMouseDownIndex": 5 }, @@ -305,11 +305,24 @@ "initializationIndex": 6, "animationPhysicsIndex": 6, "animationDrawIndex": 6, - "onMouseWheelIndex": 1, - "onMouseOverIndex": 2, + "onMouseWheelIndex": 2, + "onMouseOverIndex": 3, "onMouseClickIndex": 6, "onMouseDownIndex": 0 }, + { + "name": "Workspace Space", + "folderName": "Workspace-Space", + "propertyName": "workspaceSpace", + "functionName": "newFoundationsWorkspaceSpace", + "initializationIndex": 7, + "animationPhysicsIndex": 7, + "animationDrawIndex": 7, + "onMouseWheelIndex": 1, + "onMouseOverIndex": 2, + "onMouseClickIndex": 7, + "onMouseDownIndex": 0 + }, { "name": "Chat Space", "folderName": "Chat-Space",