update meta css and mode selections
This commit is contained in:
parent
e4a814902d
commit
296f7a52a4
6 changed files with 107 additions and 90 deletions
113
js/meta.js
113
js/meta.js
|
|
@ -116,12 +116,14 @@ THREE.Face3.prototype.mVisible = function(show) {
|
||||||
DRILL: 4,
|
DRILL: 4,
|
||||||
CUBE: 5
|
CUBE: 5
|
||||||
},
|
},
|
||||||
|
SELECT_NEXT = [1, 4,3,1,5,2],
|
||||||
MARK = {
|
MARK = {
|
||||||
NONE: 1,
|
NONE: 1,
|
||||||
EMIT: 2,
|
EMIT: 2,
|
||||||
SLIDE: 3,
|
SLIDE: 3,
|
||||||
CLEAR: 5
|
CLEAR: 5
|
||||||
},
|
},
|
||||||
|
MARK_NEXT = [2, 2,3,5,2,2],
|
||||||
COLOR = {
|
COLOR = {
|
||||||
ADD: 0x00ff00,
|
ADD: 0x00ff00,
|
||||||
SELECT: 0xffff00,
|
SELECT: 0xffff00,
|
||||||
|
|
@ -401,15 +403,9 @@ THREE.Face3.prototype.mVisible = function(show) {
|
||||||
UC.newButton('mirror', mirrorSelection )
|
UC.newButton('mirror', mirrorSelection )
|
||||||
],[
|
],[
|
||||||
UC.newButton('solidify', convertSelection ),
|
UC.newButton('solidify', convertSelection ),
|
||||||
UC.newButton('clear', selectionClearMesh )
|
UC.newButton('unmesh', selectionClearMesh )
|
||||||
],[
|
|
||||||
UC.newButton('to meshes', selectionToLibrary )
|
|
||||||
],[
|
|
||||||
UC.newButton('to kiri:moto', selectionToKiri )
|
|
||||||
],[
|
|
||||||
UC.newButton('download STL', downloadSelection )
|
|
||||||
]
|
]
|
||||||
]);
|
]),
|
||||||
UC.newGroup('select').setAttribute("title","criteria for choosing the selection");
|
UC.newGroup('select').setAttribute("title","criteria for choosing the selection");
|
||||||
UC.newTableRow([
|
UC.newTableRow([
|
||||||
[ selCube, selRegion ],
|
[ selCube, selRegion ],
|
||||||
|
|
@ -449,6 +445,15 @@ THREE.Face3.prototype.mVisible = function(show) {
|
||||||
UC.newButton('center', function() { setAnchorSelection(0,0,0) })
|
UC.newButton('center', function() { setAnchorSelection(0,0,0) })
|
||||||
]
|
]
|
||||||
]);
|
]);
|
||||||
|
UC.newGroup('send').setAttribute("title","send selection to target");
|
||||||
|
UC.newTableRow([
|
||||||
|
[
|
||||||
|
UC.newButton('mesh', selectionToLibrary ),
|
||||||
|
UC.newButton('kiri', selectionToKiri )
|
||||||
|
],[
|
||||||
|
UC.newButton('download', downloadSelection )
|
||||||
|
]
|
||||||
|
]);
|
||||||
|
|
||||||
UC.newGroup('space', control);
|
UC.newGroup('space', control);
|
||||||
UI.name = UC.newInput('name', {size:10});
|
UI.name = UC.newInput('name', {size:10});
|
||||||
|
|
@ -516,9 +521,9 @@ THREE.Face3.prototype.mVisible = function(show) {
|
||||||
/** and a few more settings before we're done */
|
/** and a few more settings before we're done */
|
||||||
|
|
||||||
setGridSize(gridSize);
|
setGridSize(gridSize);
|
||||||
setMarkMode(MARK.NONE);
|
|
||||||
setEditMode(EDIT.SELECT);
|
setEditMode(EDIT.SELECT);
|
||||||
setSelectMode(SDB['meta-smode']);
|
setMarkMode(SDB['meta-mmode'] || MARK.EMIT);
|
||||||
|
setSelectMode(SDB['meta-smode'] || SELECT.REGION);
|
||||||
setSpaceUnits('1 cm');
|
setSpaceUnits('1 cm');
|
||||||
|
|
||||||
restoreWorkspace();
|
restoreWorkspace();
|
||||||
|
|
@ -601,7 +606,6 @@ THREE.Face3.prototype.mVisible = function(show) {
|
||||||
switch(evt.keyCode) {
|
switch(evt.keyCode) {
|
||||||
case 27: // escape
|
case 27: // escape
|
||||||
clearSelections();
|
clearSelections();
|
||||||
setEditMode(EDIT.SELECT);
|
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
|
|
@ -707,64 +711,81 @@ THREE.Face3.prototype.mVisible = function(show) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
function setEditMode(mode,term) {
|
function updateHighlights(map,key) {
|
||||||
for (let key in editModeButtons) {
|
let val = parseInt(key);
|
||||||
if (!editModeButtons.hasOwnProperty(key)) continue;
|
for (let key in map) {
|
||||||
editModeButtons[key].setAttribute('class', parseInt(key) === parseInt(mode) ? 'buton' : 'butoff');
|
let button = map[key];
|
||||||
|
let classes = button.classList;
|
||||||
|
if (parseInt(key) === val) {
|
||||||
|
classes.add('buton');
|
||||||
|
} else {
|
||||||
|
classes.remove('buton');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
if (mode === null) return;
|
}
|
||||||
mode = parseInt(mode);
|
|
||||||
if (term && mode === editMode) return;
|
function focusInput() {
|
||||||
editMode = mode;
|
if (DOC.activeElement) DOC.activeElement.blur();
|
||||||
setMarkMode(mode === EDIT.MARK ? markMode : null,true);
|
DOC.body.focus();
|
||||||
setSelectMode(mode === EDIT.SELECT ? selectMode : null,true);
|
}
|
||||||
scheduleUpdateFaces();
|
|
||||||
|
function setEditMode(newmode,term) {
|
||||||
|
focusInput();
|
||||||
|
updateHighlights(editModeButtons,newmode);
|
||||||
|
if (newmode === null) return;
|
||||||
|
let sameMode = newmode == editMode;
|
||||||
|
editMode = parseInt(newmode);
|
||||||
|
if (term) return;
|
||||||
let color = 0xffffff;
|
let color = 0xffffff;
|
||||||
switch (mode) {
|
let newSelect = null;
|
||||||
|
let newMark = null;
|
||||||
|
switch (editMode) {
|
||||||
case EDIT.ADD: color = COLOR.ADD; break;
|
case EDIT.ADD: color = COLOR.ADD; break;
|
||||||
case EDIT.DELETE: color = COLOR.DELETE; break;
|
case EDIT.DELETE: color = COLOR.DELETE; break;
|
||||||
case EDIT.SELECT: color = COLOR.SELECT; break;
|
case EDIT.SELECT:
|
||||||
|
newSelect = sameMode ? SELECT_NEXT[selectMode] : selectMode;
|
||||||
|
color = COLOR.SELECT;
|
||||||
|
break;
|
||||||
case EDIT.CLONE: color = COLOR.CLONE; break;
|
case EDIT.CLONE: color = COLOR.CLONE; break;
|
||||||
|
case EDIT.MARK:
|
||||||
|
newMark = sameMode ? MARK_NEXT[markMode] : markMode;
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
|
setSelectMode(newSelect,true);
|
||||||
|
setMarkMode(newMark,true);
|
||||||
|
// updateHighlights(selectModeButtons,editMode === EDIT.SELECT ? selectMode : null);
|
||||||
|
// updateHighlights(markTypeButtons,editMode === EDIT.MARK ? markMode : null);
|
||||||
|
scheduleUpdateFaces();
|
||||||
hoverMaterial.color.setHex(color);
|
hoverMaterial.color.setHex(color);
|
||||||
SPACE.update();
|
SPACE.update();
|
||||||
}
|
}
|
||||||
|
|
||||||
function setSelectMode(mode,term) {
|
function setSelectMode(newmode,term) {
|
||||||
for (let key in selectModeButtons) {
|
updateHighlights(selectModeButtons,newmode);
|
||||||
if (!selectModeButtons.hasOwnProperty(key)) continue;
|
if (newmode == null) return;
|
||||||
selectModeButtons[key].setAttribute('class', parseInt(key) === parseInt(mode) ? 'buton' : 'butoff');
|
selectMode = parseInt(newmode);
|
||||||
}
|
if (term) return;
|
||||||
if (mode == null) return;
|
|
||||||
mode = parseInt(mode);
|
|
||||||
if (term && mode === selectMode) return;
|
|
||||||
selectMode = mode;
|
|
||||||
setMarkMode(null,true);
|
|
||||||
setEditMode(EDIT.SELECT,true);
|
setEditMode(EDIT.SELECT,true);
|
||||||
scheduleUpdateFaces();
|
scheduleUpdateFaces();
|
||||||
SDB['meta-smode'] = mode;
|
SDB['meta-smode'] = selectMode;
|
||||||
}
|
}
|
||||||
|
|
||||||
function setMarkMode(mode,term) {
|
function setMarkMode(newmode,term) {
|
||||||
for (let key in markTypeButtons) {
|
updateHighlights(markTypeButtons,newmode);
|
||||||
if (!markTypeButtons.hasOwnProperty(key)) continue;
|
if (newmode === null) return;
|
||||||
markTypeButtons[key].setAttribute('class', parseInt(key) === parseInt(mode) ? 'buton' : 'butoff');
|
markMode = parseInt(newmode);
|
||||||
}
|
|
||||||
if (mode === null) return;
|
|
||||||
mode = parseInt(mode);
|
|
||||||
if (term && mode === markMode) return;
|
|
||||||
markMode = mode;
|
|
||||||
selectedFace = null;
|
selectedFace = null;
|
||||||
setSelectMode(selectMode,true);
|
if (term) return;
|
||||||
setEditMode(EDIT.MARK,true);
|
setEditMode(EDIT.MARK,true);
|
||||||
scheduleUpdateFaces();
|
scheduleUpdateFaces();
|
||||||
let color = COLOR.SELECT;
|
let color = COLOR.SELECT;
|
||||||
switch (mode) {
|
switch (markMode) {
|
||||||
case MARK.EMIT: color = COLOR.EMIT; break;
|
case MARK.EMIT: color = COLOR.EMIT; break;
|
||||||
case MARK.SLIDE: color = COLOR.SLIDE; break;
|
case MARK.SLIDE: color = COLOR.SLIDE; break;
|
||||||
case MARK.CLEAR: color = COLOR.CLEAR; break;
|
case MARK.CLEAR: color = COLOR.CLEAR; break;
|
||||||
}
|
}
|
||||||
hoverMaterial.color.setHex(color);
|
hoverMaterial.color.setHex(color);
|
||||||
|
SDB['meta-mmode'] = markMode;
|
||||||
SPACE.update();
|
SPACE.update();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -21,9 +21,7 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!-- app title home page links -->
|
<!-- app title home page links -->
|
||||||
<div id="appid">
|
<div id="appid"><span><a href="#" id="appname">Kiri:Moto</a> by <a href="/" target="home">Grid.Space</a></span></div>
|
||||||
<span><a href="#" id="appname">Kiri:Moto</a> by <a href="/" target="home">Grid.Space</a></span>
|
|
||||||
</div>
|
|
||||||
<!-- left control menu -->
|
<!-- left control menu -->
|
||||||
<div id="control-left" class="control"><div id="assets"></div></div>
|
<div id="control-left" class="control"><div id="assets"></div></div>
|
||||||
<!-- right control menu -->
|
<!-- right control menu -->
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,6 @@
|
||||||
th, tr, td, span, div, label, button {
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
input[type=range]::-moz-focus-outer {
|
input[type=range]::-moz-focus-outer {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
select {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
.dialog {
|
.dialog {
|
||||||
display: none;
|
display: none;
|
||||||
color: black;
|
color: black;
|
||||||
|
|
@ -62,26 +56,6 @@ select {
|
||||||
#stock,#selection {
|
#stock,#selection {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
#appid {
|
|
||||||
text-align: center;
|
|
||||||
position: fixed;
|
|
||||||
width: 100%;
|
|
||||||
top: 3px;
|
|
||||||
}
|
|
||||||
#appid span {
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 5px;
|
|
||||||
padding: 5px 8px 3px 8px;
|
|
||||||
background-color: rgba(170,221,255,0.75);
|
|
||||||
color: rgba(0,0,0,0.5);
|
|
||||||
}
|
|
||||||
#appid a {
|
|
||||||
color: rgba(0,0,0,0.75);
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
#appid a:hover {
|
|
||||||
color: rgba(0,50,50,0.75);
|
|
||||||
}
|
|
||||||
#container {
|
#container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
|
||||||
|
|
@ -16,8 +16,12 @@
|
||||||
<script src="/code/meta.js"></script>
|
<script src="/code/meta.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="control-left"><div id="assets"><div class="title"><a href="/"><span>grid</span>:<span>space</span></a></div></div></div>
|
<!-- app title home page links -->
|
||||||
<div id="control-right"><div id="control"><div class="title"><a href="/meta/"><span>meta</span>:<span>moto</span></a></div></div></div>
|
<div id="appid"><span><a href="#" id="appname">Meta:Moto</a> by <a href="/" target="home">Grid.Space</a></span></div>
|
||||||
|
<!-- left control menu -->
|
||||||
|
<div id="control-left" class="control"><div id="assets"></div></div>
|
||||||
|
<!-- right control menu -->
|
||||||
|
<div id="control-right" class="control"><div id="control"></div></div>
|
||||||
<div id="container"></div>
|
<div id="container"></div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
.ck_space button {
|
.ck_space button {
|
||||||
margin: 2px 0px 1px 2px !important;
|
margin: 2px 0px 1px 2px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ck_spaces {
|
.ck_spaces {
|
||||||
padding-top: 2px;
|
padding-top: 2px;
|
||||||
}
|
}
|
||||||
|
|
@ -19,7 +18,6 @@
|
||||||
.ck_spaces button {
|
.ck_spaces button {
|
||||||
margin: 0px 0px 1px 2px !important;
|
margin: 0px 0px 1px 2px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ck_meshes {
|
.ck_meshes {
|
||||||
padding-top: 2px;
|
padding-top: 2px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -48,6 +48,12 @@ button[load] {
|
||||||
button[del] {
|
button[del] {
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
|
select {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
th, tr, td, span, div, label, button {
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
/** ******************************************************************
|
/** ******************************************************************
|
||||||
* Class
|
* Class
|
||||||
|
|
@ -187,8 +193,7 @@ button[del] {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
.control input[disabled] {
|
.control input[disabled] {
|
||||||
background-color: #aaa;
|
background-color: #ccc;
|
||||||
border-color: #bbb;
|
|
||||||
color: #000;
|
color: #000;
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
}
|
}
|
||||||
|
|
@ -207,14 +212,31 @@ button[del] {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
#control-left:hover, #control-right:hover {
|
|
||||||
background-color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** ******************************************************************
|
/** ******************************************************************
|
||||||
* ID
|
* ID
|
||||||
******************************************************************* */
|
******************************************************************* */
|
||||||
|
|
||||||
|
#appid {
|
||||||
|
text-align: center;
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
top: 3px;
|
||||||
|
}
|
||||||
|
#appid span {
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 5px 8px 3px 8px;
|
||||||
|
background-color: rgba(170,221,255,0.75);
|
||||||
|
color: rgba(0,0,0,0.5);
|
||||||
|
}
|
||||||
|
#appid a {
|
||||||
|
color: rgba(0,0,0,0.75);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
#appid a:hover {
|
||||||
|
color: rgba(0,50,50,0.75);
|
||||||
|
}
|
||||||
#container {
|
#container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
@ -236,12 +258,6 @@ button[del] {
|
||||||
background-color: rgba(255,255,255,0.75);
|
background-color: rgba(255,255,255,0.75);
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
}
|
}
|
||||||
#control-left::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
#control-right::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
#control-right {
|
#control-right {
|
||||||
display: none;
|
display: none;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
@ -260,6 +276,12 @@ button[del] {
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
overflow-x: visible;
|
overflow-x: visible;
|
||||||
}
|
}
|
||||||
|
#control-left::-webkit-scrollbar, #control-right::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#control-left:hover, #control-right:hover {
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
#loading {
|
#loading {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 5px;
|
top: 5px;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue