diff --git a/src/Scene.js b/src/Scene.js index 392b435..b55a4f0 100644 --- a/src/Scene.js +++ b/src/Scene.js @@ -7,8 +7,8 @@ import { Sketch } from './Sketch' import Stats from '../lib/stats.module.js'; import { extrude } from './extrude' -import { onHover, onPick, setHover } from './mouseEvents'; -import { _vec2, _vec3, color, awaitSelection, ptObj } from './shared' +import { onHover, onPick } from './mouseEvents'; +import { _vec2, _vec3, color, awaitSelection, ptObj, setHover } from './shared' import { AxesHelper } from './axes' @@ -70,9 +70,9 @@ export class Scene { freePt.visible = false freePt.depthTest = false freePt.userData.type = 'selpoint' - helpersGroup.add(freePt); } + this.selpoints = this.obj3d.children[0].children this.fptIdx = 0; this.fptObj = {} @@ -196,27 +196,20 @@ export class Scene { clearSelection() { for (let x = 0, obj; x < this.selected.length; x++) { obj = this.selected[x] - if (obj.userData.type == 'sketch') continue - - if (obj.userData.type == 'plane') { - obj.material.opacity = 0.05 - obj.children[0].material.color.set(color['planeBorder']) + if (obj.userData.type == 'selpoint') { + obj.visible = false } else { - obj.material.color.set(color[obj.userData.type]) + setHover(obj, 0) } - if (obj.userData.type == 'selpoint') obj.visible = false } this.selected = [] for (let x = 0; x < this.hovered.length; x++) { + const obj = this.hovered[x] - obj.material.color.set(color[obj.userData.type]) - if (obj.userData.type == 'plane') { - obj.material.opacity = 0.05 - obj.children[0].material.color.set(color['planeBorder']) - } else { - obj.material.color.set(color[obj.userData.type]) - } + setHover(obj, 0) + + } } @@ -370,7 +363,7 @@ async function addSketch() { } window.sc = new Scene(store) -// sc.loadState() +sc.loadState() // sc.camera.layers.enable(1) // rc.layers.set(1) \ No newline at end of file diff --git a/src/Sketch.js b/src/Sketch.js index e595dca..09fcece 100644 --- a/src/Sketch.js +++ b/src/Sketch.js @@ -2,10 +2,10 @@ import * as THREE from '../node_modules/three/src/Three'; -import { _vec2, _vec3, raycaster, awaitSelection, ptObj } from './shared' +import { _vec2, _vec3, raycaster, awaitSelection, ptObj, setHover } from './shared' import { drawOnClick1, drawOnClick2, drawPreClick2, drawOnClick3, drawPreClick3, drawClear, drawPoint } from './drawEvents' -import { onHover, onDrag, onPick, onRelease } from './mouseEvents' +import { onHover, onDrag, onPick, onRelease} from './mouseEvents' import { setCoincident, setOrdinate, setTangent } from './constraintEvents' import { get3PtArc } from './drawArc' import { replacer, reviver } from './utils' @@ -143,6 +143,7 @@ class Sketch { this.onRelease = onRelease.bind(this); this.onKeyPress = this.onKeyPress.bind(this); + this.setHover = setHover.bind(this); } diff --git a/src/mouseEvents.js b/src/mouseEvents.js index 26a7a4e..e656ca1 100644 --- a/src/mouseEvents.js +++ b/src/mouseEvents.js @@ -1,5 +1,5 @@ import * as THREE from '../node_modules/three/src/Three'; -import { raycaster, color, hoverColor } from './shared'; +import { raycaster, setHover } from './shared'; import { onDimMoveEnd } from './drawDimension' let ptLoc @@ -18,7 +18,7 @@ export function onHover(e) { let hoverPts; if (this.obj3d.userData.type != 'sketch') { - this.obj3d.children[0].children[0].visible = false // hide selpoint[0] before each redraw + this.selpoints[0].visible = false // hide selpoint[0] before each redraw raycaster.layers.set(1) hoverPts = raycaster.intersectObjects(this.obj3d.children, true) } else { @@ -75,12 +75,10 @@ export function onHover(e) { 3 * hoverPts[idx[x]].index, 3 * hoverPts[idx[x]].index + 3 ) - // const pp = this.obj3d.children[0].children[this.fptIdx % 3] - const pp = this.obj3d.children[0].children[0] - pp.geometry.attributes.position.array.set(ptLoc) - pp.matrix = obj.parent.matrix - pp.geometry.attributes.position.needsUpdate = true - pp.visible = true + this.selpoints[0].geometry.attributes.position.array.set(ptLoc) + this.selpoints[0].matrix = obj.parent.matrix + this.selpoints[0].geometry.attributes.position.needsUpdate = true + this.selpoints[0].visible = true obj = hoverPts[idx[x]].index } @@ -120,30 +118,49 @@ export function onPick(e) { if (this.hovered.length) { let obj = this.hovered[this.hovered.length - 1] + // if (sc.selected.includes(obj3d)) continue + + if (typeof obj != 'object') { + + const pp = this.selpoints[this.fptIdx % 3 + 1] + const p0 = this.selpoints[0] + + pp.geometry.attributes.position.array.set(p0.geometry.attributes.position.array) + pp.matrix = p0.matrix + pp.geometry.attributes.position.needsUpdate = true + pp.visible = true + + obj = pp + this.fptIdx++ - if (this.obj3d.userData.type == 'sketch') { - this.selected.push(obj) - } else { - if (typeof obj == 'object') { - - setHover(obj, 1) - + const idx = this.selected.indexOf(obj) + if (idx == -1) { + this.selected.push( + obj + ) } else { - const pp = this.obj3d.children[0].children[this.fptIdx % 3 + 1] - const p0 = this.obj3d.children[0].children[0] - - pp.geometry.attributes.position.array.set(p0.geometry.attributes.position.array) - pp.matrix = p0.matrix - pp.geometry.attributes.position.needsUpdate = true - pp.visible = true - - obj = pp - this.fptObj[obj] = this.fptIdx - this.fptIdx++ + this.selected.splice(idx, 1, obj) } - this.obj3d.dispatchEvent({ type: 'change' }) - this.selected.push(obj) + + } else { + + const idx = this.selected.indexOf(obj) + if (idx == -1) { + this.selected.push( + obj + ) + this.setHover(obj, 1) + } else { + this.setHover(this.selected[idx], 0) + this.selected.splice(idx, 1) + } + } + + + this.obj3d.dispatchEvent({ type: 'change' }) + + if (this.obj3d.userData.type != 'sketch') { return; } @@ -157,7 +174,6 @@ export function onPick(e) { ) this.canvas.addEventListener('pointermove', this.onDragDim); this.canvas.addEventListener('pointerup', () => { - console.log('heree') onDimMoveEnd(this.obj3d.children[1].children[idx]) this.onRelease() }) @@ -215,47 +231,7 @@ export function onDrag(e) { } -export function setHover(obj, state, meshHover = true) { - let colObj, visible - if (state == 1) { - colObj = hoverColor - visible = true - } else { - colObj = color - visible = false - } - switch (obj.userData.type) { - case 'plane': - obj.material.opacity = colObj.opacity - obj.children[0].material.color.set(colObj['planeBorder']) - break; - case 'sketch': - obj.visible = visible - break; - case 'mesh': - if (meshHover) { - obj.material.emissive.set(colObj.emissive) - } else { - break - } - default: - obj.material.color.set(colObj[obj.userData.type]) - break; - } - - - // if (obj.userData.type == 'plane') { - // obj.material.opacity = colObj.opacity - // obj.children[0].material.color.set(colObj['planeBorder']) - // } else if (obj.userData.type != 'mesh') { - // obj.material.color.set(colObj[obj.userData.type]) - // } else if (meshHover) { - // obj.material.emissive.set(colObj.emissive) - // obj.material.color.set(colObj[obj.userData.type]) - // } - -} export function onRelease() { this.canvas.removeEventListener('pointermove', this.onDrag) diff --git a/src/react/tree.jsx b/src/react/tree.jsx index 156130f..51b70f7 100644 --- a/src/react/tree.jsx +++ b/src/react/tree.jsx @@ -54,6 +54,7 @@ const TreeEntry = ({ entId }) => { sketch.activate() sc.clearSelection() sc.activeSketch = sketch; + sc.render() } }} @@ -63,18 +64,32 @@ const TreeEntry = ({ entId }) => { sc.render() }} onPointerLeave={() => { - if (visible & obj3d.userData.type == 'sketch') return + // if (visible & obj3d.userData.type == 'sketch') return if (sc.selected.includes(obj3d) || sc.activeSketch && sc.activeSketch.name == obj3d.name) return sc.setHover(obj3d, 0) sc.render() }} onClick={() => { // if (obj3d.userData.type == 'mesh') { + // console.log(obj3d, sc.selected) + const idx = sc.selected.indexOf(obj3d) + + if (idx == -1) { sc.selected.push( obj3d ) - sc.render() + sc.setHover(obj3d, 1) + } else { + sc.setHover(sc.selected[idx], 0) + sc.selected.splice(idx, 1) + } + + // sc.selected.push( + // obj3d + // ) + // } + sc.render() }} > @@ -97,7 +112,7 @@ const TreeEntry = ({ entId }) => { onClick={(e) => { e.stopPropagation() console.log('hide') - dispatch({ type: "set-entry-visibility", obj: {[entId]:false} }) + dispatch({ type: "set-entry-visibility", obj: { [entId]: false } }) obj3d.visible = false; if (obj3d.userData.type == 'mesh') { obj3d.traverse((e) => e.layers.disable(1)) @@ -113,7 +128,7 @@ const TreeEntry = ({ entId }) => { e.stopPropagation() console.log('show') obj3d.visible = true; - dispatch({ type: "set-entry-visibility", obj: {[entId]:true} }) + dispatch({ type: "set-entry-visibility", obj: { [entId]: true } }) if (obj3d.userData.type == 'mesh') { obj3d.traverse((e) => { e.layers.enable(1) diff --git a/src/shared.js b/src/shared.js index 27067b5..696f1da 100644 --- a/src/shared.js +++ b/src/shared.js @@ -17,14 +17,14 @@ const color = { emissive: 0x072534, meshTempHover: 0x9DCFED, - point: 0xffffff, - selpoint: 0xff0000, - line: 0xffffff, - mesh: 0x9DCFED, - dimension: 0x0000ff, + point: 0xffffff, + selpoint: 0xff0000, + line: 0xffffff, + mesh: 0x9DCFED, + dimension: 0x0000ff, - plane: 0xffff00, - planeBorder: 0x2e2e00, + plane: 0xffff00, + planeBorder: 0x2e2e00, opacity: 0.02 } @@ -32,11 +32,11 @@ const hoverColor = { emissive: 0x343407, point: 0x00ff00, selpoint: 0xff0000, - line: 0x00ff00, - mesh: 0xFAB601, - dimension: 0x00ff00, + line: 0x00ff00, + mesh: 0xFAB601, + dimension: 0x00ff00, - plane: 0xffff00, + plane: 0xffff00, planeBorder: 0x919100, opacity: 0.06 } @@ -148,7 +148,38 @@ async function awaitSelection(...criteria) { return null } + +function setHover(obj, state, meshHover = true) { + let colObj = state == 1 ? hoverColor : color + + switch (obj.userData.type) { + case 'plane': + obj.material.opacity = colObj.opacity + obj.children[0].material.color.set(colObj['planeBorder']) + break; + case 'sketch': + obj.traverse(ele => { + if (ele.userData.type == 'line') { + ele.material.color.set(colObj['line']) + } + }) + break; + case 'mesh': + if (meshHover) { + obj.material.emissive.set(colObj.emissive) + } else { + break + } + default: + obj.material.color.set(colObj[obj.userData.type]) + break; + } + +} + + + window.rc = raycaster -export { lineMaterial, pointMaterial, _vec2, _vec3, raycaster, color, hoverColor, ptObj, lineObj, awaitSelection } \ No newline at end of file +export { lineMaterial, pointMaterial, _vec2, _vec3, raycaster, color, hoverColor, ptObj, lineObj, awaitSelection, setHover } \ No newline at end of file