512 lines
16 KiB
JavaScript
512 lines
16 KiB
JavaScript
function newEdgeEditor () {
|
|
const MODULE_NAME = 'Edge Editor'
|
|
|
|
let thisObject = {
|
|
container: undefined,
|
|
fitFunction: undefined,
|
|
isVisible: true,
|
|
isMouseOver: undefined,
|
|
onKeyPressed: onKeyPressed,
|
|
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 whatHappened
|
|
let whereIsMouseOver = 'outside'
|
|
|
|
let coordinateSystem
|
|
|
|
let onMouseOverEventSubscriptionId
|
|
let onMouseNotOverEventSubscriptionId
|
|
let onDragStartedEventSubscriptionId
|
|
|
|
let mouse = {
|
|
position: {
|
|
x: 0,
|
|
y: 0
|
|
}
|
|
}
|
|
return thisObject
|
|
|
|
function finalize () {
|
|
thisObject.container.eventHandler.stopListening(onMouseOverEventSubscriptionId)
|
|
thisObject.container.eventHandler.stopListening(onMouseNotOverEventSubscriptionId)
|
|
thisObject.container.eventHandler.stopListening(onDragStartedEventSubscriptionId)
|
|
|
|
thisObject.container.finalize()
|
|
thisObject.container = undefined
|
|
thisObject.fitFunction = undefined
|
|
mouse = undefined
|
|
}
|
|
|
|
function initialize (pCoordinateSystem) {
|
|
coordinateSystem = pCoordinateSystem
|
|
|
|
onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
|
|
onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
|
|
onDragStartedEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onDragStarted', onDragStarted)
|
|
}
|
|
|
|
function onMouseOver (event) {
|
|
thisObject.isMouseOver = true
|
|
mouse = {
|
|
position: {
|
|
x: event.x,
|
|
y: event.y
|
|
}
|
|
}
|
|
}
|
|
|
|
function onMouseNotOver () {
|
|
thisObject.isMouseOver = false
|
|
}
|
|
|
|
function onDragStarted (event) {
|
|
switch (event.buttons) {
|
|
case 1: {
|
|
whatHappened = 'left mouse button'
|
|
if (event.shiftKey === true) {
|
|
whatHappened = 'left mouse button + SHIFT'
|
|
}
|
|
break
|
|
}
|
|
case 2: {
|
|
whatHappened = 'right mouse button' // this will never happen as of today
|
|
break
|
|
}
|
|
}
|
|
}
|
|
|
|
function onKeyPressed (event) {
|
|
const STEP = 10
|
|
|
|
if (event.shiftKey === false && event.code === 'ArrowLeft') {
|
|
thisObject.container.frame.position.x = thisObject.container.frame.position.x + STEP
|
|
whatHappened = 'left or right arrow key pressed'
|
|
return
|
|
}
|
|
|
|
if (event.shiftKey === false && event.code === 'ArrowRight') {
|
|
thisObject.container.frame.position.x = thisObject.container.frame.position.x - STEP
|
|
whatHappened = 'left or right arrow key pressed'
|
|
return
|
|
}
|
|
}
|
|
|
|
function getContainer (event, purpose) {
|
|
if (thisObject.container.frame.isThisPointHere(event, undefined, undefined, -EDGE_SIZE) === true && event.buttons !== 2) {
|
|
let point = {
|
|
x: event.x,
|
|
y: event.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'
|
|
switch (purpose) {
|
|
case GET_CONTAINER_PURPOSE.MOUSE_OVER:
|
|
return // We will let the Time Machine to handle this situation.
|
|
break
|
|
case GET_CONTAINER_PURPOSE.DRAGGING:
|
|
return thisObject.container
|
|
break
|
|
}
|
|
}
|
|
}
|
|
|
|
function physics () {
|
|
if (thisObject.container.frame.position.x === 0 && thisObject.container.frame.position.y === 0) { return }
|
|
|
|
let dragVector = {
|
|
x: thisObject.container.frame.position.x,
|
|
y: thisObject.container.frame.position.y
|
|
}
|
|
|
|
thisObject.container.frame.position.x = 0
|
|
thisObject.container.frame.position.y = 0
|
|
|
|
const MIN_WIDTH = 100
|
|
const MIN_HEIGHT = 50
|
|
|
|
switch (whereIsMouseOver) {
|
|
case 'center': {
|
|
switch (whatHappened) {
|
|
case 'left mouse button + SHIFT': {
|
|
/* This is equivalent to drag the whole Time Machine, so we will apply the translation received onto the Time Machine container. */
|
|
thisObject.container.parentContainer.frame.position.x = thisObject.container.parentContainer.frame.position.x + dragVector.x
|
|
thisObject.container.parentContainer.frame.position.y = thisObject.container.parentContainer.frame.position.y + dragVector.y
|
|
thisObject.container.parentContainer.eventHandler.raiseEvent('onDisplace')
|
|
break
|
|
}
|
|
case 'left mouse button': {
|
|
let point = {
|
|
x: -dragVector.x,
|
|
y: -dragVector.y
|
|
}
|
|
let newMinDate = getDateFromPointAtContainer(point, thisObject.container.parentContainer, coordinateSystem)
|
|
let newMaxRate = getRateFromPointAtContainer(point, thisObject.container.parentContainer, coordinateSystem)
|
|
let xDifferenceMaxMin = coordinateSystem.max.x - coordinateSystem.min.x
|
|
let yDifferenceMaxMin = coordinateSystem.max.y - coordinateSystem.min.y
|
|
coordinateSystem.min.x = newMinDate.valueOf()
|
|
coordinateSystem.max.x = newMinDate.valueOf() + xDifferenceMaxMin
|
|
coordinateSystem.min.y = newMaxRate - yDifferenceMaxMin
|
|
coordinateSystem.max.y = newMaxRate
|
|
let event = {
|
|
type: 'center dragged',
|
|
dragVector: dragVector
|
|
}
|
|
coordinateSystem.recalculateScale(event)
|
|
}
|
|
case 'left or right arrow key pressed': {
|
|
let point = {
|
|
x: -dragVector.x,
|
|
y: 0
|
|
}
|
|
let newMinDate = getDateFromPointAtContainer(point, thisObject.container.parentContainer, coordinateSystem)
|
|
let xDifferenceMaxMin = coordinateSystem.max.x - coordinateSystem.min.x
|
|
coordinateSystem.min.x = newMinDate.valueOf()
|
|
coordinateSystem.max.x = newMinDate.valueOf() + xDifferenceMaxMin
|
|
let event = {
|
|
type: 'center dragged',
|
|
dragVector: dragVector
|
|
}
|
|
coordinateSystem.recalculateScale(event)
|
|
}
|
|
}
|
|
thisObject.container.parentContainer.eventHandler.raiseEvent('onMouseOver', mouse.position)
|
|
break
|
|
}
|
|
case 'top' : {
|
|
if (thisObject.container.parentContainer.frame.height - dragVector.y < MIN_HEIGHT && dragVector.y > 0) {
|
|
return
|
|
}
|
|
|
|
let point = {
|
|
x: dragVector.x,
|
|
y: dragVector.y
|
|
}
|
|
let newMaxRate = getRateFromPointAtContainer(point, thisObject.container.parentContainer, coordinateSystem)
|
|
|
|
thisObject.container.parentContainer.frame.position.y = thisObject.container.parentContainer.frame.position.y + dragVector.y
|
|
thisObject.container.parentContainer.frame.height = thisObject.container.parentContainer.frame.height - dragVector.y
|
|
|
|
switch (whatHappened) {
|
|
case 'left mouse button': {
|
|
coordinateSystem.max.y = newMaxRate
|
|
coordinateSystem.maxHeight = thisObject.container.parentContainer.frame.height
|
|
let event = {
|
|
type: 'top dragged',
|
|
dragVector: dragVector
|
|
}
|
|
coordinateSystem.recalculateScale(event)
|
|
break
|
|
}
|
|
case 'left mouse button + SHIFT': {
|
|
coordinateSystem.maxHeight = thisObject.container.parentContainer.frame.height
|
|
coordinateSystem.recalculateScale()
|
|
break
|
|
}
|
|
}
|
|
thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event)
|
|
break
|
|
}
|
|
case 'bottom' : {
|
|
if (thisObject.container.parentContainer.frame.height + dragVector.y < MIN_HEIGHT && dragVector.y < 0) {
|
|
return
|
|
}
|
|
|
|
let point = {
|
|
x: dragVector.x,
|
|
y: dragVector.y + thisObject.container.frame.height
|
|
}
|
|
let newMinRate = getRateFromPointAtContainer(point, thisObject.container.parentContainer, coordinateSystem)
|
|
|
|
thisObject.container.parentContainer.frame.height = thisObject.container.parentContainer.frame.height + dragVector.y
|
|
|
|
switch (whatHappened) {
|
|
case 'left mouse button': {
|
|
coordinateSystem.min.y = newMinRate
|
|
coordinateSystem.maxHeight = thisObject.container.parentContainer.frame.height
|
|
let event = {
|
|
type: 'bottom dragged',
|
|
dragVector: dragVector
|
|
}
|
|
coordinateSystem.recalculateScale(event)
|
|
break
|
|
}
|
|
case 'left mouse button + SHIFT': {
|
|
coordinateSystem.maxHeight = thisObject.container.parentContainer.frame.height
|
|
coordinateSystem.recalculateScale()
|
|
break
|
|
}
|
|
}
|
|
thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event)
|
|
break
|
|
}
|
|
case 'left' : {
|
|
if (thisObject.container.parentContainer.frame.width - dragVector.x < MIN_WIDTH && dragVector.x > 0) {
|
|
return
|
|
}
|
|
let point = {
|
|
x: dragVector.x,
|
|
y: dragVector.y
|
|
}
|
|
let newMinDate = getDateFromPointAtContainer(point, thisObject.container.parentContainer, coordinateSystem)
|
|
|
|
thisObject.container.parentContainer.frame.position.x = thisObject.container.parentContainer.frame.position.x + dragVector.x
|
|
thisObject.container.parentContainer.frame.width = thisObject.container.parentContainer.frame.width - dragVector.x
|
|
|
|
switch (whatHappened) {
|
|
case 'left mouse button': {
|
|
coordinateSystem.min.x = newMinDate.valueOf()
|
|
coordinateSystem.maxWidth = thisObject.container.parentContainer.frame.width
|
|
coordinateSystem.recalculateScale()
|
|
break
|
|
}
|
|
case 'left mouse button + SHIFT': {
|
|
coordinateSystem.maxWidth = thisObject.container.parentContainer.frame.width
|
|
coordinateSystem.recalculateScale()
|
|
break
|
|
}
|
|
}
|
|
thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event)
|
|
break
|
|
}
|
|
case 'right' : {
|
|
if (thisObject.container.parentContainer.frame.width + dragVector.x < MIN_WIDTH && dragVector.x < 0) {
|
|
return
|
|
}
|
|
|
|
let point = {
|
|
x: dragVector.x + thisObject.container.frame.width,
|
|
y: dragVector.y
|
|
}
|
|
let newMaxDate = getDateFromPointAtContainer(point, thisObject.container.parentContainer, coordinateSystem)
|
|
|
|
thisObject.container.parentContainer.frame.width = thisObject.container.parentContainer.frame.width + dragVector.x
|
|
|
|
switch (whatHappened) {
|
|
case 'left mouse button': {
|
|
coordinateSystem.max.x = newMaxDate.valueOf()
|
|
coordinateSystem.maxWidth = thisObject.container.parentContainer.frame.width
|
|
coordinateSystem.recalculateScale()
|
|
break
|
|
}
|
|
case 'left mouse button + SHIFT': {
|
|
coordinateSystem.maxWidth = thisObject.container.parentContainer.frame.width
|
|
coordinateSystem.recalculateScale()
|
|
break
|
|
}
|
|
}
|
|
thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event)
|
|
break
|
|
}
|
|
}
|
|
}
|
|
|
|
function drawForeground () {
|
|
let MARGIN = 1
|
|
let edgeSize
|
|
let lineWidth
|
|
|
|
if (whereIsMouseOver === 'outside' || thisObject.isMouseOver === false) {
|
|
edgeSize = 2
|
|
lineWidth = 0.1
|
|
} else {
|
|
edgeSize = EDGE_SIZE
|
|
lineWidth = 0.5
|
|
}
|
|
|
|
const OPACITY = 1
|
|
|
|
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)
|
|
|
|
pointA1 = {
|
|
x: pointA1.x - MARGIN,
|
|
y: pointA1.y - MARGIN
|
|
}
|
|
|
|
pointA2 = {
|
|
x: pointA2.x + MARGIN,
|
|
y: pointA2.y - MARGIN
|
|
}
|
|
|
|
pointA3 = {
|
|
x: pointA3.x + MARGIN,
|
|
y: pointA3.y + MARGIN
|
|
}
|
|
|
|
pointA4 = {
|
|
x: pointA4.x - MARGIN,
|
|
y: pointA4.y + MARGIN
|
|
}
|
|
|
|
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
|
|
}
|
|
|
|
pointA1 = canvas.chartingSpace.viewport.fitIntoViewport(pointA1)
|
|
pointA2 = canvas.chartingSpace.viewport.fitIntoViewport(pointA2)
|
|
pointA3 = canvas.chartingSpace.viewport.fitIntoViewport(pointA3)
|
|
pointA4 = canvas.chartingSpace.viewport.fitIntoViewport(pointA4)
|
|
|
|
pointB1 = canvas.chartingSpace.viewport.fitIntoViewport(pointB1)
|
|
pointB2 = canvas.chartingSpace.viewport.fitIntoViewport(pointB2)
|
|
pointB3 = canvas.chartingSpace.viewport.fitIntoViewport(pointB3)
|
|
pointB4 = canvas.chartingSpace.viewport.fitIntoViewport(pointB4)
|
|
|
|
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 && thisObject.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()
|
|
}
|
|
}
|
|
}
|
|
|