diff --git a/app/package-lock.json b/app/package-lock.json index 445b4dc..b14b0af 100644 --- a/app/package-lock.json +++ b/app/package-lock.json @@ -2031,7 +2031,7 @@ "version": "0.8.1", "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz", "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==", - "devOptional": true, + "dev": true, "dependencies": { "@jridgewell/trace-mapping": "0.3.9" }, @@ -2043,7 +2043,7 @@ "version": "0.3.9", "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz", "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==", - "devOptional": true, + "dev": true, "dependencies": { "@jridgewell/resolve-uri": "^3.0.3", "@jridgewell/sourcemap-codec": "^1.4.10" @@ -4242,26 +4242,6 @@ "url": "https://github.com/sponsors/gregberge" } }, - "node_modules/@testing-library/dom": { - "version": "10.4.1", - "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz", - "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==", - "license": "MIT", - "peer": true, - "dependencies": { - "@babel/code-frame": "^7.10.4", - "@babel/runtime": "^7.12.5", - "@types/aria-query": "^5.0.1", - "aria-query": "5.3.0", - "dom-accessibility-api": "^0.5.9", - "lz-string": "^1.5.0", - "picocolors": "1.1.1", - "pretty-format": "^27.0.2" - }, - "engines": { - "node": ">=18" - } - }, "node_modules/@testing-library/jest-dom": { "version": "5.17.0", "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz", @@ -4373,25 +4353,25 @@ "version": "1.0.11", "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz", "integrity": "sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==", - "devOptional": true + "dev": true }, "node_modules/@tsconfig/node12": { "version": "1.0.11", "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz", "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==", - "devOptional": true + "dev": true }, "node_modules/@tsconfig/node14": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz", "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==", - "devOptional": true + "dev": true }, "node_modules/@tsconfig/node16": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz", "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==", - "devOptional": true + "dev": true }, "node_modules/@turf/along": { "version": "7.2.0", @@ -9233,7 +9213,7 @@ "version": "1.1.1", "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz", "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==", - "devOptional": true + "dev": true }, "node_modules/cross-env": { "version": "7.0.3", @@ -10249,7 +10229,7 @@ "version": "4.0.2", "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz", "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==", - "devOptional": true, + "dev": true, "engines": { "node": ">=0.3.1" } @@ -15652,7 +15632,7 @@ "version": "1.3.6", "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz", "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==", - "devOptional": true + "dev": true }, "node_modules/makeerror": { "version": "1.0.12", @@ -21308,7 +21288,7 @@ "version": "10.9.2", "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz", "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==", - "devOptional": true, + "dev": true, "dependencies": { "@cspotcode/source-map-support": "^0.8.0", "@tsconfig/node10": "^1.0.7", @@ -21351,7 +21331,7 @@ "version": "8.3.4", "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz", "integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==", - "devOptional": true, + "dev": true, "dependencies": { "acorn": "^8.11.0" }, @@ -21363,7 +21343,7 @@ "version": "4.1.3", "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz", "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==", - "devOptional": true + "dev": true }, "node_modules/tsconfig-paths": { "version": "3.15.0", @@ -21859,7 +21839,7 @@ "version": "3.0.1", "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz", "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==", - "devOptional": true + "dev": true }, "node_modules/v8-to-istanbul": { "version": "8.1.1", @@ -22952,7 +22932,7 @@ "version": "3.1.1", "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz", "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==", - "devOptional": true, + "dev": true, "engines": { "node": ">=6" } diff --git a/app/src/components/SimulationDashboard/components/block/BlockEditor.tsx b/app/src/components/SimulationDashboard/components/block/BlockEditor.tsx index b1dfafb..93b72f7 100644 --- a/app/src/components/SimulationDashboard/components/block/BlockEditor.tsx +++ b/app/src/components/SimulationDashboard/components/block/BlockEditor.tsx @@ -1,4 +1,4 @@ -import type { RefObject } from "react"; +import { useState, type RefObject } from "react"; import { Block } from "../../../../types/exportedTypes"; import { getAlphaFromRgba, rgbaToHex } from "../../functions/helpers/colorHandlers"; import { getCurrentBlockStyleValue } from "../../functions/helpers/getCurrentBlockStyleValue"; @@ -8,6 +8,9 @@ import { handleBlurAmountChange } from "../../functions/helpers/handleBlurAmount import InputRange from "../../../ui/inputs/InputRange"; import RegularDropDown from "../../../ui/inputs/RegularDropDown"; import { DeleteIcon } from "../../../icons/ContextMenuIcons"; +import InputWithDropDown from "../../../ui/inputs/InputWithDropDown"; +import { AddIcon, DeviceIcon, EyeDroperIcon, ParametersIcon } from "../../../icons/ExportCommonIcons"; +import DataDetailedDropdown from "../../../ui/inputs/DataDetailedDropdown"; interface BlockEditorProps { blockEditorRef: RefObject; @@ -30,27 +33,48 @@ const BlockEditor: React.FC = ({ updateBlockPositionType, updateBlockZIndex, }) => { + + const [selectType, setSelectType] = useState("data") + return (

Block Style

-
+ {/*
+
*/} +
+ +
+
setSelectType("design")}> + Design +
+
setSelectType("data")}> + Data
-
- - - {/* +
+ + + + {/* updateBlockPositionType( @@ -59,55 +83,55 @@ const BlockEditor: React.FC = ({ )} search={false} /> */} -
+
+ + {currentBlock.positionType === "absolute" && ( + <> +
+ + + updateBlockPosition(selectedBlock, { + ...currentBlock.position!, + x: Number(e.target.value), + }) + } + className="form-input" + /> +
+
+ + + updateBlockPosition(selectedBlock, { + ...currentBlock.position!, + y: Number(e.target.value), + }) + } + className="form-input" + /> +
+ + )} - {currentBlock.positionType === "absolute" && ( - <>
- + - updateBlockPosition(selectedBlock, { - ...currentBlock.position!, - x: Number(e.target.value), - }) - } - className="form-input" + type="color" + value={rgbaToHex(getCurrentBlockStyleValue(currentBlock, "backgroundColor"))} + onChange={(e) => handleBackgroundColorChange(currentBlock, selectedBlock, updateBlockStyle, e.target.value)} + className="color-input" />
+
- - - updateBlockPosition(selectedBlock, { - ...currentBlock.position!, - y: Number(e.target.value), - }) - } - className="form-input" - /> -
- - )} - -
- - handleBackgroundColorChange(currentBlock, selectedBlock, updateBlockStyle, e.target.value)} - className="color-input" - /> -
- -
- {/*
+ handleBackgroundAlphaChange(currentBlock, selectedBlock, updateBlockStyle, Number(value))} + // onPointerUp={updatedDist} + key={"6"} + /> +
-
- {/*
-
- - - updateBlockSize(selectedBlock, { - ...currentBlock.size!, - width: Number(e.target.value), - }) - } - className="form-input" - /> -
+
+ + + updateBlockSize(selectedBlock, { + ...currentBlock.size!, + width: Number(e.target.value), + }) + } + className="form-input" + /> +
-
- - - updateBlockSize(selectedBlock, { - ...currentBlock.size!, - height: Number(e.target.value), - }) - } - className="form-input" - /> -
+
+ + + updateBlockSize(selectedBlock, { + ...currentBlock.size!, + height: Number(e.target.value), + }) + } + className="form-input" + /> +
-
- - updateBlockZIndex(selectedBlock, Number(e.target.value))} className="form-input" /> -
+
+ + updateBlockZIndex(selectedBlock, Number(e.target.value))} className="form-input" /> +
-
- - updateBlockStyle(selectedBlock, { padding: Number(e.target.value) })} - className="form-input" - /> -
+
+ + updateBlockStyle(selectedBlock, { padding: Number(e.target.value) })} + className="form-input" + /> +
-
- - - updateBlockStyle(selectedBlock, { - borderRadius: Number(e.target.value), - }) - } - className="form-input" - /> -
+
+ + + updateBlockStyle(selectedBlock, { + borderRadius: Number(e.target.value), + }) + } + className="form-input" + /> +
+ + + )} + + + + {selectType === "data" && ( +
+ +
+ { }} + /> +
+ }, + ], + }, + { + title: "Assets", + items: [ + { id: "cmm-001", label: "CMM-001", icon: }, + { id: "cnc-1", label: "CNC-Lathe-0001", icon: }, + { id: "cnc-2", label: "CNC-drilling-tapping-3Axis", icon: }, + { id: "cnc-3", label: "CNC_0001", icon: }, + ], + }, + ]} + value={null} + onChange={() => { }} + dropDownHeader={"RT-Data"} + eyedroper={true} + /> +
+ +
+ }, + { id: "measurementDeviation", label: "measurementDeviation", icon: }, + { id: "powerConsumption", label: "powerConsumption", icon: }, + { id: "probeX", label: "probePositionX", icon: }, + { id: "probeY", label: "probePositionY", icon: }, + { id: "probeZ", label: "probePositionZ", icon: }, + ], + }, + ]} + value={null} + onChange={() => { }} + dropDownHeader={"RT-Data-Value"} + + /> + +
+ +
+ + {/*
+
Data Mapping
+ +
+
setSelectType("design")} + > + Single Machine +
+
setSelectType("data")} + > + Multiple Machine +
+
+ +
+
+
Data Source
+
+ { }} + search={false} + /> +
+
+
+
Input 1
+
+ { }} + search={false} + /> +
+
+
+
Input 2
+
+ { }} + search={false} + /> +
+
+ +
+
+
Add Field
+
+ +
+
*/} +
+ )}
); }; diff --git a/app/src/components/icons/ExportCommonIcons.tsx b/app/src/components/icons/ExportCommonIcons.tsx index 5cd6b26..bf4315c 100644 --- a/app/src/components/icons/ExportCommonIcons.tsx +++ b/app/src/components/icons/ExportCommonIcons.tsx @@ -1748,3 +1748,29 @@ export const PerformanceStatsIcon = () => { ); }; + +export const DeviceIcon = () => { + return ( + + + + ); +}; + +export const ParametersIcon = () => { + return ( + + + + + + + + + + + + + + ); +}; diff --git a/app/src/components/layout/scenes/MainScene.tsx b/app/src/components/layout/scenes/MainScene.tsx index caaae0d..df5136c 100644 --- a/app/src/components/layout/scenes/MainScene.tsx +++ b/app/src/components/layout/scenes/MainScene.tsx @@ -188,7 +188,7 @@ function MainScene() { {!selectedUser && ( <> - {!createNewWindow && loadingProgress > 0 && } + {/* {!createNewWindow && loadingProgress > 0 && } */} {!isPlaying && ( <> {!toggleView && !isComparing && } @@ -254,7 +254,7 @@ function MainScene() { } onDragOver={(event) => event.preventDefault()} > - + {/* */} ); diff --git a/app/src/components/ui/inputs/DataDetailedDropdown.tsx b/app/src/components/ui/inputs/DataDetailedDropdown.tsx new file mode 100644 index 0000000..e099c20 --- /dev/null +++ b/app/src/components/ui/inputs/DataDetailedDropdown.tsx @@ -0,0 +1,110 @@ +import React, { useState, useMemo } from "react"; +import { EyeDroperIcon, SearchIcon } from "../../icons/ExportCommonIcons"; + +export type DropdownItem = { + id: string; + label: string; + icon?: React.ReactNode; +}; + +type DataDetailedDropdownProps = { + title: string; + placeholder?: string; + sections: { + title?: string; + items: DropdownItem[]; + }[]; + value?: DropdownItem | null; + onChange?: (item: DropdownItem) => void; + dropDownHeader?: string; + eyedroper?: boolean +}; + +const DataDetailedDropdown: React.FC = ({ + title, + placeholder = "Select value", + sections, + value, + onChange, + dropDownHeader, + eyedroper +}) => { + const [open, setOpen] = useState(false); + const [search, setSearch] = useState(""); + + const filteredSections = useMemo(() => { + if (!search) return sections; + + return sections + .map((section) => ({ + ...section, + items: section.items.filter((item) => + item.label.toLowerCase().includes(search.toLowerCase()) + ), + })) + .filter((section) => section.items.length > 0); + }, [search, sections]); + + return ( +
+
{title}
+
+
+
setOpen((v) => !v)} + > + {value?.label || placeholder} +
▾
+
+ {open && ( +
+
{dropDownHeader}
+
+
+ +
+ setSearch(e.target.value)} + /> +
+ + {filteredSections.map((section, index) => ( +
+ {section.title && ( +
+
{section.title}
+
+ {section.items.length} +
+
+ )} + + {section.items.map((item) => ( +
{ + onChange?.(item); + setOpen(false); + }} + > + {item.icon && {item.icon}} + {item.label} +
+ ))} +
+ ))} +
+ )} +
+ + {eyedroper &&
} +
+
+ ); +}; + +export default DataDetailedDropdown; diff --git a/app/src/styles/components/simulationDashboard/_simulationDashBoard.scss b/app/src/styles/components/simulationDashboard/_simulationDashBoard.scss index 73aac03..fcf21c5 100644 --- a/app/src/styles/components/simulationDashboard/_simulationDashBoard.scss +++ b/app/src/styles/components/simulationDashboard/_simulationDashBoard.scss @@ -12,7 +12,7 @@ left: 0; pointer-events: none; - * > { + *> { pointer-events: auto; } @@ -276,7 +276,7 @@ display: flex; justify-content: space-between; align-items: center; - margin: 0 0 10px 0; + // margin: 0 0 10px 0; border-bottom: 1px solid gray; padding-bottom: 10px; @@ -312,12 +312,121 @@ } &.block-editor-panel { + display: flex; + flex-direction: column; + gap: 11px; min-width: 280px; height: fit-content; - + min-width: 320px; + min-height: 70vh; + padding: 20px 8px; // h4 { // color: #4caf50; // } + + .type-switch { + display: flex; + padding: 6px 12px; + + .type { + flex: 1; + text-align: center; + padding: 4px 0; + border-radius: 19px; + cursor: pointer; + + &.active { + background: var(--background-color-button); + } + } + } + + .data-details { + display: flex; + flex-direction: column; + gap: 6px; + + .data-wrapper { + display: flex; + flex-direction: column; + gap: 6px; + padding: 6px 12px; + + .value-field-container { + margin: 0; + padding: 0; + + .label, + .input.default { + width: auto; + flex: 1; + } + } + + .data { + display: flex; + justify-content: center; + align-items: center; + gap: 9px; + + .datas_label, + .regularDropdown-container { + flex: 1; + } + } + } + + .data-mapping { + display: flex; + flex-direction: column; + gap: 9px; + background: var(--background-color); + border: 1px solid var(--border-color); + box-shadow: var(--box-shadow-medium); + padding: 15px 12px; + border-radius: 25px; + + .heading { + text-align: center; + } + + .type-switch { + padding: 0; + } + + .fields-wrapper { + display: flex; + flex-direction: column; + gap: 2px; + + .datas { + width: 100%; + display: flex; + padding: 6px 12px; + + .datas__label, + .datas__class { + flex: 1; + } + } + + .add-field { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + + svg path { + stroke: #CCACFF !important; + } + + .label { + color: #CCACFF; + } + } + } + } + } } &.element-editor-panel { @@ -534,3 +643,133 @@ } } } + + + + + + + +// DataDetailedDropdown +.data-detailed-dropdown { + display: flex; + width: 100%; + + .title, + .input-container { + flex: 1; + } + + .input-container { + width: 100%; + display: flex; + align-items: center; + gap: 6px; + + .input-wrapper { + width: 100%; + } + + .icon { + cursor: pointer; + } + } + + .input-wrapper { + + outline: 1px solid var(--input-border-color); + outline-offset: -1px; + border: none; + background: var(--background-color-input); + color: var(--input-text-color); + + border-radius: 100px; + position: relative; + + .input { + display: flex; + justify-content: space-between; + padding: 4px 8px; + } + + .dropdown-panel { + position: absolute; + z-index: 1; + top: 0; + right: 0; + transform: translateY(30px); + min-width: 200px; + padding: 12px; + + outline: 1px solid var(--border-color); + outline-offset: -1px; + border-radius: 12px; + + background: var(--background-color); + backdrop-filter: blur(20px); + + display: flex; + flex-direction: column; + gap: 8px; + + .search { + + outline: 1px solid var(--border-color); + outline-offset: -1px; + border-radius: 12px; + background: var(--background-color); + + display: flex; + align-items: center; + + padding: 4px 9px; + + .icon { + height: 10px; + display: flex; + justify-content: center; + align-items: center; + } + + input { + outline: none; + border: none; + background: transparent; + padding: 0; + padding-left: 3px; + } + } + + .data-section { + .data-header { + display: flex; + justify-content: space-between; + align-items: center; + + .data-section-count{ + font-size: 10px; + } + } + + .item { + padding: 8px 0; + display: flex; + gap: 2px; + align-items: center; + + .icon { + display: flex; + justify-content: center; + align-items: center; + } + + &.active { + span { + color: #CCACFF; + } + } + } + } + } + } +} \ No newline at end of file