edge editor first part implemented

ChartsSpace/EdgeEditor.js

@@ -0,0 +1,247 @@
+function newEdgeEditor () {
+  const MODULE_NAME = 'Edge Editor'
+
+  let thisObject = {
+    container: undefined,
+    fitFunction: undefined,
+    isVisible: true,
+    physics: physics,
+    drawForeground: drawForeground,
+    getContainer: getContainer,
+    initialize: initialize,
+    finalize: finalize
+  }
+
+  const EDGE_SIZE = 6
+
+  thisObject.container = newContainer()
+  thisObject.container.initialize(MODULE_NAME)
+
+  thisObject.container.isDraggeable = true
+  thisObject.container.isClickeable = false
+  thisObject.container.isWheelable = false
+  thisObject.container.detectMouseOver = true
+
+  let isMouseOver
+  let whereIsMouseOver = 'outside'
+
+  let onMouseOverEventSubscriptionId
+  let onMouseNotOverEventSubscriptionId
+
+  let mouse = {
+    position: {
+      x: 0,
+      y: 0
+    }
+  }
+
+  return thisObject
+
+  function finalize () {
+    thisObject.container.eventHandler.stopListening(onMouseOverEventSubscriptionId)
+    thisObject.container.eventHandler.stopListening(onMouseNotOverEventSubscriptionId)
+
+    thisObject.container.finalize()
+    thisObject.container = undefined
+    thisObject.fitFunction = undefined
+
+    mouse = undefined
+  }
+
+  function initialize () {
+    onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
+    onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
+  }
+
+  function onMouseOver (event) {
+    isMouseOver = true
+  }
+
+  function onMouseNotOver () {
+    isMouseOver = false
+  }
+
+  function getContainer (mousePoint) {
+    if (thisObject.container.frame.isThisPointHere(mousePoint, undefined, undefined, -EDGE_SIZE) === true) {
+      console.log('isThisPointHere ', true)
+
+      let point = {
+        x: mousePoint.x,
+        y: mousePoint.y
+      }
+      point = unTransformThisPoint(point, thisObject.container)
+
+      if (point.x <= 0) {
+        whereIsMouseOver = 'left'
+        return thisObject.container
+      }
+
+      if (point.x >= thisObject.container.frame.width) {
+        whereIsMouseOver = 'right'
+        return thisObject.container
+      }
+
+      if (point.y <= 0) {
+        whereIsMouseOver = 'top'
+        return thisObject.container
+      }
+
+      if (point.y >= thisObject.container.frame.height) {
+        whereIsMouseOver = 'bottom'
+        return thisObject.container
+      }
+
+      whereIsMouseOver = 'center'
+    } else {
+      isMouseOver = false
+      whereIsMouseOver = 'outside'
+    }
+  }
+
+  function physics () {
+
+  }
+
+  function drawForeground () {
+    let edgeSize
+    let lineWidth
+
+    if (whereIsMouseOver === 'outside') {
+      edgeSize = EDGE_SIZE / 2
+      lineWidth = 0.1
+    } else {
+      edgeSize = EDGE_SIZE
+      lineWidth = 0.5
+    }
+
+    const OPACITY = 1
+
+    console.log('whereIsMouseOver ', whereIsMouseOver, 'isMouseOver ' + isMouseOver)
+
+    pointA1 = {
+      x: 0,
+      y: 0
+    }
+
+    pointA2 = {
+      x: thisObject.container.frame.width,
+      y: 0
+    }
+
+    pointA3 = {
+      x: thisObject.container.frame.width,
+      y: thisObject.container.frame.height
+    }
+
+    pointA4 = {
+      x: 0,
+      y: thisObject.container.frame.height
+    }
+
+    pointB1 = {
+      x: 0,
+      y: 0
+    }
+
+    pointB2 = {
+      x: thisObject.container.frame.width,
+      y: 0
+    }
+
+    pointB3 = {
+      x: thisObject.container.frame.width,
+      y: thisObject.container.frame.height
+    }
+
+    pointB4 = {
+      x: 0,
+      y: thisObject.container.frame.height
+    }
+
+    pointA1 = transformThisPoint(pointA1, thisObject.container)
+    pointA2 = transformThisPoint(pointA2, thisObject.container)
+    pointA3 = transformThisPoint(pointA3, thisObject.container)
+    pointA4 = transformThisPoint(pointA4, thisObject.container)
+
+    pointB1 = transformThisPoint(pointB1, thisObject.container)
+    pointB2 = transformThisPoint(pointB2, thisObject.container)
+    pointB3 = transformThisPoint(pointB3, thisObject.container)
+    pointB4 = transformThisPoint(pointB4, thisObject.container)
+
+    pointB1 = {
+      x: pointB1.x - edgeSize,
+      y: pointB1.y - edgeSize
+    }
+
+    pointB2 = {
+      x: pointB2.x + edgeSize,
+      y: pointB2.y - edgeSize
+    }
+
+    pointB3 = {
+      x: pointB3.x + edgeSize,
+      y: pointB3.y + edgeSize
+    }
+
+    pointB4 = {
+      x: pointB4.x - edgeSize,
+      y: pointB4.y + edgeSize
+    }
+
+    browserCanvasContext.setLineDash([0, 0])
+
+    browserCanvasContext.beginPath()
+    browserCanvasContext.moveTo(pointA1.x, pointA1.y)
+    browserCanvasContext.lineTo(pointA2.x, pointA2.y)
+    browserCanvasContext.lineTo(pointB2.x, pointB2.y)
+    browserCanvasContext.lineTo(pointB1.x, pointB1.y)
+    browserCanvasContext.lineTo(pointA1.x, pointA1.y)
+    browserCanvasContext.closePath()
+
+    drawEdge('top')
+
+    browserCanvasContext.beginPath()
+    browserCanvasContext.moveTo(pointA2.x, pointA2.y)
+    browserCanvasContext.lineTo(pointA3.x, pointA3.y)
+    browserCanvasContext.lineTo(pointB3.x, pointB3.y)
+    browserCanvasContext.lineTo(pointB2.x, pointB2.y)
+    browserCanvasContext.lineTo(pointA2.x, pointA2.y)
+    browserCanvasContext.closePath()
+
+    drawEdge('right')
+
+    browserCanvasContext.beginPath()
+    browserCanvasContext.moveTo(pointA3.x, pointA3.y)
+    browserCanvasContext.lineTo(pointA4.x, pointA4.y)
+    browserCanvasContext.lineTo(pointB4.x, pointB4.y)
+    browserCanvasContext.lineTo(pointB3.x, pointB3.y)
+    browserCanvasContext.lineTo(pointA3.x, pointA3.y)
+    browserCanvasContext.closePath()
+
+    drawEdge('bottom')
+
+    browserCanvasContext.beginPath()
+    browserCanvasContext.moveTo(pointA4.x, pointA4.y)
+    browserCanvasContext.lineTo(pointA1.x, pointA1.y)
+    browserCanvasContext.lineTo(pointB1.x, pointB1.y)
+    browserCanvasContext.lineTo(pointB4.x, pointB4.y)
+    browserCanvasContext.lineTo(pointA4.x, pointA4.y)
+    browserCanvasContext.closePath()
+
+    drawEdge('left')
+
+    function drawEdge (edgeType) {
+      if (whereIsMouseOver === edgeType && isMouseOver === true) {
+        browserCanvasContext.lineWidth = lineWidth
+        browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + OPACITY + ')'
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', ' + OPACITY + ')'
+      } else {
+        browserCanvasContext.lineWidth = lineWidth
+        browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + OPACITY + ')'
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK_TURQUOISE + ', ' + OPACITY + ')'
+      }
+      browserCanvasContext.fill()
+      browserCanvasContext.stroke()
+    }
+  }
+}

