Skip to content

Commit 5da9f05

Browse files
zhzLuke96zhzLuke96
committed
feat: improve this-binding / fix typings #3
- improve this binding - fix widget typing
1 parent cff287a commit 5da9f05

15 files changed

+248
-256
lines changed

‎apps/editor/src/Editor.ts

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -242,15 +242,14 @@ export default class Editor {
242242
return;
243243
}
244244

245-
var that = this;
246245
for (let i = 0; i < e.dataTransfer.files.length; ++i) {
247246
let file = e.dataTransfer.files[i];
248247
let ext = LGraphCanvas.getFileExtension(file.name);
249248
let reader = new FileReader();
250249
if (ext == "json") {
251-
reader.onload = function (_event: Event) {
250+
reader.onload = (_event: Event) => {
252251
var data = JSON.parse(reader.result as string);
253-
that.graph.configure(data);
252+
this.graph.configure(data);
254253
};
255254
reader.readAsText(file);
256255
}

‎packages/core/src/ContextMenu.ts

Lines changed: 30 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,6 @@ export default class ContextMenu {
131131
window?: Window,
132132
) {
133133
this.options = options;
134-
var that = this;
135134

136135
//to link a menu with its parent
137136
if (options.parentMenu) {
@@ -207,10 +206,10 @@ export default class ContextMenu {
207206
LiteGraph.pointerListenerAdd(
208207
root,
209208
"down",
210-
function (e: MouseEvent) {
209+
(e: MouseEvent) => {
211210
//console.log("pointerevents: ContextMenu down");
212211
if (e.button == 2) {
213-
that.close();
212+
this.close();
214213
e.preventDefault();
215214
return true;
216215
}
@@ -271,7 +270,7 @@ export default class ContextMenu {
271270
//that.close(e);
272271
});*/
273272

274-
LiteGraph.pointerListenerAdd(root, "enter", function (e) {
273+
LiteGraph.pointerListenerAdd(root, "enter", (e) => {
275274
//console.log("pointerevents: ContextMenu enter");
276275
if (root.closing_timer) {
277276
clearTimeout(root.closing_timer);
@@ -347,8 +346,6 @@ export default class ContextMenu {
347346
value: ContextMenuItem,
348347
options: IContextMenuOptions = {},
349348
): HTMLDivElement {
350-
var that = this;
351-
352349
var element = document.createElement("div") as HTMLDivElement;
353350
element.className = "litemenu-entry submenu";
354351

@@ -385,29 +382,11 @@ export default class ContextMenu {
385382
}
386383

387384
this.values.push(value);
388-
389385
this.root.appendChild(element);
390-
if (!disabled) {
391-
element.addEventListener("click", inner_onclick);
392-
}
393-
if (options.autoopen) {
394-
LiteGraph.pointerListenerAdd(element, "enter", inner_over);
395-
}
396-
397-
let ctxMenu = this;
398-
399-
function inner_over(e: MouseEvent) {
400-
var value = this.value;
401-
if (!value || !value.has_submenu) {
402-
return;
403-
}
404-
//if it is a submenu, autoopen like the item was clicked
405-
inner_onclick.call(this, e);
406-
}
407386

408387
//menu option clicked
409-
function inner_onclick(_e: MouseEvent) {
410-
let index = parseInt(this.dataset["value"]);
388+
const inner_onclick = (_e: MouseEvent) => {
389+
let index = parseInt(element.dataset["value"]);
411390
var value = ctxMenu.values[index];
412391
if (LiteGraph.debug)
413392
console.debug("ContextMenu inner_onclick", index, value);
@@ -418,8 +397,8 @@ export default class ContextMenu {
418397

419398
var close_parent = true;
420399

421-
if (that.current_submenu) {
422-
that.current_submenu.close(e);
400+
if (this.current_submenu) {
401+
this.current_submenu.close(e);
423402
}
424403

425404
//global callback
@@ -429,7 +408,7 @@ export default class ContextMenu {
429408
value,
430409
options,
431410
e,
432-
that,
411+
this,
433412
options.node,
434413
);
435414
if (r === true) {
@@ -450,7 +429,7 @@ export default class ContextMenu {
450429
value,
451430
options,
452431
e,
453-
that,
432+
this,
454433
options.extra,
455434
);
456435
if (r === true) {
@@ -464,7 +443,7 @@ export default class ContextMenu {
464443
var submenu = new ContextMenu(value.submenu.options, {
465444
callback: value.submenu.callback,
466445
event: e,
467-
parentMenu: that,
446+
parentMenu: this,
468447
ignore_item_callbacks:
469448
value.submenu.ignore_item_callbacks,
470449
title: value.submenu.title,
@@ -475,9 +454,27 @@ export default class ContextMenu {
475454
}
476455
}
477456

478-
if (close_parent && !that.lock) {
479-
that.close();
457+
if (close_parent && !this.lock) {
458+
this.close();
459+
}
460+
};
461+
462+
if (!disabled) {
463+
element.addEventListener("click", inner_onclick);
464+
}
465+
if (options.autoopen) {
466+
LiteGraph.pointerListenerAdd(element, "enter", inner_over);
467+
}
468+
469+
let ctxMenu = this;
470+
471+
function inner_over(e: MouseEvent) {
472+
var value = this.value;
473+
if (!value || !value.has_submenu) {
474+
return;
480475
}
476+
//if it is a submenu, autoopen like the item was clicked
477+
inner_onclick(e);
481478
}
482479

483480
return element;

‎packages/core/src/IWidget.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ export interface ITextWidgetOptions extends WidgetPanelOptions {
109109
inputStyle?: Partial<CSSStyleDeclaration>;
110110
max_length?: number;
111111
}
112-
export interface ITextWidget extends IWidget<WidgetPanelOptions, string> {
112+
export interface ITextWidget extends IWidget<ITextWidgetOptions, string> {
113113
type: "text";
114114
}
115115
export interface IEnumWidgetOptions extends WidgetPanelOptions {

‎packages/core/src/LGraph.ts

Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,7 @@ export default class LGraph {
104104
executeStep: () => void;
105105
afterExecute: () => void;
106106
beforeStep: () => void;
107+
afterStep: () => void;
107108
nodeAdded: (node: LGraphNode, options: LGraphAddNodeOptions) => void;
108109
nodeRemoved: (
109110
node: LGraphNode,
@@ -331,19 +332,18 @@ export default class LGraph {
331332
this.starttime = LiteGraph.getTime();
332333
this.last_update_time = this.starttime;
333334
interval = interval || 0;
334-
var that = this;
335335

336336
//execute once per frame
337337
if (
338338
interval == 0 &&
339339
typeof window != "undefined" &&
340340
window.requestAnimationFrame
341341
) {
342-
function on_frame() {
342+
const on_frame = () => {
343343
if (this.execution_timer_id != -1) {
344344
return;
345345
}
346-
window.requestAnimationFrame(on_frame.bind(this));
346+
window.requestAnimationFrame(on_frame);
347347

348348
if (this.onBeforeStep) this.onBeforeStep();
349349
this.events.emit("beforeStep");
@@ -352,19 +352,20 @@ export default class LGraph {
352352

353353
if (this.onAfterStep) this.onAfterStep();
354354
this.events.emit("afterStep");
355-
}
355+
};
356356
this.execution_timer_id = -1;
357-
on_frame.call(that);
357+
on_frame();
358358
} else {
359359
//execute every 'interval' ms
360-
this.execution_timer_id = setInterval(function () {
360+
this.execution_timer_id = setInterval(() => {
361361
//execute
362-
if (that.onBeforeStep) that.onBeforeStep();
363-
that.events.emit("beforeStep");
362+
if (this.onBeforeStep) this.onBeforeStep();
363+
this.events.emit("beforeStep");
364364

365-
that.runStep(1, !that.catch_errors);
365+
this.runStep(1, !this.catch_errors);
366366

367-
if (that.onAfterStep) that.onAfterStep();
367+
if (this.onAfterStep) this.onAfterStep();
368+
this.events.emit("afterStep");
368369
}, interval);
369370
}
370371
}
@@ -1993,14 +1994,12 @@ export default class LGraph {
19931994
}
19941995

19951996
load(url: string | Blob, callback?: (any) => void): void {
1996-
var that = this;
1997-
19981997
//from file
19991998
if (url instanceof Blob) {
2000-
var reader = new FileReader();
2001-
reader.addEventListener("load", function (event) {
2002-
var data = JSON.parse(reader.result as string);
2003-
that.configure(data);
1999+
const reader = new FileReader();
2000+
reader.addEventListener("load", (event) => {
2001+
const data = JSON.parse(reader.result as string);
2002+
this.configure(data);
20042003
if (callback) callback(data);
20052004
});
20062005

@@ -2009,16 +2008,16 @@ export default class LGraph {
20092008
}
20102009

20112010
//is a string, then an URL
2012-
var req = new XMLHttpRequest();
2011+
const req = new XMLHttpRequest();
20132012
req.open("GET", url, true);
20142013
req.send(null);
2015-
req.onload = function (_oEvent) {
2014+
req.onload = (_oEvent) => {
20162015
if (req.status !== 200) {
20172016
console.error("Error loading graph:", req.status, req.response);
20182017
return;
20192018
}
2020-
var data = JSON.parse(req.response);
2021-
that.configure(data);
2019+
const data = JSON.parse(req.response);
2020+
this.configure(data);
20222021
if (callback) callback(data);
20232022
};
20242023
req.onerror = function (err) {

‎packages/core/src/LGraphCanvas.ts

Lines changed: 19 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -672,8 +672,6 @@ export default class LGraphCanvas
672672
canvas: HTMLCanvasElement | string,
673673
skipEvents: boolean = false,
674674
): void {
675-
var that = this;
676-
677675
if (canvas) {
678676
if (typeof canvas === "string") {
679677
canvas = document.getElementById(canvas) as HTMLCanvasElement;
@@ -1003,8 +1001,6 @@ export default class LGraphCanvas
10031001
opts: LCreateDefaultNodeForSlotOptions = {},
10041002
): boolean {
10051003
// addNodeMenu for connection
1006-
var that = this;
1007-
10081004
var isFrom = opts.nodeFrom && opts.slotFrom !== null;
10091005
var isTo = !isFrom && opts.nodeTo && opts.slotTo !== null;
10101006

@@ -1173,7 +1169,7 @@ export default class LGraphCanvas
11731169
? opts.posSizeFix[1] * newNode.size[1]
11741170
: 0);
11751171
const pos: Vector2 = [posX, posY]; //that.last_click_position; //[e.canvasX+30, e.canvasX+5];*/
1176-
that.graph.add(newNode, { pos });
1172+
this.graph.add(newNode, { pos });
11771173

11781174
//that.graph.afterChange();
11791175

@@ -2032,7 +2028,6 @@ export default class LGraphCanvas
20322028
var x = pos[0] - node.pos[0];
20332029
var y = pos[1] - node.pos[1];
20342030
var width = node.size[0];
2035-
var that = this;
20362031
var ref_window = this.getCanvasWindow();
20372032

20382033
for (var i = 0; i < node.widgets.length; ++i) {
@@ -2064,8 +2059,8 @@ export default class LGraphCanvas
20642059
LiteGraph.pointerevents_method + "down"
20652060
) {
20662061
if (w.callback) {
2067-
setTimeout(function () {
2068-
w.callback(w, that, node, pos, event);
2062+
setTimeout(() => {
2063+
w.callback(w, this, node, pos, event);
20692064
}, 20);
20702065
}
20712066
w.clicked = true;
@@ -2175,7 +2170,20 @@ export default class LGraphCanvas
21752170
let choices = Array.from(text_values).map((n) => {
21762171
return { content: n };
21772172
});
2178-
var menu = new ContextMenu(
2173+
const inner_clicked = (
2174+
v: IContextMenuItem,
2175+
option,
2176+
event,
2177+
) => {
2178+
let newValue: any = v.content;
2179+
if (values != values_list)
2180+
newValue = text_values.indexOf(newValue);
2181+
w.value = newValue;
2182+
inner_value_change(w, newValue);
2183+
this.dirty_canvas = true;
2184+
return false;
2185+
};
2186+
const menu = new ContextMenu(
21792187
choices,
21802188
{
21812189
scale: Math.max(1, this.ds.scale),
@@ -2185,19 +2193,6 @@ export default class LGraphCanvas
21852193
},
21862194
ref_window,
21872195
);
2188-
function inner_clicked(
2189-
v: IContextMenuItem,
2190-
option,
2191-
event,
2192-
) {
2193-
let newValue: any = v.content;
2194-
if (values != values_list)
2195-
newValue = text_values.indexOf(newValue);
2196-
this.value = newValue;
2197-
inner_value_change(this, newValue);
2198-
that.dirty_canvas = true;
2199-
return false;
2200-
}
22012196
}
22022197
} //end mousedown
22032198
else if (
@@ -2268,6 +2263,7 @@ export default class LGraphCanvas
22682263
return w;
22692264
} //end for
22702265

2266+
const thisCanvas = this;
22712267
function inner_value_change(widget: IWidget, value: any) {
22722268
widget.value = value;
22732269
if (
@@ -2278,7 +2274,7 @@ export default class LGraphCanvas
22782274
node.setProperty(widget.options.property, value);
22792275
}
22802276
if (widget.callback) {
2281-
widget.callback(widget.value, that, node, pos, event);
2277+
widget.callback(widget.value, thisCanvas, node, pos, event);
22822278
}
22832279
}
22842280

‎packages/core/src/LGraphCanvas_Events.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ export default class LGraphCanvas_Events {
2121
var ref_window = this.getCanvasWindow();
2222
var document = ref_window.document;
2323
LGraphCanvas.active_canvas = this;
24-
var that = this;
2524

2625
var x = e.clientX;
2726
var y = e.clientY;

‎packages/core/src/LGraphCanvas_Rendering.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -849,7 +849,6 @@ export default class LGraphCanvas_Rendering {
849849
this._bg_img = new Image();
850850
this._bg_img.name = this.background_image;
851851
this._bg_img.src = this.background_image;
852-
var that = this;
853852
this._bg_img.onload = () => {
854853
this.draw(true, true);
855854
};

0 commit comments

Comments
 (0)