v3-ui #99
|
@ -1,7 +1,9 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import {
|
import {
|
||||||
useLoadingProgress,
|
useLoadingProgress,
|
||||||
|
useRenameModeStore,
|
||||||
useSaveVersion,
|
useSaveVersion,
|
||||||
|
useSelectedFloorItem,
|
||||||
useSocketStore,
|
useSocketStore,
|
||||||
useWidgetSubOption,
|
useWidgetSubOption,
|
||||||
} from "../../../store/builder/store";
|
} from "../../../store/builder/store";
|
||||||
|
@ -30,6 +32,9 @@ import {
|
||||||
import { useProductContext } from "../../../modules/simulation/products/productContext";
|
import { useProductContext } from "../../../modules/simulation/products/productContext";
|
||||||
import { useProductStore } from "../../../store/simulation/useProductStore";
|
import { useProductStore } from "../../../store/simulation/useProductStore";
|
||||||
import RegularDropDown from "../../ui/inputs/RegularDropDown";
|
import RegularDropDown from "../../ui/inputs/RegularDropDown";
|
||||||
|
import RenameTooltip from "../../ui/features/RenameTooltip";
|
||||||
|
import { setFloorItemApi } from "../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi";
|
||||||
|
import { useAssetsStore } from "../../../store/builder/useAssetStore";
|
||||||
|
|
||||||
function MainScene() {
|
function MainScene() {
|
||||||
const { products } = useProductStore();
|
const { products } = useProductStore();
|
||||||
|
@ -47,13 +52,30 @@ function MainScene() {
|
||||||
const { selectedZone } = useSelectedZoneStore();
|
const { selectedZone } = useSelectedZoneStore();
|
||||||
const { setFloatingWidget } = useFloatingWidget();
|
const { setFloatingWidget } = useFloatingWidget();
|
||||||
const { comparisonProduct } = useComparisonProduct();
|
const { comparisonProduct } = useComparisonProduct();
|
||||||
|
const { selectedFloorItem, setSelectedFloorItem } = useSelectedFloorItem();
|
||||||
|
const { setName } = useAssetsStore();
|
||||||
|
const { isRenameMode, setIsRenameMode } = useRenameModeStore();
|
||||||
const handleSelectLayout = (option: string) => {
|
const handleSelectLayout = (option: string) => {
|
||||||
const product = products.find((product) => product.productName === option);
|
const product = products.find((product) => product.productName === option);
|
||||||
if (product) {
|
if (product) {
|
||||||
setMainProduct(product.productUuid, product.productName);
|
setMainProduct(product.productUuid, product.productName);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
const handleObjectRename = async (newName: string) => {
|
||||||
|
const email = localStorage.getItem("email") ?? "";
|
||||||
|
const organization = email?.split("@")[1]?.split(".")[0];
|
||||||
|
let response = await setFloorItemApi(
|
||||||
|
organization,
|
||||||
|
selectedFloorItem.userData.modelUuid,
|
||||||
|
newName
|
||||||
|
);
|
||||||
|
console.log('selectedFloorItem: ', selectedFloorItem.userData.modelUuid);
|
||||||
|
selectedFloorItem.userData.modelName = newName;
|
||||||
|
setSelectedFloorItem(selectedFloorItem);
|
||||||
|
setIsRenameMode(false);
|
||||||
|
|
||||||
|
setName(selectedFloorItem.userData.modelUuid, newName);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
@ -79,6 +101,7 @@ function MainScene() {
|
||||||
{(isPlaying || comparisonProduct !== null) &&
|
{(isPlaying || comparisonProduct !== null) &&
|
||||||
activeModule !== "simulation" && <ControlsPlayer />}
|
activeModule !== "simulation" && <ControlsPlayer />}
|
||||||
|
|
||||||
|
{isRenameMode && selectedFloorItem?.userData.modelName && <RenameTooltip name={selectedFloorItem?.userData.modelName} onSubmit={handleObjectRename} />}
|
||||||
{/* remove this later */}
|
{/* remove this later */}
|
||||||
{activeModule === "builder" && !toggleThreeD && <SelectFloorPlan />}
|
{activeModule === "builder" && !toggleThreeD && <SelectFloorPlan />}
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -12,6 +12,7 @@ type RenameTooltipProps = {
|
||||||
};
|
};
|
||||||
|
|
||||||
const RenameTooltip: React.FC<RenameTooltipProps> = ({ name, onSubmit }) => {
|
const RenameTooltip: React.FC<RenameTooltipProps> = ({ name, onSubmit }) => {
|
||||||
|
console.log('name: ', name);
|
||||||
const [value, setValue] = useState(name);
|
const [value, setValue] = useState(name);
|
||||||
|
|
||||||
const { top, setTop } = useTopData();
|
const { top, setTop } = useTopData();
|
||||||
|
@ -19,6 +20,7 @@ const RenameTooltip: React.FC<RenameTooltipProps> = ({ name, onSubmit }) => {
|
||||||
|
|
||||||
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
console.log('value.trim(): ', value.trim());
|
||||||
onSubmit(value.trim());
|
onSubmit(value.trim());
|
||||||
setTop(0);
|
setTop(0);
|
||||||
setLeft(0);
|
setLeft(0);
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import * as THREE from "three"
|
import * as THREE from "three"
|
||||||
import { useEffect } from 'react'
|
import { useEffect } from 'react'
|
||||||
import { getFloorAssets } from '../../../services/factoryBuilder/assest/floorAsset/getFloorItemsApi';
|
import { getFloorAssets } from '../../../services/factoryBuilder/assest/floorAsset/getFloorItemsApi';
|
||||||
import { useLoadingProgress, useSelectedFloorItem, useSelectedItem, useSocketStore } from '../../../store/builder/store';
|
import { useLoadingProgress, useRenameModeStore, useSelectedFloorItem, useSelectedItem, useSocketStore } from '../../../store/builder/store';
|
||||||
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
|
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
|
||||||
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
|
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
|
||||||
import { FloorItems, RefGroup, RefMesh } from "../../../types/world/worldTypes";
|
import { FloorItems, RefGroup, RefMesh } from "../../../types/world/worldTypes";
|
||||||
|
@ -13,6 +13,7 @@ import { useThree } from "@react-three/fiber";
|
||||||
import { CameraControls } from "@react-three/drei";
|
import { CameraControls } from "@react-three/drei";
|
||||||
import addAssetModel from "./functions/addAssetModel";
|
import addAssetModel from "./functions/addAssetModel";
|
||||||
import { useParams } from "react-router-dom";
|
import { useParams } from "react-router-dom";
|
||||||
|
import { useLeftData, useTopData } from "../../../store/visualization/useZone3DWidgetStore";
|
||||||
|
|
||||||
const gltfLoaderWorker = new Worker(
|
const gltfLoaderWorker = new Worker(
|
||||||
new URL(
|
new URL(
|
||||||
|
@ -31,9 +32,12 @@ function AssetsGroup({ floorGroup, plane }: { readonly floorGroup: RefGroup, rea
|
||||||
const { setSelectedFloorItem } = useSelectedFloorItem();
|
const { setSelectedFloorItem } = useSelectedFloorItem();
|
||||||
const { selectedItem, setSelectedItem } = useSelectedItem();
|
const { selectedItem, setSelectedItem } = useSelectedItem();
|
||||||
const { projectId } = useParams();
|
const { projectId } = useParams();
|
||||||
|
const { isRenameMode, setIsRenameMode } = useRenameModeStore();
|
||||||
const email = localStorage.getItem("email");
|
const email = localStorage.getItem("email");
|
||||||
const organization = email!.split("@")[1].split(".")[0];
|
const organization = email!.split("@")[1].split(".")[0];
|
||||||
const userId = localStorage.getItem("userId")!;
|
const userId = localStorage.getItem("userId")!;
|
||||||
|
const { setTop } = useTopData();
|
||||||
|
const { setLeft } = useLeftData();
|
||||||
|
|
||||||
const loader = new GLTFLoader();
|
const loader = new GLTFLoader();
|
||||||
const dracoLoader = new DRACOLoader();
|
const dracoLoader = new DRACOLoader();
|
||||||
|
@ -257,6 +261,7 @@ function AssetsGroup({ floorGroup, plane }: { readonly floorGroup: RefGroup, rea
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const canvasElement = gl.domElement;
|
const canvasElement = gl.domElement;
|
||||||
|
|
||||||
const onDrop = (event: any) => {
|
const onDrop = (event: any) => {
|
||||||
if (!event.dataTransfer?.files[0]) return;
|
if (!event.dataTransfer?.files[0]) return;
|
||||||
|
|
||||||
|
@ -272,11 +277,28 @@ function AssetsGroup({ floorGroup, plane }: { readonly floorGroup: RefGroup, rea
|
||||||
const onDragOver = (event: any) => {
|
const onDragOver = (event: any) => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
};
|
};
|
||||||
|
const onMouseMove = (evt: any) => {
|
||||||
|
if (!canvasElement) return;
|
||||||
|
const canvasRect = canvasElement.getBoundingClientRect();
|
||||||
|
const relativeX = evt.clientX - canvasRect.left;
|
||||||
|
const relativeY = evt.clientY - canvasRect.top;
|
||||||
|
if (!isRenameMode) {
|
||||||
|
setTop(relativeY);
|
||||||
|
setLeft(relativeX);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
};
|
||||||
|
const onMouseUp = (evt: any) => {
|
||||||
|
setIsRenameMode(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
if (activeModule === "builder") {
|
if (activeModule === "builder") {
|
||||||
canvasElement.addEventListener("drop", onDrop);
|
canvasElement.addEventListener("drop", onDrop);
|
||||||
canvasElement.addEventListener("dragover", onDragOver);
|
canvasElement.addEventListener("dragover", onDragOver);
|
||||||
|
canvasElement.addEventListener("mousemove", onMouseMove);
|
||||||
|
canvasElement.addEventListener("mouseup", onMouseUp);
|
||||||
} else {
|
} else {
|
||||||
if ((controls as CameraControls)) {
|
if ((controls as CameraControls)) {
|
||||||
const target = (controls as CameraControls).getTarget(new THREE.Vector3());
|
const target = (controls as CameraControls).getTarget(new THREE.Vector3());
|
||||||
|
@ -288,8 +310,10 @@ function AssetsGroup({ floorGroup, plane }: { readonly floorGroup: RefGroup, rea
|
||||||
return () => {
|
return () => {
|
||||||
canvasElement.removeEventListener("drop", onDrop);
|
canvasElement.removeEventListener("drop", onDrop);
|
||||||
canvasElement.removeEventListener("dragover", onDragOver);
|
canvasElement.removeEventListener("dragover", onDragOver);
|
||||||
|
canvasElement.removeEventListener("mousemove", onMouseMove);
|
||||||
|
canvasElement.removeEventListener("mouseup", onMouseUp);
|
||||||
};
|
};
|
||||||
}, [selectedItem, camera, pointer, activeModule, controls]);
|
}, [selectedItem, camera, pointer, activeModule, controls, isRenameMode]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Models />
|
<Models />
|
||||||
|
|
|
@ -87,10 +87,10 @@ const FloorGroup = ({
|
||||||
const canvasRect = canvasElement.getBoundingClientRect();
|
const canvasRect = canvasElement.getBoundingClientRect();
|
||||||
const relativeX = evt.clientX - canvasRect.left;
|
const relativeX = evt.clientX - canvasRect.left;
|
||||||
const relativeY = evt.clientY - canvasRect.top;
|
const relativeY = evt.clientY - canvasRect.top;
|
||||||
if (!isRenameMode) {
|
// if (!isRenameMode) {
|
||||||
setTop(relativeY);
|
// setTop(relativeY);
|
||||||
setLeft(relativeX);
|
// setLeft(relativeX);
|
||||||
}
|
// }
|
||||||
if (isLeftMouseDown) {
|
if (isLeftMouseDown) {
|
||||||
drag = true;
|
drag = true;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue