s&box

swb_editor/OffsetEditor.razor

Razor UI panel for an Offset Editor in the SWB.Editor namespace. It renders a canvas with a draggable dot, hint text showing current drag mode, sliders bound to position (X,Y,Z), angles (Pitch,Yaw,Roll) and FOV, buttons to load preset animation data, and buttons to reset, copy, or print values.

@using Sandbox.UI;
@attribute [StyleSheet("/swb_editor/OffsetEditor.cs.scss")]
@inherits Panel
@namespace SWB.Editor

<root>
	<div class="canvas">
		<div class="dot"/>
	</div>
    <div class="hint">
        <div>
			<text class="title">Hold left mouse and drag (mode: </text>
			<text class="title highlight">@DragModeLabel</text>
            <text class="title">)</text>
        </div>
        <text class="subTitle">Click right mouse to change mode</text>
    </div>
    <div class="menu">
		<text class="title">Offset Editor</text>

        <text class="subTitle">Position</text>
		<SliderEntry min="-30" max="30" step="0.01" name="X" Value:bind=@X></SliderEntry>
		<SliderEntry min="-30" max="30" step="0.01" name="Y" Value:bind=@Y></SliderEntry>
		<SliderEntry min="-30" max="30" step="0.01" name="Z" Value:bind=@Z></SliderEntry>

        <text class="subTitle">Angle</text>
		<SliderEntry min="-360" max="360" step="0.01" name="Pitch" Value:bind=@Pitch></SliderEntry>
		<SliderEntry min="-360" max="360" step="0.01" name="Yaw" Value:bind=@Yaw></SliderEntry>
		<SliderEntry min="-360" max="360" step="0.01" name="Roll" Value:bind=@Roll></SliderEntry>

        <text class="subTitle">FOV</text>
		<SliderEntry min="1" max="179" step="1" name="FOV" Value:bind=@FOV></SliderEntry>

        <text class="subTitle">Use Data</text>
        <div class="dataButtons">
            <button style="background-color: #9b59b6;" @onclick=@SetAimAnimData>AimAnimData</button>
            <button style="background-color: #9b59b6;" @onclick=@SetRunAnimData>RunAnimData</button>
            <button style="background-color: #9b59b6;" class="large" @onclick=@SetCustomizeAnimData>CustomizeAnimData</button>
        </div>

        <div class="buttonContainer">
			<button style="background-color: #e84118;" @onclick=@OnReset>RESET</button>
			<button style="background-color: #4cd137;" @onclick=@OnCopy>COPY</button>
			<button style="background-color: #00a8ff;" @onclick=@OnPrint>PRINT</button>
        </div>
    </div>
</root>