mirror of
https://github.com/overte-org/overte.git
synced 2025-07-24 01:03:58 +02:00
Merge pull request #4016 from huffman/grid-tools-overlay
Grid tools overlay
This commit is contained in:
Clément Brisset
commit
ecdf415954
3 changed files with 306 additions and 219 deletions
|
|
@ -494,8 +494,10 @@ var mouseHasMovedSincePress = false;
|
||||||
|
|
||||||
function mousePressEvent(event) {
|
function mousePressEvent(event) {
|
||||||
mouseHasMovedSincePress = false;
|
mouseHasMovedSincePress = false;
|
||||||
|
mouseCapturedByTool = false;
|
||||||
|
|
||||||
if (toolBar.mousePressEvent(event) || progressDialog.mousePressEvent(event)) {
|
if (toolBar.mousePressEvent(event) || progressDialog.mousePressEvent(event) || gridTool.mousePressEvent(event)) {
|
||||||
|
mouseCapturedByTool = true;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (isActive) {
|
if (isActive) {
|
||||||
|
|
@ -519,6 +521,7 @@ function mousePressEvent(event) {
|
||||||
}
|
}
|
||||||
|
|
||||||
var highlightedEntityID = { isKnownID: false };
|
var highlightedEntityID = { isKnownID: false };
|
||||||
|
var mouseCapturedByTool = false;
|
||||||
|
|
||||||
function mouseMoveEvent(event) {
|
function mouseMoveEvent(event) {
|
||||||
mouseHasMovedSincePress = true;
|
mouseHasMovedSincePress = true;
|
||||||
|
|
@ -563,6 +566,9 @@ function mouseReleaseEvent(event) {
|
||||||
if (isActive && selectionManager.hasSelection()) {
|
if (isActive && selectionManager.hasSelection()) {
|
||||||
tooltip.show(false);
|
tooltip.show(false);
|
||||||
}
|
}
|
||||||
|
if (mouseCapturedByTool) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
cameraManager.mouseReleaseEvent(event);
|
cameraManager.mouseReleaseEvent(event);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,167 +0,0 @@
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<link rel="stylesheet" type="text/css" href="style.css">
|
|
||||||
<script>
|
|
||||||
function loaded() {
|
|
||||||
var gridColor = { red: 0, green: 0, blue: 0 };
|
|
||||||
var gridColors = [
|
|
||||||
{ red: 0, green: 0, blue: 0 },
|
|
||||||
{ red: 255, green: 255, blue: 255 },
|
|
||||||
{ red: 255, green: 0, blue: 0 },
|
|
||||||
{ red: 0, green: 255, blue: 0},
|
|
||||||
{ red: 0, green: 0, blue: 255 },
|
|
||||||
];
|
|
||||||
|
|
||||||
elPosY = document.getElementById("horiz-y");
|
|
||||||
elMinorSpacing = document.getElementById("minor-spacing");
|
|
||||||
elMajorSpacing = document.getElementById("major-spacing");
|
|
||||||
elSnapToGrid = document.getElementById("snap-to-grid");
|
|
||||||
elHorizontalGridVisible = document.getElementById("horiz-grid-visible");
|
|
||||||
elMoveToSelection = document.getElementById("move-to-selection");
|
|
||||||
elMoveToAvatar = document.getElementById("move-to-avatar");
|
|
||||||
|
|
||||||
if (window.EventBridge !== undefined) {
|
|
||||||
EventBridge.scriptEventReceived.connect(function(data) {
|
|
||||||
data = JSON.parse(data);
|
|
||||||
|
|
||||||
if (data.origin) {
|
|
||||||
var origin = data.origin;
|
|
||||||
elPosY.value = origin.y.toFixed(2);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (data.minorGridSpacing !== undefined) {
|
|
||||||
elMinorSpacing.value = data.minorGridSpacing;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (data.majorGridEvery !== undefined) {
|
|
||||||
elMajorSpacing.value = data.majorGridEvery;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (data.gridColor) {
|
|
||||||
gridColor = data.gridColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (data.snapToGrid !== undefined) {
|
|
||||||
elSnapToGrid.checked = data.snapToGrid == true;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (data.visible !== undefined) {
|
|
||||||
elHorizontalGridVisible.checked = data.visible == true;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
function emitUpdate() {
|
|
||||||
EventBridge.emitWebEvent(JSON.stringify({
|
|
||||||
type: "update",
|
|
||||||
origin: {
|
|
||||||
y: elPosY.value,
|
|
||||||
},
|
|
||||||
minorGridSpacing: elMinorSpacing.value,
|
|
||||||
majorGridEvery: elMajorSpacing.value,
|
|
||||||
gridColor: gridColor,
|
|
||||||
snapToGrid: elSnapToGrid.checked,
|
|
||||||
visible: elHorizontalGridVisible.checked,
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
elPosY.addEventListener("change", emitUpdate);
|
|
||||||
elMinorSpacing.addEventListener("change", emitUpdate);
|
|
||||||
elMajorSpacing.addEventListener("change", emitUpdate);
|
|
||||||
elSnapToGrid.addEventListener("change", emitUpdate);
|
|
||||||
elHorizontalGridVisible.addEventListener("change", emitUpdate);
|
|
||||||
|
|
||||||
elMoveToAvatar.addEventListener("click", function() {
|
|
||||||
EventBridge.emitWebEvent(JSON.stringify({
|
|
||||||
type: "action",
|
|
||||||
action: "moveToAvatar",
|
|
||||||
}));
|
|
||||||
});
|
|
||||||
elMoveToSelection.addEventListener("click", function() {
|
|
||||||
EventBridge.emitWebEvent(JSON.stringify({
|
|
||||||
type: "action",
|
|
||||||
action: "moveToSelection",
|
|
||||||
}));
|
|
||||||
});
|
|
||||||
|
|
||||||
var gridColorBox = document.getElementById('grid-color');
|
|
||||||
|
|
||||||
for (var i = 0; i < gridColors.length; i++) {
|
|
||||||
var colors = gridColors[i];
|
|
||||||
var box = document.createElement('div');
|
|
||||||
box.setAttribute('class', 'color-box');
|
|
||||||
box.style.background = 'rgb(' + colors.red + ', ' + colors.green + ', ' + colors.blue + ')';
|
|
||||||
document.getElementById("grid-colors").appendChild(box);
|
|
||||||
box.addEventListener("click", function(color) {
|
|
||||||
return function() {
|
|
||||||
gridColor = color;
|
|
||||||
emitUpdate();
|
|
||||||
}
|
|
||||||
}({ red: colors.red, green: colors.green, blue: colors.blue }));
|
|
||||||
}
|
|
||||||
|
|
||||||
EventBridge.emitWebEvent(JSON.stringify({ type: 'init' }));
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</head>
|
|
||||||
<body onload='loaded();'>
|
|
||||||
<div class="section-header">
|
|
||||||
<label>Horizontal Grid</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid-section">
|
|
||||||
|
|
||||||
<div class="property-section">
|
|
||||||
<label>Visible</label>
|
|
||||||
<span>
|
|
||||||
<input type='checkbox' id="horiz-grid-visible">
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="property-section">
|
|
||||||
<label>Snap to grid</label>
|
|
||||||
<span>
|
|
||||||
<input type='checkbox' id="snap-to-grid">
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="horizontal-position" class="property-section">
|
|
||||||
<label>Position (Y Axis)</label>
|
|
||||||
<span>
|
|
||||||
<input type='number' id="horiz-y" class="number" value="0.0" step="0.1"></input>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="property-section">
|
|
||||||
<label>Minor Grid Size</label>
|
|
||||||
<span>
|
|
||||||
<input type='number' id="minor-spacing" min="0" step="0.01", ></input>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="property-section">
|
|
||||||
<label>Major Grid Every</label>
|
|
||||||
<span>
|
|
||||||
<input type='number' id="major-spacing" min="2" step="1", ></input>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="property-section">
|
|
||||||
<label>Grid Color</label>
|
|
||||||
<span id="grid-colors"></span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="property-section">
|
|
||||||
<span>
|
|
||||||
<input type="button" id="move-to-selection" value="Move to Selection">
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="property-section">
|
|
||||||
<span>
|
|
||||||
<input type="button" id="move-to-avatar" value="Move to Avatar">
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,35 +1,35 @@
|
||||||
Grid = function(opts) {
|
Grid = function(opts) {
|
||||||
var that = {};
|
var that = {};
|
||||||
|
|
||||||
var color = { red: 100, green: 152, blue: 203 };
|
var colors = [
|
||||||
var gridColor = { red: 100, green: 152, blue: 203 };
|
{ red: 102, green: 180, blue: 126 },
|
||||||
|
{ red: 83, green: 210, blue: 83 },
|
||||||
|
{ red: 235, green: 173, blue: 0 },
|
||||||
|
{ red: 210, green: 115, blue: 0 },
|
||||||
|
{ red: 48, green: 116, blue: 119 },
|
||||||
|
];
|
||||||
|
var colorIndex = 0;
|
||||||
var gridAlpha = 1.0;
|
var gridAlpha = 1.0;
|
||||||
var origin = { x: 0, y: 0, z: 0 };
|
var origin = { x: 0, y: 0, z: 0 };
|
||||||
var majorGridEvery = 5;
|
var majorGridEvery = 5;
|
||||||
var minorGridSpacing = 0.2;
|
var minorGridWidth = 0.2;
|
||||||
var halfSize = 40;
|
var halfSize = 40;
|
||||||
var yOffset = 0.001;
|
var yOffset = 0.001;
|
||||||
|
|
||||||
var worldSize = 16384;
|
var worldSize = 16384;
|
||||||
|
|
||||||
var minorGridWidth = 0.5;
|
|
||||||
var majorGridWidth = 1.5;
|
|
||||||
|
|
||||||
var snapToGrid = false;
|
var snapToGrid = false;
|
||||||
|
|
||||||
var gridOverlay = Overlays.addOverlay("grid", {
|
var gridOverlay = Overlays.addOverlay("grid", {
|
||||||
position: { x: 0 , y: 0, z: 0 },
|
position: { x: 0 , y: 0, z: 0 },
|
||||||
visible: true,
|
visible: true,
|
||||||
color: { red: 0, green: 0, blue: 128 },
|
color: colors[0],
|
||||||
alpha: 1.0,
|
alpha: 1.0,
|
||||||
rotation: Quat.fromPitchYawRollDegrees(90, 0, 0),
|
rotation: Quat.fromPitchYawRollDegrees(90, 0, 0),
|
||||||
minorGridWidth: 0.1,
|
minorGridWidth: 0.1,
|
||||||
majorGridEvery: 2,
|
majorGridEvery: 2,
|
||||||
});
|
});
|
||||||
|
|
||||||
that.getMinorIncrement = function() { return minorGridSpacing; };
|
|
||||||
that.getMajorIncrement = function() { return minorGridSpacing * majorGridEvery; };
|
|
||||||
|
|
||||||
that.visible = false;
|
that.visible = false;
|
||||||
that.enabled = false;
|
that.enabled = false;
|
||||||
|
|
||||||
|
|
@ -37,13 +37,39 @@ Grid = function(opts) {
|
||||||
return origin;
|
return origin;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
that.getMinorIncrement = function() { return minorGridWidth; };
|
||||||
|
that.getMajorIncrement = function() { return minorGridWidth * majorGridEvery; };
|
||||||
|
|
||||||
|
that.getMinorGridWidth = function() { return minorGridWidth; };
|
||||||
|
that.setMinorGridWidth = function(value) {
|
||||||
|
minorGridWidth = value;
|
||||||
|
updateGrid();
|
||||||
|
};
|
||||||
|
|
||||||
|
that.getMajorGridEvery = function() { return majorGridEvery; };
|
||||||
|
that.setMajorGridEvery = function(value) {
|
||||||
|
majorGridEvery = value;
|
||||||
|
updateGrid();
|
||||||
|
};
|
||||||
|
|
||||||
|
that.getColorIndex = function() { return colorIndex; };
|
||||||
|
that.setColorIndex = function(value) {
|
||||||
|
colorIndex = value;
|
||||||
|
updateGrid();
|
||||||
|
};
|
||||||
|
|
||||||
that.getSnapToGrid = function() { return snapToGrid; };
|
that.getSnapToGrid = function() { return snapToGrid; };
|
||||||
|
that.setSnapToGrid = function(value) {
|
||||||
|
snapToGrid = value;
|
||||||
|
that.emitUpdate();
|
||||||
|
};
|
||||||
|
|
||||||
that.setEnabled = function(enabled) {
|
that.setEnabled = function(enabled) {
|
||||||
that.enabled = enabled;
|
that.enabled = enabled;
|
||||||
updateGrid();
|
updateGrid();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
that.getVisible = function() { return that.visible; };
|
||||||
that.setVisible = function(visible, noUpdate) {
|
that.setVisible = function(visible, noUpdate) {
|
||||||
that.visible = visible;
|
that.visible = visible;
|
||||||
updateGrid();
|
updateGrid();
|
||||||
|
|
@ -78,7 +104,7 @@ Grid = function(opts) {
|
||||||
dimensions = { x: 0, y: 0, z: 0 };
|
dimensions = { x: 0, y: 0, z: 0 };
|
||||||
}
|
}
|
||||||
|
|
||||||
var spacing = majorOnly ? (minorGridSpacing * majorGridEvery) : minorGridSpacing;
|
var spacing = majorOnly ? (minorGridWidth * majorGridEvery) : minorGridWidth;
|
||||||
|
|
||||||
position = Vec3.subtract(position, origin);
|
position = Vec3.subtract(position, origin);
|
||||||
|
|
||||||
|
|
@ -94,7 +120,7 @@ Grid = function(opts) {
|
||||||
return delta;
|
return delta;
|
||||||
}
|
}
|
||||||
|
|
||||||
var spacing = majorOnly ? (minorGridSpacing * majorGridEvery) : minorGridSpacing;
|
var spacing = majorOnly ? (minorGridWidth * majorGridEvery) : minorGridWidth;
|
||||||
|
|
||||||
var snappedDelta = {
|
var snappedDelta = {
|
||||||
x: Math.round(delta.x / spacing) * spacing,
|
x: Math.round(delta.x / spacing) * spacing,
|
||||||
|
|
@ -121,12 +147,11 @@ Grid = function(opts) {
|
||||||
if (that.onUpdate) {
|
if (that.onUpdate) {
|
||||||
that.onUpdate({
|
that.onUpdate({
|
||||||
origin: origin,
|
origin: origin,
|
||||||
minorGridSpacing: minorGridSpacing,
|
minorGridWidth: minorGridWidth,
|
||||||
majorGridEvery: majorGridEvery,
|
majorGridEvery: majorGridEvery,
|
||||||
gridSize: halfSize,
|
gridSize: halfSize,
|
||||||
visible: that.visible,
|
visible: that.visible,
|
||||||
snapToGrid: snapToGrid,
|
snapToGrid: snapToGrid,
|
||||||
gridColor: gridColor,
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
@ -144,16 +169,16 @@ Grid = function(opts) {
|
||||||
that.setPosition(pos, true);
|
that.setPosition(pos, true);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (data.minorGridSpacing) {
|
if (data.minorGridWidth) {
|
||||||
minorGridSpacing = data.minorGridSpacing;
|
minorGridWidth = data.minorGridWidth;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (data.majorGridEvery) {
|
if (data.majorGridEvery) {
|
||||||
majorGridEvery = data.majorGridEvery;
|
majorGridEvery = data.majorGridEvery;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (data.gridColor) {
|
if (data.colorIndex !== undefined) {
|
||||||
gridColor = data.gridColor;
|
colorIndex = data.colorIndex;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (data.gridSize) {
|
if (data.gridSize) {
|
||||||
|
|
@ -171,9 +196,9 @@ Grid = function(opts) {
|
||||||
Overlays.editOverlay(gridOverlay, {
|
Overlays.editOverlay(gridOverlay, {
|
||||||
position: { x: origin.y, y: origin.y, z: -origin.y },
|
position: { x: origin.y, y: origin.y, z: -origin.y },
|
||||||
visible: that.visible && that.enabled,
|
visible: that.visible && that.enabled,
|
||||||
minorGridWidth: minorGridSpacing,
|
minorGridWidth: minorGridWidth,
|
||||||
majorGridEvery: majorGridEvery,
|
majorGridEvery: majorGridEvery,
|
||||||
color: gridColor,
|
color: colors[colorIndex],
|
||||||
alpha: gridAlpha,
|
alpha: gridAlpha,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -199,46 +224,269 @@ Grid = function(opts) {
|
||||||
GridTool = function(opts) {
|
GridTool = function(opts) {
|
||||||
var that = {};
|
var that = {};
|
||||||
|
|
||||||
|
var UI_URL = HIFI_PUBLIC_BUCKET + "images/tools/grid-toolbar.svg";
|
||||||
|
var UI_WIDTH = 854;
|
||||||
|
var UI_HEIGHT = 37;
|
||||||
|
|
||||||
var horizontalGrid = opts.horizontalGrid;
|
var horizontalGrid = opts.horizontalGrid;
|
||||||
var verticalGrid = opts.verticalGrid;
|
|
||||||
var listeners = [];
|
|
||||||
|
|
||||||
var url = Script.resolvePath('html/gridControls.html');
|
var uiOverlays = {};
|
||||||
var webView = new WebWindow('Grid', url, 200, 280);
|
var allOverlays = [];
|
||||||
|
|
||||||
horizontalGrid.addListener(function(data) {
|
function addUIOverlay(key, overlay, x, y, width, height) {
|
||||||
webView.eventBridge.emitScriptEvent(JSON.stringify(data));
|
uiOverlays[key] = {
|
||||||
selectionDisplay.updateHandles();
|
overlay: overlay,
|
||||||
|
x: x,
|
||||||
|
y: y,
|
||||||
|
width: width,
|
||||||
|
height: height,
|
||||||
|
};
|
||||||
|
allOverlays.push(overlay);
|
||||||
|
}
|
||||||
|
|
||||||
|
var lastKnownWindowWidth = null;
|
||||||
|
function repositionUI() {
|
||||||
|
if (lastKnownWindowWidth == Window.innerWidth) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
lastKnownWindowWidth = Window.innerWidth;
|
||||||
|
var x = Window.innerWidth / 2 - UI_WIDTH / 2;
|
||||||
|
var y = 10;
|
||||||
|
|
||||||
|
for (var key in uiOverlays) {
|
||||||
|
info = uiOverlays[key];
|
||||||
|
Overlays.editOverlay(info.overlay, {
|
||||||
|
x: x + info.x,
|
||||||
|
y: y + info.y,
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
webView.eventBridge.webEventReceived.connect(function(data) {
|
// "Spritesheet" is laid out horizontally in this order
|
||||||
data = JSON.parse(data);
|
var UI_SPRITE_LIST = [
|
||||||
if (data.type == "init") {
|
{ name: "gridText", width: 54 },
|
||||||
horizontalGrid.emitUpdate();
|
{ name: "visibleCheckbox", width: 60 },
|
||||||
} else if (data.type == "update") {
|
{ name: "snapToGridCheckbox", width: 105 },
|
||||||
horizontalGrid.update(data);
|
|
||||||
for (var i = 0; i < listeners.length; i++) {
|
{ name: "color0", width: 27 },
|
||||||
listeners[i](data);
|
{ name: "color1", width: 27 },
|
||||||
|
{ name: "color2", width: 27 },
|
||||||
|
{ name: "color3", width: 27 },
|
||||||
|
{ name: "color4", width: 27 },
|
||||||
|
|
||||||
|
{ name: "minorGridIcon", width: 34 },
|
||||||
|
{ name: "minorGridDecrease", width: 25 },
|
||||||
|
{ name: "minorGridInput", width: 26 },
|
||||||
|
{ name: "minorGridIncrease", width: 25 },
|
||||||
|
|
||||||
|
{ name: "majorGridIcon", width: 40 },
|
||||||
|
{ name: "majorGridDecrease", width: 25 },
|
||||||
|
{ name: "majorGridInput", width: 26 },
|
||||||
|
{ name: "majorGridIncrease", width: 25 },
|
||||||
|
|
||||||
|
{ name: "yPositionLabel", width: 160 },
|
||||||
|
{ name: "moveToLabel", width: 54 },
|
||||||
|
{ name: "moveToAvatar", width: 26 },
|
||||||
|
{ name: "moveToSelection", width: 34 },
|
||||||
|
];
|
||||||
|
|
||||||
|
// Add all overlays from spritesheet
|
||||||
|
var baseOverlay = null;
|
||||||
|
var x = 0;
|
||||||
|
for (var i = 0; i < UI_SPRITE_LIST.length; i++) {
|
||||||
|
var info = UI_SPRITE_LIST[i];
|
||||||
|
|
||||||
|
var props = {
|
||||||
|
imageURL: UI_URL,
|
||||||
|
subImage: { x: x, y: 0, width: info.width, height: UI_HEIGHT },
|
||||||
|
width: info.width,
|
||||||
|
height: UI_HEIGHT,
|
||||||
|
alpha: 1.0,
|
||||||
|
visible: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
var overlay;
|
||||||
|
if (baseOverlay == null) {
|
||||||
|
overlay = Overlays.addOverlay("image", {
|
||||||
|
imageURL: UI_URL,
|
||||||
|
});
|
||||||
|
baseOverlay = overlay;
|
||||||
|
} else {
|
||||||
|
overlay = Overlays.cloneOverlay(baseOverlay);
|
||||||
}
|
}
|
||||||
} else if (data.type == "action") {
|
|
||||||
var action = data.action;
|
Overlays.editOverlay(overlay, props);
|
||||||
if (action == "moveToAvatar") {
|
|
||||||
grid.setPosition(MyAvatar.position);
|
addUIOverlay(info.name, overlay, x, 0, info.width, UI_HEIGHT);
|
||||||
} else if (action == "moveToSelection") {
|
|
||||||
var newPosition = selectionManager.worldPosition;
|
x += info.width;
|
||||||
newPosition = Vec3.subtract(newPosition, { x: 0, y: selectionManager.worldDimensions.y * 0.5, z: 0 });
|
|
||||||
grid.setPosition(newPosition);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Add Text overlays
|
||||||
|
var textProperties = {
|
||||||
|
color: { red: 255, green: 255, blue: 255 },
|
||||||
|
topMargin: 6,
|
||||||
|
leftMargin: 4,
|
||||||
|
alpha: 1,
|
||||||
|
backgroundAlpha: 0,
|
||||||
|
text: "",
|
||||||
|
font: { size: 12 },
|
||||||
|
visible: false,
|
||||||
|
};
|
||||||
|
var minorGridWidthText = Overlays.addOverlay("text", textProperties);
|
||||||
|
var majorGridEveryText = Overlays.addOverlay("text", textProperties);
|
||||||
|
var yPositionText = Overlays.addOverlay("text", textProperties);
|
||||||
|
|
||||||
|
addUIOverlay('minorGridWidthText', minorGridWidthText, 414, 8, 24, 24);
|
||||||
|
addUIOverlay('majorGridEveryText', majorGridEveryText, 530, 8, 24, 24);
|
||||||
|
addUIOverlay('yPositionText', yPositionText, 660, 8, 24, 24);
|
||||||
|
|
||||||
|
var NUM_COLORS = 5;
|
||||||
|
function updateColorIndex(index) {
|
||||||
|
if (index < 0 || index >= NUM_COLORS) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (var i = 0 ; i < NUM_COLORS; i++) {
|
||||||
|
var info = uiOverlays['color' + i];
|
||||||
|
Overlays.editOverlay(info.overlay, {
|
||||||
|
subImage: {
|
||||||
|
x: info.x,
|
||||||
|
y: i == index ? UI_HEIGHT : 0,
|
||||||
|
width: info.width,
|
||||||
|
height: info.height,
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
that.addListener = function(callback) {
|
function updateGridVisible(value) {
|
||||||
listeners.push(callback);
|
var info = uiOverlays.visibleCheckbox;
|
||||||
|
Overlays.editOverlay(info.overlay, {
|
||||||
|
subImage: {
|
||||||
|
x: info.x,
|
||||||
|
y: value ? UI_HEIGHT : 0,
|
||||||
|
width: info.width,
|
||||||
|
height: info.height,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateSnapToGrid(value) {
|
||||||
|
var info = uiOverlays.snapToGridCheckbox;
|
||||||
|
Overlays.editOverlay(info.overlay, {
|
||||||
|
subImage: {
|
||||||
|
x: info.x,
|
||||||
|
y: value ? UI_HEIGHT : 0,
|
||||||
|
width: info.width,
|
||||||
|
height: info.height,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateMinorGridWidth(value) {
|
||||||
|
Overlays.editOverlay(minorGridWidthText, {
|
||||||
|
text: value.toFixed(1),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateMajorGridEvery(value) {
|
||||||
|
Overlays.editOverlay(majorGridEveryText, {
|
||||||
|
text: value,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateYPosition(value) {
|
||||||
|
Overlays.editOverlay(yPositionText, {
|
||||||
|
text: value.toFixed(2),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateOverlays() {
|
||||||
|
updateGridVisible(horizontalGrid.getVisible());
|
||||||
|
updateSnapToGrid(horizontalGrid.getSnapToGrid());
|
||||||
|
updateColorIndex(horizontalGrid.getColorIndex());
|
||||||
|
|
||||||
|
updateMinorGridWidth(horizontalGrid.getMinorGridWidth());
|
||||||
|
updateMajorGridEvery(horizontalGrid.getMajorGridEvery());
|
||||||
|
|
||||||
|
updateYPosition(horizontalGrid.getOrigin().y);
|
||||||
}
|
}
|
||||||
|
|
||||||
that.setVisible = function(visible) {
|
that.setVisible = function(visible) {
|
||||||
webView.setVisible(visible);
|
for (var i = 0; i < allOverlays.length; i++) {
|
||||||
|
Overlays.editOverlay(allOverlays[i], { visible: visible });
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
that.mousePressEvent = function(event) {
|
||||||
|
var overlay = Overlays.getOverlayAtPoint({ x: event.x, y: event.y });
|
||||||
|
|
||||||
|
if (allOverlays.indexOf(overlay) >= 0) {
|
||||||
|
if (overlay == uiOverlays.color0.overlay) {
|
||||||
|
horizontalGrid.setColorIndex(0);
|
||||||
|
} else if (overlay == uiOverlays.color1.overlay) {
|
||||||
|
horizontalGrid.setColorIndex(1);
|
||||||
|
} else if (overlay == uiOverlays.color2.overlay) {
|
||||||
|
horizontalGrid.setColorIndex(2);
|
||||||
|
} else if (overlay == uiOverlays.color3.overlay) {
|
||||||
|
horizontalGrid.setColorIndex(3);
|
||||||
|
} else if (overlay == uiOverlays.color4.overlay) {
|
||||||
|
horizontalGrid.setColorIndex(4);
|
||||||
|
} else if (overlay == uiOverlays.visibleCheckbox.overlay) {
|
||||||
|
horizontalGrid.setVisible(!horizontalGrid.getVisible());
|
||||||
|
} else if (overlay == uiOverlays.snapToGridCheckbox.overlay) {
|
||||||
|
horizontalGrid.setSnapToGrid(!horizontalGrid.getSnapToGrid());
|
||||||
|
} else if (overlay == uiOverlays.moveToAvatar.overlay) {
|
||||||
|
horizontalGrid.setPosition(MyAvatar.position);
|
||||||
|
} else if (overlay == uiOverlays.moveToSelection.overlay) {
|
||||||
|
var newPosition = selectionManager.worldPosition;
|
||||||
|
newPosition = Vec3.subtract(newPosition, { x: 0, y: selectionManager.worldDimensions.y * 0.5, z: 0 });
|
||||||
|
horizontalGrid.setPosition(newPosition);
|
||||||
|
} else if (overlay == uiOverlays.minorGridDecrease.overlay) {
|
||||||
|
var newValue = Math.max(0.1, horizontalGrid.getMinorGridWidth() - 0.1);
|
||||||
|
horizontalGrid.setMinorGridWidth(newValue);
|
||||||
|
} else if (overlay == uiOverlays.minorGridIncrease.overlay) {
|
||||||
|
horizontalGrid.setMinorGridWidth(horizontalGrid.getMinorGridWidth() + 0.1);
|
||||||
|
} else if (overlay == uiOverlays.majorGridDecrease.overlay) {
|
||||||
|
var newValue = Math.max(2, horizontalGrid.getMajorGridEvery() - 1);
|
||||||
|
horizontalGrid.setMajorGridEvery(newValue);
|
||||||
|
} else if (overlay == uiOverlays.majorGridIncrease.overlay) {
|
||||||
|
horizontalGrid.setMajorGridEvery(horizontalGrid.getMajorGridEvery() + 1);
|
||||||
|
} else if (overlay == uiOverlays.yPositionLabel.overlay) {
|
||||||
|
var newValue = Window.prompt("Y Position:", horizontalGrid.getOrigin().y.toFixed(4));
|
||||||
|
if (newValue !== null) {
|
||||||
|
var y = parseFloat(newValue)
|
||||||
|
if (isNaN(y)) {
|
||||||
|
Window.alert("Invalid position");
|
||||||
|
} else {
|
||||||
|
horizontalGrid.setPosition({ x: 0, y: y, z: 0 });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Clicking anywhere within the toolbar will "consume" this press event
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
Script.scriptEnding.connect(function() {
|
||||||
|
for (var i = 0; i < allOverlays.length; i++) {
|
||||||
|
Overlays.deleteOverlay(allOverlays[i]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
Script.update.connect(repositionUI);
|
||||||
|
|
||||||
|
horizontalGrid.addListener(function() {
|
||||||
|
selectionDisplay.updateHandles();
|
||||||
|
updateOverlays();
|
||||||
|
});
|
||||||
|
|
||||||
|
updateOverlays();
|
||||||
|
repositionUI();
|
||||||
|
|
||||||
return that;
|
return that;
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue