import { Tool } from '../tool.js';
import {
ZOOM_IN_FACTOR,
ZOOM_OUT_FACTOR,
} from '../config.js';
export class Zoom extends Tool {
constructor(toolbar) {
super(toolbar);
const zoomOut = document.createElement('button');
const zoomIn = document.createElement('button');
const zoomAll = document.createElement('button');
this.div.appendChild(zoomOut);
this.div.appendChild(zoomIn);
this.div.appendChild(document.createElement('br'));
this.div.appendChild(zoomAll);
this.div.appendChild(document.createElement('br'));
zoomAll.classList.add('wide');
zoomOut.innerHTML = '
Zoom
Out
';
zoomIn.innerHTML = 'Zoom
In
';
zoomAll.innerHTML = 'Zoom to Fit
';
zoomOut.addEventListener('click', () => {
// Aim at center of view
const x = this.sim.display.width * this.sim.display.scale / 2;
const y = this.sim.display.height * this.sim.display.scale / 2;
this.sim.scheduleZoom(this.sim.screenToSim(x, y), ZOOM_OUT_FACTOR);
});
zoomIn.addEventListener('click', () => {
// Aim at center of view
const x = this.sim.display.width * this.sim.display.scale / 2;
const y = this.sim.display.height * this.sim.display.scale / 2;
this.sim.scheduleZoom(this.sim.screenToSim(x, y), ZOOM_IN_FACTOR);
});
zoomAll.addEventListener('click', () => {
// Determine bounding box
const box = this.sim.objects.boundingBox;
const x = (box.start.x + box.end.x) / 2;
const y = (box.start.y + box.end.y) / 2;
if (box.start.x !== box.end.x && box.start.y !== box.end.y) {
const widthRatio = Math.abs(box.start.x - box.end.x) / this.sim.display.width;
const heightRatio = Math.abs(box.start.y - box.end.y) / this.sim.display.height;
const biggerRatio = Math.max(widthRatio, heightRatio);
const base2factor = Math.log(1/biggerRatio) / Math.log(2);
const factor = Math.floor(base2factor) - 1;
console.log({biggerRatio, base2factor, factor});
this.sim.scheduleZoom({x, y}, factor);
}
});
}
}