Added styling to regions (thereby also changing the configuration a bit, editing HTML in configuration is not possible anymore)
This commit is contained in:
FrozenCow
parent
0fb56c95bb
commit
369317ea45
6 changed files with 206 additions and 141 deletions
|
|
@ -68,11 +68,12 @@ components:
|
|||
# filename: regions.yml
|
||||
# basenode: regions
|
||||
# use3dregions: true
|
||||
# infowindow: '<div class="infowindow"><span style="font-size:120%;">%regionname% - %priority% (%parent%)</span><br /> Owners <span style="font-weight:bold;">%playerowners% %groupowners%</span><br />Members <span style="font-weight:bold;">%playermembers% %groupmembers%</span><br />Flags<br /><span style="font-weight:bold;">%flags%</span></div>'
|
||||
# regionstyle:
|
||||
# strokeColor: "#FF0000"
|
||||
# strokeOpacity: 0.8
|
||||
# strokeWeight: 3
|
||||
# stroke: true
|
||||
# color: "#FF0000"
|
||||
# opacity: 0.8
|
||||
# weight: 3
|
||||
# fill: true
|
||||
# fillColor: "#FF0000"
|
||||
# fillOpacity: 0.35
|
||||
# # Optional setting to limit which regions to show, by name - if commented out, all regions are shown
|
||||
|
|
|
|||
39
web/css/regions.css
Normal file
39
web/css/regions.css
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
.regioninfo > * {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.regioninfo > *:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.regioninfo .regionname {
|
||||
font-size: 120%;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.regioninfo .owners {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.regioninfo .regionflags .regionflag {
|
||||
display: block;
|
||||
font-size: 90%;
|
||||
color: gray;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.regioninfo .owners:before {
|
||||
content: "Owners: ";
|
||||
}
|
||||
|
||||
.regioninfo .members:before {
|
||||
content: "Members: ";
|
||||
}
|
||||
|
||||
.regioninfo .regionflags:before {
|
||||
content: "Flags: ";
|
||||
}
|
||||
|
||||
.regioninfo .regionpriority:before {
|
||||
content: "Priority: ";
|
||||
}
|
||||
|
|
@ -154,6 +154,27 @@ function loadjs(url, completed) {
|
|||
(document.head || document.getElementsByTagName('head')[0]).appendChild(script);
|
||||
}
|
||||
|
||||
function loadcss(url, completed) {
|
||||
var script = document.createElement('link');
|
||||
script.setAttribute('href', url);
|
||||
script.setAttribute('rel', 'stylesheet');
|
||||
var isloaded = false;
|
||||
if (completed) {
|
||||
script.onload = function() {
|
||||
if (isloaded) { return; }
|
||||
isloaded = true;
|
||||
completed();
|
||||
};
|
||||
|
||||
// Hack for IE, don't know whether this still applies to IE9.
|
||||
script.onreadystatechange = function() {
|
||||
script.onload();
|
||||
};
|
||||
}
|
||||
|
||||
(document.head || document.getElementsByTagName('head')[0]).appendChild(script);
|
||||
}
|
||||
|
||||
function splitArgs(s) {
|
||||
var r = s.split(' ');
|
||||
delete arguments[0];
|
||||
|
|
|
|||
|
|
@ -1,70 +1,110 @@
|
|||
var regionConstructors = {};
|
||||
|
||||
function createPolygonSurfaces(latlng, maxx, minx, maxy, miny, maxz, minz) {
|
||||
return [
|
||||
new L.Polygon([
|
||||
latlng(minx,miny,minz),
|
||||
latlng(maxx,miny,minz),
|
||||
latlng(maxx,miny,maxz),
|
||||
latlng(minx,miny,maxz)
|
||||
], {}),
|
||||
new L.Polygon([
|
||||
latlng(minx,maxy,minz),
|
||||
latlng(maxx,maxy,minz),
|
||||
latlng(maxx,maxy,maxz),
|
||||
latlng(minx,maxy,maxz)
|
||||
], {}),
|
||||
new L.Polygon([
|
||||
latlng(minx,miny,minz),
|
||||
latlng(minx,maxy,minz),
|
||||
latlng(maxx,maxy,minz),
|
||||
latlng(maxx,miny,minz)
|
||||
], {}),
|
||||
new L.Polygon([
|
||||
latlng(maxx,miny,minz),
|
||||
latlng(maxx,maxy,minz),
|
||||
latlng(maxx,maxy,maxz),
|
||||
latlng(maxx,miny,maxz)
|
||||
], {}),
|
||||
new L.Polygon([
|
||||
latlng(minx,miny,maxz),
|
||||
latlng(minx,maxy,maxz),
|
||||
latlng(maxx,maxy,maxz),
|
||||
latlng(maxx,miny,maxz)
|
||||
], {}),
|
||||
new L.Polygon([
|
||||
latlng(minx,miny,minz),
|
||||
latlng(minx,maxy,minz),
|
||||
latlng(minx,maxy,maxz),
|
||||
latlng(minx,miny,maxz)
|
||||
], {})
|
||||
];
|
||||
}
|
||||
|
||||
componentconstructors['regions'] = function(dynmap, configuration) {
|
||||
regionCfg = configuration;
|
||||
var regionType = regionCfg.name;
|
||||
|
||||
// Helper functions
|
||||
latlng = function(x, y, z) {
|
||||
return dynmap.getProjection().fromLocationToLatLng(new Location(undefined, x,y,z));
|
||||
}
|
||||
|
||||
function create3DBoxLayer(maxx, minx, maxy, miny, maxz, minz) {
|
||||
return new L.FeatureGroup([
|
||||
new L.Polygon([
|
||||
latlng(minx,miny,minz),
|
||||
latlng(maxx,miny,minz),
|
||||
latlng(maxx,miny,maxz),
|
||||
latlng(minx,miny,maxz)
|
||||
], configuration.regionstyle),
|
||||
new L.Polygon([
|
||||
latlng(minx,maxy,minz),
|
||||
latlng(maxx,maxy,minz),
|
||||
latlng(maxx,maxy,maxz),
|
||||
latlng(minx,maxy,maxz)
|
||||
], configuration.regionstyle),
|
||||
new L.Polygon([
|
||||
latlng(minx,miny,minz),
|
||||
latlng(minx,maxy,minz),
|
||||
latlng(maxx,maxy,minz),
|
||||
latlng(maxx,miny,minz)
|
||||
], configuration.regionstyle),
|
||||
new L.Polygon([
|
||||
latlng(maxx,miny,minz),
|
||||
latlng(maxx,maxy,minz),
|
||||
latlng(maxx,maxy,maxz),
|
||||
latlng(maxx,miny,maxz)
|
||||
], configuration.regionstyle),
|
||||
new L.Polygon([
|
||||
latlng(minx,miny,maxz),
|
||||
latlng(minx,maxy,maxz),
|
||||
latlng(maxx,maxy,maxz),
|
||||
latlng(maxx,miny,maxz)
|
||||
], configuration.regionstyle),
|
||||
new L.Polygon([
|
||||
latlng(minx,miny,minz),
|
||||
latlng(minx,maxy,minz),
|
||||
latlng(minx,maxy,maxz),
|
||||
latlng(minx,miny,maxz)
|
||||
], configuration.regionstyle)
|
||||
]);
|
||||
}
|
||||
|
||||
function create2DBoxLayer(maxx, minx, maxy, miny, maxz, minz) {
|
||||
return new L.Polygon([
|
||||
latlng(minx,64,minz),
|
||||
latlng(maxx,64,minz),
|
||||
latlng(maxx,64,maxz),
|
||||
latlng(minx,64,maxz)
|
||||
], configuration.regionstyle);
|
||||
}
|
||||
|
||||
function createPopupContent(name, region) {
|
||||
return $('<div/>').addClass('regioninfo')
|
||||
.append($('<span/>').addClass('regionname').text(name))
|
||||
.append($('<span/>').addClass('owners')
|
||||
.append(region.owners.players && $('<span/>').addClass('playerowners').text(region.owners.players.concat()))
|
||||
.append(region.owners.groups && $('<span/>').addClass('groupowners').text(region.owners.groups.concat()))
|
||||
)
|
||||
.append($('<span/>').addClass('members')
|
||||
.append(region.members.players && $('<span/>').addClass('playermembers').text(region.members.players.concat()))
|
||||
.append(region.members.groups && $('<span/>').addClass('groupmembers').text(region.members.groups.concat()))
|
||||
)
|
||||
.append(region.parent && $('<span/>').addClass('regionparent').text(region.parent))
|
||||
.append(region.flags && function() {
|
||||
var regionflags = $('<span/>').addClass('regionflags');
|
||||
$.each(region.flags, function(name, value) {
|
||||
regionflags.append($('<span/>').addClass('regionflag').text(name + ': ' + value));
|
||||
});
|
||||
return regionflags;
|
||||
}())
|
||||
.append($('<span/>').addClass('regionpriority').text(region.priority))
|
||||
[0];
|
||||
}
|
||||
|
||||
var self = this;
|
||||
loadcss('css/regions.css');
|
||||
var regionType = configuration.name;
|
||||
loadjs('js/regions_' + regionType + '.js', function() {
|
||||
var regionsLayer = undefined;
|
||||
var activeLayer = undefined;
|
||||
function undraw() {
|
||||
if (regionsLayer) {
|
||||
dynmap.map.removeLayer(regionsLayer);
|
||||
regionsLayer = undefined;
|
||||
if (activeLayer) {
|
||||
dynmap.map.removeLayer(activeLayer);
|
||||
activeLayer = undefined;
|
||||
}
|
||||
}
|
||||
function redraw() {
|
||||
undraw();
|
||||
var worldName = dynmap.world && dynmap.world.name;
|
||||
if (worldName) {
|
||||
regionConstructors[regionType](dynmap, worldName, function(regionLayers) {
|
||||
var newRegionsLayer = new L.LayerGroup();
|
||||
$.each(regionLayers, function(name, layer) {
|
||||
console.log(name, layer);
|
||||
newRegionsLayer.addLayer(layer);
|
||||
});
|
||||
regionsLayer = newRegionsLayer;
|
||||
dynmap.map.addLayer(newRegionsLayer);
|
||||
});
|
||||
regionConstructors[regionType](dynmap, $.extend({}, configuration, {
|
||||
component: self,
|
||||
worldName: worldName,
|
||||
createPopupContent: createPopupContent,
|
||||
createBoxLayer: configuration.use3dregions ? create3DBoxLayer : create2DBoxLayer,
|
||||
result: function(regionsLayer) {
|
||||
activeLayer = regionsLayer;
|
||||
dynmap.map.addLayer(activeLayer);
|
||||
}
|
||||
}));
|
||||
}
|
||||
}
|
||||
$(dynmap).bind('mapchanged', redraw);
|
||||
|
|
|
|||
|
|
@ -1,31 +1,26 @@
|
|||
function createPolygonsFromResidence(latlng, name, residence) {
|
||||
return createPolygonSurfaces(residence.X1, residence.X2, residence.Y1, residence.Y2, residence.Z1, residence.Z2);
|
||||
}
|
||||
function createPopupContent(name, region) {
|
||||
return $('<div/>')
|
||||
.append($('<span/>').addClass('regionname').text(name))
|
||||
.append(region.owners.players && $('<span/>').addClass('playerowners').text(region.permissions.owner))
|
||||
[0];
|
||||
};
|
||||
regionConstructors['Residence'] = function(dynmap, configuration) {
|
||||
// Helper function.
|
||||
function createBoxFromArea(area, boxCreator) {
|
||||
return boxCreator(area.X1, area.X2, area.Y1, area.Y2, area.Z1, area.Z2);
|
||||
}
|
||||
|
||||
regionConstructors['Residence'] = function(dynmap, worldName, result) {
|
||||
var latlng = function(x, y, z) {
|
||||
return dynmap.getProjection().fromLocationToLatLng(new Location(undefined, x,y,z));
|
||||
};
|
||||
|
||||
$.getJSON('standalone/res_' + worldName + '.json', function(data) {
|
||||
var regionLayers = {};
|
||||
var boxLayers = [];
|
||||
$.each(data, function(name, residence) {
|
||||
if(map === residence.Permissions.World) {
|
||||
var polygons = createPolygonsFromResidence(latlng, name, residence);
|
||||
var regionLayer = new L.FeatureGroup(polygons);
|
||||
|
||||
regionLayer.bindPopup(createPopupContent(name, region));
|
||||
|
||||
regionLayers[name] = regionLayer;
|
||||
if(worldName == residence.Permissions.World) {
|
||||
$.each(residence.Areas, function(name, area) {
|
||||
var boxLayer = configuration.createBoxLayer(area.X1, area.X2, area.Y1, area.Y2, area.Z1, area.Z2);
|
||||
|
||||
boxLayer.bindPopup(configuration.createPopupContent(name, $.extend(residence, {
|
||||
owners: { players: [residence.Permissions.Owner] },
|
||||
flags: region.Permissions.AreaFlags
|
||||
})));
|
||||
|
||||
boxLayers.push(boxLayer);
|
||||
});
|
||||
}
|
||||
});
|
||||
result(regionLayers);
|
||||
configuration.result(new L.LayerGroup(boxLayers));
|
||||
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,68 +1,37 @@
|
|||
Array.max = function( array ) {
|
||||
return Math.max.apply( Math, array );
|
||||
};
|
||||
Array.min = function( array ) {
|
||||
return Math.min.apply( Math, array );
|
||||
};
|
||||
|
||||
function createPolygonsFromWorldGuardRegion(latlng, name, region) {
|
||||
if(region.points) {
|
||||
var i;
|
||||
var xs = region.points.map(function(p) { return p.x; });
|
||||
var zs = region.points.map(function(p) { return p.z; });
|
||||
return createPolygonSurfaces(latlng, Array.max(xs), Array.min(xs), region['max-y'], region['min-y'], Array.max(zs), Array.min(zs));
|
||||
}
|
||||
if(!region.min || !region.max)
|
||||
return [];
|
||||
if(region.max.y <= region.min.y)
|
||||
region.min.y = region.max.y - 1;
|
||||
return createPolygonSurfaces(latlng, region.max.x, region.min.x, region.max.y, region.min.y, region.max.z, region.min.z);
|
||||
}
|
||||
|
||||
function createPopupContent(name, region) {
|
||||
|
||||
return $('<div/>')
|
||||
.append($('<span/>').addClass('regionname').text(name))
|
||||
.append(region.owners.players && $('<span/>').addClass('playerowners').text(region.owners.players.concat()))
|
||||
.append(region.owners.groups && $('<span/>').addClass('groupowners').text(region.owners.groups.concat()))
|
||||
.append(region.members.players && $('<span/>').addClass('playermembers').text(region.members.players.concat()))
|
||||
.append(region.members.groups && $('<span/>').addClass('groupmembers').text(region.members.groups.concat()))
|
||||
.append(region.parent && $('<span/>').addClass('regionparent').text(region.parent))
|
||||
.append(region.flags && function() {
|
||||
var regionflags = $('<span/>').addClass('regionflags');
|
||||
$.each(region.flags, function(name, value) {
|
||||
regionflags.append($('<span/>').addClass('regionflag').text(name + ': ' + value));
|
||||
});
|
||||
return regionflags;
|
||||
}())
|
||||
.append($('<span/>').addClass('regionpriority').text(region.priority))
|
||||
[0];
|
||||
};
|
||||
|
||||
regionConstructors['WorldGuard'] = function(dynmap, worldName, result) {
|
||||
var latlng = function(x, y, z) {
|
||||
var l;
|
||||
if (typeof x === 'Object' && !y && !z) {
|
||||
l = x;
|
||||
} else {
|
||||
l = new Location(undefined, x,y,z);
|
||||
regionConstructors['WorldGuard'] = function(dynmap, configuration) {
|
||||
// Helper function.
|
||||
function createBoxFromRegion(region, boxCreator) {
|
||||
function ArrayMax( array ) {
|
||||
return Math.max.apply( Math, array );
|
||||
}
|
||||
return dynmap.getProjection().fromLocationToLatLng(l);
|
||||
};
|
||||
function ArrayMin( array ) {
|
||||
return Math.min.apply( Math, array );
|
||||
}
|
||||
if(region.points) {
|
||||
var i;
|
||||
var xs = region.points.map(function(p) { return p.x; });
|
||||
var zs = region.points.map(function(p) { return p.z; });
|
||||
return boxCreator(ArrayMax(xs), ArrayMin(xs), region['max-y'], region['min-y'], ArrayMax(zs), ArrayMin(zs));
|
||||
}
|
||||
if(!region.min || !region.max)
|
||||
return [];
|
||||
if(region.max.y <= region.min.y)
|
||||
region.min.y = region.max.y - 1;
|
||||
return boxCreator(region.max.x, region.min.x, region.max.y, region.min.y, region.max.z, region.min.z);
|
||||
}
|
||||
|
||||
regionFile = regionCfg.filename.substr(0, regionCfg.filename.lastIndexOf('.'));
|
||||
regionFile += '_'+worldName+'.json';
|
||||
var regionFile = configuration.filename.substr(0, configuration.filename.lastIndexOf('.'));
|
||||
regionFile += '_'+configuration.worldName+'.json';
|
||||
$.getJSON('standalone/'+regionFile, function(data) {
|
||||
var regionLayers = {};
|
||||
var boxLayers = [];
|
||||
$.each(data, function(name, region) {
|
||||
var polygons = createPolygonsFromWorldGuardRegion(latlng, name, region);
|
||||
var regionLayer = new L.FeatureGroup(polygons);
|
||||
var boxLayer = createBoxFromRegion(region, configuration.createBoxLayer);
|
||||
|
||||
regionLayer.bindPopup(createPopupContent(name, region));
|
||||
boxLayer.bindPopup(configuration.createPopupContent(name, region));
|
||||
|
||||
regionLayers[name] = regionLayer;
|
||||
boxLayers.push(boxLayer);
|
||||
});
|
||||
result(regionLayers);
|
||||
configuration.result(new L.LayerGroup(boxLayers));
|
||||
|
||||
});
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue