From edc03ee58bd86f66ed1ffc04130748042b0829a6 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 3 Sep 2020 13:27:17 +0200 Subject: [PATCH] Cleaning --- Canvas.js | 49 ++++++++++++- SideSpace/SidePanelTab.js | 113 ++++++++++++++++++++++++----- Spaces/DesignSpace.js | 2 +- Spaces/DocSpace.js | 148 ++++++++++++++++++++++++++++++++++++++ Spaces/SideSpace.js | 2 +- Spaces/TopSpace.js | 2 +- SplashScreen.js | 2 +- 7 files changed, 295 insertions(+), 23 deletions(-) create mode 100644 Spaces/DocSpace.js diff --git a/Canvas.js b/Canvas.js index d07cb3823..a31958ad1 100644 --- a/Canvas.js +++ b/Canvas.js @@ -32,6 +32,7 @@ function newCanvas() { eventHandler: undefined, topSpace: undefined, sideSpace: undefined, + docSpace: undefined, chartingSpace: undefined, floatingSpace: undefined, panelsSpace: undefined, @@ -61,6 +62,7 @@ function newCanvas() { function finalize() { try { + thisObject.docSpace.finalize() thisObject.sideSpace.finalize() thisObject.chartingSpace.finalize() thisObject.floatingSpace.finalize() @@ -122,6 +124,9 @@ function newCanvas() { thisObject.sideSpace = newSideSpace() thisObject.sideSpace.initialize() + thisObject.docSpace = newDocSpace() + thisObject.docSpace.initialize() + thisObject.splashScreen = newSplashScreen() let animation = newAnimation() @@ -136,6 +141,7 @@ function newCanvas() { animation.addCallBackFunction('Design Space Physics', thisObject.designSpace.physics) animation.addCallBackFunction('Panels Space Physics', thisObject.panelsSpace.physics) animation.addCallBackFunction('Side Space Physics', thisObject.sideSpace.physics) + animation.addCallBackFunction('Doc Space Physics', thisObject.docSpace.physics) /* Spcaces Drawing */ animation.addCallBackFunction('Floating Space Draw', thisObject.floatingSpace.draw) @@ -145,6 +151,7 @@ function newCanvas() { animation.addCallBackFunction('Design Space Draw', thisObject.designSpace.draw) animation.addCallBackFunction('Top Space Draw', thisObject.topSpace.draw) animation.addCallBackFunction('Side Space Draw', thisObject.sideSpace.draw) + animation.addCallBackFunction('Doc Space Draw', thisObject.docSpace.draw) animation.addCallBackFunction('Splash Screen Draw', thisObject.splashScreen.draw) animation.start() } catch (err) { @@ -565,6 +572,20 @@ function newCanvas() { let container + /* We check if the mouse is over an element of the Doc Space / */ + container = thisObject.docSpace.getContainer(point) + + if (container !== undefined && container.isDraggeable === true) { + containerBeingDragged = container + containerDragStarted = true + containerBeingDragged.eventHandler.raiseEvent('onDragStarted', point) + return + } + + if (container !== undefined && container.isDraggeable === false) { + return + } + /* We check if the mouse is over an element of the Side Space / */ container = thisObject.sideSpace.getContainer(point) @@ -694,6 +715,14 @@ function newCanvas() { let container + /* We check if the mouse is over an element of the Doc Space / */ + container = thisObject.docSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_CLICK) + + if (container !== undefined && container.isClickeable === true) { + container.eventHandler.raiseEvent('onMouseClick', point) + return + } + /* We check if the mouse is over an element of the Side Space / */ container = thisObject.sideSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_CLICK) @@ -836,7 +865,17 @@ function newCanvas() { let container - /* We check if the mouse is over an element of the Designe Space / */ + /* We check if the mouse is over an element of the Doc Space / */ + if (thisObject.docSpace !== undefined) { + container = thisObject.docSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_OVER) + + if (container !== undefined && container.detectMouseOver === true) { + containerFound() + return + } + } + + /* We check if the mouse is over an element of the Side Space / */ if (thisObject.sideSpace !== undefined) { container = thisObject.sideSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_OVER) @@ -944,6 +983,14 @@ function newCanvas() { event.mousePosition = point let container + /* Doc Space */ + container = canvas.docSpace.getContainer({ x: point.x, y: point.y }) + + if (container !== undefined && container.isWheelable === true) { + container.eventHandler.raiseEvent('onMouseWheel', event) + return false // This instructs the browser not to take the event and scroll the page. + } + /* Side Space */ container = canvas.sideSpace.getContainer({ x: point.x, y: point.y }) diff --git a/SideSpace/SidePanelTab.js b/SideSpace/SidePanelTab.js index 2d1a2c161..2f162d215 100644 --- a/SideSpace/SidePanelTab.js +++ b/SideSpace/SidePanelTab.js @@ -1,7 +1,8 @@ function newSidePanelTab() { const MODULE_NAME = 'Side Panel Tab' let thisObject = { - pointerDirection: 'left', + screenside: undefined, + pointerDirection: undefined, container: undefined, resize: resize, physics: physics, @@ -12,6 +13,7 @@ function newSidePanelTab() { const TAB_WIDTH = 25 const TAB_HEIGHT = 60 + const ANIMATION_STEP = 100 let isInitialized = false let animation = 'none' @@ -26,7 +28,18 @@ function newSidePanelTab() { return thisObject - function initialize() { + function initialize(screenside) { + thisObject.screenside = screenside + switch (thisObject.screenside) { + case 'left': { + thisObject.pointerDirection = 'left' + break + } + case 'right': { + thisObject.pointerDirection = 'right' + break + } + } thisObject.container.frame.width = TAB_WIDTH thisObject.container.frame.height = TAB_HEIGHT @@ -38,18 +51,43 @@ function newSidePanelTab() { } function resize() { - thisObject.container.frame.position.x = 0 + thisObject.container.parentContainer.frame.width + switch (thisObject.screenside) { + case 'left': { + thisObject.container.frame.position.x = 0 + thisObject.container.parentContainer.frame.width + break + } + case 'right': { + thisObject.container.frame.position.x = 0 - TAB_WIDTH + break + } + } + thisObject.container.frame.position.y = 69 setClosed() } function onMouseClick(event) { - if (thisObject.pointerDirection === 'left') { - animation = 'opening' - thisObject.container.eventHandler.raiseEvent('opening') - } else { - animation = 'closing' - thisObject.container.eventHandler.raiseEvent('closing') + switch (thisObject.screenside) { + case 'left': { + if (thisObject.pointerDirection === 'left') { + animation = 'opening' + thisObject.container.eventHandler.raiseEvent('opening') + } else { + animation = 'closing' + thisObject.container.eventHandler.raiseEvent('closing') + } + break + } + case 'right': { + if (thisObject.pointerDirection === 'left') { + animation = 'closing' + thisObject.container.eventHandler.raiseEvent('closing') + } else { + animation = 'opening' + thisObject.container.eventHandler.raiseEvent('opening') + } + break + } } } @@ -74,11 +112,20 @@ function newSidePanelTab() { } function animate() { - const STEP = 50 if (animation === 'opening') { - xOffset = xOffset + STEP - thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON + xOffset + xOffset = xOffset + ANIMATION_STEP + switch (thisObject.screenside) { + case 'left': { + thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON + xOffset + break + } + case 'right': { + thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON - xOffset + break + } + } + if (xOffset >= thisObject.container.parentContainer.frame.width) { setOpened() thisObject.container.eventHandler.raiseEvent('opened') @@ -86,8 +133,18 @@ function newSidePanelTab() { } if (animation === 'closing') { - xOffset = xOffset - STEP - thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON + xOffset + xOffset = xOffset - ANIMATION_STEP + switch (thisObject.screenside) { + case 'left': { + thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON + xOffset + break + } + case 'right': { + thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON - xOffset + break + } + } + if (xOffset <= 0) { setClosed() thisObject.container.eventHandler.raiseEvent('closed') @@ -98,16 +155,36 @@ function newSidePanelTab() { function setOpened() { animation = 'none' xOffset = thisObject.container.parentContainer.frame.width - thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON + xOffset thisObject.container.parentContainer.status = 'visible' - thisObject.pointerDirection = 'right' + switch (thisObject.screenside) { + case 'left': { + thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON + xOffset + thisObject.pointerDirection = 'right' + break + } + case 'right': { + thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON - xOffset + thisObject.pointerDirection = 'left' + break + } + } } function setClosed() { animation = 'none' xOffset = 0 - thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON thisObject.container.parentContainer.status = 'hidden' - thisObject.pointerDirection = 'left' + switch (thisObject.screenside) { + case 'left': { + thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON + thisObject.pointerDirection = 'left' + break + } + case 'right': { + thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON + thisObject.pointerDirection = 'right' + break + } + } } function arrow() { diff --git a/Spaces/DesignSpace.js b/Spaces/DesignSpace.js index 4fb1e1a3f..a9566741f 100644 --- a/Spaces/DesignSpace.js +++ b/Spaces/DesignSpace.js @@ -312,7 +312,7 @@ function newDesignSpace() { function onImageLoad() { image.canDrawIcon = true } - image.src = window.canvasApp.urlPrefix + PATH + name + '.png' + image.src = PATH + name + '.png' thisObject.iconCollection.set(name, image) } } diff --git a/Spaces/DocSpace.js b/Spaces/DocSpace.js new file mode 100644 index 000000000..586f1b861 --- /dev/null +++ b/Spaces/DocSpace.js @@ -0,0 +1,148 @@ +function newDocSpace() { + const MODULE_NAME = 'Doc 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' + + resize() + + let openingEventSubscriptionId + let closedEventSubscriptionId + let browserResizedEventSubscriptionId + return thisObject + + function initialize() { + thisObject.sidePanelTab = newSidePanelTab() + thisObject.sidePanelTab.container.connectToParent(thisObject.container, false, false) + thisObject.sidePanelTab.initialize('right') + + browserResizedEventSubscriptionId = canvas.eventHandler.listenToEvent('Browser Resized', resize) + + isInitialized = true + } + + function finalize() { + canvas.eventHandler.stopListening(browserResizedEventSubscriptionId) + thisObject.sidePanelTab.container.eventHandler.stopListening(openingEventSubscriptionId) + thisObject.sidePanelTab.container.eventHandler.stopListening(closedEventSubscriptionId) + } + + function resize() { + thisObject.container.frame.width = SIDE_PANEL_WIDTH * 2 + 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 getContainer(point, purpose) { + let container + + container = thisObject.sidePanelTab.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() + } + + function draw() { + if (canWeDraw === false) { return } + if (isInitialized === false) { return } + borders() + thisObject.sidePanelTab.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() + } + } + } +} diff --git a/Spaces/SideSpace.js b/Spaces/SideSpace.js index 145edec11..b44409b0a 100644 --- a/Spaces/SideSpace.js +++ b/Spaces/SideSpace.js @@ -32,7 +32,7 @@ function newSideSpace() { function initialize() { thisObject.sidePanelTab = newSidePanelTab() thisObject.sidePanelTab.container.connectToParent(thisObject.container, false, false) - thisObject.sidePanelTab.initialize() + thisObject.sidePanelTab.initialize('left') browserResizedEventSubscriptionId = canvas.eventHandler.listenToEvent('Browser Resized', resize) diff --git a/Spaces/TopSpace.js b/Spaces/TopSpace.js index 1e511a780..b387d011e 100644 --- a/Spaces/TopSpace.js +++ b/Spaces/TopSpace.js @@ -35,7 +35,7 @@ function newTopSpace() { function onImageLoad() { image.canDraw = true } - image.src = window.canvasApp.urlPrefix + PATH + name + '.png' + image.src = PATH + name + '.png' } } diff --git a/SplashScreen.js b/SplashScreen.js index ca8662ced..688318ed0 100644 --- a/SplashScreen.js +++ b/SplashScreen.js @@ -43,7 +43,7 @@ function newSplashScreen() { function onImageLoad() { canDrawLogo = true } - logo.src = window.canvasApp.urlPrefix + 'Images/superalgos-logo.png' + logo.src = 'Images/superalgos-logo.png' canvas.eventHandler.listenToEvent('Browser Resized', resize) isInitialized = true