mark current mode, move remainder of mesh tool icons, cleanup colors

src/kiri-mode/cam/client.js

@@ -123,7 +123,7 @@ CAM.init = function(kiri, api) {
 
     // wire up animate button in ui
     api.event.on("function.animate", (mode) => {
-        if (isAnimate) {
+        if (isAnimate || !isCamMode) {
             return;
         }
         api.function.prepare(() => {
@@ -1809,6 +1809,7 @@ function animate() {
     API.hide.slider();
     STACKS.clear();
     animFn().animate(API);
+    API.view.set_animate();
 }
 
 function updateStock() {

src/kiri/consts.js

@@ -133,7 +133,8 @@ const MODES = {
 const VIEWS = {
     ARRANGE: 1,
     SLICE: 2,
-    PREVIEW: 3
+    PREVIEW: 3,
+    ANIMATE: 4
 };
 
 // preview modes

src/kiri/function.js

@@ -380,8 +380,7 @@ function prepareAnimation() {
         api.alerts.show("window prevents animations");
         return;
     }
-    const settings = api.conf.get();
+    api.event.emit("function.animate", {mode: api.conf.get().mode});
-    api.event.emit("function.animate", {mode: settings.mode});
 }
 
 function prepareExport() {

src/kiri/init.js

@@ -1633,7 +1633,7 @@ gapp.register("kiri.init", [], (root, exports) => {
             ltact:              $('lt-start'),
             edit:               $('lt-tools'),
             nozzle:             $('menu-nozzle'),
-            render:             $('menu-render'),
+            // render:             $('menu-render'),
 
             modal:              $('modal'),
             modalBox:           $('modal-box'),
@@ -1794,7 +1794,7 @@ gapp.register("kiri.init", [], (root, exports) => {
             shiny:            newBoolean(LANG.op_shny_s, booleanSave, {title:LANG.op_shny_l, modes:FDM}),
             lineType:         newSelect(LANG.op_line_s, {title: LANG.op_line_l, action: lineTypeSave, modes:FDM}, "linetype"),
             animesh:          newSelect(LANG.op_anim_s, {title: LANG.op_anim_l, action: aniMeshSave, modes:CAM}, "animesh"),
-            units:            newSelect(LANG.op_unit_s, {title: LANG.op_unit_l, action: unitsSave, modes:CAM, trace:true}, "units"),
+            units:            newSelect(LANG.op_unit_s, {title: LANG.op_unit_l, action: unitsSave, modes:CAM, trace:false}, "units"),
             layout:           newGroup(LANG.lo_menu, $('prefs-lay'), {inline: true}),
             autoSave:         newBoolean(LANG.op_save_s, booleanSave, {title:LANG.op_save_l}),
             autoLayout:       newBoolean(LANG.op_auto_s, booleanSave, {title:LANG.op_auto_l}),
@@ -1819,7 +1819,7 @@ gapp.register("kiri.init", [], (root, exports) => {
 
             _____:               newGroup(LANG.sl_menu, $('fdm-layers'), { modes:FDM, driven, separator }),
             sliceHeight:         newInput(LANG.sl_lahi_s, { title:LANG.sl_lahi_l, convert:toFloat }),
-            sliceMinHeight:      newInput(LANG.ad_minl_s, { title:LANG.ad_minl_l, convert:toFloat, bound:bound(0,3.0), show:() => ui.sliceAdaptive.checked, trace2:true }),
+            sliceMinHeight:      newInput(LANG.ad_minl_s, { title:LANG.ad_minl_l, convert:toFloat, bound:bound(0,3.0), show:() => ui.sliceAdaptive.checked }),
             sliceTopLayers:      newInput(LANG.sl_ltop_s, { title:LANG.sl_ltop_l, convert:toInt }),
             sliceBottomLayers:   newInput(LANG.sl_lbot_s, { title:LANG.sl_lbot_l, convert:toInt }),
             separator:           newBlank({ class:"set-sep", driven }),
@@ -1858,7 +1858,7 @@ gapp.register("kiri.init", [], (root, exports) => {
             sliceSupportExtra:   newInput(LANG.sp_xpnd_s, {title:LANG.sp_xpnd_l, convert:toFloat, bound:bound(0.0,10.0)}),
             sliceSupportGrow:    newInput(LANG.sp_grow_s, {title:LANG.sp_grow_l, convert:toFloat, bound:bound(0.0,10.0)}),
             sliceSupportAngle:   newInput(LANG.sp_angl_s, {title:LANG.sp_angl_l, convert:toFloat, bound:bound(0.0,90.0)}),
-            sliceSupportSpan:    newInput(LANG.sp_span_s, {title:LANG.sp_span_l, convert:toFloat, bound:bound(0.0,200.0), show:() => ui.sliceSupportEnable.checked, trace2:false }),
+            sliceSupportSpan:    newInput(LANG.sp_span_s, {title:LANG.sp_span_l, convert:toFloat, bound:bound(0.0,200.0), show:() => ui.sliceSupportEnable.checked }),
             separator:           newBlank({ class:"set-sep", driven }),
             sliceSupportEnable:  newBoolean(LANG.sp_auto_s, onBooleanClick, {title:LANG.sp_auto_l, show:isNotBelt}),
             sliceSupportOutline: newBoolean(LANG.sp_outl_s, onBooleanClick, {title:LANG.sp_outl_l}),
@@ -1955,7 +1955,7 @@ gapp.register("kiri.init", [], (root, exports) => {
             camStockIndexed:     newBoolean(LANG.cs_indx_s, onBooleanClick, {title:LANG.cs_indx_l}),
             camStockIndexGrid:   newBoolean(LANG.cs_ishg_s, onBooleanClick, {title:LANG.cs_ishg_l, show:() => ui.camStockIndexed.checked}),
             camLimits:           newGroup(LANG.cc_menu, $('cam-limits'), { modes:CAM, driven, separator }),
-            camZAnchor:          newSelect(LANG.ou_zanc_s, {title: LANG.ou_zanc_l, action:zAnchorSave, trace:true, show:() => !ui.camStockIndexed.checked}, "zanchor"),
+            camZAnchor:          newSelect(LANG.ou_zanc_s, {title: LANG.ou_zanc_l, action:zAnchorSave, trace:false, show:() => !ui.camStockIndexed.checked}, "zanchor"),
             camZOffset:          newInput(LANG.ou_ztof_s, {title:LANG.ou_ztof_l, convert:toFloat, units:true}),
             camZBottom:          newInput(LANG.ou_zbot_s, {title:LANG.ou_zbot_l, convert:toFloat, units:true, trigger: true}),
             camZThru:            newInput(LANG.ou_ztru_s, {title:LANG.ou_ztru_l, convert:toFloat, bound:bound(0.0,100), units:true, show:() => { return ui.camZBottom.value == 0 }}),
@@ -2769,7 +2769,7 @@ gapp.register("kiri.init", [], (root, exports) => {
         $('view-back').onclick = space.view.back;
         $('view-left').onclick = space.view.left;
         $('view-right').onclick = space.view.right;
-        $('view-clear').onclick = api.platform.clear;
+        // $('view-clear').onclick = api.platform.clear;
         $('unrotate').onclick = () => {
             api.widgets.for(w => w.unrotate());
             api.selection.update_info();
@@ -2784,7 +2784,7 @@ gapp.register("kiri.init", [], (root, exports) => {
         $('rot_z_lt').onclick = () => { api.selection.rotate(0,0, d) };
         $('rot_z_gt').onclick = () => { api.selection.rotate(0,0,-d) };
         // rendering options
-        $('render-hide').onclick = () => { api.view.wireframe(false, 0, 0); };
+        // $('render-hide').onclick = () => { api.view.wireframe(false, 0, 0); };
         $('render-ghost').onclick = () => { api.view.wireframe(false, 0, api.view.is_arrange() ? 0.4 : 0.25); };
         $('render-wire').onclick = () => { api.view.wireframe(true, 0, api.space.is_dark() ? 0.25 : 0.5); };
         $('render-solid').onclick = () => { api.view.wireframe(false, 0, 1); };

src/kiri/main.js

@@ -186,9 +186,11 @@ gapp.register("kiri.main", [], (root, exports) => {
             set_arrange() { api.view.set(VIEWS.ARRANGE) },
             set_slice() { api.view.set(VIEWS.SLICE) },
             set_preview() { api.view.set(VIEWS.PREVIEW) },
+            set_animate() { api.view.set(VIEWS.ANIMATE) },
             is_arrange() { return viewMode === VIEWS.ARRANGE },
             is_slice() { return viewMode === VIEWS.SLICE },
             is_preview() { return viewMode === VIEWS.PREVIEW },
+            is_animate() { return viewMode === VIEWS.ANIMATE },
             update_stack_labels: updateStackLabelState,
             update_slider_max: updateSliderMax,
             update_slider: updateSlider,
@@ -840,12 +842,13 @@ gapp.register("kiri.main", [], (root, exports) => {
         platform.deselect();
         selection.update_info();
         // disable clear in non-arrange modes
-        $('view-clear').style.display = mode === VIEWS.ARRANGE ? '' : 'none';
+        ['view-arrange','act-slice','act-preview','act-animate'].forEach(el => {
+            $(el).classList.remove('selected')
+        });
         switch (mode) {
             case VIEWS.ARRANGE:
+                $('view-arrange').classList.add('selected');
                 api.function.clear_progress();
-                // UI.back.style.display = '';
-                UI.render.style.display = '';
                 kiri.client.clear();
                 STACKS.clear();
                 hideSlider();
@@ -855,17 +858,18 @@ gapp.register("kiri.main", [], (root, exports) => {
                 api.widgets.opacity(1);
                 break;
             case VIEWS.SLICE:
-                if (isCAM) UI.render.classList.add('hide');
+                $('act-slice').classList.add('selected');
-                else UI.render.classList.remove('hide');
                 updateSpeeds();
                 updateSliderMax();
                 setWidgetVisibility(true);
                 break;
             case VIEWS.PREVIEW:
-                if (isCAM) UI.render.classList.add('hide');
+                $('act-preview').classList.add('selected');
-                else UI.render.classList.remove('hide');
                 setWidgetVisibility(true);
                 break;
+            case VIEWS.ANIMATE:
+                $('act-animate').classList.add('selected');
+                break;
             default:
                 console.log("invalid view mode: "+mode);
                 return;

src/kiri/ui.js

@@ -15,7 +15,6 @@ gapp.register("kiri.ui", [], (root, exports) => {
         addTo = null,
         bindTo = null,
         groups = {},
-        groupShow = {},
         groupSticky = false,
         groupName = undefined,
         hasModes = [],
@@ -24,10 +23,7 @@ gapp.register("kiri.ui", [], (root, exports) => {
         lastMode = null,
         lastExpert = true,
         letHoverPop = true,
-        exitimer = undefined,
-        NOMODE = "nomode",
         prefix = "tab",
-        state = {},
         units = 1,
         lastChange = null,
         lastBtn = null,
@@ -167,8 +163,8 @@ gapp.register("kiri.ui", [], (root, exports) => {
         });
     }
 
-    function refresh(all) {
+    function refresh() {
-        setMode(lastMode, all ? false : true);
+        setMode(lastMode);
         setters.forEach(input => {
             if (input.setv) {
                 input.setv(input.real);
@@ -176,21 +172,9 @@ gapp.register("kiri.ui", [], (root, exports) => {
         });
     }
 
-    function setMode(mode, nohide) {
+    function setMode(mode) {
-console.log({ gs: groupShow });
-        Object.keys(groupShow).forEach(group => {
-            updateGroupShow(group);
-        });
         lastMode = mode;
-        if (nohide) {
+        hasModes.forEach(div => div.setMode(mode));
-            for (let div of hasModes.filter(d => d.isBlank)) {
-                div.setMode(div._group && !groupShow[div._group] ? NOMODE : mode);
-            }
-            return;
-        }
-        hasModes.forEach(function(div) {
-            div.setMode(div._group && !groupShow[div._group] ? NOMODE : mode);
-        });
         hidePoppers();
     }
 
@@ -200,7 +184,7 @@ console.log({ gs: groupShow });
     }
 
     function setHoverPop(bool) {
-        letHoverPop = bool;
+        // letHoverPop = bool;
     }
 
     function checkpoint(at) {
@@ -274,14 +258,6 @@ console.log({ gs: groupShow });
         lastGroup = groups[group] = [];
         lastGroup.key = dbkey;
         groupName = group;
-        groupShow[group] = state[dbkey] !== 'false';
-        row.onclick = function(ev) {
-            if (ev.target !== link && ev.target !== row) {
-                return;
-            }
-            console.log({ toggleGroup: group, dbkey });
-            toggleGroup(group, dbkey);
-        };
 
         return row;
     }
@@ -294,33 +270,7 @@ console.log({ gs: groupShow });
     }
 
     function hidePoppers() {
-        showGroup(undefined);
+        // showGroup(undefined);
-    }
-
-    function showGroup(groupname) {
-        Object.keys(groups).forEach(name => {
-            let group = groups[name];
-            groupShow[name] = true;//state[group.key] = (groupname === name);
-            updateGroupShow(name);
-        });
-        groupSticky = false;
-    }
-
-    function toggleGroup(groupname, dbkey) {
-        let show = state[dbkey] === 'true' || state[dbkey] === true;
-        groupShow[groupname] = state[dbkey] = !show;
-        // console.log({ state, show });
-        updateGroupShow(groupname);
-    }
-
-    function updateGroupShow(groupname) {
-        let show = groupShow[groupname] ?? true;
-        // console.log({ updateGroupShow: groupname, show: groupShow[groupname] });
-        let group = groups[groupname];
-        group.forEach(div => {
-            if (show) div.setMode(lastMode);
-            else div.setMode(NOMODE);
-        });
     }
 
     function bound(low,high) {
@@ -344,10 +294,8 @@ console.log({ gs: groupShow });
     function toFloat() {
         let nv = this.value !== '' ? parseFloat(this.value) : null;
         if (nv !== null && this.bound) nv = this.bound(nv);
-        // this.value = nv;
         if (this.setv) {
             return this.setv(nv * units);
-            // return this.real = (nv * units);
         } else {
             this.value = nv;
         }
@@ -381,6 +329,14 @@ console.log({ gs: groupShow });
         }
     }
 
+    function safecall(fn) {
+        try {
+            return fn();
+        } catch (e) {
+            return true;
+        }
+    }
+
     function addModeControls(el, opt = {}) {
         if (opt.trace2) {
             console.log({ AMC: el, opt, groupName });
@@ -399,21 +355,17 @@ console.log({ gs: groupShow });
         };
         el.setMode = function(mode) {
             let xprt = opt.expert === undefined || (opt.expert === lastExpert);
-            let show = opt.show ? opt.show() : true;
+            let show = opt.show ? safecall(opt.show) : true;
             let disp = opt.visible ? opt.visible() : true;
-            if (opt.trace2) console.log({ setMode: el, xprt, show, disp, fn: el.__opt.show });
+            if (opt.trace2) console.log({ setMode: el, mode, modes: el.modes, xprt, show, disp, fn: el.__opt.show });
             el.setVisible(el.hasMode(mode) && show && xprt && disp);
         }
         el.hasMode = function(mode) {
-            if (mode === NOMODE) return false;
+            return el.modes.length === 0 || el.modes.contains(mode);
-            if (!el.modes) return true;
-            return el.modes.contains(mode);
         }
-        if (opt.modes) {
+        el.modes = opt.modes || [];
-            el.modes = opt.modes;
         hasModes.push(el);
     }
-    }
 
     function newDiv(opt = {}) {
         let div = DOC.createElement('div');
@@ -449,7 +401,6 @@ console.log({ gs: groupShow });
 
     function newGCode(label, options) {
         let opt = options || {},
-            // row = lastDiv,
             btn = DOC.createElement("button"),
             txt = DOC.createElement("textarea"),
             area = opt.area;

web/kiri/index.css

@@ -19,6 +19,12 @@
     --menu-border: #555;
     --dark-menu-text: #111;
     --menu-hover: #ddd;
+    --blue-1: rgb(96,127,164);
+    --blue-2: rgb(126,153,183);
+    --blue-3: rgb(190, 204, 219);
+    --blue-4: rgb(221, 228, 234);
+    --blue-5: rgb(240, 243, 245);
+    --blue-6: rgb(247, 249, 250);
 }
 
 /* surface size configuration and font import */
@@ -241,9 +247,12 @@ th, tr, td, label {
     color: black;
 }
 .top-menu > span:hover {
-    background-color: var(--row-hover);
+    background-color: var(--blue-4);
-    border-left: 1px solid var(--menu-border);
+    border-left: 1px solid var(--blue-2);
-    border-right: 1px solid var(--menu-border);
+    border-right: 1px solid var(--blue-2);
+}
+.top-menu > span.selected {
+    background-color: var(--blue-3);
 }
 .top-menu > span:hover .top-menu-drop {
     display: flex;
@@ -278,11 +287,11 @@ th, tr, td, label {
     display: flex;
     align-items: center;
     flex-direction: column;
-    background-color: var(--menu);
+    background-color: #fff;
-    border-top: 1px dashed var(--menu-border);
+    border-top: 1px dashed var(--blue-2);
-    border-left: 1px solid var(--menu-border);
+    border-left: 1px solid var(--blue-2);
-    border-right: 1px solid var(--menu-border);
+    border-right: 1px solid var(--blue-2);
-    border-bottom: 1px solid var(--menu-border);
+    border-bottom: 1px solid var(--blue-2);
     border-bottom-right-radius: 4px;
     border-bottom-left-radius: 4px;
 }
@@ -315,7 +324,7 @@ th, tr, td, label {
     border-radius: 3px;
 }
 #top .content > div:hover {
-    background-color: var(--menu-hover);
+    background-color: var(--blue-4);
 }
 
 #app-name {
@@ -648,8 +657,8 @@ th, tr, td, label {
     text-align: right;
     align-items: stretch;
     white-space: nowrap;
-    background-color: var(--menu);
+    background-color: #fff;
-    border: 1px solid var(--menu-border);
+    border: 1px solid var(--blue-2);
     border-radius: 4px;
     flex-direction: column;
 }
@@ -657,7 +666,7 @@ th, tr, td, label {
     padding: 2px 7px 2px 7px;
 }
 #lang-pop > div:hover {
-    background-color: var(--menu-hover);
+    background-color: var(--blue-4);
 }
 
 #mid {
@@ -857,25 +866,32 @@ th, tr, td, label {
 #ft-mesh {
     min-width: 200px;
 }
-#menu-render {
+.render-tools {
+    display: grid;
     margin: 4px 0 0 0;
-    gap: 3px;
+    /* gap: 3px; */
-    flex-direction: row;;
+    grid-template-columns: 1fr 1fr 1fr;
 }
-#menu-render > span {
+.render-tools > span {
-    width: 20px;
+    justify-self: center;
-    height: 20px;
+    width: 25px;
+    height: 25px;
     display: flex;
     flex-shrink: 0;
     flex-direction: column;
 }
-#menu-render > span > * {
+.render-tools > span > * {
     padding: 0;
     margin: 0;
-    width: 20px;
+}
-    height: 20px;
+.render-tools svg {
-    align-items: stretch;
+    border: 1px solid transparent;
-    justify-content: stretch;
+    border-radius: 3px;
+    padding: 3px;
+}
+.render-tools svg:hover {
+    border: 1px solid blue;
+    background-color: var(--blue-4);
 }
 #render-hide > a {
     border: 0.5px dashed black;
@@ -1927,10 +1943,8 @@ th, tr, td, label {
     border-right: 3px solid transparent;
 }
 .set2-group .var-row:hover {
-    /* border-left: 3px solid var(--main-color-hover); */
+    border-right: 3px solid var(--blue-1);
-    border-right: 3px solid var(--main-color-hover);
+    background-color: var(--blue-4) !important;
-    /* background-color: #f8f8f8 !important; */
-    background-color: var(--row-hover) !important;
 }
 .set2-group .var-row label {
     margin-right: 25px;
@@ -1953,8 +1967,7 @@ th, tr, td, label {
     white-space: nowrap;
     border-radius: 2px;
     justify-content: left;
-    background-color: var(--header);
+    background-color: var(--blue-3);
-    /* /* border-top: 0.5px solid #888; */
     border-left: 3px solid transparent;
     border-right: 3px solid var(--main-color-hover);
     border-bottom: 0.5px solid var(--main-color-hover);

web/kiri/index.html

@@ -99,31 +99,6 @@
                     </div>
                 </div>
             </span>
-            <span>
-                <i class="fas fa-dice-d20"></i>
-                <label>mesh</label>
-                <div class="top-menu-drop top-menu-right">
-                    <div class="content">
-                        <div id="tool-rotate">
-                            <label lk="rotate">rotate</label>
-                            <span><i class="fas fa-sync-alt"></i></span>
-                        </div>
-                        <div id="tool-scale">
-                            <label lk="scale">scale</label>
-                            <span><i class="fas fa-expand"></i></span>
-                        </div>
-                        <div id="tool-mesh">
-                            <label lk="mesh">mesh</label>
-                            <span><i class="fas fa-dice-d20"></i></span>
-                        </div>
-                        <hr>
-                        <div id="view-clear">
-                            <label lk="clear">clear</label>
-                            <span><i class="far fa-square"></i></span>
-                        </div>
-                    </div>
-                </div>
-            </span>
             <span>
                 <i class="fas fa-eye"></i>
                 <label>view</label>
@@ -295,36 +270,27 @@
             <div class="mid-sep"></div>
             <div id="panel-right" class="f-col j-start settings">
                 <div class="set2-group f-col">
-                    <div class="set-header">
+                    <div class="set-header"><a>workspace</a></div>
-                        <a>workspace</a>
-                    </div>
                     <div id="ws-widgets" class="f-col"></div>
-                    <div id="menu-render" class="j-center">
+                    <div class="set-header"><a>mesh tools</a></div>
-                        <span id="render-solid" class="j-center" title="solid">
+                    <div class="render-tools">
-                            <i class="fas fa-square"></i>
+                        <span id="tool-rotate"><i class="fas fa-sync-alt"></i></span></span>
-                        </span>
+                        <span id="tool-scale"><i class="fas fa-expand"></i></span></span>
-                        <span id="render-wire" class="j-center" title="wireframe">
+                        <span id="tool-mesh"><i class="fas fa-dice-d20"></i></span></span>
-                            <i class="fas fa-border-all"></i>
+                        <span id="render-solid" class="j-center" title="solid"><i class="fas fa-square"></i></span>
-                        </span>
+                        <span id="render-wire" class="j-center" title="wireframe"><i class="fas fa-border-all"></i></span>
-                        <span id="render-ghost" class="a-center" title="ghost">
+                        <span id="render-ghost" class="a-center" title="ghost"><i class="fas fa-border-none"></i></span>
-                            <i class="fas fa-border-none"></i>
-                        </span>
-                        <span id="render-hide" class="a-center j-center" title="hide"><a></a></span>
                     </div>
                 </div>
                 <div class="set2-group f-col mode-fdm">
-                    <div class="set-header">
+                    <div class="set-header"><a>ranges</a></div>
-                        <a>ranges</a>
-                    </div>
                     <div id="fdm-ranges" class="f-col"></div>
                 </div>
                 <div class="set2-group f-col">
                     <div id="workspace-tool"></div>
                 </div>
                 <div class="set2-group f-col mode-cam">
-                    <div class="set-header mode-cam">
+                    <div class="set-header mode-cam"><a>operation list</a></div>
-                        <a>operation list</a>
-                    </div>
                     <div id="camops" class="f-col a-stretch grow">
                         <div id="oplist" class="f-col j-center"></div>
                         <div id="op-add" class="opdiv">