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

added zooming to edit diagrams

Browse source
This commit is contained in:
BroodjeAap 2023-01-16 20:14:08 +00:00
parent 64003e7f51
commit 389b20b186
4 changed files with 105 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -498,7 +498,7 @@ Or if you have [Air](https://github.com/cosmtrek/air) set up, just:
## type script compilation
`tsc static/*.ts --lib es2020,dom --watch --downlevelIteration`
`tsc static/*.ts --lib es2020,dom --target ES5 --watch --downlevelIteration`
# Dependencies

69
static/diagram.js
View file

@ -142,7 +142,7 @@ var NodeConnection = /** @class */ (function (_super) {
cp1x: 0,
cp1y: 0,
cp2x: 0,
cp2y: 0
cp2y: 0,
};
_this.halfWayPoint = new Point();
_this.output = output;
@ -200,7 +200,7 @@ var NewConnection = /** @class */ (function (_super) {
cp1x: 0,
cp1y: 0,
cp2x: 0,
cp2y: 0
cp2y: 0,
};
_this.output = output;
return _this;
@ -219,7 +219,7 @@ var NewConnection = /** @class */ (function (_super) {
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b["return"])) _a.call(_b);
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_1) throw e_1.error; }
}
@ -413,6 +413,9 @@ function diagramOnMouseUp(ev) {
function diagramOnMouseMove(ev) {
_diagram.onmousemove(ev);
}
function diagramOnWheel(ev) {
_diagram.onwheel(ev);
}
function diagramOnContext(ev) {
ev.preventDefault();
}
@ -454,7 +457,9 @@ var Diagrams = /** @class */ (function () {
this.nodeDragging = null;
this.nodeHover = null;
this.newConnection = null;
this.scale = 1.0;
this.scaleLevel = 0;
this.scaleMax = 3;
this.scaleMin = -1;
this.editNodeCallback = function () { };
this.deleteNodeCallback = function () { };
this.canvas = document.getElementById(canvasId);
@ -472,9 +477,15 @@ var Diagrams = /** @class */ (function () {
this.canvas.onmousemove = diagramOnMouseMove;
this.canvas.onmousedown = diagramOnMouseDown;
this.canvas.onmouseup = diagramOnMouseUp;
this.canvas.onwheel = diagramOnWheel;
window.onresize = diagramOnResize;
tick();
}
Object.defineProperty(Diagrams.prototype, "scale", {
get: function () { return 1 - (1 / this.scaleMax) * this.scaleLevel; },
enumerable: true,
configurable: true
});
Diagrams.prototype.tick = function () {
var e_2, _a, e_3, _b, e_4, _c, e_5, _d;
this.drawBackground();
@ -490,7 +501,7 @@ var Diagrams = /** @class */ (function () {
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (_f && !_f.done && (_a = _e["return"])) _a.call(_e);
if (_f && !_f.done && (_a = _e.return)) _a.call(_e);
}
finally { if (e_2) throw e_2.error; }
}
@ -503,7 +514,7 @@ var Diagrams = /** @class */ (function () {
catch (e_3_1) { e_3 = { error: e_3_1 }; }
finally {
try {
if (_h && !_h.done && (_b = _g["return"])) _b.call(_g);
if (_h && !_h.done && (_b = _g.return)) _b.call(_g);
}
finally { if (e_3) throw e_3.error; }
}
@ -519,7 +530,7 @@ var Diagrams = /** @class */ (function () {
catch (e_4_1) { e_4 = { error: e_4_1 }; }
finally {
try {
if (_k && !_k.done && (_c = _j["return"])) _c.call(_j);
if (_k && !_k.done && (_c = _j.return)) _c.call(_j);
}
finally { if (e_4) throw e_4.error; }
}
@ -535,7 +546,7 @@ var Diagrams = /** @class */ (function () {
catch (e_5_1) { e_5 = { error: e_5_1 }; }
finally {
try {
if (_m && !_m.done && (_d = _l["return"])) _d.call(_l);
if (_m && !_m.done && (_d = _l.return)) _d.call(_l);
}
finally { if (e_5) throw e_5.error; }
}
@ -545,10 +556,11 @@ var Diagrams = /** @class */ (function () {
};
Diagrams.prototype.onmousemove = function (ev) {
var canvasRect = this.canvas.getBoundingClientRect();
this.mouseState.canvas.x = ev.x - canvasRect.left;
this.mouseState.canvas.y = ev.y - canvasRect.top;
this.mouseState.delta.x = ev.movementX;
this.mouseState.delta.y = ev.movementY;
var scale = 1 / this.scale;
this.mouseState.canvas.x = (ev.x - canvasRect.left) * scale;
this.mouseState.canvas.y = (ev.y - canvasRect.top) * scale;
this.mouseState.delta.x = ev.movementX * scale;
this.mouseState.delta.y = ev.movementY * scale;
if (this.mouseState.panning) {
this.mouseState.offset.x += this.mouseState.delta.x;
this.mouseState.offset.y += this.mouseState.delta.y;
@ -573,7 +585,7 @@ var Diagrams = /** @class */ (function () {
catch (e_6_1) { e_6 = { error: e_6_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b["return"])) _a.call(_b);
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_6) throw e_6.error; }
}
@ -591,12 +603,33 @@ var Diagrams = /** @class */ (function () {
}
this.newConnection = null;
};
Diagrams.prototype.onwheel = function (ev) {
ev.preventDefault();
var sign = Math.sign(ev.deltaY);
var zoomOut = sign > 0;
if (zoomOut && this.scaleLevel >= this.scaleMax - 1) {
return;
}
var zoomIn = !zoomOut;
if (zoomIn && this.scaleLevel <= this.scaleMin) {
return;
}
// undo previous scaling
var currentScale = this.scale;
var unscale = 1 / currentScale;
this.ctx.scale(unscale, unscale);
this.scaleLevel += sign;
// scale with new value
var scale = this.scale;
this.ctx.scale(scale, scale);
};
Diagrams.prototype.drawBackground = function () {
this.ctx.fillStyle = "#D8D8D8";
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
var scale = 1 / this.scale;
this.ctx.fillRect(0, 0, this.canvas.width * scale, this.canvas.height * scale);
this.ctx.strokeStyle = "#888";
this.ctx.lineWidth = 5;
this.ctx.strokeRect(0, 0, this.canvas.width, this.canvas.height);
this.ctx.lineWidth = 5 * scale;
this.ctx.strokeRect(0, 0, this.canvas.width * scale, this.canvas.height * scale);
};
Diagrams.prototype.drawWarning = function () {
var e_7, _a;
@ -613,7 +646,7 @@ var Diagrams = /** @class */ (function () {
catch (e_7_1) { e_7 = { error: e_7_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b["return"])) _a.call(_b);
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_7) throw e_7.error; }
}
@ -668,7 +701,7 @@ var Diagrams = /** @class */ (function () {
catch (e_8_1) { e_8 = { error: e_8_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b["return"])) _a.call(_b);
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_8) throw e_8.error; }
}

52
static/diagram.ts
View file

@ -488,6 +488,9 @@ function diagramOnMouseUp(ev: MouseEvent){
function diagramOnMouseMove(ev: MouseEvent){
_diagram.onmousemove(ev)
}
function diagramOnWheel(ev: WheelEvent){
_diagram.onwheel(ev);
}
function diagramOnContext(ev: MouseEvent){
ev.preventDefault();
}
@ -532,7 +535,10 @@ class Diagrams {
newConnection: NewConnection | null = null;
scale: number = 1.0;
scaleLevel: number = 0;
scaleMax: number = 3;
scaleMin: number = -1;
get scale(): number {return 1 - (1 / this.scaleMax) * this.scaleLevel;}
editNodeCallback: (node: DiagramNode) => void = function (){};
deleteNodeCallback: (node: DiagramNode) => void = function (){};
@ -558,11 +564,11 @@ class Diagrams {
this.canvas.onmousemove = diagramOnMouseMove;
this.canvas.onmousedown = diagramOnMouseDown;
this.canvas.onmouseup = diagramOnMouseUp;
this.canvas.onwheel = diagramOnWheel;
window.onresize = diagramOnResize;
tick();
}
tick(){
this.drawBackground();
if (this.mouseState.leftUp && !this.mouseState.panning && !this.mouseState.draggingNode && !this.mouseState.draggingConnection){
@ -593,10 +599,11 @@ class Diagrams {
onmousemove(ev: MouseEvent){
let canvasRect = this.canvas.getBoundingClientRect();
this.mouseState.canvas.x = ev.x - canvasRect.left;
this.mouseState.canvas.y = ev.y - canvasRect.top;
this.mouseState.delta.x = ev.movementX;
this.mouseState.delta.y = ev.movementY;
let scale = 1 / this.scale;
this.mouseState.canvas.x = (ev.x - canvasRect.left) * scale;
this.mouseState.canvas.y = (ev.y - canvasRect.top) * scale;
this.mouseState.delta.x = ev.movementX * scale;
this.mouseState.delta.y = ev.movementY * scale;
if (this.mouseState.panning){
this.mouseState.offset.x += this.mouseState.delta.x;
@ -633,12 +640,37 @@ class Diagrams {
this.newConnection = null;
}
onwheel(ev: WheelEvent) {
ev.preventDefault();
let sign = Math.sign(ev.deltaY);
let zoomOut = sign > 0;
if (zoomOut && this.scaleLevel >= this.scaleMax-1) {
return;
}
let zoomIn = !zoomOut
if (zoomIn && this.scaleLevel <= this.scaleMin) {
return;
}
// undo previous scaling
let currentScale = this.scale;
let unscale = 1 / currentScale;
this.ctx.scale(unscale, unscale);
this.scaleLevel += sign;
// scale with new value
let scale = this.scale;
this.ctx.scale(scale, scale);
}
drawBackground(){
this.ctx.fillStyle = "#D8D8D8";
this.ctx.fillRect(0,0,this.canvas.width, this.canvas.height);
let scale = 1 / this.scale;
this.ctx.fillRect(0,0,this.canvas.width * scale, this.canvas.height * scale);
this.ctx.strokeStyle = "#888";
this.ctx.lineWidth = 5;
this.ctx.strokeRect(0, 0, this.canvas.width, this.canvas.height);
this.ctx.lineWidth = 5 * scale;
this.ctx.strokeRect(0, 0, this.canvas.width * scale, this.canvas.height * scale);
}
drawWarning(){

22
static/edit.js
View file

@ -552,7 +552,7 @@ function onTypeChange(node) {
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (notifiers_1_1 && !notifiers_1_1.done && (_a = notifiers_1["return"])) _a.call(notifiers_1);
if (notifiers_1_1 && !notifiers_1_1.done && (_a = notifiers_1.return)) _a.call(notifiers_1);
}
finally { if (e_1) throw e_1.error; }
}
@ -677,7 +677,7 @@ function onTypeChange(node) {
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (luaSnippets_1_1 && !luaSnippets_1_1.done && (_b = luaSnippets_1["return"])) _b.call(luaSnippets_1);
if (luaSnippets_1_1 && !luaSnippets_1_1.done && (_b = luaSnippets_1.return)) _b.call(luaSnippets_1);
}
finally { if (e_2) throw e_2.error; }
}
@ -804,7 +804,7 @@ function onConditionChange(node) {
catch (e_3_1) { e_3 = { error: e_3_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b["return"])) _a.call(_b);
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_3) throw e_3.error; }
}
@ -829,7 +829,7 @@ function onSubmitNewFilter() {
type: type,
var1: var1Input.value,
var2: var2Input.value,
var3: var3Input.value
var3: var3Input.value,
});
}
function editNode(node) {
@ -882,7 +882,7 @@ function editNode(node) {
catch (e_4_1) { e_4 = { error: e_4_1 }; }
finally {
try {
if (_d && !_d.done && (_a = _c["return"])) _a.call(_c);
if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
}
finally { if (e_4) throw e_4.error; }
}
@ -913,14 +913,14 @@ function editNode(node) {
catch (e_5_1) { e_5 = { error: e_5_1 }; }
finally {
try {
if (_f && !_f.done && (_b = _e["return"])) _b.call(_e);
if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
}
finally { if (e_5) throw e_5.error; }
}
submitButton.onclick = function () { submitEditNode(node); };
}
function deleteNode(node) {
_diagram.nodes["delete"](node.id);
_diagram.nodes.delete(node.id);
for (var i = 0; i < _diagram.connections.length; i++) {
var connection = _diagram.connections[i];
var output = connection.output;
@ -973,14 +973,14 @@ function saveWatch() {
// @ts-ignore
var2: filter.meta.var2,
// @ts-ignore
var3: filter.meta.var3
var3: filter.meta.var3,
});
}
}
catch (e_6_1) { e_6 = { error: e_6_1 }; }
finally {
try {
if (_d && !_d.done && (_a = _c["return"])) _a.call(_c);
if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
}
finally { if (e_6) throw e_6.error; }
}
@ -995,14 +995,14 @@ function saveWatch() {
connections.push({
connection_watch_id: watchId,
filter_output_id: output.id,
filter_input_id: input.id
filter_input_id: input.id,
});
}
}
catch (e_7_1) { e_7 = { error: e_7_1 }; }
finally {
try {
if (_f && !_f.done && (_b = _e["return"])) _b.call(_e);
if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
}
finally { if (e_7) throw e_7.error; }
}