htwkmooc/codeocean
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reduce global JavaScript variables for Turtle

Browse Source 
Fixes
This commit is contained in:
Sebastian Serth
2023-11-25 01:18:19 +01:00
parent 59aa3926d9
commit b4ee21a00d
2 changed files with 17 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/editor/turtle.js
View File

@ -7,7 +7,7 @@ CodeOceanEditorTurtle = {
if (this.resetTurtle) { if (this.resetTurtle) {
this.resetTurtle = false; this.resetTurtle = false;
this.turtlecanvas = $('#turtlecanvas'); this.turtlecanvas = $('#turtlecanvas');
this.turtlescreen = new Turtle(this.websocket, this.turtlecanvas); this.turtlescreen = new Turtle(this.turtlecanvas);
} }
}, },

33
app/assets/javascripts/turtle.js
View File

@ -1,15 +1,10 @@
var output; // These variables are polluting the global namespace, but there's currently no alternative.
var editor; // Otherwise, the turtle won't work (click events won't be registered properly) or
var pipeurl; // running the turtle again after a timeout yields a too large canvas (when devicePixelRatio is > 1).
var filename;
var pendingChanges = -1;
var height; var height;
var width; var width;
var devicePixelRatio = window.devicePixelRatio || 1;
// The `unused_pipe_reference` might get outdated. Somehow... function Turtle(canvas) {
// Hence, we use the `CodeOceanEditorWebsocket.websocket`
function Turtle(unused_pipe_reference, canvas) {
var dx, dy, xpos, ypos; var dx, dy, xpos, ypos;
this.canvas = canvas; // jQuery object this.canvas = canvas; // jQuery object
@ -61,8 +56,8 @@ function Turtle(unused_pipe_reference, canvas) {
return; return;
} }
e.stopPropagation(); e.stopPropagation();
dx = this.width / (2 * devicePixelRatio); dx = this.canvas[0].width / (2 * this.get_devicePixelRatio());
dy = this.height / (2 * devicePixelRatio); dy = this.canvas[0].height / (2 * this.get_devicePixelRatio());
if(e.offsetX===undefined) if(e.offsetX===undefined)
{ {
var offset = canvas.offset(); var offset = canvas.offset();
@ -75,7 +70,7 @@ function Turtle(unused_pipe_reference, canvas) {
ypos = e.offsetY; ypos = e.offsetY;
} }
sendEvent(xpos - dx, ypos - dy); sendEvent(xpos - dx, ypos - dy);
}); }.bind(this));
} }
Turtle.prototype.update = function () { Turtle.prototype.update = function () {
@ -84,15 +79,15 @@ Turtle.prototype.update = function () {
if (canvas === undefined) { if (canvas === undefined) {
return; return;
} }
canvas.width = this.get_width() * devicePixelRatio; canvas.width = this.get_width() * this.get_devicePixelRatio();
canvas.height = this.get_height() * devicePixelRatio; canvas.height = this.get_height() * this.get_devicePixelRatio();
canvas.style.width = `${this.get_width()}px`; canvas.style.width = `${this.get_width()}px`;
canvas.style.height = `${this.get_height()}px`; canvas.style.height = `${this.get_height()}px`;
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, this.get_width(), this.get_height()); ctx.clearRect(0, 0, this.get_width(), this.get_height());
ctx.scale(devicePixelRatio, devicePixelRatio); ctx.scale(this.get_devicePixelRatio(), this.get_devicePixelRatio());
const dx = canvas.width / (2 * devicePixelRatio); const dx = canvas.width / (2 * this.get_devicePixelRatio());
const dy = canvas.height / (2 * devicePixelRatio); const dy = canvas.height / (2 * this.get_devicePixelRatio());
for (let item of this.items) { for (let item of this.items) {
// This should not happen, but it does for some unknown reason. // This should not happen, but it does for some unknown reason.
// Therefore, we just check for the potential error and break. // Therefore, we just check for the potential error and break.
@ -160,6 +155,10 @@ Turtle.prototype.get_height = function () {
return height; return height;
}; };
Turtle.prototype.get_devicePixelRatio = function () {
return window.devicePixelRatio || 1;
}
Turtle.prototype.delete = function (item) { Turtle.prototype.delete = function (item) {
if (item === 'all') { if (item === 'all') {
this.items = []; this.items = [];