diff --git a/app/.gitignore b/app/.gitignore index 7daa59f..7aa9ba4 100644 --- a/app/.gitignore +++ b/app/.gitignore @@ -1,28 +1,29 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - -# dependencies -/node_modules -/.pnp -.pnp.js - -# testing -/coverage - -# production -/build - -# misc -.DS_Store -.env.local -.env.development.local -.env.test.local -.env.production.local - -npm-debug.log* -yarn-debug.log* -yarn-error.log* - - -# remove zip -*.zip -**/temp/ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/package-lock.json +/.pnp +.pnp.js + +# testing +/coverage + +# production +/build + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* + + +# remove zip +*.zip +**/temp/ diff --git a/app/src/assets/image/image.png b/app/src/assets/image/image.png new file mode 100644 index 0000000..61d4cdb Binary files /dev/null and b/app/src/assets/image/image.png differ diff --git a/app/src/components/icons/RealTimeVisulationIcons.tsx b/app/src/components/icons/RealTimeVisulationIcons.tsx index 228cd21..1d144d6 100644 --- a/app/src/components/icons/RealTimeVisulationIcons.tsx +++ b/app/src/components/icons/RealTimeVisulationIcons.tsx @@ -107,7 +107,7 @@ export function StockIncreseIcon() { fill="none" xmlns="http://www.w3.org/2000/svg" > - + - - + + ); diff --git a/app/src/components/layout/sidebarLeft/Header.tsx b/app/src/components/layout/sidebarLeft/Header.tsx index 9615470..ce76cb3 100644 --- a/app/src/components/layout/sidebarLeft/Header.tsx +++ b/app/src/components/layout/sidebarLeft/Header.tsx @@ -3,9 +3,12 @@ import { ToggleSidebarIcon } from "../../icons/HeaderIcons"; import { LogoIcon } from "../../icons/Logo"; import FileMenu from "../../ui/FileMenu"; import useToggleStore from "../../../store/useUIToggleStore"; +import useModuleStore from "../../../store/useModuleStore"; const Header: React.FC = () => { const { toggleUI, setToggleUI } = useToggleStore(); + const { activeModule } = useModuleStore(); + return (
@@ -19,7 +22,7 @@ const Header: React.FC = () => {
{ - setToggleUI(!toggleUI); + if (activeModule !== "market") setToggleUI(!toggleUI); }} > diff --git a/app/src/components/layout/sidebarRight/SideBarRight.tsx b/app/src/components/layout/sidebarRight/SideBarRight.tsx index a29d930..abeca05 100644 --- a/app/src/components/layout/sidebarRight/SideBarRight.tsx +++ b/app/src/components/layout/sidebarRight/SideBarRight.tsx @@ -1,6 +1,8 @@ import React, { useEffect, useState } from "react"; import Header from "./Header"; -import useModuleStore from "../../../store/useModuleStore"; +import useModuleStore, { + useSubModuleStore, +} from "../../../store/useModuleStore"; import { AnalysisIcon, MechanicsIcon, @@ -14,15 +16,19 @@ import GlobalProperties from "./properties/GlobalProperties"; import AsstePropertiies from "./properties/AssetProperties"; import Analysis from "./analysis/Analysis"; import Simulations from "./simulation/Simulations"; +import { useSelectedActionSphere } from "../../../store/store"; +import ZoneProperties from "./properties/ZoneProperties"; const SideBarRight: React.FC = () => { const { activeModule } = useModuleStore(); - const [activeList, setActiveList] = useState("properties"); + const [activeList] = useState("properties"); const { toggleUI } = useToggleStore(); - + const { selectedActionSphere } = useSelectedActionSphere(); + const { subModule, setSubModule } = useSubModuleStore(); // Reset activeList whenever activeModule changes useEffect(() => { - setActiveList("properties"); + if (activeModule !== "simulation") setSubModule("properties"); + if (activeModule === "simulation") setSubModule("mechanics"); }, [activeModule]); return ( @@ -30,37 +36,39 @@ const SideBarRight: React.FC = () => {
{toggleUI && (
+ {/* {activeModule === "builder" && ( */}
setActiveList("properties")} + onClick={() => setSubModule("properties")} > - +
+ {/* )} */} {activeModule === "simulation" && ( <>
setActiveList("mechanics")} + onClick={() => setSubModule("mechanics")} >
setActiveList("simulations")} + onClick={() => setSubModule("simulations")} >
setActiveList("analysis")} + onClick={() => setSubModule("analysis")} >
@@ -75,6 +83,7 @@ const SideBarRight: React.FC = () => {
+ {/* */} {/* */}
@@ -84,14 +93,21 @@ const SideBarRight: React.FC = () => { {toggleUI && activeModule === "simulation" && ( <> - {activeList === "mechanics" && ( + {subModule === "mechanics" && selectedActionSphere && (
)} - {activeList === "analysis" && ( + {subModule === "mechanics" && !selectedActionSphere && ( +
+
+ +
+
+ )} + {subModule === "analysis" && (
diff --git a/app/src/components/layout/sidebarRight/customInput/Vector3Input.tsx b/app/src/components/layout/sidebarRight/customInput/Vector3Input.tsx new file mode 100644 index 0000000..9a6389a --- /dev/null +++ b/app/src/components/layout/sidebarRight/customInput/Vector3Input.tsx @@ -0,0 +1,59 @@ +import React from "react"; +import { EyeDroperIcon } from "../../../icons/ExportCommonIcons"; + +interface PositionInputProps { + onChange: (value: string) => void; // Callback for value change + header: string; + placeholder?: string; // Optional placeholder + type?: string; // Input type (e.g., text, number, email) +} + +const Vector3Input: React.FC = ({ + onChange, + header, + placeholder = "Enter value", // Default placeholder + type = "number", // Default type +}) => { + return ( +
+
+ {header}{" "} +
+ +
+
+
+
+
X :
+ onChange(e.target.value)} + placeholder={placeholder} + /> +
+
+
Y :
+ onChange(e.target.value)} + placeholder={placeholder} + min={0} + /> +
+
+
Z :
+ onChange(e.target.value)} + placeholder={placeholder} + /> +
+
+
+ ); +}; + +export default Vector3Input; diff --git a/app/src/components/layout/sidebarRight/mechanics/MachineMechanics.tsx b/app/src/components/layout/sidebarRight/mechanics/MachineMechanics.tsx index 85ae67a..9a7e81b 100644 --- a/app/src/components/layout/sidebarRight/mechanics/MachineMechanics.tsx +++ b/app/src/components/layout/sidebarRight/mechanics/MachineMechanics.tsx @@ -14,8 +14,8 @@ import EyeDropInput from "../../../ui/inputs/EyeDropInput"; import { useSelectedActionSphere } from "../../../../store/store"; const MachineMechanics: React.FC = () => { - const { selectedActionSphere, setSelectedActionSphere } = useSelectedActionSphere(); - console.log('selectedActionSphere: ', selectedActionSphere); + const { selectedActionSphere } = useSelectedActionSphere(); + console.log("selectedActionSphere: ", selectedActionSphere); const [actionList, setActionList] = useState([]); const [triggerList, setTriggerList] = useState([]); const [selectedItem, setSelectedItem] = useState<{ @@ -71,7 +71,9 @@ const MachineMechanics: React.FC = () => { return (
-
{selectedActionSphere.path.modelName}
+
+ {selectedActionSphere?.path?.modelName || "path name not found"} +
{/*
Process:
{ {actionList.map((action, index) => (
{ {triggerList.map((trigger, index) => (
{ label="Speed" value="" activeOption=".mm" - onChange={() => { }} + onChange={() => {}} /> diff --git a/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx b/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx new file mode 100644 index 0000000..3428b48 --- /dev/null +++ b/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx @@ -0,0 +1,17 @@ +import React from "react"; +import RenameInput from "../../../ui/inputs/RenameInput"; +import Vector3Input from "../customInput/Vector3Input"; + +const ZoneProperties = () => { + return ( +
+
+ +
+ {}} header="Target"/> + {}} header="Position"/> +
+ ); +}; + +export default ZoneProperties; diff --git a/app/src/components/layout/sidebarRight/simulation/Simulations.tsx b/app/src/components/layout/sidebarRight/simulation/Simulations.tsx index 2a361ba..2a12734 100644 --- a/app/src/components/layout/sidebarRight/simulation/Simulations.tsx +++ b/app/src/components/layout/sidebarRight/simulation/Simulations.tsx @@ -28,7 +28,7 @@ const DropList: React.FC = ({ val }) => { }} > {val.pathName} -
+
@@ -87,8 +87,9 @@ const Simulations: React.FC = () => { {productsList.map((action, index) => (
{ const { activeModule, setActiveModule } = useModuleStore(); - const { isPlaying, setIsPlaying } = usePlayButtonStore(); + const { setToggleUI } = useToggleStore(); return (
setActiveModule("builder")} + onClick={() => { + setActiveModule("builder"); + setToggleUI(true); + }} >
@@ -25,7 +28,10 @@ const ModuleToggle: React.FC = () => {
setActiveModule("simulation")} + onClick={() => { + setActiveModule("simulation"); + setToggleUI(true); + }} >
@@ -36,7 +42,10 @@ const ModuleToggle: React.FC = () => { className={`module-list ${ activeModule === "visualization" && "active" }`} - onClick={() => setActiveModule("visualization")} + onClick={() => { + setActiveModule("visualization"); + setToggleUI(true); + }} >
@@ -45,7 +54,10 @@ const ModuleToggle: React.FC = () => {
setActiveModule("market")} + onClick={() => { + setActiveModule("market"); + setToggleUI(false); + }} >
diff --git a/app/src/components/ui/componets/RealTimeVisulization.tsx b/app/src/components/ui/componets/RealTimeVisulization.tsx index 8a394fd..d7833b6 100644 --- a/app/src/components/ui/componets/RealTimeVisulization.tsx +++ b/app/src/components/ui/componets/RealTimeVisulization.tsx @@ -5,6 +5,7 @@ import AddButtons from "./AddButtons"; import { useSelectedZoneStore } from "../../../store/useZoneStore"; import DisplayZone from "./DisplayZone"; import Scene from "../../../modules/scene/scene"; +import useModuleStore from "../../../store/useModuleStore"; type Side = "top" | "bottom" | "left" | "right"; @@ -60,6 +61,7 @@ const RealTimeVisulization: React.FC = () => { }); const { isPlaying } = usePlayButtonStore(); + const { activeModule } = useModuleStore(); const { selectedZone, setSelectedZone } = useSelectedZoneStore(); useEffect(() => { @@ -73,36 +75,48 @@ const RealTimeVisulization: React.FC = () => {
- {!isPlaying && ( - + {activeModule === "visualization" && ( + <> + + + {!isPlaying && ( + + )} + + + )} - - {" "}
); }; diff --git a/app/src/modules/builder/groups/zoneGroup.tsx b/app/src/modules/builder/groups/zoneGroup.tsx index 4676a1d..9e0bc15 100644 --- a/app/src/modules/builder/groups/zoneGroup.tsx +++ b/app/src/modules/builder/groups/zoneGroup.tsx @@ -1,466 +1,509 @@ -import React, { useState, useEffect, useMemo, useRef } from "react"; -import { Line, Sphere } from "@react-three/drei"; -import { useThree, useFrame } from "@react-three/fiber"; -import * as THREE from "three"; -import { useActiveLayer, useDeleteModels, useDeletePointOrLine, useMovePoint, useSocketStore, useToggleView, useToolMode, useRemovedLayer, useZones, useZonePoints } from "../../../store/store"; -// import { setZonesApi } from "../../../services/factoryBuilder/zones/setZonesApi"; -// import { deleteZonesApi } from "../../../services/factoryBuilder/zones/deleteZoneApi"; -import { getZonesApi } from "../../../services/factoryBuilder/zones/getZonesApi"; - -import * as CONSTANTS from '../../../types/world/worldConstants'; - -const ZoneGroup: React.FC = () => { - const { camera, pointer, gl, raycaster, scene, controls } = useThree(); - const [startPoint, setStartPoint] = useState(null); - const [endPoint, setEndPoint] = useState(null); - const { zones, setZones } = useZones(); - const { zonePoints, setZonePoints } = useZonePoints(); - const [isDragging, setIsDragging] = useState(false); - const [draggedSphere, setDraggedSphere] = useState(null); - const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []); - const { toggleView } = useToggleView(); - const { deletePointOrLine, setDeletePointOrLine } = useDeletePointOrLine(); - const { removedLayer, setRemovedLayer } = useRemovedLayer(); - const { toolMode, setToolMode } = useToolMode(); - const { movePoint, setMovePoint } = useMovePoint(); - const { deleteModels, setDeleteModels } = useDeleteModels(); - const { activeLayer, setActiveLayer } = useActiveLayer(); - const { socket } = useSocketStore(); - - const groupsRef = useRef(); - - const zoneMaterial = useMemo(() => new THREE.ShaderMaterial({ - side: THREE.DoubleSide, - vertexShader: ` - varying vec2 vUv; - void main(){ - gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); - vUv = uv; - } - `, - fragmentShader: ` - varying vec2 vUv; - uniform vec3 uColor; - void main(){ - float alpha = 1.0 - vUv.y; - gl_FragColor = vec4(uColor, alpha); - } - `, - uniforms: { - uColor: { value: new THREE.Color(CONSTANTS.zoneConfig.color) }, - }, - transparent: true, - }), []); - - useEffect(() => { - const fetchZones = async () => { - const email = localStorage.getItem('email'); - if (!email) return; - - const organization = email.split("@")[1].split(".")[0]; - const data = await getZonesApi(organization); - - if (data.data && data.data.length > 0) { - const fetchedZones = data.data.map((zone: any) => ({ - zoneId: zone.zoneId, - zoneName: zone.zoneName, - points: zone.points, - layer: zone.layer - })); - - setZones(fetchedZones); - - const fetchedPoints = data.data.flatMap((zone: any) => - zone.points.slice(0, 4).map((point: [number, number, number]) => new THREE.Vector3(...point)) - ); - - setZonePoints(fetchedPoints); - } - }; - - fetchZones(); - }, []); - - useEffect(() => { - - localStorage.setItem('zones', JSON.stringify(zones)); - - }, [zones]) - - useEffect(() => { - if (removedLayer) { - const updatedZones = zones.filter((zone: any) => zone.layer !== removedLayer); - setZones(updatedZones); - - const updatedzonePoints = zonePoints.filter((_: any, index: any) => { - const zoneIndex = Math.floor(index / 4); - return zones[zoneIndex]?.layer !== removedLayer; - }); - setZonePoints(updatedzonePoints); - - zones.filter((zone: any) => zone.layer === removedLayer).forEach((zone: any) => { - deleteZoneFromBackend(zone.zoneId); - }); - - setRemovedLayer(null); - } - }, [removedLayer]); - - useEffect(() => { - if (toolMode !== "Zone") { - setStartPoint(null); - setEndPoint(null); - } else { - setDeletePointOrLine(false); - setMovePoint(false); - setDeleteModels(false); - } - if (!toggleView) { - setStartPoint(null); - setEndPoint(null); - } - }, [toolMode, toggleView]); - - - const addZoneToBackend = async (zone: { zoneId: string; zoneName: string; points: [number, number, number][]; layer: string }) => { - - const email = localStorage.getItem('email'); - const userId = localStorage.getItem('userId'); - const organization = (email!.split("@")[1]).split(".")[0]; - - const input = { - userId: userId, - organization: organization, - zoneData: { - zoneName: zone.zoneName, - zoneId: zone.zoneId, - points: zone.points, - layer: zone.layer - } - } - - socket.emit('v2:zone:set', input); - }; - - const updateZoneToBackend = async (zone: { zoneId: string; zoneName: string; points: [number, number, number][]; layer: string }) => { - - const email = localStorage.getItem('email'); - const userId = localStorage.getItem('userId'); - const organization = (email!.split("@")[1]).split(".")[0]; - - const input = { - userId: userId, - organization: organization, - zoneData: { - zoneName: zone.zoneName, - zoneId: zone.zoneId, - points: zone.points, - layer: zone.layer - } - } - - socket.emit('v2:zone:set', input); - }; - - const deleteZoneFromBackend = async (zoneId: string) => { - - const email = localStorage.getItem('email'); - const userId = localStorage.getItem('userId'); - const organization = (email!.split("@")[1]).split(".")[0]; - - const input = { - userId: userId, - organization: organization, - zoneId: zoneId - } - - socket.emit('v2:zone:delete', input); - }; - - const handleDeleteZone = (zoneId: string) => { - const updatedZones = zones.filter((zone: any) => zone.zoneId !== zoneId); - setZones(updatedZones); - - const zoneIndex = zones.findIndex((zone: any) => zone.zoneId === zoneId); - if (zoneIndex !== -1) { - const zonePointsToRemove = zonePoints.slice(zoneIndex * 4, zoneIndex * 4 + 4); - zonePointsToRemove.forEach((point: any) => groupsRef.current.remove(point)); - const updatedzonePoints = zonePoints.filter((_: any, index: any) => index < zoneIndex * 4 || index >= zoneIndex * 4 + 4); - setZonePoints(updatedzonePoints); - } - - deleteZoneFromBackend(zoneId); - }; - - useEffect(() => { - if (!camera || !toggleView) return; - const canvasElement = gl.domElement; - - let drag = false; - let isLeftMouseDown = false; - - const onMouseDown = (evt: any) => { - if (evt.button === 0) { - isLeftMouseDown = true; - drag = false; - - raycaster.setFromCamera(pointer, camera); - const intersects = raycaster.intersectObjects(groupsRef.current.children, true); - - if (intersects.length > 0 && movePoint) { - const clickedObject = intersects[0].object; - const sphereIndex = zonePoints.findIndex((point: any) => point.equals(clickedObject.position)); - if (sphereIndex !== -1) { - (controls as any).enabled = false; - setDraggedSphere(zonePoints[sphereIndex]); - setIsDragging(true); - } - } - } - }; - - const onMouseUp = (evt: any) => { - if (evt.button === 0 && !drag && !isDragging && !deletePointOrLine) { - isLeftMouseDown = false; - - if (!startPoint && !movePoint) { - raycaster.setFromCamera(pointer, camera); - const intersectionPoint = new THREE.Vector3(); - const point = raycaster.ray.intersectPlane(plane, intersectionPoint); - if (point) { - setStartPoint(point); - setEndPoint(null); - } - } else if (startPoint && !movePoint) { - raycaster.setFromCamera(pointer, camera); - const intersectionPoint = new THREE.Vector3(); - const point = raycaster.ray.intersectPlane(plane, intersectionPoint); - if (!point) return; - - const points = [ - [startPoint.x, 0.15, startPoint.z], - [point.x, 0.15, startPoint.z], - [point.x, 0.15, point.z], - [startPoint.x, 0.15, point.z], - [startPoint.x, 0.15, startPoint.z], - ] as [number, number, number][]; - - const zoneName = `Zone ${zones.length + 1}`; - const zoneId = THREE.MathUtils.generateUUID(); - const newZone = { - zoneId, - zoneName, - points: points, - layer: activeLayer - }; - - const newZones = [...zones, newZone]; - - setZones(newZones); - - const newzonePoints = [ - new THREE.Vector3(startPoint.x, 0.15, startPoint.z), - new THREE.Vector3(point.x, 0.15, startPoint.z), - new THREE.Vector3(point.x, 0.15, point.z), - new THREE.Vector3(startPoint.x, 0.15, point.z), - ]; - - const updatedZonePoints = [...zonePoints, ...newzonePoints]; - setZonePoints(updatedZonePoints); - - addZoneToBackend(newZone); - - setStartPoint(null); - setEndPoint(null); - } - } else if (evt.button === 0 && !drag && !isDragging && deletePointOrLine) { - raycaster.setFromCamera(pointer, camera); - const intersects = raycaster.intersectObjects(groupsRef.current.children, true); - - if (intersects.length > 0) { - const clickedObject = intersects[0].object; - - const sphereIndex = zonePoints.findIndex((point: any) => point.equals(clickedObject.position)); - if (sphereIndex !== -1) { - const zoneIndex = Math.floor(sphereIndex / 4); - const zoneId = zones[zoneIndex].zoneId; - handleDeleteZone(zoneId); - return; - } - } - } - - if (evt.button === 0) { - if (isDragging && draggedSphere) { - setIsDragging(false); - setDraggedSphere(null); - - const sphereIndex = zonePoints.findIndex((point: any) => point === draggedSphere); - if (sphereIndex !== -1) { - const zoneIndex = Math.floor(sphereIndex / 4); - - if (zoneIndex !== -1 && zones[zoneIndex]) { - updateZoneToBackend(zones[zoneIndex]); - } - } - } - } - }; - - const onMouseMove = () => { - if (isLeftMouseDown) { - drag = true; - } - raycaster.setFromCamera(pointer, camera); - const intersects = raycaster.intersectObjects(groupsRef.current.children, true); - - if (intersects.length > 0 && intersects[0].object.name.includes('point')) { - gl.domElement.style.cursor = movePoint ? "pointer" : "default"; - } else { - gl.domElement.style.cursor = "default"; - } - if (isDragging && draggedSphere) { - raycaster.setFromCamera(pointer, camera); - const intersectionPoint = new THREE.Vector3(); - const point = raycaster.ray.intersectPlane(plane, intersectionPoint); - if (point) { - draggedSphere.set(point.x, 0.15, point.z); - - const sphereIndex = zonePoints.findIndex((point: any) => point === draggedSphere); - if (sphereIndex !== -1) { - const zoneIndex = Math.floor(sphereIndex / 4); - const cornerIndex = sphereIndex % 4; - - const updatedZones = zones.map((zone: any, index: number) => { - if (index === zoneIndex) { - const updatedPoints = [...zone.points]; - updatedPoints[cornerIndex] = [point.x, 0.15, point.z]; - updatedPoints[4] = updatedPoints[0]; - return { ...zone, points: updatedPoints }; - } - return zone; - }); - - setZones(updatedZones); - } - } - } - }; - - const onContext = (event: any) => { - event.preventDefault(); - setStartPoint(null); - setEndPoint(null); - }; - - if (toolMode === 'Zone' || deletePointOrLine || movePoint) { - canvasElement.addEventListener("mousedown", onMouseDown); - canvasElement.addEventListener("mouseup", onMouseUp); - canvasElement.addEventListener("mousemove", onMouseMove); - canvasElement.addEventListener("contextmenu", onContext); - } - return () => { - canvasElement.removeEventListener("mousedown", onMouseDown); - canvasElement.removeEventListener("mouseup", onMouseUp); - canvasElement.removeEventListener("mousemove", onMouseMove); - canvasElement.removeEventListener("contextmenu", onContext); - }; - }, [gl, camera, startPoint, toggleView, scene, toolMode, zones, isDragging, deletePointOrLine, zonePoints, draggedSphere, movePoint, activeLayer]); - - useFrame(() => { - if (!startPoint) return; - raycaster.setFromCamera(pointer, camera); - const intersectionPoint = new THREE.Vector3(); - const point = raycaster.ray.intersectPlane(plane, intersectionPoint); - if (point) { - setEndPoint(point); - } - }); - return ( - - - {zones - .map((zone: any) => ( - - {zone.points.slice(0, -1).map((point: [number, number, number], index: number) => { - const nextPoint = zone.points[index + 1]; - - const point1 = new THREE.Vector3(point[0], point[1], point[2]); - const point2 = new THREE.Vector3(nextPoint[0], nextPoint[1], nextPoint[2]); - - const planeWidth = point1.distanceTo(point2); - const planeHeight = CONSTANTS.wallConfig.height; - - const midpoint = new THREE.Vector3((point1.x + point2.x) / 2, (CONSTANTS.wallConfig.height / 2) + ((zone.layer - 1) * CONSTANTS.wallConfig.height), (point1.z + point2.z) / 2); - - const angle = Math.atan2(point2.z - point1.z, point2.x - point1.x); - - return ( - - - - - ); - })} - - ))} - - - {zones - .filter((zone: any) => zone.layer === activeLayer) - .map((zone: any) => ( - { - e.stopPropagation(); - if (deletePointOrLine) { - handleDeleteZone(zone.zoneId); - } - }} - /> - ))} - - - {zones.filter((zone: any) => zone.layer === activeLayer).flatMap((zone: any) => ( - zone.points.slice(0, 4).map((point: any, pointIndex: number) => ( - - - - )) - ))} - - - {startPoint && endPoint && ( - - )} - - - ); -}; - +import React, { useState, useEffect, useMemo, useRef } from "react"; +import { Line, Sphere } from "@react-three/drei"; +import { useThree, useFrame } from "@react-three/fiber"; +import * as THREE from "three"; +import { useActiveLayer, useDeleteModels, useDeletePointOrLine, useMovePoint, useSocketStore, useToggleView, useToolMode, useRemovedLayer, useZones, useZonePoints } from "../../../store/store"; +// import { setZonesApi } from "../../../services/factoryBuilder/zones/setZonesApi"; +// import { deleteZonesApi } from "../../../services/factoryBuilder/zones/deleteZoneApi"; +import { getZonesApi } from "../../../services/factoryBuilder/zones/getZonesApi"; + +import * as CONSTANTS from '../../../types/world/worldConstants'; + +const ZoneGroup: React.FC = () => { + const { camera, pointer, gl, raycaster, scene, controls } = useThree(); + const [startPoint, setStartPoint] = useState(null); + const [endPoint, setEndPoint] = useState(null); + const { zones, setZones } = useZones(); + const { zonePoints, setZonePoints } = useZonePoints(); + const [isDragging, setIsDragging] = useState(false); + const [draggedSphere, setDraggedSphere] = useState(null); + const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []); + const { toggleView } = useToggleView(); + const { deletePointOrLine, setDeletePointOrLine } = useDeletePointOrLine(); + const { removedLayer, setRemovedLayer } = useRemovedLayer(); + const { toolMode, setToolMode } = useToolMode(); + const { movePoint, setMovePoint } = useMovePoint(); + const { deleteModels, setDeleteModels } = useDeleteModels(); + const { activeLayer, setActiveLayer } = useActiveLayer(); + const { socket } = useSocketStore(); + + const groupsRef = useRef(); + + const zoneMaterial = useMemo(() => new THREE.ShaderMaterial({ + side: THREE.DoubleSide, + vertexShader: ` + varying vec2 vUv; + void main(){ + gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); + vUv = uv; + } + `, + fragmentShader: ` + varying vec2 vUv; + uniform vec3 uColor; + void main(){ + float alpha = 1.0 - vUv.y; + gl_FragColor = vec4(uColor, alpha); + } + `, + uniforms: { + uColor: { value: new THREE.Color(CONSTANTS.zoneConfig.color) }, + }, + transparent: true, + }), []); + + useEffect(() => { + const fetchZones = async () => { + const email = localStorage.getItem('email'); + if (!email) return; + + const organization = email.split("@")[1].split(".")[0]; + const data = await getZonesApi(organization); + + if (data.data && data.data.length > 0) { + const fetchedZones = data.data.map((zone: any) => ({ + zoneId: zone.zoneId, + zoneName: zone.zoneName, + points: zone.points, + layer: zone.layer + })); + + setZones(fetchedZones); + + const fetchedPoints = data.data.flatMap((zone: any) => + zone.points.slice(0, 4).map((point: [number, number, number]) => new THREE.Vector3(...point)) + ); + + setZonePoints(fetchedPoints); + } + }; + + fetchZones(); + }, []); + + useEffect(() => { + + localStorage.setItem('zones', JSON.stringify(zones)); + + }, [zones]) + + useEffect(() => { + if (removedLayer) { + const updatedZones = zones.filter((zone: any) => zone.layer !== removedLayer); + setZones(updatedZones); + + const updatedzonePoints = zonePoints.filter((_: any, index: any) => { + const zoneIndex = Math.floor(index / 4); + return zones[zoneIndex]?.layer !== removedLayer; + }); + setZonePoints(updatedzonePoints); + + zones.filter((zone: any) => zone.layer === removedLayer).forEach((zone: any) => { + deleteZoneFromBackend(zone.zoneId); + }); + + setRemovedLayer(null); + } + }, [removedLayer]); + + useEffect(() => { + if (toolMode !== "Zone") { + setStartPoint(null); + setEndPoint(null); + } else { + setDeletePointOrLine(false); + setMovePoint(false); + setDeleteModels(false); + } + if (!toggleView) { + setStartPoint(null); + setEndPoint(null); + } + }, [toolMode, toggleView]); + + + const addZoneToBackend = async (zone: { zoneId: string; zoneName: string; points: [number, number, number][]; layer: string }) => { + + const email = localStorage.getItem('email'); + const userId = localStorage.getItem('userId'); + const organization = (email!.split("@")[1]).split(".")[0]; + + const calculateCenter = (points: number[][]) => { + if (!points || points.length === 0) return null; + + let sumX = 0, sumY = 0, sumZ = 0; + const numPoints = points.length; + + points.forEach(([x, y, z]) => { + sumX += x; + sumY += y; + sumZ += z; + }); + + return [sumX / numPoints, sumY / numPoints, sumZ / numPoints] as [number, number, number]; + }; + + const target: [number, number, number] | null = calculateCenter(zone.points); + if (!target) return; + const position = [target[0], 75, target[2]]; + + const input = { + userId: userId, + organization: organization, + zoneData: { + zoneName: zone.zoneName, + zoneId: zone.zoneId, + points: zone.points, + viewPortCenter: target, + viewPortposition: position, + layer: zone.layer + } + } + + socket.emit('v2:zone:set', input); + }; + + const updateZoneToBackend = async (zone: { zoneId: string; zoneName: string; points: [number, number, number][]; layer: string }) => { + + const email = localStorage.getItem('email'); + const userId = localStorage.getItem('userId'); + const organization = (email!.split("@")[1]).split(".")[0]; + + const calculateCenter = (points: number[][]) => { + if (!points || points.length === 0) return null; + + let sumX = 0, sumY = 0, sumZ = 0; + const numPoints = points.length; + + points.forEach(([x, y, z]) => { + sumX += x; + sumY += y; + sumZ += z; + }); + + return [sumX / numPoints, sumY / numPoints, sumZ / numPoints] as [number, number, number]; + }; + + const target: [number, number, number] | null = calculateCenter(zone.points); + if (!target) return; + const position = [target[0], 75, target[2]]; + + const input = { + userId: userId, + organization: organization, + zoneData: { + zoneName: zone.zoneName, + zoneId: zone.zoneId, + points: zone.points, + viewPortCenter: target, + viewPortposition: position, + layer: zone.layer + } + } + + socket.emit('v2:zone:set', input); + }; + + + const deleteZoneFromBackend = async (zoneId: string) => { + + const email = localStorage.getItem('email'); + const userId = localStorage.getItem('userId'); + const organization = (email!.split("@")[1]).split(".")[0]; + + const input = { + userId: userId, + organization: organization, + zoneId: zoneId + } + + socket.emit('v2:zone:delete', input); + }; + + const handleDeleteZone = (zoneId: string) => { + const updatedZones = zones.filter((zone: any) => zone.zoneId !== zoneId); + setZones(updatedZones); + + const zoneIndex = zones.findIndex((zone: any) => zone.zoneId === zoneId); + if (zoneIndex !== -1) { + const zonePointsToRemove = zonePoints.slice(zoneIndex * 4, zoneIndex * 4 + 4); + zonePointsToRemove.forEach((point: any) => groupsRef.current.remove(point)); + const updatedzonePoints = zonePoints.filter((_: any, index: any) => index < zoneIndex * 4 || index >= zoneIndex * 4 + 4); + setZonePoints(updatedzonePoints); + } + + deleteZoneFromBackend(zoneId); + }; + + useEffect(() => { + if (!camera || !toggleView) return; + const canvasElement = gl.domElement; + + let drag = false; + let isLeftMouseDown = false; + + const onMouseDown = (evt: any) => { + if (evt.button === 0) { + isLeftMouseDown = true; + drag = false; + + raycaster.setFromCamera(pointer, camera); + const intersects = raycaster.intersectObjects(groupsRef.current.children, true); + + if (intersects.length > 0 && movePoint) { + const clickedObject = intersects[0].object; + const sphereIndex = zonePoints.findIndex((point: any) => point.equals(clickedObject.position)); + if (sphereIndex !== -1) { + (controls as any).enabled = false; + setDraggedSphere(zonePoints[sphereIndex]); + setIsDragging(true); + } + } + } + }; + + const onMouseUp = (evt: any) => { + if (evt.button === 0 && !drag && !isDragging && !deletePointOrLine) { + isLeftMouseDown = false; + + if (!startPoint && !movePoint) { + raycaster.setFromCamera(pointer, camera); + const intersectionPoint = new THREE.Vector3(); + const point = raycaster.ray.intersectPlane(plane, intersectionPoint); + if (point) { + setStartPoint(point); + setEndPoint(null); + } + } else if (startPoint && !movePoint) { + raycaster.setFromCamera(pointer, camera); + const intersectionPoint = new THREE.Vector3(); + const point = raycaster.ray.intersectPlane(plane, intersectionPoint); + if (!point) return; + + const points = [ + [startPoint.x, 0.15, startPoint.z], + [point.x, 0.15, startPoint.z], + [point.x, 0.15, point.z], + [startPoint.x, 0.15, point.z], + [startPoint.x, 0.15, startPoint.z], + ] as [number, number, number][]; + + const zoneName = `Zone ${zones.length + 1}`; + const zoneId = THREE.MathUtils.generateUUID(); + const newZone = { + zoneId, + zoneName, + points: points, + layer: activeLayer + }; + + const newZones = [...zones, newZone]; + + setZones(newZones); + + const newzonePoints = [ + new THREE.Vector3(startPoint.x, 0.15, startPoint.z), + new THREE.Vector3(point.x, 0.15, startPoint.z), + new THREE.Vector3(point.x, 0.15, point.z), + new THREE.Vector3(startPoint.x, 0.15, point.z), + ]; + + const updatedZonePoints = [...zonePoints, ...newzonePoints]; + setZonePoints(updatedZonePoints); + + addZoneToBackend(newZone); + + setStartPoint(null); + setEndPoint(null); + } + } else if (evt.button === 0 && !drag && !isDragging && deletePointOrLine) { + raycaster.setFromCamera(pointer, camera); + const intersects = raycaster.intersectObjects(groupsRef.current.children, true); + + if (intersects.length > 0) { + const clickedObject = intersects[0].object; + + const sphereIndex = zonePoints.findIndex((point: any) => point.equals(clickedObject.position)); + if (sphereIndex !== -1) { + const zoneIndex = Math.floor(sphereIndex / 4); + const zoneId = zones[zoneIndex].zoneId; + handleDeleteZone(zoneId); + return; + } + } + } + + if (evt.button === 0) { + if (isDragging && draggedSphere) { + setIsDragging(false); + setDraggedSphere(null); + + const sphereIndex = zonePoints.findIndex((point: any) => point === draggedSphere); + if (sphereIndex !== -1) { + const zoneIndex = Math.floor(sphereIndex / 4); + + if (zoneIndex !== -1 && zones[zoneIndex]) { + updateZoneToBackend(zones[zoneIndex]); + } + } + } + } + }; + + const onMouseMove = () => { + if (isLeftMouseDown) { + drag = true; + } + raycaster.setFromCamera(pointer, camera); + const intersects = raycaster.intersectObjects(groupsRef.current.children, true); + + if (intersects.length > 0 && intersects[0].object.name.includes('point')) { + gl.domElement.style.cursor = movePoint ? "pointer" : "default"; + } else { + gl.domElement.style.cursor = "default"; + } + if (isDragging && draggedSphere) { + raycaster.setFromCamera(pointer, camera); + const intersectionPoint = new THREE.Vector3(); + const point = raycaster.ray.intersectPlane(plane, intersectionPoint); + if (point) { + draggedSphere.set(point.x, 0.15, point.z); + + const sphereIndex = zonePoints.findIndex((point: any) => point === draggedSphere); + if (sphereIndex !== -1) { + const zoneIndex = Math.floor(sphereIndex / 4); + const cornerIndex = sphereIndex % 4; + + const updatedZones = zones.map((zone: any, index: number) => { + if (index === zoneIndex) { + const updatedPoints = [...zone.points]; + updatedPoints[cornerIndex] = [point.x, 0.15, point.z]; + updatedPoints[4] = updatedPoints[0]; + return { ...zone, points: updatedPoints }; + } + return zone; + }); + + setZones(updatedZones); + } + } + } + }; + + const onContext = (event: any) => { + event.preventDefault(); + setStartPoint(null); + setEndPoint(null); + }; + + if (toolMode === 'Zone' || deletePointOrLine || movePoint) { + canvasElement.addEventListener("mousedown", onMouseDown); + canvasElement.addEventListener("mouseup", onMouseUp); + canvasElement.addEventListener("mousemove", onMouseMove); + canvasElement.addEventListener("contextmenu", onContext); + } + return () => { + canvasElement.removeEventListener("mousedown", onMouseDown); + canvasElement.removeEventListener("mouseup", onMouseUp); + canvasElement.removeEventListener("mousemove", onMouseMove); + canvasElement.removeEventListener("contextmenu", onContext); + }; + }, [gl, camera, startPoint, toggleView, scene, toolMode, zones, isDragging, deletePointOrLine, zonePoints, draggedSphere, movePoint, activeLayer]); + + useFrame(() => { + if (!startPoint) return; + raycaster.setFromCamera(pointer, camera); + const intersectionPoint = new THREE.Vector3(); + const point = raycaster.ray.intersectPlane(plane, intersectionPoint); + if (point) { + setEndPoint(point); + } + }); + return ( + + + {zones + .map((zone: any) => ( + + {zone.points.slice(0, -1).map((point: [number, number, number], index: number) => { + const nextPoint = zone.points[index + 1]; + + const point1 = new THREE.Vector3(point[0], point[1], point[2]); + const point2 = new THREE.Vector3(nextPoint[0], nextPoint[1], nextPoint[2]); + + const planeWidth = point1.distanceTo(point2); + const planeHeight = CONSTANTS.wallConfig.height; + + const midpoint = new THREE.Vector3((point1.x + point2.x) / 2, (CONSTANTS.wallConfig.height / 2) + ((zone.layer - 1) * CONSTANTS.wallConfig.height), (point1.z + point2.z) / 2); + + const angle = Math.atan2(point2.z - point1.z, point2.x - point1.x); + + return ( + + + + + ); + })} + + ))} + + + {zones + .filter((zone: any) => zone.layer === activeLayer) + .map((zone: any) => ( + { + e.stopPropagation(); + if (deletePointOrLine) { + handleDeleteZone(zone.zoneId); + } + }} + /> + ))} + + + {zones.filter((zone: any) => zone.layer === activeLayer).flatMap((zone: any) => ( + zone.points.slice(0, 4).map((point: any, pointIndex: number) => ( + + + + )) + ))} + + + {startPoint && endPoint && ( + + )} + + + ); +}; + export default ZoneGroup; \ No newline at end of file diff --git a/app/src/modules/market/Card.tsx b/app/src/modules/market/Card.tsx index e96827a..3df2e1f 100644 --- a/app/src/modules/market/Card.tsx +++ b/app/src/modules/market/Card.tsx @@ -7,6 +7,7 @@ import { VerifiedIcon, } from "../../components/icons/marketPlaceIcons"; +import assetImage from "../../assets/image/image.png"; const Card: React.FC = () => { return (
@@ -14,7 +15,7 @@ const Card: React.FC = () => {
- +
@@ -32,11 +33,18 @@ const Card: React.FC = () => {
+
HEXR FACTORY
- +
+ + + + + +
₹ 36,500/unit
diff --git a/app/src/modules/market/MarketPlace.tsx b/app/src/modules/market/MarketPlace.tsx index c6f67d6..71dc0a5 100644 --- a/app/src/modules/market/MarketPlace.tsx +++ b/app/src/modules/market/MarketPlace.tsx @@ -4,9 +4,13 @@ import CardsContainer from "./CardsContainer"; const MarketPlace = () => { return ( -
- - +
+
+
+ + +
+
); }; diff --git a/app/src/pages/Project.tsx b/app/src/pages/Project.tsx index 4476c50..95da878 100644 --- a/app/src/pages/Project.tsx +++ b/app/src/pages/Project.tsx @@ -23,8 +23,8 @@ const Project: React.FC = () => { let navigate = useNavigate(); const { activeModule } = useModuleStore(); - const { userName, setUserName } = useUserName(); - const { organization, setOrganization } = useOrganization(); + const { setUserName } = useUserName(); + const { setOrganization } = useOrganization(); const { setFloorItems } = useFloorItems(); const { setWallItems } = useWallItems(); const { setZones } = useZones(); @@ -50,24 +50,17 @@ const Project: React.FC = () => { return (
- {!isPlaying && } - {!isPlaying && } - {!isPlaying && } - {activeModule === "visualization" && } + {!isPlaying && ( + <> + + + + + )} {activeModule === "market" && } - {/* {activeModule !== "visualization" && } */} - - - {/* */} + + {activeModule !== "market" && } {/* */} -
- {activeModule !== "visualization" && activeModule !== "market" && ( - - )} -
); }; diff --git a/app/src/pages/UserAuth.tsx b/app/src/pages/UserAuth.tsx index b89f34e..851ab7e 100644 --- a/app/src/pages/UserAuth.tsx +++ b/app/src/pages/UserAuth.tsx @@ -141,7 +141,7 @@ const UserAuth: React.FC = () => {
{!isSignIn && (
- +
I have read and agree to the terms of service
diff --git a/app/src/store/useModuleStore.ts b/app/src/store/useModuleStore.ts index c52b72f..6373af5 100644 --- a/app/src/store/useModuleStore.ts +++ b/app/src/store/useModuleStore.ts @@ -6,7 +6,7 @@ interface ModuleStore { } const useModuleStore = create((set) => ({ - activeModule: "market", // Initial state + activeModule: "builder", // Initial state setActiveModule: (module) => set({ activeModule: module }), // Update state })); diff --git a/app/src/styles/components/marketPlace/marketPlace.scss b/app/src/styles/components/marketPlace/marketPlace.scss index b5c234d..3d2f647 100644 --- a/app/src/styles/components/marketPlace/marketPlace.scss +++ b/app/src/styles/components/marketPlace/marketPlace.scss @@ -1,89 +1,185 @@ @use "../../abstracts/variables" as *; @use "../../abstracts/mixins.scss" as *; - -.marketPlace { - width: calc((100vw) - (320px + 270px + 100px)); - background-color: #FCFDFD; +.marketplace-wrapper { + height: 100vh; + width: 100vw; + z-index: #{$z-index-marketplace}; + background-color: var(--background-color-secondary); position: absolute; - top: 100px; - left: calc(240px + 45px); - padding: 14px; - display: flex; - flex-direction: column; - gap: 24px; + left: 0; + padding: 100px 50px; - .filter-search-container { + .marketplace-container { + padding: 20px 2px; + height: calc(100vh - 120px); + background-color: var(--background-color); + box-shadow: #{$box-shadow-medium}; + border-radius: #{$border-radius-extra-large}; + } + + .marketPlace { + width: 100%; + height: 100%; + overflow: auto; + left: calc(120px / 2); + top: 100px; + padding: 14px; + padding-bottom: 60px; display: flex; - align-items: center; - gap: 12px; + flex-direction: column; + gap: 24px; - .search-wrapper { - min-width: 40%; + .filter-search-container { + width: 100%; + display: flex; + align-items: center; + gap: 12px; - width: 684px; - padding: 0; + .search-wrapper { + min-width: 60%; + max-width: 684px; + padding: 0; + border-radius: $border-radius-large ; - .search-container { - border: none !important; - box-shadow: 0px 2px 10.5px 0px #0000000D; - - input { + .search-container { border: none !important; - outline: none; + box-shadow: $box-shadow-medium; + border-radius: $border-radius-large ; + + input { + border: none !important; + outline: none; + + } + } + } + + .regularDropdown-container { + max-width: 159px; + } + + .button { + padding: 5px 20px; + border: 1px solid var(--accent-color); + border-radius: 14px; + } + + .rating-container { + display: flex; + align-items: center; + gap: 6px; + + .stars { + display: flex; + align-items: center; } } } - .regularDropdown-container { - max-width: 159px; - } - - .button { - padding: 5px 20px; - border: 1px solid var(--accent-color); - border-radius: 14px; - } - - .rating-container { + .cards-container-container { + padding: 0px 20px; display: flex; - align-items: center; + flex-direction: column; gap: 6px; - .stars { - display: flex; - align-items: center; - + .header { + color: var(--text-color); + font-weight: $medium-weight; + font-size: $xlarge; } - } - } - .cards-container-container { - .header { - color: var(--text-color); - font-weight: $medium-weight; - font-size: $xlarge; - } + .cards-wrapper-container { + display: flex; + flex-wrap: wrap; + gap: 28px; - .cards-wrapper-container { - .card-container { - width: 316px; - height: 309px; - border-radius: 18px; - padding: 12px; - box-shadow: 0px 2px 10.5px 0px #0000000D; - border: 1px solid var(--background-accent-transparent, #E0DFFF80); - position: relative; - .icon { - position: absolute; - top: 12px; - left: 12px; - width: 30px; - height: 30px; - border-radius: 10px; - padding: 5px; - background-color: var(--accent-color); + .card-container { + width: calc(25% - 23px); + border-radius: 18px; + padding: 12px; + box-shadow: 0px 2px 10.5px 0px #0000000D; + border: 1px solid var(--background-accent-transparent, #E0DFFF80); + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + gap: 6px; + + .icon { + position: absolute; + top: 12px; + left: 12px; + width: 30px; + height: 30px; + border-radius: 10px; + padding: 5px; + background-color: var(--accent-color); + } + + .image-container { + width: 100%; + display: flex; + justify-content: center; + } + + .assets-container { + display: flex; + justify-content: space-between; + + .name-container { + display: flex; + flex-direction: column; + gap: 3px; + + .asstes-container { + font-weight: #{$bold-weight}; + font-size: $regular ; + } + + .assets-date { + color: var(--accent-color); + font-size: $small; + } + } + + .details { + display: flex; + align-items: center; + gap: 10px; + + .content { + display: flex; + align-items: center; + gap: 6px; + } + } + } + + .vendor-icon { + + font-weight: #{$bold-weight}; + font-size: $regular ; + } + + .stars-container { + display: flex; + justify-content: space-between; + } + + .buy-now-button { + width: 100%; + background-color: var(--background-color-secondary); + border-radius: $border-radius-extra-large ; + padding: 8px 0; + @include flex-center; + color: var(--accent-color); + + &:hover { + cursor: pointer; + } + } } } } diff --git a/app/src/styles/components/tools.scss b/app/src/styles/components/tools.scss index 17fea38..d19d4cf 100644 --- a/app/src/styles/components/tools.scss +++ b/app/src/styles/components/tools.scss @@ -14,8 +14,7 @@ width: fit-content; transition: width 0.2s; background-color: var(--background-color); - z-index: #{$z-index-tools}; - + z-index: #{$z-index-default}; .split { height: 20px; width: 2px; diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss index c7cd9e5..eba4ba9 100644 --- a/app/src/styles/layout/sidebar.scss +++ b/app/src/styles/layout/sidebar.scss @@ -662,16 +662,30 @@ .collapse-header-container { @include flex-space-between; padding-right: 12px; + margin-top: 8px; + border-top: 1px solid var(--border-color); + border-bottom: 1px solid var(--border-color); + .header { + color: var(--accent-color); + } } .process-container { + padding: 0 12px; + margin: 6px 0; .value { + @include flex-space-between; .arrow-container { + height: 16px; + width: 16px; } .active { + rotate: 90deg; } } .children-drop { .value { + padding: 6px; + border-left: 1px solid var(--border-color); } } } @@ -716,12 +730,16 @@ } .global-properties-container, .analysis-main-container, - .asset-properties-container { + .asset-properties-container, + .zone-properties-container { .header { padding: 8px 12px; border-top: 1px solid var(--highlight-accent-color); border-bottom: 1px solid var(--highlight-accent-color); color: var(--accent-color); + .input-value { + color: inherit; + } } .input-container { @include flex-center; @@ -759,7 +777,11 @@ } .custom-input-container { .header { + @include flex-space-between; border: none; + .eyedrop-button { + @include flex-center; + } } .inputs-container { @include flex-space-between; diff --git a/app/src/styles/pages/realTimeViz.scss b/app/src/styles/pages/realTimeViz.scss index a63f9cd..8a23344 100644 --- a/app/src/styles/pages/realTimeViz.scss +++ b/app/src/styles/pages/realTimeViz.scss @@ -6,22 +6,20 @@ background-color: var(--background-color); border-radius: 20px; box-shadow: $box-shadow-medium; - width: 100%; - height: 100%; + width: calc(100% - (320px + 270px + 90px)); + height: calc(100% - (200px + 80px)); position: absolute; - top: 0; - left: 0; - transform: scale(1); + top: 50%; + left: calc(270px + 45px); + transform: translate(0, -50%); + border-radius: #{$border-radius-medium}; + transition: all 0.2s; + z-index: #{$z-index-default}; + .scene-container { - width: 100%; - height: 100%; - - canvas { - width: 100vw !important; - height: 100% !important; - - } + overflow: hidden; } + // Panels .panel { position: absolute; diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..5ef6c4e --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "Dwinzo_dev", + "lockfileVersion": 3, + "requires": true, + "packages": {} +}