Merge branch 'main' into realTimeVisulization
This commit is contained in:
commit
5cc3b83e43
|
|
@ -1,29 +1,29 @@
|
|||
# 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/
|
||||
# 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/
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -107,7 +107,7 @@ export function StockIncreseIcon() {
|
|||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clip-path="url(#clip0_3050_69519)">
|
||||
<g clipPath="url(#clip0_3050_69519)">
|
||||
<path
|
||||
d="M7.80766 6.99219H1.17811C0.752382 6.99219 0.407227 7.33734 0.407227 7.76307C0.407227 8.18879 0.752382 8.53395 1.17811 8.53395H7.80766C8.23339 8.53395 8.57854 8.18879 8.57854 7.76307C8.57854 7.33733 8.23339 6.99219 7.80766 6.99219Z"
|
||||
fill="white"
|
||||
|
|
@ -142,8 +142,8 @@ export function StockIncreseIcon() {
|
|||
y2="8.53122"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#31B2B9" />
|
||||
<stop offset="1" stop-color="#FBD8B8" />
|
||||
<stop stopColor="#31B2B9" />
|
||||
<stop offset="1" stopColor="#FBD8B8" />
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_3050_69519">
|
||||
<rect
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<div className="header-container">
|
||||
<div className="header-content">
|
||||
|
|
@ -19,7 +22,7 @@ const Header: React.FC = () => {
|
|||
<div
|
||||
className={`toggle-sidebar-ui-button ${!toggleUI ? "active" : ""}`}
|
||||
onClick={() => {
|
||||
setToggleUI(!toggleUI);
|
||||
if (activeModule !== "market") setToggleUI(!toggleUI);
|
||||
}}
|
||||
>
|
||||
<ToggleSidebarIcon />
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import Header from "./Header";
|
||||
import useModuleStore, { useSubModuleStore } from "../../../store/useModuleStore";
|
||||
import useModuleStore, {
|
||||
useSubModuleStore,
|
||||
} from "../../../store/useModuleStore";
|
||||
import {
|
||||
AnalysisIcon,
|
||||
MechanicsIcon,
|
||||
|
|
@ -15,6 +17,7 @@ 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();
|
||||
|
|
@ -24,7 +27,8 @@ const SideBarRight: React.FC = () => {
|
|||
|
||||
// Reset subModule whenever activeModule changes
|
||||
useEffect(() => {
|
||||
setSubModule("properties");
|
||||
if (activeModule !== "simulation") setSubModule("properties");
|
||||
if (activeModule === "simulation") setSubModule("mechanics");
|
||||
}, [activeModule]);
|
||||
|
||||
return (
|
||||
|
|
@ -32,32 +36,38 @@ const SideBarRight: React.FC = () => {
|
|||
<Header />
|
||||
{toggleUI && (
|
||||
<div className="sidebar-actions-container">
|
||||
<div
|
||||
className={`sidebar-action-list ${subModule === "properties" ? "active" : ""
|
||||
{/* {activeModule === "builder" && ( */}
|
||||
<div
|
||||
className={`sidebar-action-list ${
|
||||
subModule === "properties" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => setSubModule("properties")}
|
||||
>
|
||||
<PropertiesIcon isActive={subModule === "properties"} />
|
||||
</div>
|
||||
onClick={() => setSubModule("properties")}
|
||||
>
|
||||
<PropertiesIcon isActive={subModule === "properties"} />
|
||||
</div>
|
||||
{/* )} */}
|
||||
{activeModule === "simulation" && (
|
||||
<>
|
||||
<div
|
||||
className={`sidebar-action-list ${subModule === "mechanics" ? "active" : ""
|
||||
}`}
|
||||
className={`sidebar-action-list ${
|
||||
subModule === "mechanics" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => setSubModule("mechanics")}
|
||||
>
|
||||
<MechanicsIcon isActive={subModule === "mechanics"} />
|
||||
</div>
|
||||
<div
|
||||
className={`sidebar-action-list ${subModule === "simulations" ? "active" : ""
|
||||
}`}
|
||||
className={`sidebar-action-list ${
|
||||
subModule === "simulations" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => setSubModule("simulations")}
|
||||
>
|
||||
<SimulationIcon isActive={subModule === "simulations"} />
|
||||
</div>
|
||||
<div
|
||||
className={`sidebar-action-list ${subModule === "analysis" ? "active" : ""
|
||||
}`}
|
||||
className={`sidebar-action-list ${
|
||||
subModule === "analysis" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => setSubModule("analysis")}
|
||||
>
|
||||
<AnalysisIcon isActive={subModule === "analysis"} />
|
||||
|
|
@ -73,6 +83,7 @@ const SideBarRight: React.FC = () => {
|
|||
<div className="sidebar-right-container">
|
||||
<div className="sidebar-right-content-container">
|
||||
<GlobalProperties />
|
||||
{/* <ZoneProperties /> */}
|
||||
{/* <AsstePropertiies /> */}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -82,17 +93,17 @@ const SideBarRight: React.FC = () => {
|
|||
|
||||
{toggleUI && activeModule === "simulation" && (
|
||||
<>
|
||||
{(subModule === "mechanics" && selectedActionSphere) && (
|
||||
{subModule === "mechanics" && selectedActionSphere && (
|
||||
<div className="sidebar-right-container">
|
||||
<div className="sidebar-right-content-container">
|
||||
<MachineMechanics />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{(subModule === "mechanics" && !selectedActionSphere) && (
|
||||
{subModule === "mechanics" && !selectedActionSphere && (
|
||||
<div className="sidebar-right-container">
|
||||
<div className="sidebar-right-content-container">
|
||||
{/* <MachineMechanics /> */}
|
||||
<MachineMechanics />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,62 @@
|
|||
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<PositionInputProps> = ({
|
||||
onChange,
|
||||
header,
|
||||
placeholder = "Enter value", // Default placeholder
|
||||
type = "number", // Default type
|
||||
}) => {
|
||||
return (
|
||||
<div className="custom-input-container">
|
||||
<div className="header">
|
||||
{header}{" "}
|
||||
<div className="eyedrop-button">
|
||||
<EyeDroperIcon isActive={false} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="inputs-container">
|
||||
<div className="input-container">
|
||||
<div className="custom-input-label">X : </div>
|
||||
<input
|
||||
className="custom-input-field"
|
||||
type={type}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
placeholder={placeholder}
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<div className="input-container">
|
||||
<div className="custom-input-label">Y : </div>
|
||||
<input
|
||||
className="custom-input-field"
|
||||
type={type}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
placeholder={placeholder}
|
||||
disabled
|
||||
min={0}
|
||||
/>
|
||||
</div>
|
||||
<div className="input-container">
|
||||
<div className="custom-input-label">Z : </div>
|
||||
<input
|
||||
className="custom-input-field"
|
||||
type={type}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
placeholder={placeholder}
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Vector3Input;
|
||||
|
|
@ -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<string[]>([]);
|
||||
const [triggerList, setTriggerList] = useState<string[]>([]);
|
||||
const [selectedItem, setSelectedItem] = useState<{
|
||||
|
|
@ -71,7 +71,9 @@ const MachineMechanics: React.FC = () => {
|
|||
|
||||
return (
|
||||
<div className="machine-mechanics-container">
|
||||
<div className="machine-mechanics-header">{selectedActionSphere.path.modelName}</div>
|
||||
<div className="machine-mechanics-header">
|
||||
{selectedActionSphere?.path?.modelName || "path name not found"}
|
||||
</div>
|
||||
{/* <div className="process-list-container">
|
||||
<div className="label">Process:</div>
|
||||
<RegularDropDown
|
||||
|
|
@ -100,11 +102,12 @@ const MachineMechanics: React.FC = () => {
|
|||
{actionList.map((action, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`list-item ${selectedItem?.type === "action" &&
|
||||
className={`list-item ${
|
||||
selectedItem?.type === "action" &&
|
||||
selectedItem.name === action
|
||||
? "active"
|
||||
: ""
|
||||
}`}
|
||||
? "active"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className="value"
|
||||
|
|
@ -146,11 +149,12 @@ const MachineMechanics: React.FC = () => {
|
|||
{triggerList.map((trigger, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`list-item ${selectedItem?.type === "trigger" &&
|
||||
className={`list-item ${
|
||||
selectedItem?.type === "trigger" &&
|
||||
selectedItem.name === trigger
|
||||
? "active"
|
||||
: ""
|
||||
}`}
|
||||
? "active"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className="value"
|
||||
|
|
@ -188,7 +192,7 @@ const MachineMechanics: React.FC = () => {
|
|||
label="Speed"
|
||||
value=""
|
||||
activeOption=".mm"
|
||||
onChange={() => { }}
|
||||
onChange={() => {}}
|
||||
/>
|
||||
<EyeDropInput />
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,39 @@
|
|||
import React, { useState } from "react";
|
||||
import RenameInput from "../../../ui/inputs/RenameInput";
|
||||
import Vector3Input from "../customInput/Vector3Input";
|
||||
|
||||
const ZoneProperties: React.FC = () => {
|
||||
const [Edit, setEdit] = useState(false);
|
||||
|
||||
function handleSetView() {
|
||||
setEdit(false);
|
||||
}
|
||||
|
||||
function handleEditView() {
|
||||
if (Edit) {
|
||||
setEdit(false);
|
||||
} else {
|
||||
setEdit(true);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="zone-properties-container">
|
||||
<div className="header">
|
||||
<RenameInput value="Selected Zone Name" />
|
||||
<div className="button" onClick={handleEditView}>
|
||||
{Edit ? "Cancel" : "Edit"}
|
||||
</div>
|
||||
</div>
|
||||
<Vector3Input onChange={() => {}} header="Viewport Target" />
|
||||
<Vector3Input onChange={() => {}} header="Viewport Position" />
|
||||
{Edit && (
|
||||
<div className="button-save" onClick={handleSetView}>
|
||||
Set View
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ZoneProperties;
|
||||
|
|
@ -28,7 +28,7 @@ const DropList: React.FC<DropListProps> = ({ val }) => {
|
|||
}}
|
||||
>
|
||||
{val.pathName}
|
||||
<div className="arrow-container">
|
||||
<div className={`arrow-container${openDrop ? " active" : ""}`}>
|
||||
<ArrowIcon />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -87,8 +87,9 @@ const Simulations: React.FC = () => {
|
|||
{productsList.map((action, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`list-item ${selectedItem === action ? "active" : ""
|
||||
}`}
|
||||
className={`list-item ${
|
||||
selectedItem === action ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className="value"
|
||||
|
|
|
|||
|
|
@ -6,15 +6,20 @@ import {
|
|||
SimulationIcon,
|
||||
VisualizationIcon,
|
||||
} from "../icons/ExportModuleIcons";
|
||||
import useToggleStore from "../../store/useUIToggleStore";
|
||||
|
||||
const ModuleToggle: React.FC = () => {
|
||||
const { activeModule, setActiveModule } = useModuleStore();
|
||||
const { setToggleUI } = useToggleStore();
|
||||
|
||||
return (
|
||||
<div className="module-toggle-container">
|
||||
<div
|
||||
className={`module-list ${activeModule === "builder" && "active"}`}
|
||||
onClick={() => setActiveModule("builder")}
|
||||
onClick={() => {
|
||||
setActiveModule("builder");
|
||||
setToggleUI(true);
|
||||
}}
|
||||
>
|
||||
<div className="icon">
|
||||
<BuilderIcon isActive={activeModule === "builder"} />
|
||||
|
|
@ -23,7 +28,10 @@ const ModuleToggle: React.FC = () => {
|
|||
</div>
|
||||
<div
|
||||
className={`module-list ${activeModule === "simulation" && "active"}`}
|
||||
onClick={() => setActiveModule("simulation")}
|
||||
onClick={() => {
|
||||
setActiveModule("simulation");
|
||||
setToggleUI(true);
|
||||
}}
|
||||
>
|
||||
<div className="icon">
|
||||
<SimulationIcon isActive={activeModule === "simulation"} />
|
||||
|
|
@ -34,7 +42,10 @@ const ModuleToggle: React.FC = () => {
|
|||
className={`module-list ${
|
||||
activeModule === "visualization" && "active"
|
||||
}`}
|
||||
onClick={() => setActiveModule("visualization")}
|
||||
onClick={() => {
|
||||
setActiveModule("visualization");
|
||||
setToggleUI(true);
|
||||
}}
|
||||
>
|
||||
<div className="icon">
|
||||
<VisualizationIcon isActive={activeModule === "visualization"} />
|
||||
|
|
@ -42,10 +53,11 @@ const ModuleToggle: React.FC = () => {
|
|||
<div className="module">Visualization</div>
|
||||
</div>
|
||||
<div
|
||||
className={`module-list ${
|
||||
activeModule === "market" && "active"
|
||||
}`}
|
||||
onClick={() => setActiveModule("market")}
|
||||
className={`module-list ${activeModule === "market" && "active"}`}
|
||||
onClick={() => {
|
||||
setActiveModule("market");
|
||||
setToggleUI(false);
|
||||
}}
|
||||
>
|
||||
<div className="icon">
|
||||
<CartIcon isActive={activeModule === "market"} />
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
import { getZonesApi } from "../../../services/realTimeVisulization/zoneData/getZones";
|
||||
|
||||
|
||||
|
|
@ -38,6 +39,8 @@ const RealTimeVisulization: React.FC = () => {
|
|||
const [hiddenPanels, setHiddenPanels] = React.useState<Side[]>([]);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const { isPlaying } = usePlayButtonStore();
|
||||
const { activeModule } = useModuleStore();
|
||||
|
||||
const [zonesData, setZonesData] = useState<FormattedZoneData>({});
|
||||
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
|
||||
|
||||
|
|
@ -98,34 +101,44 @@ const RealTimeVisulization: React.FC = () => {
|
|||
id="real-time-vis-canvas"
|
||||
className={`realTime-viz canvas ${!isPlaying ? "playActiveFalse" : ""}`}
|
||||
style={{
|
||||
height: isPlaying ? "100vh" : "",
|
||||
left: isPlaying ? "0%" : "",
|
||||
height: isPlaying || activeModule !== "visualization" ? "100vh" : "",
|
||||
width: isPlaying || activeModule !== "visualization" ? "100vw" : "",
|
||||
left: isPlaying || activeModule !== "visualization" ? "0%" : "",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="scene-container"
|
||||
style={{ height: "100%", width: "100%" }}
|
||||
style={{
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
borderRadius: isPlaying || activeModule !== "visualization" ? "" : "6px",
|
||||
}}
|
||||
>
|
||||
<Scene />
|
||||
</div>
|
||||
{!isPlaying && (
|
||||
<AddButtons
|
||||
hiddenPanels={hiddenPanels}
|
||||
setHiddenPanels={setHiddenPanels}
|
||||
selectedZone={selectedZone}
|
||||
setSelectedZone={setSelectedZone}
|
||||
/>
|
||||
{activeModule === "visualization" && (
|
||||
<>
|
||||
<DisplayZone
|
||||
zonesData={zonesData}
|
||||
selectedZone={selectedZone}
|
||||
setSelectedZone={setSelectedZone}
|
||||
/>
|
||||
|
||||
{!isPlaying && (
|
||||
<AddButtons
|
||||
hiddenPanels={hiddenPanels}
|
||||
setHiddenPanels={setHiddenPanels}
|
||||
selectedZone={selectedZone}
|
||||
setSelectedZone={setSelectedZone}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Panel
|
||||
selectedZone={selectedZone}
|
||||
setSelectedZone={setSelectedZone}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<DisplayZone
|
||||
zonesData={zonesData}
|
||||
selectedZone={selectedZone}
|
||||
setSelectedZone={setSelectedZone}
|
||||
/>
|
||||
<Panel
|
||||
selectedZone={selectedZone}
|
||||
hiddenPanels={hiddenPanels}
|
||||
setSelectedZone={setSelectedZone}
|
||||
/>{" "}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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<THREE.Vector3 | null>(null);
|
||||
const [endPoint, setEndPoint] = useState<THREE.Vector3 | null>(null);
|
||||
const { zones, setZones } = useZones();
|
||||
const { zonePoints, setZonePoints } = useZonePoints();
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [draggedSphere, setDraggedSphere] = useState<THREE.Vector3 | null>(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<any>();
|
||||
|
||||
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 (
|
||||
<group ref={groupsRef} name='zoneGroup' >
|
||||
<group name="zones" visible={!toggleView}>
|
||||
{zones
|
||||
.map((zone: any) => (
|
||||
<group key={zone.zoneId} name={zone.zoneName}>
|
||||
{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 (
|
||||
<mesh
|
||||
key={index}
|
||||
position={midpoint}
|
||||
rotation={[0, -angle, 0]}
|
||||
>
|
||||
<planeGeometry args={[planeWidth, planeHeight]} />
|
||||
<primitive
|
||||
object={zoneMaterial.clone()}
|
||||
attach="material"
|
||||
/>
|
||||
</mesh>
|
||||
);
|
||||
})}
|
||||
</group>
|
||||
))}
|
||||
</group>
|
||||
<group name='zoneLines' visible={toggleView}>
|
||||
{zones
|
||||
.filter((zone: any) => zone.layer === activeLayer)
|
||||
.map((zone: any) => (
|
||||
<Line
|
||||
key={zone.zoneId}
|
||||
points={zone.points}
|
||||
color="#007BFF"
|
||||
lineWidth={3}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
if (deletePointOrLine) {
|
||||
handleDeleteZone(zone.zoneId);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</group>
|
||||
<group name="zonePoints" visible={toggleView}>
|
||||
{zones.filter((zone: any) => zone.layer === activeLayer).flatMap((zone: any) => (
|
||||
zone.points.slice(0, 4).map((point: any, pointIndex: number) => (
|
||||
<Sphere
|
||||
key={`${zone.zoneId}-point-${pointIndex}`}
|
||||
position={new THREE.Vector3(...point)}
|
||||
args={[0.3, 16, 16]}
|
||||
name={`point-${zone.zoneId}-${pointIndex}`}
|
||||
>
|
||||
<meshBasicMaterial color="red" />
|
||||
</Sphere>
|
||||
))
|
||||
))}
|
||||
</group>
|
||||
<group name="tempGroup" visible={toggleView}>
|
||||
{startPoint && endPoint && (
|
||||
<Line
|
||||
points={[
|
||||
[startPoint.x, 0.15, startPoint.z],
|
||||
[endPoint.x, 0.15, startPoint.z],
|
||||
[endPoint.x, 0.15, endPoint.z],
|
||||
[startPoint.x, 0.15, endPoint.z],
|
||||
[startPoint.x, 0.15, startPoint.z],
|
||||
]}
|
||||
color="#C164FF"
|
||||
lineWidth={3}
|
||||
/>
|
||||
)}
|
||||
</group>
|
||||
</group>
|
||||
);
|
||||
};
|
||||
|
||||
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<THREE.Vector3 | null>(null);
|
||||
const [endPoint, setEndPoint] = useState<THREE.Vector3 | null>(null);
|
||||
const { zones, setZones } = useZones();
|
||||
const { zonePoints, setZonePoints } = useZonePoints();
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [draggedSphere, setDraggedSphere] = useState<THREE.Vector3 | null>(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<any>();
|
||||
|
||||
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 (
|
||||
<group ref={groupsRef} name='zoneGroup' >
|
||||
<group name="zones" visible={!toggleView}>
|
||||
{zones
|
||||
.map((zone: any) => (
|
||||
<group key={zone.zoneId} name={zone.zoneName}>
|
||||
{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 (
|
||||
<mesh
|
||||
key={index}
|
||||
position={midpoint}
|
||||
rotation={[0, -angle, 0]}
|
||||
>
|
||||
<planeGeometry args={[planeWidth, planeHeight]} />
|
||||
<primitive
|
||||
object={zoneMaterial.clone()}
|
||||
attach="material"
|
||||
/>
|
||||
</mesh>
|
||||
);
|
||||
})}
|
||||
</group>
|
||||
))}
|
||||
</group>
|
||||
<group name='zoneLines' visible={toggleView}>
|
||||
{zones
|
||||
.filter((zone: any) => zone.layer === activeLayer)
|
||||
.map((zone: any) => (
|
||||
<Line
|
||||
key={zone.zoneId}
|
||||
points={zone.points}
|
||||
color="#007BFF"
|
||||
lineWidth={3}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
if (deletePointOrLine) {
|
||||
handleDeleteZone(zone.zoneId);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</group>
|
||||
<group name="zonePoints" visible={toggleView}>
|
||||
{zones.filter((zone: any) => zone.layer === activeLayer).flatMap((zone: any) => (
|
||||
zone.points.slice(0, 4).map((point: any, pointIndex: number) => (
|
||||
<Sphere
|
||||
key={`${zone.zoneId}-point-${pointIndex}`}
|
||||
position={new THREE.Vector3(...point)}
|
||||
args={[0.3, 16, 16]}
|
||||
name={`point-${zone.zoneId}-${pointIndex}`}
|
||||
>
|
||||
<meshBasicMaterial color="red" />
|
||||
</Sphere>
|
||||
))
|
||||
))}
|
||||
</group>
|
||||
<group name="tempGroup" visible={toggleView}>
|
||||
{startPoint && endPoint && (
|
||||
<Line
|
||||
points={[
|
||||
[startPoint.x, 0.15, startPoint.z],
|
||||
[endPoint.x, 0.15, startPoint.z],
|
||||
[endPoint.x, 0.15, endPoint.z],
|
||||
[startPoint.x, 0.15, endPoint.z],
|
||||
[startPoint.x, 0.15, startPoint.z],
|
||||
]}
|
||||
color="#C164FF"
|
||||
lineWidth={3}
|
||||
/>
|
||||
)}
|
||||
</group>
|
||||
</group>
|
||||
);
|
||||
};
|
||||
|
||||
export default ZoneGroup;
|
||||
|
|
@ -22,8 +22,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,21 +50,15 @@ const Project: React.FC = () => {
|
|||
return (
|
||||
<div className="project-main">
|
||||
<ModuleToggle />
|
||||
|
||||
{!isPlaying && <SideBarLeft />}
|
||||
{!isPlaying && <SideBarRight />}
|
||||
{activeModule === "visualization" && <RealTimeVisulization />}
|
||||
{/* {activeModule !== "visualization" && <Scene />} */}
|
||||
<Tools />
|
||||
|
||||
{/* <Scene /> */}
|
||||
<SideBarLeft />
|
||||
<SideBarRight />
|
||||
<RealTimeVisulization />
|
||||
{activeModule !== "market" && <Tools />}
|
||||
{/* <SimulationUI /> */}
|
||||
<div
|
||||
className="canvas-container"
|
||||
style={{ height: "100vh", width: "100vw" }}
|
||||
>
|
||||
{activeModule !== "visualization" && <Scene />}
|
||||
</div>
|
||||
></div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -141,7 +141,7 @@ const UserAuth: React.FC = () => {
|
|||
</div>
|
||||
{!isSignIn && (
|
||||
<div className="policy-checkbox">
|
||||
<input type="checkbox" name="" id="" />
|
||||
<input type="checkbox" name="" id="" required/>
|
||||
<div className="label">
|
||||
I have read and agree to the terms of service
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -14,7 +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;
|
||||
|
|
|
|||
|
|
@ -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,17 @@
|
|||
}
|
||||
.global-properties-container,
|
||||
.analysis-main-container,
|
||||
.asset-properties-container {
|
||||
.asset-properties-container,
|
||||
.zone-properties-container {
|
||||
.header {
|
||||
@include flex-space-between;
|
||||
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;
|
||||
|
|
@ -740,7 +759,8 @@
|
|||
}
|
||||
}
|
||||
.optimize-button,
|
||||
.generate-report-button {
|
||||
.generate-report-button,
|
||||
.button-save {
|
||||
@include flex-center;
|
||||
background-color: var(--accent-color);
|
||||
color: var(--primary-color);
|
||||
|
|
@ -759,7 +779,11 @@
|
|||
}
|
||||
.custom-input-container {
|
||||
.header {
|
||||
@include flex-space-between;
|
||||
border: none;
|
||||
.eyedrop-button {
|
||||
@include flex-center;
|
||||
}
|
||||
}
|
||||
.inputs-container {
|
||||
@include flex-space-between;
|
||||
|
|
|
|||
|
|
@ -1,35 +1,155 @@
|
|||
@use "../abstracts/variables.scss" as *;
|
||||
@use "../abstracts/mixins.scss" as *;
|
||||
|
||||
// Main Container
|
||||
.realTime-viz {
|
||||
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%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
canvas {
|
||||
width: 100vw !important;
|
||||
height: 100% !important;
|
||||
.icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.icons-container {
|
||||
.icon {
|
||||
&:first-child {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Panels
|
||||
|
||||
.zoon-wrapper {
|
||||
display: flex;
|
||||
background-color: var(--background-color);
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
gap: 6px;
|
||||
padding: 4px;
|
||||
border-radius: 8px;
|
||||
max-width: 80%;
|
||||
overflow: auto;
|
||||
max-width: calc(100% - 450px);
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.zone {
|
||||
width: auto;
|
||||
background-color: var(--background-color);
|
||||
border-radius: 6px;
|
||||
padding: 4px 8px;
|
||||
white-space: nowrap;
|
||||
font-size: $small;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: var(--accent-color);
|
||||
color: var(--background-color);
|
||||
// color: #FCFDFD !important;
|
||||
}
|
||||
}
|
||||
|
||||
.zoon-wrapper.bottom {
|
||||
bottom: 210px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
width: 80%; // Increase width to take more space on smaller screens
|
||||
height: 500px; // Reduce height to fit smaller screens
|
||||
left: 50%; // Center horizontally
|
||||
|
||||
.main-container {
|
||||
margin: 0 15px; // Reduce margin for better spacing
|
||||
}
|
||||
|
||||
.zoon-wrapper {
|
||||
bottom: 5px; // Adjust position for smaller screens
|
||||
|
||||
&.bottom {
|
||||
bottom: 150px; // Adjust for bottom placement
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-container {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
height: 600px;
|
||||
background-color: rgb(235, 235, 235);
|
||||
margin: 0 30px;
|
||||
transition: height 0.3s ease, margin 0.3s ease;
|
||||
|
||||
.zoon-wrapper {
|
||||
display: flex;
|
||||
background-color: rgba(224, 223, 255, 0.5);
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
gap: 6px;
|
||||
padding: 4px;
|
||||
border-radius: 8px;
|
||||
max-width: 80%;
|
||||
overflow: auto;
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.zone {
|
||||
width: auto;
|
||||
background-color: $background-color;
|
||||
border-radius: 6px;
|
||||
padding: 4px 8px;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
&.active {
|
||||
background-color: var(--primary-color);
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.bottom {
|
||||
bottom: 210px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel {
|
||||
position: absolute;
|
||||
background: white;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
overflow: visible !important;
|
||||
|
||||
.panel-content {
|
||||
position: relative;
|
||||
|
|
@ -46,7 +166,7 @@
|
|||
}
|
||||
|
||||
.chart-container {
|
||||
width: 229px;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
max-height: 100%;
|
||||
border: 1px dotted #a9a9a9;
|
||||
|
|
@ -66,125 +186,54 @@
|
|||
color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Panels for each side
|
||||
.left-panel,
|
||||
.right-panel {
|
||||
.chart-container {
|
||||
padding: 10px;
|
||||
width: 100% !important;
|
||||
height: 250px !important;
|
||||
&.top-panel,
|
||||
&.bottom-panel {
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
}
|
||||
}
|
||||
.fullScreen {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.top-panel,
|
||||
.bottom-panel {
|
||||
.chart-container {
|
||||
padding: 10px;
|
||||
width: 300px !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
.panel-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
// Zone Wrapper
|
||||
.zoon-wrapper {
|
||||
display: flex;
|
||||
background-color: var(--background-color);
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
gap: 6px;
|
||||
padding: 4px;
|
||||
border-radius: 8px;
|
||||
max-width: 80%;
|
||||
overflow: auto;
|
||||
max-width: calc(100% - 450px);
|
||||
z-index: 11000000000;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
.chart-container {
|
||||
height: 100%;
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.zone {
|
||||
width: auto;
|
||||
background-color: var(--background-color);
|
||||
border-radius: 6px;
|
||||
padding: 4px 8px;
|
||||
white-space: nowrap;
|
||||
font-size: $small;
|
||||
&.top-panel {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: var(--accent-color);
|
||||
color: var(--background-color);
|
||||
&.bottom-panel {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.zoon-wrapper.bottom {
|
||||
bottom: 250px;
|
||||
}
|
||||
&.left-panel {
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
||||
.content-container {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
.main-container {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
height: 600px;
|
||||
background-color: rgb(235, 235, 235);
|
||||
margin: 0 30px;
|
||||
transition: height 0.3s ease, margin 0.3s ease;
|
||||
&.right-panel {
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.playActiveFalse {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: calc(270px + 45px);
|
||||
transform-origin: left;
|
||||
transform: translate(0, -50%) scaleX(0.6) scaleY(0.65);
|
||||
width: calc((100vw * 1.65) - (320px + 270px + 70px) / 0.6);
|
||||
z-index: 100;
|
||||
|
||||
.scene-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
canvas {
|
||||
width: calc((100vw * 1.65) - (320px + 270px + 70px) / 0.6) !important;
|
||||
height: 100% !important;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&.top {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
&.right {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
&.bottom {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
&.left {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
.zoon-wrapper {
|
||||
transform: translate(-50%, 0) scale(1.5);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Side Buttons
|
||||
.side-button-container {
|
||||
position: absolute;
|
||||
|
|
@ -224,6 +273,7 @@
|
|||
height: 18px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
// align-items: center;
|
||||
background-color: var(--accent-color);
|
||||
border: none;
|
||||
color: var(--background-color);
|
||||
|
|
@ -231,54 +281,116 @@
|
|||
}
|
||||
|
||||
&.top {
|
||||
top: -35px;
|
||||
top: -30px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
flex-direction: row;
|
||||
gap: 6px;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
&.right {
|
||||
right: -35px;
|
||||
right: -30px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
&.bottom {
|
||||
bottom: -35px;
|
||||
bottom: -30px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
flex-direction: row;
|
||||
gap: 6px;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
&.left {
|
||||
left: -35px;
|
||||
left: -30px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
}
|
||||
|
||||
.right.side-button-container,
|
||||
.right.side-button-container {
|
||||
.extra-Bs {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.left.side-button-container {
|
||||
.extra-Bs {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.top-panel,
|
||||
.bottom-panel {
|
||||
.panel-content {
|
||||
// Theme Container
|
||||
.theme-container {
|
||||
width: 250px;
|
||||
padding: 12px;
|
||||
box-shadow: 1px -3px 4px 0px rgba(0, 0, 0, 0.11);
|
||||
border-radius: 8px;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: -100%;
|
||||
transform: translate(-0%, 0);
|
||||
|
||||
display: flex;
|
||||
flex-direction: row !important;
|
||||
h2 {
|
||||
font-size: 12px;
|
||||
margin-bottom: 8px;
|
||||
color: #2b3344;
|
||||
}
|
||||
}
|
||||
|
||||
.theme-preset-wrapper {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.theme-preset {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid $border-color;
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
transition: border 0.3s ease;
|
||||
|
||||
&.active {
|
||||
border: 1px solid var(--primary-color);
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: var(--primary-color);
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-color {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.color-displayer {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
align-items: center;
|
||||
border: 1px solid var(--accent-color);
|
||||
border-radius: 4px;
|
||||
padding: 0 5px;
|
||||
|
||||
input {
|
||||
border: none;
|
||||
outline: none;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue