broodjeaap/go-watch
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added zooming to diagram

Browse source
This commit is contained in:
BroodjeAap 2023-01-20 12:05:48 +00:00
parent a18017124a
commit 882ad42fa5
3 changed files with 13 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
static/diagram.js
View file

@ -618,39 +618,18 @@ var Diagrams = /** @class */ (function () {
if (zoomIn && this.scale <= 0) { if (zoomIn && this.scale <= 0) {
return; return;
} }
var oldWorldPos = new Point(this.mouseState.world.x, this.mouseState.world.y);
var oldCanvasPos = new Point(this.mouseState.canvas.x, this.mouseState.canvas.y);
console.log(oldWorldPos);
this.scale += sign; this.scale += sign;
var zoomOutFactor = 0.9; var zoomOutFactor = 0.9;
var zoomInFactor = 1 / zoomOutFactor; var zoomInFactor = 1 / zoomOutFactor;
var zoomFactor = zoomIn ? zoomInFactor : zoomOutFactor; var zoomFactor = zoomIn ? zoomInFactor : zoomOutFactor;
this.ctx.scale(zoomFactor, zoomFactor); this.ctx.scale(zoomFactor, zoomFactor);
this.scalingFactor *= zoomFactor; this.scalingFactor *= zoomFactor;
this.mouseState.canvas.x *= zoomFactor; var oldCanvasPos = new Point(this.mouseState.canvas.x, this.mouseState.canvas.y);
this.mouseState.canvas.y *= zoomFactor; this.mouseState.canvas.x /= zoomFactor;
//this.mouseState.canvas.x = this.mouseState.absCanvas.x * this.scalingFactor; this.mouseState.canvas.y /= zoomFactor;
//this.mouseState.canvas.y = this.mouseState.absCanvas.y * this.scalingFactor; var mouseDelta = new Point((oldCanvasPos.x - this.mouseState.canvas.x), (oldCanvasPos.y - this.mouseState.canvas.y));
var mouseDelta = new Point(oldCanvasPos.x - this.mouseState.canvas.x, oldCanvasPos.y - this.mouseState.canvas.y); this.mouseState.offset.x -= mouseDelta.x;
this.mouseState.offset.x += mouseDelta.x; this.mouseState.offset.y -= mouseDelta.y;
this.mouseState.offset.y += mouseDelta.y;
console.log(this.mouseState.world);
/*
// scale with new value
let scale = this.scale;
this.ctx.scale(scale, scale);
// recalculate mouse 'world' position, so we can realign it after zooming
this.mouseState.canvas.x = this.mouseState.absCanvas.x / scale;
this.mouseState.canvas.y = this.mouseState.absCanvas.y / scale;
this.mouseState.world.x = (this.mouseState.canvas.x - this.mouseState.offset.x) * scale;
this.mouseState.world.y = (this.mouseState.canvas.y - this.mouseState.offset.y) * scale;
this.mouseState.offset.x -= (oldWorld.x - this.mouseState.world.x);
this.mouseState.offset.y -= (oldWorld.y - this.mouseState.world.y);
console.log(this.mouseState.offset);
*/
}; };
Diagrams.prototype.drawBackground = function () { Diagrams.prototype.drawBackground = function () {
this.ctx.fillStyle = "#D8D8D8"; this.ctx.fillStyle = "#D8D8D8";

41
static/diagram.ts
View file

@ -655,10 +655,6 @@ class Diagrams {
return; return;
} }
let oldWorldPos = new Point(this.mouseState.world.x, this.mouseState.world.y)
let oldCanvasPos = new Point(this.mouseState.canvas.x, this.mouseState.canvas.y)
console.log(oldWorldPos);
this.scale += sign; this.scale += sign;
let zoomOutFactor = 0.9; let zoomOutFactor = 0.9;
let zoomInFactor = 1 / zoomOutFactor let zoomInFactor = 1 / zoomOutFactor
@ -666,39 +662,16 @@ class Diagrams {
this.ctx.scale(zoomFactor, zoomFactor); this.ctx.scale(zoomFactor, zoomFactor);
this.scalingFactor *= zoomFactor; this.scalingFactor *= zoomFactor;
this.mouseState.canvas.x *= zoomFactor; let oldCanvasPos = new Point(this.mouseState.canvas.x,this.mouseState.canvas.y)
this.mouseState.canvas.y *= zoomFactor; this.mouseState.canvas.x /= zoomFactor;
this.mouseState.canvas.y /= zoomFactor;
//this.mouseState.canvas.x = this.mouseState.absCanvas.x * this.scalingFactor;
//this.mouseState.canvas.y = this.mouseState.absCanvas.y * this.scalingFactor;
let mouseDelta = new Point( let mouseDelta = new Point(
oldCanvasPos.x - this.mouseState.canvas.x, (oldCanvasPos.x - this.mouseState.canvas.x),
oldCanvasPos.y - this.mouseState.canvas.y (oldCanvasPos.y - this.mouseState.canvas.y),
) )
this.mouseState.offset.x -= mouseDelta.x;
this.mouseState.offset.x += mouseDelta.x; this.mouseState.offset.y -= mouseDelta.y;
this.mouseState.offset.y += mouseDelta.y;
console.log(this.mouseState.world);
/*
// scale with new value
let scale = this.scale;
this.ctx.scale(scale, scale);
// recalculate mouse 'world' position, so we can realign it after zooming
this.mouseState.canvas.x = this.mouseState.absCanvas.x / scale;
this.mouseState.canvas.y = this.mouseState.absCanvas.y / scale;
this.mouseState.world.x = (this.mouseState.canvas.x - this.mouseState.offset.x) * scale;
this.mouseState.world.y = (this.mouseState.canvas.y - this.mouseState.offset.y) * scale;
this.mouseState.offset.x -= (oldWorld.x - this.mouseState.world.x);
this.mouseState.offset.y -= (oldWorld.y - this.mouseState.world.y);
console.log(this.mouseState.offset);
*/
} }
drawBackground(){ drawBackground(){

5
todo.md
View file

@ -3,9 +3,4 @@
- import options add/clear - import options add/clear
- comments - comments
- safe escape {{ }} for pages - safe escape {{ }} for pages
- diagram zoom
- zoom towards pointer
- mouse stays on pre-zoomed world pos
- refactor zoom with fixed 0.9-1.1 values?
- minimap
- 'jitter' for cronjobs after first start ? - 'jitter' for cronjobs after first start ?