color code points to accommodate OperationHistory view

modules/renders/ColorDot.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+export default function ColorDot({color}) {
+  return <span style={{
+    color: color,
+    mixBlendMode: 'exclusion'
+  }}>◉</span>;
+}

modules/renders/index.js

@@ -1,16 +1,35 @@
 
-const renderXZY = (x, y, z) => `[${x}, ${y}, ${z}]`;
+const colorCode = (x, y, z) => '#' + hex(x) + hex(y) + hex(z);
 
-export function renderPoint(point) {
-  if (arguments.length > 1) {
-    let [x, y, z] = arguments;
-    return renderXZY(x, y, z);
-  } else if (Array.isArray(point)) {
+const renderText = (x, y, z) => `[${x}, ${y}, ${z}]`;
+
+export function pointAsColor(point) {
+  return renderPointImpl(point, colorCode);
+}
+
+export function pointAsText(point) {
+  return renderPointImpl(point, renderText);
+}
+
+export function renderPointImpl(point, renderer) {
+  if (Array.isArray(point)) {
     let [x, y, z] = point;
-    return renderXZY(x, y, z);
+    return renderer(x, y, z);
   } else {
     let {x, y, z} = point;
-    return renderXZY(x, y, z);
+    return renderer(x, y, z);
   }
 }
 
+function toInt(num) {
+  return Math.round(parseFloat(num) || 0);
+}
+
+const hex = v => {
+  let r = toInt(v) % 255;
+  let s = r.toString(16);
+  if (s.length === 1) {
+    s = '0' + s;
+  }
+  return s;
+};

web/app/cad/craft/datum/DatumParamsRenderer.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import {pointAsColor} from 'renders';
+import ColorDot from 'renders/ColorDot';
+
+
+export function DatumParamsRenderer({params}) {
+  const color = pointAsColor(params);
+  return <ColorDot color={color} />
+}

web/app/cad/craft/datum/create/createDatumOperation.js

@@ -1,11 +1,12 @@
 import DatumWizard from './CreateDatumWizard';
 import schema from './createDatumOpSchema';
-import {renderPoint} from 'renders';
 import DatumObject3D from '../datumObject';
 import * as SceneGraph from 'scene/sceneGraph';
 import CSys from '../../../../math/csys';
 import {MDatum} from '../../../model/mdatum';
 import {roundInteractiveInput} from '../../wizard/roundUtils';
+import {DatumParamsRenderer} from '../DatumParamsRenderer';
+import {pointAsText} from '../../../../../../modules/renders';
 
 function updateCSys(csys, params, findFace) {
   csys.move(0, 0, 0);
@@ -77,7 +78,8 @@ export default {
   label: 'Create Datum',
   icon: 'img/cad/plane',
   info: 'originates a new datum from origin or off of a selected face',
-  paramsInfo: renderPoint,
+  paramsInfoComponent: DatumParamsRenderer,
+  paramsInfo: pointAsText,
   previewer,
   run: create,
   form: DatumWizard,

web/app/cad/craft/datum/move/moveDatumOperation.js

@@ -1,9 +1,10 @@
 import schema from './moveDatumOpSchema';
-import {renderPoint} from 'renders';
 import {MDatum} from '../../../model/mdatum';
 import MoveDatumWizard from './MoveDatumWizard';
 import {roundInteractiveInput} from '../../wizard/roundUtils';
 import {EMPTY_ARRAY} from '../../../../../../modules/gems/iterables';
+import {pointAsText} from '../../../../../../modules/renders';
+import {DatumParamsRenderer} from '../DatumParamsRenderer';
 
 
 function move(params, {cadRegistry}) {
@@ -66,7 +67,8 @@ export default {
   label: 'Move Datum',
   icon: 'img/cad/plane',
   info: 'moves a datum',
-  paramsInfo: renderPoint,
+  paramsInfoComponent: DatumParamsRenderer,
+  paramsInfo: pointAsText,
   previewer,
   run: move,
   form: MoveDatumWizard,

web/app/cad/craft/ui/OperationHistory.jsx

@@ -18,11 +18,11 @@ function OperationHistory({history, pointer, setHistoryPointer, remove, getOpera
 
     {history.map(({type, params}, index) => {
 
-      let {appearance, paramsInfo} = getOperation(type)||EMPTY_OBJECT;
+      let {appearance, label, paramsInfo, paramsInfoComponent: PIComp} = getOperation(type)||EMPTY_OBJECT;
       return <div key={index} onClick={() => setHistoryPointer(index - 1)} 
                   className={cx(ls.item, pointer + 1 === index && ls.selected)}>
         {appearance && <ImgIcon url={appearance.icon32} size={16}/>}
-        <span>{type} {paramsInfo && paramsInfo(params)} </span>
+        <span className={ls.opLabel}>{label} {PIComp ? <PIComp params={params}/> : (paramsInfo && paramsInfo(params))} </span>
         <span className={ls.buttons}>
           <Fa icon='edit' />
           <Fa icon='image' />

web/app/cad/craft/ui/OperationHistory.less

@@ -30,3 +30,7 @@
 .buttons >  i:hover {
   color: yellowgreen;
 }
+
+.opLabel {
+  text-transform: uppercase;
+}