Skip to content

Commit 354a9a2

Browse files
author
Walter Bender
committed
fixes scaling issue impacting trash and cursor sync
1 parent 8428730 commit 354a9a2

1 file changed

Lines changed: 36 additions & 39 deletions

File tree

‎js/block.js‎

Lines changed: 36 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1130,8 +1130,7 @@ function Block(protoblock, blocks, overrideName) {
11301130
var locked = false;
11311131
var mousedown = false;
11321132
var offset = {x:0, y:0};
1133-
var scale = blocks.getStageScale();
1134-
1133+
11351134
function handleClick () {
11361135
if (locked) {
11371136
return;
@@ -1159,8 +1158,8 @@ function Block(protoblock, blocks, overrideName) {
11591158
var d = new Date();
11601159
blocks.mouseDownTime = d.getTime();
11611160
offset = {
1162-
x: myBlock.collapseContainer.x - Math.round(event.stageX / scale),
1163-
y: myBlock.collapseContainer.y - Math.round(event.stageY / scale)
1161+
x: myBlock.collapseContainer.x - Math.round(event.stageX / blocks.blockScale),
1162+
y: myBlock.collapseContainer.y - Math.round(event.stageY / blocks.blockScale)
11641163
};
11651164
});
11661165

@@ -1208,18 +1207,19 @@ function Block(protoblock, blocks, overrideName) {
12081207
moved = true;
12091208
var oldX = myBlock.collapseContainer.x;
12101209
var oldY = myBlock.collapseContainer.y;
1211-
myBlock.collapseContainer.x = Math.round(event.stageX / scale) + offset.x;
1212-
myBlock.collapseContainer.y = Math.round(event.stageY / scale) + offset.y;
1210+
myBlock.collapseContainer.x = Math.round(event.stageX / blocks.blockScale) + offset.x;
1211+
myBlock.collapseContainer.y = Math.round(event.stageY / blocks.blockScale) + offset.y;
12131212
var dx = myBlock.collapseContainer.x - oldX;
12141213
var dy = myBlock.collapseContainer.y - oldY;
12151214
myBlock.container.x += dx;
12161215
myBlock.container.y += dy;
12171216

12181217
// If we are over the trash, warn the user.
1219-
if (trashcan.overTrashcan(event.stageX / scale, event.stageY / scale))
1218+
if (trashcan.overTrashcan(event.stageX / blocks.blockScale, event.stageY / blocks.blockScale)) {
12201219
trashcan.startHighlightAnimation();
1221-
else
1220+
} else {
12221221
trashcan.stopHighlightAnimation();
1222+
}
12231223

12241224
myBlock.blocks.findDragGroup(thisBlock)
12251225
if (myBlock.blocks.dragGroup.length > 0) {
@@ -1237,13 +1237,12 @@ function Block(protoblock, blocks, overrideName) {
12371237

12381238
this._collapseOut = function(blocks, thisBlock, moved, event) {
12391239
// Always hide the trash when there is no block selected.
1240-
var scale = blocks.getStageScale();
12411240

12421241
trashcan.hide();
12431242
blocks.unhighlight(thisBlock);
12441243
if (moved) {
12451244
// Check if block is in the trash.
1246-
if (trashcan.overTrashcan(event.stageX / scale, event.stageY / scale)) {
1245+
if (trashcan.overTrashcan(event.stageX / blocks.blockScale, event.stageY / blocks.blockScale)) {
12471246
if (trashcan.isVisible)
12481247
blocks.sendStackToTrash(this);
12491248
} else {
@@ -1291,8 +1290,7 @@ function Block(protoblock, blocks, overrideName) {
12911290
var myBlock = this;
12921291
var thisBlock = this.blocks.blockList.indexOf(this);
12931292
var blocks = this.blocks;
1294-
var scale = blocks.getStageScale();
1295-
1293+
12961294
this._calculateBlockHitArea();
12971295

12981296
this.container.on('mouseover', function(event) {
@@ -1369,8 +1367,8 @@ function Block(protoblock, blocks, overrideName) {
13691367

13701368
moved = false;
13711369
var offset = {
1372-
x: myBlock.container.x - Math.round(event.stageX / scale),
1373-
y: myBlock.container.y - Math.round(event.stageY / scale)
1370+
x: myBlock.container.x - Math.round(event.stageX / blocks.blockScale),
1371+
y: myBlock.container.y - Math.round(event.stageY / blocks.blockScale)
13741372
};
13751373

13761374
myBlock.container.on('mouseout', function(event) {
@@ -1395,7 +1393,7 @@ function Block(protoblock, blocks, overrideName) {
13951393
moved = false;
13961394
});
13971395

1398-
var original = {x: event.stageX / scale, y: event.stageY / scale};
1396+
var original = {x: event.stageX / blocks.blockScale, y: event.stageY / blocks.blockScale};
13991397

14001398
myBlock.container.on('pressmove', function(event) {
14011399
// FIXME: More voodoo
@@ -1415,29 +1413,30 @@ function Block(protoblock, blocks, overrideName) {
14151413
} else {
14161414
// Make it eaiser to select text on mobile.
14171415
setTimeout(function () {
1418-
moved = Math.abs((event.stageX / scale) - original.x) + Math.abs((event.stageY / scale) - original.y) > 20 && !window.hasMouse;
1416+
moved = Math.abs((event.stageX / blocks.blockScale) - original.x) + Math.abs((event.stageY / blocks.blockScale) - original.y) > 20 && !window.hasMouse;
14191417
getInput = !moved;
14201418
}, 200);
14211419
}
14221420

14231421
var oldX = myBlock.container.x;
14241422
var oldY = myBlock.container.y;
14251423

1426-
var dx = Math.round(Math.round(event.stageX / scale) + offset.x - oldX);
1427-
var dy = Math.round(Math.round(event.stageY / scale) + offset.y - oldY);
1424+
var dx = Math.round(Math.round(event.stageX / blocks.blockScale) + offset.x - oldX);
1425+
var dy = Math.round(Math.round(event.stageY / blocks.blockScale) + offset.y - oldY);
14281426
var finalPos = oldY + dy;
14291427

1430-
if (blocks.stage.y === 0 && finalPos < (45 * scale)){
1431-
dy += (45 * scale) - finalPos;
1428+
if (blocks.stage.y === 0 && finalPos < (45 * blocks.blockScale)) {
1429+
dy += (45 * blocks.blockScale) - finalPos;
14321430
}
14331431

14341432
blocks.moveBlockRelative(thisBlock, dx, dy);
14351433

14361434
// If we are over the trash, warn the user.
1437-
if (trashcan.overTrashcan(event.stageX / scale, event.stageY / scale))
1438-
trashcan.startHighlightAnimation();
1439-
else
1440-
trashcan.stopHighlightAnimation();
1435+
if (trashcan.overTrashcan(event.stageX / blocks.blockScale, event.stageY / blocks.blockScale)) {
1436+
trashcan.startHighlightAnimation();
1437+
} else {
1438+
trashcan.stopHighlightAnimation();
1439+
}
14411440

14421441
if (myBlock.isValueBlock() && myBlock.name !== 'media') {
14431442
// Ensure text is on top
@@ -1479,8 +1478,7 @@ function Block(protoblock, blocks, overrideName) {
14791478

14801479
this._mouseoutCallback = function(event, moved, haveClick, hideDOM) {
14811480
var thisBlock = this.blocks.blockList.indexOf(this);
1482-
var scale = blocks.getStageScale();
1483-
1481+
14841482
// Always hide the trash when there is no block selected.
14851483
trashcan.hide();
14861484

@@ -1491,7 +1489,7 @@ function Block(protoblock, blocks, overrideName) {
14911489

14921490
if (moved) {
14931491
// Check if block is in the trash.
1494-
if (trashcan.overTrashcan(event.stageX / scale, event.stageY / scale)) {
1492+
if (trashcan.overTrashcan(event.stageX / blocks.blockScale, event.stageY / blocks.blockScale)) {
14951493
if (trashcan.isVisible) {
14961494
blocks.sendStackToTrash(this);
14971495
}
@@ -1568,10 +1566,9 @@ function Block(protoblock, blocks, overrideName) {
15681566
var blocks = this.blocks;
15691567
var x = this.container.x;
15701568
var y = this.container.y;
1571-
var scale = blocks.getStageScale();
15721569

1573-
var canvasLeft = blocks.canvas.offsetLeft + 28 * scale;
1574-
var canvasTop = blocks.canvas.offsetTop + 6 * scale;
1570+
var canvasLeft = blocks.canvas.offsetLeft + 28 * blocks.blockScale;
1571+
var canvasTop = blocks.canvas.offsetTop + 6 * blocks.blockScale;
15751572

15761573
var movedStage = false;
15771574
if (!window.hasMouse && blocks.stage.y + y > 75) {
@@ -1840,21 +1837,21 @@ function Block(protoblock, blocks, overrideName) {
18401837
});
18411838
}
18421839

1843-
this.label.style.left = Math.round((x + blocks.stage.x) * scale + canvasLeft) + 'px';
1844-
this.label.style.top = Math.round((y + blocks.stage.y) * scale + canvasTop) + 'px';
1840+
this.label.style.left = Math.round((x + blocks.stage.x) * blocks.blockScale + canvasLeft) + 'px';
1841+
this.label.style.top = Math.round((y + blocks.stage.y) * blocks.blockScale + canvasTop) + 'px';
18451842

18461843
// There may be a second select used for # and b.
18471844
if (this.labelattr != null) {
1848-
this.label.style.width = Math.round(60 * scale) * this.protoblock.scale / 2 + 'px';
1849-
this.labelattr.style.left = Math.round((x + blocks.stage.x + 60) * scale + canvasLeft) + 'px';
1850-
this.labelattr.style.top = Math.round((y + blocks.stage.y) * scale + canvasTop) + 'px';
1851-
this.labelattr.style.width = Math.round(60 * scale) * this.protoblock.scale / 2 + 'px';
1852-
this.labelattr.style.fontSize = Math.round(20 * scale * this.protoblock.scale / 2) + 'px';
1845+
this.label.style.width = Math.round(60 * blocks.blockScale) * this.protoblock.scale / 2 + 'px';
1846+
this.labelattr.style.left = Math.round((x + blocks.stage.x + 60) * blocks.blockScale + canvasLeft) + 'px';
1847+
this.labelattr.style.top = Math.round((y + blocks.stage.y) * blocks.blockScale + canvasTop) + 'px';
1848+
this.labelattr.style.width = Math.round(60 * blocks.blockScale) * this.protoblock.scale / 2 + 'px';
1849+
this.labelattr.style.fontSize = Math.round(20 * blocks.blockScale * this.protoblock.scale / 2) + 'px';
18531850
} else {
1854-
this.label.style.width = Math.round(100 * scale) * this.protoblock.scale / 2 + 'px';
1851+
this.label.style.width = Math.round(100 * blocks.blockScale) * this.protoblock.scale / 2 + 'px';
18551852
}
18561853

1857-
this.label.style.fontSize = Math.round(20 * scale * this.protoblock.scale / 2) + 'px';
1854+
this.label.style.fontSize = Math.round(20 * blocks.blockScale * this.protoblock.scale / 2) + 'px';
18581855
this.label.style.display = '';
18591856
this.label.focus();
18601857

0 commit comments

Comments
 (0)