feat: Update pointer event handling in Model and WallAssetInstance components for improved interaction

This commit is contained in:
2025-07-08 11:44:25 +05:30
parent 0e0f48ac02
commit 1b736dafce
2 changed files with 17 additions and 17 deletions

View File

@@ -270,8 +270,8 @@ function Model({ asset }: { readonly asset: Asset }) {
}
}, [activeTool, activeModule, deletableFloorItem]);
const handlePointerOut = useCallback((asset: Asset) => {
if (activeTool === "delete" && deletableFloorItem && deletableFloorItem.uuid === asset.modelUuid) {
const handlePointerOut = useCallback((evt: ThreeEvent<MouseEvent>, asset: Asset) => {
if (evt.intersections.length === 0 && activeTool === "delete" && deletableFloorItem && deletableFloorItem.uuid === asset.modelUuid) {
setDeletableFloorItem(null);
}
}, [activeTool, deletableFloorItem]);
@@ -369,27 +369,27 @@ function Model({ asset }: { readonly asset: Asset }) {
visible={asset.isVisible}
userData={asset}
onDoubleClick={(e) => {
e.stopPropagation();
if (!toggleView) {
e.stopPropagation();
handleDblClick(asset);
}
}}
onClick={(e) => {
e.stopPropagation();
if (!toggleView) {
e.stopPropagation();
handleClick(asset);
}
}}
onPointerEnter={(e) => {
onPointerOver={(e) => {
e.stopPropagation();
if (!toggleView) {
e.stopPropagation();
handlePointerOver(asset);
}
}}
onPointerOut={(e) => {
onPointerLeave={(e) => {
e.stopPropagation();
if (!toggleView) {
e.stopPropagation();
handlePointerOut(asset);
handlePointerOut(e, asset);
}
}}
onContextMenu={(e) => {

View File

@@ -1,6 +1,6 @@
import * as THREE from 'three';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useThree } from '@react-three/fiber';
import { ThreeEvent, useThree } from '@react-three/fiber';
import { Base, Geometry, Subtraction } from '@react-three/csg';
import { retrieveGLTF, storeGLTF } from '../../../../../utils/indexDB/idbUtils';
import { GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
@@ -14,8 +14,8 @@ import { useVersionContext } from '../../../version/versionContext';
import { getUserData } from '../../../../../functions/getUserData';
import closestPointOnLineSegment from '../../../line/helpers/getClosestPointOnLineSegment';
import { upsertWallAssetApi } from '../../../../../services/factoryBuilder/asset/wallAsset/upsertWallAssetApi';
import { deleteWallAssetApi } from '../../../../../services/factoryBuilder/asset/wallAsset/deleteWallAssetApi';
// import { upsertWallAssetApi } from '../../../../../services/factoryBuilder/asset/wallAsset/upsertWallAssetApi';
// import { deleteWallAssetApi } from '../../../../../services/factoryBuilder/asset/wallAsset/deleteWallAssetApi';
function WallAssetInstance({ wallAsset }: { wallAsset: WallAsset }) {
const url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`;
@@ -219,8 +219,8 @@ function WallAssetInstance({ wallAsset }: { wallAsset: WallAsset }) {
}
}, [activeTool, activeModule, deletableWallAsset]);
const handlePointerOut = useCallback((wallAsset: WallAsset) => {
if (activeTool === "delete" && deletableWallAsset && deletableWallAsset.userData.modelUuid === wallAsset.modelUuid) {
const handlePointerOut = useCallback((evt: ThreeEvent<MouseEvent>, wallAsset: WallAsset) => {
if (evt.intersections.length === 0 && activeTool === "delete" && deletableWallAsset && deletableWallAsset.userData.modelUuid === wallAsset.modelUuid) {
setDeletableWallAsset(null);
}
}, [activeTool, deletableWallAsset]);
@@ -281,7 +281,7 @@ function WallAssetInstance({ wallAsset }: { wallAsset: WallAsset }) {
setSelectedWallAsset(null);
}
}}
onPointerEnter={(e) => {
onPointerOver={(e) => {
if (!toggleView) {
e.stopPropagation();
let currentObject = e.object as THREE.Object3D;
@@ -294,10 +294,10 @@ function WallAssetInstance({ wallAsset }: { wallAsset: WallAsset }) {
handlePointerOver(wallAsset, currentObject);
}
}}
onPointerOut={(e) => {
onPointerLeave={(e) => {
if (!toggleView) {
e.stopPropagation();
handlePointerOut(wallAsset);
handlePointerOut(e, wallAsset);
}
}}
userData={wallAsset}