Plane outline

src/ThreeEditor/Simulation/Base/Plane.ts

@@ -0,0 +1,24 @@
+import { Object3D } from 'three';
+
+import { AdditionalGeometryDataType } from '../../../util/AdditionalGeometryData';
+import { YaptideEditor } from '../../js/YaptideEditor';
+import { SimulationElement, SimulationElementJSON } from './SimulationElement';
+import { SimulationMesh } from './SimulationMesh';
+
+export type SimulationPlaneJSON = Omit<
+	SimulationElementJSON & {
+		value?: number;
+		visible: boolean;
+	},
+	never
+>;
+
+export default class Plane extends SimulationElement {
+	value: number;
+	constructor(editor: YaptideEditor, value: number = 0) {
+		super(editor, 'XYP', 'integer');
+		this.value = value;
+	}
+}
+
+export const isPlane = (x: unknown): x is Plane => x instanceof Plane;

src/ThreeEditor/components/Sidebar/properties/category/PlaneConfiguration.tsx

@@ -0,0 +1,38 @@
+import { Object3D } from 'three';
+
+import { useSmartWatchEditorState } from '../../../../../util/hooks/signals';
+import { YaptideEditor } from '../../../../js/YaptideEditor';
+// import { isPlaneConfiguration } from
+import Plane, { isPlane } from '../../../../Simulation/Base/Plane';
+import { NumberPropertyField } from '../fields/PropertyField';
+import { PropertiesCategory } from './PropertiesCategory';
+
+export default function PlaneConfiguration(props: { editor: YaptideEditor; object: Plane }) {
+	const { object, editor } = props;
+	const { state: watchedObject } = useSmartWatchEditorState(
+		editor,
+		isPlane(object) ? object : null
+	);
+
+	const visibleFlag = isPlane(watchedObject);
+
+	function handleChanged(event) {
+		const num = event.target!.value;
+	}
+
+	return (
+		<PropertiesCategory
+			category='Plane value'
+			visible={visibleFlag}>
+			{watchedObject && (
+				<NumberPropertyField
+					label='Value'
+					value={object.value}
+					unit={editor.unit.name}
+					min={0}
+					onChange={v => {}}
+				/>
+			)}
+		</PropertiesCategory>
+	);
+}