vertex view

modules/scene/scaleHelper.js

@@ -1,4 +1,4 @@
-import {Vector3} from 'three';
+import {Object3D, Vector3} from 'three';
 import DPR from '../dpr';
 
 export function viewScaleFactor(sceneSetup, origin, SIZE_PX, SIZE_MODEL) {
@@ -19,4 +19,29 @@ export function viewScaleFactor(sceneSetup, origin, SIZE_PX, SIZE_MODEL) {
     let modelActualSizePx = viewHeight * modelTakingPart;
     return SIZE_PX / modelActualSizePx;
   }
+}
+
+export class ConstantScaleGroup extends Object3D {
+
+  sizePx;
+  sizeModel;
+  getOrigin;
+
+  constructor(sceneSetup, sizePx, sizeModel, getOrigin) {
+    super();
+    this.sceneSetup = sceneSetup;
+    this.sizePx = sizePx;
+    this.sizeModel = sizeModel;
+    this.getOrigin = getOrigin;
+  }
+
+  updateMatrix() {
+    // let {origin: o, x, y, z} = this.csys;
+    //
+    let k = viewScaleFactor(this.sceneSetup, this.getOrigin(), this.sizePx, this.sizeModel);
+
+    this.scale.set(k,k,k);
+    super.updateMatrix();
+  }
+
 }

web/app/cad/dom/components/View3d.jsx

@@ -54,10 +54,13 @@ export default class View3d extends React.Component {
                 </div>
               </InplaceSketcher>
             </SketcherMode>
+
             <div className={ls.wizardArea} >
               <WizardManager/>
             </div>
-            <ContributedComponents/>
+            <div className='regular-typography'>
+              <ContributedComponents/>
+            </div>
           </div>
 
           <div className={ls.bottomStack}>

web/app/cad/scene/views/shellView.js

@@ -6,6 +6,7 @@ import {FaceView, SELECTION_COLOR} from './faceView';
 import {EdgeView} from './edgeView';
 import {FACE, SHELL} from '../entites';
 import {Mesh} from 'three';
+import {VertexView} from "./vertexView";
 
 export class ShellView extends View {
 
@@ -47,6 +48,11 @@ export class ShellView extends View {
       this.edgeViews.push(edgeView);
     }
 
+    for (let vertex of shell.vertices) {
+      const vertexView = new VertexView(vertex, viewer);
+      SceneGraph.addToGroup(this.vertexGroup, vertexView.rootGroup);
+      this.vertexViews.push(vertexView);
+    }
     this.rootGroup.matrixAutoUpdate = false;
 
     this.model.location$.attach(loc => {

web/app/cad/scene/views/vertexView.js

@@ -1,10 +1,96 @@
 import {View} from './view';
+import {Mesh, MeshBasicMaterial, SphereGeometry} from 'three';
+import {CSYS_SIZE_MODEL} from '../../craft/datum/csysObject';
+import {ConstantScaleGroup} from "../../../../../modules/scene/scaleHelper";
 
 export class VertexView extends View {
-  
-  constructor() {
-    super();
+
+  constructor(vertex, viewer) {
+    super(vertex);
+    this.rootGroup = new VertexObject(viewer, 50, 100, () => this.rootGroup.position);
+
+    this.rootGroup.position.x = vertex.brepVertex.point.x;
+    this.rootGroup.position.y = vertex.brepVertex.point.y;
+    this.rootGroup.position.z = vertex.brepVertex.point.z;
+
+
+    // setAttribute(this.rootGroup, DATUM, this);
+    // setAttribute(this.rootGroup, View.MARKER, this);
 
   }
-  
-}
+
+  dispose() {
+    this.rootGroup.dispose();
+    super.dispose();
+    // this.rootGroup.dispose();
+  }
+}
+
+class VertexObject extends ConstantScaleGroup {
+
+  constructor(viewer, sizePx, sizeModel, getOrigin) {
+    super(viewer.sceneSetup, sizePx, sizeModel, getOrigin);
+    this.sphere = new VertexSphere(viewer);
+    this.add(this.sphere);
+  }
+
+  dispose() {
+    this.sphere.dispose();
+  }
+}
+
+class VertexSphere extends Mesh {
+
+  mouseInside;
+
+  constructor(viewer) {
+    super(new SphereGeometry( 1 ), new MeshBasicMaterial({
+      transparent: true,
+      opacity: 0.5,
+      color: 0xFFFFFF,
+      visible: false
+    }));
+    this.viewer = viewer;
+    this.scale.multiplyScalar(CSYS_SIZE_MODEL * 0.2);
+  }
+
+  dispose() {
+    this.geometry.dispose();
+    this.material.dispose();
+  }
+
+  onMouseEnter() {
+    this.mouseInside = true;
+    this.updateVisibility();
+    this.material.color.setHex(0xFBB4FF);
+    this.viewer.requestRender();
+  }
+
+  onMouseLeave(e) {
+    this.mouseInside = false;
+    this.updateVisibility();
+    this.material.color.setHex(0xFFFFFF);
+    this.viewer.requestRender();
+  }
+
+  onMouseDown() {
+    this.material.color.setHex(0xB500FF);
+    this.viewer.requestRender();
+  }
+
+  onMouseUp() {
+    this.material.color.setHex(0xFBB4FF);
+    this.viewer.requestRender();
+  }
+
+  onMouseClick({mouseEvent: e}) {
+    if (!this.material.visible) {
+      return;
+    }
+  }
+
+  updateVisibility() {
+    let datum3D = this.parent.parent;
+    this.viewer.setVisualProp(this.material, 'visible', this.mouseInside);
+  }
+}