add widget selection/highlight/deletion. update clock/timeline indexed visualization

2024-05-31 18:46:58 -04:00 · 2024-05-31 18:46:58 -04:00 · 6e88813a6f
commit 6e88813a6f
parent ffb9db7b88
5 changed files with 88 additions and 69 deletions
--- a/src/kiri-mode/cam/client.js
+++ b/src/kiri-mode/cam/client.js
@ -404,7 +404,11 @@ CAM.init = function(kiri, api) {
        func.clearPops();
        let oplist = current.process.ops;
        if (oplist.indexOf(rec) < 0) {
-            oplist.push(rec);
+            if (oplist.length && oplist[oplist.length-1].type === '|') {
+                oplist.splice(oplist.length-1,0,rec);
+            } else {
+                oplist.push(rec);
+            }
            let fpos = oplist.findWith(rec => rec.type === 'flip');
            if (fpos >= 0 && oplist.length > 1) {
                let oprec = oplist.splice(fpos,1);
@ -467,9 +471,11 @@ CAM.init = function(kiri, api) {
        let notime = false;
        oplist.forEach((rec,i) => {
            let clock = rec.type === '|';
-            let label = clock ? `<i class="fa-regular fa-clock"></i>` : rec.type;
+            // let label = clock ? `<i class="fa-regular fa-clock"></i>` : rec.type;
+            let label = clock ? `` : rec.type;
            let clazz = notime ? [ "draggable", "notime" ] : [ "draggable" ];
            let notable = rec.note?.split(' ').filter(v => v.charAt(0) === '#');
+            if (clock) clazz.push('clock');
            if (notable?.length) label = notable[0].slice(1);
            html.appendAll([
                `<div id="${mark+i}" class="${clazz.join(' ')}">`,
--- a/src/kiri/conf.js
+++ b/src/kiri/conf.js
@ -586,7 +586,7 @@ const conf = exports({
                camStockOffset: true,
                camStockClipTo: false,
                camStockIndexed: false,
-                camStockIndexGrid: false,
+                camStockIndexGrid: true,
                camIndexAxis: 0,
                camIndexAbs: true,
                camConventional: false, // outputClockwise
--- a/src/kiri/platform.js
+++ b/src/kiri/platform.js
@ -322,6 +322,7 @@ function platformSelect(widget, shift, recurse = true) {
        selection.add(widget);
        event.emit('widget.select', widget);
        widget.setColor(COLOR.selected);
+        $(`ws-${widget.id}`)?.classList.add('selected');
        selection.update_info();
    }

@ -357,6 +358,7 @@ function platformDeselect(widget, recurse = true) {
        api.event.emit('widget.deselect', widget);
    }

+    $(`ws-${widget.id}`)?.classList.remove('selected');
    widget.setColor(COLOR.deselected);
    platform.update_selected();
    selection.update_info();
@ -564,20 +566,28 @@ function platformChanged() {
    h.bind($('ws-widgets'), api.widgets.all().map(w => {
        let color;
        return [
-            h.button({
-                _: w.meta.file || 'no name',
-                onmouseenter() {
-                    color = w.getColor();
-                    w.setColor(0x0088ff);
-                },
-                onmouseleave() {
-                    w.setColor(color);
-                },
-                onclick() {
-                    platformSelect(w, true, false);
-                    color = w.getColor();
-                }
-            })
+
+            h.div([
+
+                h.button({
+                    _: w.meta.file || 'no name',
+                    id: `ws-${w.id}`,
+                    onmouseenter() {
+                        color = w.getColor();
+                        w.setColor(0x0088ff);
+                    },
+                    onmouseleave() {
+                        w.setColor(color);
+                    },
+                    onclick() {
+                        platformSelect(w, true, false);
+                        color = w.getColor();
+                    }
+                }),
+
+                h.button([ h.i({ class:"fas fa-trash" }) ])
+
+            ])
        ]
    }));
 }
--- a/web/kiri/index.css
+++ b/web/kiri/index.css
@ -562,13 +562,14 @@ th, tr, td, label {
    white-space: nowrap;
    font-size: smaller;
    font-family: sans-serif;
-    padding: 1px 0 1px 0;
    align-items: stretch;
    justify-content: center;
-    padding: 3px;
+    padding: 2px 0 2px 0;
    display: grid !important;
-    grid-template-columns: auto 1fr;
    margin-right: 0 !important;
+    margin-bottom: 2px !important;
+    grid-template-columns: auto 1fr;
+    row-gap: 1px;
 }
 #mode-info > div {
    display: contents;
@ -576,31 +577,32 @@ th, tr, td, label {
 #mode-info label {
    font-size: smaller;
    font-weight: bold;
-    align-self: center;
-    margin: 2px 0 2px 5px;
-    padding: 2px 5px 2px 5px;
+    align-self: right;
+    margin: 0 0 0 5px;
+    padding: 3px 5px 3px 5px;
    color: var(--fg-gray);
-    background-color: #eee;
+    background-color: var(--blue-4);
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
-    border-top: 1px solid #ddd;
-    border-left: 1px solid #ddd;
-    border-bottom: 1px solid #ddd;
+    border-top: 1px solid var(--blue-3);
+    border-left: 1px solid var(--blue-3);
+    border-right: 0;
+    border-bottom: 1px solid var(--blue-3);
 }
-#mode-info span, #mode-info select {
-    margin: 2px 5px 2px 0;
+#mode-info span {
    font-size: smaller;
-    padding: 2px 5px 2px 5px;
+    margin: 0 5px 0 0;
+    padding: 3px 5px 3px 5px;
    color: var(--fg-gray);
    background-color: white;
    border-top-left-radius: 0;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 5px;
-    border-top: 1px solid #ddd;
+    border-top: 1px solid var(--blue-3);
    border-left: 0;
-    border-right: 1px solid #ddd;
-    border-bottom: 1px solid #ddd;
+    border-right: 1px solid var(--blue-3);
+    border-bottom: 1px solid var(--blue-3);
 }

 #doit {
@ -684,6 +686,12 @@ th, tr, td, label {

 #ws-widgets button {
    text-transform: none;
+    text-align: left;
+    align-items: center;
+}
+#ws-widgets button.selected {
+    background-color: var(--blue-4);
+    color: #000;
 }
 .slim-hide {
    width: 0;
@ -693,7 +701,7 @@ th, tr, td, label {
 #top-sep {
    display: none;
 }
-#top-sep, .line-sep {
+#top-sep {
    z-index: 14;
    height: 1px;
    min-height: 1px;
@ -707,12 +715,6 @@ th, tr, td, label {
    max-height: 1px;
    background-image: var(--gradbar2);
 }
-.mid-sep {
-    display: none;
-    z-index: 14;
-    width: 1px;
-    background-image: var(--gradbar-vert);
-}

 .movable {
    margin: 5px;
@ -1047,20 +1049,30 @@ th, tr, td, label {
    gap: 3px;
    margin-bottom: 3px;
 }
+#oplist .clock {
+    border: 0;
+    background-color: var(--blue-3);
+}
+#oplist 
+#camops .set-sep {
+    margin-bottom: 4px;
+}
+#oplist .clock:hover {
+    background-color: var(--blue-2);
+}
 #oplist > div, .opdiv {
    display: flex;
    flex-direction: column;
-    align-items: center;
+    align-items: left;
    justify-content: center;
    border: 1px solid rgba(0,0,0,0.25);
    border-radius: 4px;
-    margin: 0 5px 0 5px;
    padding: 5px 10px 5px 10px;
    background-color: rgba(255,255,255,0.75);
    white-space: nowrap;
 }
 #oplist > div:hover, #op-add:hover {
-    background-color: #fff;
+    background-color: var(--blue-4);
 }
 #oplist > div.editing {
    background-color: rgba(190,230,190,0.85);
@ -1079,9 +1091,9 @@ th, tr, td, label {
 }
 #oplist div .del {
    position: absolute;
-    top: 0px;
-    right: 0px;
-    font-size: 12px;
+    top: 1px;
+    right: 2px;
+    font-size: 14px;
    color: rgba(0,0,0,0);
 }
 .dark #oplist div:hover .del {
@ -1148,7 +1160,7 @@ th, tr, td, label {
    text-align: center;
 }
 #op-add-list > div:hover {
-    background-color: rgba(0,0,0,0.2);
+    background-color: var(--blue-4);
 }
 #op-add-contour-menu, #op-add-register-menu {
    position: absolute;
@ -1166,14 +1178,16 @@ th, tr, td, label {
    min-height: 6px;
    text-align: center;
    background-color: rgb(220,220,220);
-    border-radius: 3px;
+    border-top: 1px solid #888;
+    border-bottom: 1px solid #888;
+    /* border-radius: 3px; */
 }
 #progbar {
    width: 0;
    text-align: left;
    position: relative;
    background-color: rgb(255,90,90);
-    border-radius: 3px;
+    /* border-radius: 3px; */
 }
 #progtxt {
    display: none;
@ -1932,7 +1946,7 @@ th, tr, td, label {
 }
 .set2-group .var-row {
    background: #fff;
-    padding: 1px 4px 1px 4px !important;
+    padding: 1px 4px 1px 4px;
    margin: 0 !important;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
@ -1955,9 +1969,10 @@ th, tr, td, label {
    padding: 0 !important;
    height: 1px;
    min-height: 1px;
+    max-height: 1px;
    margin-top: 2px;
    margin-bottom: 2px;
-    background-color: #bbb;
+    background-color: #bbb !important;
 }
 .set-header {
    white-space: nowrap;
--- a/web/kiri/index.html
+++ b/web/kiri/index.html
@ -148,19 +148,19 @@
                <div class="top-menu-drop top-menu-right">
                    <div class="content">
                        <div id="mode-fdm">
-                            <label lk="fdm">FDM</label>
+                            <label>FDM</label>
                            <span><i class="fas fa-layer-group"></i></span>
                        </div>
                        <div id="mode-cam">
-                            <label lk="cnc">CNC</label>
+                            <label>CNC</label>
                            <span><i class="fas fa-bore-hole"></i></span>
                        </div>
                        <div id="mode-laser">
-                            <label lk="laser">Laser</label>
+                            <label>Laser</label>
                            <span><i class="fas fa-bolt"></i></span>
                        </div>
                        <div id="mode-sla">
-                            <label lk="sla">SLA</label>
+                            <label>SLA</label>
                            <span><i class="fas fa-cube"></i></span>
                        </div>
                    </div>
@ -209,22 +209,14 @@
    </div>

    <!-- line betwwen menu bar and main application windows -->
-    <div class="line-sep"></div>
    <div id="progress"><div id="progbar"><div id="progtxt">loading</div></div></div>
-    <div class="line-sep"></div>

    <div id="mid" class="grow f-row">

        <!-- left settings menu -->
        <div id="panel-left" class="f-col j-left">
            <!-- always up -->
-            <div id="mode-info" class="f-col set2-group">
-                <!-- <div><label>Mode</label><select id="mode-name">
-                    <option>FDM</option>
-                    <option>CNC</option>
-                    <option>SLA</option>
-                    <option>Laser</option>
-                </select></div> -->
+            <div id="mode-info">
                <div><label>Device</label><span id="mode-device"></span></div>
                <div><label>Profile</label><span id="mode-profile"></span></div>
            </div>
@ -260,13 +252,10 @@
                <div id="sla-support" class="set2-group mode-sla"></div>
                <div id="sla-output" class="set2-group mode-sla"></div>
            </div>
-            <div class="line-sep"></div>
+            <div class="line-sep2"></div>
            <div class="chonk"></div>
        </div>

-        <!-- vertical separation between settings tray and workspace -->
-        <div class="mid-sep"></div>
-
        <!-- main workspace -->
        <div id="mid-mid" class="grow">
            <div id="layer-slider" class="f-col a-stretch">
@ -291,7 +280,6 @@
                <div id="speeds"><div id="speedbar" class="f-col a-stretch j-center" lkt="sb_info"></div></div>
            </div>
            <!-- vertical separation between workspace and right tray -->
-            <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"><a>mesh tools</a></div>