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

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(' ')}">`,

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

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" }) ])
+
+            ])
         ]
     }));
 }