update meta css and mode selections

This commit is contained in:
Stewart Allen 2020-03-18 23:33:15 -04:00
commit 296f7a52a4
6 changed files with 107 additions and 90 deletions

View file

@ -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();
} }

View file

@ -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 -->

View file

@ -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%;

View file

@ -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>

View file

@ -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;
} }

View file

@ -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;