first commit
This commit is contained in:
@@ -0,0 +1,198 @@
|
||||
import { TransformControls } from "@react-three/drei";
|
||||
import * as THREE from "three";
|
||||
import { useSelectedFloorItem, useObjectPosition, useObjectRotation, useActiveTool, useSocketStore } from "../../../../store/builder/store";
|
||||
import { useThree } from "@react-three/fiber";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys";
|
||||
import { useEventsStore } from "../../../../store/simulation/useEventsStore";
|
||||
import { useProductStore } from "../../../../store/simulation/useProductStore";
|
||||
import { upsertProductOrEventApi } from "../../../../services/simulation/products/UpsertProductOrEventApi";
|
||||
import { setFloorItemApi } from "../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { useAssetsStore } from "../../../../store/builder/useAssetStore";
|
||||
import { useProductContext } from "../../../simulation/products/productContext";
|
||||
|
||||
export default function TransformControl() {
|
||||
const state = useThree();
|
||||
const [transformMode, setTransformMode] = useState<"translate" | "rotate" | null>(null);
|
||||
const { selectedFloorItem, setSelectedFloorItem } = useSelectedFloorItem();
|
||||
const { setObjectPosition } = useObjectPosition();
|
||||
const { setObjectRotation } = useObjectRotation();
|
||||
const { activeTool } = useActiveTool();
|
||||
const { socket } = useSocketStore();
|
||||
const { selectedProductStore } = useProductContext();
|
||||
const { selectedProduct } = selectedProductStore();
|
||||
const { updateAsset, getAssetById } = useAssetsStore();
|
||||
|
||||
const email = localStorage.getItem('email')
|
||||
const organization = (email!.split("@")[1]).split(".")[0];
|
||||
const userId = localStorage.getItem("userId");
|
||||
const { projectId } = useParams();
|
||||
|
||||
const updateBackend = (
|
||||
productName: string,
|
||||
productUuid: string,
|
||||
projectId: string,
|
||||
eventData: EventsSchema
|
||||
) => {
|
||||
upsertProductOrEventApi({
|
||||
productName: productName,
|
||||
productUuid: productUuid,
|
||||
projectId: projectId,
|
||||
eventDatas: eventData,
|
||||
});
|
||||
};
|
||||
|
||||
function handleObjectChange() {
|
||||
if (selectedFloorItem) {
|
||||
setObjectPosition(selectedFloorItem.position);
|
||||
setObjectRotation({
|
||||
x: THREE.MathUtils.radToDeg(selectedFloorItem.rotation.x),
|
||||
y: THREE.MathUtils.radToDeg(selectedFloorItem.rotation.y),
|
||||
z: THREE.MathUtils.radToDeg(selectedFloorItem.rotation.z),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function handleMouseUp() {
|
||||
if (selectedFloorItem) {
|
||||
setObjectPosition(selectedFloorItem.position);
|
||||
setObjectRotation({
|
||||
x: THREE.MathUtils.radToDeg(selectedFloorItem.rotation.x),
|
||||
y: THREE.MathUtils.radToDeg(selectedFloorItem.rotation.y),
|
||||
z: THREE.MathUtils.radToDeg(selectedFloorItem.rotation.z),
|
||||
});
|
||||
}
|
||||
const asset = getAssetById(selectedFloorItem?.uuid);
|
||||
if (asset) {
|
||||
if (asset.eventData) {
|
||||
const eventData = useEventsStore.getState().getEventByModelUuid(asset.modelUuid);
|
||||
const productData = useProductStore.getState().getEventByModelUuid(selectedProduct.productUuid, asset.modelUuid);
|
||||
|
||||
if (eventData) {
|
||||
useEventsStore.getState().updateEvent(asset.modelUuid, {
|
||||
position: [selectedFloorItem.position.x, 0, selectedFloorItem.position.z] as [number, number, number],
|
||||
rotation: [selectedFloorItem.rotation.x, selectedFloorItem.rotation.y, selectedFloorItem.rotation.z] as [number, number, number],
|
||||
});
|
||||
}
|
||||
|
||||
if (productData) {
|
||||
const event = useProductStore
|
||||
.getState()
|
||||
.updateEvent(
|
||||
selectedProduct.productUuid,
|
||||
asset.modelUuid,
|
||||
{
|
||||
position: [selectedFloorItem.position.x, 0, selectedFloorItem.position.z] as [number, number, number],
|
||||
rotation: [selectedFloorItem.rotation.x, selectedFloorItem.rotation.y, selectedFloorItem.rotation.z] as [number, number, number],
|
||||
}
|
||||
);
|
||||
|
||||
if (event) {
|
||||
updateBackend(
|
||||
selectedProduct.productName,
|
||||
selectedProduct.productUuid,
|
||||
projectId || '',
|
||||
event
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
updateAsset(asset.modelUuid, {
|
||||
position: [selectedFloorItem.position.x, 0, selectedFloorItem.position.z],
|
||||
rotation: [selectedFloorItem.rotation.x, selectedFloorItem.rotation.y, selectedFloorItem.rotation.z] as [number, number, number],
|
||||
});
|
||||
|
||||
//REST
|
||||
|
||||
// await setFloorItemApi(
|
||||
// organization,
|
||||
// asset.modelUuid,
|
||||
// asset.modelName,
|
||||
// [selectedFloorItem.position.x, 0, selectedFloorItem.position.z,
|
||||
// { "x": selectedFloorItem.rotation.x, "y": selectedFloorItem.rotation.y, "z": selectedFloorItem.rotation.z },
|
||||
// asset.assetId,
|
||||
// false,
|
||||
// true,
|
||||
// );
|
||||
|
||||
//SOCKET
|
||||
|
||||
const data = {
|
||||
organization,
|
||||
modelUuid: asset.modelUuid,
|
||||
modelName: asset.modelName,
|
||||
modelfileID: asset.assetId,
|
||||
position: [selectedFloorItem.position.x, 0, selectedFloorItem.position.z] as [number, number, number],
|
||||
rotation: { x: selectedFloorItem.rotation.x, y: selectedFloorItem.rotation.y, z: selectedFloorItem.rotation.z },
|
||||
isLocked: false,
|
||||
isVisible: true,
|
||||
socketId: socket.id,
|
||||
userId,
|
||||
projectId
|
||||
};
|
||||
|
||||
// console.log('data: ', data);
|
||||
socket.emit("v1:model-asset:add", data);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
const keyCombination = detectModifierKeys(e);
|
||||
if (!selectedFloorItem) return;
|
||||
if (keyCombination === "G") {
|
||||
setTransformMode((prev) => (prev === "translate" ? null : "translate"));
|
||||
}
|
||||
if (keyCombination === "R") {
|
||||
setTransformMode((prev) => (prev === "rotate" ? null : "rotate"));
|
||||
}
|
||||
};
|
||||
|
||||
if (selectedFloorItem) {
|
||||
window.addEventListener("keydown", handleKeyDown);
|
||||
setObjectPosition(selectedFloorItem.position);
|
||||
setObjectRotation({
|
||||
x: THREE.MathUtils.radToDeg(selectedFloorItem.rotation.x),
|
||||
y: THREE.MathUtils.radToDeg(selectedFloorItem.rotation.y),
|
||||
z: THREE.MathUtils.radToDeg(selectedFloorItem.rotation.z),
|
||||
});
|
||||
} else {
|
||||
setTransformMode(null);
|
||||
}
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("keydown", handleKeyDown);
|
||||
};
|
||||
}, [selectedFloorItem]);
|
||||
|
||||
useEffect(() => {
|
||||
if (activeTool === "delete") {
|
||||
if (state.controls) {
|
||||
const target = (state.controls as any).getTarget(new THREE.Vector3());
|
||||
(state.controls as any).setTarget(target.x, 0, target.z, true);
|
||||
}
|
||||
setSelectedFloorItem(null);
|
||||
setObjectPosition({ x: undefined, y: undefined, z: undefined });
|
||||
setObjectRotation({ x: undefined, y: undefined, z: undefined });
|
||||
}
|
||||
}, [activeTool]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{(selectedFloorItem && transformMode) &&
|
||||
<TransformControls
|
||||
showX={transformMode === "translate"}
|
||||
showY={transformMode === "rotate"}
|
||||
showZ={transformMode === "translate"}
|
||||
object={selectedFloorItem}
|
||||
mode={transformMode}
|
||||
onObjectChange={handleObjectChange}
|
||||
onMouseUp={handleMouseUp}
|
||||
/>
|
||||
}
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user