Initial JS files for Edit Tools

This commit is contained in:
ksuprynowicz 2022-05-17 18:55:47 +02:00
parent f862030b1c
commit 0327d11c5a
9 changed files with 325 additions and 24 deletions

View file

@ -12,7 +12,7 @@
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
//
/* global Script, SelectionDisplay, LightOverlayManager, CameraManager, Grid, GridTool, EntityListTool, Vec3, SelectionManager,
/* global Script, SelectionDisplay, LightOverlayManager, CameraManager, Grid, GridTool, EditTools, EntityListTool, Vec3, SelectionManager,
Overlays, OverlayWebWindow, UserActivityLogger, Settings, Entities, Tablet, Toolbars, Messages, Menu, Camera,
progressDialog, tooltip, MyAvatar, Quat, Controller, Clipboard, HMD, UndoStack, OverlaySystemWindow,
keyUpEventFromUIWindow:true */
@ -37,7 +37,8 @@ Script.include([
"entityList/entityList.js",
"entitySelectionTool/entitySelectionTool.js",
"audioFeedback/audioFeedback.js",
"modules/brokenURLReport.js"
"modules/brokenURLReport.js",
"editModes/editModes.js"
]);
var CreateWindow = Script.require('./modules/createWindow.js');
@ -127,6 +128,10 @@ var gridTool = new GridTool({
});
gridTool.setVisible(false);
var editTools = new EditTools({
createToolsWindow: createToolsWindow,
});
var entityShapeVisualizerSessionName = "SHAPE_VISUALIZER_" + Uuid.generate();
var EntityShapeVisualizer = Script.require('./modules/entityShapeVisualizer.js');

View file

@ -0,0 +1,178 @@
//
// editModes.js
//
// Created by Karol Suprynowicz on 2022.05.15.
// Copyright 2022 Overte e.V.
//
// Partially based on gridTool.js
// Created by Ryan Huffman on 6 Nov 2014
// Copyright 2014 High Fidelity, Inc.
// Copyright 2020 Vircadia contributors.
// Copyright 2022 Overte e.V.
//
// This script implements a class for managing different edit modes
//
// Distributed under the Apache License, Version 2.0.
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
//
EditTools = function(options) {
var that = {};
var createAppMode = "object";
var voxelEditMode = "single";
var voxelSphereSize = 0.3;
var voxelEditDynamics = "click";
var voxelRemove = false;
var voxelPointerMode = "single";
var voxelBrushLength = 0.5;
var listeners = [];
var createToolsWindow = options.createToolsWindow;
that.emitUpdate = function() {
var dataString = JSON.stringify({
createAppMode : createAppMode,
voxelEditMode : voxelEditMode,
voxelSphereSize : voxelSphereSize,
voxelEditDynamics : voxelEditDynamics,
voxelRemove : voxelRemove,
voxelPointerMode : voxelPointerMode,
voxelBrushLength : voxelBrushLength,
});
webView.emitScriptEvent(dataString);
createToolsWindow.emitScriptEvent(dataString);
};
that.getCreateAppMode = function() {
return createAppMode;
}
that.setCreateAppMode = function(value) {
createAppMode = value;
that.emitUpdate();
}
that.getVoxelEditMode = function() {
return voxelEditMode;
}
that.setVoxelEditMode = function(value) {
voxelEditMode = value;
that.emitUpdate();
}
that.getVoxelSphereSize = function() {
return voxelSphereSize;
}
that.setVoxelSphereSize = function(value) {
voxelSphereSize = value;
that.emitUpdate();
}
that.getVoxelEditDynamics = function() {
return voxelEditDynamics;
}
that.setVoxelEditDynamics = function(value) {
voxelEditDynamics = value;
that.emitUpdate();
}
that.getVoxelRemove = function() {
return voxelRemove;
}
that.setVoxelRemove = function(value) {
voxelRemove = value;
that.emitUpdate();
}
that.getVoxelPointerMode = function() {
return voxelPointerMode;
}
that.setVoxelPointerMode = function(value) {
voxelPointerMode = value;
that.emitUpdate();
}
that.getVoxelBrushLength = function() {
return voxelBrushLength;
}
that.setVoxelBrushLength = function(value) {
voxelBrushLength = value;
that.emitUpdate();
}
that.update = function(data) {
if (data.type !== "update-edit-tools") {
return;
}
var needsUpdate = false;
if (data.createAppMode) {
createAppMode = data.createAppMode;
needsUpdate = true;
}
if (data.voxelEditMode) {
voxelEditMode = data.voxelEditMode;
needsUpdate = true;
}
if (data.voxelSphereSize) {
voxelSphereSize = data.voxelSphereSize;
needsUpdate = true;
}
if (data.voxelEditDynamics) {
voxelEditDynamics = data.voxelEditDynamics;
needsUpdate = true;
}
if (data.voxelRemove) {
voxelRemove = data.voxelRemove;
needsUpdate = true;
}
if (data.voxelPointerMode) {
voxelPointerMode = data.voxelPointerMode;
needsUpdate = true;
}
if (data.voxelBrushLength) {
voxelBrushLength = data.voxelBrushLength;
needsUpdate = true;
}
}
var webEventReceived = function(data) {
try {
data = JSON.parse(data);
} catch (e) {
return;
}
if (data.type === "init") {
that.emitUpdate();
} else if (data.type === "update-edit-tools") {
that.update(data);
for (var i = 0; i < listeners.length; i++) {
listeners[i] && listeners[i](data);
}
}
};
var webView = null;
webView = Tablet.getTablet("com.highfidelity.interface.tablet.system");
webView.webEventReceived.connect(webEventReceived);
createToolsWindow.webEventReceived.addListener(webEventReceived);
that.addListener = function(callback) {
listeners.push(callback);
};
function cleanup() {
}
return that;
}

