add optional CAM operation notes

release.md

@@ -21,6 +21,7 @@ Full docs @ https://docs.grid.space/projects/kiri-moto
 * add CAM Z bottom visualization, make it relative to stock instead of part
 * add CAM z bottom inversion option to flip operator
 * add CAM custom gcode operator
+* add optional CAM operation notes
 * extend url loading of workspaces to all formats
 * alert when healing is enabled and non-manifold geometries are detected
 * fix thin output start and end point tracking which broke retraction

src/kiri-mode/cam/client.js

@@ -24,6 +24,7 @@ let isAnimate,
 
 let zaxis = { x: 0, y: 0, z: 1 },
     popOp = {},
+    seed = Date.now(),
     func = {
         hover: noop,
         hoverUp: noop
@@ -304,7 +305,7 @@ CAM.init = function(kiri, api) {
             html.appendAll([
                 `<div id="${mark+i}" class="draggable">`,
                 `<label class="label">${rec.type}</label>`,
-                `<label id="${mark+i}-x" class="del"><i class="fas fa-times"></i></label>`,
+                `<label id="${mark+i}-x" class="del"><i class="fa-regular fa-circle-xmark"></i></label>`,
                 `</div>`
             ]);
             bind[mark+i] = rec;
@@ -350,6 +351,7 @@ CAM.init = function(kiri, api) {
                 poprec.use(rec);
                 hoveredOp = el;
                 el.appendChild(poprec.div);
+                poprec.addNote();
                 // option click event appears latent
                 // and overides the sticky settings
                 setTimeout(() => {
@@ -1212,7 +1214,7 @@ function createPopOp(type, map) {
             }
             return rec;
         },
-        hideshow: () => {
+        hideshow: (abc) => {
             for (let inp of Object.values(op.inputs)) {
                 let parent = inp.parentElement;
                 if (parent.setVisible && parent.__opt.show) {
@@ -1220,8 +1222,33 @@ function createPopOp(type, map) {
                 }
             }
         },
-        group: []
+        addNote: () => {
+            if (!op.note && type !== 'flip') {
+                const divid = `div-${++seed}`;
+                const noteid = `note-${++seed}`;
+                const div = document.createElement('div');
+                div.setAttribute('id', divid);
+                div.classList.add('pop-tics')
+                op.div.appendChild(div);
+                div.innerHTML = h.build(
+                    h.div([
+                        h.label({id: noteid, _: `${poppedRec.note || ''}`})
+                    ])
+                );
+                op.note = { divid, noteid };
+                $(divid).onclick = () => {
+                    let note = op.x = prompt('Edit Note for Operation', poppedRec.note || '');
+                    if (note !== undefined && note !== null) {
+                        poppedRec.note = note || poppedRec.note;
+                        $(noteid).innerText = note;
+                        API.conf.save();
+                    }
+                };
+            }
+        },
+        group: [],
     };
+
     UC.restore({
         addTo: op.div,
         bindTo: op.bind,

src/moto/webui.js

@@ -103,6 +103,10 @@ let h = exports({
 
     raw: ( text ) => {
         return { raw: text }
+    },
+
+    build: (data) => {
+        return build(data, []).join('');
     }
 });
 

web/kiri/index.css

@@ -832,6 +832,26 @@ th, tr, td, label {
     margin-right: 5px;
     padding: 5px;
 }
+.pop-tics {
+    position: absolute;
+    left: -1px;
+    right: -1px;
+    bottom: 100%;
+    margin: 0 0 2px 0;
+}
+.pop-tics > div {
+    gap: 3px;
+    padding: 5px;
+    width: 100%;
+    max-width: 100%;
+    overflow: hidden;
+    font-size: 11px;
+    flex-direction: row;
+    background-color: rgba(255,255,255,0.6);
+    border-radius: 5px;
+    word-break: break-word;
+    white-space: normal;
+}
 #oplist > div, .opdiv {
     display: flex;
     flex-direction: column;
@@ -855,20 +875,23 @@ th, tr, td, label {
 }
 #oplist div .del {
     position: absolute;
-    top: -1px;
+    top: 0px;
-    right: 2px;
+    right: 0px;
     font-size: 12px;
     color: rgba(0,0,0,0);
 }
 #oplist > div.editing {
     background-color: rgba(220,230,220,0.8);
 }
+.dark #oplist div:hover .del {
+    color: #fff;
+}
 #oplist div:hover .del {
-    color: #aaa;
+    color: #888;
     z-index: 10000;
 }
 #oplist div .del:hover {
-    color: #000;
+    color: #000 !important;
 }
 #oplist div .opop {
     position: absolute;