jsketcher/web/app/sketcher/components/ContextualControls.jsx

import React, {useContext} from 'react';
import ls from './ContextualControls.less';
import {matchAvailableActions} from "../actions";
import {useStream} from "../../../../modules/ui/effects";
import {SketcherAppContext} from "./SketcherApp";
import {MatchIndex, matchSelection} from "../selectionMatcher";
import {ConstraintButton, GeneratorButton} from "./ConstraintExplorer";
import {Columnizer} from "../../../../modules/ui/components/Columnizer";
import {NoIcon} from "../icons/NoIcon";

export function ContextualControls() {

  const selection = useStream(ctx => ctx.viewer.streams.selection);
  const ___ = useStream(ctx => ctx.viewer.parametricManager.$update);

  const ctx = useContext(SketcherAppContext);

  if (selection.length === 0) {
    return null;
  }

  const obj = selection.length === 1 ? selection[0] : null;

  const availableActions = matchAvailableActions(selection);

  const nonInternalConstraints = obj && Array.from(obj.constraints).filter(c => !c.internal);

  return <div className={ls.root}>

    {
      selection.map(s => <div key={s.id} onDoubleClick={debugEgg(s)} className={ls.item}>{s.simpleClassName}: {s.id}</div>)
    }

    <div className={ls.hr}>AVAILABLE ACTIONS:</div>

    <div style={{
    }}>
      <Columnizer columns={3} spacing={3}>
        {
          availableActions.map(a => {
            const Icon = a.icon || NoIcon;

            return <button
              className='icon-button'
              key={a.id}
              style={{
                width: '100%'
              }}
              onClick={() => a.invoke(ctx, matchSelection(a.selectionMatcher, new MatchIndex(selection), false))}
              title={a.description}><Icon size={16}/>{a.shortName}</button>
          })
        }
      </Columnizer>
    </div>
    {
      nonInternalConstraints && nonInternalConstraints.length !== 0 && <>
        <div className={ls.hr}>PARTICIPATES IN CONSTRAINTS:</div>
        {nonInternalConstraints.map(c => <ConstraintButton constraint={c} key={c.id} style={{borderColor: 'white'}}/>)}
      </>
    }
    {
      obj && obj.generators.size !== 0 && <>
        <div className={ls.hr}>PARTICIPATES IN GENERATORS:</div>
        {Array.from(obj.generators).map(c => <GeneratorButton generator={c} key={c.id} style={{borderColor: 'white'}}/>)}
      </>
    }
    {
      obj && obj.generator && <>
        <div className={ls.hr}>GENERATED BY:</div>
        <GeneratorButton generator={obj.generator} style={{borderColor: 'white'}}/>
      </>
    }

  </div>;

}

function debugEgg(obj) {
  return e => {
    obj.visitParams(p => console.log(p.toString()));
  }
}