View file

@ -286,7 +286,7 @@ TabBar {
}
EditTabButton {
title: "GRID"
title: "TOOLS"
active: true
enabled: true
property string originalUrl: ""

View file

@ -276,7 +276,7 @@ TabBar {
}
EditTabButton {
title: "GRID"
title: "TOOLS"
active: true
enabled: true
property string originalUrl: ""

View file

@ -74,39 +74,39 @@ Rectangle {
switch (currentIndex) {
// Clear texture entries
case 0:
xTextureURL.text = ""
yTextureURL.text = ""
zTextureURL.text = ""
xTextureURL.text = "";
yTextureURL.text = "";
zTextureURL.text = "";
break;
// Grass + ground
case 1:
xTextureURL.text = "qrc:///serverless/Textures/ground_5-2K/2K-ground_5-diffuse.jpg"
yTextureURL.text = "qrc:///serverless/Textures/ground_grass_gen_05.png"
zTextureURL.text = "qrc:///serverless/Textures/ground_5-2K/2K-ground_5-diffuse.jpg"
xTextureURL.text = "qrc:///serverless/Textures/ground_5-2K/2K-ground_5-diffuse.jpg";
yTextureURL.text = "qrc:///serverless/Textures/ground_grass_gen_05.png";
zTextureURL.text = "qrc:///serverless/Textures/ground_5-2K/2K-ground_5-diffuse.jpg";
break;
// Bricks
case 2:
xTextureURL.text = "qrc:///serverless/Textures/2K-wall_stone_2-diffuse_l.jpg"
yTextureURL.text = "qrc:///serverless/Textures/2K-stone_floor_3-diffuse_l.jpg"
zTextureURL.text = "qrc:///serverless/Textures/2K-wall_stone_2-diffuse_l.jpg"
xTextureURL.text = "qrc:///serverless/Textures/2K-wall_stone_2-diffuse_l.jpg";
yTextureURL.text = "qrc:///serverless/Textures/2K-stone_floor_3-diffuse_l.jpg";
zTextureURL.text = "qrc:///serverless/Textures/2K-wall_stone_2-diffuse_l.jpg";
break;
// Stone
case 3:
xTextureURL.text = "qrc:///serverless/Textures/wall_l.png"
yTextureURL.text = "qrc:///serverless/Textures/floor_l.png"
zTextureURL.text = "qrc:///serverless/Textures/wall_l.png"
xTextureURL.text = "qrc:///serverless/Textures/wall_l.png";
yTextureURL.text = "qrc:///serverless/Textures/floor_l.png";
zTextureURL.text = "qrc:///serverless/Textures/wall_l.png";
break;
// Concrete
case 4:
xTextureURL.text = "qrc:///serverless/Textures/concrete_12-2K/2K-concrete_12-diffuse.jpg"
yTextureURL.text = "qrc:///serverless/Textures/concrete_12-2K/2K-concrete_12-diffuse.jpg"
zTextureURL.text = "qrc:///serverless/Textures/concrete_12-2K/2K-concrete_12-diffuse.jpg"
xTextureURL.text = "qrc:///serverless/Textures/concrete_12-2K/2K-concrete_12-diffuse.jpg";
yTextureURL.text = "qrc:///serverless/Textures/concrete_12-2K/2K-concrete_12-diffuse.jpg";
zTextureURL.text = "qrc:///serverless/Textures/concrete_12-2K/2K-concrete_12-diffuse.jpg";
break;
// Rock
case 5:
xTextureURL.text = "qrc:///serverless/Textures/Rock026_2K-JPG/Rock026_2K_Color.jpg"
yTextureURL.text = "qrc:///serverless/Textures/Rock026_2K-JPG/Rock026_2K_Color.jpg"
zTextureURL.text = "qrc:///serverless/Textures/Rock026_2K-JPG/Rock026_2K_Color.jpg"
xTextureURL.text = "qrc:///serverless/Textures/Rock026_2K-JPG/Rock026_2K_Color.jpg";
yTextureURL.text = "qrc:///serverless/Textures/Rock026_2K-JPG/Rock026_2K_Color.jpg";
zTextureURL.text = "qrc:///serverless/Textures/Rock026_2K-JPG/Rock026_2K_Color.jpg";
break;
}
}

View file

@ -3,6 +3,7 @@
//
// Created by Ryan Huffman on 6 Nov 2014
// Copyright 2014 High Fidelity, Inc.
// Copyright 2022 Overte e.V.
//
// Distributed under the Apache License, Version 2.0.
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
@ -20,7 +21,55 @@
<script type="text/javascript" src="js/gridControls.js"></script>
</head>
<body onload='loaded();'>
<div id="mode-section" class="section">
<div class="property container">
<label for="create-app-mode">Create app mode </label>
<select name="create-app-mode" id="create-app-mode">
<option value="object">Object mode</option>
<option value="voxel">Voxel edit mode</option>
</select>
</div>
</div>
<div id="voxels-section" class="section">
<h2>Voxel edit settings</h2>
<div class="property container">
<label for="voxel-edit-mode">Voxel edit mode </label>
<select name="voxel-edit-mode" id="voxel-edit-mode">
<option value="single">Single voxels</option>
<option value="sphere">Spheres</option>
<option value="cube">Cubes</option>
</select>
<label for="voxel-sphere-size">&nbsp;&nbsp;Sphere/cube size <span class="unit">m</span></label>
<div class="number">
<input type="number" id="voxel-sphere-size" min="0.01" step="0.2" />
</div>
</div>
<div class="property container">
<label for="voxel-edit-dynamics">Voxel edit dynamics </label>
<select name="voxel-edit-dynamics" id="voxel-edit-dynamics">
<option value="click">Modify on click</option>
<option value="continuous">Continuous</option>
</select>
<label for="voxel-remove">&nbsp;&nbsp;Remove voxels</label>
<div style="width: 100%">
<input type='checkbox' id="voxel-remove" style="width: 100%">
<label for="voxel-remove">&nbsp;</label>
</div>
</div>
<div class="property container">
<label for="voxel-pointer-mode">VR pointer mode </label>
<select name="voxel-pointer-mode" id="voxel-pointer-mode">
<option value="single">Laser pointer</option>
<option value="sphere">Brush</option>
</select>
<label for="voxel-brush-length">&nbsp;&nbsp;Brush length <span class="unit">m</span></label>
<div class="number">
<input type="number" id="voxel-brush-length" min="0.2" step="0.2" />
</div>
</div>
</div>
<div id="grid-section" class="section">
<h2>Grid settings</h2>
<div class="property container">
<label for="horiz-grid-visible">Visible</label>
<div style="width: 100%">

View file

@ -2,12 +2,21 @@
//
// Created by Ryan Huffman on 6 Nov 2014
// Copyright 2014 High Fidelity, Inc.
// Copyright 2022 Overte e.V.
//
// Distributed under the Apache License, Version 2.0.
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
function loaded() {
openEventBridge(function() {
elCreateAppMode = document.getElementById("create-app-mode");
elVoxelEditMode = document.getElementById("voxel-edit-mode");
elVoxelSphereSize = document.getElementById("voxel-sphere-size");
elVoxelEditDynamics = document.getElementById("voxel-edit-dynamics");
elVoxelRemove = document.getElementById("voxel-remove");
elVoxelPointerMode = document.getElementById("voxel-pointer-mode");
elVoxelBrushLength = document.getElementById("voxel-brush-length");
elPosY = document.getElementById("horiz-y");
elMinorSpacing = document.getElementById("minor-spacing");
elMajorSpacing = document.getElementById("major-spacing");
@ -20,6 +29,34 @@ function loaded() {
EventBridge.scriptEventReceived.connect(function(data) {
data = JSON.parse(data);
if (data.createAppMode !== undefined) {
elCreateAppMode.value = data.createAppMode;
}
if (data.voxelEditMode !== undefined) {
elVoxelEditMode.value = data.voxelEditMode;
}
if (data.voxelSphereSize !== undefined) {
elVoxelSphereSize.value = data.voxelSphereSize;
}
if (data.voxelEditDynamics !== undefined) {
elVoxelEditDynamics.value = data.voxelEditDynamics;
}
if (data.voxelRemove !== undefined) {
elVoxelRemove.checked = data.voxelRemove == true;
}
if (data.voxelPointerMode !== undefined) {
elVoxelPointerMode.value = data.voxelPointerMode;
}
if (data.voxelBrushLength !== undefined) {
elVoxelBrushLength.value = data.voxelBrushLength;
}
if (data.origin) {
var origin = data.origin;
elPosY.value = origin.y;
@ -60,8 +97,28 @@ function loaded() {
}));
}
function emitUpdateEditTools() {
EventBridge.emitWebEvent(JSON.stringify({
type: "update-edit-tools",
createAppMode: elCreateAppMode.value,
voxelEditMode: elVoxelEditMode.value,
voxelSphereSize: elVoxelSphereSize.value,
voxelEditDynamics: elVoxelEditDynamics.value,
voxelRemove: elVoxelRemove.checked,
voxelPointerMode: elVoxelPointerMode.value,
voxelBrushLength: elVoxelBrushLength.value,
}));
}
}
elCreateAppMode.addEventListener("change", emitUpdateEditTools);
elVoxelEditMode.addEventListener("change", emitUpdateEditTools);
elVoxelSphereSize.addEventListener("change", emitUpdateEditTools);
elVoxelEditDynamics.addEventListener("change", emitUpdateEditTools);
elVoxelRemove.addEventListener("change", emitUpdateEditTools);
elVoxelPointerMode.addEventListener("change", emitUpdateEditTools);
elVoxelBrushLength.addEventListener("change", emitUpdateEditTools);
elPosY.addEventListener("change", emitUpdate);
elMinorSpacing.addEventListener("change", emitUpdate);
elMajorSpacing.addEventListener("change", emitUpdate);

View file

@ -508,4 +508,4 @@
});
</script>
</body>
</html>
</html>

View file

@ -3,6 +3,7 @@
// Created by Ryan Huffman on 6 Nov 2014
// Copyright 2014 High Fidelity, Inc.
// Copyright 2020 Vircadia contributors.
// Copyright 2022 Overte e.V.
//
// Distributed under the Apache License, Version 2.0.
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
@ -196,8 +197,11 @@ Grid = function() {
};
that.update = function(data) {
var gridNeedsUpdate = false;
if (data.snapToGrid !== undefined) {
snapToGrid = data.snapToGrid;
var gridNeedsUpdate = true;
}
if (data.origin) {
@ -206,29 +210,37 @@ Grid = function() {
pos.y = pos.y === undefined ? origin.y : parseFloat(pos.y);
pos.z = pos.z === undefined ? origin.z : parseFloat(pos.z);
that.setPosition(pos, true);
var gridNeedsUpdate = true;
}
if (data.minorGridEvery) {
minorGridEvery = data.minorGridEvery;
var gridNeedsUpdate = true;
}
if (data.majorGridEvery) {
majorGridEvery = data.majorGridEvery;
var gridNeedsUpdate = true;
}
if (data.gridColor) {
gridColor = data.gridColor;
var gridNeedsUpdate = true;
}
if (data.gridSize) {
halfSize = data.gridSize;
var gridNeedsUpdate = true;
}
if (data.visible !== undefined) {
that.setVisible(data.visible, true);
var gridNeedsUpdate = true;
}
updateGrid(true);
if (gridNeedsUpdate) {
updateGrid(true);
}
};
function updateGrid(noUpdate) {