ThreeUI.prototype.draw = function() {
if (!this.shouldReDraw) return;
// Reset canvas
if (this.clearRect) {
this.context.clearRect(this.clearRect.x, this.clearRect.y, this.clearRect.width, this.clearRect.height);
} else {
? ? ? ? this.context.clearRect(0, 0, this.width, this.height);
? ? ? ? this.contextMov.clearRect(0, 0, this.width, this.height);
}
var self = this;
var length = this.displayObjects.length;
for (var i = 0;i < length;i++) {
? ? ? ? if (!this.displayObjects[i].isMov)
? ? ? ? ? ? this.displayObjects[i].render(self.context);
? ? ? ? else
? ? ? ? ? ? this.displayObjects[i].render(self.contextMov);
}
? ? // Make sure the texture gets re-drawn
if (this.renderOnQuad) {
? ? ? ? this.texture.needsUpdate = true;
? ? ? ? this.textureMov.needsUpdate = true;
}
this.shouldReDraw = false;
};
clickHandler{
coords = this.windowToUISpace(coords.x, coords.y);
? ? if (this.planeMov){
? ? ? ? var coordsMov = {x:coords.x,
? ? ? ? ? ? y: coords.y + this.planeMov.position.y/DPR + (this.planeMov.geometry.parameters.height/DPR - this.height)/2 };
? ? }
var callbackQueue = [], callbackQueueMov = [];
this.eventListeners.click.forEach(function(listener) {
var displayObject = listener.displayObject;
if (!displayObject.shouldReceiveEvents()) return;
var bounds = displayObject.getBounds();
if (!displayObject.isMov && ThreeUI.isInBoundingBox(coords.x, coords.y, bounds.x, bounds.y, bounds.width, bounds.height)) {
// Put listeners in a queue first, so state changes do not impact checking other click handlers
callbackQueue.push(listener);
? ? ? ? }
? ? ? ? else if (displayObject.isMov && ThreeUI.isInBoundingBox(coordsMov.x, coordsMov.y, bounds.x, bounds.y, bounds.width, bounds.height)) {
// Put listeners in a queue first, so state changes do not impact checking other click handlers
callbackQueueMov.push(listener);
}
});
callbackQueue.forEach(function(listener){
listener.callback.bind(listener.displayObject)();
? ? });
? ? if (callbackQueue.length === 0)
? ? ? ? callbackQueueMov.forEach(function(listener){
? ? ? ? ? ? listener.callback.bind(listener.displayObject)();
? ? ? ? });
}
var scope;
var DPR = window.devicePixelRatio
ThreeUI.prototype.addPlaneMov = function() {
? ? scope = this;
? ? this.startY = 0;
? ? this.enableMov();
? ? this.setPlaneMovHeight(this.height)
}
ThreeUI.prototype.setPlaneMovHeight = function(newHeight) {
? ? this.scene.remove(this.planeMov)
var canvasMov = document.createElement('canvas');
canvasMov.width = this.width * DPR
? ? canvasMov.height = newHeight * DPR
this.contextMov = canvasMov.getContext('2d');
? ? this.contextMov.scale(DPR, DPR)
this.textureMov = new THREE.Texture(canvasMov);
var material = new THREE.MeshBasicMaterial({ map: this.textureMov });
? ? material.transparent = true;
? ? material.map.minFilter = THREE.LinearFilter;
var planeGeo = new THREE.PlaneGeometry(canvasMov.width, canvasMov.height);
? ? this.planeMov = new THREE.Mesh(planeGeo, material);
? ? this.planeMov.matrixAutoUpdate = false;
? ? this.planeMov.translateY(-0.5*(newHeight - this.height)*DPR)
? ? this.planeMov.translateZ(-1)
? ? this.planeMov.updateMatrix()
? ? this.scene.add(this.planeMov);
}
ThreeUI.prototype.enableMov = function() {
? ? window.addEventListener('mousedown', onDown);
}
ThreeUI.prototype.disableMov = function() {
? ? window.removeEventListener('mousedown', onDown);
? ? window.removeEventListener('mousemove',onMove);
? ? window.removeEventListener('mouseup',onUp);? ? ? ?
}
function onDown(e) {
? ? scope.startY = e.clientY
? ? startPosY = scope.planeMov.position.y
? ? window.addEventListener('mousemove',onMove);
? ? window.addEventListener('mouseup',onUp);
}
function onMove(e) {
? ? moveY = scope.startY - e.clientY;
? ? moveY *= DPR
? ? scope.planeMov.position.y = startPosY + moveY;? ? scope.planeMov.updateMatrix()
? ? // console.log(scope.planeMov.position)
}
function onUp(e) {
? ? moveY = scope.startY - e.clientY;
? ? var maxY = (scope.planeMov.geometry.parameters.height - scope.height*DPR)/2
? ? var minY = -maxY
? ? if (scope.planeMov.position.y < minY) {
? ? ? ? scope.planeMov.position.y = minY;? scope.planeMov.updateMatrix()
? ? } else if (scope.planeMov.position.y > maxY) {
? ? ? ? scope.planeMov.position.y = maxY;? scope.planeMov.updateMatrix()
? ? }
? ? window.removeEventListener('mousemove',onMove);
? ? window.removeEventListener('mouseup',onUp);? ?
};
DisplayObject.prototype.setMovParent = function(parent) {
? ? this.parent = parent;
? ? this.isMov = true;
? ? var bounds = this.getBounds();
? ? if (bounds.y + bounds.height > this.ui.planeMov.geometry.parameters.height/window.devicePixelRatio){
? ? ? ? this.ui.setPlaneMovHeight(bounds.y + bounds.height)
? ? }
}
