109 lines
4 KiB
JavaScript
109 lines
4 KiB
JavaScript
|
'use strict'
|
||
|
|
|
||
|
|
//import {
|
||
|
|
//config
|
||
|
|
//} from './config.js'
|
||
|
|
|
||
|
|
const Interactor = function() {
|
||
|
|
// private
|
||
|
|
let artboard;
|
||
|
|
let canvas;
|
||
|
|
let content;
|
||
|
|
|
||
|
|
let mouse = {};
|
||
|
|
|
||
|
|
const resetMouse = () => {
|
||
|
|
mouse.isDown = false;
|
||
|
|
mouse.isDragging = false;
|
||
|
|
content.style.cursor = 'grab';
|
||
|
|
}
|
||
|
|
|
||
|
|
const moveArtboard = (x, y, relative = true) => {
|
||
|
|
tp.studio.transaction(({
|
||
|
|
set
|
||
|
|
}) => {
|
||
|
|
if (relative) {
|
||
|
|
set(artboard.theatreObject.props.x, artboard.theatreObject.value.x + x);
|
||
|
|
set(artboard.theatreObject.props.y, artboard.theatreObject.value.y + y);
|
||
|
|
} else {
|
||
|
|
set(artboard.theatreObject.props.x, x);
|
||
|
|
set(artboard.theatreObject.props.y, y);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
const zoomArtboard = (zoom) => {
|
||
|
|
zoom = Math.max(config.artboard.minimumZoom, zoom);
|
||
|
|
zoom = Math.min(config.artboard.maximumZoom, zoom);
|
||
|
|
tp.studio.transaction(({
|
||
|
|
set
|
||
|
|
}) => {
|
||
|
|
set(artboard.theatreObject.props.zoom, zoom);
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
const registerEvents = () => {
|
||
|
|
content.addEventListener('mousedown', (event) => {
|
||
|
|
event.preventDefault();
|
||
|
|
event.cancelBubble = true;
|
||
|
|
mouse.isDown = true;
|
||
|
|
});
|
||
|
|
// the mouse might move out of the content while moving it
|
||
|
|
// also, we don't capture the mouse. you will have to simply
|
||
|
|
// drag multiple times if you want to drag very far
|
||
|
|
document.addEventListener('mousemove', (event) => {
|
||
|
|
if (mouse.isDown) {
|
||
|
|
mouse.isDragging = true;
|
||
|
|
content.style.cursor = 'grabbing';
|
||
|
|
// for some reason we need to multiply the mouve movement by 0.5
|
||
|
|
// no idea why. but this is consistent across browsers, so we might
|
||
|
|
// just leave this here and investigate whenever we have a problem
|
||
|
|
const factor = 0.5;
|
||
|
|
moveArtboard(event.movementX * factor, event.movementY * factor);
|
||
|
|
event.preventDefault();
|
||
|
|
event.cancelBubble = true;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
document.addEventListener('mouseup', (event) => {
|
||
|
|
if (mouse.isDown) {
|
||
|
|
event.preventDefault();
|
||
|
|
event.cancelBubble = true;
|
||
|
|
resetMouse();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
content.addEventListener('wheel', (event) => {
|
||
|
|
const currentZoom = artboard.theatreObject.value.zoom;
|
||
|
|
const zoomFactor = config.interactor.zoomBaseFactor
|
||
|
|
* Math.min(config.interactor.zoomDynamicMax, currentZoom);
|
||
|
|
let zoom = currentZoom + (event.deltaY * zoomFactor);
|
||
|
|
zoom = Math.min(config.artboard.maximumZoom, Math.max(config.artboard.minimumZoom, zoom));
|
||
|
|
zoomArtboard(zoom);
|
||
|
|
const dpiRatio = 1.0; //window.devicePixelRatio ? window.devicePixelRatio : 1.0;
|
||
|
|
const currentX = artboard.theatreObject.value.x * dpiRatio;
|
||
|
|
const currentY = artboard.theatreObject.value.y * dpiRatio;
|
||
|
|
const currentW = artboard.theatreObject.value.width * dpiRatio;
|
||
|
|
const currentH = artboard.theatreObject.value.height * dpiRatio;
|
||
|
|
const relativeX = (((currentX * -1) + (event.clientX * dpiRatio)) / currentZoom) / currentW;
|
||
|
|
const newX = -1 * ((relativeX * currentW * zoom) - event.clientX * dpiRatio);
|
||
|
|
const relativeY = (((currentY * -1) + (event.clientY * dpiRatio)) / currentZoom) / currentH;
|
||
|
|
const newY = -1 * ((relativeY * currentH * zoom) - event.clientY * dpiRatio);
|
||
|
|
const x = newX;
|
||
|
|
const y = newY;
|
||
|
|
moveArtboard(x, y, false);
|
||
|
|
});
|
||
|
|
};
|
||
|
|
// public
|
||
|
|
this.init = () => {
|
||
|
|
artboard = window.getArtboard();
|
||
|
|
canvas = document.querySelector('canvas.emscripten');
|
||
|
|
content = document.querySelector('#content');
|
||
|
|
resetMouse();
|
||
|
|
registerEvents();
|
||
|
|
};
|
||
|
|
};
|
||
|
|
|
||
|
|
export {
|
||
|
|
Interactor
|
||
|
|
};
|
||
|
|
|