464 lines
15 KiB
JavaScript
464 lines
15 KiB
JavaScript
|
|
function newViewport() {
|
|
const MODULE_NAME = 'Viewport'
|
|
|
|
const MIN_ZOOM_LEVEL = 0
|
|
const MAX_ZOOM_LEVEL = 500
|
|
|
|
let ANIMATION_INCREMENT = 0.25
|
|
let ANIMATION_STEPS = 5
|
|
let MARGIN_AMOUNT = 40
|
|
|
|
let TOP_MARGIN = TOP_SPACE_HEIGHT
|
|
let BOTTOM_MARGIN = COCKPIT_SPACE_HEIGHT + MARGIN_AMOUNT
|
|
let LEFT_MARGIN = 0
|
|
let RIGHT_MARGIN = 0
|
|
let MARGINS = {
|
|
TOP: TOP_MARGIN,
|
|
BOTTOM: BOTTOM_MARGIN,
|
|
LEFT: LEFT_MARGIN,
|
|
RIGHT: RIGHT_MARGIN
|
|
}
|
|
|
|
let thisObject = {
|
|
visible: false,
|
|
visibleArea: undefined,
|
|
width: undefined,
|
|
height: undefined,
|
|
eventHandler: undefined,
|
|
zoomTargetLevel: undefined,
|
|
zoomLevel: undefined,
|
|
mousePosition: undefined,
|
|
marginAmount: MARGIN_AMOUNT,
|
|
margins: MARGINS,
|
|
payload: undefined,
|
|
zoomAtCenter: zoomAtCenter,
|
|
changeZoom: changeZoom,
|
|
onMouseWheel: onMouseWheel,
|
|
transformThisPoint: transformThisPoint,
|
|
unTransformThisPoint: unTransformThisPoint,
|
|
isThisPointVisible: isThisPointVisible,
|
|
isThisPointInViewport: isThisPointInViewport,
|
|
fitIntoVisibleArea: fitIntoVisibleArea,
|
|
fitIntoViewport: fitIntoViewport,
|
|
displace: displace,
|
|
displaceToContainer: displaceToContainer,
|
|
physics: physics,
|
|
raiseEvents: raiseEvents,
|
|
resize: resize,
|
|
initialize: initialize,
|
|
finalize: finalize
|
|
}
|
|
|
|
let position = {
|
|
x: 0,
|
|
y: 0
|
|
}
|
|
|
|
thisObject.mousePosition = {
|
|
x: 0,
|
|
y: 0
|
|
}
|
|
thisObject.eventHandler = newEventHandler()
|
|
|
|
/* Initial default value */
|
|
thisObject.zoomLevel = MIN_ZOOM_LEVEL
|
|
thisObject.zoomTargetLevel = Math.round(MIN_ZOOM_LEVEL)
|
|
INITIAL_TIME_PERIOD = recalculatePeriod(thisObject.zoomLevel)
|
|
|
|
let overrideMousePositionCounter = 0
|
|
|
|
let wheelDeltaDirection
|
|
let wheelDeltaCounter = 0
|
|
|
|
return thisObject
|
|
|
|
function finalize() {
|
|
thisObject.eventHandler.finalize()
|
|
thisObject.payload = undefined
|
|
thisObject = undefined
|
|
}
|
|
|
|
function initialize() {
|
|
if (thisObject.payload !== undefined) {
|
|
/* Read the position from the frame structure */
|
|
|
|
let frame = {
|
|
position: {
|
|
x: 0,
|
|
y: 0
|
|
}
|
|
}
|
|
UI.projects.foundations.utilities.loadSaveFrame.loadFrame(thisObject.payload, frame)
|
|
if (!isNaN(frame.position.x)) {
|
|
position.x = frame.position.x
|
|
}
|
|
if (!isNaN(frame.position.y)) {
|
|
position.y = frame.position.y
|
|
}
|
|
}
|
|
|
|
resize()
|
|
readObjectState()
|
|
}
|
|
|
|
function resize() {
|
|
TOP_MARGIN = TOP_SPACE_HEIGHT + MARGIN_AMOUNT
|
|
BOTTOM_MARGIN = browserCanvas.height - COCKPIT_SPACE_POSITION + MARGIN_AMOUNT
|
|
LEFT_MARGIN = 0
|
|
RIGHT_MARGIN = 0
|
|
MARGINS = {
|
|
TOP: TOP_MARGIN,
|
|
BOTTOM: BOTTOM_MARGIN,
|
|
LEFT: LEFT_MARGIN,
|
|
RIGHT: RIGHT_MARGIN
|
|
}
|
|
|
|
thisObject.visibleArea = {
|
|
topLeft: { x: LEFT_MARGIN, y: TOP_MARGIN },
|
|
topRight: { x: browserCanvas.width - RIGHT_MARGIN, y: TOP_MARGIN },
|
|
bottomRight: { x: browserCanvas.width - RIGHT_MARGIN, y: browserCanvas.height - BOTTOM_MARGIN },
|
|
bottomLeft: { x: LEFT_MARGIN, y: browserCanvas.height - BOTTOM_MARGIN }
|
|
}
|
|
|
|
thisObject.width = thisObject.visibleArea.topRight.x - thisObject.visibleArea.topLeft.x
|
|
thisObject.height = thisObject.visibleArea.bottomRight.y - thisObject.visibleArea.topLeft.y
|
|
|
|
thisObject.center = {
|
|
x: LEFT_MARGIN + thisObject.width / 2,
|
|
y: TOP_MARGIN + thisObject.height / 2
|
|
}
|
|
}
|
|
|
|
function raiseEvents() {
|
|
if (thisObject.visible === false) { return }
|
|
let event = {
|
|
newPosition: position
|
|
}
|
|
|
|
thisObject.eventHandler.raiseEvent('Position Changed', event)
|
|
}
|
|
|
|
function displaceToContainer(container) {
|
|
let targetPoint = {
|
|
x: -container.frame.position.x - container.frame.width / 2,
|
|
y: -container.frame.position.y - container.frame.height / 2
|
|
}
|
|
position.x = targetPoint.x + browserCanvas.width / 2
|
|
position.y = targetPoint.y + (COCKPIT_SPACE_POSITION - TOP_SPACE_HEIGHT) / 2 + TOP_SPACE_HEIGHT
|
|
}
|
|
|
|
function zoomAtCenter(level) {
|
|
thisObject.zoomTargetLevel = Math.round(level)
|
|
overrideMousePositionCounter = 50
|
|
ANIMATION_INCREMENT = 0.5
|
|
}
|
|
|
|
function mousePositionPhysics() {
|
|
if (overrideMousePositionCounter > 0) {
|
|
thisObject.mousePosition.x = browserCanvas.width / 2
|
|
thisObject.mousePosition.y = (COCKPIT_SPACE_POSITION - TOP_SPACE_HEIGHT) / 2 + TOP_SPACE_HEIGHT
|
|
|
|
overrideMousePositionCounter--
|
|
if (overrideMousePositionCounter < 0) {
|
|
overrideMousePositionCounter = 0
|
|
}
|
|
}
|
|
}
|
|
|
|
function physics() {
|
|
if (thisObject.visible === false) { return }
|
|
mousePositionPhysics()
|
|
animationPhysics()
|
|
positioningPhysics()
|
|
readObjectState()
|
|
}
|
|
|
|
function positioningPhysics() {
|
|
if (thisObject.visible === false) { return }
|
|
if (thisObject.payload === undefined) { return }
|
|
/* Save the position at the frame lavel */
|
|
let frame = {}
|
|
frame.position = position
|
|
UI.projects.foundations.utilities.loadSaveFrame.saveFrame(thisObject.payload, frame)
|
|
}
|
|
|
|
function animationPhysics() {
|
|
if (thisObject.zoomLevel < thisObject.zoomTargetLevel) {
|
|
if (thisObject.zoomTargetLevel - thisObject.zoomLevel < ANIMATION_INCREMENT) {
|
|
ANIMATION_INCREMENT = Math.round(Math.abs(thisObject.zoomTargetLevel - thisObject.zoomLevel) * 100) / 100
|
|
}
|
|
thisObject.zoomLevel = Math.round((thisObject.zoomLevel + ANIMATION_INCREMENT) * 100) / 100
|
|
changeZoom(thisObject.zoomLevel - ANIMATION_INCREMENT, thisObject.zoomLevel)
|
|
}
|
|
|
|
if (thisObject.zoomLevel > thisObject.zoomTargetLevel) {
|
|
if (thisObject.zoomLevel - thisObject.zoomTargetLevel < ANIMATION_INCREMENT) {
|
|
ANIMATION_INCREMENT = Math.round(Math.abs(thisObject.zoomTargetLevel - thisObject.zoomLevel) * 100) / 100
|
|
}
|
|
thisObject.zoomLevel = Math.round((thisObject.zoomLevel - ANIMATION_INCREMENT) * 100) / 100
|
|
changeZoom(thisObject.zoomLevel + ANIMATION_INCREMENT, thisObject.zoomLevel)
|
|
}
|
|
}
|
|
|
|
function onMouseWheel(event) {
|
|
if (thisObject.visible === false) { return }
|
|
if ((event.ctrlKey === true || event.metaKey === true)) { return }
|
|
let morePower = 1
|
|
|
|
if (IS_MAC && Math.abs(event.wheelDelta) < MAC_MOUSE_WHEEL_INFINITE_SCROLL_THRESHOLD) {
|
|
let sensitivity
|
|
if (event.delta < 0) {
|
|
if (event.shiftKey === true) {
|
|
sensitivity = MAC_SCROLL_SENSITIVITY
|
|
} else {
|
|
sensitivity = MAC_ZOOM_SENSITIVITY
|
|
}
|
|
if (wheelDeltaDirection === -1) {
|
|
wheelDeltaCounter++
|
|
if (wheelDeltaCounter < sensitivity) {
|
|
return
|
|
} else {
|
|
wheelDeltaCounter = 0
|
|
}
|
|
} else {
|
|
wheelDeltaCounter = 0
|
|
wheelDeltaDirection = -1
|
|
return
|
|
}
|
|
} else {
|
|
if (event.shiftKey === true) {
|
|
sensitivity = MAC_SCROLL_SENSITIVITY
|
|
} else {
|
|
sensitivity = MAC_ZOOM_SENSITIVITY
|
|
}
|
|
if (wheelDeltaDirection === 1) {
|
|
wheelDeltaCounter++
|
|
if (wheelDeltaCounter < sensitivity) {
|
|
return
|
|
} else {
|
|
wheelDeltaCounter = 0
|
|
}
|
|
} else {
|
|
wheelDeltaCounter = 0
|
|
wheelDeltaDirection = 1
|
|
return
|
|
}
|
|
}
|
|
}
|
|
|
|
let amount = event.delta
|
|
|
|
if (event.buttons === 4) { morePower = 2 } // Mouse wheel pressed.
|
|
/* We adjust the sensitivity for Mac Users */
|
|
|
|
if (thisObject.zoomTargetLevel > 10) {
|
|
amount = amount * 2
|
|
}
|
|
if (thisObject.zoomTargetLevel > 25) {
|
|
amount = amount * 3
|
|
}
|
|
if (thisObject.zoomTargetLevel > 50) {
|
|
amount = amount * 3.5
|
|
}
|
|
|
|
if (thisObject.zoomTargetLevel + amount * morePower > MAX_ZOOM_LEVEL) {
|
|
return false
|
|
}
|
|
if (thisObject.zoomTargetLevel + amount * morePower < MIN_ZOOM_LEVEL) {
|
|
return false
|
|
}
|
|
thisObject.zoomTargetLevel = Math.round(thisObject.zoomTargetLevel + amount * morePower)
|
|
|
|
ANIMATION_INCREMENT = Math.round(Math.abs(thisObject.zoomTargetLevel - thisObject.zoomLevel) / ANIMATION_STEPS * 100) / 100
|
|
|
|
let newEvent = {
|
|
newLevel: thisObject.zoomTargetLevel,
|
|
newPosition: position,
|
|
type: undefined,
|
|
shiftKey: event.shiftKey
|
|
}
|
|
|
|
if (amount > 0) {
|
|
newEvent.type = 'Zoom In'
|
|
} else {
|
|
newEvent.type = 'Zoom Out'
|
|
}
|
|
|
|
thisObject.eventHandler.raiseEvent('Zoom Changed', newEvent)
|
|
return true
|
|
}
|
|
|
|
function fitIntoVisibleArea(point) {
|
|
let pointCopy = {
|
|
x: point.x,
|
|
y: point.y
|
|
}
|
|
|
|
/* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */
|
|
if (pointCopy.x > thisObject.visibleArea.bottomRight.x + 1) {
|
|
pointCopy.x = thisObject.visibleArea.bottomRight.x + 1
|
|
}
|
|
|
|
if (pointCopy.x < thisObject.visibleArea.topLeft.x - 1) {
|
|
pointCopy.x = thisObject.visibleArea.topLeft.x - 1
|
|
}
|
|
|
|
if (pointCopy.y > thisObject.visibleArea.bottomRight.y + 1) {
|
|
pointCopy.y = thisObject.visibleArea.bottomRight.y + 1
|
|
}
|
|
|
|
if (pointCopy.y < thisObject.visibleArea.topLeft.y - 1) {
|
|
pointCopy.y = thisObject.visibleArea.topLeft.y - 1
|
|
}
|
|
|
|
return pointCopy
|
|
}
|
|
|
|
function fitIntoViewport(point) {
|
|
let pointCopy = {
|
|
x: point.x,
|
|
y: point.y
|
|
}
|
|
if (pointCopy.y > COCKPIT_SPACE_POSITION) {
|
|
pointCopy.y = COCKPIT_SPACE_POSITION
|
|
}
|
|
return pointCopy
|
|
}
|
|
|
|
function displace(displaceVector, recalculate) {
|
|
if (thisObject.visible === false) { return }
|
|
position.x = position.x + displaceVector.x
|
|
position.y = position.y + displaceVector.y
|
|
|
|
saveObjectState()
|
|
|
|
let event = {
|
|
newPosition: position,
|
|
recalculate: recalculate
|
|
}
|
|
|
|
thisObject.eventHandler.raiseEvent('Position Changed', event)
|
|
}
|
|
|
|
function changeZoom(oldLevel, newLevel) {
|
|
if (thisObject.visible === false) { return }
|
|
let oldMouse = unTransformThisPoint(thisObject.mousePosition, oldLevel)
|
|
let newMouse = transformThisPoint(oldMouse, newLevel)
|
|
|
|
position.x = position.x - newMouse.x + thisObject.mousePosition.x
|
|
position.y = position.y - newMouse.y + thisObject.mousePosition.y
|
|
|
|
saveObjectState()
|
|
|
|
thisObject.eventHandler.raiseEvent('Zoom Changed')
|
|
}
|
|
|
|
function transformThisPoint(point, level) {
|
|
if (thisObject.visible === false) { return }
|
|
let transformedPoint = {
|
|
x: 0,
|
|
y: 0
|
|
}
|
|
|
|
if (level === undefined) {
|
|
transformedPoint.x = point.x * (1 + thisObject.zoomLevel) + position.x
|
|
transformedPoint.y = point.y * (1 + thisObject.zoomLevel) + position.y
|
|
} else {
|
|
transformedPoint.x = point.x * (1 + level) + position.x
|
|
transformedPoint.y = point.y * (1 + level) + position.y
|
|
}
|
|
|
|
return transformedPoint
|
|
}
|
|
|
|
function unTransformThisPoint(point, level) {
|
|
let pointWithoutZoom = {
|
|
x: 0,
|
|
y: 0
|
|
}
|
|
if (level === undefined) {
|
|
pointWithoutZoom.x = (point.x - position.x) / (1 + thisObject.zoomLevel)
|
|
pointWithoutZoom.y = (point.y - position.y) / (1 + thisObject.zoomLevel)
|
|
} else {
|
|
pointWithoutZoom.x = (point.x - position.x) / (1 + level)
|
|
pointWithoutZoom.y = (point.y - position.y) / (1 + level)
|
|
}
|
|
|
|
return pointWithoutZoom
|
|
}
|
|
|
|
function isThisPointVisible(point) {
|
|
if (thisObject.visible === false) { return }
|
|
if (point.x < thisObject.visibleArea.topLeft.x || point.x > thisObject.visibleArea.bottomRight.x || point.y < thisObject.visibleArea.topLeft.y || point.y > thisObject.visibleArea.bottomRight.y) {
|
|
return false
|
|
} else {
|
|
return true
|
|
}
|
|
}
|
|
|
|
function isThisPointInViewport(point) {
|
|
if (thisObject.visible === false) { return }
|
|
if (point.y > COCKPIT_SPACE_POSITION) {
|
|
return false
|
|
} else {
|
|
return true
|
|
}
|
|
}
|
|
|
|
function saveObjectState() {
|
|
if (thisObject.payload === undefined) { return }
|
|
|
|
/* Save the zoom at the node config, so that the user can change it if he wishes to. */
|
|
try {
|
|
let config = JSON.parse(thisObject.payload.node.config)
|
|
config.zoom = (thisObject.zoomTargetLevel - MIN_ZOOM_LEVEL) / (MAX_ZOOM_LEVEL - MIN_ZOOM_LEVEL) * 100
|
|
config.zoom = config.zoom.toFixed(2)
|
|
thisObject.payload.node.config = JSON.stringify(config)
|
|
} catch (err) {
|
|
// we ignore errors here since most likely they will be parsing errors.
|
|
}
|
|
}
|
|
|
|
function readObjectState() {
|
|
if (thisObject.payload === undefined) { return }
|
|
|
|
/* Read the zoom level from the node config */
|
|
try {
|
|
let config = JSON.parse(thisObject.payload.node.config)
|
|
|
|
if (isNaN(config.zoom) || config.zoom === null || config.zoom === undefined) {
|
|
saveObjectState()
|
|
return
|
|
}
|
|
config.zoom = config.zoom / 100 * (MAX_ZOOM_LEVEL - MIN_ZOOM_LEVEL) + MIN_ZOOM_LEVEL
|
|
if (config.zoom < MIN_ZOOM_LEVEL) { config.zoom = MIN_ZOOM_LEVEL }
|
|
if (config.zoom > MAX_ZOOM_LEVEL) { config.zoom = MAX_ZOOM_LEVEL }
|
|
|
|
if (config.zoom.toFixed(2) !== thisObject.zoomTargetLevel.toFixed(2)) {
|
|
newZoomLevel(config.zoom)
|
|
} else {
|
|
saveObjectState()
|
|
}
|
|
} catch (err) {
|
|
// we ignore errors here since most likely they will be parsing errors.
|
|
}
|
|
|
|
function newZoomLevel(level) {
|
|
thisObject.zoomLevel = Math.round(level)
|
|
thisObject.zoomTargetLevel = Math.round(level)
|
|
INITIAL_TIME_PERIOD = recalculatePeriod(level)
|
|
saveObjectState()
|
|
ANIMATION_INCREMENT = 0
|
|
|
|
let event = {
|
|
newLevel: thisObject.zoomTargetLevel,
|
|
newPosition: position,
|
|
type: undefined
|
|
}
|
|
thisObject.eventHandler.raiseEvent('Zoom Changed', event)
|
|
return true
|
|
}
|
|
}
|
|
}
|