I have posted a few queries recently about features that I thought would be difficult to implement but proved 'easy enough'. Hopefully this one will be the same.

How can I restrict the map/grid area to 'display', stopping users from interacting with it? Currently they can move the map and resize it, which sometimes cause problems.

Add this to game.inituserinterface to prevent resizing:

JS.eval("gridApi.zoomIn = function(){};")

Great, that was quick! 👍

That's 50% of the problem. Now just need to stop someone clicking on the map, holding the mouse button down and moving it!

I can't find the stuff that lets you move the map by clicking...

I tried onclick and unbinding "click", but neither had any effect.

If I don't find the solution soon, someone else will most assuredly know how to do it.

Thanks KV, I've just uploaded a new version of Giantkiller Too than includes the fix to stop maps being resized. I'll leave this thread open in the hope that someone can help with blocking the movement of the map.

It may be possible to put an invisible DIV over the map, so when the player tries to click or drag, the map underneath is not affected.

In grid.js:

function onMouseDrag(event) {
    updateOffset(event.delta);
}

If you modify that code in the grid.js file, it will keep you from dragging the map, but I can't figure out how to get that function from within a game. (I tried adding the function every way I could think of.)

This does make it add console log entries, but it only adds this functionality rather than overriding the function:

paper.tool.onMouseDrag = function(e){console.log(e);}

If we can't modify this function from within the game, it's no good. Our grid.js file is not published with the game, so any changes we make to it don't matter.

oof.

It may be possible to put an invisible DIV over the map

I tried this, but it didn't work.

var mapHolder = $('<div id='map-holder'/>');
$('#gameBorder').append(mapHolder);
setCss(mapHolder, 'position:fixed;top:20px;')
mapHolder.append($('#gridCanvas'));

It works as far as putting all the elements where I'm telling it to is concerned, but I still can't stop the onMouseDrag() in grid.js. Of course, I'm not certain I'm actually doing what Pixie suggested, either...

I got it, I got it!

JS.eval ("/* change this value to true to allow map dragging */ var canDragMap = false; paper.tool._onHandleEvent = function (type, point, event) { 	if (canDragMap){ 	paper = this._scope; 	var called = false; 	switch (type) { 	case 'mousedown': 		this._updateEvent(type, point, null, null, true, false, false); 		called = this._fireEvent(type, event); 		break; 	case 'mousedrag': 		 		  var needsChange = false, 				matchMaxDistance = false; 			while (this._updateEvent(type, point, this.minDistance, 					this.maxDistance, false, needsChange, matchMaxDistance)) { 				called = this._fireEvent(type, event) || called; 				needsChange = true; 				matchMaxDistance = true; 			} 		 		break; 	case 'mouseup': 		if (!point.equals(this._point) 				&& this._updateEvent('mousedrag', point, this.minDistance, 						this.maxDistance, false, false, false)) { 			called = this._fireEvent('mousedrag', event); 		} 		this._updateEvent(type, point, null, this.maxDistance, false, 				false, false); 		called = this._fireEvent(type, event) || called; 		this._updateEvent(type, point, null, null, true, false, false); 		this._firstMove = true; 		break; 	case 'mousemove': 		while (this._updateEvent(type, point, this.minDistance, 				this.maxDistance, this._firstMove, true, false)) { 			called = this._fireEvent(type, event) || called; 			this._firstMove = false; 		} 		break; 	} 	return called; 	} else { 		  /* Do nothing.*/ 	} }")

Put that in the user interface initialisation script. It will disable map-dragging and grid-clicking.

As long as that long line of code is in your user interface initialisation script (or the content of that call is in an included Javascript file), you can enable and disable map dragging whenever you please.

To enable dragging: JS.eval("canDragMap = true;")

To disable: JS.eval("canDragMap = false;")

Here it is in plain JS format, if you'd rather paste it into a Javascript file which will be added to the game:

var canDragMap = false; /* Set this value to true to enable map dragging  */

paper.tool._onHandleEvent = function (type, point, event) {
	if (canDragMap){
	paper = this._scope;
	var called = false;
	switch (type) {
	case 'mousedown':
		this._updateEvent(type, point, null, null, true, false, false);
		called = this._fireEvent(type, event);
		break;
	case 'mousedrag':
		
		  var needsChange = false,
				matchMaxDistance = false;
			while (this._updateEvent(type, point, this.minDistance,
					this.maxDistance, false, needsChange, matchMaxDistance)) {
				called = this._fireEvent(type, event) || called;
				needsChange = true;
				matchMaxDistance = true;
			}
		
		break;
	case 'mouseup':
		if (!point.equals(this._point)
				&& this._updateEvent('mousedrag', point, this.minDistance,
						this.maxDistance, false, false, false)) {
			called = this._fireEvent('mousedrag', event);
		}
		this._updateEvent(type, point, null, this.maxDistance, false,
				false, false);
		called = this._fireEvent(type, event) || called;
		this._updateEvent(type, point, null, null, true, false, false);
		this._firstMove = true;
		break;
	case 'mousemove':
		while (this._updateEvent(type, point, this.minDistance,
				this.maxDistance, this._firstMove, true, false)) {
			called = this._fireEvent(type, event) || called;
			this._firstMove = false;
		}
		break;
	}
	return called;
	} else {
		  /* Do nothing.*/
	}
}

Wow KV, you have done it! I've tested it out and uploaded a new version of Giantkiller Too. I've not put in the option to allow the map to be accessible as that causes problems in this game (I use part of the grid for some puzzles).

...it's a particular treat to find the problem solved while I slept!!!

👍👍👍👍👍

Might be easier to do:

JS.eval ("paper.getTool().off('mousedrag');")

Not so easy to re-enable it though.
Hmm...

JS.eval ("$(function (){ var draghandler = paper.getTool()._onMouseDrag; enableMapDrag = function () { paper.getTool().on('mousedrag', draghandler); }; disableMapDrag = function () { paper.getTool().off('mousedrag'); };});")

Then you can use JS.enableMapDrag and JS.disableMapDrag.

That certainly works in my case and impressively concise!