Merge remote-tracking branch 'origin/analysis' into v2-ui
This commit is contained in:
commit
77a15d0f48
|
@ -57,7 +57,7 @@ const ZoneProperties: React.FC = () => {
|
|||
};
|
||||
// Call your API to update the zone
|
||||
let response = await zoneCameraUpdate(zonesdata, organization);
|
||||
console.log("response: ", response);
|
||||
// console.log("response: ", response);
|
||||
if (response.message === "updated successfully") {
|
||||
setZones((prevZones: any[]) =>
|
||||
prevZones.map((zone) =>
|
||||
|
|
|
@ -98,6 +98,7 @@ const DropDownList: React.FC<DropDownListProps> = ({
|
|||
assets: assetsInZone,
|
||||
};
|
||||
});
|
||||
|
||||
setZoneDataList(updatedZoneList);
|
||||
}, [zones, floorItems]);
|
||||
|
||||
|
|
|
@ -19,6 +19,7 @@ import {
|
|||
} from "../../../store/builder/store";
|
||||
import { zoneCameraUpdate } from "../../../services/visulization/zone/zoneCameraUpdation";
|
||||
import { setFloorItemApi } from "../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi";
|
||||
import OuterClick from "../../../utils/outerClick";
|
||||
|
||||
interface Asset {
|
||||
id: string;
|
||||
|
@ -43,13 +44,14 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
|
|||
const { activeModule } = useModuleStore();
|
||||
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
|
||||
const { zoneAssetId, setZoneAssetId } = useZoneAssetId();
|
||||
const { zones } = useZones();
|
||||
const { zones, setZones } = useZones();
|
||||
const { setSubModule } = useSubModuleStore();
|
||||
const [expandedZones, setExpandedZones] = useState<Record<string, boolean>>(
|
||||
{}
|
||||
);
|
||||
const { setFloorItems } = useFloorItems();
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
useSelectedZoneStore.getState().setSelectedZone({
|
||||
zoneName: "",
|
||||
|
@ -82,7 +84,6 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
|
|||
const organization = email?.split("@")[1]?.split(".")[0] ?? "";
|
||||
|
||||
let response = await getZoneData(id, organization);
|
||||
|
||||
setSelectedZone({
|
||||
zoneName: response?.zoneName,
|
||||
activeSides: response?.activeSides ?? [],
|
||||
|
@ -125,6 +126,14 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
|
|||
const response = await zoneCameraUpdate(zonesdata, organization);
|
||||
if (response.message === "updated successfully") {
|
||||
setSelectedZone((prev) => ({ ...prev, zoneName: newName }));
|
||||
|
||||
setZones((prevZones: any[]) =>
|
||||
prevZones.map((zone) =>
|
||||
zone.zoneId === selectedZone.zoneId
|
||||
? { ...zone, zoneName: newName }
|
||||
: zone
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -138,7 +147,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
|
|||
zoneAssetId.id,
|
||||
newName
|
||||
);
|
||||
console.log("response: ", response);
|
||||
// console.log("response: ", response);
|
||||
setFloorItems((prevFloorItems: any[]) =>
|
||||
prevFloorItems.map((floorItems) =>
|
||||
floorItems.modelUuid === zoneAssetId.id
|
||||
|
@ -156,6 +165,69 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
|
|||
);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
let drag = false;
|
||||
let isLeftMouseDown = false;
|
||||
|
||||
const contextClassNames = ["list-wrapper", "zone-properties-container", "list-container"];
|
||||
|
||||
const isOutsideClick = (target: EventTarget | null) => {
|
||||
if (!(target instanceof HTMLElement)) return true;
|
||||
return !contextClassNames.some(className =>
|
||||
target.closest(`.${className}`)
|
||||
);
|
||||
};
|
||||
|
||||
const onMouseDown = (evt: MouseEvent) => {
|
||||
if (evt.button === 0) {
|
||||
isLeftMouseDown = true;
|
||||
drag = false;
|
||||
}
|
||||
};
|
||||
|
||||
const onMouseMove = () => {
|
||||
if (isLeftMouseDown) {
|
||||
drag = true;
|
||||
}
|
||||
};
|
||||
|
||||
const onMouseUp = (evt: MouseEvent) => {
|
||||
if (evt.button === 0) {
|
||||
isLeftMouseDown = false;
|
||||
if (drag) return;
|
||||
|
||||
if (isOutsideClick(evt.target)) {
|
||||
// Clear selected zone
|
||||
setSelectedZone({
|
||||
zoneId: '',
|
||||
zoneName: '',
|
||||
activeSides: [],
|
||||
panelOrder: [],
|
||||
lockedPanels: [],
|
||||
widgets: [],
|
||||
zoneViewPortTarget: [],
|
||||
zoneViewPortPosition: []
|
||||
});
|
||||
setZoneAssetId({
|
||||
id: '',
|
||||
name: '',
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('mousedown', onMouseDown);
|
||||
document.addEventListener('mousemove', onMouseMove);
|
||||
document.addEventListener('mouseup', onMouseUp);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', onMouseDown);
|
||||
document.removeEventListener('mousemove', onMouseMove);
|
||||
document.removeEventListener('mouseup', onMouseUp);
|
||||
};
|
||||
}, []);
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
{items?.length > 0 ? (
|
||||
|
@ -169,7 +241,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
|
|||
toggleZoneExpansion(item.id);
|
||||
}}
|
||||
>
|
||||
<div className={`list-item ${item.active ? "active" : ""}`}>
|
||||
<div className={`list-item ${selectedZone.zoneId === item.id ? "active" : ""}`}>
|
||||
<div className="zone-header">
|
||||
<button className="value" id="zone-name">
|
||||
<RenameInput
|
||||
|
@ -211,7 +283,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
|
|||
{item.assets.map((asset) => (
|
||||
<li
|
||||
key={`asset-${asset.id}`}
|
||||
className="list-container asset-item"
|
||||
className={`list-container asset-item ${zoneAssetId?.id === asset.id ? "active" : ""}`}
|
||||
>
|
||||
<div className="list-item">
|
||||
<button
|
||||
|
|
|
@ -533,7 +533,7 @@ const ZoneGroup: React.FC = () => {
|
|||
<group
|
||||
key={zone.zoneId}
|
||||
name={zone.zoneName}
|
||||
visible={zone.zoneName === selectedZone.zoneName}
|
||||
visible={zone.zoneId === selectedZone.zoneId}
|
||||
>
|
||||
{zone.points
|
||||
.slice(0, -1)
|
||||
|
|
|
@ -41,6 +41,7 @@ export default function Dropped3dWidgets() {
|
|||
const { raycaster, gl, scene, mouse, camera }: ThreeState = useThree();
|
||||
const { widgetSubOption } = useWidgetSubOption();
|
||||
const { selectedZone } = useSelectedZoneStore();
|
||||
let lastClientY = useRef<number | null>(null);
|
||||
const { top, setTop } = useTopData();
|
||||
const { left, setLeft } = useLeftData();
|
||||
const { rightSelect, setRightSelect } = useRightSelected();
|
||||
|
@ -411,6 +412,7 @@ export default function Dropped3dWidgets() {
|
|||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const handleMouseMove = (event: MouseEvent) => {
|
||||
if (!rightClickSelected || !rightSelect) return;
|
||||
|
@ -465,27 +467,59 @@ export default function Dropped3dWidgets() {
|
|||
}
|
||||
}
|
||||
|
||||
// if (rightSelect === "Vertical Move") {
|
||||
// // console.log('rightSelect: ', rightSelect);
|
||||
|
||||
// // console.log('floorPlanesVertical: ', floorPlanesVertical);
|
||||
// // console.log('planeIntersect.current: ', planeIntersect.current);
|
||||
// // const intersect = raycaster.ray.intersectPlane(
|
||||
// // floorPlanesVertical,
|
||||
// // planeIntersect.current
|
||||
// // );
|
||||
// // console.log('intersect: ', intersect);
|
||||
|
||||
// let intersect = event.clientY
|
||||
|
||||
// if (intersect && typeof intersectcontextmenu === "number") {
|
||||
// console.log('intersect: ', intersect);
|
||||
// const diff = intersect - intersectcontextmenu;
|
||||
// const unclampedY = selectedWidget.position[1] + diff;
|
||||
// const newY = Math.max(0, unclampedY); // Prevent going below floor (y=0)
|
||||
|
||||
// setintersectcontextmenu(intersect);
|
||||
|
||||
// const newPosition: [number, number, number] = [
|
||||
// selectedWidget.position[0],
|
||||
// newY,
|
||||
// selectedWidget.position[2],
|
||||
// ];
|
||||
// console.log('newPosition: ', newPosition);
|
||||
|
||||
|
||||
// updateWidgetPosition(selectedZoneId, rightClickSelected, newPosition);
|
||||
// }
|
||||
// }
|
||||
if (rightSelect === "Vertical Move") {
|
||||
const intersect = raycaster.ray.intersectPlane(
|
||||
floorPlanesVertical,
|
||||
planeIntersect.current
|
||||
);
|
||||
|
||||
if (intersect && typeof intersectcontextmenu === "number") {
|
||||
const diff = intersect.y - intersectcontextmenu;
|
||||
const unclampedY = selectedWidget.position[1] + diff;
|
||||
const newY = Math.max(0, unclampedY); // Prevent going below floor (y=0)
|
||||
|
||||
setintersectcontextmenu(intersect.y);
|
||||
|
||||
const newPosition: [number, number, number] = [
|
||||
selectedWidget.position[0],
|
||||
newY,
|
||||
selectedWidget.position[2],
|
||||
];
|
||||
|
||||
updateWidgetPosition(selectedZoneId, rightClickSelected, newPosition);
|
||||
if (lastClientY.current === null) {
|
||||
lastClientY.current = event.clientY;
|
||||
return;
|
||||
}
|
||||
|
||||
const diff = lastClientY.current - event.clientY; // dragging up = increase Y
|
||||
const scaleFactor = 0.05; // tune this based on your scene scale
|
||||
|
||||
const unclampedY = selectedWidget.position[1] + diff * scaleFactor;
|
||||
const newY = Math.max(0, unclampedY);
|
||||
|
||||
lastClientY.current = event.clientY;
|
||||
|
||||
const newPosition: [number, number, number] = [
|
||||
selectedWidget.position[0],
|
||||
newY,
|
||||
selectedWidget.position[2],
|
||||
];
|
||||
|
||||
updateWidgetPosition(selectedZoneId, rightClickSelected, newPosition);
|
||||
}
|
||||
|
||||
if (rightSelect?.startsWith("Rotate")) {
|
||||
|
@ -668,9 +702,12 @@ export default function Dropped3dWidgets() {
|
|||
|
||||
raycaster.setFromCamera(mouse, camera);
|
||||
|
||||
const up = new THREE.Vector3(0, 1, 0);
|
||||
const cameraDirection = new THREE.Vector3();
|
||||
camera.getWorldDirection(cameraDirection);
|
||||
const verticalPlane = new THREE.Plane(cameraDirection);
|
||||
const right = new THREE.Vector3().crossVectors(up, cameraDirection).normalize();
|
||||
const verticalPlane = new THREE.Plane(right, 0);
|
||||
// const verticalPlane = new THREE.Plane(cameraDirection);
|
||||
setFloorPlanesVertical(verticalPlane);
|
||||
|
||||
const intersectPoint = raycaster.ray.intersectPlane(
|
||||
|
|
|
@ -195,35 +195,35 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
|
|||
}
|
||||
}, [chartMeasurements, chartDuration, widgetName]);
|
||||
|
||||
useEffect(() => {}, [rotation]);
|
||||
useEffect(() => { }, [rotation]);
|
||||
|
||||
return (
|
||||
|
||||
<Html
|
||||
// data
|
||||
position={position}
|
||||
scale={[0.5, 0.5, 0.5]}
|
||||
rotation={rotation}
|
||||
// class
|
||||
wrapperClass="pointer-none"
|
||||
// other
|
||||
transform
|
||||
sprite={true}
|
||||
zIndexRange={[1, 0]}
|
||||
// style={{
|
||||
// transform: transformStyle.transform,
|
||||
// transformStyle: "preserve-3d",
|
||||
// transition: "transform 0.1s ease-out",
|
||||
// }}
|
||||
prepend
|
||||
// sprite
|
||||
distanceFactor={20}
|
||||
// events
|
||||
onDragOver={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
onDrop={(e) => {
|
||||
e.preventDefault();
|
||||
// e.stopPropagation();
|
||||
}}
|
||||
wrapperClass="pointer-none"
|
||||
>
|
||||
<div
|
||||
className={`productionCapacity-wrapper card ${
|
||||
selectedChartId?.id === id ? "activeChart" : ""
|
||||
}`}
|
||||
className={`productionCapacity-wrapper card ${selectedChartId?.id === id ? "activeChart" : ""
|
||||
}`}
|
||||
onClick={() => setSelectedChartId({ id: id, type: type })}
|
||||
onContextMenu={onContextMenu}
|
||||
style={{
|
||||
|
|
|
@ -242,12 +242,12 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({
|
|||
rotation={rotation}
|
||||
scale={[0.5, 0.5, 0.5]}
|
||||
transform
|
||||
sprite={true}
|
||||
// style={{
|
||||
// transform: transformStyle.transform,
|
||||
// transformStyle: "preserve-3d",
|
||||
// transition: "transform 0.1s ease-out",
|
||||
// }}
|
||||
zIndexRange={[1, 0]}
|
||||
prepend
|
||||
distanceFactor={20}
|
||||
|
||||
|
||||
|
||||
>
|
||||
<div
|
||||
className={`returnOfInvestment card ${
|
||||
|
|
|
@ -121,7 +121,9 @@ const StateWorking: React.FC<StateWorkingProps> = ({
|
|||
scale={[0.5, 0.5, 0.5]}
|
||||
transform
|
||||
zIndexRange={[1, 0]}
|
||||
sprite={true}
|
||||
// sprite={true}
|
||||
prepend
|
||||
distanceFactor={20}
|
||||
// style={{
|
||||
// transform: transformStyle.transform,
|
||||
// transformStyle: "preserve-3d",
|
||||
|
|
|
@ -223,7 +223,9 @@ const Throughput: React.FC<ThroughputProps> = ({
|
|||
scale={[0.5, 0.5, 0.5]}
|
||||
transform
|
||||
zIndexRange={[1, 0]}
|
||||
sprite={true}
|
||||
prepend
|
||||
distanceFactor={20}
|
||||
// sprite={true}
|
||||
>
|
||||
<div
|
||||
className={`throughput-wrapper card ${selectedChartId?.id === id ? "activeChart" : ""
|
||||
|
|
|
@ -478,7 +478,6 @@ const DroppedObjects: React.FC = () => {
|
|||
|
||||
const widthMultiplier = parseFloat(containerWidth) * 0.13;
|
||||
|
||||
console.log('zone?.objects: ', zone?.objects);
|
||||
return (
|
||||
<div
|
||||
onPointerMove={handlePointerMove}
|
||||
|
|
|
@ -176,7 +176,7 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
|
|||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0];
|
||||
let response = await getSelect2dZoneData(zoneId, organization);
|
||||
console.log("response: ", response);
|
||||
|
||||
let res = await getFloatingZoneData(zoneId, organization);
|
||||
console.log("res: ", res);
|
||||
|
||||
|
|
|
@ -85,3 +85,12 @@
|
|||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.list-container.active {
|
||||
.list-item {
|
||||
background: var(--highlight-accent-color);
|
||||
.input-value {
|
||||
color: var(--highlight-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue