Refactor mouse event args (#1613)

* refactor mouse event interfaces

Importantly returning multiple intersections from raycastRing, but other clean up

* refactor enter exit args interface

* type tweak
This commit is contained in:
Kurt Hutten
2024-03-03 16:23:16 +11:00
committed by GitHub
parent fedffbb384
commit 223b5952aa
3 changed files with 169 additions and 151 deletions

View File

@ -364,17 +364,18 @@ class SceneEntities {
this.scene.add(group)
if (!draftSegment) {
sceneInfra.setCallbacks({
onDrag: (args) => {
if (args.event.which !== 1) return
onDrag: ({ selected, intersectionPoint, mouseEvent }) => {
if (mouseEvent.which !== 1) return
this.onDragSegment({
...args,
object: selected,
intersection2d: intersectionPoint.twoD,
sketchPathToNode,
})
},
onMove: () => {},
onClick: (args) => {
if (args?.event.which !== 1) return
if (!args || !args.object) {
if (args?.mouseEvent.which !== 1) return
if (!args || !args.selected) {
sceneInfra.modelingSend({
type: 'Set selection',
data: {
@ -383,22 +384,22 @@ class SceneEntities {
})
return
}
const { object } = args
const event = getEventForSegmentSelection(object)
const { selected } = args
const event = getEventForSegmentSelection(selected)
if (!event) return
sceneInfra.modelingSend(event)
},
onMouseEnter: ({ object }) => {
onMouseEnter: ({ selected }) => {
// TODO change the color of the segment to yellow?
// Give a few pixels grace around each of the segments
// for hover.
if ([X_AXIS, Y_AXIS].includes(object?.userData?.type)) {
const obj = object as Mesh
if ([X_AXIS, Y_AXIS].includes(selected?.userData?.type)) {
const obj = selected as Mesh
const mat = obj.material as MeshBasicMaterial
mat.color.set(obj.userData.baseColor)
mat.color.offsetHSL(0, 0, 0.5)
}
const parent = getParentGroup(object, [
const parent = getParentGroup(selected, [
STRAIGHT_SEGMENT,
TANGENTIAL_ARC_TO_SEGMENT,
PROFILE_START,
@ -412,22 +413,22 @@ class SceneEntities {
).node
sceneInfra.highlightCallback([node.start, node.end])
const yellow = 0xffff00
colorSegment(object, yellow)
colorSegment(selected, yellow)
return
}
sceneInfra.highlightCallback([0, 0])
},
onMouseLeave: ({ object }) => {
onMouseLeave: ({ selected }) => {
sceneInfra.highlightCallback([0, 0])
const parent = getParentGroup(object, [
const parent = getParentGroup(selected, [
STRAIGHT_SEGMENT,
TANGENTIAL_ARC_TO_SEGMENT,
PROFILE_START,
])
const isSelected = parent?.userData?.isSelected
colorSegment(object, isSelected ? 0x0000ff : 0xffffff)
if ([X_AXIS, Y_AXIS].includes(object?.userData?.type)) {
const obj = object as Mesh
colorSegment(selected, isSelected ? 0x0000ff : 0xffffff)
if ([X_AXIS, Y_AXIS].includes(selected?.userData?.type)) {
const obj = selected as Mesh
const mat = obj.material as MeshBasicMaterial
mat.color.set(obj.userData.baseColor)
if (obj.userData.isSelected) mat.color.offsetHSL(0, 0, 0.2)
@ -439,14 +440,14 @@ class SceneEntities {
onDrag: () => {},
onClick: async (args) => {
if (!args) return
if (args.event.which !== 1) return
const { intersection2d } = args
if (!intersection2d) return
if (args.mouseEvent.which !== 1) return
const { intersectionPoint } = args
if (!intersectionPoint?.twoD) return
const firstSeg = sketchGroup.value[0]
const isClosingSketch = compareVec2Epsilon2(
firstSeg.from,
[intersection2d.x, intersection2d.y],
[intersectionPoint.twoD.x, intersectionPoint.twoD.y],
0.5
)
let modifiedAst
@ -462,7 +463,7 @@ class SceneEntities {
modifiedAst = addNewSketchLn({
node: kclManager.ast,
programMemory: kclManager.programMemory,
to: [intersection2d.x, intersection2d.y],
to: [intersectionPoint.twoD.x, intersectionPoint.twoD.y],
from: [lastSegment.to[0], lastSegment.to[1]],
fnName:
lastSegment.type === 'TangentialArcTo'
@ -478,7 +479,7 @@ class SceneEntities {
},
onMove: (args) => {
this.onDragSegment({
...args,
intersection2d: args.intersectionPoint.twoD,
object: Object.values(this.activeSegments).slice(-1)[0],
sketchPathToNode,
draftInfo: {
@ -525,15 +526,11 @@ class SceneEntities {
)
onDragSegment({
object,
event,
intersectPoint,
intersection2d,
sketchPathToNode,
draftInfo,
}: {
object: any
event: any
intersectPoint: Vector3
intersection2d: Vector2
sketchPathToNode: PathToNode
draftInfo?: {
@ -851,22 +848,24 @@ class SceneEntities {
}
setupDefaultPlaneHover() {
sceneInfra.setCallbacks({
onMouseEnter: ({ object }) => {
if (object.parent.userData.type !== DEFAULT_PLANES) return
const type: DefaultPlane = object.userData.type
object.material.color = defaultPlaneColor(type, 0.5, 1)
onMouseEnter: ({ selected }) => {
if (!(selected instanceof Mesh && selected.parent)) return
if (selected.parent.userData.type !== DEFAULT_PLANES) return
const type: DefaultPlane = selected.userData.type
selected.material.color = defaultPlaneColor(type, 0.5, 1)
},
onMouseLeave: ({ object }) => {
if (object.parent.userData.type !== DEFAULT_PLANES) return
const type: DefaultPlane = object.userData.type
object.material.color = defaultPlaneColor(type)
onMouseLeave: ({ selected }) => {
if (!(selected instanceof Mesh && selected.parent)) return
if (selected.parent.userData.type !== DEFAULT_PLANES) return
const type: DefaultPlane = selected.userData.type
selected.material.color = defaultPlaneColor(type)
},
onClick: (args) => {
if (!args || !args.object) return
if (args.event.which !== 1) return
const { intersection } = args
const type = intersection.object.name || ''
const posNorm = Number(intersection.normal?.z) > 0
if (!args || !args.intersects?.[0]) return
if (args.mouseEvent.which !== 1) return
const { intersects } = args
const type = intersects?.[0].object.name || ''
const posNorm = Number(intersects?.[0]?.normal?.z) > 0
let planeString: DefaultPlaneStr = posNorm ? 'XY' : '-XY'
let normal: [number, number, number] = posNorm ? [0, 0, 1] : [0, 0, -1]
if (type === YZ_PLANE) {

View File

@ -48,31 +48,36 @@ export const AXIS_GROUP = 'axisGroup'
export const SKETCH_GROUP_SEGMENTS = 'sketch-group-segments'
export const ARROWHEAD = 'arrowhead'
interface BaseCallbackArgs2 {
object: any
event: any
}
interface BaseCallbackArgs {
event: any
}
interface OnDragCallbackArgs extends BaseCallbackArgs {
object: any
intersection2d: Vector2
intersectPoint: Vector3
intersection: Intersection<Object3D<Object3DEventMap>>
}
interface OnClickCallbackArgs extends BaseCallbackArgs {
intersection2d?: Vector2
intersectPoint: Vector3
intersection: Intersection<Object3D<Object3DEventMap>>
object?: any
interface OnMouseEnterLeaveArgs {
selected: Object3D<Object3DEventMap>
mouseEvent: MouseEvent
}
interface onMoveCallbackArgs {
event: any
intersection2d: Vector2
intersectPoint: Vector3
intersection: Intersection<Object3D<Object3DEventMap>>
interface OnDragCallbackArgs extends OnMouseEnterLeaveArgs {
intersectionPoint: {
twoD: Vector2
threeD: Vector3
}
intersects: Intersection<Object3D<Object3DEventMap>>[]
}
interface OnClickCallbackArgs {
mouseEvent: MouseEvent
intersectionPoint?: {
twoD: Vector2
threeD: Vector3
}
intersects: Intersection<Object3D<Object3DEventMap>>[]
selected?: Object3D<Object3DEventMap>
}
interface OnMoveCallbackArgs {
mouseEvent: MouseEvent
intersectionPoint: {
twoD: Vector2
threeD: Vector3
}
intersects: Intersection<Object3D<Object3DEventMap>>[]
selected?: Object3D<Object3DEventMap>
}
// This singleton class is responsible for all of the under the hood setup for the client side scene.
@ -90,16 +95,16 @@ class SceneInfra {
_baseUnit: BaseUnit = 'mm'
_baseUnitMultiplier = 1
onDragCallback: (arg: OnDragCallbackArgs) => void = () => {}
onMoveCallback: (arg: onMoveCallbackArgs) => void = () => {}
onMoveCallback: (arg: OnMoveCallbackArgs) => void = () => {}
onClickCallback: (arg?: OnClickCallbackArgs) => void = () => {}
onMouseEnter: (arg: BaseCallbackArgs2) => void = () => {}
onMouseLeave: (arg: BaseCallbackArgs2) => void = () => {}
onMouseEnter: (arg: OnMouseEnterLeaveArgs) => void = () => {}
onMouseLeave: (arg: OnMouseEnterLeaveArgs) => void = () => {}
setCallbacks = (callbacks: {
onDrag?: (arg: OnDragCallbackArgs) => void
onMove?: (arg: onMoveCallbackArgs) => void
onMove?: (arg: OnMoveCallbackArgs) => void
onClick?: (arg?: OnClickCallbackArgs) => void
onMouseEnter?: (arg: BaseCallbackArgs2) => void
onMouseLeave?: (arg: BaseCallbackArgs2) => void
onMouseEnter?: (arg: OnMouseEnterLeaveArgs) => void
onMouseLeave?: (arg: OnMouseEnterLeaveArgs) => void
}) => {
this.onDragCallback = callbacks.onDrag || this.onDragCallback
this.onMoveCallback = callbacks.onMove || this.onMoveCallback
@ -142,10 +147,9 @@ class SceneInfra {
currentMouseVector = new Vector2()
selected: {
mouseDownVector: Vector2
object: any
object: Object3D<Object3DEventMap>
hasBeenDragged: boolean
} | null = null
selectedObject: null | any = null
mouseDownVector: null | Vector2 = null
constructor() {
@ -242,8 +246,8 @@ class SceneInfra {
// Dispose of any other resources like geometries, materials, textures
}
getPlaneIntersectPoint = (): {
intersection2d?: Vector2
intersectPoint: Vector3
twoD?: Vector2
threeD?: Vector3
intersection: Intersection<Object3D<Object3DEventMap>>
} | null => {
this.planeRaycaster.setFromCamera(
@ -254,23 +258,11 @@ class SceneInfra {
this.scene.children,
true
)
if (
planeIntersects.length > 0 &&
planeIntersects[0].object.userData.type !== RAYCASTABLE_PLANE
) {
const intersect = planeIntersects[0]
return {
intersectPoint: intersect.point,
intersection: intersect,
}
}
if (
!(
planeIntersects.length > 0 &&
planeIntersects[0].object.userData.type === RAYCASTABLE_PLANE
const recastablePlaneIntersect = planeIntersects.find(
(intersect) => intersect.object.name === RAYCASTABLE_PLANE
)
)
return null
if (!planeIntersects.length) return null
if (!recastablePlaneIntersect) return { intersection: planeIntersects[0] }
const planePosition = planeIntersects[0].object.position
const inversePlaneQuaternion = planeIntersects[0].object.quaternion
.clone()
@ -285,19 +277,21 @@ class SceneInfra {
}
return {
intersection2d: new Vector2(
twoD: new Vector2(
transformedPoint.x / this._baseUnitMultiplier,
transformedPoint.y / this._baseUnitMultiplier
), // z should be 0
intersectPoint: intersectPoint.divideScalar(this._baseUnitMultiplier),
threeD: intersectPoint.divideScalar(this._baseUnitMultiplier),
intersection: planeIntersects[0],
}
}
onMouseMove = (event: MouseEvent) => {
this.currentMouseVector.x = (event.clientX / window.innerWidth) * 2 - 1
this.currentMouseVector.y = -(event.clientY / window.innerHeight) * 2 + 1
onMouseMove = (mouseEvent: MouseEvent) => {
this.currentMouseVector.x = (mouseEvent.clientX / window.innerWidth) * 2 - 1
this.currentMouseVector.y =
-(mouseEvent.clientY / window.innerHeight) * 2 + 1
const planeIntersectPoint = this.getPlaneIntersectPoint()
const intersects = this.raycastRing()
if (this.selected) {
const hasBeenDragged = !compareVec2Epsilon2(
@ -313,47 +307,56 @@ class SceneInfra {
if (
hasBeenDragged &&
planeIntersectPoint &&
planeIntersectPoint.intersection2d
planeIntersectPoint.twoD &&
planeIntersectPoint.threeD
) {
// // console.log('onDrag', this.selected)
this.onDragCallback({
object: this.selected.object,
event,
intersection2d: planeIntersectPoint.intersection2d,
...planeIntersectPoint,
mouseEvent,
intersectionPoint: {
twoD: planeIntersectPoint.twoD,
threeD: planeIntersectPoint.threeD,
},
intersects,
selected: this.selected.object,
})
}
} else if (planeIntersectPoint && planeIntersectPoint.intersection2d) {
} else if (
planeIntersectPoint &&
planeIntersectPoint.twoD &&
planeIntersectPoint.threeD
) {
this.onMoveCallback({
event,
intersection2d: planeIntersectPoint.intersection2d,
...planeIntersectPoint,
mouseEvent,
intersectionPoint: {
twoD: planeIntersectPoint.twoD,
threeD: planeIntersectPoint.threeD,
},
intersects,
})
}
const intersect = this.raycastRing()
if (intersect) {
const firstIntersectObject = intersect.object
if (intersects[0]) {
const firstIntersectObject = intersects[0].object
if (this.hoveredObject !== firstIntersectObject) {
if (this.hoveredObject) {
this.onMouseLeave({
object: this.hoveredObject,
event,
selected: this.hoveredObject,
mouseEvent: mouseEvent,
})
}
this.hoveredObject = firstIntersectObject
this.onMouseEnter({
object: this.hoveredObject,
event,
selected: this.hoveredObject,
mouseEvent: mouseEvent,
})
}
} else {
if (this.hoveredObject) {
this.onMouseLeave({
object: this.hoveredObject,
event,
selected: this.hoveredObject,
mouseEvent: mouseEvent,
})
this.hoveredObject = null
}
@ -363,41 +366,38 @@ class SceneInfra {
raycastRing = (
pixelRadius = 8,
rayRingCount = 32
): Intersection<Object3D<Object3DEventMap>> | undefined => {
): Intersection<Object3D<Object3DEventMap>>[] => {
const mouseDownVector = this.currentMouseVector.clone()
let closestIntersection:
| Intersection<Object3D<Object3DEventMap>>
| undefined = undefined
let closestDistance = Infinity
const intersectionsMap = new Map<
Object3D,
Intersection<Object3D<Object3DEventMap>>
>()
const updateClosestIntersection = (
const updateIntersectionsMap = (
intersections: Intersection<Object3D<Object3DEventMap>>[]
) => {
let intersection = null
for (let i = 0; i < intersections.length; i++) {
if (intersections[i].object.type !== 'GridHelper') {
intersection = intersections[i]
break
intersections.forEach((intersection) => {
if (intersection.object.type !== 'GridHelper') {
const existingIntersection = intersectionsMap.get(intersection.object)
if (
!existingIntersection ||
existingIntersection.distance > intersection.distance
) {
intersectionsMap.set(intersection.object, intersection)
}
}
if (!intersection) return
if (intersection.distance < closestDistance) {
closestDistance = intersection.distance
closestIntersection = intersection
}
})
}
// Check the center point
this.raycaster.setFromCamera(mouseDownVector, this.camControls.camera)
updateClosestIntersection(
updateIntersectionsMap(
this.raycaster.intersectObjects(this.scene.children, true)
)
// Check the ring points
for (let i = 0; i < rayRingCount; i++) {
const angle = (i / rayRingCount) * Math.PI * 2
const offsetX = ((pixelRadius * Math.cos(angle)) / window.innerWidth) * 2
const offsetY = ((pixelRadius * Math.sin(angle)) / window.innerHeight) * 2
const ringVector = new Vector2(
@ -405,11 +405,15 @@ class SceneInfra {
mouseDownVector.y - offsetY
)
this.raycaster.setFromCamera(ringVector, this.camControls.camera)
updateClosestIntersection(
updateIntersectionsMap(
this.raycaster.intersectObjects(this.scene.children, true)
)
}
return closestIntersection
// Convert the map values to an array and sort by distance
return Array.from(intersectionsMap.values()).sort(
(a, b) => a.distance - b.distance
)
}
onMouseDown = (event: MouseEvent) => {
@ -417,45 +421,60 @@ class SceneInfra {
this.currentMouseVector.y = -(event.clientY / window.innerHeight) * 2 + 1
const mouseDownVector = this.currentMouseVector.clone()
const intersect = this.raycastRing()
const intersect = this.raycastRing()[0]
if (intersect) {
const intersectParent = intersect?.object?.parent as Group
this.selected = intersectParent.isGroup
? {
mouseDownVector,
object: intersect?.object,
object: intersect.object,
hasBeenDragged: false,
}
: null
}
}
onMouseUp = (event: MouseEvent) => {
this.currentMouseVector.x = (event.clientX / window.innerWidth) * 2 - 1
this.currentMouseVector.y = -(event.clientY / window.innerHeight) * 2 + 1
onMouseUp = (mouseEvent: MouseEvent) => {
this.currentMouseVector.x = (mouseEvent.clientX / window.innerWidth) * 2 - 1
this.currentMouseVector.y =
-(mouseEvent.clientY / window.innerHeight) * 2 + 1
const planeIntersectPoint = this.getPlaneIntersectPoint()
const intersects = this.raycastRing()
if (this.selected) {
if (this.selected.hasBeenDragged) {
// this is where we could fire a onDragEnd event
// console.log('onDragEnd', this.selected)
} else if (planeIntersectPoint) {
} else if (planeIntersectPoint?.twoD && planeIntersectPoint?.threeD) {
// fire onClick event as there was no drags
this.onClickCallback({
object: this.selected?.object,
event,
...planeIntersectPoint,
mouseEvent,
intersectionPoint: {
twoD: planeIntersectPoint.twoD,
threeD: planeIntersectPoint.threeD,
},
intersects,
selected: this.selected.object,
})
} else if (planeIntersectPoint) {
this.onClickCallback({
mouseEvent,
intersects,
})
} else {
this.onClickCallback()
}
// Clear the selected state whether it was dragged or not
this.selected = null
} else if (planeIntersectPoint) {
} else if (planeIntersectPoint?.twoD && planeIntersectPoint?.threeD) {
this.onClickCallback({
event,
...planeIntersectPoint,
mouseEvent,
intersectionPoint: {
twoD: planeIntersectPoint.twoD,
threeD: planeIntersectPoint.threeD,
},
intersects,
})
} else {
this.onClickCallback()

View File

@ -829,13 +829,13 @@ export const modelingMachine = createMachine(
sceneInfra.setCallbacks({
onClick: async (args) => {
if (!args) return
if (args.event.which !== 1) return
const { intersection2d } = args
if (!intersection2d || !sketchPathToNode) return
if (args.mouseEvent.which !== 1) return
const { intersectionPoint } = args
if (!intersectionPoint?.twoD || !sketchPathToNode) return
const { modifiedAst } = addStartProfileAt(
kclManager.ast,
sketchPathToNode,
[intersection2d.x, intersection2d.y]
[intersectionPoint.twoD.x, intersectionPoint.twoD.y]
)
await kclManager.updateAst(modifiedAst, false)
sceneEntitiesManager.removeIntersectionPlane()