box around selected objects in editor
This commit is contained in:
parent
e56f92a4ac
commit
f8c8c3f5b7
|
|
@ -2,7 +2,8 @@ import { observer } from "mobx-react-lite";
|
||||||
import type { ObjectInstance } from "../types";
|
import type { ObjectInstance } from "../types";
|
||||||
import { useEffect, useRef, type RefObject } from "react";
|
import { useEffect, useRef, type RefObject } from "react";
|
||||||
import type { Group } from "three";
|
import type { Group } from "three";
|
||||||
import { Edges, TransformControls } from "@react-three/drei";
|
import { TransformControls, useHelper } from "@react-three/drei";
|
||||||
|
import { BoxHelper } from "three";
|
||||||
import type { ThreeEvent } from "@react-three/fiber";
|
import type { ThreeEvent } from "@react-three/fiber";
|
||||||
import { state } from "../state";
|
import { state } from "../state";
|
||||||
import { nextSelectionEditMode } from "../state/worldEditorState";
|
import { nextSelectionEditMode } from "../state/worldEditorState";
|
||||||
|
|
@ -16,11 +17,14 @@ export const ObjectView = observer(function ({ object }: ObjectViewProps) {
|
||||||
const groupRef = useRef<Group>(null);
|
const groupRef = useRef<Group>(null);
|
||||||
const controlsRef = useRef<any>(null);
|
const controlsRef = useRef<any>(null);
|
||||||
|
|
||||||
|
const isSelected = state.worldEditor.isEnabled &&
|
||||||
|
state.worldEditor.selectedObjectId === object.id;
|
||||||
|
|
||||||
|
useHelper(isSelected ? groupRef : { current: null } as any, BoxHelper, 'white');
|
||||||
|
|
||||||
const objectType = state.world.getObjectTypeById(object.typeId);
|
const objectType = state.world.getObjectTypeById(object.typeId);
|
||||||
if (!objectType)
|
if (!objectType)
|
||||||
return null;
|
return null;
|
||||||
const isSelected = state.worldEditor.isEnabled &&
|
|
||||||
state.worldEditor.selectedObjectId === object.id;
|
|
||||||
const selectionMode = isSelected
|
const selectionMode = isSelected
|
||||||
? state.worldEditor.selectedObjectMode
|
? state.worldEditor.selectedObjectMode
|
||||||
: undefined;
|
: undefined;
|
||||||
|
|
@ -91,7 +95,6 @@ export const ObjectView = observer(function ({ object }: ObjectViewProps) {
|
||||||
opacity={opacity}
|
opacity={opacity}
|
||||||
transparent={opacity < 1}
|
transparent={opacity < 1}
|
||||||
/>
|
/>
|
||||||
{isSelected && <Edges color="white" lineWidth={3} stencilWrite={false} />}
|
|
||||||
</mesh>
|
</mesh>
|
||||||
);
|
);
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
import { observer } from "mobx-react-lite";
|
import { observer } from "mobx-react-lite";
|
||||||
|
|
||||||
import { state } from "../state";
|
import { state } from "../state";
|
||||||
import type { RunningGameState } from "../types";
|
|
||||||
|
|
||||||
export const Toolbar = observer(function () {
|
export const Toolbar = observer(function () {
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,6 @@ import { makeAutoObservable } from "mobx";
|
||||||
import type { WorldState } from "./worldState";
|
import type { WorldState } from "./worldState";
|
||||||
import type { RunningGameState, Scene } from "../types";
|
import type { RunningGameState, Scene } from "../types";
|
||||||
import { clone } from "../utils";
|
import { clone } from "../utils";
|
||||||
import { state } from "./rootState";
|
|
||||||
import type { Pos3 } from "../types/3d";
|
import type { Pos3 } from "../types/3d";
|
||||||
import type { CameraProps } from "@react-three/fiber";
|
import type { CameraProps } from "@react-three/fiber";
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue