Draw rectangle around UV selection

This commit is contained in:
JannisX11 2023-12-01 11:53:52 +01:00
parent 09549458c4
commit 59c45890bf
2 changed files with 37 additions and 22 deletions

View File

@ -2034,15 +2034,23 @@ span.controller_state_section_info {
color: var(--color-light); color: var(--color-light);
cursor: pointer; cursor: pointer;
} }
#uv_selection_frame {
border: 2px dashed var(--color-grid);
pointer-events: none;
position: relative;
z-index: 1;
}
#uv_rotate_handle { #uv_rotate_handle {
width: 21.4px; width: 21.4px;
height: 21.4px; height: 21.4px;
left: -21px;
top: -21px;
position: absolute; position: absolute;
text-align: center; text-align: center;
cursor: url('../assets/rotate_cursor.png') 9 9, auto; cursor: url('../assets/rotate_cursor.png') 9 9, auto;
z-index: 1;
background: var(--color-back); background: var(--color-back);
border-radius: 12px; border-radius: 12px;
pointer-events: initial;
} }
#uv_rotate_handle:hover { #uv_rotate_handle:hover {
color: var(--color-light); color: var(--color-light);
@ -2050,11 +2058,13 @@ span.controller_state_section_info {
#uv_scale_handle { #uv_scale_handle {
width: 18px; width: 18px;
height: 18px; height: 18px;
right: -16px;
bottom: -16px;
position: absolute; position: absolute;
text-align: center; text-align: center;
cursor: nw-resize; cursor: nw-resize;
z-index: 1;
background-color: var(--color-back); background-color: var(--color-back);
pointer-events: initial;
} }
#uv_scale_handle:hover { #uv_scale_handle:hover {
color: var(--color-light); color: var(--color-light);

View File

@ -3188,6 +3188,7 @@ Interface.definePanels(function() {
} }
}, },
getSelectedUVBoundingBox() { getSelectedUVBoundingBox() {
if (!Project) return [0, 0, 0, 0];
let min = [UVEditor.getUVWidth(), UVEditor.getUVHeight()]; let min = [UVEditor.getUVWidth(), UVEditor.getUVHeight()];
let max = [0, 0]; let max = [0, 0];
this.selected_faces.forEach(fkey => { this.selected_faces.forEach(fkey => {
@ -3569,6 +3570,16 @@ Interface.definePanels(function() {
uv_grid: false uv_grid: false
}) })
}, },
getUVSelectionFrameStyle() {
let box = this.getSelectedUVBoundingBox();
if (!box) return {};
return {
left: this.toPixels(box[0], 0),
top: this.toPixels(box[1], 0),
width: this.toPixels(box[2] - box[0], 0),
height: this.toPixels(box[3] - box[1], 0),
};
},
isTransformingLayer() { isTransformingLayer() {
if (!this.texture || !this.texture.selected_layer) return false; if (!this.texture || !this.texture.selected_layer) return false;
let tool = Toolbox.selected; let tool = Toolbox.selected;
@ -3868,26 +3879,20 @@ Interface.definePanels(function() {
</template> </template>
<div id="uv_rotate_handle" v-if="mode == 'uv' && isRotatingAvailable()" <div id="uv_selection_frame" v-if="mode == 'uv'" :style="getUVSelectionFrameStyle()">
@mousedown.stop="rotateFace($event)" @touchstart.prevent.stop="rotateFace($event)" <div id="uv_rotate_handle" v-if="isRotatingAvailable()"
:title="tl('uv_editor.rotate_uv')" @mousedown.stop="rotateFace($event)" @touchstart.prevent.stop="rotateFace($event)"
:style="{ :title="tl('uv_editor.rotate_uv')"
left: toPixels(getSelectedUVBoundingBox()[0], -25), >
top: toPixels(getSelectedUVBoundingBox()[1], -25), <i class="material-icons">rotate_right</i>
} </div>
">
<i class="material-icons">rotate_right</i> <div id="uv_scale_handle" v-if="isScalingAvailable()"
</div> @mousedown.stop="scaleFaces($event)" @touchstart.prevent.stop="scaleFaces($event)"
:title="tl('uv_editor.scale_uv')"
<div id="uv_scale_handle" v-if="mode == 'uv' && isScalingAvailable()" >
@mousedown.stop="scaleFaces($event)" @touchstart.prevent.stop="scaleFaces($event)" <i class="fa fa-solid fa-square-up-right"></i>
:title="tl('uv_editor.scale_uv')" </div>
:style="{
left: toPixels(getSelectedUVBoundingBox()[2], -2),
top: toPixels(getSelectedUVBoundingBox()[3], -2),
}
">
<i class="fa fa-solid fa-square-up-right"></i>
</div> </div>
<div class="selection_rectangle" <div class="selection_rectangle"