ChartsSpace/TimeMachine.js

@@ -21,6 +21,7 @@ function newTimeMachine () {
     timeScale: undefined,
     rateScale: undefined,
     payload: undefined,
+    edgeEditor: undefined,
     timelineCharts: [],
     fitFunction: fitFunction,
     physics: physics,
@@ -101,6 +102,7 @@ function newTimeMachine () {
     thisObject.container.finalize()
     thisObject.container = undefined
     thisObject.payload = undefined
+    thisObject.edgeEditor = undefined
 
     mouse = undefined
     timelineChartsMap = undefined
@@ -149,6 +151,10 @@ function newTimeMachine () {
     onViewportPositionChangedEventSuscriptionId = canvas.chartSpace.viewport.eventHandler.listenToEvent('Position Changed', onViewportPositionChanged)
     onViewportZoomChangedEventSuscriptionId = canvas.chartSpace.viewport.eventHandler.listenToEvent('Zoom Changed', onViewportZoomChanged)
 
+    thisObject.edgeEditor = newEdgeEditor()
+    thisObject.edgeEditor.initialize()
+    thisObject.edgeEditor.container.connectToParent(thisObject.container, true, true, false, true)
+
     callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE)
   }
 
@@ -269,6 +275,13 @@ function newTimeMachine () {
   function getContainer (point, purpose) {
     let container
 
+    container = thisObject.edgeEditor.getContainer(point)
+    if (container !== undefined) {
+      if (container.isForThisPurpose(purpose)) {
+        return container
+      }
+    }
+
     if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) {
       container = thisObject.rateScale.getContainer(point)
       if (container !== undefined) {
@@ -571,14 +584,8 @@ function newTimeMachine () {
         if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) { thisObject.rateScale.drawForeground() }
       }
 
-      let style = {
-        color: UI_COLOR.BLACK,
-        opacity: 1,
-        lineWidth: 1,
-        lineDash: [1, 3]
-      }
-      thisObject.container.frame.draw(false, true, false, thisObject.fitFunction, style)
       drawLabel()
+      thisObject.edgeEditor.drawForeground()
     }
   }
 

Frame.js

@@ -160,11 +160,13 @@ function newFrame () {
     return point
   }
 
-  function isThisPointHere (point, outsideViewPort, dontTransform) {
- // The second parameter is usefull when you want to check a point that you already know is outside the viewport.
+  function isThisPointHere (point, outsideViewPort, dontTransform, padding) {
+    // The second parameter is usefull when you want to check a point that you already know is outside the viewport.
+    // The padding is a distance to the borders of the container. Can be either negative (outside, to increase the cointainer size) or positive (inside to decrease the cointainer size)
+
+    if (padding === undefined) { padding = 0 }
 
        /* We need not to modify the point received, so me make a copy of it. */
-
     let checkPoint = {
       x: point.x,
       y: point.y
@@ -193,7 +195,7 @@ function newFrame () {
     }
 
     if (thisObject.type === 'Rectangle') {
-      if (checkPoint.x < 0 || checkPoint.y < 0 || checkPoint.x > thisObject.width || checkPoint.y > thisObject.height) {
+      if (checkPoint.x < 0 + padding || checkPoint.y < 0 + padding || checkPoint.x > thisObject.width + padding || checkPoint.y > thisObject.height + padding) {
         return false
       } else {
         return true

Scales/TimeScale.js

@@ -405,6 +405,8 @@ function newTimeScale () {
       browserCanvasContext.lineTo(point8.x, point8.y)
       browserCanvasContext.lineTo(point9.x, point9.y)
 
+      browserCanvasContext.closePath()
+
       browserCanvasContext.lineWidth = LINE_WIDTH
       browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', ' + OPACITY + ')'
       browserCanvasContext.stroke()