update meta css and mode selections

2020-03-18 23:33:15 -04:00 · 2020-03-18 23:33:15 -04:00 · 296f7a52a4
commit 296f7a52a4
parent e4a814902d
6 changed files with 107 additions and 90 deletions
--- a/js/meta.js
+++ b/js/meta.js
@ -116,12 +116,14 @@ THREE.Face3.prototype.mVisible = function(show) {
            DRILL: 4,
            CUBE: 5
        },
+        SELECT_NEXT = [1, 4,3,1,5,2],
        MARK = {
            NONE: 1,
            EMIT: 2,
            SLIDE: 3,
            CLEAR: 5
        },
+        MARK_NEXT = [2, 2,3,5,2,2],
        COLOR = {
            ADD: 0x00ff00,
            SELECT: 0xffff00,
@ -401,15 +403,9 @@ THREE.Face3.prototype.mVisible = function(show) {
                UC.newButton('mirror',       mirrorSelection    )
            ],[
                UC.newButton('solidify',     convertSelection   ),
-                UC.newButton('clear',        selectionClearMesh )
-            ],[
-                UC.newButton('to meshes',    selectionToLibrary )
-            ],[
-                UC.newButton('to kiri:moto', selectionToKiri    )
-            ],[
-                UC.newButton('download STL', downloadSelection  )
+                UC.newButton('unmesh',       selectionClearMesh )
            ]
-        ]);
+        ]),
        UC.newGroup('select').setAttribute("title","criteria for choosing the selection");
        UC.newTableRow([
            [ selCube, selRegion ],
@ -449,6 +445,15 @@ THREE.Face3.prototype.mVisible = function(show) {
                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);
        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 */

        setGridSize(gridSize);
-        setMarkMode(MARK.NONE);
        setEditMode(EDIT.SELECT);
-        setSelectMode(SDB['meta-smode']);
+        setMarkMode(SDB['meta-mmode'] || MARK.EMIT);
+        setSelectMode(SDB['meta-smode'] || SELECT.REGION);
        setSpaceUnits('1 cm');

        restoreWorkspace();
@ -601,7 +606,6 @@ THREE.Face3.prototype.mVisible = function(show) {
        switch(evt.keyCode) {
            case 27: // escape
                clearSelections();
-                setEditMode(EDIT.SELECT);
                break;
        }
        return false;
@ -707,64 +711,81 @@ THREE.Face3.prototype.mVisible = function(show) {
        return false;
    }

-    function setEditMode(mode,term) {
-        for (let key in editModeButtons) {
-            if (!editModeButtons.hasOwnProperty(key)) continue;
-            editModeButtons[key].setAttribute('class', parseInt(key) === parseInt(mode) ? 'buton' : 'butoff');
+    function updateHighlights(map,key) {
+        let val = parseInt(key);
+        for (let key in map) {
+            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;
-        editMode = mode;
-        setMarkMode(mode === EDIT.MARK ? markMode : null,true);
-        setSelectMode(mode === EDIT.SELECT ? selectMode : null,true);
-        scheduleUpdateFaces();
+    }
+
+    function focusInput() {
+        if (DOC.activeElement) DOC.activeElement.blur();
+        DOC.body.focus();
+    }
+
+    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;
-        switch (mode) {
+        let newSelect = null;
+        let newMark = null;
+        switch (editMode) {
            case EDIT.ADD: color = COLOR.ADD; 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.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);
        SPACE.update();
    }

-    function setSelectMode(mode,term) {
-        for (let key in selectModeButtons) {
-            if (!selectModeButtons.hasOwnProperty(key)) continue;
-            selectModeButtons[key].setAttribute('class', parseInt(key) === parseInt(mode) ? 'buton' : 'butoff');
-        }
-        if (mode == null) return;
-        mode = parseInt(mode);
-        if (term && mode === selectMode) return;
-        selectMode = mode;
-        setMarkMode(null,true);
+    function setSelectMode(newmode,term) {
+        updateHighlights(selectModeButtons,newmode);
+        if (newmode == null) return;
+        selectMode = parseInt(newmode);
+        if (term) return;
        setEditMode(EDIT.SELECT,true);
        scheduleUpdateFaces();
-        SDB['meta-smode'] = mode;
+        SDB['meta-smode'] = selectMode;
    }

-    function setMarkMode(mode,term) {
-        for (let key in markTypeButtons) {
-            if (!markTypeButtons.hasOwnProperty(key)) continue;
-            markTypeButtons[key].setAttribute('class', parseInt(key) === parseInt(mode) ? 'buton' : 'butoff');
-        }
-        if (mode === null) return;
-        mode = parseInt(mode);
-        if (term && mode === markMode) return;
-        markMode = mode;
+    function setMarkMode(newmode,term) {
+        updateHighlights(markTypeButtons,newmode);
+        if (newmode === null) return;
+        markMode = parseInt(newmode);
        selectedFace = null;
-        setSelectMode(selectMode,true);
+        if (term) return;
        setEditMode(EDIT.MARK,true);
        scheduleUpdateFaces();
        let color = COLOR.SELECT;
-        switch (mode) {
+        switch (markMode) {
            case MARK.EMIT: color = COLOR.EMIT; break;
            case MARK.SLIDE: color = COLOR.SLIDE; break;
            case MARK.CLEAR: color = COLOR.CLEAR; break;
        }
        hoverMaterial.color.setHex(color);
+        SDB['meta-mmode'] = markMode;
        SPACE.update();
    }

--- a/web/kiri/index.html
+++ b/web/kiri/index.html
@ -21,9 +21,7 @@
 </head>
 <body>
    <!-- app title home page links -->
-    <div id="appid">
-        <span><a href="#" id="appname">Kiri:Moto</a> by <a href="/" target="home">Grid.Space</a></span>
-    </div>
+    <div id="appid"><span><a href="#" id="appname">Kiri: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 -->
--- a/web/kiri/style.css
+++ b/web/kiri/style.css
@ -1,12 +1,6 @@
-th, tr, td, span, div, label, button {
-    user-select: none;
-}
 input[type=range]::-moz-focus-outer {
    border: 0;
 }
-select {
-    outline: none;
-}
 .dialog {
    display: none;
    color: black;
@ -62,26 +56,6 @@ select {
 #stock,#selection {
    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 {
    width: 100%;
    height: 100%;
--- a/web/meta/index.html
+++ b/web/meta/index.html
@ -16,8 +16,12 @@
    <script src="/code/meta.js"></script>
 </head>
 <body>
-    <div id="control-left"><div id="assets"><div class="title"><a href="/"><span>grid</span>:<span>space</span></a></div></div></div>
-    <div id="control-right"><div id="control"><div class="title"><a href="/meta/"><span>meta</span>:<span>moto</span></a></div></div></div>
+    <!-- app title home page links -->
+    <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>
 </body>
 </html>
--- a/web/meta/style.css
+++ b/web/meta/style.css
@ -1,7 +1,6 @@
 .ck_space button {
    margin: 2px 0px 1px 2px !important;
 }
-
 .ck_spaces {
    padding-top: 2px;
 }
@ -19,7 +18,6 @@
 .ck_spaces button {
    margin: 0px 0px 1px 2px !important;
 }
-
 .ck_meshes {
    padding-top: 2px;
 }
--- a/web/moto/style.css
+++ b/web/moto/style.css
@ -48,6 +48,12 @@ button[load] {
 button[del] {
    margin-left: 5px;
 }
+select {
+    outline: none;
+}
+th, tr, td, span, div, label, button {
+    user-select: none;
+}

 /** ******************************************************************
 * Class
@ -187,8 +193,7 @@ button[del] {
    outline: none;
 }
 .control input[disabled] {
-    background-color: #aaa;
-    border-color: #bbb;
+    background-color: #ccc;
    color: #000;
    border-width: 1px;
 }
@ -207,14 +212,31 @@ button[del] {
    align-items: center;
    justify-content: center;
 }
-#control-left:hover, #control-right:hover {
-    background-color: #ffffff;
-}

 /** ******************************************************************
 * 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 {
    width: 100%;
    height: 100%;
@ -236,12 +258,6 @@ button[del] {
    background-color: rgba(255,255,255,0.75);
    overflow-y: scroll;
 }
-#control-left::-webkit-scrollbar {
-    display: none;
-}
-#control-right::-webkit-scrollbar {
-    display: none;
-}
 #control-right {
    display: none;
    position: fixed;
@ -260,6 +276,12 @@ button[del] {
    overflow-y: scroll;
    overflow-x: visible;
 }
+#control-left::-webkit-scrollbar, #control-right::-webkit-scrollbar {
+    display: none;
+}
+#control-left:hover, #control-right:hover {
+    background-color: #ffffff;
+}
 #loading {
    position: fixed;
    top: 5px;